/* =============================================================
   v5 layer — shared by index-v5 / excel / numbers (2026-09-18).
   Loaded AFTER each page's inline <style>, and uses only that page's
   locked palette tokens: no new colour is decided in this file.
   Pieces: the floating pill nav, the centred FAQ, the arrow pill (FAQ row),
   the designed long-text blocks (.pts / .pull) and the What-this-is bento.
   The effects layer (headline wipe, poster fan, button sheen, dot texture)
   was built and then cut on 2026-09-18: it decorated, it did not clarify.
   ============================================================= */

/* ---------- 1. FLOATING PILL NAV ---------- */
.pnav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:4px;
  padding:6px 6px 6px 18px;border-radius:980px;
  background:color-mix(in srgb,var(--white) 82%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);
  border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
  box-shadow:0 1px 2px rgba(6,8,7,0.06),0 10px 30px rgba(6,8,7,0.12);
  font-family:var(--font);white-space:nowrap;
  transition:transform .45s var(--ease),opacity .3s ease}
.pnav.is-away{transform:translate(-50%,-140%);opacity:0;pointer-events:none}
.pnav a{text-decoration:none;color:var(--g8);font-weight:600;font-size:14.5px;
  padding:9px 14px;border-radius:980px;transition:background .2s ease,color .2s ease}
.pnav a:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.pnav a[aria-current=page]{color:var(--green)}
.pnav a:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.pnav .pn-logo{font-weight:800;font-size:16px;letter-spacing:-0.02em;padding:9px 12px 9px 0;margin-right:6px}
.pnav .pn-logo:hover{background:none}
.pnav .pn-logo i{font-style:normal;color:var(--green)}
.pnav .pn-cta{background:var(--ink);color:var(--n1);margin-left:6px;padding:9px 18px}
.pnav .pn-cta:hover{background:var(--g8);color:var(--mint)}
.pnav .pn-short{display:none}
@media(max-width:620px){
  .pnav{top:10px;padding:5px 5px 5px 14px;gap:0;max-width:calc(100vw - 20px)}
  .pnav a{font-size:13.5px;padding:8px 10px}
  .pnav .pn-long{display:none}
  .pnav .pn-short{display:inline}
  .pnav .pn-cta{padding:8px 14px;margin-left:4px}
}
/* anchors land below the pill, not under it */
[id]{scroll-margin-top:84px}

/* ---------- 4. CENTRED FAQ ---------- */
.faq .sec-head{text-align:center;margin-inline:auto}
.faq .sec-head h2{margin-inline:auto}
.faq .list{margin-inline:auto}
.faq details{transition:box-shadow .3s var(--ease)}
.faq details:hover,.faq details[open]{box-shadow:0 1px 2px rgba(6,8,7,0.05),0 10px 28px rgba(6,8,7,0.08)}
.faq-more{max-width:760px;margin:14px auto 0;border-radius:var(--r-sm);
  background:var(--g2);padding:16px 18px 16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.faq-more b{display:block;font-size:16px;color:var(--g8)}
.faq-more span{font-size:14.5px;color:var(--g6)}

/* ---------- 5. THE ARROW PILL ----------
   An ink pill whose arrow sits in its own mint circle and turns to point
   forward when the card (or the pill) is hovered. */
.apill{display:inline-flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--n1);text-decoration:none;
  font-family:var(--font);font-weight:600;font-size:16px;
  padding:7px 7px 7px 22px;border-radius:980px;
  transition:background .25s ease}
.apill .ar{width:36px;height:36px;border-radius:50%;flex:none;
  background:var(--mint);color:var(--on-mint);
  display:grid;place-items:center;font-size:17px;line-height:1;
  transform:rotate(-45deg);transition:transform .45s var(--ease)}
a:hover>.apill .ar,.apill:hover .ar,a:focus-visible>.apill .ar{transform:rotate(0deg)}
/* ---------- 7. DESIGNED LONG TEXT ----------
   .pts  — a paragraph broken into its sentences as ruled points
   .pull — one sentence lifted out of a run as the line to remember */
.pts{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:0;max-width:58ch}
.pts li{padding:14px 0 14px 30px;position:relative;border-top:1px solid var(--g3);
  font-size:17px;line-height:1.55;color:var(--g7)}
.pts li:last-child{border-bottom:1px solid var(--g3)}
.pts li::before{content:"";position:absolute;left:4px;top:1.45em;width:8px;height:8px;
  border-radius:50%;background:var(--green)}
.pts li b{color:var(--g8)}
.sec-ink .pts li,.on-ink .pts li{border-color:rgba(245,245,247,0.12);color:var(--n2)}
.sec-ink .pts li:last-child,.on-ink .pts li:last-child{border-color:rgba(245,245,247,0.12)}
.sec-ink .pts li::before,.on-ink .pts li::before{background:var(--mint)}
.sec-ink .pts li b,.on-ink .pts li b{color:var(--n1)}
.pull{margin:26px 0;padding-left:22px;border-left:3px solid var(--green);
  font-size:clamp(20px,2.3vw,26px);line-height:1.3;font-weight:700;letter-spacing:-0.01em;
  color:var(--g8);max-width:30ch;text-wrap:balance}
.sec-ink .pull,.on-ink .pull{color:var(--n1);border-color:var(--mint)}

/* ---------- 9. ROOM FOR THE NAV, AND THE SMALL PIECES ---------- */
.hero{padding-top:clamp(112px,14vh,150px)}
.wl .wl-cap{margin:14px auto 0;max-width:54ch;text-align:left;font-size:15px;color:var(--n3)}
.letter-sec .letter .pull{font-size:clamp(19px,2.1vw,23px);max-width:34ch;margin:24px 0 4px}
.letter-sec .letter .lt-pts{margin-top:20px}
.letter-sec .letter .lt-pts li{font-size:15.5px;padding-block:12px}

/* ---------- 10. WHAT THIS IS — the offer in one screen (bento) ---------- */
.what{padding:0 0 clamp(56px,8vh,96px);background:var(--white)}
.what .label{display:block;text-align:center;margin-bottom:14px}
/* The Lab is called "the numbers at work", which Zach has said is vague on its
   own. This line is the plain answer to "what even is it", in his words, and it
   runs before the bento because the bento only lists what you get. */
.what-say{max-width:740px;margin:0 auto 26px;text-align:center;
  font-size:clamp(19px,2.1vw,24px);line-height:1.4;letter-spacing:-0.015em;color:var(--g8)}
.what-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:980px;margin-inline:auto}
.wt{background:var(--g1);border-radius:var(--r-sm);padding:24px 24px 22px;
  display:flex;flex-direction:column;min-width:0}
.wt-big{font-weight:800;font-size:clamp(38px,4.4vw,56px);line-height:1;letter-spacing:-0.035em;color:var(--g8)}
.wt b{margin-top:10px;font-size:17px;line-height:1.25;color:var(--g8)}
.wt-sub{margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--g6)}
.wt-lead{grid-column:span 2;grid-row:span 2;background:var(--ink);justify-content:flex-end;
  padding:clamp(28px,3vw,40px)}
.wt-lead .wt-big{font-size:clamp(96px,13vw,168px);color:var(--mint);line-height:.82}
.wt-lead b{font-size:clamp(22px,2.4vw,28px);color:var(--n1);margin-top:18px;letter-spacing:-0.01em}
.wt-lead .wt-sub{font-size:16px;color:var(--n2);max-width:38ch;margin-top:10px}
.wt-wide{grid-column:span 2;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:12px}
.wt-wide .wt-big{font-size:22px;color:var(--green);letter-spacing:0}
.wt-wide b{margin-top:0}
.wt-wide .wt-sub{flex-basis:100%}
.what-grid .wt:nth-child(4){grid-column:span 2}
/* three reasons, not six facts (Zach, 2026-10-07): equal tiles, no lead box */
.what-grid-3{grid-template-columns:repeat(3,1fr)}
.what-grid-3 .wt:nth-child(4){grid-column:auto}
.what-grid-3 .wt-big{font-size:clamp(34px,3.6vw,46px);color:var(--green)}
.what-grid-3 .wt b{font-size:18px;margin-top:12px}
.what-grid-3 .wt-sub{font-size:15px;margin-top:8px}
/* the bento opens out from small boxes (js/v5.js block 3). clip-path, not scale: the corners
   stay round and nothing inside is squashed. --c is the small box's size. */
.wg-arm .wt{--c:52px;opacity:0;clip-path:inset(0 calc(100% - var(--c)) calc(100% - var(--c)) 0 round 12px)}
.wg-arm .wt:nth-child(1),.wg-arm .wt:nth-child(6){clip-path:inset(calc(100% - var(--c)) calc(100% - var(--c)) 0 0 round 12px)}
.wg-arm .wt:nth-child(3),.wg-arm .wt:nth-child(5){clip-path:inset(0 0 calc(100% - var(--c)) calc(100% - var(--c)) round 12px)}
.wg-arm .wt:nth-child(4){clip-path:inset(calc(100% - var(--c)) 0 0 calc(100% - var(--c)) round 12px)}
.wg-arm .wt>*{opacity:0}
.wg-arm.wg-go .wt{opacity:1;transition:opacity .35s ease}
.wg-arm.wg-open .wt{clip-path:inset(0 0 0 0 round var(--r-sm));
  transition:clip-path 1.2s cubic-bezier(.16,1,.3,1)}
.wg-arm.wg-open .wt>*{opacity:1;transition:opacity .6s ease .45s}
@media(max-width:760px){
  .what-grid{grid-template-columns:1fr 1fr}
  .what-grid-3{grid-template-columns:1fr}
  .wt-lead{grid-row:auto}
  .wt{padding:20px}
}

/* ---------- 11. THE CUT PASS ---------- */
.ai.ai-tight{padding-block:clamp(48px,7vh,84px)}
.ai.ai-tight .aimath{margin-top:clamp(24px,4vh,40px)}

/* ---------- 12. THE CHAPTERS inside each session panel ---------- */
.chap{list-style:none;margin:16px 0 0;padding:0;counter-reset:ch}
.chap li{counter-increment:ch;display:flex;gap:14px;align-items:baseline;
  padding:9px 0;border-top:1px solid var(--g4);
  font-size:clamp(14.5px,1.35vw,16px);line-height:1.4;font-weight:500;color:var(--g8)}
.chap li::before{content:counter(ch,decimal-leading-zero);flex:none;
  font-size:11px;font-weight:700;letter-spacing:0.1em;color:var(--green)}
/* the Boss closes the session: same row, its own label instead of a number */
.chap li.boss{counter-increment:none;font-weight:700}
.chap li.boss::before{content:"BOSS";color:var(--orange-ink)}
/* The Outcome closes the session on what you can DO. Its label is too long to
   sit in the number gutter without indenting every chapter above it, so the
   row goes full width with the label stacked over the sentence. */
.chap li.outcome{counter-increment:none;font-weight:700;display:block;
  border-top:2px solid var(--g8);padding-top:12px;margin-top:4px}
.chap li.outcome::before{content:"THE OUTCOME";display:block;margin-bottom:5px;
  color:var(--orange-ink)}
@media(max-width:760px){
  .cl-caption .chap li{font-size:14.5px;padding:8px 0}
}

/* ---------- 13. THE CURRICULUM — its own section ---------- */
.curric{background:var(--white);padding-top:0}
.cur-list{max-width:820px;margin:clamp(28px,4vh,44px) auto 0;display:grid;gap:10px}
.cur-list details{background:var(--g1);border-radius:var(--r-sm);overflow:hidden}
.cur-list summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:16px;
  padding:20px 24px;font-weight:700;font-size:clamp(17px,1.8vw,20px);color:var(--g8)}
.cur-list summary::-webkit-details-marker{display:none}
.cur-list summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.cur-list .cn{flex:none;font-size:12px;letter-spacing:0.12em;color:var(--green)}
.cur-list .ct{flex:1}
.cur-list .cc{flex:none;font-size:13px;font-weight:600;color:var(--g6)}
.cur-list details[open]:not(.is-closing) summary .cc{color:var(--green)}
.cur-list .chap{margin:0;padding:0 24px 16px 58px}
.cur-list .chap li{border-color:var(--g3)}
@media(max-width:560px){
  .cur-list summary{flex-wrap:wrap;gap:4px 12px;padding:16px 18px}
  .cur-list .cc{flex-basis:100%;padding-left:32px}
  .cur-list .chap{padding:0 18px 12px 18px}
}

/* ---------- 14. THE COMPARE — the Stack vs everyone else ---------- */
.vs-card{max-width:900px;margin:clamp(28px,4vh,44px) auto 0;background:var(--white);
  border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.vs-grid{display:grid;grid-template-columns:minmax(120px,.8fr) 1fr 1.25fr}
.vs-grid>div{padding:16px 20px;border-top:1px solid var(--g3);font-size:15.5px;line-height:1.45}
/* The Stack column reads as ONE block of green, not a stack of green cells:
   no row rules cross it, and on mobile — where the row label takes a full-width
   row of its own — the label row carries the green across its right half so
   the column never breaks. */
.vs-grid>.vs-us{border-top-color:transparent}
.vs-grid>.vs-hd{border-top:0;padding-block:22px 18px}
.vs-hd b{display:block;font-size:17px;color:var(--g8)}
.vs-hd span{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--g6)}
.vs-l{font-weight:700;font-size:13px !important;letter-spacing:0.06em;text-transform:uppercase;color:var(--g6)}
.vs-them{color:var(--g6)}
.vs-us{background:var(--green-05);color:var(--g8);font-weight:600}
.vs-us.vs-hd b{color:var(--green)}
@media(max-width:640px){
  .vs-grid{grid-template-columns:1fr 1fr}
  .vs-grid>.vs-l{grid-column:1 / -1;padding-bottom:0;border-top:1px solid var(--g3);
    background:linear-gradient(to right,transparent 0 50%,var(--green-05) 50% 100%)}
  .vs-grid>.vs-l{padding-right:50%}   /* the label can never run onto the green */
  .vs-grid>.vs-l.vs-hd{display:none}
  .vs-grid>.vs-l+.vs-them,.vs-grid>.vs-l+.vs-them+.vs-us{border-top:0}
  .vs-grid>div{padding:12px 16px;font-size:14.5px}
}

/* ---------- 15. THE PRICE ---------- */
.price{background:var(--white)}
.price .sec-head{text-align:center}
.price .sec-head .lead{margin-inline:auto}
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:820px;margin:clamp(30px,4vh,48px) auto 0;align-items:stretch}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--g1);border-radius:var(--r);padding:clamp(24px,3vw,34px)}
.pcard b{font-size:18px;color:var(--g8)}
.pcard .pp{margin-top:8px;font-weight:800;font-size:clamp(40px,5vw,54px);line-height:1;letter-spacing:-0.03em;color:var(--g8)}
.pcard .pl{margin-top:8px;font-size:14.5px;color:var(--g6)}
.pcard ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:15px;color:var(--g7)}
.pcard ul li::before{content:"+ ";color:var(--green);font-weight:700}
.pcard .btn{margin-top:auto;align-self:flex-start;transform:translateY(0)}
.pcard .pl+.btn,.pcard ul+.btn{margin-top:24px}
.pcard.best{background:var(--ink);color:var(--n1)}
.pcard.best b,.pcard.best .pp{color:var(--n1)}
.pcard.best .pl{color:var(--n2)}
.pcard.best ul{color:var(--n2)}
.pcard.best ul li::before{color:var(--mint)}
.pcard .rec{position:absolute;top:18px;right:18px;font-size:11px;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;background:var(--mint);color:var(--on-mint);padding:5px 10px;border-radius:980px}
.pay3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:980px;margin:clamp(34px,5vh,56px) auto 0}
.pay{padding:22px 4px 0;border-top:2px solid var(--g8)}
.pay .tl{font-weight:700;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--green)}
.pay h3{margin-top:8px;font-size:clamp(19px,2vw,22px)}
.pay h3 .warm{color:var(--orange-ink)}
.pay p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--g6)}
.pay p b{color:var(--g8)}
@media(max-width:760px){
  .pcards,.pay3{grid-template-columns:1fr}
}
.pcard .btn-out{background:var(--white);color:var(--green);border:1.5px solid var(--g4)}
.pcard .btn-out:hover{background:var(--g2);filter:none}
.curric .sec-head,.vs .sec-head{text-align:center}
.curric .sec-head h2,.vs .sec-head h2{margin-inline:auto}
.pcards,.pay3{max-width:900px}

/* ---------- 16. CURRICULUM rows read as dropdowns ---------- */
.cur-list details{border:1px solid var(--g3);transition:border-color .2s ease,background .2s ease}
.cur-list details:hover{border-color:var(--g4);background:var(--g2)}
.cur-list details[open]:not(.is-closing){background:var(--white);border-color:var(--g4);box-shadow:0 1px 2px rgba(6,8,7,0.05),0 10px 28px rgba(6,8,7,0.08)}
.cur-list summary{align-items:center}
.cur-list .cn{align-self:flex-start;padding-top:6px}
.cur-list .ct{display:flex;flex-direction:column;gap:4px;min-width:0}
.cur-list .ct b{font-size:clamp(17px,1.8vw,20px)}
.cur-list .cd{font-size:15px;font-weight:500;line-height:1.45;color:var(--g6)}
.cur-list .cd b{font-size:inherit;color:inherit}
/* the plus: two bars, the vertical one folds away when open */
.cur-list .ci{position:relative;flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--white);border:1px solid var(--g4);transition:background .2s ease,transform .3s var(--ease)}
.cur-list .ci::before,.cur-list .ci::after{content:"";position:absolute;left:50%;top:50%;
  width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--g8);transition:transform .3s var(--ease)}
.cur-list .ci::after{transform:rotate(90deg)}
/* the heights and the scroll are driven per frame by the page script; the browser must not also re-anchor the scroll */
.cur-list{overflow-anchor:none}
.cur-list details[open]:not(.is-closing) .ci{background:var(--g8);border-color:var(--g8)}
.cur-list details[open]:not(.is-closing) .ci::before,.cur-list details[open]:not(.is-closing) .ci::after{background:var(--white)}
.cur-list details[open]:not(.is-closing) .ci::after{transform:rotate(0deg)}
.cur-list details[open] .chap{padding-top:4px}
@media(max-width:560px){
  .cur-list summary{flex-wrap:nowrap;gap:12px}
  .cur-list .cd{font-size:14px}
}

/* ---------- 13. BREATHING ROOM (2026-09-19) ----------
   Zach: "some of the section height needs a little more breathing room, to
   keep that apple slow." One dial for all three pages: the base section
   padding and the gap under a section head. Sections that set their own
   padding (.hero, .what, .blursec) keep it. */
section{padding-block:clamp(112px,16vh,190px)}
.sec-head{margin-bottom:clamp(48px,7vh,84px)}
.ai.ai-tight{padding-block:clamp(84px,12vh,136px)}
.stackzone{padding-top:clamp(100px,14vh,160px)}
.what{padding-bottom:clamp(84px,12vh,136px)}

/* the coach's quote card sits outside .wrap, so it ran the full window width */
.voicebar{max-width:760px;margin-inline:auto}

/* ---------- 14. PREVIEW: the bento is the hero (?hero=bento) ---------- */
body.hero-bento .hero-obj{display:none}
body.hero-bento .hero{padding-bottom:clamp(36px,5vh,56px)}
body.hero-bento .what .label{display:none}

/* ---------- 15. PREVIEW: the live spreadsheet hero (?hero=sheet) ----------
   Built by js/hero-sheet.js. Bigger than the bento on purpose: it runs the
   full wrap and lies tilted back with its top receding, so it reads as an
   object on the page and not as one more tile. Palette tokens only. */
body.hero-sheet .hero-obj{max-width:none;aspect-ratio:auto;margin-top:clamp(28px,4vh,48px)}
body.hero-sheet .hero-obj>img{display:none}
body.hero-sheet .hero{padding-bottom:clamp(56px,8vh,96px)}
.hsheet-stage{perspective:1500px;perspective-origin:50% 100%}
.hsheet{--hs-tilt:22;transform:rotateX(calc(var(--hs-tilt)*1deg));transform-origin:50% 100%;
  will-change:transform;text-align:left;
  background:var(--white);border-radius:var(--r);
  border:1px solid var(--g3);box-shadow:var(--shadow);
  padding:clamp(12px,1.6vw,20px);
  font-variant-numeric:tabular-nums}
.hs-bar{display:flex;gap:10px;margin-bottom:clamp(10px,1.4vw,16px)}
.hs-name,.hs-fx{background:var(--g1);border-radius:12px;padding:10px 16px;
  font-size:clamp(13px,1.3vw,16px);font-weight:600;color:var(--g8);min-height:1.2em}
.hs-name{flex:none;width:clamp(58px,7vw,92px);text-align:center}
.hs-fx{flex:1;display:flex;gap:12px;align-items:center;min-width:0}
.hs-fxi{font-style:italic;font-weight:700;color:var(--g5)}
.hs-fxt::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;
  vertical-align:-0.15em;background:var(--green);animation:hsCaret 1s steps(1) infinite}
@keyframes hsCaret{50%{opacity:0}}
.hs-grid{position:relative;display:grid;
  grid-template-columns:clamp(30px,4vw,52px) 1.35fr repeat(4,1fr) 1.15fr;
  border-top:1px solid var(--g3);border-left:1px solid var(--g3)}
.hs-c{display:flex;align-items:center;min-width:0;
  height:clamp(36px,4.2vw,52px);padding-inline:clamp(8px,1.4vw,18px);
  border-right:1px solid var(--g3);border-bottom:1px solid var(--g3);
  font-size:clamp(12.5px,1.35vw,17px);font-weight:500;color:var(--g8);white-space:nowrap}
.hs-col,.hs-row,.hs-corner{background:var(--g1);color:var(--g6);font-weight:600;
  justify-content:center;padding-inline:0;font-size:clamp(11px,1.1vw,13.5px)}
.hs-col{height:clamp(28px,3.2vw,38px)}
.hs-n{justify-content:flex-end}
.hs-h{font-weight:700;color:var(--g6)}
.hs-b{font-weight:700;background:var(--g1)}
.hs-grand{transition:background .5s ease,color .5s ease}
.hs-grand.is-answer{background:var(--mint);color:var(--on-mint)}
.hs-sel{position:absolute;box-sizing:border-box;pointer-events:none;
  border:2.5px solid var(--mint);border-radius:3px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--mint) 16%,transparent);
  transition:left .5s cubic-bezier(.22,.8,.24,1),top .5s cubic-bezier(.22,.8,.24,1),width .5s cubic-bezier(.22,.8,.24,1),height .5s cubic-bezier(.22,.8,.24,1)}
.hs-handle{position:absolute;right:-6px;bottom:-6px;width:9px;height:9px;border-radius:2px;
  background:var(--mint);border:2px solid var(--white)}
/* the Numbers at Work hero (js/hero-numbers.js): line, three numbers, and the Why */
.hs-grid.hn-grid{grid-template-columns:clamp(30px,4vw,52px) 1.1fr .9fr .9fr 1.05fr 3fr}
.hn-var{transition:background .45s ease,color .45s ease}
.hn-why{color:var(--g7);overflow:hidden;font-size:clamp(12px,1.2vw,15.5px)}
.hn-why b{color:var(--g8);font-weight:700}
.hn-rest{white-space:pre}
@media(max-width:900px){.hn-rest{display:none}.hs-grid.hn-grid{grid-template-columns:clamp(26px,4vw,40px) 1.3fr repeat(3,1fr) 1.1fr}}
@media(max-width:640px){
  .hs-grid{grid-template-columns:26px 1.3fr repeat(4,1fr) 1.1fr}
  .hs-grid.hn-grid{grid-template-columns:22px 1.25fr .95fr .95fr 1.05fr 1fr}
  .hn-grid .hs-c{padding-inline:4px}
  .hn-grid .hn-why{font-size:11px}
  .hn-grid .hs-h{font-size:10.5px}
  .hs-c{padding-inline:5px;font-size:11.5px}
  .hs-name,.hs-fx{padding:8px 10px;border-radius:10px}
}
@media(prefers-reduced-motion:reduce){.hs-sel{transition:none}.hs-fxt::after{animation:none}}

/* ---------- 16. THE CLOSER'S LIVE SHEETS (js/closer-sheets.js) ----------
   The hero's sheet, smaller: one card per F on the closer stage. It rides the
   section's own cl-in / cl-out swoop, so only the card itself is styled here. */
.hs-grid{--hs-rn:clamp(30px,4vw,52px)}
.cl-sheet{width:min(100%,620px);max-height:none;text-align:left;
  background:var(--white);border:1px solid var(--g3);border-radius:calc(var(--r) - 6px);
  padding:clamp(10px,1.2vw,16px);font-variant-numeric:tabular-nums;
  filter:none;box-shadow:var(--shadow)}
.cl-sheet .hs-grid{--hs-rn:clamp(26px,2.6vw,40px)}
.cl-sheet .hs-c{height:clamp(28px,2.6vw,38px);font-size:clamp(12px,1.08vw,15px);
  padding-inline:clamp(6px,1vw,14px);
  transition:background .45s ease,color .45s ease,height .4s ease,opacity .3s ease,padding .4s ease,border-width .4s ease}
.cl-sheet .hs-col{height:clamp(24px,2.3vw,32px)}
.cl-sheet .hs-name,.cl-sheet .hs-fx{padding:8px 13px;font-size:clamp(12px,1.05vw,14.5px);border-radius:10px}
.cl-sheet .hs-name{width:clamp(56px,6vw,84px);white-space:nowrap}
.cl-sheet .hs-fxt{white-space:nowrap}
.hs-c.is-answer{background:var(--mint);color:var(--on-mint);font-weight:700}
.hs-c.is-hit{background:var(--green-08)}
.hs-c.is-err{background:var(--orange-06);color:var(--orange-ink);font-weight:700}
.hs-c.hs-raw{justify-content:flex-start;font-weight:400;color:var(--g6);background:var(--white)}
.hs-c.hs-hide{height:0;opacity:0;padding-block:0;border-bottom-width:0;overflow:hidden}
.hs-grid.hs-fade{opacity:0;transform:translateY(8px)}
.cl-sheet .hs-grid{transition:opacity .38s ease,transform .38s ease}
.hs-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px);align-items:stretch}
.hs-chart{display:flex;flex-direction:column;background:var(--g1);border-radius:14px;padding:clamp(10px,1.2vw,16px);min-width:0}
.hs-ctitle{font-weight:700;font-size:clamp(12.5px,1.2vw,16px);color:var(--g8);min-height:1.3em;white-space:nowrap}
.hs-bars{flex:1;display:flex;align-items:flex-end;gap:clamp(6px,1vw,12px);margin-top:10px;min-height:90px}
.hs-barv{flex:1;height:0;border-radius:6px 6px 2px 2px;background:var(--g4);transition:height .7s cubic-bezier(.22,.8,.24,1)}
.hs-barv.is-top{background:var(--mint)}
@media(max-width:760px){
  .cl-sheet .hs-c{height:28px;font-size:11.5px;padding-inline:5px}
  .cl-sheet .hs-col{height:20px}
  .cl-sheet .hs-grid{--hs-rn:22px}
  .cl-sheet .hs-bar{margin-bottom:8px}
  .cl-sheet .hs-name,.cl-sheet .hs-fx{padding:6px 9px;font-size:11.5px}
}

/* ---------- 17. EXCEL'S OWN FURNITURE for the closer scenes ----------
   Zach: "everything shouldn't be typing in the formula bar… filters need to
   show a filter dropdown… flexing should show the pivot table box." So: the
   status bar, a toolbar, the filter menu, function autocomplete, the
   PivotTable Fields pane, an error tip. */
.hs-status{margin-top:8px;padding:6px 12px;border-radius:9px;background:var(--g1);
  font-size:clamp(11px,.95vw,13px);font-weight:600;color:var(--g6);text-align:right;white-space:pre;
  opacity:.0;transition:opacity .4s ease}
.hs-status.is-on{opacity:1}
.hs-tools{display:flex;gap:6px;margin-bottom:clamp(8px,1vw,12px)}
.hs-tool{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:30px;padding:0 10px;
  border-radius:8px;background:var(--g1);color:var(--g7);font-size:13px;font-weight:700;
  transition:background .2s ease,color .2s ease,transform .2s ease}
.hs-tool.is-on{background:var(--g8);color:var(--white);transform:scale(.94)}
.hs-tfill i{width:14px;height:14px;border-radius:4px;background:var(--mint)}
.hs-fbtn{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:5px;background:var(--g2);color:var(--g7);font-style:normal;font-size:10px;
  transition:background .25s ease,color .25s ease}
.hs-fbtn.is-on{background:var(--g8);color:var(--white)}
.hs-fbtn.is-set{background:var(--mint);color:var(--on-mint)}
.hs-menu{position:absolute;z-index:3;min-width:clamp(128px,13vw,178px);padding:7px;
  background:var(--white);border:1px solid var(--g3);border-radius:13px;
  box-shadow:0 6px 18px rgba(6,8,7,0.10),0 18px 44px rgba(6,8,7,0.12);
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:100% 0;
  transition:opacity .2s ease,transform .24s cubic-bezier(.22,.8,.24,1)}
.hs-menu.is-open{opacity:1;transform:none}
.hs-mi{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;
  font-size:clamp(11.5px,1vw,13.5px);font-weight:600;color:var(--g8);white-space:nowrap;
  transition:background .2s ease,opacity .2s ease}
.hs-mi.is-dim{color:var(--g5)}
.hs-mi.is-pick{background:var(--mint);color:var(--on-mint)}
.hs-chk{flex:none;width:15px;height:15px;border-radius:4px;border:1.5px solid var(--g4);background:var(--white);
  display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:10px;line-height:1;
  transition:background .2s ease,border-color .2s ease}
.hs-chk.is-on{background:var(--mint);border-color:var(--mint)}
.hs-chk.is-on::after{content:"\2713";color:var(--on-mint);font-weight:700}
.hs-chk.is-some::after{content:"";width:7px;height:2px;border-radius:2px;background:var(--g6)}
.hs-ok{display:block;margin:6px 2px 2px auto;width:max-content;padding:5px 14px;border-radius:980px;
  background:var(--g8);color:var(--white);font-size:12px;font-weight:700;transition:transform .15s ease,background .15s ease}
.hs-ok.is-on{transform:scale(.92);background:var(--green)}
.hs-fn{font-style:italic;font-weight:700;font-size:11px;color:var(--g5)}
.hs-mi.is-pick .hs-fn{color:var(--on-mint)}
.hs-c.hs-edit{justify-content:flex-start;font-weight:600}
.hs-tip{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-color:var(--orange-25)}
.hs-tip b{color:var(--orange-ink);font-size:clamp(11.5px,1vw,13.5px)}
.hs-tip span{font-size:clamp(11px,.95vw,13px);font-weight:600;color:var(--g7);white-space:nowrap}
.hs-split-pv{grid-template-columns:1.15fr 1fr}
.hs-pane{background:var(--g1);border-radius:14px;padding:clamp(9px,1.1vw,14px);min-width:0;display:flex;flex-direction:column}
.hs-ptitle{font-weight:700;font-size:clamp(11.5px,1.05vw,14px);color:var(--g8);margin-bottom:4px;white-space:nowrap}
.hs-pane .hs-mi{padding:4px 2px}
.hs-areas{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto;padding-top:8px}
.hs-area{background:var(--white);border:1px solid var(--g3);border-radius:9px;padding:6px;min-height:clamp(46px,5vw,62px);min-width:0}
.hs-alab{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g6);margin-bottom:4px}
.hs-chip{display:block;padding:3px 7px;border-radius:6px;background:var(--mint);color:var(--on-mint);
  font-size:clamp(10px,.9vw,12px);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .3s cubic-bezier(.22,.8,.24,1)}
.hs-chip.is-open{opacity:1;transform:none}
@media(max-width:760px){
  .hs-status{padding:4px 8px;font-size:10.5px}
  .hs-tool{height:24px;min-width:28px;font-size:11.5px}
  .hs-areas{grid-template-columns:1fr;gap:4px}
  .hs-area{min-height:0;padding:4px 5px;display:flex;align-items:center;gap:6px}
  .hs-alab{margin:0}
  .hs-menu{min-width:118px}
}

/* ---------- 18. THE REFERENCE LETTER, LIVE (js/letter-live.js) ----------
   The sheets' grammar on a letter: white page, gray rules, ONE accent — and
   here the accent is orange, because the letter is the page's orange moment.
   The orange bottom edge is the old render's painted card edge, kept. */
.rl-stage{perspective:1500px;max-width:470px;margin-inline:auto}
.rl-page{position:relative;aspect-ratio:1/1.24;background:var(--white);
  border:1px solid var(--g3);border-bottom:6px solid var(--orange);border-radius:18px;
  box-shadow:var(--shadow);padding:clamp(20px,2.6vw,34px);
  display:flex;flex-direction:column;text-align:left;
  opacity:0;transform:rotateX(16deg) rotateZ(-2.5deg) translateY(40px) scale(.96);transform-origin:50% 100%;
  transition:opacity .45s ease,transform .8s cubic-bezier(.22,.8,.24,1)}
.rl-page.is-on{opacity:1;transform:rotateX(7deg) rotateZ(-2.5deg)}
.rl-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:clamp(10px,1.4vw,16px);border-bottom:1px solid var(--g3)}
.rl-mark{font-weight:800;font-size:clamp(12px,1.15vw,15px);letter-spacing:-.01em;color:var(--g8)}
.rl-mark i{font-style:normal;color:var(--orange)}
.rl-kind{font-size:clamp(9px,.8vw,10.5px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--g6)}
.rl-re{display:flex;align-items:center;gap:10px;margin-top:clamp(14px,1.8vw,22px);
  font-size:clamp(13px,1.2vw,15.5px)}
.rl-lab{font-weight:700;color:var(--g6)}
.rl-name{min-width:9ch;min-height:1.7em;display:inline-flex;align-items:center;padding:2px 10px;border-radius:8px;
  font-weight:700;color:var(--g8);background:var(--g1);
  transition:background .5s ease,color .5s ease}
.rl-name.is-typing::after{content:"";width:2px;height:1.05em;margin-left:2px;background:var(--orange);animation:hsCaret 1s steps(1) infinite}
.rl-name.is-done{background:var(--orange-18);color:var(--orange-ink)}
.rl-salute{margin-top:clamp(12px,1.6vw,20px);font-size:clamp(12.5px,1.15vw,15px);font-weight:600;color:var(--g7)}
.rl-body{margin-top:clamp(10px,1.3vw,16px);display:flex;flex-direction:column;gap:clamp(6px,.8vw,9px)}
.rl-line{display:block;height:clamp(5px,.6vw,7px);border-radius:980px;background:var(--g3);
  width:var(--w);transform-origin:0 50%;transform:scaleX(0);transition:transform .4s cubic-bezier(.22,.8,.24,1)}
.rl-line.is-on{transform:none}
.rl-gap{display:block;height:clamp(3px,.4vw,5px)}
.rl-foot{margin-top:auto}
.rl-close{font-size:clamp(12.5px,1.15vw,15px);font-weight:600;color:var(--g7);opacity:0;transition:opacity .4s ease}
.rl-close.is-on{opacity:1}
.rl-sig{margin-top:2px;font-family:'Snell Roundhand','Segoe Script','Brush Script MT','Apple Chancery',cursive;
  font-size:clamp(30px,3.6vw,46px);line-height:1.25;color:var(--g8);white-space:nowrap;
  clip-path:inset(-10% 100% -10% 0);transition:clip-path .8s cubic-bezier(.45,.05,.3,1)}
.rl-sig.is-on{clip-path:inset(-10% -4% -10% 0)}
.rl-sig span{display:inline-block;transform:rotate(-4deg);transform-origin:0 100%}
.rl-who{margin-top:4px;padding-top:8px;border-top:1px solid var(--g3);width:max-content;max-width:100%;
  font-size:clamp(10px,.9vw,12px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g6);
  opacity:0;transition:opacity .5s ease}
.rl-who.is-on{opacity:1}
.rl-stamp{position:absolute;right:clamp(16px,2.2vw,30px);bottom:clamp(118px,29%,178px);
  padding:6px 14px;border:3px solid var(--orange-ink);border-radius:10px;
  font-size:clamp(15px,1.7vw,22px);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink);
  opacity:0;transform:rotate(-11deg) scale(2.1);
  transition:opacity .16s ease,transform .34s cubic-bezier(.2,1.5,.35,1)}
.rl-stamp.is-on{opacity:.92;transform:rotate(-11deg)}
@media(max-width:760px){.rl-stage{max-width:340px;margin-bottom:34px}}
@media(prefers-reduced-motion:reduce){
  .rl-page,.rl-line,.rl-sig,.rl-stamp{transition:none}
}

/* ---------- 19. THE LETTER, TWO QUIETER LOOKS (?letter=doc | ink) ----------
   Zach on §18: "it looks a little cartoony." Shared moves: his signature as
   ink (img/signature.webp), ruled hairlines for the body, no rotated stamp. */
.rl-v-doc .rl-sig,.rl-v-ink .rl-sig{font-size:0;line-height:0;margin-top:6px}
.rl-v-doc .rl-sig img,.rl-v-ink .rl-sig img{display:block;width:clamp(160px,58%,250px);height:auto;margin:0}
.rl-v-doc .rl-body,.rl-v-ink .rl-body{gap:0;margin-top:clamp(6px,1vw,12px)}
.rl-v-doc .rl-line,.rl-v-ink .rl-line{height:clamp(19px,2.3vw,27px);width:100%;border-radius:0;background:none;
  border-bottom:1px solid var(--g3)}

/* doc: a flat, typeset page. Nothing tilts, the verdict is one quiet line. */
.rl-v-doc{perspective:none}
.rl-v-doc .rl-page{border-radius:6px;border-bottom-width:1px;border-bottom-color:var(--g3);
  padding:clamp(26px,3.2vw,44px);transform:translateY(28px)}
.rl-v-doc .rl-page.is-on{transform:none}
.rl-v-doc .rl-page::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--orange);border-radius:6px 6px 0 0}
.rl-v-doc .rl-head{border-bottom:0;padding-bottom:0}
.rl-v-doc .rl-salute,.rl-v-doc .rl-close{font-family:Georgia,'Times New Roman',serif;font-weight:400;
  font-size:clamp(14px,1.3vw,17px);color:var(--g8)}
.rl-v-doc .rl-re{font-family:Georgia,'Times New Roman',serif;margin-top:clamp(22px,3vw,40px)}
.rl-v-doc .rl-lab{font-weight:400;color:var(--g6)}
.rl-v-doc .rl-name{background:none;padding:0 0 1px;border-radius:0;border-bottom:1px solid var(--g4);font-weight:400;min-width:12ch}
.rl-v-doc .rl-name.is-done{background:none;color:var(--g8);border-bottom-color:var(--orange)}
.rl-v-doc .rl-who{border-top:0;padding-top:2px}
.rl-v-doc .rl-stamp{right:auto;left:clamp(26px,3.2vw,44px);bottom:clamp(14px,1.8vw,22px);
  padding:0 0 0 14px;border:0;border-radius:0;transform:none;
  font-size:clamp(9.5px,.85vw,11px);letter-spacing:.16em;font-weight:700;color:var(--orange-ink);
  transition:opacity .6s ease}
.rl-v-doc .rl-stamp::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;background:var(--orange)}
.rl-v-doc .rl-stamp.is-on{opacity:1;transform:none}
.rl-v-doc .rl-foot{margin-bottom:clamp(20px,2.4vw,30px)}

/* ink: the brand's dark ground, one orange hairline, a seal instead of a stamp */
.rl-v-ink .rl-page{background:var(--ink);border-color:var(--ink);border-bottom-width:1px;border-radius:20px;
  transform:rotateX(12deg) translateY(36px) scale(.97)}
.rl-v-ink .rl-page.is-on{transform:rotateX(4deg)}
.rl-v-ink .rl-head{border-bottom:1px solid var(--orange)}
.rl-v-ink .rl-mark{color:var(--n1)}
.rl-v-ink .rl-kind,.rl-v-ink .rl-lab,.rl-v-ink .rl-who{color:var(--n3)}
.rl-v-ink .rl-salute,.rl-v-ink .rl-close{color:var(--n2)}
.rl-v-ink .rl-name{background:none;border:1px solid color-mix(in srgb,var(--n3) 45%,transparent);color:var(--n1)}
.rl-v-ink .rl-name.is-done{background:none;border-color:var(--orange);color:var(--n1)}
.rl-v-ink .rl-line{border-bottom-color:color-mix(in srgb,var(--n3) 28%,transparent)}
.rl-v-ink .rl-sig img{filter:invert(1) brightness(1.6)}
.rl-v-ink .rl-who{border-top-color:color-mix(in srgb,var(--n3) 28%,transparent)}
.rl-v-ink .rl-stamp{right:clamp(20px,2.6vw,34px);bottom:clamp(20px,2.6vw,34px);
  width:clamp(54px,6vw,74px);height:clamp(54px,6vw,74px);padding:0;border:1.5px solid var(--orange);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(13px,1.4vw,17px);letter-spacing:-.01em;text-transform:none;font-weight:800;color:var(--n1);
  transform:scale(.8);transition:opacity .7s ease,transform .9s cubic-bezier(.22,.8,.24,1)}
.rl-v-ink .rl-stamp i{font-style:normal;color:var(--orange)}
.rl-v-ink .rl-stamp.is-on{opacity:1;transform:none}

/* ---------- 19b. HEADLINE BLOCK REVEAL (restored 2026-09-19) ----------
   A mint block wipes across each line, and the line is there when it
   leaves. The words are split by JS; with no JS (or reduced motion) the
   headline is simply there. The 2.6s failsafe un-hides it if v5.js
   never arrives, so a blocked script can never cost the headline. */
.js [data-reveal]{visibility:hidden;animation:br-safe 0s 2.6s forwards}
.js [data-reveal].br-on{visibility:visible;animation:none;position:relative}
@keyframes br-safe{to{visibility:visible}}
.br-w{display:inline-block;opacity:0;transition:opacity .01s linear}
.br-w.in{opacity:1}
.br-blk{position:absolute;background:var(--mint);border-radius:6px;
  transform:scaleX(0);transform-origin:left center;pointer-events:none;z-index:1}
.br-blk.go{animation:br-wipe .9s cubic-bezier(.22,.8,.24,1) forwards}
@keyframes br-wipe{
  0%{transform:scaleX(0);transform-origin:left center}
  48%{transform:scaleX(1);transform-origin:left center}
  52%{transform:scaleX(1);transform-origin:right center}
  100%{transform:scaleX(0);transform-origin:right center}
}
@media(prefers-reduced-motion:reduce){.js [data-reveal]{visibility:visible;animation:none}.br-blk{display:none}.br-w{opacity:1}}

/* ---------- 20. HOME: a live visual on each quote card (js/home-cards.js) ----------
   The visual sits above the LUL mark in the card's right column; the mark
   keeps its place and ramp and steps down a size. Dark-ground pieces use the
   n-ramp; card 4 is on mint and uses --on-mint. */
.qmark.has-viz{display:flex;flex-direction:column;align-items:flex-end;gap:clamp(18px,2.4vw,30px);
  line-height:1;white-space:normal;width:100%}
.qmark.has-viz .lul{font-size:clamp(40px,5vw,68px);line-height:.8;white-space:nowrap}
.qcard:has(.has-viz){grid-template-columns:minmax(0,1fr) minmax(200px,400px)}
@media(min-width:641px) and (max-width:860px){.qcard:has(.has-viz){grid-template-columns:minmax(0,1fr) minmax(150px,230px)}}
@media(max-width:640px){.qcard:has(.has-viz){grid-template-columns:1fr}}
.qviz{width:100%;max-width:400px;text-align:left;font-weight:600;line-height:1.3}

.qv-rooms{display:flex;flex-direction:column;gap:9px}
.qv-bub{align-self:flex-start;max-width:86%;padding:10px 14px;border-radius:16px 16px 16px 5px;
  background:color-mix(in srgb,var(--n3) 22%,transparent);color:var(--n1);font-size:15.5px;
  opacity:0;transform:translateY(10px) scale(.96);transform-origin:0 100%;
  transition:opacity .4s ease,transform .5s cubic-bezier(.22,.8,.24,1)}
.qv-bub.is-r{align-self:flex-end;border-radius:16px 16px 5px 16px;transform-origin:100% 100%;
  background:color-mix(in srgb,var(--n3) 34%,transparent)}
.qv-bub.is-on{opacity:1;transform:none}
.qv-bub span{filter:blur(5px);user-select:none}
.qv-typing{display:flex;gap:5px;padding:13px 15px}
.qv-typing i{width:6px;height:6px;border-radius:50%;background:var(--n2);animation:qvDot 1.2s ease-in-out infinite}
.qv-typing i:nth-child(2){animation-delay:.15s}
.qv-typing i:nth-child(3){animation-delay:.3s}
@keyframes qvDot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}

.qv-names{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--n3) 30%,transparent)}
.qv-row{display:flex;align-items:center;gap:12px;padding:14px 17px;font-size:16px;color:var(--n2);
  border-bottom:1px solid color-mix(in srgb,var(--n3) 22%,transparent);
  transition:background .3s ease,color .3s ease}
.qv-row:last-child{border-bottom:0}
.qv-n{width:1.4em;font-size:11px;font-weight:700;color:var(--n3);font-variant-numeric:tabular-nums}
.qv-dash{margin-left:auto;width:34px;height:6px;border-radius:6px;background:color-mix(in srgb,var(--n3) 35%,transparent);transition:background .3s ease,width .4s ease}
.qv-row.is-at{background:color-mix(in srgb,var(--n3) 20%,transparent);color:var(--n1)}
.qv-row.is-you{background:var(--mint);color:var(--on-mint)}
.qv-row.is-you .qv-n{color:var(--on-mint)}
.qv-row.is-you .qv-dash{background:var(--on-mint);width:52px}

.qv-dots{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(7px,1vw,11px);padding:4px}
.qv-dots i{aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--n3) 30%,transparent);
  transition:background .5s ease,transform .5s cubic-bezier(.22,.8,.24,1),opacity .5s ease}
.qv-dots.is-all i{background:var(--n2)}
.qv-dots.is-few i{opacity:.45}
.qv-dots.is-few i.is-keep{opacity:1;background:var(--mint);transform:scale(1.35)}

.qv-list{display:flex;flex-direction:column;gap:10px}
.qv-item{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px;
  background:color-mix(in srgb,var(--on-mint) 9%,transparent);color:var(--on-mint);font-size:17px;font-weight:700}
.qv-item span{filter:blur(6px);transition:filter .7s ease}
.qv-item.is-clear span{filter:none}
.qv-tick{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--on-mint);
  display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;
  transition:background .3s ease}
.qv-item.is-done .qv-tick{background:var(--on-mint)}
.qv-item.is-done .qv-tick::after{content:"\2713";color:var(--mint);font-weight:800}

@media(min-width:641px) and (max-width:860px){
  .qviz{font-size:13px}
  .qv-bub,.qv-row{font-size:12.5px;padding:8px 10px}
  .qv-item{font-size:13px;padding:10px 12px}
}
@media(max-width:640px){
  .qmark.has-viz{align-items:stretch}
  .qmark.has-viz .lul{align-self:flex-end}
  .qviz{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .qv-bub,.qv-dots i,.qv-item span{transition:none}
  .qv-typing i{animation:none}
}

/* ---------- 21. HOME CARDS, TWO OTHER DIRECTIONS (?cards=art | type) ---------- */
/* both posters fully visible: side by side, a slight tilt, no overlap
   (Zach, 2026-09-19: "can they both be visible?") */
.qcard:has(.qv-art){grid-template-columns:minmax(0,1fr) minmax(220px,470px)}
.qv-art{display:flex;align-items:flex-start;gap:5%;max-width:470px;padding:10px 6px 0}
.qv-art img{display:block;width:47.5%;height:auto;border-radius:12px;
  box-shadow:0 10px 30px rgba(6,8,7,0.45);opacity:0;
  outline:1px solid color-mix(in srgb,var(--n3) 38%,transparent);outline-offset:-1px;
  transition:opacity .5s ease,transform .8s cubic-bezier(.22,.8,.24,1)}
.qv-art .is-front{transform:translateY(30px) rotate(-7deg)}
.qv-art .is-back{margin-top:7%;transform:translateY(30px) rotate(8deg)}
.qv-art .is-front.is-on{opacity:1;transform:rotate(-3deg)}
.qv-art .is-back.is-on{opacity:1;transform:rotate(3deg)}
@media(min-width:641px) and (max-width:860px){.qcard:has(.qv-art){grid-template-columns:minmax(0,1fr) minmax(170px,280px)}}
@media(max-width:640px){.qcard:has(.qv-art){grid-template-columns:1fr}}

.qv-glyph{display:flex;justify-content:flex-end;max-width:400px}
.qv-glyph svg{width:clamp(170px,20vw,270px);height:auto;overflow:visible;
  opacity:0;transform:scale(.86);transform-origin:70% 60%;
  transition:opacity .5s ease,transform .8s cubic-bezier(.2,1.2,.3,1)}
.qv-glyph.is-on svg{opacity:1;transform:none}
.g-txt{font-family:var(--font);font-weight:800;font-size:196px;fill:var(--n1)}
.g-bar{fill:var(--mint)}
.g-line{fill:none;stroke:var(--n1);stroke-width:30;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:320;stroke-dashoffset:320;transition:stroke-dashoffset .8s cubic-bezier(.45,.05,.3,1) .25s}
.qv-glyph.is-on .g-line{stroke-dashoffset:0}
.qv-glyph.is-on .g-line+.g-line{transition-delay:.5s}
.qv-g2.is-on .g-bar{animation:qvPause 2.4s ease-in-out 1s infinite}
@keyframes qvPause{0%,100%{opacity:1}50%{opacity:.55}}
.qv-g4 .g-line{stroke:var(--on-mint)}
@media(max-width:640px){.qv-art{max-width:none}.qv-glyph{max-width:none}}
@media(prefers-reduced-motion:reduce){.qv-art img,.qv-glyph svg,.g-line{transition:none}.qv-g2.is-on .g-bar{animation:none}}

/* ---------- 17. THE DEPARTMENT VIGNETTES, LIVE (js/role-vignettes.js) ----------
   Only the way in is styled; the finished frame is the static card, untouched.
   The verdict (pill, spike) waits in plain ink and lands after the numbers. */
.vg-live .vrow,.vg-live .bar,.vg-live .fbar,.vg-live .ask,.vg-live .metric,.vg-live .tabs{
  opacity:0;transform:translateY(7px);
  transition:opacity .38s ease,transform .38s cubic-bezier(.22,.8,.24,1),width .8s cubic-bezier(.22,.8,.24,1)}
.vg-live .is-in{opacity:1;transform:none}
.vg-live .fbar{white-space:nowrap;overflow:hidden}
.vg-live .bar i{transition:height .8s cubic-bezier(.22,.8,.24,1),background .45s ease}
.vg-live .mint,.vg-live .warn{transition:background .45s ease,color .45s ease}
.vg-live .vg-wait.mint,.vg-live .vg-wait.warn{background:transparent;color:inherit}
.vg-live .bar.vg-wait i{background:var(--g3)}
.vg-live .tab{transition:background .3s ease,color .3s ease}
.vg-live .bar.vg-wait .bv{color:inherit;transition:color .45s ease}

/* ---------- 18. THE NAW REPORTS, MARKED UP BY HAND (js/closer-sheets.js, NAW set) ----------
   A clean report card and a pen. No grid, no formula bar, no paper texture:
   the only "hand" is the orange loop around a number and the question written
   in the margin beside it. */
.cl-sheet.cl-report{background:none;border:0;box-shadow:none;padding:0;width:100%;height:100%;overflow:visible;filter:none}
.cl-report.cl-in{animation:none}
.rp-wrap{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(14px,2vw,28px);align-items:stretch}
.rp{background:var(--white);border:1px solid var(--g3);border-radius:18px;box-shadow:var(--shadow);
  padding:clamp(16px,1.8vw,24px);font-variant-numeric:tabular-nums;
  /* the card is as tall as the chapters beside it; its lines share that height */
  display:flex;flex-direction:column}
.rp .rp-row{flex:1 1 auto;align-items:center}
.rp .rp-cols{flex:0 0 auto}
.rp-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:12px;margin-bottom:4px;border-bottom:2px solid var(--g8)}
.rp-head b{font-size:clamp(14px,1.25vw,17px);font-weight:700;color:var(--g8)}
.rp-head span{font-size:11px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:var(--g6)}
.rp-row{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(var(--rp-cols),minmax(0,1fr));gap:8px;align-items:baseline;
  padding:clamp(8px,.9vw,11px) 0;border-top:1px solid var(--g2);font-size:clamp(13px,1.15vw,15.5px);font-weight:500;color:var(--g8)}
.rp-head + .rp-row{border-top:0}
.rp-v{text-align:right;white-space:nowrap}
.rp-cols{font-size:10.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--g6);padding-bottom:2px}
.rp-total{font-weight:700;border-top:1.5px solid var(--g8)}
.rp-margin{position:relative;min-height:100%}
.rp-mark{position:absolute;overflow:visible;pointer-events:none;z-index:2}
.rp-mark path{fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke;
}
.rp-note{position:absolute;left:0;right:0;font-family:'Caveat','Segoe Print','Bradley Hand',cursive;font-weight:600;
  font-size:clamp(19px,1.75vw,24px);line-height:1.02;color:var(--orange-ink);transform:rotate(-2deg);transform-origin:0 50%}
.rp-note:nth-child(even){transform:rotate(1.5deg)}
@media(max-width:820px){
  .rp-wrap{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:8px}
  .rp{padding:12px;border-radius:14px}
  .rp-row{font-size:12px;gap:4px}
  .rp-note{font-size:17px}
}

/* ---------- 19. THE LETTER, TWO QUIETER LOOKS (?letter=doc | ink) ----------
   Zach on §18: "it looks a little cartoony." Shared moves: his signature as
   ink (img/signature.webp), ruled hairlines for the body, no rotated stamp. */
.rl-v-doc .rl-sig,.rl-v-ink .rl-sig{font-size:0;line-height:0;margin-top:6px}
.rl-v-doc .rl-sig img,.rl-v-ink .rl-sig img{display:block;width:clamp(160px,58%,250px);height:auto;margin:0}
.rl-v-doc .rl-body,.rl-v-ink .rl-body{gap:0;margin-top:clamp(6px,1vw,12px)}
.rl-v-doc .rl-line,.rl-v-ink .rl-line{height:clamp(19px,2.3vw,27px);width:100%;border-radius:0;background:none;
  border-bottom:1px solid var(--g3)}

/* doc: a flat, typeset page. Nothing tilts, the verdict is one quiet line. */
.rl-v-doc{perspective:none}
.rl-v-doc .rl-page{border-radius:6px;border-bottom-width:1px;border-bottom-color:var(--g3);
  padding:clamp(26px,3.2vw,44px);transform:translateY(28px)}
.rl-v-doc .rl-page.is-on{transform:none}
.rl-v-doc .rl-page::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--orange);border-radius:6px 6px 0 0}
.rl-v-doc .rl-head{border-bottom:0;padding-bottom:0}
.rl-v-doc .rl-salute,.rl-v-doc .rl-close{font-family:Georgia,'Times New Roman',serif;font-weight:400;
  font-size:clamp(14px,1.3vw,17px);color:var(--g8)}
.rl-v-doc .rl-re{font-family:Georgia,'Times New Roman',serif;margin-top:clamp(22px,3vw,40px)}
.rl-v-doc .rl-lab{font-weight:400;color:var(--g6)}
.rl-v-doc .rl-name{background:none;padding:0 0 1px;border-radius:0;border-bottom:1px solid var(--g4);font-weight:400;min-width:12ch}
.rl-v-doc .rl-name.is-done{background:none;color:var(--g8);border-bottom-color:var(--orange)}
.rl-v-doc .rl-who{border-top:0;padding-top:2px}
.rl-v-doc .rl-stamp{right:auto;left:clamp(26px,3.2vw,44px);bottom:clamp(14px,1.8vw,22px);
  padding:0 0 0 14px;border:0;border-radius:0;transform:none;
  font-size:clamp(9.5px,.85vw,11px);letter-spacing:.16em;font-weight:700;color:var(--orange-ink);
  transition:opacity .6s ease}
.rl-v-doc .rl-stamp::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;background:var(--orange)}
.rl-v-doc .rl-stamp.is-on{opacity:1;transform:none}
.rl-v-doc .rl-foot{margin-bottom:clamp(20px,2.4vw,30px)}

/* ink: the brand's dark ground, one orange hairline, a seal instead of a stamp */
.rl-v-ink .rl-page{background:var(--ink);border-color:var(--ink);border-bottom-width:1px;border-radius:20px;
  transform:rotateX(12deg) translateY(36px) scale(.97)}
.rl-v-ink .rl-page.is-on{transform:rotateX(4deg)}
.rl-v-ink .rl-head{border-bottom:1px solid var(--orange)}
.rl-v-ink .rl-mark{color:var(--n1)}
.rl-v-ink .rl-kind,.rl-v-ink .rl-lab,.rl-v-ink .rl-who{color:var(--n3)}
.rl-v-ink .rl-salute,.rl-v-ink .rl-close{color:var(--n2)}
.rl-v-ink .rl-name{background:none;border:1px solid color-mix(in srgb,var(--n3) 45%,transparent);color:var(--n1)}
.rl-v-ink .rl-name.is-done{background:none;border-color:var(--orange);color:var(--n1)}
.rl-v-ink .rl-line{border-bottom-color:color-mix(in srgb,var(--n3) 28%,transparent)}
.rl-v-ink .rl-sig img{filter:invert(1) brightness(1.6)}
.rl-v-ink .rl-who{border-top-color:color-mix(in srgb,var(--n3) 28%,transparent)}
.rl-v-ink .rl-stamp{right:clamp(20px,2.6vw,34px);bottom:clamp(20px,2.6vw,34px);
  width:clamp(54px,6vw,74px);height:clamp(54px,6vw,74px);padding:0;border:1.5px solid var(--orange);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(13px,1.4vw,17px);letter-spacing:-.01em;text-transform:none;font-weight:800;color:var(--n1);
  transform:scale(.8);transition:opacity .7s ease,transform .9s cubic-bezier(.22,.8,.24,1)}
.rl-v-ink .rl-stamp i{font-style:normal;color:var(--orange)}
.rl-v-ink .rl-stamp.is-on{opacity:1;transform:none}

/* ---------- 19b. HEADLINE BLOCK REVEAL (restored 2026-09-19) ----------
   A mint block wipes across each line, and the line is there when it
   leaves. The words are split by JS; with no JS (or reduced motion) the
   headline is simply there. The 2.6s failsafe un-hides it if v5.js
   never arrives, so a blocked script can never cost the headline. */
.js [data-reveal]{visibility:hidden;animation:br-safe 0s 2.6s forwards}
.js [data-reveal].br-on{visibility:visible;animation:none;position:relative}
@keyframes br-safe{to{visibility:visible}}
.br-w{display:inline-block;opacity:0;transition:opacity .01s linear}
.br-w.in{opacity:1}
.br-blk{position:absolute;background:var(--mint);border-radius:6px;
  transform:scaleX(0);transform-origin:left center;pointer-events:none;z-index:1}
.br-blk.go{animation:br-wipe .9s cubic-bezier(.22,.8,.24,1) forwards}
@keyframes br-wipe{
  0%{transform:scaleX(0);transform-origin:left center}
  48%{transform:scaleX(1);transform-origin:left center}
  52%{transform:scaleX(1);transform-origin:right center}
  100%{transform:scaleX(0);transform-origin:right center}
}
@media(prefers-reduced-motion:reduce){.js [data-reveal]{visibility:visible;animation:none}.br-blk{display:none}.br-w{opacity:1}}

/* ---------- 20. HOME: a live visual on each quote card (js/home-cards.js) ----------
   The visual sits above the LUL mark in the card's right column; the mark
   keeps its place and ramp and steps down a size. Dark-ground pieces use the
   n-ramp; card 4 is on mint and uses --on-mint. */
.qmark.has-viz{display:flex;flex-direction:column;align-items:flex-end;gap:clamp(18px,2.4vw,30px);
  line-height:1;white-space:normal;width:100%}
.qmark.has-viz .lul{font-size:clamp(40px,5vw,68px);line-height:.8;white-space:nowrap}
.qcard:has(.has-viz){grid-template-columns:minmax(0,1fr) minmax(200px,400px)}
@media(min-width:641px) and (max-width:860px){.qcard:has(.has-viz){grid-template-columns:minmax(0,1fr) minmax(150px,230px)}}
@media(max-width:640px){.qcard:has(.has-viz){grid-template-columns:1fr}}
.qviz{width:100%;max-width:400px;text-align:left;font-weight:600;line-height:1.3}

.qv-rooms{display:flex;flex-direction:column;gap:9px}
.qv-bub{align-self:flex-start;max-width:86%;padding:10px 14px;border-radius:16px 16px 16px 5px;
  background:color-mix(in srgb,var(--n3) 22%,transparent);color:var(--n1);font-size:15.5px;
  opacity:0;transform:translateY(10px) scale(.96);transform-origin:0 100%;
  transition:opacity .4s ease,transform .5s cubic-bezier(.22,.8,.24,1)}
.qv-bub.is-r{align-self:flex-end;border-radius:16px 16px 5px 16px;transform-origin:100% 100%;
  background:color-mix(in srgb,var(--n3) 34%,transparent)}
.qv-bub.is-on{opacity:1;transform:none}
.qv-bub span{filter:blur(5px);user-select:none}
.qv-typing{display:flex;gap:5px;padding:13px 15px}
.qv-typing i{width:6px;height:6px;border-radius:50%;background:var(--n2);animation:qvDot 1.2s ease-in-out infinite}
.qv-typing i:nth-child(2){animation-delay:.15s}
.qv-typing i:nth-child(3){animation-delay:.3s}
@keyframes qvDot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}

.qv-names{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--n3) 30%,transparent)}
.qv-row{display:flex;align-items:center;gap:12px;padding:14px 17px;font-size:16px;color:var(--n2);
  border-bottom:1px solid color-mix(in srgb,var(--n3) 22%,transparent);
  transition:background .3s ease,color .3s ease}
.qv-row:last-child{border-bottom:0}
.qv-n{width:1.4em;font-size:11px;font-weight:700;color:var(--n3);font-variant-numeric:tabular-nums}
.qv-dash{margin-left:auto;width:34px;height:6px;border-radius:6px;background:color-mix(in srgb,var(--n3) 35%,transparent);transition:background .3s ease,width .4s ease}
.qv-row.is-at{background:color-mix(in srgb,var(--n3) 20%,transparent);color:var(--n1)}
.qv-row.is-you{background:var(--mint);color:var(--on-mint)}
.qv-row.is-you .qv-n{color:var(--on-mint)}
.qv-row.is-you .qv-dash{background:var(--on-mint);width:52px}

.qv-dots{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(7px,1vw,11px);padding:4px}
.qv-dots i{aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--n3) 30%,transparent);
  transition:background .5s ease,transform .5s cubic-bezier(.22,.8,.24,1),opacity .5s ease}
.qv-dots.is-all i{background:var(--n2)}
.qv-dots.is-few i{opacity:.45}
.qv-dots.is-few i.is-keep{opacity:1;background:var(--mint);transform:scale(1.35)}

.qv-list{display:flex;flex-direction:column;gap:10px}
.qv-item{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px;
  background:color-mix(in srgb,var(--on-mint) 9%,transparent);color:var(--on-mint);font-size:17px;font-weight:700}
.qv-item span{filter:blur(6px);transition:filter .7s ease}
.qv-item.is-clear span{filter:none}
.qv-tick{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--on-mint);
  display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;
  transition:background .3s ease}
.qv-item.is-done .qv-tick{background:var(--on-mint)}
.qv-item.is-done .qv-tick::after{content:"\2713";color:var(--mint);font-weight:800}

@media(min-width:641px) and (max-width:860px){
  .qviz{font-size:13px}
  .qv-bub,.qv-row{font-size:12.5px;padding:8px 10px}
  .qv-item{font-size:13px;padding:10px 12px}
}
@media(max-width:640px){
  .qmark.has-viz{align-items:stretch}
  .qmark.has-viz .lul{align-self:flex-end}
  .qviz{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .qv-bub,.qv-dots i,.qv-item span{transition:none}
  .qv-typing i{animation:none}
}

/* ---------- 21. HOME CARDS, TWO OTHER DIRECTIONS (?cards=art | type) ---------- */
/* both posters fully visible: side by side, a slight tilt, no overlap
   (Zach, 2026-09-19: "can they both be visible?") */
.qcard:has(.qv-art){grid-template-columns:minmax(0,1fr) minmax(220px,470px)}
.qv-art{display:flex;align-items:flex-start;gap:5%;max-width:470px;padding:10px 6px 0}
.qv-art img{display:block;width:47.5%;height:auto;border-radius:12px;
  box-shadow:0 10px 30px rgba(6,8,7,0.45);opacity:0;
  outline:1px solid color-mix(in srgb,var(--n3) 38%,transparent);outline-offset:-1px;
  transition:opacity .5s ease,transform .8s cubic-bezier(.22,.8,.24,1)}
.qv-art .is-front{transform:translateY(30px) rotate(-7deg)}
.qv-art .is-back{margin-top:7%;transform:translateY(30px) rotate(8deg)}
.qv-art .is-front.is-on{opacity:1;transform:rotate(-3deg)}
.qv-art .is-back.is-on{opacity:1;transform:rotate(3deg)}
@media(min-width:641px) and (max-width:860px){.qcard:has(.qv-art){grid-template-columns:minmax(0,1fr) minmax(170px,280px)}}
@media(max-width:640px){.qcard:has(.qv-art){grid-template-columns:1fr}}

.qv-glyph{display:flex;justify-content:flex-end;max-width:400px}
.qv-glyph svg{width:clamp(170px,20vw,270px);height:auto;overflow:visible;
  opacity:0;transform:scale(.86);transform-origin:70% 60%;
  transition:opacity .5s ease,transform .8s cubic-bezier(.2,1.2,.3,1)}
.qv-glyph.is-on svg{opacity:1;transform:none}
.g-txt{font-family:var(--font);font-weight:800;font-size:196px;fill:var(--n1)}
.g-bar{fill:var(--mint)}
.g-line{fill:none;stroke:var(--n1);stroke-width:30;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:320;stroke-dashoffset:320;transition:stroke-dashoffset .8s cubic-bezier(.45,.05,.3,1) .25s}
.qv-glyph.is-on .g-line{stroke-dashoffset:0}
.qv-glyph.is-on .g-line+.g-line{transition-delay:.5s}
.qv-g2.is-on .g-bar{animation:qvPause 2.4s ease-in-out 1s infinite}
@keyframes qvPause{0%,100%{opacity:1}50%{opacity:.55}}
.qv-g4 .g-line{stroke:var(--on-mint)}
@media(max-width:640px){.qv-art{max-width:none}.qv-glyph{max-width:none}}
@media(prefers-reduced-motion:reduce){.qv-art img,.qv-glyph svg,.g-line{transition:none}.qv-g2.is-on .g-bar{animation:none}}

/* ---------- 17. THE DEPARTMENT VIGNETTES, LIVE (js/role-vignettes.js) ----------
   Only the way in is styled; the finished frame is the static card, untouched.
   The verdict (pill, spike) waits in plain ink and lands after the numbers. */
.vg-live .vrow,.vg-live .bar,.vg-live .fbar,.vg-live .ask,.vg-live .metric,.vg-live .tabs{
  opacity:0;transform:translateY(7px);
  transition:opacity .38s ease,transform .38s cubic-bezier(.22,.8,.24,1),width .8s cubic-bezier(.22,.8,.24,1)}
.vg-live .is-in{opacity:1;transform:none}
.vg-live .fbar{white-space:nowrap;overflow:hidden}
.vg-live .bar i{transition:height .8s cubic-bezier(.22,.8,.24,1),background .45s ease}
.vg-live .mint,.vg-live .warn{transition:background .45s ease,color .45s ease}
.vg-live .vg-wait.mint,.vg-live .vg-wait.warn{background:transparent;color:inherit}
.vg-live .bar.vg-wait i{background:var(--g3)}
.vg-live .tab{transition:background .3s ease,color .3s ease}
.vg-live .bar.vg-wait .bv{color:inherit;transition:color .45s ease}

/* ---------- 18. THE NAW CLOSER ASKS (js/closer-sheets.js, the NAW set) ----------
   No formula bar: nothing is being keyed in. The questions stack under the
   sheet like messages; the one being asked is ink, the ones before it rest. */
.cl-read .hs-bar{display:none}
.cl-read .hs-c.hs-n{justify-content:flex-end}
/* the questions pop up ON the sheet: hung off the number they are about,
   overhanging the card's edge, alternating sides */
.cl-read{overflow:visible}
.hs-q{position:absolute;z-index:4;right:clamp(-26px,-2vw,-12px);max-width:min(78%,340px);
  padding:.6em 1em;border-radius:1.15em 1.15em .3em 1.15em;
  font-size:clamp(13px,1.15vw,16px);font-weight:600;line-height:1.25;
  background:var(--white);color:var(--g7);border:1px solid var(--g3);
  box-shadow:0 6px 18px rgba(6,8,7,0.10),0 18px 44px rgba(6,8,7,0.12);
  opacity:0;transform:translateY(8px) scale(.86);transform-origin:100% 100%;
  transition:opacity .22s ease,transform .34s cubic-bezier(.2,1.3,.4,1),background .4s ease,color .4s ease,border-color .4s ease}
.hs-q.is-left{right:auto;left:clamp(-26px,-2vw,-12px);border-radius:1.15em 1.15em 1.15em .3em;transform-origin:0 100%}
.hs-q.is-in{opacity:1;transform:none}
.hs-q.is-now{background:var(--ink);color:var(--white);border-color:var(--ink)}
@media(prefers-reduced-motion:reduce){.hs-q{transition:none}}
/* on a phone the asking card is taller than the closer's image slot: give the
   stage one fixed height for all six, so tapping a session never moves the page */
@media(max-width:760px){
  .cl-stage:has(.cl-read){height:clamp(300px,44vh,380px)}
  .hs-q{font-size:13px;right:-6px;max-width:82%}
  .hs-q.is-left{left:-6px}
}

/* ---------- 19. NAW: THE SESSIONS LIST, EACH VISUAL INSIDE ITS SESSION ----------
   The curriculum's own accordion, wider and centered. An open session is two
   columns: its chapters, and its visual. The slot's padding is wider than the
   question bubbles' overhang, because the box clips at its rounded corners. */
.closer.curric{padding-top:clamp(64px,9vh,110px)}
/* narrowed 1080 -> 860 (Zach, 2026-10-23: "i don't want the accordions nearly full width") */
.cur-list.cur-wide{max-width:860px}
/* the list's own small header — the section headline is off screen by the
   time you reach it. Same width as the list so the two read as one block. */
.cur-head{max-width:860px;margin:clamp(28px,4vh,44px) auto -14px;display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;padding:0 4px}
.cur-head b{font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--green)}
.cur-head span{font-size:14px;color:var(--g6)}
.cur-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(8px,2vw,28px);align-items:stretch}
.cur-vis{display:flex;align-items:stretch;justify-content:center;min-height:0;
  padding:clamp(18px,2.4vw,30px) clamp(18px,2.4vw,30px) clamp(24px,3vw,36px)}
.cur-vis .cl-obj{max-height:clamp(260px,30vw,380px)}
.cur-vis .cl-sheet{max-height:none}
@media(max-width:820px){
  .cur-body{grid-template-columns:1fr}
  .cur-vis{order:-1;min-height:0;padding:6px 20px 26px}
  .cur-vis .cl-obj{max-height:260px}
}
.cur-vis img.cl-obj{align-self:center}

/* TEST (?cur=stack): the same session box, all vertical — the report under the
   description, the chapters under the report — to compare with the side-by-side. */
body.cur-stack .cur-list.cur-wide{max-width:860px}
body.cur-stack .cur-body{grid-template-columns:1fr;gap:0}
body.cur-stack .cur-vis{order:-1;padding:6px clamp(20px,3vw,58px) clamp(22px,2.6vw,32px)}
body.cur-stack .cl-sheet.cl-report{height:auto}
body.cur-stack .rp-wrap{height:auto}
body.cur-stack .rp .rp-row{flex:0 0 auto}

/* scaled down (Zach, 2026-09-19: "they seem too big"): a smaller card, smaller
   type, a quieter pen; the chapters get the wider column */
.cur-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rp-wrap{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(12px,1.6vw,20px)}
.cur-vis{padding:clamp(22px,2.6vw,36px) clamp(18px,2.2vw,28px) clamp(28px,3.2vw,44px) clamp(8px,1vw,14px)}
.rp{padding:clamp(13px,1.4vw,18px);border-radius:15px}
.rp-head{padding-bottom:9px}
.rp-head b{font-size:clamp(12.5px,1.05vw,14.5px)}
.rp-head span{font-size:10px}
.rp-row{font-size:clamp(12px,1vw,13.5px);padding:clamp(6px,.7vw,9px) 0}
.rp-cols{font-size:9.5px}
.rp-note{font-size:clamp(17px,1.45vw,20px)}
.rp-mark path{stroke-width:2}
body.cur-stack .rp-wrap{max-width:520px;margin-inline:auto}
@media(max-width:820px){
  .cur-body{grid-template-columns:1fr}
  .cur-vis{padding:6px 18px 24px}
  .rp-note{font-size:16px}
}

/* the Excel Lab's live sheets inside a session box: their own height, centered */
.cur-vis .cl-sheet:not(.cl-report){align-self:center}

/* the word over the numbered list: a session is CHAPTERS, then the Boss */
.cur-text{min-width:0}
.cur-label{padding:4px 24px 10px 58px;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--g6)}
@media(max-width:640px){.cur-label{padding-left:18px}}

/* ---------- NAW LIVE REPORTS (2026-09-29) ----------
   The report performs: a highlight walks the lines, a number gets circled,
   a symbol lands beside its line. The margin is only wide enough for that
   symbol, and every row exists from the first frame so nothing resizes. */
.rp-wrap.rp-live{grid-template-columns:minmax(0,1fr) clamp(34px,3.4vw,46px);gap:clamp(8px,1vw,14px)}
.rp-live .rp-row{transition:background .25s ease,box-shadow .25s ease;border-radius:6px}
.rp-live .rp-row.is-on{background:var(--green-08);box-shadow:-8px 0 0 var(--green-08),8px 0 0 var(--green-08)}
.rp-live .rp-v{transition:color .25s ease}
.rp-live .rp-v.is-go{color:var(--green);font-weight:700}
.rp-live .rp-v.is-hot{color:var(--orange-ink);font-weight:700}
.rp-sym{position:absolute;left:0;width:clamp(26px,2.4vw,32px);height:clamp(26px,2.4vw,32px);margin-top:calc(clamp(26px,2.4vw,32px) / -2);
  display:grid;place-items:center;border-radius:50%;font-size:clamp(14px,1.3vw,17px);font-weight:800;line-height:1;
  opacity:0;transform:scale(0.4);transition:opacity .2s ease,transform .32s cubic-bezier(0.34,1.56,0.64,1)}
.rp-sym.is-open{opacity:1;transform:none}
.rp-sym.is-ink{background:var(--g2);color:var(--g8)}
.rp-sym.is-go{background:var(--mint);color:var(--on-mint)}
.rp-sym.is-hot{background:var(--orange);color:var(--white)}
@media(prefers-reduced-motion:reduce){.rp-sym{opacity:1;transform:none}}