/* ============================================================================================
   THE HQ.
   The look is the mockup she said yes to (ruling 171) and the rules are DESIGN-BRIEF.md, sat
   beside The Claude Collab and the Seen Loved Selling Lab.

   The five rules everything here obeys:
     1  One centred column, 880px, and the menu a quiet index on the left.
     2  Every page: a navy welcome band, then WHITE boxes stacked vertically, each with a small-caps
        label in her Pluma, each doing ONE thing. Never a grid of cards where steps belong.
     3  NAVY MARKS HIERARCHY (her words, 2026-09-11): the headline band is navy, and so is any
        "overall you've done this much" summary - the stat row on home, the true number on the
        plate. Navy is never a prompt and never a button inside a box.
     4  A prompt is CREAM with a thin gold border, labelled, with a gold copy button under it.
     5  Montserrat 300 for the reading, Bethany for every heading and the gold italic word, Pluma
        for the labels and the {asides}. Thin warm hairlines. Shadows barely there.
   ============================================================================================ */

/* her fonts, served from this app - no CDN, no falling back to Georgia on a slow morning */
@font-face{font-family:'Bethany Elingston';src:url('/fonts/BethanyElingston.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bethany Elingston';src:url('/fonts/BethanyElingston-Italic.otf') format('opentype');
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Pluma';src:url('/fonts/PlumaThin-Regular.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'BethanyElingston';src:url('/fonts/BethanyElingston.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap}

:root{
  /* ------------------------------------------------------------------------------- her colours */
  --teal:#223E4E; --teal-900:#182D39; --teal-700:#2E5368; --teal-500:#476F85; --teal-300:#8DA7B6;
  --gold:#C9952C; --gold-700:#9A7220; --gold-300:#E2B963; --gold-100:#F3DFA9;
  --cream:#EBE9E3; --sand:#E9D2AC; --blue:#899FBF;
  --bone:#F5F3EE; --bone-400:#DDDAD2;
  --live:#2e7d5b;
  /* the names a few older rules still speak */
  --navy:var(--teal); --navy2:var(--teal-900); --muted:var(--teal-700); --ink:var(--teal);
  --paper:var(--bone); --line:var(--bone-400); --gold2:var(--gold-300);

  /* ---------------------------------------------------------------------------------- her type */
  --serif:'Bethany Elingston','BethanyElingston',Georgia,'Times New Roman',serif;
  --pluma:'Pluma','Bethany Elingston',Georgia,serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;

  --t-band:clamp(32px,4.4vw,46px);   /* the headline in the band   1.07 */
  --t-hi:clamp(38px,5.4vw,56px);     /* "Hi Evie." on home         1.05 */
  --t-h2:28px;                        /* a box's own heading        1.15 */
  --t-h3:21px;                        /* a row's name               1.20 */
  --t-body:15.5px;                    /* everything she reads       1.72 */
  --t-small:13.5px;                   /* the quiet line             1.65 */
  --t-label:12.5px;                   /* the Pluma box label        .18em */
  --t-micro:10.5px;                   /* eyebrows, pills            .22em */

  /* --------------------------------------------------- space: one scale, 4 up, and nothing off it */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  --hair:1px solid var(--bone-400);
  --sh-xs:0 1px 2px rgba(34,62,78,.05);
  --sh-sm:0 4px 14px rgba(34,62,78,.06);
  --sh-band:0 10px 30px -12px rgba(34,62,78,.35);
  --ease:cubic-bezier(.22,.61,.36,1);

  --side:256px;
  --col:880px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--teal);
  font-family:var(--sans);font-weight:300;font-size:var(--t-body);line-height:1.72;
  letter-spacing:.005em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
b,strong{font-weight:600}
a{color:var(--teal);text-underline-offset:3px}
img{max-width:100%}
::selection{background:var(--sand);color:var(--teal)}
:focus-visible{outline:2px solid var(--sand);outline-offset:2px;border-radius:3px}

/* =========================================================================== THE SHELL
   A quiet index on the left, one centred column of reading on the right. */
.shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
@media (min-width:901px){
  .shell{background:linear-gradient(to right,var(--teal) var(--side),transparent var(--side))}
}
.main{padding:var(--s7) var(--s5) 96px;min-width:0}
.col{max-width:var(--col);margin:0 auto}

.topbar{display:none}
.menutoggle{position:absolute;width:1px;height:1px;opacity:0;margin:0;border:0;padding:0}
.mark{font-family:var(--serif);font-size:19px;color:#fff;text-decoration:none}
.crumbs{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sand);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ------------------------------------------------------------- the menu, the Lab's shape:
   lighter, smaller, grouped with small-caps labels, the page you are on in gold. */
.side{background:var(--teal);color:var(--cream);position:sticky;top:0;height:100vh;
  overflow:auto;display:flex;flex-direction:column;padding:0;
  scrollbar-width:thin;scrollbar-color:rgba(235,233,227,.18) transparent}
.side::-webkit-scrollbar{width:5px}
.side::-webkit-scrollbar-thumb{background:rgba(235,233,227,.16);border-radius:3px}

.side .brand{display:block;padding:var(--s5) var(--s5) var(--s5);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-family:var(--serif);font-size:23px;line-height:1.05;color:var(--cream)}
.side .brand em{color:var(--gold);font-style:italic}
/* the identity line, in the Lab's selector frame - a quiet statement of which business you are in */
.side .who{margin:0;padding:var(--s3);border-bottom:1px solid rgba(255,255,255,.06)}
.side .who span{display:block;padding:8px 12px;border-radius:6px;background:rgba(255,255,255,.05);
  font-size:12.5px;line-height:1.5;color:rgba(235,233,227,.85)}

.nav{flex:1;padding:var(--s4) var(--s3)}
.nav a{display:flex;align-items:center;gap:var(--s2);padding:9px 14px;border-radius:6px;
  font-size:13.5px;font-weight:300;line-height:1.35;color:rgba(235,233,227,.78);
  text-decoration:none;transition:background .14s var(--ease),color .14s var(--ease)}
.nav a:hover{background:rgba(255,255,255,.05);color:var(--cream)}
.nav a .n{flex:0 0 14px;font-size:10.5px;color:rgba(201,149,44,.6);text-align:center;
  font-variant-numeric:tabular-nums}
.nav a .t{flex:1 1 auto;min-width:0}
.nav a .ok{margin-left:auto;font-size:11px;color:rgba(201,149,44,.6)}
.nav a.done .n{color:var(--gold)}
.nav a.on{background:rgba(201,149,44,.14);color:var(--gold);font-weight:500}
.nav a.on .n,.nav a.on .ok{color:var(--gold)}

/* a section's own steps, opened under it - one hairline spine, the lit one gold */
.nav .subs{margin:var(--s1) 0 var(--s3);padding-left:var(--s4);
  border-left:1px solid rgba(255,255,255,.08);margin-left:var(--s5)}
.nav a.sub{padding:6px 12px;font-size:12.5px;color:rgba(235,233,227,.6)}
.nav a.sub .sn{flex:0 0 22px;text-align:left;font-size:10px;color:rgba(201,149,44,.5);
  font-variant-numeric:tabular-nums}
.nav a.sub.done{color:rgba(235,233,227,.78)}
.nav a.sub.done .sn{color:rgba(201,149,44,.8)}
.nav a.sub.on{background:rgba(201,149,44,.12);color:var(--gold)}
.nav a.sub.on .sn,.nav a.sub.on .ok{color:var(--gold)}

/* a group of menu rows, with its small-caps label */
.nav .grp{padding-top:var(--s5);margin-top:var(--s5);border-top:1px solid rgba(255,255,255,.06)}
.nav .grp>p{font-family:var(--pluma);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(235,233,227,.4);padding:0 14px;margin:0 0 var(--s2)}

.side .sep{display:none}
.side .foot{margin:0;padding:var(--s4) var(--s5) var(--s5);
  border-top:1px solid rgba(255,255,255,.06);font-size:11px;line-height:1.6;
  color:rgba(235,233,227,.5)}
.side .foot p{margin:0 0 var(--s2)}
.side .foot button{background:none;border:0;padding:0;font:inherit;font-size:11px;
  color:rgba(235,233,227,.45);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.side .foot button:hover{color:var(--gold-300)}

/* ================================================================= THE WELCOME BAND (navy)
   The headline of the page. Nothing else on the page is allowed to be this loud. */
.hero{background:var(--teal);border-radius:16px;padding:var(--s6) var(--s6) var(--s5);
  box-shadow:var(--sh-band);margin:0 0 var(--s5);color:var(--cream)}
.hero .eye{font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin:0 0 var(--s3);line-height:1.5}
.hero .eye .dot{color:rgba(201,149,44,.5);margin:0 3px}
.hero .eye em{font-style:normal;color:var(--sand)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:var(--t-band);line-height:1.07;
  letter-spacing:-.004em;color:#fff;margin:0 0 var(--s2);text-wrap:balance}
.hero h1 em{color:var(--gold);font-style:italic}
/* the light line under the heading */
.hero h1+*{position:relative;padding-top:var(--s5)}
.hero h1+*::before{content:"";position:absolute;top:var(--s4);left:0;right:28%;height:1px;
  background:linear-gradient(90deg,rgba(201,149,44,.55),rgba(201,149,44,0))}
.hero p{font-size:var(--t-body);line-height:1.68;color:rgba(235,233,227,.82);
  margin:0 0 var(--s3);max-width:58ch}
.hero p:last-child{margin-bottom:0}
.hero .lede{color:rgba(235,233,227,.9)}
.hero strong,.hero b{color:#fff;font-weight:500}
.hero .aside{font-family:var(--pluma);font-style:normal;color:var(--sand);letter-spacing:.02em}
.hero code{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:var(--sand)}
.hero .tocome,.hero .muted{color:rgba(235,233,227,.5);font-size:var(--t-small)}
.hero blockquote{border-left-color:var(--gold);color:rgba(235,233,227,.75)}
.hero ul,.hero ol{color:rgba(235,233,227,.82);margin:0 0 var(--s3);padding-left:20px}
.hero h3{font-family:var(--serif);font-size:22px;color:var(--sand);margin:var(--s4) 0 var(--s2)}
.hero a{color:var(--gold-300)}
.hero mark.hole{background:var(--gold);color:var(--teal)}

/* ---------------------------------------------- a navy SUMMARY band: "overall, this much"
   Her rule: navy draws the eye to hierarchy, and a running total is hierarchy. */
.tally{background:var(--teal);border-radius:16px;box-shadow:var(--sh-band);
  padding:var(--s5) var(--s4);margin:0 0 var(--s5);display:flex;flex-wrap:wrap}
.tally .t{flex:1 1 0;min-width:140px;text-align:center;padding:var(--s2) var(--s4);
  border-right:1px solid rgba(235,233,227,.13)}
.tally .t:last-child{border-right:0}
.tally .t b{display:block;font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;
  color:var(--gold);font-variant-numeric:tabular-nums}
.tally .t b i{font-style:normal;font-size:.46em;color:rgba(235,233,227,.5);margin-left:2px}
.tally .t span{display:block;font-family:var(--sans);font-size:9.5px;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:rgba(235,233,227,.55);margin-top:var(--s2)}
/* the same band, when it carries one big number and a sentence (the plate's true number) */
.tally.one{display:block;text-align:center;padding:var(--s6) var(--s5)}
.tally.one .lbl{font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sand);margin:0}
.tally.one .big{font-family:var(--sans);font-weight:300;font-size:46px;line-height:1.1;
  color:var(--gold);letter-spacing:-.01em;margin:var(--s2) 0 var(--s1)}
.tally.one .sub{font-size:14px;color:var(--sand);margin:0}
.tally.one .maths{font-size:11px;color:var(--blue);margin:var(--s2) 0 0}

/* ================================================================== THE VIDEO, above the doing */
.video{margin:0 0 var(--s4)}
.video .frame{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;
  background:var(--teal-900);box-shadow:var(--sh-sm)}
.video .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video.coming{background:var(--bone);border:1px dashed var(--bone-400);border-radius:14px;
  padding:var(--s5);text-align:center}
.video.coming .eye{margin:0 0 var(--s2)}
.video.coming .cta{font-family:var(--serif);font-size:22px;line-height:1.2;color:var(--teal);margin:0}
.video .muted{margin:var(--s3) 0 0}

/* ======================================================================= A BOX - ONE JOB EACH */
.card,.pastebox,.welcome,.phase,.sk,section.box,div.box,form.box{background:#fff;border:var(--hair);border-radius:14px;
  padding:var(--s5);box-shadow:var(--sh-xs);margin:0 0 var(--s4)}
.card>h3:first-child,.phase>h3:first-child{margin-top:0}
.card>p:last-child{margin-bottom:0}

/* the small-caps label that names a box - her Pluma, always, and only where one is put there */
.boxlabel,.phase>h3{
  font-family:var(--pluma);font-size:var(--t-label);font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin:0 0 var(--s4);line-height:1.5;display:block}
/* a heading inside a box stays her serif - the label above it is the small-caps part */
.card>h3:first-child,section.box>h3:first-child,.welcome>h3:first-child{margin-top:0}
.boxlabel+h3,.boxlabel+h2{margin-top:0}
.card h2,section.box h2,form.box h2{font-family:var(--serif);font-weight:400;font-size:var(--t-h2);line-height:1.15;
  color:var(--teal);margin:0 0 var(--s2)}

/* ======================================================================== THE WORDS */
h1{font-family:var(--serif);font-weight:400;font-size:var(--t-band);line-height:1.07;
  color:var(--teal);margin:0 0 var(--s3);text-wrap:balance}
h1 em,h2 em,h3 em,h4 em{font-family:var(--serif);font-style:italic;color:var(--gold)}
h2{font-family:var(--serif);font-weight:400;font-size:var(--t-h2);line-height:1.15;
  color:var(--teal);margin:0 0 var(--s3)}
h3{font-family:var(--serif);font-weight:400;font-size:var(--t-h3);line-height:1.2;
  color:var(--teal);margin:var(--s5) 0 var(--s2)}
h4{font-family:var(--serif);font-weight:400;font-size:var(--t-h3);line-height:1.2;
  color:var(--gold-700);margin:0 0 var(--s3)}
p{margin:0 0 var(--s3);max-width:68ch}
p:last-child{margin-bottom:0}
.eye{font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-700);margin:0}
.lede{font-size:16px;line-height:1.7;color:var(--teal-700)}
.aside{font-family:var(--pluma);font-style:normal;color:var(--gold-700);letter-spacing:.02em}
.muted,.kicker{font-size:var(--t-small);line-height:1.65;color:var(--teal-500)}
.ok{color:var(--gold-700);font-weight:500}
.tocome{font-family:var(--pluma);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue)}
.big{font-family:var(--serif);font-size:38px;line-height:1.05;color:var(--gold);margin:var(--s2) 0}
code{font-family:var(--mono);background:var(--bone);border:1px solid var(--bone-400);
  border-radius:4px;padding:1px 5px;font-size:12.5px}
blockquote{margin:var(--s3) 0;padding:var(--s1) 0 var(--s1) var(--s4);
  border-left:2px solid rgba(201,149,44,.5);color:var(--teal-700);font-size:14.5px;max-width:64ch}
hr{border:0;border-top:var(--hair);margin:var(--s5) 0}
ul,ol{max-width:68ch;padding-left:20px}
li{margin-bottom:var(--s1)}

/* a soft aside inside a box - never a warning stripe, just a quieter paragraph */
.note,.warn{background:var(--bone);border:var(--hair);border-left:2px solid var(--gold);
  border-radius:0 8px 8px 0;padding:var(--s3) var(--s4);font-size:14px;line-height:1.68;
  color:var(--teal-700);margin:var(--s3) 0;max-width:none}
/* one that is not inside a box sits on the cream, so it gets the white paper of a box */
.col>.note,.col>.warn{background:#fff;border-radius:0 14px 14px 0;padding:var(--s4) var(--s5);
  margin:0 0 var(--s4);box-shadow:var(--sh-xs)}
.note strong,.warn strong{color:var(--teal)}

/* ---------------------------------------------- what you're doing here, numbered (the Collab's) */
ol.todo{list-style:none;counter-reset:t;padding:0;margin:0;max-width:66ch}
ol.todo li{counter-increment:t;position:relative;padding:var(--s2) 0 var(--s2) 26px;line-height:1.7}
ol.todo li::before{content:counter(t) ".";position:absolute;left:0;top:var(--s2);
  font-weight:600;color:var(--teal)}
.doing .ps{font-size:13px;color:var(--blue);line-height:1.65;margin-top:var(--s3)}

/* =========================================================== THE PROMPT: cream, thin gold border */
.copywrap{margin:0}
.copybox,.prompt{background:var(--cream);border:1px solid rgba(201,149,44,.55);border-radius:8px;
  padding:var(--s4);font-family:var(--sans);font-weight:300;font-size:13.5px;line-height:1.72;
  white-space:pre-wrap;max-height:340px;overflow:auto;color:var(--teal-700);margin:0;
  scrollbar-width:thin;scrollbar-color:rgba(34,62,78,.2) transparent}
.copybox::-webkit-scrollbar,.prompt::-webkit-scrollbar{width:7px}
.copybox::-webkit-scrollbar-thumb,.prompt::-webkit-scrollbar-thumb{background:rgba(34,62,78,.2);border-radius:4px}
mark.hole{background:var(--gold);color:var(--teal);font-weight:500;border-radius:3px;padding:0 4px}
.copywrap .btn.copy{margin-top:var(--s4)}
.copywrap .btn.copy.copied{background:var(--gold-700);border-color:var(--gold-700);color:var(--cream)!important}

/* ================================================================================ THE BUTTONS
   Gold moves her on. Never navy inside a box. */
.btn{display:inline-block;background:var(--gold);border:1px solid var(--gold);color:var(--teal)!important;
  border-radius:4px;padding:13px 24px;font-family:var(--sans);font-weight:600;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background .14s var(--ease),color .14s var(--ease),border-color .14s var(--ease)}
.btn:hover{background:var(--gold-700);border-color:var(--gold-700);color:var(--cream)!important}
.btn.ghost,.btn.sm.ghost{background:transparent;border:1px solid rgba(34,62,78,.28);
  color:var(--teal)!important}
.btn.ghost:hover{background:rgba(34,62,78,.05);border-color:rgba(34,62,78,.45);color:var(--teal)!important}
.btn.sm{padding:10px 18px;font-size:10px;letter-spacing:.18em}
.btn:disabled{opacity:.45;cursor:not-allowed}

.pill{display:inline-block;font-family:var(--sans);font-size:9.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.5;white-space:nowrap;
  padding:4px 11px;border-radius:999px;background:rgba(201,149,44,.14);color:var(--gold-700);
  border:1px solid rgba(201,149,44,.3)}
.pill.navy{background:rgba(34,62,78,.07);color:var(--teal);border-color:rgba(34,62,78,.2)}
.pill.grey{background:transparent;color:var(--blue);border-color:var(--bone-400)}

/* ============================================================================ HOME
   The welcome page: a small pill, her name in Bethany with the name in gold, one line of what
   this is, the navy tally, then step one. */
.greet{margin:0 0 var(--s6)}
.greet .pill{font-size:10px;letter-spacing:.2em;padding:5px 13px}
.greet h1{font-size:var(--t-hi);line-height:1.05;letter-spacing:-.006em;margin:var(--s4) 0 var(--s3)}
.greet h1 em{color:var(--gold)}
.greet .lede{font-size:16px;color:var(--teal-700);max-width:60ch;margin:0}

/* step one, on home - the one box with a gold edge, because it is the only thing to do next */
.nextup{background:#fff;border:1px solid rgba(201,149,44,.45);border-radius:14px;
  padding:var(--s5);box-shadow:var(--sh-sm);margin:0 0 var(--s5)}
.nextup .boxlabel{color:var(--gold-700);margin-bottom:var(--s3)}
.nextup h2{margin-bottom:var(--s2)}
.nextup p{color:var(--teal-700)}
.nextup .btn{margin-top:var(--s4)}

/* ============================================== STEPS, STACKED VERTICALLY (never a grid)
   A section landing, home's section list, the build order and the teamie lists all share this. */
.steps{display:flex;flex-direction:column;gap:var(--s3);margin:0 0 var(--s5);padding:0;
  list-style:none;counter-reset:none;max-width:none}
.stepcard{display:flex;align-items:flex-start;gap:var(--s4);background:#fff;border:var(--hair);
  border-radius:14px;padding:var(--s4) var(--s5);box-shadow:var(--sh-xs);text-decoration:none;
  color:inherit;margin:0;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.stepcard:hover{border-color:rgba(201,149,44,.55);box-shadow:var(--sh-sm)}
.stepcard .num{flex:0 0 34px;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(201,149,44,.55);color:var(--gold-700);font-size:11px;font-weight:600;
  text-align:center;line-height:32px;margin-top:2px;font-variant-numeric:tabular-nums}
.stepcard.done .num{background:var(--gold);border-color:var(--gold);color:var(--teal)}
.stepcard .nm{flex:1 1 auto;min-width:0;font-family:var(--serif);font-weight:400;font-size:var(--t-h3);
  line-height:1.2;color:var(--teal)}
.stepcard .st{flex:0 0 auto;align-self:center;font-family:var(--sans);font-size:9.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--blue);text-align:right;max-width:16ch}
.stepcard.done .st{color:var(--gold-700)}
/* a line of what you do there, under the name */
.stepcard .nm span:not(.ai):not(.aside){display:block;font-family:var(--sans);font-weight:300;font-size:13.5px;
  line-height:1.6;color:var(--teal-700);margin-top:2px}

/* --------------------------------------- a section's card on home (the same row, with a blurb) */
.card.sect{display:flex;align-items:flex-start;gap:var(--s4);padding:var(--s4) var(--s5);
  text-decoration:none;color:inherit;
  margin:0 0 var(--s3);transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.card.sect:hover{border-color:rgba(201,149,44,.55);box-shadow:var(--sh-sm)}
.card.sect .body{flex:1 1 auto;min-width:0}
.card.sect h3{font-family:var(--serif);font-size:var(--t-h3);line-height:1.2;color:var(--teal);
  letter-spacing:0;text-transform:none;margin:0 0 2px}
.card.sect p{font-size:13.5px;line-height:1.6;color:var(--teal-700);margin:0}
.card.sect .pill{flex:0 0 auto;align-self:center}
.card.sect .btn{flex:0 0 auto;align-self:center}
.stack{margin:0}

/* the five stage words, on a section's landing */
.cols{align-items:start}
.stages{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;max-width:none;
  font-family:var(--sans);font-size:9.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  color:var(--blue);margin:0 0 var(--s5)}
.stages .lit{color:var(--teal);font-weight:600;border-bottom:1px solid var(--gold);padding-bottom:2px}
.stages .arr{color:rgba(201,149,44,.55)}

/* ======================================================================= FORMS AND THE TICK */
label{display:block;font-family:var(--sans);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold-700);margin:var(--s4) 0 var(--s2)}
label.checkline{display:flex;gap:var(--s3);align-items:flex-start;text-transform:none;letter-spacing:0;
  font-size:15px;font-weight:300;color:var(--teal);margin:var(--s3) 0;line-height:1.6}
label.checkline input{margin-top:4px;width:18px;height:18px;accent-color:var(--gold)}
input[type=text],input[type=number],textarea,select{width:100%;font-family:var(--sans);font-weight:300;
  font-size:15px;padding:11px 13px;border:1px solid var(--bone-400);border-radius:8px;
  background:#fff;color:var(--teal);
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease)}
input::placeholder,textarea::placeholder{color:var(--teal-300)}
input[type=text]:focus,input[type=number]:focus,textarea:focus,select:focus{outline:0;
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,149,44,.14)}
textarea{min-height:128px;resize:vertical;font-size:14px;line-height:1.7}
.pastebox .btn{margin-top:var(--s4)}
.placeform{margin-top:var(--s2)}
.tickform{margin:0}

/* a tick carries context: the line, and under it what ticking it means */
button.tick{display:flex;align-items:flex-start;gap:var(--s3);width:100%;text-align:left;
  background:transparent;border:0;padding:0;font-family:var(--sans);font-weight:300;font-size:15px;
  line-height:1.6;color:var(--teal);cursor:pointer}
button.tick .box{flex:0 0 22px;width:22px;height:22px;border:1.5px solid var(--blue);
  border-radius:5px;margin-top:3px;font-size:0;color:transparent;position:relative;
  transition:background .18s var(--ease),border-color .18s var(--ease)}
button.tick:hover .box{border-color:var(--gold)}
button.tick .box::after{content:"";position:absolute;left:6px;top:4px;width:7px;height:12px;
  border:2px solid var(--teal);border-top:0;border-left:0;transform:rotate(42deg) scale(.5);
  opacity:0;transition:opacity .16s var(--ease) .04s,transform .22s var(--ease)}
button.tick.on .box{background:var(--gold);border-color:var(--gold)}
button.tick.on .box::after{opacity:1;transform:rotate(42deg) scale(1)}
.tickwhy{font-size:13px;line-height:1.6;color:var(--blue);margin:var(--s2) 0 0 34px}

/* ====================================================== A LIST THAT IS REALLY STACKED BOXES
   The build order, the teamie lists, her shelf rows - same paper, same hairline, one per line. */
ol.order,ul.own{list-style:none;counter-reset:o;padding:0;margin:0 0 var(--s5);max-width:none;
  display:flex;flex-direction:column;gap:var(--s3)}
ol.order li,ul.own li{counter-increment:o;display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--s3);background:#fff;border:var(--hair);border-radius:14px;padding:var(--s4) var(--s5);
  box-shadow:var(--sh-xs);margin:0;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
ol.order li:hover,ul.own li:hover{border-color:rgba(201,149,44,.5);box-shadow:var(--sh-sm)}
ol.order li::before{content:counter(o);flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(201,149,44,.55);color:var(--gold-700);font-size:10.5px;font-weight:600;
  text-align:center;line-height:24px;font-variant-numeric:tabular-nums}
ol.order li a{flex:1 1 auto;min-width:0;text-decoration:none;color:inherit}
ol.order .nm,ul.own .nm{font-family:var(--serif);font-weight:400;font-size:var(--t-h3);line-height:1.2;
  color:var(--teal)}
ol.order li .pill{margin-left:auto}
ol.order .badges{display:inline-flex;gap:var(--s1);flex-wrap:wrap}
ol.order .why,ul.own .muted{flex-basis:100%;font-size:12.5px;line-height:1.6;color:var(--blue);
  margin:0;padding-left:38px}

/* ======================================================== ONE SKILL, ON THE SKILLS SCREEN */
.sk{padding:var(--s5)}
.sk.done{border-color:rgba(201,149,44,.5)}
.sk h3{display:flex;gap:var(--s3);align-items:baseline;flex-wrap:wrap;margin:0 0 var(--s2);
  font-family:var(--serif);font-size:var(--t-h3);line-height:1.2;color:var(--teal);
  letter-spacing:0;text-transform:none}
.sk .makes{color:var(--teal-700);font-size:14px;margin:0 0 var(--s3)}
.sk>p{margin-bottom:var(--s3)}
.roads{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin:var(--s4) 0 0;
  padding-top:var(--s4);border-top:var(--hair)}
.roads .lbl{font-family:var(--pluma);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin-right:var(--s1)}
button.road{border:1px solid var(--bone-400);background:#fff;border-radius:999px;padding:7px 14px;
  font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);cursor:pointer;
  transition:border-color .14s var(--ease),color .14s var(--ease),background .14s var(--ease)}
button.road:hover{border-color:var(--gold);color:var(--gold-700)}
button.road.on{background:var(--gold);border-color:var(--gold);color:var(--teal)}

/* ============================================================================= THE ORG CHART
   Navy for the top of the tree (that is the hierarchy), white boxes for the departments, stacked
   down the column with their teamies as rows inside. */
.topbox{display:flex;flex-direction:column;align-items:center;margin:0 0 var(--s6)}
.topbox .you,.topbox .cosbox{position:relative;width:100%;max-width:520px;text-align:center;
  background:var(--teal);color:var(--cream);border-radius:14px;padding:var(--s4) var(--s5);
  box-shadow:var(--sh-band)}
.topbox .cosbox{margin-top:var(--s6);border:1px solid rgba(201,149,44,.5);
  background-color:var(--teal);
  background-image:linear-gradient(165deg,rgba(201,149,44,.22),rgba(201,149,44,0) 70%)}
.topbox .cosbox::before{content:"";position:absolute;top:calc(var(--s6) * -1);left:50%;width:1px;
  height:var(--s6);background:linear-gradient(180deg,rgba(201,149,44,.2),var(--gold))}
.topbox .n{font-family:var(--serif);font-size:21px;line-height:1.2;color:#fff;margin:0 0 var(--s1)}
.topbox .cosbox .n{color:var(--gold)}
.topbox .s{font-size:12.5px;line-height:1.55;color:rgba(235,233,227,.7);margin:0;max-width:none}

.depts{display:flex;flex-direction:column;gap:var(--s4)}
.depts .dept,.dept{background:#fff;border:var(--hair);border-radius:14px;padding:var(--s5);
  box-shadow:var(--sh-xs)}
.dept h2,.dept h4{font-family:var(--pluma);font-size:var(--t-label);font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin:0 0 var(--s4)}
.teamies{display:flex;flex-direction:column;gap:var(--s2)}
.teamie{background:var(--bone);border:var(--hair);border-radius:10px;padding:var(--s3) var(--s4);
  color:var(--teal);transition:border-color .16s var(--ease)}
.teamie:hover{border-color:rgba(201,149,44,.5)}
.teamie.dashed{background:transparent;border-style:dashed;border-color:rgba(201,149,44,.5)}
.teamie .n{font-family:var(--serif);font-size:17px;line-height:1.22;color:var(--teal);margin:0 0 2px}
.teamie.dashed .n{color:var(--gold-700);font-style:italic}
.teamie .p{font-size:12.5px;line-height:1.55;color:var(--teal-700);margin:0 0 var(--s2);max-width:none}
.teamie .h{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-700)}
.teamie .jobs{font-size:11.5px;line-height:1.55;color:var(--blue);margin:var(--s2) 0 0;max-width:none}
.teamie.live{border-color:rgba(201,149,44,.6);background:rgba(201,149,44,.08)}

/* how far along a teamie is, as four small gold pips */
.teamie .state{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.teamie .pips{display:flex;gap:4px;flex:0 0 auto}
.teamie .pips i{width:6px;height:6px;border-radius:50%;background:rgba(34,62,78,.14)}
.teamie .pips i.lit{background:var(--gold)}
.teamie .state .lbl{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue)}
.teamie.live .state .lbl{color:var(--gold-700)}

/* her shelf, under the department the work belongs to - chips, never teamies */
.shelf,.helpers{margin-top:var(--s4);padding-top:var(--s3);border-top:1px dashed var(--bone-400)}
.shelf .hl,.helpers .hl{font-family:var(--pluma);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin:0 0 var(--s2);max-width:none}
.helper{display:inline-block;background:var(--bone);border:var(--hair);border-radius:999px;
  padding:5px 13px;margin:0 5px 5px 0;font-size:12.5px;line-height:1.5;color:var(--teal-700)}
.helper .has{color:var(--gold-700);font-weight:500}

.legend{font-family:var(--sans);font-size:11.5px;color:var(--blue);text-align:center;
  margin:var(--s5) 0 0;line-height:1.7;max-width:none}

/* ============================================================ THE SKILL WALK, BEHIND STEP 9 */
.phase{counter-reset:it}
.phase>h3+.muted{font-family:var(--serif);font-size:var(--t-h2);line-height:1.15;color:var(--teal);
  margin:0 0 var(--s4)}
.phase>h3+.muted:empty{display:none}
.phase>.card{margin:var(--s4) 0 0;background:var(--bone);box-shadow:none;border:var(--hair)}
.item{counter-increment:it;display:grid;grid-template-columns:26px 1fr;gap:0 var(--s3);
  align-items:start;border-top:var(--hair);padding:var(--s3) 0}
.item:first-of-type{border-top:0;padding-top:0}
.item::before{content:counter(it);grid-column:1;grid-row:1;width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(201,149,44,.55);color:var(--gold-700);font-size:10.5px;font-weight:600;
  text-align:center;line-height:24px;margin-top:2px}
.item>*{grid-column:2}
.item.done::before{background:var(--gold);border-color:var(--gold);color:var(--teal)}
.item .tickform{margin:0}
.item button.tick{font-size:14.5px}
.item.done button.tick{color:var(--blue)}
.item .detail{margin:var(--s1) 0 0 34px;font-size:13.5px;line-height:1.65;color:var(--teal-700);
  max-width:64ch}
.item .tip{margin:var(--s2) 0 0 34px;font-size:13px;line-height:1.65;color:var(--teal-700);
  background:var(--bone);border:var(--hair);border-left:2px solid var(--gold);
  padding:10px 14px;border-radius:0 8px 8px 0;max-width:64ch}

/* her job drawn step by step */
.pathmap{list-style:none;counter-reset:pm;margin:0;padding:0;max-width:none;
  background:var(--bone);border:var(--hair);border-radius:8px;overflow:hidden}
.pathmap li{counter-increment:pm;position:relative;margin:0;padding:10px var(--s4) 10px 116px;
  border-top:var(--hair);font-size:13px;line-height:1.7}
.pathmap li:first-child{border-top:0}
.pathmap li::before{content:counter(pm);position:absolute;left:var(--s4);top:11px;
  color:var(--gold-700);font-weight:600;font-size:11px}
.pathmap .who{position:absolute;left:36px;top:11px;width:66px;text-align:center;
  font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:3px 0;border-radius:999px;background:#fff;border:var(--hair);color:var(--blue)}
.pathmap li.claude .who{background:var(--teal);border-color:var(--teal);color:var(--cream)}
.pathmap li.hers .who{background:var(--gold);border-color:var(--gold);color:var(--teal)}
.pathmap .muted{font-size:12.5px}

/* ==================================================================== HOME'S "WHO ARE YOU" FORM */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5)}
.grid2 label{margin-top:var(--s4)}
.accessline{margin:var(--s4) 0 0;padding-top:var(--s4);border-top:1px solid rgba(34,62,78,.12);font-size:14px}
.accessline strong{font-weight:500;color:var(--teal)}
.pacing{margin:var(--s4) 0 0;font-size:var(--t-small);color:var(--blue)}

/* ========================================================= YOUR LIBRARY, AS A REAL SHELF */
.dept.lib{margin:0 0 var(--s4)}
.dept.lib h4{margin-bottom:var(--s3)}
.sk.lib{padding:var(--s3) var(--s4);margin:0 0 var(--s2);background:var(--bone);box-shadow:none}
.sk.lib:last-child{margin-bottom:0}
.sk.lib h3{font-size:18px;margin:0 0 2px;align-items:center}
.sk.lib .makes{margin:0 0 var(--s1);font-size:13px}
.sk.lib .muted{margin:0}
.sk.lib .muted a{font-family:var(--mono);font-size:11.5px;color:var(--gold-700);text-decoration:none;
  border-bottom:1px solid rgba(201,149,44,.3)}
.sk.lib .muted a:hover{border-bottom-color:var(--gold)}

/* ======================================================================= AN EMPTY STATE
   Nothing here yet is a welcome, never a telling-off. */
.card.empty{border-style:dashed;border-color:rgba(201,149,44,.45);background:var(--bone);
  text-align:center;padding:var(--s7) var(--s5)}
.card.empty h3,.card.empty h2{margin-bottom:var(--s2)}
.card.empty p{margin-left:auto;margin-right:auto}
.card.empty .btn{margin-top:var(--s3)}

/* ------------------------------------------------------------------ back and next, at the foot */
.walk{display:flex;gap:var(--s3);justify-content:space-between;align-items:center;flex-wrap:wrap;
  margin:var(--s7) 0 0;padding-top:var(--s5);border-top:var(--hair)}

/* =============================================================================== MOTION
   Small, once, on load. Never on every hover. */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero,.greet{animation:rise .45s var(--ease) both}
.tally,.video,.card,.pastebox,.welcome,.phase,.sk,.steps,.stack,ol.order,.depts,.topbox,.nextup,
.copywrap,.cols,section.box{animation:rise .45s var(--ease) both .05s}
.walk{animation:rise .45s var(--ease) both .1s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ================================================================================= ON A PHONE
   Same rules, one column, the menu folded into a top bar. */
@media (max-width:900px){
  .shell{display:block;background:none}
  .topbar{display:flex;align-items:center;gap:var(--s3);background:var(--teal);color:var(--cream);
    padding:11px var(--s4);position:sticky;top:0;z-index:20;
    box-shadow:0 1px 0 rgba(201,149,44,.3)}
  .menubtn{display:flex;flex-direction:column;justify-content:center;gap:4px;width:32px;height:32px;
    padding:8px 6px;border:1px solid rgba(235,233,227,.22);border-radius:6px;cursor:pointer;flex:0 0 32px}
  .menubtn span{display:block;height:1.5px;background:var(--gold);border-radius:2px}
  .menutoggle:focus-visible ~ .topbar .menubtn{outline:2px solid var(--sand);outline-offset:2px}
  .topbar .crumbs{margin-left:auto;max-width:44%}
  .side{display:none;position:static;height:auto;
    border-bottom:1px solid rgba(201,149,44,.25)}
  .menutoggle:checked ~ .shell .side{display:flex;animation:rise .3s var(--ease) both}
  .main{padding:var(--s5) var(--s4) 80px}
  .hero{padding:var(--s5) var(--s4)}
  .card,.pastebox,.welcome,.phase,.sk,section.box,div.box,form.box,.nextup,.stepcard,.card.sect,
  ol.order li,ul.own li,.depts .dept,.dept{padding:var(--s4)}
  .card.empty{padding:var(--s6) var(--s4)}
  .grid2{grid-template-columns:1fr}
  .tally{padding:var(--s4) var(--s2)}
  .tally .t{flex:1 1 100%;border-right:0;border-bottom:1px solid rgba(235,233,227,.13);
    padding:var(--s3) var(--s4)}
  .tally .t:last-child{border-bottom:0}
  .tally.one{padding:var(--s5) var(--s4)}
  .copybox,.prompt{max-height:52vh;padding:var(--s3);font-size:13px}
  .stepcard .st{display:none}
  .item .detail,.item .tip{margin-left:0}
  .pathmap li{padding:10px var(--s3) 10px 30px}
  .pathmap li::before{left:11px}
  .pathmap .who{position:static;display:inline-block;width:auto;padding:3px 9px;margin-right:8px}
  ol.order .why,ul.own .muted{padding-left:0}
  .topbox .you,.topbox .cosbox{max-width:none}
  .walk{margin-top:var(--s6)}
  .walk .btn{flex:1 1 100%;text-align:center}
  .btn{padding:13px 18px;letter-spacing:.16em}
}

/* ============================================================================================
   HER ORG CHART - the drawing she sells with.
   Her ruling, 2026-09-11: "It needs to look like this. I can't stress that enough. This is the
   biggest selling point... I use this everywhere in content, in my webinar, on the sales page. So
   when they see their team, it has to look like this."
   The shape, the colours, the dashed pills and the type are copied from her own two files:
   marketing/content/2026-09/ai-masterclass/blocks/b-tool.html and
   marketing/content/2026-09/advantage-reel/cards.html. Three columns are right HERE and only here.
   ============================================================================================ */
.oc{margin:0 0 var(--s5)}
.oc-frame{position:relative;width:100%;border:2px dashed rgba(201,149,44,.75);border-radius:22px;
  padding:var(--s7) var(--s5) var(--s5)}
.oc-tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--cream);
  padding:0 var(--s3);margin:0;max-width:calc(100% - var(--s6));text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold)}

/* the tree: her business, a gold stem, her Chief of Staff, a gold bus, three legs */
.oc-tree{display:flex;flex-direction:column;align-items:center}
.oc-node{background:var(--teal);border-radius:999px;padding:13px 34px;text-align:center;color:#fff;
  max-width:100%}
.oc-node b{display:block;font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.12}
.oc-node span{display:block;font-family:var(--sans);font-size:8.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sand);margin-top:5px}
.oc-cos{background:var(--teal);border:1.5px solid var(--gold);border-radius:16px;
  padding:16px var(--s5);text-align:center;color:#fff;max-width:520px}
.oc-cos b{display:block;font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.12;
  color:var(--gold)}
.oc-cos span{display:block;font-size:12px;line-height:1.5;color:#C4D3DC;margin-top:6px}
.oc-drop{width:1.5px;height:22px;background:var(--gold)}
.oc-bus{width:74%;height:1.5px;background:var(--gold)}
.oc-legs{display:flex;justify-content:space-around;width:74%}
.oc-legs i{width:1.5px;height:18px;background:var(--gold);display:block}

/* the three departments, side by side - the one place in the HQ that is right */
.oc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s2)}
.oc-col{background:var(--teal);border-radius:16px;border-top:2px solid var(--gold);
  padding:var(--s4) var(--s3) var(--s4);min-width:0}
.oc-col .oc-ic{font-size:20px;line-height:1}
.oc-col h3{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.12;color:var(--gold);
  margin:var(--s2) 0 3px}
.oc-col .oc-d{font-size:11px;line-height:1.45;color:#9FB4C1;margin:0 0 var(--s3);max-width:none;
  min-height:3em}

/* a teamie in a seat: solid is mine, handed over; a dashed gold pill is the one she builds */
.oc-seat{background:rgba(255,255,255,.10);border:1px solid transparent;border-radius:9px;
  padding:8px 10px;margin-bottom:6px;color:#fff;line-height:1.25;
  transition:border-color .16s var(--ease),background .16s var(--ease)}
.oc-seat:hover{border-color:rgba(201,149,44,.5)}
.oc-seat .oc-nm{display:block;font-size:12px;font-weight:500}
.oc-seat.open{background:none;border:1.5px dashed var(--gold);color:var(--gold-300)}
.oc-seat.open .oc-nm{font-family:var(--pluma);font-style:italic;font-weight:400;font-size:12px;
  letter-spacing:.03em}
.oc-seat.live{background:rgba(201,149,44,.18);border-color:rgba(201,149,44,.55)}

/* how far along, as four small gold dots on the chip itself */
.oc-seat .oc-pips{display:flex;gap:3px;margin-top:5px}
.oc-seat .oc-pips i{width:5px;height:5px;border-radius:50%;background:rgba(235,233,227,.22);display:block}
.oc-seat .oc-pips i.lit{background:var(--gold)}
.oc-seat.open .oc-pips i{background:rgba(201,149,44,.25)}

/* the shelf, under its own department - quieter than a teamie, because it is not one */
.oc-shelf{margin-top:var(--s3);padding-top:var(--s2);border-top:1px dashed rgba(235,233,227,.2)}
.oc-shelf .oc-hl{font-family:var(--pluma);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(233,210,172,.7);margin:0 0 6px;max-width:none}
.oc-shelf .oc-helper{display:inline-block;background:rgba(235,233,227,.06);
  border:1px solid rgba(235,233,227,.14);border-radius:999px;padding:3px 9px;margin:0 4px 4px 0;
  font-size:10px;line-height:1.4;color:rgba(235,233,227,.78)}
.oc-shelf .oc-helper .has{color:var(--gold-300)}

.oc-foot{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.2;color:var(--teal);
  text-align:center;margin:var(--s5) var(--s2) 0;max-width:none}

.oc-legend{font-family:var(--sans);font-size:11px;color:var(--blue);text-align:center;
  margin:var(--s4) 0 0;line-height:1.7;max-width:none}

@media (max-width:760px){
  /* the columns stack, and the frame, the pills and the gold lines all stay */
  .oc-frame{padding:var(--s6) var(--s4) var(--s4);border-radius:18px}
  .oc-tag{font-size:8px;letter-spacing:.16em;white-space:normal;line-height:1.4;top:-16px;
    max-width:calc(100% - var(--s5))}
  .oc-cols{grid-template-columns:1fr;gap:var(--s3)}
  .oc-col .oc-d{min-height:0}
  .oc-bus,.oc-legs{width:100%}
  .oc-legs{justify-content:center}
  .oc-legs i:not(:first-child){display:none}
  .oc-node{padding:12px var(--s4)}
  .oc-node b,.oc-cos b{font-size:19px}
  .oc-foot{font-size:18px}
}

/* ------------------------------------------------------------------ a folded box
   Her guide, and the later prompt: there when she wants the detail, closed until then. */
details.fold{background:#fff;border:var(--hair);border-radius:14px;padding:0;margin:0 0 var(--s4);
  box-shadow:var(--sh-xs);overflow:hidden}
details.fold>summary{list-style:none;cursor:pointer;padding:var(--s4) var(--s5);
  font-family:var(--pluma);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);display:flex;align-items:center;gap:var(--s2);
  transition:color .14s var(--ease)}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"▸";color:var(--gold);font-size:11px;line-height:1;
  transition:transform .18s var(--ease)}
details.fold[open]>summary::before{transform:rotate(90deg)}
details.fold>summary:hover{color:var(--teal)}
details.fold .foldbody{padding:0 var(--s5) var(--s5)}
details.fold .foldbody>.box:last-child,details.fold .foldbody>section:last-child{margin-bottom:0}
details.fold .foldbody h3{font-family:var(--serif);font-size:var(--t-h3);color:var(--teal);
  margin:var(--s5) 0 var(--s2)}
details.fold .foldbody h3:first-child{margin-top:0}
/* the later prompt sits inside the tick's box, so it is a quiet line rather than its own paper */
details.fold.later{background:none;border:0;box-shadow:none;margin:var(--s4) 0 0}
details.fold.later>summary{padding:0;font-family:var(--sans);font-size:12.5px;font-weight:300;
  letter-spacing:0;text-transform:none;color:var(--blue);text-decoration:underline;
  text-underline-offset:3px}
details.fold.later .foldbody{padding:var(--s3) 0 0}
details.fold.later .foldbody .box{border:0;box-shadow:none;padding:0}
hr.tickrule{border:0;border-top:var(--hair);margin:var(--s4) 0}

/* ============================================================== THE SEVEN BOXES (her ruling 175)
   The strip stays across the top of the page the whole time she is training a teamie: the intro
   card, then the seven things an agent always needs, the one she is on lit, the ones behind her
   ticked. It is the ONE place in the HQ that walks sideways. */
.strip{position:sticky;top:0;z-index:15;margin:0 0 var(--s5);padding:var(--s3) 0;
  background:var(--cream);box-shadow:0 10px 16px -14px rgba(34,62,78,.4)}
.sb-rail{display:flex;align-items:stretch;gap:var(--s2);overflow-x:auto;padding:2px var(--s1) var(--s2);
  scrollbar-width:thin;scrollbar-color:rgba(34,62,78,.2) transparent}
.sb-rail::-webkit-scrollbar{height:5px}
.sb-rail::-webkit-scrollbar-thumb{background:rgba(34,62,78,.18);border-radius:3px}

.sb-intro{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;
  background:var(--teal);border-radius:10px;padding:9px var(--s3);color:#fff;max-width:210px}
.sb-intro b{font-family:var(--serif);font-weight:400;font-size:14px;line-height:1.15;color:var(--gold)}
.sb-intro span{font-size:9.5px;line-height:1.4;color:rgba(235,233,227,.62);margin-top:2px}
.sb-em{flex:0 0 auto;align-self:center;font-size:17px;line-height:1}
.sb-arrow{flex:0 0 auto;align-self:center;color:rgba(201,149,44,.7);font-size:15px;line-height:1}

.sb-box{flex:0 0 auto;display:flex;align-items:center;gap:7px;min-width:0;
  background:var(--sand);border:1px solid rgba(201,149,44,.35);border-radius:9px;
  padding:9px 11px;text-decoration:none;color:var(--teal);
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease)}
.sb-box:hover{border-color:var(--gold)}
.sb-box .sb-n{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.06em;
  color:var(--gold-700);font-variant-numeric:tabular-nums}
.sb-box .sb-t{font-size:11px;font-weight:500;line-height:1.2;white-space:nowrap}
.sb-box .sb-ok{font-size:11px;color:var(--gold-700);margin-left:1px}
.sb-box.done{background:rgba(233,210,172,.45)}
.sb-box.done .sb-ok{color:var(--gold-700)}
/* the one she is on: navy, gold words - her drawing */
.sb-box.on{background:var(--teal);border-color:var(--teal);color:var(--gold)}
.sb-box.on .sb-n,.sb-box.on .sb-t{color:var(--gold)}
.sb-box.on .sb-t{font-weight:600}

/* the two bands under the strip: what you are given, then what you make yours */
.band-now,.band-yours{border-radius:14px;padding:var(--s5);margin:0 0 var(--s4)}
.bandlabel{font-family:var(--pluma);font-size:var(--t-label);letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 var(--s3);line-height:1.5}
.band-now{background:var(--teal);color:var(--cream);box-shadow:var(--sh-band)}
.band-now .bandlabel{color:var(--sand)}
.band-now p{color:rgba(235,233,227,.86);margin:0 0 var(--s3)}
.band-now p:last-child{margin-bottom:0}
.band-now strong{color:#fff;font-weight:500}
.band-now ul.own.plain li,.band-now ul li{color:rgba(235,233,227,.8)}
.band-now ul.own.plain li{background:rgba(255,255,255,.06);border:0;box-shadow:none;
  border-radius:8px;padding:9px 12px;font-size:13px}
.band-now ul.own.plain li .nm{color:#fff;font-size:15px}
.band-now .pill.grey{color:var(--sand);border-color:rgba(233,210,172,.35)}

.band-yours{background:rgba(201,149,44,.10);border:1px solid rgba(201,149,44,.4)}
.band-yours .bandlabel{color:var(--gold-700)}
.band-yours>p{color:var(--teal-700)}
.band-yours label{color:var(--gold-700)}
.band-yours textarea,.band-yours input[type=text]{background:#fff}
.band-yours form+form{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid rgba(201,149,44,.28)}
.band-yours .checkline{background:#fff;border:var(--hair);border-radius:10px;padding:var(--s3) var(--s4);
  margin:0 0 var(--s2)}
.band-yours .checkline span strong{display:block;margin-bottom:2px}
.band-yours .btn{margin-top:var(--s3)}

.walk.boxwalk{margin-top:var(--s5);padding-top:var(--s4)}

@media (max-width:900px){
  /* the strip scrolls sideways; the lit box is what she sees first */
  .strip{margin-left:calc(var(--s4) * -1);margin-right:calc(var(--s4) * -1);padding:var(--s3) var(--s4)}
  .sb-intro{max-width:160px}
  .band-now,.band-yours{padding:var(--s4)}
}
.side .foot a{color:rgba(235,233,227,.6);text-decoration:underline;text-underline-offset:2px}
.side .foot a:hover{color:var(--gold-300)}
.side .foot form{margin-top:var(--s3)}

/* the key under the chart: the real drawn element beside what it means */
.oc-key{background:#fff;border:var(--hair);border-radius:14px;padding:var(--s5);
  box-shadow:var(--sh-xs);margin:var(--s4) 0 0}
.oc-krow{display:flex;align-items:flex-start;gap:var(--s4);padding:var(--s3) 0;
  border-top:var(--hair)}
.oc-krow:first-of-type{border-top:0;padding-top:0}
.oc-kbit{flex:0 0 190px;display:flex;align-items:center;background:var(--teal);border-radius:9px;
  padding:var(--s2) var(--s3);min-height:38px}
.oc-kbit .oc-seat{margin:0;width:100%}
.oc-kbit .oc-helper{margin:0}
.oc-ktxt{flex:1 1 auto;font-size:13.5px;line-height:1.6;color:var(--teal-700);padding-top:4px}
@media (max-width:620px){
  .oc-krow{flex-direction:column;gap:var(--s2)}
  .oc-kbit{flex:0 0 auto;width:100%}
  .oc-ktxt{padding-top:0}
}
/* the column's own small-caps labels */
.oc-col>.oc-hl{font-family:var(--pluma);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(233,210,172,.72);margin:0 0 var(--s2);line-height:1.4;max-width:none}

/* ============================================================================================
   VISUAL ENGAGEMENT, THE COLLAB'S WAY (her ruling: "see how the Collab app uses bold words,
   numbers or ticks or icons or colours?"). Copied from the Collab's "Your foundations are done"
   box in start.html: a Pluma gold eyebrow, a Bethany heading with one gold word, then rows - each
   with its own mark at the left and a warm hairline under it.
   ============================================================================================ */
.boxhead{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.15;color:var(--teal);
  margin:0 0 var(--s4);max-width:30ch}
.boxhead em{font-family:var(--serif);font-style:italic;color:var(--gold)}
.band-now .boxhead{color:#fff}
.band-now .boxhead em{color:var(--gold)}
.band-yours .boxhead{color:var(--teal)}

/* her bold, in her navy - never a grey shout */
strong,b{font-weight:600;color:var(--teal)}
.band-now strong,.band-now b{color:#fff}
.hero strong,.hero b{color:#fff}

/* {her asides} - Pluma, gold, italic */
.aside{font-family:var(--pluma);font-style:italic;color:var(--gold-700);letter-spacing:.02em}
.hero .aside{color:var(--sand)}

/* ---------------------------------------------------- a numbered instruction, as a row
   The gold number in a thin ring at the left, the words beside it, a hairline under the row. */
ol.todo{max-width:none}
/* one block per row, the ring floated to the left by position - never flex: a flex row treats every
   bold phrase in the sentence as its own column (her catch 2026-09-11) */
ol.todo li{display:block;counter-increment:t;position:relative;
  padding:var(--s3) 0 var(--s3) 40px;border-bottom:var(--hair);line-height:1.68}
ol.todo li:last-child{border-bottom:0;padding-bottom:0}
ol.todo li::before{content:counter(t);position:absolute;left:0;top:var(--s3);width:26px;height:26px;
  border-radius:50%;border:1px solid rgba(201,149,44,.6);color:var(--gold-700);
  font-family:var(--sans);font-size:10.5px;font-weight:700;text-align:center;line-height:24px;
  margin-top:2px;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- a tick, as a row with its why */
.tickform{padding:var(--s3) 0;border-bottom:var(--hair)}
.tickform:last-child{border-bottom:0;padding-bottom:0}
.item .tickform,.box>form .tickform{border-bottom:0;padding:0}
.tickwhy{font-family:var(--pluma);font-style:italic;font-size:12.5px;letter-spacing:.02em;
  line-height:1.6;color:var(--gold-700);margin:var(--s2) 0 0 34px}
label.checkline{align-items:flex-start;padding:var(--s3) 0;border-bottom:var(--hair);margin:0}
label.checkline:last-of-type{border-bottom:0}
.band-yours label.checkline{border-bottom:0}

/* ------------------------------------------ a list of places, skills or boxes, as marked rows */
ul.own li,ul.plain li,.card ul li,.box ul li{position:relative}
ul.own{gap:0}
ul.own li{display:block;background:none;border:0;border-bottom:var(--hair);border-radius:0;
  box-shadow:none;padding:var(--s3) 0 var(--s3) var(--s4);margin:0}
ul.own li:last-child{border-bottom:0}
ul.own li:hover{border-color:var(--bone-400);box-shadow:none}
ul.own li::before{content:"";position:absolute;left:0;top:var(--s5);width:6px;height:6px;
  border-radius:50%;background:var(--gold)}
.band-now ul.own li::before{background:var(--gold)}
.band-now ul.own.plain li{padding-left:var(--s5);border-bottom:0;margin-bottom:6px}
.band-now ul.own.plain li::before{left:var(--s3);top:18px}
/* a plain markdown list inside a box gets the same gold pip */
.box ul:not(.own):not(.plain),.card ul:not(.own):not(.plain){list-style:none;padding-left:0}
.box ul:not(.own):not(.plain) li,.card ul:not(.own):not(.plain) li{padding:var(--s2) 0 var(--s2) var(--s4);
  border-bottom:var(--hair)}
.box ul:not(.own):not(.plain) li:last-child,.card ul:not(.own):not(.plain) li:last-child{border-bottom:0}
.box ul:not(.own):not(.plain) li::before,.card ul:not(.own):not(.plain) li::before{content:"";
  position:absolute;left:0;top:16px;width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* her own name for section one, written the way she writes it */
.ai{color:var(--gold)}
sup{font-size:.62em;vertical-align:.45em;letter-spacing:0}
.nav a .t .sub2{display:block;font-size:10.5px;font-weight:300;line-height:1.4;
  color:rgba(235,233,227,.45);margin-top:1px}
.nav a.on .t .sub2{color:rgba(201,149,44,.7)}
.card.sect h3 .aside,.hero h1 .ai{font-size:.85em}

/* ---------------------------------------------------------------- the closer, the Collab's way */
.closer{background:var(--teal);border-radius:16px;padding:var(--s7) var(--s5);text-align:center;
  box-shadow:var(--sh-band);margin:var(--s5) 0 0}
.closer p{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,32px);line-height:1.18;
  color:#fff;margin:0 auto;max-width:26ch}
.closer p em{font-family:var(--serif);font-style:italic;color:var(--gold)}

/* the video, inside the step's first box - the Collab's, not a card of its own */
.box .video{margin:var(--s4) 0}
.box .video .frame{border-radius:10px;box-shadow:none;border:1px solid var(--bone-400)}
.box .video.coming{background:var(--bone);border:1px dashed var(--sand);border-radius:10px;
  padding:0;text-align:center;position:relative;aspect-ratio:16/9;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:var(--s2)}
.box .video.coming .eye{margin:0;color:var(--gold-700)}
.box .video.coming .cta{font-family:var(--serif);font-size:22px;color:var(--teal);margin:0}
.box .video .muted{margin:var(--s2) 0 0;text-align:center}

/* ------------------------------------------------------------------ chart fixes (her bug report)
   1. The global rule that paints her **bold** navy was also painting the chart's <b> - which sits
      on navy - so "Your business" went invisible. Inside the chart, a <b> keeps the colour its own
      box gives it.
   2. The key's samples are drawn on the key card's WHITE ground, each one exactly as it looks
      inside a column: a small navy chip, a dashed gold pill, four pips, a light helper chip -
      never an empty navy block. */
.oc b,.oc strong,.oc-node b,.oc-cos b{color:inherit}
.oc-node b{color:#fff}
.oc-cos b{color:var(--gold)}

.oc-kbit{background:none;padding:0;min-height:0;flex:0 0 210px;display:block}
.oc-key .oc-seat{display:block;width:100%;margin:0;background:var(--teal);border:1px solid transparent;
  border-radius:9px;padding:8px 10px;color:#fff}
.oc-key .oc-seat .oc-nm{display:block;font-size:12px;font-weight:500;color:#fff}
.oc-key .oc-seat.open{background:none;border:1.5px dashed var(--gold)}
.oc-key .oc-seat.open .oc-nm{font-family:var(--pluma);font-style:italic;font-weight:400;
  color:var(--gold-700)}
.oc-key .oc-pips{display:flex;gap:5px;align-items:center;padding:12px 2px}
.oc-key .oc-pips i{width:7px;height:7px;border-radius:50%;background:rgba(34,62,78,.16);display:block}
.oc-key .oc-pips i.lit{background:var(--gold)}
.oc-key .oc-helper{display:inline-block;background:var(--bone);border:1px solid var(--bone-400);
  border-radius:999px;padding:5px 12px;margin:0;font-size:11.5px;color:var(--teal-700)}
/* her trademark stays on one line inside a step card title */
.stepcard .nm .ai{display:inline;font-size:1em;color:var(--gold)}
.stepcard .nm .aside{display:inline;font-size:.85em}
/* box 4: one question per thing it reaches (rulings 186-187), and the anything-else box (188) */
.reachrow{border:0;border-top:var(--hair);padding:var(--s3) 0;margin:0}
.reachrow:first-of-type{border-top:0}
.reachrow legend{font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.6;color:var(--navy);padding:0 0 var(--s2)}
.reachrow label.checkline{padding:3px 0}
.reachrow input[type=text]{width:100%;margin-top:4px}
.notebox{margin:var(--s4) 0 0;padding:var(--s3) var(--s4);border:1px dashed rgba(201,149,44,.45);border-radius:10px;background:transparent}
.notebox label{font-family:var(--sans);font-size:13px;font-weight:400;color:var(--teal-700);text-transform:none;letter-spacing:0}
.notebox textarea{margin:6px 0}
.notebox .muted{font-size:11.5px;margin:6px 0 0}
/* RULING 182: the strip never scrolls. The intro card takes its own row; the seven boxes share the
   next row equally and wrap their words; nothing is ever off-screen, so a page load cannot lose it. */
.sb-rail{flex-wrap:wrap;overflow:visible;row-gap:var(--s2)}
.sb-rail::-webkit-scrollbar{display:none}
.sb-intro{flex:1 1 100%;max-width:none;flex-direction:row;align-items:baseline;gap:var(--s3);padding:8px var(--s3)}
.sb-intro span{margin-top:0}
.sb-em{display:none}
.sb-arrow{display:none}
.sb-box{flex:1 1 0;min-width:0;padding:8px 8px;gap:6px;justify-content:center;text-align:center;flex-direction:column}
.sb-box .sb-t{white-space:normal;font-size:10.5px}
.sb-box .sb-ok{margin:0}
@media (max-width:720px){.sb-box{flex:1 1 30%}}
/* a folded list inside a band: the floor's eleven, the playbook's steps, the FAIL words */
details.fold{margin:var(--s3) 0}
details.fold summary{cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--gold-700);list-style:none}
details.fold summary::before{content:"\203A";display:inline-block;margin-right:6px;transition:transform .16s var(--ease)}
details.fold[open] summary::before{transform:rotate(90deg)}
details.fold > *:not(summary){margin-top:var(--s2)}
.band-now details.fold summary{color:var(--gold)}
.band-now .pathmap li{color:#EBE9E3}
.band-now .pathmap li::before{color:var(--gold)}
/* the playbook's steps inside the navy band: numbered in gold, words in cream, no card behind them */
ol.plainsteps{list-style:none;counter-reset:ps;margin:0;padding:0}
ol.plainsteps li{counter-increment:ps;position:relative;padding:6px 0 6px 34px;line-height:1.55;font-size:14px;color:#EBE9E3;border-top:1px solid rgba(235,233,227,.12)}
ol.plainsteps li:first-child{border-top:0}
ol.plainsteps li::before{content:counter(ps);position:absolute;left:0;top:7px;width:22px;height:22px;border-radius:50%;border:1px solid rgba(201,149,44,.6);color:var(--gold);font-size:10px;font-weight:700;text-align:center;line-height:20px}
.band-now details.fold summary{color:var(--gold)}
/* a fold inside the navy band stays navy - never a white card with cream words on it */
.band-now details.fold,.band-now details.fold summary,.band-now details.fold ol,.band-now details.fold ul{background:transparent;border:0;box-shadow:none;padding-left:0;padding-right:0}
.band-now details.fold ul.own.plain li{color:#EBE9E3}
/* the welcome band, centred like the Collab's "Welcome to the room" */
.hero.centred{text-align:center;padding:var(--s7) var(--s6) var(--s6)}
.hero.centred h1{font-size:clamp(40px,5.2vw,58px)}
.hero.centred h1+*{padding-top:var(--s4);max-width:62ch;margin-left:auto;margin-right:auto;font-size:16.5px;line-height:1.7}
.hero.centred h1+*::before{display:none}
/* the lock: a section or step that opens later sits quiet in the menu */
.nav a.locked{opacity:.42}
.nav a.locked .lk{margin-left:auto;font-size:7px;color:rgba(235,233,227,.55)}
.nav a.locked:hover{opacity:.7}
.hero.centred .eye{justify-content:center;text-align:center;display:block}
.formfoot{margin:var(--s5) 0 0}
/* a P.S. under a prompt: one line, quiet, her aside */
.ps{margin:var(--s3) 0 var(--s4);font-size:14px;line-height:1.6;color:var(--teal-700)}
/* THE TIP BOX - the Lab's sand card: every P.S., every did-you-know, one design */
.tip{background:var(--sand);border-radius:16px;padding:var(--s4) var(--s5);margin:var(--s4) 0 var(--s5);box-shadow:var(--sh-sm)}
.tip .tiplabel{margin:0 0 6px;font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-700)}
.tip .tipbody{font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.65;color:var(--teal)}
.tip .tipbody strong{font-weight:600;color:var(--teal)}
.tip .tipbody p{margin:0 0 var(--s2)}
.tip .tipbody p:last-child{margin-bottom:0}
.ps{display:none}
/* a tick that lives under its own instruction, inside a numbered line */
ol.todo li .tickform{margin:var(--s2) 0 0}
/* THE ONE WALK - under the video, the steps in the order she does them, each holding its own words */
.stepwalk .bigsteps{list-style:none;margin:0;padding:0}
.stepwalk .bigstep{position:relative;padding:var(--s4) 0 var(--s5) 0;border-top:var(--hair)}
.stepwalk .bigstep:first-child{border-top:0;padding-top:var(--s2)}
.stepwalk .stepname{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s3);font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;color:var(--teal)}
.stepwalk .stepn{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#fff;font-family:var(--sans);font-size:12px;font-weight:700;text-align:center;line-height:30px}
.stepwalk .bigstep>p{margin:0 0 var(--s3);font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.7;color:var(--teal)}
.stepwalk .bigstep>p strong{font-weight:600;color:var(--teal)}
.stepwalk .bigstep .box,.stepwalk .bigstep .card{margin:var(--s3) 0 0;box-shadow:none;border:var(--hair)}
.stepwalk .bigstep .movein{margin-top:0}
.stepwalk .bigstep .tickform{margin:var(--s2) 0 0}
/* RULING 206, NON-NEGOTIABLE: every step is its own white card - the Collab's /start. Never one
   box with line breaks between steps. */
.box.step{margin:0 0 var(--s5)}
.box.step .stepeye{color:var(--gold-700)}
.box.step .boxhead{margin-bottom:var(--s3)}
.box.step>p{margin:0 0 var(--s3);font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.7;color:var(--teal)}
.box.step>p strong{font-weight:600;color:var(--teal)}
.box.step .box,.box.step .card{margin:var(--s3) 0 0;box-shadow:none;border:var(--hair)}
.box.step .tickform{margin:var(--s2) 0 0}
.stepwalk,.bigsteps,.bigstep{all:unset}
/* inside a step card the body text runs the full width of the card */
.box.step>p,.box.step>ul,.box.step>ol{max-width:none}
/* THE STEP CARD, matched to the Collab's /start: Pluma gold eyebrow, a big Bethany heading with the gold
   word, body text that runs the full width of the card. Nothing inside a step card is width-capped. */
.box.step .stepeye{font-family:var(--pluma);font-style:italic;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:400;margin:0 0 4px}
.box.step .boxhead{max-width:none;font-size:34px;line-height:1.1;margin:0 0 var(--s3)}
.box.step>p,.box.step>ul,.box.step>ol,.box.step ul.own,.box.step ol.todo{max-width:none}
.box.step>p{font-size:16px;line-height:1.7}
.box.step .copywrap .boxhead{font-size:26px}
/* a tip box that asks her to act: the list inside it keeps its rows and buttons readable on sand */
.tip ul.own{margin:var(--s3) 0 0}
.tip ul.own li{background:transparent;border-color:rgba(34,62,78,.12)}
.tip .roads .road{background:#fff}
/* THE CONGRATS PAGE - gold, full band, her confetti (robots and the brand colours) behind the words */
.doneband{position:relative;overflow:hidden;background:var(--gold);border-radius:16px;padding:var(--s8) var(--s6);min-height:420px;text-align:center;margin:0 0 var(--s5)}
.doneband canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.doneband .donein{position:relative;z-index:1;max-width:60ch;margin:0 auto}
.doneband .eye{font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--teal);margin:0 0 var(--s3)}
.doneband h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.4vw,60px);line-height:1.05;color:var(--teal);margin:0 0 var(--s4)}
.doneband h1 em{font-style:italic;color:#fff}
.doneband p{font-family:var(--sans);font-weight:300;font-size:16.5px;line-height:1.7;color:var(--teal);margin:0 0 var(--s4)}
.doneband .btn.big{font-size:13px;padding:16px 26px;background:var(--teal);color:var(--gold);border-color:var(--teal)}
.doneband .btn.gold.big,.doneband .btn.gold.big:hover{background:var(--teal)!important;color:var(--gold)!important;border-color:var(--teal)!important}
/* the confetti falls over the whole bone area, behind every card */
.confetti-full{position:fixed;top:0;right:0;bottom:0;left:0;width:auto;height:auto;z-index:0;pointer-events:none}
.doneband{z-index:1}
.main .col>*{position:relative;z-index:1}
.main .col>.confetti-full{position:fixed;z-index:0}
.doneband{overflow:visible;background:var(--gold)}
.doneband .eye{display:block;text-align:center;width:100%}
/* the rules between the menu's groups - the Lab's shape (her ask 2026-09-12) */
.side .nav .sep{display:block;height:1px;background:rgba(235,233,227,.12);margin:12px 6px}

/* the training flow shares the agent strip; a box past where she is stays quiet and un-clickable */
.sb-box.locked{opacity:.45;cursor:default;border-style:dashed}
.sb-box.locked:hover{border-color:rgba(201,149,44,.35)}

/* the video placeholder: her title card and a play button, until the link lands */
.vph{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#223E4E;box-shadow:0 14px 34px -22px rgba(0,0,0,.55)}.vph img{width:100%;height:100%;object-fit:cover;display:block}.vph .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.vph .play i{display:block;width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.92);position:relative;box-shadow:0 8px 24px rgba(0,0,0,.35)}.vph .play i:after{content:'';position:absolute;left:31px;top:23px;border-left:22px solid #223E4E;border-top:15px solid transparent;border-bottom:15px solid transparent}.video.coming{background:transparent;border:0;padding:0}.vid.coming{background:transparent;border:0;padding:0}

/* the five ticks of an employee, read plainly (ruling 262) */
.tickread{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--sans);font-size:13.5px;color:var(--teal-700);margin:0 0 var(--s3)}
.tickread span{white-space:nowrap}
.tickread span.on{color:var(--gold-700);font-weight:600}

/* the weekly mix: a tick and a number per kind (ruling 269), to the design brief - air, a hook per row, a number you cannot miss */
.mix{background:#fff;border-radius:14px;padding:26px 28px 22px;margin:0 0 var(--s4);box-shadow:0 10px 26px -20px rgba(34,62,78,.35)}
.mix .boxhead{margin-bottom:var(--s2)}
.mix>p{color:var(--teal-700);margin:0 0 var(--s3)}
.mixrow{display:flex;align-items:center;gap:16px;padding:16px 4px;border-bottom:1px solid rgba(34,62,78,.12);cursor:pointer}
.mixrow:last-of-type{border-bottom:0}
.mixrow input[type=checkbox]{width:24px;height:24px;accent-color:var(--gold);flex:none;margin:0}
.mixrow .lbl{flex:1;font-family:var(--sans);font-size:17px;font-weight:600;color:var(--teal)}
.mixrow .how{display:flex;align-items:center;gap:10px;flex:none}
.mixrow .how span{font-family:var(--sans);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-700)}
.mixrow .num{width:72px;height:48px;text-align:center;font-family:var(--sans);font-size:22px;font-weight:600;color:var(--teal);border:2px solid rgba(34,62,78,.25);border-radius:12px;background:#fff}
.mixrow:has(input:checked) .num{border-color:var(--gold);background:#FBF6EA}
.mixrow:has(input:checked) .lbl{color:var(--gold-700)}
.mixfoot{display:flex;align-items:center;gap:16px;margin:var(--s4) 0 0}

ul.own li.dim{opacity:.6}
ul.own .part{font-size:13.5px;color:rgba(255,255,255,.8);margin-top:4px}

.mixsub{display:flex;align-items:center;gap:10px;padding:4px 0 14px 40px;font-family:var(--sans);font-size:14px;color:var(--teal-700)}
.mixsub select{font-family:var(--sans);font-size:14px;padding:8px 10px;border:1px solid rgba(34,62,78,.25);border-radius:10px;background:#fff;color:var(--teal)}

/* the three answers to "who writes your X" stack, full width, readable */
.roads2{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.roads2 .road2{width:100%;text-align:left;white-space:normal;line-height:1.35;padding:12px 16px}

/* the nudge: two buttons side by side, then a white card of places (ruling 253) */
.nudgebtns{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 6px}
.nudgebtns form{display:inline;margin:0}
.nudgebtns .btn{white-space:nowrap}
.nudgewhere{background:#fff;border-radius:14px;padding:22px 26px 18px;margin:14px 0 10px;box-shadow:0 10px 26px -20px rgba(34,62,78,.35)}
.nudgewhere .boxhead{font-size:21px;margin-bottom:4px}
.nudgewhere>p{color:var(--teal-700);margin:0 0 6px}

.pubblock{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid rgba(34,62,78,.14)}
.pubblock .boxhead{font-size:22px}
.pubblock textarea{width:100%;min-height:96px;padding:12px 14px;border:1px solid rgba(34,62,78,.25);border-radius:12px;font-family:var(--sans);font-size:15px;line-height:1.5}

/* Buttons that sit inside the seven boxes (the nudge, publishing, who-writes-what): app.css's bare "button.ghost"
   rule was turning them into underlined text stacked down the page. These win on specificity, in both stylesheets. */
.nudgebtns form,.roads2 form,.choice3 form{display:inline;margin:0;padding:0;border:0;background:none}
.nudgebtns button.btn,.roads2 button.btn,.choice3 button.btn,.mixfoot button.btn{display:inline-block;margin:0;padding:13px 20px;border-radius:10px;font-family:var(--sans);font-weight:600;font-size:12px;line-height:1;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;background:var(--gold);color:var(--teal);border:2px solid var(--gold);text-decoration:none;box-shadow:none}
.nudgebtns button.btn.ghost,.roads2 button.btn.ghost,.choice3 button.btn.ghost{background:transparent;color:var(--teal);border-color:rgba(34,62,78,.35)}
.nudgebtns button.btn.ghost:hover,.roads2 button.btn.ghost:hover,.choice3 button.btn.ghost:hover{border-color:var(--gold);background:rgba(201,149,44,.08)}
.nudgebtns button.btn.gold,.roads2 button.btn.on,.choice3 button.btn.on{background:var(--gold);color:var(--teal);border-color:var(--gold)}
.nudgebtns{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 6px}
.roads2{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.roads2 button.btn{width:100%;text-align:left;white-space:normal;line-height:1.35}

/* rows inside the boxes' cards keep sentence case - app.css's bare label rule was shouting them in capitals */
label.mixrow,label.mixrow .lbl,.mixsub,.nudgewhere label{text-transform:none;letter-spacing:0;font-weight:500}
label.mixrow .lbl{font-weight:600}

/* THE SEVEN-BOX STRIP in one straight line (ship report, 13 Sep): number pinned, a two-line slot for the label, a fixed slot for the tick */
.sb-box{align-items:flex-start;min-height:50px}
.sb-box .sb-n{padding-top:3px;width:14px;flex:none}
.sb-box .sb-t{white-space:normal;line-height:1.2;min-height:2.4em;max-width:96px;display:flex;align-items:center}
.sb-box .sb-ok{width:12px;flex:none;text-align:center;padding-top:3px}
/* EVERY BUTTON THE SAME HEIGHT, on the same line (her catch 13 Sep: "buttons are all out of alignment with each other") */
.btn,a.btn,button.btn{display:inline-flex!important;align-items:center;justify-content:center;min-height:46px;padding:0 20px;box-sizing:border-box;line-height:1.1;vertical-align:middle;border-width:2px;border-style:solid;margin-top:0;margin-bottom:0}
.btn.sm{min-height:38px;padding:0 16px}
.btn.big{min-height:56px;padding:0 26px}
.choice3,.nudgebtns,.roads2{align-items:stretch}
.choice3 form,.nudgebtns form{display:inline-flex}
.overview{font-size:16px;line-height:1.6}

.scoutkind{padding:14px 0;border-bottom:1px solid rgba(34,62,78,.12)}
.scoutkind:last-of-type{border-bottom:0}
.scoutkind .lbl2{display:block;font-family:var(--sans);font-size:13.5px;color:var(--teal-700);margin:8px 0 4px;text-transform:none;letter-spacing:0}
.scoutkind textarea,.scoutkind input[type=text]{width:100%;padding:10px 12px;border:1px solid rgba(34,62,78,.25);border-radius:10px;font-family:var(--sans);font-size:15px}

/* the hairline between forms in the gold band never touches the nudge or publishing buttons */
.nudgebtns form+form,.choice3 form+form,.roads2 form+form{margin-top:0!important;padding-top:0!important;border-top:0!important}
.nudgebtns .btn,.choice3 .btn{margin:0!important}
.scoutkind select{font-family:var(--sans);font-size:14px;padding:8px 10px;border:1px solid rgba(34,62,78,.25);border-radius:10px;background:#fff;color:var(--teal)}

/* THE STRIP AS A FIXED GRID (her words: "the worst design"): every box has the same three rows - number, a two-line label, the tick slot - so nothing moves box to box */
.sb-box{display:grid!important;grid-template-rows:14px 2.5em 14px;align-content:start;justify-items:start;row-gap:6px;min-height:0;padding:10px 12px 8px}
.sb-box .sb-n{padding:0;line-height:14px}
.sb-box .sb-t{white-space:normal;line-height:1.2;max-width:96px;min-height:0;display:flex;align-items:center;height:2.5em}
.sb-box .sb-ok{padding:0;line-height:14px;height:14px}

/* the Overseer's numbers card (2026-09-13) */
.numrow{display:flex;flex-direction:column;gap:8px;padding:14px 4px;border-bottom:1px solid rgba(34,62,78,.12)}
.numrow:last-of-type{border-bottom:0}
.numrow .lbl{font-weight:700;color:var(--navy)}
.numrow input[type=text]{width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid rgba(34,62,78,.25);border-radius:10px;font:inherit}
/* NEXT BOX waits for the box (2026-09-13) */
.btn.nextbox.off{opacity:.45;cursor:not-allowed}
.walk.boxwalk{flex-wrap:wrap}
.nextnote{width:100%;margin:8px 0 0;text-align:right}

/* the Secretary's plate card (2026-09-13) */
.platerow{padding:6px 4px 14px;border-bottom:1px solid rgba(34,62,78,.12)}
.platerow:last-of-type{border-bottom:0}
.platerow .mixrow{border-bottom:0;padding:10px 0 6px}
.platerow input[type=text]{width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid rgba(34,62,78,.25);border-radius:10px;font:inherit;margin-left:40px;width:calc(100% - 40px)}
.plate .ticks{margin:0 0 12px}

/* the Chief of Inbox's permission card (2026-09-13) */
.inboxcard select{min-height:44px;padding:8px 12px;border:1px solid rgba(34,62,78,.25);border-radius:10px;font:inherit;background:#fff}
.inboxcard .nudgewhere label{display:block;margin:14px 0 6px;font-weight:700;color:var(--navy)}
.inboxcard .nudgewhere textarea{width:100%;box-sizing:border-box}

/* the Designer's three ticks (2026-09-13) */
.mix.design .mixrow .how{display:block;color:rgba(34,62,78,.7);font-size:.92em}
.mix.design .mixrow input[disabled]{opacity:.7}

/* the Ads Overlord's context card (2026-09-13) */
.mix.ads label[for=adsrun]{display:block;margin:6px 0 8px;font-weight:700;color:var(--navy)}
.mix.ads textarea{width:100%;box-sizing:border-box;margin-bottom:18px}
.mix.ads .boxhead+.boxhead,.mix.ads form .boxhead{margin-top:10px}
.mix.ads .mixrow .how{display:block;color:rgba(34,62,78,.7);font-size:.92em}

.adobj{border:1px solid rgba(34,62,78,.15);border-radius:12px;padding:16px 18px 6px;margin:0 0 14px;background:rgba(255,255,255,.6)}
.adobj label{display:block;margin:10px 0 6px;font-weight:700;color:var(--navy)}
.adobj input[type=text],.adobj select{width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid rgba(34,62,78,.25);border-radius:10px;font:inherit;background:#fff}
.adobj .checkline{display:inline-flex;align-items:center;gap:8px;margin:0 18px 8px 0}
.adobj .nudgebtns{display:flex;flex-wrap:wrap;gap:6px 0}

/* the plan's rows on the own-skill walk (ruling 292): body type, the key phrase bold, the how under it */
.planrows li .nm{font-family:inherit!important;font-size:15px!important;font-weight:700;color:var(--navy);line-height:1.5}
.planrows li{padding:12px 4px}
.planrows .part{color:rgba(34,62,78,.75);font-size:14px;margin-top:4px;line-height:1.55}

/* the login pages stand alone - no menu, nothing of the HQ shown to someone not yet in (2026-09-13) */
.shell.solo{display:block;background:none}
.shell.solo .main{max-width:960px;margin:0 auto}
/* the feedback page: what kind is it, as three pills; one picture */
.fbkind{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.fbkind label{position:relative;cursor:pointer}
.fbkind input{position:absolute;opacity:0;width:0;height:0}
.fbkind span{display:inline-block;padding:10px 16px;border:1px solid rgba(34,62,78,.25);border-radius:999px;font-family:var(--sans);font-size:13px;color:var(--teal);background:#fff}
.fbkind input:checked+span{background:var(--teal);border-color:var(--teal);color:#fff}
.fbkind input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.fbfile{display:block;margin:6px 0 4px;font-family:var(--sans);font-size:13px;color:var(--teal-700)}