/* ============================================================
   IMPACTER deck.css — shared foundation for every deck page.
   Tokens + base + slide surfaces + reveal + type + chrome +
   reusable components. Page-specific styles go in each page's
   own <style> block — never in this file.
   Visual language: pitch.impacterpathway.com.
   ============================================================ */
@font-face{
  font-family:'Hanken Grotesk';
  src:url('/assets/fonts/hanken-grotesk-latin-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk';
  src:url('/assets/fonts/hanken-grotesk-latin-ext-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02AF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('/assets/fonts/jetbrains-mono-latin-var.woff2') format('woff2');
  font-weight:100 800;font-style:normal;font-display:swap;
}
:root{
  --blue:#638EC5; --blue-deep:#3F6BA3; --blue-lt:#A8C8F0;
  --coral:#F37163; --coral-deep:#D94040;
  --navy:#0A1A32; --navy-deep:#050E1E; --navy-2:#162235;
  --paper:#F1F0EE; --cream:#F0EBE3;
  --ink:#0A1A32;
  --t2:rgba(29,27,28,.62); --t3:rgba(29,27,28,.4);
  --d1:rgba(219,232,255,.95); --d2:rgba(219,232,255,.62); --d3:rgba(219,232,255,.36);
  --border:rgba(29,27,28,.09); --border-strong:rgba(29,27,28,.16);
  --d-border:rgba(99,142,197,.16);
  --font-display:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:var(--navy-deep);color:var(--ink);
  font-family:var(--font-display);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}

/* ---------- deck ---------- */
#deck{position:fixed;inset:0}
.slide{
  position:absolute;inset:0;overflow:hidden;
  display:flex;align-items:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .55s var(--ease),visibility 0s linear .55s;
}
.slide.active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .55s var(--ease)}
.slide-inner{width:100%;max-width:1280px;margin:0 auto;padding:110px 72px 120px}

/* dark / light slide surfaces */
.slide.dark{background:radial-gradient(120% 140% at 78% 12%,#12294a 0%,var(--navy) 44%,var(--navy-deep) 100%);color:var(--d1)}
.slide.dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(99,142,197,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(99,142,197,.07) 1px,transparent 1px);
  background-size:56px 56px;
}
.slide.light{background:var(--paper);color:var(--ink)}

/* reveal choreography */
.rev{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.slide.active .rev{opacity:1;transform:none}
.slide.active .rev.d1{transition-delay:.08s}
.slide.active .rev.d2{transition-delay:.18s}
.slide.active .rev.d3{transition-delay:.3s}
.slide.active .rev.d4{transition-delay:.42s}
.slide.active .rev.d5{transition-delay:.54s}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--coral);
  display:inline-flex;align-items:center;gap:12px;margin-bottom:22px;
}
.slide.dark .eyebrow{color:var(--blue-lt)}
.chip{
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--coral);
  border:1px solid rgba(243,113,99,.45);background:rgba(243,113,99,.12);
  border-radius:6px;padding:4px 10px;
}
.hd{
  font-size:clamp(34px,4.6vw,62px);font-weight:800;letter-spacing:-.03em;line-height:1.04;
  max-width:20ch;text-wrap:balance;
}
.hd.hd-sm{font-size:clamp(28px,3.6vw,48px);max-width:26ch}
.hd .acc{
  background:linear-gradient(100deg,var(--coral) 10%,#c98db8 55%,var(--blue-lt) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.slide.light .hd .acc{background:linear-gradient(100deg,var(--coral-deep),var(--coral) 60%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(15px,1.4vw,19px);line-height:1.6;color:var(--t2);max-width:58ch;margin-top:20px}
.slide.dark .lead{color:var(--d2)}
.footnote{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--t3);margin-top:26px}
.slide.dark .footnote{color:var(--d3)}

/* ---------- chrome (counter · dots · arrows · brand) ---------- */
#chrome{position:fixed;left:0;right:0;bottom:0;padding:0 28px 24px;display:flex;align-items:center;justify-content:space-between;z-index:40;pointer-events:none}
#counter{
  pointer-events:auto;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.08em;
  background:#fff;color:var(--ink);border-radius:999px;padding:9px 16px;
  box-shadow:0 4px 18px rgba(5,14,30,.18);
}
#dots{pointer-events:auto;display:flex;gap:9px;align-items:center}
#dots button{
  width:9px;height:9px;border-radius:999px;border:0;background:rgba(120,140,175,.4);
  transition:all .35s var(--ease);padding:0;
}
#dots button.on{width:30px;background:var(--coral)}
#arrows{pointer-events:auto;display:flex;gap:10px}
#arrows button{
  width:44px;height:44px;border-radius:999px;border:0;background:#fff;color:var(--ink);
  box-shadow:0 4px 18px rgba(5,14,30,.18);display:flex;align-items:center;justify-content:center;
  transition:transform .16s,opacity .16s;
}
#arrows button:hover{transform:translateY(-1px)}
#arrows button:disabled{opacity:.35;cursor:default;transform:none}
#arrows svg{width:16px;height:16px}
#brand{position:fixed;top:24px;left:28px;z-index:40;height:26px;transition:opacity .5s}
#brand img{height:100%;width:auto}
#brand.hide{opacity:0;pointer-events:none}

/* ---------- reusable components ---------- */
/* white card on light slides */
.card{background:#fff;border:1px solid var(--border);border-radius:16px}
/* translucent card on dark slides */
.card-dark{background:rgba(255,255,255,.04);border:1px solid var(--d-border);border-radius:18px}
/* mono word/tag pill (dark surfaces) */
.pill{
  font-family:var(--font-mono);font-size:12px;color:var(--blue-lt);
  border:1px solid var(--d-border);border-radius:999px;padding:5px 13px;
}
@keyframes pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- interactive rubric (rubric.js) ---------- */
.rubric{
  display:grid;gap:10px;
  max-height:min(54vh,520px);overflow-y:auto;overscroll-behavior:contain;
  padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(120,140,175,.5) transparent;
}
.rubric::-webkit-scrollbar{width:6px}
.rubric::-webkit-scrollbar-thumb{background:rgba(120,140,175,.5);border-radius:99px}
.rub-row{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 16px}
.slide.dark .rub-row{background:rgba(255,255,255,.04);border-color:var(--d-border)}
.rub-row-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.rub-name{font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.slide.dark .rub-name{color:var(--d1)}
.rub-pills{display:flex;gap:6px;flex-wrap:wrap}
.rub-pill{
  display:inline-flex;align-items:baseline;gap:6px;border:1px solid var(--border-strong);
  background:transparent;color:inherit;border-radius:999px;padding:5px 12px;
  transition:all .18s var(--ease);
}
.rub-pill-key{font-family:var(--font-mono);font-size:10px;font-weight:700}
.rub-pill-lbl{font-size:12px;font-weight:700;letter-spacing:-.01em}
.slide.dark .rub-pill{border-color:var(--d-border);color:var(--d2)}
.rub-pill:hover{border-color:var(--blue)}
.rub-pill.on{background:var(--navy);border-color:var(--navy);color:#fff}
.slide.dark .rub-pill.on{background:var(--coral);border-color:var(--coral);color:#fff}
.rub-panel{margin-top:12px;border-top:1px dashed var(--border-strong);padding-top:12px}
.slide.dark .rub-panel{border-color:var(--d-border)}
.rub-panel-meta{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.rub-panel-level{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--coral)}
.rub-panel-anchor{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--t3)}
.slide.dark .rub-panel-anchor{color:var(--d3)}
.rub-panel-text{font-size:13.5px;line-height:1.6;color:var(--t2);max-width:88ch}
.slide.dark .rub-panel-text{color:var(--d2)}
.rub-footnote{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--t3);padding:2px 4px}
.slide.dark .rub-footnote{color:var(--d3)}

/* ---------- student response card (shared demo layout) ---------- */
.resp-card{background:var(--navy);color:var(--d1);border:1px solid rgba(99,142,197,.25);border-radius:18px;padding:24px 26px}
.resp-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.resp-who b{font-size:15px;font-weight:800;letter-spacing:-.01em;display:block}
.resp-who span{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--d3)}
.resp-play{margin-left:auto;display:flex;align-items:center;gap:10px}
.resp-card audio{width:100%;margin:6px 0 12px;border-radius:10px}
.resp-card video{width:100%;border-radius:12px;margin:6px 0 12px;background:#000}
.resp-card blockquote{font-size:14.5px;line-height:1.75;color:var(--d1);font-weight:500}
.resp-card blockquote mark{background:rgba(243,113,99,.22);color:#ffd9d3;border-radius:4px;padding:1px 5px;font-weight:700}
.resp-sigs{margin-top:14px;border-top:1px solid rgba(99,142,197,.25);padding-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.resp-sigs span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-lt);border:1px solid var(--d-border);border-radius:999px;padding:4px 11px}
.media-todo{border:2px dashed rgba(120,140,175,.5);border-radius:12px;padding:26px;text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--t3)}
.slide.dark .media-todo{color:var(--d3)}

/* student response layout: vertical video + verbatim transcript */
/* The transcript box matches the height of the left column exactly.
   Technique: the left column (video + caption) is the only thing that
   sizes the grid row — .resp-body gets height:0 so it contributes
   nothing to max-content row sizing, then min-height:100% stretches it
   back to whatever height the video ended up at. The blockquote flexes
   into the leftover space and scrolls internally, which also pins the
   signals row to the bottom of the card. */
/* ---- unified response card (video left + transcript right) ---- */
.resp-grid{margin-top:26px}
.resp-body{
  background:var(--navy);color:var(--d1);border:1px solid rgba(99,142,197,.25);
  border-radius:18px;display:flex;overflow:hidden;
  height:min(56vh,600px);
}
.resp-vid{flex:0 0 clamp(280px,36vw,480px);position:relative}
.resp-vid video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;background:#0A1A32}
.resp-text{flex:1;min-width:0;padding:24px 26px;display:flex;flex-direction:column;overflow:hidden}
/* Three layers, three weights. The title used to be 15px/800 and the transcript
   13.5px/500 — a point and a half apart, same colour, no rule between them, so
   the whole card read as one grey block. Order is prompt → quote → transcript,
   each announced by its own label, with the body clearly demoted to evidence. */
.resp-body .rb-prompt{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--coral);margin-bottom:9px}
.resp-body .rb-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.resp-body .rb-head b{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.25;color:#fff}
.resp-body .rb-head span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--d3)}
.resp-body .rb-tlabel{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--d3);margin-bottom:11px}
.resp-body blockquote{font-size:12.5px;line-height:1.7;color:var(--d2);font-weight:400;
  border-top:1px solid rgba(99,142,197,.22);padding-top:13px;
  flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:6px;scrollbar-width:thin}
.resp-body blockquote mark{background:rgba(243,113,99,.22);color:#ffd9d3;border-radius:4px;padding:1px 5px;font-weight:700}
/* ---- karaoke transcript (transcript-sync.js) ----
   Every word in the blockquote is wrapped in <span class="tw"> at
   runtime, then lit on video time: .tw-spoken = already said,
   .tw-now = being said right now. Deliberately animates OPACITY,
   not color, so <mark> highlights keep their own coral treatment
   and only the text inside them brightens with the audio.
   .is-synced is added only when the words JSON aligned with the
   markup, so an un-synced transcript keeps its original look.
   Not scoped to .resp-body: the BH "Any Language" slide syncs an
   <audio> against a blockquote outside that layout, and .is-synced
   is only ever set by transcript-sync.js, so the class alone is a
   safe hook. */
blockquote.is-synced .tw{
  opacity:.42;transition:opacity .22s ease,color .22s ease;cursor:pointer;
}
blockquote.is-synced .tw:hover{opacity:.85}
blockquote.is-synced .tw-spoken{opacity:1}
blockquote.is-synced .tw-now{
  opacity:1;color:#fff;text-shadow:0 0 18px rgba(147,183,235,.45);
}
/* Before the clip has ever played (and again after it ends, when the
   script drops .is-live) the transcript sits at near-full strength so
   the slide is readable if the presenter just talks over it. .is-live
   is what dims the baseline, so the sweep only happens while playing. */
blockquote.is-synced:not(.is-live) .tw{opacity:.92}
blockquote.is-synced.is-live .tw{opacity:.42}
blockquote.is-synced.is-live .tw-spoken{opacity:1}
blockquote.is-synced.is-live .tw-now{opacity:1}
@media (prefers-reduced-motion:reduce){
  blockquote.is-synced .tw{transition:none}
  blockquote.is-synced .tw-now{text-shadow:none}
}

.resp-body .rb-sigs{margin-top:14px;border-top:1px solid rgba(99,142,197,.25);padding-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.resp-body .rb-sigs .lbl{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--d3);margin-right:4px}
.resp-body .rb-sigs span:not(.lbl){font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-lt);border:1px solid var(--d-border);border-radius:999px;padding:4px 11px}

/* ---- rubric score rows (shared component) ----
   Used by the general deck's #s5 voice panel and by the shared-demo
   response slides. Lives on a dark navy card in both places.
   Two activation modes:
   · .sig-rows.auto — static: bars fill when the slide activates.
   · .sig-rows.live — synced: signal-scores.js drives .det/.now on
     each row from the video's word timings (transcript-sync.js),
     so a score "lands" the moment its evidence is spoken.
     Rows ship with .det in the markup so the card reads fully
     scored before playback (and if sync is unavailable). */
.rb-scores{margin-top:14px;border-top:1px solid rgba(99,142,197,.25);padding-top:12px}
.sig-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.sig-head .t{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--coral)}
.sig-head .n{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--d3)}
.sig-rows{display:grid;gap:6px}
.sig-row{
  display:grid;grid-template-columns:176px 1fr 50px 62px;align-items:center;gap:12px;
  background:rgba(255,255,255,.04);border:1px solid transparent;border-radius:10px;
  padding:7px 12px;text-align:left;color:var(--d1);transition:all .25s var(--ease);
}
.sig-row:hover{background:rgba(255,255,255,.08)}
.sig-row.on{background:rgba(243,113,99,.12);border-color:rgba(243,113,99,.45)}
.sig-row .nm{font-size:12.5px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden}
.sig-row .lv{font-family:var(--font-mono);font-style:normal;font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--d2);border:1px solid rgba(99,142,197,.4);border-radius:5px;padding:1px 5px;flex:none}
.sig-row .track{height:4px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.sig-row .fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--coral),var(--coral-deep));width:0;transition:width 1.1s var(--ease) .1s}
.sig-row .sc{font-size:14.5px;font-weight:800;text-align:right;white-space:nowrap}
.sig-row .sc small{font-size:10px;font-weight:600;color:var(--d3)}
.sig-row .pct{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;color:var(--coral);text-align:right;white-space:nowrap;transition:opacity .4s}
.slide.active .sig-rows.auto .fill{width:var(--w);transition-delay:.55s}
.sig-rows.live .sig-row{cursor:pointer}
.sig-rows.live .sig-row:not(.det){opacity:.45}
.sig-rows.live .sig-row:not(.det) .pct{opacity:0}
.sig-rows.live .sig-row.det .fill{width:var(--w)}
.sig-rows.live .sig-row.now{background:rgba(243,113,99,.14);border-color:rgba(243,113,99,.5);opacity:1}
@media (prefers-reduced-motion:reduce){.sig-row .fill{transition:none!important}}
@media (max-width:980px){.sig-row{grid-template-columns:1fr 50px 62px}.sig-row .track{display:none}}
@media (max-width:980px){.resp-body{flex-direction:column;height:auto}.resp-vid{flex:none;width:100%;height:auto;aspect-ratio:16/9}.resp-text{overflow-y:auto;max-height:50vh}.resp-body blockquote{max-height:none}}

/* ---------- report showcase (screenshot card + click-out) ---------- */
.reports{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:34px}
.report-card{display:block;text-decoration:none;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:all .25s var(--ease)}
.slide.dark .report-card{background:rgba(255,255,255,.04);border-color:var(--d-border)}
.report-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(10,26,50,.14)}
.report-card img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-bottom:1px solid var(--border)}
.report-card .rc-body{padding:14px 18px 16px}
.report-card .rc-tag{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);margin-bottom:6px}
.report-card b{font-size:14.5px;font-weight:800;letter-spacing:-.01em;display:block}
.slide.dark .report-card b{color:var(--d1)}
.report-card .rc-open{margin-top:8px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--blue-deep);display:inline-block}
.slide.dark .report-card .rc-open{color:var(--blue-lt)}

/* ---------- district report slide (shared: PoG · CTE · College Prep) ----------
   One beat, three parts: the claim, the report's own headline figures,
   and the cover you can open. Markup is declarative — see
   assets/js/report-slide.js for the data attributes, and docmodal.js
   for the cover's click-out. Lives here rather than inlined per page
   because three paths now end on this same slide. */
.rpt-layout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;margin-top:26px}
.rpt-detail{max-width:520px;padding-top:4px}
.rpt-detail .rpt-sub{margin-top:10px;font-size:14px;line-height:1.58;color:var(--d2)}
.rpt-cover{position:relative;display:block;width:100%;max-width:400px;border:0;padding:0;
  cursor:pointer;background:none;text-align:left;flex:none}
.rpt-cover img{display:block;width:100%;border-radius:10px;border:1px solid var(--d-border);
  box-shadow:0 18px 50px rgba(0,0,0,.42);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.rpt-cover:hover img{transform:translateY(-4px);box-shadow:0 26px 62px rgba(0,0,0,.52)}
.rpt-cover .rpt-badge{position:absolute;bottom:12px;left:12px;
  background:rgba(10,26,50,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:7px;padding:7px 12px;font-family:var(--font-mono);font-size:9px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  display:flex;align-items:center;gap:7px;pointer-events:none}
.rpt-cover .rpt-badge svg{width:12px;height:12px;flex:none}
/* the report's own headline figures — filled and counted up by report-slide.js */
.rp-stats{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:26px;max-width:470px}
.rp-stat{padding:14px 16px}
.rp-stat .n{font-family:var(--font-mono);font-size:clamp(18px,2.1vw,26px);font-weight:700;line-height:1;letter-spacing:-.02em;color:#fff}
.rp-stat .l{font-size:12px;color:var(--d2);margin-top:6px}
@media(max-width:900px){.rpt-layout{grid-template-columns:1fr;gap:24px}.rpt-cover{max-width:280px}}
@media(max-height:800px) and (min-width:901px){
  .rpt-layout{margin-top:18px}
  .rp-stats{margin-top:18px;gap:9px}
  .rp-stat{padding:11px 14px}
  .rpt-cover{max-width:340px}
}

/* ---------- doc modal (shared: the overlay docmodal.js builds on first
   click). Same treatment as .pdf-modal on the other path pages; these
   class names are what docmodal.js stamps on the elements it creates. */
.doc-modal{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:28px}
.doc-modal.open{display:flex}
.doc-modal .bg{position:absolute;inset:0;background:rgba(5,14,30,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.doc-modal .box{position:relative;z-index:2;background:#fff;border-radius:18px;width:min(980px,96vw);height:min(88vh,940px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.doc-modal .mhead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px 14px 22px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.doc-modal .mhead .who{display:block;font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-deep)}
.doc-modal .mhead b{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.doc-modal .mactions{display:flex;align-items:center;gap:10px}
.doc-modal .doc-btn{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep);text-decoration:none}
.doc-modal .doc-btn:hover{text-decoration:underline}
.doc-modal .x{width:34px;height:34px;border-radius:50%;border:1px solid var(--border-strong);background:#fff;color:var(--ink);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.doc-modal .x:hover{border-color:var(--coral);color:var(--coral-deep)}
.doc-modal iframe{flex:1;width:100%;border:0;background:#525659}

/* ---------- shared-demo slides (partials/shared-demo.html) ---------- */
.cols2{display:grid;grid-template-columns:1fr .95fr;gap:56px;align-items:center}
/* ---- THE PROMPT slide · copy left (1fr) / launcher right (2fr) ----
   Clicking the launcher opens the REAL flex flow in a wide modal.
   The modal is deliberately 90vw / max 1200px / 86vh — VideoAsk only
   renders its side-by-side desktop layout (portrait film left, answer
   panel right) when the iframe's own width is >= ~1024px, and these are
   the exact dimensions impacter-home's own .va-modal uses, so the deck
   and the website show districts the identical thing. Do NOT shrink the
   modal below ~1024px of frame width or it silently drops to the
   compact stacked mobile layout. */
.fx-cols{
  display:grid;grid-template-columns:1fr 2fr;gap:44px;align-items:center;
  min-height:calc(100vh - 300px);
}
.fx-copy .lead{margin-bottom:0}

/* the launcher card — split preview (film + answer panel) */
.fx-launch{
  position:relative;display:flex;width:100%;height:min(48vh,560px);
  border:0;padding:0;border-radius:18px;overflow:hidden;cursor:pointer;
  background:#0A1D38;box-shadow:0 20px 50px rgba(10,26,50,.2);
}
.fx-film{
  flex:0 0 33.333%;height:100%;position:relative;
  background:#000;overflow:hidden;
}
.fx-film img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
.fx-launch:hover .fx-film img{transform:scale(1.03)}
.fx-film-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:999px;
  background:rgba(255,255,255,.28);color:#fff;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.35);
}
.fx-film-play svg{width:22px;height:22px;margin-left:2px}
.fx-ans{
  flex:1;min-width:0;background:#DCE4EA;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:26px 22px;text-align:center;gap:18px;
}
.fx-ans-q{font-size:clamp(15px,1.4vw,19px);font-weight:700;
  letter-spacing:-.01em;color:var(--ink)}
.fx-ans-opts{display:flex;gap:12px}
.fx-ans-opt{
  width:clamp(64px,6vw,80px);aspect-ratio:1;border-radius:10px;
  background:var(--blue);color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;
  transition:transform .16s var(--ease),background .16s;
}
.fx-launch:hover .fx-ans-opt{background:var(--blue-deep);
  transform:translateY(-2px)}
.fx-ans-opt svg{width:19px;height:19px}
.fx-ans-opt span{font-family:var(--font-mono);font-size:9px;
  font-weight:700;letter-spacing:.12em}
.fx-ans-note{font-size:11.5px;color:var(--t2)}

/* the wide modal — mirrors impacter-home's .va-modal */
/* Closed, this used to sit there as a full-viewport (1440x900) layer at
   z-index 9998 with a live backdrop-filter, on every slide, all presentation
   long — an invisible blur over the top of every video in the deck. It only
   needs to exist while it is open. */
.fx-modal{
  position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(4,10,22,.78);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s,visibility 0s linear .26s;
}
/* NOTHING that composites may sit over or around this iframe.
   The VideoAsk flow plays video inside it, and a browser will only hand a
   video the fast path (a hardware overlay it can show directly) if nothing
   above or around it has to blend with the pixels behind. This modal broke
   that three ways at once, all of them only while it was OPEN — i.e. exactly
   while someone is watching:
     · backdrop-filter on the overlay wrapping the iframe
     · a lingering transform on the box, which pins it to a composited layer
     · a backdrop-filter close button sitting directly ON TOP of the video
   That is why the same flow is smooth on its own link and grainy embedded.
   The scrim is now a plain darker colour: same look, no per-frame blend. */
.fx-modal.open{
  opacity:1;visibility:visible;pointer-events:all;
  background:rgba(4,10,22,.92);
  transition:opacity .26s;
}
.fx-modal-box{
  width:90vw;max-width:1200px;height:86vh;border-radius:18px;position:relative;
  background:#0A1D38;box-shadow:0 48px 120px rgba(4,10,22,.5);
  transform:translateY(16px);transition:transform .26s;
}
/* `none`, not translateY(0) — a zero transform still holds the layer open */
.fx-modal.open .fx-modal-box{transform:none}
/* radius on the iframe itself rather than overflow:hidden on its parent,
   so the video isn't clipped by an ancestor */
.fx-modal-box iframe{width:100%;height:100%;border:0;display:block;border-radius:18px}
.fx-modal-x{
  position:absolute;top:14px;right:14px;z-index:10;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(6,14,28,.88);
  color:rgba(219,227,244,.85);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s;
}
.fx-modal-x:hover{background:rgba(4,10,22,.8)}
.fx-modal-x svg{width:13px;height:13px}

@media(max-width:900px){
  .fx-cols{grid-template-columns:1fr;gap:26px;min-height:0}
  .fx-launch{flex-direction:column;height:auto}
  .fx-film{width:100%;height:auto;aspect-ratio:16/9}
  .fx-modal{padding:12px}
  .fx-modal-box{width:100%;height:92vh}
}

/* ---- flex player mock (the real answer flow, driven by prompt.js) ----
   Mirrors flex.impacterpathway.com: portrait film on the left, answer panel
   on the right. The mock's height drives the film's width (2:3 native, so
   width = height × .667) — the frame is never cropped, and the panel takes
   whatever width is left. AUDIO and TEXT are live: they switch panes the
   same way the product does. */
.flexmock{
  display:flex;margin:28px 0 0;width:100%;height:min(38vh,470px);
  background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(10,26,50,.2);
}
.flexmock .fm-media{flex:0 0 auto;height:100%;aspect-ratio:2/3;position:relative;background:#000}
.flexmock .fm-media video{width:100%;height:100%;object-fit:contain;display:block}
.flexmock .fm-panel{
  flex:1;min-width:0;background:#DCE4EA;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:26px 22px;text-align:center;
}
.flexmock .fm-x{
  position:absolute;top:12px;right:12px;width:26px;height:26px;border:0;border-radius:999px;
  background:rgba(29,27,28,.28);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .18s;
}
.flexmock .fm-x:hover{background:rgba(29,27,28,.45)}
.flexmock .fm-x svg{width:11px;height:11px}
/* panes — one visible at a time */
.flexmock .fm-pane{display:none;width:100%;flex-direction:column;align-items:center}
.flexmock .fm-pane.on{display:flex;animation:pop .3s var(--ease) both}
.flexmock .fm-q{font-size:clamp(15px,1.4vw,19px);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.flexmock .fm-opts{display:flex;gap:12px;margin-top:20px}
.flexmock .fm-opt{
  width:clamp(64px,6vw,80px);aspect-ratio:1;border:0;border-radius:10px;
  background:var(--blue);color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;
  transition:transform .16s var(--ease),background .16s;
}
.flexmock .fm-opt:hover{background:var(--blue-deep);transform:translateY(-2px)}
.flexmock .fm-opt svg{width:19px;height:19px}
.flexmock .fm-opt span{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.12em}
.flexmock .fm-note{margin-top:18px;font-size:11.5px;color:var(--t2)}
/* recording pane */
.flexmock .fm-live{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-deep)}
.flexmock .fm-live::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--coral-deep);animation:pulse 1.4s infinite}
.flexmock .fm-wave{display:flex;align-items:flex-end;gap:3px;height:38px;margin-top:16px}
.flexmock .fm-wave i{width:4px;border-radius:2px;background:var(--blue-deep);animation:wv2 1s ease-in-out infinite}
@keyframes wv2{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
.flexmock .fm-timer{margin-top:12px;font-family:var(--font-mono);font-size:19px;font-weight:700;color:var(--ink)}
.flexmock .fm-cap{margin-top:6px;font-size:11.5px;color:var(--t2);max-width:26ch}
.flexmock .fm-cap-wide{margin-top:26px;font-size:clamp(11px,1vw,13px);line-height:1.6;max-width:34ch}
/* "Firing up..." orb — black disc with a sweeping violet arc, as on
   impacterpathway.com/voice-prompts while the mic spins up */
.flexmock .fm-orb{
  position:relative;width:clamp(112px,15vh,180px);aspect-ratio:1;border-radius:999px;
  background:#0C0C0D;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(10,26,50,.28);
}
.flexmock .fm-orb span{font-size:clamp(13px,1.3vw,17px);font-weight:500;letter-spacing:-.01em}
.flexmock .fm-orb::after{
  content:"";position:absolute;inset:-5px;border-radius:999px;
  border:3px solid transparent;border-right-color:#7C4DFF;border-top-color:#7C4DFF;
  animation:orbspin 1.1s linear infinite;
}
@keyframes orbspin{to{transform:rotate(360deg)}}
/* text pane */
.flexmock .fm-pane[data-pane="text"]{position:absolute;inset:0;padding:30px 30px 24px}
.flexmock .fm-pane[data-pane="text"].on{display:flex;align-items:stretch}
.flexmock textarea{
  flex:1;width:100%;resize:none;border:0;background:none;color:var(--ink);
  font-family:var(--font-display);font-size:clamp(16px,1.7vw,22px);line-height:1.4;padding:0;
}
.flexmock textarea::placeholder{color:rgba(29,27,28,.38)}
.flexmock textarea:focus{outline:none}
.flexmock .fm-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.flexmock .fm-circle{
  width:clamp(38px,4.4vh,50px);aspect-ratio:1;border:0;border-radius:999px;
  display:flex;align-items:center;justify-content:center;transition:opacity .18s,transform .16s,background .18s;
}
.flexmock .fm-circle svg{width:45%;height:45%}
.flexmock .fm-go{background:#EDF1F4;color:#5B6B7C}
.flexmock .fm-go:not(:disabled){background:#fff;color:var(--ink)}
.flexmock .fm-go:not(:disabled):hover{transform:translateY(-1px)}
.flexmock .fm-go:disabled{opacity:.55;cursor:default}
.flexmock .fm-cancel{background:#8C99A5;color:#fff}
.flexmock .fm-cancel:hover{background:#75818C}
/* shared buttons */
.flexmock .fm-btn{
  margin-top:14px;border:0;border-radius:999px;background:var(--navy);color:#fff;
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:10px 20px;transition:opacity .18s,transform .16s;
}
.flexmock .fm-btn:hover{transform:translateY(-1px)}
.flexmock .fm-btn:disabled{opacity:.4;cursor:default;transform:none}
.flexmock .fm-back{
  margin-top:12px;border:0;background:none;color:var(--t2);font-family:var(--font-mono);
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.flexmock .fm-back:hover{color:var(--ink)}
/* sent pane */
.flexmock .fm-check{
  width:38px;height:38px;border-radius:999px;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.flexmock .fm-check svg{width:17px;height:17px}
.flexmock .fm-sent{margin-top:12px;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
@media (max-width:980px){
  .cols2{grid-template-columns:1fr;gap:30px}
  .flexmock{height:auto;aspect-ratio:auto;flex-direction:column;max-width:340px;margin:26px auto 0}
  .flexmock .fm-media{width:100%;height:auto;aspect-ratio:2/3}
  .flexmock .fm-panel{padding:22px 18px 26px}
}
@media (prefers-reduced-motion:reduce){
  .flexmock .fm-wave i,.flexmock .fm-live::before,.flexmock .fm-orb::after{animation:none}
}

/* ---------- the Impacter-8 anchor wheel (anchor-wheel.js) ----------
   Wheel left, one rubric card right — the same layout and card grammar as
   the four-pillar wheel (/community-schools) and the six-domain wheel
   (/behavioral-health), so every "what we score" slide reads as one family.
   Shared here because two path pages use it: /career-pathways and
   /college-readiness. */
.aw-grid{display:grid;grid-template-columns:minmax(250px,.86fr) 1.14fr;gap:44px;align-items:center;margin-top:20px}
.aw-wrap{position:relative;width:100%;max-width:430px;margin:0 auto}
svg.aw{--veil:var(--paper);--veil-op:.62;width:100%;display:block;overflow:visible}
.slide.dark svg.aw{--veil:#0B1B33;--veil-op:.7}
.aw-veil{fill:var(--veil);opacity:0;transition:opacity .28s var(--ease);pointer-events:none}
.aw-veil.on{opacity:var(--veil-op)}
.aw-slice{cursor:pointer;transition:transform .3s var(--ease),filter .3s var(--ease)}
.aw-slice:hover{transform:translate(calc(var(--tx)*5px),calc(var(--ty)*5px))}
.aw-slice:focus{outline:none}
.aw-slice:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:4px}
.aw-slice.on{
  transform:translate(calc(var(--tx)*8px),calc(var(--ty)*8px));
  filter:brightness(1.14) drop-shadow(0 7px 16px rgba(10,26,50,.24));
}
.aw-hint{
  margin-top:12px;text-align:center;font-family:var(--font-mono);font-size:9.5px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--t3);
}
.slide.dark .aw-hint{color:var(--d3)}
/* the card */
.aw-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px 24px 22px}
.slide.dark .aw-card{background:rgba(255,255,255,.05);border-color:var(--d-border)}
.aw-kicker{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--coral-deep)}
.slide.dark .aw-kicker{color:var(--blue-lt)}
.aw-kicker i{width:9px;height:9px;border-radius:50%;background:var(--coral);flex:none}
.aw-name{font-size:clamp(21px,2.2vw,29px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:6px}
.slide.dark .aw-name{color:#fff}
.aw-def{font-size:12.5px;line-height:1.55;color:var(--t3);margin-top:5px;max-width:56ch}
.slide.dark .aw-def{color:var(--d3)}
.aw-levels{display:flex;gap:5px;flex-wrap:wrap;margin-top:14px}
.aw-lv{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;border:1px solid var(--border-strong);background:transparent;color:inherit;border-radius:10px;padding:5px 10px;transition:all .18s var(--ease)}
.slide.dark .aw-lv{border-color:var(--d-border);color:var(--d2)}
.aw-lv-key{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;opacity:.55}
.aw-lv-lbl{font-size:12px;font-weight:700;letter-spacing:-.015em;white-space:nowrap}
.aw-lv:hover{border-color:var(--blue)}
.aw-lv.on{background:var(--navy);border-color:var(--navy);color:#fff}
.aw-lv.on .aw-lv-key{opacity:.7}
.slide.dark .aw-lv.on{background:var(--coral);border-color:var(--coral);color:#fff}
.aw-body{margin-top:14px;border-top:1px dashed var(--border-strong);padding-top:12px}
.slide.dark .aw-body{border-color:var(--d-border)}
.aw-anchor{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);display:block;margin-bottom:7px}
.aw-text{font-size:13.5px;line-height:1.62;color:var(--t2);max-width:60ch}
.slide.dark .aw-text{color:var(--d1)}
.aw-text.swap{animation:awin .34s var(--ease) both}
@keyframes awin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.aw-note{margin-top:11px;font-size:11px;line-height:1.5;color:var(--t3);max-width:74ch}
.slide.dark .aw-note{color:var(--d3)}
.aw-note + .footnote{margin-top:9px}
/* a written anchor list that drives the wheel marks itself while it does */
[data-aw-group]{transition:opacity .2s var(--ease)}
[data-aw-group].aw-lit b{color:var(--coral-deep)}
@media (max-height:1100px) and (min-width:1041px){
  .aw-grid{margin-top:14px;gap:36px}
  .aw-wrap{max-width:min(430px,40vh)}
  .aw-card{padding:16px 20px 18px}
  .aw-name{font-size:clamp(19px,1.9vw,25px)}
  .aw-def{font-size:12px;max-width:74ch}
  .aw-levels{margin-top:12px}
  .aw-lv{padding:4px 9px}
  .aw-body{margin-top:12px;padding-top:11px}
  .aw-text{font-size:12.8px;line-height:1.58;max-width:72ch}
  .aw-note{font-size:10px;margin-top:9px}
}
/* 720p projectors: one more notch down */
@media (max-height:780px) and (min-width:1041px){
  .aw-grid{gap:32px;margin-top:10px}
  .aw-text{font-size:12.4px}
  .aw-name{font-size:clamp(18px,1.8vw,23px)}
  .aw-body{margin-top:11px;padding-top:10px}
  .aw-card{padding:15px 18px 17px}
  .aw-note{font-size:9.5px;margin-top:8px;line-height:1.45}
  .aw-hint{margin-top:9px}
}
@media (max-width:1040px){
  .aw-grid{grid-template-columns:1fr;gap:24px}
  .aw-wrap{max-width:280px}
}
@media (max-width:760px){
  .aw-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
  .aw-lv{align-items:center}
}
@media (prefers-reduced-motion:reduce){
  .aw-slice,.aw-veil{transition:none}
  .aw-slice:hover,.aw-slice.on{transform:none}
  .aw-text.swap{animation:none}
}

/* ---------- back-to-selector pill (path pages) ---------- */
.backlink{
  position:fixed;top:24px;right:28px;z-index:40;
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--d2);
  border:1px solid var(--d-border);border-radius:999px;padding:8px 14px;
  background:rgba(10,26,50,.5);backdrop-filter:blur(6px);
}
.backlink:hover{color:#fff}

/* ---------- responsive ---------- */
@media (max-width:640px){
  #dots{display:none}
  #chrome{padding:0 18px 18px}
}
@media (max-width:980px){
  .slide-inner{padding:76px 30px 150px}
  .slide{overflow-y:auto;display:block}
  .slide-inner{min-height:100%}
  html,body{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
  .rev,.slide{transition:none!important}
}

/* ═══════════════════════ PDF MODAL ═══════════════════════
   Ported from impacter-home (assets/css/styles.css .pdfm* + assets/js/site.js
   _initPdfModal). Opt-in and shared: any element in the deck carrying
   data-pdf="/assets/docs/x.pdf" opens that document over the slide instead of
   navigating away — which is the whole point during a live walkthrough.
   Native <dialog>, so Escape, focus containment and inert background are the
   browser's job. Costs nothing on a page with no [data-pdf]: the dialog is
   only built on first use. */
.pdfm{width:min(1100px,100%);height:min(88vh,100%);max-width:100%;max-height:100%;
  margin:auto;padding:0;border:0;border-radius:18px;overflow:hidden;background:var(--navy);
  box-shadow:0 40px 90px rgba(10,26,50,.45)}
.pdfm::backdrop{background:rgba(10,26,50,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pdfm[open]{display:flex;flex-direction:column}
.pdfm-head{display:flex;align-items:center;gap:16px;padding:14px 16px 14px 22px;
  border-bottom:1px solid rgba(219,232,255,.14);flex:none}
.pdfm-title{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--d2);margin-right:auto;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pdfm-open{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--d1);
  text-decoration:none;border:1px solid rgba(219,232,255,.32);border-radius:999px;
  padding:8px 16px;white-space:nowrap;transition:border-color .16s,color .16s}
.pdfm-open:hover{color:#fff;border-color:rgba(219,232,255,.6)}
.pdfm-close{width:34px;height:34px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(219,232,255,.24);border-radius:50%;background:transparent;
  color:var(--d1);font-size:20px;line-height:1;transition:background .16s,color .16s}
.pdfm-close:hover{background:rgba(219,232,255,.12);color:#fff}
.pdfm-body{position:relative;flex:1;min-height:0;background:var(--navy-deep)}
.pdfm-frame{position:relative;z-index:1;width:100%;height:100%;border:0;display:block}
/* sits behind the frame — all that shows if the browser won't inline PDFs (iOS) */
.pdfm-fallback{position:absolute;inset:0;display:grid;place-content:center;gap:14px;
  justify-items:center;text-align:center;padding:32px;color:var(--d2);font-size:14.5px}
@media(max-width:640px){
  .pdfm{height:100%;border-radius:0}
  .pdfm-head{padding:12px 12px 12px 16px;gap:10px}
  .pdfm-title{display:none}
}