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

/* ----- 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}
.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}

/* ----- 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}
.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}
}