/* ==========================================================================
   Edoovi ERP — theme stylesheet
   Generated from the design-system sources. Order matters: tokens, then
   global primitives, then component styles.
   ========================================================================== */

/* ---------- design tokens ---------- */
/* ============================================================
   EDOOVI ERP — DESIGN TOKENS
   Colours extracted from the live edoovierp.com CSS + logo pixels.
   Nothing here is invented: every brand hex appears on the old site.
   ============================================================ */

/* ── Google Sans (self-hosted) ──────────────────────────────
   Self-hosted rather than loaded from fonts.googleapis.com. The link-tag
   version costs a render-blocking stylesheet on one third-party origin plus
   the font file on a second — two DNS lookups, two TLS handshakes and a
   request that has to finish before text can paint. Preconnect softens that;
   it does not remove it. Served from our own origin the font is one request
   on a connection the browser has already opened, and it can be preloaded.

   One variable file replaces the seven static Lufga cuts: 55 KB instead of
   224 KB, and one request instead of up to seven.

   The weight axis stops at 700, so nothing on the site asks for more — the
   800s and the single 900 were rewritten to 700 rather than left to clamp
   silently. Latin subset only; no italic cut is loaded because the site does
   not set font-style: italic anywhere. */
@font-face {
  font-family: "Google Sans";
  src: url("../fonts/GoogleSans-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Brand core (frequency-ranked from live CSS) ─────────── */
  --cyan:         #02D9FE;   /* logo primary */
  --cyan-600:     #00BBF5;   /* 52 uses — most-used colour on the old site */
  --cyan-400:     #39C0FF;
  --cyan-ink:     #0077A8;   /* AA-safe cyan for text on light (5.0:1) */
  --indigo:       #393A8C;   /* 47 uses */
  --indigo-700:   #2A2B6E;
  --midnight:     #190F4E;   /* 21 uses */
  --midnight-900: #13144A;
  --ink:          #0B0A1F;   /* derived: deepest canvas */

  --blue:         #2D86FF;
  --blue-900:     #003399;
  --violet:       #6148FA;
  --ember:        #F65916;   /* sole warm accent — urgency only */

  --tint-cyan:    #EBFAFF;
  --tint-cyan-2:  #E4F7FD;
  --tint-sky:     #C0F0FF;
  --tint-blue:    #DBE8FF;
  --tint-blue-2:  #A0C8FF;

  --n-900: #1C1B1F;  --n-700: #363637;  --n-600: #454444;
  --n-500: #4E4E4E;  --n-400: #8A94A6;  --n-300: #D9D9D9;
  --n-200: #E8EEF4;  --n-100: #F4F8FB;  --n-0:   #FFFFFF;

  /* ── Semantic surfaces (flip in dark mode) ───────────────── */
  --s-pure:   #FFFFFF;
  --s-frost:  #F6FBFF;
  --s-halo:   #EBFAFF;
  --s-card:   #FFFFFF;
  --s-raised: #FFFFFF;

  --t-primary:   #14131F;
  --t-secondary: #4E5566;
  --t-muted:     #6B7385;
  --t-on-dark:   #FFFFFF;
  --t-on-dark-2: #B9C4DA;

  --border:      #E2ECF5;
  --border-soft: #EDF3F9;

  --accent-text: var(--cyan-ink);   /* readable accent on light surfaces */
  --accent:      var(--cyan-600);

  /* ── Always-dark surfaces (identical in both modes) ──────── */
  --s-midnight: radial-gradient(120% 100% at 50% 0%, #241a63 0%, var(--midnight) 45%, var(--ink) 100%);
  --s-ink:      #13144A;
  --aurora:     linear-gradient(135deg, var(--midnight) 0%, var(--indigo) 42%, var(--cyan-600) 100%);
  --aurora-soft:linear-gradient(135deg, rgba(25,15,78,.9) 0%, rgba(57,58,140,.85) 45%, rgba(0,187,245,.8) 100%);

  /* ── Type scale ──────────────────────────────────────────── */
  /* Capped so the whole hero — eyebrow, H1, lede, CTAs, trust strip —
     lands inside the first viewport on a laptop instead of pushing the
     buttons below the fold. */
  /* Retuned after a full-page audit: 18 distinct sizes were in play and 83% of
     the body text sat below 16px, with a whole sub-scale of 8–11px labels
     hardcoded outside these tokens. The headings were the other half of the
     problem — an H2 topped out at 54px, and the CTA's H2 rendered at 68px,
     larger than the actual H1.

     Three prose tiers now, and one label tier. Nothing that carries a sentence
     is allowed below 15px; --f-label is for uppercase tracked labels only and
     is the floor for the whole sheet. */
  /* Second pass, 29 Jul: still reading as oversized on a laptop, and the hero
     now has to hold a slider inside one viewport — which the display size was
     eating. Down another notch across the board. */
  --f-display: clamp(2rem, 3.5vw, 3rem);           /* 32 → 48 */
  --f-h1:      clamp(1.875rem, 3.2vw, 2.75rem);    /* 30 → 44 — stays under display */
  --f-h2:      clamp(1.625rem, 2.6vw, 2.25rem);    /* 26 → 36 */
  --f-h3:      clamp(1.1875rem, 1.5vw, 1.4375rem); /* 19 → 23 */
  --f-h4:      clamp(1.0625rem, 1.1vw, 1.125rem);  /* 17 → 18 */
  --f-lead:    clamp(1.0625rem, 1.35vw, 1.1875rem);/* 17 → 19 */
  --f-body:    1rem;        /* 16 — reading text */
  --f-sm:      1rem;        /* 16 — supporting prose, buttons, nav */
  --f-xs:      0.9375rem;   /* 15 — dense card and list prose */
  --f-label:   0.8125rem;   /* 13 — uppercase tracked labels only */

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.65;

  --ls-display: -0.038em;
  --ls-h2:      -0.03em;
  --ls-h3:      -0.02em;
  --ls-eyebrow:  0.14em;

  /* ── Space / radius / elevation ──────────────────────────── */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px; --sp-11: 160px;

  --r-sm: 8px;  --r-md: 14px; --r-lg: 22px;
  --r-xl: 32px; --r-2xl: 44px; --r-pill: 9999px;

  --sh-card:  0 18px 48px -12px rgba(25,15,78,.16);
  --sh-lift:  0 32px 80px -16px rgba(25,15,78,.28);
  --sh-glow:  0 0 60px rgba(2,217,254,.28);
  --sh-glow-lg: 0 0 120px rgba(2,217,254,.22);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.08);

  /* ── Layout ──────────────────────────────────────────────── */
  --container: 1280px;
  --container-wide: 1440px;
  --gutter: clamp(20px, 4vw, 48px);
  /* Was clamp(72px, 9vw, 150px) — 150px top and bottom put roughly a third of
     a laptop viewport of nothing between every two sections, and on a phone
     72px each side meant a lot of scrolling past empty space. */
  --section-y: clamp(52px, 6vw, 104px);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-inout:  cubic-bezier(.65,0,.35,1);
  --d-fast: .18s;  --d-base: .35s;  --d-slow: .6s;  --d-xslow: 1.1s;

  --nav-h: 76px;
  color-scheme: light;
}

/* ── Dark mode ─────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --s-pure:   #0B0A1F;
  --s-frost:  #0F0E26;
  --s-halo:   #141232;
  --s-card:   #16152F;
  --s-raised: #1B1A38;

  --t-primary:   #F3F6FC;
  --t-secondary: #B4BDD2;
  --t-muted:     #8C95AC;

  --border:      #262445;
  --border-soft: #1E1D3A;

  --accent-text: var(--cyan-400);
  --accent:      var(--cyan);

  --n-100: #131228;
  --n-200: #1E1D3A;

  --sh-card: 0 18px 48px -12px rgba(0,0,0,.55);
  --sh-lift: 0 32px 80px -16px rgba(0,0,0,.65);

  color-scheme: dark;
}

/* Light is the default, deliberately. Dark applies only when the visitor
   opts in via the toggle (persisted as data-theme="dark"), never from the
   OS preference — the brand's default presentation is the light one. */

/* ---------- global primitives ---------- */


/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  /* `clip` (not `hidden`) so decorative orbs/mesh can never create a
     horizontal scrollbar, without turning the root into a scroll container. */
  overflow-x: clip;
}

body {
  font-family: "Google Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--f-body);
  line-height: var(--lh-body);
  color: var(--t-primary);
  background: var(--s-pure);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: var(--cyan); color: var(--midnight); }

/* Visible, high-contrast focus ring — WCAG 2.2 */
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 999;
  background: var(--midnight); color: #fff;
  padding: 12px 20px; border-radius: var(--r-md); font-weight: 600;
  transition: top var(--d-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }

/* Every section gets its rhythm and its clipping by default.
   This is a base rule rather than a `.section` class you have to remember —
   forgetting it silently produced zero-padding, unclipped sections before. */
main > section {
  position: relative;
  padding-block: var(--section-y);
  overflow: clip;
}
/* The nav is position:fixed, so the first section on every page has to reserve
   its height up top or its content slides under the bar. Heroes that set their
   own top padding (the homepage hero, legal, 404, apps) already clear it; the
   rest relied on --section-y, whose clamp floor (52px) is shorter than the nav
   (76px) on narrow viewports, so the breadcrumb tucked behind the header on
   mobile. :where() keeps this at the specificity of the generic rule above, so
   it is a fallback only — it fixes the heroes that had no clearance and never
   overrides one that set its own. */
main > section:where(:first-of-type) { padding-top: calc(var(--nav-h) + clamp(24px, 2.6vw, 40px)); }
.section { position: relative; padding-block: var(--section-y); overflow: clip; }

/* ── Surfaces (the 6-surface rhythm from the plan) ─────────── */
.s-pure     { background: var(--s-pure);  color: var(--t-primary); }
.s-frost    { background: var(--s-frost); color: var(--t-primary); }
.s-halo     { background: var(--s-halo);  color: var(--t-primary); }
.s-ink      { background: var(--s-ink);   color: var(--t-on-dark); }
.s-midnight { background: var(--s-midnight); color: var(--t-on-dark); }
.s-aurora   { background: var(--aurora);  color: var(--t-on-dark); }

.s-ink, .s-midnight, .s-aurora { --t-primary: #fff; --t-secondary: var(--t-on-dark-2); --t-muted: #93A0BE; --accent-text: var(--cyan); --border: rgba(255,255,255,.12); --s-card: rgba(255,255,255,.045); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--f-label); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan-600), transparent);
}

.h-display { font-size: var(--f-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.h1 { font-size: var(--f-h1); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.h2 { font-size: var(--f-h2); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-h2); }
.h3 { font-size: var(--f-h3); font-weight: 600; line-height: 1.25; letter-spacing: var(--ls-h3); }
.h4 { font-size: var(--f-h4); font-weight: 600; line-height: 1.35; }
.lead { font-size: var(--f-lead); line-height: 1.6; color: var(--t-secondary); }
.muted { color: var(--t-muted); }
.small { font-size: var(--f-sm); }

/* The 40–60 word AEO answer paragraph that opens key pages */
.answer-lede { font-size: var(--f-lead); line-height: 1.62; color: var(--t-secondary); max-width: 62ch; }

.grad-text {
  background: linear-gradient(100deg, var(--cyan) 0%, var(--cyan-400) 30%, var(--tint-blue-2) 70%, var(--cyan) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: grad-pan 9s linear infinite;
}
@keyframes grad-pan { to { background-position: 220% 0; } }

.section-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head .h2 { margin-block: 16px 18px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  --btn-bg: var(--cyan-600); --btn-fg: #04121F;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 15px 28px; border: 0; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--f-sm); font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform var(--d-base) var(--ease-spring), box-shadow var(--d-base) var(--ease-out), background-color var(--d-base) var(--ease-out);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  translate: -120% 0; transition: translate .75s var(--ease-out);
}
.btn:hover::after { translate: 120% 0; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(0,187,245,.6); }
.btn:active { transform: translateY(0) scale(.985); }

.btn-primary { --btn-bg: var(--cyan-600); --btn-fg: #04121F; }
.btn-ember   { --btn-bg: var(--ember);    --btn-fg: #fff; }
.btn-ember:hover { box-shadow: 0 14px 34px -10px rgba(246,89,22,.55); }

.btn-ghost {
  background: transparent; color: var(--t-primary);
  border: 1.5px solid var(--border);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--cyan-600); color: var(--accent-text); box-shadow: none; transform: translateY(-2px); }
.s-midnight .btn-ghost, .s-ink .btn-ghost, .s-aurora .btn-ghost {
  color: #fff; border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.04);
}
.s-midnight .btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

.btn-lg { padding: 18px 34px; font-size: 1rem; }

/* Arrow that slides on hover */
.btn .arw { transition: translate var(--d-base) var(--ease-spring); }
.btn:hover .arw { translate: 4px 0; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  position: relative; border-radius: var(--r-lg);
  background: var(--s-card); border: 1px solid var(--border);
  padding: clamp(22px, 2.4vw, 32px);
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-card); border-color: color-mix(in srgb, var(--cyan-600) 45%, transparent); }

.glass {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--sh-inset);
}

/* Spotlight that follows the pointer across a card */
.spot { position: relative; overflow: hidden; }
.spot::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--cyan) 20%, transparent), transparent 62%);
  opacity: 0; transition: opacity var(--d-base) var(--ease-out); z-index: 0;
}
.spot:hover::before { opacity: 1; }
.spot > * { position: relative; z-index: 1; }

/* 3D tilt — driven by JS custom props */
.tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform var(--d-base) var(--ease-out);
  transform-style: preserve-3d;
}

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan-600) 28%, transparent);
  font-size: var(--f-label); font-weight: 500; color: var(--accent-text);
}

/* ============================================================
   AMBIENT DECOR
   ============================================================ */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  opacity: .5; 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='.42'/%3E%3C/svg%3E");
}

/* Every orb outside the homepage was invisible: the per-section rules set
   `top/right/width` and stopped, so a `width: 46vw` orb had no height and a
   `width: 640px` orb had no background. ~40 sections were painting nothing.
   Both defaults now live here, and any section that wants a different colour
   or a non-circular box still overrides them. */
.orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(2,217,254,.34), transparent 68%);
  filter: blur(70px); opacity: .5; z-index: 0;
  animation: float-orb 16s var(--ease-inout) infinite alternate;
}
@keyframes float-orb {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(36px,-46px,0) scale(1.16); }
}

/* Animated mesh gradient (conic, GPU-cheap) */
.mesh { position: absolute; inset: -30%; z-index: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(42% 42% at 22% 26%, rgba(2,217,254,.5), transparent 62%),
    radial-gradient(38% 38% at 78% 22%, rgba(97,72,250,.42), transparent 62%),
    radial-gradient(46% 46% at 62% 78%, rgba(57,58,140,.5), transparent 62%);
  animation: mesh-drift 22s var(--ease-inout) infinite alternate;
}
@keyframes mesh-drift {
  from { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) rotate(9deg) scale(1.12); }
}

/* While the mobile drawer is open, freeze the ambient decor behind it.
   The orbs are 500px boxes under a 70px blur and the meshes are large
   radial stacks — all animating on infinite loops. They stay composited
   even under an opaque drawer, which is what made the open stutter. */
html.nav-open .orb,
html.nav-open .mesh,
html.nav-open .marquee__track,
html.nav-open .chip { animation-play-state: paused; }

/* Section divider wave for dark→light transitions */
.wave { position: absolute; left: 0; right: 0; width: 100%; height: clamp(48px, 6vw, 110px); z-index: 1; display: block; }
.wave-top { top: -1px; }
.wave-bot { bottom: -1px; }

/* ============================================================
   SCROLL REVEAL

   The hidden state is CSS (so nothing flashes before JS runs) but the
   animation itself is driven by the Web Animations API in motion.ts.
   A class-swap CSS transition is fragile here: if the class lands in the
   same frame the element is first styled, the transition can register and
   then sit at its start value forever, leaving whole sections invisible.
   WAAPI has no such trigger dependency — it runs when told to.
   ============================================================ */
html.js [data-reveal]:not(.in) { opacity: 0; }
html:not(.js) [data-reveal] { opacity: 1; }

/* Kinetic typography — per-word rise, also animated from JS.
   Block-level: the eyebrow above is inline-flex, so an inline-block heading
   would sit beside it whenever the heading is short enough to fit. */
.kin { display: block; }
.kin .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.kin .w > span { display: inline-block; }
html.js .kin:not(.in) .w > span { transform: translateY(105%); }

/* Count-up numbers hold their box so nothing shifts (CLS = 0) */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Marquee */
.marquee { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee__track { display: flex; flex-shrink: 0; gap: var(--mq-gap, 64px); padding-right: var(--mq-gap, 64px); animation: mq var(--mq-dur, 42s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-100%); } }

/* ============================================================
   REDUCED MOTION — everything above degrades to static
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .kin .w > span { transform: none !important; }
  .marquee__track { animation: none; }
  .orb, .mesh { animation: none; }
}

/* ---------- Nav ---------- */
.nav {
    position: fixed; inset: 0 0 auto; z-index: 100;
    /* backdrop-filter is deliberately NOT transitioned: interpolating a
       full-viewport blur repaints the whole strip every frame, and
       blur(18px) → none cannot tween smoothly anyway. It switches instantly. */
    transition: transform var(--d-base) var(--ease-out),
                background-color var(--d-base) var(--ease-out),
                box-shadow var(--d-base) var(--ease-out);
  }
  .nav.is-stuck {
    background: color-mix(in srgb, var(--s-pure) 82%, transparent);
    backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 1px 0 var(--border-soft), 0 12px 34px -22px rgba(25,15,78,.4);
  }
  .nav.is-hidden { transform: translateY(-100%); }
  .nav.is-open { transform: none; }

  .nav__inner { height: var(--nav-h); display: flex; align-items: center; gap: clamp(12px, 2vw, 36px); }
  /* Logo swap: light cut over the dark hero, dark cut once the nav goes solid.
     In dark theme the nav surface stays dark, so the light cut always wins. */
  .nav__logo { position: relative; display: block; line-height: 0; }
  .nav__logo img {
    width: auto; height: 34px;
    transition: opacity var(--d-base) var(--ease-out);
  }
  .nav__logo-on-light { position: absolute; inset: 0; opacity: 0; }
  .nav.is-stuck .nav__logo-on-dark  { opacity: 0; }
  .nav.is-stuck .nav__logo-on-light { opacity: 1; }
  :root[data-theme="dark"] .nav.is-stuck .nav__logo-on-dark  { opacity: 1; }
  :root[data-theme="dark"] .nav.is-stuck .nav__logo-on-light { opacity: 0; }
  /* Mobile drawer is a light surface — show the dark cut while it is open */
  .nav.is-open .nav__logo-on-dark  { opacity: 0; }
  .nav.is-open .nav__logo-on-light { opacity: 1; }
  :root[data-theme="dark"] .nav.is-open .nav__logo-on-dark  { opacity: 1; }
  :root[data-theme="dark"] .nav.is-open .nav__logo-on-light { opacity: 0; }

  .nav__links { display: none; align-items: center; gap: 4px; margin-inline-start: auto; }
  @media (min-width: 1060px) { .nav__links { display: flex; } }

  .nav__item { position: relative; }
  .nav__link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; border: 0; background: none; cursor: pointer;
    border-radius: var(--r-pill);
    font-size: var(--f-sm); font-weight: 500; color: var(--t-secondary);
    transition: color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out);
  }
  .nav__link:hover { color: var(--t-primary); background: var(--n-100); }
  .nav__link svg { transition: rotate var(--d-base) var(--ease-out); }
  .has-mega:hover .nav__link svg, .has-mega:focus-within .nav__link svg { rotate: 180deg; }

  /* Before the nav goes solid it floats over the dark hero, so the controls
     must be light regardless of the active theme — otherwise the light-theme
     text colour lands on a near-black background and disappears. */
  .nav:not(.is-stuck):not(.is-open) .nav__link { color: rgba(255,255,255,.86); }
  .nav:not(.is-stuck):not(.is-open) .nav__link:hover { color: #fff; background: rgba(255,255,255,.12); }
  .nav:not(.is-stuck):not(.is-open) .theme-btn,
  .nav:not(.is-stuck):not(.is-open) .nav__burger {
    background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24); color: #fff;
  }
  .nav:not(.is-stuck):not(.is-open) .theme-btn:hover { color: var(--cyan); border-color: var(--cyan); }

  /* ── Mega menu ─────────────────────────────────────────── */
  .mega {
    position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 0;
    width: min(840px, 92vw); padding: 18px;
    /* Holds all eighteen features (six rows of three) without ever running past
       the fold on a short laptop — scrolls only if the viewport is tiny. */
    max-height: min(74vh, 580px); overflow-y: auto;
    border-radius: var(--r-xl); border: 1px solid var(--border);
    background: color-mix(in srgb, var(--s-pure) 96%, transparent);
    backdrop-filter: blur(24px) saturate(1.5);
    box-shadow: var(--sh-lift);
    opacity: 0; visibility: hidden; translate: -50% 10px;
    transition: opacity var(--d-base) var(--ease-out), translate var(--d-base) var(--ease-out), visibility var(--d-base);
  }
  .has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; translate: -50% 0; }

  .mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .mega__card { display: grid; gap: 3px; min-width: 0; padding: 10px 14px; border-radius: var(--r-md); transition: background-color var(--d-fast) var(--ease-out); }
  .mega__card:hover { background: var(--n-100); }
  /* One line each, so eighteen cards stay six tidy rows that never scroll. */
  .mega__name { font-size: var(--f-sm); font-weight: 600; color: var(--t-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mega__blurb { font-size: var(--f-xs); color: var(--t-muted); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .mega__all {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 12px; padding: 13px; border-radius: var(--r-md);
    background: var(--aurora); color: #fff;
    font-size: var(--f-sm); font-weight: 600;
  }
  .mega__all:hover .arw { translate: 4px 0; }
  .mega__all .arw { transition: translate var(--d-base) var(--ease-spring); }

  /* ── Actions ───────────────────────────────────────────── */
  .nav__actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
  @media (min-width: 1060px) { .nav__actions { margin-inline-start: 0; } }

  .theme-btn {
    display: grid; place-items: center; position: relative;
    width: 40px; height: 40px; border-radius: var(--r-pill);
    border: 1px solid var(--border); background: var(--s-pure); color: var(--t-secondary); cursor: pointer;
    transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), rotate var(--d-slow) var(--ease-spring);
  }
  .theme-btn:hover { color: var(--accent-text); border-color: var(--cyan-600); rotate: 25deg; }
  .theme-btn svg { position: absolute; transition: opacity var(--d-base) var(--ease-out), rotate var(--d-base) var(--ease-out), scale var(--d-base) var(--ease-out); }
  .theme-btn__moon { opacity: 0; rotate: -70deg; scale: .5; }
  :root[data-theme="dark"] .theme-btn__sun  { opacity: 0; rotate: 70deg; scale: .5; }
  :root[data-theme="dark"] .theme-btn__moon { opacity: 1; rotate: 0deg; scale: 1; }

  .nav__cta { display: none; }
  @media (min-width: 760px) { .nav__cta { display: inline-flex; padding: 12px 22px; } }

  /* Bars are absolutely centred, so the open state is an exact rotation
     about the button's midpoint rather than a guessed translate distance. */
  .nav__burger {
    position: relative; display: block;
    width: 44px; height: 44px; padding: 0; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--s-pure); color: var(--t-primary);
  }
  @media (min-width: 1060px) { .nav__burger { display: none; } }

  .nav__burger span {
    position: absolute; left: 50%; top: 50%;
    width: 18px; height: 2px; margin-left: -9px; margin-top: -1px;
    border-radius: 2px; background: currentColor;
    transition: transform var(--d-base) var(--ease-spring), opacity var(--d-fast) var(--ease-out);
  }
  .nav__burger span:nth-child(1) { transform: translateY(-6px); }
  .nav__burger span:nth-child(3) { transform: translateY(6px); }

  .nav.is-open .nav__burger span:nth-child(1) { transform: translateY(0) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
  .nav.is-open .nav__burger span:nth-child(3) { transform: translateY(0) rotate(-45deg); }

  /* While the drawer is open the bar sits on a solid surface.
     backdrop-filter MUST be dropped here: it makes .nav a containing block for
     position:fixed descendants, so once the nav went sticky the drawer resolved
     its `inset` against the 76px-tall nav instead of the viewport and collapsed.
     Solid background means we lose nothing visually. */
  .nav.is-open {
    background: var(--s-pure);
    box-shadow: 0 1px 0 var(--border-soft);
    backdrop-filter: none;
  }

  /* ── Mobile drawer ─────────────────────────────────────── */
  .drawer {
    position: fixed; inset: var(--nav-h) 0 0; z-index: 99;
    background: var(--s-pure);
    padding: clamp(20px, 5vw, 40px) var(--gutter) 40px;
    opacity: 0; visibility: hidden; translate: 0 -12px;
    /* visibility flips instantly on open and only after the fade on close,
       so it never fights the opacity tween mid-animation. */
    transition: opacity var(--d-base) var(--ease-out),
                translate var(--d-base) var(--ease-out),
                visibility 0s linear var(--d-base);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open .drawer {
    opacity: 1; visibility: visible; translate: 0 0;
    transition: opacity var(--d-base) var(--ease-out),
                translate var(--d-base) var(--ease-out),
                visibility 0s linear 0s;
  }
  .drawer nav { display: grid; gap: 2px; }
  .drawer a {
    padding: 16px 4px; border-bottom: 1px solid var(--border-soft);
    font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--t-primary);
  }
  .drawer__cta { margin-top: 24px; border-bottom: 0; justify-content: center; font-size: 1rem; }
  @media (min-width: 1060px) { .drawer { display: none; } }

/* ---------- StoreBadge ---------- */
.sb {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 9px 17px 10px; border-radius: 11px;
    border: 1px solid transparent;
    transition: transform var(--d-base) var(--ease-spring),
                box-shadow var(--d-base) var(--ease-out),
                border-color var(--d-base) var(--ease-out);
  }
  .sb:hover { transform: translateY(-2px); }
  .sb:active { transform: translateY(0) scale(.985); }

  .sb--dark {
    background: #0A0A16; color: #fff; border-color: rgba(255,255,255,.22);
  }
  .sb--dark:hover { border-color: rgba(2,217,254,.6); box-shadow: 0 14px 30px -12px rgba(0,0,0,.75); }

  .sb--light {
    background: #fff; color: #0A0A16; border-color: var(--border);
  }
  .sb--light:hover { border-color: var(--cyan-600); box-shadow: var(--sh-card); }

  .sb__mark { flex: none; }
  .sb__txt { display: grid; line-height: 1.15; text-align: left; }
  /* The one place the label floor does not apply. These badges reproduce the
     Google Play and App Store lockups, where the kicker is deliberately a
     fraction of the app-name line; setting it to --f-label makes the two lines
     near-equal and it stops reading as a store badge. It is brand furniture,
     not content — the accessible name on the link carries the meaning. */
  .sb__kicker {
    font-size: .6875rem; font-weight: 500; letter-spacing: .06em;
    text-transform: uppercase; opacity: .75;
  }
  .sb__name { font-size: .9375rem; font-weight: 600; letter-spacing: -0.015em; }

  .is-disabled { opacity: .55; pointer-events: auto; }
  .is-disabled .sb__name { font-size: .8125rem; }

  /* Phones: shrink so a pair of badges stays on one row instead of stacking. */
  @media (max-width: 560px) {
    .sb { padding: 9px 11px 10px; gap: 8px; min-width: 0; }
    .sb__mark { width: 20px; height: 20px; }
    .sb__txt { min-width: 0; }
    .sb__kicker, .sb__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sb__kicker { font-size: .625rem; letter-spacing: .04em; }
    .sb__name { font-size: .8125rem; }
    .is-disabled .sb__name { font-size: .75rem; }
  }

/* ---------- ImgSlot ---------- */
.img-slot { position: relative; display: block; margin: 0; }

  /* ── Placeholder state: no real media inside ───────────────── */
  .img-slot:not(:has(img, picture, video, svg, iframe, canvas))::before {
    content: "◧  " attr(data-type) "   ·   " attr(data-size)
             "\A\A" attr(data-brief)
             "\A\Aalt:  " attr(data-alt);
    white-space: pre-wrap;
    display: grid;
    align-content: center;
    aspect-ratio: var(--ar, 16 / 9);
    padding: clamp(16px, 2.4vw, 30px);
    border: 2px dashed color-mix(in srgb, var(--cyan-600) 55%, transparent);
    border-radius: var(--slot-r, var(--r-lg));
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--cyan-600) 7%, transparent),
        color-mix(in srgb, var(--indigo) 7%, transparent)),
      repeating-linear-gradient(45deg,
        transparent 0 11px,
        color-mix(in srgb, var(--cyan-600) 4%, transparent) 11px 22px);
    color: var(--cyan-ink);
    font-family: "Google Sans", sans-serif;
    font-size: clamp(.7rem, 1vw, .8125rem);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.005em;
  }

  /* Slot label chip */
  .img-slot:not(:has(img, picture, video, svg, iframe, canvas))::after {
    content: attr(data-slot);
    position: absolute; top: 10px; right: 10px;
    padding: 4px 10px; border-radius: var(--r-pill);
    background: var(--cyan-600); color: #04121F;
    font-family: "Google Sans", sans-serif; font-size: var(--f-label); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
  }

  /* On dark surfaces the placeholder inverts for readability */
  .s-midnight .img-slot:not(:has(img, picture, video, svg, iframe, canvas))::before,
  .s-ink      .img-slot:not(:has(img, picture, video, svg, iframe, canvas))::before,
  .s-aurora   .img-slot:not(:has(img, picture, video, svg, iframe, canvas))::before {
    color: var(--tint-sky);
    border-color: rgba(2, 217, 254, .42);
    background:
      linear-gradient(135deg, rgba(2,217,254,.09), rgba(97,72,250,.09)),
      repeating-linear-gradient(45deg, transparent 0 11px, rgba(2,217,254,.05) 11px 22px);
  }
  :root[data-theme="dark"] .img-slot:not(:has(img, picture, video, svg, iframe, canvas))::before {
    color: var(--tint-sky);
    border-color: rgba(2, 217, 254, .4);
  }

  /* ── Live state: real media present → all placeholder styling gone ── */
  .img-slot:has(img, picture, video, svg, iframe, canvas) { border: 0; background: none; }
  .img-slot > img,
  .img-slot > picture > img,
  .img-slot > video {
    width: 100%; height: 100%; object-fit: cover;
    aspect-ratio: var(--ar, 16 / 9);
    border-radius: var(--slot-r, var(--r-lg));
  }

  /* Fallback for browsers without :has() — JS flags empty slots instead */
  @supports not selector(:has(img)) {
    .img-slot::before, .img-slot::after { content: none; }
    .img-slot[data-empty="true"]::before { content: "◧  " attr(data-type) "   ·   " attr(data-size) "\A\A" attr(data-brief); }
    .img-slot[data-empty="true"]::after { content: attr(data-slot); }
  }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    padding-block: calc(var(--nav-h) + clamp(24px, 2.6vw, 40px)) clamp(72px, 8vw, 116px);
    overflow: clip;
  }
  /* One viewport on a laptop, and only there. `svh` rather than `vh` so the
     mobile URL bar collapsing does not change the answer. Phones are let out
     of it deliberately: a headline, a lede, two CTAs, a trust strip and a
     slider compressed into 640px would leave every one of them unreadable. */
  @media (min-width: 1020px) {
    .hero { min-height: 100svh; display: grid; align-content: center; }
  }
  .hero__inner {
    position: relative; z-index: 3;
    display: grid; gap: clamp(34px, 4vw, 52px);
    grid-template-columns: 1fr; align-items: center;
  }
  /* Copy column is the wider one so the H1 settles at three lines */
  @media (min-width: 1020px) { .hero__inner { grid-template-columns: 1.06fr .94fr; gap: clamp(32px, 3.4vw, 52px); } }

  .orb--a { width: 460px; height: 460px; top: -12%; left: -8%; background: radial-gradient(circle, rgba(2,217,254,.55), transparent 68%); }
  .orb--b { width: 540px; height: 540px; bottom: -22%; right: -10%; background: radial-gradient(circle, rgba(97,72,250,.5), transparent 68%); animation-delay: -7s; }

  .hero__grid-lines {
    position: absolute; inset: 0; z-index: 1; opacity: .3;
    background-image:
      linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  }

  /* ── Copy ─────────────────────────────────────────────── */
  /* Each stack holds all four versions in one grid cell. The cell is as tall
     as the tallest member, so the H1, the buttons and the trust strip never
     move when a slide changes — a hero that reflows every six seconds is a
     CLS problem and a reading problem at the same time. */
  /* The stack is sized to the *active* slide by the script, not left at the
     height of the tallest one — that reserve showed up as a hole under the
     short slides (116px of it on a phone). `align-items: start` stops the
     children stretching so each can report its own height, and the transition
     carries the container between them.

     The first slide is deliberately the tallest in both stacks, so the height
     the script sets on boot equals the height the browser had already laid
     out: no shift at load, and the only shifts afterwards are one slide's
     worth of line-height, well inside the CLS budget. */
  .hero__stack {
    display: grid; align-items: start;
    transition: height .32s var(--ease-out);
  }
  /* Out first, then in — never both at once. A plain crossfade double-exposes
     two paragraphs on top of each other for the length of the transition, and
     overlapping body text is unreadable in a way overlapping pictures are not.
     The outgoing copy clears in 220ms; the incoming waits that long, then
     arrives. */
  .hero__stack > * {
    grid-area: 1 / 1;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s;
  }
  .hero__stack > .is-active {
    opacity: 1; visibility: visible; transform: none;
    transition-delay: .2s;
  }
  /* The buttons are links: hidden ones must not be tabbable or clickable. */
  .hero__stack--btn > *:not(.is-active) { pointer-events: none; }
  .hero__stack--eyebrow { justify-items: start; }
  .hero__stack--btn { justify-items: start; align-items: start; }

  .hero__eyebrow { animation: rise .7s var(--ease-out) both; }
  .hero__h { max-width: 20ch; }
  .hero__stack--h { margin-block: 16px 18px; animation: rise .8s var(--ease-out) .06s both; }
  .hero__lede { color: var(--t-on-dark-2); max-width: 54ch; }
  .hero__stack--lede { animation: rise .8s var(--ease-out) .14s both; }
  .hero__cta { display: flex; flex-wrap: wrap; align-items: start; gap: 12px; margin-top: 28px; animation: rise .8s var(--ease-out) .22s both; }

  @keyframes rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
  /* The H1 keeps opacity 1 throughout so LCP is recorded on first paint */
  .hero__h1 { animation-name: rise-lcp; }
  @keyframes rise-lcp { from { transform: translate3d(0, 20px, 0); } to { transform: none; } }

  .hero__trust {
    display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 24px; padding: 0; list-style: none;
    animation: rise .8s var(--ease-out) .3s both;
  }
  .hero__trust li {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--f-label); color: var(--t-on-dark-2);
  }
  .hero__trust li::before {
    content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%;
    background: color-mix(in srgb, var(--cyan) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--cyan) 55%, transparent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%2302D9FE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 11px; background-position: center; background-repeat: no-repeat;
  }

  /* ── Visual: the slider ───────────────────────────────── */
  .hero__visual { position: relative; animation: rise 1s var(--ease-out) .34s both; }
  .hero__slider { position: relative; }

  /* Every slide occupies the same grid cell, so they stack without absolute
     positioning and the stage sizes itself to the tallest one. No aspect-ratio
     arithmetic, and the height cannot jump as slides change — which is the
     failure mode of a slider sitting directly above a fold line. */
  .hero__stage { display: grid; }
  /* Same out-then-in timing as the copy, so the two halves of the slide change
     together. Two drawings dissolving through each other read as clutter, not
     as a transition. */
  .hero__slide {
    grid-area: 1 / 1;
    opacity: 0; transform: scale(.985); pointer-events: none;
    transition: opacity .24s var(--ease-out), transform .24s var(--ease-out);
  }
  .hero__slide.is-active {
    opacity: 1; transform: none; pointer-events: auto;
    transition-delay: .2s;
  }

  /* Only the screenshot gets a bezel. A screenshot is a picture of a screen and
     wants an edge; a diagram given the same treatment reads as a card floating
     inside another card, which is what made the slider look assembled rather
     than lit. Both keep the same 4:3 box so the stage height never changes. */
  /* 3:2, matching the dashboard screenshot exactly — the hero's primary asset
     should be neither letterboxed nor cropped, and the drawings on the other
     slides carry a fade mask that hides the small gap the difference leaves. */
  .hero__frame {
    position: relative; border-radius: var(--r-xl); padding: 10px;
    aspect-ratio: 3 / 2;
    background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: var(--sh-glow-lg), 0 44px 90px -30px rgba(0,0,0,.7);
    backdrop-filter: blur(8px);
  }
  .hero__frame > .img-slot { width: 100%; height: 100%; }

  .hero__art {
    position: relative; aspect-ratio: 3 / 2;
    display: grid; place-items: center;
    padding: clamp(6px, 1.4vw, 18px);
  }
  /* The drawing's own light instead of a border — it falls off into the hero
     background, so there is no edge where the slide stops. */
  .hero__art::before {
    content: ""; position: absolute; inset: -8% -6%; z-index: 0; pointer-events: none;
    background: radial-gradient(58% 56% at 50% 46%, rgba(2, 217, 254, .18), transparent 70%);
    filter: blur(26px);
  }
  .hero__art svg { position: relative; z-index: 1; width: 100%; height: auto; max-height: 100%; }

  /* ── Slider controls ──────────────────────────────────── */
  .hero__nav { display: flex; align-items: center; gap: 14px; margin-top: 18px; }

  .hero__arrow {
    display: grid; place-items: center; width: 38px; height: 38px; flex: none;
    border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff;
    transition: background-color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out),
                transform var(--d-fast) var(--ease-spring);
  }
  .hero__arrow:hover { background: rgba(2,217,254,.18); border-color: rgba(2,217,254,.5); transform: scale(1.06); }
  .hero__arrow:first-of-type svg { rotate: 180deg; }

  .hero__dots { display: flex; align-items: center; gap: 8px; flex: 1; }
  .hero__dot {
    position: relative; flex: 1 1 0; height: 4px; min-width: 0; padding: 0;
    border: 0; border-radius: 2px; cursor: pointer;
    background: rgba(255,255,255,.16);
    /* The hit area is 4px tall but the target is not — a padded pseudo-element
       gives it the 24px WCAG 2.2 minimum without moving the bar. */
    overflow: visible;
  }
  .hero__dot::after { content: ""; position: absolute; inset: -12px 0; }
  .hero__dotfill {
    display: block; height: 100%; width: 0; border-radius: 2px;
    background: linear-gradient(90deg, var(--cyan-600), var(--cyan));
  }
  /* The fill doubles as the autoplay countdown, so the reader can see how long
     a slide has left instead of being surprised by the change. */
  .hero__dot.is-active .hero__dotfill { animation: hero-dot var(--hero-dur, 6s) linear forwards; }
  .hero__dot.is-active.is-paused .hero__dotfill { animation-play-state: paused; }
  @keyframes hero-dot { from { width: 0; } to { width: 100%; } }

  .chip {
    position: absolute; z-index: 4; display: grid; gap: 5px;
    padding: 13px 17px; border-radius: var(--r-md);
    box-shadow: 0 20px 44px -16px rgba(0,0,0,.6);
    animation: bob 6s var(--ease-inout) infinite alternate;
  }
  .chip__k { font-size: var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: var(--t-on-dark-2); }
  .chip__v { font-size: 1.375rem; font-weight: 700; color: #fff; line-height: 1.1; }

  /* Only the screenshot slide carries these. The drawings on the other slides
     are already the content, and a floating stat card over a diagram reads as
     clutter rather than product. */
  .chip--fees  { top: 8%; left: -5%; animation-delay: -1s; }
  .chip--att   { bottom: 14%; right: -4%; animation-delay: -3.5s; }

  @media (max-width: 1019px) {
    .chip--fees { left: 2%; }
    .chip--att { right: 2%; }
  }
  @media (max-width: 560px) { .chip { display: none; } }

  @keyframes bob { from { transform: translateY(0); } to { transform: translateY(-13px); } }

  .chip__dot {
    width: 8px; height: 8px; border-radius: 50%; background: #25D366;
    box-shadow: 0 0 0 0 rgba(37,211,102,.6); animation: pulse 2.4s infinite;
  }
  @keyframes pulse {
    70%  { box-shadow: 0 0 0 11px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  }

  .chip__bar { width: 108px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.16); overflow: hidden; }
  .chip__bar i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, var(--cyan-600), var(--cyan)); }

  .chip__spark {
    width: 108px; height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 22'%3E%3Cpath d='M0 18 L15 13 L30 15 L45 8 L60 11 L75 5 L92 7 L108 2' fill='none' stroke='%2302D9FE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__eyebrow, .hero__h1, .hero__lede, .hero__cta, .hero__trust, .hero__visual { animation: none; opacity: 1; transform: none; }
    .chip { animation: none; }
    /* Slides still swap — they just swap instantly, and autoplay is off (the
       script checks the same media query), so nothing changes unasked. */
    .hero__slide { transition: none; }
    .hero__dot.is-active .hero__dotfill { animation: none; width: 100%; }
  }

/* ---------- TrustLogos ---------- */
.logos { padding-block: clamp(40px, 5vw, 68px); }
  .logos__h {
    text-align: center; margin-bottom: clamp(26px, 3vw, 40px);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    font-size: var(--f-label); font-weight: 500;
  }
  .logos__img {
    height: clamp(30px, 3.4vw, 44px); width: auto; flex: none;
    object-fit: contain;
    filter: grayscale(1); opacity: .5;
    transition: filter var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out), scale var(--d-base) var(--ease-out);
  }
  .logos__img:hover { filter: grayscale(0); opacity: 1; scale: 1.06; }
  :root[data-theme="dark"] .logos__img { filter: grayscale(1) invert(1) brightness(1.6); opacity: .45; }
  :root[data-theme="dark"] .logos__img:hover { filter: invert(1) brightness(1.7); opacity: .95; }

/* ---------- Problem ---------- */
.prob { position: relative; }
  .prob__head { max-width: 900px; margin-inline: auto; text-align: center; }
  .prob__head .eyebrow { justify-content: center; }
  /* The 20ch cap was forcing a 21-word heading into five short lines in the
     middle of a 900px column. The copy is shorter now and the measure is wide
     enough to hold it in two. */
  .prob__head .h2 { max-width: 30ch; margin-inline: auto; }

  .prob__cols {
    display: grid; gap: 20px; align-items: start;
    grid-template-columns: 1fr;
  }
  @media (min-width: 940px) { .prob__cols { grid-template-columns: 1fr auto 1fr; gap: 26px; } }

  /* The section moved off the ink surface — there were six dark bands on the
     page and it read as a dark site with light interruptions. The contrast the
     comparison needs is now carried by the two panels instead of by the whole
     section: "without" is a plain light card, "with" is the brand's dark one.
     That also keeps the white wordmark in the heading legible, which a light
     "after" panel would have broken. */
  .prob__col { border-radius: var(--r-xl); padding: clamp(24px, 2.8vw, 38px); border: 1px solid var(--border); }
  .prob__col--before { background: var(--s-card); }
  .prob__col--after {
    background: linear-gradient(162deg, #23246E 0%, var(--midnight) 54%, var(--ink) 100%);
    border-color: color-mix(in srgb, var(--cyan) 38%, transparent);
    box-shadow: 0 30px 70px -26px rgba(25, 15, 78, .5), 0 0 0 1px rgba(2, 217, 254, .14);
  }

  .prob__ct { display: flex; align-items: center; gap: 11px; font-size: var(--f-h4); font-weight: 600; margin-bottom: 24px; flex-wrap: wrap; }

  /* "With [wordmark]" — the logo replaces the brand name in the heading.
     Its own inline-flex keeps the word and the mark tight, so the 11px badge
     gap does not open up between them. */
  .prob__with { display: inline-flex; align-items: center; gap: 8px; }
  .prob__logo {
    /* The wordmark's ink fills 75.8% of the 588x120 canvas, so 1.6em of canvas
       renders roughly 1.2em of visible mark — a touch above cap height, which
       is how a logo should sit next to running text. */
    height: 1.6em;
    width: auto;
    max-width: 100%;
    display: block;
  }
  .prob__badge { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background-repeat: no-repeat; background-position: center; background-size: 12px; }
  .prob__badge--x { background-color: color-mix(in srgb, var(--n-400) 26%, transparent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' stroke='%236B7385' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .prob__badge--v { background-color: rgba(2,217,254,.2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%2302D9FE' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

  .prob__col ul { list-style: none; padding: 0; display: grid; gap: 20px; }
  .prob__col li { display: grid; gap: 5px; padding-left: 16px; border-left: 2px solid var(--border); }
  .prob__col--after li { border-left-color: rgba(2,217,254,.45); }
  .prob__col strong { font-size: var(--f-body); font-weight: 600; color: var(--t-primary); }
  .prob__col span { font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.6; }
  .prob__col--before strong, .prob__col--before span { opacity: .82; }

  /* The "with" panel keeps the on-dark palette whatever the section does. */
  .prob__col--after .prob__ct,
  .prob__col--after strong { color: #fff; }
  .prob__col--after span { color: var(--t-on-dark-2); }

  .prob__arrow { display: none; align-self: center; color: var(--cyan); width: 60px; }
  @media (min-width: 940px) { .prob__arrow { display: block; } }
  .prob__arrow svg { animation: nudge 2.6s var(--ease-inout) infinite; }
  @keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(7px); } }

/* ---------- Modules ---------- */
.mods__head { max-width: 760px; }

  .bento {
    list-style: none; padding: 0; display: grid; gap: 14px;
    /* One column on phones. Two 160px columns left every tile's prose in a
       ~20-character measure, which broke headings across lines and ran the
       cards past 400px tall. */
    grid-template-columns: 1fr;
    /* `dense` back-fills the holes that span-2 tiles leave in the auto-flow.
       Without it the grid left an empty cell mid-section. */
    grid-auto-flow: row dense;
  }
  @media (min-width: 560px)  { .bento { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 700px)  { .bento { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
  @media (min-width: 1080px) { .bento { grid-template-columns: repeat(4, 1fr); } }
  @media (min-width: 700px)  { .bento__i.is-wide { grid-column: span 2; } }

  .bento__card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    padding: clamp(18px, 2vw, 26px);
    border-radius: var(--r-lg); background: var(--s-card);
    border: 1px solid var(--border); overflow: hidden;
    transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
  }
  .bento__card:hover { transform: translateY(-5px); box-shadow: var(--sh-card); border-color: color-mix(in srgb, var(--cyan-600) 50%, transparent); }

  .is-feat .bento__card {
    background:
      linear-gradient(150deg, color-mix(in srgb, var(--cyan-600) 8%, transparent), transparent 62%),
      var(--s-card);
    border-color: color-mix(in srgb, var(--cyan-600) 30%, transparent);
  }

  .bento__ico {
    display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px;
    border-radius: var(--r-md); flex: none;
    background: color-mix(in srgb, var(--cyan-600) 12%, transparent);
    color: var(--accent-text);
    transition: background-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out), rotate var(--d-base) var(--ease-spring);
  }
  .bento__card:hover .bento__ico { background: var(--cyan-600); color: #04121F; rotate: -8deg; }

  .bento__n { font-size: var(--f-body); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 7px; }
  .bento__b { font-size: var(--f-xs); line-height: 1.6; color: var(--t-muted); flex: 1; }

  .bento__go {
    display: inline-grid; place-items: center; width: 27px; height: 27px; margin-top: 16px;
    border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--t-muted);
    transition: background-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out), translate var(--d-base) var(--ease-spring), border-color var(--d-base) var(--ease-out);
  }
  .bento__card:hover .bento__go { background: var(--cyan-600); border-color: var(--cyan-600); color: #04121F; translate: 4px 0; }

  .bento__card--more {
    align-items: flex-start; justify-content: center; gap: 4px;
    background: var(--aurora); border: 0; color: #fff;
  }
  .bento__more-n { font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
  .bento__more-t { font-size: var(--f-xs); color: rgba(255,255,255,.85); line-height: 1.5; margin-top: 4px; }
  .bento__more-l { margin-top: 14px; font-size: var(--f-xs); font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: 2px; }
  .bento__more-l:hover { border-color: #fff; }

/* ---------- Flagship ---------- */
.flag__head { max-width: 720px; }

  .flag__wrap {
    border-radius: var(--r-2xl); border: 1px solid var(--border);
    background: var(--s-frost); overflow: hidden;
  }

  /* ── Segmented control ─────────────────────────────────── */
  .flag__tabbar {
    padding: clamp(12px, 1.4vw, 18px);
    border-bottom: 1px solid var(--border);
    background:
      radial-gradient(120% 180% at 50% 0%, color-mix(in srgb, var(--cyan-600) 9%, transparent), transparent 70%),
      var(--s-pure);
  }

  .flag__tabs {
    position: relative; display: flex; gap: 6px; padding: 6px;
    border-radius: var(--r-xl); background: var(--n-100);
    border: 1px solid var(--border-soft);
    overflow-x: auto; scrollbar-width: none;
  }
  .flag__tabs::-webkit-scrollbar { display: none; }

  .flag__glider {
    position: absolute; top: 6px; left: 0; height: calc(100% - 12px);
    border-radius: var(--r-lg); background: var(--aurora);
    box-shadow: 0 12px 28px -10px rgba(0,187,245,.75);
    transition: transform .45s var(--ease-spring), width .45s var(--ease-spring);
    pointer-events: none; z-index: 0;
  }
  .flag__glider:not([style*="width"]) { opacity: 0; }

  /* Padding and gap came down when the type scale went up: the label is now
     16px and the sub-label 13px, and at the old 20px padding the three tabs
     stopped fitting one row at 1440px and started scrolling instead. */
  .flag__tab {
    position: relative; z-index: 1; flex: 1 0 auto;
    display: flex; align-items: center; gap: 9px;
    padding: 12px 14px; border: 0; cursor: pointer;
    border-radius: var(--r-lg); background: transparent;
    color: var(--t-muted); white-space: nowrap; text-align: left;
    transition: color var(--d-base) var(--ease-out);
  }
  .flag__tab:hover { color: var(--t-primary); }

  .flag__tab-ico {
    display: grid; place-items: center; width: 34px; height: 34px; flex: none;
    border-radius: 10px; background: var(--s-pure); color: var(--accent-text);
    border: 1px solid var(--border-soft);
    transition: background-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out),
                border-color var(--d-base) var(--ease-out), rotate var(--d-base) var(--ease-spring);
  }
  .flag__tab-txt { display: grid; gap: 1px; line-height: 1.25; }
  .flag__tab-l { font-size: var(--f-sm); font-weight: 600; }
  .flag__tab-s { font-size: var(--f-label); opacity: .8; }

  .flag__tab[aria-selected="true"] { color: #fff; }
  .flag__tab[aria-selected="true"] .flag__tab-ico {
    background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.28); rotate: -8deg;
  }

  /* Tablet: drop the sub-label so three tabs still fit on one row */
  @media (max-width: 860px) {
    .flag__tab { padding: 11px 15px; }
    .flag__tab-s { display: none; }
  }

  /* Phone: equal thirds, no icon — the labels are what matter and they must
     not be clipped by the horizontal scroller. */
  @media (max-width: 620px) {
    .flag__tabs { gap: 3px; padding: 5px; overflow-x: visible; }
    .flag__tab { flex: 1 1 0; min-width: 0; justify-content: center; gap: 0; padding: 12px 3px; }
    .flag__tab-ico { display: none; }
    .flag__tab-txt { text-align: center; min-width: 0; }
    /* Scales with the viewport so the longest label ("Communication") fits its
       third of the strip on every phone width. The floor is 12px, not the 11px
       it used to resolve to on a 375px screen: these are three short control
       labels, and the only ways to hold 13px here are truncating the longest
       one or turning the strip back into a horizontal scroller — both worse
       than one step down on the narrowest phones. */
    .flag__tab-l { font-size: clamp(.75rem, 3.2vw, .8125rem); letter-spacing: -0.015em; }
    .flag__glider { top: 5px; height: calc(100% - 10px); }
  }

  .flag__panel {
    display: grid; gap: clamp(28px, 3.4vw, 52px);
    padding: clamp(24px, 3.4vw, 52px);
    grid-template-columns: 1fr; align-items: center;
    animation: panel-in .5s var(--ease-out) both;
  }
  .flag__panel[hidden] { display: none; }
  @media (min-width: 940px) { .flag__panel { grid-template-columns: 1fr 1.06fr; } }
  @keyframes panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  .flag__h3 { margin-bottom: 14px; }
  .flag__lede { margin-bottom: 26px; }

  /* The four points are one list, so they get one rail down the side rather
     than four loose ticks floating in the margin. */
  .flag__pts { list-style: none; padding: 0 0 0 27px; display: grid; gap: 18px; margin-bottom: 30px; position: relative; }
  .flag__pts::before {
    content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px; border-radius: 1px;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--cyan-600) 55%, transparent),
      color-mix(in srgb, var(--cyan-600) 10%, transparent));
  }
  .flag__pts li { display: grid; gap: 3px; position: relative; }
  .flag__pts li::before {
    content: ""; position: absolute; left: -27px; top: 4px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--s-pure);
    border: 2px solid color-mix(in srgb, var(--cyan-600) 55%, transparent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%230077A8' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 10px;
  }
  .flag__pts strong { font-size: var(--f-sm); font-weight: 600; }
  .flag__pts span { font-size: var(--f-xs); color: var(--t-muted); line-height: 1.6; }

  .flag__shot { position: relative; }
  .flag__shot::before {
    content: ""; position: absolute; inset: -14%; z-index: 0; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--cyan-600) 22%, transparent), transparent 66%);
    filter: blur(46px);
  }

  /* ── The window the screenshot lives in ─────────────────── */
  .flag__win {
    position: relative; z-index: 1;
    border-radius: var(--r-lg); overflow: hidden;
    background: var(--s-pure);
    border: 1px solid var(--border);
    box-shadow: 0 34px 70px -28px rgba(25, 15, 78, .42), 0 2px 0 rgba(255, 255, 255, .6) inset;
  }
  .flag__chrome {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 14px;
    background: linear-gradient(180deg, var(--s-pure), var(--n-100));
    border-bottom: 1px solid var(--border-soft);
  }
  .flag__dots { display: inline-flex; gap: 6px; flex: none; }
  .flag__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--n-300); }
  .flag__dots i:nth-child(1) { background: #FF6058; }
  .flag__dots i:nth-child(2) { background: #FFBD2E; }
  .flag__dots i:nth-child(3) { background: #29CE42; }
  .flag__crumb {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 4px 12px; border-radius: var(--r-pill);
    background: var(--s-frost); border: 1px solid var(--border-soft);
    font-size: var(--f-label); color: var(--t-muted);
  }
  .flag__win .img-slot { border-radius: 0; }

  /* One reading lifted off the screenshot, so the eye has somewhere to land
     on an otherwise dense UI shot. */
  .flag__stat {
    position: absolute; z-index: 2; right: -14px; bottom: -18px;
    display: grid; gap: 2px; padding: 13px 18px;
    border-radius: var(--r-md);
    background: var(--s-pure); border: 1px solid var(--border);
    box-shadow: var(--sh-lift);
    animation: bob 6s var(--ease-inout) infinite alternate;
  }
  .flag__statk { font-size: var(--f-label); letter-spacing: .07em; text-transform: uppercase; color: var(--t-muted); }
  .flag__statv { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; color: var(--accent-text); line-height: 1.1; }
  .flag__statn { font-size: var(--f-label); color: var(--t-muted); }
  @media (max-width: 620px) { .flag__stat { right: 0; bottom: -14px; padding: 10px 14px; } }
  @media (prefers-reduced-motion: reduce) { .flag__stat { animation: none; } }

/* ---------- AI ---------- */
/* A dark island between two light sections, so the top padding has to clear
   the wave the way the apps section does.

   The grid is deliberately asymmetric — one wide card and four standard ones —
   because a plain 5-up would read as a second copy of the module bento a few
   sections above it. */
/* Light now, not midnight. The graphics carried the section on a dark surface,
   but it was one of six dark bands and the page as a whole read too heavy; the
   drawings are token-driven so they simply repaint. No wave and no mesh either
   — both exist to soften a dark-to-light seam that no longer happens here. */
.ai { padding-block: var(--section-y); }
  .ai__inner { position: relative; z-index: 3; }

  .ai__head { max-width: 880px; margin-inline: auto; text-align: center; }
  .ai__head .eyebrow { justify-content: center; }
  .ai__lede { margin-inline: auto; }

  .ai__grid { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
  /* Two columns and five cards would leave the last one stranded in a half-width
     row, so the wide card takes the whole first row and the other four pair off
     underneath it. */
  @media (min-width: 700px) {
    .ai__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .ai__i.is-wide { grid-column: span 2; }
  }

  /* Six columns is what lets the first row split 4 + 2 and the second run
     three across, with no card left orphaned on a row of its own. */
  @media (min-width: 1060px) {
    .ai__grid { grid-template-columns: repeat(6, 1fr); gap: 20px; }
    .ai__i { grid-column: span 2; }
    .ai__i.is-wide { grid-column: span 4; }
  }

  .ai__i { display: flex; }
  .ai__card {
    display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 22px);
    width: 100%; border-radius: var(--r-2xl);
  }

  /* Every card keeps the same drawing-then-copy stack, the wide one included.
     Turning it side-on was tried and lost on both counts: the 2.33:1 timetable
     squeezed into half the card came out barely 340px across, and because the
     copy column was then the taller of the two, the drawing floated in ~190px
     of dead space. Full width gives that graphic twice the size and no gap. */
  .ai__i.is-wide .ai__copy { max-width: 64ch; }

  .ai__art {
    position: relative; overflow: hidden;
    border-radius: var(--r-lg); border: 1px solid var(--border-soft);
    padding: clamp(10px, 1.2vw, 16px);
    background:
      radial-gradient(130% 130% at 50% 0%, color-mix(in srgb, var(--cyan-600) 10%, transparent), transparent 68%),
      var(--s-pure);
  }
  /* The shared decor cap is for graphics beside a heading; these sit inside a
     card that already bounds them. */
  .ai__art .decor { max-height: none; }

  .ai__k {
    font-size: var(--f-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--accent-text); margin-bottom: 9px;
  }
  .ai__t { font-size: clamp(1.15rem, 1.5vw, 1.35rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.28; }
  .ai__i.is-wide .ai__t { font-size: var(--f-h3); }
  .ai__d { font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.65; margin-top: 10px; }

  .ai__chips { list-style: none; padding: 0; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
  .ai__chips li {
    padding: 6px 12px; border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--cyan-600) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cyan-600) 26%, transparent);
    font-size: var(--f-label); line-height: 1.35; color: var(--accent-text);
  }

  .ai__foot {
    margin-top: clamp(28px, 3.2vw, 48px);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 14px 26px; text-align: center;
  }
  .ai__footnote { font-size: var(--f-xs); color: var(--t-muted); max-width: 54ch; }

/* ---------- Apps ---------- */
/* Extra top padding only because a wave cuts into this section's top edge. */
.apps { padding-block: clamp(84px, 8.5vw, 132px) var(--section-y); }
  .apps__inner { position: relative; z-index: 3; }
  .apps__head { max-width: 800px; margin-inline: auto; text-align: center; }
  .apps__head .eyebrow { justify-content: center; }

  .apps__grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
  @media (min-width: 900px) { .apps__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }

  .apps__card {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: clamp(26px, 3vw, 44px); border-radius: var(--r-2xl);
  }

  .apps__n { margin-block: 16px 12px; }
  .apps__d { font-size: var(--f-sm); color: var(--t-on-dark-2); line-height: 1.7; margin-bottom: 26px; max-width: 46ch; }

  .apps__f { list-style: none; padding: 0; display: grid; gap: 12px; margin-bottom: 30px; width: 100%; }
  .apps__f li {
    display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 10px;
    font-size: var(--f-sm); color: var(--t-on-dark-2); line-height: 1.5;
  }
  .apps__f svg {
    width: 22px; height: 22px; padding: 3.5px; border-radius: 50%;
    background: rgba(2,217,254,.16); color: var(--cyan);
  }

  .apps__rolesk {
    font-size: var(--f-label); letter-spacing: .07em; text-transform: uppercase;
    color: var(--cyan); margin-bottom: 14px;
  }
  .apps__roles { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 30px; }
  .apps__roles li {
    padding: 8px 14px; border-radius: var(--r-pill);
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    font-size: var(--f-label); color: #fff;
    transition: background-color var(--d-fast) var(--ease-out),
                border-color var(--d-fast) var(--ease-out),
                transform var(--d-fast) var(--ease-spring);
  }
  .apps__roles li:hover { background: rgba(2,217,254,.18); border-color: rgba(2,217,254,.45); transform: translateY(-2px); }

  .apps__stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; width: 100%; }
  /* The badges used to be forced onto one row here and squeezed until
     "Download on the" fit at 8px. Given a minimum width they simply wrap to
     their own row on the narrowest phones instead, at full size and with
     nothing truncated. */
  @media (max-width: 560px) {
    .apps__stores { gap: 8px; }
    /* No grow. A badge that wraps to its own row was stretching to the full
       card width, which reads as a button rather than a store badge — they
       are recognised by their shape. The phone rule on .sb already shrinks
       the pair enough to share one row. */
    .apps__stores > * { flex: 0 1 auto; min-width: 0; }
  }
  /* The pair misses one row by about 5px inside the app card. Trimming the
     side padding buys it back; below that the two simply stack, at their own
     width rather than stretched. */
  @media (max-width: 420px) {
    .apps__stores { gap: 6px; }
    .apps__stores .sb { padding-inline: 9px; gap: 7px; }
  }

/* ---------- Reports ---------- */
.rep__grid { display: grid; gap: clamp(36px, 4vw, 64px); grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 980px) { .rep__grid { grid-template-columns: .82fr 1.18fr; } }

  .rep__copy { position: sticky; top: calc(var(--nav-h) + 32px); }
  @media (max-width: 979px) { .rep__copy { position: static; } }
  .rep__copy .h2 { margin-block: 16px 18px; }
  .rep__copy .lead { margin-bottom: 26px; }
  .rep__big { color: var(--accent-text); }

  .rep__list { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
  @media (min-width: 620px) { .rep__list { grid-template-columns: repeat(2, 1fr); } }

  .rep__i { display: flex; gap: 16px; align-items: flex-start; padding: clamp(18px, 2vw, 24px); }
  .rep__n {
    flex: none; display: grid; place-items: center; min-width: 52px; height: 52px; padding-inline: 8px;
    border-radius: var(--r-md); background: var(--aurora); color: #fff;
    font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em;
  }
  .rep__l { font-size: var(--f-sm); font-weight: 600; margin-bottom: 5px; }
  .rep__e { font-size: var(--f-xs); color: var(--t-muted); line-height: 1.55; }

/* ---------- Plans ---------- */
.plans__head { max-width: 820px; margin-inline: auto; text-align: center; }
  .plans__head .eyebrow { justify-content: center; }

  /* Top padding leaves room for the badge to sit above the middle card.
     `stretch` is what makes the two outer cards match each other exactly —
     with `center` each card sized to its own content and all three differed. */
  .plans__grid { list-style: none; padding: 34px 0 0; display: grid; gap: 26px; grid-template-columns: 1fr; align-items: stretch; }
  @media (min-width: 780px)  { .plans__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
  .plans__i {
    position: relative;
    transition: transform var(--d-base) var(--ease-out);
  }
  .plans__i:hover { transform: translateY(-6px); }

  .plans__card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-2xl);
    isolation: isolate;
    background: var(--s-pure); border: 1px solid var(--border);
    transition: box-shadow var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
  }
  .plans__i:hover .plans__card { box-shadow: var(--sh-lift); }

  /* The popular plan is pulled forward with a gradient border, a little scale
     and a tinted lift — nothing painted over the card itself. An earlier
     attempt used a blurred pseudo-element behind it, which bled through the
     white fill and left the card looking muddy grey. */
  /* The middle card inverts to the brand's dark surface. Two white cards and
     one dark one reads instantly — no scale trick or glow needed. */
  .is-pop { z-index: 2; }
  .is-pop .plans__card {
    background: linear-gradient(162deg, #23246E 0%, var(--midnight) 54%, var(--ink) 100%);
    border: 1px solid color-mix(in srgb, var(--cyan) 38%, transparent);
    box-shadow: 0 30px 70px -22px rgba(25, 15, 78, .55), 0 0 0 1px rgba(2, 217, 254, .14);
  }
  .is-pop .plans__cta { box-shadow: 0 14px 32px -12px rgba(0, 187, 245, .55); }

  /* Everything inside flips to the on-dark palette. */
  .is-pop .plans__tag   { color: var(--cyan); }
  .is-pop .plans__n     { color: #fff; }
  .is-pop .plans__for   { color: var(--t-on-dark-2); }
  .is-pop .plans__top   { border-bottom-color: rgba(255, 255, 255, .14); }
  .is-pop .plans__inherit {
    background: rgba(2, 217, 254, .1);
    border-color: rgba(2, 217, 254, .26);
    color: var(--t-on-dark-2);
  }
  .is-pop .plans__inherit b { color: var(--cyan); }
  .is-pop .plans__f li { color: var(--t-on-dark-2); }
  .is-pop .plans__f li::before {
    background-color: rgba(2, 217, 254, .18);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%2302D9FE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .is-pop .plans__rolesk { color: var(--cyan); }
  .is-pop .plans__rolelist span {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .14);
    color: #fff;
  }

  /* The badge already carries the emphasis — the tag under it stays the same
     quiet label as on the other two cards instead of a second heavy pill. */
  .is-pop .plans__top { padding-top: 6px; }

  @media (min-width: 780px) {
    /* Taller than its neighbours, top and bottom, while they stay level. */
    .is-pop { margin-block: -30px; }
    .is-pop .plans__card { padding-block: calc(clamp(24px, 2.6vw, 34px) + 30px); }
  }

  .plans__flag {
    position: absolute; top: -14px; left: 50%; translate: -50% 0; z-index: 3;
    padding: 7px 18px; border-radius: var(--r-pill);
    background: var(--aurora); color: #fff;
    font-size: var(--f-label); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 8px 20px -8px rgba(0,187,245,.7);
  }

  .plans__top { padding-bottom: 20px; border-bottom: 1px solid var(--border-soft); }
  .plans__tag { display: inline-block; font-size: var(--f-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
  .plans__n { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.035em; margin-block: 8px 6px; }
  .plans__for { font-size: var(--f-xs); color: var(--t-muted); line-height: 1.55; }

  .plans__inherit {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 20px; padding: 12px 16px; border-radius: var(--r-md);
    background: color-mix(in srgb, var(--cyan-600) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--cyan-600) 24%, transparent);
    font-size: var(--f-label); color: var(--t-secondary);
  }
  .plans__inherit b { color: var(--accent-text); font-weight: 600; }
  .plans__plus {
    display: grid; place-items: center; width: 22px; height: 22px; flex: none;
    border-radius: 50%; background: var(--aurora); color: #fff; font-weight: 700; font-size: .875rem; line-height: 1;
  }

  .plans__f { list-style: none; padding: 0; display: grid; gap: 10px; margin-block: 20px; flex: 1; }
  .plans__f li { position: relative; padding-left: 23px; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.5; }
  .plans__f li::before {
    content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%;
    background: color-mix(in srgb, var(--cyan-600) 15%, transparent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%230077A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 9px;
  }

  .plans__sms {
    padding: 10px 15px; border-radius: var(--r-md); margin-bottom: 18px;
    background: var(--midnight); color: #fff;
    font-size: var(--f-sm); font-weight: 600; text-align: center;
  }
  .is-pop .plans__sms { background: var(--cyan-600); color: #04121F; }

  .plans__roles { margin-bottom: 22px; }
  .plans__rolesk { display: block; font-size: var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted); margin-bottom: 9px; }
  .plans__rolelist { display: flex; flex-wrap: wrap; gap: 5px; }
  .plans__rolelist span {
    padding: 5px 10px; border-radius: var(--r-pill);
    background: var(--n-100); border: 1px solid var(--border-soft);
    font-size: var(--f-label); color: var(--t-secondary);
  }

  .plans__cta { width: 100%; }
  .plans__note { text-align: center; max-width: 62ch; margin: clamp(46px, 5vw, 72px) auto 0; }

/* ---------- Security ---------- */
.sec { position: relative; overflow: clip; }
  .sec__inner { position: relative; z-index: 2; }
  .sec__orb { width: 620px; height: 620px; top: -25%; right: -14%; background: radial-gradient(circle, rgba(2,217,254,.36), transparent 68%); }

  .sec__head { max-width: 840px; }

  .sec__grid { list-style: none; padding: 0; display: grid; gap: 2px; grid-template-columns: 1fr; border-radius: var(--r-xl); overflow: hidden; background: rgba(255,255,255,.09); }
  @media (min-width: 680px)  { .sec__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1020px) { .sec__grid { grid-template-columns: repeat(3, 1fr); } }

  .sec__i {
    padding: clamp(22px, 2.4vw, 32px);
    background: var(--midnight-900);
    transition: background-color var(--d-base) var(--ease-out);
  }
  .sec__i:hover { background: #191a5c; }

  .sec__ico {
    display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 15px;
    border-radius: var(--r-md); background: rgba(2,217,254,.14); color: var(--cyan);
  }
  .sec__k { font-size: var(--f-sm); font-weight: 600; color: #fff; margin-bottom: 7px; }
  .sec__v { font-size: var(--f-xs); color: var(--t-on-dark-2); line-height: 1.62; }

  .sec__note { margin-top: 26px; color: var(--t-on-dark-2); max-width: 74ch; }
  .sec__note a { color: var(--cyan); font-weight: 600; white-space: nowrap; }
  .sec__note a:hover { text-decoration: underline; }

/* ---------- Onboarding ---------- */
.onb__head { max-width: 720px; }

  .onb__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: step; }
  .onb__s {
    position: relative; display: grid; gap: 16px; align-items: start;
    padding-block: clamp(24px, 2.8vw, 38px);
    border-top: 1px solid var(--border);
    grid-template-columns: 1fr;
  }
  .onb__s:last-child { border-bottom: 1px solid var(--border); }
  @media (min-width: 720px) { .onb__s { grid-template-columns: 132px 1fr; gap: clamp(24px, 3vw, 56px); } }

  .onb__n {
    font-size: clamp(2.25rem, 4.4vw, 3.75rem); font-weight: 700; line-height: .9;
    letter-spacing: -0.05em;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--cyan-600) 65%, transparent);
    color: transparent;
    transition: color var(--d-slow) var(--ease-out), -webkit-text-stroke-color var(--d-slow) var(--ease-out);
  }
  .onb__s:hover .onb__n { color: color-mix(in srgb, var(--cyan-600) 16%, transparent); }

  .onb__body { max-width: 68ch; }
  .onb__t { font-size: var(--f-h3); font-weight: 600; letter-spacing: var(--ls-h3); margin-bottom: 9px; }
  .onb__d { font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.68; }

  /* A cyan rail fills in as each step scrolls into view */
  .onb__s::after {
    content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
    background: linear-gradient(90deg, var(--cyan-600), transparent);
    transition: width 1s var(--ease-out);
  }
  html.js .onb__s.in::after { width: 100%; }

/* ---------- WhyEdoovi ---------- */
.why__head { max-width: 660px; }
  
  
  .why__ico {
    display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px;
    border-radius: var(--r-md); background: var(--aurora); color: #fff;
    transition: rotate var(--d-base) var(--ease-spring), scale var(--d-base) var(--ease-spring);
  }
  .why__t { font-size: var(--f-h4); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 9px; }
  .why__d { font-size: var(--f-xs); color: var(--t-muted); line-height: 1.68; }

/* ---------- Faq ---------- */
.faqs__grid { display: grid; gap: clamp(32px, 4vw, 64px); grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 940px) { .faqs__grid { grid-template-columns: .72fr 1.28fr; } }

  .faqs__aside { position: sticky; top: calc(var(--nav-h) + 32px); }
  @media (max-width: 939px) { .faqs__aside { position: static; } }
  .faqs__aside .h2 { margin-block: 16px 16px; }
  .faqs__lede { margin-bottom: 24px; }

  .faqs__list { display: grid; gap: 0; }

  .faq { border-bottom: 1px solid var(--border); }
  .faq:first-child { border-top: 1px solid var(--border); }

  .faq__q {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
    padding-block: clamp(18px, 2vw, 24px); cursor: pointer; list-style: none;
    font-size: var(--f-h4); font-weight: 600; letter-spacing: -0.015em; color: var(--t-primary);
    transition: color var(--d-fast) var(--ease-out);
  }
  .faq__q::-webkit-details-marker { display: none; }
  /* The question is a real <h3> for outline and screen-reader navigation;
     it inherits the summary's type so nothing changes visually. */
  .faq__qt { font: inherit; margin: 0; }
  .faq__q:hover { color: var(--accent-text); }

  .faq__ico {
    position: relative; flex: none; width: 26px; height: 26px; margin-top: 2px;
    border-radius: 50%; border: 1px solid var(--border);
    transition: background-color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out), rotate var(--d-base) var(--ease-spring);
  }
  .faq__ico::before, .faq__ico::after {
    content: ""; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
    background: currentColor; border-radius: 2px;
  }
  .faq__ico::before { width: 11px; height: 1.7px; }
  .faq__ico::after  { width: 1.7px; height: 11px; transition: scale var(--d-base) var(--ease-out); }
  .faq[open] .faq__ico { background: var(--cyan-600); border-color: var(--cyan-600); color: #04121F; rotate: 90deg; }
  .faq[open] .faq__ico::after { scale: 0 1; }

  .faq__body { overflow: hidden; transition: height var(--d-base) var(--ease-out); }
  .faq__body p {
    padding-bottom: clamp(18px, 2vw, 26px); max-width: 74ch;
    font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.72;
  }

/* ---------- CtaBand ---------- */
/* A closing band earns a little more room than a content section, but not the
   148px it had — that was 60px more than anything else on the page. */
.cta { position: relative; text-align: center; overflow: clip; padding-block: clamp(64px, 7vw, 116px); }
  .cta__inner { position: relative; z-index: 3; max-width: 800px; }
  .cta__eyebrow { justify-content: center; color: #fff; }
  .cta__eyebrow::before { background: linear-gradient(90deg, #fff, transparent); }
  .cta__h { margin-block: 18px 20px; }
  .cta__lede { color: rgba(255,255,255,.9); max-width: 60ch; margin-inline: auto; }

  .cta__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
  .cta__primary { background: #fff; color: var(--midnight); }
  .cta__primary:hover { box-shadow: 0 18px 44px -12px rgba(0,0,0,.45); }

  .cta__trust { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center; margin-top: 30px; padding: 0; list-style: none; }
  .cta__trust li { font-size: var(--f-label); color: rgba(255,255,255,.85); display: inline-flex; align-items: center; gap: 7px; }
  .cta__trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; }

  .cta__orb-a { width: 480px; height: 480px; top: -34%; left: -6%; background: radial-gradient(circle, rgba(255,255,255,.34), transparent 66%); }
  .cta__orb-b { width: 420px; height: 420px; bottom: -30%; right: -4%; background: radial-gradient(circle, rgba(97,72,250,.5), transparent 66%); animation-delay: -6s; }

/* ---------- Footer ---------- */
.foot { position: relative; padding-block: clamp(64px, 7vw, 104px) 32px; overflow: clip; }
  .foot__inner { position: relative; z-index: 3; }

  .foot__top { display: grid; gap: clamp(36px, 4vw, 56px); grid-template-columns: 1fr; }
  @media (min-width: 720px)  { .foot__top { grid-template-columns: repeat(2, 1fr); } }
  /* Three columns: brand, the eighteen features (double-width, two sub-columns),
     and the Company+Product stack. The brand track has a floor of 360px so the
     two app-store badges always sit on one row instead of wrapping. */
  @media (min-width: 1040px) { .foot__top { grid-template-columns: minmax(360px, 1.5fr) 2fr 1.3fr; } }
  @media (min-width: 720px)  { .foot__col--wide ul { grid-template-columns: 1fr 1fr; column-gap: 30px; } }
  /* Company sits above Product in a single column. */
  .foot__colstack { display: grid; gap: clamp(30px, 3.4vw, 46px); align-content: start; }

  .foot__brand img { width: auto; height: 38px; }
  .foot__tag { margin-top: 18px; max-width: 42ch; color: var(--t-on-dark-2); font-size: var(--f-sm); line-height: 1.65; }

  .foot__apps { margin-top: 26px; }
  .foot__appsk {
    font-size: var(--f-label); letter-spacing: .08em; text-transform: uppercase;
    color: var(--cyan); margin-bottom: 9px;
  }
  .foot__appsrow { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
  @media (max-width: 560px) {
    .foot__appsrow { flex-wrap: nowrap; gap: 8px; }
    .foot__appsrow > * { flex: 1 1 0; min-width: 0; }
  }
  .foot__appsrow:last-child { margin-bottom: 0; }

  .foot__h { font-size: var(--f-label); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--cyan); margin-bottom: 16px; }
  .foot__col ul { list-style: none; padding: 0; display: grid; gap: 11px; }
  .foot__col a {
    display: inline-flex; align-items: center;
    font-size: var(--f-sm); color: var(--t-on-dark-2);
    transition: color var(--d-fast) var(--ease-out), translate var(--d-fast) var(--ease-out);
  }
  .foot__col a:hover { color: #fff; translate: 3px 0; }

  /* Touch targets: 19px-tall text links are below the WCAG 2.2 minimum,
     so on small screens the links get a real hit area. */
  @media (max-width: 719px) {
    .foot__col ul { gap: 2px; }
    .foot__col a { min-height: 44px; }
    .foot__legal a { min-height: 44px; display: inline-flex; align-items: center; }
  }

  .foot__offices {
    display: grid; gap: 14px; margin-top: clamp(44px, 5vw, 72px);
    padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1);
    grid-template-columns: 1fr;
  }
  @media (min-width: 640px)  { .foot__offices { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1040px) { .foot__offices { grid-template-columns: repeat(4, 1fr); } }
  .foot__office { display: grid; gap: 5px; }
  .foot__office-k { font-size: var(--f-label); font-weight: 600; color: var(--cyan); }
  .foot__office-v { font-size: var(--f-xs); color: var(--t-on-dark-2); line-height: 1.6; }
  .foot__office-v a:hover, a.foot__office:hover .foot__office-v { color: #fff; }

  .foot__bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
    margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
    color: var(--t-on-dark-2);
  }
  .foot__legal { display: flex; flex-wrap: wrap; gap: 18px; }
  .foot__legal a { font-size: var(--f-label); color: var(--t-on-dark-2); }
  .foot__legal a:hover { color: #fff; }
  .foot__social { display: flex; gap: 8px; }
  .foot__social a {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-pill);
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    transition: background-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-spring);
  }
  .foot__social a:hover { background: var(--cyan-600); color: var(--midnight); transform: translateY(-3px); }

/* ---------- Base ---------- */
.wa-float {
        position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
        z-index: 90; display: inline-flex; align-items: center; gap: 0;
        height: 56px; padding: 0 15px; border-radius: var(--r-pill);
        background: #25D366; color: #fff;
        box-shadow: 0 12px 34px -8px rgba(37, 211, 102, .6);
        transition: gap var(--d-base) var(--ease-spring), padding var(--d-base) var(--ease-spring), transform var(--d-base) var(--ease-spring);
      }
      .wa-float__label {
        max-width: 0; overflow: hidden; white-space: nowrap;
        font-size: var(--f-sm); font-weight: 600;
        transition: max-width var(--d-base) var(--ease-out);
      }
      .wa-float:hover, .wa-float:focus-visible { gap: 10px; padding-right: 22px; transform: translateY(-3px); }
      .wa-float:hover .wa-float__label, .wa-float:focus-visible .wa-float__label { max-width: 120px; }
      @media (max-width: 640px) { .wa-float { height: 52px; } }

/* ---------- link guard ---------- */
/* A card whose target page is not published yet still shows its copy — it just
   is not a link, and loses the affordance that promises somewhere to go. */
.is-pending { cursor: default; }
.is-pending:hover { transform: none !important; box-shadow: none !important; }
.is-pending .aud__go,
.is-pending .bento__go { opacity: .22; }

/* ---------- audience ---------- */
.aud__head { max-width: 800px; margin-inline: auto; text-align: center; }
.aud__head .eyebrow { justify-content: center; }

.aud__grid { list-style: none; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .aud__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1020px) { .aud__grid { grid-template-columns: repeat(3, 1fr); } }

.aud__card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-lg);
  background: var(--s-pure); border: 1px solid var(--border);
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
a.aud__card:hover { transform: translateY(-4px); box-shadow: var(--sh-card); border-color: color-mix(in srgb, var(--cyan-600) 45%, transparent); }

.aud__ico {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 15px;
  border-radius: var(--r-md); flex: none;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent);
  color: var(--accent-text);
  transition: background-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out), rotate var(--d-base) var(--ease-spring);
}
a.aud__card:hover .aud__ico { background: var(--cyan-600); color: #04121F; rotate: -8deg; }

.aud__role { display: block; font-size: var(--f-body); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 7px; }
.aud__line { display: block; font-size: var(--f-xs); line-height: 1.62; color: var(--t-muted); flex: 1; }
.aud__go {
  display: inline-grid; place-items: center; width: 26px; height: 26px; margin-top: 15px;
  border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--t-muted);
  transition: background-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out),
              translate var(--d-base) var(--ease-spring), border-color var(--d-base) var(--ease-out);
}
a.aud__card:hover .aud__go { background: var(--cyan-600); border-color: var(--cyan-600); color: #04121F; translate: 3px -3px; }

.aud__boards {
  margin-top: clamp(28px, 3vw, 44px); padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--r-xl); border: 1px dashed color-mix(in srgb, var(--cyan-600) 34%, transparent);
  background: color-mix(in srgb, var(--cyan-600) 5%, transparent);
  text-align: center;
}
.aud__boardsk { font-size: var(--f-label); letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 13px; }
.aud__boardlist { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.aud__chip {
  padding: 9px 18px; border-radius: var(--r-pill);
  background: var(--s-pure); border: 1px solid var(--border);
  font-size: var(--f-sm); font-weight: 600; color: var(--t-primary);
  transition: border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-spring);
}
a.aud__chip:hover { border-color: var(--cyan-600); color: var(--accent-text); transform: translateY(-2px); }
.aud__boardsn { max-width: 62ch; margin: 15px auto 0; }

/* ---------- insights ---------- */
.ins__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: clamp(28px, 3vw, 44px);
}
.ins__head .h2 { margin-top: 14px; }
.ins__all { flex: none; }

.ins__grid { list-style: none; padding: 0; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .ins__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ins__grid { grid-template-columns: repeat(3, 1fr); } }

.ins__card {
  position: relative;                 /* anchors the stretched link */
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--s-pure); border: 1px solid var(--border);
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
.ins__card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-card);
  border-color: color-mix(in srgb, var(--cyan-600) 45%, transparent);
}

/* ── Media ─────────────────────────────────────────────── */
.ins__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--n-100); }
.ins__img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--d-slow) var(--ease-out); }
.ins__card:hover .ins__img { scale: 1.06; }
.ins__fallback { display: grid; place-items: center; width: 100%; height: 100%; background: var(--aurora); color: #fff; }
.ins__fallback svg { opacity: .85; }

.ins__new {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  pointer-events: none;              /* label only — clicks fall through to the card */
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--aurora); color: #fff;
  font-size: var(--f-label); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  box-shadow: 0 6px 18px -6px rgba(0,187,245,.8);
}

/* ── Body ──────────────────────────────────────────────── */
.ins__body { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, 2vw, 24px); }

/* Category is its own destination, so it sits above the stretched overlay. */
.ins__cat {
  position: relative; z-index: 2; align-self: flex-start;
  padding: 6px 12px; margin-bottom: 12px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan-600) 24%, transparent);
  font-size: var(--f-label); font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-text);
  transition: background-color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.ins__cat:hover { background: var(--cyan-600); border-color: var(--cyan-600); color: #04121F; }

.ins__t { font-size: var(--f-h4); font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; margin-bottom: 9px; }
.ins__link { color: var(--t-primary); transition: color var(--d-fast) var(--ease-out); }
.ins__card:hover .ins__link { color: var(--accent-text); }

/* The stretched overlay: makes the whole card open the post. z-index 1 keeps it
   below the category and author links, which sit at z-index 2. */
.ins__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.ins__x { font-size: var(--f-xs); line-height: 1.62; color: var(--t-muted); flex: 1; }

/* ── Meta row ──────────────────────────────────────────── */
.ins__meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft);
}
.ins__author {
  position: relative; z-index: 2;      /* independently clickable */
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
}
.ins__avatar {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  object-fit: cover; background: var(--n-200);
  border: 1px solid var(--border);
}
.ins__avatar--initials {
  display: grid; place-items: center;
  background: var(--aurora); color: #fff; border-color: transparent;
  font-size: var(--f-label); font-weight: 700;
}
.ins__authorname {
  font-size: var(--f-label); font-weight: 600; color: var(--t-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--d-fast) var(--ease-out);
}
.ins__author:hover .ins__authorname { color: var(--accent-text); }

.ins__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--t-muted); opacity: .55; flex: none; }
.ins__d { font-size: var(--f-label); color: var(--t-muted); }

/* ---------- footer: Edoovi Labs product family ---------- */
.foot__family {
  margin-top: clamp(40px, 4.5vw, 64px);
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.foot__familyk {
  font-size: var(--f-label); letter-spacing: .09em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 16px;
}
.foot__familylist { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .foot__familylist { grid-template-columns: repeat(3, 1fr); } }

.foot__familycard {
  position: relative; display: flex; align-items: center; gap: 14px; height: 100%;
  padding: 16px 18px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.11);
  transition: background-color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
a.foot__familycard:hover {
  background: rgba(2,217,254,.1);
  border-color: rgba(2,217,254,.42);
  transform: translateY(-3px);
}

/* The current product is stated, not linked — it tells you where you are. */
.foot__familycard.is-current {
  background: linear-gradient(150deg, rgba(2,217,254,.14), rgba(97,72,250,.08));
  border-color: rgba(2,217,254,.34);
}
.foot__familyhere {
  position: absolute; top: -9px; left: 16px;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--aurora); color: #fff;
  font-size: var(--f-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}

/* Logos are different shapes and resolutions, so they are normalised to a
   fixed optical height inside a fixed-width slot rather than scaled to fill. */
.foot__familylogo { flex: none; width: 84px; display: grid; place-items: center; }
.foot__familylogo img { width: auto; max-width: 100%; height: 22px; object-fit: contain; }

/* Claims the space left over by the fixed logo slot. Without flex: 1 this
   column sized itself to the product *name* and then quietly ellipsed the
   longer descriptor underneath it — "Smart hospital management system" was
   getting 49px of an available 88px and being cut mid-word. It wraps now
   rather than truncating; the cards share a grid row, so they stay level. */
.foot__familytxt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.foot__familyname { font-size: var(--f-xs); font-weight: 600; color: #fff; }
.foot__familyline { font-size: var(--f-label); color: var(--t-on-dark-2); line-height: 1.45; }
.foot__familygo {
  margin-left: auto; flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.16); color: var(--t-on-dark-2);
  transition: background-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out), translate var(--d-base) var(--ease-spring);
}
a.foot__familycard:hover .foot__familygo {
  background: var(--cyan-600); border-color: var(--cyan-600); color: #04121F; translate: 2px -2px;
}

/* ---------- section-head decor ---------- */
/* Heading left, graphic right — the graphic draws what the heading says. */
.section-head.has-decor { max-width: none; display: grid; gap: clamp(24px, 3vw, 48px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px) { .section-head.has-decor { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.head__copy { max-width: 760px; }
.head__decor { display: none; }
@media (min-width: 940px) { .head__decor { display: block; } }

.decor { width: 100%; height: auto; max-height: 320px; overflow: visible; }

/* Modules: tiles that write into one student record.
   Same token names the AI drawings use, so both sets repaint together and a
   surface change is one edit rather than two. */
.decor--modules, .decor--security {
  --g-panel:  rgba(25, 15, 78, .045);
  --g-edge:   rgba(25, 15, 78, .13);
  --g-ink:    rgba(25, 15, 78, .45);
  --g-ink-2:  rgba(25, 15, 78, .24);
  --g-acc:    var(--cyan-600);
  --g-acc-fill: rgba(0, 187, 245, .18);
  --g-acc-line: rgba(0, 119, 168, .34);
  /* The redaction bars flag to violet mid-cycle. Without this the fill
     resolves to nothing and the bar blinks out instead of changing colour. */
  --g-flag:   var(--violet);
}
.s-ink .decor--modules, .s-midnight .decor--modules, .s-aurora .decor--modules,
.s-ink .decor--security, .s-midnight .decor--security, .s-aurora .decor--security {
  --g-panel:  rgba(255, 255, 255, .05);
  --g-edge:   rgba(255, 255, 255, .1);
  --g-ink:    rgba(255, 255, 255, .5);
  --g-ink-2:  rgba(255, 255, 255, .26);
  --g-acc:    var(--cyan);
  --g-acc-fill: rgba(2, 217, 254, .16);
  --g-acc-line: rgba(2, 217, 254, .34);
  --g-flag:   #7B67FF;
}

/* No plate under these two. The map, the timetable, the viewfinder, the
   dashboard and the query screen are all *screens* — they need a ground to sit
   on. These two are diagrams of relationships, and a tinted panel behind them
   just reads as a grey box floating on the section. */
.dmod__wire { stroke: var(--g-acc-line); stroke-width: 1.2; fill: none; }
/* One dash per wire, travelling inward — the record is written to, not read. */
.dmod__flow {
  stroke: var(--g-acc); stroke-width: 2.4; fill: none; stroke-linecap: round;
  stroke-dasharray: 7 93; stroke-dashoffset: 100;
  animation: dmod-flow 2.8s linear infinite; animation-delay: var(--d, 0s);
}
@keyframes dmod-flow { to { stroke-dashoffset: 0; } }

.dmod__tilebg { fill: var(--s-card, #fff); stroke: var(--g-edge); stroke-width: 1.3; }
.dmod__tiledot { fill: var(--g-acc); }
.dmod__tileline { fill: var(--g-ink); }
.dmod__tileline.is-dim { fill: var(--g-ink-2); }
.dmod__tile { animation: dmod-in .6s var(--ease-out) both; animation-delay: var(--d, 0s); }
@keyframes dmod-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

.dmod__recbg {
  fill: var(--s-card, #fff); stroke: var(--g-acc); stroke-width: 1.8;
  filter: drop-shadow(0 14px 30px rgba(25, 15, 78, .16));
}
.dmod__recphoto { fill: var(--g-acc-fill); stroke: var(--g-acc); stroke-width: 1.4; }
.dmod__recbody { fill: var(--g-acc-fill); stroke: var(--g-acc); stroke-width: 1.4; }
.dmod__recline { fill: var(--g-ink); }
.dmod__recline.is-dim { fill: var(--g-ink-2); }
/* Fields flicker as writes land on them — the record is being written to
   continuously, which is the point the heading is making. */
.dmod__recfield {
  fill: var(--g-ink-2);
  animation: dmod-write 2.8s var(--ease-inout) infinite; animation-delay: var(--d, 0s);
}
@keyframes dmod-write { 0%, 70%, 100% { fill: var(--g-ink-2); } 80% { fill: var(--g-acc); } }
.dmod__badgebg { fill: var(--g-acc); }
.dmod__badgeline { fill: rgba(255, 255, 255, .9); }
.dmod__badge { animation: dmod-badge 2.8s var(--ease-spring) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dmod-badge { 0%, 74%, 100% { transform: none; } 82% { transform: scale(1.08); } }

/* ── Security ─────────────────────────────────────────────────────── */
.dsec__sweep {
  fill: none; stroke: var(--g-acc-line); stroke-width: 1.4;
  transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: dsec-sweep 4.5s var(--ease-out) infinite; animation-delay: var(--d, 0s);
}
@keyframes dsec-sweep { 0% { transform: scale(.72); opacity: .85; } 70%, 100% { transform: scale(1.12); opacity: 0; } }
/* Two fields black out as the lock closes — role scoping, shown rather than
   asserted. */
.dsec__redact {
  fill: var(--g-ink-2);
  animation: dsec-redact 4.5s var(--ease-inout) infinite; animation-delay: var(--d, 0s);
}
@keyframes dsec-redact {
  0%, 40%   { fill: var(--g-ink-2); }
  55%, 92%  { fill: var(--g-flag); }
  100%      { fill: var(--g-ink-2); }
}
.dsec__lockpin { fill: var(--s-card, #fff); }
.dsec__auditdot { fill: var(--g-acc); animation: dsec-audit 3.4s var(--ease-out) infinite; animation-delay: var(--o, 0s); }
@keyframes dsec-audit { 0%, 60%, 100% { opacity: .35; } 70%, 85% { opacity: 1; } }
.dsec__auditrail { stroke: var(--g-edge); stroke-width: 1.6; stroke-dasharray: 3 4; }

/* Security: the record behind a lock, and the four controls that hold it */
.dsec__wire {
  stroke: var(--g-acc-line); stroke-width: 1.4; fill: none;
  stroke-dasharray: 5 95; stroke-dashoffset: 100;
  animation: dmod-flow 3.2s linear infinite; animation-delay: var(--d, 0s);
}
.dsec__recbg {
  fill: var(--s-card, #fff); stroke: var(--g-acc); stroke-width: 1.8;
  filter: drop-shadow(0 14px 30px rgba(25, 15, 78, .16));
}
.dsec__recline { fill: var(--g-ink); }
.dsec__recline.is-dim { fill: var(--g-ink-2); }
.dsec__lockbody { fill: var(--g-acc-fill); stroke: var(--g-acc); stroke-width: 1.6; }
.dsec__lockshackle { fill: none; stroke: var(--g-acc); stroke-width: 2.2; stroke-linecap: round; }
.dsec__lock { animation: dsec-lock 4.5s var(--ease-inout) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dsec-lock { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-2px) scale(1.06); } }

.dsec__ctlbg { fill: var(--s-card, #fff); stroke: var(--g-edge); stroke-width: 1.3; }
.dsec__ctlline { fill: var(--g-ink); }
.dsec__ctlline.is-dim { fill: var(--g-ink-2); }
.dsec__glyph { fill: var(--g-acc-fill); stroke: var(--g-acc); stroke-width: 1.5; }
.dsec__glyphdot { fill: var(--g-acc); }
.dsec__ctl { animation: dmod-in .6s var(--ease-out) both; animation-delay: var(--d, 0s); }
/* The OTP boxes fill one after another, then clear — the only control here
   that has a sequence, so it is the only one that animates like one. */
.dsec__otp {
  fill: var(--g-panel); stroke: var(--g-edge); stroke-width: 1.3;
  animation: dsec-otp 4s var(--ease-inout) infinite; animation-delay: var(--o, 0s);
}
@keyframes dsec-otp {
  0%, 10%  { fill: var(--g-panel);    stroke: var(--g-edge); }
  30%, 80% { fill: var(--g-acc-fill); stroke: var(--g-acc); }
  95%, 100% { fill: var(--g-panel);   stroke: var(--g-edge); }
}

/* ---------- onboarding: steps + sticky art panel ---------- */
.onb__wrap { display: grid; gap: clamp(28px, 3.5vw, 56px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .onb__wrap { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }

.onb__s { cursor: default; transition: background-color var(--d-base) var(--ease-out), padding-left var(--d-base) var(--ease-out); }
.onb__s:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; border-radius: var(--r-md); }
@media (min-width: 1000px) {
  .onb__s { padding-inline: 14px; border-radius: var(--r-md); }
  .onb__s.is-active { background: color-mix(in srgb, var(--cyan-600) 7%, transparent); }
  .onb__s.is-active .onb__n { color: color-mix(in srgb, var(--cyan-600) 22%, transparent); -webkit-text-stroke-color: var(--cyan-600); }
}

.onb__panel { display: none; }
@media (min-width: 1000px) {
  .onb__panel { display: block; position: sticky; top: calc(var(--nav-h) + 48px); }
}
.onb__panelinner {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 4 / 3; padding: clamp(20px, 2.4vw, 34px);
  border-radius: var(--r-2xl); border: 1px solid var(--border);
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--cyan-600) 9%, transparent), transparent 68%),
    var(--s-frost);
  overflow: hidden;
}
.onb__art {
  position: absolute; inset: clamp(20px, 2.4vw, 34px); margin: 0;
  display: grid; place-items: center; gap: 14px;
  opacity: 0; transform: translateY(10px) scale(.98);
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
  pointer-events: none;
}
.onb__art.is-active { opacity: 1; transform: none; }
.onb__artcap {
  font-size: var(--f-label); font-weight: 600; color: var(--accent-text);
  text-align: center; letter-spacing: -0.01em;
}

/* Step artwork primitives */
.decor--step { max-height: 240px; }
.dstep__paper { fill: var(--s-pure); stroke: var(--border); stroke-width: 1.5; }
.dstep__line { stroke: color-mix(in srgb, var(--cyan-600) 34%, transparent); stroke-width: 2.5; stroke-linecap: round; }
.dstep__lens { fill: color-mix(in srgb, var(--cyan-600) 8%, transparent); stroke: var(--cyan-600); stroke-width: 3; }
.dstep__lensarm { stroke: var(--cyan-600); stroke-width: 4; stroke-linecap: round; }
/* The magnifier travels across the three stacks and back — the step is
   literally "we look at what you have now". */
.dstep__mag { animation: dstep-scan 6s var(--ease-inout) infinite; }
.dstep__paper { animation: dstep-drift 7s var(--ease-inout) infinite alternate; }
.dstep__paper:nth-of-type(2) { animation-delay: -2.3s; }
.dstep__paper:nth-of-type(3) { animation-delay: -4.6s; }

.dstep__field { fill: var(--s-pure); stroke: var(--border); stroke-width: 1.5; }
.dstep__toggle { fill: color-mix(in srgb, var(--cyan-600) 18%, transparent); animation: dstep-track 5s var(--ease-inout) infinite; animation-delay: var(--d, 0s); }
.dstep__knob { fill: var(--cyan-600); animation: dstep-switch 5s var(--ease-inout) infinite; animation-delay: var(--d, 0s); }
.dstep__field { animation: dstep-settle 5s var(--ease-inout) infinite; animation-delay: var(--d, 0s); }
/* Stagger is wider here so the four rows switch on in sequence, not together. */
.dstep__row:nth-of-type(1) { --d: 0s; }
.dstep__row:nth-of-type(2) { --d: .35s; }
.dstep__row:nth-of-type(3) { --d: .7s; }
.dstep__row:nth-of-type(4) { --d: 1.05s; }

.dstep__box { fill: var(--s-pure); stroke: var(--border); stroke-width: 1.5; }
.dstep__box--target { stroke: var(--cyan-600); stroke-width: 2; }
.dstep__flow { stroke: color-mix(in srgb, var(--cyan-600) 40%, transparent); stroke-width: 2; stroke-dasharray: 6 6; }
.dstep__arrow { stroke: var(--cyan-600); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.dstep__chip { fill: var(--cyan-600); }
.dstep__pkt { animation: dstep-slide 2.4s var(--ease-inout) infinite; animation-delay: var(--d, 0s); }

.dstep__head { fill: color-mix(in srgb, var(--cyan-600) 22%, transparent); stroke: var(--cyan-600); stroke-width: 1.8;
  animation: dstep-nod 4.5s var(--ease-inout) infinite; animation-delay: var(--d, 0s); }
.dstep__screen { fill: var(--s-pure); stroke: var(--border); stroke-width: 1.5;
  animation: dstep-glow 4.5s var(--ease-inout) infinite; animation-delay: var(--d, 0s); }
.dstep__person { animation: dstep-in .5s var(--ease-out) both; animation-delay: var(--d, 0s); }

@keyframes dstep-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dstep-slide { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(110px); opacity: 0; } }

/* Step 1 — scan across the stacks and back */
@keyframes dstep-scan {
  0%, 8%    { transform: translate(0, 0) scale(1); }
  30%       { transform: translate(-118px, -46px) scale(1.06); }
  55%       { transform: translate(-208px, -26px) scale(1); }
  80%, 100% { transform: translate(0, 0) scale(1); }
}
@keyframes dstep-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-7px); }
}

/* Step 2 — each setting switches on, holds, then resets for the next loop */
@keyframes dstep-switch {
  0%, 12%   { transform: translateX(0); }
  30%, 88%  { transform: translateX(22px); }
  100%      { transform: translateX(0); }
}
@keyframes dstep-track {
  0%, 12%   { fill: color-mix(in srgb, var(--cyan-600) 18%, transparent); }
  30%, 88%  { fill: var(--cyan-600); }
  100%      { fill: color-mix(in srgb, var(--cyan-600) 18%, transparent); }
}
@keyframes dstep-settle {
  0%, 12%   { stroke: var(--border); }
  30%, 88%  { stroke: color-mix(in srgb, var(--cyan-600) 55%, transparent); }
  100%      { stroke: var(--border); }
}

/* Step 4 — screens light up in turn while heads tilt toward them */
@keyframes dstep-glow {
  0%, 20%   { fill: var(--s-pure); stroke: var(--border); }
  40%, 70%  { fill: color-mix(in srgb, var(--cyan-600) 16%, transparent); stroke: var(--cyan-600); }
  100%      { fill: var(--s-pure); stroke: var(--border); }
}
@keyframes dstep-nod {
  0%, 20%, 100% { transform: translateY(0); }
  40%, 70%      { transform: translateY(3px); }
}

/* Only the artwork actually on screen animates — the other three are stacked
   behind it at opacity 0 and would otherwise keep the compositor busy. */
.onb__art:not(.is-active) * { animation-play-state: paused; }

/* ---------- AI section artwork ---------- */
/* Every rule below states the *resting* look first and lets the keyframes
   depart from it — never the other way round. The global reduced-motion block
   collapses animations to a single 0.001ms pass, so anything whose base style
   is the hidden end of its own animation would simply vanish for those
   visitors. Resting state visible, animation optional. */
/* The drawings are surface-agnostic: every colour below is a token, and the
   only thing that changes between a dark host (the hero) and a light one (the
   AI section) is the token block. Same SVG, same markup, two palettes — which
   is what lets these graphics be reused in the hero slider without a second
   set of files. Dark is the default; light hosts override. */
.decor--ai,
.decor--fee {
  max-height: none; width: 100%;

  --g-panel:  rgba(255, 255, 255, .05);   /* structural panel fills */
  --g-panel-2:rgba(255, 255, 255, .09);   /* the stronger of the two */
  --g-empty:  rgba(255, 255, 255, .03);   /* a cell before it fills */
  --g-edge:   rgba(255, 255, 255, .09);   /* structural outlines */
  --g-edge-2: rgba(255, 255, 255, .07);
  --g-hair:   rgba(255, 255, 255, .07);   /* plot grid lines */
  --g-axis:   rgba(255, 255, 255, .14);
  --g-ink:    rgba(255, 255, 255, .5);    /* bars standing in for text */
  --g-ink-2:  rgba(255, 255, 255, .28);
  --g-body:   rgba(255, 255, 255, .2);    /* head and shoulder outlines */
  --g-route:  rgba(255, 255, 255, .12);

  --g-acc:      var(--cyan);
  --g-acc-fill: rgba(2, 217, 254, .16);
  --g-acc-line: rgba(2, 217, 254, .4);
  --g-acc-mid:  rgba(2, 217, 254, .55);
  --g-acc-glow: rgba(2, 217, 254, .85);

  --g-flag:      #7B67FF;
  --g-flag-fill: rgba(97, 72, 250, .28);
  --g-flag-line: rgba(123, 103, 255, .5);
}

/* Light hosts. Full-saturation #02D9FE disappears against white, so the accent
   steps down to the 600 weight and thin strokes go to the AA-safe ink cyan. */
.s-pure .decor--ai,
.s-frost .decor--ai,
.s-halo .decor--ai,
.s-pure .decor--fee,
.s-frost .decor--fee,
.s-halo .decor--fee {
  --g-panel:  rgba(25, 15, 78, .045);
  --g-panel-2:rgba(25, 15, 78, .085);
  --g-empty:  rgba(25, 15, 78, .025);
  --g-edge:   rgba(25, 15, 78, .13);
  --g-edge-2: rgba(25, 15, 78, .09);
  --g-hair:   rgba(25, 15, 78, .08);
  --g-axis:   rgba(25, 15, 78, .18);
  --g-ink:    rgba(25, 15, 78, .45);
  --g-ink-2:  rgba(25, 15, 78, .24);
  --g-body:   rgba(25, 15, 78, .28);
  --g-route:  rgba(25, 15, 78, .13);

  --g-acc:      var(--cyan-600);
  --g-acc-fill: rgba(0, 187, 245, .18);
  --g-acc-line: rgba(0, 119, 168, .42);
  --g-acc-mid:  rgba(0, 119, 168, .55);
  --g-acc-glow: rgba(0, 187, 245, .5);

  --g-flag:      var(--violet);
  --g-flag-fill: rgba(97, 72, 250, .2);
  --g-flag-line: rgba(97, 72, 250, .45);
}

/* A dark band nested inside a light section: the light override above is set
   by an ancestor, so without this the drawing keeps the light palette and its
   ink-on-white shapes vanish against the dark. Same tokens as the default,
   re-asserted at equal specificity and later in the sheet. */
.s-ink .decor--ai, .s-midnight .decor--ai, .s-aurora .decor--ai,
.s-ink .decor--fee, .s-midnight .decor--fee, .s-aurora .decor--fee {

  --g-panel:  rgba(255, 255, 255, .05);   /* structural panel fills */
  --g-panel-2:rgba(255, 255, 255, .09);   /* the stronger of the two */
  --g-empty:  rgba(255, 255, 255, .03);   /* a cell before it fills */
  --g-edge:   rgba(255, 255, 255, .09);   /* structural outlines */
  --g-edge-2: rgba(255, 255, 255, .07);
  --g-hair:   rgba(255, 255, 255, .07);   /* plot grid lines */
  --g-axis:   rgba(255, 255, 255, .14);
  --g-ink:    rgba(255, 255, 255, .5);    /* bars standing in for text */
  --g-ink-2:  rgba(255, 255, 255, .28);
  --g-body:   rgba(255, 255, 255, .2);    /* head and shoulder outlines */
  --g-route:  rgba(255, 255, 255, .12);

  --g-acc:      var(--cyan);
  --g-acc-fill: rgba(2, 217, 254, .16);
  --g-acc-line: rgba(2, 217, 254, .4);
  --g-acc-mid:  rgba(2, 217, 254, .55);
  --g-acc-glow: rgba(2, 217, 254, .85);

  --g-flag:      #7B67FF;
  --g-flag-fill: rgba(97, 72, 250, .28);
  --g-flag-line: rgba(123, 103, 255, .5);
}

/* ── AI timetable: a grid solving itself ──────────────────────────────
   One 9s loop: the grid lands on a diagonal wave, a clash is flagged, the
   generator finds a free slot, the booking arcs across into it, and the status
   bar goes from solving to solved. Same plate and edge-fade as the GPS map. */
.aitt__plate {
  -webkit-mask-image: radial-gradient(80% 78% at 50% 50%, #000 44%, transparent 100%);
  mask-image: radial-gradient(80% 78% at 50% 50%, #000 44%, transparent 100%);
}
.aitt__platebg { fill: var(--g-panel); }

.aitt__day {
  fill: var(--g-panel-2);
  animation: aitt-cell 9s var(--ease-out) infinite; animation-delay: var(--d, 0s);
}
.aitt__per { fill: var(--g-panel); }
.aitt__perline { fill: var(--g-ink-2); }

/* Opacity and a nudge, never scale: these groups hold children at absolute
   coordinates, so a scale would need a transform-box per element and would
   pivot off the SVG origin the moment one was missed. */
.aitt__cell { animation: aitt-cell 9s var(--ease-out) infinite; animation-delay: var(--d, 0s); }
@keyframes aitt-cell {
  0%, 2%   { opacity: 0; transform: translateY(7px); }
  11%, 93% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: translateY(7px); }
}
.aitt__c { fill: var(--g-acc-fill); stroke: var(--g-acc-line); stroke-width: 1.2; }
.aitt__cline { fill: var(--g-ink); }
.aitt__cline.is-dim { fill: var(--g-ink-2); }

/* The booking already sitting in the cell the clash lands on. */
.aitt__resident { animation: aitt-cell 9s var(--ease-out) infinite; animation-delay: .27s; }

/* The free slot, dashed until the booking arrives in it. */
.aitt__slot {
  fill: none; stroke: var(--g-acc); stroke-width: 1.8; stroke-dasharray: 6 6; opacity: 0;
  animation: aitt-slot 9s var(--ease-inout) infinite;
}
@keyframes aitt-slot { 0%, 38% { opacity: 0; } 46%, 62% { opacity: .9; } 70%, 100% { opacity: 0; } }

/* Violet, not ember, marks the clash. Ember is reserved site-wide for urgency
   — offers and countdowns — and a decorative graphic spending it would blunt
   the one colour the CTAs rely on. The ring turns cyan once it is resolved. */
.aitt__clashring {
  fill: none; stroke-width: 2.4; opacity: 0;
  animation: aitt-clash 9s var(--ease-out) infinite;
}
@keyframes aitt-clash {
  0%, 30%   { opacity: 0; stroke: var(--g-flag); }
  36%, 60%  { opacity: 1; stroke: var(--g-flag); }
  70%, 90%  { opacity: 1; stroke: var(--g-acc); }
  97%, 100% { opacity: 0; stroke: var(--g-acc); }
}

/* Lifts, arcs over the grid, lands. The mid keyframe is what makes it an arc
   rather than a slide — a booking that slides looks dragged, one that arcs
   looks placed. */
.aitt__move {
  filter: drop-shadow(0 8px 16px rgba(2, 217, 254, .35));
  animation: aitt-move 9s var(--ease-inout) infinite;
}
@keyframes aitt-move {
  0%, 52%  { transform: translate(0, 0); }
  61%      { transform: translate(calc(var(--tx) / 2), calc(var(--ty) / 2 - 32px)); }
  70%, 92% { transform: translate(var(--tx), var(--ty)); }
  100%     { transform: translate(0, 0); }
}
.aitt__book { fill: var(--g-acc-fill); stroke: var(--g-acc); stroke-width: 2.2; }
.aitt__bookline { fill: var(--g-ink); }
.aitt__bookline.is-dim { fill: var(--g-ink-2); }

/* Solving → solved. */
.aitt__statusbg { fill: var(--s-card, #fff); stroke: var(--g-edge); stroke-width: 1.3; }
.aitt__spinner {
  fill: none; stroke: var(--g-acc); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 26 18; transform-box: fill-box; transform-origin: center;
  animation: aitt-spin 1.1s linear infinite, aitt-solved 9s step-end infinite;
}
@keyframes aitt-spin { to { transform: rotate(360deg); } }
@keyframes aitt-solved { 0%, 69% { opacity: 1; } 70%, 100% { opacity: 0; } }
.aitt__statustick {
  fill: none; stroke: var(--g-acc); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; animation: aitt-tick 9s step-end infinite;
}
@keyframes aitt-tick { 0%, 69% { opacity: 0; } 70%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
.aitt__statustrack { fill: var(--g-edge); }
.aitt__statusfill {
  fill: var(--g-acc); transform-box: fill-box; transform-origin: left center;
  animation: aitt-progress 9s var(--ease-out) infinite;
}
@keyframes aitt-progress { 0% { transform: scaleX(.04); } 70%, 96% { transform: scaleX(1); } 100% { transform: scaleX(.04); } }

/* ── Face recognition: sweep, mesh, lock on, tick the register ────────
   One 8s loop: the sweep runs the frame, the landmarks light, the mesh wires
   between them, the box locks on, and four people — the last one staff — are
   marked present in turn. */
.aiface__plate {
  -webkit-mask-image: radial-gradient(80% 78% at 50% 50%, #000 44%, transparent 100%);
  mask-image: radial-gradient(80% 78% at 50% 50%, #000 44%, transparent 100%);
}
.aiface__platebg { fill: var(--g-panel); }

.aiface__bracket { fill: none; stroke: var(--g-acc); stroke-width: 3; stroke-linecap: round; }
.aiface__head { fill: var(--g-panel); stroke: var(--g-body); stroke-width: 1.8; }
.aiface__body { fill: var(--g-panel); stroke: var(--g-body); stroke-width: 1.8; }

/* The mesh draws itself edge by edge, which is the part that reads as
   "measuring" rather than "highlighting". */
.aiface__edge {
  stroke: var(--g-acc-line); stroke-width: 1.4; stroke-dasharray: 1 0;
  opacity: 0; animation: aiface-edge 8s var(--ease-out) infinite; animation-delay: var(--d, 0s);
}
@keyframes aiface-edge { 0%, 8% { opacity: 0; } 18%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }

.aiface__mark {
  fill: var(--g-acc); transform-box: fill-box; transform-origin: center;
  animation: aiface-mark 8s var(--ease-out) infinite; animation-delay: var(--d, 0s);
}
@keyframes aiface-mark {
  0%, 6%    { opacity: 0; transform: scale(.3); }
  14%, 88%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.3); }
}

/* Snaps on once the mesh is complete — a lock that eases in does not read as
   a lock. */
.aiface__lock { opacity: 0; animation: aiface-lock 8s steps(1, end) infinite; }
@keyframes aiface-lock { 0%, 27% { opacity: 0; } 28%, 90% { opacity: 1; } 91%, 100% { opacity: 0; } }
.aiface__lockbox { fill: none; stroke: var(--g-acc); stroke-width: 2; stroke-dasharray: 22 14; }
.aiface__lockchip { fill: var(--g-acc); }
.aiface__lockdot { fill: var(--s-card, #fff); }
.aiface__lockline { fill: rgba(255, 255, 255, .85); }

.aiface__scan {
  fill: var(--g-acc); opacity: .9;
  filter: drop-shadow(0 0 9px var(--g-acc-glow));
  animation: aiface-scan 8s var(--ease-inout) infinite;
}
@keyframes aiface-scan {
  0%        { transform: translateY(0); opacity: 0; }
  5%        { opacity: .95; }
  26%       { transform: translateY(226px); opacity: .95; }
  32%, 100% { transform: translateY(226px); opacity: 0; }
}

.aiface__rowbg { fill: var(--s-card, #fff); stroke: var(--g-edge); stroke-width: 1.2; }
.aiface__rowav { fill: var(--g-acc-fill); stroke: var(--g-acc-line); stroke-width: 1.2; }
.aiface__rowline { fill: var(--g-ink); }
.aiface__rowline.is-dim { fill: var(--g-ink-2); }
.aiface__rowok { fill: var(--g-acc-fill); stroke: var(--g-acc); stroke-width: 1.5; }
.aiface__rowtick { fill: none; stroke: var(--g-acc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.aiface__row { animation: aiface-row 8s var(--ease-out) infinite; animation-delay: var(--d, 0s); }
@keyframes aiface-row {
  0%, 4%    { opacity: 0; transform: translateX(14px); }
  12%, 88%  { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateX(14px); }
}

/* ── AI dashboard: tiles, the month in bars, and the flag it raises ───
   9s loop: tiles land with their sparklines, bars grow, the short one is
   flagged, and the insight card arrives on a leader line from it. */
.aidash__plate {
  -webkit-mask-image: radial-gradient(80% 78% at 50% 50%, #000 44%, transparent 100%);
  mask-image: radial-gradient(80% 78% at 50% 50%, #000 44%, transparent 100%);
}
.aidash__platebg { fill: var(--g-panel); }
.aidash__live { fill: var(--g-acc); animation: aidash-live 1.8s var(--ease-inout) infinite; }
@keyframes aidash-live { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.aidash__tilebg { fill: var(--s-card, #fff); stroke: var(--g-edge); stroke-width: 1.2; }
.aidash__tilek { fill: var(--g-ink-2); }
.aidash__tilev { fill: var(--g-acc); }
.aidash__spark {
  fill: none; stroke: var(--g-acc); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
  animation: aidash-spark 9s var(--ease-out) infinite; animation-delay: var(--d, 0s);
}
@keyframes aidash-spark { 0%, 4% { stroke-dashoffset: 100; } 20%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
.aidash__tile { animation: aidash-tile 9s var(--ease-out) infinite; animation-delay: var(--d, 0s); }
@keyframes aidash-tile {
  0%, 3%   { opacity: 0; transform: translateY(-9px); }
  12%, 92% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: translateY(-9px); }
}

.aidash__grid { stroke: var(--g-hair); stroke-width: 1; }
.aidash__bar { fill: var(--g-acc-line); animation: aidash-bar 9s var(--ease-out) infinite; animation-delay: var(--d, 0s); }
@keyframes aidash-bar { 0%, 5% { transform: scaleY(0); } 22%, 92% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.aidash__bar.is-flagged { fill: var(--g-flag); }
.aidash__axis { stroke: var(--g-axis); stroke-width: 1.4; }

/* The flag lands before the card, so the reader looks at the bar first and
   then gets told why. */
.aidash__alert { opacity: 0; animation: aidash-alert 9s var(--ease-out) infinite; }
@keyframes aidash-alert { 0%, 32% { opacity: 0; } 42%, 92% { opacity: 1; } 100% { opacity: 0; } }
.aidash__alertdot { fill: var(--g-flag); }
.aidash__alertmark { stroke: var(--s-card, #fff); stroke-width: 2.4; stroke-linecap: round; }
.aidash__leader { stroke: var(--g-flag-line); stroke-width: 1.6; stroke-dasharray: 4 5; }

.aidash__insight { animation: aidash-insight 9s var(--ease-out) infinite; }
@keyframes aidash-insight {
  0%, 46%  { opacity: 0; transform: translateY(12px); }
  56%, 92% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: translateY(12px); }
}
.aidash__insightbg { fill: var(--g-flag-fill); stroke: var(--g-flag-line); stroke-width: 1.4; }
.aidash__insightdot { fill: var(--g-flag); }
.aidash__insightline { fill: var(--g-ink); }
.aidash__insightline.is-dim { fill: var(--g-ink-2); }

/* ── AI reports: the question types, the answer draws, the forecast follows ──── */
.airep__plate {
  -webkit-mask-image: radial-gradient(80% 78% at 50% 50%, #000 44%, transparent 100%);
  mask-image: radial-gradient(80% 78% at 50% 50%, #000 44%, transparent 100%);
}
.airep__platebg { fill: var(--g-panel); }
.airep__bar { fill: var(--s-card, #fff); stroke: var(--g-edge); stroke-width: 1.3; }
.airep__sparkle { fill: var(--g-acc); }
.airep__go { fill: var(--g-acc); animation: aidash-live 2s var(--ease-inout) infinite; }
.airep__rowbg { fill: var(--s-card, #fff); stroke: var(--g-edge); stroke-width: 1.2; }
.airep__rowline { fill: var(--g-ink); }
.airep__rowline.is-dim { fill: var(--g-ink-2); }
.airep__rowval { fill: var(--g-acc); }
.airep__row { animation: airep-row 6.5s var(--ease-out) infinite; animation-delay: var(--d, 0s); }
@keyframes airep-row {
  0%, 4%    { opacity: 0; transform: translateY(9px); }
  10%, 92%  { opacity: 1; transform: none; }
  100%      { opacity: 0; transform: translateY(9px); }
}
/* The whole sequence — type, draw, project — is front-loaded so the chart
   spends most of the loop standing complete. An earlier cut held the question
   until 30% and the answer until 50%, which left the card showing an empty
   plot with one orphaned dot for a third of every cycle. */
.airep__typed { fill: var(--g-ink); animation: airep-type 6.5s steps(20) infinite; }
@keyframes airep-type { 0%, 2% { width: 0; } 20%, 94% { width: 300px; } 100% { width: 0; } }

.airep__caret { fill: var(--g-acc); animation: airep-caret 6.5s steps(20) infinite, airep-blink 1s steps(2) infinite; }
@keyframes airep-caret { 0%, 2% { transform: translateX(0); } 20%, 94% { transform: translateX(300px); } 100% { transform: translateX(0); } }
@keyframes airep-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.airep__grid { stroke: var(--g-hair); stroke-width: 1; }
.airep__known {
  fill: none; stroke: var(--g-acc); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
  animation: airep-draw 6.5s var(--ease-out) infinite;
}
@keyframes airep-draw { 0%, 20% { stroke-dashoffset: 100; } 34%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }

.airep__fore {
  fill: none; stroke: var(--g-acc-mid); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 6 6;
  animation: airep-fore 6.5s var(--ease-out) infinite;
}
@keyframes airep-fore { 0%, 34% { opacity: 0; } 46%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* The pivot marks where measured data stops and the projection starts, so it
   has to arrive with the line rather than sit there on its own. */
.airep__pivot { fill: var(--g-acc); animation: airep-pivot 6.5s var(--ease-out) infinite; }
@keyframes airep-pivot { 0%, 26% { opacity: 0; } 34%, 94% { opacity: 1; } 100% { opacity: 0; } }
.airep__foredot {
  fill: var(--g-acc-fill); stroke: var(--g-acc); stroke-width: 2;
  animation: airep-fore 6.5s var(--ease-out) infinite;
}

/* ── GPS: a bus driving a route across a map ──────────────────────────
   One 14s loop drives everything: the bus along the road, the covered part of
   the route filling in behind it, each stop lighting as it is reached, and the
   arrival bar counting down. They share a duration rather than a look, so they
   cannot drift out of step. */
/* The map dissolves at its edges instead of ending at a border, so the drawing
   has no rectangle around it and sits directly in whatever surface hosts it. */
.aigps__map {
  -webkit-mask-image: radial-gradient(78% 76% at 50% 50%, #000 42%, transparent 100%);
  mask-image: radial-gradient(78% 76% at 50% 50%, #000 42%, transparent 100%);
}
.aigps__plate { fill: var(--g-panel); stroke: none; }
.aigps__streets line { stroke: var(--g-hair); stroke-width: 1.4; }
.aigps__block {
  fill: var(--g-panel); stroke: var(--g-edge); stroke-width: 1.1;
  animation: aigps-block 9s var(--ease-inout) infinite; animation-delay: var(--d, 0s);
}
@keyframes aigps-block { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.aigps__casing { fill: none; stroke: var(--g-route); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
/* Centre line, flowing forward — the road reads as live even between stops. */
.aigps__lane {
  fill: none; stroke: var(--g-acc-line); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 7 12; animation: aigps-lane 1.4s linear infinite;
}
@keyframes aigps-lane { to { stroke-dashoffset: -19; } }
.aigps__done {
  fill: none; stroke: var(--g-acc); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: aigps-done 14s linear infinite;
}
@keyframes aigps-done { 0% { stroke-dashoffset: 100; } 95%, 100% { stroke-dashoffset: 0; } }

/* Each pin waits for the bus: --at is where along the 14s run it sits, so the
   pop happens as the bus arrives rather than on a timer of its own. */
.aigps__pin { animation: aigps-pin 14s var(--ease-out) infinite; animation-delay: var(--at, 0s); transform-box: fill-box; transform-origin: center bottom; }
@keyframes aigps-pin {
  0%      { transform: scale(1); }
  3%      { transform: scale(1.3); }
  8%, 100% { transform: scale(1); }
}
.aigps__pinbody { fill: var(--g-acc-fill); stroke: var(--g-acc); stroke-width: 1.8; }
.aigps__pindot { fill: var(--g-acc); }
.aigps__ping {
  fill: none; stroke: var(--g-acc); stroke-width: 2;
  transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: aigps-ping 14s var(--ease-out) infinite; animation-delay: var(--at, 0s);
}
@keyframes aigps-ping {
  0%       { transform: scale(.4); opacity: .9; }
  12%, 100% { transform: scale(2.6); opacity: 0; }
}

.aigps__schoolbg { fill: var(--g-panel-2); stroke: var(--g-body); stroke-width: 1.5; }
.aigps__schoolroof { fill: var(--g-acc-fill); stroke: var(--g-acc); stroke-width: 1.5; stroke-linejoin: round; }
.aigps__schoolrows { stroke: var(--g-ink-2); stroke-width: 2; stroke-linecap: round; }

/* The bus is parked at the school unless offset-path is available, which is
   the honest fallback — it is the one place on the route it belongs when it is
   not moving. Where the property is supported it follows the exact curve the
   markup declared, and offset-rotate banks it into the turns. */
.aigps__bus { transform: translate(56px, 316px); }
@supports (offset-path: path("M0 0")) {
  .aigps__bus {
    transform: none;
    offset-path: var(--route);
    offset-rotate: auto;
    animation: aigps-drive 14s linear infinite;
  }
  @keyframes aigps-drive { 0% { offset-distance: 0%; } 95%, 100% { offset-distance: 100%; } }
}
.aigps__buspaint { fill: var(--g-acc); }
.aigps__buswin { fill: var(--g-panel-2); opacity: .95; }
.aigps__buswheel { fill: var(--g-ink); }
.aigps__buslamp { fill: #FFF3C4; animation: aigps-lamp 1.1s var(--ease-inout) infinite; }
@keyframes aigps-lamp { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.aigps__accuracy {
  fill: var(--g-acc-fill); stroke: var(--g-acc-line); stroke-width: 1.2;
  animation: aigps-accuracy 2.2s var(--ease-out) infinite;
}
@keyframes aigps-accuracy {
  0%       { transform: scale(.5); opacity: .8; }
  70%, 100% { transform: scale(1.25); opacity: 0; }
}

.aigps__etabg { fill: var(--s-card, #fff); stroke: var(--g-acc-line); stroke-width: 1.4; }
.aigps__etadot { fill: var(--g-acc); animation: aigps-lamp 1.8s var(--ease-inout) infinite; }
.aigps__etaline { fill: var(--g-ink); }
.aigps__etaline.is-dim { fill: var(--g-ink-2); }
.aigps__etatrack { fill: var(--g-edge); }
/* Counts down as the bus closes on the next stop, then resets with it. */
.aigps__etafill {
  fill: var(--g-acc); transform-box: fill-box; transform-origin: left center;
  animation: aigps-eta 14s linear infinite;
}
@keyframes aigps-eta { 0% { transform: scaleX(1); } 95%, 100% { transform: scaleX(.06); } }

@media (prefers-reduced-motion: reduce) {
  .dmod__flow, .dmod__tile, .dmod__recfield, .dmod__badge,
  .dsec__wire, .dsec__ctl, .dsec__lock, .dsec__otp, .dsec__sweep, .dsec__redact, .dsec__auditdot,
  .dstep__row, .dstep__pkt, .dstep__person,
  .dstep__mag, .dstep__paper, .dstep__toggle, .dstep__knob,
  .dstep__field, .dstep__head, .dstep__screen,
  .aitt__cell, .aitt__day, .aitt__resident, .aitt__slot, .aitt__clashring, .aitt__move,
  .aitt__spinner, .aitt__statustick, .aitt__statusfill,
  .aiface__mark, .aiface__edge, .aiface__lock, .aiface__scan, .aiface__row,

  .airep__typed, .airep__caret, .airep__known, .airep__fore, .airep__foredot, .airep__pivot, .airep__row, .airep__go,
  .aidash__tile, .aidash__spark, .aidash__bar, .aidash__insight, .aidash__alert, .aidash__live,
  .aigps__block, .aigps__lane, .aigps__done, .aigps__pin, .aigps__ping,
  .aigps__bus, .aigps__buslamp, .aigps__accuracy, .aigps__etadot, .aigps__etafill { animation: none; }

  /* The sweep line has no resting position of its own — it only means
     something while it is travelling. */
  .aiface__scan { opacity: 0; }
}

/* ===== Instant alerts — built after the reference build ===== */
/* ---------- Instant alerts ---------- */
.alr__grid { display: grid; gap: clamp(34px, 4vw, 60px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .alr__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.alr__copy .h2 { margin-block: 16px 18px; }
.alr__copy .lead { margin-bottom: 26px; }
.alr__trig { list-style: none; padding: 0; display: grid; gap: 14px; margin-bottom: 26px; }
@media (min-width: 620px) { .alr__trig { grid-template-columns: repeat(2, 1fr); gap: 14px 22px; } }
.alr__trig li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.alr__ico {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
    background: color-mix(in srgb, var(--cyan-600) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cyan-600) 24%, transparent);
    color: var(--accent-text);
  }
.alr__t { display: grid; gap: 2px; }
.alr__t strong { font-size: var(--f-sm); font-weight: 600; }
.alr__t span { font-size: var(--f-xs); color: var(--t-muted); line-height: 1.5; }
.alr__chan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.alr__chank { font-size: var(--f-label); letter-spacing: .09em; text-transform: uppercase; color: var(--t-muted); margin-right: 4px; }
.alr__chip {
    padding: 6px 13px; border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--cyan-600) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cyan-600) 26%, transparent);
    font-size: var(--f-label); color: var(--accent-text);
  }
.alr__art .decor { max-height: none; }
/* ---------- Alerts artwork ----------
   Everything here shares one 12s timeline with NO animation-delay, and each
   element's moment is written into its own keyframe percentages instead.

   That is the whole fix. animation-delay on an infinite animation shifts the
   entire loop, so two elements with different delays never restart together:
   the message was resetting at t=12s while the rules it came from were still
   held open until t=12.2s, and the sequence fell apart on every repeat. Same
   duration, zero delay, different percentages — the only arrangement that
   actually stays in step. */
.dalr__plate {
  -webkit-mask-image: radial-gradient(80% 78% at 50% 50%, #000 44%, transparent 100%);
  mask-image: radial-gradient(80% 78% at 50% 50%, #000 44%, transparent 100%);
}
.dalr__platebg { fill: var(--g-panel); }
.dalr__rulebg { fill: var(--s-card, #fff); stroke: var(--g-edge); stroke-width: 1.2; }
.dalr__ruleico { fill: var(--g-acc-fill); stroke: var(--g-acc-line); stroke-width: 1.2; }
.dalr__ruleline { fill: var(--g-ink); }
.dalr__ruleline.is-dim { fill: var(--g-ink-2); }
.dalr__msgbg { fill: var(--s-card, #fff); stroke: var(--g-acc-line); stroke-width: 1.6; }
.dalr__msgline { fill: var(--g-ink); }
.dalr__msgline.is-dim { fill: var(--g-ink-2); }
.dalr__chanbg { fill: var(--s-card, #fff); stroke: var(--g-edge); stroke-width: 1.2; }
.dalr__chanok { fill: var(--g-acc-fill); stroke: var(--g-acc); stroke-width: 1.5; }
.dalr__chantick { fill: none; stroke: var(--g-acc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dalr__knob { fill: var(--s-card, #fff); }
.dalr__track { fill: var(--g-edge); }
.dalr__feed, .dalr__lane {
  fill: none; stroke: var(--g-acc); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
.dalr__lane { stroke: var(--g-acc-line); stroke-width: 2; }
.dalr__token { fill: var(--g-acc-fill); }
/* ── The one timeline ─────────────────────────────────────
   rules 4-16% · feeds 10-24% · message 26-34% · tokens 36-44%
   lanes 48-64% · channels 56-72% · everything holds to 92% · reset by 100% */
.dalr__rule  { animation: dalr-r1 12s var(--ease-out) infinite; }
.dalr__rule.is-2 { animation-name: dalr-r2; }
.dalr__rule.is-3 { animation-name: dalr-r3; }
.dalr__track { animation: dalr-t1 12s var(--ease-inout) infinite; }
.dalr__rule.is-2 .dalr__track { animation-name: dalr-t2; }
.dalr__rule.is-3 .dalr__track { animation-name: dalr-t3; }
.dalr__knob { animation: dalr-k1 12s var(--ease-spring) infinite; }
.dalr__rule.is-2 .dalr__knob { animation-name: dalr-k2; }
.dalr__rule.is-3 .dalr__knob { animation-name: dalr-k3; }
.dalr__feed { animation: dalr-f1 12s var(--ease-out) infinite; }
.dalr__feed.is-2 { animation-name: dalr-f2; }
.dalr__feed.is-3 { animation-name: dalr-f3; }
.dalr__msg { animation: dalr-msg 12s var(--ease-out) infinite; }
.dalr__token { animation: dalr-tok1 12s var(--ease-inout) infinite; }
.dalr__token.is-2 { animation-name: dalr-tok2; }
.dalr__lane { animation: dalr-l1 12s var(--ease-out) infinite; }
.dalr__lane.is-2 { animation-name: dalr-l2; }
.dalr__lane.is-3 { animation-name: dalr-l3; }
.dalr__lane.is-4 { animation-name: dalr-l4; }
.dalr__chan { animation: dalr-c1 12s var(--ease-spring) infinite; }
.dalr__chan.is-2 { animation-name: dalr-c2; }
.dalr__chan.is-3 { animation-name: dalr-c3; }
.dalr__chan.is-4 { animation-name: dalr-c4; }
@media (prefers-reduced-motion: reduce) {
  .dalr__rule, .dalr__track, .dalr__knob, .dalr__feed,
  .dalr__msg, .dalr__token, .dalr__lane, .dalr__chan { animation: none; }
}
@keyframes dalr-r1 { 0%,3% { opacity:0; transform:translateX(-10px);} 8%,92% { opacity:1; transform:none;} 100% { opacity:0; transform:translateX(-10px);} }
@keyframes dalr-r2 { 0%,7% { opacity:0; transform:translateX(-10px);} 12%,92% { opacity:1; transform:none;} 100% { opacity:0; transform:translateX(-10px);} }
@keyframes dalr-r3 { 0%,11% { opacity:0; transform:translateX(-10px);} 16%,92% { opacity:1; transform:none;} 100% { opacity:0; transform:translateX(-10px);} }
@keyframes dalr-t1 { 0%,6% { fill: var(--g-edge);} 10%,92% { fill: var(--g-acc);} 100% { fill: var(--g-edge);} }
@keyframes dalr-t2 { 0%,10% { fill: var(--g-edge);} 14%,92% { fill: var(--g-acc);} 100% { fill: var(--g-edge);} }
@keyframes dalr-t3 { 0%,14% { fill: var(--g-edge);} 18%,92% { fill: var(--g-acc);} 100% { fill: var(--g-edge);} }
@keyframes dalr-k1 { 0%,6% { transform:translateX(0);} 10%,92% { transform:translateX(12px);} 100% { transform:translateX(0);} }
@keyframes dalr-k2 { 0%,10% { transform:translateX(0);} 14%,92% { transform:translateX(12px);} 100% { transform:translateX(0);} }
@keyframes dalr-k3 { 0%,14% { transform:translateX(0);} 18%,92% { transform:translateX(12px);} 100% { transform:translateX(0);} }
@keyframes dalr-f1 { 0%,9% { stroke-dashoffset:100;} 15%,92% { stroke-dashoffset:0;} 100% { stroke-dashoffset:100;} }
@keyframes dalr-f2 { 0%,13% { stroke-dashoffset:100;} 19%,92% { stroke-dashoffset:0;} 100% { stroke-dashoffset:100;} }
@keyframes dalr-f3 { 0%,17% { stroke-dashoffset:100;} 23%,92% { stroke-dashoffset:0;} 100% { stroke-dashoffset:100;} }
@keyframes dalr-msg { 0%,26% { opacity:0; transform:scale(.94);} 33%,92% { opacity:1; transform:none;} 100% { opacity:0; transform:scale(.94);} }
@keyframes dalr-tok1 { 0%,36% { fill: var(--g-acc-fill);} 41%,92% { fill: var(--g-acc);} 100% { fill: var(--g-acc-fill);} }
@keyframes dalr-tok2 { 0%,40% { fill: var(--g-acc-fill);} 45%,92% { fill: var(--g-acc);} 100% { fill: var(--g-acc-fill);} }
@keyframes dalr-l1 { 0%,48% { stroke-dashoffset:100;} 55%,92% { stroke-dashoffset:0;} 100% { stroke-dashoffset:100;} }
@keyframes dalr-l2 { 0%,51% { stroke-dashoffset:100;} 58%,92% { stroke-dashoffset:0;} 100% { stroke-dashoffset:100;} }
@keyframes dalr-l3 { 0%,54% { stroke-dashoffset:100;} 61%,92% { stroke-dashoffset:0;} 100% { stroke-dashoffset:100;} }
@keyframes dalr-l4 { 0%,57% { stroke-dashoffset:100;} 64%,92% { stroke-dashoffset:0;} 100% { stroke-dashoffset:100;} }
@keyframes dalr-c1 { 0%,54% { opacity:.3; transform:scale(.9);} 60%,92% { opacity:1; transform:none;} 100% { opacity:.3; transform:scale(.9);} }
@keyframes dalr-c2 { 0%,57% { opacity:.3; transform:scale(.9);} 63%,92% { opacity:1; transform:none;} 100% { opacity:.3; transform:scale(.9);} }
@keyframes dalr-c3 { 0%,60% { opacity:.3; transform:scale(.9);} 66%,92% { opacity:1; transform:none;} 100% { opacity:.3; transform:scale(.9);} }
@keyframes dalr-c4 { 0%,63% { opacity:.3; transform:scale(.9);} 69%,92% { opacity:1; transform:none;} 100% { opacity:.3; transform:scale(.9);} }

/* ===== What changes — built after the reference build ===== */
/* ---------- Results ---------- */
/* The arrow is the vessel and the wave rises inside it, clipped to its own
   outline — one object, not an icon with a decoration beside it. Two waves at
   different phases give the surface its roll. */
.res { position: relative; overflow: clip; }
.res__wash {
    position: absolute; inset: -20% -10% auto; height: 70%; z-index: 0; pointer-events: none;
    background:
      radial-gradient(48% 60% at 22% 0%, rgba(2, 217, 254, .16), transparent 66%),
      radial-gradient(44% 56% at 80% 10%, rgba(97, 72, 250, .16), transparent 66%);
    filter: blur(30px);
  }
.res__inner { position: relative; z-index: 2; }
.res__head { max-width: 860px; margin-inline: auto; text-align: center; }
.res__head .eyebrow { justify-content: center; }
.res__lede { margin-inline: auto; }
.res__grid { list-style: none; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px)  { .res__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.res__i {
    display: grid; gap: 14px; justify-items: center; text-align: center;
    padding: clamp(18px, 2vw, 26px) clamp(10px, 1.4vw, 18px);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    transition: transform var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
  }
.res__i:hover { transform: translateY(-4px); border-color: rgba(2, 217, 254, .4); }
.res__arrow { width: clamp(58px, 6.4vw, 76px); }
.res__arrow svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Down-pointing metrics flip the whole vessel, so the water still fills from
     the bottom of the shape the reader is looking at. */
  .res__i.is-down .res__arrow { rotate: 180deg; }
/* Solid and chunky, not an outline. Stroke and fill share a colour and the
     join is round, so every corner of the arrow rounds off without a single
     arc in the path data. */
  .res__vessel {
    fill: rgba(2, 217, 254, .16);
    stroke: rgba(2, 217, 254, .16); stroke-width: 11; stroke-linejoin: round;
  }
.res__i.is-down .res__vessel { fill: rgba(123, 103, 255, .18); stroke: rgba(123, 103, 255, .18); }
.res__wave { fill: var(--cyan-600); }
.res__wave.is-back { fill: rgba(2, 217, 254, .45); }
.res__i.is-down .res__wave { fill: #7B67FF; }
.res__i.is-down .res__wave.is-back { fill: rgba(123, 103, 255, .45); }

/* The water surface rolls sideways, forever — one wavelength (120u) per loop so
   it repeats seamlessly. Staggered per card by --d so the eight arrows don't
   ripple in lockstep. (Paused under prefers-reduced-motion below.) */
.res__waves { animation: res-wave 2.4s linear infinite; animation-delay: var(--d, 0s); will-change: transform; }
@keyframes res-wave { from { transform: translateX(0); } to { transform: translateX(-120px); } }
/* The water line is the number. 100% of the vessel is 128 user units tall,
     so one percentage point is 1.28 of them — a 54% metric fills to 54% of the
     arrow, and reading the chart and reading the figure give the same answer.
     It sits empty until the card is revealed, then rises. */
  .res__water { transform: translateY(0); }
.res__i.in .res__water {
    transform: translateY(calc(var(--fill, 0) * -1.28px));
    transition: transform 1.7s var(--ease-out);
    transition-delay: var(--d, 0s);
  }
.res__copy { display: grid; gap: 3px; }
.res__v { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: #fff; }
.res__u { color: var(--cyan); }
.res__i.is-down .res__u { color: #9C8CFF; }
.res__l { font-size: var(--f-sm); font-weight: 600; color: #fff; line-height: 1.35; margin-top: 6px; }
.res__n { font-size: var(--f-label); color: var(--t-on-dark-2); line-height: 1.5; }
.res__src {
    margin-top: clamp(26px, 3vw, 40px); text-align: center;
    font-size: var(--f-label); color: var(--t-muted); max-width: 70ch; margin-inline: auto;
  }
@media (prefers-reduced-motion: reduce) {
    .res__waves { animation: none; }
    /* The level still has to be correct — it is the data. It just arrives
       already at the right height instead of rising to it. */
    .res__i.in .res__water { transition: none; }
  }

/* ===== Free for 30 days — built after the reference build ===== */
/* ---------- Mid-page CTA ---------- */
/* The band is the dark object, not the section. A sixth full-width dark
   section would tip the page back to reading dark-by-default. */
.ctam__band {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-2xl);
  background: linear-gradient(150deg, #23246E 0%, var(--midnight) 52%, var(--ink) 100%);
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
  box-shadow: 0 40px 90px -34px rgba(25, 15, 78, .6);
  display: grid; gap: clamp(28px, 3vw, 44px); grid-template-columns: 1fr;
  padding: clamp(30px, 3.6vw, 56px);
  --t-primary: #fff; --t-secondary: var(--t-on-dark-2); --accent-text: var(--cyan);
  color: #fff;
}
@media (min-width: 900px) { .ctam__band { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; } }
.ctam__orb {
    width: 420px; height: 420px; top: -45%; right: -12%; z-index: 0;
    background: radial-gradient(circle, rgba(2, 217, 254, .5), transparent 68%);
  }
.ctam__copy, .ctam__art { position: relative; z-index: 2; }
.ctam__h { margin-block: 14px 16px; max-width: 18ch; }
.ctam__lede { font-size: var(--f-sm); color: var(--t-on-dark-2); line-height: 1.68; max-width: 52ch; }
.ctam__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ctam__trust { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; }
.ctam__trust li { font-size: var(--f-label); color: var(--t-on-dark-2); display: inline-flex; align-items: center; gap: 7px; }
.ctam__trust li::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); flex: none;
  }
/* Bottom-right corner of the band, flush with its edges — the negative
     insets cancel the band padding so the figure sits in the corner rather
     than in a box inside it. */
  .ctam__art { align-self: end; justify-self: end; }
.ctam__art img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
    .ctam__band { align-items: stretch; padding-bottom: 0; padding-right: 0; }
    /* Top padding comes from the band itself. Repeating it here stacked two
       gaps above the eyebrow and left a dead strip across the top of the card.
       Bottom padding stays: the band has none, because the figure is meant to
       stand on its bottom edge. */
    .ctam__copy { align-self: center; padding-block: 0 clamp(30px, 3.6vw, 56px); }
    .ctam__art { display: flex; align-items: flex-end; justify-content: flex-end; }
    .ctam__art img { max-height: 420px; width: auto; }
  }
@media (max-width: 899px) { .ctam__art { order: -1; justify-self: center; } .ctam__art img { max-width: 320px; } }

/* ===== What schools say — built after the reference build ===== */
/* ---------- Reviews: a deck, not a paragraph in a gap ----------
   The previous pass set one quote large and centred it on empty background.
   With no photo, no logo and no card behind it there was nothing for the eye
   to land on, and six quotes read as one stray sentence. The quote is an
   object now — a card with an edge, a rail and a shadow — and two ghosts sit
   behind it so the section reads as a stack of six rather than a single line
   of text. The heading, the counter and the controls hold their own column. */
.rev { position: relative; overflow: clip; }
.rev__orb { width: 460px; height: 460px; top: -34%; right: -10%; background: radial-gradient(circle, rgba(2,217,254,.26), transparent 68%); }
.rev__inner { position: relative; z-index: 2; }
.rev__wrap { display: grid; gap: clamp(30px, 4vw, 60px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) { .rev__wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.rev__aside .h2 { margin-block: 16px 16px; }
.rev__lede { font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.7; max-width: 40ch; }
.rev__ctl { display: flex; align-items: center; gap: 18px; margin-top: clamp(24px, 3vw, 36px); }
.rev__count {
    font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--t-primary);
  }
.rev__count span[data-q-now] { color: var(--accent-text); }
.rev__slash { margin-inline: 6px; color: var(--t-muted); font-weight: 400; }
.rev__btns { display: flex; gap: 8px; }
.rev__arrow {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none;
    border-radius: 50%; cursor: pointer;
    background: var(--s-card); border: 1px solid var(--border); color: var(--t-primary);
    transition: border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out),
                transform var(--d-fast) var(--ease-spring);
  }
.rev__arrow:hover { border-color: var(--cyan-600); color: var(--accent-text); transform: scale(1.06); }
.rev__arrow:first-child svg { rotate: 180deg; }
.rev__dots { display: flex; align-items: center; gap: 7px; margin-top: 22px; }
.rev__dot {
    position: relative; width: 28px; height: 4px; padding: 0; overflow: visible;
    border: 0; border-radius: 2px; cursor: pointer;
    background: color-mix(in srgb, var(--n-400) 36%, transparent);
  }
.rev__dot::after { content: ""; position: absolute; inset: -12px -3px; }
.rev__dot span { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--cyan-600); }
.rev__dot.is-active { width: 46px; }
.rev__dot.is-active span { animation: rev-dot 7s linear forwards; }
/* ── The deck ─────────────────────────────────────────── */
  .rev__deck { position: relative; display: grid; }
.rev__ghost {
    position: absolute; inset: 0; z-index: 0;
    border-radius: var(--r-2xl); background: var(--s-card); border: 1px solid var(--border);
  }
.rev__ghost--1 { transform: translate(14px, 14px) scale(.985); opacity: .7; }
.rev__ghost--2 { transform: translate(28px, 28px) scale(.97); opacity: .4; }
.rev__card {
    grid-area: 1 / 1; position: relative; z-index: 1; margin: 0; overflow: hidden;
    padding: clamp(30px, 3.4vw, 48px) clamp(26px, 3vw, 44px);
    border-radius: var(--r-2xl);
    background:
      radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--cyan-600) 9%, transparent), transparent 62%),
      var(--s-pure);
    border: 1px solid var(--border);
    box-shadow: 0 34px 70px -30px rgba(25, 15, 78, .35);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
  }
/* Out first, then in — two quotes dissolving through each other is
     unreadable in a way two dissolving pictures are not. */
  .rev__card.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: .26s; }
.rev__rail {
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--cyan-600), color-mix(in srgb, var(--violet) 70%, transparent));
  }
.rev__mark {
    position: absolute; top: 6px; right: 26px; z-index: 0;
    font-size: 7rem; line-height: 1; font-weight: 700;
    color: color-mix(in srgb, var(--cyan-600) 15%, transparent);
    pointer-events: none; user-select: none;
  }
.rev__card blockquote { margin: 0; position: relative; z-index: 1; }
.rev__card blockquote p {
    font-size: clamp(1.0625rem, 1.7vw, 1.375rem); line-height: 1.62; font-weight: 500;
    letter-spacing: -0.012em; color: var(--t-primary); text-wrap: pretty;
  }
.rev__card figcaption {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center;
    margin-top: clamp(24px, 2.6vw, 34px); padding-top: 22px; border-top: 1px solid var(--border-soft);
  }
.rev__av {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    background: color-mix(in srgb, var(--cyan-600) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cyan-600) 26%, transparent);
    color: var(--accent-text);
  }
.rev__who { display: grid; gap: 1px; min-width: 0; }
.rev__role { font-size: var(--f-sm); font-weight: 600; }
.rev__org  { font-size: var(--f-label); color: var(--t-muted); }
.rev__tag {
    padding: 6px 13px; border-radius: var(--r-pill); white-space: nowrap;
    background: color-mix(in srgb, var(--cyan-600) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cyan-600) 26%, transparent);
    font-size: var(--f-label); color: var(--accent-text);
  }
@media (max-width: 560px) {
    .rev__card figcaption { grid-template-columns: 42px 1fr; }
    .rev__tag { grid-column: 1 / -1; justify-self: start; }
    .rev__ghost--2 { display: none; }
  }
.rev__note {
    margin-top: clamp(28px, 3.4vw, 44px); text-align: center;
    font-size: var(--f-label); color: var(--t-muted); max-width: 72ch; margin-inline: auto;
  }
@media (prefers-reduced-motion: reduce) {
    .rev__card { transition: none; }
    .rev__dot.is-active span { animation: none; width: 100%; }
  }
@keyframes rev-dot { from { width: 0; } to { width: 100%; } }

/* ===== Why schools pick Edoovi — built after the reference build ===== */
/* ---------- Why: an argument, not an inventory ---------- */
.why__wrap { display: grid; gap: clamp(30px, 4vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 1000px) {
    .why__wrap { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
    .why__aside { position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; }
  }
.why__aside .h2 { margin-block: 16px 18px; }
.why__lede { font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.7; max-width: 42ch; }
.why__list { list-style: none; padding: 0; margin: 0; display: grid; }
/* Hairlines, not boxes: the rows read as one argument rather than six
     unrelated tiles. */
  .why__row {
    display: grid; grid-template-columns: auto auto 1fr; gap: 4px 18px; align-items: start;
    padding: clamp(20px, 2.2vw, 28px) 0;
    border-top: 1px solid var(--border);
  }
.why__row:first-child { border-top: 0; padding-top: 0; }
.why__n {
    font-size: var(--f-sm); font-weight: 700; letter-spacing: .04em; padding-top: 2px;
    color: color-mix(in srgb, var(--cyan-600) 70%, transparent);
    font-variant-numeric: tabular-nums;
  }
.why__ico {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
    background: color-mix(in srgb, var(--cyan-600) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cyan-600) 22%, transparent);
    color: var(--accent-text);
    transition: background-color var(--d-base) var(--ease-out), rotate var(--d-base) var(--ease-spring);
  }
.why__row:hover .why__ico { background: color-mix(in srgb, var(--cyan-600) 20%, transparent); rotate: -8deg; }
.why__body { min-width: 0; }
.why__t { font-size: var(--f-h4); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 7px; }
.why__d { font-size: var(--f-xs); color: var(--t-muted); line-height: 1.68; max-width: 62ch; }
@media (max-width: 560px) {
    .why__row { grid-template-columns: auto 1fr; }
    .why__ico { display: none; }
  }

/* ===== Two school apps ===================================================
   Built to land inside one viewport: the phone is sized from viewport height
   rather than width, and the four features sit two-and-two beside it with
   every description already open. Only colour marks the selected one, so
   choosing a feature never changes any box's size and nothing reflows. */

.app {
  /* Tighter than the page rhythm on purpose — at --section-y this section
     runs past the fold on a 900px-tall window. Height is in the clamp because
     the constraint here is vertical: on a short window it is the fold, not the
     line length, that decides how much room this section may take. */
  padding-block: clamp(26px, min(3.4vw, 4.2vh), 56px);
}
.app__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(14px, 2.6vh, 30px); }
.app__head .eyebrow { justify-content: center; margin-bottom: 8px; }
.app__head .h2 { margin: 0; }

/* Tab switcher — a pill inside a pill, centred over the stage. */
.app__tabs {
  position: relative; display: flex; justify-content: center; width: max-content; max-width: 100%;
  margin: 0 auto clamp(14px, 2.8vh, 32px); padding: 5px;
  background: var(--s-pure); border: 1px solid var(--border);
  border-radius: var(--r-pill); box-shadow: var(--sh-card);
}
/* Same contract as the flagship glider: the stylesheet places it, initTabs
   sets width and translateX from the selected tab's own box. Hidden until it
   has been measured so it never flashes at 0/0. */
.app__glider {
  position: absolute; top: 5px; left: 0; height: calc(100% - 10px); z-index: 0;
  background: var(--accent); border-radius: var(--r-pill);
  box-shadow: var(--sh-glow); pointer-events: none;
  transition: transform .45s var(--ease-spring), width .45s var(--ease-spring);
}
.app__glider:not([style*="width"]) { opacity: 0; }
.app__tab {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  padding: 10px clamp(16px, 1.8vw, 26px);
  font: inherit; font-size: var(--f-h4); font-weight: 600; line-height: 1.2;
  white-space: nowrap; color: var(--t-primary); border-radius: var(--r-pill);
  transition: color var(--d-base) var(--ease-out);
}
.app__tab[aria-selected="true"] { color: #fff; }
.app__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Stage — features, phone, features. */
.app__wrap { position: relative; }
.app__panel[hidden] { display: none; }
.app__stage { display: grid; gap: clamp(18px, 2.4vw, 40px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .app__stage { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}
.app__feats {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(14px, 1.8vw, 26px); align-content: center;
}
.app__feat-i { min-width: 0; }

.app__feat {
  width: 100%; border: 0; padding: 0; cursor: pointer; font: inherit;
  text-align: left; color: inherit; background: none;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'ico h' '... d';
  gap: 6px clamp(12px, 1.1vw, 16px); align-items: center;
}
.app__feat:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--r-md); }

.app__featico {
  grid-area: ico; display: grid; place-items: center;
  width: clamp(42px, 3.2vw, 52px); aspect-ratio: 1; border-radius: var(--r-lg);
  background: var(--s-pure); border: 1px solid var(--border);
  color: var(--accent-text); box-shadow: var(--sh-card);
  transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
.app__featico svg { width: 55%; height: 55%; }
.app__feat.is-active .app__featico {
  background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--sh-glow);
}
.app__feat:hover .app__featico { border-color: var(--accent); }

.app__feath {
  grid-area: h; font-size: var(--f-h4); font-weight: 650; line-height: 1.3;
  letter-spacing: -.01em; color: var(--t-primary);
  transition: color var(--d-base) var(--ease-out);
}
.app__feat.is-active .app__feath,
.app__feat:hover .app__feath { color: var(--accent-text); }

/* Every description stays open. Nothing expands on selection, so picking a
   feature cannot push the cards below it down the page. */
.app__featd {
  grid-area: d; font-size: var(--f-xs); line-height: 1.55; color: var(--t-secondary);
}

/* The device frame is part of the screenshot, so there is no bezel here —
   adding one would draw a second phone around the first. Height-derived so
   the whole section still fits a short window; 465/900 is the shot's ratio. */
.app__phone { justify-self: center; width: clamp(178px, min(24vw, 25vh), 264px); }
.app__screens { display: grid; }
.app__screen {
  grid-area: 1 / 1; width: 100%; height: auto; display: block;
  opacity: 0; visibility: hidden; transform: scale(.985);
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out), visibility var(--d-base);
}
.app__screen.is-active { opacity: 1; visibility: visible; transform: none; }

.app__cta {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: clamp(14px, 2.6vh, 30px);
}

/* Below the three-column breakpoint the phone leads and the four features
   follow it — two per row while there is room for two, then one. */
@media (max-width: 1023px) {
  .app__phone { order: -1; width: min(240px, 62vw); }
  .app__stage { justify-items: center; }
  .app__feats { width: 100%; max-width: 620px; }
}
@media (min-width: 620px) and (max-width: 1023px) {
  .app__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app__phone { grid-column: 1 / -1; }
}
@media (max-width: 619px) {
  .app__feat { gap: 4px 12px; }
  .app__featd { font-size: var(--f-xs); }
}

/* ==========================================================================
   PILLAR PAGE — /school-erp-software/
   Shares the homepage's tokens and surfaces; only blocks new to this page live
   here. Everything reused (buttons, cards, faq, marquee, orbs) is the
   homepage's own, so the two pages cannot drift apart visually.
   ========================================================================== */

/* Breadcrumb — visible, and mirrored by BreadcrumbList schema (§E1). */
.crumb { margin-bottom: clamp(18px, 2.4vw, 30px); }
.crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crumb li { display: flex; align-items: center; gap: 8px; font-size: var(--f-xs); color: var(--t-secondary); }
.crumb li + li::before { content: "/"; opacity: .45; }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: var(--accent-text); }
.crumb [aria-current] { color: var(--t-primary); font-weight: 600; }

/* Hero ------------------------------------------------------------------- */
.ehero { position: relative; overflow: clip; }
.ehero__orb { top: -30%; right: -10%; width: 620px; height: 620px; }
.ehero__inner { position: relative; z-index: 2; }
.ehero__grid { display: grid; gap: clamp(32px, 4vw, 64px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .ehero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); } }
.ehero__copy { min-width: 0; }
.ehero__copy .h1 { margin: 14px 0 0; max-width: 17ch; }
.ehero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 34px); }
.ehero__facts {
  list-style: none; margin: clamp(24px, 3vw, 34px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  font-size: var(--f-sm); color: var(--t-secondary);
}
.ehero__facts strong {
  display: inline-block; margin-right: 6px;
  font-size: var(--f-h3); font-weight: 700; color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.ehero__art { min-width: 0; }
.ehero__art img {
  width: 100%; height: auto; display: block; border-radius: var(--r-xl);
  border: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent);
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .55);
}

/* Definition table ------------------------------------------------------- */
/* The AEO asset. It scrolls inside its own box rather than letting the page
   scroll sideways — a table this wide is the classic source of that bug. */
.edef__head { max-width: 820px; }
.edef__scroll { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); }
.edef__table { width: 100%; min-width: 720px; border-collapse: collapse; background: var(--s-card); }
.edef__table th, .edef__table td {
  padding: clamp(13px, 1.4vw, 18px); text-align: left; vertical-align: top;
  font-size: var(--f-xs); line-height: 1.6; border-bottom: 1px solid var(--border);
}
.edef__table thead th {
  font-size: var(--f-label); font-weight: 700; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--t-muted); white-space: nowrap;
  background: var(--s-raised);
}
.edef__table tbody th { font-weight: 650; color: var(--t-primary); white-space: nowrap; }
.edef__table td { color: var(--t-secondary); }
.edef__table tbody tr:last-child th, .edef__table tbody tr:last-child td { border-bottom: 0; }
.edef__us { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.edef__us th, .edef__us td { color: var(--t-primary); font-weight: 500; }
.edef__note { margin: clamp(18px, 2vw, 26px) 0 0; max-width: 78ch; }

/* Proof band ------------------------------------------------------------- */
.eproof__stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.eproof__i { display: grid; gap: 4px; }
.eproof__n {
  font-size: clamp(2.5rem, 4.4vw, 3.75rem); font-weight: 700; line-height: 1;
  letter-spacing: -.03em; color: var(--accent-text); font-variant-numeric: tabular-nums;
}
/* Outlined, but only where the browser can actually draw an outline —
   text-stroke with a transparent fill and no support is an invisible number. */
@supports (-webkit-text-stroke: 1px currentColor) {
  .eproof__n {
    color: transparent;
    -webkit-text-stroke: 2px var(--accent-text);
    paint-order: stroke fill;
  }
}
.eproof__k { font-size: var(--f-h4); font-weight: 650; margin-top: 6px; }
.eproof__d { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6; }
.eproof__logos { margin-top: clamp(32px, 4vw, 56px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--border); }
.eproof__logosk {
  margin: 0 0 18px; text-align: center;
  font-size: var(--f-label); font-weight: 600; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--t-muted);
}
.marquee__logo { height: 44px; width: auto; object-fit: contain; opacity: .7; flex: none; }

/* One record, every module ----------------------------------------------- */
.erec__flow { list-style: none; margin: clamp(28px, 3.4vw, 48px) 0 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 780px) { .erec__flow { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 3vw, 52px); } }
.erec__s {
  display: grid; grid-template-columns: auto auto 1fr; gap: 2px 16px; align-items: start;
  padding: clamp(18px, 2vw, 24px) 0; border-top: 1px solid var(--border);
}
.erec__n {
  grid-row: 1 / span 2; font-size: var(--f-xs); font-weight: 700;
  color: var(--t-muted); font-variant-numeric: tabular-nums; padding-top: 3px;
}
.erec__ico {
  grid-row: 1 / span 2; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text);
}
.erec__t { margin: 0 0 4px; font-size: var(--f-h4); font-weight: 650; line-height: 1.35; }
.erec__d { margin: 0; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.65; }

/* Module grid ------------------------------------------------------------ */
.emod__head { max-width: 820px; }


/* Not yet published: the card still reads, it just does not promise a page. */
.emod__card.is-pending { cursor: default; }

/* Roles ------------------------------------------------------------------ */
.erole { position: relative; overflow: clip; }
.erole__orb { top: -20%; left: -8%; width: 520px; height: 520px; }
.erole__inner { position: relative; z-index: 2; }
.erole__head { max-width: 820px; }
.erole__grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.erole__i {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--s-card);
}
.erole__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.erole__n { font-size: var(--f-sm); font-weight: 600; }
.erole__p { font-size: var(--f-label); color: var(--t-muted); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }
.erole__note { margin: clamp(22px, 2.4vw, 32px) 0 0; max-width: 80ch; color: var(--t-secondary); }

/* Built for India -------------------------------------------------------- */
.eind__wrap { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) {
  .eind__wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .eind__aside { position: sticky; top: calc(var(--nav-h, 76px) + 28px); }
}
.eind__lede { margin: 14px 0 0; font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.7; }
.eind__list { list-style: none; margin: 0; padding: 0; }
.eind__row {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: start;
  padding: clamp(18px, 2vw, 26px) 0; border-top: 1px solid var(--border);
}
.eind__row:first-child { border-top: 0; padding-top: 0; }
.eind__ico {
  grid-row: 1 / span 2; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-text);
}
.eind__t { margin: 0 0 5px; font-size: var(--f-h4); font-weight: 650; line-height: 1.35; }
.eind__d { margin: 0; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.65; }

/* AI ---------------------------------------------------------------------- */
.eai__head { max-width: 820px; }


/* The two apps ------------------------------------------------------------ */
.eapp { position: relative; overflow: clip; }
.eapp__orb { bottom: -30%; right: -8%; width: 560px; height: 560px; }
.eapp__inner { position: relative; z-index: 2; }
.eapp__head { max-width: 820px; }
.eapp__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 820px) { .eapp__grid { grid-template-columns: repeat(2, 1fr); } }
.eapp__i { display: flex; }
.eapp__card {
  flex: 1; display: flex; flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .13);
}
.eapp__who {
  font-size: var(--f-label); font-weight: 600; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--accent-text);
}
.eapp__n { margin: 10px 0 8px; font-size: var(--f-h3); font-weight: 650; line-height: 1.2; }
.eapp__d { margin: 0 0 14px; font-size: var(--f-sm); color: var(--t-on-dark-2); line-height: 1.7; }
.eapp__in {
  margin: 0 0 20px; padding: 9px 13px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .06); font-size: var(--f-xs); color: var(--t-on-dark-2);
}
.eapp__stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }

/* Reports ----------------------------------------------------------------- */
.erep__head { max-width: 820px; }
.erep__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(16px, 1.8vw, 24px);
}
.erep__i { padding: clamp(20px, 2vw, 26px); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--s-card); }
.erep__ico {
  display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 12px;
  border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text);
}
.erep__t { margin: 0 0 5px; font-size: var(--f-h4); font-weight: 650; }
.erep__d { margin: 0; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.65; }

/* Security ---------------------------------------------------------------- */
.esec { position: relative; overflow: clip; }
.esec__orb { top: -14%; right: -8%; width: 520px; height: 520px; }
.esec__inner { position: relative; z-index: 2; }
.esec__head { margin-bottom: clamp(30px, 3.6vw, 50px); }
.esec__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(16px, 1.8vw, 24px);
}
.esec__i {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico k" "... v"; gap: 4px 15px;
  padding: clamp(20px, 2vw, 26px); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--s-card);
}
.esec__ico {
  grid-area: ico; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text);
}
.esec__k { grid-area: k; margin: 0; align-self: center; font-size: var(--f-h4); font-weight: 650; line-height: 1.3; }
.esec__v { grid-area: v; margin: 8px 0 0; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.65; }

/* Rollout ----------------------------------------------------------------- */
.erol__head { max-width: 820px; }
.erol__steps { list-style: none; margin: 0; padding: 0; }
.erol__s {
  display: grid; grid-template-columns: auto 1fr; gap: 4px clamp(18px, 2vw, 28px); align-items: start;
  padding: clamp(20px, 2.2vw, 28px) 0; border-top: 1px solid var(--border);
}
.erol__s:first-child { border-top: 0; }
.erol__n {
  font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent) 55%, transparent);
}
.erol__t { margin: 0 0 5px; font-size: var(--f-h3); font-weight: 650; line-height: 1.25; }
.erol__d { margin: 0; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.7; max-width: 68ch; }

/* FAQ --------------------------------------------------------------------- */
/* Centred, like the FAQ on every other page. The section is a landmark a
   reader already knows the shape of — a different layout per page makes them
   re-learn it each time and buys nothing. */
.efaq__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3.2vw, 42px); }
.efaq__head .eyebrow { justify-content: center; }
.efaq__head .h2 { margin: 12px 0 0; }
.efaq__lede { margin: 14px auto 0; max-width: 60ch; }
.efaq__list { display: grid; max-width: 880px; margin-inline: auto; }
.efaq__more { margin-top: clamp(24px, 3vw, 36px); text-align: center; }

/* Closing CTA + read-next ------------------------------------------------- */
.ecta { position: relative; overflow: clip; text-align: center; }
.ecta__orb-a { top: -22%; left: -6%; width: 560px; height: 560px; }
.ecta__orb-b { bottom: -30%; right: -6%; width: 480px; height: 480px; }
.ecta__inner { position: relative; z-index: 3; max-width: 860px; display: flex; flex-direction: column; align-items: center; }
.ecta__eyebrow { justify-content: center; color: #fff; margin-bottom: 16px; }
.ecta__h { margin: 0 0 18px; }
.ecta__lede { margin: 0 0 clamp(24px, 3vw, 34px); max-width: 62ch; color: rgba(255, 255, 255, .82); }
.ecta__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ecta__primary { background: #fff; color: var(--ink, #0B0A1F); border-color: #fff; }
.ecta__primary:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, .3); }
.ecta__trust {
  list-style: none; margin: clamp(22px, 2.6vw, 32px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  font-size: var(--f-sm); color: rgba(255, 255, 255, .8);
}
.ecta__trust li { display: flex; align-items: center; gap: 8px; }
.ecta__trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); flex: none; }


/* ==========================================================================
   AI — alternating editorial rows
   Full-bleed bands rather than cards. Each row owns a whole viewport-width
   strip, flips which side the drawing sits on, and every other row inverts to
   dark — so four rows read as four different things instead of one list.
   ========================================================================== */

.airow { padding-block: 0; }
.airow__head {
  max-width: 820px;
  padding-block: clamp(52px, 6vw, 104px) clamp(28px, 3.4vw, 52px);
}
.airow__head .h2 { margin: 12px 0 0; }
.airow__head .lead { margin-top: 16px; }

/* Each row is its own band, so its surface can differ from the section's. */
.airow__r { position: relative; overflow: clip; }
.airow__r--dark {
  background: var(--s-ink);
  --t-primary: #fff; --t-secondary: var(--t-on-dark-2); --t-muted: #93A0BE;
  --accent-text: var(--cyan); --border: rgba(255,255,255,.12);
  color: var(--t-on-dark);
}
.airow__grid {
  display: grid; gap: clamp(28px, 4vw, 72px); align-items: center;
  grid-template-columns: 1fr;
  padding-block: clamp(44px, 5.2vw, 88px);
}
@media (min-width: 940px) {
  .airow__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
  /* Flip which side the drawing sits on. Order rather than direction so the
     DOM stays in reading order for a screen reader. */
  .airow__grid--flip .airow__copy { order: 2; }
  .airow__grid--flip .airow__art  { order: 1; }
}
.airow__r + .airow__r .airow__grid { border-top: 1px solid var(--border); }
.airow__r--dark + .airow__r .airow__grid,
.airow__r:has(+ .airow__r--dark) .airow__grid { border-top-color: transparent; }

.airow__copy { min-width: 0; }
.airow__k {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font-size: var(--f-label); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--accent-text);
}
.airow__n {
  font-size: var(--f-label); font-weight: 700; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1px currentColor; opacity: .75;
}
.airow__h {
  margin: 0 0 14px; max-width: 20ch;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem); font-weight: 700;
  line-height: 1.15; letter-spacing: -.025em;
}
.airow__d { margin: 0; max-width: 54ch; font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.72; }

.airow__tags { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.airow__tags li {
  padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--s-card);
  font-size: var(--f-xs); color: var(--t-secondary);
}
.airow__go { margin-top: clamp(20px, 2.4vw, 30px); }
.airow__btn.is-pending { display: none; }

.airow__art { min-width: 0; }
.airow__art svg { width: 100%; height: auto; display: block; }

/* ==========================================================================
   Module index
   A contents page, not eighteen cards. The number column carries the count,
   the name column carries the scan, and the blurb belongs to the row under
   the cursor — which is what keeps eighteen rows readable at a glance.
   ========================================================================== */

.mdx__head {
  position: relative;
  display: grid; gap: 14px clamp(28px, 4vw, 64px);
  grid-template-columns: 1fr; align-items: end;
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
@media (min-width: 940px) { .mdx__head { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); } }
.mdx__head .h2 { margin: 12px 0 0; max-width: 16ch; }
.mdx__lede { margin: 0; font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.72; }
/* Oversized count as a watermark — the section's own label, set in the page's
   own type rather than drawn. */
.mdx__count {
  position: absolute; right: 0; top: -.22em; z-index: 0;
  font-size: clamp(6rem, 13vw, 12rem); font-weight: 700; line-height: .8;
  letter-spacing: -.06em; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent) 26%, transparent);
  pointer-events: none;
}
@media (max-width: 939px) { .mdx__count { display: none; } }

.mdx__list {
  list-style: none; margin: 0; padding: 0; position: relative; z-index: 1;
  border-top: 1px solid var(--border);
}
/* Two per row once there is width for it. Eighteen full-width rows is a very
   long scroll for what is really an index. */
@media (min-width: 1024px) {
  .mdx__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 56px); }
  /* The column gap would otherwise leave the hairlines floating apart. */
  .mdx__i:nth-child(odd)  { padding-right: clamp(12px, 1.5vw, 28px); }
  .mdx__i:nth-child(even) { padding-left:  clamp(12px, 1.5vw, 28px); }
}
.mdx__i { border-bottom: 1px solid var(--border); }

.mdx__row {
  display: grid; align-items: center;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "n ico name go" ". . blurb go";
  gap: 0 clamp(14px, 1.6vw, 22px);
  padding: clamp(15px, 1.7vw, 21px) clamp(6px, 1vw, 14px);
  text-decoration: none; color: inherit;
  transition: background var(--d-fast) var(--ease-out), padding-left var(--d-base) var(--ease-out);
}
.mdx__n {
  grid-area: n; font-size: var(--f-xs); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--t-muted);
  transition: color var(--d-fast) var(--ease-out);
}
.mdx__ico {
  grid-area: ico; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: var(--s-raised); border: 1px solid var(--border); color: var(--accent-text);
  transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
.mdx__name {
  grid-area: name; font-size: var(--f-h3); font-weight: 650;
  letter-spacing: -.02em; line-height: 1.2;
  transition: color var(--d-fast) var(--ease-out);
}
/* Every blurb stays open. A hover-to-reveal row hides content from touch,
   from search engines' rendered view, and from anyone scanning the page
   without a mouse — and it was asked for open elsewhere on this site too.
   Hover is left to do what hover should: colour, not disclosure. */
.mdx__blurb {
  grid-area: blurb; margin-top: 6px; max-width: 72ch;
  font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.65;
}
.mdx__blurb > i { font-style: normal; }
.mdx__go {
  grid-area: go; color: var(--t-muted); opacity: 0; transform: translateX(-6px);
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}

@media (hover: hover) and (min-width: 720px) {
  a.mdx__row:hover,
  a.mdx__row:focus-visible {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    padding-left: clamp(12px, 1.6vw, 22px);
  }
  a.mdx__row:hover .mdx__go,
  a.mdx__row:focus-visible .mdx__go { opacity: 1; transform: none; color: var(--accent-text); }
  a.mdx__row:hover .mdx__name,
  a.mdx__row:focus-visible .mdx__name { color: var(--accent-text); }
  a.mdx__row:hover .mdx__n,
  a.mdx__row:focus-visible .mdx__n { color: var(--accent-text); }
  a.mdx__row:hover .mdx__ico,
  a.mdx__row:focus-visible .mdx__ico { background: var(--accent); border-color: var(--accent); color: #fff; }
}

/* No cursor to reveal with, so nothing is hidden. */
@media (hover: none), (max-width: 719px) {
  .mdx__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ico name go" "ico blurb go";
    align-items: start;
  }
  .mdx__n { display: none; }
  .mdx__go { opacity: .55; transform: none; align-self: center; }
  .mdx__name { font-size: var(--f-h4); }
}

/* A module whose page is not published yet still reads — it just does not
   promise somewhere to go. */
.mdx__row.is-pending { cursor: default; }
.mdx__row.is-pending .mdx__go { display: none; }

/* ==========================================================================
   Read next — asymmetric tiles with a cursor-tracked glow
   Four equal boxes read as footer nav and get skipped. An uneven grid gives
   the eye somewhere to land; the sweep, the lift and the number filling in on
   hover are what make it feel like a thing you can touch rather than a list.
   ========================================================================== */

/* The CTA above is centred; these tiles are not. Without this reset they
   inherit that centring and every line lands in the middle of its own box. */
.rnext { width: 100%; margin-top: clamp(38px, 4.4vw, 64px); text-align: left; }

/* Label with a rule running out of it on both sides. */
.rnext__k {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-size: var(--f-label); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.rnext__k::before, .rnext__k::after {
  content: ""; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28));
}
.rnext__k::after { background: linear-gradient(90deg, rgba(255, 255, 255, .28), transparent); }

.rnext__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) {
  /* 6 columns so the tiles can be 4+2 then 2+4 — the alternation is the point. */
  .rnext__grid { grid-template-columns: repeat(6, 1fr); }
  .rnext__i--wide   { grid-column: span 4; }
  .rnext__i--narrow { grid-column: span 2; }
}
.rnext__i { display: flex; min-width: 0; }

.rnext__card {
  flex: 1; position: relative; isolation: isolate;
  /* One column. The arrow used to hold a grid column of its own, which on a
     two-span tile left the description about three characters wide. It is
     positioned instead, and only the top row keeps clear of it. */
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-content: start; gap: 2px;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  text-decoration: none; color: #fff;
  overflow: hidden;
  transition: background var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
/* .tilt already sets a perspective transform; the lift rides on top of it via
   its own custom property so the two do not fight over `transform`. */
.rnext__card.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0)); }

/* A light bar that travels the top edge on approach. */
.rnext__sweep {
  position: absolute; inset: 0 auto auto 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  transform: translateX(-100%); opacity: 0;
  transition: transform .75s var(--ease-out), opacity var(--d-fast) var(--ease-out);
  z-index: 2;
}

/* The index sits behind everything, and fills in as the card is approached. */
.rnext__n {
  position: absolute; right: clamp(10px, 1.2vw, 16px); bottom: clamp(-6px, -.4vw, 0px);
  z-index: 0; pointer-events: none;
  font-size: clamp(2.25rem, 3.4vw, 3.25rem); font-weight: 700; line-height: .8;
  letter-spacing: -.06em; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .18);
  transition: color var(--d-slow) var(--ease-out), -webkit-text-stroke-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}

.rnext__kick {
  padding-right: 52px; font-size: var(--f-label); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--cyan);
}
.rnext__t {
  margin-top: 8px; padding-right: 52px;
  font-size: var(--f-h3); font-weight: 650; line-height: 1.2; letter-spacing: -.02em;
}
.rnext__d {
  margin-top: 6px; max-width: 44ch;
  font-size: var(--f-xs); color: rgba(255, 255, 255, .72); line-height: 1.6;
}
.rnext__go {
  position: absolute; top: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 26px); z-index: 2;
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; flex: none;
  transition: background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-spring);
}

@media (hover: hover) {
  a.rnext__card:hover, a.rnext__card:focus-visible {
    --lift: -4px;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .34);
    box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .55);
  }
  a.rnext__card:hover .rnext__sweep,
  a.rnext__card:focus-visible .rnext__sweep { transform: translateX(100%); opacity: 1; }
  a.rnext__card:hover .rnext__n,
  a.rnext__card:focus-visible .rnext__n {
    color: rgba(255, 255, 255, .1); -webkit-text-stroke-color: rgba(255, 255, 255, .34);
    transform: translateY(-3px);
  }
  a.rnext__card:hover .rnext__go,
  a.rnext__card:focus-visible .rnext__go {
    background: var(--cyan); border-color: var(--cyan); color: #04121F;
    transform: translate(3px, -3px) rotate(45deg);
  }
}

/* Not published yet: the tile still says what is coming, it just does not
   promise a page or pretend to be pressable. */
.rnext__card.is-pending { cursor: default; opacity: .62; }
.rnext__card.is-pending .rnext__go { display: none; }

/* ==========================================================================
   Dark mode and the drawings
   The graphic palettes key off the SURFACE class, but dark mode repaints what
   those surfaces are: --s-pure becomes #0B0A1F while the section still reads
   .s-pure. So every drawing on a light surface kept its ink-on-white palette
   and disappeared into a near-black background — visible on both pages.
   Re-point those three surfaces at the dark palette when the toggle is on.
   Specificity beats the light rules; the dark sections already match and are
   left alone.
   ========================================================================== */
:root[data-theme="dark"] .s-pure .decor--ai,
:root[data-theme="dark"] .s-frost .decor--ai,
:root[data-theme="dark"] .s-halo .decor--ai {
  --g-panel:  rgba(255, 255, 255, .05);   /* structural panel fills */
  --g-panel-2:rgba(255, 255, 255, .09);   /* the stronger of the two */
  --g-empty:  rgba(255, 255, 255, .03);   /* a cell before it fills */
  --g-edge:   rgba(255, 255, 255, .09);   /* structural outlines */
  --g-edge-2: rgba(255, 255, 255, .07);
  --g-hair:   rgba(255, 255, 255, .07);   /* plot grid lines */
  --g-axis:   rgba(255, 255, 255, .14);
  --g-ink:    rgba(255, 255, 255, .5);    /* bars standing in for text */
  --g-ink-2:  rgba(255, 255, 255, .28);
  --g-body:   rgba(255, 255, 255, .2);    /* head and shoulder outlines */
  --g-route:  rgba(255, 255, 255, .12);
  --g-acc:      var(--cyan);
  --g-acc-fill: rgba(2, 217, 254, .16);
  --g-acc-line: rgba(2, 217, 254, .4);
  --g-acc-mid:  rgba(2, 217, 254, .55);
  --g-acc-glow: rgba(2, 217, 254, .85);
  --g-flag:      #7B67FF;
  --g-flag-fill: rgba(97, 72, 250, .28);
  --g-flag-line: rgba(123, 103, 255, .5);
}
:root[data-theme="dark"] .s-pure .decor--modules,
:root[data-theme="dark"] .s-frost .decor--modules,
:root[data-theme="dark"] .s-halo .decor--modules,
:root[data-theme="dark"] .s-pure .decor--security,
:root[data-theme="dark"] .s-frost .decor--security,
:root[data-theme="dark"] .s-halo .decor--security,
:root[data-theme="dark"] .s-pure .decor--step,
:root[data-theme="dark"] .s-frost .decor--step,
:root[data-theme="dark"] .s-halo .decor--step,
:root[data-theme="dark"] .s-pure .decor--fee,
:root[data-theme="dark"] .s-frost .decor--fee,
:root[data-theme="dark"] .s-halo .decor--fee {
  --g-panel:  rgba(255, 255, 255, .05);
  --g-edge:   rgba(255, 255, 255, .1);
  --g-ink:    rgba(255, 255, 255, .5);
  --g-ink-2:  rgba(255, 255, 255, .26);
  --g-acc:    var(--cyan);
  --g-acc-fill: rgba(2, 217, 254, .16);
  --g-acc-line: rgba(2, 217, 254, .34);
  --g-flag:   #7B67FF;
}

/* ==========================================================================
   PILLAR 2 — /school-management-software/
   None of these shapes are reused from the ERP pillar. That page is a systems
   buyer's page and reads as split columns and grids; this one is a principal's
   and reads as a clock, a comparison, a switcher and a stack.
   ========================================================================== */

/* Hero — centred, with the screenshot full width beneath ------------------ */
.smh { position: relative; overflow: clip; padding-bottom: 0; }
.smh__orb { top: -34%; left: 50%; translate: -50% 0; width: 760px; height: 760px; }
.smh__inner { position: relative; z-index: 2; max-width: 900px; text-align: center; }
.smh .crumb ol { justify-content: center; }
.smh__eyebrow { justify-content: center; }
.smh__h { margin: 14px auto 0; max-width: 20ch; }
.smh__lede { margin: clamp(16px, 2vw, 22px) auto 0; max-width: 62ch; }
.smh__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: clamp(24px, 3vw, 34px); }

/* A running strip of the day the page then walks through. */
.smh__tick {
  position: relative; z-index: 2;
  margin-top: clamp(30px, 3.6vw, 48px);
  padding-block: 14px;
  border-block: 1px solid rgba(255, 255, 255, .13);
}
.smh__tickitem {
  flex: none; padding-inline: clamp(18px, 2.4vw, 34px);
  font-size: var(--f-xs); font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* The screenshot bleeds off the bottom edge — the section ends on it. */
.smh__shot { position: relative; z-index: 2; margin-top: clamp(34px, 4vw, 60px); }
.smh__shot img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border: 1px solid rgba(2, 217, 254, .22); border-bottom: 0;
  box-shadow: 0 -30px 90px -30px rgba(0, 0, 0, .6);
}

/* The school day ---------------------------------------------------------- */
.day__head { max-width: 760px; margin-bottom: clamp(36px, 4.4vw, 64px); }
.day__line { list-style: none; margin: 0; padding: 0; position: relative; }
.day__i {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: 4px clamp(20px, 2.6vw, 36px);
  padding-bottom: clamp(28px, 3.2vw, 44px);
}
/* The spine. Drawn on each entry rather than once behind them, so it stops at
   the last node instead of running past it. */
.day__i::before {
  content: ""; position: absolute; left: var(--spine, 74px); top: 22px; bottom: -6px;
  width: 1px; background: var(--border);
}
.day__i:last-child { padding-bottom: 0; }
.day__i:last-child::before { display: none; }

.day__time {
  grid-column: 1; padding-top: 2px; width: 58px; text-align: right;
  font-size: var(--f-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--t-muted); letter-spacing: .02em;
}
.day__node {
  position: absolute; left: var(--spine, 74px); top: 12px; translate: -50% 0;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--s-pure); border: 2px solid var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent);
}
.day__body { grid-column: 2; padding-left: clamp(6px, 1vw, 14px); }
.day__where {
  display: inline-block; margin-bottom: 6px; padding: 3px 10px;
  border-radius: var(--r-pill); background: var(--s-raised); border: 1px solid var(--border);
  font-size: var(--f-label); font-weight: 600; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--t-muted);
}
.day__t { margin: 0 0 6px; font-size: var(--f-h3); font-weight: 650; line-height: 1.25; letter-spacing: -.02em; }
.day__d { margin: 0; max-width: 62ch; font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.7; }
@media (max-width: 639px) {
  .day__i { --spine: 0px; grid-template-columns: 1fr; padding-left: 26px; }
  .day__time { width: auto; text-align: left; grid-column: 1; }
  .day__body { grid-column: 1; padding-left: 0; }
  .day__i::before { left: 0; }
  .day__node { left: 0; }
}

/* Before / after ---------------------------------------------------------- */
.shift__head { max-width: 780px; margin-bottom: clamp(30px, 3.6vw, 48px); }
.shift__grid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.6vw, 0px); }
@media (min-width: 820px) {
  .shift__grid { grid-template-columns: 1fr 1fr; gap: 0; }
  /* One shared divider rather than a border on each column. */
  .shift__col--edv { border-left: 1px solid var(--border); }
}
.shift__col { padding: clamp(22px, 2.4vw, 32px); }
.shift__col--edv { background: color-mix(in srgb, var(--accent) 5%, transparent); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
@media (max-width: 819px) { .shift__col--edv { border-radius: var(--r-lg); } }
.shift__k {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-size: var(--f-label); font-weight: 600; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--t-muted);
}
.shift__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.shift__dot--now { background: var(--t-muted); }
.shift__dot--edv { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.shift__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.shift__list li {
  padding: clamp(13px, 1.5vw, 17px) 0; border-top: 1px solid var(--border);
  font-size: var(--f-sm); line-height: 1.55; color: var(--t-secondary);
}
.shift__list li:first-child { border-top: 0; }
.shift__list--edv li { color: var(--t-primary); font-weight: 500; }

/* Role switcher ----------------------------------------------------------- */
.rsw { position: relative; overflow: clip; }
.rsw__orb { top: -22%; right: -10%; width: 560px; height: 560px; }
.rsw__inner { position: relative; z-index: 2; }
.rsw__head { max-width: 780px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.rsw__wrap { position: relative; }
.rsw__tabs {
  position: relative; display: flex; flex-wrap: wrap; gap: 4px;
  padding: 5px; margin-bottom: clamp(22px, 2.6vw, 34px);
  width: max-content; max-width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--s-card);
}
.rsw__glider {
  position: absolute; top: 5px; left: 0; height: calc(100% - 10px); z-index: 0;
  background: var(--accent); border-radius: var(--r-pill);
  box-shadow: var(--sh-glow); pointer-events: none;
  transition: transform .45s var(--ease-spring), width .45s var(--ease-spring);
}
.rsw__glider:not([style*="width"]) { opacity: 0; }
.rsw__tab {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  padding: 9px clamp(14px, 1.6vw, 22px); font: inherit;
  font-size: var(--f-sm); font-weight: 600; white-space: nowrap;
  color: var(--t-primary); border-radius: var(--r-pill);
  transition: color var(--d-base) var(--ease-out);
}
.rsw__tab[aria-selected="true"] { color: #04121F; }
.rsw__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rsw__panel[hidden] { display: none; }
.rsw__line {
  margin: 0 0 18px; font-size: var(--f-h3); font-weight: 650;
  line-height: 1.25; letter-spacing: -.02em; color: var(--accent-text);
}
.rsw__sees {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: clamp(12px, 1.4vw, 18px);
}
@media (min-width: 780px) { .rsw__sees { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 48px); } }
.rsw__sees li {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding-bottom: clamp(12px, 1.4vw, 18px); border-bottom: 1px solid var(--border);
  font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.6;
}
.rsw__tick {
  display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px;
  border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-text); flex: none;
}

/* Offset stack ------------------------------------------------------------ */
.stk__head { max-width: 780px; margin-bottom: clamp(30px, 3.6vw, 48px); }
.stk__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 1.8vw, 22px); }
@media (min-width: 900px) {
  .stk__list { grid-template-columns: repeat(2, 1fr); }
  /* Each card steps down a little further than the one before, so the eye
     runs the order instead of scanning a block. */
  .stk__i { margin-top: calc(var(--step) * 10px); }
}
.stk__card {
  position: relative; height: 100%;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 16px;
  padding: clamp(22px, 2.3vw, 30px);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--s-card);
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
.stk__card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); border-color: var(--accent); }
.stk__n {
  position: absolute; top: clamp(16px, 1.8vw, 22px); right: clamp(16px, 1.8vw, 22px);
  font-size: var(--f-label); font-weight: 700; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1px var(--t-muted);
}
.stk__ico {
  grid-row: 1 / span 3; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: var(--accent); color: #fff; box-shadow: var(--sh-glow);
}
.stk__t { margin: 0 0 6px; padding-right: 34px; font-size: var(--f-h4); font-weight: 650; line-height: 1.3; }
.stk__d { margin: 0 0 14px; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.65; }
.stk__go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto;
  font-size: var(--f-xs); font-weight: 600; color: var(--accent-text); text-decoration: none;
}
.stk__go .arw { transition: transform var(--d-base) var(--ease-out); }
.stk__card:hover .stk__go .arw { transform: translateX(4px); }
.stk__go.is-pending { display: none; }

/* Boards, set as type ----------------------------------------------------- */
.brd__head { max-width: 780px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.brd__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.brd__i { border-bottom: 1px solid var(--border); }
.brd__row {
  display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 32px); align-items: center;
  padding: clamp(20px, 2.2vw, 30px) clamp(4px, 1vw, 12px);
  text-decoration: none; color: inherit;
  transition: background var(--d-fast) var(--ease-out), padding-left var(--d-base) var(--ease-out);
}
.brd__n {
  font-size: clamp(1.5rem, 3vw, 2.375rem); font-weight: 700;
  line-height: 1.05; letter-spacing: -.035em;
  transition: color var(--d-base) var(--ease-out);
}
.brd__d { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.65; }
.brd__go { color: var(--t-muted); opacity: 0; transform: translateX(-6px); transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out); }
@media (hover: hover) {
  a.brd__row:hover, a.brd__row:focus-visible { background: color-mix(in srgb, var(--accent) 6%, transparent); padding-left: clamp(12px, 1.6vw, 22px); }
  a.brd__row:hover .brd__n, a.brd__row:focus-visible .brd__n { color: var(--accent-text); }
  a.brd__row:hover .brd__go, a.brd__row:focus-visible .brd__go { opacity: 1; transform: none; color: var(--accent-text); }
}
.brd__row.is-pending { cursor: default; }
.brd__row.is-pending .brd__go { display: none; }
/* Static variant carries no arrow, so it drops the trailing track entirely. */
.brd__row--static { grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); }
@media (max-width: 700px) {
  .brd__row { grid-template-columns: 1fr auto; gap: 6px 14px; }
  .brd__row--static { grid-template-columns: 1fr; }
  .brd__d { grid-column: 1 / -1; }
}

/* Parent questions -------------------------------------------------------- */
.pq__wrap { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 940px) {
  .pq__wrap { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
  .pq__aside { position: sticky; top: calc(var(--nav-h, 76px) + 28px); }
}
.pq__lede { margin: 14px 0 22px; font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.7; }
.pq__stores { display: flex; flex-wrap: wrap; gap: 10px; }
.pq__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pq__i { padding: clamp(16px, 1.9vw, 24px) 0; border-top: 1px solid var(--border); }
.pq__i:first-child { border-top: 0; padding-top: 0; }
.pq__q { margin: 0 0 7px; font-size: var(--f-h4); font-weight: 650; line-height: 1.35; }
.pq__a { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.6; }
.pq__arrow { color: var(--accent-text); flex: none; translate: 0 2px; }

/* Trust band -------------------------------------------------------------- */
.tb { position: relative; overflow: clip; }
.tb__orb { bottom: -34%; left: -8%; width: 620px; height: 620px; }
.tb__inner { position: relative; z-index: 2; }
.tb__head { max-width: 760px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.tb__band {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-lg);
  overflow: clip;
}
.tb__i { padding: clamp(20px, 2.2vw, 28px); border-left: 1px solid rgba(255, 255, 255, .14); }
.tb__i:first-child { border-left: 0; }
.tb__ico {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px;
  border-radius: var(--r-sm); background: rgba(2, 217, 254, .16); color: var(--cyan);
}
.tb__k { margin: 0 0 5px; font-size: var(--f-h4); font-weight: 650; }
.tb__v { margin: 0; font-size: var(--f-xs); color: var(--t-on-dark-2); line-height: 1.65; }

/* FAQ — centred head, two columns ---------------------------------------- */
.qa__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.4vw, 46px); }
.qa__head .eyebrow { justify-content: center; }
.qa__head .h2 { margin: 12px 0 0; }
/* One question per row. Two columns made the reader choose a side and then
   scan back up, and an accordion that opens only changes one column's height —
   which is exactly the jump this page does not need. Held to a readable
   measure so the full width does not stretch the lines. */
.qa__cols { max-width: 880px; margin-inline: auto; }
.qa__item { display: block; }

/* Closing CTA — split, with the number given weight ----------------------- */
.fin { position: relative; overflow: clip; }
.fin__orb { top: -26%; right: -8%; width: 620px; height: 620px; }
.fin__inner {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); align-items: center;
}
@media (min-width: 900px) { .fin__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.fin__eyebrow { color: #fff; margin-bottom: 14px; }
.fin__h { margin: 0 0 16px; max-width: 18ch; }
.fin__lede { margin: 0 0 clamp(22px, 2.6vw, 32px); max-width: 54ch; font-size: var(--f-lead); color: rgba(255, 255, 255, .84); line-height: 1.65; }
.fin__primary { background: #fff; color: var(--ink, #0B0A1F); border-color: #fff; }
.fin__primary:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, .3); }

.fin__call {
  padding: clamp(24px, 2.8vw, 36px); border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
}
.fin__callk {
  margin: 0 0 8px; font-size: var(--f-label); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
.fin__num {
  display: inline-block; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700;
  letter-spacing: -.02em; color: #fff; text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color var(--d-base) var(--ease-out);
}
.fin__num:hover { color: var(--cyan); }
.fin__callsub { margin: 8px 0 0; font-size: var(--f-xs); color: rgba(255, 255, 255, .66); line-height: 1.6; }
.fin__next { list-style: none; margin: clamp(20px, 2.4vw, 28px) 0 0; padding: clamp(18px, 2vw, 24px) 0 0; border-top: 1px solid rgba(255, 255, 255, .16); display: grid; gap: 10px; }
.fin__nextlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--f-sm); font-weight: 600; color: #fff; text-decoration: none;
}
.fin__nextlink .arw { transition: transform var(--d-base) var(--ease-out); }
a.fin__nextlink:hover { color: var(--cyan); }
a.fin__nextlink:hover .arw { transform: translateX(4px); }
.fin__nextlink.is-pending { opacity: .55; }

/* ==========================================================================
   MODULE PAGE — /features/fee-management-software/
   The template the other seventeen module pages inherit. Its own shapes again:
   a lifecycle spine, a spec sheet as a definition list, a payments band, a
   message stack. None of the two pillars' layouts are reused.
   ========================================================================== */

/* Module hero ------------------------------------------------------------- */
.mh { position: relative; overflow: clip; }
.mh__orb { top: -28%; right: -10%; width: 640px; height: 640px; }
.mh__inner { position: relative; z-index: 2; }
.mh__grid { display: grid; gap: clamp(30px, 4vw, 64px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) { .mh__grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); } }
.mh__copy { min-width: 0; }
.mh__mod {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-size: var(--f-label); font-weight: 600; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--accent-text);
}
.mh__modn {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid currentColor; font-size: var(--f-label); font-variant-numeric: tabular-nums;
}
.mh__h { margin: 16px 0 0; max-width: 18ch; }
.mh__lede { margin: clamp(14px, 1.8vw, 20px) 0 0; max-width: 58ch; }
.mh__cta { margin-top: clamp(24px, 3vw, 32px); }
.mh__in {
  list-style: none; margin: clamp(18px, 2.2vw, 26px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.mh__in li {
  padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06);
  font-size: var(--f-xs); color: var(--t-on-dark-2);
}
.mh__art { min-width: 0; }
.mh__art svg { width: 100%; height: auto; display: block; }

/* The fee ledger drawing -------------------------------------------------- */
.decor--fee { max-height: none; width: 100%; }
.dfee__plate { fill: var(--g-panel); stroke: var(--g-edge); stroke-width: 1.2; }
.dfee__av { fill: var(--g-acc-fill); }
.dfee__avb { fill: var(--g-acc); stroke: none; }
.dfee__ink { fill: var(--g-ink); }
.dfee__ink.is-dim { fill: var(--g-ink-2); }
.dfee__ink.is-off { fill: var(--g-flag, var(--g-ink-2)); }
.dfee__rule { stroke: var(--g-hair); stroke-width: 1.2; }
.dfee__balbg { fill: var(--g-panel-2); stroke: var(--g-edge); stroke-width: 1.1; }

/* The balance paying down: five blocks that clear left to right, then reset
   with the receipts. One 9s cycle, offsets as keyframe positions rather than
   animation-delay — a delay on an infinite animation shifts the whole loop and
   the bars stop agreeing with the rows they represent. */
.dfee__balbar { fill: var(--g-acc); animation: dfee-bal 9s linear infinite; }
.dfee__balbar[style*="--o: 1"] { animation-name: dfee-bal-1; }
.dfee__balbar[style*="--o: 2"] { animation-name: dfee-bal-2; }
.dfee__balbar[style*="--o: 3"] { animation-name: dfee-bal-3; }
.dfee__balbar[style*="--o: 4"] { animation-name: dfee-bal-4; }
@keyframes dfee-bal   { 0%, 18% { opacity: 1; } 24%, 92% { opacity: .16; } 100% { opacity: 1; } }
@keyframes dfee-bal-1 { 0%, 34% { opacity: 1; } 40%, 92% { opacity: .16; } 100% { opacity: 1; } }
@keyframes dfee-bal-2 { 0%, 50% { opacity: 1; } 56%, 92% { opacity: .16; } 100% { opacity: 1; } }
@keyframes dfee-bal-3 { 0%, 66% { opacity: 1; } 72%, 92% { opacity: .16; } 100% { opacity: 1; } }
@keyframes dfee-bal-4 { 0%, 82% { opacity: 1; } 88%, 92% { opacity: .16; } 100% { opacity: 1; } }

.dfee__rowbg { fill: var(--g-empty); stroke: var(--g-edge-2); stroke-width: 1; }
.dfee__amt { fill: var(--g-acc); }
.dfee__amt.is-off { fill: var(--g-flag, var(--g-acc-line)); }

/* A tick lands on each head in turn, on the same 9s clock as the balance. */
.dfee__ok   { fill: var(--g-acc); opacity: 0; }
.dfee__tick { fill: none; stroke: var(--g-panel); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.dfee__row.is-1 .dfee__ok, .dfee__row.is-1 .dfee__tick { animation: dfee-ok-1 9s linear infinite; }
.dfee__row.is-2 .dfee__ok, .dfee__row.is-2 .dfee__tick { animation: dfee-ok-2 9s linear infinite; }
.dfee__row.is-3 .dfee__ok, .dfee__row.is-3 .dfee__tick { animation: dfee-ok-3 9s linear infinite; }
.dfee__row.is-4 .dfee__ok, .dfee__row.is-4 .dfee__tick { animation: dfee-ok-4 9s linear infinite; }
@keyframes dfee-ok-1 { 0%, 17% { opacity: 0; } 22%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dfee-ok-2 { 0%, 33% { opacity: 0; } 38%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dfee-ok-3 { 0%, 49% { opacity: 0; } 54%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dfee-ok-4 { 0%, 65% { opacity: 0; } 70%, 92% { opacity: 1; } 100% { opacity: 0; } }

.dfee__paybg {
  fill: var(--g-panel-2); stroke: var(--g-edge); stroke-width: 1.1;
  animation: dfee-pay 9s var(--ease-inout) infinite;
}
.dfee__paybg[style*="--o: 1"] { animation-name: dfee-pay-1; }
.dfee__paybg[style*="--o: 2"] { animation-name: dfee-pay-2; }
.dfee__paybg[style*="--o: 3"] { animation-name: dfee-pay-3; }
@keyframes dfee-pay   { 0%, 14%, 30%, 100% { stroke: var(--g-edge); } 20% { stroke: var(--g-acc); } }
@keyframes dfee-pay-1 { 0%, 30%, 46%, 100% { stroke: var(--g-edge); } 36% { stroke: var(--g-acc); } }
@keyframes dfee-pay-2 { 0%, 46%, 62%, 100% { stroke: var(--g-edge); } 52% { stroke: var(--g-acc); } }
@keyframes dfee-pay-3 { 0%, 62%, 78%, 100% { stroke: var(--g-edge); } 68% { stroke: var(--g-acc); } }

/* Four questions ---------------------------------------------------------- */
.fprob__wrap { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 940px) {
  .fprob__wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .fprob__aside { position: sticky; top: calc(var(--nav-h, 76px) + 28px); }
}
.fprob__lede { margin: 14px 0 0; font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.7; }
.fprob__lines { list-style: none; margin: 0; padding: 0; }
.fprob__l {
  position: relative; padding: clamp(20px, 2.4vw, 30px) 0 clamp(20px, 2.4vw, 30px) clamp(34px, 4vw, 54px);
  border-top: 1px solid var(--border);
  font-size: clamp(1.125rem, 1.9vw, 1.5rem); font-weight: 600;
  line-height: 1.35; letter-spacing: -.02em;
}
.fprob__l:first-child { border-top: 0; padding-top: 0; }
.fprob__q {
  position: absolute; left: 0; top: clamp(10px, 1.6vw, 18px);
  font-size: clamp(2.5rem, 4.4vw, 3.75rem); line-height: 1;
  color: var(--accent); opacity: .32;
}
.fprob__l:first-child .fprob__q { top: -6px; }

/* Lifecycle spine --------------------------------------------------------- */
.flw__head { max-width: 780px; margin-bottom: clamp(32px, 4vw, 52px); }
/* Spine drawn per entry so it stops at the last node instead of overshooting. */
.flw__i::before {
  content: ""; position: absolute; left: 21px; top: 46px; bottom: -4px;
  width: 1px; background: var(--border);
}

/* Spec sheet -------------------------------------------------------------- */
.spec__head { max-width: 780px; margin-bottom: clamp(28px, 3.4vw, 44px); }


/* Payments band ----------------------------------------------------------- */
.pays { position: relative; overflow: clip; }
.pays__orb { top: -24%; left: -8%; width: 560px; height: 560px; }
.pays__inner { position: relative; z-index: 2; }
.pays__head { max-width: 780px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.pays__band {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-lg); overflow: clip;
}
.pays__i { padding: clamp(22px, 2.4vw, 30px); border-left: 1px solid rgba(255, 255, 255, .14); }
.pays__i:first-child { border-left: 0; }
.pays__ico {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px;
  border-radius: var(--r-md); background: rgba(2, 217, 254, .16); color: var(--cyan);
}
.pays__k { margin: 0 0 6px; font-size: var(--f-h3); font-weight: 650; letter-spacing: -.02em; }
.pays__v { margin: 0; font-size: var(--f-xs); color: var(--t-on-dark-2); line-height: 1.65; }

/* Reminder stack ---------------------------------------------------------- */
.chase__wrap { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 64px); align-items: start; }
@media (min-width: 940px) { .chase__wrap { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } }
.chase__lede { margin: 14px 0 20px; font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.7; }
.chase__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.chase__facts li {
  position: relative; padding-left: 22px; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.55;
}
.chase__facts li::before {
  content: ""; position: absolute; left: 2px; top: .52em;
  width: 9px; height: 5px; border-left: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text);
  transform: rotate(-45deg);
}
.chase__stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.chase__m {
  /* Each message steps in from the left a little further than the last, so the
     column reads as a thread arriving rather than as four equal boxes. */
  margin-left: calc(var(--i) * clamp(0px, 1.4vw, 22px));
  padding: clamp(15px, 1.7vw, 20px) clamp(17px, 1.9vw, 22px);
  border: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 6px;
  background: var(--s-card);
}
.chase__meta { display: flex; align-items: center; gap: 10px; margin: 0 0 7px; }
.chase__ch {
  padding: 3px 10px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-text);
  font-size: var(--f-label); font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.chase__when { font-size: var(--f-label); color: var(--t-muted); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }
.chase__txt { margin: 0; font-size: var(--f-sm); color: var(--t-primary); line-height: 1.55; }
.chase__note { margin: clamp(22px, 2.4vw, 30px) 0 0; max-width: 74ch; }

/* Report list ------------------------------------------------------------- */
.frep__head { max-width: 780px; margin-bottom: clamp(26px, 3.2vw, 40px); }
.frep__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--border);
}
@media (min-width: 860px) { .frep__list { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 64px); } }
.frep__i { padding: clamp(15px, 1.8vw, 21px) 0; border-bottom: 1px solid var(--border); }
.frep__k { margin: 0 0 4px; font-size: var(--f-h4); font-weight: 650; }
.frep__v { margin: 0; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.65; }
.frep__more { margin-top: clamp(26px, 3vw, 36px); }
.frep__more.is-pending { display: none; }

/* Controls ---------------------------------------------------------------- */
.aud2 { position: relative; overflow: clip; }
.aud2__orb { bottom: -30%; right: -8%; width: 600px; height: 600px; }
.aud2__inner { position: relative; z-index: 2; }
.aud2__head { max-width: 800px; margin-bottom: clamp(30px, 3.6vw, 46px); }
.aud2__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(16px, 2vw, 26px);
}
.aud2__i {
  position: relative; padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .05);
}
.aud2__n {
  position: absolute; top: clamp(16px, 1.8vw, 22px); right: clamp(16px, 1.8vw, 22px);
  font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.4px rgba(255, 255, 255, .22);
}
.aud2__k { margin: 0 0 8px; padding-right: 46px; font-size: var(--f-h4); font-weight: 650; line-height: 1.3; }
.aud2__v { margin: 0; font-size: var(--f-xs); color: var(--t-on-dark-2); line-height: 1.65; }

/* FAQ — one per row ------------------------------------------------------- */
.fqa__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3.2vw, 42px); }
.fqa__head .eyebrow { justify-content: center; }
.fqa__head .h2 { margin: 12px 0 0; }
.fqa__list { max-width: 880px; margin-inline: auto; }

/* Module CTA -------------------------------------------------------------- */
.fcta { position: relative; overflow: clip; }
.fcta__orb { top: -26%; left: -6%; width: 620px; height: 620px; }
.fcta__inner { position: relative; z-index: 3; }
.fcta__top { max-width: 700px; }
.fcta__eyebrow { color: #fff; margin-bottom: 14px; }
.fcta__h { margin: 0 0 16px; }
.fcta__lede { margin: 0 0 clamp(22px, 2.6vw, 30px); max-width: 56ch; font-size: var(--f-lead); color: rgba(255, 255, 255, .84); line-height: 1.65; }
.fcta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.fcta__primary { background: #fff; color: var(--ink, #0B0A1F); border-color: #fff; }
.fcta__primary:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, .3); }

.fcta__near { margin-top: clamp(34px, 4vw, 56px); padding-top: clamp(26px, 3vw, 38px); border-top: 1px solid rgba(255, 255, 255, .16); }
.fcta__neark {
  margin: 0 0 16px; font-size: var(--f-label); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(255, 255, 255, .62);
}
.fcta__near ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 800px) { .fcta__near ul { grid-template-columns: repeat(3, 1fr); } }
.fcta__nearlink {
  position: relative; display: grid; gap: 4px; height: 100%;
  padding: clamp(16px, 1.8vw, 20px); border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  text-decoration: none; color: #fff;
  transition: background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
a.fcta__nearlink:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); transform: translateY(-3px); }
.fcta__nearlink strong { font-size: var(--f-sm); font-weight: 650; padding-right: 26px; }
.fcta__nearlink span { font-size: var(--f-xs); color: rgba(255, 255, 255, .68); line-height: 1.55; }
.fcta__go { position: absolute; top: clamp(14px, 1.6vw, 18px); right: clamp(14px, 1.6vw, 18px); color: rgba(255, 255, 255, .5); transition: transform var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out); }
a.fcta__nearlink:hover .fcta__go { transform: translate(3px, -3px); color: var(--cyan); }
.fcta__nearlink.is-pending { opacity: .58; cursor: default; }
.fcta__nearlink.is-pending .fcta__go { display: none; }

/* ==========================================================================
   Fee lifecycle — a rail you move along
   Replaces a numbered vertical spine. Three spines already exist on this site
   (the school day, the rollout steps, and this); a fee travelling from
   definition to lock is one track, so it is drawn as one.
   ========================================================================== */

.rail__head { max-width: 820px; margin-bottom: clamp(30px, 3.6vw, 48px); }
.rail__wrap { position: relative; }

/* The track. Scrolls sideways on narrow screens — initTabs already brings the
   selected stop into view, so a stop off-screen is never stranded. */
.rail__track {
  position: relative; display: flex; align-items: flex-start;
  gap: clamp(4px, 1vw, 16px);
  padding: 30px 2px 0;
  margin-bottom: clamp(24px, 3vw, 36px);
  overflow-x: auto; scrollbar-width: none;
}
.rail__track::-webkit-scrollbar { display: none; }

/* The rail itself, and the part of it already travelled. */
.rail__line, .rail__fill {
  position: absolute; top: 36px; height: 2px; border-radius: 2px; pointer-events: none;
}
.rail__line { left: 0; right: 0; background: var(--border); }
.rail__fill {
  left: 0; width: 0; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  transition: transform .45s var(--ease-spring), width .45s var(--ease-spring);
}
/* Hidden until initTabs has measured it, so it never flashes at zero width. */
.rail__fill:not([style*="width"]) { opacity: 0; }

.rail__stop {
  position: relative; z-index: 1; flex: 1 0 auto;
  display: grid; justify-items: center; gap: 8px;
  padding: 0 clamp(6px, 1vw, 12px);
  border: 0; background: none; cursor: pointer; font: inherit;
  color: var(--t-muted);
  transition: color var(--d-base) var(--ease-out);
}
.rail__dot {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--s-pure); border: 2px solid var(--border);
  transition: background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-spring);
}
.rail__n { font-size: var(--f-label); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.rail__lbl { font-size: var(--f-xs); font-weight: 600; white-space: nowrap; }

.rail__stop[aria-selected="true"] { color: var(--accent-text); }
.rail__stop[aria-selected="true"] .rail__dot {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent);
  transform: scale(1.15);
}
.rail__stop:hover .rail__dot { border-color: var(--accent); }
.rail__stop:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); }

.rail__panel[hidden] { display: none; }
.rail__panel {
  display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.6vw, 44px);
  padding: clamp(24px, 2.8vw, 36px);
  border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--s-card);
}
@media (min-width: 860px) { .rail__panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.rail__t { margin: 0 0 10px; font-size: var(--f-h3); font-weight: 650; line-height: 1.25; letter-spacing: -.02em; }
.rail__d { margin: 0; font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.72; max-width: 62ch; }
.rail__pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.rail__pts li {
  position: relative; padding-left: 24px;
  font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6;
}
.rail__pts li::before {
  content: ""; position: absolute; left: 3px; top: .5em;
  width: 10px; height: 6px; border-left: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text);
  transform: rotate(-45deg);
}

/* ==========================================================================
   Configuration panel
   Replaces a definition list. The convincing answer to "can it hold what my
   school does" is the value sitting in the field, not a sentence about
   flexibility — so each row carries a sample.
   ========================================================================== */

.cfg__head { max-width: 820px; margin-bottom: clamp(28px, 3.4vw, 44px); }

.cfg__panel {
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--s-card); overflow: clip;
  box-shadow: var(--sh-card);
}
/* A window chrome bar, so the panel reads as the screen it is describing. */
.cfg__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 13px clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid var(--border); background: var(--s-raised);
}
.cfg__dots { display: flex; gap: 6px; }
.cfg__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.cfg__dots i:first-child { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.cfg__title {
  font-size: var(--f-label); font-weight: 600; letter-spacing: .03em;
  color: var(--t-muted); font-variant-numeric: tabular-nums;
}

.cfg__list { margin: 0; }
.cfg__row {
  display: grid; grid-template-columns: 1fr; gap: 8px clamp(24px, 3vw, 48px);
  padding: clamp(16px, 1.9vw, 22px) clamp(16px, 1.8vw, 24px);
  border-bottom: 1px solid var(--border);
}
.cfg__row:last-child { border-bottom: 0; }
@media (min-width: 780px) { .cfg__row { grid-template-columns: minmax(0, .28fr) minmax(0, .72fr); align-items: start; } }
.cfg__k {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: var(--f-h4); font-weight: 650; letter-spacing: -.01em;
}
.cfg__lock {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--violet, #6148FA) 14%, transparent);
  color: var(--violet, #6148FA);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.cfg__v { margin: 0; }
.cfg__d { margin: 0 0 11px; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.65; }

.cfg__vals { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.cfg__vals li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--s-pure);
  font-size: var(--f-xs); color: var(--t-primary);
}
/* Dates read as fields, so they get the tabular figures and a monospaced feel. */
.cfg__vals--dates li { font-variant-numeric: tabular-nums; letter-spacing: .02em; border-style: dashed; }
/* Toggles carry a switch, and the first one in each row is shown on. */
.cfg__vals--toggles li { padding-left: 9px; }
.cfg__sw {
  position: relative; width: 26px; height: 15px; border-radius: 999px;
  background: var(--border); flex: none;
  transition: background var(--d-base) var(--ease-out);
}
.cfg__sw::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 11px; height: 11px; border-radius: 50%; background: var(--s-pure);
  transition: transform var(--d-base) var(--ease-spring);
}
.cfg__vals--toggles li.is-on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.cfg__vals--toggles li.is-on .cfg__sw { background: var(--accent); }
.cfg__vals--toggles li.is-on .cfg__sw::after { transform: translateX(11px); }

.cfg__note { margin: clamp(18px, 2vw, 26px) 0 0; max-width: 74ch; }

/* ==========================================================================
   APPS HUB — /apps/
   Its own shapes again: a facing-pair hero, a scroll-snap screen rail, and a
   which-app-has-what matrix. Nothing borrowed from the pillars or the module
   page.

   The screenshots ship with their own device frame, so no bezel is drawn
   around any of them — one was drawn once before and produced a phone inside
   a phone.
   ========================================================================== */

/* Hero — two products facing each other -------------------------------- */
.ah { position: relative; overflow: clip; }
.ah__orb { top: -30%; right: -12%; width: 660px; height: 660px; }
.ah__inner { position: relative; z-index: 2; }
.ah__grid { display: grid; gap: clamp(34px, 4vw, 64px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .ah__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.ah__copy { min-width: 0; }
.ah__h { margin: 14px 0 0; max-width: 17ch; }
.ah__lede { margin: clamp(16px, 2vw, 22px) 0 0; max-width: 58ch; }


/* Two phones, overlapped and counter-tilted. */
.ah__art { position: relative; min-width: 0; display: grid; place-items: center; min-height: clamp(340px, 44vw, 520px); }
.ah__phone {
  height: auto; display: block; border-radius: 14px;
  filter: drop-shadow(0 40px 70px rgba(0, 0, 0, .55));
}
.ah__phone--front {
  position: relative; z-index: 2;
  width: clamp(180px, 20vw, 246px);
  translate: -16% 0; rotate: -6deg;
}
.ah__phone--back {
  position: absolute; z-index: 1;
  width: clamp(168px, 18.5vw, 228px);
  translate: 38% 6%; rotate: 7deg; opacity: .95;
}
@media (max-width: 560px) {
  .ah__phone--front { width: 168px; translate: -22% 0; }
  .ah__phone--back  { width: 156px; translate: 34% 6%; }
}

/* Two facing panels ------------------------------------------------------- */
.pair__grid { position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.4vw, 0px); }
@media (min-width: 900px) { .pair__grid { grid-template-columns: 1fr 1fr; gap: 0; } }
.pair__col {
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--border); border-radius: var(--r-xl);
}
@media (min-width: 900px) {
  .pair__col--parent { border-radius: var(--r-xl) 0 0 var(--r-xl); border-right: 0; }
  .pair__col--staff  { border-radius: 0 var(--r-xl) var(--r-xl) 0; }
}
.pair__col--parent { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.pair__col--staff  { background: var(--s-raised); }
.pair__k {
  margin: 0 0 10px; font-size: var(--f-label); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-text);
}
.pair__n { margin: 0 0 10px; font-size: var(--f-h2); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
.pair__d { margin: 0 0 20px; font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.7; max-width: 46ch; }
.pair__pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pair__pts li {
  padding: 11px 0; border-top: 1px solid var(--border);
  font-size: var(--f-xs); color: var(--t-secondary);
}
.pair__pts li:first-child { border-top: 0; }

/* The seam, and what the two share. */
.pair__seam { display: none; }


/* Screen rail ------------------------------------------------------------- */
.gal__head { max-width: 780px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.gal__rail {
  list-style: none; margin: 0; padding: 4px clamp(20px, 6vw, 96px) clamp(20px, 2.4vw, 30px);
  display: flex; gap: clamp(16px, 2vw, 28px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  /* Bleeds past the container on purpose — the rail should look like it runs
     off the page rather than stopping inside a box. */
}
.gal__rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-lg); }
.gal__i { flex: none; scroll-snap-align: center; width: clamp(200px, 22vw, 250px); }
.gal__fig { margin: 0; display: grid; gap: 14px; }
.gal__shot {
  width: 100%; height: auto; display: block; border-radius: 14px;
  filter: drop-shadow(0 24px 42px rgba(25, 15, 78, .22));
}
.gal__cap { display: grid; gap: 5px; }
.gal__tag {
  justify-self: start; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--f-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.gal__tag--parent { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
.gal__tag--school { background: color-mix(in srgb, var(--violet, #6148FA) 14%, transparent); color: var(--violet, #6148FA); }
.gal__t { font-size: var(--f-h4); font-weight: 650; line-height: 1.3; }
.gal__d { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6; }

/* Parent app — questions it answers --------------------------------------- */
.pap__head { max-width: 780px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.pap__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--border);
}
@media (min-width: 820px) { .pap__list { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 64px); } }
.pap__i {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico q" "... a";
  gap: 4px 14px; padding: clamp(16px, 1.9vw, 22px) 0; border-bottom: 1px solid var(--border);
}
.pap__ico {
  grid-area: ico; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-text);
}
.pap__q { grid-area: q; margin: 0; align-self: center; font-size: var(--f-h4); font-weight: 650; line-height: 1.35; }
.pap__a { grid-area: a; margin: 6px 0 0; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.65; }
.pap__stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 3vw, 36px); }

/* School app — where you are standing ------------------------------------- */
.sap { position: relative; overflow: clip; }
.sap__orb { bottom: -32%; left: -8%; width: 620px; height: 620px; }
.sap__inner { position: relative; z-index: 2; }
.sap__wrap { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 64px); align-items: start; }
@media (min-width: 940px) {
  .sap__wrap { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); }
  .sap__aside { position: sticky; top: calc(var(--nav-h, 76px) + 28px); }
}
.sap__lede { margin: 14px 0 22px; font-size: var(--f-sm); color: var(--t-on-dark-2); line-height: 1.7; }
.sap__stores { display: flex; flex-wrap: wrap; gap: 10px; }
.sap__where { list-style: none; margin: 0; padding: 0; }
.sap__w {
  display: grid; grid-template-columns: minmax(0, .34fr) minmax(0, .66fr); gap: 4px clamp(18px, 2.4vw, 34px);
  padding: clamp(15px, 1.8vw, 21px) 0; border-top: 1px solid rgba(255, 255, 255, .13);
}
.sap__w:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 640px) { .sap__w { grid-template-columns: 1fr; } }
.sap__wk { font-size: var(--f-h4); font-weight: 650; line-height: 1.35; }
.sap__wd { font-size: var(--f-xs); color: var(--t-on-dark-2); line-height: 1.65; }

/* Matrix ------------------------------------------------------------------ */
.mx__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.4vw, 44px); }
.mx__head .eyebrow { justify-content: center; }
.mx__head .h2 { margin: 12px 0 0; }
.mx__head .lead { margin: 14px auto 0; max-width: 58ch; }
/* Scrolls inside its own box so the page body never scrolls sideways. */
.mx__scroll { max-width: 860px; margin-inline: auto; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
.mx__table { width: 100%; min-width: 520px; border-collapse: collapse; background: var(--s-card); }
.mx__table th, .mx__table td {
  padding: clamp(11px, 1.3vw, 15px) clamp(13px, 1.5vw, 20px);
  border-bottom: 1px solid var(--border); font-size: var(--f-xs); text-align: left;
}
.mx__table thead th {
  background: var(--s-raised); text-align: center; white-space: nowrap;
  font-size: var(--f-label); font-weight: 700; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--t-muted);
}
.mx__table thead th:first-child { text-align: left; }
.mx__table tbody th { font-weight: 500; color: var(--t-primary); }
.mx__table td { text-align: center; }
.mx__table tbody tr:last-child th, .mx__table tbody tr:last-child td { border-bottom: 0; }
.mx__table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.mx__yes {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-text);
}
.mx__no { color: var(--t-muted); opacity: .5; }

/* Rollout ----------------------------------------------------------------- */
.inst__head { max-width: 760px; margin-bottom: clamp(26px, 3.2vw, 42px); }
.inst__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(16px, 2vw, 24px);
}
.inst__s {
  position: relative; padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--s-card);
}
.inst__n {
  display: block; margin-bottom: 12px;
  font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.4px color-mix(in srgb, var(--accent) 55%, transparent);
}
.inst__t { margin: 0 0 6px; font-size: var(--f-h4); font-weight: 650; }
.inst__d { margin: 0; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.65; }

/* The honest caveat, given its own weight rather than buried in a list. */
.inst__honest {
  margin: clamp(24px, 3vw, 36px) 0 0; max-width: 76ch;
  padding: clamp(20px, 2.2vw, 28px); border-radius: var(--r-lg);
  border: 1px dashed var(--border); background: var(--s-raised);
  font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.7;
}
.inst__honestk {
  display: block; margin-bottom: 7px;
  font-size: var(--f-label); font-weight: 700; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--t-primary);
}

/* FAQ — centred, as everywhere else --------------------------------------- */
.afaq__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3.2vw, 42px); }
.afaq__head .eyebrow { justify-content: center; }
.afaq__head .h2 { margin: 12px 0 0; }
.afaq__list { display: grid; max-width: 880px; margin-inline: auto; }
.afaq__more { margin-top: clamp(24px, 3vw, 36px); text-align: center; }

/* Closing CTA ------------------------------------------------------------- */
.acta { position: relative; overflow: clip; text-align: center; }
.acta__orb-a { top: -24%; left: -6%; width: 560px; height: 560px; }
.acta__orb-b { bottom: -30%; right: -6%; width: 500px; height: 500px; }
.acta__inner { position: relative; z-index: 3; max-width: 860px; display: flex; flex-direction: column; align-items: center; }
.acta__eyebrow { justify-content: center; color: #fff; margin-bottom: 15px; }
.acta__h { margin: 0 0 16px; }
.acta__lede { margin: 0 0 clamp(26px, 3vw, 36px); max-width: 58ch; color: rgba(255, 255, 255, .84); }

.acta__btns { margin-top: clamp(26px, 3vw, 36px); }
.acta__primary { background: #fff; color: var(--ink, #0B0A1F); border-color: #fff; }
.acta__primary:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, .3); }

/* ── Hero downloads: one joined control per app ─────────────────────────── */
/* Four separate store lockups read as furniture and take four glances. One
   segmented control per app says it in one: here is the app, and here are the
   two places to get it. */
/* auto-fit against a real minimum rather than a viewport breakpoint: this sits
   inside the hero's copy column, so the viewport says nothing useful about how
   much room it actually has. At a fixed two-up it clipped both store names
   between roughly 900px and 1200px, where the column is narrow but the
   viewport is not. */
.dl {
  display: grid; gap: clamp(14px, 1.8vw, 20px); margin-top: clamp(26px, 3vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* And a ceiling, so a single column does not stretch the control into a bar. */
.dl__seg { max-width: 400px; }

.dl__app { min-width: 0; }
.dl__name {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px;
  font-size: var(--f-sm); font-weight: 650; color: #fff;
}
.dl__who {
  font-size: var(--f-label); font-weight: 600; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--cyan);
}

.dl__seg {
  display: flex; align-items: stretch; overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(6px);
}
.dl__div { width: 1px; background: rgba(255, 255, 255, .18); flex: none; }

.dl__btn {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 11px clamp(10px, 1vw, 13px);
  text-decoration: none; color: #fff;
  transition: background var(--d-base) var(--ease-out);
}
.dl__btn:hover { background: rgba(255, 255, 255, .12); }
.dl__btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
/* A hairline that runs in under the cursor, so the segment reads as pressable
   rather than as a label with a link in it. */
.dl__btn::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--cyan); transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-base) var(--ease-out);
}
.dl__btn:hover::after, .dl__btn:focus-visible::after { transform: scaleX(1); }

.dl__mark { flex: none; display: grid; place-items: center; color: #fff; }
.dl__txt { display: grid; min-width: 0; }
.dl__kicker {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62); line-height: 1.3;
}
.dl__store {
  font-size: var(--f-xs); font-weight: 650; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Pair seam: label on the top edge ───────────────────────────────────── */
/* It used to sit at mid-height, where it landed across the right column's
   first list item and clipped the words behind it. */
@media (min-width: 900px) {
  .pair__seam {
    position: absolute; inset: 0 auto 0 50%; translate: -50% 0; z-index: 2;
    display: block; width: 1px; background: var(--border);
    pointer-events: none;
  }
  .pair__seamtxt {
    position: absolute; top: 0; left: 50%; translate: -50% -50%;
    padding: 6px 15px; border-radius: var(--r-pill);
    background: var(--s-pure); border: 1px solid var(--border);
    font-size: var(--f-label); font-weight: 600; letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase; color: var(--t-muted); white-space: nowrap;
  }
}

/* ── Screen rail: dragged, not scrolled ─────────────────────────────────── */
.gal__stage { position: relative; }
.gal__rail {
  cursor: grab;
  scrollbar-width: none; -ms-overflow-style: none;
  /* The drag maps 1:1 onto scrollLeft, so a smooth scroll-behaviour here would
     fight the pointer. The arrows opt into smooth themselves. */
  scroll-behavior: auto;
}
.gal__rail::-webkit-scrollbar { display: none; }
.gal__rail.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.gal__rail.is-drag .gal__shot { pointer-events: none; }
.gal__shot { -webkit-user-drag: none; user-select: none; }

.gal__nav { display: flex; gap: 10px; justify-content: center; margin-top: clamp(6px, 1vw, 12px); }
.gal__arrow {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: var(--s-card); color: var(--t-primary);
  transition: background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out);
}
.gal__arrow:first-child svg { rotate: 180deg; }
.gal__arrow:hover:not([disabled]) { background: var(--accent); border-color: var(--accent); color: #fff; }
.gal__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gal__arrow[disabled] { opacity: .35; cursor: default; }
/* No pointer, no arrows worth showing — a finger already flings the rail. */
@media (hover: none) { .gal__nav { display: none; } }

/* ==========================================================================
   CONTACT — /contact-us/
   The number and the addresses are the page, so they are set as content and
   given weight rather than parked in a form. No contact form anywhere here: a
   form needs a handler, a spam defence and a mailbox somebody reads, and a
   decorative one that drops messages is worse than none.
   ========================================================================== */

.ch { position: relative; overflow: clip; }
.ch__orb { top: -34%; left: 50%; translate: -50% 0; width: 720px; height: 720px; }
.ch__inner { position: relative; z-index: 2; max-width: 880px; text-align: center; }
.ch .crumb ol { justify-content: center; }
.ch__eyebrow { justify-content: center; }
.ch__h { margin: 14px auto 0; max-width: 18ch; }
.ch__lede { margin: clamp(16px, 2vw, 22px) auto 0; max-width: 62ch; }

.ch__line {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: clamp(26px, 3vw, 36px);
}
/* The phone number given the size it deserves on a contact page. */
.ch__num, .ch__mail {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px clamp(18px, 2vw, 26px); border-radius: var(--r-pill);
  text-decoration: none; color: #fff;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .07);
  transition: background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.ch__num { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ch__mail { font-size: var(--f-sm); font-weight: 600; }
.ch__num:hover, .ch__mail:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .34); transform: translateY(-2px); }
.ch__num svg, .ch__mail svg { color: var(--cyan); flex: none; }

/* Three channels ---------------------------------------------------------- */
.ways__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.4vw, 44px); }
.ways__head .eyebrow { justify-content: center; }
.ways__head .h2 { margin: 12px 0 0; }
.ways__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(16px, 2vw, 24px);
}
.ways__i { display: flex; }
.ways__card {
  flex: 1; display: flex; flex-direction: column;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--s-card);
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
.ways__card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); border-color: var(--accent); }
.ways__ico {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px;
  border-radius: var(--r-lg); background: var(--accent); color: #fff; box-shadow: var(--sh-glow);
}
.ways__k { margin: 0 0 4px; font-size: var(--f-h3); font-weight: 650; letter-spacing: -.02em; }
.ways__best {
  margin: 0 0 12px; font-size: var(--f-label); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-text);
}
.ways__d { margin: 0 0 20px; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.7; }
.ways__go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
  font-size: var(--f-sm); font-weight: 650; color: var(--t-primary); text-decoration: none;
  word-break: break-word;
}
.ways__go .arw { transition: transform var(--d-base) var(--ease-out); flex: none; }
.ways__card:hover .ways__go { color: var(--accent-text); }
.ways__card:hover .ways__go .arw { transform: translateX(4px); }

/* Offices ----------------------------------------------------------------- */
.off__head { max-width: 780px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.off__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 2vw, 24px);
}
.off__i { display: flex; }
.off__card {
  flex: 1; display: flex; flex-direction: column;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--s-card);
}
/* The head office is the one a reader is looking for first. */
.off__card--head { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.off__label {
  display: flex; align-items: center; gap: 9px; margin: 0 0 10px;
  font-size: var(--f-label); font-weight: 600; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--t-muted);
}
.off__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); flex: none; }
.off__card--head .off__label { color: var(--accent-text); }
.off__card--head .off__dot { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.off__city { margin: 0 0 12px; font-size: var(--f-h2); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
.off__addr { margin: 0 0 20px; font-style: normal; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.75; }
.off__map {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
  font-size: var(--f-xs); font-weight: 650; color: var(--accent-text); text-decoration: none;
}
.off__map svg { flex: none; }
.off__map:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Bring to the demo ------------------------------------------------------- */
.dem__wrap { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 64px); align-items: start; }
@media (min-width: 940px) {
  .dem__wrap { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
  .dem__aside { position: sticky; top: calc(var(--nav-h, 76px) + 28px); }
}
.dem__lede { margin: 14px 0 0; font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.7; }
.dem__len {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center;
  margin: clamp(22px, 2.6vw, 30px) 0 0; padding: clamp(16px, 1.8vw, 22px);
  border-radius: var(--r-lg); border: 1px dashed var(--border); background: var(--s-card);
}
.dem__lennum {
  font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 2px var(--accent-text);
}
.dem__lentxt { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6; }

.dem__list { list-style: none; margin: 0; padding: 0; }
.dem__i {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: start;
  padding: clamp(16px, 1.9vw, 22px) 0; border-top: 1px solid var(--border);
}
.dem__i:first-child { border-top: 0; padding-top: 0; }
.dem__box {
  grid-row: 1 / span 2; display: grid; place-items: center;
  width: 28px; height: 28px; margin-top: 2px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text);
}
.dem__t { margin: 0 0 5px; font-size: var(--f-h4); font-weight: 650; line-height: 1.35; }
.dem__d { margin: 0; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.65; }

/* Who picks up ------------------------------------------------------------ */
.who2 { position: relative; overflow: clip; }
.who2__orb { bottom: -32%; right: -8%; width: 600px; height: 600px; }
.who2__inner { position: relative; z-index: 2; }
.who2__head { max-width: 760px; margin-bottom: clamp(26px, 3.2vw, 42px); }
.who2__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(16px, 2vw, 26px);
}
.who2__i { padding-top: 18px; border-top: 2px solid rgba(2, 217, 254, .45); }
.who2__k { margin: 0 0 7px; font-size: var(--f-h4); font-weight: 650; }
.who2__v { margin: 0; font-size: var(--f-xs); color: var(--t-on-dark-2); line-height: 1.7; }
.who2__note {
  margin: clamp(26px, 3vw, 38px) 0 0; max-width: 74ch;
  padding: clamp(18px, 2vw, 24px); border-radius: var(--r-lg);
  border: 1px dashed rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05);
  font-size: var(--f-xs); color: var(--t-on-dark-2); line-height: 1.75;
}
.who2__note strong { color: #fff; }

/* FAQ + CTA --------------------------------------------------------------- */
.cfaq__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3.2vw, 42px); }
.cfaq__head .eyebrow { justify-content: center; }
.cfaq__head .h2 { margin: 12px 0 0; }
.cfaq__list { display: grid; max-width: 880px; margin-inline: auto; }

.ccta { position: relative; overflow: clip; text-align: center; }
.ccta__orb { top: -24%; right: -6%; width: 580px; height: 580px; }
.ccta__inner { position: relative; z-index: 3; max-width: 760px; display: flex; flex-direction: column; align-items: center; }
.ccta__eyebrow { justify-content: center; color: #fff; margin-bottom: 15px; }
.ccta__h { margin: 0 0 16px; }
.ccta__lede { margin: 0 0 clamp(24px, 3vw, 32px); max-width: 56ch; color: rgba(255, 255, 255, .84); }
.ccta__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ccta__primary { background: #fff; color: var(--ink, #0B0A1F); border-color: #fff; }
.ccta__primary:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, .3); }
.ccta__trust {
  list-style: none; margin: clamp(22px, 2.6vw, 30px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center;
  font-size: var(--f-sm); color: rgba(255, 255, 255, .8);
}
.ccta__trust li { display: flex; align-items: center; gap: 8px; }
.ccta__trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); flex: none; }

/* ==========================================================================
   CONTACT FORM
   Validated on the server whatever the browser does; the JS only saves a round
   trip. Errors are announced, tied to their field, and never signalled by
   colour alone (§E6).
   ========================================================================== */

.cform__wrap { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 64px); align-items: start; }
@media (min-width: 940px) {
  .cform__wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .cform__aside { position: sticky; top: calc(var(--nav-h, 76px) + 28px); }
}
.cform__lede { margin: 14px 0 20px; font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.7; }

.cform__form {
  padding: clamp(24px, 2.8vw, 36px);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--s-card); box-shadow: var(--sh-card);
}

/* Honeypot. Off-screen rather than display:none — a bot that reads computed
   styles skips a hidden field, and one that fills everything trips this. */
.cform__hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

.cform__alert {
  margin: 0 0 20px; padding: 13px 16px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--ember, #F65916) 45%, transparent);
  background: color-mix(in srgb, var(--ember, #F65916) 10%, transparent);
  font-size: var(--f-xs); color: var(--t-primary); line-height: 1.6;
}

.cform__row { margin-bottom: clamp(16px, 1.9vw, 22px); }

/* Phone: the code select and the number read as one control. */
.cform__tel { display: flex; align-items: stretch; gap: 8px; }

/* Errors carry an icon and a border change as well as colour. */
.cform__err {
  margin: 7px 0 0; min-height: 0; font-size: var(--f-xs); line-height: 1.5;
  color: var(--ember, #F65916); font-weight: 500;
}
/* The marker belongs to the message, not to the empty slot it lives in.
   :empty alone was not enough — PHP left whitespace inside the tag, so every
   field showed a bare "!" until it had an error. */
.cform__err:empty { display: none; }
.cform__err:not(:empty)::before { content: "! "; font-weight: 800; }

.cform__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 7px 0 0; }
.cform__meta .cform__err { margin: 0; }
.cform__count {
  flex: none; font-size: var(--f-label); color: var(--t-muted);
  font-variant-numeric: tabular-nums;
}
.cform__count.is-near { color: var(--ember, #F65916); }

.cform__submit { width: 100%; justify-content: center; margin-top: 6px; }
.cform__small { margin: 14px 0 0; font-size: var(--f-label); color: var(--t-muted); line-height: 1.6; }
.cform__small a { color: var(--accent-text); }

/* ==========================================================================
   THANK YOU
   The tick draws, the rings push outward, and a dial empties over ten seconds
   before the page goes home. The countdown is visible and cancellable, which
   WCAG 2.2.1 requires of anything on a timer.
   ========================================================================== */

.ty { position: relative; overflow: clip; min-height: 78vh; display: grid; align-items: center; }
.ty__orb { top: -20%; left: 50%; translate: -50% 0; width: 760px; height: 760px; }
.ty__inner { position: relative; z-index: 2; max-width: 780px; text-align: center; }

/* The mark ---------------------------------------------------------------- */
.ty__mark { position: relative; width: 120px; height: 120px; margin: 0 auto clamp(22px, 2.6vw, 32px); }
.ty__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--cyan); opacity: 0;
  animation: ty-ring 2.8s var(--ease-out) infinite;
}
.ty__ring--2 { animation-delay: 1.4s; }
@keyframes ty-ring {
  0%   { transform: scale(.72); opacity: .55; }
  70%  { opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}
.ty__svg { position: relative; width: 120px; height: 120px; display: block; }
.ty__disc { fill: rgba(2, 217, 254, .1); }
.ty__draw {
  fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  animation: ty-draw .75s var(--ease-out) .1s forwards;
}
@keyframes ty-draw { to { stroke-dashoffset: 0; } }
.ty__tick {
  fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: ty-draw .45s var(--ease-out) .7s forwards;
}

.ty__eyebrow { justify-content: center; color: var(--cyan); }
.ty__h {
  margin: 14px 0 0; font-size: clamp(2.75rem, 7vw, 5rem); font-weight: 700;
  line-height: 1; letter-spacing: -.04em; color: #fff;
}
.ty__lede {
  margin: clamp(16px, 2vw, 22px) auto 0; max-width: 56ch;
  font-size: var(--f-lead); color: rgba(255, 255, 255, .82); line-height: 1.65;
}
.ty__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: clamp(24px, 3vw, 32px); }

/* What happens next ------------------------------------------------------- */
.ty__next {
  list-style: none; margin: clamp(34px, 4vw, 52px) 0 0; padding: clamp(24px, 3vw, 32px);
  display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.2vw, 28px); text-align: left;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .15);
}
@media (min-width: 760px) { .ty__next { grid-template-columns: repeat(3, 1fr); } }
.ty__step { animation: ty-step .6s var(--ease-out) backwards; animation-delay: calc(1s + var(--i) * .12s); }
@keyframes ty-step { from { opacity: 0; transform: translateY(12px); } }
.ty__n {
  display: block; margin-bottom: 8px;
  font-size: var(--f-label); font-weight: 700; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1px var(--cyan);
}
.ty__t { margin: 0 0 5px; font-size: var(--f-h4); font-weight: 650; color: #fff; }
.ty__d { margin: 0; font-size: var(--f-xs); color: rgba(255, 255, 255, .7); line-height: 1.65; }

/* The countdown ----------------------------------------------------------- */
.ty__timer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 20px; margin-top: clamp(28px, 3.4vw, 40px);
}
.ty__home {
  display: inline-flex; align-items: center; gap: 13px;
  text-decoration: none; color: rgba(255, 255, 255, .82);
  font-size: var(--f-xs);
}
.ty__home:hover { color: #fff; }
.ty__dial { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; }
.ty__dial svg { position: absolute; inset: 0; width: 44px; height: 44px; }
.ty__dialbg { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 2.5; }
.ty__dialfg {
  fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .95s linear;
}
.ty__count {
  position: relative; font-size: var(--f-xs); font-weight: 700;
  font-variant-numeric: tabular-nums; color: #fff;
}
.ty__homet em { font-style: normal; font-weight: 650; color: #fff; }

.ty__stay {
  border: 1px solid rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .06);
  color: #fff; font: inherit; font-size: var(--f-xs); font-weight: 600;
  padding: 9px 16px; border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
.ty__stay:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
.ty__stay:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
/* Cancelled: the dial and its label go, the manual link stays. */
.ty__timer.is-off .ty__dial, .ty__timer.is-off .ty__stay { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ty__ring { animation: none; opacity: 0; }
  .ty__draw, .ty__tick { animation: none; stroke-dashoffset: 0; }
  .ty__step { animation: none; }
}

/* ==========================================================================
   FORM v2 — floating labels and a flag country picker
   Replaces the stacked label/input pairs. The label starts inside the field
   and rides up when it has content, so the field keeps its name after it has
   been filled in — which a placeholder alone does not.
   ========================================================================== */

/* Card ------------------------------------------------------------------- */
.cform__form { position: relative; overflow: hidden; }
/* A lit top edge, so the card reads as the active thing on the section. */
.cform__edge {
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--violet, #6148FA), transparent);
  opacity: .85;
}

/* What happens to it, as a trail ----------------------------------------- */
.cform__flow { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; }
.cform__flow li {
  position: relative; display: grid; gap: 2px;
  padding: 14px 0 14px 34px; border-top: 1px solid var(--border);
}
.cform__flow li:first-child { border-top: 0; }
/* The spine that joins the three steps. */
.cform__flow li::before {
  content: ""; position: absolute; left: 8px; top: 26px; bottom: -14px;
  width: 1px; background: var(--border);
}
.cform__flow li:last-child::before { display: none; }
.cform__fn {
  position: absolute; left: 0; top: 15px;
  display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background: var(--s-card); border: 1px solid var(--accent);
  font-size: 8px; font-weight: 800; letter-spacing: -.02em;
  color: var(--accent-text); font-variant-numeric: tabular-nums;
}
.cform__flow strong { font-size: var(--f-xs); font-weight: 650; color: var(--t-primary); }
.cform__flow span:not(.cform__fn) { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.55; }

/* Floating field ---------------------------------------------------------- */
.fld { position: relative; display: flex; align-items: stretch; }
.fld__input {
  width: 100%; font: inherit; font-size: var(--f-sm); color: var(--t-primary);
  padding: 25px 15px 10px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-pure);
  transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.fld__input:focus-visible {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.fld__label {
  position: absolute; left: 16px; top: 50%; translate: 0 -50%;
  font-size: var(--f-sm); color: var(--t-muted); pointer-events: none;
  transition: top var(--d-base) var(--ease-out), translate var(--d-base) var(--ease-out),
              font-size var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}
.fld__label span { color: var(--accent-text); }

/* Raised once the field has content or focus. :placeholder-shown does the
   work; the class only covers autofill, which does not always report it. */
.fld__input:focus + .fld__label,
.fld__input:not(:placeholder-shown) + .fld__label,
.fld.is-filled .fld__label,
.fld.is-focus .fld__label {
  top: 13px; translate: 0 0; font-size: 11px; font-weight: 650;
  letter-spacing: .03em; text-transform: uppercase; color: var(--accent-text);
}

/* The textarea's label sits at the top rather than centred. */
.fld--area .fld__label { top: 20px; translate: 0 0; }
.fld--area .fld__input { padding-top: 30px; min-height: 140px; resize: vertical; line-height: 1.6; }
.fld--area .fld__input:focus + .fld__label,
.fld--area .fld__input:not(:placeholder-shown) + .fld__label,
.fld--area.is-filled .fld__label { top: 13px; }

.fld__input[aria-invalid="true"] { border-color: var(--ember, #F65916); }
.fld__input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember, #F65916) 20%, transparent); }

/* Phone: the picker and the number share one box ------------------------- */
.fld--tel { gap: 8px; }
.fld--tel .fld__input--tel { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.fld--tel .fld__label { left: auto; right: auto; }
/* The label belongs to the number, so it starts where the number starts. */
.fld--tel .fld__label { left: calc(var(--dialw, 104px) + 24px); }

/* Country picker ---------------------------------------------------------- */
.dial { position: relative; flex: none; }
/* Native select is the fallback and the thing that posts. Once the listbox is
   wired it steps out of sight but stays in the form. */
.dial__native {
  width: 104px; height: 100%; font: inherit; font-size: var(--f-sm);
  padding: 12px 10px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-pure); color: var(--t-primary);
}
.dial.is-enhanced .dial__native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.dial__btn { display: none; }
.dial.is-enhanced .dial__btn {
  display: flex; align-items: center; gap: 8px;
  height: 100%; padding: 12px 12px; cursor: pointer;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--s-pure);
  font: inherit; font-size: var(--f-sm); color: var(--t-primary);
  transition: border-color var(--d-fast) var(--ease-out);
}
.dial__btn:hover { border-color: var(--accent); }
.dial__btn:focus-visible { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.dial__flag { display: grid; place-items: center; flex: none; }
.flag { display: block; border-radius: 2.5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset; }
.dial__code { font-variant-numeric: tabular-nums; font-weight: 600; }
.dial__caret {
  width: 7px; height: 7px; flex: none; margin-left: 1px;
  border-right: 2px solid var(--t-muted); border-bottom: 2px solid var(--t-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--d-base) var(--ease-out);
}
.dial__btn[aria-expanded="true"] .dial__caret { transform: rotate(-135deg) translate(-2px, -2px); }

.dial__pop {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
  width: 268px; max-width: 78vw; padding: 8px;
  border-radius: var(--r-lg); border: 1px solid var(--border);
  background: var(--s-pure); box-shadow: var(--sh-lift);
}
.dial__search {
  width: 100%; font: inherit; font-size: var(--f-xs); color: var(--t-primary);
  padding: 9px 12px; margin-bottom: 6px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--s-raised);
}
.dial__search:focus-visible { outline: 0; border-color: var(--accent); }
.dial__list { list-style: none; margin: 0; padding: 0; max-height: 232px; overflow-y: auto; }
.dial__opt {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--f-xs); color: var(--t-primary);
}
.dial__opt[hidden] { display: none; }
.dial__opt:hover, .dial__opt:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); outline: 0; }
.dial__opt[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 650; }
.dial__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dial__num { color: var(--t-muted); font-variant-numeric: tabular-nums; }

.cform__hint { margin: 8px 0 0; font-size: var(--f-label); color: var(--t-muted); line-height: 1.55; }

/* The example number is a hint, not a second label — it would sit under the
   resting label and read as clutter. Show it only once the label has floated
   out of the way. */
.fld__input::placeholder { color: transparent; transition: color var(--d-fast) var(--ease-out); }
.fld__input:focus::placeholder { color: var(--t-muted); }

/* Confetti sits over the section and takes no clicks. It is removed from the
   document once the burst finishes, so this rule is only live for a few
   seconds. */
.confetti { position: absolute; inset: 0 0 auto 0; height: 100vh; z-index: 4; pointer-events: none; }

/* ==========================================================================
   ATTENDANCE MODULE — /features/attendance-management-system/

   The page's signature is a register that fills itself, and it recurs: the
   hero marks one, the switch section shows two ways of marking one, and the
   threshold section reads one. Nothing here is shared with the fee module —
   fees is a lifecycle and got a spine; attendance is one event that a lot of
   things read from, and got a cascade.

   Ember stays out of it. An absence is not urgency, and ember is reserved
   site-wide for offers and countdowns.
   ========================================================================== */

/* ── Register palette (shared by every register on the page) ─────────────
   Present is the accent. Absent is deliberately quiet — a desaturated slate,
   because an absent mark is information, not an alarm. Leave is violet, which
   is the only other colour the brand carries. */
.ath, .mark, .thr, .lv {
  --reg-p:     var(--cyan-600);
  --reg-p-bg:  color-mix(in srgb, var(--cyan-600) 14%, transparent);
  --reg-a:     var(--n-400);
  --reg-a-bg:  color-mix(in srgb, var(--n-400) 16%, transparent);
  --reg-l:     var(--violet);
  --reg-l-bg:  color-mix(in srgb, var(--violet) 14%, transparent);
}
/* On the dark hero the same three have to lift off midnight instead of white. */
.ath {
  --reg-p-bg: color-mix(in srgb, var(--cyan) 22%, transparent);
  --reg-a:    #7C87A3;
  --reg-a-bg: rgba(255, 255, 255, .07);
  --reg-l-bg: color-mix(in srgb, var(--violet) 34%, transparent);
}

/* ── 1 · Hero register ─────────────────────────────────────────────────── */
.ath__grid { align-items: center; }

.ath__art { position: relative; }

.ath__reg {
  position: relative;
  padding: clamp(16px, 1.7vw, 22px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .7);
}

.ath__regtop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.ath__cls { font-size: var(--f-xs); font-weight: 650; color: var(--t-on-dark); }
.ath__live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--f-label); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--cyan);
}
.ath__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--cyan) 60%, transparent);
  animation: ath-live 1.8s var(--ease-out) infinite;
}
@keyframes ath-live {
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
  0%        { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cyan) 55%, transparent); }
}

/* Thirty positions. Ten across is what a printed register uses. */
.ath__cells {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px;
}
.ath__cell {
  position: relative; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  /* Blank until the ticker marks it. */
  transition: background var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
.ath__no {
  position: absolute; top: 2px; left: 3px;
  font-size: 7px; font-weight: 600; letter-spacing: -.02em;
  color: rgba(255, 255, 255, .3); font-variant-numeric: tabular-nums;
}
.ath__mk {
  font-size: 11px; font-weight: 800; letter-spacing: -.01em;
  color: transparent; transform: scale(.5);
  transition: color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-spring, var(--ease-out));
}
/* Marked. The ticker adds .is-on; the [data-cell] value decides the colour. */
.ath__cell.is-on .ath__mk { transform: scale(1); }
.ath__cell.is-on[data-cell="p"] { background: var(--reg-p-bg); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.ath__cell.is-on[data-cell="p"] .ath__mk { color: var(--cyan); }
.ath__cell.is-on[data-cell="a"] { background: var(--reg-a-bg); border-color: rgba(255, 255, 255, .2); }
.ath__cell.is-on[data-cell="a"] .ath__mk { color: var(--reg-a); }
.ath__cell.is-on[data-cell="l"] { background: var(--reg-l-bg); border-color: color-mix(in srgb, var(--violet) 55%, transparent); }
.ath__cell.is-on[data-cell="l"] .ath__mk { color: #B9AEFF; }

.ath__tally {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 14px; margin-top: 14px;
}
.ath__count { font-size: var(--f-xs); color: var(--t-on-dark-2); font-variant-numeric: tabular-nums; }
.ath__count b { color: var(--t-on-dark); font-size: var(--f-sm); font-weight: 750; }
.ath__key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ath__key li {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--f-label); color: var(--t-on-dark-2);
}
.ath__key i { width: 8px; height: 8px; border-radius: 2px; }
.ath__key [data-key="p"] i { background: var(--cyan); }
.ath__key [data-key="a"] i { background: var(--reg-a); }
.ath__key [data-key="l"] i { background: #B9AEFF; }

/* The gate, tucked under the register — the other way in. */
.ath__scan {
  display: flex; align-items: center; gap: 11px;
  margin-top: 14px; padding: 11px 13px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
}
.ath__lens {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 10px;
  background: color-mix(in srgb, var(--cyan) 20%, transparent);
  color: var(--cyan);
}
.ath__lens svg { animation: ath-scan 2.6s var(--ease-out) infinite; }
@keyframes ath-scan { 0%, 70%, 100% { opacity: 1; } 80% { opacity: .35; } }
.ath__scant { display: grid; gap: 1px; min-width: 0; }
.ath__scant b { font-size: var(--f-xs); font-weight: 650; color: var(--t-on-dark); }
.ath__scant span { font-size: var(--f-label); color: var(--t-on-dark-2); }

@media (max-width: 900px) { .ath__art { margin-top: 30px; } }
@media (max-width: 420px) {
  .ath__cells { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .ath__no { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ath__dot, .ath__lens svg { animation: none; }
  .ath__mk { transition: none; }
}

/* ── 2 · Two ways to mark ──────────────────────────────────────────────── */
.mark__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 38px); }
.mark__head .eyebrow { justify-content: center; }
.mark__head .h2 { margin: 12px 0 0; }
.mark__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.mark__rig { max-width: 1000px; margin-inline: auto; }

/* The switch: a track with a thumb that slides between two real radios. */
.mark__sw {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  width: min(340px, 100%); margin: 0 auto clamp(22px, 2.6vw, 32px);
  padding: 5px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--s-raised);
  box-shadow: inset 0 1px 3px rgba(20, 19, 31, .05);
}
.mark__thumb {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px;
  width: calc(50% - 5px); border-radius: 999px;
  background: linear-gradient(135deg, var(--cyan-600), var(--violet));
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--cyan-600) 70%, transparent);
  transition: translate var(--d-base) var(--ease-out);
}
.mark__rig.is-face .mark__thumb { translate: 100% 0; }
.mark__opt { position: relative; z-index: 1; cursor: pointer; }
.mark__opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mark__opt span {
  display: grid; place-items: center; padding: 10px 8px; border-radius: 999px;
  font-size: var(--f-xs); font-weight: 650; color: var(--t-secondary);
  transition: color var(--d-base) var(--ease-out);
}
.mark__opt input:checked ~ span { color: #fff; }
.mark__opt input:focus-visible ~ span {
  outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.mark__panel {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(22px, 3vw, 44px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 34px);
  border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card);
  box-shadow: var(--sh-card, 0 18px 44px -30px rgba(20, 19, 31, .25));
  animation: mark-in var(--d-base) var(--ease-out) both;
}
.mark__panel[hidden] { display: none; }
@keyframes mark-in { from { opacity: 0; translate: 0 10px; } }

.mark__kicker {
  font-size: var(--f-label); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-text); margin: 0;
}
.mark__h { font-size: var(--f-h4, 1.25rem); font-weight: 700; line-height: 1.28; margin: 10px 0 0; color: var(--t-primary); }
.mark__body { margin: 12px 0 0; font-size: var(--f-sm); line-height: 1.66; color: var(--t-secondary); }
.mark__pts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.mark__pts li {
  display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start;
  font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.5;
}
.mark__pts svg { color: var(--accent-text); margin-top: 1px; }

/* The stage: a register being tapped, or a face being read. */
.mark__stage {
  position: relative; display: grid; place-items: center;
  min-height: 190px; padding: 18px; border-radius: var(--r-md);
  background: var(--s-frost); border: 1px solid var(--border-soft); overflow: hidden;
}
.mark__rows { width: 100%; display: grid; gap: 9px; }
.mark__row {
  display: grid; grid-template-columns: 22px 1fr 20px; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px; background: var(--s-pure);
  border: 1px solid var(--border-soft);
  animation: mark-row 3.2s var(--ease-out) calc(var(--i) * .18s) infinite;
}
@keyframes mark-row {
  0%, 8%    { border-color: var(--border-soft); }
  16%, 100% { border-color: color-mix(in srgb, var(--cyan-600) 40%, transparent); }
}
.mark__av { width: 22px; height: 22px; border-radius: 50%; background: var(--n-200); }
.mark__bar { height: 6px; border-radius: 3px; background: var(--n-200); }
.mark__row:nth-child(odd) .mark__bar { width: 78%; }
.mark__row:nth-child(even) .mark__bar { width: 62%; }
.mark__tick {
  width: 18px; height: 18px; border-radius: 6px; justify-self: end;
  background: var(--reg-p-bg); border: 1px solid color-mix(in srgb, var(--cyan-600) 45%, transparent);
}
.mark__row[data-row="a"] .mark__tick {
  background: var(--reg-a-bg); border-color: color-mix(in srgb, var(--n-400) 50%, transparent);
}
.mark__tap {
  position: absolute; right: 16%; bottom: 22%;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--cyan-600);
  animation: mark-tap 3.2s var(--ease-out) infinite;
}
@keyframes mark-tap {
  0%, 100% { opacity: 0; scale: .6; }
  12%      { opacity: 1; scale: 1; }
  30%      { opacity: 0; scale: 1.5; }
}

.mark__frame {
  position: relative; width: min(160px, 60%); aspect-ratio: 3 / 4;
  border-radius: 14px; background: var(--s-pure); border: 1px solid var(--border-soft);
  overflow: hidden;
}
.mark__head2 {
  position: absolute; left: 50%; top: 40%; translate: -50% -50%;
  width: 52%; aspect-ratio: 3 / 4; border-radius: 50% 50% 46% 46%;
  background: linear-gradient(160deg, var(--n-200), var(--n-400));
}
.mark__head2::after {
  content: ""; position: absolute; left: 50%; top: 100%; translate: -50% 0;
  width: 148%; height: 60%; border-radius: 42% 42% 0 0;
  background: linear-gradient(160deg, var(--n-200), var(--n-400));
}
.mark__corner {
  position: absolute; width: 18px; height: 18px;
  border: 2px solid var(--cyan-600); border-radius: 3px;
}
.mark__corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.mark__corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.mark__corner--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.mark__corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.mark__sweep {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--cyan) 55%, transparent);
  animation: mark-sweep 2.8s var(--ease-in-out, ease-in-out) infinite;
}
@keyframes mark-sweep { 0%, 100% { top: 14%; } 50% { top: 84%; } }
.mark__chip {
  position: absolute; right: 14px; bottom: 14px;
  padding: 6px 11px; border-radius: 999px;
  font-size: var(--f-label); font-weight: 650; color: var(--accent-text);
  background: var(--s-pure); border: 1px solid color-mix(in srgb, var(--cyan-600) 40%, transparent);
  font-variant-numeric: tabular-nums;
}

.mark__foot {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: clamp(20px, 2.4vw, 28px) 0 0; text-align: center;
  font-size: var(--f-xs); color: var(--t-muted);
}
.mark__foot svg { color: var(--accent-text); flex: none; }

@media (max-width: 820px) {
  .mark__panel { grid-template-columns: 1fr; }
  .mark__stage { order: -1; min-height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .mark__row, .mark__tap, .mark__sweep, .mark__panel { animation: none; }
  .mark__row { border-color: color-mix(in srgb, var(--cyan-600) 40%, transparent); }
}

/* ── 3 · The cascade ───────────────────────────────────────────────────── */
.chn__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.2vw, 42px); }
.chn__head .eyebrow { justify-content: center; }
.chn__head .h2 { margin: 12px 0 0; }
.chn__lede { margin: 14px auto 0; max-width: 580px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.chn__tree { position: relative; max-width: 1040px; margin-inline: auto; }

.chn__seed {
  position: relative; z-index: 1;
  width: min(340px, 100%); margin: 0 auto; padding: 20px 22px;
  border-radius: var(--r-lg); text-align: center;
  background: linear-gradient(135deg, var(--midnight), var(--indigo));
  box-shadow: 0 22px 50px -26px color-mix(in srgb, var(--indigo) 80%, transparent);
}
.chn__pulse {
  position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--cyan) 55%, transparent);
  animation: chn-pulse 2.8s var(--ease-out) infinite;
}
@keyframes chn-pulse {
  0%   { opacity: .9; scale: 1; }
  70%, 100% { opacity: 0; scale: 1.08; }
}
.chn__seedi {
  display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 12px;
  border-radius: 13px; color: var(--ink);
  background: var(--cyan);
  box-shadow: 0 0 26px -4px color-mix(in srgb, var(--cyan) 70%, transparent);
}
.chn__seedt { margin: 0; font-size: var(--f-sm); font-weight: 700; color: var(--t-on-dark); }
.chn__seedd { margin: 5px 0 0; font-size: var(--f-label); color: var(--t-on-dark-2); line-height: 1.5; }

.chn__branches {
  --chn-gap:  clamp(16px, 1.9vw, 24px);
  --chn-drop: clamp(34px, 4vw, 52px);
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--chn-gap);
  margin-top: var(--chn-drop);
}

/* The trunk: seed down to the crossbar, and no further. */
.chn__branches::before {
  content: ""; position: absolute; left: 50%; translate: -50% 0;
  top: calc(var(--chn-drop) * -1); height: calc(var(--chn-drop) - 14px); width: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cyan-600) 70%, transparent), var(--border));
}

.chn__branch { position: relative; display: flex; }

/* The crossbar, hung on the middle card of the row so it can reach both ways.
   -50% clears half a column and -gap clears the gutter, which lands it exactly
   on the centre of the outer columns — where the drops are. Measured, not
   guessed: an earlier -12px stopped in the middle of the gutter and the rails
   met nothing. */
.chn__branch:nth-child(2)::before {
  content: ""; position: absolute; top: -14px; height: 2px; background: var(--border);
  left: calc(-50% - var(--chn-gap)); right: calc(-50% - var(--chn-gap));
}

/* Each card's drop from the crossbar. */
.chn__join {
  position: absolute; left: 50%; translate: -50% 0; top: -14px;
  width: 2px; height: 14px; background: var(--border);
}

/* Row two hangs off nothing, so it is drawn as nothing. Six cards under one
   crossbar already say they share a cause; a second crossbar fed by no trunk
   would only say the drawing does not mean anything. */
.chn__branch:nth-child(n+4) .chn__join { display: none; }

.chn__card {
  position: relative; display: flex; flex-direction: column; width: 100%;
  padding: clamp(18px, 2vw, 24px);
  border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card);
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
.chn__card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); border-color: var(--accent); }
.chn__ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
  margin-bottom: 13px;
}
.chn__kick {
  margin: 0; font-size: var(--f-label); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--t-muted);
}
.chn__h { margin: 7px 0 0; font-size: var(--f-sm); font-weight: 700; line-height: 1.35; color: var(--t-primary); }
.chn__b { margin: 9px 0 0; font-size: var(--f-xs); line-height: 1.6; color: var(--t-secondary); }
.chn__link { margin: 13px 0 0; }
.chn__link a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--f-label); font-weight: 650; color: var(--accent-text);
}
.chn__link a:hover { text-decoration: underline; }

/* The bracket is drawn for three columns and is wrong at any other count: at
   two columns it overshot the grid by 186px and lined up with nothing. Below
   three columns the cards carry the idea on their own, so the connectors go.
   Matching the :nth-child specificity so this cannot lose to the base rule. */
@media (max-width: 900px) {
  .chn__branches { grid-template-columns: repeat(2, 1fr); }
  .chn__branches::before,
  .chn__branch:nth-child(2)::before,
  .chn__branch:nth-child(n+1) .chn__join { display: none; }
}
@media (max-width: 560px) {
  .chn__branches { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .chn__pulse { animation: none; opacity: .5; } }

/* ── 4 · Face recognition band ─────────────────────────────────────────── */
.fcr { position: relative; overflow: clip; }
.fcr__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.fcr__orb { top: -18%; right: -8%; width: 46vw; opacity: .5; }
.fcr__eyebrow { color: var(--cyan); }
.fcr__h { color: var(--t-on-dark); margin: 12px 0 0; }
.fcr__lede { margin: 16px 0 0; font-size: var(--f-sm); line-height: 1.7; color: var(--t-on-dark-2); max-width: 56ch; }

.fcr__pts { list-style: none; margin: clamp(22px, 2.6vw, 32px) 0 0; padding: 0; display: grid; gap: 18px; }
.fcr__pts li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.fcr__ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13);
  color: var(--cyan); flex: none;
}
.fcr__pth { grid-column: 2; margin: 0; font-size: var(--f-sm); font-weight: 700; color: var(--t-on-dark); line-height: 1.3; }
.fcr__ptb { grid-column: 2; margin: 6px 0 0; font-size: var(--f-xs); line-height: 1.62; color: var(--t-on-dark-2); }

.fcr__note {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: clamp(22px, 2.6vw, 30px) 0 0; padding: 13px 15px;
  border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .04);
  font-size: var(--f-label); line-height: 1.6; color: var(--t-on-dark-2);
}
.fcr__note svg { color: var(--cyan); margin-top: 1px; }

.fcr__art { position: relative; }
.fcr__art svg { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .fcr__inner { grid-template-columns: 1fr; }
  .fcr__art { order: -1; max-width: 460px; margin-inline: auto; }
}

/* ── 5 · Leave threads ─────────────────────────────────────────────────── */
.lv__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.2vw, 42px); }
.lv__head .eyebrow { justify-content: center; }
.lv__head .h2 { margin: 12px 0 0; }
.lv__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.lv__threads {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.6vw, 34px);
  max-width: 1000px; margin-inline: auto;
}
.lv__thread {
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card);
}
.lv__who { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; margin-bottom: 18px; }
.lv__ico {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet);
}
.lv__wh { margin: 0; font-size: var(--f-sm); font-weight: 700; color: var(--t-primary); }
.lv__from { font-size: var(--f-label); color: var(--t-muted); }

/* The exchange: request out, landing back. */
.lv__bub { position: relative; padding: 14px 16px; border-radius: 14px; font-size: var(--f-xs); line-height: 1.62; }
.lv__bub p { margin: 0; }
.lv__bub--out {
  background: color-mix(in srgb, var(--violet) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--violet) 24%, transparent);
  border-bottom-left-radius: 4px; color: var(--t-secondary);
  margin-right: clamp(0px, 4vw, 34px);
}
.lv__bub--in {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  background: var(--s-frost); border: 1px solid color-mix(in srgb, var(--cyan-600) 30%, transparent);
  border-bottom-right-radius: 4px; color: var(--t-secondary);
  margin-left: clamp(0px, 4vw, 34px);
}
.lv__badge {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--cyan-600); color: #fff; flex: none;
}
/* The wire between them — three dots travelling. */
.lv__wire { display: flex; justify-content: center; gap: 6px; padding: 12px 0; }
.lv__wire i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--border);
  animation: lv-dot 1.6s var(--ease-out) infinite;
}
.lv__wire i:nth-child(2) { animation-delay: .18s; }
.lv__wire i:nth-child(3) { animation-delay: .36s; }
@keyframes lv-dot {
  0%, 100% { background: var(--border); transform: translateY(0); }
  40%      { background: var(--cyan-600); transform: translateY(-3px); }
}

.lv__legend {
  max-width: 1000px; margin: clamp(26px, 3vw, 40px) auto 0;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-lg); border: 1px dashed var(--border); background: var(--s-raised);
}
.lv__lt { margin: 0 0 16px; text-align: center; font-size: var(--f-xs); font-weight: 650; color: var(--t-primary); }
.lv__states { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lv__states li {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 12px; align-items: center;
  padding: 13px 15px; border-radius: var(--r-md); background: var(--s-pure); border: 1px solid var(--border-soft);
}
.lv__states i {
  grid-row: 1 / 3; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  font-style: normal; font-size: 14px; font-weight: 800;
}
.lv__states [data-st="p"] i { background: var(--reg-p-bg); color: var(--accent-text); }
.lv__states [data-st="l"] i { background: var(--reg-l-bg); color: var(--violet); }
.lv__states [data-st="a"] i { background: var(--reg-a-bg); color: var(--t-secondary); }
.lv__states b { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.lv__states span { font-size: var(--f-label); color: var(--t-muted); line-height: 1.5; }

@media (max-width: 820px) {
  .lv__threads { grid-template-columns: 1fr; }
  .lv__states { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .lv__wire i { animation: none; } }

/* ── 6 · The threshold ─────────────────────────────────────────────────── */
.thr__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.2vw, 42px); }
.thr__head .eyebrow { justify-content: center; }
.thr__head .h2 { margin: 12px 0 0; }
.thr__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.thr__rig {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(22px, 3vw, 44px); align-items: start;
  max-width: 1040px; margin-inline: auto;
}

.thr__dialwrap {
  position: sticky; top: 100px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card);
  text-align: center;
}
.thr__dial { position: relative; width: min(180px, 62%); margin: 0 auto 18px; }
.thr__dial svg { width: 100%; height: auto; display: block; transform: rotate(-90deg); }
.thr__ring { stroke: var(--border); stroke-width: 8; }
.thr__fill {
  stroke: var(--cyan-600); stroke-width: 8; stroke-linecap: round;
  transition: stroke-dasharray var(--d-fast) linear;
}
.thr__val {
  position: absolute; inset: 0; display: grid; place-content: center; align-content: center;
  grid-auto-flow: column; gap: 1px;
}
.thr__val b {
  font-size: clamp(2rem, 4.2vw, 2.7rem); font-weight: 800; letter-spacing: -.03em;
  color: var(--t-primary); font-variant-numeric: tabular-nums; line-height: 1;
}
.thr__val i { font-style: normal; font-size: var(--f-sm); font-weight: 700; color: var(--t-muted); align-self: start; margin-top: 4px; }

.thr__lab { display: block; font-size: var(--f-xs); font-weight: 650; color: var(--t-primary); margin-bottom: 12px; }
.thr__range { width: 100%; accent-color: var(--cyan-600); cursor: grab; }
.thr__range:active { cursor: grabbing; }
.thr__range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.thr__scale { display: flex; justify-content: space-between; margin: 5px 0 0; font-size: var(--f-label); color: var(--t-muted); }
.thr__out {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border-soft);
  font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.55;
}
.thr__out b { font-size: var(--f-sm); font-weight: 750; color: var(--accent-text); font-variant-numeric: tabular-nums; }

.thr__roll {
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card);
}
.thr__rollt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft);
  font-size: var(--f-xs); font-weight: 650; color: var(--t-primary);
}
.thr__demo {
  padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--t-muted); background: var(--s-frost); border: 1px solid var(--border);
}

.thr__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.thr__item {
  display: grid; grid-template-columns: 68px 1fr 42px 22px; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 9px;
  border: 1px solid transparent; background: transparent;
  transition: background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.thr__no { font-size: var(--f-label); color: var(--t-muted); font-variant-numeric: tabular-nums; }
.thr__bar { height: 8px; border-radius: 4px; background: var(--n-200); overflow: hidden; }
.thr__bar i {
  display: block; height: 100%; width: var(--w); border-radius: 4px;
  background: var(--cyan-600);
  transition: background var(--d-fast) var(--ease-out);
}
.thr__pc { font-size: var(--f-label); font-weight: 650; color: var(--t-secondary); text-align: right; font-variant-numeric: tabular-nums; }
.thr__flag { display: grid; place-items: center; color: var(--violet); opacity: 0; scale: .6; transition: opacity var(--d-fast) var(--ease-out), scale var(--d-fast) var(--ease-out); }

/* Below the line. Violet, not ember — ember is for offers. */
.thr__item.is-under {
  background: color-mix(in srgb, var(--violet) 7%, transparent);
  border-color: color-mix(in srgb, var(--violet) 26%, transparent);
}
.thr__item.is-under .thr__bar i { background: var(--violet); }
.thr__item.is-under .thr__pc { color: var(--violet); }
.thr__item.is-under .thr__flag { opacity: 1; scale: 1; }

.thr__foot {
  display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start;
  margin: 16px 0 0; padding-top: 13px; border-top: 1px solid var(--border-soft);
  font-size: var(--f-label); color: var(--t-muted); line-height: 1.55;
}
.thr__foot svg { color: var(--t-muted); margin-top: 1px; }

@media (max-width: 880px) {
  .thr__rig { grid-template-columns: 1fr; }
  .thr__dialwrap { position: static; }
}
@media (max-width: 460px) {
  .thr__item { grid-template-columns: 58px 1fr 38px 20px; gap: 9px; }
}

/* ── 7 · The report deck ───────────────────────────────────────────────── */
.arep__grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center;
}

.arep__big { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 0; }
/* Stroke numerals — the outline reads as a figure quoted, not shouted. */
.arep__n {
  font-size: clamp(4rem, 10vw, 7rem); font-weight: 800; line-height: .85; letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent-text);
  paint-order: stroke fill;
}
.arep__of { font-size: var(--f-sm); font-weight: 650; color: var(--t-muted); }
.arep__h { margin: 14px 0 0; }
.arep__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 52ch; }

.arep__ask { margin: clamp(20px, 2.4vw, 28px) 0 0; }
.arep__askl {
  margin: 0 0 9px; font-size: var(--f-label); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--t-muted);
}
.arep__askbar {
  display: flex; align-items: center; gap: 3px; margin: 0;
  padding: 13px 16px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--violet) 30%, transparent);
  background: color-mix(in srgb, var(--violet) 7%, transparent);
  font-size: var(--f-xs); color: var(--t-primary);
}
.arep__askq { font-weight: 600; }
.arep__caret {
  width: 2px; height: 15px; background: var(--violet);
  animation: arep-caret 1.1s steps(1) infinite;
}
@keyframes arep-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.arep__askn { margin: 9px 0 0; font-size: var(--f-label); color: var(--t-muted); line-height: 1.55; }

/* The deck: a stack of paper that fans. */
.arep__deck {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(11px, 1.3vw, 16px);
}
.arep__card {
  position: relative; padding: clamp(16px, 1.9vw, 22px) clamp(16px, 1.9vw, 22px) clamp(16px, 1.9vw, 22px);
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--s-card);
  /* Each sits a touch off-square, so the set reads as paper rather than tiles. */
  rotate: calc((var(--i) - (var(--n) / 2)) * .5deg);
  transition: rotate var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
.arep__card:hover {
  rotate: 0deg; transform: translateY(-4px); box-shadow: var(--sh-lift); border-color: var(--accent);
}
.arep__rule {
  position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, var(--cyan-600), var(--violet));
  opacity: .8;
}
.arep__ct { margin: 0; font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.arep__cb { margin: 7px 0 0; font-size: var(--f-label); line-height: 1.55; color: var(--t-secondary); }
.arep__exp { position: absolute; top: 14px; right: 14px; color: var(--t-muted); opacity: .5; }

.arep__foot {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: clamp(26px, 3vw, 38px) 0 0; font-size: var(--f-xs);
}
.arep__foot svg { color: var(--accent-text); flex: none; }
.arep__foot a { font-weight: 650; color: var(--accent-text); }
.arep__foot a:hover { text-decoration: underline; }

@media (max-width: 900px) { .arep__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .arep__deck { grid-template-columns: 1fr; } .arep__card { rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .arep__caret { animation: none; } .arep__card { rotate: 0deg; } }

/* ── 8 · The comparison table ──────────────────────────────────────────── */
.vsr { position: relative; overflow: clip; }
.vsr__inner { position: relative; z-index: 1; }
.vsr__orb { top: -22%; left: -10%; width: 44vw; opacity: .45; }
.vsr__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 38px); }
.vsr__head .eyebrow { justify-content: center; }
.vsr__eyebrow { color: var(--cyan); }
.vsr__h { color: var(--t-on-dark); margin: 12px 0 0; }
.vsr__lede { margin: 14px auto 0; max-width: 620px; font-size: var(--f-sm); line-height: 1.65; color: var(--t-on-dark-2); }

.vsr__scroll {
  max-width: 1000px; margin-inline: auto;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg); border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(10px);
}
.vsr__table { width: 100%; min-width: 640px; border-collapse: collapse; }
.vsr__table th, .vsr__table td {
  padding: 14px clamp(12px, 1.5vw, 18px); text-align: left; vertical-align: top;
  font-size: var(--f-xs); line-height: 1.55;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.vsr__table thead th {
  position: sticky; top: 0; z-index: 1;
  padding-top: 16px; padding-bottom: 16px;
  font-size: var(--f-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--t-on-dark-2);
  background: color-mix(in srgb, var(--midnight) 92%, transparent);
  backdrop-filter: blur(10px);
}
.vsr__col { display: inline-flex; align-items: center; gap: 7px; }
.vsr__col--old { color: var(--t-on-dark-2); }
.vsr__col--new { color: var(--cyan); }
.vsr__table tbody th {
  font-weight: 650; color: var(--t-on-dark); width: 30%;
}
.vsr__table tbody tr:last-child th,
.vsr__table tbody tr:last-child td { border-bottom: 0; }
.vsr__table tbody tr:hover th,
.vsr__table tbody tr:hover td { background: rgba(255, 255, 255, .04); }
.vsr__old { color: var(--t-on-dark-2); }
.vsr__new { color: var(--t-on-dark); }
/* The winning column gets a lit edge rather than a fill — a fill on a dark
   surface at this width reads as a highlight bar and fights the table. */
.vsr__new { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--cyan) 45%, transparent); }
.vsr__table thead th:last-child { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--cyan) 45%, transparent); }

/* Phone: the table stops being a grid and becomes one card per task.
   A sideways-scrolling comparison hides the column that makes the argument —
   at 375px the reader landed on "Register & spreadsheet" and had to discover
   that a third column existed. Each row now carries both answers, labelled.

   The elements keep their table roles explicitly (set in the markup), because
   display:block is what strips a table's implicit semantics. */
@media (max-width: 700px) {
  .vsr__scroll { overflow-x: visible; border: 0; background: none; backdrop-filter: none; }
  .vsr__table { min-width: 0; display: block; }
  .vsr__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vsr__table tbody { display: block; }

  .vsr__table tbody tr {
    display: block; margin-bottom: 12px; padding: 16px;
    border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
  }
  .vsr__table tbody tr:last-child { margin-bottom: 0; }
  .vsr__table tbody tr:hover th,
  .vsr__table tbody tr:hover td { background: none; }

  .vsr__table tbody th {
    display: block; width: auto; padding: 0 0 12px;
    font-size: var(--f-sm); border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .vsr__table tbody td {
    display: grid; gap: 3px; width: auto; padding: 12px 0 0; border-bottom: 0;
    box-shadow: none;
  }
  .vsr__table tbody td::before {
    content: attr(data-label);
    font-size: var(--f-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  }
  .vsr__old::before { color: var(--t-on-dark-2); }
  .vsr__new::before { color: var(--cyan); }
  /* The lit edge moves to the answer that matters, now that it is a block. */
  .vsr__new {
    margin-top: 10px; padding: 12px 0 0 12px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--cyan) 45%, transparent);
  }
}

/* ==========================================================================
   BOOK A DEMO — /book-a-demo/

   The page is a ticket. The hero is the ticket itself with a tear line and a
   stub, the agenda is the itinerary printed on it, and the small print is the
   list of what has been crossed off. Nothing here is borrowed from the module
   pages: a conversion page and a feature page are not doing the same job and
   should not look like they are.

   Only tokens that flip with the theme are used for anything on a light
   surface — --n-300/--n-400/--n-600 keep their light values in dark mode, and
   that is how three contrast bugs got onto the attendance page.
   ========================================================================== */

/* ── 1 · The ticket ────────────────────────────────────────────────────── */
.tkt { position: relative; overflow: clip; }
.tkt__inner { position: relative; z-index: 1; }
.tkt__orb { top: -26%; right: -12%; width: 52vw; opacity: .55; }

.tkt__card {
  position: relative;
  max-width: 940px; margin: clamp(18px, 2.4vw, 30px) auto 0;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px);
  box-shadow: 0 34px 80px -40px rgba(0, 0, 0, .8);
}

/* The two bites out of the sides.
   These are real holes, not dark circles painted to look like holes. The first
   attempt filled them with --ink, which is near-black, while the section
   behind is a radial gradient that is nowhere near --ink at the seam — so they
   read as black dots stuck on the card.
   Masking the card punches the hole instead, and whatever the section paints
   there shows through. The colour then matches by construction, at every
   viewport height, with no value to keep in sync. --tear is written by
   initTicket() from the seam's real offset. */
.tkt__card.is-torn {
  -webkit-mask-image:
    radial-gradient(circle 14px at 0 var(--tear), transparent 13px, #000 13.6px),
    radial-gradient(circle 14px at 100% var(--tear), transparent 13px, #000 13.6px);
          mask-image:
    radial-gradient(circle 14px at 0 var(--tear), transparent 13px, #000 13.6px),
    radial-gradient(circle 14px at 100% var(--tear), transparent 13px, #000 13.6px);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* The ring that gives the hole an edge. Without JS there is no --tear, so
   these stay hidden rather than sitting at a guessed position. */
.tkt__notch {
  position: absolute; top: 0; translate: 0 -50%;
  width: 26px; height: 26px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  opacity: 0;
}
.is-torn .tkt__notch { opacity: 1; }
.tkt__notch--l { left: -13px; }
.tkt__notch--r { right: -13px; }

.tkt__main { padding: clamp(26px, 3.6vw, 48px) clamp(22px, 3.4vw, 52px) clamp(24px, 3vw, 40px); }

.tkt__eyebrow { color: var(--cyan); display: inline-flex; align-items: center; gap: 9px; }
.tkt__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
  animation: tkt-dot 2s var(--ease-out) infinite;
}
@keyframes tkt-dot {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cyan) 55%, transparent); }
  70%      { box-shadow: 0 0 0 8px transparent; }
}

.tkt__h { color: var(--t-on-dark); margin: 14px 0 0; max-width: 18ch; }
.tkt__lede { margin: 18px 0 0; max-width: 62ch; color: var(--t-on-dark-2); font-size: var(--f-sm); line-height: 1.7; }

.tkt__btns { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(22px, 2.8vw, 32px) 0 0; }
.tkt__btns .btn-ghost { display: inline-flex; align-items: center; gap: 9px; }

.tkt__alt { margin: 16px 0 0; font-size: var(--f-label); color: var(--t-on-dark-2); }
.tkt__alt a { color: var(--cyan); font-weight: 600; }
.tkt__alt a:hover { text-decoration: underline; }

/* The seam: the join between the ticket and its stub. Everything that marks
   the tear hangs off this, so it is always on the join and never on the copy
   above it. */
.tkt__seam { position: relative; }

.tkt__tear {
  position: absolute; left: 20px; right: 20px; top: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .28) 0 7px, transparent 7px 14px);
}

.tkt__stub {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin: 0; padding: clamp(20px, 2.4vw, 28px) clamp(22px, 3.4vw, 52px);
  background: rgba(255, 255, 255, .08);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.tkt__cell {
  display: grid; gap: 2px; padding: 0 clamp(10px, 1.4vw, 18px);
  position: relative;
}
/* Perforated dividers between the stub cells, drawn the same way as the tear. */
.tkt__cell + .tkt__cell::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px;
  background: repeating-linear-gradient(180deg,
    rgba(255, 255, 255, .24) 0 5px, transparent 5px 10px);
}
.tkt__k {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--t-on-dark-2);
}
.tkt__v { margin: 0; display: grid; gap: 3px; }
.tkt__v b {
  font-size: clamp(1.15rem, 2.1vw, 1.5rem); font-weight: 800; letter-spacing: -.02em;
  color: var(--cyan); line-height: 1.1;
}
.tkt__n { font-size: var(--f-label); color: var(--t-on-dark-2); line-height: 1.5; }

@media (max-width: 720px) {
  .tkt__stub { grid-template-columns: 1fr; gap: 1px; }
  .tkt__cell { padding: 12px clamp(10px, 1.4vw, 18px); }
  /* Stacked, the divider has to run across rather than down. */
  .tkt__cell + .tkt__cell::before {
    left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px;
    background: repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .24) 0 5px, transparent 5px 10px);
  }
  .tkt__h { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .tkt__dot { animation: none; } }

/* ── 2 · The itinerary ─────────────────────────────────────────────────── */
.fty__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 38px); }
.fty__head .eyebrow { justify-content: center; }
.fty__head .h2 { margin: 12px 0 0; }
.fty__lede { margin: 14px auto 0; max-width: 600px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

/* The strip: each block sized by its own minutes, so the shape of the call is
   readable before a word of it is. */
.fty__strip {
  display: flex; gap: 4px; max-width: 940px; margin: 0 auto clamp(24px, 3vw, 36px);
  height: 46px;
}
.fty__seg {
  flex: var(--w) 1 0; display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--cyan-600) calc(9% + var(--i) * 4%), transparent);
  border: 1px solid color-mix(in srgb, var(--cyan-600) 26%, transparent);
  min-width: 0;
}
.fty__seg b {
  font-size: var(--f-xs); font-weight: 750; color: var(--accent-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fty__seg i { font-style: normal; font-size: 10px; font-weight: 600; opacity: .75; }

.fty__list { list-style: none; margin: 0; padding: 0; max-width: 940px; margin-inline: auto; }
.fty__item {
  position: relative;
  display: grid; grid-template-columns: 84px 1fr; gap: clamp(16px, 2vw, 28px);
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-top: 1px solid var(--border);
}
.fty__item:first-child { border-top: 0; padding-top: 0; }
/* The rail that ties the blocks together, down the left of the minutes. */
.fty__rail {
  position: absolute; left: 41px; top: 0; bottom: 0; width: 2px;
  background: var(--border-soft);
}
.fty__item:first-child .fty__rail { top: 18px; }
.fty__item:last-child .fty__rail { bottom: calc(100% - 42px); }

.fty__min {
  position: relative; z-index: 1;
  display: grid; place-items: center; align-content: center;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--s-card); border: 2px solid color-mix(in srgb, var(--cyan-600) 32%, transparent);
}
.fty__min b {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -.03em;
  color: var(--accent-text); line-height: 1; font-variant-numeric: tabular-nums;
}
.fty__min i { font-style: normal; font-size: 10px; font-weight: 650; color: var(--t-muted); letter-spacing: .06em; text-transform: uppercase; }

.fty__kick {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: var(--f-label); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--t-muted);
}
.fty__ico {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.fty__h { margin: 10px 0 0; font-size: var(--f-h4, 1.2rem); font-weight: 700; line-height: 1.3; color: var(--t-primary); }
.fty__b { margin: 9px 0 0; font-size: var(--f-xs); line-height: 1.65; color: var(--t-secondary); max-width: 62ch; }

.fty__foot {
  display: flex; align-items: flex-start; justify-content: center; gap: 9px;
  max-width: 640px; margin: clamp(22px, 2.6vw, 32px) auto 0; text-align: center;
  font-size: var(--f-label); color: var(--t-muted); line-height: 1.6;
}
.fty__foot svg { color: var(--accent-text); flex: none; margin-top: 2px; }

@media (max-width: 640px) {
  .fty__item { grid-template-columns: 58px 1fr; gap: 14px; }
  .fty__min { width: 58px; height: 58px; }
  .fty__rail { left: 28px; }
  .fty__item:last-child .fty__rail { bottom: calc(100% - 30px); }
  .fty__strip { height: 38px; }
  .fty__seg i { display: none; }
}

/* ── 3 · Day 0 to day 30 ───────────────────────────────────────────────── */
.rdy__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(30px, 3.6vw, 46px); }
.rdy__head .eyebrow { justify-content: center; }
.rdy__head .h2 { margin: 12px 0 0; }
.rdy__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.rdy__road {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 24px);
  max-width: 1040px; margin-inline: auto;
}
/* The road itself, running behind the pins. */
.rdy__line {
  position: absolute; left: 12.5%; right: 12.5%; top: 26px; height: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--cyan-600) 60%, transparent),
    color-mix(in srgb, var(--violet) 55%, transparent));
}
.rdy__stop { position: relative; text-align: center; }
.rdy__pin {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, var(--cyan-600), var(--violet));
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--cyan-600) 80%, transparent);
}
.rdy__when {
  margin: 0; font-size: 10px; font-weight: 750; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-text); font-variant-numeric: tabular-nums;
}
.rdy__h { margin: 7px 0 0; font-size: var(--f-sm); font-weight: 700; line-height: 1.32; color: var(--t-primary); }
.rdy__b { margin: 8px 0 0; font-size: var(--f-xs); line-height: 1.6; color: var(--t-secondary); }

.rdy__foot {
  display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap;
  margin: clamp(26px, 3vw, 38px) 0 0; text-align: center;
  font-size: var(--f-xs); color: var(--t-secondary);
}
.rdy__foot svg { color: var(--accent-text); flex: none; }
.rdy__foot a { font-weight: 650; color: var(--accent-text); }
.rdy__foot a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .rdy__road { grid-template-columns: repeat(2, 1fr); row-gap: clamp(24px, 3vw, 34px); }
  /* A road drawn for four stops is wrong across two rows, so it goes. */
  .rdy__line { display: none; }
}
@media (max-width: 480px) {
  .rdy__road { grid-template-columns: 1fr; }
  .rdy__stop {
    display: grid; grid-template-columns: 52px 1fr; gap: 14px;
    text-align: left; align-items: start;
  }
  .rdy__pin { margin: 0; }
  .rdy__when, .rdy__h, .rdy__b { grid-column: 2; }
  .rdy__pin { grid-row: 1 / 4; }
}

/* ── 4 · The small print ───────────────────────────────────────────────── */
.rul__wrap {
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center;
  max-width: 1040px; margin-inline: auto;
}
.rul__h { margin: 12px 0 0; }
.rul__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 48ch; }

/* A stamp rather than a stat — the section is the back of a ticket. */
.rul__seal {
  display: inline-flex; align-items: center; gap: 14px;
  margin: clamp(22px, 2.6vw, 30px) 0 0; padding: 14px 20px 14px 16px;
  border-radius: var(--r-md);
  border: 2px dashed color-mix(in srgb, var(--cyan-600) 42%, transparent);
  background: color-mix(in srgb, var(--cyan-600) 7%, transparent);
}
.rul__sealn {
  font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.04em;
  line-height: 1; color: transparent;
  -webkit-text-stroke: 2px var(--accent-text);
}
.rul__sealt { font-size: var(--f-xs); font-weight: 650; color: var(--t-primary); line-height: 1.45; max-width: 22ch; }

.rul__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rul__i {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  padding: 15px 18px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
  transition: border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.rul__i:hover { border-color: var(--accent); transform: translateX(3px); }
.rul__x {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet);
}
.rul__t { display: grid; gap: 4px; min-width: 0; }
.rul__t s {
  font-size: var(--f-sm); font-weight: 700; color: var(--t-muted);
  text-decoration-color: color-mix(in srgb, var(--violet) 70%, transparent);
  text-decoration-thickness: 2px;
}
.rul__d { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.55; }

@media (max-width: 860px) { .rul__wrap { grid-template-columns: 1fr; } }

/* ── 6 · CTA variant ───────────────────────────────────────────────────── */
/* The booking CTA drops the related-modules nav, so the copy block should not
   sit off to one side as though something were missing beside it. */
.fcta--demo .fcta__top { max-width: 720px; margin-inline: auto; text-align: center; }
.fcta--demo .fcta__eyebrow { justify-content: center; }
.fcta--demo .fcta__btns { justify-content: center; }
.fcta--demo .fcta__lede { margin-inline: auto; }
.fcta--demo .fcta__small { margin-top: 18px; font-size: var(--f-label); color: var(--t-on-dark-2); }
.fcta--demo .fcta__small a { color: var(--cyan); font-weight: 600; }
.fcta--demo .fcta__small a:hover { text-decoration: underline; }

/* ==========================================================================
   FREE TRIAL — /free-trial/

   The signature is a key, not a ticket: eighteen locks opening at once. The
   ticket language belongs to /book-a-demo/ and is not reused here — one page
   is about an appointment, the other about access.

   Only theme-flipping tokens on light surfaces. --n-300/--n-400/--n-600 keep
   their light values in dark mode, which is how three contrast bugs reached
   the attendance page.
   ========================================================================== */

/* ── 1 · The board of locks ────────────────────────────────────────────── */
.trh { position: relative; overflow: clip; }
.trh__inner { position: relative; z-index: 1; }
.trh__orb { top: -24%; right: -10%; width: 50vw; opacity: .5; }

.trh__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 62px); align-items: center;
  margin-top: clamp(16px, 2vw, 26px);
}

.trh__eyebrow { color: var(--cyan); }
.trh__h { color: var(--t-on-dark); margin: 14px 0 0; max-width: 16ch; }
.trh__lede { margin: 18px 0 0; max-width: 58ch; color: var(--t-on-dark-2); font-size: var(--f-sm); line-height: 1.7; }

.trh__chips { list-style: none; margin: clamp(20px, 2.4vw, 26px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.trh__chips li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05);
  font-size: var(--f-label); font-weight: 600; color: var(--t-on-dark);
}
.trh__chips svg { color: var(--cyan); flex: none; }

.trh__btns { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(22px, 2.8vw, 30px) 0 0; }

/* The board itself. */
.trh__art { position: relative; }
.trh__board {
  padding: clamp(16px, 1.8vw, 22px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(14px);
  box-shadow: 0 26px 64px -32px rgba(0, 0, 0, .75);
}
.trh__bt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.trh__btl { font-size: var(--f-xs); font-weight: 650; color: var(--t-on-dark); }
.trh__tally { font-size: var(--f-label); color: var(--t-on-dark-2); font-variant-numeric: tabular-nums; }
.trh__tally b { color: var(--cyan); font-size: var(--f-sm); font-weight: 800; }

.trh__tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px;
}
.trh__tile {
  position: relative; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  transition: background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
/* Shut: a padlock, dim. Open: the module's own icon, lit. Both are in the
   markup and cross-fade, so nothing has to be swapped in by script. */
.trh__lock, .trh__open {
  position: absolute; display: grid; place-items: center;
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.trh__lock { color: rgba(255, 255, 255, .28); opacity: 1; }
.trh__open { color: var(--cyan); opacity: 0; transform: scale(.6); }

.trh__tile.is-open { background: color-mix(in srgb, var(--cyan) 16%, transparent); border-color: color-mix(in srgb, var(--cyan) 42%, transparent); }
.trh__tile.is-open .trh__lock { opacity: 0; transform: scale(1.4); }
.trh__tile.is-open .trh__open { opacity: 1; transform: scale(1); }

.trh__bf {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 0; padding: 11px 13px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, transparent);
  background: color-mix(in srgb, var(--cyan) 9%, transparent);
  font-size: var(--f-label); font-weight: 600; color: var(--t-on-dark);
}
.trh__bf svg { color: var(--cyan); flex: none; }

@media (max-width: 900px) {
  .trh__grid { grid-template-columns: 1fr; }
  .trh__h { max-width: none; }
  .trh__art { max-width: 460px; }
}
@media (max-width: 420px) { .trh__tiles { grid-template-columns: repeat(5, 1fr); gap: 6px; } }
@media (prefers-reduced-motion: reduce) {
  .trh__lock, .trh__open, .trh__tile { transition: none; }
}

/* ── 2 · The named list ────────────────────────────────────────────────── */
.unl__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.unl__head .eyebrow { justify-content: center; }
.unl__head .h2 { margin: 12px 0 0; }
.unl__lede { margin: 14px auto 0; max-width: 600px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.unl__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px; max-width: 1060px; margin-inline: auto;
}
.unl__i { display: flex; }
.unl__link {
  position: relative; display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px; width: 100%;
  padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
  color: var(--t-primary);
  transition: border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.unl__link:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--sh-lift); }
.unl__ico {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.unl__n { font-size: var(--f-xs); font-weight: 650; line-height: 1.35; min-width: 0; }
.unl__go { color: var(--t-muted); opacity: 0; transition: opacity var(--d-fast) var(--ease-out); }
.unl__link:hover .unl__go { opacity: 1; }

.unl__apps {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  max-width: 1060px; margin: clamp(22px, 2.6vw, 32px) auto 0;
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--r-lg);
  border: 1px dashed color-mix(in srgb, var(--cyan-600) 38%, transparent);
  background: color-mix(in srgb, var(--cyan-600) 6%, transparent);
}
.unl__appsi {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  background: color-mix(in srgb, var(--cyan-600) 14%, transparent); color: var(--accent-text); flex: none;
}
.unl__appst { margin: 0; display: grid; gap: 3px; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.55; }
.unl__appst strong { font-size: var(--f-sm); font-weight: 700; color: var(--t-primary); }
.unl__appsl { flex: none; font-size: var(--f-xs); font-weight: 650; color: var(--accent-text); white-space: nowrap; }
.unl__appsl:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .unl__apps { grid-template-columns: auto 1fr; row-gap: 12px; }
  .unl__appsl { grid-column: 2; justify-self: start; }
}

/* ── 3 · Two lanes ─────────────────────────────────────────────────────── */
.lane__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.lane__head .eyebrow { justify-content: center; }
.lane__head .h2 { margin: 12px 0 0; }
.lane__lede { margin: 14px auto 0; max-width: 600px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.lane__pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.2vw, 30px);
  max-width: 1000px; margin-inline: auto;
}
.lane__c {
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card);
}
/* The lane the school is not doing gets the weight, because that is the point. */
.lane__c--us {
  border-color: color-mix(in srgb, var(--cyan-600) 34%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cyan-600) 6%, transparent), transparent 60%), var(--s-card);
}
.lane__top { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.lane__ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.lane__c--you .lane__ico { background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet); }
.lane__h { margin: 0; font-size: var(--f-h4, 1.2rem); font-weight: 750; color: var(--t-primary); }

.lane__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lane__rows li {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6;
}
.lane__n {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none;
  font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.lane__c--you .lane__n { background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet); }

.lane__foot {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  max-width: 660px; margin: clamp(22px, 2.6vw, 30px) auto 0;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-raised);
  font-size: var(--f-label); color: var(--t-secondary); line-height: 1.6;
}
.lane__foot svg { color: var(--accent-text); margin-top: 1px; }

@media (max-width: 760px) { .lane__pair { grid-template-columns: 1fr; } }

/* ── 4 · Records crossing over ─────────────────────────────────────────── */
.mig { position: relative; overflow: clip; }
.mig__inner { position: relative; z-index: 1; }
.mig__orb { bottom: -30%; left: -12%; width: 46vw; opacity: .45; }
.mig__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.4vw, 44px); }
.mig__head .eyebrow { justify-content: center; }
.mig__eyebrow { color: var(--cyan); }
.mig__h { color: var(--t-on-dark); margin: 12px 0 0; }
.mig__lede { margin: 14px auto 0; max-width: 620px; font-size: var(--f-sm); line-height: 1.65; color: var(--t-on-dark-2); }

.mig__flow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 34px); align-items: center;
  max-width: 1040px; margin-inline: auto;
}

.mig__from { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mig__from li {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04);
}
.mig__fi {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: rgba(255, 255, 255, .07); color: var(--t-on-dark-2);
}
.mig__ft { display: grid; gap: 2px; min-width: 0; }
.mig__ft strong { font-size: var(--f-xs); font-weight: 650; color: var(--t-on-dark); }
.mig__ft span { font-size: var(--f-label); color: var(--t-on-dark-2); line-height: 1.5; }

/* The crossing. */
.mig__pipe { position: relative; display: grid; place-items: center; width: 76px; height: 76px; }
.mig__wire {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyan) 60%, transparent), transparent);
}
.mig__pulse {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--cyan) 60%, transparent);
  animation: mig-run 2.6s var(--ease-in-out, ease-in-out) infinite;
}
.mig__pulse--2 { animation-delay: 1.3s; }
@keyframes mig-run { 0% { left: -4px; opacity: 0; } 20%, 80% { opacity: 1; } 100% { left: calc(100% - 4px); opacity: 0; } }
.mig__hub {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, var(--cyan-600), var(--violet)); color: #fff;
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--cyan) 80%, transparent);
}

.mig__safe { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mig__safe li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 4px;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--cyan) 26%, transparent);
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}
.mig__si {
  grid-row: 1 / 3; display: grid; place-items: center; align-self: start;
  width: 32px; height: 32px; border-radius: 10px;
  background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan);
}
.mig__sh { margin: 0; font-size: var(--f-xs); font-weight: 700; color: var(--t-on-dark); line-height: 1.35; }
.mig__sb { margin: 0; font-size: var(--f-label); color: var(--t-on-dark-2); line-height: 1.55; }

@media (max-width: 860px) {
  .mig__flow { grid-template-columns: 1fr; }
  /* A horizontal crossing between two stacked columns points nowhere. */
  .mig__pipe { width: 100%; height: 52px; }
  .mig__wire {
    left: 50%; right: auto; top: 0; bottom: 0; height: auto; width: 2px;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cyan) 60%, transparent), transparent);
  }
  .mig__pulse { animation: mig-run-v 2.6s var(--ease-in-out, ease-in-out) infinite; left: calc(50% - 3px); }
  @keyframes mig-run-v { 0% { top: -4px; opacity: 0; } 20%, 80% { opacity: 1; } 100% { top: calc(100% - 4px); opacity: 0; } }
  .mig__hub { rotate: 90deg; }
}
@media (prefers-reduced-motion: reduce) { .mig__pulse { animation: none; opacity: 0; } }

/* ── 5 · Day 31 ────────────────────────────────────────────────────────── */
.d31__wrap {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(26px, 4vw, 60px); align-items: center;
  max-width: 980px; margin-inline: auto;
}

/* A calendar page with nothing written on it. */
.d31__cal {
  position: relative; width: clamp(180px, 22vw, 232px); padding: 26px 20px 24px;
  border-radius: var(--r-lg) var(--r-lg) var(--r-md) var(--r-md);
  background: var(--s-card); border: 1px solid var(--border);
  box-shadow: 0 26px 60px -34px rgba(20, 19, 31, .45);
  text-align: center;
}
/* The curled corner. */
.d31__peel {
  position: absolute; right: 0; bottom: 0; width: 34px; height: 34px;
  border-radius: 0 0 var(--r-md) 0;
  background: linear-gradient(135deg, transparent 50%, var(--s-frost) 50%);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.d31__top { display: flex; justify-content: center; gap: 22px; margin-bottom: 16px; }
.d31__ring {
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--s-frost);
}
.d31__m {
  margin: 0; font-size: var(--f-label); font-weight: 750; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-text);
}
.d31__d {
  margin: 2px 0 0; font-size: clamp(3.4rem, 7vw, 4.6rem); font-weight: 800;
  letter-spacing: -.05em; line-height: 1; color: var(--t-primary);
  font-variant-numeric: tabular-nums;
}
.d31__note {
  margin: 10px 0 0; padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: var(--f-label); color: var(--t-muted); font-style: italic;
}

.d31__h { margin: 12px 0 0; }
.d31__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 52ch; }

.d31__list { list-style: none; margin: clamp(20px, 2.4vw, 26px) 0 0; padding: 0; display: grid; gap: 12px; }
.d31__list li {
  display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 10px;
  font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.55;
}
.d31__x {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  align-self: start; flex: none;
  background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet);
}
.d31__list strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); white-space: nowrap; }

.d31__after {
  display: flex; align-items: center; gap: 9px;
  margin: clamp(20px, 2.4vw, 26px) 0 0; padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: var(--f-xs); color: var(--t-secondary);
}
.d31__after svg { color: var(--accent-text); flex: none; }

@media (max-width: 780px) {
  .d31__wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .d31__lede { margin-inline: auto; }
  .d31__list li { text-align: left; }
  .d31__list { max-width: 460px; margin-inline: auto; }
  .d31__after { justify-content: center; text-align: left; }
}
@media (max-width: 480px) {
  .d31__list li { grid-template-columns: auto 1fr; }
  .d31__list strong { grid-column: 2; white-space: normal; }
  .d31__list li > span:last-child { grid-column: 2; }
}

/* ==========================================================================
   ADMISSIONS MODULE — /features/admission-management-software/

   Third module page, third shape. Fees is a lifecycle and got a spine.
   Attendance is one event read by six things and got a cascade. Admissions is
   many enquiries sitting in a few columns at once, so it gets a board — and
   the board recurs, in the hero and again as the pipeline.

   Ember stays out. Nothing on this page is urgent; a lost enquiry is a leak,
   not an alarm, and ember belongs to offers and countdowns.

   Only theme-flipping tokens on light surfaces: --n-300/--n-400/--n-600 keep
   their light values in dark mode.
   ========================================================================== */

/* ── 1 · Hero board ────────────────────────────────────────────────────── */
.adm__grid { align-items: center; }
.adm__art { position: relative; }

.adm__board {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: clamp(14px, 1.6vw, 18px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(14px);
  box-shadow: 0 26px 64px -32px rgba(0, 0, 0, .75);
}
.adm__col {
  display: grid; align-content: start; gap: 7px;
  padding: 10px 8px; border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
}
/* The last column is the one the whole board is for. */
.adm__col.is-done {
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
  border-color: color-mix(in srgb, var(--cyan) 38%, transparent);
}
.adm__ct { display: grid; gap: 5px; margin-bottom: 3px; }
.adm__cn {
  font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--t-on-dark-2); line-height: 1.3;
}
.adm__cc {
  justify-self: start; padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .1); color: var(--t-on-dark);
}
.adm__col.is-done .adm__cc { background: color-mix(in srgb, var(--cyan) 30%, transparent); color: var(--cyan); }

.adm__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.adm__card {
  display: grid; grid-template-columns: auto 1fr; column-gap: 7px; row-gap: 5px;
  padding: 8px 7px; border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .09);
  animation: adm-in .5s var(--ease-out) both;
  animation-delay: calc(.2s + (var(--i) * .12s) + (var(--j) * .07s));
}
@keyframes adm-in { from { opacity: 0; transform: translateY(6px); } }
.adm__ava { width: 15px; height: 15px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.adm__lines { display: grid; gap: 3px; align-content: center; }
.adm__lines i { display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.adm__lines i:first-child { width: 100%; }
.adm__lines i:last-child { width: 62%; }
.adm__src {
  grid-column: 1 / 3; justify-self: start;
  padding: 2px 6px; border-radius: 4px;
  font-size: 8px; font-weight: 700; letter-spacing: .03em;
  background: color-mix(in srgb, var(--violet) 34%, transparent); color: #D6CEFF;
}
.adm__col.is-done .adm__src { background: color-mix(in srgb, var(--cyan) 28%, transparent); color: var(--cyan); }

@media (max-width: 900px) { .adm__art { margin-top: 30px; } }
@media (max-width: 460px) {
  .adm__board { grid-template-columns: repeat(2, 1fr); }
  .adm__cn { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { .adm__card { animation: none; } }

/* ── 2 · Four ways in, four places they stop ───────────────────────────── */
.leak__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.2vw, 42px); }
.leak__head .eyebrow { justify-content: center; }
.leak__head .h2 { margin: 12px 0 0; }
.leak__lede { margin: 14px auto 0; max-width: 600px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.leak__stage {
  --leak-fall: 74px;
  position: relative; max-width: 940px; margin-inline: auto;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-raised);
}

/* Four spouts, evenly across the top. */
.leak__spouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.2vw, 16px); }
.leak__spout { display: grid; justify-items: center; gap: 7px; }
.leak__si {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.leak__sn { font-size: var(--f-label); font-weight: 700; color: var(--t-primary); }

/* The fall. Two chits per spout, offset, so the four streams are never in step
   with one another — the section is about things arriving separately. */
.leak__fall { position: relative; width: 2px; height: var(--leak-fall); background: linear-gradient(180deg, var(--border), transparent); }
.leak__drop {
  position: absolute; left: 50%; translate: -50% 0;
  width: 13px; height: 9px; border-radius: 2px;
  background: var(--s-pure);
  border: 1px solid color-mix(in srgb, var(--violet) 45%, transparent);
  box-shadow: 0 2px 5px -2px rgba(20, 19, 31, .3);
  animation: leak-fall 3.4s var(--ease-in-out, ease-in-out) infinite;
  animation-delay: calc(var(--i) * .42s);
}
.leak__drop--b { animation-delay: calc(1.7s + (var(--i) * .42s)); }
@keyframes leak-fall {
  0%        { top: -10px; opacity: 0; rotate: -8deg; }
  12%       { opacity: 1; }
  70%, 100% { top: var(--leak-fall); opacity: 0; rotate: 6deg; }
}

/* Four separate trays. They do not merge, which is the argument. */
.leak__trays {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.2vw, 16px);
}
.leak__tray {
  display: grid; justify-items: center; gap: 9px;
  padding: 12px 10px 13px; border-radius: var(--r-md);
  border: 1px dashed var(--border); background: var(--s-pure);
}
.leak__heap { display: grid; gap: 2px; width: 100%; max-width: 62px; }
.leak__heap i {
  display: block; height: 6px; border-radius: 2px;
  background: color-mix(in srgb, var(--violet) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--violet) 30%, transparent);
}
.leak__heap i:nth-child(2) { width: 88%; }
.leak__heap i:nth-child(3) { width: 72%; }
.leak__tn { font-size: 10px; color: var(--t-muted); text-align: center; line-height: 1.4; }

/* The tray that should have caught all four, and did not. */
.leak__missing {
  display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: start;
  margin-top: clamp(18px, 2.2vw, 26px); padding: clamp(16px, 2vw, 22px);
  border-radius: var(--r-md);
  border: 2px dashed color-mix(in srgb, var(--violet) 34%, transparent);
  background: color-mix(in srgb, var(--violet) 5%, transparent);
}
.leak__mi {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px;
  background: color-mix(in srgb, var(--violet) 13%, transparent); color: var(--violet);
}
.leak__mt { display: grid; gap: 5px; min-width: 0; }
.leak__mh { margin: 0; font-size: var(--f-sm); font-weight: 700; color: var(--t-primary); }
.leak__mb { margin: 0; font-size: var(--f-xs); line-height: 1.62; color: var(--t-secondary); }

@media (max-width: 700px) {
  .leak__stage { --leak-fall: 52px; }
  .leak__spouts, .leak__trays { grid-template-columns: repeat(2, 1fr); }
  .leak__trays { row-gap: 12px; margin-top: 6px; }
}
@media (max-width: 400px) { .leak__sn { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .leak__drop { animation: none; opacity: 0; } }

/* ── 3 · The board you move a card through ─────────────────────────────── */
.pipe__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 38px); }
.pipe__head .eyebrow { justify-content: center; }
.pipe__head .h2 { margin: 12px 0 0; }
.pipe__lede { margin: 14px auto 0; max-width: 580px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.pipe__board { max-width: 1000px; margin-inline: auto; }

.pipe__cols {
  --pipe-gap: clamp(8px, 1vw, 14px);
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pipe-gap);
}

.pipe__col {
  position: relative; display: grid; gap: 10px; cursor: pointer;
  padding: 12px 10px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
  transition: border-color var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out);
}
.pipe__col:hover { border-color: color-mix(in srgb, var(--cyan-600) 45%, transparent); }
.pipe__col input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pipe__col:has(input:checked) {
  border-color: var(--accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cyan-600) 7%, transparent), transparent 70%), var(--s-card);
}
.pipe__col:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }

.pipe__ch { display: grid; justify-items: center; gap: 6px; text-align: center; }
.pipe__ci {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  background: var(--s-frost); color: var(--t-muted);
  transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}
.pipe__col:has(input:checked) .pipe__ci {
  background: linear-gradient(135deg, var(--violet), var(--cyan-600)); color: #fff;
}
.pipe__cn { font-size: var(--f-label); font-weight: 650; color: var(--t-secondary); line-height: 1.3; }
.pipe__col:has(input:checked) .pipe__cn { color: var(--t-primary); }

/* The empty bed the card sits in, so a column keeps its height either way. */
.pipe__slot { display: block; height: 58px; border-radius: 10px; border: 1px dashed var(--border-soft); }

/* The enquiry. One card, moved across by initPipe rather than four drawn and
   hidden — a card that travels is the whole point of a pipeline. */
.pipe__card {
  position: absolute; z-index: 1; bottom: 12px;
  left: 0; width: calc((100% - (var(--pipe-gap) * 3)) / 4);
  translate: var(--pipe-x, 0) 0;
  display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 7px;
  padding: 9px 9px 8px; border-radius: 10px;
  background: var(--s-pure);
  border: 1px solid color-mix(in srgb, var(--cyan-600) 42%, transparent);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--cyan-600) 65%, transparent);
  transition: translate .55s var(--ease-spring, cubic-bezier(.34, 1.4, .5, 1));
  /* Sits inside the column padding, matching .pipe__slot. */
  margin-inline: 10px;
  box-sizing: border-box;
  max-width: calc(((100% - (var(--pipe-gap) * 3)) / 4) - 20px);
}
.pipe__ava { width: 17px; height: 17px; border-radius: 50%; background: var(--n-200); }
.pipe__lines { display: grid; gap: 3px; align-content: center; }
.pipe__lines i { display: block; height: 3px; border-radius: 2px; background: var(--n-200); }
.pipe__lines i:first-child { width: 100%; }
.pipe__lines i:last-child { width: 60%; }
.pipe__tag {
  grid-column: 1 / 3; justify-self: start;
  padding: 2px 7px; border-radius: 5px;
  font-size: 9px; font-weight: 700; letter-spacing: .02em;
  background: color-mix(in srgb, var(--cyan-600) 14%, transparent); color: var(--accent-text);
}

.pipe__panels { margin-top: clamp(16px, 2vw, 22px); }
.pipe__panel {
  padding: clamp(18px, 2.2vw, 26px); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card);
  animation: pipe-in var(--d-base) var(--ease-out) both;
}
.pipe__panel[hidden] { display: none; }
@keyframes pipe-in { from { opacity: 0; translate: 0 8px; } }
.pipe__no {
  margin: 0; font-size: var(--f-label); font-weight: 750; letter-spacing: .1em;
  color: var(--accent-text); font-variant-numeric: tabular-nums;
}
.pipe__h { margin: 7px 0 0; font-size: var(--f-h4, 1.2rem); font-weight: 700; color: var(--t-primary); }
.pipe__b { margin: 10px 0 0; font-size: var(--f-xs); line-height: 1.65; color: var(--t-secondary); max-width: 64ch; }

@media (max-width: 700px) {
  .pipe__cols { grid-template-columns: repeat(2, 1fr); }
  /* Two columns means the card would have to jump rows; simpler and clearer
     to let each column hold its own state and drop the travelling card. */
  .pipe__card { display: none; }
  .pipe__slot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pipe__card { transition: none; }
  .pipe__panel { animation: none; }
}

/* ── 4 · Annotated screenshot ──────────────────────────────────────────── */
.shot__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 38px); }
.shot__head .eyebrow { justify-content: center; }
.shot__head .h2 { margin: 12px 0 0; }
.shot__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.shot__rig {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(22px, 3vw, 44px); align-items: center;
  max-width: 1140px; margin-inline: auto;
}

.shot__frame { position: relative; }
.shot__slot { border-radius: var(--r-lg); box-shadow: 0 30px 70px -36px rgba(20, 19, 31, .5); }
.shot__slot:has(img, picture, video) { overflow: hidden; }

/* The pins, over the frame. Percentages, so they hold wherever the real
   screenshot's own resolution lands. */
.shot__pin {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  z-index: 2; width: 28px; height: 28px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--cyan-600)); color: #fff;
  font: inherit; font-size: 12px; font-weight: 800;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--cyan-600) 80%, transparent);
  transition: scale var(--d-base) var(--ease-out);
}
.shot__pin:hover, .shot__pin:focus-visible, .shot__pin.is-on { scale: 1.22; outline: 0; }
.shot__pn { position: relative; z-index: 1; }
.shot__ping {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--cyan) 70%, transparent);
  animation: shot-ping 2.4s var(--ease-out) infinite;
  animation-delay: calc(var(--i) * .5s);
}
@keyframes shot-ping {
  0%        { opacity: .9; scale: 1; }
  70%, 100% { opacity: 0; scale: 2.1; }
}

.shot__pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.shot__pt {
  display: grid; grid-template-columns: auto auto 1fr; gap: 11px; align-items: start;
  padding: 15px 16px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
  transition: border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.shot__pt.is-on { border-color: var(--accent); transform: translateX(4px); }
.shot__num {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: 11px; font-weight: 800;
  background: linear-gradient(135deg, var(--violet), var(--cyan-600)); color: #fff;
}
.shot__i { display: grid; place-items: center; color: var(--accent-text); margin-top: 2px; }
.shot__t { display: grid; gap: 3px; min-width: 0; }
.shot__t strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.shot__t span { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.55; }

@media (max-width: 940px) {
  .shot__rig { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .shot__ping { animation: none; opacity: 0; } }

/* ── 5 · The conversion ────────────────────────────────────────────────── */
.conv { position: relative; overflow: clip; }
.conv__inner { position: relative; z-index: 1; }
.conv__orb { top: -20%; right: -10%; width: 46vw; opacity: .5; }
.conv__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.4vw, 44px); }
.conv__head .eyebrow { justify-content: center; }
.conv__eyebrow { color: var(--cyan); }
.conv__h { color: var(--t-on-dark); margin: 12px 0 0; }
.conv__lede { margin: 14px auto 0; max-width: 620px; font-size: var(--f-sm); line-height: 1.66; color: var(--t-on-dark-2); }

.conv__stage {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3.4vw, 50px); align-items: center;
  max-width: 1000px; margin-inline: auto;
}

.conv__card {
  position: relative; padding: clamp(20px, 2.4vw, 26px);
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(12px);
}
.conv__ct {
  margin: 0 0 14px; font-size: var(--f-label); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cyan);
}
.conv__fields { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.conv__fields li {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center;
  padding: 9px 11px; border-radius: 9px;
  background: rgba(255, 255, 255, .05);
  font-size: var(--f-xs); color: var(--t-on-dark);
}
.conv__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--cyan) 55%, transparent);
  animation: conv-carry 2.6s var(--ease-out) infinite;
  animation-delay: calc(var(--i) * .18s);
}
@keyframes conv-carry {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cyan) 50%, transparent); }
  60%      { box-shadow: 0 0 0 6px transparent; }
}
.conv__cf {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, .18);
  font-size: var(--f-xs); font-weight: 700; color: var(--cyan);
}

.conv__avoid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.conv__avoid li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 13px; row-gap: 4px;
  padding: 15px 17px; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04);
}
.conv__x {
  grid-row: 1 / 3; display: grid; place-items: center; align-self: start;
  width: 24px; height: 24px; border-radius: 8px;
  background: rgba(255, 255, 255, .09); color: var(--t-on-dark-2);
}
.conv__avoid s {
  font-size: var(--f-xs); font-weight: 700; color: var(--t-on-dark-2);
  text-decoration-color: color-mix(in srgb, var(--cyan) 70%, transparent);
  text-decoration-thickness: 2px;
}
.conv__avoid > li > span:last-child { font-size: var(--f-label); color: var(--t-on-dark-2); line-height: 1.55; }

@media (max-width: 820px) { .conv__stage { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .conv__dot { animation: none; } }

/* ── 6 · The record, with its tabs ─────────────────────────────────────── */
.rec__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.rec__head .eyebrow { justify-content: center; }
.rec__head .h2 { margin: 12px 0 0; }
.rec__lede { margin: 14px auto 0; max-width: 640px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.rec__wrap {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 3.4vw, 50px); align-items: center;
  max-width: 1140px; margin-inline: auto;
}

.rec__tabs {
  position: relative; display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-raised);
}
/* Positioned by initTabs from the active tab's box.
   left:0 matters: without it the glider's static position already sits after
   the strip's padding, and translateX(offsetLeft) then counts that padding a
   second time — it rendered 6px to the right of every tab. The other three
   gliders all set it; this one did not.
   Height comes from JS, because on a wrapping strip calc(100%) is every row. */
.rec__glider {
  position: absolute; z-index: 0; top: 6px; left: 0; height: calc(100% - 12px);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--violet), var(--cyan-600));
  transition: transform var(--d-base) var(--ease-out), width var(--d-base) var(--ease-out);
}
/* Hidden until JS has measured it, so no-JS never shows a pill parked at 0,0. */
.rec__glider:not([style*="width"]) { opacity: 0; }
.rec__tab {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; font: inherit; font-size: var(--f-label); font-weight: 650;
  color: var(--t-secondary);
  transition: color var(--d-base) var(--ease-out);
}
.rec__tab[aria-selected="true"] { color: #fff; }
.rec__tab:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.rec__tn {
  display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--cyan-600) 14%, transparent); color: var(--accent-text);
}
.rec__tab[aria-selected="true"] .rec__tn { background: rgba(255, 255, 255, .24); color: #fff; }

.rec__panel {
  margin-top: 16px; padding: clamp(16px, 2vw, 22px);
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--s-card);
  animation: rec-in var(--d-base) var(--ease-out) both;
}
.rec__panel[hidden] { display: none; }
@keyframes rec-in { from { opacity: 0; translate: 0 6px; } }
.rec__ph { margin: 0; font-size: var(--f-sm); font-weight: 700; color: var(--t-primary); }
.rec__pb { margin: 8px 0 0; font-size: var(--f-xs); line-height: 1.62; color: var(--t-secondary); }

.rec__art { position: relative; }
.rec__slot {
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -36px rgba(20, 19, 31, .5);
}
.rec__slot:has(img, picture, video) { overflow: hidden; }

@media (max-width: 920px) { .rec__wrap { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .rec__glider { transition: none; }
  .rec__panel { animation: none; }
}

/* ── 7 · The hub ───────────────────────────────────────────────────────── */
.hub__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.2vw, 44px); }
.hub__head .eyebrow { justify-content: center; }
.hub__head .h2 { margin: 12px 0 0; }
.hub__lede { margin: 14px auto 0; max-width: 580px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.hub__rig {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 3.4vw, 52px); align-items: center;
  max-width: 1040px; margin-inline: auto;
}

/* The record everything reads from. */
.hub__core {
  position: relative; display: grid; justify-items: center; text-align: center; gap: 4px;
  padding: clamp(26px, 3vw, 36px) clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--midnight), var(--indigo));
  box-shadow: 0 26px 60px -30px color-mix(in srgb, var(--indigo) 85%, transparent);
}
.hub__ring {
  position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--cyan) 50%, transparent);
  animation: hub-ring 3s var(--ease-out) infinite;
}
.hub__ring--2 { animation-delay: 1.5s; }
@keyframes hub-ring { 0% { opacity: .8; scale: 1; } 70%, 100% { opacity: 0; scale: 1.09; } }
.hub__coreI {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px;
  border-radius: 16px; background: var(--cyan); color: var(--ink);
  box-shadow: 0 0 30px -4px color-mix(in srgb, var(--cyan) 70%, transparent);
}
.hub__coreT { margin: 0; font-size: var(--f-sm); font-weight: 750; color: var(--t-on-dark); }
.hub__coreD { margin: 0; font-size: var(--f-label); color: var(--t-on-dark-2); }

/* The five that read from it. A spoke is drawn from each back to the core. */
.hub__spokes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hub__spoke { position: relative; display: flex; }
/* The wire back toward the core, on the left edge of each row. */
.hub__wire {
  position: absolute; left: calc(clamp(14px, 2vw, 26px) * -1); top: 50%;
  width: clamp(14px, 2vw, 26px); height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cyan-600) 60%, transparent), var(--border));
}
.hub__l {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 13px;
  width: 100%; padding: 15px 17px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card); color: var(--t-primary);
  transition: border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.hub__l:hover { border-color: var(--accent); transform: translateX(4px); box-shadow: var(--sh-lift); }
.hub__i {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.hub__b { display: grid; gap: 3px; min-width: 0; }
.hub__b strong { font-size: var(--f-xs); font-weight: 700; }
.hub__b span { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.55; }
.hub__go { color: var(--t-muted); opacity: 0; transition: opacity var(--d-fast) var(--ease-out); margin-top: 3px; }
.hub__l:hover .hub__go { opacity: 1; }

@media (max-width: 880px) {
  .hub__rig { grid-template-columns: 1fr; }
  /* Stacked, a wire pointing sideways points at nothing. */
  .hub__wire { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hub__ring { animation: none; opacity: .45; } }

/* ── 8 · The sorting tray ──────────────────────────────────────────────── */
.src { position: relative; overflow: clip; }
.src__inner { position: relative; z-index: 1; }
.src__orb { bottom: -28%; right: -12%; width: 46vw; opacity: .45; }

.src__wrap {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center;
  max-width: 1060px; margin-inline: auto;
}
.src__eyebrow { color: var(--cyan); }
.src__h { color: var(--t-on-dark); margin: 12px 0 0; }
.src__lede { margin: 16px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); max-width: 52ch; }
.src__note {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 13px 15px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04);
  font-size: var(--f-label); line-height: 1.6; color: var(--t-on-dark-2);
}
.src__note svg { color: var(--cyan); margin-top: 1px; }

/* The tray. A chit drops in, then the stacks stand there sorted. */
.src__tray {
  position: relative; padding: clamp(18px, 2.2vw, 26px) clamp(14px, 1.8vw, 20px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(12px);
}
.src__chit {
  position: absolute; left: 50%; top: 0; translate: -50% 0;
  width: 22px; height: 15px; border-radius: 3px;
  background: var(--cyan); box-shadow: 0 0 16px -2px color-mix(in srgb, var(--cyan) 70%, transparent);
  animation: src-drop 3.2s var(--ease-in-out, ease-in-out) infinite;
}
@keyframes src-drop {
  0%        { top: -18px; opacity: 0; rotate: -10deg; }
  15%       { opacity: 1; }
  55%, 100% { top: 42%; opacity: 0; rotate: 8deg; }
}

.src__slots {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.2vw, 14px);
}
.src__slot {
  display: grid; justify-items: center; align-content: end; gap: 9px;
  padding: 11px 8px 10px; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04);
}
/* Three chits per slot, standing. Heights are equal on purpose — this is not
   a chart and must not read as one. */
.src__stack { display: grid; gap: 3px; width: 100%; max-width: 58px; }
.src__stack i {
  display: block; height: 7px; border-radius: 2px;
  background: color-mix(in srgb, var(--cyan) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
  animation: src-land .5s var(--ease-out) both;
  animation-delay: calc((var(--i) * .1s) + (var(--d) * .07s));
}
@keyframes src-land { from { opacity: 0; transform: translateY(-8px) rotate(-6deg); } }
.src__lbl {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 650; color: var(--t-on-dark-2); text-align: center; line-height: 1.3;
}
.src__lbl svg { flex: none; color: var(--cyan); }

@media (max-width: 880px) { .src__wrap { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .src__slots { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .src__chit { animation: none; opacity: 0; }
  .src__stack i { animation: none; }
}

/* ==========================================================================
   PARENT APP — /apps/parent-app/

   Two shapes here are new to this site and both came out of looking at what
   current product pages actually do: a phone that stays pinned while the copy
   scrolls past it swapping screen per point, and a phone the reader taps
   through with a real bottom nav. Neither is a card grid, which is what the
   last few pages kept reaching for.

   Only theme-flipping tokens on light surfaces.
   ========================================================================== */

/* ── Shared phone shell ────────────────────────────────────────────────── */
.pah__phone, .pin__phone, .tap__phone, .morn__phone {
  position: relative;
  border-radius: 30px;
  background: var(--ink);
  padding: 9px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset,
              0 30px 70px -30px rgba(0, 0, 0, .7);
}
.pah__notch, .pin__notch, .tap__notch, .morn__notch {
  position: absolute; z-index: 3; left: 50%; top: 9px; translate: -50% 0;
  width: 34%; height: 18px; border-radius: 0 0 11px 11px;
  background: var(--ink);
}

/* ── 1 · Hero ──────────────────────────────────────────────────────────── */
.pah { position: relative; overflow: clip; }
.pah__inner { position: relative; z-index: 1; }
.pah__orb { top: -24%; right: -10%; width: 50vw; opacity: .5; }
.pah__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
  margin-top: clamp(16px, 2vw, 26px);
}
.pah__eyebrow { color: var(--cyan); }
.pah__h { color: var(--t-on-dark); margin: 14px 0 0; max-width: 15ch; }
.pah__lede { margin: 18px 0 0; max-width: 56ch; color: var(--t-on-dark-2); font-size: var(--f-sm); line-height: 1.7; }
.pah__chips { list-style: none; margin: clamp(20px, 2.4vw, 26px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.pah__chips li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05);
  font-size: var(--f-label); font-weight: 600; color: var(--t-on-dark);
}
.pah__chips svg { color: var(--cyan); flex: none; }
.pah__stores { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(22px, 2.6vw, 30px) 0 0; }

.pah__art { display: grid; justify-items: center; }
.pah__phone { width: min(260px, 74%); }
.pah__slot { border-radius: 22px; overflow: hidden; }

@media (max-width: 900px) {
  .pah__grid { grid-template-columns: 1fr; }
  .pah__h { max-width: none; }
  .pah__art { order: -1; }
  .pah__phone { width: min(220px, 60%); }
}

/* ── 2 · The pinned phone ──────────────────────────────────────────────── */
.pin__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.4vw, 46px); }
.pin__head .eyebrow { justify-content: center; }
.pin__head .h2 { margin: 12px 0 0; }
.pin__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.pin__rig {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(26px, 4vw, 64px); align-items: start;
  max-width: 1060px; margin-inline: auto;
}

/* The device sticks; the copy column is what actually scrolls. */
.pin__stage { position: sticky; top: clamp(80px, 12vh, 120px); display: grid; justify-items: center; gap: 16px; }
.pin__phone { width: min(250px, 78%); }
.pin__screens { position: relative; }
/* All five stack; one is shown. Aspect ratio holds the box before any image
   lands, so nothing jumps when a real screenshot replaces a slot. */
.pin__screen {
  position: absolute; inset: 0; opacity: 0; scale: .97;
  transition: opacity var(--d-base) var(--ease-out), scale var(--d-base) var(--ease-out);
  pointer-events: none;
}
.pin__screen:first-child { position: relative; }
.pin__screen.is-on { opacity: 1; scale: 1; pointer-events: auto; }
.pin__slot { border-radius: 22px; overflow: hidden; }

.pin__dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 7px; }
.pin__dots li {
  width: 7px; height: 7px; border-radius: 50%; background: var(--border);
  transition: background var(--d-base) var(--ease-out), width var(--d-base) var(--ease-out);
}
.pin__dots li.is-on { width: 20px; border-radius: 4px; background: var(--accent); }

.pin__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 4vh, 44px); }
.pin__step {
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card);
  transition: border-color var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out);
}
/* The one whose screen is showing is the one lit. */
.pin__step.is-on { border-color: var(--accent); box-shadow: var(--sh-lift); }
.pin__kick {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  font-size: var(--f-label); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--t-muted);
}
.pin__step.is-on .pin__kick { color: var(--accent-text); }
.pin__n {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.pin__step.is-on .pin__n { background: linear-gradient(135deg, var(--violet), var(--cyan-600)); color: #fff; }
.pin__h { margin: 11px 0 0; font-size: var(--f-h4, 1.2rem); font-weight: 700; line-height: 1.3; color: var(--t-primary); }
.pin__b { margin: 10px 0 0; font-size: var(--f-xs); line-height: 1.65; color: var(--t-secondary); }

@media (max-width: 900px) {
  /* Stacked, but still sticky. Dropping the stickiness here meant screens two
     to five were never seen on a phone — five captions and one screenshot. The
     device just gets smaller and holds the top of the viewport while the steps
     scroll under it, which is what it does on a desktop too. */
  .pin__rig { grid-template-columns: 1fr; }
  .pin__stage {
    top: 68px; z-index: 2;
    grid-auto-flow: column; align-items: center; justify-items: start;
    gap: 14px; padding: 10px 0;
    background: var(--s-pure);
  }
  .pin__phone { width: 118px; padding: 6px; border-radius: 20px; }
  .pin__notch { height: 12px; top: 6px; }
  /* An empty slot renders its own spec text, which at 118px wide is taller
     than the screen it stands in for. Capped so the sticky band stays a band;
     a real 640x1280 screenshot lands at 236px and never hits this. */
  .pin__slot { border-radius: 15px; max-height: 236px; overflow: hidden; }
  .pin__screens { max-height: 236px; }
  .pin__dots { flex-direction: column; }
  .pin__dots li.is-on { width: 7px; height: 20px; border-radius: 4px; }
}
@media (prefers-reduced-motion: reduce) { .pin__screen { transition: none; } }

/* ── 3 · Tap through it ────────────────────────────────────────────────── */
.tap__wrap {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(26px, 4vw, 60px); align-items: center;
  max-width: 1040px; margin-inline: auto;
}
.tap__h { margin: 12px 0 0; }
.tap__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 50ch; }
.tap__note {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: 18px 0 0; padding: 12px 14px;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--s-raised);
  font-size: var(--f-label); color: var(--t-muted); line-height: 1.6;
}
.tap__note svg { color: var(--accent-text); margin-top: 1px; }
.tap__stores { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(20px, 2.4vw, 26px) 0 0; }

.tap__device { display: grid; justify-items: center; }
.tap__phone { width: min(300px, 86%); min-height: 500px; display: grid; grid-template-rows: 1fr auto; }

.tap__panel {
  border-radius: 22px 22px 0 0; background: var(--s-pure);
  padding: 46px clamp(14px, 2vw, 18px) 16px;
  animation: tap-in var(--d-base) var(--ease-out) both;
  overflow: hidden;
}
.tap__panel[hidden] { display: none; }
@keyframes tap-in { from { opacity: 0; translate: 0 6px; } }
.tap__ph {
  margin: 0 0 14px; font-size: var(--f-xs); font-weight: 750; color: var(--t-primary);
}
.tap__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tap__rows li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 13px; border-radius: 11px;
  background: var(--s-frost); border: 1px solid var(--border-soft);
  font-size: var(--f-label); color: var(--t-secondary);
  animation: tap-row .4s var(--ease-out) both;
  animation-delay: calc(var(--i) * .06s);
}
@keyframes tap-row { from { opacity: 0; translate: 0 6px; } }
.tap__rows b { font-weight: 700; color: var(--accent-text); white-space: nowrap; }

/* The bottom bar. 44px targets is the comfortable minimum for a thumb. */
.tap__nav {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  border-radius: 0 0 22px 22px; background: var(--s-pure);
  border-top: 1px solid var(--border);
  padding: 6px;
}
.tap__glider {
  position: absolute; z-index: 0; top: 6px; left: 0; height: calc(100% - 12px);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent);
  transition: transform var(--d-base) var(--ease-out), width var(--d-base) var(--ease-out);
}
.tap__glider:not([style*="width"]) { opacity: 0; }
.tap__tab {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 3px;
  min-height: 44px; padding: 7px 4px; border: 0; border-radius: 12px; cursor: pointer;
  background: transparent; font: inherit;
  color: var(--t-muted);
  transition: color var(--d-base) var(--ease-out);
}
.tap__tab[aria-selected="true"] { color: var(--accent-text); }
.tap__tab:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.tap__ti { display: grid; place-items: center; }
.tap__tn { font-size: 10px; font-weight: 650; }

@media (max-width: 900px) { .tap__wrap { grid-template-columns: 1fr; } .tap__lede { max-width: none; } }
@media (prefers-reduced-motion: reduce) {
  .tap__panel, .tap__rows li { animation: none; }
  .tap__glider { transition: none; }
}

/* ── 4 · The morning ───────────────────────────────────────────────────── */
.morn { position: relative; overflow: clip; }
.morn__inner { position: relative; z-index: 1; }
.morn__orb { top: -22%; left: -10%; width: 46vw; opacity: .45; }
.morn__wrap {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
  max-width: 1040px; margin-inline: auto;
}
.morn__eyebrow { color: var(--cyan); }
.morn__h { color: var(--t-on-dark); margin: 12px 0 0; }
.morn__lede { margin: 16px 0 0; font-size: var(--f-sm); line-height: 1.7; color: var(--t-on-dark-2); max-width: 54ch; }
.morn__note {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 13px 15px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04);
  font-size: var(--f-label); line-height: 1.6; color: var(--t-on-dark-2);
}
.morn__note svg { color: var(--cyan); margin-top: 1px; }

.morn__phone { width: min(290px, 84%); justify-self: center; padding-top: 34px; }
.morn__clock {
  margin: 14px 0 0; text-align: center; font-size: 2.6rem; font-weight: 300;
  letter-spacing: -.02em; color: #fff; line-height: 1;
}
.morn__date { margin: 4px 0 18px; text-align: center; font-size: var(--f-label); color: rgba(255, 255, 255, .6); }

.morn__stack { list-style: none; margin: 0; padding: 0 8px 16px; display: grid; gap: 8px; }
.morn__stack li {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  padding: 10px 11px; border-radius: 13px;
  background: rgba(255, 255, 255, .13);
  backdrop-filter: blur(8px);
  animation: morn-land .55s var(--ease-out) both;
  animation-delay: calc(.3s + (var(--i) * .5s));
}
@keyframes morn-land { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
.morn__i {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  background: var(--cyan); color: var(--ink); flex: none;
}
.morn__t { display: grid; gap: 1px; min-width: 0; }
.morn__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.morn__top b { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.morn__top i { font-style: normal; font-size: 9px; color: rgba(255, 255, 255, .5); }
.morn__t strong { font-size: var(--f-label); font-weight: 700; color: #fff; }
.morn__t > span { font-size: 11px; color: rgba(255, 255, 255, .72); line-height: 1.45; }

@media (max-width: 900px) { .morn__wrap { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .morn__stack li { animation: none; } }

/* ── 5 · The bus route ─────────────────────────────────────────────────── */
.bus__wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center;
  max-width: 1020px; margin-inline: auto;
}
.bus__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 50ch; }
.bus__plan {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: 20px 0 0; padding: 13px 15px;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--s-raised);
  font-size: var(--f-label); color: var(--t-secondary); line-height: 1.6;
}
.bus__plan svg { color: var(--accent-text); margin-top: 1px; }

.bus__route {
  position: relative; padding: clamp(20px, 2.4vw, 28px) clamp(18px, 2.2vw, 26px);
  border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card);
}
.bus__line {
  position: absolute; left: calc(clamp(18px, 2.2vw, 26px) + 9px); top: 40px; bottom: 40px;
  width: 2px; background: var(--border);
}
.bus__stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.bus__stop {
  position: relative; display: grid; grid-template-columns: 20px 1fr auto;
  align-items: center; gap: 13px;
}
.bus__dot {
  width: 11px; height: 11px; border-radius: 50%; justify-self: center;
  background: var(--s-card); border: 2px solid var(--border); z-index: 1;
}
.bus__stop.is-done .bus__dot { background: var(--border); border-color: var(--border); }
.bus__stop.is-next .bus__dot {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan-600) 18%, transparent);
}
.bus__sn { font-size: var(--f-xs); color: var(--t-secondary); }
.bus__stop.is-next .bus__sn { font-weight: 700; color: var(--t-primary); }
.bus__se { font-size: var(--f-label); color: var(--t-muted); font-variant-numeric: tabular-nums; }
.bus__stop.is-next .bus__se { color: var(--accent-text); font-weight: 700; }

/* The bus, sitting between the last passed stop and the next one. */
.bus__van {
  position: absolute; z-index: 2; left: calc(clamp(18px, 2.2vw, 26px) + 10px); translate: -50% 0;
  top: 46%;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  background: linear-gradient(135deg, var(--violet), var(--cyan-600)); color: #fff;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--cyan-600) 80%, transparent);
  animation: bus-nudge 2.6s var(--ease-in-out, ease-in-out) infinite;
}
@keyframes bus-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

@media (max-width: 860px) { .bus__wrap { grid-template-columns: 1fr; } .bus__lede { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .bus__van { animation: none; } }

/* ── 6 · Paid at home, posted at school ────────────────────────────────── */
.pay2__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.pay2__head .eyebrow { justify-content: center; }
.pay2__head .h2 { margin: 12px 0 0; }
.pay2__lede { margin: 14px auto 0; max-width: 580px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.pay2__flow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px); align-items: center;
  max-width: 900px; margin-inline: auto;
}
.pay2__ek {
  margin: 0 0 10px; font-size: var(--f-label); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted);
}
.pay2__mini {
  padding: 16px 17px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card);
}
.pay2__end--office .pay2__mini { border-color: color-mix(in srgb, var(--cyan-600) 40%, transparent); }
.pay2__mh { margin: 0 0 11px; font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.pay2__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pay2__lines li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: var(--f-label); color: var(--t-secondary);
}
.pay2__lines b { color: var(--t-primary); }
.pay2__btn {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 12px 0 0; padding: 8px 12px; border-radius: 8px;
  font-size: var(--f-label); font-weight: 700;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.pay2__btn--ok { background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet); }

.pay2__wire { position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
.pay2__wire::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyan-600) 60%, transparent), transparent);
}
.pay2__pulse {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-600);
  animation: pay2-run 2.4s var(--ease-in-out, ease-in-out) infinite;
}
@keyframes pay2-run { 0% { left: -4px; opacity: 0; } 20%, 80% { opacity: 1; } 100% { left: calc(100% - 4px); opacity: 0; } }
.pay2__hub {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px;
  background: linear-gradient(135deg, var(--cyan-600), var(--violet)); color: #fff;
}

.pay2__foot {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: clamp(22px, 2.6vw, 32px) 0 0; font-size: var(--f-xs);
}
.pay2__foot svg { color: var(--accent-text); flex: none; }
.pay2__foot a { font-weight: 650; color: var(--accent-text); }
.pay2__foot a:hover { text-decoration: underline; }

@media (max-width: 780px) {
  .pay2__flow { grid-template-columns: 1fr; }
  .pay2__wire { width: 100%; height: 48px; }
  .pay2__wire::before {
    left: 50%; right: auto; top: 0; bottom: 0; height: auto; width: 2px;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cyan-600) 60%, transparent), transparent);
  }
  .pay2__pulse { left: calc(50% - 3px); animation: pay2-run-v 2.4s var(--ease-in-out, ease-in-out) infinite; }
  @keyframes pay2-run-v { 0% { top: -4px; opacity: 0; } 20%, 80% { opacity: 1; } 100% { top: calc(100% - 4px); opacity: 0; } }
  .pay2__hub { rotate: 90deg; }
}
@media (prefers-reduced-motion: reduce) { .pay2__pulse { animation: none; opacity: 0; } }

/* ── 7 · Getting a family on it ────────────────────────────────────────── */
.lg__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 38px); }
.lg__head .eyebrow { justify-content: center; }
.lg__head .h2 { margin: 12px 0 0; }
.lg__lede { margin: 14px auto 0; max-width: 580px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.lg__ways {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px);
  max-width: 1000px; margin-inline: auto;
}
.lg__ways li {
  position: relative; padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card);
  overflow: hidden;
}
/* A lit top edge that gets stronger across the three, so the set reads as a
   sequence rather than three equal boxes. */
.lg__ways li::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--cyan-600));
  opacity: calc(.45 + (var(--i) * .28));
}
.lg__i {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
  margin-bottom: 15px;
}
.lg__h { margin: 0; font-size: var(--f-sm); font-weight: 700; color: var(--t-primary); line-height: 1.32; }
.lg__b { margin: 9px 0 0; font-size: var(--f-xs); line-height: 1.62; color: var(--t-secondary); }

@media (max-width: 820px) { .lg__ways { grid-template-columns: 1fr; } }

/* ── 8 · What it can see ───────────────────────────────────────────────── */
.prv { position: relative; overflow: clip; }
.prv__inner { position: relative; z-index: 1; }
.prv__orb { bottom: -28%; right: -10%; width: 44vw; opacity: .45; }
.prv__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.prv__head .eyebrow { justify-content: center; }
.prv__eyebrow { color: var(--cyan); }
.prv__h { color: var(--t-on-dark); margin: 12px 0 0; }
.prv__lede { margin: 14px auto 0; max-width: 640px; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }

.prv__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 26px);
  max-width: 940px; margin-inline: auto;
}
.prv__col {
  padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04);
}
.prv__col--can { border-color: color-mix(in srgb, var(--cyan) 32%, transparent); }
.prv__ch {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: var(--f-sm); font-weight: 700; color: var(--t-on-dark);
}
.prv__ci {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; flex: none;
  background: rgba(255, 255, 255, .09); color: var(--t-on-dark-2);
}
.prv__col--can .prv__ci { background: color-mix(in srgb, var(--cyan) 20%, transparent); color: var(--cyan); }
.prv__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.prv__col li {
  position: relative; padding-left: 18px;
  font-size: var(--f-xs); line-height: 1.6; color: var(--t-on-dark-2);
}
.prv__col li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .3);
}
.prv__col--can li::before { background: var(--cyan); }

@media (max-width: 780px) { .prv__cols { grid-template-columns: 1fr; } }

/* ==========================================================================
   SCHOOL APP — /apps/school-admin-app/

   Three shapes new to this site: a role switcher that repaints the whole
   screen, a queue the reader actually empties, and a draggable wipe. The
   parent-app page owns the pinned phone and the tap-through nav; neither is
   reused here.

   Only theme-flipping tokens on light surfaces.
   ========================================================================== */

.sah__phone, .role__phone, .dsh__phone {
  position: relative; border-radius: 30px; background: var(--ink); padding: 9px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 30px 70px -30px rgba(0, 0, 0, .7);
}
.sah__notch, .role__notch, .dsh__notch {
  position: absolute; z-index: 3; left: 50%; top: 9px; translate: -50% 0;
  width: 34%; height: 18px; border-radius: 0 0 11px 11px; background: var(--ink);
}

/* ── 1 · Hero ──────────────────────────────────────────────────────────── */
.sah { position: relative; overflow: clip; }
.sah__inner { position: relative; z-index: 1; }
.sah__orb { top: -24%; left: -10%; width: 50vw; opacity: .5; }
.sah__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 60px); align-items: center; margin-top: clamp(16px, 2vw, 26px);
}
.sah__eyebrow { color: var(--cyan); }
.sah__h { color: var(--t-on-dark); margin: 14px 0 0; max-width: 16ch; }
.sah__lede { margin: 18px 0 0; max-width: 58ch; color: var(--t-on-dark-2); font-size: var(--f-sm); line-height: 1.7; }
.sah__chips { list-style: none; margin: clamp(20px, 2.4vw, 26px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.sah__chips li {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05);
  font-size: var(--f-label); font-weight: 600; color: var(--t-on-dark);
}
.sah__chips svg { color: var(--cyan); flex: none; }
.sah__stores { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(22px, 2.6vw, 30px) 0 0; }
.sah__art { display: grid; justify-items: center; }
.sah__phone { width: min(250px, 72%); }
.sah__slot { border-radius: 22px; overflow: hidden; }

@media (max-width: 900px) {
  .sah__grid { grid-template-columns: 1fr; }
  .sah__h { max-width: none; }
  .sah__art { order: -1; }
  .sah__phone { width: min(210px, 58%); }
}

/* ── 2 · The role switcher ─────────────────────────────────────────────── */
.role__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.role__head .eyebrow { justify-content: center; }
.role__head .h2 { margin: 12px 0 0; }
.role__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.role__rig {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 3.4vw, 52px); align-items: center;
  max-width: 980px; margin-inline: auto;
}
.role__people { display: grid; gap: 9px; }
.role__person {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--border); background: var(--s-card);
  transition: border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.role__person input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.role__person:hover { border-color: color-mix(in srgb, var(--cyan-600) 45%, transparent); }
.role__person:has(input:checked) {
  border-color: var(--accent); transform: translateX(5px);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cyan-600) 8%, transparent), transparent 70%), var(--s-card);
}
.role__person:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.role__pi {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: var(--s-frost); color: var(--t-muted);
  transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}
.role__person:has(input:checked) .role__pi {
  background: linear-gradient(135deg, var(--violet), var(--cyan-600)); color: #fff;
}
.role__pn { font-size: var(--f-xs); font-weight: 650; color: var(--t-secondary); }
.role__person:has(input:checked) .role__pn { color: var(--t-primary); }

.role__device { display: grid; justify-items: center; }
.role__phone { width: min(258px, 100%); }
.role__screen {
  padding: 44px 15px 18px; border-radius: 22px; background: var(--s-pure);
  min-height: 330px;
  animation: role-in var(--d-base) var(--ease-out) both;
}
.role__screen[hidden] { display: none; }
@keyframes role-in { from { opacity: 0; translate: 0 8px; } }
.role__st { margin: 0 0 13px; font-size: var(--f-xs); font-weight: 750; color: var(--t-primary); }
.role__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.role__rows li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 13px; border-radius: 11px;
  background: var(--s-frost); border: 1px solid var(--border-soft);
  font-size: var(--f-label); color: var(--t-secondary);
  animation: role-row .4s var(--ease-out) both; animation-delay: calc(var(--i) * .07s);
}
@keyframes role-row { from { opacity: 0; translate: 0 6px; } }
.role__rows b { font-weight: 700; color: var(--accent-text); white-space: nowrap; }
.role__sf {
  margin: 13px 0 0; padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: 10px; color: var(--t-muted); line-height: 1.5;
}
.role__note {
  display: flex; align-items: flex-start; justify-content: center; gap: 9px;
  grid-column: 1 / -1; margin: clamp(20px, 2.4vw, 28px) 0 0; text-align: center;
  font-size: var(--f-label); color: var(--t-muted); line-height: 1.6;
}
.role__note svg { color: var(--accent-text); flex: none; margin-top: 2px; }

@media (max-width: 820px) {
  .role__rig { grid-template-columns: 1fr; }
  .role__device { order: -1; }
  .role__people { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) { .role__people { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .role__screen, .role__rows li { animation: none; } }

/* ── 3 · Permission matrix ─────────────────────────────────────────────── */
.mtx__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 38px); }
.mtx__head .eyebrow { justify-content: center; }
.mtx__head .h2 { margin: 12px 0 0; }
.mtx__lede { margin: 14px auto 0; max-width: 600px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.mtx__scroll {
  max-width: 900px; margin-inline: auto; overflow-x: auto;
  border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card);
}
.mtx__table { width: 100%; min-width: 560px; border-collapse: collapse; }
.mtx__table th, .mtx__table td {
  padding: 13px clamp(10px, 1.4vw, 16px); font-size: var(--f-xs);
  border-bottom: 1px solid var(--border-soft); text-align: center;
}
.mtx__table thead th {
  font-size: var(--f-label); font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--t-muted); background: var(--s-frost);
}
.mtx__table th[scope="row"] { text-align: left; font-weight: 650; color: var(--t-primary); width: 34%; }
.mtx__table thead th:first-child { text-align: left; }
.mtx__table tbody tr:last-child th, .mtx__table tbody tr:last-child td { border-bottom: 0; }
.mtx__table tbody tr:hover th, .mtx__table tbody tr:hover td { background: var(--s-frost); }
.mtx__mark {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
}
.mtx__y .mtx__mark { background: color-mix(in srgb, var(--cyan-600) 14%, transparent); color: var(--accent-text); }
.mtx__n .mtx__mark { background: var(--s-frost); color: var(--t-muted); opacity: .7; }

@media (max-width: 640px) {
  /* Same fix as the attendance table: a sideways scroll hides the column that
     makes the argument, so each row becomes a card carrying its own labels. */
  .mtx__scroll { overflow-x: visible; border: 0; background: none; }
  .mtx__table { min-width: 0; display: block; }
  .mtx__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mtx__table tbody, .mtx__table tr, .mtx__table th, .mtx__table td { display: block; }
  .mtx__table tbody tr {
    margin-bottom: 10px; padding: 14px 16px; border-radius: var(--r-md);
    border: 1px solid var(--border); background: var(--s-card);
  }
  .mtx__table tbody tr:hover th, .mtx__table tbody tr:hover td { background: none; }
  .mtx__table th[scope="row"] {
    width: auto; padding: 0 0 10px; font-size: var(--f-sm);
    border-bottom: 1px solid var(--border-soft);
  }
  .mtx__table tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 0 0; border-bottom: 0; text-align: left;
  }
  .mtx__table tbody td::before {
    content: attr(data-label);
    font-size: var(--f-label); font-weight: 650; color: var(--t-secondary);
  }
}

/* ── 4 · The queue you clear ───────────────────────────────────────────── */
.que { position: relative; overflow: clip; }
.que__inner { position: relative; z-index: 1; }
.que__orb { top: -22%; right: -10%; width: 46vw; opacity: .45; }
.que__wrap {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center;
  max-width: 1040px; margin-inline: auto;
}
.que__eyebrow { color: var(--cyan); }
.que__h { color: var(--t-on-dark); margin: 12px 0 0; }
.que__lede { margin: 16px 0 0; font-size: var(--f-sm); line-height: 1.7; color: var(--t-on-dark-2); max-width: 52ch; }
.que__try {
  display: inline-flex; align-items: center; gap: 9px; margin: 20px 0 0;
  padding: 10px 15px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cyan) 34%, transparent);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  font-size: var(--f-xs); font-weight: 700; color: var(--cyan);
}
.que__note {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: 18px 0 0; padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04);
  font-size: var(--f-label); line-height: 1.6; color: var(--t-on-dark-2);
}
.que__note svg { color: var(--cyan); margin-top: 1px; }

.que__stack {
  position: relative; padding: clamp(16px, 2vw, 22px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(12px); min-height: 380px;
}
.que__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.que__tl { font-size: var(--f-xs); font-weight: 650; color: var(--t-on-dark); }
.que__count {
  display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px;
  border-radius: 999px; background: var(--cyan); color: var(--ink);
  font-size: var(--f-xs); font-weight: 800; font-variant-numeric: tabular-nums;
}
.que__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.que__item {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 12px;
  padding: 13px 14px; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), margin .4s var(--ease-out);
}
/* Cleared: slides out and takes its own space with it. */
.que__item.is-gone {
  opacity: 0; transform: translateX(28px); margin-bottom: -60px; pointer-events: none;
}
.que__i {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: rgba(255, 255, 255, .09); color: var(--cyan); flex: none;
}
.que__t { display: grid; gap: 2px; min-width: 0; }
.que__t strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-on-dark); }
.que__who { font-size: 10px; font-weight: 600; color: var(--cyan); }
.que__d { font-size: var(--f-label); color: var(--t-on-dark-2); line-height: 1.5; }
.que__acts { display: flex; gap: 6px; }
.que__ok, .que__no {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); cursor: pointer;
  background: rgba(255, 255, 255, .07); color: var(--t-on-dark-2);
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.que__ok:hover { background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
.que__no:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.que__ok:focus-visible, .que__no:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 40%, transparent); }
/* The word that lands across the card as it goes. */
.que__stamp {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--f-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; rotate: -7deg; scale: 1.3;
  transition: opacity .25s var(--ease-out), scale .25s var(--ease-out);
}
.que__item.is-gone .que__stamp { opacity: 1; scale: 1; }
.que__item[data-done="approved"] .que__stamp { color: var(--cyan); }
.que__item[data-done="approved"] .que__stamp::after { content: "Approved"; }
.que__item[data-done="declined"] .que__stamp { color: var(--t-on-dark-2); }
.que__item[data-done="declined"] .que__stamp::after { content: "Turned down"; }

.que__done {
  position: absolute; inset: clamp(16px, 2vw, 22px); top: 68px;
  display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center;
  animation: que-done .45s var(--ease-out) both;
}
.que__done[hidden] { display: none; }
@keyframes que-done { from { opacity: 0; scale: .94; } }
.que__donei {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px;
  background: var(--cyan); color: var(--ink); margin-bottom: 8px;
  box-shadow: 0 0 34px -6px color-mix(in srgb, var(--cyan) 70%, transparent);
}
.que__doneh { margin: 0; font-size: var(--f-h4, 1.2rem); font-weight: 750; color: var(--t-on-dark); }
.que__doneb { margin: 0; max-width: 34ch; font-size: var(--f-xs); line-height: 1.6; color: var(--t-on-dark-2); }
.que__reset {
  margin-top: 12px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07);
  font: inherit; font-size: var(--f-label); font-weight: 650; color: var(--t-on-dark);
}
.que__reset:hover { background: rgba(255, 255, 255, .14); }

@media (max-width: 900px) { .que__wrap { grid-template-columns: 1fr; } .que__lede { max-width: none; } }
@media (prefers-reduced-motion: reduce) {
  .que__item, .que__stamp, .que__done { transition: none; animation: none; }
}

/* ── 5 · The same job, twice ───────────────────────────────────────────── */
/* Was a draggable wipe. Both halves had to be legible, and once they were
   there was nothing left for the drag to reveal — so the drag went. The
   argument is a count, and a count wants to be visible, not uncovered. */
.job__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.job__head .eyebrow { justify-content: center; }
.job__head .h2 { margin: 12px 0 0; }
.job__lede { margin: 14px auto 0; max-width: 600px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.job__grid {
  display: grid; grid-template-columns: minmax(120px, .5fr) 1fr 1fr;
  gap: 10px clamp(10px, 1.6vw, 18px);
  max-width: 980px; margin-inline: auto;
}

/* The two column headers sit in the second and third tracks. */
.job__col {
  grid-column: span 1; display: grid; gap: 6px; align-content: start;
  padding: 14px 16px; border-radius: var(--r-md);
}
.job__col--desk { grid-column: 2; background: var(--s-raised); border: 1px solid var(--border); }
.job__col--app {
  grid-column: 3;
  background: linear-gradient(150deg, var(--midnight), var(--indigo));
  border: 1px solid transparent;
}
.job__ck {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: var(--f-label); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--t-muted);
}
.job__col--app .job__ck { color: var(--cyan); }
.job__tally { margin: 0; font-size: var(--f-label); color: var(--t-secondary); }
.job__tally b { font-size: var(--f-sm); font-weight: 800; color: var(--t-primary); font-variant-numeric: tabular-nums; }
.job__col--app .job__tally { color: var(--t-on-dark-2); }
.job__col--app .job__tally b { color: var(--cyan); }

/* One step per row, so the two versions sit level with each other. */
.job__row { display: contents; }
.job__step {
  grid-column: 1; display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 14px 4px 14px 0;
  font-size: var(--f-xs); font-weight: 700; color: var(--t-primary);
}
.job__n {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none;
  font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.job__side {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  padding: 14px 16px; border-radius: var(--r-md);
  font-size: var(--f-xs); line-height: 1.5;
}
.job__side--desk { background: var(--s-raised); border: 1px solid var(--border); color: var(--t-secondary); }
.job__side--app {
  background: color-mix(in srgb, var(--midnight) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent);
  color: var(--t-on-dark-2);
}
/* The marker that makes the count readable without reading a word. */
.job__pin {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; flex: none;
  background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan);
}
.job__side--desk .job__pin { background: var(--s-frost); color: var(--t-muted); }
.job__pin--on { background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--violet); }
.job__side--desk .job__pin--on { background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet); }

@media (max-width: 760px) {
  /* Stacked: the step name becomes the row's heading and the two versions sit
     under it, each keeping its own label. */
  .job__grid { grid-template-columns: 1fr; }
  .job__col { display: none; }
  .job__row {
    display: grid; gap: 8px; padding: 16px; border-radius: var(--r-lg);
    border: 1px solid var(--border); background: var(--s-card);
  }
  .job__step { padding: 0 0 4px; }
  .job__side { border-radius: var(--r-sm); }
  .job__side--desk::after,
  .job__side--app::after {
    content: "Tied to a desk"; grid-column: 2;
    font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--t-muted);
  }
  .job__side--app::after { content: "On the app"; color: var(--cyan); }
}

/* ── 6 · The gate ──────────────────────────────────────────────────────── */
.gate__wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center; max-width: 1020px; margin-inline: auto;
}
.gate__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 48ch; }
.gate__pt {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: 20px 0 0; padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-raised);
  font-size: var(--f-label); color: var(--t-secondary); line-height: 1.6;
}
.gate__pt svg { color: var(--accent-text); margin-top: 1px; }

.gate__log {
  padding: clamp(16px, 2vw, 22px); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card);
}
.gate__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border-soft);
}
.gate__tl { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.gate__in {
  padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.gate__log ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gate__row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 11px;
  background: var(--s-frost); border: 1px solid var(--border-soft);
  animation: gate-in .45s var(--ease-out) both; animation-delay: calc(var(--i) * .12s);
}
@keyframes gate-in { from { opacity: 0; translate: -8px 0; } }
.gate__time { font-size: 10px; font-weight: 700; color: var(--t-muted); font-variant-numeric: tabular-nums; }
.gate__body { display: grid; gap: 1px; min-width: 0; }
.gate__body strong { font-size: var(--f-label); font-weight: 700; color: var(--t-primary); }
.gate__body span { font-size: 10px; color: var(--t-muted); }
.gate__tag {
  padding: 4px 9px; border-radius: 6px; font-size: 9px; font-weight: 700; white-space: nowrap;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.gate__row--out .gate__tag { background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet); }

@media (max-width: 860px) { .gate__wrap { grid-template-columns: 1fr; } .gate__lede { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .gate__row { animation: none; } }

/* ── 7 · Management ────────────────────────────────────────────────────── */
.dsh__wrap {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center; max-width: 1060px; margin-inline: auto;
}
.dsh__h { margin: 12px 0 0; }
.dsh__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 50ch; }
.dsh__reads { list-style: none; margin: clamp(22px, 2.6vw, 30px) 0 0; padding: 0; display: grid; gap: 14px; }
.dsh__reads li { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; }
.dsh__i {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.dsh__t { display: grid; gap: 3px; min-width: 0; }
.dsh__t strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.dsh__t span { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.55; }
.dsh__foot { display: flex; align-items: center; gap: 9px; margin: 22px 0 0; font-size: var(--f-xs); }
.dsh__foot svg { color: var(--accent-text); flex: none; }
.dsh__foot a { font-weight: 650; color: var(--accent-text); }
.dsh__foot a:hover { text-decoration: underline; }
.dsh__art { display: grid; justify-items: center; }
.dsh__phone { width: min(240px, 74%); }
.dsh__slot { border-radius: 22px; overflow: hidden; }

@media (max-width: 900px) { .dsh__wrap { grid-template-columns: 1fr; } .dsh__lede { max-width: none; } }

/* ── 8 · What it cannot loosen ─────────────────────────────────────────── */
.safe { position: relative; overflow: clip; }
.safe__inner { position: relative; z-index: 1; }
.safe__orb { bottom: -28%; left: -10%; width: 44vw; opacity: .45; }
.safe__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.safe__head .eyebrow { justify-content: center; }
.safe__eyebrow { color: var(--cyan); }
.safe__h { color: var(--t-on-dark); margin: 12px 0 0; }
.safe__lede { margin: 14px auto 0; max-width: 640px; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }

.safe__pts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 22px);
  max-width: 1000px; margin-inline: auto;
}
.safe__pts li {
  position: relative; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04);
  overflow: hidden;
}
.safe__pts li::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  opacity: calc(.9 - (var(--i) * .22));
}
.safe__i {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13);
  color: var(--cyan); margin-bottom: 15px;
}
.safe__h3 { margin: 0; font-size: var(--f-sm); font-weight: 700; color: var(--t-on-dark); line-height: 1.32; }
.safe__b { margin: 9px 0 0; font-size: var(--f-xs); line-height: 1.62; color: var(--t-on-dark-2); }

@media (max-width: 860px) { .safe__pts { grid-template-columns: 1fr; } }

/* ==========================================================================
   TIMETABLE — /features/timetable-management-software/

   A timetable is a grid, so the page is one. Fourth module page, fourth shape:
   fees got a spine, attendance a cascade, admissions a board.

   The one interaction is on .hand, and it discloses something — which slots a
   period could legally move to. That is the test the school-app drag failed.

   Only theme-flipping tokens on light surfaces.
   ========================================================================== */

/* ── Shared sheet ──────────────────────────────────────────────────────── */
.tth__sheet, .hand__sheet {
  display: grid; grid-template-columns: 30px repeat(5, 1fr); gap: 4px;
}
.tth__day, .hand__day, .tth__per, .hand__per {
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* ── 1 · Hero grid ─────────────────────────────────────────────────────── */
.tth__grid { align-items: center; }
.tth__art { position: relative; }
.tth__board {
  padding: clamp(14px, 1.7vw, 20px); border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(14px);
  box-shadow: 0 26px 64px -32px rgba(0, 0, 0, .75);
}
.tth__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 11px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.tth__cls { font-size: var(--f-xs); font-weight: 650; color: var(--t-on-dark); }
.tth__state {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--f-label); font-weight: 650; color: var(--cyan);
}
.tth__state::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  animation: tth-live 1.6s var(--ease-out) infinite;
}
@keyframes tth-live { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.tth__day, .tth__per { color: var(--t-on-dark-2); }
.tth__corner { display: block; }
.tth__cell {
  display: grid; place-items: center; aspect-ratio: 1.35;
  border-radius: 6px; font-size: 9px; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04);
  color: transparent;
  transition: color var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
/* Filled by initTtBuild in a diagonal wave. */
.tth__cell.is-on { color: var(--t-on-dark); background: rgba(255, 255, 255, .09); }
/* The one that lands on a taken slot. */
.tth__cell.is-hit {
  background: color-mix(in srgb, var(--violet) 42%, transparent);
  border-color: color-mix(in srgb, var(--violet) 70%, transparent);
  color: #fff; animation: tth-shake .4s var(--ease-out) 2;
}
@keyframes tth-shake { 25% { translate: -2px 0; } 75% { translate: 2px 0; } }
/* Where the generator puts it. */
.tth__cell.is-landed {
  background: color-mix(in srgb, var(--cyan) 30%, transparent);
  border-color: color-mix(in srgb, var(--cyan) 60%, transparent);
  color: #fff;
}
.tth__cap {
  margin: 12px 0 0; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--f-label); color: var(--t-on-dark-2); line-height: 1.5;
}

@media (max-width: 900px) { .tth__art { margin-top: 30px; } }
@media (prefers-reduced-motion: reduce) {
  .tth__state::before, .tth__cell { animation: none; transition: none; }
}

/* ── 2 · The clash ─────────────────────────────────────────────────────── */
.clash__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.4vw, 44px); }
.clash__head .eyebrow { justify-content: center; }
.clash__head .h2 { margin: 12px 0 0; }
.clash__lede { margin: 14px auto 0; max-width: 600px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.clash__scene {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(12px, 2vw, 28px); max-width: 820px; margin-inline: auto;
}
.clash__grid {
  padding: clamp(14px, 1.8vw, 20px); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card);
}
.clash__gt {
  margin: 0 0 10px; font-size: var(--f-label); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted);
}
.clash__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.clash__grid li {
  padding: 9px 11px; border-radius: 8px; font-size: var(--f-label);
  background: var(--s-frost); color: var(--t-secondary);
}
.clash__grid li.is-hit {
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--violet) 42%, transparent);
  color: var(--violet); font-weight: 700;
}

.clash__who { display: grid; justify-items: center; gap: 6px; text-align: center; }
.clash__avatar {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px;
  background: linear-gradient(135deg, var(--violet), var(--cyan-600)); color: #fff;
}
.clash__wn { font-size: var(--f-xs); font-weight: 750; color: var(--t-primary); }
/* The line joining the two hits, with the collision on it. */
.clash__bolt {
  width: 2px; height: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--violet) 70%, transparent), transparent);
}
.clash__when {
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  font-size: 10px; font-weight: 700;
  background: color-mix(in srgb, var(--violet) 11%, transparent); color: var(--violet);
}

.clash__foot {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  max-width: 660px; margin: clamp(24px, 3vw, 34px) auto 0;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-raised);
  font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6;
}
.clash__foot svg { color: var(--accent-text); margin-top: 1px; }

@media (max-width: 700px) {
  .clash__scene { grid-template-columns: 1fr; }
  .clash__who { flex-direction: row; }
  .clash__bolt { width: 40px; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--violet) 70%, transparent), transparent); }
}

/* ── 3 · What you set ──────────────────────────────────────────────────── */
.rules__wrap {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center; max-width: 1020px; margin-inline: auto;
}
.rules__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 46ch; }
.rules__note {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: 20px 0 0; padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-raised);
  font-size: var(--f-label); color: var(--t-secondary); line-height: 1.6;
}
.rules__note svg { color: var(--accent-text); margin-top: 1px; }

.rules__sheet { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; counter-reset: r; }
.rules__sheet li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px;
  padding: 15px 17px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
}
.rules__i {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.rules__t { display: grid; gap: 3px; min-width: 0; }
.rules__t strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.rules__t span { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.55; }
.rules__done {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: color-mix(in srgb, var(--cyan-600) 14%, transparent); color: var(--accent-text);
}

@media (max-width: 860px) { .rules__wrap { grid-template-columns: 1fr; } .rules__lede { max-width: none; } }

/* ── 4 · Every section at once ─────────────────────────────────────────── */
.build { position: relative; overflow: clip; }
.build__inner { position: relative; z-index: 1; }
.build__orb { top: -22%; right: -10%; width: 46vw; opacity: .45; }
.build__wrap {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center; max-width: 1040px; margin-inline: auto;
}
.build__eyebrow { color: var(--cyan); }
.build__h { color: var(--t-on-dark); margin: 12px 0 0; }
.build__lede { margin: 16px 0 0; font-size: var(--f-sm); line-height: 1.7; color: var(--t-on-dark-2); max-width: 52ch; }
.build__note {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04);
  font-size: var(--f-label); line-height: 1.6; color: var(--t-on-dark-2);
}
.build__note svg { color: var(--cyan); margin-top: 1px; }

.build__stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.build__stack li {
  display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 12px;
  padding: 10px 13px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .11); background: rgba(255, 255, 255, .05);
  animation: build-in .5s var(--ease-out) both; animation-delay: calc(var(--i) * .08s);
}
@keyframes build-in { from { opacity: 0; translate: 14px 0; } }
.build__sn { font-size: 10px; font-weight: 750; color: var(--cyan); font-variant-numeric: tabular-nums; }
.build__mini { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.build__mini i {
  display: block; height: 12px; border-radius: 3px;
  background: rgba(255, 255, 255, .16);
  animation: build-fill .45s var(--ease-out) both;
  animation-delay: calc(.3s + (var(--i) * .08s) + (var(--c) * .04s));
}
@keyframes build-fill { from { opacity: 0; scale: .4; } }

@media (max-width: 880px) { .build__wrap { grid-template-columns: 1fr; } .build__lede { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .build__stack li, .build__mini i { animation: none; } }

/* ── 5 · Move a period ─────────────────────────────────────────────────── */
.hand__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.hand__head .eyebrow { justify-content: center; }
.hand__head .h2 { margin: 12px 0 0; }
.hand__lede { margin: 14px auto 0; max-width: 640px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.hand__rig {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(24px, 3.4vw, 48px); align-items: center; max-width: 1040px; margin-inline: auto;
}
.hand__sheet {
  padding: clamp(14px, 1.8vw, 20px); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card);
}
.hand__day, .hand__per { color: var(--t-muted); }
.hand__corner { display: block; }
.hand__cell {
  display: grid; place-items: center; aspect-ratio: 1.4;
  border-radius: 7px; font-size: 10px; font-weight: 650;
  background: var(--s-frost); border: 1px solid var(--border-soft); color: var(--t-secondary);
  transition: background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out),
              opacity var(--d-base) var(--ease-out);
}
/* The one you pick up. A real button. */
.hand__cell--move {
  position: relative; cursor: pointer; font: inherit; font-size: 10px; font-weight: 750;
  background: linear-gradient(135deg, var(--violet), var(--cyan-600)); color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--cyan-600) 80%, transparent);
}
.hand__cell--move:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.hand__grip {
  position: absolute; inset: -3px; border-radius: 9px;
  border: 2px solid var(--cyan);
  animation: hand-ping 2.2s var(--ease-out) infinite;
}
@keyframes hand-ping { 0% { opacity: .9; scale: 1; } 70%, 100% { opacity: 0; scale: 1.28; } }
.hand__cell--move[aria-pressed="true"] .hand__grip { animation: none; opacity: 1; }

/* Only shown once the period is picked up — that is the disclosure. */
.hand__rig.is-open .hand__cell--ok {
  background: color-mix(in srgb, var(--cyan-600) 18%, transparent);
  border-color: color-mix(in srgb, var(--cyan-600) 55%, transparent);
  color: var(--accent-text);
}
.hand__rig.is-open .hand__cell--busy {
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  border-color: color-mix(in srgb, var(--violet) 40%, transparent);
  color: var(--violet);
}
.hand__rig.is-open .hand__cell:not(.hand__cell--ok):not(.hand__cell--busy):not(.hand__cell--move) { opacity: .4; }

.hand__side { display: grid; gap: 14px; align-content: center; }
.hand__prompt {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  padding: 11px 15px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cyan-600) 38%, transparent);
  background: color-mix(in srgb, var(--cyan-600) 8%, transparent);
  font-size: var(--f-xs); font-weight: 700; color: var(--accent-text);
}
/* An author `display` beats the UA rule for [hidden], so the prompt stayed on
   screen after the period was picked up. Every element this theme hides with
   the attribute and styles with a display needs this pair. */
.hand__prompt[hidden] { display: none; }
.hand__prompt svg { flex: none; }
.hand__key { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hand__key[hidden] { display: none; }
.hand__key li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 11px; row-gap: 2px;
  padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
  animation: hand-key .4s var(--ease-out) both;
}
.hand__key li:last-child { animation-delay: .1s; }
@keyframes hand-key { from { opacity: 0; translate: 0 8px; } }
.hand__sw { grid-row: 1 / 3; width: 14px; height: 14px; border-radius: 4px; align-self: start; margin-top: 3px; }
.hand__key [data-k="ok"] .hand__sw { background: color-mix(in srgb, var(--cyan-600) 45%, transparent); }
.hand__key [data-k="busy"] .hand__sw { background: color-mix(in srgb, var(--violet) 40%, transparent); }
.hand__key b { font-size: var(--f-xs); font-weight: 750; color: var(--t-primary); }
.hand__key span:not(.hand__sw) { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.5; }
.hand__note {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  font-size: var(--f-label); color: var(--t-muted); line-height: 1.6;
}
.hand__note svg { color: var(--t-muted); margin-top: 1px; }

@media (max-width: 880px) { .hand__rig { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hand__grip, .hand__key li { animation: none; } }

/* ── 6 · One box ───────────────────────────────────────────────────────── */
.cell__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.4vw, 44px); }
.cell__head .eyebrow { justify-content: center; }
.cell__head .h2 { margin: 12px 0 0; }
.cell__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.cell__rig {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 52px); align-items: center; max-width: 880px; margin-inline: auto;
}
.cell__box {
  display: grid; place-items: center; align-content: center; gap: 5px;
  width: clamp(120px, 16vw, 156px); aspect-ratio: 1.1;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--violet), var(--cyan-600)); color: #fff;
  box-shadow: 0 20px 44px -22px color-mix(in srgb, var(--cyan-600) 80%, transparent);
}
.cell__sub { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.03em; }
.cell__slot { font-size: var(--f-label); font-weight: 650; opacity: .85; }

.cell__parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cell__parts li {
  position: relative; display: grid; grid-template-columns: auto 1fr;
  column-gap: 14px; row-gap: 2px; align-items: baseline;
  padding: 13px 16px 13px 26px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
}
/* The little tie back to the box. */
.cell__line {
  position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 14px; height: 2px; background: color-mix(in srgb, var(--cyan-600) 45%, transparent);
}
.cell__k { font-size: var(--f-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--t-muted); white-space: nowrap; }
.cell__v { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.cell__d { grid-column: 1 / 3; font-size: var(--f-label); color: var(--t-secondary); line-height: 1.5; }

@media (max-width: 720px) {
  .cell__rig { grid-template-columns: 1fr; justify-items: center; }
  .cell__parts { width: 100%; }
}

/* ── 7 · Four readers ──────────────────────────────────────────────────── */
.whose__wrap {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center; max-width: 1060px; margin-inline: auto;
}
.whose__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 50ch; }
.whose__list { list-style: none; margin: clamp(22px, 2.6vw, 30px) 0 0; padding: 0; display: grid; gap: 13px; }
.whose__list li { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; }
.whose__i {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.whose__t { display: grid; gap: 3px; min-width: 0; }
.whose__t strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.whose__t span { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.55; }
.whose__art { display: grid; justify-items: center; }
.whose__phone {
  position: relative; width: min(230px, 74%); border-radius: 30px; background: var(--ink); padding: 9px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 30px 70px -30px rgba(0, 0, 0, .5);
}
.whose__notch {
  position: absolute; z-index: 3; left: 50%; top: 9px; translate: -50% 0;
  width: 34%; height: 18px; border-radius: 0 0 11px 11px; background: var(--ink);
}
.whose__slot { border-radius: 22px; overflow: hidden; }

@media (max-width: 900px) { .whose__wrap { grid-template-columns: 1fr; } .whose__lede { max-width: none; } }

/* ── 8 · One of five ───────────────────────────────────────────────────── */
.five { position: relative; overflow: clip; }
.five__inner { position: relative; z-index: 1; }
.five__orb { bottom: -28%; left: -10%; width: 44vw; opacity: .45; }
.five__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.five__head .eyebrow { justify-content: center; }
.five__eyebrow { color: var(--cyan); }
.five__h { color: var(--t-on-dark); margin: 12px 0 0; }
.five__lede { margin: 14px auto 0; max-width: 640px; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }

.five__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; max-width: 820px; margin-inline: auto; }
.five__item {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 13px;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04);
}
/* The one the reader is already on. */
.five__item.is-here {
  border-color: color-mix(in srgb, var(--cyan) 45%, transparent);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
}
.five__n {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .1); color: var(--t-on-dark-2);
}
.five__item.is-here .five__n { background: var(--cyan); color: var(--ink); }
.five__i {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: rgba(255, 255, 255, .07); color: var(--cyan);
}
.five__t { display: grid; gap: 2px; min-width: 0; }
.five__t strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-on-dark); }
.five__t span { font-size: var(--f-label); color: var(--t-on-dark-2); line-height: 1.5; }
.five__go {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: rgba(255, 255, 255, .07); color: var(--t-on-dark-2);
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.five__go:hover { background: var(--cyan); color: var(--ink); }

@media (max-width: 560px) {
  .five__item { grid-template-columns: auto 1fr auto; }
  .five__i { display: none; }
}

/* ==========================================================================
   COMMUNICATION — /features/communication-sms-whatsapp/

   Every drawing here is literal on purpose. The earlier module pages used grey
   placeholder bars and travelling dots, and somebody who does not already know
   the product reads those as grey bars. So the mock screens carry real
   sentences, the counts are numbers, and the motion is things a person already
   recognises without being taught: a message leaving, delivery ticks turning
   blue, a blank filling itself in.

   Only theme-flipping tokens on light surfaces.
   ========================================================================== */

/* ── 1 · Hero: the message going out ───────────────────────────────────── */
.msgh__grid { align-items: center; }
.msgh__art { display: grid; justify-items: center; }
.msgh__phone {
  position: relative; width: min(300px, 84%);
  border-radius: 28px; background: var(--ink); padding: 9px 9px 14px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 30px 70px -30px rgba(0, 0, 0, .7);
}
.msgh__notch {
  position: absolute; z-index: 3; left: 50%; top: 9px; translate: -50% 0;
  width: 34%; height: 16px; border-radius: 0 0 10px 10px; background: var(--ink);
}
.msgh__head {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center;
  padding: 30px 12px 12px; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.msgh__avatar {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--cyan); color: var(--ink);
}
.msgh__hn { display: grid; gap: 1px; min-width: 0; }
.msgh__hn b { font-size: var(--f-label); font-weight: 700; color: #fff; }
.msgh__hn i { font-style: normal; font-size: 10px; color: rgba(255, 255, 255, .6); }

.msgh__thread { padding: 14px 12px 0; }
/* A real sentence, in a bubble anybody recognises. */
.msgh__bubble {
  position: relative; margin-left: 18%;
  padding: 11px 12px 8px; border-radius: 13px 13px 4px 13px;
  background: color-mix(in srgb, var(--cyan) 26%, transparent);
  animation: msgh-pop .45s var(--ease-out) both;
}
@keyframes msgh-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.msgh__bubble p { margin: 0; font-size: 11px; line-height: 1.5; color: #fff; }
.msgh__meta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 5px; }
.msgh__meta i { font-style: normal; font-size: 9px; color: rgba(255, 255, 255, .55); }

/* Two ticks. One grey, then both blue — the one piece of interface language
   every parent in India already reads. */
.msgh__ticks { display: inline-flex; }
.msgh__ticks b {
  display: block; width: 9px; height: 5px; margin-left: -4px;
  border-left: 1.5px solid rgba(255, 255, 255, .5);
  border-bottom: 1.5px solid rgba(255, 255, 255, .5);
  transform: rotate(-45deg);
  transition: border-color var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out);
}
.msgh__ticks b:first-child { margin-left: 0; }
.msgh__ticks b:last-child { opacity: 0; }
.msgh__phone.is-sent .msgh__ticks b { opacity: 1; border-color: var(--cyan); }

.msgh__state {
  margin: 10px 0 0; text-align: center;
  font-size: 10px; font-weight: 650; color: rgba(255, 255, 255, .55);
  transition: color var(--d-base) var(--ease-out);
}
.msgh__phone.is-sent .msgh__state { color: var(--cyan); }

/* The parents it lands on, arriving one by one. */
.msgh__got { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.msgh__got li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 9px;
  background: rgba(255, 255, 255, .07);
  font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, .8);
  opacity: 0; translate: 0 6px;
  transition: opacity .3s var(--ease-out), translate .3s var(--ease-out);
}
.msgh__phone.is-sent .msgh__got li { opacity: 1; translate: 0 0; transition-delay: calc(var(--i) * .09s); }
.msgh__pi { display: grid; place-items: center; color: rgba(255, 255, 255, .5); }
.msgh__ok {
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--cyan); color: var(--ink);
}

@media (max-width: 900px) { .msgh__art { margin-top: 30px; } }
@media (prefers-reduced-motion: reduce) {
  .msgh__bubble, .msgh__got li, .msgh__ticks b { animation: none; transition: none; }
}

/* ── 2 · The circular in the bag ───────────────────────────────────────── */
.reach__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.4vw, 44px); }
.reach__head .eyebrow { justify-content: center; }
.reach__head .h2 { margin: 12px 0 0; }
.reach__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.reach__scene {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 3.6vw, 56px); align-items: center;
  max-width: 900px; margin-inline: auto;
}

/* A school bag with notices going into it. Literal, because "information loss"
   drawn as an abstraction means nothing to a head teacher. */
.reach__bag { position: relative; width: clamp(150px, 20vw, 190px); }
.reach__bagbody {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.05;
  border-radius: 16px 16px 26px 26px;
  background: linear-gradient(160deg, var(--indigo), var(--midnight));
}
.reach__handle {
  position: absolute; left: 50%; top: -16px; translate: -50% 0;
  width: 46%; height: 30px; border-radius: 22px 22px 0 0;
  border: 5px solid var(--indigo); border-bottom: 0;
}
.reach__flap {
  position: absolute; inset: 34% 8% auto 8%; height: 34%;
  border-radius: 12px; background: rgba(255, 255, 255, .12);
}
.reach__paper {
  position: absolute; left: 50%; translate: -50% 0; z-index: 1;
  width: 54%; height: 30px; border-radius: 3px;
  background: var(--s-pure); border: 1px solid var(--border);
  box-shadow: 0 4px 10px -4px rgba(20, 19, 31, .3);
  animation: reach-drop 4s var(--ease-in-out, ease-in-out) infinite;
}
.reach__paper--1 { animation-delay: 0s; }
.reach__paper--2 { animation-delay: 1.3s; }
.reach__paper--3 { animation-delay: 2.6s; }
@keyframes reach-drop {
  0%       { top: -34px; opacity: 0; rotate: -6deg; }
  15%      { opacity: 1; }
  45%, 100% { top: 42%; opacity: 0; rotate: 4deg; }
}
.reach__cap { margin: 12px 0 0; text-align: center; font-size: var(--f-label); color: var(--t-muted); }

.reach__ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.reach__ways li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 13px; row-gap: 3px;
  padding: 15px 17px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
}
.reach__x {
  grid-row: 1 / 3; display: grid; place-items: center; align-self: start;
  width: 22px; height: 22px; border-radius: 7px;
  background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet);
}
.reach__ways strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.reach__ways span:not(.reach__x) { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.55; }

.reach__foot {
  display: flex; align-items: flex-start; justify-content: center; gap: 9px;
  max-width: 620px; margin: clamp(24px, 3vw, 34px) auto 0; text-align: center;
  font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6;
}
.reach__foot svg { color: var(--accent-text); flex: none; margin-top: 2px; }

@media (max-width: 720px) { .reach__scene { grid-template-columns: 1fr; justify-items: center; } }
@media (prefers-reduced-motion: reduce) { .reach__paper { animation: none; opacity: 0; } }

/* ── 3 · Who gets it ───────────────────────────────────────────────────── */
.who__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.who__head .eyebrow { justify-content: center; }
.who__head .h2 { margin: 12px 0 0; }
.who__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.who__rig {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 3.4vw, 48px); align-items: center; max-width: 980px; margin-inline: auto;
}
.who__picks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.who__pick {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px;
  padding: 14px 16px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--border); background: var(--s-card);
  transition: border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.who__pick input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.who__pick:hover { border-color: color-mix(in srgb, var(--cyan-600) 45%, transparent); }
.who__pick:has(input:checked) { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--sh-lift); }
.who__pick:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.who__pi {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: var(--s-frost); color: var(--t-muted);
  transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}
.who__pick:has(input:checked) .who__pi {
  background: linear-gradient(135deg, var(--violet), var(--cyan-600)); color: #fff;
}
.who__pn { font-size: var(--f-xs); font-weight: 650; color: var(--t-secondary); }
.who__pick:has(input:checked) .who__pn { color: var(--t-primary); }

.who__out {
  padding: clamp(22px, 2.8vw, 32px); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card); text-align: center;
}
.who__ok {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 14px;
  padding: 6px 13px; border-radius: 999px;
  font-size: var(--f-label); font-weight: 700;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.who__count { margin: 0; }
/* The number is the whole point — nobody needs it explained. */
.who__count b {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.03em;
  color: var(--t-primary); font-variant-numeric: tabular-nums;
}
.who__note { margin: 8px 0 0; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.55; }
.who__small {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border-soft);
  font-size: var(--f-label); color: var(--t-muted);
}
.who__small svg { color: var(--t-muted); flex: none; }

@media (max-width: 880px) { .who__rig { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .who__picks { grid-template-columns: 1fr; } }

/* ── 4 · The template filling in ───────────────────────────────────────── */
.tpl { position: relative; overflow: clip; }
.tpl__inner { position: relative; z-index: 1; }
.tpl__orb { top: -22%; left: -10%; width: 46vw; opacity: .45; }
.tpl__wrap {
  display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center; max-width: 1040px; margin-inline: auto;
}
.tpl__eyebrow { color: var(--cyan); }
.tpl__h { color: var(--t-on-dark); margin: 12px 0 0; }
.tpl__lede { margin: 16px 0 0; font-size: var(--f-sm); line-height: 1.7; color: var(--t-on-dark-2); max-width: 52ch; }
.tpl__note {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04);
  font-size: var(--f-label); line-height: 1.6; color: var(--t-on-dark-2);
}
.tpl__note svg { color: var(--cyan); margin-top: 1px; }

.tpl__stage {
  padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(12px);
}
.tpl__label {
  margin: 0 0 14px; font-size: var(--f-label); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cyan);
}
.tpl__note2 {
  padding: 18px 20px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1);
}
.tpl__line { margin: 0 0 10px; font-size: var(--f-xs); line-height: 1.9; color: var(--t-on-dark); }
.tpl__line:last-child { margin-bottom: 0; }
.tpl__line--flat { color: var(--t-on-dark-2); }

/* The blank, and what lands in it. This is the whole demonstration. */
.tpl__blank {
  display: inline-block; min-width: 88px; padding: 2px 9px; border-radius: 5px;
  text-align: center; font-weight: 700;
  border-bottom: 2px dashed color-mix(in srgb, var(--cyan) 55%, transparent);
  background: transparent; color: var(--cyan);
  transition: background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
.tpl__blank.is-filled {
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--cyan) 22%, transparent);
  animation: tpl-land .45s var(--ease-out);
}
@keyframes tpl-land { from { opacity: 0; transform: translateY(-7px); } }

.tpl__who { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tpl__who li {
  padding: 8px 13px; border-radius: 999px;
  font-size: var(--f-label); font-weight: 650; color: var(--t-on-dark-2);
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04);
  transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
.tpl__who li.is-on {
  background: color-mix(in srgb, var(--cyan) 20%, transparent);
  border-color: color-mix(in srgb, var(--cyan) 50%, transparent); color: #fff;
}

@media (max-width: 900px) { .tpl__wrap { grid-template-columns: 1fr; } .tpl__lede { max-width: none; } }
@media (max-width: 420px) { .tpl__blank { min-width: 66px; } }
@media (prefers-reduced-motion: reduce) { .tpl__blank { animation: none; } }

/* ── 5 · Three phones ──────────────────────────────────────────────────── */
.chan__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.4vw, 44px); }
.chan__head .eyebrow { justify-content: center; }
.chan__head .h2 { margin: 12px 0 0; }
.chan__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.chan__row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.2vw, 30px);
  max-width: 900px; margin-inline: auto;
}
.chan__item { display: grid; justify-items: center; text-align: center; gap: 4px; }
.chan__phone {
  position: relative; width: min(180px, 100%); margin-bottom: 14px;
  border-radius: 22px; background: var(--ink); padding: 7px;
  box-shadow: 0 20px 44px -24px rgba(20, 19, 31, .55);
}
.chan__notch {
  position: absolute; z-index: 3; left: 50%; top: 7px; translate: -50% 0;
  width: 34%; height: 12px; border-radius: 0 0 8px 8px; background: var(--ink);
}
.chan__screen { padding: 26px 8px 12px; border-radius: 17px; background: #10102b; min-height: 128px; }
/* A notification, drawn as a notification. */
.chan__card {
  padding: 9px 10px; border-radius: 11px; text-align: left;
  background: rgba(255, 255, 255, .13); backdrop-filter: blur(6px);
  animation: chan-in .5s var(--ease-out) both; animation-delay: calc(.2s + (var(--i) * .18s));
}
@keyframes chan-in { from { opacity: 0; transform: translateY(-8px); } }
.chan__from {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .03em; color: rgba(255, 255, 255, .75);
}
.chan__ico {
  display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px;
  background: var(--cyan); color: var(--ink); flex: none;
}
.chan__item--wa .chan__ico { background: #25D366; color: #fff; }
.chan__item--sms .chan__ico { background: var(--violet); color: #fff; }
.chan__text { margin: 0; font-size: 10px; line-height: 1.45; color: #fff; }
.chan__h { margin: 0; font-size: var(--f-sm); font-weight: 700; color: var(--t-primary); }
.chan__b { margin: 6px 0 0; font-size: var(--f-label); line-height: 1.55; color: var(--t-secondary); max-width: 30ch; }

@media (max-width: 720px) { .chan__row { grid-template-columns: 1fr; gap: 26px; } .chan__b { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .chan__card { animation: none; } }

/* ── 6 · Sends itself ──────────────────────────────────────────────────── */
.auto__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.auto__head .eyebrow { justify-content: center; }
.auto__head .h2 { margin: 12px 0 0; }
.auto__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.auto__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 940px; margin-inline: auto; }
.auto__list li {
  display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.2fr);
  align-items: center; gap: clamp(10px, 1.6vw, 20px);
}
.auto__cause {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  padding: 16px 18px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-raised);
}
.auto__ci {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet);
}
.auto__ct { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); line-height: 1.4; }

.auto__arrow { position: relative; display: grid; place-items: center; width: 40px; color: var(--accent-text); }
.auto__dot {
  position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-600);
  animation: auto-run 2.6s var(--ease-in-out, ease-in-out) infinite;
  animation-delay: calc(var(--i) * .3s);
}
@keyframes auto-run { 0% { left: -2px; opacity: 0; } 25%, 70% { opacity: 1; } 100% { left: 36px; opacity: 0; } }

/* The message it produces, written out. Not "an alert is sent". */
.auto__msg {
  padding: 15px 17px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--cyan-600) 34%, transparent);
  background: color-mix(in srgb, var(--cyan-600) 6%, transparent);
}
.auto__from {
  display: block; margin-bottom: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--accent-text);
}
.auto__msg p { margin: 0; font-size: var(--f-xs); line-height: 1.55; color: var(--t-secondary); }

.auto__foot {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  max-width: 660px; margin: clamp(22px, 2.6vw, 32px) auto 0;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-raised);
  font-size: var(--f-label); color: var(--t-muted); line-height: 1.6;
}
.auto__foot svg { color: var(--t-muted); margin-top: 1px; }

@media (max-width: 780px) {
  .auto__list li { grid-template-columns: 1fr; gap: 8px; }
  .auto__arrow { width: 100%; height: 26px; rotate: 90deg; }
  .auto__dot { animation: none; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .auto__dot { animation: none; opacity: 0; } }

/* ── 7 · The compose screen ────────────────────────────────────────────── */
.shot2__wrap {
  display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center; max-width: 1140px; margin-inline: auto;
}
.shot2__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 46ch; }
.shot2__pts { list-style: none; margin: clamp(22px, 2.6vw, 30px) 0 0; padding: 0; display: grid; gap: 15px; }
.shot2__pts li { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; }
.shot2__i {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.shot2__t { display: grid; gap: 3px; min-width: 0; }
.shot2__t strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.shot2__t span { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.55; }
.shot2__slot { border-radius: var(--r-lg); box-shadow: 0 30px 70px -36px rgba(20, 19, 31, .5); }
.shot2__slot:has(img, picture, video) { overflow: hidden; }

@media (max-width: 900px) { .shot2__wrap { grid-template-columns: 1fr; } .shot2__lede { max-width: none; } }

/* ── 8 · The SMS allowance ─────────────────────────────────────────────── */
.allow { position: relative; overflow: clip; }
.allow__inner { position: relative; z-index: 1; }
.allow__orb { bottom: -28%; right: -10%; width: 44vw; opacity: .45; }
.allow__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.allow__head .eyebrow { justify-content: center; }
.allow__eyebrow { color: var(--cyan); }
.allow__h { color: var(--t-on-dark); margin: 12px 0 0; }
.allow__lede { margin: 14px auto 0; max-width: 640px; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }

.allow__plans {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 22px);
  max-width: 880px; margin-inline: auto;
}
/* Grid rows, so the three cards are the same height and the same thing sits at
   the same eye level in each — name, then the figure, then the caveat.
   Spacing was 7-8px between all three with up to 109px dead at the bottom,
   which read as the text being shoved into the top corner. */
.allow__plan {
  display: grid; grid-template-rows: auto auto 1fr; gap: 12px;
  padding: clamp(22px, 2.6vw, 30px) clamp(18px, 2.2vw, 26px);
  border-radius: var(--r-lg); text-align: center;
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04);
}
/* Its own modifier, not the shared .is-pop state. That one belongs to the
   pricing section and carries `margin-block: -30px` with it, which pulled this
   card 30px out of line and made it 60px taller than its neighbours. */
.allow__plan--pop {
  border-color: color-mix(in srgb, var(--cyan) 45%, transparent);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
}
.allow__pn {
  margin: 0; font-size: var(--f-label); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--t-on-dark-2);
}
.allow__pv {
  margin: 0; font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.05; color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.allow__pd {
  margin: 0; align-self: start; max-width: 26ch; margin-inline: auto;
  font-size: var(--f-label); line-height: 1.6; color: var(--t-on-dark-2);
}

.allow__foot {
  display: flex; align-items: flex-start; justify-content: center; gap: 9px;
  max-width: 620px; margin: clamp(22px, 2.6vw, 30px) auto 0; text-align: center;
  font-size: var(--f-label); color: var(--t-on-dark-2); line-height: 1.6;
}
.allow__foot svg { color: var(--cyan); flex: none; margin-top: 2px; }
.allow__foot a { color: var(--cyan); font-weight: 650; }
.allow__foot a:hover { text-decoration: underline; }

@media (max-width: 700px) { .allow__plans { grid-template-columns: 1fr; } }

/* ==========================================================================
   REPORTS — /features/school-reports-analytics/

   Five built pages already linked here and the path 404'd, so this closes real
   dangling links.

   Same rule as the communication page: every drawing is literal. The counts
   are the documented counts, the plain-English box shows a real question and a
   real table, and the filter visibly shortens a list. No grey bars standing in
   for data.

   Only theme-flipping tokens on light surfaces.
   ========================================================================== */

/* ── 1 · Hero: the count ───────────────────────────────────────────────── */
.rep73__grid { align-items: center; }
.rep73__board {
  padding: clamp(18px, 2.2vw, 26px); border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(14px);
  box-shadow: 0 26px 64px -32px rgba(0, 0, 0, .75);
}
.rep73__big { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; }
.rep73__big b {
  font-size: clamp(3.2rem, 7vw, 4.6rem); font-weight: 800; letter-spacing: -.05em;
  line-height: .9; color: var(--cyan); font-variant-numeric: tabular-nums;
}
.rep73__big i { font-style: normal; font-size: var(--f-xs); font-weight: 650; color: var(--t-on-dark-2); }

.rep73__groups { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rep73__groups li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 9px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09);
  animation: rep73-in .45s var(--ease-out) both; animation-delay: calc(.35s + (var(--i) * .09s));
}
@keyframes rep73-in { from { opacity: 0; translate: 12px 0; } }
.rep73__gi { display: grid; place-items: center; color: var(--cyan); }
.rep73__gn { font-size: var(--f-label); font-weight: 600; color: var(--t-on-dark); }
.rep73__gv {
  font-size: var(--f-xs); font-weight: 800; color: var(--cyan); font-variant-numeric: tabular-nums;
}
.rep73__sum {
  margin: 13px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: center; font-size: var(--f-label); color: var(--t-on-dark-2);
  font-variant-numeric: tabular-nums;
}
.rep73__sum b { color: var(--cyan); font-weight: 800; }

@media (max-width: 900px) { .rep73__art { margin-top: 30px; } }
@media (prefers-reduced-motion: reduce) { .rep73__groups li { animation: none; } }

/* ── 2 · The six groups, to scale ──────────────────────────────────────── */
.grp__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.grp__head .eyebrow { justify-content: center; }
.grp__head .h2 { margin: 12px 0 0; }
.grp__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.grp__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 900px; margin-inline: auto; }
.grp__list li {
  display: grid; grid-template-columns: auto 110px minmax(0, 1fr) 42px; align-items: center;
  column-gap: 14px; row-gap: 6px;
  padding: 15px 18px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
}
.grp__i {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.grp__n { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
/* The bar length is the count. A bar whose width meant nothing would be the
   exact thing this site refuses to print. */
.grp__bar { height: 10px; border-radius: 5px; background: var(--s-frost); overflow: hidden; }
.grp__bar i {
  display: block; height: 100%; width: 0; border-radius: 5px;
  background: linear-gradient(90deg, var(--violet), var(--cyan-600));
  animation: grp-grow .8s var(--ease-out) forwards; animation-delay: calc(.2s + (var(--i) * .09s));
}
@keyframes grp-grow { to { width: var(--pct); } }
.grp__v {
  font-size: var(--f-sm); font-weight: 800; text-align: right;
  color: var(--accent-text); font-variant-numeric: tabular-nums;
}
.grp__d { grid-column: 2 / 5; font-size: var(--f-label); color: var(--t-secondary); line-height: 1.55; }

.grp__foot {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: clamp(20px, 2.4vw, 28px) 0 0; text-align: center;
  font-size: var(--f-label); color: var(--t-muted); font-variant-numeric: tabular-nums;
}
.grp__foot svg { color: var(--t-muted); flex: none; }

@media (max-width: 620px) {
  .grp__list li { grid-template-columns: auto 1fr auto; }
  .grp__bar { grid-column: 1 / 4; }
  .grp__d { grid-column: 1 / 4; }
}
@media (prefers-reduced-motion: reduce) { .grp__bar i { animation: none; width: var(--pct); } }

/* ── 3 · Ask in plain English ──────────────────────────────────────────── */
.ask__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.ask__head .eyebrow { justify-content: center; }
.ask__head .h2 { margin: 12px 0 0; }
.ask__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.ask__rig { max-width: 780px; margin-inline: auto; }
.ask__bar {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 15px 17px; border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--violet) 34%, transparent);
  background: color-mix(in srgb, var(--violet) 6%, transparent);
}
.ask__ai {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(135deg, var(--violet), var(--cyan-600)); color: #fff;
}
.ask__q { margin: 0; font-size: var(--f-xs); font-weight: 600; color: var(--t-primary); min-height: 1.4em; }
.ask__caret {
  display: inline-block; width: 2px; height: 14px; margin-left: 1px;
  background: var(--violet); vertical-align: -2px;
  animation: ask-caret 1.05s steps(1) infinite;
}
@keyframes ask-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.ask__go { display: grid; place-items: center; color: var(--t-muted); }

/* The answer, as a table with headings. Not a spinner, not a grey block. */
.ask__out {
  margin: 14px 0 0; padding: 18px 20px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card);
  opacity: 0; translate: 0 10px;
  transition: opacity .45s var(--ease-out), translate .45s var(--ease-out);
}
.ask__rig.is-answered .ask__out { opacity: 1; translate: 0 0; }
.ask__ot {
  display: flex; align-items: center; gap: 8px; margin: 0 0 13px;
  font-size: var(--f-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-text);
}
.ask__table { width: 100%; border-collapse: collapse; }
.ask__table th, .ask__table td {
  padding: 10px 12px; text-align: left; font-size: var(--f-xs);
  border-bottom: 1px solid var(--border-soft);
}
.ask__table thead th {
  font-size: var(--f-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--t-muted);
}
.ask__table tbody th { font-weight: 700; color: var(--t-primary); }
.ask__table tbody td { color: var(--t-secondary); font-variant-numeric: tabular-nums; }
.ask__table tbody tr:last-child th, .ask__table tbody tr:last-child td { border-bottom: 0; }
.ask__low { color: var(--violet) !important; font-weight: 700; }
.ask__note {
  display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start;
  margin: 13px 0 0; padding-top: 12px; border-top: 1px solid var(--border-soft);
  font-size: var(--f-label); color: var(--t-muted); line-height: 1.55;
}
.ask__note svg { color: var(--t-muted); margin-top: 1px; }
.ask__hint { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ask__caret { animation: none; }
  .ask__out { transition: none; }
}

/* ── 4 · The filter that shortens the list ─────────────────────────────── */
.filt { position: relative; overflow: clip; }
.filt__inner { position: relative; z-index: 1; }
.filt__orb { top: -22%; right: -10%; width: 46vw; opacity: .45; }
.filt__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.filt__head .eyebrow { justify-content: center; }
.filt__eyebrow { color: var(--cyan); }
.filt__h { color: var(--t-on-dark); margin: 12px 0 0; }
.filt__lede { margin: 14px auto 0; max-width: 640px; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }

.filt__rig { max-width: 820px; margin-inline: auto; }
.filt__bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.filt__chip { position: relative; cursor: pointer; }
.filt__chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.filt__chip span {
  display: block; padding: 9px 16px; border-radius: 999px;
  font-size: var(--f-label); font-weight: 650; color: var(--t-on-dark-2);
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05);
  transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
.filt__chip:has(input:checked) span {
  background: var(--cyan); border-color: var(--cyan); color: var(--ink);
}
.filt__chip:has(input:focus-visible) span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 40%, transparent); }

.filt__panel {
  padding: clamp(16px, 2vw, 22px); border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(12px);
}
.filt__pt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding-bottom: 11px; border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--f-label); font-weight: 650; color: var(--t-on-dark);
}
.filt__pt span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.filt__pt svg { color: var(--cyan); }
.filt__count { color: var(--t-on-dark-2); font-variant-numeric: tabular-nums; }
.filt__count b { color: var(--cyan); font-weight: 800; }

.filt__table { width: 100%; border-collapse: collapse; }
.filt__table th, .filt__table td {
  padding: 10px 12px; text-align: left; font-size: var(--f-xs);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.filt__table thead th {
  font-size: var(--f-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--t-on-dark-2);
}
.filt__table tbody th { font-weight: 650; color: var(--t-on-dark); }
.filt__table tbody td { color: var(--t-on-dark-2); }
.filt__due { color: var(--cyan) !important; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Rows leave, which is the whole demonstration. */
.filt__table tbody tr {
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.filt__table tbody tr[hidden] { display: none; }

.filt__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 13px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--f-label); color: var(--t-on-dark-2);
}
.filt__foot > span:first-child { display: inline-flex; align-items: center; gap: 7px; color: var(--cyan); font-weight: 650; }
.filt__note { color: var(--t-on-dark-2); opacity: .75; }

@media (max-width: 520px) { .filt__foot { flex-direction: column; align-items: flex-start; } }

/* ── 5 · The dashboard raises it ───────────────────────────────────────── */
.dash__wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center; max-width: 1020px; margin-inline: auto;
}
.dash__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 48ch; }
.dash__note {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: 20px 0 0; padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-raised);
  font-size: var(--f-label); color: var(--t-secondary); line-height: 1.6;
}
.dash__note svg { color: var(--accent-text); margin-top: 1px; }

.dash__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dash__cards li {
  display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start;
  padding: 17px 19px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card);
  box-shadow: 0 18px 40px -26px rgba(20, 19, 31, .3);
  animation: dash-in .55s var(--ease-out) both; animation-delay: calc(.4s + (var(--i) * .35s));
}
@keyframes dash-in { from { opacity: 0; transform: translateY(-12px) scale(.97); } }
.dash__i {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet);
}
.dash__t { display: grid; gap: 4px; min-width: 0; }
.dash__t strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.dash__t > span { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.55; }
.dash__go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  font-size: var(--f-label); font-weight: 700; color: var(--accent-text) !important;
}

@media (max-width: 860px) { .dash__wrap { grid-template-columns: 1fr; } .dash__lede { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .dash__cards li { animation: none; } }

/* ── 6 · The reports screen ────────────────────────────────────────────── */
.rshot__wrap {
  display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center; max-width: 1140px; margin-inline: auto;
}
.rshot__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 46ch; }
.rshot__pts { list-style: none; margin: clamp(22px, 2.6vw, 30px) 0 0; padding: 0; display: grid; gap: 15px; }
.rshot__pts li { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; }
.rshot__i {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.rshot__t { display: grid; gap: 3px; min-width: 0; }
.rshot__t strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.rshot__t span { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.55; }
.rshot__slot { border-radius: var(--r-lg); box-shadow: 0 30px 70px -36px rgba(20, 19, 31, .5); }
.rshot__slot:has(img, picture, video) { overflow: hidden; }

@media (max-width: 900px) { .rshot__wrap { grid-template-columns: 1fr; } .rshot__lede { max-width: none; } }

/* ── 7 · Who opens what ────────────────────────────────────────────────── */
.rwho__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 38px); }
.rwho__head .eyebrow { justify-content: center; }
.rwho__head .h2 { margin: 12px 0 0; }
.rwho__lede { margin: 14px auto 0; max-width: 600px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.rwho__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 18px);
  max-width: 1040px; margin-inline: auto;
}
.rwho__list li {
  position: relative; padding: clamp(18px, 2.2vw, 24px);
  border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card);
  overflow: hidden;
}
.rwho__list li::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--cyan-600));
  opacity: calc(.9 - (var(--i) * .18));
}
.rwho__i {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
  margin-bottom: 14px;
}
.rwho__h { margin: 0; font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.rwho__b { margin: 8px 0 0; font-size: var(--f-label); line-height: 1.6; color: var(--t-secondary); }

@media (max-width: 900px) { .rwho__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rwho__list { grid-template-columns: 1fr; } }

/* ── 8 · Why the number holds ──────────────────────────────────────────── */
.rtrust { position: relative; overflow: clip; }
.rtrust__inner { position: relative; z-index: 1; }
.rtrust__orb { bottom: -28%; left: -10%; width: 44vw; opacity: .45; }
.rtrust__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.rtrust__head .eyebrow { justify-content: center; }
.rtrust__eyebrow { color: var(--cyan); }
.rtrust__h { color: var(--t-on-dark); margin: 12px 0 0; }
.rtrust__lede { margin: 14px auto 0; max-width: 640px; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }

.rtrust__pts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 22px);
  max-width: 1000px; margin-inline: auto;
}
.rtrust__pts li {
  position: relative; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04);
  overflow: hidden;
}
.rtrust__pts li::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  opacity: calc(.9 - (var(--i) * .22));
}
.rtrust__i {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13);
  color: var(--cyan); margin-bottom: 15px;
}
.rtrust__h3 { margin: 0; font-size: var(--f-sm); font-weight: 700; color: var(--t-on-dark); line-height: 1.32; }
.rtrust__b { margin: 9px 0 0; font-size: var(--f-xs); line-height: 1.62; color: var(--t-on-dark-2); }

@media (max-width: 860px) { .rtrust__pts { grid-template-columns: 1fr; } }

/* ==========================================================================
   TRANSPORT — /features/transport-management-software/

   /apps/parent-app/ owns the parent's half of this: a single route drawn as a
   vertical line of stops with an arrival estimate. None of that is repeated.
   This page is the school's half — a fleet board, an allocation, and a fee.

   Literal drawings, per the standing note: real route names, real counts, real
   amounts marked as examples.

   Only theme-flipping tokens on light surfaces.
   ========================================================================== */

/* ── 1 · Hero: the fleet board ─────────────────────────────────────────── */
.tbus__grid { align-items: center; }
.tbus__board {
  padding: clamp(16px, 2vw, 22px); border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(14px);
  box-shadow: 0 26px 64px -32px rgba(0, 0, 0, .75);
}
.tbus__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 13px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.tbus__tl { font-size: var(--f-xs); font-weight: 650; color: var(--t-on-dark); }
.tbus__tt { font-size: var(--f-label); color: var(--t-on-dark-2); font-variant-numeric: tabular-nums; }
.tbus__tt b { color: var(--cyan); font-weight: 800; }

.tbus__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tbus__row {
  display: grid; grid-template-columns: auto 62px 34px 1fr auto; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09);
  animation: tbus-in .45s var(--ease-out) both; animation-delay: calc(.25s + (var(--i) * .11s));
}
@keyframes tbus-in { from { opacity: 0; translate: 16px 0; } }
.tbus__ico { display: grid; place-items: center; color: var(--t-on-dark-2); }
.tbus__row--running .tbus__ico { color: var(--cyan); }
.tbus__rn { font-size: var(--f-label); font-weight: 700; color: var(--t-on-dark); }
.tbus__rs {
  font-size: 10px; font-weight: 700; text-align: center; color: var(--t-on-dark-2);
  font-variant-numeric: tabular-nums;
}
.tbus__rw { font-size: 10px; color: var(--t-on-dark-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A word, not a coloured dot. A status you have to decode is not a status. */
.tbus__rt {
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 9px; font-weight: 700; letter-spacing: .03em;
  background: rgba(255, 255, 255, .09); color: var(--t-on-dark-2);
}
.tbus__row--running .tbus__rt { background: color-mix(in srgb, var(--cyan) 24%, transparent); color: var(--cyan); }
.tbus__row--arrived .tbus__rt { background: color-mix(in srgb, var(--violet) 32%, transparent); color: #D6CEFF; }

@media (max-width: 900px) { .tbus__art { margin-top: 30px; } }
@media (max-width: 420px) {
  .tbus__row { grid-template-columns: auto 1fr auto; }
  .tbus__rs, .tbus__rw { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tbus__row { animation: none; } }

/* ── 2 · Bus holds route holds stop ────────────────────────────────────── */
.trt__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.trt__head .eyebrow { justify-content: center; }
.trt__head .h2 { margin: 12px 0 0; }
.trt__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

/* Nested boxes, because the point is containment. Three cards side by side
   would say these are peers, which is the opposite of the argument. */
.trt__nest { max-width: 720px; margin-inline: auto; }
.trt__lvl {
  padding: clamp(16px, 2vw, 22px); border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
.trt__lvl--bus   { background: var(--s-raised); }
.trt__lvl--route { margin-top: 14px; background: var(--s-card); border-color: color-mix(in srgb, var(--cyan-600) 26%, transparent); }
.trt__lvl--stop  { margin-top: 14px; background: color-mix(in srgb, var(--cyan-600) 8%, transparent); border-color: color-mix(in srgb, var(--cyan-600) 48%, transparent); }
.trt__lk {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: var(--f-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--t-muted);
}
.trt__lvl--stop .trt__lk { color: var(--accent-text); }
.trt__lk svg { color: var(--accent-text); }
.trt__lv { margin: 7px 0 0; font-size: var(--f-sm); font-weight: 700; color: var(--t-primary); }
.trt__ln { margin: 7px 0 0; font-size: var(--f-label); color: var(--t-secondary); }

.trt__foot {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  max-width: 660px; margin: clamp(22px, 2.6vw, 32px) auto 0;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-raised);
  font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6;
}
.trt__foot svg { color: var(--accent-text); margin-top: 1px; }

/* ── 3 · Who is at which stop ──────────────────────────────────────────── */
.tstop__wrap {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center; max-width: 1040px; margin-inline: auto;
}
.tstop__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 48ch; }
.tstop__note {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: 20px 0 0; padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-raised);
  font-size: var(--f-label); color: var(--t-muted); line-height: 1.6;
}
.tstop__note svg { color: var(--t-muted); margin-top: 1px; }

.tstop__list { position: relative; list-style: none; margin: 0; padding: 0 0 0 22px; display: grid; gap: 14px; }
.tstop__list::before {
  content: ""; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 2px;
  background: linear-gradient(180deg, var(--cyan-600), color-mix(in srgb, var(--violet) 60%, transparent));
}
.tstop__list li {
  position: relative; padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
  animation: tstop-in .45s var(--ease-out) both; animation-delay: calc(var(--i) * .12s);
}
@keyframes tstop-in { from { opacity: 0; translate: 10px 0; } }
.tstop__pin {
  position: absolute; left: -22px; top: 18px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--s-card); border: 3px solid var(--cyan-600);
}
.tstop__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tstop__head b { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.tstop__head i { font-style: normal; font-size: 10px; color: var(--t-muted); font-variant-numeric: tabular-nums; }
.tstop__kids { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.tstop__kids span {
  padding: 4px 9px; border-radius: 6px;
  font-size: 10px; font-weight: 650;
  background: color-mix(in srgb, var(--cyan-600) 11%, transparent); color: var(--accent-text);
  animation: tstop-kid .35s var(--ease-out) both;
  animation-delay: calc(.2s + (var(--i) * .12s) + (var(--k) * .05s));
}
@keyframes tstop-kid { from { opacity: 0; scale: .85; } }

@media (max-width: 880px) { .tstop__wrap { grid-template-columns: 1fr; } .tstop__lede { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .tstop__list li, .tstop__kids span { animation: none; } }

/* ── 4 · The route fee ─────────────────────────────────────────────────── */
.tfee { position: relative; overflow: clip; }
.tfee__inner { position: relative; z-index: 1; }
.tfee__orb { top: -22%; left: -10%; width: 46vw; opacity: .45; }
.tfee__wrap {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center; max-width: 1040px; margin-inline: auto;
}
.tfee__eyebrow { color: var(--cyan); }
.tfee__h { color: var(--t-on-dark); margin: 12px 0 0; }
.tfee__lede { margin: 16px 0 0; font-size: var(--f-sm); line-height: 1.7; color: var(--t-on-dark-2); max-width: 52ch; }
.tfee__note {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04);
  font-size: var(--f-label); line-height: 1.6; color: var(--t-on-dark-2);
}
.tfee__note svg { color: var(--cyan); margin-top: 1px; }

.tfee__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.tfee__rows li {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .05);
  animation: tfee-in .45s var(--ease-out) both; animation-delay: calc(var(--i) * .1s);
}
@keyframes tfee-in { from { opacity: 0; translate: 0 8px; } }
.tfee__rn { display: inline-flex; align-items: center; gap: 8px; font-size: var(--f-xs); font-weight: 700; color: var(--t-on-dark); }
.tfee__rn svg { color: var(--cyan); }
.tfee__km { font-size: 10px; color: var(--t-on-dark-2); font-variant-numeric: tabular-nums; }
.tfee__amt {
  font-size: var(--f-sm); font-weight: 800; color: var(--cyan);
  font-variant-numeric: tabular-nums; min-width: 54px; text-align: right;
}

.tfee__into { display: grid; place-items: center; height: 44px; position: relative; color: var(--cyan); }
.tfee__dot {
  position: absolute; left: 50%; translate: -50% 0;
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  animation: tfee-drop 2.4s var(--ease-in-out, ease-in-out) infinite;
}
@keyframes tfee-drop { 0% { top: -2px; opacity: 0; } 25%, 70% { opacity: 1; } 100% { top: 40px; opacity: 0; } }

.tfee__ledger {
  padding: 16px 18px; border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--cyan) 34%, transparent);
  background: color-mix(in srgb, var(--cyan) 9%, transparent);
}
.tfee__lt {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 11px;
  font-size: var(--f-label); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cyan);
}
.tfee__ledger ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.tfee__ledger li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: var(--f-xs); color: var(--t-on-dark-2);
}
.tfee__ledger b { color: var(--t-on-dark); font-variant-numeric: tabular-nums; }
.tfee__lf {
  margin: 12px 0 0; padding-top: 11px; border-top: 1px dashed rgba(255, 255, 255, .18);
  font-size: var(--f-label); font-weight: 650; color: var(--cyan);
}

@media (max-width: 880px) { .tfee__wrap { grid-template-columns: 1fr; } .tfee__lede { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .tfee__rows li, .tfee__dot { animation: none; } .tfee__dot { opacity: 0; } }

/* ── 5 · One route, messaged ───────────────────────────────────────────── */
.tmsg__wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center; max-width: 1000px; margin-inline: auto;
}
.tmsg__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 48ch; }
.tmsg__link { display: flex; align-items: center; gap: 9px; margin: 20px 0 0; font-size: var(--f-xs); }
.tmsg__link svg { color: var(--accent-text); flex: none; }
.tmsg__link a { font-weight: 650; color: var(--accent-text); }
.tmsg__link a:hover { text-decoration: underline; }

.tmsg__card {
  padding: 18px 20px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card);
  box-shadow: 0 22px 50px -30px rgba(20, 19, 31, .35);
}
.tmsg__to { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.tmsg__chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  font-size: var(--f-label); font-weight: 700;
  background: color-mix(in srgb, var(--cyan-600) 13%, transparent); color: var(--accent-text);
}
.tmsg__n { font-size: var(--f-label); font-weight: 700; color: var(--t-muted); font-variant-numeric: tabular-nums; }
.tmsg__body {
  margin: 0; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--s-frost); border: 1px solid var(--border-soft);
  font-size: var(--f-xs); line-height: 1.6; color: var(--t-secondary);
}
.tmsg__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px 0 0; font-size: var(--f-label); color: var(--t-muted);
}
.tmsg__meta span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-weight: 700; }

@media (max-width: 860px) { .tmsg__wrap { grid-template-columns: 1fr; } .tmsg__lede { max-width: none; } }

/* ── 6 · Two views ─────────────────────────────────────────────────────── */
.tlive__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.tlive__head .eyebrow { justify-content: center; }
.tlive__head .h2 { margin: 12px 0 0; }
.tlive__lede { margin: 14px auto 0; max-width: 600px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.tlive__pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.2vw, 28px);
  max-width: 880px; margin-inline: auto;
}
.tlive__side {
  padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card);
}
.tlive__side--parent { border-color: color-mix(in srgb, var(--cyan-600) 40%, transparent); }
.tlive__sk {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font-size: var(--f-label); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--t-muted);
}
.tlive__side--parent .tlive__sk { color: var(--accent-text); }
.tlive__sk svg { color: var(--accent-text); }
.tlive__fleet { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 150px; align-content: start; }
.tlive__fleet li {
  display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center;
  padding: 9px 12px; border-radius: 8px;
  background: var(--s-frost); border: 1px solid var(--border-soft);
  font-size: var(--f-label); font-weight: 650; color: var(--t-secondary);
  animation: tlive-in .4s var(--ease-out) both; animation-delay: calc(var(--i) * .08s);
}
@keyframes tlive-in { from { opacity: 0; translate: 0 6px; } }
.tlive__fleet li span { display: grid; place-items: center; color: var(--t-muted); }
.tlive__fleet li.is-on {
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent);
  border-color: color-mix(in srgb, var(--cyan-600) 45%, transparent); color: var(--accent-text);
}
.tlive__fleet li.is-on span { color: var(--accent-text); }
.tlive__sb { margin: 12px 0 0; font-size: var(--f-label); color: var(--t-secondary); line-height: 1.55; }
.tlive__go { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: var(--f-label); }
.tlive__go a { font-weight: 650; color: var(--accent-text); }
.tlive__go a:hover { text-decoration: underline; }
.tlive__go svg { color: var(--accent-text); }

@media (max-width: 700px) { .tlive__pair { grid-template-columns: 1fr; } .tlive__fleet { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .tlive__fleet li { animation: none; } }

/* ── 7 · Seven of seventy-three ────────────────────────────────────────── */
.trep__wrap {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center; max-width: 1020px; margin-inline: auto;
}
.trep__big { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 0; }
.trep__n {
  font-size: clamp(3.4rem, 8vw, 5.4rem); font-weight: 800; line-height: .85; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 2px var(--accent-text); paint-order: stroke fill;
}
.trep__of { font-size: var(--f-sm); font-weight: 650; color: var(--t-muted); }
.trep__h { margin: 14px 0 0; }
.trep__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 48ch; }
.trep__link { display: flex; align-items: center; gap: 9px; margin: 20px 0 0; font-size: var(--f-xs); }
.trep__link svg { color: var(--accent-text); flex: none; }
.trep__link a { font-weight: 650; color: var(--accent-text); }
.trep__link a:hover { text-decoration: underline; }

.trep__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.trep__list li {
  display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start;
  padding: 15px 17px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
}
.trep__i {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.trep__t { display: grid; gap: 3px; min-width: 0; }
.trep__t strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.trep__t span { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.55; }

@media (max-width: 880px) { .trep__wrap { grid-template-columns: 1fr; } .trep__lede { max-width: none; } }

/* ── 8 · On its own ────────────────────────────────────────────────────── */
.talone { position: relative; overflow: clip; }
.talone__inner { position: relative; z-index: 1; }
.talone__orb { bottom: -30%; right: -10%; width: 46vw; opacity: .5; }
.talone__box {
  position: relative; max-width: 720px; margin-inline: auto; text-align: center;
  padding: clamp(30px, 4vw, 48px) clamp(22px, 3vw, 40px);
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--cyan) 34%, transparent);
  background: rgba(255, 255, 255, .05); backdrop-filter: blur(12px);
}
.talone__ico {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 17px; background: var(--cyan); color: var(--ink);
  box-shadow: 0 0 34px -6px color-mix(in srgb, var(--cyan) 70%, transparent);
}
.talone__eyebrow { color: var(--cyan); justify-content: center; }
.talone__h { color: var(--t-on-dark); margin: 12px 0 0; }
.talone__lede { margin: 16px auto 0; max-width: 54ch; font-size: var(--f-sm); line-height: 1.7; color: var(--t-on-dark-2); }
.talone__small {
  margin: 16px auto 0; max-width: 52ch; padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04);
  font-size: var(--f-label); line-height: 1.6; color: var(--t-on-dark-2);
}
.talone__btns { display: flex; justify-content: center; margin: clamp(22px, 2.6vw, 30px) 0 0; }

/* ==========================================================================
   STUDENT RECORDS — /features/student-information-system/

   /features/admission-management-software/ owns the eight-tab strip and the
   record screenshot. None of that is redrawn here. This page is the record
   over time: written four ways in four books, edited once, six sessions deep,
   and printed as a TC at the end.

   Literal drawings, per the standing note — real field values, real sentences,
   nothing standing in for data.

   Only theme-flipping tokens on light surfaces.
   ========================================================================== */

/* ── 1 · Hero: one record, eight readers ───────────────────────────────── */
.sis__grid { align-items: center; }
.sis__board {
  position: relative; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(14px);
  box-shadow: 0 26px 64px -32px rgba(0, 0, 0, .75);
  text-align: center;
}
.sis__card {
  position: relative; display: inline-grid; justify-items: center; gap: 3px;
  padding: 20px 26px; border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--midnight), var(--indigo));
  box-shadow: 0 20px 44px -22px color-mix(in srgb, var(--indigo) 85%, transparent);
}
.sis__pulse {
  position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--cyan) 55%, transparent);
  animation: sis-pulse 3s var(--ease-out) infinite;
}
@keyframes sis-pulse { 0% { opacity: .9; scale: 1; } 70%, 100% { opacity: 0; scale: 1.1; } }
.sis__ci {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px;
  border-radius: 15px; background: var(--cyan); color: var(--ink);
  box-shadow: 0 0 28px -5px color-mix(in srgb, var(--cyan) 70%, transparent);
}
.sis__ct { margin: 0; font-size: var(--f-xs); font-weight: 750; color: var(--t-on-dark); }
.sis__cd { margin: 0; font-size: var(--f-label); color: var(--t-on-dark-2); }

/* The features reading it, arranged around rather than listed under. */
.sis__readers {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
}
.sis__readers li {
  padding: 7px 12px; border-radius: 999px;
  font-size: var(--f-label); font-weight: 650; color: var(--t-on-dark-2);
  border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05);
  animation: sis-read .45s var(--ease-out) both; animation-delay: calc(.3s + (var(--i) * .07s));
}
@keyframes sis-read { from { opacity: 0; scale: .88; } }
.sis__cap {
  margin: 16px 0 0; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--f-label); color: var(--t-on-dark-2);
}
.sis__cap b { color: var(--cyan); font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) { .sis__art { margin-top: 30px; } }
@media (prefers-reduced-motion: reduce) { .sis__pulse, .sis__readers li { animation: none; } }

/* ── 2 · The same child, four books ────────────────────────────────────── */
.dupe__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.dupe__head .eyebrow { justify-content: center; }
.dupe__head .h2 { margin: 12px 0 0; }
.dupe__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.dupe__books { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; max-width: 840px; margin-inline: auto; }
.dupe__books li {
  padding: 14px 17px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
}
.dupe__bk {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 9px;
  font-size: var(--f-label); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--t-muted);
}
.dupe__bk svg { color: var(--t-muted); }
/* The row, so the four versions line up and the disagreement is readable
   across them rather than described. */
.dupe__row {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 56px;
  gap: 12px; margin: 0; align-items: baseline;
}
.dupe__nm { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.dupe__ph { font-size: var(--f-xs); color: var(--t-secondary); font-variant-numeric: tabular-nums; }
.dupe__cl {
  font-size: var(--f-label); font-weight: 700; text-align: right;
  color: var(--t-secondary);
}
/* The three that disagree with the first row. */
.dupe__books li:nth-child(3) .dupe__nm,
.dupe__books li:nth-child(3) .dupe__ph,
.dupe__books li:nth-child(4) .dupe__nm,
.dupe__books li:nth-child(4) .dupe__ph,
.dupe__books li:nth-child(4) .dupe__cl { color: var(--violet); font-weight: 700; }

.dupe__foot {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  max-width: 700px; margin: clamp(22px, 2.6vw, 32px) auto 0;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px dashed color-mix(in srgb, var(--violet) 36%, transparent);
  background: color-mix(in srgb, var(--violet) 5%, transparent);
  font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6;
}
.dupe__foot svg { color: var(--violet); margin-top: 1px; }

@media (max-width: 560px) {
  .dupe__row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .dupe__ph { grid-column: 1 / 3; }
}

/* ── 3 · Change it once ────────────────────────────────────────────────── */
.one__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.one__head .eyebrow { justify-content: center; }
.one__head .h2 { margin: 12px 0 0; }
.one__lede { margin: 14px auto 0; max-width: 640px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.one__rig {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 3.4vw, 48px); align-items: center; max-width: 1040px; margin-inline: auto;
}
.one__field {
  padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card);
}
.one__fk {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-size: var(--f-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--t-muted);
}
.one__fk svg { color: var(--accent-text); }
/* Old crosses out, new arrives. Two states of one field, not two fields. */
.one__val { position: relative; margin: 0 0 16px; min-height: 2.2em; }
.one__old, .one__new {
  display: block; font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 800;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  transition: opacity var(--d-base) var(--ease-out), translate var(--d-base) var(--ease-out);
}
.one__old { color: var(--t-primary); }
.one__new { position: absolute; inset: 0; color: var(--accent-text); opacity: 0; translate: 0 8px; }
.one__rig.is-changed .one__old { opacity: .35; text-decoration: line-through; text-decoration-color: var(--violet); }
.one__rig.is-changed .one__new { opacity: 1; translate: 0 1.35em; }
.one__rig.is-changed .one__val { min-height: 3.6em; }

.one__btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 18px; border-radius: 999px; border: 0;
  background: linear-gradient(135deg, var(--violet), var(--cyan-600)); color: #fff;
  font: inherit; font-size: var(--f-xs); font-weight: 700;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--cyan-600) 80%, transparent);
}
.one__btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.one__note {
  display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start;
  margin: 14px 0 0; font-size: var(--f-label); color: var(--t-muted); line-height: 1.55;
}
.one__note svg { color: var(--t-muted); margin-top: 1px; }

/* The five that were already reading it. Hidden state is the disclosure. */
.one__uses { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.one__uses li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
  transition: border-color var(--d-base) var(--ease-out);
}
.one__rig.is-changed .one__uses li { border-color: color-mix(in srgb, var(--cyan-600) 42%, transparent); }
.one__ui {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.one__ut { display: grid; gap: 2px; min-width: 0; }
.one__ut strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.one__ut span { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.5; }
.one__un {
  font-size: var(--f-label); font-weight: 700; white-space: nowrap;
  color: var(--t-muted); font-variant-numeric: tabular-nums;
  transition: color var(--d-base) var(--ease-out);
}
.one__rig.is-changed .one__un {
  color: var(--accent-text);
  animation: one-flip .5s var(--ease-out) both;
  animation-delay: calc(var(--i) * .1s);
}
@keyframes one-flip { from { opacity: 0; translate: 0 -6px; } }

@media (max-width: 880px) { .one__rig { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .one__uses li { grid-template-columns: auto 1fr; } .one__un { grid-column: 2; } }
@media (prefers-reduced-motion: reduce) {
  .one__old, .one__new, .one__un { transition: none; animation: none; }
}

/* ── 4 · Six years, one record ─────────────────────────────────────────── */
.life { position: relative; overflow: clip; }
.life__inner { position: relative; z-index: 1; }
.life__orb { top: -22%; right: -10%; width: 46vw; opacity: .45; }
.life__wrap {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center; max-width: 1040px; margin-inline: auto;
}
.life__eyebrow { color: var(--cyan); }
.life__h { color: var(--t-on-dark); margin: 12px 0 0; }
.life__lede { margin: 16px 0 0; font-size: var(--f-sm); line-height: 1.7; color: var(--t-on-dark-2); max-width: 52ch; }
.life__note {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04);
  font-size: var(--f-label); line-height: 1.6; color: var(--t-on-dark-2);
}
.life__note svg { color: var(--cyan); margin-top: 1px; }

/* Sessions stacking onto one card. Not another horizontal rail — this site
   has three of those already. */
.life__stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.life__stack li {
  display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 15px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .11); background: rgba(255, 255, 255, .05);
  animation: life-in .45s var(--ease-out) both; animation-delay: calc(var(--i) * .09s);
}
@keyframes life-in { from { opacity: 0; translate: 0 -8px; } }
.life__stack li.is-marked {
  border-color: color-mix(in srgb, var(--cyan) 40%, transparent);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
}
.life__yr { font-size: 10px; font-weight: 750; color: var(--cyan); font-variant-numeric: tabular-nums; }
.life__cl { font-size: var(--f-xs); font-weight: 650; color: var(--t-on-dark); }
.life__tag {
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 9px; font-weight: 700;
  background: rgba(255, 255, 255, .12); color: var(--t-on-dark-2);
}

@media (max-width: 880px) { .life__wrap { grid-template-columns: 1fr; } .life__lede { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .life__stack li { animation: none; } }

/* ── 5 · Finding one child ─────────────────────────────────────────────── */
.find__wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center; max-width: 1000px; margin-inline: auto;
}
.find__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 48ch; }

.find__box {
  padding: clamp(18px, 2.2vw, 26px); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card);
}
.find__bar {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  padding: 12px 15px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-frost);
  font-size: var(--f-xs); color: var(--t-primary);
}
.find__bar svg { color: var(--t-muted); flex: none; }
.find__bar span { font-weight: 650; }
.find__caret {
  display: inline-block; width: 2px; height: 14px; background: var(--accent);
  animation: find-caret 1.05s steps(1) infinite;
}
@keyframes find-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* Exactly one hit, which is the argument. */
.find__hit {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  margin: 0; padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--cyan-600) 42%, transparent);
  background: color-mix(in srgb, var(--cyan-600) 7%, transparent);
}
.find__hi {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: color-mix(in srgb, var(--cyan-600) 14%, transparent); color: var(--accent-text);
}
.find__ht { display: grid; gap: 2px; min-width: 0; }
.find__ht strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.find__ht span { font-size: var(--f-label); color: var(--t-secondary); }
.find__one {
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 10px; font-weight: 700;
  background: var(--s-pure); border: 1px solid var(--border); color: var(--accent-text);
}
.find__ways { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.find__ways li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  font-size: 10px; font-weight: 650; color: var(--t-secondary);
  background: var(--s-frost); border: 1px solid var(--border-soft);
  animation: find-way .4s var(--ease-out) both; animation-delay: calc(.2s + (var(--i) * .07s));
}
@keyframes find-way { from { opacity: 0; scale: .9; } }
.find__ways svg { color: var(--t-muted); }

@media (max-width: 860px) { .find__wrap { grid-template-columns: 1fr; } .find__lede { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .find__caret, .find__ways li { animation: none; } }

/* ── 6 · The certificate ───────────────────────────────────────────────── */
.tc__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.tc__head .eyebrow { justify-content: center; }
.tc__head .h2 { margin: 12px 0 0; }
.tc__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.tc__rig {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 3.4vw, 48px); align-items: center; max-width: 1000px; margin-inline: auto;
}
/* A sheet of paper, because that is what it is. */
.tc__paper {
  padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-sm);
  background: var(--s-pure); border: 1px solid var(--border);
  box-shadow: 0 24px 54px -30px rgba(20, 19, 31, .4);
  rotate: -1.2deg;
}
.tc__pt {
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--border);
  text-align: center; font-size: var(--f-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--t-primary);
}
.tc__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.tc__lines li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: var(--f-label); color: var(--t-muted);
  border-bottom: 1px dotted var(--border); padding-bottom: 6px;
}
.tc__lines b { font-size: var(--f-xs); color: var(--t-primary); text-align: right; }
.tc__seal {
  display: inline-flex; align-items: center; gap: 7px; margin: 14px 0 0;
  padding: 6px 12px; border-radius: 999px;
  font-size: var(--f-label); font-weight: 700;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}

.tc__carries { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tc__carries li {
  display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
}
.tc__arch { border-style: dashed !important; }
.tc__i {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; flex: none;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.tc__t { display: grid; gap: 3px; min-width: 0; }
.tc__t strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.tc__t span { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.55; }

.tc__foot {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: clamp(22px, 2.6vw, 32px) 0 0; font-size: var(--f-xs);
}
.tc__foot svg { color: var(--accent-text); flex: none; }
.tc__foot a { font-weight: 650; color: var(--accent-text); }
.tc__foot a:hover { text-decoration: underline; }

@media (max-width: 860px) { .tc__rig { grid-template-columns: 1fr; } .tc__paper { rotate: 0deg; } }

/* ── 7 · Sixteen of seventy-three ──────────────────────────────────────── */
.srep__wrap {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center; max-width: 1020px; margin-inline: auto;
}
.srep__big { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 0; }
.srep__n {
  font-size: clamp(3.2rem, 7.5vw, 5rem); font-weight: 800; line-height: .85; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 2px var(--accent-text); paint-order: stroke fill;
}
.srep__of { font-size: var(--f-sm); font-weight: 650; color: var(--t-muted); }
.srep__h { margin: 14px 0 0; }
.srep__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 48ch; }
.srep__link { display: flex; align-items: center; gap: 9px; margin: 20px 0 0; font-size: var(--f-xs); }
.srep__link svg { color: var(--accent-text); flex: none; }
.srep__link a { font-weight: 650; color: var(--accent-text); }
.srep__link a:hover { text-decoration: underline; }

.srep__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.srep__list li {
  display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
}
.srep__i {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; flex: none;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.srep__t { display: grid; gap: 3px; min-width: 0; }
.srep__t strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.srep__t span { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.55; }

@media (max-width: 880px) { .srep__wrap { grid-template-columns: 1fr; } .srep__lede { max-width: none; } }

/* ── 8 · One record, not one audience ──────────────────────────────────── */
.ssafe { position: relative; overflow: clip; }
.ssafe__inner { position: relative; z-index: 1; }
.ssafe__orb { bottom: -28%; left: -10%; width: 44vw; opacity: .45; }
.ssafe__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.ssafe__head .eyebrow { justify-content: center; }
.ssafe__eyebrow { color: var(--cyan); }
.ssafe__h { color: var(--t-on-dark); margin: 12px 0 0; }
.ssafe__lede { margin: 14px auto 0; max-width: 640px; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }

.ssafe__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 860px; margin-inline: auto; }
.ssafe__rows li {
  display: grid; grid-template-columns: 150px 1fr; align-items: baseline; gap: 16px;
  padding: 14px 18px; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04);
}
.ssafe__who { font-size: var(--f-xs); font-weight: 700; color: var(--cyan); }
.ssafe__what { font-size: var(--f-xs); color: var(--t-on-dark-2); line-height: 1.55; }

.ssafe__foot {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  max-width: 700px; margin: clamp(22px, 2.6vw, 32px) auto 0;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04);
  font-size: var(--f-label); color: var(--t-on-dark-2); line-height: 1.6;
}
.ssafe__foot svg { color: var(--cyan); margin-top: 1px; }

@media (max-width: 620px) { .ssafe__rows li { grid-template-columns: 1fr; gap: 4px; } }

/* ==========================================================================
   STAFF & HR — /features/staff-hr-payroll-management/

   No payroll anywhere. See the registry note — salary processing is not in the
   product documentation and this page does not imply it.

   Territory: the attendance page owns staff face marking, the school app owns
   the eleven roles and approvals, the timetable owns the generator. What is
   left is the employee record and the mapping three other features stand on.

   Only theme-flipping tokens on light surfaces.
   ========================================================================== */

/* ── 1 · Hero: the personnel card ──────────────────────────────────────── */
.hr__grid { align-items: center; }
.hr__card {
  padding: clamp(18px, 2.2vw, 24px); border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(14px);
  box-shadow: 0 26px 64px -32px rgba(0, 0, 0, .75);
}
.hr__top {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.hr__av {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px;
  background: linear-gradient(135deg, var(--violet), var(--cyan-600)); color: #fff;
}
.hr__who { display: grid; gap: 1px; min-width: 0; }
.hr__who b { font-size: var(--f-xs); font-weight: 700; color: var(--t-on-dark); }
.hr__who i { font-style: normal; font-size: 10px; color: var(--t-on-dark-2); }
.hr__on {
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 9px; font-weight: 700;
  background: color-mix(in srgb, var(--cyan) 24%, transparent); color: var(--cyan);
}

.hr__holds { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hr__holds li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 9px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09);
  animation: hr-in .45s var(--ease-out) both; animation-delay: calc(.25s + (var(--i) * .1s));
}
@keyframes hr-in { from { opacity: 0; translate: 12px 0; } }
.hr__hi { display: grid; place-items: center; color: var(--cyan); }
.hr__hk { font-size: 10px; font-weight: 600; color: var(--t-on-dark-2); }
.hr__hv { font-size: var(--f-label); font-weight: 700; color: var(--t-on-dark); white-space: nowrap; }
.hr__cap {
  margin: 13px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--f-label); color: var(--t-on-dark-2); line-height: 1.5;
}

@media (max-width: 900px) { .hr__art { margin-top: 30px; } }
@media (prefers-reduced-motion: reduce) { .hr__holds li { animation: none; } }

/* ── 2 · Four questions ────────────────────────────────────────────────── */
.drawer__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.drawer__head .eyebrow { justify-content: center; }
.drawer__head .h2 { margin: 12px 0 0; }
.drawer__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.drawer__asks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 860px; margin-inline: auto; }
.drawer__asks li {
  display: grid; gap: 8px;
  padding: 17px 19px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
}
/* The question as a question, in the school's own voice. */
.drawer__q {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  font-size: var(--f-sm); font-weight: 700; color: var(--t-primary);
}
.drawer__qm {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-size: 13px; font-weight: 800;
  background: color-mix(in srgb, var(--violet) 13%, transparent); color: var(--violet);
}
.drawer__a {
  padding-left: 38px; font-size: var(--f-xs); line-height: 1.6; color: var(--t-secondary);
}

.drawer__foot {
  display: flex; align-items: flex-start; justify-content: center; gap: 9px;
  max-width: 640px; margin: clamp(22px, 2.6vw, 32px) auto 0; text-align: center;
  font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6;
}
.drawer__foot svg { color: var(--accent-text); flex: none; margin-top: 2px; }

@media (max-width: 520px) { .drawer__a { padding-left: 0; } }

/* ── 3 · Three things a school keeps ───────────────────────────────────── */
.hrec__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.hrec__head .eyebrow { justify-content: center; }
.hrec__head .h2 { margin: 12px 0 0; }
.hrec__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.hrec__cols {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 22px);
  max-width: 1000px; margin-inline: auto;
}
.hrec__cols > li {
  position: relative; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card); overflow: hidden;
}
.hrec__cols > li::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--cyan-600));
  opacity: calc(.9 - (var(--i) * .22));
}
.hrec__i {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
  margin-bottom: 14px;
}
.hrec__h { margin: 0 0 11px; font-size: var(--f-sm); font-weight: 700; color: var(--t-primary); }
.hrec__fields { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hrec__fields li {
  position: relative; padding-left: 17px;
  font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.55;
}
.hrec__fields li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* The payroll caveat. Deliberately not a footnote in grey 9px — a school
   should not be able to miss it. */
.hrec__foot {
  display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start;
  max-width: 720px; margin: clamp(22px, 2.6vw, 32px) auto 0;
  padding: 15px 18px; border-radius: var(--r-md);
  border: 1px dashed color-mix(in srgb, var(--violet) 40%, transparent);
  background: color-mix(in srgb, var(--violet) 5%, transparent);
  font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.62;
}
.hrec__foot svg { color: var(--violet); margin-top: 2px; }
.hrec__foot a { font-weight: 700; color: var(--violet); }
.hrec__foot a:hover { text-decoration: underline; }

@media (max-width: 860px) { .hrec__cols { grid-template-columns: 1fr; } }

/* ── 4 · One mapping, three readers ────────────────────────────────────── */
.map2 { position: relative; overflow: clip; }
.map2__inner { position: relative; z-index: 1; }
.map2__orb { top: -22%; left: -10%; width: 46vw; opacity: .45; }
.map2__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.4vw, 44px); }
.map2__head .eyebrow { justify-content: center; }
.map2__eyebrow { color: var(--cyan); }
.map2__h { color: var(--t-on-dark); margin: 12px 0 0; }
.map2__lede { margin: 14px auto 0; max-width: 620px; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }

.map2__rig {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 3.4vw, 48px); align-items: center; max-width: 1000px; margin-inline: auto;
}
.map2__src {
  padding: clamp(20px, 2.4vw, 26px); border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--midnight), var(--indigo));
  box-shadow: 0 22px 50px -26px color-mix(in srgb, var(--indigo) 85%, transparent);
}
.map2__sk {
  margin: 0 0 13px; font-size: var(--f-label); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cyan);
}
.map2__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.map2__lines li {
  display: grid; gap: 3px;
  padding: 11px 13px; border-radius: 9px; background: rgba(255, 255, 255, .07);
}
.map2__lines b { font-size: var(--f-label); font-weight: 700; color: var(--cyan); }
.map2__lines span { font-size: var(--f-xs); color: var(--t-on-dark); }

.map2__readers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.map2__readers li { position: relative; display: flex; }
.map2__wire {
  position: absolute; left: calc(clamp(14px, 2vw, 26px) * -1); top: 50%;
  width: clamp(14px, 2vw, 26px); height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 65%, transparent), rgba(255, 255, 255, .15));
}
.map2__l {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 13px;
  width: 100%; padding: 15px 17px; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04);
  color: var(--t-on-dark);
  transition: border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.map2__l:hover { border-color: color-mix(in srgb, var(--cyan) 55%, transparent); transform: translateX(4px); }
.map2__i {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: rgba(255, 255, 255, .07); color: var(--cyan);
}
.map2__t { display: grid; gap: 3px; min-width: 0; }
.map2__t strong { font-size: var(--f-xs); font-weight: 700; }
.map2__t span { font-size: var(--f-label); color: var(--t-on-dark-2); line-height: 1.55; }
.map2__go { color: var(--t-on-dark-2); opacity: 0; transition: opacity var(--d-fast) var(--ease-out); margin-top: 3px; }
.map2__l:hover .map2__go { opacity: 1; }

@media (max-width: 880px) {
  .map2__rig { grid-template-columns: 1fr; }
  .map2__wire { display: none; }
}

/* ── 5 · Before first period ───────────────────────────────────────────── */
.absent__wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 56px); align-items: center; max-width: 1020px; margin-inline: auto;
}
.absent__lede { margin: 14px 0 0; font-size: var(--f-sm); line-height: 1.68; color: var(--t-secondary); max-width: 48ch; }
.absent__note {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: 20px 0 0; padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-raised);
  font-size: var(--f-label); color: var(--t-secondary); line-height: 1.6;
}
.absent__note svg { color: var(--accent-text); margin-top: 1px; }

.absent__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.absent__steps li {
  display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: start;
  padding: 15px 17px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
  animation: absent-in .45s var(--ease-out) both; animation-delay: calc(var(--i) * .14s);
}
@keyframes absent-in { from { opacity: 0; translate: 0 8px; } }
.absent__t {
  font-size: var(--f-label); font-weight: 800; color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.absent__b { display: grid; gap: 3px; min-width: 0; }
.absent__b strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.absent__b span { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.55; }

@media (max-width: 860px) { .absent__wrap { grid-template-columns: 1fr; } .absent__lede { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .absent__steps li { animation: none; } }

/* ── 6 · Once it is approved ───────────────────────────────────────────── */
.hleave__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.hleave__head .eyebrow { justify-content: center; }
.hleave__head .h2 { margin: 12px 0 0; }
.hleave__lede { margin: 14px auto 0; max-width: 620px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.hleave__after {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 20px);
  max-width: 1000px; margin-inline: auto;
}
.hleave__after li {
  padding: clamp(20px, 2.4vw, 26px); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card);
}
.hleave__i {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
  margin-bottom: 14px;
}
.hleave__h { margin: 0; font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.hleave__b { margin: 8px 0 0; font-size: var(--f-label); line-height: 1.6; color: var(--t-secondary); }

.hleave__foot {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: clamp(22px, 2.6vw, 32px) 0 0; font-size: var(--f-xs);
}
.hleave__foot svg { color: var(--accent-text); flex: none; }
.hleave__foot a { font-weight: 650; color: var(--accent-text); }
.hleave__foot a:hover { text-decoration: underline; }

@media (max-width: 820px) { .hleave__after { grid-template-columns: 1fr; } }

/* ── 7 · Staff reports ─────────────────────────────────────────────────── */
.hrep__box {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2.2vw, 26px); align-items: start;
  max-width: 860px; margin-inline: auto;
  padding: clamp(22px, 2.8vw, 32px); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card);
}
.hrep__i {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.hrep__h { margin: 0; }
.hrep__b { margin: 12px 0 0; font-size: var(--f-xs); line-height: 1.65; color: var(--t-secondary); }
.hrep__link { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; font-size: var(--f-xs); }
.hrep__link svg { color: var(--accent-text); flex: none; }
.hrep__link a { font-weight: 650; color: var(--accent-text); }
.hrep__link a:hover { text-decoration: underline; }

@media (max-width: 620px) { .hrep__box { grid-template-columns: 1fr; } }

/* ── 8 · Also somebody's data ──────────────────────────────────────────── */
.hsafe { position: relative; overflow: clip; }
.hsafe__inner { position: relative; z-index: 1; }
.hsafe__orb { bottom: -28%; right: -10%; width: 44vw; opacity: .45; }
.hsafe__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.hsafe__head .eyebrow { justify-content: center; }
.hsafe__eyebrow { color: var(--cyan); }
.hsafe__h { color: var(--t-on-dark); margin: 12px 0 0; }
.hsafe__lede { margin: 14px auto 0; max-width: 640px; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }

.hsafe__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 840px; margin-inline: auto; }
.hsafe__rows li {
  display: grid; grid-template-columns: 160px 1fr; align-items: baseline; gap: 16px;
  padding: 15px 18px; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04);
}
.hsafe__who { font-size: var(--f-xs); font-weight: 700; color: var(--cyan); }
.hsafe__what { font-size: var(--f-xs); color: var(--t-on-dark-2); line-height: 1.55; }

@media (max-width: 620px) { .hsafe__rows li { grid-template-columns: 1fr; gap: 4px; } }

/* ==========================================================================
   ABOUT — /about-us/

   The first page here where photographs carry the argument and the drawings
   step back: sixteen image slots, zero decorative SVG. A trust page rendered
   in vector shapes is not a trust page — it is the same abstraction the rest
   of the site uses to explain software, pointed at people, where it stops
   working. So the CSS below frames pictures rather than draws anything.

   Only theme-flipping tokens on light surfaces (--n-300/--n-400/--n-600 do
   not flip, and three dark-mode contrast bugs came from forgetting that).
   ========================================================================== */

/* ── 1 · Hero: one wide photograph, copy as its caption ────────────────── */
.abh { position: relative; overflow: clip; }
.abh__inner { position: relative; z-index: 1; }
.abh__orb { top: -24%; right: -8%; width: 50vw; opacity: .5; }
.abh__copy { max-width: 760px; margin-bottom: clamp(26px, 3.4vw, 42px); }
.abh__eyebrow { color: var(--cyan); }
.abh__h { color: var(--t-on-dark); margin: 14px 0 0; }
.abh__lede { margin: 18px 0 0; color: var(--t-on-dark-2); }

.abh__shot { position: relative; }
/* Shadow only once a real photograph lands — a dashed placeholder casting a
   drop shadow reads as a broken image. */
.abh__slot:has(img, picture, video) { box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .78); }

.abh__facts {
  list-style: none; margin: clamp(20px, 2.6vw, 30px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 22px);
}
.abh__facts li {
  display: grid; gap: 3px;
  padding: 15px 18px; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04);
}
.abh__facts b { font-size: var(--f-xs); font-weight: 700; color: var(--cyan); }
.abh__facts span { font-size: var(--f-xs); color: var(--t-on-dark-2); line-height: 1.5; }

@media (max-width: 700px) { .abh__facts { grid-template-columns: 1fr; } }

/* ── 2 · Three products ────────────────────────────────────────────────── */
.abw__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.abw__head .eyebrow { justify-content: center; }
.abw__head .h2 { margin: 12px 0 0; }
.abw__lede { margin: 14px auto 0; max-width: 600px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.abw__list { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 10px; max-width: 880px; }
.abw__list li {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center;
  gap: clamp(14px, 2vw, 26px);
  padding: 18px 20px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card);
}
.abw__list li.is-this {
  border-color: color-mix(in srgb, var(--cyan-600) 42%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cyan-600) 7%, transparent), transparent 62%),
    var(--s-card);
}
/* Real logo files at their own proportions, boxed to one optical height.
   Both marks stack in the same grid cell so the row height never changes when
   the theme swaps which one is showing. */
.abw__logo { display: grid; place-items: center; }
.abw__mark { grid-area: 1 / 1; max-width: 100%; max-height: 32px; width: auto; }
/* --both is the mark that ships in one version only (Edoovi HMS) and reads on
   either surface, so it must survive the swap rather than be hidden by it. */
.abw__mark--white { display: none; }
.abw__mark--both  { display: block; }
:root[data-theme="dark"] .abw__mark--ink  { display: none; }
:root[data-theme="dark"] .abw__mark--white { display: block; }
.abw__t { display: grid; gap: 3px; min-width: 0; }
.abw__t strong { font-size: var(--f-sm); font-weight: 700; color: var(--t-primary); }
.abw__t span { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.55; }
.abw__here {
  padding: 6px 13px; border-radius: var(--r-pill); white-space: nowrap;
  font-size: var(--f-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--cyan-600) 14%, transparent); color: var(--accent-text);
}
.abw__go {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px;
  background: var(--s-frost); border: 1px solid var(--border); color: var(--t-muted);
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out);
}
.abw__go:hover { background: var(--accent); border-color: var(--accent); color: #04121F; }

/* On a phone the three columns become two rows: the mark and its badge share
   the top line, and the sentence gets the full width underneath. Leaving the
   badge in the text's row squeezed a two-line description into four. */
@media (max-width: 640px) {
  .abw__list li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; align-items: center; }
  .abw__logo { grid-area: 1 / 1; justify-items: start; }
  .abw__here,
  .abw__go   { grid-area: 1 / 2; }
  .abw__t    { grid-area: 2 / 1 / 3 / -1; }
}

/* ── 3 · The logo wall — schools, never a count ────────────────────────── */
.abl__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.abl__head .eyebrow { justify-content: center; }
.abl__head .h2 { margin: 12px 0 0; }
.abl__lede { margin: 14px auto 0; max-width: 640px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.abl__wall {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px);
  max-width: 1000px;
}
.abl__wall li {
  display: grid; align-content: center; justify-items: center; gap: 10px;
  padding: clamp(14px, 1.8vw, 22px) clamp(10px, 1.4vw, 16px); border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
  transition: border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.abl__wall li:hover { border-color: color-mix(in srgb, var(--cyan-600) 40%, transparent); transform: translateY(-3px); }

/* Eleven school marks drawn by eleven different designers arrive at eleven
   different weights. Greyscale until hover is what makes them read as one
   wall; `contain` inside a fixed box is what stops a tall crest and a wide
   wordmark rendering at wildly different optical sizes. */
.abl__logo {
  width: auto; height: 52px; max-width: 100%; object-fit: contain;
  filter: grayscale(1); opacity: .72;
  transition: filter var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out);
}
.abl__wall li:hover .abl__logo { filter: grayscale(0); opacity: 1; }
/* Every one of these marks is dark ink on transparent, so on a dark card they
   disappear. Same inversion the homepage marquee uses. */
:root[data-theme="dark"] .abl__logo { filter: grayscale(1) invert(1) brightness(1.6); opacity: .68; }
:root[data-theme="dark"] .abl__wall li:hover .abl__logo { filter: invert(1) brightness(1.7); opacity: .95; }

/* The name is the point — a logo nobody recognises proves nothing without it. */
.abl__name {
  font-size: var(--f-label); line-height: 1.4; text-align: center;
  color: var(--t-secondary); text-wrap: balance;
}

.abl__foot {
  display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap;
  margin: clamp(22px, 2.6vw, 32px) auto 0; max-width: 720px; text-align: center;
  font-size: var(--f-xs); color: var(--t-secondary);
}
.abl__foot svg { color: var(--accent-text); flex: none; }
.abl__foot a { font-weight: 650; color: var(--accent-text); }
.abl__foot a:hover { text-decoration: underline; }

@media (max-width: 820px) { .abl__wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .abl__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 4 · The people ────────────────────────────────────────────────────── */
.abp { position: relative; overflow: clip; }
.abp__inner { position: relative; z-index: 1; }
.abp__orb { top: -20%; left: -10%; width: 46vw; opacity: .45; }
.abp__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.4vw, 44px); }
.abp__head .eyebrow { justify-content: center; }
.abp__eyebrow { color: var(--cyan); }
.abp__h { color: var(--t-on-dark); margin: 12px 0 0; }
.abp__lede { margin: 14px auto 0; max-width: 640px; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }

.abp__grid {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 22px);
  max-width: 1040px;
}
.abp__grid > li { display: grid; align-content: start; gap: 4px; }
.abp__slot { margin-bottom: 12px; }
.abp__role { margin: 0; font-size: var(--f-sm); font-weight: 700; color: var(--t-on-dark); }
.abp__note { margin: 0; font-size: var(--f-xs); color: var(--t-on-dark-2); line-height: 1.55; }

.abp__foot {
  display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap;
  margin: clamp(24px, 3vw, 36px) auto 0; max-width: 720px; text-align: center;
  font-size: var(--f-xs); color: var(--t-on-dark-2);
}
.abp__foot svg { color: var(--cyan); flex: none; }
.abp__foot a { color: var(--cyan); font-weight: 650; }
.abp__foot a:hover { text-decoration: underline; }

/* Stays two-up all the way down. Four square portraits stacked one per row is
   four screens of scrolling to learn four job titles. */
@media (max-width: 880px) { .abp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 5 · Three doors you can knock on ──────────────────────────────────── */
.abo__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.abo__head .eyebrow { justify-content: center; }
.abo__head .h2 { margin: 12px 0 0; }
.abo__lede { margin: 14px auto 0; max-width: 640px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.abo__grid {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px);
  max-width: 1060px;
}
.abo__grid > li {
  display: grid; grid-template-rows: auto 1fr;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--s-card);
}
/* The photograph is the card's lid, not its body — the rule keeps a pale office
   wall from bleeding into the address block under it. */
.abo__slot { border-bottom: 1px solid var(--border); }
.abo__body { padding: clamp(16px, 2vw, 22px); display: grid; align-content: start; }
.abo__city {
  display: grid; gap: 2px; margin: 0 0 10px;
  font-size: var(--f-lead); font-weight: 700; color: var(--t-primary); letter-spacing: -.01em;
}
.abo__city span {
  font-size: var(--f-label); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-text);
}
.abo__addr { font-style: normal; font-size: var(--f-xs); line-height: 1.65; color: var(--t-secondary); }
.abo__map {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  padding: 9px 15px; border-radius: var(--r-pill);
  font-size: var(--f-xs); font-weight: 650;
  border: 1px solid var(--border); background: var(--s-frost); color: var(--accent-text);
  transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.abo__map:hover { border-color: var(--cyan-600); background: var(--s-halo); }
.abo__map svg { flex: none; }

@media (max-width: 900px) { .abo__grid { grid-template-columns: 1fr; max-width: 560px; } }

/* ── 6 · Four things you can check elsewhere ───────────────────────────── */
.abhow__head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.abhow__head .eyebrow { justify-content: center; }
.abhow__head .h2 { margin: 12px 0 0; }
.abhow__lede { margin: 14px auto 0; max-width: 640px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.abhow__list {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px);
  max-width: 1000px;
}
.abhow__list li {
  position: relative; display: grid; align-content: start;
  padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card); overflow: hidden;
}
/* The rule fades card by card, so the four read as a list with a top rather
   than four equal boxes. --i is set inline by the loop. */
.abhow__list li::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--cyan-600));
  opacity: calc(.95 - (var(--i, 0) * .17));
}
.abhow__i {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px;
  background: color-mix(in srgb, var(--cyan-600) 13%, transparent); color: var(--accent-text);
  margin-bottom: 14px;
}
.abhow__h { margin: 0; font-size: var(--f-h4); font-weight: 700; color: var(--t-primary); line-height: 1.3; }
.abhow__b { margin: 9px 0 0; font-size: var(--f-xs); line-height: 1.62; color: var(--t-secondary); }
.abhow__go { margin: 13px 0 0; }
.abhow__go a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--f-xs); font-weight: 650; color: var(--accent-text);
}
.abhow__go a:hover { text-decoration: underline; }
.abhow__go svg { flex: none; }

@media (max-width: 800px) { .abhow__list { grid-template-columns: 1fr; } }

/* ==========================================================================
   TRANSFER CERTIFICATES — /features/transfer-certificate-software/

   The hero carries a photograph, because the subject of this page is not a
   screen — it is the counter on the day a family leaves. Everything below the
   hero is drawn, because the subject there *is* the software.

   Five runtimes: initSeason, initFill, initRoll, initCert, initArc.
   Only theme-flipping tokens on light surfaces.
   ========================================================================== */

/* ── 1 · Hero ──────────────────────────────────────────────────────────── */
.tch__grid { align-items: center; }
.tch__pts {
  list-style: none; margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 0;
  display: grid; gap: 10px;
}
.tch__pts li {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px;
  font-size: var(--f-xs); color: var(--t-on-dark-2);
}
.tch__pi {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13);
  color: var(--cyan); flex: none;
}

.tch__shot { position: relative; min-width: 0; }
/* A tall crop, because the subject is a person at a counter rather than a
   landscape. Shadow only once a real photograph lands — a dashed placeholder
   casting one reads as a broken image. */
.tch__slot { border-radius: var(--r-lg); }
.tch__slot:has(img, picture, video) { box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8); }

.tch__cap {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 0; font-size: var(--f-label); color: var(--t-on-dark-2);
}
.tch__cap svg { color: var(--cyan); flex: none; }

@media (min-width: 980px) {
  .tch__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .tch__shot { max-width: 460px; margin-inline: auto; }
}

/* ── 2 · The year, and where it ends ───────────────────────────────────── */
.rush__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.2vw, 42px); }
.rush__head .eyebrow { justify-content: center; }
.rush__head .h2 { margin: 12px 0 0; }
.rush__lede { margin: 14px auto 0; max-width: 660px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.rush__stage {
  position: relative; max-width: 940px; margin-inline: auto;
  padding: clamp(22px, 3vw, 34px); border-radius: var(--r-xl);
  border: 1px solid var(--border); background: var(--s-card);
  box-shadow: var(--sh-card);
}

.rush__year {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px;
}
.rush__mo {
  display: grid; place-items: center; padding: 11px 2px; border-radius: 10px;
  font-size: var(--f-label); font-weight: 650; letter-spacing: .01em;
  color: var(--t-muted); background: var(--s-frost);
  border: 1px solid transparent;
  opacity: .35;
  transition: opacity .3s var(--ease-out), background .3s var(--ease-out),
              color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.rush__mo.is-lit { opacity: 1; }
/* The last two chips are where the session ends. Not a data claim — a calendar. */
.rush__mo.is-peak.is-lit {
  background: color-mix(in srgb, var(--cyan-600) 15%, transparent);
  border-color: color-mix(in srgb, var(--cyan-600) 45%, transparent);
  color: var(--accent-text);
}

.rush__mark {
  position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin: 12px 0 0; padding-right: 4px;
  font-size: var(--f-label); font-weight: 650; color: var(--accent-text);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.is-peaked .rush__mark { opacity: 1; transform: none; }
.rush__markline {
  flex: 1; height: 1px; max-width: 220px;
  background: linear-gradient(90deg, transparent, var(--cyan-600));
}
.rush__markt { white-space: nowrap; }

.rush__also {
  list-style: none; margin: clamp(22px, 2.6vw, 30px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px);
}
.rush__also li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 15px 16px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-frost);
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.rush__also li.is-on { opacity: 1; transform: none; }
.rush__ai {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.rush__at { display: grid; gap: 2px; min-width: 0; }
.rush__at strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.rush__at span { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.5; }

.rush__foot {
  display: flex; align-items: flex-start; gap: 10px;
  margin: clamp(20px, 2.4vw, 26px) 0 0; padding-top: clamp(18px, 2vw, 22px);
  border-top: 1px solid var(--border);
  font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6;
}
.rush__foot svg { color: var(--accent-text); flex: none; margin-top: 1px; }

@media (max-width: 860px) { .rush__also { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .rush__year { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rush__mark { justify-content: center; }
  .rush__markline { display: none; }
}

/* ── 3 · Where each line comes from ⭐ ─────────────────────────────────── */
.srcs__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.2vw, 44px); }
.srcs__head .eyebrow { justify-content: center; }
.srcs__head .h2 { margin: 12px 0 0; }
.srcs__lede { margin: 14px auto 0; max-width: 660px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.srcs__stage {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 34px); align-items: start;
  max-width: 1060px; margin-inline: auto;
}

/* The three sources */
.srcs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.srcs__src {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px;
  padding: 15px 16px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card);
  transition: border-color .35s var(--ease-out), background .35s var(--ease-out),
              transform .35s var(--ease-out);
}
.srcs__src.is-on {
  border-color: color-mix(in srgb, var(--cyan-600) 55%, transparent);
  transform: translateX(3px);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan-600) 9%, transparent);
}
.srcs__src.is-done { border-color: color-mix(in srgb, var(--cyan-600) 28%, transparent); }
.srcs__si {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
  transition: background .35s var(--ease-out);
}
.srcs__src.is-on .srcs__si { background: var(--accent); color: #04121F; }
.srcs__st { display: grid; gap: 2px; min-width: 0; }
.srcs__st strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.srcs__st span { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.45; }
.srcs__sn {
  display: grid; place-items: center; min-width: 28px; height: 28px; padding-inline: 8px;
  border-radius: 9px; font-size: var(--f-label); font-weight: 750;
  background: var(--s-frost); color: var(--t-muted);
  font-variant-numeric: tabular-nums;
}
.srcs__src.is-on .srcs__sn,
.srcs__src.is-done .srcs__sn { color: var(--accent-text); }

/* Held lines come out of the system; typed lines are the one a person is
   actually doing. A dashed edge is the universal "you fill this in", and it
   reads that way before the animation has fired at all. */
.srcs__src--held  { border-style: solid; }
.srcs__src--typed { border-style: dashed; }

/* The certificate */
.srcs__doc {
  padding: clamp(20px, 2.6vw, 28px); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-pure);
  box-shadow: var(--sh-card);
}
.srcs__doch {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding-bottom: 14px; border-bottom: 2px solid var(--border);
}
.srcs__dochk {
  font-size: var(--f-xs); font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t-primary);
}
.srcs__docn { font-size: var(--f-label); color: var(--t-muted); font-variant-numeric: tabular-nums; }

.srcs__lines { margin: 0; display: grid; gap: 2px; }
.srcs__line {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: baseline; gap: 12px;
  padding: 7px 8px; border-radius: 8px;
  transition: background .3s var(--ease-out);
}
.srcs__line dt { font-size: var(--f-label); color: var(--t-secondary); }
/* The value sits on a ruled line, the way it does on the paper certificate,
   and the rule is what fills. */
.srcs__line dd {
  margin: 0; min-height: 1.35em;
  font-size: var(--f-xs); font-weight: 650; color: var(--t-primary);
  border-bottom: 1px dashed var(--n-300);
  opacity: 0; transform: translateY(3px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out),
              border-color .3s var(--ease-out);
}
.srcs__line.is-filled dd { opacity: 1; transform: none; border-bottom-color: transparent; }
.srcs__line.is-filled { background: color-mix(in srgb, var(--cyan-600) 6%, transparent); }
/* Held lines land in the system's own ink; typed lines land in a person's. */
.srcs__line--held.is-filled dd { color: var(--t-primary); }
.srcs__line--typed.is-filled { background: color-mix(in srgb, var(--violet) 8%, transparent); }
.srcs__line--typed.is-filled dd { color: var(--violet); }

.srcs__done {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 16px 0 0; padding: 8px 14px; border-radius: var(--r-pill);
  font-size: var(--f-label); font-weight: 700;
  background: color-mix(in srgb, var(--cyan-600) 13%, transparent); color: var(--accent-text);
  opacity: 0; transform: translateY(5px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.srcs__done.is-on { opacity: 1; transform: none; }
.srcs__done svg { flex: none; }

.srcs__cap {
  grid-column: 1 / -1;
  margin: clamp(14px, 1.8vw, 20px) 0 0; text-align: center;
  font-size: var(--f-label); color: var(--t-muted);
}

@media (max-width: 900px) {
  .srcs__stage { grid-template-columns: 1fr; }
  .srcs__line { grid-template-columns: 1fr; gap: 2px; }
  .srcs__line dd { min-height: 1.5em; }
}

/* ── 4 · Struck off, not deleted ───────────────────────────────────────── */
.roll { position: relative; overflow: clip; }
.roll__inner { position: relative; z-index: 1; }
.roll__orb { top: -24%; right: -10%; width: 48vw; opacity: .45; }
.roll__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.2vw, 44px); }
.roll__head .eyebrow { justify-content: center; }
.roll__eyebrow { color: var(--cyan); }
.roll__h { color: var(--t-on-dark); margin: 12px 0 0; }
.roll__lede { margin: 14px auto 0; max-width: 660px; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }

.roll__stage {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(18px, 2.6vw, 32px); align-items: start;
  max-width: 1060px; margin-inline: auto;
}

.roll__cols {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(10px, 1.6vw, 18px); align-items: start;
}
.roll__col {
  padding: 16px; border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .045);
}
/* Solid is where the child is now; dashed is where they are going. */
.roll__col--on  { border-style: solid; }
.roll__col--off { border-style: dashed; }
.roll__ct {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 12px;
  font-size: var(--f-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--t-on-dark-2);
}
.roll__cn {
  display: grid; place-items: center; min-width: 24px; height: 24px; padding-inline: 7px;
  border-radius: 8px; font-size: var(--f-label); font-weight: 750; letter-spacing: 0;
  background: rgba(255, 255, 255, .09); color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.roll__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.roll__rows--off { min-height: 54px; }
.roll__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
  /* Only a ceiling for the collapse to animate from — set well above the two
     lines this row actually holds, because a tight cap silently crops them. */
  max-height: 90px; overflow: hidden;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out),
              max-height .3s var(--ease-out) .22s, padding .3s var(--ease-out) .22s,
              margin .3s var(--ease-out) .22s, border-color .3s var(--ease-out);
}
/* Slides out first, then the list closes the gap behind it — a row that fades
   and leaves a hole reads as a rendering fault rather than as a move. */
.roll__row.is-leaving {
  opacity: 0; transform: translateX(22px);
  max-height: 0; padding-block: 0; margin-bottom: -7px; border-color: transparent;
}
.roll__row.is-gone { border-color: rgba(2, 217, 254, .34); background: rgba(2, 217, 254, .07); }
.roll__av {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  background: rgba(255, 255, 255, .08); color: var(--cyan);
}
.roll__who { display: grid; gap: 1px; min-width: 0; }
.roll__who b { font-size: var(--f-label); font-weight: 700; color: var(--t-on-dark); }
.roll__who i { font-style: normal; font-size: var(--f-label); color: var(--t-on-dark-2); }
.roll__empty {
  padding: 12px 11px; border-radius: var(--r-sm); text-align: center;
  font-size: var(--f-label); color: var(--t-on-dark-2); opacity: .6;
}

.roll__arrow {
  display: grid; place-items: center; align-self: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13);
  color: var(--cyan);
  transition: background .35s var(--ease-out), transform .35s var(--ease-out);
}
.is-struck .roll__arrow { background: rgba(2, 217, 254, .16); transform: translateX(3px); }

/* The panel that does not move. That is the whole argument. */
.roll__keeps {
  padding: clamp(18px, 2.2vw, 24px); border-radius: var(--r-lg);
  border: 1px solid rgba(2, 217, 254, .26); background: rgba(2, 217, 254, .05);
}
.roll__kh {
  display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
  font-size: var(--f-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cyan);
}
.roll__kh svg { flex: none; }
.roll__keeps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.roll__keeps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: start; }
.roll__ki {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
  background: rgba(255, 255, 255, .08); color: var(--cyan);
}
.roll__kt { display: grid; gap: 3px; min-width: 0; }
.roll__kt strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-on-dark); }
.roll__kt span { font-size: var(--f-xs); color: var(--t-on-dark-2); line-height: 1.55; }

@media (max-width: 940px) { .roll__stage { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .roll__cols { grid-template-columns: 1fr; }
  .roll__arrow { justify-self: center; rotate: 90deg; }
}

/* ── 5 · What a TC has to say ──────────────────────────────────────────── */
.cert__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.2vw, 44px); }
.cert__head .eyebrow { justify-content: center; }
.cert__head .h2 { margin: 12px 0 0; }
.cert__lede { margin: 14px auto 0; max-width: 660px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.cert__stage { max-width: 1060px; margin-inline: auto; }
.cert__groups {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px);
}
.cert__group {
  padding: clamp(18px, 2.2vw, 26px); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card);
}
.cert__gh {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  margin: 0 0 15px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.cert__gi {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.cert__gt { display: grid; gap: 2px; min-width: 0; }
.cert__gt strong { font-size: var(--f-sm); font-weight: 700; color: var(--t-primary); }
.cert__gt span { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.45; }
.cert__gn {
  display: grid; place-items: center; min-width: 26px; height: 26px; padding-inline: 8px;
  border-radius: 9px; font-size: var(--f-label); font-weight: 750;
  background: var(--s-frost); color: var(--t-muted); font-variant-numeric: tabular-nums;
}

.cert__fields { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cert__fields li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px;
  font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.5;
}
.cert__tick {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; margin-top: 1px;
  background: var(--s-frost); color: var(--t-muted);
  transition: background .3s var(--ease-out), color .3s var(--ease-out), scale .3s var(--ease-out);
}
/* Ticks land one after another as the group comes into view, then hold. */
.is-ticked .cert__tick {
  background: color-mix(in srgb, var(--cyan-600) 16%, transparent);
  color: var(--accent-text);
  transition-delay: calc(var(--j) * .07s);
}

.cert__foot {
  display: flex; align-items: flex-start; gap: 10px;
  margin: clamp(20px, 2.4vw, 28px) auto 0; max-width: 760px; text-align: left;
  font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6;
}
.cert__foot svg { color: var(--accent-text); flex: none; margin-top: 2px; }

@media (max-width: 820px) { .cert__groups { grid-template-columns: 1fr; } }

/* ── 6 · The archive ───────────────────────────────────────────────────── */
.arc__grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(26px, 4vw, 56px); align-items: center;
}
.arc__copy { min-width: 0; }
.arc__copy .h2 { margin: 12px 0 0; max-width: 18ch; }
.arc__lede { margin: 16px 0 0; max-width: 52ch; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.arc__pts { list-style: none; margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 0; display: grid; gap: 12px; }
.arc__pts li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 11px;
  font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.55;
}
.arc__pi {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
  flex: none;
}

.arc__stage { min-width: 0; }
.arc__panel {
  padding: clamp(18px, 2.2vw, 24px); border-radius: var(--r-xl);
  border: 1px solid var(--border); background: var(--s-card);
  box-shadow: var(--sh-card);
  transition: box-shadow .4s var(--ease-out);
}
.is-found .arc__panel { box-shadow: var(--sh-card), 0 0 0 4px color-mix(in srgb, var(--cyan-600) 10%, transparent); }

.arc__ph {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 14px;
}
.arc__pk {
  font-size: var(--f-label); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--t-secondary);
}
.arc__pc { font-size: var(--f-label); font-weight: 650; color: var(--accent-text); font-variant-numeric: tabular-nums; }

.arc__field {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  padding: 11px 14px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-frost);
}
.arc__fi { display: grid; place-items: center; color: var(--t-muted); flex: none; }
.arc__typed {
  font-size: var(--f-xs); font-weight: 650; color: var(--t-primary);
  white-space: pre; min-height: 1.35em;
}
.arc__caret {
  width: 2px; height: 15px; border-radius: 1px; background: var(--accent);
  animation: arc-blink 1.05s steps(1) infinite;
}
@keyframes arc-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .arc__caret { animation: none; } }

.arc__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.arc__row {
  display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, .9fr) auto;
  align-items: center; gap: 12px;
  padding: 12px 13px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-pure);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out),
              max-height .35s var(--ease-out), padding .3s var(--ease-out),
              margin .3s var(--ease-out), border-color .3s var(--ease-out);
  max-height: 60px; overflow: hidden;
}
/* Filtered-out rows collapse rather than hide, so the list visibly shortens —
   the same rule the reports filter follows. */
.arc__row.is-out {
  opacity: 0; transform: translateY(-4px);
  max-height: 0; padding-block: 0; margin-bottom: -6px; border-color: transparent;
}
.arc__rn { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.arc__rc { font-size: var(--f-label); color: var(--t-secondary); white-space: nowrap; }
.arc__rno {
  font-size: var(--f-label); font-weight: 650; color: var(--accent-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.arc__rd { font-size: var(--f-label); color: var(--t-muted); white-space: nowrap; }

.arc__none {
  margin: 8px 0 0; padding: 14px; border-radius: var(--r-md); text-align: center;
  font-size: var(--f-xs); color: var(--t-muted);
  border: 1px dashed var(--border);
}
.arc__none[hidden] { display: none; }

.arc__cap { margin: 14px 0 0; text-align: center; font-size: var(--f-label); color: var(--t-muted); }

@media (max-width: 960px) { .arc__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .arc__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 5px; max-height: 92px; }
  .arc__rno { grid-area: 2 / 1; }
  .arc__rd  { grid-area: 2 / 2; }
  .arc__row.is-out { max-height: 0; }
}

/* ── 7 · Four things this does not do ──────────────────────────────────── */
.tsafe__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.tsafe__head .eyebrow { justify-content: center; }
.tsafe__head .h2 { margin: 12px 0 0; }
.tsafe__lede { margin: 14px auto 0; max-width: 640px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.tsafe__rows { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 9px; max-width: 900px; }
.tsafe__rows li {
  display: grid; grid-template-columns: auto 170px minmax(0, 1fr); align-items: start; gap: 14px;
  padding: 16px 18px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
}
.tsafe__no {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; margin-top: 1px;
  background: color-mix(in srgb, var(--violet) 13%, transparent); color: var(--violet);
  flex: none;
}
.tsafe__who { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.tsafe__what { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6; }

@media (max-width: 680px) {
  .tsafe__rows li { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; }
  .tsafe__what { grid-column: 2; }
}

/* ==========================================================================
   ID & ADMIT CARDS — /features/id-card-admit-card-generator/

   Hero carries a photograph of the printed cards; everything below is drawn,
   because below the hero the point is what is *on* the cards and how many come
   out at once. Two runtimes: initDuo, initBulk.
   Only theme-flipping tokens on light surfaces.
   ========================================================================== */

/* ── 1 · Hero ──────────────────────────────────────────────────────────── */
.idh__grid { align-items: center; }
.idh__pts {
  list-style: none; margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 0;
  display: grid; gap: 10px;
}
.idh__pts li {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px;
  font-size: var(--f-xs); color: var(--t-on-dark-2);
}
.idh__pi {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13);
  color: var(--cyan); flex: none;
}
.idh__shot { position: relative; min-width: 0; }
.idh__slot { border-radius: var(--r-lg); }
.idh__slot:has(img, picture, video) { box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8); }
.idh__cap {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 0; font-size: var(--f-label); color: var(--t-on-dark-2);
}
.idh__cap svg { color: var(--cyan); flex: none; }
@media (min-width: 980px) {
  .idh__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .idh__shot { max-width: 440px; margin-inline: auto; }
}

/* ── 2 · Two documents, one source ⭐ ──────────────────────────────────── */
.duo__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.2vw, 44px); }
.duo__head .eyebrow { justify-content: center; }
.duo__head .h2 { margin: 12px 0 0; }
.duo__lede { margin: 14px auto 0; max-width: 660px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.duo__stage {
  display: grid; grid-template-columns: minmax(0, .95fr) 44px minmax(0, 1.12fr);
  align-items: center; gap: 0;
  max-width: 1040px; margin-inline: auto;
}

/* Source */
.duo__src {
  padding: clamp(18px, 2.2vw, 24px); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-card); box-shadow: var(--sh-card);
  transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.duo__src.is-active {
  border-color: color-mix(in srgb, var(--cyan-600) 45%, transparent);
  box-shadow: var(--sh-card), 0 0 0 4px color-mix(in srgb, var(--cyan-600) 9%, transparent);
}
.duo__srch {
  display: flex; align-items: center; gap: 9px; margin: 0 0 15px;
  font-size: var(--f-label); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--t-secondary);
}
.duo__si {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.duo__srcbody { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.duo__shared { margin: 0; display: grid; gap: 9px; align-content: start; }
.duo__shared div { display: grid; gap: 1px; }
.duo__shared dt { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--t-muted); }
.duo__shared dd { margin: 0; font-size: var(--f-xs); font-weight: 650; color: var(--t-primary); }
.duo__srctag {
  margin: 15px 0 0; padding-top: 13px; border-top: 1px dashed var(--border);
  font-size: var(--f-label); color: var(--accent-text); font-weight: 600;
}

/* Photo tiles */
.duo__photo {
  position: relative; display: grid; place-items: center; align-content: center; gap: 3px;
  border-radius: var(--r-md); flex: none;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan-600) 26%, transparent);
  color: var(--accent-text);
}
.duo__photo i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.duo__photo--source { width: 84px; height: 96px; }
.duo__photo--out {
  width: 40px; height: 46px;
  opacity: 0; scale: .82;
  transition: opacity .4s var(--ease-out), scale .4s var(--ease-out);
}
.duo__photo--out.is-filled { opacity: 1; scale: 1; }

/* Split connector — decorative */
.duo__split { position: relative; align-self: stretch; display: grid; place-items: center; }
.duo__split::before {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-600);
}
.duo__splitline { position: absolute; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--cyan-600), transparent); }
.duo__splitline:nth-child(1) { top: 32%; }
.duo__splitline:nth-child(2) { top: 68%; background: linear-gradient(90deg, var(--cyan-600), transparent); }

/* Outputs */
.duo__outs { display: grid; gap: 12px; }
.duo__out {
  padding: 15px 16px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--s-pure);
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.duo__out.is-live { border-color: color-mix(in srgb, var(--cyan-600) 30%, transparent); transform: translateX(2px); }
/* The ID card keeps the cyan accent (the page default); the admit card takes
   violet, so the two outputs read as two different documents at a glance. */
.duo__out--id.is-live { border-color: color-mix(in srgb, var(--cyan-600) 34%, transparent); }
.duo__out--admit.is-live { border-color: color-mix(in srgb, var(--violet) 34%, transparent); }
.duo__outh {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-size: var(--f-xs); font-weight: 700; color: var(--t-primary);
}
.duo__oi {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text);
}
.duo__out--admit .duo__oi { background: color-mix(in srgb, var(--violet) 13%, transparent); color: var(--violet); }

.duo__card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 12px; }
.duo__mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; min-width: 0; }
.duo__mini li {
  font-size: var(--f-label); font-weight: 650; color: var(--t-primary);
  opacity: 0; transform: translateY(4px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.duo__mini li.is-filled { opacity: 1; transform: none; }

.duo__ownlabel {
  margin: 0 0 8px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-text);
}
.duo__out--admit .duo__ownlabel { color: var(--violet); }
.duo__own { margin: 0; display: grid; gap: 7px; }
.duo__own div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
  padding-bottom: 6px; border-bottom: 1px dashed var(--border);
  opacity: 0; transform: translateY(4px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.duo__own div:last-child { border-bottom: 0; padding-bottom: 0; }
.duo__own div.is-filled { opacity: 1; transform: none; }
.duo__own dt { font-size: var(--f-label); color: var(--t-secondary); }
.duo__own dd { margin: 0; font-size: var(--f-label); font-weight: 700; color: var(--t-primary); white-space: nowrap; }

@media (max-width: 900px) {
  .duo__stage { grid-template-columns: 1fr; gap: 14px; }
  .duo__split { display: none; }
  .duo__outs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .duo__outs { grid-template-columns: 1fr; }
  .duo__srcbody { grid-template-columns: 1fr; }
  .duo__photo--source { width: 72px; height: 84px; }
}

/* ── 3 · The ID card, both sides ───────────────────────────────────────── */
.idc__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.2vw, 44px); }
.idc__head .eyebrow { justify-content: center; }
.idc__head .h2 { margin: 12px 0 0; }
.idc__lede { margin: 14px auto 0; max-width: 660px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.idc__cards {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: clamp(16px, 2.4vw, 28px);
}
.idc__card {
  position: relative; width: min(360px, 100%); border-radius: var(--r-lg); overflow: hidden;
  background: var(--s-card); border: 1px solid var(--border); box-shadow: var(--sh-card);
  display: grid; margin: 0;
}
.idc__card--front { align-content: start; }

/* Front */
.idc__ribbon {
  position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--cyan-600), var(--violet));
}
.idc__masthead {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: center;
  padding: clamp(16px, 2vw, 20px) clamp(16px, 2vw, 20px) 14px; margin-top: 5px;
  border-bottom: 1px solid var(--border);
}
.idc__crest {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: color-mix(in srgb, var(--cyan-600) 13%, transparent); color: var(--accent-text);
}
.idc__school { display: grid; gap: 1px; min-width: 0; }
.idc__school b { font-size: var(--f-sm); font-weight: 750; color: var(--t-primary); letter-spacing: -.01em; }
.idc__school i { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }

.idc__frontbody { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: clamp(16px, 2vw, 20px); }
.idc__photo {
  display: grid; place-items: center; align-content: center; gap: 4px; flex: none;
  width: 88px; height: 104px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cyan-600) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan-600) 24%, transparent);
  color: var(--accent-text);
}
.idc__photo i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.idc__fields { margin: 0; display: grid; gap: 10px; align-content: start; }
.idc__fields div { display: grid; gap: 1px; }
.idc__fields dt { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--t-muted); }
.idc__fields dd { margin: 0; font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.idc__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px clamp(16px, 2vw, 20px); border-top: 1px solid var(--border);
  font-size: var(--f-label); color: var(--t-secondary); background: var(--s-frost);
}
.idc__valid { font-weight: 700; color: var(--accent-text); }

/* Back */
.idc__card--back { padding: clamp(16px, 2vw, 20px); align-content: start; }
.idc__backh {
  margin: 0 0 13px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--t-secondary);
}
.idc__backlist { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 11px; }
.idc__backlist li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; }
.idc__bi { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--s-frost); color: var(--accent-text); }
.idc__bk { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--t-muted); white-space: nowrap; }
.idc__bv { font-size: var(--f-xs); font-weight: 650; color: var(--t-primary); text-align: right; }
.idc__sign { margin-top: auto; padding-top: 14px; display: grid; gap: 5px; }
.idc__signline { height: 1px; background: var(--t-muted); opacity: .5; }
.idc__signcap { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--t-muted); }
.idc__return { margin: 12px 0 0; font-size: var(--f-label); color: var(--t-secondary); font-style: italic; }

.idc__note {
  flex-basis: 100%;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: clamp(6px, 1vw, 10px) 0 0; text-align: center;
  font-size: var(--f-xs); color: var(--t-secondary);
}
.idc__note svg { color: var(--accent-text); flex: none; }

/* ── 4 · The admit card (dark) ─────────────────────────────────────────── */
.acard { position: relative; overflow: clip; }
.acard__inner { position: relative; z-index: 1; }
.acard__orb { top: -26%; right: -10%; width: 48vw; opacity: .45; }
.acard__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px, 3.2vw, 44px); }
.acard__head .eyebrow { justify-content: center; }
.acard__eyebrow { color: var(--cyan); }
.acard__h { color: var(--t-on-dark); margin: 12px 0 0; }
.acard__lede { margin: 14px auto 0; max-width: 660px; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }

.acard__doc {
  max-width: 760px; margin-inline: auto;
  border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .045);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .8);
}
.acard__top {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(14px, 2vw, 22px); align-items: center;
  padding: clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(120deg, rgba(2, 217, 254, .1), transparent 60%);
}
.acard__photo {
  display: grid; place-items: center; align-content: center; gap: 4px; flex: none;
  width: 74px; height: 88px; border-radius: var(--r-md);
  background: rgba(2, 217, 254, .12); border: 1px solid rgba(2, 217, 254, .3); color: var(--cyan);
}
.acard__photo i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.acard__who { display: grid; gap: 4px; min-width: 0; }
.acard__who b { font-size: var(--f-lead); font-weight: 750; color: var(--t-on-dark); letter-spacing: -.01em; }
.acard__who span { font-size: var(--f-label); color: var(--t-on-dark-2); }
.acard__exam {
  display: grid; gap: 2px; text-align: right; flex: none;
  padding: 10px 14px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
.acard__exam i { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t-on-dark-2); }
.acard__exam b { font-size: var(--f-xs); font-weight: 700; color: var(--cyan); white-space: nowrap; }

.acard__sched { padding: clamp(16px, 2.2vw, 24px); }
.acard__schedh,
.acard__rows li {
  display: grid; grid-template-columns: minmax(0, 1.6fr) auto auto minmax(0, 1.1fr);
  gap: clamp(10px, 1.6vw, 20px); align-items: center;
}
.acard__schedh {
  padding: 0 12px 10px; margin: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t-on-dark-2);
}
.acard__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.acard__rows li {
  padding: 12px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09);
}
.acard__subj { font-size: var(--f-xs); font-weight: 700; color: var(--t-on-dark); }
.acard__date { font-size: var(--f-label); font-weight: 650; color: var(--cyan); white-space: nowrap; }
.acard__day { font-size: var(--f-label); color: var(--t-on-dark-2); white-space: nowrap; }
.acard__time { font-size: var(--f-label); color: var(--t-on-dark-2); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }

.acard__rules {
  padding: clamp(16px, 2.2vw, 22px); border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .14);
}
.acard__rulesh { margin: 0 0 12px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t-on-dark-2); }
.acard__rules ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.acard__rules li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; font-size: var(--f-xs); color: var(--t-on-dark-2); }
.acard__ri { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, .07); color: var(--cyan); }

.acard__cap { margin: clamp(14px, 1.8vw, 20px) auto 0; max-width: 760px; text-align: center; font-size: var(--f-label); color: var(--t-on-dark-2); }

@media (max-width: 640px) {
  .acard__top { grid-template-columns: auto minmax(0, 1fr); }
  .acard__exam { grid-column: 1 / -1; text-align: left; }
  .acard__schedh { display: none; }
  .acard__rows li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding: 12px 14px; }
  .acard__subj { grid-column: 1 / -1; }
  .acard__time { text-align: left; }
}

/* ── 5 · Bulk ──────────────────────────────────────────────────────────── */
.bulk__grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(26px, 4vw, 56px); align-items: center;
}
.bulk__copy { min-width: 0; }
.bulk__copy .h2 { margin: 12px 0 0; max-width: 20ch; }
.bulk__lede { margin: 16px 0 0; max-width: 52ch; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.bulk__pts { list-style: none; margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 0; display: grid; gap: 12px; }
.bulk__pts li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-secondary); }
.bulk__pi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); flex: none; }

.bulk__stage { min-width: 0; }
.bulk__panel {
  padding: clamp(18px, 2.2vw, 24px); border-radius: var(--r-xl);
  border: 1px solid var(--border); background: var(--s-card); box-shadow: var(--sh-card);
}
.bulk__ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
.bulk__pk { display: inline-flex; align-items: center; gap: 8px; font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.bulk__pk svg { color: var(--accent-text); }
.bulk__pc { font-size: var(--f-xs); font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.bulk__pc .num { font-weight: 750; }

.bulk__wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.bulk__tile {
  display: grid; justify-items: center; align-content: center; gap: 4px;
  padding: 9px 4px; border-radius: 10px;
  background: var(--s-frost); border: 1px solid var(--border);
  opacity: .32; scale: .9;
  transition: opacity .3s var(--ease-out), scale .3s var(--ease-out), border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.bulk__tile.is-on { opacity: 1; scale: 1; border-color: color-mix(in srgb, var(--cyan-600) 34%, transparent); background: color-mix(in srgb, var(--cyan-600) 7%, transparent); }
.bulk__tphoto { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--cyan-600) 14%, transparent); color: var(--accent-text); }
.bulk__troll { font-size: 9px; font-weight: 700; letter-spacing: .02em; color: var(--t-secondary); }
.bulk__tbar { width: 60%; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--cyan-600) 28%, transparent); }

.bulk__done {
  display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0;
  padding: 9px 15px; border-radius: var(--r-pill);
  font-size: var(--f-label); font-weight: 700;
  background: color-mix(in srgb, var(--cyan-600) 13%, transparent); color: var(--accent-text);
  opacity: 0; transform: translateY(5px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.bulk__done.is-on { opacity: 1; transform: none; }
.bulk__done svg { flex: none; }
.bulk__cap { margin: 14px 0 0; font-size: var(--f-label); color: var(--t-secondary); }

@media (max-width: 960px) { .bulk__grid { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .bulk__wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── 6 · Four things this does not do ──────────────────────────────────── */
.isafe__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.isafe__head .eyebrow { justify-content: center; }
.isafe__head .h2 { margin: 12px 0 0; }
.isafe__lede { margin: 14px auto 0; max-width: 640px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }

.isafe__rows { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 9px; max-width: 900px; }
.isafe__rows li {
  display: grid; grid-template-columns: auto 190px minmax(0, 1fr); align-items: start; gap: 14px;
  padding: 16px 18px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
}
.isafe__no {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; margin-top: 1px;
  background: color-mix(in srgb, var(--violet) 13%, transparent); color: var(--violet); flex: none;
}
.isafe__who { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.isafe__what { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6; }

@media (max-width: 680px) {
  .isafe__rows li { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; }
  .isafe__what { grid-column: 2; }
}

/* ==========================================================================
   EXAMS & RESULTS — /features/exam-result-management-software/
   Hero photo; below it drawn. Runtimes: initHold, initLock.
   ========================================================================== */

/* ── Hero ──────────────────────────────────────────────────────────────── */
.xm__grid { align-items: center; }
.xm__pts { list-style: none; margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 0; display: grid; gap: 10px; }
.xm__pts li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-on-dark-2); }
.xm__pi { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); color: var(--cyan); flex: none; }
.xm__shot { position: relative; min-width: 0; }
.xm__slot { border-radius: var(--r-lg); }
.xm__slot:has(img, picture, video) { box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); }
.xm__cap { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: var(--f-label); color: var(--t-on-dark-2); }
.xm__cap svg { color: var(--cyan); flex: none; }
@media (min-width: 980px) { .xm__grid { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); } .xm__shot { max-width: 440px; margin-inline: auto; } }

/* ── Flow ──────────────────────────────────────────────────────────────── */
.flow__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px,3.2vw,44px); }
.flow__head .eyebrow { justify-content: center; }
.flow__head .h2 { margin: 12px 0 0; }
.flow__lede { margin: 14px auto 0; max-width: 660px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.flow__steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(10px,1.4vw,16px); }
.flow__step { position: relative; padding: clamp(18px,2vw,24px); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card); display: grid; align-content: start; }
/* the arrow linking each step to the next (desktop only) */
.flow__step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -8px; width: 16px; height: 16px; z-index: 1;
  background: var(--s-card); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); rotate: -45deg; translate: 0 -50%; }
.flow__n { position: absolute; top: 14px; right: 16px; font-size: var(--f-sm); font-weight: 750; color: var(--accent-text); opacity: .6; font-variant-numeric: tabular-nums; }
.flow__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); margin-bottom: 14px; }
.flow__t { display: grid; gap: 6px; }
.flow__t strong { font-size: var(--f-sm); font-weight: 700; color: var(--t-primary); }
.flow__t span { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.55; }
@media (max-width: 860px) { .flow__steps { grid-template-columns: 1fr; } .flow__step:not(:last-child)::after { top: auto; bottom: -8px; right: 50%; translate: 50% 0; rotate: 45deg; } }

/* ── Grade scheme ──────────────────────────────────────────────────────── */
.grd__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr); gap: clamp(26px,4vw,56px); align-items: center; }
.grd__copy { min-width: 0; }
.grd__copy .h2 { margin: 12px 0 0; max-width: 16ch; }
.grd__lede { margin: 16px 0 0; max-width: 52ch; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.grd__schemes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: clamp(20px,2.4vw,26px) 0 0; }
.grd__schemek { font-size: var(--f-label); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--t-muted); margin-right: 4px; }
.grd__chip { padding: 7px 13px; border-radius: var(--r-pill); font-size: var(--f-label); font-weight: 650; border: 1px solid var(--border); background: var(--s-card); color: var(--t-secondary); }
.grd__chip.is-on { border-color: color-mix(in srgb, var(--cyan-600) 45%, transparent); background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); }
.grd__note { display: flex; align-items: flex-start; gap: 9px; margin: 16px 0 0; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.55; }
.grd__note svg { color: var(--accent-text); flex: none; margin-top: 1px; }

.grd__map { padding: clamp(20px,2.4vw,28px); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--s-card); box-shadow: var(--sh-card); min-width: 0; }
.grd__sample { display: flex; align-items: center; justify-content: center; gap: clamp(12px,2vw,20px); padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.grd__mark { display: inline-flex; align-items: baseline; gap: 4px; }
.grd__mark b { font-size: clamp(2rem,4vw,2.6rem); font-weight: 750; color: var(--t-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.grd__mark i { font-style: normal; font-size: var(--f-sm); color: var(--t-muted); }
.grd__arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--s-frost); color: var(--accent-text); }
.grd__grade { display: grid; place-items: center; min-width: 60px; height: 60px; padding-inline: 12px; border-radius: var(--r-md); font-size: clamp(1.4rem,2.6vw,1.8rem); font-weight: 750; background: color-mix(in srgb, var(--cyan-600) 14%, transparent); color: var(--accent-text); }
.grd__scale { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.grd__band { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px; padding: 9px 13px; border-radius: 10px; background: var(--s-frost); border: 1px solid transparent; }
.grd__band.is-hit { background: color-mix(in srgb, var(--cyan-600) 10%, transparent); border-color: color-mix(in srgb, var(--cyan-600) 40%, transparent); }
.grd__range { font-size: var(--f-xs); color: var(--t-secondary); font-variant-numeric: tabular-nums; }
.grd__g { font-size: var(--f-xs); font-weight: 750; color: var(--t-primary); }
.grd__hit { display: inline-flex; align-items: center; gap: 5px; justify-self: end; font-size: var(--f-label); font-weight: 700; color: var(--accent-text); }
.grd__hit svg { flex: none; }
@media (max-width: 900px) { .grd__grid { grid-template-columns: 1fr; } }

/* ── Result hold (dark) ────────────────────────────────────────────────── */
.hold { position: relative; overflow: clip; }
.hold__inner { position: relative; z-index: 1; }
.hold__orb { top: -24%; right: -10%; width: 48vw; opacity: .45; }
.hold__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px,3.2vw,44px); }
.hold__head .eyebrow { justify-content: center; }
.hold__eyebrow { color: var(--cyan); }
.hold__h { color: var(--t-on-dark); margin: 12px 0 0; }
.hold__lede { margin: 14px auto 0; max-width: 660px; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }
.hold__stage { max-width: 720px; margin-inline: auto; }
.hold__panel { padding: clamp(18px,2.4vw,26px); border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.045); box-shadow: 0 40px 90px -50px rgba(0,0,0,.8); }
.hold__ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.hold__pk { font-size: var(--f-xs); font-weight: 700; color: var(--t-on-dark); }
.hold__pc { font-size: var(--f-label); color: var(--t-on-dark-2); font-variant-numeric: tabular-nums; }
.hold__pc [data-hold-declared] { color: var(--cyan); font-weight: 700; }
.hold__held { color: #F5B843; font-weight: 700; }
.hold__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hold__row { display: grid; grid-template-columns: 68px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); transition: border-color .35s var(--ease-out), background .35s var(--ease-out); }
.hold__roll { font-size: var(--f-xs); font-weight: 700; color: var(--t-on-dark); font-variant-numeric: tabular-nums; }
.hold__bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.hold__barfill { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--cyan-600); transition: width .5s var(--ease-out); }
.hold__row.is-declared .hold__barfill { width: 100%; }
.hold__row.is-held .hold__barfill,
.hold__row.is-heldrow.is-held .hold__barfill { width: 55%; background: #F5B843; }
.hold__row.is-released .hold__barfill { width: 100%; background: var(--cyan-600); }
.hold__status { font-size: var(--f-label); font-weight: 700; color: var(--t-on-dark-2); white-space: nowrap; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.07); }
.hold__row.is-declared .hold__status { color: var(--cyan); background: rgba(2,217,254,.12); }
.hold__row.is-held .hold__status { color: #F5B843; background: rgba(245,184,67,.14); }
.hold__row.is-released .hold__status { color: var(--cyan); background: rgba(2,217,254,.12); }
.hold__row.is-heldrow { border-color: rgba(245,184,67,.28); }
.hold__row.is-heldrow.is-held { background: rgba(245,184,67,.07); }
.hold__foot { display: flex; align-items: center; gap: 9px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: var(--f-xs); color: var(--t-on-dark-2); }
.hold__foot svg { color: var(--cyan); flex: none; }
@media (max-width: 520px) { .hold__row { grid-template-columns: 56px minmax(0,1fr); } .hold__status { grid-column: 2; justify-self: start; } .hold__bar { grid-column: 1 / -1; order: 3; } }

/* ── Exam lock ─────────────────────────────────────────────────────────── */
.lock__grid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(26px,4vw,56px); align-items: center; }
.lock__copy { min-width: 0; }
.lock__copy .h2 { margin: 12px 0 0; max-width: 18ch; }
.lock__lede { margin: 16px 0 0; max-width: 52ch; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.lock__pts { list-style: none; margin: clamp(20px,2.4vw,28px) 0 0; padding: 0; display: grid; gap: 12px; }
.lock__pts li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-secondary); }
.lock__pi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); flex: none; }
.lock__stage { min-width: 0; }
.lock__panel { position: relative; padding: clamp(18px,2.2vw,24px); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--s-card); box-shadow: var(--sh-card); transition: border-color .4s var(--ease-out); }
.lock__panel.is-locked { border-color: color-mix(in srgb, var(--cyan-600) 30%, transparent); }
.lock__ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.lock__pk { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.lock__badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); font-size: var(--f-label); font-weight: 700; background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet); }
.lock__badgei { display: inline-grid; place-items: center; }
.is-locked .lock__badge { background: color-mix(in srgb, var(--cyan-600) 13%, transparent); color: var(--accent-text); }
.lock__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lock__row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--s-frost); border: 1px solid var(--border); transition: background .35s var(--ease-out), opacity .35s var(--ease-out); }
.lock__row.is-active { border-color: color-mix(in srgb, var(--violet) 30%, transparent); background: color-mix(in srgb, var(--violet) 6%, transparent); }
.is-locked .lock__row.is-active { border-color: var(--border); background: var(--s-frost); }
.lock__subj { font-size: var(--f-xs); font-weight: 650; color: var(--t-primary); }
.lock__field { display: inline-flex; align-items: baseline; gap: 6px; }
.lock__mark { font-size: var(--f-sm); font-weight: 750; color: var(--t-primary); font-variant-numeric: tabular-nums; transition: color .3s var(--ease-out), scale .3s var(--ease-out); }
.lock__mark.is-corrected { color: var(--violet); scale: 1.18; }
.lock__caret { width: 2px; height: 15px; border-radius: 1px; background: var(--violet); animation: lock-blink 1.05s steps(1) infinite; }
.is-locked .lock__caret { display: none; }
@keyframes lock-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lock__caret { animation: none; } }
.lock__of { font-size: var(--f-label); color: var(--t-muted); }
.lock__foot { display: flex; align-items: center; gap: 9px; margin: 15px 0 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: var(--f-xs); color: var(--t-secondary); }
.lock__lockico { display: inline-grid; place-items: center; color: var(--t-muted); transition: color .3s var(--ease-out); }
.is-locked .lock__lockico { color: var(--accent-text); }
@media (max-width: 900px) { .lock__grid { grid-template-columns: 1fr; } }

/* ── Exam "does not do" (shares the safe-rows shape) ───────────────────── */
.xsafe__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px,3vw,40px); }
.xsafe__head .eyebrow { justify-content: center; }
.xsafe__head .h2 { margin: 12px 0 0; }
.xsafe__lede { margin: 14px auto 0; max-width: 640px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.xsafe__rows { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 9px; max-width: 900px; }
.xsafe__rows li { display: grid; grid-template-columns: auto 175px minmax(0,1fr); align-items: start; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--s-card); }
.xsafe__no { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; margin-top: 1px; background: color-mix(in srgb, var(--violet) 13%, transparent); color: var(--violet); flex: none; }
.xsafe__who { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.xsafe__what { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6; }
@media (max-width: 680px) { .xsafe__rows li { grid-template-columns: auto minmax(0,1fr); row-gap: 6px; } .xsafe__what { grid-column: 2; } }

/* ==========================================================================
   INFIRMARY & HEALTH — /features/school-infirmary-software/
   Hero photo; below it drawn. Runtime: initGrowth (+ reused initCounters).
   ========================================================================== */

/* ── Hero ──────────────────────────────────────────────────────────────── */
.inf__grid { align-items: center; }
.inf__pts { list-style: none; margin: clamp(20px,2.4vw,28px) 0 0; padding: 0; display: grid; gap: 10px; }
.inf__pts li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-on-dark-2); }
.inf__pi { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); color: var(--cyan); flex: none; }
.inf__shot { position: relative; min-width: 0; }
.inf__slot { border-radius: var(--r-lg); }
.inf__slot:has(img, picture, video) { box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); }
.inf__cap { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: var(--f-label); color: var(--t-on-dark-2); }
.inf__cap svg { color: var(--cyan); flex: none; }
@media (min-width: 980px) { .inf__grid { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); } .inf__shot { max-width: 440px; margin-inline: auto; } }

/* ── Check-up vitals ───────────────────────────────────────────────────── */
.chk__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.95fr); gap: clamp(26px,4vw,56px); align-items: center; }
.chk__copy { min-width: 0; }
.chk__copy .h2 { margin: 12px 0 0; max-width: 18ch; }
.chk__lede { margin: 16px 0 0; max-width: 52ch; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.chk__note { display: flex; align-items: flex-start; gap: 9px; margin: clamp(18px,2.2vw,24px) 0 0; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.55; }
.chk__note svg { color: var(--accent-text); flex: none; margin-top: 1px; }
.chk__card { padding: clamp(18px,2.2vw,24px); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--s-card); box-shadow: var(--sh-card); min-width: 0; }
.chk__ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.chk__student { display: inline-flex; align-items: center; gap: 9px; font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.chk__av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); }
.chk__date { font-size: var(--f-label); color: var(--t-muted); font-variant-numeric: tabular-nums; }
.chk__vitals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.chk__vitals li { display: grid; gap: 6px; padding: 15px 16px; border-radius: var(--r-md); background: var(--s-frost); border: 1px solid var(--border); }
.chk__vi { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); }
.chk__vk { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--t-muted); }
.chk__vv { font-size: clamp(1.35rem,2.4vw,1.7rem); font-weight: 750; color: var(--t-primary); line-height: 1; }
.chk__cap { grid-column: 1 / -1; margin: 12px 0 0; font-size: var(--f-label); color: var(--t-muted); text-align: center; }
@media (max-width: 900px) { .chk__grid { grid-template-columns: 1fr; } }

/* ── Vision & hearing ──────────────────────────────────────────────────── */
.tst__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px,3.2vw,44px); }
.tst__head .eyebrow { justify-content: center; }
.tst__head .h2 { margin: 12px 0 0; }
.tst__lede { margin: 14px auto 0; max-width: 660px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.tst__cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(12px,1.8vw,20px); max-width: 900px; margin-inline: auto; }
.tst__card { padding: clamp(18px,2.2vw,26px); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card); }
.tst__ch { display: flex; align-items: center; gap: 11px; margin: 0 0 15px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.tst__ci { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); }
.tst__ct { display: grid; gap: 1px; }
.tst__ct strong { font-size: var(--f-sm); font-weight: 700; color: var(--t-primary); }
.tst__ct span { font-size: var(--f-label); color: var(--t-muted); }
.tst__sides { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tst__sides li { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 12px; padding: 11px 13px; border-radius: var(--r-md); background: var(--s-frost); border: 1px solid transparent; }
.tst__sides li.is-flag { grid-template-columns: minmax(0,1fr) auto; background: color-mix(in srgb, var(--violet) 7%, transparent); border-color: color-mix(in srgb, var(--violet) 24%, transparent); }
.tst__sk { font-size: var(--f-xs); color: var(--t-secondary); }
.tst__sv { font-size: var(--f-sm); font-weight: 750; color: var(--t-primary); font-variant-numeric: tabular-nums; }
/* --t-primary flips with the theme and always clears AA; the flag itself is
   carried by the violet-tinted row, so the note text just needs to be legible.
   (Violet text here fell under AA on the dark card.) */
.tst__note { grid-column: 1 / -1; font-size: var(--f-label); font-weight: 700; color: var(--t-primary); }
@media (max-width: 620px) { .tst__cards { grid-template-columns: 1fr; } }

/* ── Health history (dark) — the growth line ───────────────────────────── */
.hist { position: relative; overflow: clip; }
.hist__inner { position: relative; z-index: 1; }
.hist__orb { top: -24%; left: -10%; width: 46vw; opacity: .45; }
.hist__grid { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(26px,4vw,56px); align-items: center; }
.hist__copy { min-width: 0; }
.hist__eyebrow { color: var(--cyan); }
.hist__h { color: var(--t-on-dark); margin: 12px 0 0; max-width: 20ch; }
.hist__lede { margin: 16px 0 0; max-width: 52ch; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }
.hist__pts { list-style: none; margin: clamp(20px,2.4vw,28px) 0 0; padding: 0; display: grid; gap: 12px; }
.hist__pts li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-on-dark-2); }
.hist__pi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); color: var(--cyan); flex: none; }
.hist__stage { min-width: 0; }
.hist__chart { padding: clamp(18px,2.4vw,26px); border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.045); box-shadow: 0 40px 90px -50px rgba(0,0,0,.8); }
.hist__charth { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 18px; }
.hist__chartk { font-size: var(--f-label); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--t-on-dark-2); }
.hist__gain { display: inline-flex; align-items: center; gap: 6px; font-size: var(--f-label); font-weight: 700; color: var(--cyan); }
.hist__gain svg { flex: none; }
.hist__bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(10px,1.6vw,18px); align-items: end; height: 230px; }
.hist__col { display: grid; grid-template-rows: 1fr auto; align-items: end; justify-items: center; gap: 8px; height: 100%; }
/* The value rides at the top of the bar (dark on cyan), so it moves with the
   bar as it grows. The bar height is set by --h once the column is is-grown. */
.hist__bar { grid-row: 1; align-self: end; width: 100%; max-width: 54px; height: 0; border-radius: 10px 10px 0 0;
  display: flex; justify-content: center; align-items: flex-start; padding-top: 7px;
  background: linear-gradient(180deg, var(--cyan), color-mix(in srgb, var(--cyan-600) 55%, transparent));
  transition: height .7s var(--ease-out); }
.hist__col.is-now .hist__bar { background: linear-gradient(180deg, var(--cyan), var(--violet)); }
.hist__col.is-grown .hist__bar { height: var(--h); }
.hist__val { font-size: var(--f-label); font-weight: 750; color: #04121F; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .4s var(--ease-out) .15s; }
.hist__col.is-grown .hist__val { opacity: 1; }
.hist__year { grid-row: 2; font-size: var(--f-label); color: var(--t-on-dark-2); font-variant-numeric: tabular-nums; }
.hist__cap { margin: 14px 0 0; font-size: var(--f-label); color: var(--t-on-dark-2); text-align: center; }
@media (max-width: 900px) { .hist__grid { grid-template-columns: 1fr; } }

/* ── Access / care ─────────────────────────────────────────────────────── */
.care__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px,3vw,40px); }
.care__head .eyebrow { justify-content: center; }
.care__head .h2 { margin: 12px 0 0; }
.care__lede { margin: 14px auto 0; max-width: 640px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.care__rows { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 9px; max-width: 900px; }
.care__rows li { display: grid; grid-template-columns: auto 190px minmax(0,1fr); align-items: start; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--s-card); }
.care__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; margin-top: 1px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); flex: none; }
.care__who { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.care__what { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6; }
@media (max-width: 680px) { .care__rows li { grid-template-columns: auto minmax(0,1fr); row-gap: 6px; } .care__what { grid-column: 2; } }

/* ── Infirmary "does not do" ───────────────────────────────────────────── */
.nsafe__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px,3vw,40px); }
.nsafe__head .eyebrow { justify-content: center; }
.nsafe__head .h2 { margin: 12px 0 0; }
.nsafe__lede { margin: 14px auto 0; max-width: 640px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.nsafe__rows { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 9px; max-width: 900px; }
.nsafe__rows li { display: grid; grid-template-columns: auto 190px minmax(0,1fr); align-items: start; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--s-card); }
.nsafe__no { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; margin-top: 1px; background: color-mix(in srgb, var(--violet) 13%, transparent); color: var(--violet); flex: none; }
.nsafe__who { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.nsafe__what { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6; }
@media (max-width: 680px) { .nsafe__rows li { grid-template-columns: auto minmax(0,1fr); row-gap: 6px; } .nsafe__what { grid-column: 2; } }

/* ==========================================================================
   REPORT CARDS & MARKSHEETS — /features/report-card-marksheet-software/
   Hero photo; the report card drawn richly. Runtime: initCerts.
   ========================================================================== */

/* ── Hero ──────────────────────────────────────────────────────────────── */
.rc__grid { align-items: center; }
.rc__pts { list-style: none; margin: clamp(20px,2.4vw,28px) 0 0; padding: 0; display: grid; gap: 10px; }
.rc__pts li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-on-dark-2); }
.rc__pi { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); color: var(--cyan); flex: none; }
.rc__shot { position: relative; min-width: 0; }
.rc__slot { border-radius: var(--r-lg); }
.rc__slot:has(img, picture, video) { box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); }
.rc__cap { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: var(--f-label); color: var(--t-on-dark-2); }
.rc__cap svg { color: var(--cyan); flex: none; }
@media (min-width: 980px) { .rc__grid { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); } .rc__shot { max-width: 440px; margin-inline: auto; } }

/* ── The report card ───────────────────────────────────────────────────── */
.sheet__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px,3.2vw,44px); }
.sheet__head .eyebrow { justify-content: center; }
.sheet__head .h2 { margin: 12px 0 0; }
.sheet__lede { margin: 14px auto 0; max-width: 660px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.sheet__doc { position: relative; max-width: 640px; margin: 0 auto; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--s-card); box-shadow: var(--sh-card); }
.sheet__ribbon { position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--cyan-600), var(--violet)); }
.sheet__masthead { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: center; padding: clamp(16px,2vw,22px) clamp(16px,2vw,22px) 14px; margin-top: 5px; border-bottom: 1px solid var(--border); }
.sheet__crest { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--cyan-600) 13%, transparent); color: var(--accent-text); }
.sheet__school { display: grid; gap: 1px; min-width: 0; }
.sheet__school b { font-size: var(--f-lead); font-weight: 750; color: var(--t-primary); letter-spacing: -.01em; }
.sheet__school i { font-style: normal; font-size: var(--f-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.sheet__student { display: flex; flex-wrap: wrap; gap: 8px clamp(14px,2.4vw,28px); padding: 13px clamp(16px,2vw,22px); background: var(--s-frost); border-bottom: 1px solid var(--border); font-size: var(--f-xs); color: var(--t-secondary); }
.sheet__student b { font-weight: 600; color: var(--t-muted); margin-right: 5px; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; }
.sheet__marks { padding: clamp(14px,2vw,20px) clamp(16px,2vw,22px); }
.sheet__mh, .sheet__marks li { display: grid; grid-template-columns: minmax(0,1fr) 54px 64px 60px; gap: 8px; align-items: center; }
.sheet__mh { padding: 0 4px 9px; margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--t-muted); }
.sheet__mh span:not(:first-child), .sheet__marks li span:not(.sheet__subj) { text-align: center; }
.sheet__marks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sheet__marks li { padding: 9px 4px; border-radius: 8px; }
.sheet__marks li:nth-child(odd) { background: var(--s-frost); }
.sheet__subj { font-size: var(--f-xs); font-weight: 650; color: var(--t-primary); }
.sheet__max { font-size: var(--f-label); color: var(--t-muted); font-variant-numeric: tabular-nums; }
.sheet__mk { font-size: var(--f-sm); font-weight: 750; color: var(--t-primary); font-variant-numeric: tabular-nums; }
.sheet__gr { font-size: var(--f-xs); font-weight: 700; color: var(--accent-text); }
.sheet__summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; padding: clamp(14px,2vw,18px) clamp(16px,2vw,22px); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sheet__stat { display: grid; gap: 3px; padding: 12px 10px; border-radius: var(--r-md); background: var(--s-frost); text-align: center; }
.sheet__stat b { font-size: clamp(1.1rem,2.2vw,1.35rem); font-weight: 750; color: var(--t-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.sheet__stat b i { font-style: normal; font-size: var(--f-label); font-weight: 600; color: var(--t-muted); }
.sheet__stat em { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--t-muted); }
.sheet__stat--hi { background: color-mix(in srgb, var(--cyan-600) 11%, transparent); }
.sheet__stat--hi b { color: var(--accent-text); }
.sheet__foot { display: grid; gap: 16px; padding: clamp(16px,2vw,20px) clamp(16px,2vw,22px); }
.sheet__remark { margin: 0; font-size: var(--f-xs); line-height: 1.55; color: var(--t-secondary); }
.sheet__remark b { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); margin-bottom: 4px; }
.sheet__signs { display: flex; justify-content: space-between; gap: 20px; margin-top: 6px; }
.sheet__signs span { flex: 1; display: grid; gap: 5px; font-size: var(--f-label); color: var(--t-muted); text-align: center; }
.sheet__signline { height: 1px; background: var(--t-muted); opacity: .45; }
.sheet__note { display: flex; align-items: center; justify-content: center; gap: 9px; margin: clamp(16px,2vw,22px) auto 0; max-width: 640px; text-align: center; font-size: var(--f-xs); color: var(--t-secondary); }
.sheet__note svg { color: var(--accent-text); flex: none; }
@media (max-width: 460px) { .sheet__summary { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ── Ranks ─────────────────────────────────────────────────────────────── */
.rank__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.95fr); gap: clamp(26px,4vw,56px); align-items: center; }
.rank__copy { min-width: 0; }
.rank__copy .h2 { margin: 12px 0 0; max-width: 18ch; }
.rank__lede { margin: 16px 0 0; max-width: 52ch; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.rank__pts { list-style: none; margin: clamp(20px,2.4vw,28px) 0 0; padding: 0; display: grid; gap: 12px; }
.rank__pts li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-secondary); }
.rank__pi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); flex: none; }
.rank__panel { padding: clamp(16px,2vw,22px); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--s-card); box-shadow: var(--sh-card); min-width: 0; }
.rank__ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.rank__pk { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.rank__pn { font-size: var(--f-label); color: var(--t-muted); }
.rank__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.rank__row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--s-frost); border: 1px solid transparent; }
.rank__row.is-you { background: color-mix(in srgb, var(--cyan-600) 11%, transparent); border-color: color-mix(in srgb, var(--cyan-600) 40%, transparent); }
.rank__pos { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--s-card); font-size: var(--f-label); font-weight: 750; color: var(--t-secondary); font-variant-numeric: tabular-nums; }
.rank__row.is-you .rank__pos { background: var(--accent); color: #04121F; }
.rank__roll { font-size: var(--f-xs); font-weight: 650; color: var(--t-primary); }
.rank__roll em { font-style: normal; font-weight: 600; color: var(--accent-text); font-size: var(--f-label); }
.rank__tot { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); font-variant-numeric: tabular-nums; }
.rank__tot i { font-style: normal; font-weight: 600; color: var(--t-muted); font-size: var(--f-label); }
.rank__pct { font-size: var(--f-label); font-weight: 650; color: var(--accent-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank__more { padding: 9px 12px; text-align: center; font-size: var(--f-label); color: var(--t-muted); }
@media (max-width: 900px) { .rank__grid { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .rank__row { grid-template-columns: 24px minmax(0,1fr) auto; } .rank__pct { display: none; } }

/* ── Certificates (dark) ───────────────────────────────────────────────── */
.certs { position: relative; overflow: clip; }
.certs__inner { position: relative; z-index: 1; }
.certs__orb { top: -24%; right: -10%; width: 48vw; opacity: .45; }
.certs__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px,3.2vw,44px); }
.certs__head .eyebrow { justify-content: center; }
.certs__eyebrow { color: var(--cyan); }
.certs__h { color: var(--t-on-dark); margin: 12px 0 0; }
.certs__lede { margin: 14px auto 0; max-width: 660px; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }
.certs__stage { max-width: 760px; margin-inline: auto; display: grid; gap: 14px; }
.certs__tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.certs__tab { display: grid; gap: 3px; text-align: left; padding: 13px 15px; border-radius: var(--r-md); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.11); cursor: pointer; transition: border-color .3s var(--ease-out), background .3s var(--ease-out); }
.certs__tab:hover { border-color: rgba(2,217,254,.34); }
.certs__tab.is-on { border-color: color-mix(in srgb, var(--cyan-600) 55%, transparent); background: rgba(2,217,254,.1); }
.certs__tabn { font-size: var(--f-xs); font-weight: 700; color: var(--t-on-dark); }
.certs__tabp { font-size: var(--f-label); color: var(--t-on-dark-2); line-height: 1.4; }
.certs__viewer { display: grid; }
/* All three stack in one grid cell. Only the active panel carries a transition,
   so the outgoing one hides instantly (no two-panels-overlapping ghost during a
   crossfade) and the incoming one fades up. */
.certs__doc { grid-area: 1 / 1; padding: clamp(20px,2.6vw,30px); border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.045); box-shadow: 0 30px 70px -45px rgba(0,0,0,.8); opacity: 0; visibility: hidden; translate: 0 10px; }
.certs__doc.is-on { opacity: 1; visibility: visible; translate: 0; transition: opacity .45s var(--ease-out), translate .45s var(--ease-out); }
.certs__doch { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.12); }
.certs__crest { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(2,217,254,.13); color: var(--cyan); }
.certs__doct { font-size: var(--f-lead); font-weight: 750; color: var(--t-on-dark); letter-spacing: -.01em; }
.certs__docbody { margin: 0; font-size: var(--f-sm); line-height: 1.75; color: var(--t-on-dark-2); }
.certs__docbody b { color: var(--cyan); font-weight: 700; }
.certs__docf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 18px; }
.certs__from { display: inline-flex; align-items: center; gap: 6px; font-size: var(--f-label); color: var(--t-on-dark-2); }
.certs__from svg { color: var(--cyan); flex: none; }
.certs__sign { display: grid; gap: 5px; min-width: 120px; font-size: var(--f-label); color: var(--t-on-dark-2); text-align: center; }
.certs__signline { height: 1px; background: rgba(255,255,255,.4); }
@media (max-width: 560px) { .certs__tabs { grid-template-columns: 1fr; } .certs__tab { grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 10px; } }

/* ── Source (read, not re-typed) ───────────────────────────────────────── */
.source__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(24px,3vw,38px); }
.source__head .eyebrow { justify-content: center; }
.source__head .h2 { margin: 12px 0 0; }
.source__lede { margin: 14px auto 0; max-width: 660px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.source__flow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: clamp(10px,1.6vw,20px); max-width: 820px; margin-inline: auto; }
.source__node { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 13px; padding: clamp(16px,2vw,22px); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card); }
.source__node--out { border-color: color-mix(in srgb, var(--cyan-600) 34%, transparent); background: color-mix(in srgb, var(--cyan-600) 6%, transparent); }
.source__ni { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); flex: none; }
.source__nt { display: grid; gap: 3px; min-width: 0; }
.source__nt strong { font-size: var(--f-sm); font-weight: 700; color: var(--t-primary); }
.source__nt span { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.4; }
.source__link { display: grid; justify-items: center; gap: 3px; color: var(--accent-text); }
.source__linkline { display: none; }
.source__linkt { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.source__foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: clamp(20px,2.4vw,28px) auto 0; max-width: 640px; text-align: center; font-size: var(--f-xs); color: var(--t-secondary); }
.source__foot svg { color: var(--accent-text); flex: none; }
.source__foot a { color: var(--accent-text); font-weight: 650; }
.source__foot a:hover { text-decoration: underline; }
@media (max-width: 640px) { .source__flow { grid-template-columns: 1fr; } .source__link { transform: rotate(90deg); padding: 4px 0; } }

/* ── Report-card "does not do" ─────────────────────────────────────────── */
.rcsafe__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px,3vw,40px); }
.rcsafe__head .eyebrow { justify-content: center; }
.rcsafe__head .h2 { margin: 12px 0 0; }
.rcsafe__lede { margin: 14px auto 0; max-width: 640px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.rcsafe__rows { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 9px; max-width: 900px; }
.rcsafe__rows li { display: grid; grid-template-columns: auto 180px minmax(0,1fr); align-items: start; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--s-card); }
.rcsafe__no { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; margin-top: 1px; background: color-mix(in srgb, var(--violet) 13%, transparent); color: var(--violet); flex: none; }
.rcsafe__who { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.rcsafe__what { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6; }
@media (max-width: 680px) { .rcsafe__rows li { grid-template-columns: auto minmax(0,1fr); row-gap: 6px; } .rcsafe__what { grid-column: 2; } }

/* ==========================================================================
   LIBRARY — /features/library-management-software/
   Hero photo; below it drawn. Runtimes: initLoan, initFine.
   ========================================================================== */

/* ── Hero ──────────────────────────────────────────────────────────────── */
.lib__grid { align-items: center; }
.lib__pts { list-style: none; margin: clamp(20px,2.4vw,28px) 0 0; padding: 0; display: grid; gap: 10px; }
.lib__pts li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-on-dark-2); }
.lib__pi { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); color: var(--cyan); flex: none; }
.lib__shot { position: relative; min-width: 0; }
.lib__slot { border-radius: var(--r-lg); }
.lib__slot:has(img, picture, video) { box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); }
.lib__cap { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: var(--f-label); color: var(--t-on-dark-2); }
.lib__cap svg { color: var(--cyan); flex: none; }
@media (min-width: 980px) { .lib__grid { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); } .lib__shot { max-width: 440px; margin-inline: auto; } }

/* ── Catalogue ─────────────────────────────────────────────────────────── */
.cat__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.95fr); gap: clamp(26px,4vw,56px); align-items: center; }
.cat__copy { min-width: 0; }
.cat__copy .h2 { margin: 12px 0 0; max-width: 18ch; }
.cat__lede { margin: 16px 0 0; max-width: 52ch; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.cat__pts { list-style: none; margin: clamp(20px,2.4vw,28px) 0 0; padding: 0; display: grid; gap: 12px; }
.cat__pts li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-secondary); }
.cat__pi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); flex: none; }
.cat__panel { padding: clamp(16px,2vw,22px); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--s-card); box-shadow: var(--sh-card); min-width: 0; }
.cat__field { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 11px 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--s-frost); font-size: var(--f-xs); color: var(--t-muted); }
.cat__field svg { color: var(--accent-text); flex: none; }
.cat__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cat__row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 13px; border-radius: var(--r-md); background: var(--s-frost); border: 1px solid transparent; }
.cat__row.is-out { background: color-mix(in srgb, var(--violet) 7%, transparent); border-color: color-mix(in srgb, var(--violet) 24%, transparent); }
.cat__bt { display: grid; gap: 1px; min-width: 0; }
.cat__bt strong { font-size: var(--f-xs); font-weight: 650; color: var(--t-primary); }
.cat__bt span { font-size: var(--f-label); color: var(--t-muted); }
.cat__copies { text-align: right; font-size: var(--f-label); color: var(--t-secondary); white-space: nowrap; }
.cat__copies b { font-size: var(--f-sm); font-weight: 750; color: var(--accent-text); }
.cat__copies i { display: block; font-style: normal; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--t-muted); }
.cat__row.is-out .cat__copies b { color: var(--violet); }
@media (max-width: 900px) { .cat__grid { grid-template-columns: 1fr; } }

/* ── Loan (issue & return) ─────────────────────────────────────────────── */
.loan__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(26px,4vw,56px); align-items: center; }
.loan__copy { min-width: 0; }
.loan__copy .h2 { margin: 12px 0 0; max-width: 16ch; }
.loan__lede { margin: 16px 0 0; max-width: 52ch; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.loan__pts { list-style: none; margin: clamp(20px,2.4vw,28px) 0 0; padding: 0; display: grid; gap: 12px; }
.loan__pts li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-secondary); }
.loan__pi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); flex: none; }
.loan__stage { min-width: 0; }
.loan__card { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; align-items: start; padding: clamp(18px,2.2vw,24px); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--s-card); box-shadow: var(--sh-card); }
.loan__cover { display: grid; place-items: center; width: 60px; height: 76px; border-radius: 8px; background: linear-gradient(160deg, color-mix(in srgb, var(--cyan-600) 18%, transparent), color-mix(in srgb, var(--violet) 18%, transparent)); border: 1px solid var(--border); color: var(--accent-text); flex: none; }
.loan__info { display: grid; gap: 4px; min-width: 0; }
.loan__info strong { font-size: var(--f-sm); font-weight: 700; color: var(--t-primary); }
.loan__copyid { font-size: var(--f-label); color: var(--t-muted); }
/* Status chip stays one accent colour (theme-safe); the step tracker below is
   what shows which state the copy is in, so the chip only changes its word. */
.loan__status { justify-self: start; margin-top: 3px; padding: 4px 11px; border-radius: 999px; font-size: var(--f-label); font-weight: 700; background: color-mix(in srgb, var(--cyan-600) 13%, transparent); color: var(--accent-text); }
.loan__detail { font-size: var(--f-xs); color: var(--t-secondary); }
.loan__steps { list-style: none; margin: clamp(16px,2vw,20px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.loan__step { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: var(--r-md); background: var(--s-frost); border: 1px solid var(--border); text-align: center; transition: border-color .35s var(--ease-out), background .35s var(--ease-out); }
.loan__step.is-on { border-color: color-mix(in srgb, var(--cyan-600) 45%, transparent); background: color-mix(in srgb, var(--cyan-600) 9%, transparent); }
.loan__step.is-done { opacity: .55; }
.loan__si { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--s-card); color: var(--t-muted); }
.loan__step.is-on .loan__si { background: var(--accent); color: #04121F; }
.loan__step.is-done .loan__si { color: var(--accent-text); }
.loan__sl { font-size: var(--f-label); font-weight: 650; color: var(--t-secondary); }
.loan__step.is-on .loan__sl { color: var(--t-primary); }
@media (max-width: 900px) { .loan__grid { grid-template-columns: 1fr; } }

/* ── Fine (dark) ───────────────────────────────────────────────────────── */
.fine { position: relative; overflow: clip; }
.fine__inner { position: relative; z-index: 1; }
.fine__orb { top: -24%; right: -10%; width: 48vw; opacity: .45; }
.fine__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); gap: clamp(26px,4vw,56px); align-items: center; }
.fine__copy { min-width: 0; }
.fine__eyebrow { color: var(--cyan); }
.fine__h { color: var(--t-on-dark); margin: 12px 0 0; max-width: 18ch; }
.fine__lede { margin: 16px 0 0; max-width: 52ch; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }
.fine__pts { list-style: none; margin: clamp(20px,2.4vw,28px) 0 0; padding: 0; display: grid; gap: 12px; }
.fine__pts li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-on-dark-2); }
.fine__pi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); color: var(--cyan); flex: none; }
.fine__stage { min-width: 0; }
.fine__panel { padding: clamp(18px,2.4vw,26px); border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.045); box-shadow: 0 40px 90px -50px rgba(0,0,0,.8); }
.fine__ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.fine__pk { font-size: var(--f-xs); font-weight: 700; color: var(--t-on-dark); }
.fine__due { font-size: var(--f-label); font-weight: 650; color: var(--cyan); white-space: nowrap; }
.fine__meter { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.fine__amount { font-size: clamp(2.4rem,6vw,3.4rem); font-weight: 800; color: var(--cyan); line-height: 1; font-variant-numeric: tabular-nums; }
.fine__calc { font-size: var(--f-xs); color: var(--t-on-dark-2); font-variant-numeric: tabular-nums; }
.fine__track { display: flex; gap: 5px; margin-bottom: 16px; }
.fine__day { flex: 1; height: 12px; border-radius: 3px; background: rgba(255,255,255,.09); transition: background .3s var(--ease-out); }
.fine__day.is-on { background: linear-gradient(180deg, var(--cyan), color-mix(in srgb, var(--cyan-600) 50%, transparent)); }
.fine__foot { margin: 0; font-size: var(--f-label); color: var(--t-on-dark-2); }
@media (max-width: 900px) { .fine__grid { grid-template-columns: 1fr; } }

/* ── Condition (damaged/lost) ──────────────────────────────────────────── */
.cond__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px,3vw,40px); }
.cond__head .eyebrow { justify-content: center; }
.cond__head .h2 { margin: 12px 0 0; }
.cond__lede { margin: 14px auto 0; max-width: 660px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.cond__panel { max-width: 720px; margin-inline: auto; padding: clamp(16px,2vw,22px); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--s-card); box-shadow: var(--sh-card); }
.cond__ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.cond__pk { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.cond__pc { font-size: var(--f-label); color: var(--t-secondary); }
.cond__pc b { font-size: var(--f-sm); font-weight: 750; color: var(--accent-text); }
.cond__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cond__row { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--s-frost); border: 1px solid transparent; }
.cond__ci { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--s-card); color: var(--t-muted); }
.cond__copy { font-size: var(--f-xs); font-weight: 650; color: var(--t-primary); }
/* Neutral chip that stays visible on both themes (a black tint vanishes on the
   dark surface). Per-state colours override below. */
.cond__state { font-size: var(--f-label); font-weight: 700; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--t-primary) 8%, transparent); color: var(--t-secondary); white-space: nowrap; }
.cond__where { font-size: var(--f-label); color: var(--t-muted); justify-self: end; text-align: right; }
.cond__row--good .cond__ci, .cond__row--loan .cond__ci { color: var(--accent-text); }
.cond__row--good .cond__state { background: color-mix(in srgb, var(--cyan-600) 13%, transparent); color: var(--accent-text); }
.cond__row--damaged { background: color-mix(in srgb, var(--violet) 7%, transparent); border-color: color-mix(in srgb, var(--violet) 22%, transparent); }
.cond__row--damaged .cond__ci { color: var(--violet); }
.cond__row--damaged .cond__state { background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--violet); }
.cond__row--lost { opacity: .72; }
.cond__row--lost .cond__state { color: var(--t-muted); }
@media (max-width: 560px) { .cond__row { grid-template-columns: auto minmax(0,1fr) auto; } .cond__ci { display: none; } .cond__where { grid-column: 1 / -1; justify-self: start; text-align: left; } }

/* ── Library "does not do" ─────────────────────────────────────────────── */
.libsafe__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px,3vw,40px); }
.libsafe__head .eyebrow { justify-content: center; }
.libsafe__head .h2 { margin: 12px 0 0; }
.libsafe__lede { margin: 14px auto 0; max-width: 640px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.libsafe__rows { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 9px; max-width: 900px; }
.libsafe__rows li { display: grid; grid-template-columns: auto 200px minmax(0,1fr); align-items: start; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--s-card); }
.libsafe__no { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; margin-top: 1px; background: color-mix(in srgb, var(--violet) 13%, transparent); color: var(--violet); flex: none; }
.libsafe__who { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.libsafe__what { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6; }
@media (max-width: 680px) { .libsafe__rows li { grid-template-columns: auto minmax(0,1fr); row-gap: 6px; } .libsafe__what { grid-column: 2; } }

/* ==========================================================================
   ACCOUNTING — /features/school-accounting-software/  (drawn graphic hero)
   Runtime: initCheque.
   ========================================================================== */

/* Hero art: the combined ledger */
.acc__grid { align-items: center; }
.acc__art { min-width: 0; }
@media (min-width: 980px) { .acc__grid { grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); } }
.acc__ledger { max-width: 420px; margin-inline: auto; padding: clamp(18px,2.2vw,24px); border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); box-shadow: 0 40px 90px -50px rgba(0,0,0,.8); }
.acc__lh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.12); }
.acc__lk { display: inline-flex; align-items: center; gap: 8px; font-size: var(--f-xs); font-weight: 700; color: var(--t-on-dark); }
.acc__lk svg { color: var(--cyan); }
.acc__lm { font-size: var(--f-label); color: var(--t-on-dark-2); }
.acc__lines { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.acc__line { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; font-size: var(--f-xs); }
.acc__dot { width: 8px; height: 8px; border-radius: 50%; }
.acc__line--in .acc__dot { background: var(--cyan); }
.acc__line--out .acc__dot { background: var(--violet); }
.acc__ll { color: var(--t-on-dark-2); }
.acc__la { font-weight: 700; font-variant-numeric: tabular-nums; }
.acc__line--in .acc__la { color: var(--cyan); }
.acc__line--out .acc__la { color: #C6A2FF; }
.acc__bal { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.12); }
.acc__bal span { font-size: var(--f-label); color: var(--t-on-dark-2); text-transform: uppercase; letter-spacing: .05em; }
.acc__bal b { font-size: clamp(1.4rem,2.6vw,1.8rem); font-weight: 800; color: var(--t-on-dark); font-variant-numeric: tabular-nums; }

/* Ledger section */
.ledg__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(26px,4vw,56px); align-items: center; }
.ledg__copy { min-width: 0; } .ledg__copy .h2 { margin: 12px 0 0; max-width: 16ch; }
.ledg__lede { margin: 16px 0 0; max-width: 52ch; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.ledg__pts { list-style: none; margin: clamp(20px,2.4vw,28px) 0 0; padding: 0; display: grid; gap: 12px; }
.ledg__pts li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-secondary); }
.ledg__pi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); flex: none; }
.ledg__panel { padding: clamp(16px,2vw,22px); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--s-card); box-shadow: var(--sh-card); min-width: 0; }
.ledg__ph, .ledg__row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 12px; align-items: baseline; }
.ledg__ph { padding: 0 12px 10px; margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); }
.ledg__ph span:not(:first-child), .ledg__row .ledg__amt, .ledg__row .ledg__bal { text-align: right; }
.ledg__row { padding: 10px 12px; border-radius: 9px; }
.ledg__row--in, .ledg__row--out { background: var(--s-frost); }
.ledg__row--open, .ledg__row--close { font-weight: 700; }
.ledg__row--close { background: color-mix(in srgb, var(--cyan-600) 10%, transparent); margin-top: 4px; }
.ledg__part { font-size: var(--f-xs); color: var(--t-primary); }
.ledg__date { display: inline-block; min-width: 44px; font-size: var(--f-label); color: var(--t-muted); font-variant-numeric: tabular-nums; }
.ledg__amt { font-size: var(--f-label); font-weight: 700; font-variant-numeric: tabular-nums; }
.ledg__row--in .ledg__amt { color: var(--accent-text); }
.ledg__row--out .ledg__amt { color: var(--violet); }
.ledg__bal { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); font-variant-numeric: tabular-nums; }
.ledg__row--close .ledg__bal { color: var(--accent-text); }
@media (max-width: 900px) { .ledg__grid { grid-template-columns: 1fr; } }

/* Heads */
.heads__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px,3vw,40px); }
.heads__head .eyebrow { justify-content: center; } .heads__head .h2 { margin: 12px 0 0; }
.heads__lede { margin: 14px auto 0; max-width: 640px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.heads__cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(12px,1.8vw,20px); max-width: 820px; margin-inline: auto; }
.heads__col { padding: clamp(18px,2.2vw,24px); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card); }
.heads__ch { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.heads__col--in .heads__ch svg { color: var(--accent-text); }
.heads__col--out .heads__ch svg { color: var(--violet); }
.heads__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.heads__col li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-secondary); }
.heads__dot { width: 7px; height: 7px; border-radius: 50%; }
.heads__col--in .heads__dot { background: var(--cyan-600); }
.heads__col--out .heads__dot { background: var(--violet); }
@media (max-width: 560px) { .heads__cols { grid-template-columns: 1fr; } }

/* Cheque (dark) — reuses the loan step-tracker shape */
.chq { position: relative; overflow: clip; } .chq__inner { position: relative; z-index: 1; }
.chq__orb { top: -24%; right: -10%; width: 48vw; opacity: .45; }
.chq__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(26px,4vw,56px); align-items: center; }
.chq__copy { min-width: 0; } .chq__eyebrow { color: var(--cyan); } .chq__h { color: var(--t-on-dark); margin: 12px 0 0; max-width: 18ch; }
.chq__lede { margin: 16px 0 0; max-width: 52ch; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }
.chq__pts { list-style: none; margin: clamp(20px,2.4vw,28px) 0 0; padding: 0; display: grid; gap: 12px; }
.chq__pts li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-on-dark-2); }
.chq__pi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); color: var(--cyan); flex: none; }
.chq__stage { min-width: 0; }
.chq__card { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; align-items: center; padding: clamp(18px,2.2vw,24px); border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); box-shadow: 0 40px 90px -50px rgba(0,0,0,.8); }
.chq__slip { display: grid; gap: 3px; padding: 14px 16px; border-radius: var(--r-md); background: rgba(2,217,254,.09); border: 1px dashed rgba(2,217,254,.34); }
.chq__slabel { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.chq__amt { font-size: var(--f-lead); font-weight: 800; color: var(--t-on-dark); font-variant-numeric: tabular-nums; }
.chq__bank { font-size: var(--f-label); color: var(--t-on-dark-2); }
.chq__state { display: grid; gap: 4px; min-width: 0; }
.chq__status { justify-self: start; padding: 4px 11px; border-radius: 999px; font-size: var(--f-label); font-weight: 700; background: rgba(255,255,255,.09); color: var(--t-on-dark-2); }
.chq__stage.is-received .chq__status { background: rgba(245,184,67,.16); color: #F5B843; }
.chq__stage.is-deposited .chq__status { background: rgba(2,217,254,.12); color: var(--cyan); }
.chq__stage.is-cleared .chq__status { background: rgba(2,217,254,.16); color: var(--cyan); }
.chq__detail { font-size: var(--f-xs); color: var(--t-on-dark-2); }
.chq__steps { list-style: none; margin: clamp(16px,2vw,20px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.chq__step { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: var(--r-md); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); text-align: center; transition: border-color .35s var(--ease-out), background .35s var(--ease-out); }
.chq__step.is-on { border-color: rgba(2,217,254,.45); background: rgba(2,217,254,.08); }
.chq__step.is-done { opacity: .5; }
.chq__si { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.08); color: var(--t-on-dark-2); }
.chq__step.is-on .chq__si { background: var(--cyan); color: #04121F; }
.chq__sl { font-size: var(--f-label); font-weight: 650; color: var(--t-on-dark-2); }
.chq__step.is-on .chq__sl { color: var(--t-on-dark); }
@media (max-width: 900px) { .chq__grid { grid-template-columns: 1fr; } }

/* Bank & GST */
.bnk__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px,3vw,40px); }
.bnk__head .eyebrow { justify-content: center; } .bnk__head .h2 { margin: 12px 0 0; }
.bnk__lede { margin: 14px auto 0; max-width: 660px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.bnk__cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(12px,1.8vw,20px); max-width: 900px; margin-inline: auto; }
.bnk__panel { padding: clamp(18px,2.2vw,24px); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card); }
.bnk__ph { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.bnk__ph svg { color: var(--accent-text); }
.bnk__accts, .bnk__gst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bnk__accts li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: var(--r-md); background: var(--s-frost); }
.bnk__at { display: grid; gap: 1px; } .bnk__at strong { font-size: var(--f-xs); font-weight: 650; color: var(--t-primary); } .bnk__at span { font-size: var(--f-label); color: var(--t-muted); }
.bnk__ab { font-size: var(--f-sm); font-weight: 750; color: var(--accent-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bnk__gst li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: var(--r-md); background: var(--s-frost); }
.bnk__gh { font-size: var(--f-xs); color: var(--t-secondary); }
.bnk__gr { font-size: var(--f-label); font-weight: 700; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet); white-space: nowrap; }
.bnk__gr.is-exempt { background: color-mix(in srgb, var(--t-primary) 8%, transparent); color: var(--t-secondary); }
.bnk__note { margin: 12px 0 0; font-size: var(--f-label); color: var(--t-muted); }
@media (max-width: 700px) { .bnk__cols { grid-template-columns: 1fr; } }

/* Accounting "does not do" */
.accsafe__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px,3vw,40px); }
.accsafe__head .eyebrow { justify-content: center; } .accsafe__head .h2 { margin: 12px 0 0; }
.accsafe__lede { margin: 14px auto 0; max-width: 640px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.accsafe__rows { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 9px; max-width: 900px; }
.accsafe__rows li { display: grid; grid-template-columns: auto 210px minmax(0,1fr); align-items: start; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--s-card); }
.accsafe__no { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; margin-top: 1px; background: color-mix(in srgb, var(--violet) 13%, transparent); color: var(--violet); flex: none; }
.accsafe__who { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.accsafe__what { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6; }
@media (max-width: 680px) { .accsafe__rows li { grid-template-columns: auto minmax(0,1fr); row-gap: 6px; } .accsafe__what { grid-column: 2; } }

/* ==========================================================================
   VISITOR — /features/visitor-management-system/  (drawn graphic hero)
   Runtime: initAppt (+ reused initCounters).
   ========================================================================== */

/* Hero art: a visitor pass */
.vis__grid { align-items: center; } .vis__art { min-width: 0; }
@media (min-width: 980px) { .vis__grid { grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); } }
.vis__pass { max-width: 400px; margin-inline: auto; border-radius: var(--r-xl); overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); box-shadow: 0 40px 90px -50px rgba(0,0,0,.8); }
.vis__passh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 15px 18px; background: linear-gradient(120deg, rgba(2,217,254,.14), transparent 60%); border-bottom: 1px solid rgba(255,255,255,.12); }
.vis__passk { display: inline-flex; align-items: center; gap: 8px; font-size: var(--f-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cyan); }
.vis__passno { font-size: var(--f-label); font-weight: 700; color: var(--t-on-dark-2); font-variant-numeric: tabular-nums; }
.vis__passbody { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; align-items: center; padding: 18px; }
.vis__passav { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(2,217,254,.12); border: 1px solid rgba(2,217,254,.3); color: var(--cyan); }
.vis__passd { margin: 0; display: grid; gap: 8px; }
.vis__passd div { display: grid; gap: 1px; }
.vis__passd dt { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--t-on-dark-2); }
.vis__passd dd { margin: 0; font-size: var(--f-xs); font-weight: 650; color: var(--t-on-dark); }
.vis__passf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 13px 18px; border-top: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.16); font-size: var(--f-label); color: var(--t-on-dark-2); }
.vis__in { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); margin-right: 4px; }
.vis__passon { font-weight: 700; color: var(--cyan); padding: 3px 10px; border-radius: 999px; background: rgba(2,217,254,.12); }

/* Gate log */
.vlog__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(26px,4vw,56px); align-items: center; }
.vlog__copy { min-width: 0; } .vlog__copy .h2 { margin: 12px 0 0; max-width: 16ch; }
.vlog__lede { margin: 16px 0 0; max-width: 52ch; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.vlog__pts { list-style: none; margin: clamp(20px,2.4vw,28px) 0 0; padding: 0; display: grid; gap: 12px; }
.vlog__pts li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-secondary); }
.vlog__pi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); flex: none; }
.vlog__panel { padding: clamp(16px,2vw,22px); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--s-card); box-shadow: var(--sh-card); min-width: 0; }
.vlog__ph, .vlog__row { display: grid; grid-template-columns: 52px minmax(0,1fr) minmax(0,1.1fr) auto; gap: 10px; align-items: center; }
.vlog__ph { padding: 0 12px 10px; margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); }
.vlog__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.vlog__row { padding: 11px 12px; border-radius: var(--r-md); background: var(--s-frost); }
.vlog__row.is-in { background: color-mix(in srgb, var(--cyan-600) 8%, transparent); }
.vlog__time { font-size: var(--f-label); font-weight: 700; color: var(--t-secondary); font-variant-numeric: tabular-nums; }
.vlog__who { font-size: var(--f-xs); font-weight: 650; color: var(--t-primary); }
.vlog__host { font-size: var(--f-label); color: var(--t-secondary); }
.vlog__status { font-size: var(--f-label); font-weight: 700; color: var(--t-muted); white-space: nowrap; text-align: right; }
.vlog__row.is-in .vlog__status { color: var(--accent-text); }
.vlog__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-600); margin-right: 3px; }
@media (max-width: 900px) { .vlog__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .vlog__ph, .vlog__row { grid-template-columns: 46px minmax(0,1fr) auto; } .vlog__host { display: none; } }

/* Appointment (step tracker like loan/cheque) */
.appt__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(26px,4vw,56px); align-items: center; }
.appt__copy { min-width: 0; } .appt__copy .h2 { margin: 12px 0 0; max-width: 16ch; }
.appt__lede { margin: 16px 0 0; max-width: 52ch; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.appt__pts { list-style: none; margin: clamp(20px,2.4vw,28px) 0 0; padding: 0; display: grid; gap: 12px; }
.appt__pts li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-secondary); }
.appt__pi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); flex: none; }
.appt__stage { min-width: 0; }
.appt__card { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; align-items: start; padding: clamp(18px,2.2vw,24px); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--s-card); box-shadow: var(--sh-card); }
.appt__ai { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); flex: none; }
.appt__info { display: grid; gap: 4px; min-width: 0; }
.appt__info strong { font-size: var(--f-sm); font-weight: 700; color: var(--t-primary); }
.appt__when { font-size: var(--f-label); color: var(--t-muted); }
.appt__status { justify-self: start; margin-top: 3px; padding: 4px 11px; border-radius: 999px; font-size: var(--f-label); font-weight: 700; background: var(--s-frost); color: var(--t-secondary); }
.appt__stage.is-requested .appt__status { background: rgba(245,184,67,.16); color: #B4791A; }
.appt__stage.is-approved .appt__status, .appt__stage.is-arrived .appt__status { background: color-mix(in srgb, var(--cyan-600) 14%, transparent); color: var(--accent-text); }
.appt__detail { font-size: var(--f-xs); color: var(--t-secondary); }
.appt__steps { list-style: none; margin: clamp(16px,2vw,20px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.appt__step { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: var(--r-md); background: var(--s-frost); border: 1px solid var(--border); text-align: center; transition: border-color .35s var(--ease-out), background .35s var(--ease-out); }
.appt__step.is-on { border-color: color-mix(in srgb, var(--cyan-600) 45%, transparent); background: color-mix(in srgb, var(--cyan-600) 9%, transparent); }
.appt__step.is-done { opacity: .55; }
.appt__si { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--s-card); color: var(--t-muted); }
.appt__step.is-on .appt__si { background: var(--accent); color: #04121F; }
.appt__sl { font-size: var(--f-label); font-weight: 650; color: var(--t-secondary); }
.appt__step.is-on .appt__sl { color: var(--t-primary); }
@media (max-width: 900px) { .appt__grid { grid-template-columns: 1fr; } }

/* Inside (dark) */
.inside { position: relative; overflow: clip; } .inside__inner { position: relative; z-index: 1; }
.inside__orb { top: -24%; left: -10%; width: 46vw; opacity: .45; }
.inside__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.95fr); gap: clamp(26px,4vw,56px); align-items: center; }
.inside__copy { min-width: 0; } .inside__eyebrow { color: var(--cyan); } .inside__h { color: var(--t-on-dark); margin: 12px 0 0; max-width: 18ch; }
.inside__lede { margin: 16px 0 0; max-width: 52ch; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }
.inside__count { display: flex; align-items: baseline; gap: 12px; margin: clamp(20px,2.4vw,28px) 0 0; }
.inside__n { font-size: clamp(2.6rem,6vw,3.6rem); font-weight: 800; color: var(--cyan); line-height: 1; font-variant-numeric: tabular-nums; }
.inside__nl { font-size: var(--f-sm); color: var(--t-on-dark-2); }
.inside__panel { padding: clamp(18px,2.2vw,24px); border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); box-shadow: 0 40px 90px -50px rgba(0,0,0,.8); min-width: 0; }
.inside__ph { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: var(--f-label); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--t-on-dark-2); }
.inside__pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(2,217,254,.5); animation: inside-pulse 2s var(--ease-out) infinite; }
@keyframes inside-pulse { 70% { box-shadow: 0 0 0 8px rgba(2,217,254,0); } 100% { box-shadow: 0 0 0 0 rgba(2,217,254,0); } }
@media (prefers-reduced-motion: reduce) { .inside__pulse { animation: none; } }
.inside__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.inside__rows li { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); }
.inside__vi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(2,217,254,.12); color: var(--cyan); }
.inside__vt { display: grid; gap: 1px; min-width: 0; } .inside__vt strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-on-dark); } .inside__vt span { font-size: var(--f-label); color: var(--t-on-dark-2); }
.inside__vtime { font-size: var(--f-label); color: var(--t-on-dark-2); white-space: nowrap; }
@media (max-width: 900px) { .inside__grid { grid-template-columns: 1fr; } }

/* Visit history */
.vhist__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(26px,4vw,56px); align-items: center; }
.vhist__copy { min-width: 0; } .vhist__copy .h2 { margin: 12px 0 0; max-width: 18ch; }
.vhist__lede { margin: 16px 0 0; max-width: 52ch; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.vhist__pts { list-style: none; margin: clamp(20px,2.4vw,28px) 0 0; padding: 0; display: grid; gap: 12px; }
.vhist__pts li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-secondary); }
.vhist__pi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); flex: none; }
.vhist__panel { padding: clamp(16px,2vw,22px); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--s-card); box-shadow: var(--sh-card); min-width: 0; }
.vhist__field { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 11px 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--s-frost); font-size: var(--f-xs); color: var(--t-muted); }
.vhist__field svg { color: var(--accent-text); }
.vhist__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.vhist__rows li { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-md); background: var(--s-frost); }
.vhist__date { font-size: var(--f-label); font-weight: 700; color: var(--t-secondary); }
.vhist__vt { display: grid; gap: 1px; min-width: 0; } .vhist__vt strong { font-size: var(--f-xs); font-weight: 650; color: var(--t-primary); } .vhist__vt span { font-size: var(--f-label); color: var(--t-muted); }
.vhist__span { font-size: var(--f-label); color: var(--t-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .vhist__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .vhist__rows li { grid-template-columns: 48px minmax(0,1fr); } .vhist__span { grid-column: 2; } }

/* Visitor "does not do" */
.vissafe__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px,3vw,40px); }
.vissafe__head .eyebrow { justify-content: center; } .vissafe__head .h2 { margin: 12px 0 0; }
.vissafe__lede { margin: 14px auto 0; max-width: 640px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.vissafe__rows { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 9px; max-width: 900px; }
.vissafe__rows li { display: grid; grid-template-columns: auto 210px minmax(0,1fr); align-items: start; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--s-card); }
.vissafe__no { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; margin-top: 1px; background: color-mix(in srgb, var(--violet) 13%, transparent); color: var(--violet); flex: none; }
.vissafe__who { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.vissafe__what { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6; }
@media (max-width: 680px) { .vissafe__rows li { grid-template-columns: auto minmax(0,1fr); row-gap: 6px; } .vissafe__what { grid-column: 2; } }

/* ==========================================================================
   ONLINE EXAM & E-LEARNING — /features/online-exam-software/  (drawn hero)
   Runtime: initQuiz.
   ========================================================================== */

/* Hero art: the app's learning tab */
.oe__grid { align-items: center; } .oe__art { min-width: 0; }
@media (min-width: 980px) { .oe__grid { grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); } }
.oe__phone { max-width: 320px; margin-inline: auto; border-radius: 26px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); box-shadow: 0 40px 90px -50px rgba(0,0,0,.8); padding: 16px; }
.oe__phoneh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 4px 14px; }
.oe__phonek { font-size: var(--f-lead); font-weight: 750; color: var(--t-on-dark); }
.oe__phonec { font-size: var(--f-label); color: var(--t-on-dark-2); }
.oe__tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.oe__tiles li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--r-md); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.oe__ti { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(2,217,254,.12); color: var(--cyan); }
.oe__tt { display: grid; gap: 1px; min-width: 0; } .oe__tt strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-on-dark); } .oe__tt span { font-size: var(--f-label); color: var(--t-on-dark-2); }
.oe__tile--exam { grid-template-columns: auto minmax(0,1fr) auto; border-color: rgba(2,217,254,.34); background: rgba(2,217,254,.08); }
.oe__start { padding: 6px 13px; border-radius: 999px; font-size: var(--f-label); font-weight: 700; background: var(--cyan); color: #04121F; }

/* Content cards */
.matl__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px,3.2vw,44px); }
.matl__head .eyebrow { justify-content: center; } .matl__head .h2 { margin: 12px 0 0; }
.matl__lede { margin: 14px auto 0; max-width: 660px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.matl__cards { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(12px,1.8vw,20px); max-width: 1000px; }
.matl__card { padding: clamp(20px,2.4vw,28px); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card); }
.matl__ci { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); margin-bottom: 14px; }
.matl__ct { margin: 0; font-size: var(--f-h4); font-weight: 700; color: var(--t-primary); }
.matl__cb { margin: 8px 0 0; font-size: var(--f-xs); line-height: 1.6; color: var(--t-secondary); }
@media (max-width: 820px) { .matl__cards { grid-template-columns: 1fr; } }

/* Homework */
.hw__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(26px,4vw,56px); align-items: center; }
.hw__copy { min-width: 0; } .hw__copy .h2 { margin: 12px 0 0; max-width: 16ch; }
.hw__lede { margin: 16px 0 0; max-width: 52ch; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.hw__pts { list-style: none; margin: clamp(20px,2.4vw,28px) 0 0; padding: 0; display: grid; gap: 12px; }
.hw__pts li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-secondary); }
.hw__pi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); flex: none; }
.hw__panel { padding: clamp(16px,2vw,22px); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--s-card); box-shadow: var(--sh-card); min-width: 0; }
.hw__ph { margin: 0 0 12px; font-size: var(--f-label); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--t-muted); }
.hw__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hw__row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--s-frost); }
.hw__check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--border); color: #04121F; flex: none; }
.hw__row--done .hw__check { background: var(--accent); border-color: var(--accent); }
.hw__t { display: grid; gap: 1px; min-width: 0; } .hw__t strong { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); } .hw__t span { font-size: var(--f-label); color: var(--t-secondary); }
.hw__row--done .hw__t strong { text-decoration: line-through; text-decoration-color: var(--t-muted); color: var(--t-secondary); }
.hw__due { display: grid; justify-items: end; gap: 0; font-size: var(--f-xs); font-weight: 700; color: var(--accent-text); white-space: nowrap; }
.hw__due i { font-style: normal; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--t-muted); }
.hw__row--done .hw__due { color: var(--t-muted); }
@media (max-width: 900px) { .hw__grid { grid-template-columns: 1fr; } }

/* Online exam (dark) */
.oexam { position: relative; overflow: clip; } .oexam__inner { position: relative; z-index: 1; }
.oexam__orb { top: -24%; right: -10%; width: 48vw; opacity: .45; }
.oexam__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(26px,4vw,56px); align-items: center; }
.oexam__copy { min-width: 0; } .oexam__eyebrow { color: var(--cyan); } .oexam__h { color: var(--t-on-dark); margin: 12px 0 0; max-width: 16ch; }
.oexam__lede { margin: 16px 0 0; max-width: 52ch; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }
.oexam__pts { list-style: none; margin: clamp(20px,2.4vw,28px) 0 0; padding: 0; display: grid; gap: 12px; }
.oexam__pts li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-on-dark-2); }
.oexam__pi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); color: var(--cyan); flex: none; }
.oexam__stage { min-width: 0; }
.oexam__card { padding: clamp(18px,2.4vw,26px); border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); box-shadow: 0 40px 90px -50px rgba(0,0,0,.8); }
.oexam__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; }
.oexam__prog { font-size: var(--f-label); font-weight: 700; color: var(--t-on-dark-2); }
.oexam__timer { display: inline-flex; align-items: center; gap: 6px; font-size: var(--f-label); font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; padding: 4px 11px; border-radius: 999px; background: rgba(2,217,254,.12); }
.oexam__q { margin: 0 0 16px; font-size: var(--f-lead); font-weight: 700; color: var(--t-on-dark); line-height: 1.4; min-height: 2.6em; }
.oexam__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.oexam__opt { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--r-md); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); transition: border-color .3s var(--ease-out), background .3s var(--ease-out); }
.oexam__opt.is-picked { border-color: rgba(2,217,254,.5); background: rgba(2,217,254,.1); }
.oexam__ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.09); color: var(--t-on-dark-2); font-size: var(--f-label); font-weight: 750; }
.oexam__opt.is-picked .oexam__ok { background: var(--cyan); color: #04121F; }
.oexam__ol { font-size: var(--f-xs); color: var(--t-on-dark); }
.oexam__foot { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; }
.oexam__bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.oexam__barfill { display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--cyan); }
.oexam__next { padding: 8px 16px; border-radius: 999px; font-size: var(--f-label); font-weight: 700; background: rgba(255,255,255,.09); color: var(--t-on-dark-2); }
@media (max-width: 900px) { .oexam__grid { grid-template-columns: 1fr; } }

/* App surfaced */
.appsurf__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(24px,3vw,38px); }
.appsurf__head .eyebrow { justify-content: center; } .appsurf__head .h2 { margin: 12px 0 0; }
.appsurf__lede { margin: 14px auto 0; max-width: 660px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.appsurf__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 720px; margin-inline: auto; }
.appsurf__tab { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--s-card); font-size: var(--f-xs); font-weight: 650; color: var(--t-secondary); }
.appsurf__tab.is-on { border-color: color-mix(in srgb, var(--cyan-600) 45%, transparent); background: color-mix(in srgb, var(--cyan-600) 11%, transparent); color: var(--accent-text); }
.appsurf__ti { display: grid; place-items: center; color: var(--t-muted); }
.appsurf__tab.is-on .appsurf__ti { color: var(--accent-text); }
.appsurf__note { display: flex; align-items: flex-start; justify-content: center; gap: 9px; margin: clamp(20px,2.4vw,28px) auto 0; max-width: 640px; text-align: center; font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6; }
.appsurf__note svg { color: var(--accent-text); flex: none; margin-top: 2px; }

/* Online-exam "does not do" */
.oesafe__head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(26px,3vw,40px); }
.oesafe__head .eyebrow { justify-content: center; } .oesafe__head .h2 { margin: 12px 0 0; }
.oesafe__lede { margin: 14px auto 0; max-width: 640px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.oesafe__rows { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 9px; max-width: 900px; }
.oesafe__rows li { display: grid; grid-template-columns: auto 200px minmax(0,1fr); align-items: start; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--s-card); }
.oesafe__no { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; margin-top: 1px; background: color-mix(in srgb, var(--violet) 13%, transparent); color: var(--violet); flex: none; }
.oesafe__who { font-size: var(--f-xs); font-weight: 700; color: var(--t-primary); }
.oesafe__what { font-size: var(--f-xs); color: var(--t-secondary); line-height: 1.6; }
@media (max-width: 680px) { .oesafe__rows li { grid-template-columns: auto minmax(0,1fr); row-gap: 6px; } .oesafe__what { grid-column: 2; } }

/* ==========================================================================
   FEATURES HUB — /features/  (drawn graphic hero)
   ========================================================================== */

/* Hero art: the record ring */
.fh__grid { align-items: center; } .fh__art { min-width: 0; display: grid; place-items: center; }
@media (min-width: 980px) { .fh__grid { grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); } }
.fh__ring { position: relative; width: min(340px, 82vw); aspect-ratio: 1; }
.fh__core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; display: grid; justify-items: center; gap: 6px; width: 120px; height: 120px; place-content: center; border-radius: 50%; background: radial-gradient(circle, rgba(2,217,254,.2), rgba(97,72,250,.14)); border: 1px solid rgba(255,255,255,.18); text-align: center; }
.fh__corei { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(2,217,254,.18); color: var(--cyan); }
.fh__corel { font-size: var(--f-label); font-weight: 700; color: var(--t-on-dark); line-height: 1.25; }
.fh__node { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 13px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); color: var(--cyan); }
.fh__node:nth-child(2) { translate: 0 -128px; }
.fh__node:nth-child(3) { translate: 90px -90px; }
.fh__node:nth-child(4) { translate: 128px 0; }
.fh__node:nth-child(5) { translate: 90px 90px; }
.fh__node:nth-child(6) { translate: 0 128px; }
.fh__node:nth-child(7) { translate: -90px 90px; }
.fh__node:nth-child(8) { translate: -128px 0; }
.fh__node:nth-child(9) { translate: -90px -90px; }
@media (max-width: 460px) { .fh__ring { width: 300px; } .fh__node { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
  .fh__node:nth-child(2){translate:0 -112px} .fh__node:nth-child(3){translate:79px -79px} .fh__node:nth-child(4){translate:112px 0} .fh__node:nth-child(5){translate:79px 79px} .fh__node:nth-child(6){translate:0 112px} .fh__node:nth-child(7){translate:-79px 79px} .fh__node:nth-child(8){translate:-112px 0} .fh__node:nth-child(9){translate:-79px -79px} }

/* The grid of features */
.fgrid__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px,3.4vw,46px); }
.fgrid__head .eyebrow { justify-content: center; } .fgrid__head .h2 { margin: 12px 0 0; }
.fgrid__lede { margin: 14px auto 0; max-width: 660px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.fgrid__group { margin-bottom: clamp(22px,3vw,36px); }
.fgrid__gname { margin: 0 0 12px; font-size: var(--f-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.fgrid__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.fgrid__card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: 14px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card); transition: border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); }
.fgrid__card:hover { border-color: color-mix(in srgb, var(--cyan-600) 40%, transparent); transform: translateY(-2px); }
.fgrid__ci { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); flex: none; }
.fgrid__ct { display: grid; gap: 3px; min-width: 0; }
.fgrid__ct strong { font-size: var(--f-sm); font-weight: 700; color: var(--t-primary); }
.fgrid__ct span { font-size: var(--f-label); color: var(--t-secondary); line-height: 1.5; }
.fgrid__cgo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--s-frost); color: var(--t-muted); flex: none; transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); }
.fgrid__card:hover .fgrid__cgo { background: var(--accent); color: #04121F; }
@media (max-width: 720px) { .fgrid__cards { grid-template-columns: 1fr; } }

/* One record (dark) */
.frec { position: relative; overflow: clip; } .frec__inner { position: relative; z-index: 1; }
.frec__orb { top: -24%; right: -10%; width: 46vw; opacity: .45; }
.frec__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr); gap: clamp(26px,4vw,56px); align-items: center; }
.frec__copy { min-width: 0; } .frec__eyebrow { color: var(--cyan); } .frec__h { color: var(--t-on-dark); margin: 12px 0 0; max-width: 20ch; }
.frec__lede { margin: 16px 0 0; max-width: 54ch; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }
.frec__fig { display: grid; gap: 12px; justify-items: center; min-width: 0; }
.frec__source { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 12px; width: 100%; max-width: 320px; padding: 15px 18px; border-radius: var(--r-lg); border: 1px solid rgba(2,217,254,.34); background: rgba(2,217,254,.09); }
.frec__si { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(2,217,254,.16); color: var(--cyan); }
.frec__st { display: grid; gap: 1px; } .frec__st strong { font-size: var(--f-sm); font-weight: 700; color: var(--t-on-dark); } .frec__st span { font-size: var(--f-label); color: var(--t-on-dark-2); }
.frec__branch { width: 2px; height: 20px; background: linear-gradient(var(--cyan), transparent); }
.frec__reads { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; width: 100%; }
.frec__reads li { display: grid; justify-items: center; gap: 8px; padding: 15px 10px; border-radius: var(--r-md); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); text-align: center; }
.frec__ri { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.07); color: var(--cyan); }
.frec__rt { display: grid; gap: 2px; } .frec__rt strong { font-size: var(--f-label); font-weight: 700; color: var(--t-on-dark); } .frec__rt span { font-size: 11px; color: var(--t-on-dark-2); line-height: 1.35; }
@media (max-width: 900px) { .frec__grid { grid-template-columns: 1fr; } }

/* Small follow-ups: label rule + not-done homework states (check-css coverage) */
.appsurf__tl { display: inline-block; }
.hw__row--pending .hw__check, .hw__row--set .hw__check { border-style: dashed; }
.hw__row--pending .hw__due { color: var(--accent-text); }

/* ==========================================================================
   PRICING — /pricing/  (drawn quote hero; reveal-based; reuses .plans)
   ========================================================================== */

/* ── Hero: the quote card ──────────────────────────────────────────────── */
.pri__grid { align-items: center; }
.pri__facts { list-style: none; margin: clamp(20px,2.4vw,28px) 0 0; padding: 0; display: grid; gap: 10px; }
.pri__facts li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; font-size: var(--f-xs); color: var(--t-on-dark-2); }
.pri__fi { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); color: var(--cyan); flex: none; }
.pri__art { min-width: 0; }
@media (min-width: 980px) { .pri__grid { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); } }
.pri__quote { max-width: 400px; margin-inline: auto; padding: clamp(18px,2.2vw,24px); border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); box-shadow: 0 40px 90px -50px rgba(0,0,0,.8); }
.pri__qh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.12); }
.pri__qk { display: inline-flex; align-items: center; gap: 8px; font-size: var(--f-xs); font-weight: 700; color: var(--t-on-dark); }
.pri__qk svg { color: var(--cyan); }
.pri__qtag { font-size: var(--f-label); font-weight: 650; color: var(--cyan); padding: 3px 10px; border-radius: 999px; background: rgba(2,217,254,.12); }
.pri__qlines { margin: 0; display: grid; gap: 10px; }
.pri__qlines div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pri__qlines dt { font-size: var(--f-label); color: var(--t-on-dark-2); }
.pri__qlines dd { margin: 0; font-size: var(--f-xs); font-weight: 650; color: var(--t-on-dark); text-align: right; }
.pri__qmid { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 14px 0; padding: 11px; border-radius: var(--r-md); background: rgba(2,217,254,.08); border: 1px dashed rgba(2,217,254,.3); font-size: var(--f-xs); font-weight: 700; color: var(--cyan); }
.pri__qeq { display: grid; place-items: center; }
.pri__qfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.12); font-size: var(--f-label); color: var(--t-on-dark-2); }
.pri__q0 { font-weight: 800; color: var(--cyan); font-variant-numeric: tabular-nums; }
.pri__qtrial { font-weight: 700; color: var(--t-on-dark); padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.08); }

/* ── Included grid ─────────────────────────────────────────────────────── */
.incl__head { max-width: 780px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px,3.2vw,44px); }
.incl__head .eyebrow { justify-content: center; } .incl__head .h2 { margin: 12px 0 0; }
.incl__lede { margin: 14px auto 0; max-width: 660px; color: var(--t-secondary); font-size: var(--f-sm); line-height: 1.65; }
.incl__grid { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(12px,1.8vw,18px); max-width: 1000px; }
.incl__card { padding: clamp(18px,2.2vw,24px); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--s-card); }
.incl__ci { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--cyan-600) 12%, transparent); color: var(--accent-text); margin-bottom: 13px; }
.incl__ct { margin: 0; font-size: var(--f-sm); font-weight: 700; color: var(--t-primary); }
.incl__cb { margin: 7px 0 0; font-size: var(--f-xs); line-height: 1.6; color: var(--t-secondary); }
@media (max-width: 820px) { .incl__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .incl__grid { grid-template-columns: 1fr; } }

/* ── Onboarding steps (dark) ───────────────────────────────────────────── */
.setup { position: relative; overflow: clip; } .setup__inner { position: relative; z-index: 1; }
.setup__orb { top: -26%; right: -10%; width: 48vw; opacity: .45; }
.setup__head { max-width: 800px; margin-inline: auto; text-align: center; margin-bottom: clamp(28px,3.2vw,44px); }
.setup__head .eyebrow { justify-content: center; } .setup__eyebrow { color: var(--cyan); }
.setup__h { color: var(--t-on-dark); margin: 12px 0 0; }
.setup__lede { margin: 14px auto 0; max-width: 680px; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }
.setup__steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(10px,1.4vw,16px); }
.setup__step { position: relative; padding: clamp(18px,2vw,24px); border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); display: grid; align-content: start; }
.setup__step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -8px; width: 16px; height: 16px; z-index: 1; background: var(--s-ink); border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); rotate: -45deg; translate: 0 -50%; }
.setup__n { position: absolute; top: 14px; right: 16px; font-size: var(--f-sm); font-weight: 750; color: var(--cyan); opacity: .6; font-variant-numeric: tabular-nums; }
.setup__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(2,217,254,.13); color: var(--cyan); margin-bottom: 14px; }
.setup__t { display: grid; gap: 6px; }
.setup__t strong { font-size: var(--f-sm); font-weight: 700; color: var(--t-on-dark); }
.setup__t span { font-size: var(--f-xs); color: var(--t-on-dark-2); line-height: 1.55; }
.setup__foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin: clamp(22px,2.6vw,32px) auto 0; max-width: 720px; text-align: center; font-size: var(--f-xs); color: var(--t-on-dark-2); }
.setup__foot svg { color: var(--cyan); flex: none; }
@media (max-width: 900px) { .setup__steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .setup__step:nth-child(2n)::after, .setup__step:last-child::after { content: none; } }
@media (max-width: 520px) { .setup__steps { grid-template-columns: 1fr; }
  .setup__step::after { content: none !important; } }

/* ==========================================================================
   LEGAL & HTML SITEMAP — /privacy-policy/ /terms-and-conditions/ /disclaimer/
   /sitemap/  (first section on the page → clears the fixed nav)
   ========================================================================== */

/* Nav over a light hero. The fixed nav is built for a dark hero (white logo +
   links). A page opening on a light surface carries .nav-on-light on <body>;
   give the nav its dark treatment from the top — light theme only, since in dark
   theme even a light surface renders dark and the default is already correct. */
:root:not([data-theme="dark"]) .nav-on-light .nav:not(.is-stuck):not(.is-open) .nav__logo-on-dark  { opacity: 0; }
:root:not([data-theme="dark"]) .nav-on-light .nav:not(.is-stuck):not(.is-open) .nav__logo-on-light { opacity: 1; }
:root:not([data-theme="dark"]) .nav-on-light .nav:not(.is-stuck):not(.is-open) .nav__link { color: var(--t-secondary); }
:root:not([data-theme="dark"]) .nav-on-light .nav:not(.is-stuck):not(.is-open) .nav__link:hover { color: var(--t-primary); background: var(--n-100); }
:root:not([data-theme="dark"]) .nav-on-light .nav:not(.is-stuck):not(.is-open) .theme-btn,
:root:not([data-theme="dark"]) .nav-on-light .nav:not(.is-stuck):not(.is-open) .nav__burger { background: var(--n-100); border-color: var(--border); color: var(--t-primary); }
:root:not([data-theme="dark"]) .nav-on-light .nav:not(.is-stuck):not(.is-open) .theme-btn:hover { color: var(--cyan-600); border-color: var(--cyan-600); }

/* ==========================================================================
   Legal document — privacy policy / terms / disclaimer
   ========================================================================== */
.legal { position: relative; overflow: clip; padding-top: calc(var(--nav-h) + clamp(20px, 3vw, 38px)); }
.legal__orb { top: -14%; right: -12%; width: 46vw; max-width: 600px; opacity: .5; }

.legal__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "toc" "body"; column-gap: clamp(30px, 4vw, 60px); }
@media (min-width: 1000px) {
  .legal__grid { grid-template-columns: minmax(0, 1fr) 260px; grid-template-areas: "head toc" "body toc"; align-items: start; }
}
.legal__head { grid-area: head; }
.legal__aside { grid-area: toc; }
.legal__body { grid-area: body; }

.legal__crumb { margin-bottom: clamp(14px, 2vw, 22px); }
.legal__kicker { display: inline-flex; align-items: center; gap: 7px; font-size: var(--f-label); font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-text); }
.legal__kicker svg { color: var(--accent-text); }
.legal__h { margin: 12px 0 0; }
.legal__meta { list-style: none; margin: 18px 0 0; padding: 0 0 clamp(20px, 2.6vw, 30px); display: flex; flex-wrap: wrap;
  gap: 8px 10px; border-bottom: 1px solid var(--border); }
.legal__meta li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--s-card); font-size: var(--f-xs); font-weight: 600; color: var(--t-secondary); }
.legal__meta svg { color: var(--accent-text); flex: none; }
.legal__intro { margin: clamp(20px, 2.6vw, 28px) 0 0; font-size: var(--f-lead); line-height: 1.6; color: var(--t-secondary); max-width: 62ch; }

.legal__body { max-width: 72ch; }
.legal__sec { padding-top: clamp(26px, 3.2vw, 40px); scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal__sh { display: flex; align-items: center; gap: 12px; margin: 0; font-size: var(--f-h3); font-weight: 700;
  letter-spacing: var(--ls-h3); color: var(--t-primary); }
.legal__num { font-size: var(--f-xs); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-text);
  background: color-mix(in srgb, var(--accent-text) 13%, transparent); border-radius: 8px; padding: 4px 8px; flex: none; }
.legal__shtxt { min-width: 0; }
.legal__anchor { flex: none; display: inline-flex; opacity: 0; color: var(--t-muted);
  transition: opacity var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); }
.legal__sh:hover .legal__anchor, .legal__anchor:focus-visible { opacity: 1; }
.legal__anchor:hover { color: var(--accent-text); }
.legal__sec p { margin: 12px 0 0; font-size: var(--f-sm); line-height: 1.78; color: var(--t-secondary); }
.legal__ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 9px; }
.legal__ul li { font-size: var(--f-sm); line-height: 1.7; color: var(--t-secondary); }
.legal__ul li::marker { color: var(--accent-text); }

/* footer: contact + sibling legal pages */
.legal__foot { margin-top: clamp(34px, 4vw, 52px); padding-top: clamp(22px, 2.6vw, 30px); border-top: 1px solid var(--border);
  display: grid; gap: clamp(18px, 2.4vw, 26px); }
.legal__contact { display: flex; gap: 14px; align-items: flex-start; }
.legal__contacti { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-md); flex: none;
  background: color-mix(in srgb, var(--accent-text) 13%, transparent); color: var(--accent-text); }
.legal__contactk { margin: 0; font-weight: 700; color: var(--t-primary); font-size: var(--f-sm); }
.legal__contactv { margin: 3px 0 0; font-size: var(--f-sm); color: var(--t-secondary); line-height: 1.6; }
.legal__contactv a { color: var(--accent-text); font-weight: 650; }
.legal__contactv a:hover { text-decoration: underline; }
.legal__family { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.legal__fam { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s-card);
  transition: border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); }
.legal__fam:hover { border-color: color-mix(in srgb, var(--accent-text) 42%, var(--border)); transform: translateY(-2px); }
.legal__famico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: color-mix(in srgb, var(--accent-text) 13%, transparent); color: var(--accent-text); }
.legal__famtx { display: grid; gap: 1px; min-width: 0; }
.legal__famk { font-weight: 650; font-size: var(--f-sm); color: var(--t-primary); }
.legal__famgo { display: inline-flex; align-items: center; gap: 5px; font-size: var(--f-xs); color: var(--t-muted); }
.legal__fam:hover .legal__famgo { color: var(--accent-text); }
.legal__famgo svg { transition: translate var(--d-base) var(--ease-spring); }
.legal__fam:hover .legal__famgo svg { translate: 3px 0; }

/* sticky table of contents */
@media (min-width: 1000px) { .legal__aside { position: sticky; top: calc(var(--nav-h) + 24px); } }
.legal__toc { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--s-card); overflow: clip; }
.legal__tocsum { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px;
  cursor: pointer; list-style: none; font-size: var(--f-label); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--t-primary); }
.legal__tocsum::-webkit-details-marker { display: none; }
.legal__tocsum > span { display: inline-flex; align-items: center; gap: 8px; }
.legal__tocsum > span svg { color: var(--accent-text); }
.legal__tocchev { color: var(--t-muted); transition: rotate var(--d-base) var(--ease-out); }
.legal__toc[open] .legal__tocchev { rotate: 180deg; }
.legal__toclist { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; border-top: 1px solid var(--border); }
.legal__toclist a { display: flex; align-items: baseline; gap: 9px; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: var(--f-xs); line-height: 1.45; color: var(--t-secondary); border-left: 2px solid transparent;
  transition: color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); }
.legal__toclist a:hover { color: var(--t-primary); background: var(--n-100); }
.legal__tocn { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--t-muted); flex: none; }
.legal__toclist a.is-active { color: var(--accent-text); background: color-mix(in srgb, var(--accent-text) 9%, transparent);
  border-left-color: var(--accent-text); font-weight: 600; }
.legal__toclist a.is-active .legal__tocn { color: var(--accent-text); }
@media (min-width: 1000px) {
  .legal__tocsum { cursor: default; }
  .legal__tocchev { display: none; }
  .legal__toc[open] .legal__toclist { max-height: calc(100vh - var(--nav-h) - 130px); overflow-y: auto; }
}

/* back to top */
.legal__top { position: fixed; right: clamp(16px, 3vw, 30px); bottom: clamp(16px, 3vw, 30px); z-index: 80;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); background: var(--s-card); color: var(--t-primary); box-shadow: var(--sh-lift);
  opacity: 0; visibility: hidden; translate: 0 12px;
  transition: opacity var(--d-base) var(--ease-out), translate var(--d-base) var(--ease-out), visibility var(--d-base), color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); }
.legal__top.is-on { opacity: 1; visibility: visible; translate: 0 0; }
.legal__top:hover { color: var(--accent-text); border-color: var(--accent-text); }
@media (max-width: 560px) { .legal__family { grid-template-columns: 1fr; } }

/* ==========================================================================
   HTML sitemap — searchable, grouped, icon cards
   ========================================================================== */
.smap { position: relative; overflow: clip; padding-top: calc(var(--nav-h) + clamp(20px, 3vw, 38px)); }
.smap__orb { top: -12%; left: -10%; width: 44vw; max-width: 560px; opacity: .5; }
.smap__wrap { position: relative; z-index: 1; max-width: 1080px; }
.smap__crumb { margin-bottom: clamp(14px, 2vw, 22px); }

.smap__head { margin-bottom: clamp(24px, 3.2vw, 40px); }
.smap__kicker { display: inline-flex; align-items: center; gap: 7px; font-size: var(--f-label); font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-text); }
.smap__kicker svg { color: var(--accent-text); }
.smap__h { margin: 12px 0 0; }
.smap__intro { margin: 12px 0 0; font-size: var(--f-lead); color: var(--t-secondary); max-width: 58ch; }

.smap__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(20px, 2.6vw, 28px); }
.smap__search { display: flex; align-items: center; gap: 10px; flex: 1 1 280px; max-width: 420px;
  padding: 11px 16px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--s-card);
  transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out); }
.smap__search:focus-within { border-color: var(--accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 18%, transparent); }
.smap__search svg { color: var(--t-muted); flex: none; }
.smap__search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--t-primary); font: inherit; font-size: var(--f-sm); }
.smap__search input::placeholder { color: var(--t-muted); }
.smap__result { margin: 0; font-size: var(--f-xs); color: var(--t-muted); }

.smap__block { margin-top: clamp(16px, 2.2vw, 24px); }
.smap__bhead { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.smap__bico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: color-mix(in srgb, var(--accent-text) 12%, transparent); color: var(--accent-text); }
.smap__gh { margin: 0; font-size: var(--f-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--t-primary); }
.smap__badge { margin-left: auto; font-size: var(--f-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--t-secondary); background: var(--n-100); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px 10px; }

.smap__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
.smap__card { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--r-md); min-width: 0;
  border: 1px solid var(--border); background: var(--s-card);
  transition: border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out); }
.smap__card:hover { border-color: color-mix(in srgb, var(--accent-text) 42%, var(--border)); transform: translateY(-2px); box-shadow: var(--sh-lift); }
.smap__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; flex: none;
  background: color-mix(in srgb, var(--accent-text) 11%, transparent); color: var(--accent-text); }
.smap__card--all .smap__ico { background: var(--aurora); color: #fff; }
.smap__cname { min-width: 0; flex: 1; font-size: var(--f-sm); font-weight: 600; color: var(--t-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smap__go { flex: none; display: inline-flex; color: var(--t-muted); opacity: 0; translate: -4px 0;
  transition: opacity var(--d-fast) var(--ease-out), translate var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); }
.smap__card:hover .smap__go { opacity: 1; translate: 0 0; color: var(--accent-text); }

.smap__groups { margin-top: clamp(20px, 2.6vw, 30px); display: grid; gap: clamp(16px, 2.4vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.smap__block--sm { margin-top: 0; padding: clamp(16px, 2vw, 22px); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--s-card); }
.smap__block--sm .smap__bhead { border-bottom-color: var(--border-soft); }
.smap__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.smap__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: var(--f-sm); color: var(--t-secondary);
  transition: color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out); }
.smap__link:hover { color: var(--accent-text); background: var(--n-100); }
.smap__link:hover .smap__go { opacity: 1; translate: 0 0; color: var(--accent-text); }

.smap__empty { margin: clamp(24px, 3vw, 36px) 0 0; text-align: center; font-size: var(--f-sm); color: var(--t-secondary); }
.smap__clear { border: 0; background: none; cursor: pointer; color: var(--accent-text); font: inherit; font-weight: 650; text-decoration: underline; }

.smap__foot { display: flex; align-items: center; gap: 9px; margin: clamp(28px, 3.4vw, 44px) 0 0; padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--border); font-size: var(--f-xs); color: var(--t-secondary); }
.smap__foot svg { color: var(--accent-text); flex: none; }
.smap__foot a { color: var(--accent-text); font-weight: 650; }
.smap__foot a:hover { text-decoration: underline; }
.smap li[hidden] { display: none; }

/* ==========================================================================
   404 — page not found (dark hero, animated)
   ========================================================================== */
.e404 { position: relative; overflow: clip; padding-top: calc(var(--nav-h) + clamp(28px, 5vw, 56px)); text-align: center; }
.e404__orb { top: -18%; left: 50%; translate: -50% 0; width: 62vw; max-width: 760px; opacity: .5; }
.e404__orb2 { bottom: -22%; right: -8%; width: 40vw; max-width: 460px; opacity: .3;
  background: radial-gradient(circle, color-mix(in srgb, var(--violet) 60%, transparent), transparent 68%); }
.e404__inner { position: relative; z-index: 1; max-width: 680px; }

.e404__badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: var(--t-on-dark);
  font-size: var(--f-xs); font-weight: 650; letter-spacing: .02em; }
.e404__badge svg { color: var(--cyan); }

/* the number */
.e404__code { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1.2vw, 14px);
  margin: clamp(16px, 3vw, 28px) 0 0; line-height: .9; font-weight: 800; letter-spacing: -.04em;
  font-size: clamp(92px, 23vw, 188px); }
.e404__d, .e404__zero { background: linear-gradient(120deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: e404-float 5.5s var(--ease-out) infinite; }
.e404__d:first-child { animation-delay: -.4s; }
.e404__d:last-child  { animation-delay: -2.9s; }
.e404__zero { position: relative; display: inline-grid; place-items: center; animation-delay: -1.6s; }
.e404__orbit { position: absolute; inset: 9%; border-radius: 50%; border: 2px dashed rgba(2,217,254,.35); animation: e404-spin 9s linear infinite; }
.e404__moon { position: absolute; top: -6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 16px 2px color-mix(in srgb, var(--cyan) 70%, transparent); }
@keyframes e404-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
@keyframes e404-spin { to { rotate: 360deg; } }

.e404__h { color: var(--t-on-dark); margin: clamp(8px, 1.6vw, 16px) 0 0; }
.e404__lede { margin: 14px auto 0; max-width: 50ch; font-size: var(--f-sm); line-height: 1.68; color: var(--t-on-dark-2); }

.e404__links { list-style: none; margin: clamp(26px, 3.4vw, 40px) 0 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; }
.e404__link { display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 15px; border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.05); color: var(--t-on-dark);
  transition: border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out); }
.e404__link:hover { border-color: rgba(2,217,254,.45); background: rgba(2,217,254,.08); transform: translateY(-3px); }
.e404__li { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; flex: none; background: rgba(2,217,254,.13); color: var(--cyan); }
.e404__lt { display: grid; gap: 1px; min-width: 0; }
.e404__lk { font-size: var(--f-sm); font-weight: 650; }
.e404__ld { font-size: var(--f-xs); color: var(--t-on-dark-2); }
.e404__lgo { margin-left: auto; flex: none; display: inline-flex; color: var(--t-on-dark-2); opacity: 0; translate: -4px 0;
  transition: opacity var(--d-fast) var(--ease-out), translate var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); }
.e404__link:hover .e404__lgo { opacity: 1; translate: 0 0; color: var(--cyan); }

.e404__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: clamp(26px, 3.4vw, 40px) 0 0; }

@media (prefers-reduced-motion: reduce) { .e404__d, .e404__zero, .e404__orbit { animation: none; } }
@media (max-width: 620px) { .e404__links { grid-template-columns: 1fr; } }

/* ==========================================================================
   Canvas — full-width block-editor pages (Template: "Canvas — full width")
   ========================================================================== */
.canvas { position: relative; overflow: clip; }
.canvas__inner { max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.canvas__inner > * { max-width: 760px; margin-inline: auto; }
.canvas__inner > .alignwide { max-width: 1120px; }
.canvas__inner > .alignfull { max-width: none; padding-inline: 0; }
.canvas__inner > :where(h1, h2, h3, h4) { color: var(--t-primary); }
.canvas__inner > :where(p, ul, ol, blockquote) { color: var(--t-secondary); line-height: 1.7; }

/* ==========================================================================
   BLOG — index, archives, single post
   A long-form reading experience: two-column article with a sticky table of
   contents and demo form, links colour-coded by destination, card grids for
   the index and archives. Built on the theme tokens; dark mode comes for free.
   ========================================================================== */

/* ---- Index / archive / search hero ------------------------------------- */
/* Tighten the gap to the list below — the hero and the list are both full
   sections, so their stacked vertical padding otherwise leaves a dead band. */
.blog-hero { position: relative; padding-bottom: clamp(16px, 2vw, 28px); }
.blog-list { padding-top: clamp(4px, 1vw, 14px); }
.blog-hero .orb--b { top: -120px; right: -80px; opacity: .5; }
.blog-hero__in { max-width: 860px; margin-inline: auto; text-align: center; position: relative; z-index: 1; }
.blog-hero .crumb { justify-content: center; margin-bottom: 18px; }
.blog-hero__title { font-size: var(--f-display); line-height: var(--lh-snug); letter-spacing: var(--ls-display); color: var(--t-primary); margin: 6px 0 0; }
.blog-hero__lede { font-size: var(--f-lead); color: var(--t-secondary); line-height: var(--lh-body); max-width: 660px; margin: 18px auto 0; }

.blog-search-wrap { position: relative; max-width: 560px; margin: 28px auto 0; }
.blog-search { display: flex; gap: 10px; align-items: center; position: relative; }
.blog-search__results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; text-align: left; padding: 6px; background: var(--n-0); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-lift); max-height: 60vh; overflow-y: auto; }
.bsr__item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); text-decoration: none; }
.bsr__item:hover, .bsr__item:focus-visible { background: var(--n-100); outline: none; }
.bsr__t { font-weight: 600; color: var(--t-primary); font-size: .95rem; line-height: 1.3; }
.bsr__x { font-size: .82rem; color: var(--t-muted); line-height: 1.4; }
.bsr__empty { padding: 14px 12px; color: var(--t-muted); font-size: .9rem; }
:root[data-theme="dark"] .blog-search__results { background: var(--s-raised); }
.blog-search__ic { position: absolute; left: 18px; color: var(--t-muted); pointer-events: none; }
.blog-search input[type="search"] { flex: 1; min-width: 0; padding: 14px 18px 14px 46px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--s-card); color: var(--t-primary); font: inherit; box-shadow: var(--sh-card); }
.blog-search input[type="search"]:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.blog-search .btn { border-radius: var(--r-pill); flex: 0 0 auto; }

.blog-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; }
/* Named .bchip, not .chip — the theme already ships an animated .chip used in a
   marketing hero, and reusing it made these overlap and drift. */
.bchip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: var(--r-pill); background: var(--n-100); color: var(--t-secondary); font-size: var(--f-xs); font-weight: 500; text-decoration: none; border: 1px solid transparent; transition: background var(--d-fast), color var(--d-fast), border-color var(--d-fast); }
.bchip:hover { background: var(--n-200); color: var(--t-primary); }
.bchip.is-active { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.bchip__n { font-size: .78em; opacity: .55; font-variant-numeric: tabular-nums; }
.bchip.is-active .bchip__n { opacity: .8; }

/* ---- Card grid --------------------------------------------------------- */
.blog-list__lb { display: flex; align-items: center; gap: 16px; margin: 6px 0 24px; color: var(--t-muted); font-size: var(--f-label); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); font-weight: 600; }
.blog-list__lb::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.pgrid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 32px); }
@media (min-width: 640px)  { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }

.pcard { position: relative; display: flex; flex-direction: column; background: var(--s-card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; isolation: isolate; transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out), border-color var(--d-base); }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); border-color: color-mix(in srgb, var(--cyan-600) 40%, var(--border)); }
.pcard__media { position: relative; aspect-ratio: 4 / 3; background: var(--n-100); overflow: hidden; }
.pcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--ease-out); }
.pcard:hover .pcard__img { transform: scale(1.05); }
.pcard__fallback { display: grid; place-items: center; height: 100%; color: var(--cyan-600); opacity: .45; }
.pcard__cats { position: absolute; left: 12px; top: 12px; z-index: 3; display: inline-flex; align-items: center; }
.pcard__cats.has-more { padding-bottom: 8px; } /* bridges the hover gap to the popover */
.pcard__badge { position: relative; z-index: 2; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); color: var(--indigo); font-size: .74rem; font-weight: 600; text-decoration: none; backdrop-filter: blur(6px); transition: background var(--d-fast); }
.pcard__badge:hover { background: #fff; }
/* The "+N" pill tucks behind the primary chip; hover reveals every category. */
.pcard__more { position: relative; z-index: 1; margin-left: -12px; padding: 5px 9px 5px 15px; border-radius: var(--r-pill); background: var(--indigo); color: #fff; font-size: .72rem; font-weight: 700; cursor: default; }
.pcard__catpop { position: absolute; top: 100%; left: 0; display: none; flex-direction: column; gap: 2px; min-width: 168px; padding: 6px; border-radius: var(--r-md); background: var(--n-0); box-shadow: var(--sh-lift); border: 1px solid var(--border); }
.pcard__cats.has-more:hover .pcard__catpop, .pcard__cats.has-more:focus-within .pcard__catpop { display: flex; }
.pcard__catpop-i { padding: 6px 10px; border-radius: 8px; font-size: .8rem; font-weight: 500; color: var(--t-secondary); text-decoration: none; }
.pcard__catpop-i:hover { background: var(--n-100); color: var(--indigo); }
:root[data-theme="dark"] .pcard__catpop { background: var(--s-raised); }
:root[data-theme="dark"] .pcard__catpop-i:hover { color: var(--cyan-400); }
.pcard__new { position: absolute; right: 12px; top: 12px; z-index: 3; padding: 4px 9px; border-radius: var(--r-pill); background: var(--ember); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pcard__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.pcard__title { font-size: 1.15rem; font-weight: 700; line-height: 1.32; letter-spacing: -.01em; color: var(--t-primary); }
.pcard__link { color: inherit; text-decoration: none; }
.pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcard__excerpt { color: var(--t-muted); font-size: .925rem; line-height: 1.6; flex: 1; }
.pcard__meta { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--t-muted); flex-wrap: wrap; }
.pcard__author { display: inline-flex; align-items: center; gap: 7px; }
.pcard__avatar { width: 24px; height: 24px; border-radius: 50%; }
.pcard__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

/* Featured lead card (index, first page) */
.blog-feature { margin-bottom: clamp(28px, 4vw, 44px); }
.pcard--featured .pcard__media { aspect-ratio: 16 / 9; }
.pcard--featured .pcard__title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
@media (min-width: 800px) {
	.pcard--featured { flex-direction: row; }
	.pcard--featured .pcard__media { flex: 0 0 54%; aspect-ratio: auto; min-height: 340px; }
	.pcard--featured .pcard__body { justify-content: center; gap: 14px; padding: clamp(26px, 3vw, 44px); }
	.pcard--featured .pcard__excerpt { flex: 0 1 auto; font-size: 1rem; }
}

.pagination { margin-top: clamp(32px, 4vw, 56px); }
.pagination .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 13px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--s-card); color: var(--t-secondary); font-weight: 600; text-decoration: none; transition: border-color var(--d-fast), color var(--d-fast); }
.pagination a.page-numbers:hover { border-color: var(--cyan-600); color: var(--accent-text); }
.pagination .page-numbers.current { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.pagination .page-numbers.dots { border: none; background: none; }

.blog-empty { text-align: center; padding: clamp(40px, 6vw, 80px) 0; color: var(--t-muted); }
.blog-empty svg { color: var(--cyan-600); opacity: .5; margin-bottom: 12px; }
.blog-empty .h2 { color: var(--t-primary); margin-bottom: 8px; }
.blog-empty .btn { margin-top: 20px; }

/* ---- Single: header ---------------------------------------------------- */
.post__head { padding-bottom: clamp(18px, 2vw, 28px); }
.post__head-in { max-width: 840px; margin-inline: auto; }
.post__cats { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; }
.post__cat { padding: 5px 13px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--cyan) 15%, transparent); color: var(--cyan-ink); font-size: .8rem; font-weight: 600; text-decoration: none; transition: background var(--d-fast); }
.post__cat:hover { background: color-mix(in srgb, var(--cyan) 26%, transparent); }
.post__title { font-size: var(--f-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--t-primary); margin: 14px 0 0; }
.post__lede { font-size: var(--f-lead); color: var(--t-secondary); line-height: var(--lh-body); margin-top: 18px; }
.post__byline { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.post__author { display: inline-flex; align-items: center; gap: 11px; }
.post__avatar { width: 44px; height: 44px; border-radius: 50%; }
.post__author-txt { display: flex; flex-direction: column; line-height: 1.25; }
.post__author-name { font-weight: 600; color: var(--t-primary); }
.post__author-role { font-size: .8rem; color: var(--t-muted); }
.post__byline-sep { width: 1px; height: 26px; background: var(--border); }
.post__mi { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--t-muted); }
.post__mi svg { color: var(--cyan-600); }
.post__mi time { color: inherit; }
.post__share { display: inline-flex; gap: 8px; margin-left: auto; }
.post__sh { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--s-card); color: var(--t-secondary); cursor: pointer; transition: transform var(--d-fast), background var(--d-fast), color var(--d-fast), border-color var(--d-fast); }
.post__sh:hover { transform: translateY(-2px); background: var(--ink); color: #fff; border-color: var(--ink); }
.post__sh.is-copied { background: var(--cyan-600); border-color: var(--cyan-600); color: #05202b; }

/* ---- Single: body layout ---------------------------------------------- */
/* overflow:visible (not the section default of clip) so the sticky TOC can
   actually stick — an overflow:clip ancestor silently disables position:sticky. */
.post__body { padding-top: clamp(26px, 3vw, 44px); overflow: visible; }
.post__grid--noaside { grid-template-columns: minmax(0, 1fr); max-width: 820px; margin-inline: auto; }
/* No forced ratio — the banner shows at its own aspect (the live one is 384:107),
   so it is never cropped. A landscape featured-image fallback likewise shows at
   its natural ratio. */
.post__cover { margin: 0 0 clamp(30px, 4vw, 52px); border-radius: var(--r-xl); overflow: hidden; background: var(--n-100); box-shadow: var(--sh-card); }
.post__cover-img { display: block; width: 100%; height: auto; }
/* align-items:stretch (not start) so the aside column fills the grid's full
   height — a sticky child needs a tall containing block to travel within, or it
   just scrolls away with a short aside. */
.post__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(30px, 3.6vw, 62px); align-items: stretch; }
.post__aside-in { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 20px; }

@media (max-width: 999px) {
	.post__grid { display: flex; flex-direction: column; }
	.post__aside { order: -1; }
	.post__aside-in { position: static; }
	.post__aside .lead--sidebar { display: none; } /* the closing band is the mobile form */
}

/* ---- Table of contents ------------------------------------------------- */
.toc { background: var(--s-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--sh-card); }
.toc__title { display: flex; align-items: center; gap: 8px; font-size: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--t-muted); cursor: pointer; list-style: none; }
.toc__title::-webkit-details-marker { display: none; }
.toc__title svg { color: var(--cyan-600); }
.toc__chev { margin-left: auto; transition: transform var(--d-base); }
.toc:not([open]) .toc__chev { transform: rotate(-90deg); }
.toc__list { list-style: none; margin: 12px 0 0; padding: 0; max-height: min(60vh, 520px); overflow-y: auto; scrollbar-width: thin; }
.toc__item { margin: 1px 0; }
.toc__item--h3 { margin-left: 12px; }
.toc__link { display: block; padding: 7px 11px; border-radius: 9px; font-size: .9rem; line-height: 1.4; color: var(--t-secondary); text-decoration: none; border-left: 2px solid transparent; transition: background var(--d-fast), color var(--d-fast), border-color var(--d-fast); }
.toc__item--h3 .toc__link { font-size: .855rem; color: var(--t-muted); }
.toc__link:hover { background: var(--n-100); color: var(--t-primary); }
.toc__link.is-active { background: color-mix(in srgb, var(--cyan) 12%, transparent); color: var(--accent-text); border-left-color: var(--accent); font-weight: 600; }
@media (min-width: 1000px) {
	.toc[open] .toc__chev { display: none; }
	.toc__title { cursor: default; pointer-events: none; }
}

/* ---- Prose: rendered post content -------------------------------------- */
.blog-content {
	--link-ext: #B4530A; --link-ext-soft: #FCEBD8;
	--link-page: var(--cyan-ink); --link-blog: var(--indigo);
	font-size: clamp(1.0625rem, .35vw + 1rem, 1.15rem); line-height: 1.8; color: var(--t-secondary);
}
.blog-content > :first-child { margin-top: 0; }
.blog-content p { margin: 0 0 1.35em; }
.blog-content :where(h2, h3, h4) { color: var(--t-primary); letter-spacing: -.02em; scroll-margin-top: calc(var(--nav-h) + 20px); }
.blog-content h2 { font-size: var(--f-h2); line-height: 1.2; margin: 1.9em 0 .6em; padding-top: .3em; }
.blog-content h3 { font-size: var(--f-h3); line-height: 1.25; margin: 1.7em 0 .5em; }
.blog-content h4 { font-size: var(--f-h4); margin: 1.5em 0 .5em; }
.blog-content :where(ul, ol) { margin: 0 0 1.35em; padding-left: 1.4em; }
.blog-content li { margin: .5em 0; padding-left: .2em; }
.blog-content li::marker { color: var(--cyan-600); font-weight: 600; }
.blog-content ul li::marker { color: var(--cyan-600); }
.blog-content strong { color: var(--t-primary); font-weight: 600; }
.blog-content img { max-width: 100%; height: auto; border-radius: var(--r-lg); }
.blog-content figure { margin: 1.8em 0; }
.blog-content figure img { width: 100%; }
.blog-content figcaption { margin-top: .6em; font-size: .85rem; color: var(--t-muted); text-align: center; }
.blog-content hr { border: none; height: 1px; background: var(--border); margin: 2.4em 0; }
.blog-content code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .88em; background: var(--n-100); padding: .15em .4em; border-radius: 6px; border: 1px solid var(--border); }
.blog-content pre { background: var(--ink); color: #E8EEF4; padding: 18px 20px; border-radius: var(--r-md); overflow-x: auto; margin: 0 0 1.5em; }
.blog-content pre code { background: none; border: none; padding: 0; color: inherit; }

/* Content links, colour-coded by destination */
.blog-content a { color: var(--link-page); font-weight: 500; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--link-page) 32%, transparent); transition: border-color var(--d-fast), color var(--d-fast), background var(--d-fast); }
.blog-content a:hover { border-bottom-color: var(--link-page); }
.blog-content a.link-blog { color: var(--link-blog); border-bottom-color: color-mix(in srgb, var(--link-blog) 32%, transparent); }
.blog-content a.link-blog:hover { border-bottom-color: var(--link-blog); }
.blog-content a.link-external { color: var(--link-ext); border-bottom-color: color-mix(in srgb, var(--link-ext) 32%, transparent); }
.blog-content a.link-external:hover { border-bottom-color: var(--link-ext); }
.blog-content a.link-external::after { content: "\2197"; display: inline-block; font-size: .8em; margin-left: .15em; vertical-align: .05em; }

/* Blockquote */
.blog-content blockquote { margin: 1.8em 0; padding: 6px 4px 6px 22px; border-left: 3px solid var(--cyan-600); font-size: 1.1em; line-height: 1.6; color: var(--t-primary); font-style: italic; }
.blog-content blockquote p:last-child { margin-bottom: 0; }
.blog-content blockquote cite { display: block; margin-top: .5em; font-size: .85rem; font-style: normal; color: var(--t-muted); }

/* Callout — the TL;DR / tip box the guides open with */
.blog-content .callout { display: flex; gap: 14px; margin: 1.8em 0; padding: 18px 20px; border-radius: var(--r-md); background: var(--s-frost); border: 1px solid var(--border); border-left: 4px solid var(--ember); font-size: .975em; line-height: 1.7; color: var(--t-secondary); }
.blog-content .callout::before { content: "\1F4A1"; font-size: 1.2em; line-height: 1.4; flex: 0 0 auto; }
.blog-content .callout strong { color: var(--t-primary); }
.blog-content .callout p { margin: 0; }
.blog-content .callout--tip { border-left-color: var(--cyan-600); }
.blog-content .callout--tip::before { content: "\2705"; }

/* The migrated live posts use a .tldr-box paragraph for the same summary box. */
.blog-content .tldr-box { position: relative; margin: 1.8em 0; padding: 18px 20px 18px 54px; border-radius: var(--r-md); background: var(--s-frost); border: 1px solid var(--border); border-left: 4px solid var(--ember); font-size: .975em; line-height: 1.7; color: var(--t-secondary); }
.blog-content .tldr-box::before { content: "\1F4A1"; position: absolute; left: 18px; top: 15px; font-size: 1.2em; }
.blog-content .tldr-box strong { color: var(--t-primary); }
:root[data-theme="dark"] .blog-content .tldr-box { background: var(--s-halo); }

/* Tables — the comparison tables the guides use */
.blog-content .table-scroll, .blog-content figure.wp-block-table { overflow-x: auto; margin: 1.8em 0; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); border: 1px solid var(--border); }
.blog-content table { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--s-card); }
.blog-content .table-scroll table, .blog-content figure.wp-block-table table { margin: 0; }
.blog-content thead th { background: var(--n-100); color: var(--t-primary); font-weight: 700; text-align: left; font-size: var(--f-label); text-transform: uppercase; letter-spacing: .04em; }
.blog-content th, .blog-content td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.blog-content tbody tr:last-child td { border-bottom: none; }
.blog-content tbody tr:nth-child(even) { background: color-mix(in srgb, var(--n-100) 55%, transparent); }
.blog-content tbody td:last-child { color: var(--t-primary); font-weight: 600; }

/* Tags + author bio */
.post__tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--border); }
.post__tags-lb { font-size: var(--f-label); text-transform: uppercase; letter-spacing: .08em; color: var(--t-muted); font-weight: 600; margin-right: 4px; }
.post__tags a { padding: 6px 13px; border-radius: var(--r-pill); background: var(--n-100); color: var(--t-secondary); font-size: .82rem; text-decoration: none; transition: background var(--d-fast), color var(--d-fast); }
.post__tags a:hover { background: color-mix(in srgb, var(--indigo) 12%, transparent); color: var(--indigo); }
.post__bio { display: flex; gap: 16px; align-items: flex-start; margin-top: 34px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--s-frost); border: 1px solid var(--border); }
.post__bio-av { width: 60px; height: 60px; border-radius: 50%; flex: 0 0 auto; }
.post__bio-lb { font-size: var(--f-label); text-transform: uppercase; letter-spacing: .08em; color: var(--t-muted); font-weight: 600; }
.post__bio-name { display: block; font-size: 1.1rem; color: var(--t-primary); margin: 3px 0 6px; }
.post__bio-txt p { margin: 0; color: var(--t-secondary); font-size: .925rem; line-height: 1.6; }

/* Per-post FAQ accordion (reuses the theme's global .faq styling + JS).
   It sits INSIDE .blog-content, so that prose's h2/h3 margins bleed onto the FAQ
   heading and questions and blow the accordion rows wide open. Every rule here
   is .post__faq-scoped so it out-specifies .blog-content h2/h3 and the FAQ
   collapses back to the same tight rhythm as the theme's other FAQ sections. */
.post__faq { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--border); }
.post__faq .post__faq-h { font-size: var(--f-h2); line-height: 1.2; letter-spacing: -.02em; color: var(--t-primary); margin: 0 0 12px; }
.post__faq .faq__qt { margin: 0; font-size: var(--f-h4); }
.post__faq .faq__body.blog-content { font-size: 1rem; line-height: 1.7; }
.post__faq .faq__body.blog-content > :first-child { margin-top: 0; }
.post__faq .faq__body.blog-content > :last-child { margin-bottom: 0; }
.post__faq .faq__body.blog-content > :where(h2, h3, h4) { margin-top: 1em; }

/* ---- Lead form (sidebar card + closing band) --------------------------- */
.lead--sidebar .lead__wrap { display: block; }
.lead--sidebar .lead__aside { margin-bottom: 14px; }
.lead--sidebar .lead__title { font-size: 1.2rem; font-weight: 700; color: var(--t-primary); line-height: 1.25; }
.lead--sidebar .lead__sub { margin: .4em 0 0; font-size: .9rem; color: var(--t-muted); line-height: 1.5; }
.lead--sidebar .lead__card { background: var(--s-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-card); }
.lead__form { display: block; }
.lead__form .cform__row { margin-bottom: 12px; }
.lead__submit { width: 100%; justify-content: center; margin-top: 4px; }
.lead__fine { margin-top: 12px; font-size: .78rem; color: var(--t-muted); text-align: center; line-height: 1.5; }
.lead__fine a { color: var(--accent-text); }
.lead__done { text-align: center; padding: 12px 6px; }
.lead__done-ic { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: color-mix(in srgb, var(--cyan) 16%, transparent); color: var(--cyan-ink); margin-bottom: 12px; }
.lead__done-h { font-size: 1.25rem; color: var(--t-primary); margin-bottom: 6px; }
.lead__done p { color: var(--t-secondary); font-size: .925rem; line-height: 1.6; }

.lead--band { position: relative; overflow: clip; }
.lead--band .orb--a { top: -100px; left: -60px; }
.lead--band .lead__wrap { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; position: relative; z-index: 1; }
@media (min-width: 900px) { .lead--band .lead__wrap { grid-template-columns: 1.05fr 1fr; } }
.lead--band .lead__title { margin: 6px 0 0; }
.lead--band .lead__sub { margin: 16px 0 0; color: var(--t-on-dark-2); font-size: var(--f-lead); line-height: 1.6; max-width: 44ch; }
.lead__points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.lead__points li { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 500; }
.lead__tick { flex: 0 0 auto; color: var(--cyan); background: rgba(2, 217, 254, .14); border-radius: 50%; padding: 4px; box-sizing: content-box; }
.lead--band .lead__card { background: var(--n-0); border-radius: var(--r-xl); padding: clamp(24px, 2.4vw, 34px); box-shadow: var(--sh-lift); --t-primary: #14131F; --t-secondary: #4E5566; --t-muted: #6B7385; --border: #E2ECF5; --s-pure: #FFFFFF; --s-card: #FFFFFF; --accent-text: var(--cyan-ink); color: var(--t-primary); }
.lead--band .lead__done p { color: var(--t-secondary); }

/* ---- Related ----------------------------------------------------------- */
.related__head { margin-bottom: clamp(22px, 3vw, 38px); }
.related__head .h2 { color: var(--t-primary); }

/* ---- Dark-mode nudges -------------------------------------------------- */
:root[data-theme="dark"] .blog-content { --link-ext: #F0A868; --link-ext-soft: rgba(240, 168, 104, .12); --link-page: var(--cyan-400); --link-blog: #9EA0EE; }
:root[data-theme="dark"] .pcard__badge { background: rgba(20, 19, 47, .82); color: var(--cyan-400); }
:root[data-theme="dark"] .blog-content .callout { background: var(--s-halo); }
:root[data-theme="dark"] .lead--band .lead__card { background: var(--s-raised); --t-primary: #F4F8FB; --t-secondary: #C7D2E4; --t-muted: #93A0BE; --border: rgba(255, 255, 255, .14); --s-pure: #1B1A38; --s-card: #1B1A38; --accent-text: var(--cyan-400); }
:root[data-theme="dark"] .blog-content pre { background: #000; }