/* =========== Precision Coaching tokens (from colors_and_type.css) =========== */
  :root{
    --pc-teal-500:#02AEA1; --pc-teal-600:#028176; --pc-teal-800:#014246;
    --pc-teal-50:#E6F8F6; --pc-teal-700:#015E55;
    --pc-ink-900:#13252C; --pc-ink-700:#2A3D45; --pc-ink-500:#4A5C64;
    --pc-gray-500:#939297; --pc-gray-300:#C9CED3; --pc-gray-200:#DDE2E6;
    --pc-mist-100:#ECF1F4; --pc-mist-50:#F6F8FA; --pc-white:#FFFFFF;

    --fg-1:var(--pc-ink-900); --fg-2:var(--pc-ink-500); --fg-3:var(--pc-gray-500);
    --fg-brand:var(--pc-teal-500);
    --bg-app:var(--pc-mist-50); --bg-surface:var(--pc-white); --bg-sunken:var(--pc-mist-100);
    --bg-inverse:var(--pc-ink-900);
    --border-1:var(--pc-mist-100); --border-2:var(--pc-gray-200);

    --font-display:"Sofia Sans",system-ui,-apple-system,sans-serif;
    --font-body:"Inter",system-ui,-apple-system,sans-serif;
    --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

    --shadow-1:0 1px 2px rgba(19,37,44,.06),0 1px 1px rgba(19,37,44,.04);
    --shadow-2:0 4px 12px rgba(19,37,44,.08),0 1px 2px rgba(19,37,44,.04);
    --shadow-focus:0 0 0 3px rgba(2,174,161,.30);

    --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px;
    --ease:cubic-bezier(.2,0,0,1); --ease-emph:cubic-bezier(.3,0,0,1);
    --maxw:1200px; --pad:clamp(20px,4vw,56px);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--bg-app);color:var(--fg-1);
    font-family:var(--font-body);font-size:16px;line-height:1.55;font-weight:400;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  }
  a{color:inherit;text-decoration:none}
  p{margin:0}
  :focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:4px}
  .skip{position:absolute;left:16px;top:-48px;z-index:200;background:var(--pc-ink-900);color:#fff;font-family:var(--font-display);font-weight:600;font-size:13px;padding:10px 16px;border-radius:8px;transition:top .15s ease}
  .skip:focus{top:12px}
  .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

  /* ---- type helpers ---- */
  .eyebrow{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.30em;text-transform:uppercase;color:var(--fg-brand)}
  .overline{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.20em;text-transform:uppercase;color:var(--fg-3)}
  .display{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;line-height:1.05;margin:0}
  h1,h2,h3{margin:0;font-family:var(--font-display)}
  .lede{font-family:var(--font-body);font-size:clamp(16px,1.7vw,18px);line-height:1.55;color:var(--fg-2);max-width:56ch}

  /* ---- buttons (preview 19) ---- */
  .btn{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:13px 24px;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;line-height:1;display:inline-flex;align-items:center;gap:9px;transition:all 200ms var(--ease)}
  .btn-primary{background:var(--pc-teal-500);color:#fff}
  .btn-primary:hover{background:var(--pc-teal-600)}
  .btn-primary:active{background:var(--pc-teal-800)}
  .btn-secondary{background:#fff;color:var(--pc-ink-900);border-color:var(--pc-gray-300)}
  .btn-secondary:hover{background:var(--pc-mist-100)}
  .btn-ghost{background:transparent;color:var(--pc-teal-600);padding:13px 8px}
  .btn-ghost:hover{color:var(--pc-teal-800)}
  .on-dark.btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.22)}
  .on-dark.btn-secondary:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
  .btn .ic{width:15px;height:15px}

  /* ---- link ---- */
  .tlink{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--pc-teal-500);display:inline-flex;align-items:center;gap:7px}
  .tlink .ic{width:14px;height:14px}

  /* ---- icons ---- */
  .ic{stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:square;stroke-linejoin:miter;display:inline-block;vertical-align:middle}

  /* ---- nav (sticky app bar, white 90% + blur) ---- */
  header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-1)}
  .nav{display:flex;align-items:center;gap:26px;height:64px}
  .brand{display:flex;align-items:center;gap:9px}
  .brand .mk{width:16px;height:20px;color:var(--pc-teal-500);display:block;flex:0 0 auto}
  .brand .nm{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1;color:var(--pc-ink-900);letter-spacing:.01em}
  .brand .nm span{color:inherit}
  .links{display:flex;gap:2px;margin-left:auto}
  .links a{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--fg-2);padding:8px 12px;border-radius:6px;transition:color .16s var(--ease),background .16s var(--ease)}
  .links a:hover{color:var(--pc-ink-900);background:var(--pc-mist-100)}
  .links a.active{color:var(--pc-teal-600)}

  /* ---- pages ---- */
  .page{display:block}
  
  
  @keyframes enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

  /* ---- hero (dark stage w/ teal glow) ---- */
  .hero{position:relative;overflow:hidden;background:var(--pc-ink-900);color:#fff}
  .hero::before{content:"";position:absolute;top:-160px;left:-180px;width:520px;height:520px;background:radial-gradient(closest-side,rgba(2,174,161,.32),transparent 70%);pointer-events:none}
  .hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(32px,4.5vw,60px);align-items:center;padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(52px,6vw,84px)}
  .hero-visual{position:relative}
  .hero-visual::before{content:"";position:absolute;inset:-10% -6% -14% -6%;background:radial-gradient(58% 58% at 62% 45%,rgba(2,174,161,.24),transparent 70%);pointer-events:none;z-index:0}
  .hero-visual .ui-web{position:relative;z-index:2}
  .hero-visual .ui-phone{position:absolute;right:-6px;bottom:-22px;width:182px;max-width:48%;z-index:3;padding:8px;border-radius:34px;box-shadow:0 26px 54px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.09)}
  .hero-visual .ui-phone .scr{border-radius:27px}
  .hero-visual .ui-phone .island{width:62px;height:18px;top:8px;border-radius:10px}
  @media (max-width:940px){
    .hero-in{grid-template-columns:1fr;gap:38px}
    .hero-visual{max-width:640px}
    .hero-visual .ui-phone{position:relative;right:auto;bottom:auto;width:190px;max-width:none;padding:9px;margin:-40px 0 0 auto;box-shadow:0 20px 44px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.09)}
    .hero-visual .ui-phone .scr{border-radius:29px}
    .hero-visual .ui-phone .island{width:70px;height:20px;top:9px;border-radius:11px}
  }
  .hero .eyebrow{color:var(--pc-teal-500)}
  .hero h1{font-family:var(--font-display);font-weight:300;font-size:clamp(33px,4vw,52px);line-height:1.04;letter-spacing:-.015em;margin-top:16px;max-width:16ch}
  .hero .lede{color:rgba(255,255,255,.72);margin-top:18px}
  .actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
  .proof{display:flex;margin-top:46px;flex-wrap:wrap}
  .proof .stat{padding-right:34px}
  .proof .stat + .stat{padding-left:34px;border-left:1px solid rgba(255,255,255,.14)}
  .proof .num{font-family:var(--font-display);font-weight:300;font-size:clamp(30px,3.4vw,40px);line-height:1;letter-spacing:-.01em}
  .proof .lab{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:8px}

  /* ---- hero product panel ---- */
  .panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:20px}
  .panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .panel-head .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.55)}
  .live{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--pc-teal-500)}
  .live .dot{width:6px;height:6px;border-radius:50%;background:var(--pc-teal-500)}
  @media (prefers-reduced-motion:no-preference){.live .dot{animation:pulse 2.4s infinite}}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(2,174,161,.5)}70%{box-shadow:0 0 0 8px rgba(2,174,161,0)}100%{box-shadow:0 0 0 0 rgba(2,174,161,0)}}
  .panel svg.chart{display:block;width:100%;height:auto}
  @media (prefers-reduced-motion:no-preference){.js-draw .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s var(--ease) forwards .15s}}
  @keyframes draw{to{stroke-dashoffset:0}}
  .ai{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
  .ai .spark{width:26px;height:26px;flex:0 0 auto;border-radius:7px;background:rgba(2,174,161,.16);color:var(--pc-teal-500);display:flex;align-items:center;justify-content:center}
  .ai .spark .ic{width:15px;height:15px}
  .ai .txt .k{font-family:var(--font-display);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
  .ai .txt p{font-family:var(--font-body);font-size:13px;line-height:1.5;color:rgba(255,255,255,.82);margin-top:3px}

  /* ---- sections ---- */
  .section{padding:clamp(56px,6.5vw,104px) 0;background:var(--bg-surface)}
  .page:not([data-page="home"]) .section{padding-top:clamp(48px,5.5vw,84px);padding-bottom:clamp(48px,5.5vw,84px)}
  .page:not([data-page="home"]) .pageintro + .section{padding-top:clamp(16px,2vw,28px)}
  .section.sunken{background:var(--bg-sunken)}
  .section.inverse{background:var(--pc-ink-900);color:#fff}
  .section-head{max-width:60ch}
  .section-head.center{max-width:70ch;margin-left:auto;margin-right:auto;text-align:center}
  .section-head.center .lede{margin-left:auto;margin-right:auto;max-width:58ch}
  .section-head h2{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-.01em;margin-top:14px}
  .section-head .lede{margin-top:16px}
  .inverse .section-head h2{color:#fff}
  .inverse .lede{color:rgba(255,255,255,.72)}
  .inverse .eyebrow{color:var(--pc-teal-500)}
  .section.inverse .feat-copy h3{color:#fff}
  .section.inverse .feat-copy p{color:rgba(255,255,255,.72)}
  .section.inverse .feat-list li{color:rgba(255,255,255,.8)}
  .section.inverse .ui-cap{color:rgba(255,255,255,.72)}
  .section.inverse .ui-cap b{color:#fff}
  .inverse .ui-phone{box-shadow:0 24px 50px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)}

  .hero-note{font-family:var(--font-display);font-weight:600;font-size:13.5px;letter-spacing:.01em;color:var(--pc-teal-500);margin-top:16px}

  /* ---- proof strip ---- */
  .proofbar{padding:clamp(24px,3vw,38px) 0;background:var(--bg-surface);border-bottom:1px solid var(--border-1)}
  .proofbar-in{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3.5vw,48px);flex-wrap:wrap}
  .pb-lead{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pc-teal-600)}
  .pb-stats{display:flex;align-items:center;flex-wrap:wrap;justify-content:center}
  .pb-stat{display:flex;flex-direction:column;gap:3px;text-align:center;padding:0 clamp(18px,3vw,40px)}
  .pb-stat + .pb-stat{border-left:1px solid var(--border-1)}
  .pb-stat b{font-family:var(--font-display);font-weight:400;font-size:clamp(19px,2.3vw,25px);letter-spacing:-.01em;color:var(--pc-ink-900);line-height:1}
  .pb-stat span{font-family:var(--font-body);font-size:12px;color:var(--fg-3)}
  @media (max-width:600px){.pb-stat{padding:0 14px}.pb-stat + .pb-stat{border-left:0}}

  .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
  .split .body p + p{margin-top:16px;color:var(--fg-2)}

  /* ---- cards ---- */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
  .card{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:26px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s var(--ease)}
  .card:hover{box-shadow:var(--shadow-2)}
  .card .cic{width:34px;height:34px;border-radius:9px;background:var(--pc-teal-50);color:var(--pc-teal-600);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
  .card .cic .ic{width:19px;height:19px}
  .card h3{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--fg-1)}
  .card p{font-size:15px;color:var(--fg-2)}

  /* AI card on dark (preview 22) */
  .aicard{background:var(--pc-ink-900);color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:24px}
  .aicard .eyebrow{color:rgba(255,255,255,.55);letter-spacing:.20em;font-size:11px}
  .aicard h3{font-family:var(--font-display);font-weight:700;font-size:20px;margin-top:10px}
  .aicard p{font-size:14px;line-height:1.55;color:rgba(255,255,255,.78);margin-top:10px}
  .aicard .foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
  .aicard .meta{font-size:11px;color:rgba(255,255,255,.5)}
  .aicard .tlink{color:var(--pc-teal-500)}

  /* products */
  .products{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
  .product{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:28px}
  .product h3{font-family:var(--font-display);font-weight:700;font-size:20px;margin:8px 0 8px}
  .product p{font-size:15px;color:var(--fg-2)}

  /* ---- value grid ---- */
  .values{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
  .value{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:28px}
  .value .cic{width:36px;height:36px;border-radius:9px;background:var(--pc-teal-50);color:var(--pc-teal-600);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  .value .cic .ic{width:20px;height:20px}
  .value h3{font-family:var(--font-display);font-weight:700;font-size:19px;margin-bottom:8px}
  .value p{font-size:15px;color:var(--fg-2)}

  /* ---- callout ---- */
  .callout{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--pc-ink-900);color:#fff;border-radius:var(--r-xl);padding:34px 40px;margin-top:48px;position:relative;overflow:hidden}
  .callout::before{content:"";position:absolute;top:-120px;right:-120px;width:380px;height:380px;background:radial-gradient(closest-side,rgba(2,174,161,.25),transparent 70%);pointer-events:none}
  .callout p{position:relative;font-family:var(--font-display);font-weight:400;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.01em;max-width:34ch}
  .callout .btn{position:relative}

  /* ---- end-to-end journey ---- */
  .journey{margin-top:44px}
  .jzones{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:22px}
  .jzone{border-radius:var(--r-md);padding:12px 16px;display:flex;flex-direction:column;gap:3px;justify-content:center}
  .jzone .zl{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.01em}
  .jzone .zs{font-family:var(--font-body);font-size:11.5px;line-height:1.35}
  .jzone.coach{grid-column:1 / span 3;background:var(--pc-ink-900);color:#fff}
  .jzone.coach .zs{color:rgba(255,255,255,.62)}
  .jzone.member{grid-column:4 / span 2;background:var(--pc-teal-500);color:#fff}
  .jzone.member .zs{color:rgba(255,255,255,.82)}
  .jrail{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;position:relative}
  .jrail::before{content:"";position:absolute;top:29px;left:10%;right:10%;height:2px;z-index:0;background:linear-gradient(90deg,var(--pc-ink-900) 0%,var(--pc-ink-900) 55%,var(--pc-teal-500) 66%,var(--pc-teal-500) 100%)}
  .jstep{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 4px}
  .jnode{width:58px;height:58px;border-radius:50%;background:#fff;border:2px solid var(--pc-ink-900);color:var(--pc-ink-900);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-1)}
  .jnode .ic{width:24px;height:24px}
  .jstep.m .jnode{border-color:var(--pc-teal-500);color:var(--pc-teal-600)}
  .jstep.end .jnode{background:var(--pc-teal-500);border-color:var(--pc-teal-500);color:#fff}
  .jtag{font-family:var(--font-display);font-weight:700;font-size:9px;letter-spacing:.14em;text-transform:uppercase;margin-top:13px}
  .jstep.c .jtag{color:var(--pc-ink-900)}
  .jstep.m .jtag{color:var(--pc-teal-600)}
  .jstep .jn{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-3);letter-spacing:.08em;margin-top:4px}
  .jstep h3{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--pc-ink-900);margin-top:2px}
  .jstep p{font-family:var(--font-body);font-size:13px;line-height:1.5;color:var(--fg-2);margin-top:7px;max-width:22ch}
  .jpay{margin-top:40px;text-align:center;font-family:var(--font-display);font-weight:400;font-size:clamp(17px,2.1vw,23px);letter-spacing:-.01em;color:var(--pc-ink-900);max-width:72ch;margin-left:auto;margin-right:auto}
  .jpay strong{color:var(--pc-teal-600);font-weight:600}
  .jedu{margin:16px auto 0;text-align:center;max-width:66ch;font-family:var(--font-body);font-size:14.5px;line-height:1.55;color:var(--fg-2)}
  #how-it-works{scroll-margin-top:84px}
  @media (max-width:820px){
    .jzones{grid-template-columns:1fr}
    .jzone.coach,.jzone.member{grid-column:auto}
    .jrail{grid-template-columns:1fr;gap:0}
    .jrail::before{top:0;bottom:0;left:28px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--pc-ink-900),var(--pc-ink-900) 55%,var(--pc-teal-500) 66%,var(--pc-teal-500))}
    .jstep{flex-direction:row;align-items:flex-start;text-align:left;gap:16px;padding:0 0 26px}
    .jstep:last-child{padding-bottom:0}
    .jnode{flex:0 0 auto}
    .jstep .jtag{margin-top:2px}
    .jstep .jtext2{padding-top:2px}
    .jstep p{max-width:40ch}
  }

  /* ---- fragmented stack (the problem) ---- */
  .frag{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
  .frag-col{border:1px solid var(--border-1);border-radius:var(--r-lg);background:var(--bg-surface);overflow:hidden;box-shadow:var(--shadow-1)}
  .frag-col .hd{font-family:var(--font-display);font-weight:700;font-size:15px;text-align:center;padding:12px;color:#fff}
  .frag-col.ops .hd{background:var(--pc-ink-900)}
  .frag-col.coach .hd{background:var(--pc-teal-600)}
  .frag-col.client .hd{background:var(--pc-teal-500);color:#fff}
  .frag-scatter{position:relative;padding:16px 14px;min-height:150px}
  .frag-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .frag-scatter .chip{position:relative;display:inline-block;background:var(--pc-mist-50);border:1px solid var(--border-2);border-radius:var(--r-pill);padding:5px 11px;font-family:var(--font-body);font-size:12px;color:var(--fg-2);margin:4px 3px;white-space:nowrap}
  .frag-note{margin-top:30px;text-align:center;font-family:var(--font-display);font-weight:400;font-size:clamp(18px,2.3vw,26px);letter-spacing:-.01em;color:var(--pc-ink-900)}
  .frag-note strong{color:var(--pc-teal-600);font-weight:600}
  @media (max-width:880px){.frag{grid-template-columns:1fr}}

  /* ---- UI showcase (mockups) ---- */
  .feat-full{margin-top:48px}
  .feat-full .ui-web{width:100%}
  .feat-full .ui-cap{margin:24px auto 0;text-align:center}
  .feat-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;margin-top:clamp(44px,5.5vw,76px)}
  .feat-split .feat-copy{max-width:42ch}
  .feat-split .feat-copy .eyebrow{display:block;margin-bottom:14px}
  .feat-split .feat-copy h3{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.1;letter-spacing:-.01em;color:var(--pc-ink-900)}
  .feat-split .feat-copy p{font-family:var(--font-body);font-size:16px;line-height:1.55;color:var(--fg-2);margin-top:14px}
  .feat-split .feat-copy .tlink{margin-top:18px}
  .feat-list{list-style:none;margin:20px 0 4px;padding:0;display:flex;flex-direction:column;gap:11px}
  .feat-list li{display:flex;gap:10px;align-items:flex-start;font-family:var(--font-body);font-size:15px;line-height:1.4;color:var(--fg-2)}
  .feat-list .li-ic{width:16px;height:16px;flex:0 0 auto;margin-top:3px;color:var(--pc-teal-500)}
  .feat-split .feat-media{display:flex;justify-content:center}
  .ui-cap{font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--fg-2);max-width:52ch}
  .ui-cap b{color:var(--pc-ink-900);font-weight:600;font-family:var(--font-display)}
  .ui-cap .tlink{margin-top:12px}
  @media (max-width:880px){.feat-split{grid-template-columns:1fr;gap:40px}.feat-split .feat-media{order:-1}}

  /* browser + admin console */
  .ui-web{border:1px solid var(--pc-gray-300);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-3);background:#fff}
  .ui-web .bar{display:flex;align-items:center;gap:7px;padding:9px 14px;background:#E9ECEF;border-bottom:1px solid var(--border-1)}
  .ui-web .bar i{width:9px;height:9px;border-radius:50%;display:block}
  .ui-web .bar i:nth-child(1){background:#E4867F}.ui-web .bar i:nth-child(2){background:#E7BE6B}.ui-web .bar i:nth-child(3){background:#8CCB9C}
  .ui-web .bar .url{margin-left:10px;font-family:var(--font-mono);font-size:10.5px;color:var(--fg-3);background:#fff;border:1px solid var(--border-1);border-radius:var(--r-pill);padding:4px 14px;flex:1;max-width:300px}
  .ui-web .app{display:grid;grid-template-columns:168px 1fr}
  .ui-web .side{background:#fff;border-right:1px solid var(--border-1);padding:15px 11px;display:flex;flex-direction:column}
  .ui-web .side .lg{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--pc-ink-900);margin-bottom:14px;padding:0 5px}
  .ui-web .side .lg svg{width:15px;height:18px;color:var(--pc-teal-500)}
  .ui-web .side .nl{font-family:var(--font-display);font-weight:600;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--pc-gray-500);padding:0 9px;margin:4px 0 6px}
  .ui-web .side a{display:flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:12.5px;color:var(--fg-2);padding:8px 9px;border-radius:7px;margin-bottom:1px}
  .ui-web .side a .ic{width:15px;height:15px;color:var(--pc-gray-500)}
  .ui-web .side a.on{background:var(--pc-teal-50);color:var(--pc-teal-700);font-weight:500}
  .ui-web .side a.on .ic{color:var(--pc-teal-600)}
  .ui-web .side .who{margin-top:auto;display:flex;align-items:center;gap:9px;padding:10px 6px 2px;border-top:1px solid var(--border-1)}
  .ui-web .side .who .av{width:26px;height:26px;border-radius:50%;background:var(--pc-ink-900);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:10px;flex:0 0 auto}
  .ui-web .side .who .wn{font-family:var(--font-display);font-weight:600;font-size:11.5px;color:var(--pc-ink-900);line-height:1.25}
  .ui-web .side .who .wn span{display:block;font-family:var(--font-body);font-weight:400;font-size:9.5px;color:var(--fg-3)}
  .ui-web .main{padding:18px 20px;background:var(--pc-mist-50);min-width:0}
  .ui-web .top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
  .ui-web .top .t{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--pc-ink-900)}
  .ui-web .top .act{display:flex;align-items:center;gap:8px}
  .ui-web .top .search{font-family:var(--font-body);font-size:11px;color:var(--fg-3);background:#fff;border:1px solid var(--border-1);border-radius:var(--r-pill);padding:6px 14px}
  .ui-web .top .add{font-family:var(--font-display);font-weight:700;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--pc-teal-500);border-radius:6px;padding:8px 12px}
  .ui-web .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
  .ui-web .tile{background:#fff;border:1px solid var(--border-1);border-radius:var(--r-md);padding:13px}
  .ui-web .tile .k{font-family:var(--font-display);font-weight:600;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
  .ui-web .tile .v{font-family:var(--font-display);font-weight:300;font-size:26px;color:var(--pc-ink-900);letter-spacing:-.02em;line-height:1;margin-top:6px}
  .ui-web .tile .d{font-family:var(--font-body);font-size:9.5px;color:var(--pc-teal-600);margin-top:5px}
  .ui-web .tile svg{display:block;width:100%;height:18px;margin-top:8px}
  .ui-web .panel{background:#fff;border:1px solid var(--border-1);border-radius:var(--r-md);overflow:hidden}
  .ui-web .panel .ph{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--border-1)}
  .ui-web .panel .ph .pt{font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--pc-ink-900)}
  .ui-web .panel .ph .pm{font-family:var(--font-body);font-size:10px;color:var(--fg-3)}
  .ui-web .thead,.ui-web .trow{display:grid;grid-template-columns:1.7fr 1fr .9fr .9fr;gap:10px;align-items:center;padding:9px 14px}
  .ui-web .thead{background:var(--pc-mist-50);border-bottom:1px solid var(--border-1);font-family:var(--font-display);font-weight:600;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
  .ui-web .trow{border-bottom:1px solid var(--border-1);font-family:var(--font-body);font-size:11.5px;color:var(--fg-2)}
  .ui-web .trow:last-child{border-bottom:0}
  .ui-web .trow .who{display:flex;align-items:center;gap:9px}
  .ui-web .trow .who .av{width:24px;height:24px;border-radius:50%;background:var(--pc-teal-50);color:var(--pc-teal-700);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:9.5px;flex:0 0 auto}
  .ui-web .trow .who .nm{font-family:var(--font-display);font-weight:600;font-size:12px;color:var(--pc-ink-900)}
  .ui-web .adopt{display:flex;align-items:center;gap:7px}
  .ui-web .adopt .track{flex:1;height:5px;border-radius:3px;background:var(--pc-mist-100);overflow:hidden}
  .ui-web .adopt .fill{display:block;height:100%;background:var(--pc-teal-500);border-radius:3px}
  .ui-web .adopt em{font-style:normal;font-family:var(--font-mono);font-size:9.5px;color:var(--fg-3)}
  .pill{display:inline-block;font-family:var(--font-body);font-size:10px;font-weight:500;padding:3px 9px;border-radius:var(--r-pill)}
  .pill.ok{background:#E6F5EE;color:#1E7A52}
  .pill.warn{background:#FBEFD8;color:#8C5F1B}
  .pill.info{background:var(--pc-teal-50);color:var(--pc-teal-800)}

  /* phone + coach app */
  .ui-phone{width:250px;max-width:80vw;margin:0 auto;background:#0A0E11;border-radius:44px;padding:11px;box-shadow:0 30px 60px rgba(19,37,44,.42),0 6px 14px rgba(0,0,0,.28);position:relative}
  .ui-phone .scr{position:relative;background:var(--pc-mist-50);border-radius:33px;overflow:hidden;aspect-ratio:9/19.3;display:flex;flex-direction:column}
  .ui-phone .island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:84px;height:24px;background:#0A0E11;border-radius:13px;z-index:10}
  .ph-status{display:flex;justify-content:space-between;align-items:center;padding:13px 22px 7px;font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--pc-ink-900)}
  .ph-status .r{display:flex;align-items:center;gap:5px;font-size:10px}
  .ph-status .r i{display:block;width:16px;height:9px;border:1px solid var(--pc-ink-900);border-radius:2px;position:relative;opacity:.75}
  .ph-status .r i::after{content:"";position:absolute;inset:1.5px;right:5px;background:var(--pc-ink-900);border-radius:1px}
  .ph-body{flex:1;overflow:hidden;padding:4px 14px 6px}
  .ph-greet{font-family:var(--font-display);font-weight:300;font-size:20px;letter-spacing:-.01em;color:var(--pc-ink-900);margin:4px 2px 2px}
  .ph-ol{font-family:var(--font-display);font-weight:600;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin:14px 2px 8px}
  .ph-client{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:1px solid var(--border-1);border-radius:var(--r-md);padding:11px 12px;box-shadow:var(--shadow-1)}
  .ph-client .n{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--pc-ink-900)}
  .ph-client .m{font-family:var(--font-mono);font-size:9.5px;color:var(--fg-3);margin-top:3px}
  .ph-session{position:relative;overflow:hidden;background:var(--pc-ink-900);border-radius:var(--r-md);padding:14px;margin-top:10px}
  .ph-session::before{content:"";position:absolute;top:-46px;right:-46px;width:140px;height:140px;background:radial-gradient(closest-side,rgba(2,174,161,.45),transparent 70%)}
  .ph-session .k{font-family:var(--font-display);font-weight:600;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--pc-teal-500);position:relative}
  .ph-session .h{font-family:var(--font-display);font-weight:700;font-size:15px;color:#fff;margin-top:5px;position:relative}
  .ph-session .s{font-family:var(--font-body);font-size:11px;line-height:1.45;color:rgba(255,255,255,.72);margin-top:5px;position:relative}
  .ph-approve{position:relative;display:inline-block;margin-top:11px;font-family:var(--font-display);font-weight:700;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--pc-ink-900);background:#fff;border-radius:6px;padding:7px 14px}
  .ph-note{background:#fff;border:1px solid var(--border-1);border-radius:var(--r-md);padding:11px 12px;margin-top:10px;font-family:var(--font-body);font-size:11px;color:var(--fg-2)}
  .ph-note b{font-family:var(--font-display);font-weight:600;color:var(--pc-ink-900)}
  .ph-tabs{display:flex;justify-content:space-around;padding:11px 6px 6px;border-top:1px solid var(--border-1);background:#fff}
  .ph-tabs span{font-family:var(--font-display);font-weight:600;font-size:8.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3)}
  .ph-tabs span.on{color:var(--pc-teal-600)}
  .ph-home{width:110px;height:4px;border-radius:3px;background:var(--pc-ink-900);opacity:.28;margin:7px auto 9px;background-clip:padding-box}
  .ui-phone .ph-home{background:var(--pc-ink-900)}

  /* ---- page intro ---- */
  .pageintro{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(36px,4vw,56px)}
  .pageintro h1{font-family:var(--font-display);font-weight:300;font-size:clamp(34px,5vw,58px);line-height:1.04;letter-spacing:-.015em;max-width:17ch;margin-top:16px}
  .pageintro .lede{margin-top:20px}
  .beats{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.20em;text-transform:uppercase;color:var(--pc-teal-600);margin-top:26px}
  .pageintro .actions{margin-top:28px}

  /* ---- subpanel ---- */
  .subpanel{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,48px);align-items:center;margin-top:54px;padding:34px;background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-xl);box-shadow:var(--shadow-1)}
  .subpanel h3{font-family:var(--font-display);font-weight:700;font-size:22px;margin-top:12px}
  .subpanel p{color:var(--fg-2)}

  /* ---- team ---- */
  .team{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:44px}
  .member{flex:1 1 300px;max-width:350px;background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:24px}
  .member .role{margin-bottom:12px}
  .member h3{font-family:var(--font-display);font-weight:700;font-size:18px}
  .member p{font-size:14px;color:var(--fg-2);margin-top:6px}

  .backers{margin-top:48px;padding:36px;border:1px solid var(--border-1);border-radius:var(--r-xl);text-align:center;background:var(--bg-surface);box-shadow:var(--shadow-1)}
  .backers p{font-family:var(--font-display);font-weight:400;font-size:clamp(19px,2.3vw,26px);letter-spacing:-.01em;margin-top:12px}
  .contact{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:48px}
  .contact h2{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,3vw,36px);letter-spacing:-.01em;margin-top:12px}
  .addr{font-family:var(--font-mono);font-size:12px;color:var(--fg-2);line-height:2}

  /* ---- footer (dark) ---- */
  footer{background:var(--pc-ink-900);color:#fff}
  .foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:30px;padding-bottom:30px}
  .foot .brand .mk{color:#fff}
  .foot .brand .nm{color:#fff}
  .foot .brand .nm span{color:inherit}
  .foot .meta a{opacity:.85}
  .foot .meta a:hover{opacity:1}
  /* ---- legal / privacy ---- */
  .legal{max-width:72ch}
  .legal h2{font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1.25;color:var(--pc-ink-900);margin:36px 0 10px}
  .legal h3{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--pc-ink-900);margin:22px 0 6px}
  .legal p,.legal li{font-family:var(--font-body);font-size:15px;line-height:1.65;color:var(--pc-ink-900)}
  .legal p{margin:0 0 12px}
  .legal ul{margin:0 0 16px;padding-left:20px}
  .legal li{margin:5px 0}
  .legal a{color:var(--pc-teal-600);text-decoration:underline}
  .legal strong{font-weight:600}
  .legal-meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:#64757a;margin-top:12px}
  .foot .meta{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}

  @media (max-width:880px){
    .hero-in,.split,.products,.subpanel,.contact{grid-template-columns:1fr}
    .cards,.team{grid-template-columns:1fr 1fr}
    .values{grid-template-columns:1fr}
  }
  @media (max-width:560px){
    .cards,.team{grid-template-columns:1fr}
    .proof{row-gap:22px}
    .proof .stat{padding-right:26px}
    .proof .stat + .stat{padding-left:26px;border-left:1px solid rgba(255,255,255,.14);margin-top:0}
  }
  /* admin console: simplify on small screens so it never overflows */
  @media (max-width:600px){
    .ui-web .app{grid-template-columns:1fr}
    .ui-web .side{display:none}
    .ui-web .main{padding:15px 15px}
    .ui-web .tiles{grid-template-columns:repeat(2,1fr);gap:8px}
    .ui-web .top{flex-wrap:wrap}
    .ui-web .thead,.ui-web .trow{grid-template-columns:1.7fr 1fr .9fr;gap:8px}
    .ui-web .thead > :nth-child(4),.ui-web .trow > :nth-child(4){display:none}
    .ui-web .tile .v{font-size:22px}
  }

  /* ==========================================================================
     Mobile refinement layer
     Added 2026-08-20. Everything below only affects small screens, except the
     .navtoggle base rule which is display:none until 880px.
     ========================================================================== */

  /* ---- menu button (hidden on desktop) ---- */
  .navtoggle{display:none;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:0;padding:0;margin-right:-10px;cursor:pointer;border-radius:8px;-webkit-tap-highlight-color:transparent}
  .navtoggle:hover{background:var(--pc-mist-100)}
  .navtoggle .bars{position:relative;display:block;width:20px;height:11px}
  .navtoggle .bars i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:var(--pc-ink-900);transition:top .2s var(--ease),transform .26s var(--ease-emph)}
  .navtoggle .bars i:nth-child(1){top:0}
  .navtoggle .bars i:nth-child(2){top:9.5px}
  header.open .navtoggle .bars i:nth-child(1){top:5px;transform:rotate(45deg)}
  header.open .navtoggle .bars i:nth-child(2){top:5px;transform:rotate(-45deg)}

  /* ---- scrim behind the open menu (element is created by app.js) ---- */
  .nav-scrim{position:fixed;inset:0;z-index:55;background:rgba(19,37,44,.32);opacity:0;visibility:hidden;transition:opacity .22s var(--ease),visibility .22s}
  body.nav-open .nav-scrim{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}

  @media (max-width:880px){
    .navtoggle{display:inline-flex}

    /* The desktop link row becomes a sheet that drops from the app bar.
       Same markup, same links, no duplicated nav. */
    .links{
      position:absolute;top:100%;left:0;right:0;
      flex-direction:column;gap:0;margin-left:0;
      background:var(--pc-white);
      border-bottom:1px solid var(--border-2);
      box-shadow:0 18px 34px rgba(19,37,44,.10);
      padding:2px 0 6px;
      opacity:0;visibility:hidden;transform:translateY(-10px);
      transition:opacity .2s var(--ease),transform .26s var(--ease-emph),visibility 0s linear .2s
    }
    header.open .links{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease),transform .26s var(--ease-emph),visibility 0s}
    /* Menu rows align to the same gutter as the logo and the page content. */
    .links a{display:flex;align-items:center;min-height:52px;padding:0 var(--pad);border-radius:0;font-size:17px;color:var(--pc-ink-900)}
    .links a + a{border-top:1px solid var(--border-1)}
    .links a:hover{background:var(--pc-mist-50)}
    .links a.active{color:var(--pc-teal-600)}

    /* ---- tap targets: nothing interactive below 44px ---- */
    .brand{min-height:44px}
    .btn{min-height:48px;padding:15px 24px}
    .tlink{min-height:44px}
    .foot .meta a{display:inline-block;padding:13px 0}
  }

  @media (max-width:560px){
    /* The 0.30em tracking on eyebrows is the brand's most recognisable type
       cue (see the PC design system), so it stays at full width on mobile.
       At 12px/0.30em this string cannot fit one line on a phone, so balance
       the wrap into two even lines instead of leaving an orphaned word. */
    /* .eyebrow is a span, and text-wrap:balance only applies to block
       containers, so give the standalone ones a block box. Both already sit on
       their own line (each is followed by a heading), so this changes nothing
       visually beyond letting the wrap balance. */
    .hero .eyebrow,.section-head .eyebrow{display:block;text-wrap:balance}

    /* The 16ch cap was squeezing the h1 into 256px of a 335px screen. */
    .hero h1{max-width:none;font-size:clamp(31px,8.4vw,36px);line-height:1.08;letter-spacing:-.02em}
    .hero .lede{margin-top:16px}

    /* Centred text over three or more lines gives the eye no left edge to
       return to. Left-align the long-form copy, keep short statements centred. */
    .section-head.center{text-align:left;margin-left:0}
    .section-head.center .lede{margin-left:0;margin-right:0}
    .jedu,.frag-note{text-align:left;margin-left:0;margin-right:0}
    .jpay{text-align:left;margin-left:0;margin-right:0}
    .feat-full .ui-cap{text-align:left;margin-left:0;margin-right:0}

    /* Smallest labels lifted to a legible floor. */
    .jtag{font-size:10px;letter-spacing:.12em}
    .jstep .jn{font-size:11px}
    .foot .meta{font-size:11.5px;letter-spacing:.1em;line-height:1.7}

    /* 40px of side padding on a 375px screen leaves the copy stranded. */
    .callout{padding:26px 22px}
    .callout p{max-width:none}

  }

  /* ---- honour reduced-motion for the menu ---- */
  @media (prefers-reduced-motion:reduce){
    .links,.nav-scrim,.navtoggle .bars i{transition:none}
  }

  /* ==========================================================================
     Mobile round two. 2026-08-20.
     1. Reading sizes lifted for handheld
     2. Hero phone centred, proof strip stacked
     3. Journey zones run down the right, spanning the steps they cover
     ========================================================================== */

  /* ---- 1. reading sizes ----
     15px and 16px are desktop conventions. On a phone held at arm's length the
     body floor wants to be 16 to 17px, which is where iOS and Android sit. */
  @media (max-width:880px){
    .lede{font-size:17px;line-height:1.6}
    .feat-split .feat-copy p{font-size:17px;line-height:1.6}
    .card p,.value p,.product p,.ui-cap,.feat-list li{font-size:16px;line-height:1.55}
    .legal p,.legal li{font-size:16px;line-height:1.7}
    .jedu{font-size:16px;line-height:1.6}
    .aicard p,.member p{font-size:15.5px;line-height:1.6}
    .jstep p{font-size:15.5px;line-height:1.55}
    .card h3,.jstep h3,.value h3{font-size:18px}
    .pb-stat span{font-size:13.5px}
    .ai .txt p{font-size:14px;line-height:1.55}
  }

  /* ---- 2a. hero phone: centre it under the console instead of hanging right ---- */
  @media (max-width:940px){
    .hero-visual .ui-phone{margin:-40px auto 0}
  }

  /* ---- 2b. proof strip: three stats in a wrapping row left one stranded on
     its own line. Stack them so the rhythm is even. ---- */
  @media (max-width:700px){
    .proofbar-in{flex-direction:column;align-items:center;gap:16px}
    .pb-stats{display:grid;grid-template-columns:1fr;gap:0;width:100%}
    .pb-stat{padding:14px 0;gap:4px;text-align:center}
    .pb-stat + .pb-stat{border-left:0;border-top:1px solid var(--border-1)}
  }

  /* ---- 3. journey zones ----
     On desktop the two zone bands sit above the rail, spanning the steps they
     cover (PTs over steps 1 to 3, members over 4 and 5). When the rail turns
     vertical that mapping was lost: both bands just stacked at the top. This
     puts them back as solid bars down the right, each spanning its own steps.

     .jzones and .jrail become display:contents so their children join one grid
     and the rows line up exactly with the steps. The rail's connector line is
     redrawn per step, because a display:contents element generates no box for
     its ::before to hang off. ---- */
  @media (max-width:820px){
    .journey{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px;column-gap:16px;align-items:stretch}
    .jzones,.jrail{display:contents}
    .jrail::before{display:none}

    .jstep{grid-column:1}
    .jstep:nth-of-type(1){grid-row:1}
    .jstep:nth-of-type(2){grid-row:2}
    .jstep:nth-of-type(3){grid-row:3}
    .jstep:nth-of-type(4){grid-row:4}
    .jstep:nth-of-type(5){grid-row:5}
    /* connector, behind the node discs (which carry a white background) */
    .jstep::before{content:"";position:absolute;left:28px;top:0;bottom:0;width:2px;z-index:-1}
    .jstep.c::before{background:var(--pc-ink-900)}
    .jstep.m::before{background:var(--pc-teal-500)}

    .jzone{grid-column:2;border-radius:var(--r-md);padding:14px 0;align-items:center;justify-content:center;gap:0}
    .jzone .zl{writing-mode:vertical-rl;font-size:12px;letter-spacing:.04em;line-height:1;white-space:nowrap}
    .jzone .zs{display:none}
    .jzone.coach{grid-row:1 / span 3}
    .jzone.member{grid-row:4 / span 2}

    .jpay,.jedu{grid-column:1 / -1}
  }

  /* ==========================================================================
     Course page. 2026-09-09. Video player + curriculum list.
     Tokens only, no new colours.
     ========================================================================== */

  /* ---- promo video ----
     preload="metadata" in the markup keeps the 11MB file off the initial page
     load; the poster carries the first impression until someone presses play. */
  .vid{position:relative;aspect-ratio:16/9;margin-top:clamp(8px,2vw,20px);border-radius:var(--r-xl);overflow:hidden;background:var(--pc-ink-900);box-shadow:var(--shadow-2);border:1px solid var(--border-2)}
  .vid video{display:block;width:100%;height:100%;object-fit:cover;background:var(--pc-ink-900)}

  /* ---- curriculum list ----
     Mono numerals so the column aligns, which is the brand's tabular-figure rule. */
  .modules{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--border-2)}
  .modules li{border-bottom:1px solid var(--border-2)}
  /* The whole row is the link, so the tap target is the full width. */
  .modules .mrow{display:flex;align-items:baseline;gap:clamp(14px,2.5vw,26px);min-height:56px;padding:16px 2px;text-decoration:none;transition:background .16s var(--ease),padding .16s var(--ease)}
  .modules .mrow:hover{background:var(--pc-mist-50)}
  .modules .mnum{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--pc-teal-600);flex:0 0 auto;min-width:2.4em}
  .modules .mtitle{font-family:var(--font-display);font-weight:600;font-size:clamp(16px,1.9vw,19px);line-height:1.35;color:var(--pc-ink-900)}
  .modules .mrow:hover .mtitle{color:var(--pc-teal-600)}
  /* Arrow marks it as going somewhere, and slides on hover. */
  .modules .mgo{width:16px;height:16px;flex:0 0 auto;margin-left:auto;align-self:center;color:var(--pc-gray-300);transition:transform .18s var(--ease-emph),color .16s var(--ease)}
  .modules .mrow:hover .mgo{color:var(--pc-teal-500);transform:translateX(3px)}

  /* The callout carries a button on this page, so let it breathe when stacked. */
  .callout .btn{flex:0 0 auto}

  @media (max-width:560px){
    .modules .mrow{padding:14px 2px;gap:14px;min-height:52px}
    .modules .mnum{min-width:2.2em}
  }

  /* ---- accreditation marks (course page) ----
     CIMSPA's marks are their trademarks, so they stay black and unaltered.
     The two shapes are very different (the lockup is 3.5:1, the shield 0.7:1),
     so they are balanced by eye rather than matched on height: equal heights
     would leave the shield tiny and the lockup dominant. */
  .accred{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
  .accred-marks{display:flex;align-items:center;justify-content:center;gap:clamp(26px,5vw,52px);flex-wrap:wrap}
  .accred-lockup{height:56px;width:auto;display:block}
  .accred-badge{height:76px;width:auto;display:block}

  /* ---- instructor with portrait ----
     Fills the content width. The portrait grows with it so the card does not
     read as a small box stranded on the left, and the bio keeps a readable
     measure rather than running the full 1200px. */
  .instructor{display:flex;align-items:center;gap:clamp(20px,3.5vw,40px);margin-top:40px;background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:clamp(20px,3vw,34px)}
  .instr-copy{max-width:74ch}
  .instr-photo{flex:0 0 auto;width:clamp(96px,17vw,200px);height:clamp(96px,17vw,200px);border-radius:var(--r-lg);object-fit:cover;background:var(--bg-sunken)}
  .instr-copy h3{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2.2vw,21px);margin-top:2px}
  .instr-copy p{font-size:15.5px;line-height:1.6;color:var(--fg-2);margin-top:8px}

  @media (max-width:560px){
    .accred-lockup{height:44px}
    .accred-badge{height:62px}
    .accred-marks{gap:24px}
    /* stack the portrait above the bio so neither gets squeezed */
    .instructor{flex-direction:column;align-items:flex-start;gap:16px}
    .instr-photo{width:112px;height:112px}
    .instr-copy p{font-size:16px}
  }

  /* ---- closing CTA with a supporting photo ----
     The photo was previously a full-width band, which dominated the page.
     Here it supports the call to action instead of competing with it. */
  .callout-media{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);align-items:center;gap:clamp(22px,4vw,44px);padding:clamp(22px,3vw,30px)}
  .callout-media .cta-photo{display:block;width:100%;height:100%;max-height:190px;object-fit:cover;border-radius:var(--r-lg);background:var(--pc-teal-800)}
  .callout-media .cta-copy{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;position:relative}
  .callout-media .cta-copy p{position:relative;font-family:var(--font-display);font-weight:400;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.01em;max-width:22ch}

  /* ---- site-wide announcement bar ----
     Sits above the sticky header and scrolls away with the page. Ink ground
     with a teal tag, so the teal stays an accent rather than a full band. */
  .sitebar{position:relative;background:var(--pc-ink-900);color:#fff}
  /* Set before first paint by the inline head script, so a dismissed bar never
     flashes and an active one never shifts the page. */
  html[data-bar-dismissed] .sitebar{display:none}
  .sitebar-link{display:block;color:#fff;text-decoration:none;transition:background .18s var(--ease)}
  .sitebar-link:hover{background:var(--pc-teal-800)}
  /* Right padding clears the dismiss button. */
  .sitebar-in{max-width:var(--maxw);margin:0 auto;min-height:44px;padding:10px calc(var(--pad) + 34px) 10px var(--pad);display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center}
  .sitebar-x{position:absolute;top:0;right:max(6px,calc(var(--pad) - 20px));width:44px;height:100%;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer;color:rgba(255,255,255,.6);-webkit-tap-highlight-color:transparent}
  .sitebar-x:hover{color:#fff}
  .sitebar-x .ic{width:15px;height:15px;stroke-width:2}
  .sitebar-tag{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pc-teal-500);flex:0 0 auto}
  .sitebar-txt{font-family:var(--font-body);font-size:14px;line-height:1.4;color:rgba(255,255,255,.86)}
  .sitebar-cta{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
  .sitebar-cta .ic{width:14px;height:14px}

  @media (max-width:640px){
    /* Three items will not sit on one phone line. Drop the middle: the tag and
       the action still say what it is and what to do, and the page explains
       the rest. */
    .sitebar-txt{display:none}
    .sitebar-in{gap:10px}
  }

  @media (max-width:560px){
    .callout-media{grid-template-columns:1fr;gap:18px}
    .callout-media .cta-photo{max-height:150px}
    .callout-media .cta-copy{flex-direction:column;align-items:flex-start}
    .instructor{flex-direction:column;align-items:flex-start;gap:16px}
    .instr-photo{width:112px;height:112px}
  }

  /* ---- real product screenshots ----
     The captures carry the app's own chrome, so a fake browser frame on top
     would be chrome on chrome. A hairline and one shadow is enough.

     Sizing rule, measured rather than guessed: a 1440px interface renders at
     roughly 0.30x in a two-column slot (illegible) and 0.64x at full container
     width (readable). So desktop screens only ever go full width; narrow slots
     get a large phone frame instead. Assets are sized so the browser never
     upscales them on a 2x display. */
  .shot{margin:0;padding:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border-2);box-shadow:var(--shadow-2);background:var(--bg-sunken);line-height:0}
  .shot img{display:block;width:100%;height:auto}
  .shot picture{display:block;line-height:0}
  .section.inverse .shot{border-color:rgba(255,255,255,.10);box-shadow:0 24px 50px rgba(0,0,0,.45)}

  /* The one directly under the page intro carries the first impression. */
  .shot-hero{margin-top:clamp(24px,3.5vw,44px);border-radius:var(--r-xl);box-shadow:var(--shadow-3)}

  /* A desktop UI at phone width lands near 0.23x, which is noise. Below 700px
     the picture element swaps to the same screen's mobile layout instead. */
  @media (max-width:700px){
    .shot-adaptive{max-width:340px;margin-left:auto;margin-right:auto;border-radius:var(--r-lg)}
  }

  .feat-full .section-head{margin-bottom:clamp(20px,3vw,30px)}
  .feat-full .section-head h3{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.1;letter-spacing:-.01em;color:var(--pc-ink-900);margin-top:12px}

  /* ---- large phone frame for two-column slots ----
     The 250px default shows a 390px screen at 0.58x. At ~390px the screen
     renders near 1:1 and real app text is legible, which is the whole point
     of using real screens. */
  .phone-lg{width:min(390px,100%);border-radius:52px;padding:13px}
  .phone-lg .scr{border-radius:40px}
  .phone-lg .island{width:96px;height:27px;top:13px;border-radius:14px}
  .phone-lg .scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
  .feat-split .feat-media .phone-lg{margin:0 auto}

  @media (max-width:560px){
    .phone-lg{width:min(320px,100%);border-radius:44px;padding:11px}
    .phone-lg .scr{border-radius:34px}
    .phone-lg .island{width:82px;height:23px;top:11px}
  }

  /* ---- deliberately cut screenshot ----
     Cropped where the app runs into empty space, so the shot carries only the
     part that says something. Square bottom and no bottom border, so the cut
     reads as "this continues" rather than as a badly framed image. The brand
     bans decorative gradients, so no fade: a clean edge instead. */
  .shot-cut{border-radius:var(--r-xl) var(--r-xl) 0 0;border-bottom:0}

  /* ---- hero phone (homepage) ----
     One confident object instead of a browser mockup and a squashed phone
     competing in the same column. At ~420px the screen renders near 1:1, so
     the real app text is legible, which a shrunken desktop screen never was.
     The white ring lifts the near-black bezel off the ink background. */
  .hero-visual .phone-hero{position:relative;right:auto;bottom:auto;max-width:none;width:min(420px,100%);margin:0 auto;padding:14px;border-radius:56px;
    box-shadow:0 34px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.10)}
  /* A 420px phone is ~870px tall, which would drive the hero past 980px and
     push everything below the fold. Let it run off the bottom instead: the
     hero already clips overflow, so this reads as the screen continuing. */
  .hero-visual .phone-hero{margin-bottom:clamp(-260px,-22vw,-150px)}
  .hero-visual .phone-hero .scr{border-radius:43px}
  .hero-visual .phone-hero .island{width:104px;height:29px;top:14px;border-radius:15px}
  .hero-visual .phone-hero .scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

  @media (max-width:940px){
    .hero-visual .phone-hero{width:min(380px,100%);margin:0 auto -120px}
  }
  @media (max-width:560px){
    .hero-visual .phone-hero{width:min(320px,100%);padding:11px;border-radius:44px;margin-bottom:-90px}
    .hero-visual .phone-hero .scr{border-radius:34px}
    .hero-visual .phone-hero .island{width:84px;height:24px;top:11px}
  }

  /* ==========================================================================
     Accessibility pass. 2026-09-10. WCAG 2.1 AA contrast.
     Measured, not guessed. The brand teal (#02AEA1) gives only 2.44-2.77:1 on
     light grounds, so it fails AA as small text, while passing at 5.70:1 on the
     ink ground. Fix is to use the darker teal tokens the design system already
     provides on light, and keep teal-500 on dark where it is the brand cue.
       teal-500 on white 2.77 fail | teal-600 4.77 | teal-700 7.68 pass
     ========================================================================== */

  /* Eyebrows and overlines on light sections. Dark sections keep teal-500,
     which passes, and which the guidelines call the brand's signature cue. */
  .eyebrow{color:var(--pc-teal-700)}
  .hero .eyebrow,.inverse .eyebrow,.section.inverse .eyebrow,.aicard .eyebrow{color:var(--pc-teal-500)}

  /* gray-500 is 3.09:1 on white. ink-500 is 6.99:1 and reads the same weight. */
  .overline{color:var(--fg-2)}
  .pb-stat span{color:var(--fg-2)}
  .jstep .jn{color:var(--fg-2)}
  .member .role{color:var(--fg-2)}

  /* teal-600 sits at 4.19-4.48 on the mist grounds, just under AA. */
  .beats{color:var(--pc-teal-700)}
  .modules .mnum{color:var(--pc-teal-700)}
  .jstep.m .jtag{color:var(--pc-teal-700)}
  .jpay strong,.frag-note strong{color:var(--pc-teal-700)}
  .pb-lead{color:var(--pc-teal-700)}

  /* White on teal-500 is 2.77:1, so the primary button was failing. teal-600
     takes it to 4.77:1 and keeps the white-on-teal treatment; hover and active
     step down accordingly. Perceptually close, and all four are brand tokens. */
  .btn-primary{background:var(--pc-teal-600)}
  .btn-primary:hover{background:var(--pc-teal-700)}
  .btn-primary:active{background:var(--pc-teal-800)}

  /* The member band and the client column header both put white on teal-500. */
  .jzone.member{background:var(--pc-teal-700)}
  .jzone.member .zs{color:rgba(255,255,255,.88)}
  .frag-col.client .hd{background:var(--pc-teal-700)}

  /* Teal on the ink ground is fine at 5.70:1, so the announcement bar tag and
     the dark-section links stay as they are. */

  /* Visually hidden but available to screen readers. Used to say when a link
     leaves the site, which WCAG 3.2.5 asks for. */
  .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

  /* ---- 404 link list ----
     This list is the page's only navigation, so the rows meet the same 44px
     target floor as the rest of the site. They also need to look like links:
     the site's base style strips underlines, which is fine for buttons and nav
     but leaves body-copy links with no affordance at all. */
  [data-page="notfound"] .feat-list{gap:0;margin-top:20px}
  [data-page="notfound"] .feat-list li{align-items:center;gap:12px}
  [data-page="notfound"] .feat-list .li-ic{margin-top:0}
  [data-page="notfound"] .feat-list a{display:flex;align-items:center;min-height:44px;color:var(--pc-teal-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  [data-page="notfound"] .feat-list a:hover{color:var(--pc-teal-800);text-decoration-thickness:2px}