/* ============================================================================
   VindicaOS landing / precision-instrument brand surface.
   Extends the css/cato.css token language (indigo #2f5bea + Pretendard) so the
   app revamp inherits the same system. Self-contained; theme-aware; responsive.
   ============================================================================ */
:root {
  /* CollegeBoard-institutional: bright white and light grey, Yale navy blocks,
     one clean sans (Public Sans). Flat: thin rules and solid fills, no glows. */
  --brand:      #00356B;         /* Yale navy */
  --brand-2:    #012a54;         /* darker navy, hover */
  --brand-ink:  #0a1f3a;         /* deep navy, footer / dark bands */
  --brand-soft: #eaf0f7;         /* pale navy tint, chips and icon badges */
  --accent:     #00356B;
  --gold:       #b8860b;         /* gold, small accents and top-rules */

  --bg:        #ffffff;          /* white */
  --bg-2:      #f3f5f9;          /* light cool-grey band */
  --surface:   #ffffff;          /* card white */
  --ink:       #1a2434;          /* near-black charcoal */
  --ink-2:     #45505f;
  --muted:     #6b7482;
  --line:      #dde2ea;          /* light grey hairline */
  --line-2:    #cbd2dd;

  --radius:    8px;
  --radius-sm: 5px;
  --radius-lg: 10px;
  --shadow-sm: none;
  --shadow:    none;
  --shadow-lg: 0 1px 3px rgba(26,36,52,.10);

  --sans: "Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display: "Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --hl:   #f2c94c;               /* gold highlighter, flat marker */
  --warm: #f3f5f9;

  --ease: cubic-bezier(.22,.61,.36,1);
}
/* institutional = bright; the theme toggle is a no-op, page stays light */
:root[data-theme="dark"], :root:not([data-theme="light"]).theme-dark { --bg:#ffffff; }

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  font-family: var(--sans); background: var(--bg); color: var(--ink);
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: 24px; }

/* ── Type: Public Sans throughout, institutional weights ───────────────── */
h1,h2,h3 { line-height: 1.15; text-wrap: balance; color: var(--ink); }
h1,h2,.display,.h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; }
.display { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.1; }
.hl { font-style: normal; padding: 0 .08em;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--hl) 92%, transparent) 62%); }
.h2 { font-size: clamp(1.55rem, 2.9vw, 2.2rem); line-height: 1.14; }
.h3 { font-family: var(--sans); font-size: 1.06rem; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.lead { font-size: clamp(1rem,1.3vw,1.16rem); color: var(--ink-2); line-height: 1.6; max-width: 62ch; text-wrap: pretty; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:650; font-size:.95rem;
  padding:12px 20px; border-radius:6px; border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition: transform .12s var(--ease), box-shadow .18s var(--ease), background .15s, border-color .15s, color .15s; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color:#fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--brand-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn--onink { background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.24); backdrop-filter: blur(4px); }
.btn--onink:hover { background: rgba(255,255,255,.2); }
.btn--lg { padding:15px 26px; font-size:1.02rem; }

/* ── Nav ───────────────────────────────────────────────────────────────── */
.nav { position: sticky; top:0; z-index: 50; background: var(--bg);
  border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__in { display:flex; align-items:center; justify-content:space-between; height: 66px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:1.16rem; letter-spacing:-.03em; }
.brand__mark { width:26px; height:26px; border-radius:7px; background: var(--brand-ink);
  display:grid; place-items:center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.brand__mark svg { width:16px; height:16px; }
.nav__links { display:flex; align-items:center; gap:26px; }
.nav__links a { color: var(--ink-2); font-weight:550; font-size:.94rem; transition: color .15s; }
.nav__links a:hover { color: var(--ink); }
.nav__cta { display:flex; align-items:center; gap:12px; }
@media (max-width: 880px){ .nav__links{ display:none; } }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(56px,9vw,104px) 0 clamp(40px,6vw,68px); overflow: clip; }
.hero__grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px,5vw,64px); align-items:center; }
@media (max-width: 940px){ .hero__grid{ grid-template-columns: 1fr; } }
.hero__badge { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; border:1px solid var(--line-2);
  border-radius:999px; font-size:.82rem; color: var(--ink-2); background: var(--surface); box-shadow: var(--shadow-sm); }
.hero__badge b { color: var(--ink); font-weight:700; }
.dot { width:7px; height:7px; border-radius:50%; background: var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.hero h1 { margin: 22px 0 20px; }
.hero .lead { margin-bottom: 30px; }
.hero__cta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hero__note { margin-top:16px; font-size:.86rem; color: var(--muted); display:flex; align-items:center; gap:7px; }

/* institutional hero: solid navy band, clean sans, squared buttons */
.hero { background: var(--brand); color:#eef2f8; padding: clamp(52px,8vw,92px) 0; border-bottom: 3px solid var(--gold); overflow: visible; }
.hero__in { max-width: 1160px; }
.hero__kicker { font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#d6b968; margin:0 0 18px; }
.hero__h1 { font-family: var(--display); font-weight:800; font-size: clamp(2.4rem,5.2vw,4.2rem); line-height:1.06; letter-spacing:-.02em; color:#fff; margin:0 0 20px; max-width:26ch; }
.hero__lede { font-size: clamp(1.04rem,1.35vw,1.2rem); line-height:1.6; color:#c4cede; max-width:60ch; margin:0 0 28px; }
.hero__actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn2 { display:inline-flex; align-items:center; justify-content:center; font:inherit; font-weight:700; font-size:1rem; padding:13px 26px; border-radius:5px; text-decoration:none; transition: background .15s, border-color .15s; }
.btn2--gold { background:#e8b23a; color:#1c1403; }
.btn2--gold:hover { background:#f0bd4c; }
.btn2--line { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45); }
.btn2--line:hover { border-color:#fff; background:rgba(255,255,255,.08); }
.hero__meta { display:inline-block; margin:28px 0 0; padding:13px 22px;
  border:1px solid rgba(255,255,255,.22); border-radius:8px; background:rgba(255,255,255,.05);
  font-size:1.04rem; font-weight:500; color:#e7edf6; letter-spacing:.005em; }
.hero__meta b { color:#f0c84a; font-weight:800; }
.hero__meta i { font-style:normal; color:rgba(255,255,255,.32); margin:0 10px; }

/* live demo: diagnosis line that resolves under the bars */
.dash__diag { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:15px; padding-top:14px;
  border-top:1px dashed var(--line-2); font-size:.83rem; color: var(--muted); }
.dash__diag .lbl { font-weight:600; }
.dash__focus { font-weight:800; color: var(--ink); font-size:.92rem; opacity:0; transform: translateY(4px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.dash__focus.in { opacity:1; transform:none; }
.dash__focus .hl { padding:0 .2em; }
.mock.is-cycling { transition: opacity .4s var(--ease); }

/* ── Product mock (shared chrome) ──────────────────────────────────────── */
.mock { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow:hidden; }
.mock__bar { display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line); background: var(--bg-2); }
.mock__dots { display:flex; gap:6px; }
.mock__dots i { width:10px; height:10px; border-radius:50%; background: var(--line-2); }
.mock__tab { margin-left:8px; font-size:.76rem; color: var(--muted); font-weight:600; }
.mock__body { padding:18px; }
.mockrow { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.chip { font-size:.7rem; font-weight:700; padding:3px 9px; border-radius:999px; background: var(--brand-soft); color: var(--brand-2); }
:root[data-theme="dark"] .chip{ color: var(--brand-2); }
.chip--good { background: color-mix(in srgb, var(--accent) 16%, transparent); color: color-mix(in srgb, var(--accent) 72%, var(--ink)); }

/* dashboard mock specifics */
.dash__score { display:flex; align-items:baseline; gap:10px; margin:12px 0 4px; }
.dash__score b { font-size:2.4rem; font-weight:820; letter-spacing:-.03em; }
.dash__score span { font-family:var(--mono); font-size:.86rem; color: var(--accent); font-weight:700; }
.spark { width:100%; height:64px; margin:6px 0 14px; }
.spark path.line { fill:none; stroke: var(--brand); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray: 620; stroke-dashoffset: 620; animation: draw 1.6s .3s var(--ease) forwards; }
.spark circle { fill: var(--brand); }
.spark path.area { fill: color-mix(in srgb, var(--brand) 8%, transparent); }
@keyframes draw { to { stroke-dashoffset:0; } }
.bars { display:grid; gap:9px; margin-top:6px; }
.bar { display:grid; grid-template-columns: 92px 1fr 34px; align-items:center; gap:10px; font-size:.78rem; color: var(--ink-2); }
.bar__track { display:block; height:8px; border-radius:999px; background: var(--bg-2); overflow:hidden; }
.bar__fill { display:block; height:100%; border-radius:999px; background: var(--brand); transform-origin:left; transform: scaleX(var(--v,.6)); }
.bar b { font-family:var(--mono); text-align:right; color: var(--ink); font-weight:700; }

/* ── Section scaffolding ───────────────────────────────────────────────── */
section { position: relative; }
.band { background: var(--bg-2); border-block:1px solid var(--line); }
.pad { padding: clamp(56px,8vw,104px) 0; }
.sechead { max-width: none; }
.sechead .h2 { margin:.3rem 0 .8rem; }
/* Section intro fills the full content width: heading left, lede right, both
   flush to the top so the heading never floats low with a gap above it.
   Heading-only intros stay a simple left block. */
.sechead:has(.lead) { display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(28px,5vw,64px); align-items:start; }
.sechead:has(.lead) .lead { padding-top:6px; }
.sechead:has(.lead) .h2 { margin:0; }
.sechead:has(.lead) .lead { max-width:none; margin:0; }
@media (max-width: 800px){ .sechead:has(.lead){ grid-template-columns:1fr; gap:12px; align-items:start; } }
.reveal { opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } .spark path.line{ animation:none; stroke-dashoffset:0; } }

/* ── Trust strip ───────────────────────────────────────────────────────── */
.trust { padding: 26px 0 8px; }
.trust__label { text-align:center; font-size:.82rem; color: var(--muted); margin-bottom:16px; }
.trust__row { display:flex; flex-wrap:wrap; gap: clamp(20px,4vw,52px); align-items:center; justify-content:center; opacity:.72; }
.trust__row b { font-size:1.06rem; font-weight:800; letter-spacing:-.02em; color: var(--ink-2); }
.trust__row b small { font-weight:600; color: var(--muted); font-size:.7rem; margin-left:5px; }

/* ── Before / After ────────────────────────────────────────────────────── */
.ba { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
@media (max-width: 820px){ .ba{ grid-template-columns:1fr; } }
.ba__col { border:1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--surface); }
.ba__col--now { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: var(--shadow); }
.ba__tag { font-family:var(--mono); font-size:.74rem; font-weight:700; color: var(--muted); }
.ba__col--now .ba__tag { color: var(--brand); }
.ba__list { list-style:none; margin-top:16px; display:grid; gap:12px; }
.ba__list li { display:flex; gap:11px; align-items:flex-start; font-size:.96rem; color: var(--ink-2); }
.ba__ic { flex:none; width:20px; height:20px; margin-top:1px; }
.ba__ic--x { color: var(--muted); }
.ba__ic--v { color: var(--accent); }

/* ── Features ──────────────────────────────────────────────────────────── */
.feat { display:grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 40px; }
.fcard { grid-column: span 2; border:1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: 26px 26px 24px; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.fcard:hover { border-color: var(--line-2); }
.fcard--wide { grid-column: span 3; }
.fcard--tall { grid-column: span 3; }
@media (max-width: 900px){ .feat{ grid-template-columns:1fr; } .fcard,.fcard--wide,.fcard--tall{ grid-column: auto; } }
.fic { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; margin-bottom:16px;
  background: var(--brand); color:#fff; }
:root[data-theme="dark"] .fic{ color: var(--brand-2); }
.fic svg { width:22px; height:22px; }
.fcard h3 { margin-bottom:8px; }
.fcard p { color: var(--ink-2); font-size:.95rem; line-height:1.55; }
.fcard .mini { margin-top:16px; }

/* mini classroom grid mock */
.room { display:grid; grid-template-columns: repeat(6,1fr); gap:6px; }
.room i { aspect-ratio:1; border-radius:6px; background: var(--bg-2); border:1px solid var(--line); }
.room i.on { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); border-color: color-mix(in srgb,var(--accent) 40%, var(--line)); }
.room i.spot { background: var(--brand); border-color: var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.room i.off { background: color-mix(in srgb, var(--gold) 20%, var(--surface)); border-color: color-mix(in srgb,var(--gold) 40%, var(--line)); }

/* Live answer-split: the class's real A/B/C/D distribution on one question */
.asplit__hd { display:flex; justify-content:space-between; font-size:.76rem; font-weight:600; color:var(--muted); margin-bottom:12px; }
.ab { display:grid; grid-template-columns:16px 1fr 20px; align-items:center; gap:10px; margin-bottom:8px; font-size:.8rem; }
.ab__k { font-family:var(--mono); font-weight:700; color:var(--ink-2); }
.ab__t { height:10px; border-radius:999px; background:var(--bg-2); overflow:hidden; }
.ab__f { display:block; height:100%; border-radius:999px; background:var(--line-2); transform-origin:left; transform:scaleX(var(--v,0)); }
.ab b { font-family:var(--mono); text-align:right; color:var(--ink-2); font-weight:700; }
.ab--ok .ab__f { background:var(--brand); }
.ab--ok .ab__k, .ab--ok b { color:var(--brand); }
.ab--trap .ab__f { background:var(--gold); }
.asplit__ft { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:.74rem; color:var(--ink-2); }
.asplit__ft i { width:9px; height:9px; border-radius:2px; flex:none; }
.asplit__ft .k-ok { background:var(--brand); } .asplit__ft .k-trap { background:var(--gold); }
.asplit__ft span { color:var(--line-2); }

/* report snippet mock */
.rep { font-size:.86rem; color: var(--ink-2); line-height:1.6; }
.rep mark { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand-2); padding:0 3px; border-radius:4px; font-weight:700; }
:root[data-theme="dark"] .rep mark{ color: var(--brand-2); }

/* ── Depth ledger (substance over marketing) ───────────────────────────── */
.depth { margin-top: 42px; border-top:1px solid var(--line); }
.drow { display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(20px,4vw,56px);
  padding: clamp(24px,3.4vw,40px) 0; border-bottom:1px solid var(--line); align-items:start; }
@media (max-width: 820px){ .drow{ grid-template-columns:1fr; gap:14px; padding:26px 0; } }
.drow__h { font-size: clamp(1.3rem,2.1vw,1.7rem); font-weight:800; letter-spacing:-.025em; line-height:1.12; }
.drow__lead { color: var(--ink-2); margin-top:11px; font-size:1rem; line-height:1.55; max-width:44ch; text-wrap:pretty; }
.drow__specs { display:flex; flex-wrap:wrap; gap:9px; align-content:flex-start; padding-top:4px; }
.spec { display:inline-flex; align-items:center; gap:7px; font-size:.87rem; font-weight:600; color: var(--ink-2);
  padding:8px 13px; border:1px solid var(--line); border-radius:10px; background: var(--surface); }
.spec svg { width:15px; height:15px; color: var(--accent); flex:none; }

/* ── The loop ──────────────────────────────────────────────────────────── */
.loop { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:38px; position:relative; }
@media (max-width: 820px){ .loop{ grid-template-columns:1fr; } }
.lnode { border:1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding:26px; position:relative; }
.lnode__n { font-family:var(--mono); font-size:.78rem; font-weight:700; color: var(--brand); }
.lnode h3 { margin:10px 0 8px; }
.lnode p { color: var(--ink-2); font-size:.92rem; line-height:1.55; }
.lnode__ar { position:absolute; right:-26px; top:50%; transform:translateY(-50%); color: var(--line-2); z-index:2; }
@media (max-width: 820px){ .lnode__ar{ right:50%; top:auto; bottom:-26px; transform:translateX(50%) rotate(90deg); } }
.lnode:last-child .lnode__ar { display:none; }

/* ── White-label ───────────────────────────────────────────────────────── */
.wl__grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,56px); align-items:center; }
@media (max-width: 900px){ .wl__grid{ grid-template-columns:1fr; } }
.themes { display:flex; gap:14px; flex-wrap:wrap; }
.tcard { flex:1 1 150px; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); background:var(--surface); }
.tcard__top { height:44px; display:flex; align-items:center; gap:8px; padding:0 14px; color:#fff; font-weight:800; letter-spacing:-.02em; font-size:.92rem; }
.tcard__body { padding:14px; display:grid; gap:8px; }
.tline { height:8px; border-radius:999px; background: var(--bg-2); }
.tline.s { width:60%; }
.tbtn { height:26px; border-radius:7px; margin-top:4px; }

/* ── Stats ─────────────────────────────────────────────────────────────── */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
@media (max-width: 780px){ .stats{ grid-template-columns: repeat(2,1fr); } }
.stat b { display:block; font-size: clamp(2rem,4vw,2.9rem); font-weight:820; letter-spacing:-.03em; line-height:1; }
.stat span { display:block; margin-top:10px; color: var(--ink-2); font-size:.92rem; max-width: 22ch; }
.stat b em { font-style:normal; color: var(--brand); }

/* ── Testimonials ──────────────────────────────────────────────────────── */
.tst { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:38px; }
.tst__feat { grid-column: 1 / -1; }
@media (max-width: 820px){ .tst{ grid-template-columns:1fr; } }
.tq { display:flex; flex-direction:column; gap:16px; border:1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding:26px; }
.tq__theme { align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:-.005em; padding:4px 11px;
  border-radius:999px; background: var(--brand-soft); color: var(--brand-2); }
:root[data-theme="dark"] .tq__theme{ color: var(--brand-2); }
.tq p { color: var(--ink-2); font-size:.97rem; line-height:1.55; letter-spacing:-.005em; }
.tq__by { display:flex; align-items:center; gap:11px; margin-top:auto; }
.tq__ava { flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:.8rem; letter-spacing:.02em; background: var(--brand-soft); color: var(--brand-2); }
.tq__who b { display:block; font-size:.92rem; color: var(--ink); font-weight:700; }
.tq__who > span { display:block; font-size:.82rem; color: var(--muted); }
/* featured: indigo authority surface, breaks the card grid */
.tq--feat { background: var(--brand-ink); border-color: transparent; padding: clamp(28px,4vw,40px); box-shadow: var(--shadow); }
.tq--feat .tq__theme { background: rgba(255,255,255,.14); color:#fff; }
.tq--feat p { color:#fff; font-size: clamp(1.16rem,2vw,1.5rem); font-weight:700; letter-spacing:-.02em; line-height:1.4; text-wrap:balance; }
.tq--feat .tq__ava { background: rgba(255,255,255,.16); color:#fff; }
.tq--feat .tq__who b { color:#fff; }
.tq--feat .tq__who > span { color: rgba(255,255,255,.72); }

/* ── Product gallery (real screenshots) ────────────────────────────────── */
.gallery { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px; }
.gallery .shot--feat { grid-column:1 / -1; }
@media (max-width: 820px){ .gallery{ grid-template-columns:1fr; } }
.shot { border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; background: var(--surface); box-shadow: var(--shadow); }
.shot__bar { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line); background: var(--bg-2); }
.shot__dots { display:flex; gap:6px; }
.shot__dots i { width:10px; height:10px; border-radius:50%; background: var(--line-2); }
.shot__tab { margin-left:6px; font-size:.76rem; color: var(--muted); font-weight:600; }
.shot img { width:100%; height:auto; display:block; }
.shot__cap { padding:14px 16px; font-size:.9rem; color: var(--ink-2); line-height:1.5; border-top:1px solid var(--line); }
.shot__cap b { color: var(--ink); font-weight:700; }

/* ── FORGE cross-sell ──────────────────────────────────────────────────── */
.xsell { text-align:center; padding: 30px 0 6px; }
.xsell p { color: var(--muted); font-size:.95rem; }
.xsell a { color: var(--brand); font-weight:650; }
.xsell a:hover { text-decoration: underline; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
#faq .sechead { text-align:center; }
.faqx { max-width:760px; margin:34px auto 0; display:grid; gap:12px; }
.qax { border:1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding:20px 24px; }
.qax b { display:block; font-size:1.02rem; font-weight:700; margin-bottom:6px; }
.qax p { color: var(--ink-2); font-size:.95rem; line-height:1.55; }

/* ── Interactive: live classroom demo ──────────────────────────────────── */
.stage { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow:hidden; margin-top:34px; }
.stage__bar { display:flex; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid var(--line); background: var(--bg-2); font-size:.82rem; color: var(--muted); font-weight:600; }
.stage__live { display:inline-flex; align-items:center; gap:6px; color: var(--gold); font-weight:700; }
.stage__live i { width:7px; height:7px; border-radius:50%; background: var(--gold); animation: lpulse 1.2s ease-in-out infinite; }
@keyframes lpulse { 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
.stage__body { display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(20px,3vw,36px); padding: clamp(20px,3vw,30px); }
@media (max-width: 780px){ .stage__body { grid-template-columns:1fr; } }
.stage__q { font-size:.78rem; color: var(--muted); font-weight:600; margin-bottom:6px; }
.stage__prompt { font-size:1.02rem; font-weight:600; color: var(--ink); line-height:1.4; margin-bottom:16px; }
.rm { display:grid; grid-template-columns: repeat(4,1fr); gap:9px; }
.tile { position:relative; aspect-ratio: 5/4; border-radius:11px; border:1px solid var(--line); background: var(--bg-2);
  display:grid; place-items:center; font-weight:800; font-size:.82rem; color: var(--muted); transition: all .35s var(--ease); }
.tile small { position:absolute; bottom:6px; left:0; right:0; text-align:center; font-size:.6rem; font-weight:600; opacity:.7; }
.tile.answered { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 32%, var(--line)); color: var(--brand); }
.tile.correct { background: color-mix(in srgb, var(--gold) 18%, var(--surface)); border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); color: color-mix(in srgb, var(--gold) 72%, var(--ink)); }
.tile.spot { box-shadow: 0 0 0 3px var(--brand-soft); border-color: var(--brand); transform: translateY(-2px); z-index:1; }
.tile__c { position:absolute; top:5px; right:6px; font-size:.62rem; font-weight:800; font-family:var(--mono); }
.stage__side { display:flex; flex-direction:column; gap:14px; }
.stat-line { display:flex; align-items:baseline; justify-content:space-between; }
.stat-line b { font-family:var(--mono); font-size:1.5rem; font-weight:800; color: var(--ink); }
.stat-line span { font-size:.82rem; color: var(--muted); }
.spotcard { border:1px solid var(--line); border-radius: var(--radius); padding:14px 16px; background: var(--bg-2); font-size:.88rem; color: var(--ink-2); opacity:0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.spotcard.in { opacity:1; transform:none; }
.spotcard b { color: var(--ink); }
.stagebtn { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:650; font-size:.92rem;
  padding:11px 20px; border-radius:11px; border:0; background: var(--brand); color:#fff; cursor:pointer; box-shadow: var(--shadow-sm); transition: background .15s, transform .12s; }
.stagebtn:hover { background: var(--brand-2); transform: translateY(-1px); }
.stagebtn:disabled { opacity:.55; cursor:default; transform:none; }
.stage__hint { font-size:.78rem; color: var(--muted); }

/* ── Privacy / safe-for-schools ────────────────────────────────────────── */
.priv { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:36px; }
@media (max-width: 820px){ .priv{ grid-template-columns:1fr; } }
.pcard { border:1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding:24px; }
.pcard .fic { width:46px; height:46px; border-radius:50%; margin-bottom:14px; }
.pcard h3 { margin-bottom:7px; }
.pcard p { color: var(--ink-2); font-size:.93rem; line-height:1.55; }
.priv__note { margin-top:26px; font-size:.92rem; color: var(--ink-2); text-wrap:pretty; }
.priv__note a { color: var(--brand); font-weight:600; }
.priv__note a:hover { text-decoration: underline; }
.foot__legal { display:flex; gap:18px; flex-wrap:wrap; }
.foot__legal a { color: var(--muted); font-size:.84rem; }
.foot__legal a:hover { color: var(--ink); }

/* ── CTA ───────────────────────────────────────────────────────────────── */
.cta { background: var(--brand-ink); color:#fff; border-radius: clamp(18px,3vw,28px); padding: clamp(40px,6vw,68px);
  text-align:center; position:relative; overflow:hidden; box-shadow: var(--shadow-lg); }
.cta > * { position:relative; }
.cta h2 { color:#fff; }
.cta p { color: rgba(255,255,255,.78); max-width: 52ch; margin: 14px auto 26px; font-size:1.08rem; }
.cta__row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.foot { padding: 54px 0 40px; border-top:1px solid var(--line); color: var(--muted); }
.foot__grid { display:grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 30px; }
@media (max-width: 760px){ .foot__grid{ grid-template-columns: 1fr 1fr; } }
.foot h4 { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-2); margin-bottom:12px; font-weight:700; }
.foot a { display:block; color: var(--muted); font-size:.9rem; padding:4px 0; transition:color .15s; }
.foot a:hover { color: var(--ink); }
.foot__base { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:40px; padding-top:22px; border-top:1px solid var(--line); font-size:.84rem; flex-wrap:wrap; }
.themetoggle { background:transparent; border:1px solid var(--line-2); color:var(--muted); border-radius:8px; padding:7px 12px; font:inherit; font-size:.82rem; cursor:pointer; display:inline-flex; gap:7px; align-items:center; }
.themetoggle:hover { color: var(--ink); border-color: var(--brand); }

/* ── Interior page header band (shared across split pages) ──────────────── */
.pagehead { background: var(--brand); color:#eef2f8; padding: clamp(44px,6vw,72px) 0; border-bottom:3px solid var(--gold); }
.pagehead__in { max-width: 1160px; }
.pagehead h1 { max-width: 20ch; text-wrap: pretty; }
.pagehead .kicker { font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#d6b968; margin:0 0 14px; }
.pagehead h1 { font-family: var(--display); font-weight:800; font-size: clamp(1.9rem,3.8vw,2.9rem); line-height:1.1; letter-spacing:-.015em; color:#fff; margin:0 0 14px; }
.pagehead p { font-size: clamp(1.02rem,1.3vw,1.18rem); line-height:1.55; color:#c4cede; max-width:60ch; margin:0; }

/* ── White-label: photo split + brand proof ────────────────────────────── */
.wl-split { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:clamp(360px,42vw,520px); }
@media (max-width:820px){ .wl-split{ grid-template-columns:1fr; } }
.wl-split__img { background-size:cover; background-position:center; min-height:260px; }
.wl-split__text { background:var(--brand); color:#eef2f8; padding:clamp(30px,4vw,60px); display:flex; flex-direction:column; justify-content:center; }
.wl-split__text h2 { color:#fff; font-size:clamp(1.7rem,3vw,2.5rem); max-width:18ch; text-wrap:pretty; margin:0 0 16px; }
.wl-split__text p { color:#c4cede; font-size:clamp(1.02rem,1.3vw,1.18rem); line-height:1.6; max-width:46ch; margin:0; }
.wl-split__text .hl { background:var(--hl); color:#0a1f3a; padding:.02em .2em; border-radius:3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.wl-band { display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(28px,5vw,56px); align-items:center; }
@media (max-width:820px){ .wl-band{ grid-template-columns:1fr; } }
.wl-band__img { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); }
.wl-band__img img { width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3; }

/* ── Demo sandbox: tabbed interactive panels ───────────────────────────── */
.sandbox { margin-top: 30px; }
.sandbox__tabs { display:flex; flex-wrap:wrap; gap:2px; border-bottom:2px solid var(--line); }
.sandbox__tab { appearance:none; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-2px;
  padding:12px 18px; font:inherit; font-weight:700; font-size:.95rem; color:var(--muted); cursor:pointer; transition:color .15s; }
.sandbox__tab:hover { color:var(--ink); }
.sandbox__tab[aria-selected="true"] { color:var(--brand); border-bottom-color:var(--brand); }
.sandbox__panel { display:none; padding-top:26px; }
.sandbox__panel.is-active { display:block; }
.stage__pad { padding: clamp(20px,3vw,30px); }
.stage__lead { color:var(--ink-2); font-size:.95rem; margin:0 0 18px; max-width:64ch; }

/* admin dashboard: roster -> detail */
.adm { display:grid; grid-template-columns:290px 1fr; }
@media (max-width:760px){ .adm{ grid-template-columns:1fr; } }
.adm__list { border-right:1px solid var(--line); }
@media (max-width:760px){ .adm__list{ border-right:0; border-bottom:1px solid var(--line); } }
.adm__row { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left;
  appearance:none; background:none; border:0; border-bottom:1px solid var(--line); padding:14px 18px; cursor:pointer; font:inherit; transition:background .12s; }
.adm__row:last-child { border-bottom:0; }
.adm__row:hover { background:var(--bg-2); }
.adm__row[aria-selected="true"] { background:var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.adm__row b { font-weight:700; color:var(--ink); font-size:.95rem; display:block; }
.adm__row small { color:var(--muted); font-size:.78rem; }
.adm__row .sc { font-family:var(--mono); font-weight:800; color:var(--ink); font-size:1rem; }
.adm__detail { padding:22px 24px; }
.adm__detail .dash__diag { margin-top:16px; }

/* student home */
.shome { display:grid; grid-template-columns:.9fr 1.1fr; gap: clamp(20px,3vw,32px); padding:24px; }
@media (max-width:640px){ .shome{ grid-template-columns:1fr; } }
.shome__score { font-family:var(--mono); font-size:2.8rem; font-weight:800; color:var(--brand); line-height:1; }
.shome__label { font-size:.82rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.shome__streak { display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; font-size:.9rem; font-weight:600; color:var(--ink); }
.shome__streak b { color:var(--gold); }
.due { list-style:none; margin-top:8px; }
.due li { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); font-size:.95rem; color:var(--ink); }
.due li:first-child { border-top:0; }
.due__box { width:22px; height:22px; border:2px solid var(--line-2); border-radius:6px; cursor:pointer; flex:none; display:grid; place-items:center; color:transparent; transition:all .15s; }
.due li.done .due__box { background:var(--brand); border-color:var(--brand); color:#fff; }
.due li.done .due__txt { text-decoration:line-through; color:var(--muted); }
.due__tag { margin-left:auto; font-size:.72rem; font-weight:700; color:var(--gold); }

/* annotate / bluebook tools */
.annot { padding:24px; }
.annot__passage { font-size:1.02rem; line-height:1.75; color:var(--ink); max-width:66ch; }
.annot__passage .sent { cursor:pointer; border-radius:2px; padding:1px 0; transition:background .1s; }
.annot__passage .sent:hover { background:color-mix(in srgb, var(--hl) 35%, transparent); }
.annot__passage .sent.on { background:var(--hl); }
.annot__q { margin-top:22px; font-weight:700; color:var(--ink); }
.choices { list-style:none; margin-top:12px; display:grid; gap:8px; max-width:62ch; }
.choice { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:8px; padding:11px 14px; }
.choice__letter { font-weight:800; width:18px; color:var(--ink); }
.choice__txt { flex:1; color:var(--ink); font-size:.96rem; }
.choice.struck { opacity:.55; }
.choice.struck .choice__txt { text-decoration:line-through; }
.choice__x { appearance:none; background:none; border:1px solid var(--line-2); border-radius:50%; width:26px; height:26px;
  cursor:pointer; color:var(--muted); font-weight:700; flex:none; line-height:1; transition:all .12s; }
.choice__x:hover { border-color:#b3362b; color:#b3362b; }

/* error journal */
.ej__item { border-bottom:1px solid var(--line); }
.ej__head { display:flex; align-items:center; gap:14px; width:100%; text-align:left; appearance:none; background:none; border:0;
  padding:16px 20px; cursor:pointer; font:inherit; transition:background .12s; }
.ej__head:hover { background:var(--bg-2); }
.ej__tag { font-size:.7rem; font-weight:800; padding:4px 10px; border-radius:999px; background:var(--brand-soft); color:var(--brand); white-space:nowrap; }
.ej__q { flex:1; color:var(--ink); font-size:.95rem; }
.ej__meta { font-size:.8rem; color:var(--muted); white-space:nowrap; }
.ej__chev { color:var(--muted); transition:transform .18s; }
.ej__item.open .ej__chev { transform:rotate(90deg); }
.ej__body { display:none; padding:0 20px 20px 20px; }
.ej__item.open .ej__body { display:block; }
.ej__take { background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:14px 16px; font-size:.92rem; color:var(--ink-2); line-height:1.55; }
.ej__take b { color:var(--ink); }

/* ── White-label brand switcher (interactive) ──────────────────────────── */
.brandswitch { display:grid; grid-template-columns:1.35fr .65fr; gap: clamp(24px,4vw,44px); align-items:center; margin-top:36px; }
@media (max-width:820px){ .brandswitch{ grid-template-columns:1fr; } }
.bs-stage { border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); background:#fff; }
.bs-bar { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg-2); border-bottom:1px solid var(--line); }
.bs-dots { display:flex; gap:6px; } .bs-dots i{ width:10px; height:10px; border-radius:50%; background:var(--line-2); }
.bs-url { flex:1; background:#fff; border:1px solid var(--line); border-radius:6px; padding:5px 12px; font-family:var(--mono); font-size:.8rem; color:var(--muted); transition:color .35s; }
.bs-screen { --acc:#00356b; padding: clamp(30px,5vw,56px) clamp(24px,4vw,44px); text-align:center; }
.bs-mark { display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:1.35rem; letter-spacing:-.02em; color:var(--acc); transition:color .35s; margin-bottom:22px; }
.bs-mark span { width:26px; height:26px; border-radius:7px; background:var(--acc); transition:background .35s; }
.bs-h { font-size:1.05rem; font-weight:700; color:var(--ink); margin-bottom:18px; }
.bs-field { height:42px; border:1px solid var(--line); border-radius:8px; background:var(--bg-2); margin:0 auto 12px; max-width:300px; }
.bs-btn { display:block; width:100%; max-width:300px; margin:6px auto 0; padding:13px; border-radius:8px; border:0;
  background:var(--acc); color:#fff; font:inherit; font-weight:700; font-size:1rem; transition:background .35s; }
.bs-foot { margin-top:20px; font-size:.82rem; color:var(--muted); }
.bs-picker { display:flex; flex-direction:column; gap:10px; }
.bs-chip { --acc:var(--brand); display:flex; align-items:center; gap:11px; text-align:left; appearance:none; background:none;
  border:1.5px solid var(--line); border-radius:10px; padding:13px 15px; cursor:pointer; font:inherit; font-weight:700; color:var(--ink); transition:border-color .15s, background .15s; }
.bs-chip:hover { border-color:var(--line-2); }
.bs-chip[aria-selected="true"] { border-color:var(--acc); background:var(--brand-soft); }
.bs-chip i { width:16px; height:16px; border-radius:5px; flex:none; }

/* ── Feature mini-visuals (landing) ────────────────────────────────────── */
/* Growth line chart: score trajectory across mocks */
.lchart { width:100%; height:auto; display:block; margin-top:12px; overflow:visible; }
.lchart .lc-area { fill: color-mix(in srgb, var(--brand) 9%, transparent); }
.lchart .lc-line { fill:none; stroke: var(--brand); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.lchart .lc-base { stroke: var(--line); stroke-width:1; }
.lchart .lc-goal { stroke: var(--gold); stroke-width:1.3; stroke-dasharray:4 4; }
.lchart .lc-goal-t { font-family:var(--mono); font-size:8px; fill: color-mix(in srgb,var(--gold) 80%, var(--ink)); font-weight:700; }
.lchart .lc-pt { fill:#fff; stroke: var(--brand); stroke-width:2.5; }
.lchart .lc-pt--last { fill: var(--brand); }
.lchart .lc-x { font-family:var(--mono); font-size:8px; fill: var(--muted); text-anchor:middle; }
.lchart .lc-v { font-family:var(--mono); font-size:10px; font-weight:700; }
.lchart .lc-v--up { fill: var(--brand); } .lchart .lc-v--dim { fill: var(--muted); }

/* Homework: weakness -> generated set */
.hwk__from { font-size:.78rem; color: var(--muted); margin-bottom:11px; }
.hwk__from b { color: var(--brand-2); font-weight:700; }
.hwk__set { list-style:none; display:grid; gap:8px; }
.hwk__set li { display:flex; align-items:center; gap:9px; font-size:.83rem; color: var(--ink-2); }
.hwk__set li b { margin-left:auto; font-family:var(--mono); color: var(--ink); font-weight:700; }
.hwk__set i { width:16px; height:16px; border-radius:5px; background: var(--brand-soft); display:grid; place-items:center; flex:none; }
.hwk__set i::after { content:""; width:6px; height:6px; border-radius:50%; background: var(--brand); }

/* Parent report snippet */
.repcard { border:1px solid var(--line); border-radius: var(--radius-sm); overflow:hidden; }
.repcard__hd { background: var(--bg-2); border-bottom:1px solid var(--line); padding:9px 13px; font-size:.72rem; font-weight:700; color: var(--muted); display:flex; justify-content:space-between; }
.repcard__b { padding:13px; font-size:.86rem; color: var(--ink-2); line-height:1.6; margin:0; }
.repcard__b b { color: var(--brand-2); font-weight:700; }
.repcard__by { padding:0 13px 13px; font-size:.72rem; color: var(--muted); }

/* Question bank breakdown */
.qbank__row { display:flex; align-items:center; justify-content:space-between; font-size:.83rem; color: var(--ink-2); padding:8px 0; border-bottom:1px solid var(--line); }
.qbank__row b { font-family:var(--mono); color: var(--ink); font-weight:700; }
.qtags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.qtags span { font-size:.72rem; font-weight:600; color: var(--brand-2); background: var(--brand-soft); border-radius:999px; padding:3px 10px; }

/* ── Seneca signature: the Read + instant help ─────────────────────────── */
.seneca { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:40px; }
@media (max-width:900px){ .seneca{ grid-template-columns:1fr; } }
.scard { border:1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: clamp(24px,3vw,34px); display:flex; flex-direction:column; }
.scard__k { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.74rem; font-weight:700; letter-spacing:.05em; color: var(--brand); text-transform:uppercase; margin-bottom:13px; }
.scard__k svg { width:16px; height:16px; }
.scard h3 { margin-bottom:9px; font-size:1.2rem; }
.scard > p { color: var(--ink-2); font-size:.95rem; line-height:1.55; margin-bottom:20px; }
.scard .mini { margin-top:auto; }
.sread { border:1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); padding:18px; }
.sread .dash__score { margin:9px 0 13px; }
.sread .dash__score b { font-size:1.9rem; }
/* instant help chat */
.chatm { border:1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); padding:16px; display:grid; gap:12px; }
.chatm__q { justify-self:end; max-width:80%; background: var(--surface); border:1px solid var(--line); border-radius:12px 12px 3px 12px; padding:10px 13px; font-size:.85rem; color: var(--ink); }
.chatm__a { max-width:92%; background: var(--brand); color:#eef2f8; border-radius:12px 12px 12px 3px; padding:12px 14px; font-size:.85rem; line-height:1.55; }
.chatm__who { display:flex; align-items:center; gap:6px; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#e0c072; margin-bottom:6px; }
.chatm__who i { width:6px; height:6px; border-radius:50%; background:#e0c072; }
.chatm__a b { color:#fff; }

/* ── Loop redesign: stepped badges + connecting rail + loop-back ────────── */
.loop::before { content:""; position:absolute; top:52px; left:16.6%; right:16.6%; height:2px; background: var(--line); z-index:0; }
@media (max-width:820px){ .loop::before{ display:none; } }
.lnode { z-index:1; padding:28px 26px; }
.lnode__badge { width:52px; height:52px; border-radius:50%; background: var(--brand); color:#fff; display:grid; place-items:center; margin-bottom:16px; box-shadow:0 0 0 5px var(--surface); }
.lnode__badge svg { width:24px; height:24px; }
.lnode__n { letter-spacing:.09em; text-transform:uppercase; }
.lnode__ar { position:absolute; right:-25px; top:38px; width:26px; height:26px; border-radius:50%; background: var(--surface);
  border:1px solid var(--line); display:grid; place-items:center; color: var(--brand); z-index:3; transform:none; }
.lnode__ar svg { width:14px; height:14px; }
@media (max-width: 820px){ .lnode__ar{ right:50%; top:auto; bottom:-25px; transform:translateX(50%) rotate(90deg); } }
.loopback { grid-column:1/-1; justify-self:center; margin-top:12px; display:inline-flex; align-items:center; gap:9px;
  font-size:.86rem; font-weight:600; color: var(--brand-2); background: var(--brand-soft); border-radius:999px; padding:9px 18px; }
.loopback svg { width:16px; height:16px; }

/* ── Demo: Seneca's Snapshot narrative ─────────────────────────────────── */
.snap__read { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.snap__read .lbl { display:block; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--brand); margin-bottom:7px; }
.snap__read p { font-size:.9rem; line-height:1.6; color:var(--ink-2); }
.snap__read p b { color:var(--ink); font-weight:700; }
.snap__moves { list-style:none; margin-top:14px; display:grid; gap:8px; }
.snap__moves li { display:flex; gap:10px; align-items:flex-start; font-size:.86rem; color:var(--ink-2); line-height:1.45; }
.snap__moves i { width:20px; height:20px; border-radius:6px; background:var(--brand-soft); color:var(--brand); flex:none; display:grid; place-items:center; font-family:var(--mono); font-size:.7rem; font-weight:800; margin-top:1px; }

/* ── Demo: Classroom Review feed (teacher side) ────────────────────────── */
.crv__sum { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
@media (max-width:640px){ .crv__sum{ grid-template-columns:1fr; } }
.crv__stat { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-2); padding:13px 15px; }
.crv__stat b { display:block; font-family:var(--mono); font-size:1.4rem; font-weight:800; color:var(--ink); }
.crv__stat span { font-size:.78rem; color:var(--muted); }
.crv__feed { display:grid; gap:10px; }
.crv__item { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:14px 16px; cursor:pointer; transition:border-color .15s, background .15s; }
.crv__item:hover { border-color:var(--line-2); }
.crv__item--flag { border-left:0; box-shadow: inset 0 2px 0 var(--gold); }
.crv__item.reviewed { background:var(--bg-2); opacity:.72; }
.crv__hd { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.crv__q { font-weight:700; color:var(--ink); font-size:.92rem; }
.crv__acc { font-family:var(--mono); font-size:.82rem; font-weight:700; color:var(--ink-2); margin-left:auto; }
.crv__flag { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:color-mix(in srgb,var(--gold) 78%, var(--ink)); background:color-mix(in srgb,var(--gold) 20%, var(--surface)); border-radius:999px; padding:2px 9px; }
.crv__check { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--brand); display:none; }
.crv__item.reviewed .crv__check { display:inline; } .crv__item.reviewed .crv__flag { display:none; }
.crv__bar { height:8px; border-radius:999px; background:var(--bg-2); overflow:hidden; margin:11px 0; }
.crv__bar span { display:block; height:100%; border-radius:999px; background:var(--brand); transform-origin:left; transform:scaleX(var(--v,.5)); }
.crv__item--flag .crv__bar span { background:var(--gold); }
.crv__note { font-size:.85rem; color:var(--ink-2); line-height:1.55; }
.crv__note b { color:var(--ink); font-weight:700; }

/* ── Demo: Daily Reports ───────────────────────────────────────────────── */
.dr { padding: clamp(20px,3vw,30px); }
.dr__toggle { display:inline-flex; gap:2px; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:3px; margin-bottom:18px; }
.dr__toggle button { appearance:none; border:0; background:none; font:inherit; font-weight:650; font-size:.84rem; color:var(--muted); padding:7px 16px; border-radius:999px; cursor:pointer; }
.dr__toggle button[aria-selected="true"] { background:var(--surface); color:var(--brand); box-shadow:var(--shadow-lg); }
.dr__doc { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; max-width:620px; }
.dr__hd { background:var(--brand); color:#fff; padding:16px 20px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.dr__hd b { font-size:1.02rem; font-weight:800; } .dr__hd span { font-family:var(--mono); font-size:.78rem; color:#c4cede; }
.dr__body { padding:20px; }
.dr__sum { font-size:.95rem; color:var(--ink); line-height:1.6; margin:0 0 16px; }
.dr__sum b { color:var(--brand-2); }
.dr__list { list-style:none; display:grid; gap:11px; }
.dr__list li { display:flex; gap:11px; align-items:flex-start; font-size:.9rem; color:var(--ink-2); line-height:1.5; }
.dr__list svg { width:17px; height:17px; flex:none; margin-top:2px; color:var(--brand); }
.dr__list b { color:var(--ink); font-weight:700; }
.dr__ft { display:flex; align-items:center; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line); padding:14px 20px; background:var(--bg-2); }
.dr__ft span { font-size:.78rem; color:var(--muted); margin-right:auto; }

/* ── Landing: Seneca's Read cause-vs-symptom diagnosis ─────────────────── */
.sread__dx { margin-top:15px; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:8px; }
.sread__dxrow { display:flex; align-items:center; gap:10px; font-size:.86rem; }
.sread__dxk { font-family:var(--mono); font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); width:88px; flex:none; }
.sread__dxrow--sym span:last-child { color:var(--ink-2); }
.sread__dxrow--cause span:last-child { font-weight:800; color:var(--ink); }

/* ── Landing: homework queue recreation (faithful, on-brand, legible) ──── */
.hwq { display:grid; gap:11px; }
.hwq__hd { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hwq__hd b { font-weight:700; color:var(--ink); font-size:.94rem; }
.hwq__act { font-size:.72rem; font-weight:700; color:#0b6e4f; background:color-mix(in srgb,#0b6e4f 11%, var(--surface)); border:1px solid color-mix(in srgb,#0b6e4f 30%, var(--line)); border-radius:6px; padding:3px 11px; }
.hwq__meta { font-size:.74rem; color:var(--muted); margin-top:-5px; }
.hwq__skill { border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; background:var(--bg-2); }
.hwq__row { display:flex; align-items:center; gap:8px; }
.hwq__name { font-weight:700; font-size:.85rem; color:var(--ink); }
.hwq__diff { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--brand-2); background:var(--brand-soft); border-radius:999px; padding:2px 8px; }
.hwq__row b { margin-left:auto; font-family:var(--mono); font-size:.75rem; color:var(--ink-2); font-weight:700; }
.hwq__mastery { display:flex; align-items:center; gap:9px; margin-top:9px; font-size:.72rem; color:var(--muted); font-family:var(--mono); }
.hwq__bar { flex:none; width:76px; height:6px; border-radius:999px; background:var(--surface); border:1px solid var(--line); overflow:hidden; }
.hwq__bar span { display:block; height:100%; background:var(--brand); transform-origin:left; transform:scaleX(var(--v)); }

/* ── Landing: parent report status pill ────────────────────────────────── */
.repcard__b p { margin:0 0 9px; } .repcard__b p:last-child { margin:0; }
.repcard__status { font-weight:700; color:color-mix(in srgb,var(--gold) 80%, var(--ink)); }

/* ── Landing: mini Classroom Review feed ───────────────────────────────── */
.crvm { display:grid; gap:9px; }
.crvm__hd { font-size:.74rem; color:var(--muted); font-weight:600; margin-bottom:2px; }
.crvm__row { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:9px 11px; }
.crvm__row--flag { box-shadow: inset 0 2px 0 var(--gold); }
.crvm__top { display:flex; align-items:center; gap:8px; }
.crvm__q { font-weight:700; font-size:.82rem; color:var(--ink); }
.crvm__acc { margin-left:auto; font-family:var(--mono); font-size:.78rem; font-weight:700; color:var(--ink-2); }
.crvm__flag { font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:color-mix(in srgb,var(--gold) 78%, var(--ink)); background:color-mix(in srgb,var(--gold) 20%, var(--surface)); border-radius:999px; padding:2px 8px; }
.crvm__bar { height:6px; border-radius:999px; background:var(--bg-2); overflow:hidden; margin-top:8px; }
.crvm__bar span { display:block; height:100%; border-radius:999px; background:var(--brand); transform-origin:left; transform:scaleX(var(--v,.5)); }
.crvm__row--flag .crvm__bar span { background:var(--gold); }
.crvm__note { font-size:.76rem; color:var(--ink-2); line-height:1.5; margin-top:7px; }
.crvm__note b { color:var(--ink); }

/* ── Landing: "Why not just ChatGPT?" objection handler ────────────────── */
.vs { margin-top:36px; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); }
.vs__head { display:grid; grid-template-columns:1fr 1fr; background:var(--bg-2); border-bottom:1px solid var(--line); }
.vs__head span { padding:14px 22px; font-weight:700; font-size:.92rem; }
.vs__head span:first-child { color:var(--muted); border-right:1px solid var(--line); }
.vs__head span:last-child { color:var(--brand); }
.vs__row { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.vs__row:last-child { border-bottom:0; }
.vs__q { display:block; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:6px; }
.vs__cell { padding:18px 22px; font-size:.93rem; line-height:1.5; }
.vs__cell:first-child { color:var(--ink-2); border-right:1px solid var(--line); background:color-mix(in srgb,var(--bg-2) 45%, var(--surface)); }
.vs__cell:last-child { color:var(--ink); }
.vs__cell b { color:var(--ink); font-weight:700; }
.vs__who { display:none; font-family:var(--mono); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.vs__cell:first-child .vs__who { color:var(--muted); } .vs__cell:last-child .vs__who { color:var(--brand); }
@media (max-width:720px){
  .vs__head { display:none; }
  .vs__row { grid-template-columns:1fr; }
  .vs__cell:first-child { border-right:0; border-bottom:1px solid var(--line); }
  .vs__q { display:none; }
  .vs__who { display:block; }
}

/* ── Classroom (truthful): source modes + review-with-class ────────────── */
.clc__modes { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:13px; }
.clc__mode { font:inherit; font-size:.72rem; font-weight:600; color:var(--ink-2); background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:4px 12px; }
.clc__mode--on { color:#fff; background:var(--brand); border-color:var(--brand); }
.clc__modes button.clc__mode { cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.clc__panel { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:14px 15px; }
.clc__hd { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.clc__live { display:inline-flex; align-items:center; gap:6px; font-size:.73rem; font-weight:700; color:var(--brand); }
.clc__live i { width:7px; height:7px; border-radius:50%; background:var(--gold); }
.clc__code { font-family:var(--mono); font-size:.73rem; color:var(--muted); }
.clc__q { font-weight:700; font-size:.9rem; color:var(--ink); margin-bottom:7px; }
.clc__note { font-size:.84rem; line-height:1.55; color:var(--ink-2); }
.clc__note b { color:var(--brand-2); font-weight:700; }
.cl-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; flex-wrap:wrap; }

/* ── Landing: richer parent-report lines (labeled, measured) ───────────── */
.rr { margin-bottom:10px; }
.rr:last-child { margin-bottom:0; }
.rr__k { display:block; font-family:var(--mono); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:2px; }
.rr p { font-size:.85rem; line-height:1.5; color:var(--ink-2); margin:0; }
.rr p b { color:var(--brand-2); font-weight:700; }

/* ============================================================================
   BLOG / RESOURCES (added 2026-07-22). Parent- & teacher-facing guides.
   Reuses the existing token language (navy #00356B, gold, Public Sans, hairlines).
   Two surfaces: the /blog index (post list) and the article template (~65ch measure).
   ============================================================================ */

/* ── Index: featured flagship card ─────────────────────────────────────── */
.featpost { display:block; border:1px solid var(--line); border-left:3px solid var(--brand); border-radius: var(--radius);
  background: var(--surface); padding: clamp(24px,3.4vw,38px); margin-top: 6px; transition: border-color .2s, box-shadow .2s; }
.featpost:hover { box-shadow: var(--shadow-lg); border-color: var(--line-2); border-left-color: var(--brand); }
.featpost__tag { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color: var(--brand); }
.featpost__title { font-family:var(--display); font-weight:800; font-size: clamp(1.5rem,3vw,2.15rem); line-height:1.14;
  letter-spacing:-.02em; color: var(--ink); margin: 14px 0 12px; text-wrap:balance; }
.featpost:hover .featpost__title { color: var(--brand); }
.featpost__dek { color: var(--ink-2); font-size: clamp(1rem,1.3vw,1.12rem); line-height:1.6; max-width: 62ch; text-wrap:pretty; }
.featpost__meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:18px; font-size:.84rem; color: var(--muted); }
.featpost__meta .cat { font-weight:700; padding:4px 11px; border-radius:999px; background: var(--brand-soft); color: var(--brand-2); }
.featpost__meta i { font-style:normal; color: var(--line-2); }
.featpost__read { margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-weight:700; color: var(--brand); }
.featpost__read svg { width:15px; height:15px; transition: transform .15s var(--ease); }
.featpost:hover .featpost__read svg { transform: translateX(3px); }
@media (max-width:560px){ .featpost__read{ margin-left:0; } }

/* ── Index: post list ──────────────────────────────────────────────────── */
.postlist { margin-top: clamp(20px,3vw,32px); border-top: 1px solid var(--line); }
.postrow { display:grid; grid-template-columns: 148px 1fr; gap: clamp(14px,3vw,44px);
  padding: clamp(22px,3.2vw,32px) 0; border-bottom:1px solid var(--line); align-items:start; }
@media (max-width:680px){ .postrow{ grid-template-columns:1fr; gap:10px; } }
.postrow__side { display:flex; flex-direction:column; gap:9px; }
@media (max-width:680px){ .postrow__side{ flex-direction:row; align-items:center; gap:12px; } }
.postrow__cat { align-self:flex-start; font-size:.72rem; font-weight:700; padding:4px 11px; border-radius:999px;
  background:var(--brand-soft); color:var(--brand-2); white-space:nowrap; }
.postrow__date { font-family:var(--mono); font-size:.77rem; color:var(--muted); }
.postrow__title { font-size: clamp(1.18rem,2vw,1.42rem); font-weight:800; letter-spacing:-.02em; line-height:1.2; color:var(--ink); text-wrap:balance; }
a.postrow__link:hover .postrow__title { color:var(--brand); }
.postrow__dek { margin-top:9px; color:var(--ink-2); font-size:1rem; line-height:1.55; max-width:62ch; text-wrap:pretty; }
.postrow__read { margin-top:12px; display:inline-flex; align-items:center; gap:7px; font-size:.86rem; font-weight:650; color:var(--brand); }
.postrow__read svg{ width:15px;height:15px; transition:transform .15s var(--ease); }
a.postrow__link:hover .postrow__read svg{ transform:translateX(3px); }

/* ── Article template ──────────────────────────────────────────────────── */
.post { padding: clamp(30px,5vw,58px) 0 clamp(16px,3vw,30px); }
.post__head { max-width: 720px; margin-inline:auto; }
.post__cat { display:inline-block; font-size:.72rem; font-weight:700; padding:4px 12px; border-radius:999px; background:var(--brand-soft); color:var(--brand-2); }
.post__title { font-family:var(--display); font-weight:800; font-size: clamp(1.95rem,4vw,2.9rem); line-height:1.08; letter-spacing:-.02em; margin:16px 0 15px; text-wrap:balance; color:var(--ink); }
.post__dek { font-size: clamp(1.1rem,1.6vw,1.32rem); line-height:1.5; color:var(--ink-2); text-wrap:pretty; max-width:60ch; }
.post__by { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:24px; padding-top:18px; border-top:1px solid var(--line); font-size:.86rem; color:var(--muted); }
.post__by b{ color:var(--ink); font-weight:700; }
.post__by i{ font-style:normal; color:var(--line-2); }

.post__body { max-width: 680px; margin: clamp(26px,4vw,42px) auto 0; }
.post__body > * + * { margin-top: 1.15em; }
.post__body p { font-size: 1.075rem; line-height: 1.72; color: var(--ink); text-wrap:pretty; }
.post__body .post__lead { font-size: 1.2rem; line-height:1.6; color: var(--ink-2); }
.post__body h2 { font-size: clamp(1.32rem,2.3vw,1.65rem); font-weight:800; letter-spacing:-.02em; line-height:1.18; margin-top:1.95em; }
.post__body h3 { font-size:1.14rem; font-weight:750; margin-top:1.6em; color:var(--ink); }
.post__body ul, .post__body ol { padding-left:1.25em; display:grid; gap:.5em; }
.post__body li { font-size:1.06rem; line-height:1.62; color:var(--ink); text-wrap:pretty; }
.post__body li::marker { color:var(--brand); font-weight:700; }
.post__body strong { font-weight:750; color:var(--ink); }
.post__body a { color:var(--brand); font-weight:600; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.post__body a:hover { text-decoration-thickness:2px; }
.post__body hr { border:0; border-top:1px solid var(--line); margin:2.2em 0; }

/* Callout — a quiet aside, brand rule on the left */
.post__body .callout { border-left:3px solid var(--brand); background:var(--bg-2); border-radius:0 var(--radius) var(--radius) 0; padding:18px 22px; }
.post__body .callout p { font-size:1.01rem; line-height:1.6; color:var(--ink-2); margin:0; }
.post__body .callout p + p { margin-top:.7em; }
.post__body .callout b { color:var(--ink); }

/* Key-takeaways box */
.post__body .keybox { border:1px solid var(--line); border-radius: var(--radius); background:var(--surface); padding: 22px 24px; box-shadow: var(--shadow-lg); }
.post__body .keybox h3 { margin:0 0 13px; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--brand); font-weight:700; }
.post__body .keybox ul { margin:0; }
.post__body .keybox li { font-size:1rem; color:var(--ink-2); }

/* Stub notice */
.post__body .stubnote { border:1px dashed var(--line-2); border-radius: var(--radius); background:var(--bg-2); padding:18px 22px; }
.post__body .stubnote p { font-size:.98rem; color:var(--ink-2); margin:0; }
.post__body .stubnote b { color:var(--ink); }

/* Closing pitch + related — align to the article column */
.postcta { padding: clamp(28px,4vw,44px) 0 clamp(24px,3vw,36px); }
.moreposts { max-width: 720px; margin: 0 auto; padding: clamp(24px,4vw,40px) 0 clamp(30px,5vw,56px); }
.moreposts h2 { font-size:1.12rem; font-weight:800; letter-spacing:-.01em; margin-bottom:6px; }
.moreposts a { display:block; padding:15px 0; border-top:1px solid var(--line); color:var(--ink); font-weight:700; font-size:1rem; transition:color .15s; }
.moreposts a:last-child { border-bottom:1px solid var(--line); }
.moreposts a:hover { color:var(--brand); }
.moreposts a small { display:block; color:var(--muted); font-weight:500; font-size:.84rem; margin-top:3px; }