/* push! site styles, v3 (session 111). Tokens are READ from
   ~/pulla/push-fork/lib/design/tokens (push_palette.dart, push_colors.dart,
   push_typography.dart, push_spacing.dart, push_motion.dart); see DESIGN.md.
   No inline styles anywhere: the Content-Security-Policy allows only this file. */

/* ---- Fonts (self-hosted, subset, see public/fonts) ---------------------- */
@font-face { font-family: 'Clash Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ClashDisplay-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Clash Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ClashDisplay-Semibold.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Roboto-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/Roboto-Medium.woff2') format('woff2'); }

/* ---- Tokens ------------------------------------------------------------- */
:root {
  color-scheme: dark;
  --bg: #0b001b;                      /* PushPalette.blackBg */
  --ink: #06000f;                     /* one step below blackBg (web only) */
  --surface: #1d0f38;                 /* violet20Solid */
  --surface-tint: rgba(98, 77, 170, 0.2);   /* violet20 */
  --surface-faint: rgba(98, 77, 170, 0.1);  /* violet10 */
  --line: #342265;                    /* outlineViolet */
  --line-soft: rgba(98, 77, 170, 0.4);      /* violet40 */
  --accent: #7b63ce;                  /* violet100 */
  --accent-deep: #7421fc;             /* primary80Main */
  --link: #decbff;                    /* light100 */
  --focus: #decbff;
  --text: #ffffff;                    /* white100 */
  --text-2: #b8afc3;                  /* white60 */
  --text-3: #6d6379;                  /* white40, ornaments only */
  --pink: #c70d86;                    /* pink (LIVE) */
  --green: #43b6ba;                   /* green */
  --red: #ff4070;                     /* red100 */
  --red-soft: rgba(142, 57, 78, 0.15);      /* red10 */
  --glow-a: #602ffe;                  /* bg_glow_violet.svg stops */
  --glow-b: #8560ff;
  --glow-c: #a42ffe;
  --glow-d: #d52ffe;
  --orb-violet: #7b5ed4;              /* PushPalette.orbGlowViolet */
  --orb-magenta: #8a269c;             /* PushPalette.orbGlowMagenta */
  --orb-rim: #c4aee6;                 /* rimLilac */
  --orb-peri: #c9b9ff;                /* meshPeriwinkle */
  --symbol-ring: #6d79df;             /* assets/brand/push-symbol.svg */
  --symbol-dot: #ec2b78;

  /* Section hues (web only): each surface and FAQ group owns one. All are
     checked against their own backgrounds in tools/contrast.mjs. */
  --hue-lilac: #c9b9ff;
  --hue-teal: #7fe0e3;
  --hue-rose: #ffa7c9;
  --hue-amber: #ffc46b;
  --hue-sky: #8fc5ff;
  --hue-green: #43b6ba;
  --hue-pink: #ff5fb8;
  --hue-red: #ff4070;

  /* Surface-scoped colours; every .surface--x overrides these. */
  --sf-bg: var(--bg);
  --sf-text-2: var(--text-2);
  --sf-line: var(--line);
  --sf-card: var(--surface-tint);
  --sf-card-line: var(--line-soft);
  --sf-accent: var(--symbol-dot);

  --font-display: 'Clash Display', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius-card: 24px;                /* PushRadius.lg */
  --radius-input: 30px;               /* PushRadius.input */
  --radius-pill: 100px;               /* PushRadius.pill */

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;
  --space-9: 6rem; --space-10: 8rem;
  /* Vertical rhythm (v3): a section's top padding sits under the sheet edge,
     its bottom padding also hides the 2rem the next sheet overlaps, so the
     visible gaps are top 2.5/3.5rem and bottom 1.25/2rem. */
  --section-top: 2.5rem; --section-bottom: 3.75rem;
  --sheet-overlap: 2rem;

  --gutter: 1rem;                     /* PushSpace.pageMargin */
  --container: 72rem;
  --reading: 40rem;

  --dur-fast: 150ms;                  /* PushDurations.fast */
  --dur-enter: 250ms;                 /* PushDurations.enter */
  --dur-page: 300ms;                  /* PushDurations.page */
  --dur-breath: 600ms;                /* PushDurations.breath */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);    /* PushCurves.standard */
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);  /* PushCurves.enter */
}
@media (min-width: 37.5em) { :root { --gutter: 1.5rem; } }
@media (min-width: 48em) { :root { --section-top: 3.5rem; --section-bottom: 4.5rem; } }
@media (min-width: 64em) { :root { --gutter: 2.5rem; } }
/* Wide monitors: a little more room, so 1920 is not 1280 with margins. */
@media (min-width: 100em) { :root { --container: 80rem; --gutter: 3rem; --reading: 42rem; } }

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; scroll-padding-top: 5.5rem; }
html[data-motion='on'] { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p, ul, ol { margin: 0 0 var(--space-4); }
p, li, figcaption, dd { text-wrap: pretty; }
ul, ol { padding-left: 1.4em; }
li + li { margin-top: var(--space-2); }
strong { font-weight: 500; }
small { font-size: 0.9em; }
hr { border: 0; border-top: 1px solid var(--sf-line); margin: var(--space-6) 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
/* One focus ring everywhere; it follows each control's own radius. Inline
   text links get a small radius so the ring does not sit on square corners. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
a:not([class]):focus-visible { border-radius: 4px; }
.nav-list a:focus-visible { border-radius: var(--radius-pill); outline-offset: 0; }
main:focus-visible { outline: none; }
/* on a light fill the ring gets a dark inner band so it reads as a ring */
.carousel__tab[aria-selected='true']:focus-visible, .flow__switch label:has(input:checked):has(input:focus-visible) { box-shadow: 0 0 0 2px var(--sf-bg); outline-offset: 4px; }
.mt-6 > a, .table-facts td > a:only-child { display: inline-block; padding-block: 0.25rem; }
::selection { background: var(--accent); color: var(--text); }

/* ---- Tables ------------------------------------------------------------- */
table { border-collapse: collapse; width: 100%; margin: var(--space-4) 0 var(--space-5); font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--sf-line); }
th { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em; color: var(--text); }
caption { text-align: left; color: var(--sf-text-2); padding-bottom: var(--space-2); }
.table-facts th[scope='row'] { white-space: nowrap; }
@media (max-width: 37.49em) {
  .table-facts tr { display: block; padding-block: var(--space-3); border-bottom: 1px solid var(--sf-line); }
  .table-facts th, .table-facts td { display: block; width: auto; border: 0; padding: var(--space-1) 0; }
  .table-facts th[scope='row'] { white-space: normal; color: var(--link); }
}

/* ---- Type --------------------------------------------------------------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.display { font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.05; letter-spacing: 0; max-width: 14ch; }
h1 { font-size: clamp(2.125rem, 4.6vw, 3.75rem); line-height: 1.1; letter-spacing: 0; max-width: 20ch; }
h2 { font-size: clamp(1.625rem, 3.2vw, 2.25rem); line-height: 1.15; letter-spacing: 0.01em; }
h3 { font-size: 1.25rem; line-height: 1.25; font-weight: 500; }
h4 { font-size: 1rem; line-height: 1.3; font-weight: 500; }
.lead { font-size: 1.25rem; line-height: 1.5; color: var(--sf-text-2); max-width: 34rem; text-wrap: pretty; }
.eyebrow {
  display: flex; align-items: center; gap: 0.6em;
  font-family: var(--font-display); font-weight: 500; font-size: 0.875rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--link);
  margin: 0 0 var(--space-3);
}
.eyebrow::before { content: ''; flex: none; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--sf-accent); }
.num-badge + .eyebrow::before { display: none; }
.muted { color: var(--sf-text-2); }
.small { font-size: 0.9375rem; }
.caption { font-size: 0.8125rem; line-height: 1.4; letter-spacing: 0.02em; color: var(--sf-text-2); }
.brand { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em; }

/* ---- Layout and surfaces ------------------------------------------------ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow > * { max-width: var(--reading); }
.section { padding-block: var(--section-top) var(--section-bottom); }
.section > .container > :last-child { margin-bottom: 0; }
.section--tight { padding-block: var(--space-6); }
.section--hero { padding-block: var(--space-6) var(--section-bottom); }
@media (min-width: 48em) {
  .section--hero { padding-block: var(--space-7) var(--section-bottom); }
}
.section__head { max-width: 40rem; margin-bottom: var(--space-5); }
.section__head p { color: var(--sf-text-2); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }
.stack > * + * { margin-top: var(--space-4); }
.prose > * { max-width: var(--reading); }
.prose h2 { margin-top: 2.5rem; }
.prose .eyebrow + h2, .prose h2:first-child, .prose > .mt-0 { margin-top: 0; }
.prose h3 { margin-top: var(--space-5); }
.prose p, .prose li { color: var(--sf-text-2); }
.prose strong { color: var(--text); }
.prose > p:first-child { margin-top: 0; }
.prose > .table-wide { max-width: none; }

/* Every section owns a surface. The hero keeps the app's top glow on the
   page background; the sections after it alternate depth and temperature
   within the palette, each with its own secondary text colour that was
   checked against it (tools/contrast.mjs). */
.surface { background: var(--sf-bg); color: var(--text); position: relative; }
.surface--ink { --sf-bg: var(--ink); --sf-line: #1f1536; --sf-card: rgba(98, 77, 170, 0.14); --sf-accent: var(--hue-lilac); }
.surface--violet { --sf-bg: var(--surface); --sf-text-2: #c4bad0; --sf-line: #3a2868; --sf-card: rgba(11, 0, 27, 0.45); --sf-card-line: rgba(123, 99, 206, 0.35); --sf-accent: var(--hue-lilac); }
.surface--plum { --sf-bg: #2b0b2d; --sf-text-2: #d4c2d2; --sf-line: #4a1d49; --sf-card: rgba(11, 0, 27, 0.4); --sf-card-line: rgba(255, 95, 184, 0.28); --sf-accent: var(--hue-pink); }
.surface--teal { --sf-bg: #07211f; --sf-text-2: #bfd3d2; --sf-line: #16403c; --sf-card: rgba(11, 0, 27, 0.35); --sf-card-line: rgba(127, 224, 227, 0.25); --sf-accent: var(--hue-teal); }
.surface--lavender { --sf-bg: #3b2a66; --sf-text-2: #d9d1ea; --sf-line: #55418a; --sf-card: rgba(11, 0, 27, 0.4); --sf-card-line: rgba(222, 203, 255, 0.3); --sf-accent: var(--hue-amber); }
.surface--crimson { --sf-bg: #2f0b24; --sf-text-2: #d8c3cf; --sf-line: #521a3d; --sf-card: rgba(11, 0, 27, 0.4); --sf-card-line: rgba(255, 167, 201, 0.28); --sf-accent: var(--hue-rose); }
/* A raised sheet: rounded top corners overlapping the section before it,
   the way the app's sheets rise over a screen. */
.surface--sheet { border-radius: 2rem 2rem 0 0; margin-top: calc(-1 * var(--sheet-overlap)); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35); }
/* A soft seam into the next surface instead of a hard line. */
.surface--seam::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 6rem; background: linear-gradient(180deg, transparent, var(--seam-to, var(--bg))); pointer-events: none; }
/* The numbered badge that opens each section, in the section's own hue. */
.num-badge {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 8px;
  background: var(--sf-accent); color: #0b001b;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.02em;
  margin-bottom: var(--space-2);
}

/* ---- Skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute; left: var(--space-4); top: -100%; z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--accent); border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 500;
}
.skip-link:focus { top: var(--space-4); }

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  max-height: 100dvh; overflow-y: auto;
}
/* Content slides under a frosted header instead of a hard black bar. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header { background: rgba(11, 0, 27, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .site-header:has(.site-nav[data-open='true']) { background: var(--bg); }
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 4.5rem; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; padding: var(--space-2) 0; text-decoration: none; }
.logo svg { width: auto; height: 2rem; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 2.75rem; padding: var(--space-2) var(--space-4);
  background: var(--surface-faint); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 500; cursor: pointer;
}
.site-nav { display: none; flex-basis: 100%; padding-bottom: var(--space-4); }
.site-nav[data-open='true'] { display: block; }
html:not([data-js]) .site-nav { display: block; }
html:not([data-js]) .nav-toggle { display: none; }
/* The menu settles in rather than popping (motion on; browsers without
   @starting-style simply show it). */
html[data-motion='on'] .site-nav[data-open='true'] { transition: opacity var(--dur-enter) var(--ease-enter), translate var(--dur-enter) var(--ease-enter), display var(--dur-enter) allow-discrete; }
@starting-style { html[data-motion='on'] .site-nav[data-open='true'] { opacity: 0; translate: 0 -0.5rem; } }
.nav-list { list-style: none; margin: 0 calc(-1 * var(--space-3)); padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.nav-list li { margin: 0; }
.nav-list a {
  display: block; padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-pill); color: var(--text); text-decoration: none;
  font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.nav-list a:hover { background: var(--surface-faint); }
.nav-list a[aria-current='page'] { position: relative; isolation: isolate; }
.nav-pill { position: absolute; inset: 0; z-index: -1; border-radius: var(--radius-pill); background: var(--surface-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.logo, .footer-brand { color: var(--text); }
.nav-tools { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-3); }
@media (min-width: 56em) {
  .nav-toggle { display: none; }
  .site-nav { display: flex; flex-basis: auto; align-items: center; gap: var(--space-4); padding: 0; }
  .nav-list { flex-direction: row; align-items: center; gap: var(--space-1); margin: 0; }
  .nav-list a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-3); }
  .nav-tools { padding: 0; }
}

/* ---- Cross-document view transitions (progressive) ----------------------
   Browsers that support it crossfade the page and morph the active nav pill
   from the old link to the new one. Others navigate as before. Reduced
   motion and the toggle both switch it off. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.site-header { view-transition-name: site-header; }
.nav-pill { view-transition-name: nav-active; }
.site-footer { view-transition-name: site-footer; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-page); animation-timing-function: var(--ease-standard); }
::view-transition-group(nav-active) { animation-duration: var(--dur-page); animation-timing-function: var(--ease-standard); }
::view-transition-old(nav-active), ::view-transition-new(nav-active) { animation: none; mix-blend-mode: normal; height: 100%; }
html[data-motion='off']::view-transition-group(*),
html[data-motion='off']::view-transition-old(*),
html[data-motion='off']::view-transition-new(*) { animation: none !important; }

/* ---- Motion toggle ------------------------------------------------------
   Deliberately quiet (W7): small text, no box, in the footer's legal line.
   It stays on every page because WCAG 2.2.2 and vestibular safety need a way
   to stop motion. The target is still 2.25rem tall. */
.motion-toggle {
  display: inline-flex; align-items: center; gap: 0.4em;
  min-height: 2.25rem; padding: 0 var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  background: transparent; color: var(--sf-text-2);
  border: 0; border-radius: var(--radius-pill);
  font-size: 0.8125rem; letter-spacing: 0.01em; cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-standard), text-decoration-color var(--dur-fast) var(--ease-standard);
}
.motion-toggle:hover { color: var(--text); text-decoration-color: currentColor; }
.motion-toggle [data-motion-state] { color: inherit; font-weight: 500; }
.motion-toggle__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--text-3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.motion-toggle[aria-pressed='true'] .motion-toggle__dot { background: var(--green); box-shadow: 0 0 6px rgba(67, 182, 186, 0.6); }

/* ---- Buttons: one system ------------------------------------------------
   Three variants from the kit (push_button.dart): primary = blue rim light,
   secondary = pink rim light, tertiary = Violet 100 outline. One height per
   size, one radius, the label optically centred (Clash Display sits a touch
   high in its box, so the text gets 1px of top padding). */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  box-sizing: border-box;
  min-height: 3.5rem; padding: 1px var(--space-6) 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: 0.02em; line-height: 1;
  text-decoration: none; text-align: center; white-space: nowrap;
  color: var(--text); background: var(--bg); border: 0; cursor: pointer;
  overflow: hidden; isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.btn:hover { text-decoration: none; }
/* One pressed state for every control: a short press-in (motion on). */
html[data-motion='on'] :is(.btn, .carousel__btn, .carousel__tab, .row-toggle, .nav-toggle, .faq-index li a, .flow__switch label):active { transform: scale(0.97); }
.btn .icon { width: 1.25rem; height: 1.25rem; }
.btn .icon--ext { width: 1.125rem; height: 1.125rem; margin-left: -0.125rem; opacity: 0.85; }
.btn--primary {
  background: #16063a;
  box-shadow: inset 0 10px 18px -4px #3b00a9, inset 0 -14px 22px -2px #814aff, inset 0 -3px 10px 0 rgba(223, 207, 248, 0.85), inset 0 0 0 1px rgba(129, 74, 255, 0.55);
}
.btn--primary:hover {
  background: #1c0a48;
  box-shadow: inset 0 10px 18px -4px #4a10c4, inset 0 -14px 22px -2px #9b74ff, inset 0 -3px 10px 0 rgba(235, 225, 255, 0.95), inset 0 0 0 1px rgba(157, 115, 255, 0.7);
}
.btn--secondary {
  background: #1a0416;
  box-shadow: inset 0 -7px 13.8px 0 rgba(230, 150, 210, 0.6), inset 0 -19px 30.1px 9px #9a005a, inset 0 -4px 10px 13.9px #b10091, inset 0 -3px 10px 9.3px rgba(252, 210, 235, 0.8);
}
.btn--secondary:hover {
  box-shadow: inset 0 -7px 13.8px 0 rgba(230, 150, 210, 0.75), inset 0 -19px 30.1px 9px #ad0a6b, inset 0 -4px 10px 13.9px #c20aa1, inset 0 -3px 10px 9.3px rgba(252, 210, 235, 0.9);
}
.btn--tertiary { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); }
.btn--tertiary:hover { box-shadow: inset 0 0 0 1px var(--link); background: var(--surface-faint); }
/* Violet 100 is under 3:1 on the lavender surface; outlines there use Light 100. */
.surface--lavender .btn--tertiary, .surface--lavender .carousel__btn { box-shadow: inset 0 0 0 1px var(--link); }
.btn--small { min-height: 2.75rem; padding-inline: var(--space-5); font-size: 0.9375rem; }
.btn--small.btn--primary { box-shadow: inset 0 7px 12px -4px #3b00a9, inset 0 -9px 14px -2px #814aff, inset 0 -2px 7px 0 rgba(223, 207, 248, 0.85), inset 0 0 0 1px rgba(129, 74, 255, 0.55); }
.btn--block { width: 100%; }
/* The laminated sheen: a soft light sweeps across primary calls to action
   about once every ten seconds. Motion only. */
.btn--sheen::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.22) 48%, rgba(255, 255, 255, 0.05) 52%, transparent 65%);
  transform: translateX(-120%);
}
html[data-motion='on'] .btn--sheen::after { animation: sheen 11s var(--ease-standard) infinite; }
@keyframes sheen { 0% { transform: translateX(-120%); } 12% { transform: translateX(120%); } 100% { transform: translateX(120%); } }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; margin-top: var(--space-5); }
.cta-row--center { justify-content: center; }
@media (max-width: 37.49em) {
  .cta-row .btn { width: 100%; }
  .cta-row .badge-appstore { margin-inline: auto; }
}
.badge-appstore { display: inline-flex; padding: 0.75rem; border-radius: 8px; }
.badge-appstore svg, .badge-appstore img { height: 3.5rem; width: auto; }
/* The glint runs at different moments on the hero and the closing call to
   action, so the page never blinks as one. */
.hero .btn--sheen::after { animation-delay: 2.5s; }
.band .btn--sheen::after { animation-delay: 7.5s; }

/* ---- Icons -------------------------------------------------------------- */
.icon { width: 1.5rem; height: 1.5rem; flex: none; color: currentColor; }
/* The "opens in a new tab" mark after every link that leaves the site. */
.icon--ext { display: inline-block; width: 0.85em; height: 0.85em; vertical-align: -0.08em; margin-left: 0.2em; }
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--sf-card); box-shadow: inset 0 0 0 1px var(--sf-card-line);
  color: var(--sf-accent); margin-bottom: var(--space-3);
  transition: transform var(--dur-fast) var(--ease-standard);
}
html[data-motion='on'] .card--link:hover .icon-chip { transform: translateY(-2px) scale(1.04); }

/* ---- Hero --------------------------------------------------------------- */
/* The app's top-of-screen glow (bg_glow_violet.svg) kept as the page opener. */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__glow {
  position: absolute; inset: -20% -10% auto -10%; height: 80%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 55% at 22% 20%, rgba(96, 47, 254, 0.42) 0%, rgba(96, 47, 254, 0) 70%),
    radial-gradient(38% 50% at 70% 10%, rgba(164, 47, 254, 0.3) 0%, rgba(164, 47, 254, 0) 70%),
    radial-gradient(30% 40% at 85% 55%, rgba(213, 47, 254, 0.18) 0%, rgba(213, 47, 254, 0) 70%);
  opacity: 0.9;
}
.hero__grid { display: grid; gap: var(--space-5); align-items: center; }
.hero__copy { max-width: 36rem; }
.hero__note { max-width: 36rem; }
/* The phone fades into the page instead of ending on a hard edge. */
.hero__art { justify-self: center; width: min(100%, 17rem); max-height: 24rem; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0) 100%); }
.hero__art--illo { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.hero__orb { display: none; }
.hero__mascot { display: none; }
@media (min-width: 48em) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr auto auto 1fr; gap: var(--space-5) var(--space-8); }
  .hero__copy { grid-column: 1; grid-row: 2; }
  .hero__note { grid-column: 1; grid-row: 3; }
  .hero__art { grid-column: 2; grid-row: 1 / span 4; width: min(100%, 20rem); max-height: none; overflow: visible; justify-self: end; align-self: end; margin-bottom: calc(-1 * var(--section-bottom)); -webkit-mask-image: none; mask-image: none; }
  .hero__art .device { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, 0) 96%); mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, 0) 96%); }
  .hero__art--illo { margin-bottom: 0; align-self: center; }
  .hero__orb { display: grid; place-items: center; justify-self: end; align-self: center; grid-column: 2; grid-row: 1 / span 4; }
  .hero__mascot { display: block; grid-column: 2; grid-row: 1 / span 4; justify-self: end; align-self: center; width: 11rem; height: auto; }
}

/* ---- Phone frame -------------------------------------------------------- */
/* 390x844 screen, the app's own bezel look (iPhone-class rounded frame). */
.device {
  position: relative; width: 100%; aspect-ratio: 390 / 844;
  border-radius: 13.8% / 6.4%;
  padding: 2.5%;
  background: #16151b;
  box-shadow: 0 0 0 1.5px #2c2a33, 0 30px 60px -20px rgba(0, 0, 0, 0.8), 0 0 70px -20px rgba(123, 99, 206, 0.35);
}
.device picture, .device img { width: 100%; height: 100%; border-radius: 11.5% / 5.3%; overflow: hidden; object-fit: cover; background: #0b001b; }
.device__island { position: absolute; top: 3.8%; left: 50%; width: 30%; height: 3.9%; transform: translateX(-50%); background: #000; border-radius: 100px; z-index: 2; }

/* ---- The 911 line ------------------------------------------------------- */
.line-911 {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4) var(--space-5); border-radius: 16px;
  background: var(--red-soft); box-shadow: inset 0 0 0 1px rgba(255, 64, 112, 0.35);
  color: var(--text); max-width: 40rem;
}
.line-911 .icon { color: var(--red); margin-top: 0.1em; }
.line-911 p { margin: 0; }
.line-911 strong { font-weight: 500; color: var(--text); }
.hero .line-911:not(.line-911--boxed) { background: none; box-shadow: none; padding: 0; color: var(--sf-text-2); font-size: 0.9375rem; }

/* ---- Cards and grids ---------------------------------------------------- */
.grid { display: grid; gap: var(--space-4); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.grid--team { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 22rem)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.card {
  background: var(--sf-card); box-shadow: inset 0 0 0 1px var(--sf-card-line);
  border-radius: var(--radius-card); padding: var(--space-5);
  transition: box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
@media (max-width: 37.49em) { .card { padding: var(--space-4) var(--space-4) var(--space-5); border-radius: 20px; } }
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--sf-text-2); margin: 0; }
.card p + p { margin-top: var(--space-3); }
.card--solid { background: var(--surface); }
/* Centred cards in one row keep their buttons on one line at the bottom. */
.card--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.card--center > * { width: 100%; }
.card--center .icon-chip { margin-inline: auto; width: 3rem; }
.card--center p { margin-bottom: var(--space-5); }
.card--center .btn { margin-top: auto; }
.card--center p:has(+ .caption) { margin-bottom: var(--space-2); }
.card--link { display: block; color: inherit; text-decoration: none; }
.card--link:hover { box-shadow: inset 0 0 0 1px var(--link); }
html[data-motion='on'] .card--link:hover { transform: translateY(-3px); }
.card--link .card__more { display: inline-block; margin-top: var(--space-4); color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; font-family: var(--font-display); font-weight: 500; }
.card .btn { margin-top: var(--space-5); }
/* Cards in one row share their row lines (chip, title, body), so bodies start
   on one baseline even when a title wraps (subgrid where supported). */
@supports (grid-template-rows: subgrid) {
  .grid > .card:not(.card--center):not(.person), .steps > .step, .equation > .equation__term { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start; }
  .equation > .equation__term { row-gap: var(--space-2); }
}

/* ---- Steps -------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: step; }
.steps--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.steps--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.step { position: relative; padding: var(--space-5); border-radius: var(--radius-card); background: var(--sf-card); box-shadow: inset 0 0 0 1px var(--sf-card-line); margin: 0; }
@media (max-width: 37.49em) { .step { padding: var(--space-4) var(--space-4) var(--space-5); border-radius: 20px; } }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--sf-accent); color: var(--sf-accent);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin-bottom: var(--space-3);
}
.step h3 { margin-bottom: var(--space-2); }
.step p { color: var(--sf-text-2); margin: 0; }

/* ---- Checklist ---------------------------------------------------------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; margin: 0; color: var(--sf-text-2); }
.checklist li strong { color: var(--text); }
.checklist .icon { color: var(--green); margin-top: 0.15em; }
.checklist--x .icon { color: var(--red); }
.checklist + p { margin-top: var(--space-4); }

/* ---- Split (text + art) ------------------------------------------------- */
.split { display: grid; gap: var(--space-6); align-items: center; }
/* On narrow screens the heading always comes first; the art follows it. */
.split__art { justify-self: center; width: min(100%, 18rem); order: 1; }
.split__art--wide { width: min(100%, 30rem); }
@media (min-width: 56em) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
  .split__art { order: 0; }
  .split--art-left .split__art { order: -1; }
}

/* ---- Pill tag ----------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-input);
  background: var(--pink); color: var(--text);
  font-weight: 500; font-size: 0.75rem; letter-spacing: 0.02em; line-height: 1.2; text-transform: uppercase;
}
.tag--neutral { background: var(--sf-card); box-shadow: inset 0 0 0 1px var(--sf-card-line); color: var(--link); }

/* ---- Carousel (How it works) --------------------------------------------
   WAI-ARIA tabbed carousel: the dots are tabs, each slide a tabpanel.
   Without JavaScript every slide is laid out in a row the reader scrolls. */
.carousel { position: relative; }
.carousel__viewport { display: grid; gap: var(--space-8); }
.carousel__slide { display: grid; gap: var(--space-4); justify-items: center; text-align: center; }
.carousel__phone { width: min(100%, 17rem); }
.carousel__caption { max-width: 22rem; }
.carousel__caption h3 { margin-bottom: var(--space-2); }
.carousel__caption p { color: var(--sf-text-2); margin: 0; }
.carousel__index { font-family: var(--font-display); font-weight: 500; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-accent); }
.carousel__controls { display: none; }
.carousel[data-ready] .carousel__viewport { display: block; overflow: clip; overflow-clip-margin: 4rem; touch-action: pan-y; cursor: grab; }
.carousel[data-ready] .carousel__viewport:active { cursor: grabbing; }
.carousel__phone img { -webkit-user-drag: none; user-select: none; }
.carousel[data-ready] .carousel__slide { margin-inline: auto; }
.carousel[data-ready] .carousel__slide[hidden] { display: none; }
.carousel[data-ready] .carousel__controls { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-3); margin-top: var(--space-5); max-width: 44rem; margin-inline: auto; }
/* the step strip on its own row, Previous and Next underneath at the edges */
.carousel__tabs { grid-column: 1 / -1; grid-row: 1; justify-content: center; }
.carousel__btn[data-prev] { justify-self: start; }
.carousel__btn[data-next] { justify-self: end; }
.carousel__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: 3rem; min-height: 3rem; padding: 0 var(--space-4);
  border-radius: var(--radius-pill); background: transparent; color: var(--text);
  box-shadow: inset 0 0 0 1px var(--accent); cursor: pointer;
  font-family: var(--font-display); font-weight: 500;
}
.carousel__btn:hover { box-shadow: inset 0 0 0 1px var(--link); background: var(--surface-faint); }
.carousel__btn, .carousel__tab, .row-toggle { transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.carousel__btn .icon { width: 1.25rem; height: 1.25rem; }
/* The step strip: named tabs, so the whole flow can be read without clicking. */
.carousel__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0; list-style: none; }
.carousel__tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  min-height: 2.75rem; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--sf-text-2); cursor: pointer;
  font-family: var(--font-display); font-weight: 500; font-size: 0.875rem; letter-spacing: 0.02em; white-space: nowrap;
  box-shadow: inset 0 0 0 1px transparent;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.carousel__n { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; font-size: 0.75rem; box-shadow: inset 0 0 0 1px currentColor; }
.carousel__tab:hover { color: var(--text); background: var(--surface-faint); }
.carousel__tab[aria-selected='true'] { color: #0b001b; background: var(--sf-accent); }
.carousel__tab[aria-selected='true'] .carousel__n { box-shadow: inset 0 0 0 1px rgba(11, 0, 27, 0.5); }
html[data-motion='on'] .carousel[data-ready] .carousel__slide { animation: slide-in var(--dur-enter) var(--ease-enter); }
@keyframes slide-in { from { opacity: 0; transform: translateX(var(--slide-from, 16px)); } to { opacity: 1; transform: none; } }
@media (min-width: 56em) {
  .carousel[data-ready] .carousel__slide { grid-template-columns: 20rem minmax(0, 26rem); align-items: center; justify-content: center; text-align: left; gap: var(--space-8); width: fit-content; max-width: 100%; }
  .carousel[data-ready] .carousel__phone { width: 20rem; }
}
/* Wide enough for one row: Previous, the step strip, Next. */
@media (min-width: 64em) {
  .carousel[data-ready] .carousel__controls { grid-template-columns: auto 1fr auto; max-width: 56rem; }
  .carousel__tabs { grid-column: 2; grid-row: 1; }
  .carousel__btn[data-prev] { grid-column: 1; grid-row: 1; }
  .carousel__btn[data-next] { grid-column: 3; grid-row: 1; }
}

/* ---- Orb (the app's ring-lit "push for help", organic breathing) ---------
   Three soft blobs drift and morph on their own clocks behind a stable ring;
   the composite never repeats visibly. Still with motion off. */
.orb { position: relative; width: 12rem; height: 12rem; margin-inline: auto; display: grid; place-items: center; isolation: isolate; }
.orb--large { width: 19rem; height: 19rem; }
.orb--small { width: 6rem; height: 6rem; }
.orb__blob { position: absolute; inset: 6%; border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; filter: blur(14px); opacity: 0.85; z-index: -1; }
.orb__blob--a { background: var(--orb-violet); inset: 4%; }
.orb__blob--b { background: var(--orb-magenta); inset: 10% 2% 2% 10%; border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; opacity: 0.7; }
.orb__blob--c { background: var(--orb-peri); inset: 14%; border-radius: 50% 50% 60% 40% / 45% 55% 45% 55%; opacity: 0.35; filter: blur(18px); }
.orb--small .orb__blob { filter: blur(5px); }
.orb__ring {
  position: relative; width: 84%; height: 84%; border-radius: 50%;
  /* the app's disc: a dark core, a deep-violet mid, a lilac rim (push_orb.dart:251-262) */
  background: radial-gradient(circle at 50% 48%, #090519 0%, #090519 34%, #3b239d 62%, #c9b9ff 90%, #e3d2ff 100%);
  box-shadow: inset 0 0 0 2px var(--orb-rim), inset 0 0 18px 6px rgba(201, 185, 255, 0.45), inset 0 0 40px 18px rgba(123, 99, 206, 0.35), 0 0 0 10px rgba(116, 91, 208, 0.2), 0 0 0 22px rgba(75, 51, 164, 0.14);
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; color: var(--text);
}
.orb--large .orb__ring { font-size: 1.625rem; }
.orb--small .orb__ring { font-size: 0; box-shadow: inset 0 0 0 1.5px var(--orb-rim), inset 0 0 12px 4px rgba(201, 185, 255, 0.5), inset 0 0 22px 10px rgba(123, 99, 206, 0.35), 0 0 0 5px rgba(116, 91, 208, 0.2); }
html[data-motion='on'] .orb__ring { animation: orb-breath 6.4s ease-in-out infinite; }
html[data-motion='on'] .orb__blob--a { animation: blob-a 9.1s ease-in-out infinite alternate; }
html[data-motion='on'] .orb__blob--b { animation: blob-b 11.7s ease-in-out infinite alternate; }
html[data-motion='on'] .orb__blob--c { animation: blob-c 7.3s ease-in-out infinite alternate; }
@keyframes orb-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes blob-a {
  0% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; transform: translate(0, 0) rotate(0deg) scale(1); }
  35% { border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%; transform: translate(-3%, 2%) rotate(14deg) scale(1.06); }
  70% { border-radius: 55% 45% 40% 60% / 45% 55% 50% 50%; transform: translate(2%, -3%) rotate(-10deg) scale(0.97); }
  100% { border-radius: 50% 50% 58% 42% / 58% 42% 48% 52%; transform: translate(3%, 3%) rotate(22deg) scale(1.04); }
}
@keyframes blob-b {
  0% { border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; transform: translate(0, 0) rotate(0deg) scale(1); }
  40% { border-radius: 58% 42% 52% 48% / 42% 58% 42% 58%; transform: translate(4%, -2%) rotate(-18deg) scale(1.08); }
  100% { border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%; transform: translate(-3%, 4%) rotate(12deg) scale(0.95); }
}
@keyframes blob-c {
  0% { border-radius: 50% 50% 60% 40% / 45% 55% 45% 55%; transform: translate(0, 0) scale(1); }
  50% { border-radius: 60% 40% 45% 55% / 55% 45% 60% 40%; transform: translate(-4%, -4%) scale(1.12); }
  100% { border-radius: 42% 58% 50% 50% / 50% 50% 42% 58%; transform: translate(4%, 2%) scale(0.92); }
}

/* ---- Your data: the timeline -------------------------------------------- */
.timeline { --tl-accent: var(--hue-teal); display: grid; gap: var(--space-4); }
.timeline__track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; align-items: start; }
.timeline__track::before { content: ''; position: absolute; left: 10%; right: 10%; top: 1.25rem; height: 2px; background: var(--sf-line); }
.timeline__track::after {
  content: ''; position: absolute; left: 30%; right: 30%; top: 1.25rem; height: 2px;
  background: var(--tl-accent); box-shadow: 0 0 12px var(--tl-accent);
}
.timeline__state { position: relative; display: grid; justify-items: center; gap: var(--space-3); text-align: center; padding-inline: var(--space-1); }
.timeline__dot {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--sf-bg); box-shadow: inset 0 0 0 2px var(--sf-line); color: var(--sf-text-2); z-index: 1;
}
.timeline__dot .icon { width: 1.25rem; height: 1.25rem; }
.timeline__state--on .timeline__dot { box-shadow: inset 0 0 0 2px var(--tl-accent), 0 0 16px rgba(127, 224, 227, 0.45); color: var(--tl-accent); }
.timeline__state--press .timeline__dot { background: var(--pink); box-shadow: 0 0 18px rgba(199, 13, 134, 0.6); color: var(--text); }
.timeline__label { display: block; font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.02em; color: var(--text); margin: 0; }
.timeline__state p { font-size: 0.8125rem; line-height: 1.4; color: var(--sf-text-2); margin: 0; max-width: 11rem; }
.timeline__marker {
  position: absolute; top: 0.25rem; left: 10%; width: 2rem; height: 2rem; margin-left: -1rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 224, 227, 0.55), rgba(127, 224, 227, 0)); pointer-events: none; display: none;
}
html[data-motion='on'] .timeline__marker { display: block; animation: tl-walk 14s var(--ease-standard) infinite; }
@keyframes tl-walk { 0%, 12% { left: 10%; } 20%, 32% { left: 30%; } 40%, 52% { left: 50%; } 60%, 72% { left: 70%; } 80%, 100% { left: 90%; } }
/* Each state takes its turn: the dot swells and its label brightens while the
   marker rests on it (2.8 s each on the 14 s loop). The labels are always
   readable; this only says "now". */
html[data-motion='on'] .timeline__state .timeline__dot { animation: tl-node 14s var(--ease-standard) infinite; }
html[data-motion='on'] .timeline__label { animation: tl-label 14s var(--ease-standard) infinite; }
html[data-motion='on'] .timeline__state:nth-child(3) .timeline__dot, html[data-motion='on'] .timeline__state:nth-child(3) .timeline__label { animation-delay: 2.8s; }
html[data-motion='on'] .timeline__state:nth-child(4) .timeline__dot, html[data-motion='on'] .timeline__state:nth-child(4) .timeline__label { animation-delay: 5.6s; }
html[data-motion='on'] .timeline__state:nth-child(5) .timeline__dot, html[data-motion='on'] .timeline__state:nth-child(5) .timeline__label { animation-delay: 8.4s; }
html[data-motion='on'] .timeline__state:nth-child(6) .timeline__dot, html[data-motion='on'] .timeline__state:nth-child(6) .timeline__label { animation-delay: 11.2s; }
@keyframes tl-node { 0%, 12% { transform: scale(1.18); filter: brightness(1.35); } 20%, 100% { transform: scale(1); filter: brightness(1); } }
@keyframes tl-label { 0%, 12% { color: var(--tl-accent); } 20%, 100% { color: var(--text); } }
.timeline__legend { color: var(--sf-text-2); font-size: 0.9375rem; max-width: 36rem; }
@media (max-width: 47.99em) {
  .timeline__track { grid-template-columns: 1fr; gap: var(--space-4); }
  .timeline__track::before, .timeline__track::after, .timeline__marker { display: none !important; }
  /* the node animation carries the story vertically on phones */
  .timeline__state { grid-template-columns: 2.5rem 1fr; justify-items: start; text-align: left; align-items: start; column-gap: var(--space-4); }
  .timeline__label { grid-column: 2; }
  .timeline__state p { grid-column: 2; max-width: none; }
  .timeline__state .timeline__dot { grid-row: 1 / span 2; }
}

/* Always-on versus push!: two day-bars. */
.compare { display: grid; gap: var(--space-5); }
.compare__row { display: grid; gap: var(--space-2); }
.compare__label { display: flex; justify-content: space-between; gap: var(--space-4); font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.02em; }
.compare__label span:last-child { color: var(--sf-text-2); font-family: var(--font-body); font-weight: 400; }
.compare__bar { position: relative; height: 1.25rem; border-radius: var(--radius-pill); background: var(--sf-card); box-shadow: inset 0 0 0 1px var(--sf-card-line); overflow: hidden; }
.compare__fill { position: absolute; inset: 0; border-radius: inherit; }
.compare__fill--always { background: repeating-linear-gradient(90deg, var(--text-3) 0 6px, transparent 6px 10px); opacity: 0.9; }
.compare__fill--push { left: 80%; right: 15%; background: var(--hue-teal); box-shadow: 0 0 14px rgba(127, 224, 227, 0.6); }
.compare__ticks { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--sf-text-2); letter-spacing: 0.04em; }

/* Who sees what: a switch between the two states. */
.flow { display: grid; gap: var(--space-4); }
.flow__switch { display: inline-flex; gap: var(--space-1); padding: var(--space-1); margin: 0; border: 0; border-radius: var(--radius-pill); background: var(--sf-card); box-shadow: inset 0 0 0 1px var(--sf-card-line); justify-self: start; }
.flow__switch .long { display: none; }
@media (min-width: 37.5em) { .flow__switch .long { display: inline; } .flow__switch .short { display: none; } }
.flow__switch label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 var(--space-5); border-radius: var(--radius-pill); cursor: pointer; font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em; color: var(--sf-text-2); }
.flow__switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
/* The chosen option is a light pill with dark text and a check mark, so the
   state reads without colour. */
.flow__switch input:checked + span { color: #0b001b; }
.flow__switch input:checked + span::before { content: '\2713\00a0' / ''; }
.flow__switch label:has(input:checked) { background: var(--link); color: #0b001b; }
.flow__switch label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.flow__panels { display: grid; gap: var(--space-4); }
.flow__panel { display: grid; gap: var(--space-4); }
.flow__panel h3 { margin: 0; font-size: 1.125rem; }
.flow[data-ready][data-state='between'] .flow__panel--during, .flow[data-ready][data-state='during'] .flow__panel--between { display: none; }
.flow:not([data-ready]) .flow__switch { display: none; }
.flow__diagram { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); max-width: 36rem; }
.flow__node { display: grid; justify-items: center; gap: var(--space-2); text-align: center; font-size: 0.875rem; color: var(--sf-text-2); }
.flow__node strong { color: var(--text); font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em; }
.flow__node .icon-chip { margin: 0; }
.flow__link { height: 2px; min-width: 2.5rem; background: var(--sf-line); position: relative; }
.flow__link--on { background: var(--hue-teal); box-shadow: 0 0 12px rgba(127, 224, 227, 0.6); overflow: visible; }
.flow__link--on::after { content: ''; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 8px solid var(--hue-teal); }
/* packets travelling along the live link */
.flow__link--on::before { content: ''; position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--text); box-shadow: 0 0 10px var(--hue-teal); opacity: 0; }
html[data-motion='on'] .flow__link--on::before { animation: packet 1.8s linear infinite; }
@keyframes packet { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.flow__link--off { background: repeating-linear-gradient(90deg, var(--sf-line) 0 6px, transparent 6px 12px); }
.flow__link--off::before { content: ''; position: absolute; left: 50%; top: -0.75rem; width: 1.5rem; height: 1.5rem; margin-left: -0.75rem; border-radius: 50%; background: var(--sf-bg); box-shadow: inset 0 0 0 1px var(--sf-line); }
.flow__link--off::after { content: '\00d7'; position: absolute; left: 50%; top: -0.9rem; transform: translateX(-50%); color: var(--sf-text-2); font-size: 1rem; line-height: 1.5rem; }
.flow__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.flow__list li { display: flex; gap: var(--space-3); align-items: flex-start; margin: 0; color: var(--sf-text-2); }
.flow__list .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.15em; color: var(--sf-accent); }
.flow__list .icon--off { color: var(--text-3); }

/* The data table: one short row each, expandable to the full detail. Fixed
   column widths, so an opened detail row (one cell across all columns)
   cannot re-flow the other rows (B1). */
.table-data { margin-top: 0; table-layout: fixed; }
.table-data thead th:nth-child(1) { width: 19%; }
.table-data thead th:nth-child(2) { width: 27%; }
.table-data thead th:nth-child(4) { width: 6.5rem; }
.table-data th, .table-data td { padding: var(--space-3) var(--space-3); }
.table-data th:first-child, .table-data td:first-child { padding-left: 0; }
.table-data th:last-child, .table-data td:last-child { padding-right: 0; }
.table-data th[scope='row'] { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }
.table-data .row-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 2rem; padding: 1px var(--space-3) 0; margin: -0.25rem 0;
  border-radius: var(--radius-pill); background: transparent; color: var(--text);
  box-shadow: inset 0 0 0 1px var(--accent); cursor: pointer; white-space: nowrap;
  font-family: var(--font-display); font-weight: 500; font-size: 0.875rem; letter-spacing: 0.02em;
}
.table-data .row-toggle:hover { box-shadow: inset 0 0 0 1px var(--link); background: var(--surface-faint); }
.table-data .row-toggle[aria-expanded='true'] { background: var(--sf-card); box-shadow: inset 0 0 0 1px var(--link); }
@media (pointer: coarse) { .table-data .row-toggle { min-height: 2.75rem; margin: -0.5rem 0; } }
.table-data .row-toggle::after { content: ''; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -0.2rem; transition: transform var(--dur-fast) var(--ease-standard); }
.table-data .row-toggle[aria-expanded='true']::after { transform: rotate(-135deg); margin-top: 0.2rem; }
.table-data .row-detail td { padding-top: 0; color: var(--sf-text-2); background: var(--sf-card); border-radius: 0 0 12px 12px; }
.table-data .row-detail p { margin: 0 0 var(--space-2); }
.table-data .row-detail p:last-child { margin-bottom: 0; }
.table-data .row-detail strong { color: var(--text); }
.table-data tr.row-detail[hidden] { display: none; }
.table-data[data-ready] .row-toggle { visibility: visible; }
.table-data .row-toggle { visibility: hidden; }
@media (max-width: 37.49em) {
  .table-data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .table-data tr { display: block; padding-block: var(--space-3); border-bottom: 1px solid var(--sf-line); }
  .table-data tr.row-detail { padding-top: 0; }
  .table-data th, .table-data td { display: block; width: auto; border: 0; padding: var(--space-1) 0; }
  /* visual label only; the column header already names the cell */
  .table-data td[data-label]::before { content: attr(data-label) ': ' / ''; color: var(--link); font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em; }
  .table-data .row-detail td { background: none; padding-top: var(--space-2); }
  .table-data .row-toggle { margin-top: var(--space-2); }
}

/* ---- FAQ (colour-coded groups) ------------------------------------------ */
.faq-layout { display: grid; gap: var(--space-6); align-items: start; margin-bottom: var(--space-6); }
/* Below the two-column width the index is a row of chips above the groups. */
.faq-index ul { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.faq-index li a { min-height: 2.5rem; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--sf-card); box-shadow: inset 0 0 0 1px var(--sf-card-line); font-size: 0.875rem; transition: box-shadow var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
@media (max-width: 63.99em) { .faq-index li a[aria-current='true'] { box-shadow: inset 0 0 0 1px var(--g-hue); } }
@media (min-width: 64em) {
  .faq-index ul { display: block; }
  .faq-index li a { padding: var(--space-2) 0; background: none; box-shadow: none; font-size: inherit; }
  .faq-layout { grid-template-columns: minmax(0, var(--reading)) 16rem; gap: var(--space-9); }
  .faq-index { display: block; position: sticky; top: 6rem; grid-column: 2; grid-row: 1; }
  .faq-main { grid-column: 1; grid-row: 1; }
}
.faq-index h2 { font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-text-2); font-weight: 500; margin-bottom: var(--space-3); }
.faq-index ul { list-style: none; margin: 0; padding: 0; }
.faq-index li { margin: 0; }
.faq-index a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; color: var(--sf-text-2); text-decoration: none; font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em; }
.faq-index a::before { content: ''; flex: none; width: 0.625rem; height: 0.625rem; border-radius: 3px; background: var(--g-hue); opacity: 0.7; transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard); }
.faq-index a:hover { color: var(--link); text-decoration: underline; }
.faq-index a[aria-current='true'] { color: var(--text); }
.faq-index a[aria-current='true']::before { opacity: 1; transform: scale(1.3); }
[data-hue='lilac'] { --g-hue: var(--hue-lilac); }
[data-hue='teal'] { --g-hue: var(--hue-teal); }
[data-hue='rose'] { --g-hue: var(--hue-rose); }
[data-hue='amber'] { --g-hue: var(--hue-amber); }
[data-hue='sky'] { --g-hue: var(--hue-sky); }
[data-hue='green'] { --g-hue: var(--hue-green); }
[data-hue='pink'] { --g-hue: var(--hue-pink); }
[data-hue='red'] { --g-hue: var(--hue-red); }
.faq-group { margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background: var(--sf-card); box-shadow: inset 0 0 0 1px var(--sf-card-line); position: relative; overflow: hidden; }
.faq-group::before { content: ''; position: absolute; left: 0; top: 1.25rem; bottom: 1.25rem; width: 4px; border-radius: 0 2px 2px 0; background: var(--g-hue); }
@media (max-width: 37.49em) { .faq-group { padding: var(--space-4); border-radius: 20px; } }
.faq-group__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.faq-group__head .icon-chip { margin: 0; width: 2.5rem; height: 2.5rem; color: var(--g-hue); }
.faq-group__head .icon-chip .icon { width: 1.25rem; height: 1.25rem; }
.faq-group h2 { margin: 0; font-size: 1.375rem; }
.faq { border-top: 1px solid var(--sf-line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  min-height: 2.75rem; padding: var(--space-3) var(--space-2); margin-inline: calc(-1 * var(--space-2)); border-radius: 8px;
  font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; letter-spacing: 0.02em; color: var(--text);
  transition: color var(--dur-fast) var(--ease-standard);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 0.75rem; height: 0.75rem; border-right: 2px solid var(--g-hue, var(--link)); border-bottom: 2px solid var(--g-hue, var(--link)); transform: translateY(-0.2rem) rotate(45deg); margin-right: 0.25rem; transition: transform var(--dur-fast) var(--ease-standard); }
.faq[open] summary::after { transform: translateY(0.15rem) rotate(-135deg); }
.faq summary:hover, .faq[open] summary { color: var(--link); }
.faq__a { padding: 0 0 var(--space-4); color: var(--sf-text-2); max-width: var(--reading); }
.faq__a p:last-child { margin-bottom: 0; }
/* Accordions open and close smoothly where the browser can animate
   height: auto (Chrome 129+, Safari 26+); elsewhere they simply open. */
html[data-motion='on'] { interpolate-size: allow-keywords; }
html[data-motion='on'] :is(.faq, .qa details)::details-content { transition: height var(--dur-enter) var(--ease-standard), content-visibility var(--dur-enter) allow-discrete; height: 0; overflow: clip; }
html[data-motion='on'] :is(.faq, .qa details)[open]::details-content { height: auto; }

/* ---- Schools brochure --------------------------------------------------- */
.offer { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; letter-spacing: 0.01em; max-width: 30ch; margin: 0 auto; text-wrap: balance; }
.offer + .caption { margin-top: var(--space-4); }
.offer em { font-style: normal; color: var(--sf-accent); }
.equation { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
@media (min-width: 37.5em) and (max-width: 63.99em) { .equation { grid-template-columns: repeat(2, 1fr); } }
.equation__term { display: grid; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-card); background: var(--sf-card); box-shadow: inset 0 0 0 1px var(--sf-card-line); }
.equation__term .icon-chip { margin: 0 0 var(--space-2); }
.equation__term h3 { margin: 0; font-size: 1.125rem; }
.equation__term p { margin: 0; color: var(--sf-text-2); }
.equation__term small { color: var(--sf-accent); font-family: var(--font-display); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.75rem; }
/* Each question opens on its own: the grid aligns items to the top, so an
   open card never stretches its row neighbours (B1). */
.qa { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
/* seven questions: the last one takes the whole last row instead of sitting alone */
.qa > details:nth-child(7):last-child { grid-column: 1 / -1; }
.qa details { border-radius: 16px; background: var(--sf-card); box-shadow: inset 0 0 0 1px var(--sf-card-line); padding: 0 var(--space-4); transition: box-shadow var(--dur-fast) var(--ease-standard); }
.qa details:hover, .qa details[open] { box-shadow: inset 0 0 0 1px var(--sf-accent); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 2.75rem; padding: var(--space-3) 0; font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em; transition: color var(--dur-fast) var(--ease-standard); }
.qa summary:hover, .qa details[open] summary { color: var(--link); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+' / ''; flex: none; font-size: 1.25rem; line-height: 1; color: var(--sf-accent); transition: transform var(--dur-fast) var(--ease-standard); }
.qa details[open] summary::after { content: '\2212' / ''; }
.qa details > p { margin: 0 0 var(--space-4); color: var(--sf-text-2); }
.placeholder { border: 1.5px dashed var(--sf-accent); border-radius: 16px; padding: var(--space-4) var(--space-5); color: var(--sf-text-2); background: transparent; }
.placeholder strong { color: var(--sf-accent); font-family: var(--font-display); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.75rem; display: block; margin-bottom: var(--space-1); }
.visuals { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: start; }
/* Phones: a swipeable row instead of three stacked screens. */
@media (max-width: 37.49em) {
  .visuals { grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3); scrollbar-width: thin; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  html:not([data-js]) .visuals { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .visuals figure { scroll-snap-align: center; }
}
.visuals figure { margin: 0; display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
.visuals .device { width: min(100%, 14rem); }
.visuals figcaption { color: var(--sf-text-2); max-width: 18rem; }
.visuals figcaption strong { color: var(--text); display: block; font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em; }

/* The status quo at a glance (W5): a message thread with the gap in it.
   Real text, so it reads as a list; the figcaption carries the point. */
.thread { margin: 0; display: grid; gap: var(--space-3); }
.thread__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--sf-text-2); }
.thread__tag { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 var(--space-2); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--sf-accent); color: var(--sf-accent); font-family: var(--font-display); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.thread__list { list-style: none; margin: 0; padding: var(--space-4); display: grid; gap: var(--space-3); border-radius: var(--radius-card); background: var(--sf-card); box-shadow: inset 0 0 0 1px var(--sf-card-line); }
.thread__msg { margin: 0; display: grid; gap: 0.2rem; max-width: 80%; }
.thread__msg p { margin: 0; padding: var(--space-3) var(--space-4); border-radius: 18px; line-height: 1.4; }
/* ordinary messaging colours, not the brand's: a dark slate and a muted blue */
.thread__msg--them { justify-self: start; }
.thread__msg--them p { background: #3a3148; color: var(--text); border-bottom-left-radius: 6px; }
.thread__msg--me { justify-self: end; text-align: right; }
.thread__msg--me p { background: #2f4f86; color: var(--text); border-bottom-right-radius: 6px; }
.thread__who, .thread__time { font-size: 0.75rem; letter-spacing: 0.03em; color: var(--sf-text-2); padding-inline: var(--space-2); }
.thread__who { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; }
.thread__status { color: var(--text); font-weight: 500; }
.thread__status::before { content: '\00b7\00a0'; color: var(--sf-text-2); font-weight: 400; }
.thread figcaption { color: var(--sf-text-2); font-size: 0.9375rem; max-width: 26rem; }
.thread figcaption strong { color: var(--text); display: block; font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em; }
/* the last message waits a beat, then lands (motion on) */
html[data-motion='on'] .thread__msg:last-child { animation: thread-land 0.8s var(--ease-enter) 0.9s both; }
@keyframes thread-land { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Illustrations ------------------------------------------------------ */
.illo { width: 100%; height: auto; }
.illo--inline { max-width: 28rem; margin-inline: auto; }
.illo .ink { fill: var(--sf-bg); }
.illo .line { stroke: var(--sf-line); }
.illo .accent { fill: var(--sf-accent); }
.illo .accent-stroke { stroke: var(--sf-accent); }
.illo .soft { fill: var(--sf-card); }
.illo .text { fill: var(--text); font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em; }
.illo .text-2 { fill: var(--sf-text-2); font-family: var(--font-body); }
html[data-motion='on'] .illo .pulse { animation: pulse 2.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
html[data-motion='on'] .illo .drift { animation: drift 7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
html[data-motion='on'] .illo .draw { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 2.4s var(--ease-standard) forwards; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(0, -6px); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---- Team --------------------------------------------------------------- */
.person { display: grid; grid-template-columns: 4rem 1fr; gap: var(--space-4); align-items: center; }
.avatar { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.04em; color: var(--text); background: radial-gradient(circle at 30% 30%, var(--av-hi, #8560ff), var(--av-lo, #3b239d) 70%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18), 0 0 24px rgba(123, 99, 206, 0.35); }
/* Initials are text: both gradients stay dark enough for white at 4.5:1. */
.avatar--rose { --av-hi: #b0147a; --av-lo: #5a0a3c; }
.avatar--teal { --av-hi: #176a6e; --av-lo: #0b3537; }
.person h3 { margin: 0 0 var(--space-1); }
.person p { margin: 0; color: var(--sf-text-2); }
.story { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.story::before { content: ''; position: absolute; left: 0.9375rem; top: 0.75rem; bottom: 0.75rem; width: 2px; background: var(--sf-line); }
.story li { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-4); padding-bottom: var(--space-4); margin: 0; }
.story li:last-child { padding-bottom: 0; }
.story__dot { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--sf-bg); box-shadow: inset 0 0 0 2px var(--sf-accent); color: var(--sf-accent); font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; z-index: 1; }
.story h3 { font-size: 1.125rem; margin: 0.25rem 0 var(--space-1); }
.story p { margin: 0; color: var(--sf-text-2); }

/* ---- Legal documents (carried over verbatim; only styled) --------------- */
.legal { max-width: var(--reading); }
.legal .hero { padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); margin-bottom: var(--space-5); }
.legal .hero h1, .legal .hero h2 { margin-bottom: var(--space-2); font-size: clamp(2.125rem, 4.6vw, 3.75rem); line-height: 1.1; letter-spacing: 0; padding: 0; border: 0; }
.legal .hero + * { margin-top: 0; }
#eula { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.legal .subtitle { font-size: 1.125rem; color: var(--text-2); margin-bottom: var(--space-1); }
.legal .last-updated { color: var(--text-2); font-size: 0.9375rem; }
.legal .policy-intro { color: var(--text-2); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); margin-bottom: var(--space-6); }
.legal .policy-section { margin-bottom: var(--space-6); }
.legal .policy-section h2 { font-size: 1.5rem; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); margin-bottom: var(--space-4); }
.legal .section-num { color: var(--link); margin-right: var(--space-2); }
.legal h3 { font-size: 1.125rem; margin: var(--space-5) 0 var(--space-3); }
.legal p, .legal li { color: var(--text-2); font-size: 1rem; }
.legal strong { color: var(--text); }
.legal ul { padding-left: 1.25em; }
.legal .warning-box, .legal .important-box { padding: var(--space-4) var(--space-5); border-radius: 16px; background: var(--red-soft); box-shadow: inset 0 0 0 1px rgba(255, 64, 112, 0.35); margin: var(--space-4) 0 var(--space-5); }
.legal .warning-box p:last-child, .legal .important-box p:last-child { margin-bottom: 0; }
.legal .contact-block { padding: var(--space-4) var(--space-5); border-radius: 16px; background: var(--surface-tint); box-shadow: inset 0 0 0 1px var(--line-soft); }
.legal .contact-block p:last-child { margin-bottom: 0; }
.legal a { color: var(--link); }

/* ---- Notice ------------------------------------------------------------- */
.notice { padding: var(--space-4) var(--space-5); border-radius: 16px; background: var(--sf-card); box-shadow: inset 0 0 0 1px var(--sf-card-line); color: var(--sf-text-2); max-width: var(--reading); }
.notice p:last-child { margin-bottom: 0; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding: var(--space-7) 0 var(--space-6); margin-top: 0; }
.footer-grid { display: grid; gap: var(--space-6); }
.footer-nav { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.footer-brand svg { height: 2.25rem; width: auto; margin-bottom: var(--space-3); }
.footer-brand p { color: var(--sf-text-2); max-width: 26rem; margin-bottom: var(--space-3); }
.footer-brand .line-911 { color: var(--text); }
@media (min-width: 56em) {
  .footer-grid { grid-template-columns: 2fr 3fr; }
  .footer-nav { grid-template-columns: repeat(3, 1fr); }
}
.footer-col h2 { font-size: 1rem; font-weight: 500; margin-bottom: var(--space-3); color: var(--text); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 0; }
.footer-col a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--sf-text-2); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
.footer-col a:hover { color: var(--link); text-decoration: underline; }
.footer-legal { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--sf-line); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: space-between; align-items: center; color: var(--sf-text-2); font-size: 0.875rem; }
.footer-legal p { margin: 0; }
.footer-legal__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }

/* ---- Big CTA band ------------------------------------------------------- */
.band { position: relative; overflow: hidden; border-radius: var(--radius-card); padding: var(--space-6) var(--space-5); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-soft); text-align: center; }
.band::before { content: ''; position: absolute; inset: auto -20% -60% -20%; height: 120%; background: radial-gradient(50% 50% at 50% 100%, rgba(116, 33, 252, 0.45), rgba(116, 33, 252, 0)); pointer-events: none; }
.band > * { position: relative; }
.band h2 { margin-bottom: var(--space-3); }
.band p { color: #c4bad0; max-width: 34rem; margin-inline: auto; }
.band .cta-row { justify-content: center; margin-top: var(--space-5); }
.band .orb { margin-bottom: var(--space-4); }
.band .mascot { width: 5rem; height: auto; margin: 0 auto var(--space-4); }
@media (min-width: 48em) { .band { padding: var(--space-7) var(--space-7); } }

/* ---- 404 ---------------------------------------------------------------- */
.lost { text-align: center; padding-block: var(--space-8); }
.lost img, .lost svg { width: 7.5rem; height: auto; margin: 0 auto var(--space-5); }
.lost h1, .lost .lead { margin-inline: auto; }
.lost .cta-row { justify-content: center; }

/* ---- Utilities ---------------------------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--space-3); }
.mt-6 { margin-top: var(--space-6); }
.mb-6 { margin-bottom: var(--space-6); }
.center { text-align: center; }
.external::after { content: ' \2197'; font-size: 0.85em; }

/* ---- Motion ------------------------------------------------------------- */
/* Everything below runs only when data-motion="on" (set by js/motion-pref.js
   from prefers-reduced-motion and the visible toggle). With motion off the
   page is fully static and nothing is hidden. */
html[data-motion='on'] [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-enter) var(--ease-enter), transform var(--dur-enter) var(--ease-enter); }
html[data-motion='on'] [data-reveal='in'] { opacity: 1; transform: none; }
html[data-motion='on'] .hero__glow { animation: glow-drift 12s var(--ease-standard) infinite alternate; }
@keyframes glow-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(2%, 3%, 0) scale(1.04); } }
/* Motion off (system setting or the toggle): no transitions either, pseudo-
   elements included (chevrons, toggles, the index marker). */
html[data-motion='off'] *, html[data-motion='off'] *::before, html[data-motion='off'] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion='on']) *, html:not([data-motion='on']) *::before, html:not([data-motion='on']) *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .btn, .card, .step, .line-911, .tag, .faq-group, .equation__term, .carousel__btn, .timeline__dot, .num-badge, .thread__msg p, .row-toggle, .qa details { border: 1px solid CanvasText; }
  .icon { forced-color-adjust: auto; }
  /* selected and current states keep a shape when colours are forced */
  .nav-pill { border: 2px solid CanvasText; }
  .carousel__tab[aria-selected='true'] { border: 2px solid Highlight; text-decoration: underline; }
  .flow__switch label:has(input:checked) { border: 2px solid Highlight; }
  .faq-index a[aria-current='true'] { text-decoration: underline; font-weight: 600; }
  .motion-toggle[aria-pressed='true'] .motion-toggle__dot { background: Highlight; }
}
@media print {
  /* A committee packet: black on white, every surface flat, every
     disclosure open (site.js opens <details> on beforeprint), links spelled. */
  .site-header, .skip-link, .hero__glow, .carousel__controls, .motion-toggle, .orb, .timeline__marker, .device__island { display: none !important; }
  *, .surface, .card, .step, .band, .faq-group, .equation__term, .placeholder, .qa details, .line-911, .notice { background: #fff !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
  a[href^='mailto:']::after { content: ' (' attr(href) ')'; font-size: 0.9em; }
  .card, .step, .faq-group, .equation__term, .placeholder, .qa details, .line-911, .band, .thread__list { border: 1px solid #000; }
  .thread__msg p { border: 1px solid #000; }
  .num-badge { border: 1px solid #000; }
  .icon--ext { display: none; }
  a[target='_blank']::after { content: ' (' attr(href) ')'; font-size: 0.9em; word-break: break-all; }
  .icon { color: #000 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .carousel__slide[hidden] { display: grid !important; }
  .table-data tr.row-detail[hidden] { display: table-row !important; }
  .table-data .row-toggle { display: none !important; }
  .flow__panel { display: grid !important; }
  .flow__switch { display: none; }
  .logo, .footer-brand { color: #000; }
  .surface--sheet { margin-top: 0; border-radius: 0; }
  .section { padding-block: var(--space-6); }
  .cta-row .badge-appstore { display: none; }
}