/* ============================================================
   AcademyOS — Interactive Vision Prototype
   styles.css — custom components only. Layout & spacing use Tailwind.
   ------------------------------------------------------------
   01  Tokens
   02  Base & ambient
   03  Primitives (type, buttons, chips, tags, avatars)
   04  Nav & chapter rail
   05  Ch.01 Hero
   06  Ch.02 Monday chaos
   07  Ch.03 Hidden cost
   08  Ch.04 Turning point
   09  Ch.05 Teacher
   10  Ch.06 Student
   11  Ch.07 Parent
   12  Ch.08 Owner dashboard
   13  Ch.09 Automation
   14  Ch.10 AI layer
   15  Ch.11 Future vision
   16  Ch.12 Closing
   17  Responsive
   18  Reduced motion & print
   ============================================================ */

/* ── 01  TOKENS ─────────────────────────────────────────── */
:root {
  --ink-950:#05060A; --ink-900:#080A11; --ink-800:#0D1019;
  --ink-700:#141824; --ink-600:#1D2231; --ink-500:#2A3143;

  --txt:#F8FAFC; --txt-2:#CBD5E1; --txt-3:#94A3B8; --txt-4:#64748B;

  --brand:#6366F1; --brand-l:#818CF8; --violet:#8B5CF6; --violet-l:#A78BFA;
  --cyan:#22D3EE; --mint:#34D399; --amber:#FBBF24; --rose:#FB7185;

  --glass: rgba(255,255,255,.035);
  --glass-2: rgba(255,255,255,.055);
  --stroke: rgba(255,255,255,.08);
  --stroke-2: rgba(255,255,255,.14);

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;

  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 12px 32px -12px rgba(0,0,0,.7);
  --sh-lg: 0 40px 80px -32px rgba(0,0,0,.85);
  --sh-glow: 0 0 0 1px rgba(99,102,241,.22), 0 24px 60px -24px rgba(99,102,241,.4);

  --shell: 1240px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.6,.05,.25,1);
}

/* ── 02  BASE & AMBIENT ─────────────────────────────────── */
* { -webkit-font-smoothing: antialiased; }
html, body { overflow-x: clip; }
body {
  background: var(--ink-950); color: var(--txt); line-height: 1.55;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

::selection { background: rgba(99,102,241,.32); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink-950); }
::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 8px; border: 3px solid var(--ink-950); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }

:focus-visible { outline: 2px solid var(--brand-l); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: fixed; top: -100px; left: 24px; z-index: 200;
  background: var(--brand); color: #fff; padding: 12px 20px;
  border-radius: var(--r-sm); font-size: 14px; font-weight: 600;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 24px; }

/* Film grain */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Aurora field */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora__blob {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(120px); opacity: .5; will-change: transform;
}
.aurora__blob--a { width: 780px; height: 780px; top: -18%; left: -12%; background: radial-gradient(circle, rgba(99,102,241,.42), transparent 68%); }
.aurora__blob--b { width: 700px; height: 700px; top: 28%;  right: -14%; background: radial-gradient(circle, rgba(139,92,246,.36), transparent 68%); }
.aurora__blob--c { width: 640px; height: 640px; bottom: -14%; left: 26%; background: radial-gradient(circle, rgba(34,211,238,.24), transparent 68%); }

main { position: relative; z-index: 2; }

/* Chapters */
.chapter { position: relative; padding: 11rem 0; }
.chapter--hero { padding: 0; min-height: 100vh; display: flex; align-items: center; }
.chapter--chaos, .chapter--turn { padding: 0; }
.chapter--close { padding: 11rem 0 0; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 40px; }
.shell--full { max-width: 1440px; }

/* Hairline separators between acts */
.chapter + .chapter::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--shell), calc(100% - 80px)); height: 1px;
  background: linear-gradient(90deg, transparent, var(--stroke), transparent);
}

/* ── 03  PRIMITIVES ─────────────────────────────────────── */
.display {
  font-weight: 700; letter-spacing: -.035em; line-height: 1.04;
  text-wrap: balance;
}
.serif { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; }
em.serif {
  background: linear-gradient(100deg, var(--violet-l), var(--brand-l) 45%, var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--txt-3); margin-bottom: 26px;
}
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-l); box-shadow: 0 0 12px 2px rgba(129,140,248,.7); }
.eyebrow__dot--rose   { background: var(--rose);   box-shadow: 0 0 12px 2px rgba(251,113,133,.65); }
.eyebrow__dot--violet { background: var(--violet-l); box-shadow: 0 0 12px 2px rgba(167,139,250,.65); }
.eyebrow__dot--cyan   { background: var(--cyan);   box-shadow: 0 0 12px 2px rgba(34,211,238,.6); }
.eyebrow__dot--mint   { background: var(--mint);   box-shadow: 0 0 12px 2px rgba(52,211,153,.6); }
.eyebrow__dot--brand  { background: var(--brand-l); }

.sec-head { max-width: 820px; margin-bottom: 84px; }
.sec-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; max-width: none; }
.sec-title { font-size: clamp(2.4rem, 4.6vw, 4.15rem); margin-bottom: 26px; }
.sec-sub { font-size: clamp(1.02rem, 1.28vw, 1.2rem); color: var(--txt-3); max-width: 62ch; line-height: 1.65; }
.sec-sub--right { max-width: 40ch; text-align: left; padding-bottom: 8px; }
.sec-outro {
  font-size: clamp(1.9rem, 3.4vw, 3.1rem); text-align: center;
  margin-top: 96px; line-height: 1.18; color: var(--txt);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  will-change: transform;
}
.btn svg { width: 17px; height: 17px; }
.btn--primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--violet) 100%);
  color: #fff; box-shadow: var(--sh-glow);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(99,102,241,.35), 0 30px 70px -22px rgba(99,102,241,.65); }
.btn--ghost {
  background: var(--glass); color: var(--txt-2);
  border: 1px solid var(--stroke); backdrop-filter: blur(14px);
}
.btn--ghost:hover { background: var(--glass-2); border-color: var(--stroke-2); color: var(--txt); transform: translateY(-2px); }

/* Chips / tags */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  background: var(--glass-2); color: var(--txt-3); border: 1px solid var(--stroke);
  white-space: nowrap;
}
.chip--mint  { background: rgba(52,211,153,.12); color: var(--mint);  border-color: rgba(52,211,153,.25); }
.chip--rose  { background: rgba(251,113,133,.12); color: var(--rose); border-color: rgba(251,113,133,.25); }
.chip--amber { background: rgba(251,191,36,.12); color: var(--amber); border-color: rgba(251,191,36,.25); }
.chip--violet{ background: rgba(139,92,246,.13); color: var(--violet-l); border-color: rgba(139,92,246,.27); }
.chip--live  { background: rgba(52,211,153,.14); color: var(--mint); border-color: rgba(52,211,153,.3); }
.chip--live::before {
  content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(.7);} }

.tag {
  display: inline-block; padding: 5px 11px; border-radius: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--glass-2); color: var(--txt-3); border: 1px solid var(--stroke);
}
.tag--rose   { background: rgba(251,113,133,.1); color: var(--rose);   border-color: rgba(251,113,133,.22); }
.tag--amber  { background: rgba(251,191,36,.1);  color: var(--amber);  border-color: rgba(251,191,36,.22); }
.tag--brand  { background: rgba(99,102,241,.12); color: var(--brand-l); border-color: rgba(99,102,241,.25); }
.tag--violet { background: rgba(139,92,246,.12); color: var(--violet-l); border-color: rgba(139,92,246,.25); }
.tag--cyan   { background: rgba(34,211,238,.1);  color: var(--cyan);   border-color: rgba(34,211,238,.22); }
.tag--mint   { background: rgba(52,211,153,.1);  color: var(--mint);   border-color: rgba(52,211,153,.22); }
.tag--slate  { background: var(--glass-2); color: var(--txt-3); }

/* Avatars */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #fff;
  background: linear-gradient(140deg, var(--brand), var(--violet));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.avatar--lg { width: 56px; height: 56px; font-size: 17px; }

/* Dots */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
.dot--mint { background: var(--mint); } .dot--rose { background: var(--rose); } .dot--cyan { background: var(--cyan); }

/* Value states */
.up   { color: var(--mint); }
.down { color: var(--rose); }
.warn { color: var(--amber); }

/* Glass surface used across product mocks */
.app, .dash, .scard, .cost-card, .ai-card, .flow, .parent-aside, .profile, .orbit, .phone__frame {
  background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid var(--stroke);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--sh-md);
}

/* Window dots */
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-600); }
.dots i:nth-child(1) { background: #3A3040; } .dots i:nth-child(2) { background: #34333F; }

/* ── 04  NAV & RAIL ─────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 18px 0; opacity: 0; transform: translateY(-14px); pointer-events: none;
  transition: background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-visible { pointer-events: auto; }
.nav.is-solid {
  background: rgba(5,6,10,.72); backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: var(--stroke);
}
.nav__inner {
  max-width: var(--shell); margin-inline: auto; padding-inline: 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.nav__brand { display: inline-flex; align-items: center; gap: 11px; }
.nav__mark {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(140deg, var(--brand), var(--violet)); color: #fff;
  box-shadow: 0 6px 18px -6px rgba(99,102,241,.9);
}
.nav__mark svg { width: 18px; height: 18px; }
.nav__word { font-size: 16px; font-weight: 700; letter-spacing: -.025em; }
.nav__word-os { color: var(--brand-l); }
.nav__links { display: flex; gap: 30px; }
.nav__links a {
  font-size: 14px; font-weight: 500; color: var(--txt-4);
  transition: color .25s var(--ease);
}
.nav__links a:hover { color: var(--txt); }
.nav__cta {
  font-size: 13.5px; font-weight: 600; color: var(--txt);
  padding: 10px 20px; border-radius: 999px;
  background: var(--glass-2); border: 1px solid var(--stroke);
  transition: all .25s var(--ease); white-space: nowrap;
}
.nav__cta:hover { background: rgba(99,102,241,.18); border-color: rgba(99,102,241,.4); }

.rail { position: fixed; right: 30px; top: 50%; transform: translateY(-50%); z-index: 90; opacity: 0; }
.rail__list { display: flex; flex-direction: column; gap: 3px; }
.rail__list li {
  display: flex; align-items: center; justify-content: flex-end; gap: 11px;
  height: 26px; cursor: default;
}
.rail__list i {
  width: 22px; height: 2px; border-radius: 2px; background: var(--ink-600);
  transition: width .45s var(--ease), background .45s var(--ease);
}
.rail__list span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--txt-4); opacity: 0; transform: translateX(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  order: -1;
}
.rail__list li.is-active i { width: 34px; background: linear-gradient(90deg, var(--brand), var(--violet-l)); }
.rail__list li.is-active span { opacity: 1; transform: none; color: var(--txt-2); }
.rail:hover span { opacity: .65; transform: none; }

/* ── 05  Ch.01 HERO ─────────────────────────────────────── */
/* padding-block, not the shorthand — .hero shares its element with .shell
   and must not wipe out .shell's side gutters */
.hero { padding-block: 148px 90px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__title { font-size: clamp(3rem, 7.6vw, 6.6rem); margin-bottom: 34px; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: block; }
.hero__sub {
  font-size: clamp(1.05rem, 1.42vw, 1.32rem); color: var(--txt-3);
  max-width: 66ch; line-height: 1.66; margin-bottom: 44px;
}
.hero__sub strong { color: var(--txt); font-weight: 500; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 68px; }

.hero__viz { width: 100%; max-width: 960px; }
.constellation { width: 100%; height: auto; }
.constellation text { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; fill: var(--txt-4); }
.constellation .core-label { font-size: 10.5px; font-weight: 700; fill: var(--txt-2); letter-spacing: .06em; text-transform: uppercase; }
.cnode { opacity: 0; animation: nodeIn .9s var(--ease) forwards; animation-delay: var(--d); }
@keyframes nodeIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.core-pulse { transform-origin: 450px 190px; animation: corePulse 3.4s ease-out infinite; }
@keyframes corePulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }

.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 60px; }
.scroll-cue__track {
  width: 22px; height: 36px; border-radius: 999px; border: 1.5px solid var(--stroke-2);
  display: grid; justify-items: center; padding-top: 7px;
}
.scroll-cue__dot { width: 3.5px; height: 7px; border-radius: 2px; background: var(--brand-l); animation: cueDrop 1.9s var(--ease-io) infinite; }
@keyframes cueDrop { 0%{transform:translateY(0);opacity:0;} 25%{opacity:1;} 75%{transform:translateY(13px);opacity:0;} 100%{opacity:0;} }
.scroll-cue__label { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-4); }

/* ── 06  Ch.02 MONDAY CHAOS ─────────────────────────────── */
.chaos-stage { min-height: 100vh; display: flex; align-items: center; position: relative; padding: 60px 0; }
.chapter--chaos::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 70% 55% at 50% 45%, rgba(244,63,94,.11), transparent 72%);
}
.chaos__head { text-align: center; position: relative; z-index: 3; }
.clock {
  display: inline-flex; align-items: baseline; gap: 7px; margin-bottom: 24px;
  padding: 9px 20px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--stroke); backdrop-filter: blur(14px);
  font-variant-numeric: tabular-nums;
}
.clock__time { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--txt); }
.clock__meridiem { font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--txt-4); }
.chaos__title { font-size: clamp(2.3rem, 5vw, 4.4rem); margin-bottom: 18px; }
.chaos__sub { font-size: 1.05rem; color: var(--txt-4); }

/* The field is sized against the viewport so the pinned stage never
   outgrows a short laptop screen. Cards are placed by --l/--t, which
   resolve against the field (percentages inside translate() would
   resolve against each card's own box instead). */
.chaos__field { position: relative; height: clamp(360px, 50vh, 560px); margin: 22px 0 10px; }
.cc {
  position: absolute; top: var(--t); left: var(--l); width: clamp(240px, 22vw, 310px);
  padding: 17px 19px; border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(20,24,36,.94), rgba(13,16,25,.9));
  border: 1px solid var(--stroke); box-shadow: var(--sh-lg);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--r));
  will-change: transform, opacity;
}
.cc header { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.cc__ico {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: var(--glass-2); font-size: 13px; border: 1px solid var(--stroke);
}
.cc__kind { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--txt-4); }
.cc__body { font-size: 13.5px; line-height: 1.5; color: var(--txt-2); margin-bottom: 10px; }
.cc__body em { font-style: italic; color: var(--txt-3); }
.cc__body strong { color: var(--rose); font-weight: 600; }
.cc__meta { color: var(--rose); font-weight: 600; }
.cc footer { font-size: 11.5px; color: var(--txt-4); font-variant-numeric: tabular-nums; }
.cc--call   { border-left: 2px solid var(--rose); }
.cc--wa     { border-left: 2px solid var(--mint); }
.cc--lead   { border-left: 2px solid var(--amber); }
.cc--att    { border-left: 2px solid var(--brand-l); }
.cc--fac    { border-left: 2px solid var(--violet-l); }
.cc--fee    { border-left: 2px solid var(--amber); }
.cc--test   { border-left: 2px solid var(--cyan); }
.cc--walk   { border-left: 2px solid var(--rose); }
.cc--report { border-left: 2px solid var(--violet-l); }

.chaos__meter { display: flex; justify-content: center; position: relative; z-index: 4; }
.meter {
  display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-radius: 999px;
  background: rgba(5,6,10,.8); border: 1px solid var(--stroke); backdrop-filter: blur(18px);
}
.meter__label { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-4); }
.meter__value { font-size: 19px; font-weight: 700; color: var(--rose); font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; }
.meter__bar { width: 140px; height: 4px; border-radius: 4px; background: var(--ink-600); overflow: hidden; }
.meter__bar i { display: block; height: 100%; width: 0%; border-radius: 4px; background: linear-gradient(90deg, var(--amber), var(--rose)); }

/* Overlays the field so the punchline lands in the space the cards
   just vacated, without adding height to the pinned stage. */
.chaos__punch {
  position: absolute; left: 0; right: 0; top: 54%; transform: translateY(-50%);
  text-align: center; font-size: clamp(1.8rem, 3.6vw, 3.2rem);
  opacity: 0; z-index: 6; pointer-events: none;
}

/* ── 07  Ch.03 HIDDEN COST ──────────────────────────────── */
.cost-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.cost-card {
  grid-column: span 4; padding: 30px; border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.cost-card:hover { transform: translateY(-4px); border-color: var(--stroke-2); box-shadow: var(--sh-lg); }
.cost-card--wide { grid-column: span 7; }
.cost-card--stack { grid-column: span 5; }
.cost-card__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cost-card__delta { font-size: 11.5px; color: var(--txt-4); letter-spacing: .05em; }
.cost-card__figure {
  font-size: clamp(2.3rem, 3.6vw, 3.3rem); font-weight: 700; letter-spacing: -.04em;
  line-height: 1; color: var(--txt); font-variant-numeric: tabular-nums;
}
.cost-card__desc { font-size: 14px; line-height: 1.62; color: var(--txt-3); }
.cost-card > .tag { align-self: flex-start; }

.leak-viz { margin-top: auto; padding-top: 12px; }
.leak-viz svg { width: 100%; height: 44px; }
.leak-got { stroke-dasharray: 420; stroke-dashoffset: 420; }
.leak-legend { display: flex; gap: 22px; font-size: 12px; color: var(--txt-4); }

.stack-list { display: grid; gap: 2px; }
.stack-list li {
  display: flex; align-items: center; gap: 13px; padding: 10px 12px;
  border-radius: var(--r-sm); transition: background .3s var(--ease);
}
.stack-list li:hover { background: var(--glass); }
.stack-ico { font-size: 17px; width: 26px; text-align: center; flex: none; }
.stack-list strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--txt-2); }
.stack-list em { display: block; font-size: 12px; color: var(--txt-4); font-style: normal; }
.stack-note { font-size: 13px; color: var(--rose); font-weight: 500; margin-top: 6px; }

/* ── 08  Ch.04 TURNING POINT ────────────────────────────── */
.turn-stage { min-height: 100vh; display: flex; align-items: center; padding: 60px 0; position: relative; }
.chapter--turn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(99,102,241,.14), transparent 70%);
}
.turn__head { text-align: center; margin-bottom: 30px; }
.turn__title { font-size: clamp(2.1rem, 4.4vw, 3.8rem); }

/* max-width is height-aware so the pinned arena always fits the fold */
.turn__arena { position: relative; width: 100%; max-width: min(1000px, 78vh); margin-inline: auto; aspect-ratio: 1000 / 640; }
.turn__links { position: absolute; inset: 0; width: 100%; height: 100%; }
.tlink { stroke-dasharray: 400; stroke-dashoffset: 400; opacity: .55; }

.profile {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(256px, 34%, 340px); padding: 24px; border-radius: var(--r-lg);
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(99,102,241,.2), 0 0 90px -20px rgba(99,102,241,.55);
  z-index: 5;
}
.profile__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.profile__head h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.profile__head p { font-size: 11.5px; color: var(--txt-4); margin-top: 3px; }
.profile__head .chip { margin-left: auto; }
.profile__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.profile__stats div { text-align: center; padding: 11px 6px; border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--stroke); }
.profile__stats dt { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-4); margin-bottom: 5px; }
.profile__stats dd { font-size: 15px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.orbit {
  position: absolute; width: clamp(176px, 23%, 232px); padding: 16px 18px; border-radius: var(--r-md);
  transform: translate(-50%, -50%); opacity: 0; z-index: 4;
}
.orbit__ico {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; margin-bottom: 10px;
  background: linear-gradient(140deg, rgba(99,102,241,.28), rgba(139,92,246,.18));
  border: 1px solid rgba(99,102,241,.3); font-size: 14px;
}
.orbit h4 { font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-2); margin-bottom: 6px; }
.orbit p { font-size: 12.5px; line-height: 1.5; color: var(--txt-4); }
.orbit--1 { top: 23.4%; left: 23.6%; } .orbit--2 { top: 23.4%; left: 76.4%; }
.orbit--3 { top: 50%;   left: 15%;   } .orbit--4 { top: 50%;   left: 85%;   }
.orbit--5 { top: 76.6%; left: 23.6%; } .orbit--6 { top: 76.6%; left: 76.4%; }
.orbit--7 { top: 88.4%; left: 50%;   }

.turn__punch { text-align: center; font-size: clamp(1.6rem, 3vw, 2.7rem); line-height: 1.24; margin-top: 26px; opacity: 0; }

/* ── 09  Ch.05 TEACHER ──────────────────────────────────── */
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; }
.pane__kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-4); margin-bottom: 22px; }

.app { border-radius: var(--r-lg); overflow: hidden; }
.app__bar {
  display: flex; align-items: center; gap: 16px; padding: 14px 20px;
  background: rgba(255,255,255,.03); border-bottom: 1px solid var(--stroke);
}
.app__title { font-size: 13px; font-weight: 600; color: var(--txt-2); }
.app__date { margin-left: auto; font-size: 12px; color: var(--txt-4); }
.app__body { padding: 24px; }
.app__label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-4); margin-bottom: 14px; }
.app__label--mt { margin-top: 30px; }

.class-row {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid transparent; transition: all .3s var(--ease); margin-bottom: 8px;
}
.class-row:hover { background: var(--glass); border-color: var(--stroke); }
.class-row--now { background: rgba(99,102,241,.09); border-color: rgba(99,102,241,.24); }
.class-row__time {
  font-size: 15px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; min-width: 52px;
}
.class-row__time em { font-size: 10.5px; font-weight: 500; font-style: normal; color: var(--txt-4); margin-top: 2px; }
.class-row__main { flex: 1; }
.class-row__main strong { display: block; font-size: 14px; font-weight: 600; }
.class-row__main span { font-size: 12px; color: var(--txt-4); }

.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 6px; margin-bottom: 14px; }
.att-cell {
  aspect-ratio: 1; border-radius: 7px; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700; color: var(--txt-4);
  background: var(--ink-700); border: 1px solid var(--stroke);
  transition: all .35s var(--ease); cursor: default;
}
.att-cell.is-present { background: rgba(52,211,153,.16); border-color: rgba(52,211,153,.34); color: var(--mint); }
.att-cell.is-absent  { background: rgba(251,113,133,.15); border-color: rgba(251,113,133,.32); color: var(--rose); }
.att-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12.5px; color: var(--txt-4); flex-wrap: wrap; }
.att-foot strong { color: var(--txt-2); font-variant-numeric: tabular-nums; }
.att-foot__auto { color: var(--mint); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.att-foot__auto::before { content: "✓"; font-size: 11px; }

.vanish { display: grid; gap: 3px; margin-bottom: 34px; }
.vanish li {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px;
  border-radius: var(--r-sm); font-size: 13.5px; color: var(--txt-3);
  background: var(--glass); border: 1px solid var(--stroke);
  transition: all .5s var(--ease);
}
.vanish li.is-gone { color: var(--txt-4); text-decoration: line-through; text-decoration-color: rgba(148,163,184,.45); opacity: .5; }
.vanish__x {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none;
  font-size: 10px; font-weight: 700; color: var(--txt-4);
  background: var(--ink-600); transition: all .5s var(--ease);
}
.vanish li.is-gone .vanish__x { background: rgba(52,211,153,.2); color: var(--mint); }

.saved {
  padding: 26px; border-radius: var(--r-lg); text-align: center; margin-bottom: 24px;
  background: linear-gradient(150deg, rgba(52,211,153,.13), rgba(34,211,238,.06));
  border: 1px solid rgba(52,211,153,.22);
}
.saved__num { font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 700; letter-spacing: -.04em; color: var(--mint); line-height: 1; }
.saved__cap { font-size: 13px; color: var(--txt-3); margin-top: 8px; }

.quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.qa {
  display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; color: var(--txt-2); text-align: left;
  background: var(--glass); border: 1px solid var(--stroke);
  transition: all .28s var(--ease); cursor: pointer;
}
.qa:hover { background: var(--glass-2); border-color: var(--stroke-2); transform: translateY(-2px); }
.qa--solid { background: linear-gradient(135deg, var(--brand), var(--violet)); border-color: transparent; color: #fff; font-weight: 600; justify-content: center; }

/* ── 10  Ch.06 STUDENT ──────────────────────────────────── */
.phone-row { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: start; }
.phone { display: flex; justify-content: center; position: sticky; top: 120px; }
.phone__frame {
  position: relative; width: 344px; border-radius: 42px; padding: 12px;
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(255,255,255,.06), 0 0 100px -30px rgba(99,102,241,.5);
}
.phone__notch {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 104px; height: 22px; border-radius: 999px; background: var(--ink-950); z-index: 3;
}
.phone__screen {
  border-radius: 32px; background: linear-gradient(175deg, #0B0E17, #070910);
  padding: 46px 18px 22px; min-height: 640px; overflow: hidden;
}
.ph-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ph-hi { font-size: 18px; font-weight: 700; letter-spacing: -.025em; }
.ph-sub { font-size: 11.5px; color: var(--txt-4); margin-top: 2px; }

.ph-card { padding: 17px; border-radius: var(--r-md); margin-bottom: 20px; }
.ph-card--focus { background: linear-gradient(150deg, rgba(99,102,241,.2), rgba(139,92,246,.08)); border: 1px solid rgba(99,102,241,.28); }
.ph-card__k { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-l); margin-bottom: 7px; }
.ph-card__v { font-size: 19px; font-weight: 700; letter-spacing: -.025em; }
.ph-card__m { font-size: 11.5px; color: var(--txt-4); margin: 5px 0 12px; }

.bar { height: 5px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--rose), var(--amber)); transition: width 1.1s var(--ease); }

.ph-label { font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--txt-4); margin: 20px 0 10px; }
.ph-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.035); border: 1px solid var(--stroke); margin-bottom: 7px;
}
.ph-item--done { opacity: .5; }
.ph-item--done strong { text-decoration: line-through; }
.ph-item__ico {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none;
  font-size: 13px; font-weight: 700; background: var(--glass-2); border: 1px solid var(--stroke);
}
.ph-item__ico--rose { background: rgba(251,113,133,.16); color: var(--rose); border-color: rgba(251,113,133,.28); }
.ph-item__ico--mint { background: rgba(52,211,153,.16); color: var(--mint); border-color: rgba(52,211,153,.28); }
.ph-item strong { display: block; font-size: 13px; font-weight: 600; }
.ph-item em { display: block; font-size: 11px; font-style: normal; color: var(--txt-4); margin-top: 1px; }

.student-cards { display: grid; gap: 22px; }
.scard { padding: 30px; border-radius: var(--r-lg); transition: transform .45s var(--ease), border-color .45s var(--ease); }
.scard:hover { transform: translateY(-3px); border-color: var(--stroke-2); }
.scard h3 { font-size: 19px; font-weight: 700; letter-spacing: -.025em; margin-bottom: 9px; }
.scard > p { font-size: 14px; color: var(--txt-3); line-height: 1.6; margin-bottom: 20px; }
.scard__note { font-size: 12.5px; color: var(--txt-4); margin-top: 16px; font-style: italic; }

.perf { display: grid; gap: 13px; }
.perf__row { display: grid; grid-template-columns: 108px 1fr 56px; align-items: center; gap: 14px; font-size: 13px; }
.perf__row > span:first-child { color: var(--txt-3); }
.perf__bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.perf__bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--violet-l)); transition: width 1.1s var(--ease); }
.perf__bar i.is-up   { background: linear-gradient(90deg, var(--mint), var(--cyan)); }
.perf__bar i.is-down { background: linear-gradient(90deg, var(--rose), var(--amber)); }
.perf__row em { font-style: normal; font-weight: 600; font-size: 12px; text-align: right; color: var(--txt-4); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip { font-size: 12.5px; padding: 7px 14px; }

.mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mini-grid li { text-align: center; padding: 16px 8px; border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--stroke); }
.mini-grid strong { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mini-grid em { display: block; font-size: 10.5px; font-style: normal; color: var(--txt-4); margin-top: 4px; }

/* ── 11  Ch.07 PARENT ───────────────────────────────────── */
.parent-row { display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: start; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare__cap { margin-bottom: 16px; }
.compare__col { padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--stroke); }
.compare__col--before { background: rgba(251,113,133,.045); border-color: rgba(251,113,133,.16); }
.compare__col--after  { background: rgba(52,211,153,.05); border-color: rgba(52,211,153,.18); }

.wa__title { font-size: 12px; font-weight: 700; color: var(--txt-3); margin-bottom: 14px; }
.wa__msg {
  font-size: 13px; padding: 9px 13px; border-radius: 12px; margin-bottom: 7px; max-width: 88%;
  background: var(--ink-700); color: var(--txt-3);
}
.wa__msg--in  { border-bottom-left-radius: 4px; }
.wa__msg--out { margin-left: auto; background: rgba(52,211,153,.14); color: var(--txt-2); border-bottom-right-radius: 4px; }
.wa__note { font-size: 12.5px; color: var(--rose); margin-top: 16px; font-style: italic; }

.feed { display: grid; gap: 9px; }
.feed li { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--stroke); }
.feed__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none; font-size: 13px; background: var(--glass-2); border: 1px solid var(--stroke); }
.feed__ico--mint  { background: rgba(52,211,153,.16); color: var(--mint); }
.feed__ico--brand { background: rgba(99,102,241,.16); color: var(--brand-l); }
.feed__ico--violet{ background: rgba(139,92,246,.16); color: var(--violet-l); }
.feed__ico--amber { background: rgba(251,191,36,.16); color: var(--amber); }
.feed__ico--cyan  { background: rgba(34,211,238,.14); color: var(--cyan); }
.feed strong { display: block; font-size: 13px; font-weight: 600; }
.feed em { display: block; font-size: 11.5px; font-style: normal; color: var(--txt-4); margin-top: 1px; }
.feed__note { font-size: 12.5px; color: var(--mint); margin-top: 16px; font-weight: 500; }

.parent-aside { padding: 32px; border-radius: var(--r-lg); position: sticky; top: 120px; }
.parent-aside h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 20px; }
.check { display: grid; gap: 11px; margin-bottom: 24px; }
.check li { display: flex; gap: 11px; font-size: 13.5px; color: var(--txt-3); line-height: 1.45; }
.check li::before {
  content: "✓"; flex: none; display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%; font-size: 10px; font-weight: 700;
  background: rgba(52,211,153,.15); color: var(--mint); margin-top: 1px;
}
.parent-aside__line { font-size: 13.5px; line-height: 1.65; color: var(--txt-4); padding-top: 20px; border-top: 1px solid var(--stroke); }

/* ── 12  Ch.08 OWNER DASHBOARD ──────────────────────────── */
.chapter--dash::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 65% 45% at 50% 55%, rgba(139,92,246,.1), transparent 70%);
}
.dash { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg), 0 0 120px -50px rgba(99,102,241,.6); }
.dash__bar { display: flex; align-items: center; gap: 18px; padding: 16px 24px; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--stroke); }
.dash__crumb { font-size: 13px; font-weight: 600; color: var(--txt-2); }
.dash__live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--mint); }
.dash__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); animation: pulseDot 2s ease-in-out infinite; }

.dash__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; padding: 24px; }
.dk {
  border-radius: var(--r-md); padding: 20px; background: rgba(255,255,255,.028);
  border: 1px solid var(--stroke); transition: border-color .4s var(--ease), background .4s var(--ease);
  display: flex; flex-direction: column;
}
.dk:hover { border-color: var(--stroke-2); background: rgba(255,255,255,.045); }
.dk--health  { grid-column: span 4; }
.dk--brief   { grid-column: span 8; }
.dk--kpi     { grid-column: span 3; position: relative; overflow: hidden; }
.dk--chart   { grid-column: span 7; }
.dk--pipe    { grid-column: span 5; }
.dk--ring    { grid-column: span 3; }
.dk--batches { grid-column: span 5; }
.dk--faculty { grid-column: span 4; }
.dk--perf    { grid-column: span 7; }
.dk--growth  { grid-column: span 5; }
.dk--risks   { grid-column: span 7; }
.dk--actions { grid-column: span 5; }

.dk__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.dk__k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-4); }
.dk__sub { font-size: 11.5px; color: var(--txt-4); margin-top: 4px; }
.dk__v { font-size: clamp(1.5rem, 2.1vw, 1.95rem); font-weight: 700; letter-spacing: -.035em; margin: 10px 0 6px; font-variant-numeric: tabular-nums; }
.dk__d { font-size: 11.5px; color: var(--txt-4); font-weight: 500; }
.dk__foot { font-size: 12px; color: var(--txt-4); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--stroke); line-height: 1.5; }

/* Sparkline sits behind the KPI text, not over it */
.spark { position: absolute; bottom: 0; left: 0; width: 100%; height: 44px; opacity: .55; z-index: 0; pointer-events: none; }
.dk--kpi > p { position: relative; z-index: 1; }
.spark__line { stroke-dasharray: 260; stroke-dashoffset: 260; }

.areachart { width: 100%; height: 210px; }
.area-line { stroke-dasharray: 700; stroke-dashoffset: 700; }
.area-fill { opacity: 0; }
.area-dots circle { opacity: 0; }
.axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; color: var(--txt-4); }

.funnel, .batches { display: grid; gap: 11px; }
.funnel li, .batches li { display: grid; grid-template-columns: 118px 1fr 46px; align-items: center; gap: 13px; font-size: 12.5px; }
.funnel li > span:first-child, .batches li > span:first-child { color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funnel i, .batches i {
  height: 8px; border-radius: 5px; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--violet-l));
  transition: width 1.2s var(--ease);
}
.funnel i.is-win { background: linear-gradient(90deg, var(--mint), var(--cyan)); }
.batches i.is-low { background: linear-gradient(90deg, var(--amber), var(--rose)); }
.funnel em, .batches em { font-style: normal; font-weight: 700; text-align: right; color: var(--txt-2); font-variant-numeric: tabular-nums; }

.ring-wrap { position: relative; display: grid; place-items: center; margin: 6px 0 14px; }
.ring { width: 132px; height: 132px; }
.ring__val { stroke-dasharray: 314; stroke-dashoffset: 314; }
.ring-center { position: absolute; text-align: center; }
.ring-center strong { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ring-center em { font-size: 11px; font-style: normal; color: var(--txt-4); }
.ring-legend { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--txt-4); margin-top: auto; }

.faculty { display: grid; gap: 9px; }
.faculty li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-sm); background: var(--glass); }
.faculty strong { display: block; font-size: 13px; font-weight: 600; }
.faculty em { display: block; font-size: 11px; font-style: normal; color: var(--txt-4); margin-top: 1px; }
.faculty li > div { flex: 1; min-width: 0; }
.faculty .chip { margin-left: auto; }

.bars { display: flex; align-items: flex-end; gap: 14px; height: 180px; padding-top: 10px; }
.bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 8px; }
.bars__col i {
  width: 100%; max-width: 46px; height: 0; border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, var(--brand-l), rgba(99,102,241,.25));
  transition: height 1.1s var(--ease);
}
.bars__col i.is-low { background: linear-gradient(180deg, var(--amber), rgba(251,113,133,.25)); }
.bars__col span { font-size: 10.5px; color: var(--txt-4); font-weight: 600; }
.bars__col em { font-size: 12px; font-style: normal; font-weight: 700; color: var(--txt-2); font-variant-numeric: tabular-nums; order: -1; }

.growth { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.growth li { padding: 15px; border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--stroke); position: relative; }
.growth strong { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.growth em { display: block; font-size: 11px; font-style: normal; color: var(--txt-4); margin-top: 4px; }
.growth span { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; }

/* Business health score — the one number read first */
.health__score { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 16px; }
.health__score strong { font-size: clamp(2.6rem, 4vw, 3.4rem); font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; line-height: 1; }
.health__score span { font-size: 14px; font-weight: 600; color: var(--txt-4); }

.health__track { position: relative; height: 9px; border-radius: 6px; background: var(--ink-600); overflow: hidden; }
.health__fill {
  display: block; height: 100%; width: 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--brand), var(--violet-l) 60%, var(--mint));
  transition: width 1.4s var(--ease);
}
/* Band boundaries at 75 and 90, so the score is readable against thresholds */
.health__mark { position: absolute; top: -2px; bottom: -2px; left: var(--at); width: 1px; background: var(--ink-950); opacity: .85; }
.health__bands { display: flex; justify-content: space-between; margin: 7px 0 18px; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-4); }

.health-inputs { display: grid; gap: 9px; }
.health-inputs li { display: grid; grid-template-columns: 1fr 74px 26px; align-items: center; gap: 12px; font-size: 12.5px; }
.health-inputs li > span { color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.health-inputs i {
  height: 6px; border-radius: 4px; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--violet-l));
  transition: width 1.2s var(--ease);
}
.health-inputs i.is-low { background: linear-gradient(90deg, var(--amber), var(--rose)); }
.health-inputs em { font-style: normal; font-weight: 700; text-align: right; color: var(--txt-2); font-variant-numeric: tabular-nums; }

/* Morning brief — what happened, then what to do about it */
.brief { display: grid; gap: 11px; margin-bottom: 22px; }
.brief li { display: flex; align-items: flex-start; gap: 13px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--stroke); }
.brief__ico {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px;
  font-size: 11px; font-weight: 700; background: var(--glass-2); border: 1px solid var(--stroke); color: var(--txt-3);
}
.brief__ico--mint  { background: rgba(52,211,153,.14);  border-color: rgba(52,211,153,.3);  color: var(--mint); }
.brief__ico--amber { background: rgba(251,191,36,.14);  border-color: rgba(251,191,36,.3);  color: var(--amber); }
.brief__ico--rose  { background: rgba(251,113,133,.14); border-color: rgba(251,113,133,.3); color: var(--rose); }
.brief__ico--brand { background: rgba(99,102,241,.16);  border-color: rgba(99,102,241,.32); color: var(--brand-l); }
.brief strong { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.brief em { display: block; font-size: 12px; font-style: normal; color: var(--txt-4); margin-top: 3px; line-height: 1.55; }

.brief__k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-4); margin-bottom: 12px; }
.brief-actions { display: grid; gap: 8px; margin-top: auto; }
.brief-actions li { display: flex; align-items: center; gap: 13px; }
.brief-actions__n {
  display: grid; place-items: center; flex: none; width: 23px; height: 23px; border-radius: 50%;
  font-size: 11px; font-weight: 700; color: var(--violet-l);
  background: rgba(139,92,246,.13); border: 1px solid rgba(139,92,246,.28);
}
.brief-actions strong { display: block; font-size: 13px; font-weight: 500; color: var(--txt-2); letter-spacing: -.005em; }
.brief-actions em { display: block; font-size: 11px; font-style: normal; color: var(--txt-4); margin-top: 2px; }

/* Risk centre — severity, impact, action, owner, deadline */
.rc { display: grid; gap: 11px; }
.rc__item { padding: 15px 16px; border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--stroke); border-left: 2px solid var(--ink-500); }
.rc__item--high { border-left-color: var(--rose); }
.rc__top { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; flex-wrap: wrap; }
.rc__top strong { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.rc__impact, .rc__act { display: flex; gap: 10px; font-size: 12px; color: var(--txt-3); line-height: 1.55; margin-bottom: 6px; }
.rc__impact > span, .rc__act > span {
  flex: none; width: 46px; font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--txt-4); padding-top: 2px;
}
.rc__item footer { display: flex; gap: 18px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--stroke); }
.rc__item footer em { font-size: 11px; font-style: normal; color: var(--txt-4); font-weight: 500; }
.rc__item footer em:last-child { margin-left: auto; }

/* Action centre — every insight ends in a button */
.task { display: grid; gap: 10px; }
.task li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--stroke); }
.task li > div { flex: 1; min-width: 0; }
.task strong { display: block; font-size: 13px; font-weight: 600; }
.task em { display: block; font-size: 11px; font-style: normal; color: var(--txt-4); margin-top: 2px; }
.task .qa { flex: none; padding: 9px 15px; font-size: 12px; }

/* ── 13  Ch.09 AUTOMATION ───────────────────────────────── */
.auto-list { display: grid; gap: 14px; }
.flow {
  display: grid; grid-template-columns: 1fr 200px 1fr; align-items: center; gap: 20px;
  padding: 20px 26px; border-radius: var(--r-lg);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.flow:hover { border-color: var(--stroke-2); transform: translateY(-2px); }
.flow--hero { background: linear-gradient(140deg, rgba(139,92,246,.13), rgba(99,102,241,.05)); border-color: rgba(139,92,246,.26); }
.flow__trigger, .flow__action { display: flex; align-items: center; gap: 14px; min-width: 0; }
.flow__action { justify-content: flex-end; text-align: right; flex-direction: row-reverse; }
.flow__ico {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; flex: none;
  font-size: 17px; background: var(--glass-2); border: 1px solid var(--stroke);
}
.flow__ico--out { background: linear-gradient(140deg, rgba(52,211,153,.2), rgba(34,211,238,.1)); border-color: rgba(52,211,153,.28); }
.flow__ico--warn { background: rgba(251,113,133,.16); border-color: rgba(251,113,133,.3); }
.flow strong { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.flow em { display: block; font-size: 12px; font-style: normal; color: var(--txt-4); margin-top: 3px; }
.flow__wire svg { width: 100%; height: 24px; overflow: visible; }
.wire { stroke: var(--ink-600); stroke-width: 1.5; stroke-dasharray: 4 5; }
.pulse { fill: var(--cyan); filter: drop-shadow(0 0 6px rgba(34,211,238,.9)); opacity: 0; }

/* ── 14  Ch.10 AI LAYER ─────────────────────────────────── */
.ai-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.ai-card {
  grid-column: span 4; padding: 28px; border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 15px;
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.ai-card:hover { transform: translateY(-4px); border-color: rgba(139,92,246,.3); box-shadow: var(--sh-lg), 0 0 60px -30px rgba(139,92,246,.7); }
.ai-card--wide { grid-column: span 6; }
.ai-card header { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ai-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--violet-l); padding: 5px 11px; border-radius: 7px;
  background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.26);
}
.ai-tag::before { content: "✦"; font-size: 10px; }
.ai-save { font-size: 11px; color: var(--txt-4); font-weight: 500; }
.ai-card h3 { font-size: 17px; font-weight: 700; letter-spacing: -.025em; }
.ai-out {
  font-size: 13.8px; line-height: 1.68; color: var(--txt-2);
  padding: 16px 18px; border-radius: var(--r-md);
  background: rgba(0,0,0,.28); border: 1px solid var(--stroke);
  min-height: 3em;
}
.ai-out::after {
  content: "▌"; color: var(--violet-l); opacity: 0; margin-left: 1px;
}
.ai-out.is-typing::after { opacity: 1; animation: caret .9s step-end infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ai-note { font-size: 12px; color: var(--txt-4); font-style: italic; margin-top: auto; }

.ai-topics { display: grid; gap: 11px; }
.ai-topics li { display: grid; grid-template-columns: 1fr 90px 38px; align-items: center; gap: 12px; font-size: 12.5px; color: var(--txt-3); }
.ai-topics i { height: 7px; border-radius: 4px; width: 0; background: linear-gradient(90deg, var(--brand), var(--violet-l)); transition: width 1.1s var(--ease); }
.ai-topics i.is-low { background: linear-gradient(90deg, var(--rose), var(--amber)); }
.ai-topics em { font-style: normal; font-weight: 700; text-align: right; color: var(--txt-2); font-variant-numeric: tabular-nums; }

.ai-list { display: grid; gap: 11px; }
.ai-list li { font-size: 13.5px; line-height: 1.55; color: var(--txt-3); padding-left: 18px; position: relative; }
.ai-list li::before { content: "→"; position: absolute; left: 0; color: var(--violet-l); }
.ai-list strong { color: var(--txt); font-weight: 600; }
.ai-list em { font-style: normal; color: var(--txt-4); }

.risk { display: grid; gap: 9px; }
.risk li { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--stroke); }
.risk li > div { flex: 1; min-width: 0; }
.risk strong { display: block; font-size: 13px; font-weight: 600; }
.risk em { display: block; font-size: 11px; font-style: normal; color: var(--txt-4); margin-top: 1px; }

.ai-actions { display: flex; gap: 10px; margin-top: auto; }
.ai-actions .qa { flex: 1; justify-content: center; }

/* ── 15  Ch.11 FUTURE VISION ────────────────────────────── */
.chapter--future::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 55% 45% at 50% 42%, rgba(34,211,238,.08), transparent 70%);
}
.orbit-stage { position: relative; width: 100%; max-width: 900px; margin: 0 auto 100px; aspect-ratio: 900 / 620; }
.orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit-ring { opacity: .7; }
.olink { stroke-dasharray: 210; stroke-dashoffset: 210; opacity: .6; }

.orbit-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: 176px; height: 176px; justify-content: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(99,102,241,.3), rgba(13,16,25,.95));
  border: 1px solid rgba(99,102,241,.36);
  box-shadow: 0 0 90px -18px rgba(99,102,241,.75), inset 0 0 40px rgba(139,92,246,.16);
  backdrop-filter: blur(18px);
}
.orbit-core__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(140deg, var(--brand), var(--violet)); color: #fff; }
.orbit-core__mark svg { width: 19px; height: 19px; }
.orbit-core strong { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.orbit-core em { font-size: 10.5px; font-style: normal; color: var(--txt-4); letter-spacing: .04em; }

.orbit-node {
  position: absolute; transform: translate(-50%, -50%); width: 210px; text-align: center;
  padding: 18px 20px; border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--stroke); backdrop-filter: blur(18px); box-shadow: var(--sh-md);
}
.orbit-node h4 { font-size: 14px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 5px; }
.orbit-node p { font-size: 12px; color: var(--txt-4); line-height: 1.45; }
.orbit-node--top    { top: 17.4%; left: 50%; }
.orbit-node--right  { top: 50%;   left: 72.4%; }
.orbit-node--bottom { top: 82.6%; left: 50%; }
.orbit-node--left   { top: 50%;   left: 27.6%; }

.metrics { text-align: center; }
.metrics__kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-4); margin-bottom: 34px; }
.metrics ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.metrics li { padding: 30px 20px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--stroke); }
.metrics strong { display: block; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--txt); font-variant-numeric: tabular-nums; }
.metrics em { display: block; font-size: 12.5px; font-style: normal; color: var(--txt-4); margin-top: 11px; line-height: 1.45; }

/* ── 16  Ch.12 CLOSING ──────────────────────────────────── */
.chapter--close::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(99,102,241,.16), transparent 70%);
}
.close { text-align: center; max-width: 900px; margin-inline: auto; padding-bottom: 110px; }
.close__title { font-size: clamp(2.2rem, 5vw, 4.3rem); margin-bottom: 36px; }
.close__body { font-size: clamp(1rem, 1.3vw, 1.18rem); color: var(--txt-3); line-height: 1.72; max-width: 62ch; margin: 0 auto 22px; }
.close__body--strong { color: var(--txt-2); }
.close__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 42px 0 88px; }
.close__sign { font-size: clamp(1.6rem, 2.8vw, 2.5rem); line-height: 1.25; }

.foot { border-top: 1px solid var(--stroke); padding: 30px 0; }
.foot__inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 12px; color: var(--txt-4); }

/* ── 17  RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1280px) {
  .shell { padding-inline: 32px; }
  .nav__inner { padding-inline: 32px; }
  .rail { right: 16px; }
  .dk--kpi { grid-column: span 3; }
  .cc { width: 286px; }
}

@media (max-width: 1100px) {
  .rail { display: none; }
  .chapter { padding: 8.5rem 0; }
  .split, .phone-row, .parent-row { grid-template-columns: 1fr; gap: 36px; }
  .phone, .parent-aside { position: static; }
  .sec-head--split { flex-direction: column; align-items: flex-start; gap: 26px; }
  .sec-sub--right { max-width: 62ch; }

  .cost-card, .cost-card--wide, .cost-card--stack { grid-column: span 6; }
  .ai-card, .ai-card--wide { grid-column: span 6; }

  .dk--kpi { grid-column: span 6; }
  .dk--chart, .dk--pipe, .dk--ring, .dk--batches, .dk--faculty, .dk--perf, .dk--growth,
  .dk--health, .dk--brief, .dk--risks, .dk--actions { grid-column: span 12; }

  /* Turning point becomes a readable stack */
  .turn__arena { aspect-ratio: auto; display: grid; gap: 14px; max-width: 560px; }
  .turn__links { display: none; }
  .profile { position: static; transform: none; width: 100%; }
  .orbit { position: static; transform: none; width: 100%; opacity: 1; }

  /* Chaos field becomes a stack */
  .chaos__field { height: auto; display: grid; gap: 12px; max-width: 560px; margin-inline: auto; }
  .cc { position: static; width: 100%; transform: none; opacity: 0; }
  /* The stack has real height now, so the punchline must flow, not overlay */
  .chaos__punch { position: static; transform: none; margin-top: 44px; }

  .orbit-stage { aspect-ratio: auto; display: grid; gap: 16px; max-width: 460px; }
  .orbit-svg { display: none; }
  .orbit-core { position: static; width: 100%; height: auto; border-radius: var(--r-lg); padding: 26px; }
  .orbit-node { position: static; width: 100%; }
  /* These two are centred on desktop with translate(-50%,-50%). Any GSAP
     tween writes that translate inline, and inline beats a plain media-query
     declaration — which drags every card half its width off the left edge.
     Stacked layout animates opacity only, so hard-stopping transform here
     costs no motion and cannot be undone by an inline style. */
  .orbit-core, .orbit-node { transform: none !important; }

  .metrics ul { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .nav__links { display: none; }
  .compare { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; gap: 14px; text-align: left; }
  .flow__action { flex-direction: row; justify-content: flex-start; text-align: left; }
  .flow__wire { transform: rotate(90deg); height: 34px; display: grid; place-items: center; }
  .flow__wire svg { width: 34px; }
  .bars { gap: 8px; height: 150px; }
}

@media (max-width: 680px) {
  .shell, .nav__inner { padding-inline: 20px; }
  .chapter { padding: 6.5rem 0; }
  .chapter--close { padding: 6.5rem 0 0; }
  .hero { padding-block: 130px 70px; }
  .sec-head { margin-bottom: 54px; }
  .sec-outro { margin-top: 62px; }

  .cost-card, .cost-card--wide, .cost-card--stack,
  .ai-card, .ai-card--wide, .dk, .dk--kpi { grid-column: span 12; }
  .cost-card, .scard, .ai-card, .parent-aside, .compare__col { padding: 22px; }

  .profile__stats { grid-template-columns: repeat(2, 1fr); }
  .mini-grid, .growth, .quick-actions { grid-template-columns: repeat(2, 1fr); }
  .metrics ul { grid-template-columns: 1fr; }
  .phone__frame { width: 100%; max-width: 330px; }
  .bars { gap: 6px; height: 130px; }
  .bars__col span { font-size: 9px; }
  .funnel li, .batches li { grid-template-columns: 92px 1fr 40px; gap: 10px; font-size: 11.5px; }
  .health-inputs li { grid-template-columns: 1fr 54px 24px; gap: 10px; font-size: 11.5px; }
  .rc__impact, .rc__act { flex-direction: column; gap: 3px; }
  .rc__impact > span, .rc__act > span { width: auto; padding-top: 0; }
  .perf__row { grid-template-columns: 84px 1fr 48px; }
  .foot__inner { flex-direction: column; gap: 8px; }

  /* Brand + CTA have to share a phone-width row once the links are gone */
  .nav__inner { gap: 12px; }
  .nav__mark { width: 28px; height: 28px; }
  .nav__mark svg { width: 16px; height: 16px; }
  .nav__word { font-size: 15px; }
  .nav__cta { font-size: 12px; padding: 8px 14px; }

  /* The dashboard frame carries three levels of padding — trim each a step
     so the KPI numbers keep their tabular alignment instead of wrapping */
  .dash__grid { padding: 14px; gap: 12px; }
  .dk { padding: 16px; }
  .faculty strong, .task strong, .rc__top strong { overflow-wrap: anywhere; }
}

/* Narrowest common device (iPhone SE, 320px) */
@media (max-width: 420px) {
  .shell, .nav__inner { padding-inline: 16px; }
  .nav__inner { gap: 10px; }
  /* The CTA is the conversion path, so it keeps its full width and the
     wordmark truncates first if the row still cannot fit. */
  .nav__brand { gap: 8px; min-width: 0; overflow: hidden; }
  .nav__word { font-size: 14px; white-space: nowrap; }
  .nav__cta { font-size: 11px; padding: 6px 10px; flex: none; }
  .orbit-stage { margin-bottom: 64px; }
  .metrics li { padding: 24px 16px; }
}

/* ── 18  REDUCED MOTION & PRINT ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .cc, .orbit, .chaos__punch, .turn__punch, .area-fill { opacity: 1 !important; }
  /* Cards stay visible, so the punchline must not sit on top of them */
  .chaos__punch { position: static; transform: none; margin-top: 44px; }
  .area-dots circle { opacity: 1 !important; }
  .tlink, .olink, .area-line, .spark__line, .ring__val, .leak-got { stroke-dashoffset: 0 !important; }
  .cnode { opacity: 1 !important; }
}

@media print {
  .aurora, .grain, .rail, .nav, .scroll-cue { display: none !important; }
  body { background: #fff; color: #000; }
}