/* ============================================================
   FUTURE READY - Design System
   White-based · Apple-esque · Urbanist · purple accents
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap');

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* Surfaces (white-based) */
  --white:   #FFFFFF;
  --paper:   #F7F6FC;   /* faint purple-tinted off-white */
  --paper-2: #F0EEF9;
  --paper-3: #E9E6F6;

  /* Deep purple (for the occasional rich section / CTA) */
  --ink-900: #15102E;
  --ink-800: #1C1640;
  --ink-700: #271E59;

  /* Purple accent family */
  --purple:     #7C5CFC;   /* brand violet */
  --purple-600: #6B46F0;
  --purple-700: #5B34D9;   /* AA text on white (~5.8:1) */
  --purple-300: #B7A6FF;
  --purple-100: #EEE9FF;
  --purple-050: #F5F2FF;

  /* Blue - secondary accent, used sparingly */
  --blue:    #4F8DFD;
  --blue-700: #2F6BE0;

  /* Text on light */
  --t:        #18132E;   /* near-black, faint purple */
  --t-2:      #413B5C;   /* secondary text */
  --t-muted:  #6B6685;   /* muted (AA on white) */
  --t-faint:  #8E8AA6;
  --link:     var(--purple-700);

  /* Text on dark */
  --t-on-dark:       #FFFFFF;
  --t-on-dark-muted: #C9C4E6;
  --t-on-dark-faint: #9B95C2;

  /* Lines */
  --line:    #E7E4F2;
  --line-2:  #DAD6EC;
  --line-dark:  rgba(255,255,255,0.12);
  --line-dark-2:rgba(255,255,255,0.20);

  /* Radii - Apple-ish */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Shadow - soft, diffuse */
  --sh-sm: 0 1px 2px rgba(24,19,46,0.05), 0 3px 8px rgba(24,19,46,0.05);
  --sh-md: 0 8px 26px rgba(24,19,46,0.08), 0 2px 8px rgba(24,19,46,0.05);
  --sh-lg: 0 28px 70px rgba(36,24,86,0.14), 0 8px 22px rgba(36,24,86,0.08);
  --sh-purple: 0 14px 40px rgba(124,92,252,0.30);

  /* Layout */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 56px);

  /* Type */
  --f: 'Urbanist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-head: var(--f);
  --f-body: var(--f);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }

body {
  font-family: var(--f);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 450;
  color: var(--t-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; cursor: pointer; color: inherit; }
ul { list-style: none; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--t);
  text-wrap: balance;
}
p { text-wrap: pretty; }

::selection { background: rgba(124,92,252,0.22); }

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

.skip-link {
  position: absolute; left: 16px; top: -60px;
  background: var(--purple); color: #fff;
  padding: 12px 18px; border-radius: var(--r-pill);
  font-weight: 700; z-index: 1000; box-shadow: var(--sh-md);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; text-decoration: none; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 880px; }
.section { padding-block: clamp(72px, 10vw, 140px); position: relative; }
.section--tight { padding-block: clamp(52px, 7vw, 96px); }

.light  { background: var(--white); color: var(--t-2); }
.paper  { background: var(--paper); color: var(--t-2); }
.dark   { background: var(--ink-800); color: var(--t-on-dark); }
.darkest{ background: var(--ink-900); color: var(--t-on-dark); }
.dark h1,.dark h2,.dark h3,.dark h4,
.darkest h1,.darkest h2,.darkest h3,.darkest h4 { color: var(--t-on-dark); }

.center { text-align: center; }
.measure { max-width: 64ch; }
.measure-sm { max-width: 48ch; }

/* ============================================================
   TYPE
   ============================================================ */
.eyebrow {
  font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--purple-700);
  display: inline-flex; align-items: center; gap: 10px;
}
.dark .eyebrow, .darkest .eyebrow { color: var(--purple-300); }
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--purple); box-shadow: 0 0 0 4px rgba(124,92,252,0.16);
}

.display { font-size: clamp(2.8rem, 7vw, 5rem); line-height: 1.0; letter-spacing: -0.035em; font-weight: 800; }
.h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); letter-spacing: -0.03em; font-weight: 800; }
.h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); letter-spacing: -0.028em; }
.h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); letter-spacing: -0.02em; }
.lead { font-size: clamp(1.12rem, 1.6vw, 1.36rem); line-height: 1.55; color: var(--t-muted); font-weight: 450; }
.dark .lead, .darkest .lead { color: var(--t-on-dark-muted); }
.muted { color: var(--t-muted); }
.dark .muted, .darkest .muted { color: var(--t-on-dark-muted); }

.grad-text {
  background: linear-gradient(100deg, var(--purple) 0%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.section-head { max-width: 62ch; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head.center { margin-inline: auto; }
.section-head .h2 { margin-top: 16px; }
.section-head p { margin-top: 18px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: 1rem; line-height: 1;
  padding: 15px 26px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; }

.btn--primary { background: var(--purple); color: #fff; box-shadow: var(--sh-purple); }
.btn--primary:hover { background: var(--purple-600); box-shadow: 0 18px 50px rgba(124,92,252,0.42); }

.btn--dark { background: var(--ink-800); color: #fff; }
.btn--dark:hover { background: var(--ink-700); }

.btn--outline { background: #fff; border-color: var(--line-2); color: var(--t); box-shadow: var(--sh-sm); }
.btn--outline:hover { border-color: var(--purple); color: var(--purple-700); }

.btn--soft { background: var(--purple-050); color: var(--purple-700); }
.btn--soft:hover { background: var(--purple-100); }

/* on dark sections */
.btn--ghost { background: rgba(255,255,255,0.06); border-color: var(--line-dark-2); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.34); }
.btn--white { background: #fff; color: var(--ink-900); }
.btn--white:hover { background: #f1eefb; }

.btn--sm { padding: 11px 18px; font-size: 0.92rem; }
.btn--lg { padding: 17px 32px; font-size: 1.06rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* text link with chevron (Apple style) */
.tlink { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--purple-700); }
.dark .tlink, .darkest .tlink { color: var(--purple-300); }
.tlink:hover { text-decoration: none; }
.tlink:hover .arr { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce){
  .btn:hover { transform: none; }
  .btn:hover .arr, .tlink:hover .arr { transform: none; }
}

/* ============================================================
   BADGE / TAG / PILL
   ============================================================ */
.badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.82rem; padding: 7px 15px; border-radius: var(--r-pill); }
.badge--live { background: #E7F8EF; color: #15804C; border: 1px solid #BFE9D2; }
.badge--live .dot { width: 8px; height: 8px; border-radius: 50%; background: #1FB667; animation: pulse 2.4s var(--ease) infinite; }
.badge--soft { background: var(--purple-050); color: var(--purple-700); border: 1px solid var(--purple-100); }
.dark .badge--soft, .darkest .badge--soft { background: rgba(124,92,252,0.16); color: var(--purple-300); border-color: rgba(124,92,252,0.3); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(31,182,103,.45)} 70%{box-shadow:0 0 0 8px rgba(31,182,103,0)} 100%{box-shadow:0 0 0 0 rgba(31,182,103,0)} }
@media (prefers-reduced-motion: reduce){ .badge--live .dot{animation:none} }

.tag { display: inline-flex; align-items: center; gap: 7px; font-size: 0.84rem; font-weight: 600; padding: 6px 13px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--t-2); border: 1px solid var(--line); }
.dark .tag, .darkest .tag { background: rgba(255,255,255,0.06); color: var(--t-on-dark-muted); border-color: var(--line-dark); }

/* ============================================================
   CARDS
   ============================================================ */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); box-shadow: var(--sh-sm); transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
.card--hover:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--line-2); }
.paper .card { background: #fff; }
.dark .card, .darkest .card { background: rgba(255,255,255,0.045); border-color: var(--line-dark); box-shadow: none; color: var(--t-on-dark); }
.dark .card--hover:hover, .darkest .card--hover:hover { background: rgba(255,255,255,0.07); border-color: var(--line-dark-2); }

.linkcard { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; }
.linkcard:hover { text-decoration: none; }
.linkcard .lc-go { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--purple-700); }
.dark .linkcard .lc-go { color: var(--purple-300); }
.linkcard:hover .lc-go .arr { transform: translateX(5px); }

.grid { display: grid; gap: clamp(18px, 2.2vw, 26px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3,.grid-4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr;} }

.ichip { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--purple-050); border: 1px solid var(--purple-100); color: var(--purple-700); }
.dark .ichip, .darkest .ichip { background: rgba(124,92,252,0.16); border-color: rgba(124,92,252,0.28); color: var(--purple-300); }
.ichip svg { width: 25px; height: 25px; }

/* ============================================================
   GLOW / NODES (restrained, work on white)
   ============================================================ */
.glow-host { position: relative; overflow: clip; isolation: isolate; }
.glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: -1; }
.glow--purple { background: radial-gradient(circle, rgba(124,92,252,0.30), transparent 66%); }
.glow--blue   { background: radial-gradient(circle, rgba(79,141,253,0.26), transparent 66%); }
.dark .glow--purple, .darkest .glow--purple { background: radial-gradient(circle, rgba(124,92,252,0.55), transparent 66%); }
.dark .glow--blue, .darkest .glow--blue { background: radial-gradient(circle, rgba(79,141,253,0.45), transparent 66%); }

.nodes {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(124,92,252,0.16) 1px, transparent 1.5px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(120% 85% at 50% 0%, #000 25%, transparent 72%);
          mask-image: radial-gradient(120% 85% at 50% 0%, #000 25%, transparent 72%);
}
.dark .nodes, .darkest .nodes { background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1.5px); }

.divider-mesh { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }

/* ============================================================
   STAT
   ============================================================ */
.stat { text-align: center; }
.stat .num { font-weight: 800; font-size: clamp(2.8rem, 6vw, 4.4rem); line-height: 1; letter-spacing: -0.03em; color: var(--purple-700); }
.dark .stat .num, .darkest .stat .num { background: linear-gradient(180deg, #fff, var(--purple-300)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat .lbl { margin-top: 12px; font-weight: 500; color: var(--t-muted); }
.dark .stat .lbl, .darkest .stat .lbl { color: var(--t-on-dark-muted); }

/* ============================================================
   TICKS
   ============================================================ */
.ticks { display: grid; gap: 14px; }
.ticks li { display: flex; gap: 13px; align-items: flex-start; line-height: 1.5; }
.ticks .tk { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--purple-050); color: var(--purple-700); margin-top: 1px; }
.dark .ticks .tk, .darkest .ticks .tk { background: rgba(124,92,252,0.2); color: var(--purple-300); }
.ticks .tk svg { width: 14px; height: 14px; }

/* ============================================================
   NAV - light / glassy (injected by app.js)
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.scrolled { background: rgba(255,255,255,0.85); border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(24,19,46,0.03); }
.nav__inner { max-width: var(--maxw); margin-inline: auto; padding: 13px var(--gutter); display: flex; align-items: center; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 32px; height: 32px; flex: none; }
.brand__name { font-family: var(--f-head); font-weight: 800; font-size: 1.18rem; letter-spacing: -0.03em; color: var(--t); }
.nav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__links a { color: var(--t-2); font-weight: 600; font-size: 0.96rem; padding: 9px 14px; border-radius: var(--r-pill); text-decoration: none; white-space: nowrap; transition: color .2s var(--ease), background .2s var(--ease); }
.nav__links a:hover { color: var(--t); background: var(--paper-2); text-decoration: none; }
.nav__links a[aria-current="page"] { color: var(--purple-700); background: var(--purple-050); }
.nav__cta { margin-left: 10px; }
.nav__toggle { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); color: var(--t); align-items: center; justify-content: center; }
.nav__toggle svg { width: 22px; height: 22px; }

@media (max-width: 920px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw);
    flex-direction: column; align-items: stretch; gap: 4px;
    background: #fff; border-left: 1px solid var(--line);
    padding: 92px 22px 30px; margin: 0;
    transform: translateX(100%); transition: transform .32s var(--ease);
    box-shadow: -30px 0 70px rgba(24,19,46,0.16);
  }
  .nav__links.open { transform: translateX(0); }
  .nav__links a { font-size: 1.06rem; padding: 13px 16px; }
  .nav__cta { margin: 12px 0 0; }
  .nav__cta .btn { width: 100%; }
  .nav__backdrop { position: fixed; inset: 0; background: rgba(24,19,46,0.32); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); z-index: 99; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .nav__backdrop.open { opacity: 1; pointer-events: auto; }
}

/* ============================================================
   FOOTER - light (injected by app.js)
   ============================================================ */
.footer { background: var(--paper); color: var(--t-2); padding-block: 68px 40px; border-top: 1px solid var(--line); }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 44px; }
.footer__brand .brand { margin-bottom: 16px; }
.footer__brand p { max-width: 42ch; font-size: 0.96rem; }
.footer__col h4 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-faint); margin-bottom: 14px; font-weight: 700; }
.footer__col a { display: block; color: var(--t-2); padding: 5px 0; font-size: 0.97rem; font-weight: 500; }
.footer__col a:hover { color: var(--purple-700); }
.footer__safe { margin-top: 44px; padding: 18px 22px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); font-size: 0.9rem; line-height: 1.6; display: flex; gap: 13px; align-items: flex-start; color: var(--t-muted); }
.footer__safe svg { flex: none; width: 20px; height: 20px; color: var(--purple); margin-top: 2px; }
.footer__base { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; align-items: center; font-size: 0.88rem; color: var(--t-faint); }
.footer__policy { flex: 1 1 320px; text-align: center; min-width: 240px; }
.footer__policy a { color: var(--t-muted); font-weight: 700; }
.footer__policy a:hover { color: var(--purple-700); }
@media (max-width: 720px){ .footer__policy { text-align: left; order: 3; flex-basis: 100%; } }
@media (max-width: 860px){ .footer__top { grid-template-columns: 1fr 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 560px){ .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px){ .footer__top { grid-template-columns: 1fr; } }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay: .07s; }
.reveal[data-d="2"]{ transition-delay: .14s; }
.reveal[data-d="3"]{ transition-delay: .21s; }
.reveal[data-d="4"]{ transition-delay: .28s; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* misc */
.kicker-line { display: flex; align-items: center; gap: 14px; }
.kicker-line::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.dark .kicker-line::after, .darkest .kicker-line::after { background: var(--line-dark); }

/* ============================================================
   CHARTS (rendered by charts.js)
   ============================================================ */
.chart-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 32px); box-shadow: var(--sh-sm); height: 100%; display: flex; flex-direction: column; }
.chart-card__q { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--t); }
.chart-card__sub { font-size: 0.9rem; color: var(--t-faint); margin-top: 4px; margin-bottom: 22px; font-weight: 600; }
.chart-card__note { margin-top: 18px; font-size: 0.84rem; color: var(--t-faint); }

/* donut */
.fr-donut-wrap { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); flex-wrap: wrap; }
.fr-donut { position: relative; width: clamp(150px, 18vw, 190px); flex: none; }
.fr-donut svg { width: 100%; height: auto; display: block; }
.fr-donut__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.fr-donut__big { font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -0.03em; color: var(--t); line-height: 1; }
.fr-donut__sub { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-faint); margin-top: 5px; }
.fr-legend { display: grid; gap: 11px; flex: 1; min-width: 160px; }
.fr-legend li { display: flex; align-items: center; gap: 10px; font-size: 0.94rem; }
.fr-dot { width: 11px; height: 11px; border-radius: 4px; flex: none; }
.fr-leg-label { color: var(--t-2); font-weight: 600; }
.fr-leg-val { margin-left: auto; color: var(--t-faint); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* bars */
.fr-bars { display: grid; gap: 17px; }
.fr-bar__head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 7px; }
.fr-bar__label { font-weight: 600; color: var(--t-2); font-size: 0.96rem; flex: 1 1 auto; min-width: 0; }
.fr-bar__val { font-size: 0.92rem; color: var(--t-faint); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; }
.fr-bar__val b { color: var(--t); font-weight: 800; }
.fr-bar__track { height: 12px; background: #F0EEF8; border-radius: var(--r-pill); overflow: hidden; }
.fr-bar__fill { height: 100%; width: 0; border-radius: var(--r-pill); }
.fr-bar.is-top .fr-bar__label { color: var(--t); font-weight: 700; }
@media (prefers-reduced-motion: reduce){ .fr-bar__fill, .fr-arc { transition: none !important; } }

/* ============================================================
   PROSE / LEGAL PAGES (Safeguarding · Privacy · Terms)
   ============================================================ */
.legal-hero { position: relative; padding-block: clamp(52px, 8vw, 96px) clamp(28px, 4vw, 44px); }
.legal-hero .glow--purple { width: 520px; height: 400px; top: -180px; right: -120px; opacity: .6; }
.legal-hero__inner { position: relative; z-index: 1; max-width: 760px; }
.legal-hero h1 { margin-top: 18px; }
.legal-hero .lead { margin-top: 18px; max-width: 58ch; }
.legal-hero__meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 0.9rem; color: var(--t-faint); font-weight: 600; }
.legal-hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.legal-hero__meta svg { width: 16px; height: 16px; color: var(--purple); }

.prose { max-width: 760px; }
.prose > section { padding-top: clamp(36px, 4.5vw, 52px); padding-bottom: clamp(36px, 4.5vw, 52px); }
.prose > section:last-child { padding-bottom: 0; }
.prose > section + section { border-top: 1px solid var(--line); }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: 8px; }
.prose .prose__eyebrow { color: var(--purple-700); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
.prose h3 { font-size: 1.12rem; margin: 24px 0 8px; }
.prose p { color: var(--t-2); margin-top: 16px; font-size: 1.04rem; }
.prose p:first-child { margin-top: 0; }
.prose a { font-weight: 600; }
.prose ul.bullets { margin-top: 16px; display: grid; gap: 12px; }
.prose ul.bullets li { position: relative; padding-left: 30px; color: var(--t-2); font-size: 1.04rem; line-height: 1.55; }
.prose ul.bullets li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px var(--purple-050); }
.prose ul.checks { margin-top: 18px; display: grid; gap: 14px; }
.prose ul.checks li { display: flex; gap: 13px; align-items: flex-start; color: var(--t-2); font-size: 1.04rem; line-height: 1.5; }
.prose ul.checks .tk { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--purple-050); color: var(--purple-700); margin-top: 1px; }
.prose ul.checks .tk svg { width: 14px; height: 14px; }

/* placeholder token (for team-to-confirm fields) */
.ph {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: 0.86em; font-weight: 700;
  color: var(--purple-700); background: var(--purple-050);
  border: 1px dashed var(--purple-300); border-radius: 7px;
  padding: 1px 9px; letter-spacing: -0.01em; white-space: nowrap;
}

/* callout box (reporting concern / key note) */
.callout {
  margin-top: 22px; padding: clamp(20px, 2.6vw, 28px); border-radius: var(--r-lg);
  background: var(--purple-050); border: 1px solid var(--purple-100);
  display: flex; gap: 16px; align-items: flex-start;
}
.callout__icon { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #fff; border: 1px solid var(--purple-100); color: var(--purple-700); }
.callout__icon svg { width: 22px; height: 22px; }
.callout h3 { margin: 0 0 6px; font-size: 1.08rem; }
.callout p { margin-top: 6px; font-size: 0.98rem; color: var(--t-2); }
.callout--warn { background: #FFF7ED; border-color: #FCE3BE; }
.callout--warn .callout__icon { color: #B45309; border-color: #FCE3BE; }

/* in-page contents nav */
.legal-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.legal-toc a { font-size: 0.9rem; font-weight: 600; color: var(--t-2); background: #fff; border: 1px solid var(--line); padding: 8px 15px; border-radius: var(--r-pill); }
.legal-toc a:hover { border-color: var(--purple); color: var(--purple-700); text-decoration: none; }

/* pilot framing banner (Research) */
.pilot-banner {
  display: flex; gap: 16px; align-items: center;
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.6vw, 28px);
  background: linear-gradient(100deg, var(--purple-050), #fff 70%);
  border: 1px solid var(--purple-100); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.pilot-banner__icon { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fff; border: 1px solid var(--purple-100); color: var(--purple-700); }
.pilot-banner__icon svg { width: 24px; height: 24px; }
.pilot-banner p { font-size: 1.04rem; color: var(--t); font-weight: 600; line-height: 1.45; }
.pilot-banner p strong { color: var(--purple-700); }
.pilot-banner p small { display: block; margin-top: 4px; font-size: 0.88rem; color: var(--t-muted); font-weight: 500; }
@media (max-width: 460px){ .pilot-banner { flex-direction: column; align-items: flex-start; gap: 12px; } }