/* PraxisFlow: the Interrupted Line. Single source of truth for all pages.
   Extracted from the previously inline per-page blocks, which had drifted.
   Page-specific variants are scoped with a body page-* class. */

/* ============ PraxisFlow design system (root DESIGN.md, green colorway) ============ */
:root{
    --paper:#F4F1E8; --ink:#101014; --muted:#3C3C40; --hairline:#D8D9DE;
    --inverse:#F8F6EE;
    --primary:#003F2D; --deep:#00281E; --soft:#EDF1E8; --highlight:#E7A900;
    --display:"Archivo",Arial,sans-serif;
    --text:"Archivo","Helvetica Neue",Arial,sans-serif;
    --serif:"Source Serif 4",Georgia,serif;
    --gutter:clamp(24px,4.5vw,64px);
    --measure:46ch;
    --t-display:clamp(4rem,8.6vw,8.25rem);
    --t-headline:clamp(2.75rem,5vw,5rem);
    --t-headline-sm:clamp(1.9rem,2.6vw,2.5rem);
    --t-statement:1.25rem;
    --t-title:1.125rem;
    --t-body:clamp(1rem,1.2vw,1.125rem);
    --t-micro:0.9375rem;
    --t-label:0.75rem;
    --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
    /* apple-design pass: critically damped spring (damping 1.0, response ~0.4s)
       approximated as a CSS linear() easing. No overshoot: graceful settle. */
    --spring:linear(0, 0.094 5.9%, 0.323 12.6%, 0.762 24.6%, 0.93 32.2%,
                    1.005 41.3%, 1.026 52.9%, 1.015 68.8%, 1.002 84.7%, 1);
  }
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
/* clip, not hidden: hidden creates a scroll container that silently kills
     position:sticky on the header; clip prevents horizontal scroll without one */
html, body{overflow-x:clip;}
body{background:var(--paper);color:var(--ink);font-family:var(--text);
       font-size:var(--t-body);line-height:1.5;letter-spacing:-0.01em;}
.wrap{max-width:1440px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
.label{font:700 var(--t-label)/1.2 var(--text);letter-spacing:0.04em;text-transform:uppercase;}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
::selection{background:var(--highlight);color:var(--ink);}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--primary);color:var(--inverse);
             padding:0.85rem 1.25rem;z-index:100;font:700 0.875rem/1 var(--text);}
.skip-link:focus{left:0;}
/* ============ nav (apple-design: translucent floating material) ============
     The header is a thin functional layer content scrolls beneath; separation
     comes from the material itself (blur + saturation) and a scroll-edge fade,
     never a hard 1px border. */
header{position:sticky; top:0; z-index:50; padding:1.25rem 0;
         background:color-mix(in srgb, var(--paper) 72%, transparent);
         -webkit-backdrop-filter:blur(18px) saturate(160%);
         backdrop-filter:blur(18px) saturate(160%);}
header::after{content:""; position:absolute; left:0; right:0; top:100%; height:14px;
                pointer-events:none; opacity:0;
                background:linear-gradient(to bottom, rgba(16,16,20,0.07), transparent);
                transition:opacity 300ms var(--ease-out-expo);}
html.scrolled header::after{opacity:1;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;}
.wordmark{font:700 1.125rem/1 var(--display);letter-spacing:0.18em;white-space:nowrap;}
.nav-links{display:flex;gap:2.25rem;align-items:center;}
.nav-links a{font:700 var(--t-label)/1 var(--text);letter-spacing:0.04em;text-transform:uppercase;color:var(--ink);
               transition:color 160ms var(--ease-out-expo);}
.nav-links a:hover{color:var(--primary);}
.nav-start{border:1px solid var(--primary);color:var(--primary)!important;padding:0.85rem 1.25rem;
             white-space:nowrap;flex-shrink:0;transition:background 160ms var(--ease-out-expo),color 160ms var(--ease-out-expo);}
.nav-start:hover{background:var(--primary);color:var(--inverse)!important;}
.nav-start:active{transform:scale(0.98);}
.nav-start-short{display:none;}
.nav-toggle{display:none;}
.nav-panel{display:none;}
/* base: exists only when opened at mobile widths */
/* ============ hero ============ */
.hero{position:relative;padding-top:4.5rem;}
.hero h1{
    font:700 var(--t-display)/0.96 var(--display);
    letter-spacing:-0.032em; max-width:12ch; position:relative; z-index:2;
    text-wrap:balance;
  }
.rule-band{position:absolute; left:-100vw; right:-100vw; top:50%; height:14px;
             background:var(--highlight); z-index:1; transform-origin:center;}
.hero-rule-holder{position:relative;}
/* The mask interrupts the rule behind the text. It must cover ONLY the band's
     stripe, never the full line box: with display leading below 1.0, adjacent
     line boxes overlap, and a full-height opaque background here paints over the
     descenders of the line above (the y in "They're" was getting amputated). */
.hero-rule-mask{position:relative;z-index:2;padding-right:0.35em;}
.hero-rule-mask::before{content:""; position:absolute; left:0; right:0; top:50%;
             transform:translateY(-50%); height:30px; background:var(--paper); z-index:-1;}
.hero .sub{max-width:var(--measure); margin-top:3rem;}
.btn{
    display:inline-block; background:var(--primary); color:var(--inverse);
    font:700 var(--t-label)/1.2 var(--text); letter-spacing:0.04em; text-transform:uppercase;
    padding:1.1rem 1.5rem; border:0; margin-top:2.5rem; cursor:pointer;
    transition:background 160ms var(--ease-out-expo), transform 100ms ease-out;
  }
.btn:hover{background:var(--deep);}
.btn:hover .arrow{transform:translateX(4px);}
.btn:active{transform:scale(0.98);}
.arrow{display:inline-block;transition:transform 200ms var(--ease-out-expo);}
.micro{max-width:var(--measure); margin-top:1.5rem; color:var(--muted); font-size:var(--t-micro);}
.hero-exit{height:9rem;}
/* ============ compression band ============ */
.compression{position:relative; height:120px; margin:0 0 6rem;}
.compression svg{display:block; width:100%; height:100%;}
.compression .strand{stroke:var(--primary);}
.compression .node{fill:var(--highlight);}
/* ============ sections ============ */
section{padding:0 0 7rem;}
.section-head{font:700 var(--t-headline)/0.98 var(--display);letter-spacing:-0.035em;
                max-width:16ch; text-wrap:balance;}
.section-head-sm{font:700 var(--t-headline-sm)/1.05 var(--display);letter-spacing:-0.025em;}
.section-lead{margin-top:1.5rem; max-width:var(--measure);}
.options{display:grid; grid-template-columns:1fr 1fr 1fr; margin-top:4rem;}
.option{padding:0 2.5rem 0 0;}
.option + .option{border-left:1px solid var(--hairline); padding-left:2.5rem;}
.option .label{color:var(--primary);}
.option p{margin-top:1rem; font-size:var(--t-statement); line-height:1.4; font-weight:500;}
.kicker{margin-top:4rem; font:700 clamp(1.5rem,2.2vw,2rem)/1.25 var(--display);
          letter-spacing:-0.02em; max-width:28ch;}
/* Aphorism: a standalone assertion set between prose blocks, so a long argument
     doesn't read as one undifferentiated wall. Same serif pull-quote voice as
     .kicker.accent-quote but sized as a statement, not a section closer. */
.aphorism{margin-top:2.25rem; font:600 clamp(1.375rem,2vw,1.75rem)/1.3 var(--serif);
            letter-spacing:-0.008em; max-width:34ch;}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
                   overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
/* ============ the org-shape figure (pyramid -> diamond) ============
     An editorial diagram, not decoration: it draws the site's core argument.
     Flat bars only, no outlines, no depth. Pyramid in ink (the old world),
     diamond in racing green (judgment), one gold band (the AI workforce:
     the single sanctioned highlight use in this figure). */
.org-figure{display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(1.5rem,4vw,4rem);
              align-items:end; margin-top:4.5rem; max-width:56rem;}
.org-fig svg{display:block; width:100%; height:auto;}
.org-fig .bar-ink{fill:var(--ink);}
.org-fig .bar-green{fill:var(--primary);}
.org-fig .bar-gold{fill:var(--highlight);}
.org-figure .bar{transform-box:fill-box; transform-origin:center;}
.org-caption{margin-top:1.5rem;}
.org-caption .label{color:var(--ink); display:block;}
.org-caption span{display:block; margin-top:0.4rem; color:var(--muted);
                    font-size:var(--t-micro); line-height:1.5; max-width:24ch;}
.org-arrow{padding-bottom:6.5rem; color:var(--muted);}
.org-arrow svg{display:block; width:clamp(2.5rem,5vw,4rem); height:auto;}
.org-arrow .arrow-stroke{stroke:var(--muted); stroke-width:2; fill:none;}
p.accent-quote{font-family:var(--serif)!important; font-style:italic; font-weight:600;
                 letter-spacing:-0.008em; font-optical-sizing:auto;}
.ladder{display:grid; grid-template-columns:1fr 1fr 1fr; margin-top:4rem;}
.step{padding-right:2.5rem;}
.step + .step{border-left:1px solid var(--hairline); padding-left:2.5rem;}
.step .num{font:800 3.5rem/1 var(--display); letter-spacing:-0.02em; color:var(--primary);
             font-variant-numeric:tabular-nums lining-nums;}
.step h3{font:700 1.75rem/1.1 var(--display); letter-spacing:-0.02em; margin-top:1rem;}
.step p{margin-top:1rem; color:var(--muted); font-size:var(--t-body); line-height:1.55;}
/* ============ proof band ============ */
.proof{background:var(--deep); color:var(--inverse); padding:5rem 0 4rem; margin-bottom:7rem;}
.proof .label{color:var(--inverse); opacity:0.85; letter-spacing:0.05em;}
.proof-row{display:grid; grid-template-columns:9rem 1fr 16rem; align-items:center;
             padding:2.75rem 0; border-bottom:1px solid color-mix(in srgb, var(--inverse) 30%, transparent);}
.proof-row:last-of-type{border-bottom:0;}
.proof-row .idx{font:800 clamp(3.5rem,6vw,5.5rem)/1 var(--display); letter-spacing:-0.015em;
                  font-variant-numeric:tabular-nums lining-nums;}
.proof-row .what{font:600 clamp(1.5rem,2.4vw,2.25rem)/1.2 var(--display); letter-spacing:-0.012em; max-width:20ch;}
.proof-row .time{font:800 clamp(2.25rem,4vw,3.5rem)/1 var(--display); letter-spacing:-0.015em;
                   font-variant-numeric:tabular-nums lining-nums;
                   border-left:1px solid color-mix(in srgb, var(--inverse) 30%, transparent); padding-left:2rem;}
.proof-standard{margin-top:2.5rem; max-width:60ch; font-size:var(--t-micro); opacity:0.85; line-height:1.6;}
/* ============ team + answers ============ */
.split{display:grid; grid-template-columns:1.2fr 1fr; gap:6rem;}
.split h2{font:700 clamp(2.5rem,4.4vw,4.25rem)/0.98 var(--display); letter-spacing:-0.035em; text-wrap:balance;}
.lens{padding:1.75rem 0; border-bottom:1px solid var(--hairline);}
.lens:last-of-type{border-bottom:0;}
.lens h3{font:700 var(--t-title)/1.2 var(--display);}
.lens p{margin-top:0.4rem; color:var(--muted); font-size:var(--t-micro); line-height:1.55;}
.network-note{margin-top:1.5rem; color:var(--muted); font-size:var(--t-micro); line-height:1.55; max-width:52ch;}
.team-kicker{margin-top:2rem; font:700 1.375rem/1.3 var(--display); letter-spacing:-0.015em;}
.qa{padding:1.75rem 0; border-bottom:1px solid var(--hairline);}
.qa:last-of-type{border-bottom:0;}
.qa h3{font:700 var(--t-title)/1.3 var(--display);}
.qa p{margin-top:0.5rem; color:var(--muted); font-size:var(--t-micro); line-height:1.55;}
/* ============ final CTA ============ */
.final{padding-top:2rem;padding-bottom:8rem;}
.final .rule-top{height:1px; background:var(--hairline); margin-bottom:5rem;}
.final h2{font:700 var(--t-headline)/0.98 var(--display); letter-spacing:-0.035em; max-width:18ch; text-wrap:balance;}
.final p{margin-top:2rem; max-width:var(--measure);}
/* ============ footer ============ */
footer{background:var(--deep); color:var(--inverse); padding:4rem 0;}
.foot-inner{display:flex; justify-content:space-between; align-items:flex-end; gap:3rem;}
.foot-left p{margin-top:1rem; font-size:var(--t-micro); opacity:0.85; max-width:34ch;}
/* Must wrap: with five links the row exceeds a 375px viewport and the last one,
   Start, fell entirely outside the clipped area and became unreachable. */
.foot-links{display:flex; flex-wrap:wrap; gap:0 2rem;}
.foot-links a{font:700 var(--t-label)/1 var(--text); letter-spacing:0.04em; text-transform:uppercase;
                opacity:0.9; transition:opacity 160ms var(--ease-out-expo);
                display:inline-flex; align-items:center; min-height:44px;}
.foot-links a:hover{opacity:1;}
.foot-small{margin-top:3rem; font-size:var(--t-micro); opacity:0.65; max-width:52ch; line-height:1.6;
              font-variant-numeric:tabular-nums lining-nums;}
/* ============ responsive structure ============ */
/* ============ motion (impeccable pass) ============
     One authored moment: the gold rule draws itself through the hero on load.
     Everything else is quiet: reveals enhance already-visible content (JS-gated
     initial state so no-JS renders everything), buttons respond on press. */
/* ===== motion: full (default; also forced by ?motion=full) ===== */
html.motion-full{scroll-behavior:smooth;}
html.motion-full .rule-band{transform:scaleX(0); will-change:transform;}
html.motion-full.loaded .rule-band{transform:scaleX(1);
    transition:transform 950ms var(--spring) 250ms;}
html.motion-full .reveal{opacity:0; transform:translateY(10px);}
html.motion-full .reveal.in{opacity:1; transform:none;
    transition:opacity 550ms var(--ease-out-expo), transform 700ms var(--spring);}
html.motion-full .reveal.d1.in{transition-delay:80ms;}
html.motion-full .reveal.d2.in{transition-delay:160ms;}
html.motion-full .compression .strand{stroke-dasharray:1; stroke-dashoffset:1;}
html.motion-full .compression.in .strand{stroke-dashoffset:0;
    transition:stroke-dashoffset 1100ms var(--ease-out-expo);}
html.motion-full .compression .node{opacity:0; transform:scale(0.4); transform-origin:center; transform-box:fill-box;}
html.motion-full .compression.in .node{opacity:1; transform:scale(1);
    transition:opacity 300ms var(--ease-out-expo) 700ms, transform 500ms var(--spring) 700ms;}
/* org figure: bars draw outward from center, pyramid first, then the diamond
     answers it; the arrow fades in between. Editorial reveal, no bounce. */
html.motion-full .org-figure .bar{transform:scaleX(0);}
html.motion-full .org-figure.in .bar{transform:scaleX(1); transition:transform 550ms var(--spring);}
html.motion-full .org-figure.in .org-fig svg .bar:nth-child(2){transition-delay:60ms;}
html.motion-full .org-figure.in .org-fig svg .bar:nth-child(3){transition-delay:120ms;}
html.motion-full .org-figure.in .org-fig svg .bar:nth-child(4){transition-delay:180ms;}
html.motion-full .org-figure.in .org-fig svg .bar:nth-child(5){transition-delay:240ms;}
html.motion-full .org-figure.in .org-fig svg .bar:nth-child(6){transition-delay:300ms;}
html.motion-full .org-figure.in .org-fig--answer svg .bar{transition-delay:500ms;}
html.motion-full .org-figure.in .org-fig--answer svg .bar:nth-child(2){transition-delay:560ms;}
html.motion-full .org-figure.in .org-fig--answer svg .bar:nth-child(3){transition-delay:620ms;}
html.motion-full .org-figure.in .org-fig--answer svg .bar:nth-child(4){transition-delay:680ms;}
html.motion-full .org-figure.in .org-fig--answer svg .bar:nth-child(5){transition-delay:740ms;}
html.motion-full .org-figure.in .org-fig--answer svg .bar:nth-child(6){transition-delay:820ms;}
html.motion-full .org-arrow{opacity:0;}
html.motion-full .org-figure.in .org-arrow{opacity:1; transition:opacity 400ms var(--ease-out-expo) 420ms;}
/* apple-design: the mobile panel materializes from its trigger (blur + scale
     together, anchored top), and leaves the way it came. Mobile widths only. */
/* ===== motion: soft (OS reduced-motion). Gentler, not dead: opacity-only
     crossfades, no translation, no scaling, no drawing. No-JS renders all. ===== */
html.motion-soft .reveal{opacity:0;}
html.motion-soft .reveal.in{opacity:1; transition:opacity 450ms ease;}
html.motion-soft .reveal.d1.in{transition-delay:70ms;}
html.motion-soft .reveal.d2.in{transition-delay:140ms;}
html.motion-soft .rule-band{opacity:0;}
html.motion-soft.loaded .rule-band{opacity:1; transition:opacity 650ms ease 250ms;}
html.motion-soft .compression svg{opacity:0;}
html.motion-soft .compression.in svg{opacity:1; transition:opacity 550ms ease;}
#start{scroll-margin-top:6rem;}
.nav-links a[aria-current="page"]{color:var(--primary);}
/* ============ page intro (headline weight, not the home hero) ============ */
.page-intro{padding-top:4.5rem; padding-bottom:5rem;}
.page-intro h1{font:700 var(--t-headline)/0.98 var(--display); letter-spacing:-0.035em;
                 max-width:16ch; text-wrap:balance;}
.page-intro .section-lead{margin-top:1.5rem;}
/* ============ approach: the four phases (page spine) ============ */
.phases{margin-top:4rem;}
.phase{padding:3.5rem 0; border-top:1px solid var(--hairline);}
.phase:first-child{border-top:0; padding-top:0;}
.phase-top{display:flex; flex-wrap:wrap; align-items:baseline; gap:0.75rem 2rem;}
.phase .num{font:800 3.5rem/1 var(--display); letter-spacing:-0.02em; color:var(--primary);
              font-variant-numeric:tabular-nums lining-nums;}
.phase .timeframe{font:700 var(--t-label)/1.2 var(--text); letter-spacing:0.04em;
                     text-transform:uppercase; color:var(--primary);}
.phase h3{font:700 1.75rem/1.1 var(--display); letter-spacing:-0.02em; margin-top:1rem; max-width:22ch;}
.phase p{margin-top:1.1rem; max-width:var(--measure); color:var(--muted); font-size:var(--t-body); line-height:1.6;}
.phase-get{margin-top:1.85rem;}
.phase-get .label{color:var(--primary); display:block; margin-bottom:0.4rem;}
.phase-get p{margin-top:0; max-width:var(--measure); color:var(--muted); font-size:var(--t-body); line-height:1.6;}
.phase-note{font:700 1.125rem/1.4 var(--display); letter-spacing:-0.01em; margin-top:1.85rem; max-width:var(--measure);}
/* ============ deep-forest emphasis band (reusable) ============ */
.band-deep{background:var(--deep); color:var(--inverse); padding:5rem 0 4.5rem; margin-bottom:7rem;}
.band-deep .label{color:var(--inverse); opacity:0.85; letter-spacing:0.05em;}
.rubric-formula{font:800 clamp(1.85rem,3.6vw,3.25rem)/1.3 var(--display); letter-spacing:-0.015em;
                  margin-top:2.25rem; max-width:44ch;}
.rubric-formula .x{color:var(--highlight); padding:0 0.2em;}
.band-deep .band-lead{margin-top:2.5rem; max-width:56ch; font-size:var(--t-micro); opacity:0.9; line-height:1.65;}
/* ============ one workflow, week by week ============ */
.weeks{display:grid; grid-template-columns:repeat(4,1fr); margin-top:4rem;}
.week{padding:0 2rem 0 0;}
.week + .week{border-left:1px solid var(--hairline); padding-left:2rem;}
.week h3{font:700 1.375rem/1.15 var(--display); letter-spacing:-0.015em; margin-top:0.85rem;}
.week p{margin-top:0.85rem; color:var(--muted); font-size:var(--t-micro); line-height:1.6;}
.weeks-note{margin-top:3rem; max-width:var(--measure);}
/* ============ how we actually run this / prose sections ============ */
.prose{margin-top:2rem; max-width:var(--measure);}
.prose p + p{margin-top:1.25rem;}
/* ============ why praxisflow (closing beat) ============ */
.name-story{margin-top:2rem; max-width:58ch;}
.foot-links a[aria-current="page"]{opacity:1;}
/* ============ motion (impeccable pass) ============
     Reveals enhance already-visible content (JS-gated initial state so no-JS
     renders everything), buttons respond on press. */
/* ============ bios (scannable, photo-ready) ============ */
.bios{margin-top:1rem;}
.bio{display:grid; grid-template-columns:200px 1fr; gap:2.75rem; align-items:start;
       padding:3rem 0; border-top:1px solid var(--hairline);}
.bio:first-child{border-top:0; padding-top:0;}
.portrait{aspect-ratio:4/5; background:var(--soft); width:100%;}
.bio h3{font:700 var(--t-title)/1.2 var(--display);}
.bio p{margin-top:0.85rem; max-width:var(--measure); color:var(--muted); font-size:var(--t-body); line-height:1.6;}
.band-deep h2{color:var(--inverse);}
.band-deep p{margin-top:1.5rem; max-width:62ch; font-size:var(--t-body); line-height:1.65; opacity:0.95;}
.band-deep p + p{margin-top:1.5rem;}

/* ============ the start form ============
   Square, flat, hairline-bordered. Fields are 52px tall, above the 44px
   touch-target floor. Focus uses a flat outline, never a shadow. */
.start-form{margin-top:3rem; max-width:30rem;}
.start-form .field{margin-bottom:1.75rem;}
.start-form .field .label{display:block; margin-bottom:0.5rem; color:var(--ink);}
.start-form input,
.start-form select{display:block; width:100%; min-height:52px; padding:0 0.875rem;
  font:400 var(--t-body)/1.4 var(--text); color:var(--ink);
  background:var(--inverse); border:1px solid var(--hairline); border-radius:0;
  appearance:none; -webkit-appearance:none;}
.start-form select{padding-right:2.75rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23101014' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:12px 8px;}
.start-form input:hover,
.start-form select:hover{border-color:var(--muted);}
.start-form input:focus-visible,
.start-form select:focus-visible{outline:2px solid var(--primary); outline-offset:0;
  border-color:var(--primary);}
.start-form button.btn{margin-top:0.5rem;}

/* ---- team page variants (were divergent inline copies) ---- */
.page-team .page-intro h1{font:700 var(--t-headline)/0.98 var(--display); letter-spacing:-0.035em;
                 max-width:18ch; text-wrap:balance;}
.page-team .page-intro .section-lead{margin-top:1.5rem; max-width:58ch;}
.page-team .section-head-sm{font:700 var(--t-headline-sm)/1.05 var(--display);letter-spacing:-0.025em;
                   max-width:20ch; text-wrap:balance;}

/* ============ responsive ============ */
@media (prefers-reduced-transparency: reduce){
    header{background:var(--paper); -webkit-backdrop-filter:none; backdrop-filter:none;}
  }
@media (prefers-contrast: more){
    header{background:var(--paper); border-bottom:1px solid var(--ink);}
    header::after{display:none;}
  }
@media (max-width:700px){
    .hero h1 br{display:none}
    .hero h1{line-height:0.98}
  }
@media (max-width:700px){
    .org-figure{grid-template-columns:1fr; gap:1.75rem; align-items:start;}
    .org-arrow{padding-bottom:0;}
    .org-arrow svg{transform:rotate(90deg); margin:0 auto;}
  }
@media (max-width:900px){
    .nav-links{gap:0.6rem;}
    .wordmark{font-size:1rem;}
    .nav-links > a:not(.nav-start){display:none;}
    .nav-toggle{display:inline-flex; align-items:center; min-height:44px;
                font:700 var(--t-label)/1 var(--text); letter-spacing:0.04em;
                text-transform:uppercase; background:none; border:1px solid var(--primary);
                color:var(--primary); padding:0 0.85rem; cursor:pointer;}
    .nav-start-full{display:none;}
    .nav-start-short{display:inline;}
    .nav-start{display:inline-flex; align-items:center; min-height:44px; padding:0 0.9rem;}
    .nav-panel{display:none; flex-direction:column; border-top:1px solid var(--hairline); margin-top:1.5rem;}
    .nav-panel.open{display:flex;}
    .nav-panel a{padding:1.1rem 0; border-bottom:1px solid var(--hairline);
                 font:700 1rem/1 var(--display); letter-spacing:0.01em;}
    .options{grid-template-columns:1fr; gap:2.5rem;}
    .option{padding-right:0;}
    .option + .option{border-left:0; border-top:1px solid var(--hairline); padding-left:0; padding-top:2.5rem;}
    .ladder{grid-template-columns:1fr; gap:2.75rem;}
    .step{padding-right:0;}
    .step + .step{border-left:0; border-top:1px solid var(--hairline); padding-left:0; padding-top:2.75rem;}
    .proof-row{grid-template-columns:1fr; gap:0.5rem; padding:2rem 0;}
    .proof-row .time{border-left:0; padding-left:0; margin-top:0.25rem;}
    .split{grid-template-columns:1fr; gap:4rem;}
    .foot-inner{flex-direction:column; align-items:flex-start; gap:2rem;}
    .compression{height:70px;}
  }
@media (max-width:560px){
    .hero .sub{max-width:none;}
    .kicker{font-size:clamp(1.25rem,5vw,1.5rem);}
    .proof-row .idx{font-size:2.75rem;}
    .proof-row .what{font-size:1.375rem;}
    .proof-row .time{font-size:1.75rem;}
  }
@media (max-width:900px){
    html.motion-full .nav-panel{display:flex; flex-direction:column; transform-origin:top center;
               opacity:0; transform:translateY(-6px) scale(0.995); filter:blur(6px);
               visibility:hidden; pointer-events:none;
               transition:opacity 260ms var(--ease-out-expo), transform 320ms var(--spring),
                          filter 260ms var(--ease-out-expo), visibility 0s linear 320ms;}
    html.motion-full .nav-panel.open{opacity:1; transform:none; filter:blur(0);
                    visibility:visible; pointer-events:auto; transition-delay:0s;}
  }
@media (max-width:900px){
    .nav-links{gap:0.6rem;}
    .wordmark{font-size:1rem;}
    .nav-links > a:not(.nav-start){display:none;}
    .nav-toggle{display:inline-flex; align-items:center; min-height:44px;
                font:700 var(--t-label)/1 var(--text); letter-spacing:0.04em;
                text-transform:uppercase; background:none; border:1px solid var(--primary);
                color:var(--primary); padding:0 0.85rem; cursor:pointer;}
    .nav-start-full{display:none;}
    .nav-start-short{display:inline;}
    .nav-start{display:inline-flex; align-items:center; min-height:44px; padding:0 0.9rem;}
    .nav-panel{display:none; flex-direction:column; border-top:1px solid var(--hairline); margin-top:1.5rem;}
    .nav-panel.open{display:flex;}
    .nav-panel a{padding:1.1rem 0; border-bottom:1px solid var(--hairline);
                 font:700 1rem/1 var(--display); letter-spacing:0.01em;}
    .options{grid-template-columns:1fr; gap:2.5rem;}
    .option{padding-right:0;}
    .option + .option{border-left:0; border-top:1px solid var(--hairline); padding-left:0; padding-top:2.5rem;}
    .ladder{grid-template-columns:1fr; gap:2.75rem;}
    .step{padding-right:0;}
    .step + .step{border-left:0; border-top:1px solid var(--hairline); padding-left:0; padding-top:2.75rem;}
    .weeks{grid-template-columns:1fr; gap:2.75rem;}
    .week{padding-right:0;}
    .week + .week{border-left:0; border-top:1px solid var(--hairline); padding-left:0; padding-top:2.75rem;}
    .phase-top{flex-direction:column; align-items:flex-start; gap:0.4rem;}
    .foot-inner{flex-direction:column; align-items:flex-start; gap:2rem;}
  }
@media (max-width:560px){
    .page-intro h1{max-width:none;}
  }
@media (max-width:900px){
    .nav-links{gap:0.6rem;}
    .wordmark{font-size:1rem;}
    .nav-links > a:not(.nav-start){display:none;}
    .nav-toggle{display:inline-flex; align-items:center; min-height:44px;
                font:700 var(--t-label)/1 var(--text); letter-spacing:0.04em;
                text-transform:uppercase; background:none; border:1px solid var(--primary);
                color:var(--primary); padding:0 0.85rem; cursor:pointer;}
    .nav-start-full{display:none;}
    .nav-start-short{display:inline;}
    .nav-start{display:inline-flex; align-items:center; min-height:44px; padding:0 0.9rem;}
    .nav-panel{display:none; flex-direction:column; border-top:1px solid var(--hairline); margin-top:1.5rem;}
    .nav-panel.open{display:flex;}
    .nav-panel a{padding:1.1rem 0; border-bottom:1px solid var(--hairline);
                 font:700 1rem/1 var(--display); letter-spacing:0.01em;}
    .bio{grid-template-columns:1fr; gap:1.5rem;}
    .portrait{max-width:220px; aspect-ratio:4/5;}
    .foot-inner{flex-direction:column; align-items:flex-start; gap:2rem;}
  }