/* ==========================================================================
   CBSE Class 10 Companion — marketing site
   --------------------------------------------------------------------------
   The palette is lifted from the app itself (student_app/lib/design/colors.dart
   and subject_accents.dart) rather than invented here. A landing page that
   introduces the app in one violet and then opens onto a different-coloured
   product is a broken promise, so the brand violet, the amber, and the eight
   subject hues are the same measured values the app ships.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Nunito:wght@700;800;900&display=swap');

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — AppColors.primaryLight and the amber the store artwork uses. */
  --violet: #7C3AED;
  --violet-hi: #A855F7;
  --violet-deep: #4C1D95;
  --violet-wash: #EDE4FF;
  --amber: #FBBF24;
  --amber-ink: #6B3608;

  /* Subject hues. Each accent clears 4.5:1 on white, so the same value is safe
     behind a glyph and as a label. */
  --hue-blue: #1D4ED8;      --hue-blue-wash: #DCE8FE;
  --hue-emerald: #047857;   --hue-emerald-wash: #D6F2E4;
  --hue-amber: #B45309;     --hue-amber-wash: #FBEBD0;
  --hue-rose: #BE185D;      --hue-rose-wash: #FCE1E6;
  --hue-violet: #7C3AED;    --hue-violet-wash: #EDE4FF;
  --hue-cyan: #0E7490;      --hue-cyan-wash: #D3EEF4;

  /* Neutrals, tinted toward the brand the way the app's are. */
  --canvas: #F6F5FB;
  --surface: #FFFFFF;
  --surface-sunken: #EFEDF7;
  --ink: #16151F;
  --ink-muted: #585570;
  --hairline: #E3E0EF;
  --outline: #C9C4DD;

  /* Type scale. Fluid, so nothing needs a breakpoint to stay in proportion. */
  --step-hero: clamp(2.35rem, 1.5rem + 4.2vw, 4.25rem);
  --step-h2:   clamp(1.85rem, 1.35rem + 2.2vw, 2.85rem);
  --step-h3:   clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  --step-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);

  /* Spacing. Standard density — this is a marketing page, not a dashboard. */
  --space-1: 0.5rem;  --space-2: 0.75rem; --space-3: 1rem;
  --space-4: 1.5rem;  --space-5: 2rem;    --space-6: 3rem;
  --space-7: 4rem;    --space-8: 6rem;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Soft double shadows — the clay look, kept short of toy-like. */
  --lift-1: 0 1px 2px rgba(22, 21, 31, .05), 0 6px 16px -8px rgba(76, 29, 149, .16);
  --lift-2: 0 2px 4px rgba(22, 21, 31, .05), 0 18px 40px -18px rgba(76, 29, 149, .30);
  --lift-3: 0 4px 8px rgba(22, 21, 31, .06), 0 40px 80px -32px rgba(76, 29, 149, .42);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  --measure: 68ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --shell: 1180px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchors land below the sticky header rather than under it. */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--violet); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--violet-deep); }

/* `height: auto` is load-bearing, not boilerplate. Every <img> here carries its
   intrinsic width/height attributes so the browser can reserve space and avoid
   a layout shift — but those attributes are applied as a presentational
   `height`, which outranks a CSS `aspect-ratio` and leaves the image at its
   full intrinsic height. Without this, the screenshot frames render 1217px tall
   inside a 216px-wide box and `object-fit: cover` zooms into a corner. */
img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding-left: 1.25rem; }

/* A focus ring that is always visible against both the canvas and the violet
   surfaces — a single-colour ring disappears on one or the other. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-violet :where(a, button, summary):focus-visible { outline-color: #FFFFFF; }

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100%;
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  background: var(--violet);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: var(--space-3); color: #fff; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* 48px floor, the same one the app's controls use. */
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: 999px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out),
              background-color .18s var(--ease-soft), color .18s var(--ease-soft);
}
.btn:active { transform: translateY(1px) scale(.985); }

.btn--primary {
  background: linear-gradient(135deg, var(--violet-hi), var(--violet) 55%, #6D28D9);
  color: #fff;
  box-shadow: var(--lift-2);
}
.btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--lift-3); }

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--outline);
  box-shadow: var(--lift-1);
}
.btn--ghost:hover { color: var(--ink); border-color: var(--violet); transform: translateY(-2px); }

.btn--onviolet {
  background: #fff;
  color: var(--violet-deep);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .55);
}
.btn--onviolet:hover { color: var(--violet-deep); transform: translateY(-2px); }

.btn svg { width: 22px; height: 22px; flex: none; }

/* --------------------------------------------------------------------------
   Store badges
   -------------------------------------------------------------------------- */
.stores { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: 0 var(--space-4) 0 var(--space-3);
  border-radius: 14px;
  background: #16151F;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--lift-2);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.store-badge:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--lift-3); }
.store-badge svg { width: 26px; height: 26px; flex: none; }
.store-badge__lines { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-badge__kicker { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .78; }
.store-badge__name { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1.05rem; }

/* Not a link: the listing does not exist yet, and a badge that navigates
   nowhere is worse than one that says so. */
.store-badge--soon {
  background: var(--surface);
  color: var(--ink-muted);
  border: 2px dashed var(--outline);
  box-shadow: none;
  cursor: default;
}
.store-badge--soon .store-badge__name { color: var(--ink); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 245, 251, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease-soft), box-shadow .25s var(--ease-soft);
}
.site-header.is-stuck {
  border-bottom-color: var(--hairline);
  box-shadow: 0 8px 24px -20px rgba(76, 29, 149, .6);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.brand img { width: 38px; height: 38px; border-radius: 10px; box-shadow: var(--lift-1); }
.brand__name { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.05rem; letter-spacing: -0.02em; }
.brand__sub { display: block; font-size: .7rem; font-weight: 500; color: var(--ink-muted); letter-spacing: .02em; }

.site-nav { display: flex; align-items: center; gap: var(--space-1); }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: 999px;
  color: var(--ink-muted);
  font-weight: 500;
  text-decoration: none;
  transition: background-color .18s var(--ease-soft), color .18s var(--ease-soft);
}
.site-nav a:hover { background: var(--violet-wash); color: var(--violet-deep); }
.site-nav a[aria-current='page'] { color: var(--violet-deep); background: var(--violet-wash); font-weight: 700; }

.header-cta { flex: none; }

@media (max-width: 860px) {
  .site-nav { display: none; }
}

/* The publisher line is the first thing to go on a narrow header — it is
   repeated in the footer, and keeping it here wraps the brand onto three lines
   and doubles the header's height. */
@media (max-width: 560px) {
  .brand__sub { display: none; }
  .brand__name { font-size: .95rem; line-height: 1.2; }
  .brand img { width: 34px; height: 34px; }
  .site-header__inner { gap: var(--space-2); min-height: 64px; }
  .header-cta { padding: 0 var(--space-3); font-size: .92rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 8vw, 6rem);
  overflow: hidden;
}

/* Three soft colour fields instead of one flat tint. Decorative only, so it is
   hidden from assistive tech and costs nothing but paint. */
.hero__glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  pointer-events: none;
  background:
    radial-gradient(42rem 30rem at 12% 8%, rgba(168, 85, 247, .26), transparent 62%),
    radial-gradient(34rem 26rem at 88% 4%, rgba(251, 191, 36, .22), transparent 60%),
    radial-gradient(38rem 28rem at 62% 58%, rgba(29, 78, 216, .14), transparent 62%);
  filter: blur(6px);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .4rem .85rem .4rem .5rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift-1);
  font-size: .82rem;
  font-weight: 700;
  color: var(--violet-deep);
  letter-spacing: -0.01em;
}
.eyebrow__dot {
  width: 1.55rem; height: 1.55rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-hi), var(--violet));
  color: #fff;
}
.eyebrow__dot svg { width: 14px; height: 14px; }

.hero h1 {
  font-size: var(--step-hero);
  font-weight: 900;
  margin-top: var(--space-4);
}
.hero h1 .accent {
  background: linear-gradient(120deg, var(--violet-hi), var(--violet) 40%, var(--hue-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The gradient text needs a fallback: if background-clip:text is unsupported
   the word would otherwise render transparent on transparent. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 .accent { color: var(--violet); }
}

.hero__lead {
  margin-top: var(--space-4);
  font-size: var(--step-lead);
  color: var(--ink-muted);
  max-width: 34rem;
}

.hero__actions { margin-top: var(--space-5); }

.hero__note {
  margin-top: var(--space-3);
  font-size: .85rem;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.hero__note svg { width: 16px; height: 16px; color: var(--hue-emerald); flex: none; }

/* --- The phone --- */
.device {
  position: relative;
  width: min(300px, 78vw);
  margin-inline: auto;
  aspect-ratio: 560 / 1217;
  border-radius: 40px;
  padding: 10px;
  background: linear-gradient(160deg, #2A2540, #16151F 45%, #35304F);
  box-shadow: var(--lift-3), 0 0 0 1px rgba(255, 255, 255, .08) inset;
}
.device__screen {
  width: 100%; height: 100%;
  border-radius: 31px;
  overflow: hidden;
  background: var(--canvas);
}
.device__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.device::after {
  /* Dynamic-island cue, so the frame reads as a phone at a glance. */
  content: '';
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  width: 32%; height: 20px;
  border-radius: 999px;
  background: #16151F;
}

.device-stack { position: relative; }

/* Two floating cards that say what the screenshot is showing. */
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--lift-2);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.float-card small { display: block; font-weight: 500; font-size: .72rem; color: var(--ink-muted); }
.float-card__icon {
  width: 2rem; height: 2rem; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
}
.float-card__icon svg { width: 16px; height: 16px; }
.float-card--a { top: 12%; left: -8%; animation: bob 6s var(--ease-soft) infinite; }
.float-card--b { bottom: 14%; right: -6%; animation: bob 6s var(--ease-soft) .8s infinite; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__lead { margin-inline: auto; }
  .hero .eyebrow, .hero .stores, .hero__note { justify-content: center; }
  .hero .stores { justify-content: center; }
  .hero__note { justify-content: center; }
  .float-card--a { left: -2%; }
  .float-card--b { right: -2%; }
}
@media (max-width: 460px) {
  /* Below this the cards overlap the screen content they are pointing at. */
  .float-card { display: none; }
}

/* --------------------------------------------------------------------------
   Stat band
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-1);
}
.stat { text-align: center; }
.stat__value {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat:nth-child(1) .stat__value { color: var(--hue-blue); }
.stat:nth-child(2) .stat__value { color: var(--hue-emerald); }
.stat:nth-child(3) .stat__value { color: var(--hue-rose); }
.stat:nth-child(4) .stat__value { color: var(--violet); }
.stat__label { margin-top: .35rem; font-size: .85rem; color: var(--ink-muted); }

@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section--sunken { background: var(--surface-sunken); }

.section__head { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__kicker {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--violet);
}
.section__head h2 { font-size: var(--step-h2); font-weight: 900; margin-top: var(--space-2); }
.section__head p { margin-top: var(--space-3); font-size: var(--step-lead); color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Feature cards
   -------------------------------------------------------------------------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: var(--space-4);
}

.feature {
  position: relative;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-1);
  overflow: hidden;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out),
              border-color .25s var(--ease-soft);
}
.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--lift-2);
  border-color: color-mix(in srgb, var(--tint) 35%, var(--hairline));
}
/* A hue-tinted bloom in the corner, so six cards do not read as six identical
   white rectangles. */
.feature::before {
  content: '';
  position: absolute;
  top: -40%; right: -30%;
  width: 16rem; height: 16rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tint) 18%, transparent), transparent 70%);
  pointer-events: none;
}
.feature__icon {
  position: relative;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--tint-wash);
  color: var(--tint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 16%, transparent);
}
.feature__icon svg { width: 24px; height: 24px; }
.feature h3 { position: relative; margin-top: var(--space-4); font-size: var(--step-h3); }
.feature p { position: relative; margin-top: var(--space-2); color: var(--ink-muted); font-size: .96rem; }

/* Fallback for browsers without color-mix(): the bloom and the ring just
   disappear, which is a smaller loss than a card with no border at all. */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .feature::before { display: none; }
  .feature__icon { box-shadow: none; }
  .feature:hover { border-color: var(--outline); }
}

/* --------------------------------------------------------------------------
   Screens
   -------------------------------------------------------------------------- */
.screens {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding-block: var(--space-2) var(--space-5);
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--outline) transparent;
  -webkit-overflow-scrolling: touch;
}
.screens:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; border-radius: var(--radius); }
.screens::-webkit-scrollbar { height: 8px; }
.screens::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 999px; }
.screens::-webkit-scrollbar-track { background: transparent; }

.screen {
  flex: 0 0 auto;
  width: 230px;
  scroll-snap-align: center;
}
.screen__frame {
  border-radius: 26px;
  padding: 7px;
  background: linear-gradient(160deg, #2A2540, #16151F 45%, #35304F);
  box-shadow: var(--lift-2);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.screen:hover .screen__frame { transform: translateY(-5px); box-shadow: var(--lift-3); }
.screen__frame img {
  border-radius: 20px;
  aspect-ratio: 560 / 1217;
  object-fit: cover;
  object-position: top;
  width: 100%;
  background: var(--canvas);
}
.screen__caption { margin-top: var(--space-3); }
.screen__caption strong { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1rem; }
.screen__caption span { display: block; margin-top: .15rem; font-size: .85rem; color: var(--ink-muted); }

.screens-hint {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--ink-muted);
}
.screens-hint svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Split (progress) section
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split--flip .split__media { order: -1; }

.checklist { list-style: none; padding: 0; margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; }
.checklist__tick {
  flex: none;
  width: 1.65rem; height: 1.65rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--hue-emerald-wash);
  color: var(--hue-emerald);
  margin-top: .1rem;
}
.checklist__tick svg { width: 14px; height: 14px; }
.checklist strong { font-family: 'Nunito', sans-serif; font-weight: 800; }
.checklist p { color: var(--ink-muted); font-size: .94rem; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
}

/* --------------------------------------------------------------------------
   Trust band
   -------------------------------------------------------------------------- */
.trust {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--violet-deep), #5B21B6 45%, var(--violet));
  color: #fff;
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.trust::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(28rem 20rem at 85% 12%, rgba(251, 191, 36, .28), transparent 60%),
    radial-gradient(26rem 18rem at 8% 90%, rgba(168, 85, 247, .38), transparent 62%);
  pointer-events: none;
}
.trust > * { position: relative; }
.trust h2 { font-size: var(--step-h2); font-weight: 900; }
.trust .section__kicker { color: var(--amber); }
.trust__lead { margin-top: var(--space-3); font-size: var(--step-lead); color: rgba(255, 255, 255, .84); max-width: 44rem; }

/* Explicitly two columns rather than auto-fit. There are four items, and
   auto-fit resolves to three at this width — which leaves the fourth stranded
   on a row of its own. Two-by-two stays balanced at every width that fits it. */
.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (max-width: 620px) {
  .trust__grid { grid-template-columns: 1fr; }
}
.trust__item {
  padding: var(--space-4);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
}
.trust__item h3 { font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.trust__item h3 svg { width: 20px; height: 20px; color: var(--amber); flex: none; }
.trust__item p { margin-top: var(--space-2); font-size: .92rem; color: rgba(255, 255, 255, .82); }

.trust__actions { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.trust__actions .btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}
.trust__actions .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 48rem; margin-inline: auto; display: grid; gap: var(--space-3); }

.faq details {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--lift-1);
  overflow: hidden;
  transition: border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}
.faq details[open] { border-color: var(--outline); box-shadow: var(--lift-2); }
.faq summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  min-height: 56px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--violet-deep); }
.faq summary::after {
  content: '';
  margin-left: auto;
  flex: none;
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--violet);
  border-bottom: 2.5px solid var(--violet);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__body { padding: 0 var(--space-4) var(--space-4); color: var(--ink-muted); }
.faq__body p + p { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */
.cta-final { text-align: center; }
.cta-final__icon {
  width: 88px; height: 88px;
  margin-inline: auto;
  border-radius: 22px;
  box-shadow: var(--lift-3);
}
.cta-final h2 { font-size: var(--step-h2); font-weight: 900; margin-top: var(--space-4); }
.cta-final p { margin: var(--space-3) auto 0; max-width: 34rem; font-size: var(--step-lead); color: var(--ink-muted); }
.cta-final .stores { justify-content: center; margin-top: var(--space-5); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .72);
  padding-block: var(--space-7) var(--space-5);
  font-size: .92rem;
}
.site-footer a { color: rgba(255, 255, 255, .84); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.footer__brand { display: flex; align-items: center; gap: var(--space-2); }
.footer__brand img { width: 40px; height: 40px; border-radius: 11px; }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__sub { color: rgba(255, 255, 255, .6); }
.footer__blurb { margin-top: var(--space-3); max-width: 26rem; color: rgba(255, 255, 255, .62); }

.footer__col h3 {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  font-weight: 800;
}
.footer__col ul { list-style: none; padding: 0; margin-top: var(--space-3); display: grid; gap: .6rem; }
.footer__col a { display: inline-flex; align-items: center; min-height: 32px; }

.footer__base {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  color: rgba(255, 255, 255, .55);
}

@media (max-width: 860px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand-col { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */
.legal-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  background: linear-gradient(135deg, var(--violet-deep), #5B21B6 60%, var(--violet));
  color: #fff;
}
.legal-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(30rem 20rem at 88% 10%, rgba(251, 191, 36, .26), transparent 62%);
  pointer-events: none;
}
.legal-hero > * { position: relative; }
.legal-hero h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); font-weight: 900; margin-top: var(--space-3); }
.legal-hero__lead { margin-top: var(--space-3); font-size: var(--step-lead); color: rgba(255, 255, 255, .84); max-width: var(--measure); }
.legal-hero .section__kicker { color: var(--amber); }

.legal-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-5);
}
.legal-meta__chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: .85rem;
  font-weight: 500;
}
.legal-meta__chip svg { width: 15px; height: 15px; color: var(--amber); flex: none; }

.legal-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

.toc { position: sticky; top: 6rem; }
.toc h2 {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 800;
}
.toc ol { list-style: none; padding: 0; margin-top: var(--space-3); display: grid; gap: .15rem; counter-reset: toc; }
.toc a {
  display: flex; gap: .6rem;
  padding: .5rem .7rem;
  min-height: 40px;
  align-items: center;
  border-radius: 9px;
  color: var(--ink-muted);
  font-size: .9rem;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color .18s var(--ease-soft), color .18s var(--ease-soft), border-color .18s var(--ease-soft);
}
.toc a::before {
  counter-increment: toc;
  content: counter(toc);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--outline);
  flex: none;
}
.toc a:hover { background: var(--violet-wash); color: var(--violet-deep); }
.toc a.is-active {
  background: var(--violet-wash);
  color: var(--violet-deep);
  border-left-color: var(--violet);
  font-weight: 700;
}
.toc a.is-active::before { color: var(--violet); }

/* Email addresses and identifiers are long single words. Without this they
   set the minimum width of the column and push the page into sideways scroll
   on a narrow phone. */
.prose, .contact-card, .faq__body { overflow-wrap: break-word; }

.prose { max-width: var(--measure); min-width: 0; }
.prose > section { scroll-margin-top: 6rem; }
.prose > section + section { margin-top: var(--space-6); }
.prose h2 {
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
  font-weight: 900;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--hairline);
}
.prose h3 { font-size: 1.1rem; margin-top: var(--space-5); }
.prose p { margin-top: var(--space-3); color: #2C2A3C; }
.prose ul, .prose ol { margin-top: var(--space-3); display: grid; gap: .5rem; color: #2C2A3C; }
.prose li::marker { color: var(--violet); }
.prose strong { font-weight: 700; color: var(--ink); }

/* Identifiers like the application ID have no space to break at, so they must
   be told they may break anywhere or they set the width of whatever holds them. */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  padding: .12em .35em;
  border-radius: 5px;
  background: var(--violet-wash);
  color: var(--violet-deep);
  overflow-wrap: anywhere;
}

/* A short, plain-language restatement above the legal text. Students and
   parents read this; the clause below it is what binds. */
.callout {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--tint-wash, var(--violet-wash));
  border: 1px solid color-mix(in srgb, var(--tint, var(--violet)) 22%, transparent);
  display: flex;
  gap: var(--space-3);
}
.callout__icon {
  flex: none;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--surface);
  color: var(--tint, var(--violet));
  box-shadow: var(--lift-1);
}
.callout__icon svg { width: 17px; height: 17px; }
.callout p { margin-top: 0; font-size: .94rem; }
.callout strong { display: block; font-family: 'Nunito', sans-serif; margin-bottom: .2rem; }

.data-table-wrap { margin-top: var(--space-4); overflow-x: auto; }
.data-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .92rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.data-table th, .data-table td {
  padding: var(--space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}
.data-table thead th {
  background: var(--violet-wash);
  color: var(--violet-deep);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; }
.data-table td { color: var(--ink-muted); }

/* On a phone the table stops being a table and becomes a stack of term-and-
   definition blocks. A two-column table at 390px can only be read by dragging
   it sideways, and a privacy policy is exactly the document nobody will drag —
   they will skip the row instead. The column headings say "What" and "Why it
   exists", which the stacked shape already makes obvious, so they are dropped
   rather than repeated into every row. */
@media (max-width: 640px) {
  .data-table, .data-table thead, .data-table tbody,
  .data-table tr, .data-table th, .data-table td { display: block; }
  .data-table { min-width: 0; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .data-table tbody tr {
    border-bottom: 1px solid var(--hairline);
    padding: var(--space-3);
  }
  .data-table tbody tr:last-child { border-bottom: 0; }
  .data-table tbody th {
    white-space: normal;
    padding: 0 0 .25rem;
    border-bottom: 0;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1rem;
  }
  .data-table tbody td { padding: 0; border-bottom: 0; }
}

.contact-card {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift-1);
}
.contact-card dl {
  margin: 0;
  display: grid;
  /* minmax(0, 1fr) again: the application ID in the definition list is one
     unbreakable token, and a bare 1fr sizes the column to it. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: .6rem var(--space-4);
}
.contact-card dt { font-weight: 700; color: var(--ink-muted); font-size: .88rem; }
.contact-card dd { margin: 0; min-width: 0; }

@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr. A bare `1fr` is `minmax(auto, 1fr)`, whose
     automatic minimum is the content's own min-content width — and the data
     tables carry `min-width: 34rem` so the column stops shrinking at 560px and
     drags the whole page into horizontal scroll. Flooring the minimum at 0 lets
     the column narrow and leaves the scrolling to .data-table-wrap, which is
     where it belongs. */
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .toc {
    position: static;
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--lift-1);
  }
  .toc ol { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
/* Staggered children, e.g. the feature grid. */
.reveal[data-delay='1'] { transition-delay: .06s; }
.reveal[data-delay='2'] { transition-delay: .12s; }
.reveal[data-delay='3'] { transition-delay: .18s; }
.reveal[data-delay='4'] { transition-delay: .24s; }
.reveal[data-delay='5'] { transition-delay: .30s; }

/* Nothing here conveys meaning, so all of it goes. The reveal must resolve to
   its final state rather than staying at opacity 0, or the page is blank. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .toc, .skip-link, .legal-meta { display: none; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-hero { background: none; color: #000; }
  body { background: #fff; }
}