/* =====================================================================
   THEME VARIABLES
   Change a value here and it updates everywhere that variable is used.
   ===================================================================== */
:root {
  --bg: #050505;                 /* page background color (near-black) */
  --surface: #0e0e0e;            /* alternate dark surface color (currently unused directly, kept for future cards/panels) */
  --text: #f5f4f0;               /* main text color (off-white) */
  --text-muted: #8a8a85;         /* secondary/dimmer text color (subheads, captions, footer) */
  --line: rgba(245, 244, 240, 0.12); /* faint divider/border color used for hairlines */
  --accent: #fb4a4a;             /* brand accent color — buttons, highlighted words, eyebrow text, CTA band background */
  --accent-ink: #0a0a0a;         /* text/icon color to use ON TOP of the accent color (dark, for contrast) */
  --radius-sm: 10px;             /* small corner rounding (icons, small chips) */
  --radius-md: 18px;             /* medium corner rounding (cards, QR box) */
  --radius-lg: 24px;             /* large corner rounding (hero visual card) */
  --radius-pill: 999px;          /* fully-rounded corner radius for pill buttons/badges */
  --container: 1160px;           /* max width of the centered page content */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; /* headline/display font (logo, headline, step titles, CTA heading) */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;  /* body/paragraph/button font */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);         /* page background color, see --bg above */
  color: var(--text);            /* default text color, see --text above */
  font-family: var(--font-body); /* default body font, see --font-body above */
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;              /* default line spacing for body text — raise for airier paragraphs */
}

.container {
  max-width: var(--container);   /* page content width cap, see --container above */
  margin: 0 auto;                /* centers the container horizontally */
  padding: 0 16px;               /* left/right breathing room on narrow screens */
}

a {
  color: inherit;
}

/* ---- Nav (top bar: logo + "Get the app" CTA button) ---- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 16px;            /* nav bar spacing: 24px top/bottom, 16px left/right */
  border-bottom: 1px solid var(--line); /* hairline separating nav from hero, color from --line */
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;                     /* spacing between logo icon and logo text */
  font-family: var(--font-display); /* logo text font, see --font-display above */
  font-weight: 800;
  font-size: 20px;                /* logo text size */
  letter-spacing: -0.01em;
}

.nav-logo-icon {
  width: 28px;                    /* logo icon size (width) */
  height: 28px;                   /* logo icon size (height) */
  border-radius: 8px;             /* logo icon corner rounding */
  display: block;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;                       /* spacing between CTA icon (if any) and label */
  background: var(--accent);      /* CTA button background color, see --accent above */
  color: var(--accent-ink);       /* CTA button text color, see --accent-ink above */
  font-size: 14px;                /* CTA button label size */
  font-weight: 700;
  text-decoration: none;
  padding: 10px 18px;             /* CTA button padding: top/bottom, left/right — grow this to make the button bigger */
  border: none;
  border-radius: var(--radius-pill); /* CTA button shape (pill), see --radius-pill above */
  white-space: nowrap;
}

.nav-cta:hover {
  opacity: 0.9;                   /* hover dimming amount — lower = more fade on hover */
}

/* ---- Hero (headline + reveal-card visual) ---- */
.hero {
  padding: 64px 16px 88px;        /* hero section spacing: 64px top, 16px sides, 88px bottom */
}

.hero-inner {
  max-width: var(--container);    /* hero content width cap, see --container above */
  margin: 0 auto;                 /* centers hero content horizontally */
  display: grid;
  grid-template-columns: 1.15fr 0.85fr; /* column split: copy vs. visual — adjust ratio to shift balance */
  gap: 56px;                      /* spacing between hero copy and hero visual */
  align-items: center;
}

.eyebrow {
  font-size: 16px;                /* small label above headline — size */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);           /* eyebrow text color, see --accent above */
  margin: 0 0 20px;                /* space below eyebrow, before headline */
}

.headline {
  font-family: var(--font-display); /* headline font, see --font-display above */
  font-weight: 800;
  font-size: clamp(1.95rem, 4.6vw, 3.4rem); /* headline size: min 2.3rem, scales with viewport, caps at 4rem — tune these three values to resize */
  line-height: 0.98;              /* headline line spacing — tight by design; raise slightly if lines feel cramped */
  letter-spacing: -0.03em;
  margin: 0 0 14px;                 /* space below headline, before sub-copy */
}

.headline .accent {
  color: var(--accent);           /* highlighted word(s) inside headline, see --accent above */
}

.hero-sub {
  font-size: 18px;                /* hero sub-copy text size */
  color: var(--text-muted);       /* hero sub-copy color, see --text-muted above */
  max-width: 440px;                /* wraps sub-copy to this width so lines don't run too long */
  margin: 0 0 20px;                 /* space below sub-copy, before action buttons */
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;                      /* spacing between the primary button and the secondary link */
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;                       /* spacing between icon and label inside the button */
  background: var(--accent);      /* primary button background color, see --accent above */
  color: var(--accent-ink);       /* primary button text color, see --accent-ink above */
  font-weight: 700;
  font-size: 16px;                /* primary button label size */
  border-radius: var(--radius-pill); /* primary button shape (pill), see --radius-pill above */
  padding: 15px 28px;             /* primary button padding: top/bottom, left/right — grow this to make the button bigger */
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-primary.on-light {
  /* Inverted color variant for use on light/accent-colored backgrounds (e.g. the CTA band) */
  background: var(--accent-ink);  /* button background when placed on a light/accent surface */
  color: var(--accent);           /* button text color when placed on a light/accent surface */
}

.btn-link {
  font-size: 15px;                /* secondary text-link size */
  font-weight: 600;
  color: var(--text-muted);       /* secondary text-link color, see --text-muted above */
  text-decoration: none;
  border-bottom: 1px solid var(--line); /* underline color, see --line above */
  padding-bottom: 2px;            /* gap between link text and its underline */
}

.btn-link:hover {
  color: var(--text);             /* link color on hover, see --text above */
  border-color: var(--text);      /* underline color on hover, see --text above */
}

/* ---- Hero visual: blurred photo / scratch-to-reveal mock ---- */
.reveal-card {
  position: relative;
  width: 100%;
  max-width: min(320px, 82vw);    /* reveal-card size cap — raise 320px to make the card bigger on desktop */
  margin: 0 auto;                  /* centers the card within its column */
  aspect-ratio: 4 / 5;             /* card shape (width:height) — change to reshape the card */
  border-radius: var(--radius-lg); /* card corner rounding, see --radius-lg above */
  overflow: hidden;
  background: #111;                /* fallback background behind the photo while it loads */
  user-select: none;
  -webkit-user-select: none;
}

.reveal-photo {
  position: absolute;
  inset: 0;
  background-image: url("/image/students-image.jpeg");
  background-size: cover;
  background-position: center;
}

/* Static no-JS fallback: a plausible "partially scratched" look via CSS
   alone. Hidden by reveal.js once the interactive canvas takes over. */
.reveal-cover {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.55); /* cover tint color/opacity — the dark overlay over the photo */
  backdrop-filter: blur(22px) saturate(1.3); /* blur strength of the "scratch cover" effect — raise/lower 22px to blur more/less */
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 38% 100%, 24% 68%, 0 60%); /* shape of the pre-scratched notch — edit points to change the notch shape */
}

.reveal-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none; /* shown by reveal.js once it initializes */
  touch-action: none;
  cursor: crosshair;
}

.reveal-badge {
  position: absolute;
  top: 20px;                      /* badge distance from top of card */
  right: 20px;                    /* badge distance from right of card */
  width: 40px;                    /* badge circle size (width) */
  height: 40px;                   /* badge circle size (height) */
  border-radius: 50%;             /* keeps the badge circular — leave at 50% */
  border: 1px solid rgba(245, 244, 240, 0.35); /* badge outline color/opacity */
  background: rgba(245, 244, 240, 0.08);       /* badge fill color/opacity */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display); /* badge glyph/text font, see --font-display above */
  font-weight: 800;
  font-size: 18px;                 /* badge glyph/text size */
  pointer-events: none;
  z-index: 2;
}

/* First-time "scratch here" hint: the bare hand-cursor icon (no card/badge
   behind it) that reveal.js drives frame-by-frame — it drags a short
   stroke across the card and *actually* scratches the mask along the way,
   then fades, resets, and loops. Shown until the visitor's first real
   scratch, then it's dismissed for the session. */
.reveal-hint {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0; /* reveal.js fades this in once it starts driving position */
}

.reveal-hint.is-hidden {
  opacity: 0 !important;
  transition: opacity 0.35s ease; /* fade-out speed once the user starts scratching */
}

.reveal-hint-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;                     /* hand cursor icon size */
  height: 30px;
  pointer-events: none;
  filter: brightness(0) invert(1) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
  /* Position set by reveal.js: translate(-50%, -50%) anchors the icon on
     its point; rotate(...) is fixed (see reveal.js) so it's already
     tilted before it ever appears — no visible mid-animation snap;
     scale(...) is the live "press/lift" gesture feedback. */
  transform-origin: 50% 50%;
}

/* ---- Steps (3-up "how it works" row) ---- */
.steps {
  padding: 0 16px;                 /* left/right spacing for the steps section */
  border-top: 1px solid var(--line);    /* hairline above the steps row, color from --line */
  border-bottom: 1px solid var(--line); /* hairline below the steps row, color from --line */
}

.steps-grid {
  max-width: var(--container);     /* steps row width cap, see --container above */
  margin: 0 auto;                   /* centers the steps row horizontally */
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns, one per step — change the "3" to add/remove columns */
}

.step {
  padding: 20px 28px;               /* per-step spacing: top/bottom, left/right (also the gutter between steps) */
  border-right: 1px solid var(--line); /* vertical divider between steps, color from --line */
}

/* Keep the outer edges flush with the hero/CTA text above and below,
   instead of adding the column gutter on the outside too. */
.step:first-child {
  padding-left: 0;
}

.step:last-child {
  padding-right: 0;
  border-right: none;
}

/* Number + title sit on one line ("1 Post") instead of the number
   stacked above as its own line. */
.step-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;                        /* space between the number and the title on the same line */
  margin-bottom: 6px;                /* space below the heading row, before step body text */
}

.step-number {
  font-family: var(--font-display); /* step number font, see --font-display above */
  font-weight: 800;
  font-size: 32px;                  /* step number size */
  color: var(--text);               /* step number color — white, see --text above */
  letter-spacing: 0.05em;
}

.step-title {
  font-family: var(--font-display); /* step title font, see --font-display above */
  font-weight: 800;
  font-size: 28px;                  /* step title size */
  margin: 0;
  letter-spacing: -0.01em;
}

.step-body {
  font-size: 17px;                  /* step description text size */
  line-height: 1.55;                /* step description line spacing */
  color: var(--text-muted);         /* step description color, see --text-muted above */
  margin: 0;
  max-width: 32ch;                   /* wraps step description to this width so lines don't run too long */
}

/* ---- Download / CTA band (bottom accent-colored strip with QR code) ---- */
.cta-band {
  background: var(--accent);        /* CTA band background color, see --accent above */
  color: var(--accent-ink);         /* CTA band default text color, see --accent-ink above */
  padding: 0 16px;                   /* left/right spacing for the CTA band */
}

.cta-inner {
  max-width: var(--container);      /* CTA band content width cap, see --container above */
  margin: 0 auto;                    /* centers CTA content horizontally */
  padding: 48px 0;                   /* CTA band spacing: top/bottom */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;                         /* spacing between the CTA copy and the QR card */
  flex-wrap: wrap;
}

.cta-copy h2 {
  font-family: var(--font-display); /* CTA heading font, see --font-display above */
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem); /* CTA heading size: min 2rem, scales with viewport, caps at 3rem — tune these three values to resize */
  letter-spacing: -0.02em;
  margin: 0 0 12px;                    /* space below CTA heading, before CTA paragraph */
}

.cta-copy p {
  font-size: 17px;                   /* CTA paragraph text size */
  margin: 0 0 28px;                    /* space below CTA paragraph, before the button/scan link */
  color: rgba(10, 10, 10, 0.72);     /* CTA paragraph color/opacity (dark text on the accent band) */
  max-width: 40ch;                    /* wraps CTA paragraph to this width so lines don't run too long */
}

.qr-card {
  background: var(--accent-ink);    /* QR card background color, see --accent-ink above */
  border-radius: var(--radius-md);  /* QR card corner rounding, see --radius-md above */
  padding: 16px;                     /* QR card inner spacing */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;                         /* spacing between QR image and its caption */
  flex-shrink: 0;
}

.qr-card img {
  display: block;
  width: 132px;                      /* QR code image size (width) */
  height: 132px;                     /* QR code image size (height) */
  border-radius: 6px;                /* QR code image corner rounding */
  background: #fff;
}

.qr-card span {
  font-size: 12px;                   /* QR card caption size */
  font-weight: 700;
  color: var(--accent);              /* QR card caption color, see --accent above */
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---- Footer ---- */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 16px;                 /* footer spacing: top/bottom, left/right */
  font-size: 13px;                    /* footer text size */
  background: var(--accent);          /* footer background color, see --accent above (matches CTA band) */
  color: var(--accent-ink);           /* footer text color, see --accent-ink above (dark, for contrast on red) */
}

/* =====================================================================
   RESPONSIVE OVERRIDES
   These blocks only kick in below the given screen width and just
   override the spacing/size/color values set above for smaller screens.
   ===================================================================== */

/* ---- Tablet/narrow desktop (≤860px): hero and steps stack to 1 column ---- */
@media (max-width: 860px) {
  .hero-inner {
    grid-template-columns: 1fr;       /* hero copy and visual stack instead of sitting side by side */
    gap: 32px;                        /* spacing between stacked hero copy and visual */
  }

  .steps-grid {
    grid-template-columns: 1fr;       /* steps stack into a single column instead of 3-up */
  }

  .step {
    border-right: none;
    border-bottom: 1px solid var(--line); /* horizontal divider between stacked steps, color from --line */
    padding: 16px 0;                       /* per-step spacing when stacked: top/bottom */
  }

  .step:last-child {
    border-bottom: none;
  }

  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  /* Copy stays left-aligned when stacked, but the QR card reads better
     centered under it rather than pinned to the same left edge. */
  .qr-card {
    align-self: center;
  }
}

/* True tablets only (641–860px, e.g. iPad portrait). The block above just
   stacks the hero to one column — without this, the card, headline and
   spacing all stay at the same values used for narrow phones, so the page
   reads as a shrunken phone layout floating in a much taller/wider canvas
   (lots of dead space below the fold) instead of something designed for
   the extra room a tablet has. Scale the same elements up proportionally. */
@media (min-width: 641px) and (max-width: 860px) {
  .hero {
    padding: 88px 32px 108px;          /* more generous hero padding to match the extra room */
  }

  .hero-inner {
    gap: 48px;                          /* more breathing room between stacked copy and card */
  }

  .headline {
    font-size: clamp(2.6rem, 6.2vw, 3.4rem); /* scale with tablet width instead of settling near the low end of the desktop clamp */
  }

  .hero-sub {
    font-size: 20px;                    /* larger sub-copy to match the bigger headline */
    max-width: 520px;
  }

  .reveal-card {
    max-width: min(440px, 52vw);        /* proportionate to the wider column instead of staying phone-sized */
  }

  .step {
    padding: 24px 0;                    /* a bit more breathing room per stacked step on tablet */
  }

  .cta-inner {
    padding: 64px 0;                    /* more generous CTA band padding to match the extra room */
  }

  .cta-copy h2 {
    font-size: clamp(2.4rem, 5vw, 3rem);
  }
}

/* Phones: the "scan the code" link only makes sense when the QR is on a
   different screen than the visitor. On a phone you're already holding
   the device you'd download to, so the prompt is pointless — hide it. */
@media (max-width: 640px) {
  .scan-link {
    display: none;
  }

  /* "Scratch. Reveal. Guess." is redundant with the "You know the
     moment..." sub-copy below the headline — drop it on phones to
     reclaim vertical space. */
  .eyebrow {
    display: none;
  }

  .nav {
    padding: 16px 16px;                 /* trim the nav bar on phones to free up height */
  }

  /* Let hero-screen (nav + hero) size itself to its natural content
     height instead of being stretched to fill the whole viewport. The
     card below is now deliberately smaller than the screen (so there's
     room around it to hold the phone / start a scroll), and forcing
     100svh here would just turn that freed-up space into blank gap
     under the card. Sizing to content instead means the steps section
     starts right after the card, so its top is visible on-screen
     together with the card rather than being pushed off by empty
     space. */
  .hero-screen {
    display: flex;
    flex-direction: column;
  }

  .hero {
    padding: clamp(16px, 3svh, 24px) 16px clamp(16px, 3svh, 24px); /* slightly larger top value adds breathing room below the nav now that the eyebrow is hidden */
  }

  /* Stacked layout: hero-copy sits above the scratch card. Both rows
     are sized to their own content — hero no longer stretches to fill
     the screen (see .hero-screen above), so there's no leftover space
     to distribute onto the visual row. */
  .hero-inner {
    display: grid;
    grid-template-rows: auto auto;      /* copy row, then card row — both sized to content */
    gap: 12px;                          /* spacing between hero copy and visual on phones */
  }

  .hero-visual {
    display: flex;
    justify-content: center;
  }

  .hero-sub {
    display: none;                      /* hide "You know the moment..." sub-copy on phones */
  }

  /* Tighten the step rhythm and scale type down for a single narrow
     column — the desktop spacing/sizing is tuned for a 3-up grid and
     reads as too loose and too large once stacked on a phone. */
  .step {
    padding: 20px 0 24px;               /* per-step spacing on phones: top, sides, bottom */
    border-bottom-color: rgba(255, 255, 255, 0.12); /* step divider color on phones */
  }

  .step:last-child {
    /* Give the last step room to clear the home indicator instead of
       feeling cut off at the bottom of the screen. */
    padding-bottom: calc(56px + env(safe-area-inset-bottom)); /* extra bottom spacing on phones with a home-indicator bar */
  }

  .step-heading {
    margin-bottom: 10px;                 /* space below the number+title row on phones */
  }

  .step-number {
    font-size: 24px;                    /* step number size on phones */
  }

  .step-title {
    font-size: 24px;                    /* step title size on phones */
    line-height: 1.05;                  /* step title line spacing on phones */
  }

  .step-body {
    font-size: 18px;                    /* step description size on phones */
    line-height: 1.5;                   /* step description line spacing on phones */
    color: rgba(255, 255, 255, 0.62);   /* step description color on phones */
    max-width: none;
  }

  /* Deliberately smaller than the card's own desktop cap (min(320px,
     82vw), from the base rule above) — leaves margin around the card
     on phones so a hand holding the phone, or a scroll gesture started
     near the card, doesn't land on the scratch surface itself. Height
     follows from the base rule's aspect-ratio. */
  .reveal-card {
    width: min(280px, 68vw);
    max-width: none;
    height: auto;
  }

  /* Same reasoning as the scan-link above: scanning a QR code on the
     device you're already viewing it on doesn't work, so drop the card
     and let the copy/CTA take the full width of the band. */
  .qr-card {
    display: none;
  }

  /* With the QR card gone, the CTA copy stays left-aligned but the
     button reads better centered under it on a narrow phone screen. */
  .cta-copy .btn-primary {
    display: flex;
    width: fit-content;
    margin: 0 auto;
  }
}

/* =====================================================================
   LEGAL PAGES (privacy policy, and any terms/legal page added later)
   Reuses the same theme variables as the rest of the site — no new
   colors — plus the first real use of --surface (defined above but
   unused until now) for the "In short" callout panels.
   ===================================================================== */

.legal-intro {
  padding: 40px 0 8px;             /* top clears the nav, bottom leaves room before the TOC/section grid starts */
  max-width: 640px;                 /* wraps the headline/lede to a readable width instead of the full container */
}

.legal-h1 {
  font-family: var(--font-display); /* matches the homepage headline face, see --font-display above */
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.6rem); /* smaller than the homepage hero headline — this page informs, it doesn't sell */
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.legal-lede {
  font-size: 17px;                  /* intro paragraph size */
  line-height: 1.55;
  color: var(--text-muted);         /* see --text-muted above */
  margin: 0 0 18px;
  max-width: 56ch;                   /* wraps to a readable line length */
}

.legal-date {
  font-size: 13px;                  /* effective-date line size */
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}

.legal-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 68ch); /* fixed TOC rail + a readable-width reading column */
  gap: 56px;                         /* spacing between the TOC rail and the section column */
  align-items: start;
  padding-bottom: 72px;               /* room above the footer band */
}

.legal-toc {
  position: sticky;
  top: 24px;                          /* keeps the TOC in view while the (long) section column scrolls past it */
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--line); /* rail hairline, see --line above */
  padding-left: 18px;
}

.legal-toc a {
  font-size: 13px;                    /* TOC entry size */
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 0;
}

.legal-toc a:hover {
  color: var(--text);                 /* brightens on hover, see --text above */
}

.legal-section {
  padding: 40px 0;                    /* per-section spacing: top/bottom */
  border-bottom: 1px solid var(--line); /* hairline between sections, matches .steps' use of --line */
}

.legal-section:first-child {
  padding-top: 0;                     /* flush with the top of the reading column */
}

.legal-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.legal-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;                          /* space between the section number and its heading */
  margin-bottom: 16px;
}

.legal-section-num {
  font-variant-numeric: tabular-nums; /* keeps 01–10 aligned to the same width */
  font-size: 13px;
  color: var(--text-muted);           /* quiet by design — unlike .step-number, this is a nav aid, not a celebrated step count */
}

.legal-section h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;                    /* section heading size */
  letter-spacing: -0.01em;
  margin: 0;
}

.legal-section p,
.legal-section li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

.legal-section p {
  margin: 0 0 14px;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section ul {
  margin: 0 0 14px;
  padding-left: 1.2em;
}

.legal-section li {
  margin-bottom: 8px;
}

.legal-section li:last-child {
  margin-bottom: 0;
}

/* "In short" callout at the top of the denser sections — plain-language
   paraphrase before the fuller paragraph below it. */
.legal-tldr {
  background: var(--surface);         /* first real use of --surface, see definition above */
  border-left: 3px solid var(--accent); /* accent stripe, see --accent above */
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}

.legal-tldr-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 4px;
}

/* Standalone "we don't track you" statement in the Tracking & Ads
   section — a bordered panel rather than a callout since it's the
   whole point of the section, not a summary of paragraphs below it. */
.no-track {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 15px;
}

.no-track .dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.legal-section table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 18px;
  font-size: 15px;
}

.legal-section th,
.legal-section td {
  text-align: left;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.legal-section th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.legal-section td {
  color: var(--text-muted);
}

.legal-section td:first-child {
  color: var(--text);
  font-weight: 600;
}

/* Below 860px there's no room for a sticky rail beside a readable
   column, so the TOC becomes a horizontal, wrapping jump-list above
   the sections instead — same pattern .hero-inner/.steps-grid use to
   go from side-by-side to stacked. */
@media (max-width: 860px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .legal-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 18px;
    border-left: none;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
    margin-bottom: 8px;
  }

  .legal-toc a {
    padding: 2px 0;
  }
}