/* =========================================================================
   extra.css — additive global styles (loaded after app.css on every page)
   Kept separate from app.css so the shared core stays untouched.
   ========================================================================= */

/* ----- Anchor jumps: keep targets clear of the sticky 66px header -------- */
html{scroll-padding-top:84px}

/* ----- Hero lede: full ink for readability over the tile field ----------- */
.hero .lede{color:var(--ink);font-weight:600}

/* ----- Hero tile-field canvas: fade every edge so the field never shows a
   boundary, whatever the viewport shape. ---------------------------------- */
.hero-canvas canvas{-webkit-mask-image:radial-gradient(135% 115% at 50% 42%,#000 52%,transparent 96%);mask-image:radial-gradient(135% 115% at 50% 42%,#000 52%,transparent 96%)}

/* ----- Nova, the site helper (assets/js/nova.js builds the DOM) ----------- */
#novaDock{position:fixed;right:14px;bottom:6px;z-index:300;cursor:pointer;width:118px}
@media(max-width:640px){#novaDock{width:92px;right:8px}}
#novaDock img{display:block;width:100%;filter:drop-shadow(0 9px 13px rgba(24,36,72,.28));transition:transform .2s var(--ease)}
#novaDock:hover img{transform:translateY(-4px)}
@media(prefers-reduced-motion:no-preference){#novaDock img{animation:nvbob 3.6s ease-in-out infinite}}
@keyframes nvbob{0%,100%{transform:none}50%{transform:translateY(-4px)}}
/* state motion on the one canonical image: no frame swaps, no identity flicker */
#novaDock img.nv-think{animation:nvthink 1.1s ease-in-out infinite}
@keyframes nvthink{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-3px) rotate(1.4deg)}}
#novaDock img.nv-cheer{animation:nvcheer .5s ease-in-out 3}
@keyframes nvcheer{0%,100%{transform:scale(1,1)}30%{transform:scale(1.05,.93) translateY(2px)}65%{transform:scale(.96,1.06) translateY(-8px)}}
#novaBubble{position:fixed;right:140px;bottom:96px;z-index:301;background:#fff;border:1px solid var(--line);border-radius:16px;border-bottom-right-radius:5px;box-shadow:var(--sh-lg);padding:10px 14px;font-size:.86rem;font-weight:700;color:var(--ink);max-width:210px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;pointer-events:none}
@media(max-width:640px){#novaBubble{right:106px;bottom:78px}}
#novaBubble.show{opacity:1;transform:none}
#novaPanel{position:fixed;right:14px;bottom:148px;width:min(390px,calc(100vw - 28px));height:min(560px,calc(100vh - 190px));background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 70px rgba(24,36,72,.35);display:flex;flex-direction:column;overflow:hidden;z-index:299;opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;transition:opacity .22s,transform .22s}
#novaPanel.open{opacity:1;transform:none;pointer-events:auto}
#novaPanel .nv-head{display:flex;align-items:center;gap:12px;padding:12px 16px;background:linear-gradient(160deg,var(--teal-700),var(--teal-800));color:#fff}
#novaPanel .nv-head img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:50% 24%;background:#F2E3BC}
#novaPanel .nv-head b{font-family:var(--font-display);font-size:1.06rem;display:block}
#novaPanel .nv-head span{font-size:.76rem;color:var(--teal-on-dark,#BCC5E9);display:flex;align-items:center;gap:6px}
#novaPanel .nv-head span::before{content:"";width:7px;height:7px;border-radius:50%;background:#7BC97E}
#novaPanel .nv-x{margin-left:auto;width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center}
#novaPanel .nv-x svg{width:16px;height:16px}
#novaPanel .nv-log{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.nv-msg{max-width:86%;padding:10px 14px;border-radius:16px;font-size:.92rem;line-height:1.55}
.nv-msg.bot{background:#fff;border:1px solid var(--line);color:var(--ink-2);border-bottom-left-radius:6px;align-self:flex-start}
.nv-msg.bot b{color:var(--ink)}
.nv-msg.bot a{color:var(--teal-deep);font-weight:800;text-decoration:underline;text-underline-offset:2px}
.nv-msg.me{background:linear-gradient(180deg,var(--teal),var(--teal-cta));color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.nv-typing{display:inline-flex;gap:5px;padding:12px 15px}
.nv-typing i{width:7px;height:7px;border-radius:50%;background:var(--teal);opacity:.4;animation:nvtp 1s infinite}
.nv-typing i:nth-child(2){animation-delay:.18s}.nv-typing i:nth-child(3){animation-delay:.36s}
@keyframes nvtp{0%,100%{opacity:.35;transform:none}50%{opacity:1;transform:translateY(-3px)}}
#novaPanel .nv-sugg{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 10px;background:var(--paper)}
#novaPanel .nv-sugg button{font:inherit;font-weight:700;font-size:.78rem;color:var(--teal-800);background:#fff;border:1.5px solid var(--line-2);border-radius:12px;padding:8px 11px;cursor:pointer;transition:all .15s}
#novaPanel .nv-sugg button:hover{border-color:var(--teal);background:var(--teal-tint)}
#novaPanel .nv-bar{display:flex;gap:8px;padding:10px 12px 6px;border-top:1px solid var(--line);background:#fff}
#novaPanel .nv-bar input{flex:1;font:inherit;font-size:.93rem;padding:11px 14px;border:1.5px solid var(--line-2);border-radius:14px;background:var(--paper);color:var(--ink)}
#novaPanel .nv-bar input:focus{outline:0;border-color:var(--teal)}
#novaPanel .nv-send{width:44px;height:44px;flex:none;border:0;border-radius:14px;background:linear-gradient(180deg,var(--teal),var(--teal-cta));color:#fff;cursor:pointer;display:grid;place-items:center}
#novaPanel .nv-send svg{width:19px;height:19px}
#novaPanel .nv-note{margin:0;padding:4px 14px 10px;font-size:.72rem;color:var(--mute);background:#fff}
@media(prefers-reduced-motion:reduce){#novaDock img,.nv-typing i{animation:none}}
/* phones: the chat becomes a full-screen sheet (fixes keyboard overlap and
   cramped panel), the dock hides while open, and the input is 16px so iOS
   does not zoom-jump on focus. */
@media(max-width:640px){
  #novaPanel{right:0;left:0;bottom:0;top:0;width:100%;height:100%;height:100dvh;border-radius:0;border:0}
  body.nv-open{overflow:hidden}
  body.nv-open #novaDock,body.nv-open #novaBubble{display:none}
  #novaPanel .nv-bar input{font-size:16px}
  #novaPanel .nv-head{padding-top:max(12px,env(safe-area-inset-top))}
  #novaPanel .nv-note{padding-bottom:max(10px,env(safe-area-inset-bottom))}
}

/* ----- Minimal footer (single row: brand + links + legal line) ----------- */
.site-foot{padding-block:clamp(24px,3vw,34px) 16px}
.fmin{display:flex;align-items:center;justify-content:space-between;gap:14px 26px;flex-wrap:wrap}
a.fbrand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:900;font-size:1.05rem;color:#fff}
a.fbrand:hover{color:#fff}
a.fbrand img{height:30px}
.fmin-links{display:flex;flex-wrap:wrap;gap:2px 4px}
.site-foot .fmin-links a{display:inline-block;padding:6px 10px;font-size:.92rem;color:var(--on-2);border-radius:999px}
.site-foot .fmin-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.site-foot .fbot{margin-top:16px;padding-top:12px;font-size:.8rem}

/* ----- Social icon rows (footer + contact page). Placeholder-friendly. --- */
.fsoc{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.fsoc a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--on-2);transition:color var(--t-fast),background var(--t-fast)}
.fsoc a:hover{color:#fff;background:rgba(255,255,255,.1)}
.fsoc svg{width:17px;height:17px}
.fsoc.fsoc-ink a{color:var(--ink-2)}
.fsoc.fsoc-ink a:hover{color:var(--teal-deep);background:var(--teal-tint)}
/* prominent variant: filled navy buttons (contact page "follow along") */
.fsoc.fsoc-big{gap:8px}
.fsoc.fsoc-big a{width:46px;height:46px;background:linear-gradient(180deg,var(--teal),var(--teal-cta));color:#fff;box-shadow:var(--sh-teal);transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease)}
.fsoc.fsoc-big a:hover{background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#1D2B55;transform:translateY(-3px);box-shadow:var(--sh-gold)}
.fsoc.fsoc-big svg{width:21px;height:21px}

/* ----- Blog temporarily removed: hide its links in nav + footer --------- */
.nav-links a[href*="blog/index.html"],.site-foot a[href*="blog/index.html"]{display:none}

/* ----- Mobile header: brand + accent CTA + hamburger cannot all fit under
   about 500px (the CTA label wraps into a broken multi-line pill). Hide the
   header shortcut on small phones; the drawer and in-page subscribe section
   keep the path open. ----------------------------------------------------- */
@media(max-width:520px){.nav-cta .btn-accent{display:none}}

/* ----- Tool steppers (attendance, grad-rate, on-track): the minus/plus
   buttons and input otherwise size to the text at about 30px tall. Enforce
   the 48px tap-target height everywhere the component appears. ------------ */
.stepper{min-height:48px}

/* ----- Homepage "Curious about a number" input pair: the two-up inline grid
   gets too cramped for a select plus number input on small phones. --------- */
@media(max-width:560px){#explore .card>.grid[style*="1.4fr"]{grid-template-columns:1fr!important}}

/* ----- Small phones: long underlined phrases (.u is nowrap) can exceed the
   320px content column inside an h1 (e.g. "Act strategically."). Let them
   wrap and paint the underline per line with a cloned background instead of
   the single absolutely positioned bar. ----------------------------------- */
@media(max-width:430px){
  .u{white-space:normal;background:linear-gradient(180deg,transparent 64%,rgba(91,179,245,.85) 64%,rgba(91,179,245,.85) 88%,transparent 88%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .u::after{display:none}
  .section-dark .u{background:none}
}

/* ----- About block (About/Contact page): floated photo panel (feature-media
   look), text flows beside it and wraps underneath. One type size. -------- */
.ab-side{float:left;width:min(290px,42%);margin:4px 32px 16px 0;background:linear-gradient(160deg,var(--teal-tint),#fff);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px;box-shadow:var(--sh)}
.ab-side img{display:block;width:100%;border-radius:var(--r-md)}
@media(max-width:600px){.ab-side{float:none;width:min(280px,82%);margin:0 auto 18px}}
.ab-flow p{font-size:1.05rem;line-height:1.72;color:var(--ink-2);margin:0 0 15px}
.ab-flow p b{color:var(--ink)}
.ab-flow h3{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:24px 0 12px}
.ab-photo-cap{margin:13px 2px 0;font-size:.9rem;font-weight:700;color:var(--ink-2);text-align:center}
.ab-photo-cap a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
.ab-photo-cap a:hover{color:var(--teal-800)}

/* ----- Contact form ----------------------------------------------------- */
.cform{display:grid;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(22px,3vw,34px);box-shadow:var(--sh)}
.cform .crow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.cform .crow{grid-template-columns:1fr}}
.cfield{display:flex;flex-direction:column;gap:7px}
.cfield label{font-weight:800;font-size:.86rem;color:var(--ink)}
.cfield label .req{color:var(--teal-deep)}
.cfield input,.cfield select,.cfield textarea{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;width:100%;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.cfield textarea{min-height:130px;resize:vertical}
.cfield input:focus,.cfield select:focus,.cfield textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.cform .cbtn-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cform .cnote{font-size:.9rem;color:var(--ink-2);margin:0}
.cform-ok{display:none;text-align:center;background:var(--teal-tint);border:1px solid var(--teal-soft);border-radius:var(--r-md);padding:clamp(28px,4vw,44px)}
.cform-ok.show{display:block}
.cform.hide{display:none}
.cform-ok .ok-ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:linear-gradient(180deg,var(--teal),var(--teal-deep));color:#fff}
.cform-ok .ok-ic svg{width:28px;height:28px}
.cform-ok h3{margin:0 0 8px}

/* ----- Live-results affordance (shared by ALL tools) ----------------------
   1) .live-pill: a pulsing "Live, updates as you type" badge for results
      headers. 2) .live-flash: a soft teal ring that fires on the results
      container every time a recompute runs, so cause and effect is obvious.
   JS contract: on each user-triggered compute, remove .live-flash, force
   reflow (void el.offsetWidth), re-add it. Skip the flash on initial load. */
.live-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;background:var(--teal-tint);border:1px solid var(--teal-soft);color:var(--teal-800);font-weight:800;font-size:.74rem;letter-spacing:.02em;white-space:nowrap}
.live-pill .lp-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);position:relative;flex:none}
.live-pill .lp-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(46,67,128,.45);animation:lpping 1.8s ease-out infinite}
@keyframes lpping{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.3);opacity:0}}
.live-flash{animation:liveflash .7s var(--ease)}
@keyframes liveflash{0%{box-shadow:0 0 0 0 rgba(46,67,128,.4)}100%{box-shadow:0 0 0 16px rgba(46,67,128,0)}}
@media(prefers-reduced-motion:reduce){.live-pill .lp-dot::after,.live-flash{animation:none}}

/* ----- Stick-figure student glyphs (reality-check, grad-rate) -------------
   Pages define one <svg><symbol id="ssPerson">…</symbol></svg> and stamp
   <svg class="ss-kid"><use href="#ssPerson"/></svg> per student. Color via
   currentColor so state classes stay cheap to toggle. */
.ss-kid{width:13px;height:19px;color:var(--line-2);flex:none}
.ss-kid.met{color:var(--teal)}
.ss-kid.lit{color:var(--gold-deep)}

/* ----- Hero playable what-if (the "Alex" slider) ---------------------------
   The hero's right side IS a working tool. Attract mode: hero-play.js
   drifts the slider on its own until the first real interaction. */
.hp{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:20px 22px 18px;position:relative;overflow:hidden}
.hp::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--gold))}
.hp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.hp-who{display:flex;align-items:center;gap:10px}
.hp-kid{width:20px;height:29px;transition:color .25s var(--ease)}
.hp-name{font-family:var(--font-display);font-weight:800;font-size:1.02rem;color:var(--ink)}
.hp-name small{display:block;font-family:var(--font-body);font-weight:700;font-size:.72rem;color:var(--mute);letter-spacing:.04em}
.hp svg.chart{display:block;width:100%;height:auto;margin:4px 0 2px}
/* small phones scale the 380-unit chart to about 0.73x, which drops the 9.5px
   annotations below 7px on screen; raise the user-unit size so labels land
   near 10px rendered */
@media(max-width:430px){.hp svg.chart text{font-size:13px}}
.hp-slide{margin-top:10px}
.hp-slide .lab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.hp-slide .lab b{font-size:.92rem;color:var(--ink)}
.hp-slide .lab .v{font-family:var(--font-display);font-weight:900;font-size:1.7rem;line-height:1;color:var(--gold-ink)}
.hp-range{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:99px;outline:none;cursor:pointer;background:var(--sand-2)}
.hp-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,var(--gold),var(--gold-deep));border:3px solid #fff;box-shadow:var(--sh-gold);cursor:grab}
.hp-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--gold);border:3px solid #fff;box-shadow:var(--sh-gold);cursor:grab}
.hp-range:active::-webkit-slider-thumb{cursor:grabbing}
.hp-range:focus-visible{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--teal)}
.hp-hint{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;font-size:.8rem;font-weight:800;color:var(--teal-deep);transition:opacity .4s}
.hp-hint.gone{opacity:0}
.hp-hint svg{width:15px;height:15px;animation:hintX 1.4s var(--ease-io) infinite}
@keyframes hintX{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.hp-hint svg{animation:none}}
.hp-read{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.hp-cell{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-xs);padding:10px 13px}
.hp-cell .k{font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);display:block}
.hp-cell .n{font-family:var(--font-display);font-weight:900;font-size:1.45rem;line-height:1.15;color:var(--ink)}
.hp-say{margin:12px 0 0;font-size:.92rem;line-height:1.5;color:var(--ink-2);border-top:1px solid var(--line);padding-top:11px;min-height:3.6em}
.hp-say b{color:var(--ink)}
.hp-cta{margin-top:12px;text-align:center}
.hp-cta a{font-weight:800;color:var(--teal-deep);font-size:.92rem}

/* ----- Data Guide showcase (homepage, under the mission) ------------------ */
.dg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:30px}
@media(max-width:980px){.dg-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.dg-grid{grid-template-columns:repeat(2,1fr)}}
.dg-card{display:flex;flex-direction:column;gap:9px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 12px 11px;box-shadow:var(--sh-sm);color:var(--ink);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t)}
.dg-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--gold-soft);color:var(--ink)}
.dg-card svg{display:block;width:100%;height:auto;border-radius:8px}
.dg-card span{font-family:var(--font-display);font-weight:800;font-size:.84rem;line-height:1.22}
/* tools grid: each card gets its own tinted background (4-color cycle, all
   non-risk tints, offset against the 5-column grid so columns never repeat) */
.dg-vari .dg-card:nth-child(4n+1){background:#FFFFFF}
.dg-vari .dg-card:nth-child(4n+2){background:var(--teal-tint)}
.dg-vari .dg-card:nth-child(4n+3){background:#F2EBDD}
.dg-vari .dg-card:nth-child(4n){background:var(--gold-soft)}

/* ----- Hero "live demo" (replaces the flat cross-fade carousel) -----------
   A 3D-tilting glass panel whose data ANIMATES on every scene change:
   numbers count up (JS), meters fill, chart lines draw themselves,
   checkmarks stroke in, chips pop in staggered. Floating satellite cards
   sit at different depths so the tilt reads as parallax. Story-style
   progress segments replace the dots. Reduced-motion aware throughout. */
.hero-live{position:relative}
/* Crispness rules: NO translateZ layers, NO backdrop-filter, NO will-change.
   Idle state carries no transform at all so text renders pixel-crisp; the
   3D tilt + parallax are applied by JS only while the pointer is over the
   visual (motion masks rasterization) and cleared on leave. */
.hl-3d{position:relative}
.hl-tilt{position:relative;transition:transform .3s var(--ease)}
.hl-deco,.hl-float{transition:transform .3s var(--ease)}

/* ambient decoration (behind the panel) */
.hl-deco{position:absolute;inset:-40px;pointer-events:none}
.hl-ring{position:absolute;top:-34px;right:-30px;width:190px;height:190px;border:1.6px dashed rgba(46,150,238,.55);border-radius:50%;animation:hlspin 46s linear infinite}
.hl-ring::after{content:"";position:absolute;top:-5px;left:50%;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(91,179,245,.9)}
.hl-blob{position:absolute;border-radius:50%;filter:blur(46px)}
.hl-blob.b1{width:260px;height:260px;left:-60px;bottom:-46px;background:radial-gradient(circle,rgba(46,67,128,.32),transparent 70%);opacity:.55}
.hl-blob.b2{width:220px;height:220px;right:-44px;top:-56px;background:radial-gradient(circle,rgba(91,179,245,.4),transparent 70%);animation:hlpulse 7s ease-in-out infinite}
@keyframes hlspin{to{transform:rotate(360deg)}}
@keyframes hlpulse{0%,100%{opacity:.38}50%{opacity:.62}}

/* main stage: scenes stacked, tallest sets the height */
.hl-stage{position:relative;display:grid}
.hl-scene{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s linear .6s;pointer-events:none}
.hl-scene.on{visibility:visible;opacity:1;transform:none;transition-delay:0s}

.hl-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:22px;position:relative;overflow:hidden}
.hl-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--gold));opacity:.9}
.hl-panel .panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.hl-panel .panel-top .lbl{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.hl-panel .big{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.hl-panel .big .n{font-family:var(--font-display);font-weight:900;font-size:2.7rem;line-height:1;letter-spacing:-.03em;color:var(--teal-deep)}

/* in-scene animation primitives, triggered by .run on the scene */
.hl-scene .hl-pop{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:var(--d,0s)}
.hl-scene.run .hl-pop{opacity:1;transform:none}
svg .hl-pop{transform:none} /* SVG children: fade only, no translate */
.hl-scene .mini-meter i,.hl-scene .hl-ci-band{transition:width .9s var(--ease) .25s}
.hl-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease) .3s}
.hl-scene.run .hl-draw{stroke-dashoffset:0}
.hl-dot{animation:hldot 2s ease-in-out infinite}
@keyframes hldot{0%,100%{opacity:1}50%{opacity:.3}}

/* teal chip: confident/real (non-risk meaning; green stays risk-only) */
.chip.teal{background:var(--teal-soft);color:var(--teal-800);border-color:#BCC5E9}

/* significance CI strip */
.hl-ci{margin:4px 0 2px}
.hl-ci-track{position:relative;height:12px;border-radius:99px;background:var(--sand-2)}
.hl-ci-zero{position:absolute;left:12%;top:-3px;bottom:-3px;width:2px;border-radius:2px;background:var(--ink-2);opacity:.55}
.hl-ci-band{position:absolute;left:30%;top:0;bottom:0;width:0;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--teal-deep))}
.hl-ci-lbls{display:flex;justify-content:space-between;font-size:.74rem;font-weight:700;color:var(--mute);margin-top:5px}

/* floating satellite cards (JS parallax moves them opposite the tilt) */
.hl-float{position:absolute;z-index:3}
.hl-float .fin{display:flex;gap:11px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);padding:12px 16px;animation:hlfloat 6.5s ease-in-out infinite}
.hl-float.f1{top:-24px;right:-16px}
.hl-float.f2{bottom:-22px;left:-20px}
.hl-float.f2 .fin{animation-duration:7.6s;animation-direction:reverse}
@keyframes hlfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hl-float .fic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--teal-soft);color:var(--teal-deep)}
.hl-float .ft b{display:block;font-size:.86rem;line-height:1.3}
.hl-float .ft span{font-size:.76rem;color:var(--mute)}
/* scene-aware float content: quick fade while the text swaps */
.hl-float .ft{transition:opacity .22s var(--ease)}
.hl-float.swap .ft{opacity:0}
.hl-float .pulse{width:10px;height:10px;border-radius:50%;background:var(--teal);position:relative;flex:none;margin-inline:6px}
.hl-float .pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(46,67,128,.5);animation:hlping 1.9s ease-out infinite}
@keyframes hlping{0%{transform:scale(.45);opacity:1}100%{transform:scale(1.35);opacity:0}}

/* caption link + story progress segments */
.hl-bottom{margin-top:18px}
.hl-cap{display:flex;justify-content:center;align-items:center;gap:6px;font-weight:800;font-size:.94rem;color:var(--teal-deep)}
.hl-cap .ar{transition:transform var(--t) var(--ease)}
.hl-cap:hover .ar{transform:translateX(4px)}
.hl-segs{display:flex;gap:6px;margin:12px auto 0;max-width:300px}
.hl-segs button{flex:1;height:5px;border-radius:99px;border:0;padding:0;background:var(--line-2);overflow:hidden;cursor:pointer;position:relative}
.hl-segs button i{position:absolute;inset:0;width:0;background:var(--teal-cta);border-radius:99px}

@media(max-width:620px){.hl-float,.hl-ring{display:none}}
@media(prefers-reduced-motion:reduce){
  .hl-ring,.hl-blob.b2,.hl-float .fin,.hl-float .pulse::after,.hl-dot{animation:none}
  .hl-scene .hl-pop{opacity:1;transform:none}
  .hl-draw{stroke-dashoffset:0}
}