/* ============================================================
   Page-specific styles — the general deck (10 slides).
   Shared foundation lives in /assets/css/deck.css.

   Section IDs match rendered slide numbers: #s1-#s6 are slides
   1-6, #s10 is slide 10 (the five-application selector, which is
   why every path page's back-link is /?s=10).

   Slides 7-9 are the shared demo (prompt / response 1 / response 2)
   injected from partials/shared-demo.html. They carry NO IDs on
   purpose: the same partial is meant to run on the path pages too,
   where it sits at slides 2-4, so any positional ID would be wrong
   in one place or the other. Style them by class.

   ⚠ If the shared demo ever changes length, the selector's slide
   number moves and #s10 must be renumbered with it — along with
   the /?s=10 back-links in every path page and _template.html.
   ============================================================ */

/* ================= #s1 · TITLE ================= */
#s1 video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.34;
}
#s1::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(5,14,30,.94) 30%,rgba(5,14,30,.55) 75%,rgba(5,14,30,.7))}
#s1 .slide-inner{position:relative;z-index:2}
#s1 .titlebar{display:flex;align-items:center;gap:14px;margin-bottom:34px}
#s1 .wordmark{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.28em;color:var(--d2)}
#s1 h1{font-size:clamp(52px,7.6vw,108px);font-weight:800;letter-spacing:-.035em;line-height:.98;color:#fff}
#s1 h1 .acc{background:linear-gradient(100deg,var(--coral) 5%,#c98db8 55%,var(--blue-lt) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
#s1 .sub{margin-top:28px;font-size:clamp(16px,1.6vw,21px);color:var(--d2);font-weight:500}

/* ================= #s2 · CREDIBILITY ================= */
/* Logo-wall treatment: the proof is the mark, not the paragraph.
   All three partner logos are dark artwork, so each sits on a white
   tile — on the navy slide they would otherwise vanish. Each tile is
   a link out to the real source document. */
/* the title carries this slide, so it runs bigger than the shared .hd-sm
   and drops that class's 26ch cap — otherwise it wraps early and sits
   stranded in the left third of the slide */
#s2 .hd{font-size:clamp(34px,4.6vw,60px);max-width:none;text-wrap:balance}
#s2 .proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.proof{display:flex;flex-direction:column;text-decoration:none}
/* Text centered under the logo tile (Danny, Sep 3). The mobile row layout
   below flips this back to left so the copy sits flush against the tile. */
.proof .txt{display:flex;flex-direction:column;flex:1;text-align:center;align-items:center}
.proof .tile{
  background:#fff;border-radius:16px;height:126px;
  display:flex;align-items:center;justify-content:center;padding:22px 26px;
  box-shadow:0 10px 34px rgba(0,0,0,.34);transition:transform .35s var(--ease);
}
.proof:hover .tile,.proof:focus-visible .tile{transform:translateY(-4px)}
.proof .tile img{max-height:100%;width:auto;object-fit:contain}
.proof h3{
  margin-top:19px;font-size:17px;font-weight:700;color:#fff;line-height:1.3;
  /* balance stops a lone word dangling on line 2; the 2-line floor keeps
     every card's paragraph starting on the same baseline even when a
     headline only runs to one line */
  text-wrap:balance;min-height:2.6em;
}
.proof p{margin-top:8px;font-size:14px;color:var(--d2);line-height:1.52}
.proof .src{
  margin-top:auto;padding-top:12px;font-family:var(--font-mono);font-size:9.5px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);
}
.proof .src::after{content:" ↗"}

/* #s2 on short viewports — Danny presents on 768p projectors. With the
   partner strip gone the slide has room, so these tiers only step the
   tile height down enough to keep the slide-inner off both edges.
   Verified 1440x900, 1366x768, 1024x700, 900x800, 430x860. */
@media (max-height:880px) and (min-width:981px){
  #s2 .proof-grid{margin-top:34px}
  .proof .tile{height:120px}
  .proof h3{margin-top:17px}
}
@media (max-height:820px) and (min-width:981px){
  #s2 .proof-grid{margin-top:30px;gap:20px}
  .proof .tile{height:110px;padding:18px 24px}
  .proof h3{margin-top:16px}
}
@media (max-height:730px) and (min-width:981px){
  #s2 .slide-inner{padding:96px 72px 104px}
  #s2 .proof-grid{margin-top:24px;gap:18px}
  .proof .tile{height:94px;padding:15px 20px}
  .proof h3{margin-top:14px;font-size:16.5px}
  .proof p{font-size:13px;margin-top:6px;line-height:1.5}
  .proof .src{padding-top:10px}
}

/* ================= #s3 · WHAT WE DO ================= */
/* Background is the rising-data graph from impacterpathway.com/wwm-research,
   ported in (never hotlinked). Faint grid + scatter cloud + a flat dashed
   "cognitive" line and a rising coral "durable" line, under a scrim that
   keeps a readable gutter. Animations are gated on .active so they play
   when the slide arrives rather than on page load.
   The chart itself is two bars: Duckworth & Seligman (2005) is the one study
   that puts a cognitive and a durable measure on a shared scale, so each bar
   names the construct actually measured. */
#s3{background:var(--cream)}
#s3 .s3bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 50%,#000 55%,rgba(0,0,0,.35) 100%);
          mask-image:radial-gradient(120% 100% at 50% 50%,#000 55%,rgba(0,0,0,.35) 100%);
}
#s3 .s3bg svg{width:100%;height:100%;display:block}
#s3::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,var(--cream) 0%,var(--cream) 20%,rgba(240,235,227,.86) 38%,rgba(240,235,227,.52) 55%,rgba(240,235,227,.18) 72%,transparent 84%),
    linear-gradient(180deg,rgba(240,235,227,.55) 0%,rgba(240,235,227,.72) 34%,rgba(240,235,227,.72) 74%,rgba(240,235,227,.35) 100%);
}
#s3 .slide-inner{position:relative;z-index:2}

#s3 .g-grid{stroke:var(--ink);stroke-width:1;opacity:.055}
#s3 .g-axis{stroke:var(--ink);stroke-width:1.25;opacity:.10}
#s3 .g-cloud{fill:var(--blue);opacity:.10}
#s3 .g-flat{fill:none;stroke:var(--blue);stroke-width:2;opacity:0;stroke-dasharray:7 9;stroke-linecap:round;stroke-linejoin:round}
#s3.active .g-flat{animation:s3flat 1.4s ease .9s both}
@keyframes s3flat{to{opacity:.30}}
#s3 .g-rise{fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
#s3.active .g-rise{animation:s3draw 2.1s cubic-bezier(.3,.8,.35,1) .35s both}
@keyframes s3draw{from{stroke-dashoffset:1;opacity:.55}to{stroke-dashoffset:0;opacity:.55}}
#s3 .g-area{fill:url(#s3RiseFill);opacity:0}
#s3.active .g-area{animation:s3fade 1.3s ease 1.5s both}
@keyframes s3fade{to{opacity:1}}
@keyframes s3pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
#s3 .g-dot{fill:var(--coral);transform-box:fill-box;transform-origin:center;opacity:0}
#s3.active .g-dot{animation:s3pop .5s cubic-bezier(.3,1.4,.5,1) both}
#s3.active .g-dot:nth-of-type(1){animation-delay:.75s}
#s3.active .g-dot:nth-of-type(2){animation-delay:.95s}
#s3.active .g-dot:nth-of-type(3){animation-delay:1.15s}
#s3.active .g-dot:nth-of-type(4){animation-delay:1.35s}
#s3.active .g-dot:nth-of-type(5){animation-delay:1.55s}
#s3.active .g-dot:nth-of-type(6){animation-delay:1.75s}
#s3.active .g-dot:nth-of-type(7){animation-delay:1.95s}
#s3 .g-dot-last{r:8;filter:drop-shadow(0 6px 18px rgba(243,113,99,.45))}
#s3 .g-label{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:0}
#s3.active .g-label{animation:s3fade .8s ease 2.1s both}
#s3 .g-label.rise{fill:var(--coral)}
#s3 .g-label.flat{fill:var(--blue)}

#s3 .claim{margin-top:11px;font-size:clamp(15px,1.5vw,19px);color:var(--t2);font-weight:500;line-height:1.5;max-width:62ch}
#s3 .claim .lb{display:inline}
#s3 .fig{margin-top:58px}

#s3 .bars{margin-top:0;display:flex;flex-direction:column;gap:24px}
#s3 .br{display:flex;align-items:center;gap:22px}
#s3 .br .nm{width:216px;flex:none;text-align:left}
#s3 .br .nm b{display:block;font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.18}
#s3 .br .tr{flex:1;height:70px;display:block;position:relative}
#s3 .br .fl{display:block;height:100%;width:0;border-radius:0 10px 10px 0;transition:width 1.15s var(--ease) .45s}
#s3 .br.cog .fl{background:linear-gradient(90deg,#4C7CB8 0%,#7BA9E3 100%)}
#s3 .br.dur .fl{background:linear-gradient(90deg,#D24A3C 0%,#F38975 100%);box-shadow:0 8px 30px rgba(217,64,64,.28);transition-delay:.72s}
#s3.active .br.cog .fl{width:40%}
#s3.active .br.dur .fl{width:88%}
#s3 .br .vv{
  position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-size:34px;font-weight:800;letter-spacing:-.032em;
  opacity:0;transition:opacity .55s var(--ease) 1.25s;
}
#s3.active .br .vv{opacity:1}
#s3 .br.cog .vv{left:calc(40% + 20px);color:var(--blue-deep)}
#s3 .br.dur .vv{left:calc(88% + 20px);color:var(--coral-deep)}

#s3 .strip{margin-top:80px;text-align:center}
#s3 .strip .m1{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}
#s3 .strip .m2{margin-top:7px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--t2);line-height:1.7}
@media (prefers-reduced-motion:reduce){
  #s3 .br .fl,#s3 .br .vv{transition:none!important}
  #s3.active .g-rise,#s3.active .g-flat,#s3.active .g-area,#s3.active .g-dot,#s3.active .g-label{animation:none!important;opacity:1}
}

/* #s3 on short viewports — same tier convention as #s2 and deck.css.
   Verified 1440x900, 1366x768, 1024x700, 900x800, 430x860. */
@media (max-height:860px) and (min-width:981px){
  #s3 .claim{margin-top:9px}
  #s3 .fig{margin-top:44px}
  #s3 .bars{gap:19px}
  #s3 .br .tr{height:60px}
  #s3 .br .vv{font-size:30px}
  #s3 .strip{margin-top:62px}
}
@media (max-height:740px) and (min-width:981px){
  #s3 .fig{margin-top:34px}
  #s3 .bars{gap:14px}
  #s3 .br .tr{height:50px}
  #s3 .br .nm{width:196px}
  #s3 .br .nm b{font-size:17px}
  #s3 .br .vv{font-size:25px}
  #s3 .strip{margin-top:48px}
}
@media (max-width:1100px){#s3 .s3bg{opacity:.5}}
@media (max-width:640px){#s3 .s3bg{display:none}}
@media (max-width:620px){
  #s3 .claim .lb{display:none}
  #s3 .fig{margin-top:34px}
  #s3 .bars{gap:16px}
  #s3 .br .tr{height:46px}
  #s3 .br .nm b{font-size:17px}
  #s3 .br .vv{font-size:22px}
  #s3 .strip .m2{line-height:1.9}
}

/* ================= #s4 · HARVARD 8 ================= */
/* Equal columns: the wheel is the thing Danny points at, so it gets half the
   stage instead of the 46% it had. Its size is capped by viewport HEIGHT as
   well as width (the site does the same with .aw-wrap) — so it grows on a big
   monitor and shrinks itself on a 720p projector without a tier per size. */
#s4 .cols{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
/* the deck's lead size (up to 19px) shouts next to the card copy — this one is
   supporting detail under the headline, so it sits between the two */
#s4 .lead{font-size:clamp(13.5px,1.05vw,15.5px)}
#s4 .wheel{max-width:min(600px,62vh);margin:0 auto;filter:drop-shadow(0 18px 44px rgba(10,26,50,.14))}
#s4 .wheel-svg{width:100%;display:block;overflow:visible}
#s4 .wh-mask{fill:var(--paper);opacity:0;transition:opacity .2s;pointer-events:none}
/* CASEL ring quads reuse the inner slices' push animation — no colour change,
   the segment just lifts out of the ring and breathes */
#s4 .ca-mask{fill:var(--paper);opacity:0;transition:opacity .2s;pointer-events:none}
#s4 .ca-mask.on,#s4 .ca-mask.hov{opacity:1}
#s4 .ca-slice{opacity:0;pointer-events:none}
#s4 .ca-slice.on{opacity:1;animation:wheel-push 1.9s ease-in-out infinite;
  filter:drop-shadow(0 5px 14px rgba(10,26,50,.22))}
/* hover/focus preview: the quad lifts once and holds, the same 6px nudge the
   inner slices use — the 1.9s breathing is reserved for the selected quad */
#s4 .ca-slice.hov{opacity:1;transition:transform .28s var(--ease);
  transform:translate(calc(var(--tx) * 6px),calc(var(--ty) * 6px))}
/* transparent hit targets over the coral ring — same geometry as the masks, so
   a click anywhere on a quadrant selects it, exactly like the blue slices */
#s4 .ca-hit{fill:transparent;cursor:pointer;outline:none}
@media (prefers-reduced-motion:reduce){
  #s4 .ca-slice.on{animation:none;transform:translate(calc(var(--tx) * 12px),calc(var(--ty) * 12px))}
  #s4 .ca-slice.hov{transition:none}
}
#s4 .wh-mask.on,#s4 .wh-mask.hov{opacity:1}
#s4 .wh-slice{cursor:pointer;transition:transform .28s var(--ease)}
#s4 .wh-slice:focus{outline:none}
#s4 .wh-slice:hover,#s4 .wh-slice:focus-visible{transform:translate(calc(var(--tx) * 6px),calc(var(--ty) * 6px))}
#s4 .wh-slice.on{animation:wheel-push 1.9s ease-in-out infinite;filter:brightness(1.18) drop-shadow(0 4px 12px rgba(10,26,50,.18))}
@keyframes wheel-push{
  0%,100%{transform:translate(calc(var(--tx) * 10px),calc(var(--ty) * 10px))}
  50%{transform:translate(calc(var(--tx) * 20px),calc(var(--ty) * 20px))}
}
@media (prefers-reduced-motion:reduce){
  #s4 .wh-slice{transition:none}
  #s4 .wh-slice.on{animation:none;transform:translate(calc(var(--tx) * 12px),calc(var(--ty) * 12px))}
}
#skilldef{margin-top:16px;border-radius:14px;padding:16px 20px;min-height:96px;position:relative}
/* absolutely placed: the card's height is measured and locked in JS, so the
   button must not be able to change it */
#skilldef .def-src{
  position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--border-strong);background:#fff;color:var(--t3);
  transition:color .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease);
}
#skilldef .def-src svg{width:13px;height:13px}
#skilldef .def-src:hover,#skilldef .def-src:focus-visible{
  color:var(--coral-deep);border-color:var(--coral);transform:translateY(-1px)}
/* the paper defines the eight skills, not the CASEL quads */
#skilldef.mode-casel .def-src{display:none}
#skilldef .nm{font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
#skilldef .df{font-size:13.5px;line-height:1.65;color:var(--t2)}
/* a line budget for the body, so the card is the same height whichever
   skill is open (the research definitions run different lengths) */
#skilldef .df .bd{display:block;min-height:calc(3 * 1.65em)}
/* CASEL bodies run two lines instead of three, so they get their own line
   budget — that keeps the four CASEL panels the same height as each other.
   Matching the SKILLS card height is done in JS (lockedDefH), because the
   real gap between the two modes changes with viewport width: a fixed
   padding value is right at one width and wrong at every other. The slide
   is vertically centred, so any height difference moves the whole right
   column and the title visibly jumps on toggle. */
#skilldef.mode-casel .df .bd{min-height:calc(2 * 1.65em)}
#skilldef .df .tr{display:block;font-style:italic;color:var(--t3)}
/* the framework strip's CASEL half is now a control */
/* Both halves are controls, and neither may read as a button — flat text,
   left-aligned, sharing the row 50/50. The active one is marked with an
   underline rather than a box. */
#s4 .fw button{
  cursor:pointer;background:none;border:0;padding:0;margin:0;
  text-align:left;font:inherit;color:inherit;justify-self:start;
}
/* no rules under either half — the inactive framework simply recedes */
#s4 .fw button .v{display:inline-block;opacity:.42;transition:opacity .2s}
#s4 .fw button:hover .v{opacity:.72}
#s4 .fw button.on .v{opacity:1}

/* Framework attribution — Danny names both: the research the measurement is
   validated on (Harvard MCC, the inner ring) and the framework it aligns to
   (CASEL, the coral outer ring). The wheel graphic already carries the CASEL
   connections but only in rotated micro-type, so the copy has to say it. */
#s4 .fw{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:26px}
#s4 .fw .k{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}
#s4 .fw .v{margin-top:6px;font-size:15.5px;font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.3}
#s4 .fw .casel .v{color:var(--coral-deep)}
#s4 .wheel-cap{
  margin-top:18px;text-align:center;font-family:var(--font-mono);font-size:9.5px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);line-height:1.8;
}
#s4 .wheel-cap b{color:var(--coral-deep);font-weight:700}
/* #s4 short-viewport tiers — this slide never had any, so it was already
   clipping at 1024x700 before the framework strip went in. */
@media (max-height:860px) and (min-width:981px){
  /* the deck's 110/120 frame is generous on a 1080p monitor and too generous on
     a projector — this is the tallest slide, so it buys a little room back */
  #s4 .slide-inner{padding-top:92px;padding-bottom:98px}
  #s4 .cols{gap:42px}
  #s4 .eyebrow{margin-bottom:12px}
  #s4 .hd.hd-sm{font-size:clamp(26px,3.05vw,40px)}
  #s4 .fw{margin-top:20px;padding-top:16px;gap:28px}
  #s4 .wheel-cap{margin-top:13px}
  #skilldef{margin-top:16px;padding:15px 19px;min-height:74px}
}
@media (max-height:750px) and (min-width:981px){
  /* the 24px-top / 26px-tall brand and the 24px bottom chrome are the floor */
  #s4 .slide-inner{padding-top:76px;padding-bottom:84px}
  #s4 .cols{gap:38px}
  #s4 .eyebrow{margin-bottom:11px}
  #s4 .hd.hd-sm{font-size:clamp(24px,3.0vw,37px)}
  #s4 .lead{font-size:13.5px}
  #s4 .fw{margin-top:15px;padding-top:12px;gap:22px}
  #s4 .fw .v{font-size:14px}
  #s4 .wheel-cap{margin-top:10px;font-size:9px}
  #skilldef{margin-top:13px;padding:13px 17px;min-height:64px}
  #skilldef .df{font-size:13px}
}
@media (max-width:980px){
  /* stacked: the wheel's inner labels are unreadable at this size anyway, so it
     shrinks to a glyph and the interactive chips/definition carry the content */
  #s4 .wheel-cap{display:none}
  #s4 .eyebrow{margin-bottom:12px}
  #s4 .hd.hd-sm{font-size:clamp(22px,3.8vw,27px)}
  #s4 .lead{font-size:13px}
  #s4 .fw{margin-top:15px;padding-top:12px;gap:20px}
  #s4 .fw .v{font-size:14px}
  /* stacked: the wheel already names all eight skills, so the definition
     panel steps aside rather than overflow the slide */
  #s4 #skilldef{display:none}
}
@media (max-width:620px){
  #s4 .cols{gap:16px}
  #s4 .wheel{max-width:186px}
  #s4 .wheel-cap{display:none}
  #s4 .fw{gap:18px;margin-top:16px;padding-top:13px}
  #s4 .fw .v{font-size:13.5px}
  #s4 .fw .k{font-size:9px}
  #skilldef{margin-top:12px;padding:12px 15px;min-height:0}
  #skilldef .df{font-size:13.5px}
}

/* ================= #s5 · ELEVATE STUDENT VOICE ================= */
/* The hero measurement card, ported from impacterpathway.com's homepage
   (impacter-home public/index.html + assets/js/pages/index.js). Two
   deliberate changes for the deck:
     · arrow-driven, not on a 9s autoplay timer — Danny advances it himself
     · the site paints the clip onto a <canvas> to fake a blurred bleed; the
       hero clips are already reframed 16:9 with the student left of the HUD
       ("bleed:true"), so a plain <video object-fit:cover> is identical here
       and drops the whole rAF paint loop.
   Audio tracks are stripped from the files, not just muted. */
/* The video column is 2fr and the survey 1fr, and the card now fills its whole
   track — its HEIGHT follows from the track width and the ratio. That's the
   opposite of before, when the card was height-capped and therefore usually
   narrower than its track, leaving a band of dead space on the right. Short
   viewports are handled by flattening the RATIO per tier, not by shrinking the
   card, so the block always reaches both edges. */
#s5 .cols{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;margin-top:48px;
  --st-ratio:1.7021;                 /* 16 / 9.4 — flatter than this and the HUD's
                                        fixed rows outgrow the card and clip */
  --st-cap:min(50vh,452px);
  --surv-share:.62}   /* survey width as a fraction of the card's */
/* Each column asks for its natural width — the card at its ratio, the survey at
   exactly half that. If they don't fit, flex shrinks BOTH in proportion, so the
   2:1 relationship (and therefore the matched heights) survives. If they do fit,
   space-between puts the leftover in the middle rather than off the right edge. */
#s5 .vcol{flex:0 1 calc(var(--st-cap) * var(--st-ratio));min-width:0}
#s5 .surv{flex:0 1 calc(var(--st-cap) * var(--st-ratio) * var(--surv-share));min-width:0}

/* --- the survey everybody uses --- */
/* Same height as the card, derived rather than guessed: the video track is
   exactly twice this column, so cardH = 2*thisWidth/ratio, which makes this
   box's own ratio ratio/2. Holds at every width, whatever the gap. */
#s5 .surv .shot{
  position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border-strong);
  background:#fff;box-shadow:0 14px 34px rgba(10,26,50,.12);
  aspect-ratio:calc(var(--st-ratio) * var(--surv-share));
  container-type:inline-size;
}
/* The likert form, drawn rather than screenshotted. Everything sizes in cqw
   against .shot above, so one ratio change moves the whole form with the box
   and nothing needs a per-breakpoint font size. */
#s5 .lk{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  padding:5cqw 5cqw 0;background:#fff;color:#39414f}
#s5 .lk-hd{display:flex;align-items:baseline;justify-content:space-between;gap:2cqw;
  padding-bottom:2.4cqw;border-bottom:1.5px solid #aab1bc}
#s5 .lk-hd .f{font-family:var(--font-mono);font-size:2.3cqw;letter-spacing:.13em;
  text-transform:uppercase;color:#79818e;white-space:nowrap}
#s5 .lk-hd .i{font-size:2.5cqw;color:#79818e;white-space:nowrap}
#s5 .lk-body{flex:1;display:flex;flex-direction:column;min-height:0}
#s5 .lk-leg,#s5 .lk-r{display:grid;grid-template-columns:minmax(0,1fr) repeat(5,9.6cqw);
  align-items:center}
#s5 .lk-leg{padding:2.3cqw 0 1.7cqw}
#s5 .lk-leg span{font-size:1.95cqw;line-height:1.18;text-align:center;color:#79818e}
#s5 .lk-r{flex:1;border-top:1px solid #e4e7ec}
#s5 .lk-r .q{font-size:2.85cqw;line-height:1.3;padding-right:2cqw}
#s5 .lk-r i{position:relative;justify-self:center;width:3.4cqw;height:3.4cqw;
  border:1.4px solid #98a0ac;border-radius:2px;background:#fff}
#s5 .lk-r i.on{background:#4b5462;border-color:#4b5462}
#s5 .lk-r i.on::after{content:"";position:absolute;left:50%;top:46%;
  width:1.5cqw;height:.78cqw;border-left:.32cqw solid #fff;border-bottom:.32cqw solid #fff;
  transform:translate(-50%,-50%) rotate(-45deg)}
/* fades the last row into the paper, so the form reads as longer than the box */
#s5 .surv .shot::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(241,240,238,0) 66%,rgba(241,240,238,.94) 100%)}
#s5 .surv .cap,#s5 .vcol .cap{margin-top:9px;font-size:12.5px;line-height:1.5;color:var(--t2)}
#s5 .surv .cap b,#s5 .vcol .cap b{color:var(--ink);font-weight:700}

/* --- the stage --- */
#s5 .stage{
  container-type:inline-size;
  --panel-2:#131E31;
  --line:rgba(230,236,248,.08); --line-strong:rgba(230,236,248,.14);
  --h2:rgba(230,236,248,.62);  --h3:rgba(230,236,248,.36);
  /* The card is ratio-driven and height-capped, so it is usually NARROWER than
     the flex track it sits in. The stack behind it is positioned inset:0 on
     this box — so the box has to be the card's box, or the back cards hang off
     to the right and the whole stack reads as shoved left. Ratio and cap live
     here as variables and the card inherits them, so the two can't drift. */

  position:relative;flex:0 1 auto;min-width:0;
  width:100%;
}
#s5 .st-deck{position:absolute;inset:0;z-index:1;pointer-events:none}
#s5 .st-deck .dc{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:var(--panel-2)}
#s5 .st-deck .dc img{width:100%;height:100%;object-fit:cover;opacity:.3;filter:saturate(.6) blur(3px)}
#s5 .st-deck .dc .dc-sh{position:absolute;inset:0;background:rgba(7,13,24,.62)}
#s5 .st-deck .dc .dc-nm{position:absolute;left:18px;top:14px;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;color:var(--h3);text-transform:uppercase}
#s5 .st-deck .d1{transform:translateY(-12px) scale(.965)}
#s5 .st-deck .d2{transform:translateY(-23px) scale(.93);opacity:.62}

#s5 .st-card{
  position:relative;z-index:3;border-radius:18px;overflow:hidden;background:#05090f;
  aspect-ratio:var(--st-ratio);width:100%;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);border:1px solid var(--line);
}
/* Cross-fade the card's CONTENTS, never the card itself. Fading the card
   dropped it to 25% and let the two stacked cards behind it show through —
   that grey ghost was the "weird overlay" between students. The card keeps its
   own opaque background, so only the clip and the HUD change. */
#s5 .st-card > *{transition:opacity .24s var(--ease)}
#s5 .st-card.sw > *{opacity:0}
/* the scan line's own keyframes set opacity, and an animation beats a
   transition — so it alone stayed lit through the fade. Dropping the
   animation during the swap also restarts the sweep for the new student. */
#s5 .st-card.sw .st-scan{animation:none;opacity:0}
/* the quote is the point of the card; the sparkline yields to it */
#s5 .hud .hud-growth{display:none}
@container (min-width:820px){ #s5 .hud .hud-growth{display:block} }
#s5 .st-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#s5 .st-vig{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(0,0,0,0) 46%,rgba(7,13,24,.6) 88%),
             /* the header sits over whatever the student's room looks like — often
                a bright wall — so this scrim has to carry the white type on its own */
             linear-gradient(180deg,rgba(7,13,24,.86) 0%,rgba(7,13,24,.72) 12%,rgba(7,13,24,.42) 24%,rgba(7,13,24,0) 40%),
             linear-gradient(0deg,rgba(7,13,24,.55) 0%,rgba(7,13,24,0) 18%)}
/* paused unless the slide is showing — an infinite compositor animation on a
   hidden slide is pure overhead during someone else's video */
#s5:not(.active) .st-scan{animation-play-state:paused}
#s5 .st-scan{position:absolute;left:0;right:0;height:1px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,rgba(243,113,99,0),rgba(243,113,99,.6) 22%,rgba(243,113,99,.6) 60%,rgba(243,113,99,0));
  box-shadow:0 0 14px rgba(243,113,99,.5);animation:st-scan 6.5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes st-scan{0%{top:4%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:96%;opacity:0}}
@keyframes dk-pulse{0%,100%{opacity:1}50%{opacity:.25}}

#s5 .st-who{position:absolute;left:22px;top:18px;z-index:4}
#s5 .st-who b{display:block;font-size:20px;font-weight:800;color:#fff;letter-spacing:-.01em}
#s5 .st-who span{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;color:rgba(230,236,248,.8);text-transform:uppercase}
#s5 .st-ers{position:absolute;top:18px;right:calc(min(380px,44%) + 34px);z-index:4;text-align:right}
#s5 .st-ers .r{display:flex;align-items:baseline;gap:6px;justify-content:flex-end}
#s5 .st-ers .l{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;color:var(--h2);text-transform:uppercase}
#s5 .st-ers .n{font-size:36px;font-weight:900;color:var(--coral);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#s5 .st-ers .d{font-family:var(--font-mono);font-size:13px;color:var(--h2)}
#s5 .st-ers .c{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.18em;color:rgba(230,236,248,.6);text-transform:uppercase;margin-top:4px}
#s5 .st-live{position:absolute;bottom:18px;left:22px;z-index:4;display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--h2);text-transform:uppercase}
#s5 .st-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--coral);animation:dk-pulse 1.5s infinite}

/* --- HUD --- */
#s5 .hud{position:absolute;z-index:5;top:18px;right:18px;bottom:18px;width:min(380px,44%);
  background:rgba(19,30,49,.62);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid var(--line-strong);border-radius:14px;padding:12px 15px;display:flex;flex-direction:column;overflow:hidden;text-align:left}
#s5 .hud-top{display:flex;justify-content:space-between;align-items:center}
#s5 .hud-top .meas{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;color:var(--h2);text-transform:uppercase;display:flex;align-items:center;gap:7px}
#s5 .hud-top .meas::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--coral);animation:dk-pulse 1.6s infinite}
#s5 .hud-top .mdl{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.12em;color:var(--h3)}
#s5 .hwave{display:flex;align-items:center;gap:2.5px;height:18px;margin:6px 0 7px}
#s5 .hwave i{flex:1;border-radius:1px;background:rgba(230,236,248,.42);height:3px;transition:height .13s,background .13s}
#s5 .hwave i.hot{background:var(--coral)}
#s5 .hud-sect{border-top:1px solid var(--line);padding-top:7px}
#s5 .hud-sect-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
#s5 .hud-lbl{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.18em;color:var(--h3);text-transform:uppercase}
#s5 .hud-meta{font-family:var(--font-mono);font-size:8.5px;color:var(--h2)}
#s5 .sg{padding:4px 0 5px;border-bottom:1px solid rgba(230,236,248,.05);opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s}
#s5 .sg:last-child{border-bottom:none}
#s5 .sg.on{opacity:1;transform:none}
#s5 .sg-t{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
#s5 .sg-n{font-size:12.5px;font-weight:600;color:#fff}
#s5 .sg-l{font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;color:var(--h2);border:1px solid var(--line-strong);border-radius:3px;padding:2px 5px;margin-left:8px}
#s5 .sg-s{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#s5 .sg.hi .sg-s{color:var(--coral)}
#s5 .sg-s small{font-family:var(--font-mono);font-size:9.5px;color:var(--h3);font-weight:400;letter-spacing:0}
#s5 .sg-b{display:flex;align-items:center;gap:10px;margin-top:5px}
#s5 .sg-tr{flex:1;height:3px;border-radius:2px;background:rgba(230,236,248,.1);overflow:hidden}
#s5 .sg-f{display:block;height:100%;border-radius:2px;background:var(--coral);width:0;transition:width .9s cubic-bezier(.16,1,.3,1)}
#s5 .sg-p{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;color:var(--coral);white-space:nowrap}
#s5 .gr-d{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;color:var(--coral);opacity:0;transition:opacity .5s}
#s5 .gr-d.on{opacity:1}
#s5 .gr-c{width:100%;height:52px;display:block}
#s5 .gr-c .ax{font-family:var(--font-mono);font-size:9px;fill:var(--h3);letter-spacing:.12em}
#s5 .gr-c .vl{font-family:var(--font-mono);font-size:10px;fill:#fff}
#s5 .gr-c circle{fill:var(--coral)}
#s5 .gr-c circle.ho{fill:var(--panel-2);stroke:var(--coral);stroke-width:1.6}
#s5 .ev{margin-top:auto;padding-top:6px;border-top:1px solid var(--line);opacity:0;transition:opacity .6s}
#s5 .ev.on{opacity:1}
#s5 .ev-l{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.18em;color:var(--h3);text-transform:uppercase;margin-bottom:3px}
#s5 .ev-q{font-family:Georgia,serif;font-style:italic;font-size:12px;line-height:1.45;color:var(--h2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#s5 .ev-q mark{background:transparent;color:var(--coral);font-style:italic}

/* --- arrows + dots --- */
#s5 .voices{display:flex;align-items:center;justify-content:center}
/* The arrows sit over the clip and fade in on hover — nothing frames the video
   when nobody is driving it. z-index clears .st-card (3); the stage is exactly
   the card's box, so left/right land on the clip's own edges. */
#s5 .vnav{position:absolute;top:50%;z-index:6;transform:translateY(-50%) scale(.94);
  width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  background:rgba(8,14,26,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;pointer-events:none;
  box-shadow:0 6px 20px rgba(4,10,22,.35);
  transition:opacity .2s var(--ease),transform .2s var(--ease),background .16s var(--ease)}
#s5 .vnav.prev{left:14px}
#s5 .vnav.next{right:14px}
#s5 .stage:hover .vnav,#s5 .vnav:focus-visible{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)}
#s5 .vnav:hover{background:rgba(217,64,64,.86);border-color:rgba(255,255,255,.5)}
/* touch: there is no hover, so they stay put */
@media (hover:none){ #s5 .vnav{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)} }

@media (max-height:920px) and (min-width:981px){
  #s5 .slide-inner{padding-top:96px;padding-bottom:102px}
}
@media (max-height:860px) and (min-width:981px){
  #s5 .slide-inner{padding-top:84px;padding-bottom:90px}
  #s5 .cols{margin-top:28px;gap:22px}
  /* the card gets shorter here but the HUD's content doesn't, so the growth
     chart steps out — same trade the site makes on small screens. Scores and
     the verbatim quote are the story; the sparkline is the nice-to-have. */
  #s5 .sg{padding:3px 0 4px}
  #s5 .hwave{height:15px;margin:7px 0 8px}
  #s5 .cols{--st-cap:min(44vh,364px)}
  #s5 .lead{font-size:15px}
}
@media (max-height:750px) and (min-width:981px){
  #s5 .slide-inner{padding-top:76px;padding-bottom:84px}
  #s5 .cols{margin-top:22px;gap:18px}
  #s5 .surv .cap,#s5 .vcol .cap{font-size:11.5px}
  #s5 .hud{padding:10px 13px}
  #s5 .sg{padding:3px 0 4px}
  #s5 .sg-s{font-size:16px}
  #s5 .sg-n{font-size:11.5px}
  #s5 .hwave{height:12px;margin:6px 0 7px}
  #s5 .ev-q{-webkit-line-clamp:1;font-size:11px}
  #s5 .ev{padding-top:5px}
  #s5 .ev-l{margin-bottom:2px}
  /* the card is only ~300px tall here — the HUD needs its inset back */
  #s5 .hud{top:11px;right:11px;bottom:11px}
  #s5 .hud-sect-h{margin-bottom:5px}
  #s5 .cols{--st-cap:min(43vh,330px)}
  #s5 .eyebrow{margin-bottom:11px}
  #s5 .hd.hd-sm{font-size:clamp(24px,3.0vw,37px)}
  #s5 .lead{font-size:14.5px}
  #s5 .st-ers .n{font-size:29px}
  #s5 .vnav{width:38px;height:38px}
}
@media (max-width:980px){
  #s5 .cols{grid-template-columns:1fr;gap:12px;margin-top:8px}
  #s5 .surv{display:none}
  #s5 .cols{justify-content:center}
  #s5 .cols{--st-cap:min(44vh,360px);--st-ratio:1.6}
  #s5 .lead{font-size:14.5px}
}
@media (max-width:640px){
  #s5 .voices{gap:8px}
  #s5 .vnav{width:34px;height:34px;font-size:15px}
  #s5 .st-deck{display:none}
  #s5 .hud{position:static;width:auto;margin-top:10px}
  #s5 .cols{--st-cap:34vh;--st-ratio:1.7778}
  #s5 .st-ers{right:16px}
  #s5 .hud-top .mdl{display:none}
}

/* ================= #s6 · HOW SCORING WORKS =================
   Rebuilt from Danny's 2026-08-25 note. He gets 20 minutes and this slide
   has one job: "we take student voice, our platform scores it instantly,
   and nobody has to read anything." So it is a flowchart and nothing else —
   no chart to click, no advisor bio, and none of the measurement vocabulary
   (QWK, inter-annotator agreement, multi-dimensional vector space) that he
   called "all really true and accurate, but too much". */
#s6 .flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;
  gap:0;margin-top:38px}
#s6 .fstep{background:rgba(255,255,255,.05);border:1px solid var(--d-border);border-radius:16px;
  padding:22px 24px 24px;display:flex;flex-direction:column;min-width:0}
#s6 .fstep.mid{background:linear-gradient(160deg,rgba(99,142,197,.20),rgba(99,142,197,.07));
  border-color:rgba(99,142,197,.42)}
#s6 .fstep.out{background:linear-gradient(160deg,rgba(243,113,99,.16),rgba(243,113,99,.05));
  border-color:rgba(243,113,99,.40)}
#s6 .fk{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue-lt);margin-bottom:12px}
#s6 .fstep.out .fk{color:var(--coral)}
#s6 .fbig{font-size:23px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.18}
#s6 .fsub{font-size:12.5px;line-height:1.6;color:var(--d2);margin-top:9px}
/* the connector between stages */
#s6 .farrow{display:flex;align-items:center;justify-content:center;width:56px;color:rgba(99,142,197,.75)}
#s6 .farrow svg{width:26px;height:26px}

/* stage 1 — a voice, not a form */
#s6 .fwave{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:auto}
#s6 .fwave i{flex:1;background:rgba(219,232,255,.30);border-radius:1px;display:block}
#s6 .fwave i:nth-child(3n){background:rgba(243,113,99,.75)}

/* stage 2 — what the model actually is */
#s6 .fchip{align-self:flex-start;margin-top:auto;background:rgba(8,22,42,.5);
  border:1px solid rgba(219,232,255,.20);border-radius:999px;padding:7px 15px;cursor:pointer;
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--d2);
  transition:border-color .2s var(--ease),color .2s var(--ease)}
#s6 .fchip:hover,#s6 .fchip:focus-visible{border-color:var(--blue-lt);color:#fff}

/* stage 3 — model-card-style output, exactly what Danny asked to see */
#s6 .fscores{margin-top:16px;display:flex;flex-direction:column;gap:9px}
#s6 .frow{display:flex;align-items:center;gap:10px}
#s6 .frow .n{font-size:13px;font-weight:600;color:#fff;flex:1;min-width:0;white-space:nowrap}
#s6 .frow .tr{flex:0 0 84px;height:4px;border-radius:2px;background:rgba(255,255,255,.13);overflow:hidden}
#s6 .frow .tr i{display:block;height:100%;border-radius:2px;background:var(--coral);width:0;
  transition:width .9s cubic-bezier(.16,1,.3,1)}
#s6.active .frow .tr i{width:var(--w)}
#s6 .frow .s{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;flex:none}
#s6 .frow .s small{font-family:var(--font-mono);font-size:9.5px;font-weight:400;color:var(--d3)}
#s6 .fmore{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;color:var(--d3);
  text-transform:uppercase;margin-top:12px}


/* the proof strip */
#s6 .fets{margin-top:22px;border-top:1px solid var(--d-border);padding-top:18px;
  display:flex;align-items:center;justify-content:flex-end}
/* A partner lockup, not a badge. The source mark is dark navy on transparent,
   so it is rendered white here rather than sat on a light chip — a chip inside
   a pill was two containers fighting each other.
   Danny: this is the "don't believe us, believe ETS" beat, so it can't read as
   a footnote in the corner. Centered, panelled, and about double the old size
   so it carries from the back of a board room. */
#s6 .etslock{display:flex;align-items:center;gap:20px;padding:13px 26px}
#s6 .etslock .t{text-align:left}
#s6 .etslock .k{display:block;margin-bottom:6px;font-family:var(--font-mono);font-size:10.5px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--coral)}
#s6 .etslock .v{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.015em}
#s6 .etsmark{height:42px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.95}

@media (max-height:860px) and (min-width:981px){
  #s6 .flow{margin-top:26px}
  #s6 .fstep{padding:18px 20px 20px}
  #s6 .fbig{font-size:20px}
  #s6 .fsub{font-size:12px;margin-top:8px}
  #s6 .fets{margin-top:17px;padding-top:13px}
}
@media (max-height:750px) and (min-width:981px){
  #s6 .slide-inner{padding-top:80px;padding-bottom:86px}
  #s6 .flow{margin-top:20px}
  #s6 .fstep{padding:15px 17px 17px}
  #s6 .fbig{font-size:18px}
  #s6 .fsub{font-size:11.5px;margin-top:7px}
  #s6 .fscores{margin-top:12px;gap:7px}
  #s6 .fets{margin-top:14px;padding-top:12px}
  #s6 .etslock{gap:16px;padding:10px 20px}
  #s6 .etsmark{height:34px}
  #s6 .etslock .v{font-size:19px}
  #s6 .farrow{width:40px}
}
@media (max-width:980px){
  /* stacking the three boxes makes the slide four screens tall, and this
     breakpoint doesn't scroll — so the flow stays horizontal and shrinks */
  #s6 .flow{margin-top:20px}
  #s6 .fstep{padding:13px 14px 15px;border-radius:13px}
  #s6 .fk{font-size:8.5px;letter-spacing:.14em;margin-bottom:8px}
  #s6 .fbig{font-size:15px}
  #s6 .fsub{font-size:11px;margin-top:6px;line-height:1.5}
  #s6 .fwave{display:none}
  #s6 .fchip{font-size:8.5px;padding:5px 11px}
  #s6 .fscores{margin-top:10px;gap:6px}
  #s6 .frow .n{font-size:11.5px}
  #s6 .frow .tr{flex:0 0 44px}
  #s6 .frow .s{font-size:13.5px}
  #s6 .fmore{font-size:8.5px;margin-top:8px}
  #s6 .farrow{width:26px}
  #s6 .farrow svg{width:18px;height:18px}
  #s6 .fets{margin-top:14px;padding-top:12px}
  #s6 .etslock{gap:14px;padding:9px 16px}
  #s6 .etsmark{height:30px}
  #s6 .etslock .v{font-size:17px}
  #s6 .etslock .k{font-size:9.5px;margin-bottom:4px}
}
@media (max-width:640px){
  #s6 .flow{grid-template-columns:1fr;gap:10px}
  #s6 .farrow{width:auto;height:24px;transform:rotate(90deg)}
}

/* ============= #s10 · FIVE APPLICATIONS ============= */
#s10 .apps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:42px}
.app-card{
  text-align:left;background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:22px 18px 20px;min-height:210px;display:flex;flex-direction:column;
  transition:all .25s var(--ease);position:relative;
}
.app-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(10,26,50,.12);border-color:var(--blue)}
.app-card.on{border-color:var(--coral);box-shadow:0 16px 38px rgba(243,113,99,.16)}
.app-card .num{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--coral);margin-bottom:12px}
.app-card b{font-size:16.5px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.app-card span{font-size:12.5px;color:var(--t2);line-height:1.5;margin-top:9px}
.app-card .go{margin-top:auto;padding-top:14px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--blue-deep)}
#pathnote{
  margin-top:26px;background:var(--navy);color:var(--d1);border-radius:14px;padding:18px 24px;
  display:none;align-items:baseline;gap:16px;
}
#pathnote.show{display:flex;animation:pop .35s var(--ease) both}
#pathnote .t{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);white-space:nowrap}
#pathnote .b{font-size:13.5px;line-height:1.55;color:var(--d2)}

/* ---------- page responsive ---------- */
@media (max-width:980px){
  #s4 .cols{grid-template-columns:1fr;gap:18px}
  #s3 .fig{padding:22px 22px 20px}
  #s3 .br{flex-direction:column;align-items:stretch;gap:8px}
  #s3 .br .nm{width:auto;text-align:left}
  #s3 .br .tr{height:48px}
  #s3 .br .vv{font-size:26px}
  #s3 .br.cog .vv{left:auto;right:12px;color:#fff}
  #s3 .br.dur .vv{left:auto;right:12px;color:#fff}
  #s4 .wheel{max-width:min(320px,34vh)}
  #s5 .cols{grid-template-columns:1fr}
  #s10 .apps{grid-template-columns:1fr 1fr}
  .app-card{min-height:0}
  /* narrow: each proof becomes a horizontal row so three of them
     plus the partner strip still fit one screen without scrolling */
  #s2 .slide-inner{padding:88px 40px 96px}
  #s2 .proof-grid{grid-template-columns:1fr;gap:14px;margin-top:26px}
  .proof{flex-direction:row;align-items:center;gap:18px}
  .proof .tile{height:78px;flex:0 0 128px;padding:12px 16px}
  .proof .txt{flex:1;text-align:left;align-items:flex-start}
  .proof h3{margin-top:0;font-size:16px;min-height:0}
  .proof p{font-size:13px;margin-top:5px}
  .proof .src{margin-top:7px;padding-top:0}
}
@media (max-width:620px){
  #s2 .slide-inner{padding:76px 24px 88px}
  #s2 .proof-grid{gap:12px;margin-top:20px}
  .proof{gap:14px}
  .proof .tile{height:60px;flex:0 0 96px;padding:9px 12px;border-radius:12px}
  .proof h3{font-size:14.5px;line-height:1.28;min-height:0}
  .proof p{font-size:12px;margin-top:4px;line-height:1.45}
  .proof .src{margin-top:6px;padding-top:0;font-size:8.5px}
}