/* ==========================================================================
   Wecomply — site stylesheet
   Stripi design system, dark polarity. Every value here comes from
   wecomply-design-tokens.md. Nothing is invented.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Söhne is proprietary (Klim Type Foundry) and is not vendored. Inter is the
   substitute named by the brand doc, self-hosted and subset to Latin so the
   site makes no third-party requests. If you licence Söhne, drop the woff2
   into assets/fonts/ and uncomment the block below — the stack already
   prefers `sohne-var`.
   ------------------------------------------------------------------------- */
/*
@font-face{font-family:"sohne-var";src:url("../fonts/sohne-var.woff2") format("woff2-variations");font-weight:200 700;font-style:normal;font-display:swap}
*/
@font-face{font-family:"Inter";src:url("../fonts/Inter-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* Families */
  --font-sans:"sohne-var","Inter","SF Pro Display",system-ui,-apple-system,sans-serif;
  --font-display:var(--font-sans);
  --font-body:var(--font-sans);

  /* OpenType */
  --feat-ss01:"ss01";
  --feat-tnum:"tnum";

  /* Colour — two colours do the work. Red is a warning state, never decoration. */
  --page:#0b0d24;
  --base:#101235;
  --band:#0e1030;
  --card:#1c1e54;
  --raised:#262a63;
  --accent:#533afd;
  --accent-press:#2e2b8c;
  --accent-soft:#b9b9f9;
  --warning:#ea2261;
  --cream:#f5e9d4;
  --cream-ink:#0d253d;
  --cream-ink-secondary:#273951;

  --hairline:rgba(255,255,255,.12);
  --hairline-input:rgba(255,255,255,.26);
  --ink:#ffffff;
  --ink-secondary:rgba(255,255,255,.74);
  --ink-mute:rgba(255,255,255,.54);
  --ink-mute-2:rgba(255,255,255,.62);
  --ink-faint:rgba(255,255,255,.44);

  /* Elevation — black rgba on dark; Stripi's blue-tinted shadow disappears against navy */
  --elev-1:rgba(0,0,0,.28) 0 1px 3px;
  --elev-2:rgba(0,0,0,.36) 0 12px 32px;

  /* Radii */
  --r-chrome:4px; --r-input:6px; --r-compact:8px; --r-card:12px; --r-mockup:16px; --r-pill:9999px;

  /* Spacing */
  --space-xs:4px; --space-sm:8px; --space-md:12px; --space-lg:16px;
  --space-xl:24px; --space-xxl:32px; --space-huge:64px;

  /* Motion */
  --ease:cubic-bezier(.215,.61,.355,1);
  --dur-colour:150ms;
  --dur-lift:200ms;

  /* Type — role shorthands */
  --type-heading-lg:300 22px/1.1 var(--font-display);
  --type-heading-md:300 20px/1.4 var(--font-display);
  --type-heading-sm:300 18px/1.4 var(--font-display);
  --type-body-lg:300 16px/1.4 var(--font-body);
  --type-body-md:300 15px/1.4 var(--font-body);
  --type-body-tabular:300 14px/1.4 var(--font-body);
  --type-button-md:400 16px/1 var(--font-body);
  --type-button-sm:400 14px/1 var(--font-body);
  --type-caption:400 13px/1.4 var(--font-body);
  --type-micro:300 11px/1.4 var(--font-body);
  --type-micro-cap:400 10px/1.15 var(--font-body);

  /* Rhythm */
  --section-y:clamp(56px, 7cqi, 96px);
  --hero-y:clamp(48px, 7cqi, 104px);
  --gutter:24px;
  --container:1200px;
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font:var(--type-body-lg);
  font-feature-settings:var(--feat-ss01);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
input,textarea,select,button{font-family:inherit}
::selection{background:rgba(83,58,253,.45);color:#fff}

a{color:var(--accent-soft);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 20px;background:var(--card);color:var(--ink);
  border:1px solid var(--hairline);border-radius:var(--r-pill);font:var(--type-button-sm)
}
.skip:focus{left:16px;top:16px;text-decoration:none}

/* --- Layout --------------------------------------------------------------- */
.page{container-type:inline-size}
.wrap{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.rule{border-top:1px solid var(--hairline)}
.band{background:var(--band)}

/* Hero mesh — one layer on the page wrapper, not the hero section, sized to
   the top 660px so the nav sits over it with no seam. */
.page{
  background-color:var(--base);
  background-image:
    radial-gradient(56% 88% at 8% 4%,   rgba(185,185,249,.15) 0%, rgba(185,185,249,0) 60%),
    radial-gradient(50% 80% at 38% 0%,  rgba(83,58,253,.32)   0%, rgba(83,58,253,0)   62%),
    radial-gradient(44% 74% at 72% 4%,  rgba(249,107,238,.12) 0%, rgba(249,107,238,0) 60%),
    radial-gradient(60% 96% at 100% 24%,rgba(234,34,97,.11)   0%, rgba(234,34,97,0)   62%);
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% 660px;
}

.grid{display:grid;gap:20px}
.g-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
/* Four capability cards: minmax(280px) lands 3-up and orphans the fourth at
   desktop width, so this set gets a wider floor and sits 2x2. */
.g-caps{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}
.split{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(32px,4cqi,64px);align-items:start
}
.split--centre{align-items:center}

/* --- Type ----------------------------------------------------------------- */
.d-xxl{font:300 clamp(32px,5.1cqi,56px)/1.03 var(--font-display);letter-spacing:-1.4px;color:var(--ink);text-wrap:pretty}
.d-xl {font:300 clamp(30px,4.4cqi,48px)/1.15 var(--font-display);letter-spacing:-.96px;color:var(--ink);text-wrap:pretty}
.d-lg {font:300 clamp(24px,3.2cqi,38px)/1.1  var(--font-display);letter-spacing:-.64px;color:var(--ink);text-wrap:pretty}
.d-md {font:300 clamp(20px,2.2cqi,26px)/1.12 var(--font-display);letter-spacing:-.26px;color:var(--ink);text-wrap:pretty}
.h-lg {font:var(--type-heading-lg);letter-spacing:-.22px;color:var(--ink)}
.h-md {font:var(--type-heading-md);letter-spacing:-.2px;color:var(--ink)}
.h-sm {font:var(--type-heading-sm);color:var(--ink)}

.lede{font:var(--type-body-lg);color:var(--ink-secondary);text-wrap:pretty;max-width:34em}
.body{font:var(--type-body-md);color:rgba(255,255,255,.7);text-wrap:pretty}
.caption{font:var(--type-caption);letter-spacing:-.39px;color:var(--ink-mute)}
.micro{font:var(--type-micro);color:var(--ink-faint)}
.tabular{font:var(--type-body-tabular);letter-spacing:-.42px;font-feature-settings:var(--feat-tnum)}

/* micro-cap is the only all-caps use on the site */
.eyebrow{
  display:inline-block;font:var(--type-micro-cap);letter-spacing:.1px;
  text-transform:uppercase;color:var(--ink-mute)
}
.eyebrow--accent{color:var(--accent-soft)}
.eyebrow--faint{color:var(--ink-faint)}

.stack > * + *{margin-top:16px}
.stack-lg > * + *{margin-top:20px}

/* --- Buttons — the tight pill is the transactional signal ------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:12px 22px;border-radius:var(--r-pill);
  font:var(--type-button-md);border:1px solid transparent;cursor:pointer;
  text-decoration:none;transition:background-color var(--dur-colour) var(--ease),
    border-color var(--dur-colour) var(--ease),color var(--dur-colour) var(--ease)
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:#4430d6;color:#fff}      /* hover deepens, never lightens */
.btn--primary:active{background:var(--accent-press)}
.btn--secondary{background:transparent;color:var(--ink);border-color:rgba(255,255,255,.24)}
.btn--secondary:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.btn--sm{min-height:40px;padding:9px 16px;font:var(--type-button-sm)}
.btn--block{width:100%}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  background:none;border:0;padding:0;cursor:pointer;
  font:var(--type-body-md);color:var(--accent-soft)
}
.link-arrow:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* --- Tag / status badge — a word plus a dot, never a colour alone ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--r-pill);
  background:rgba(83,58,253,.24);color:var(--accent-soft);
  font:var(--type-micro-cap);letter-spacing:.1px;text-transform:uppercase;white-space:nowrap
}
.tag--neutral{background:rgba(255,255,255,.08);color:rgba(255,255,255,.66)}
.tag::before{content:"";width:5px;height:5px;border-radius:var(--r-pill);background:currentColor;flex:none}

.chip{
  display:inline-block;padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.16);
  font:var(--type-caption);letter-spacing:-.39px;color:rgba(255,255,255,.72)
}

/* --- Cards ---------------------------------------------------------------- */
.card{
  background:var(--card);border:1px solid var(--hairline);
  border-radius:var(--r-card);padding:var(--space-xxl)
}
.card--band{background:var(--band)}
.card--dashed{border:1px dashed rgba(255,255,255,.22);background:rgba(28,30,84,.4)}
.card--flush{padding:0;overflow:hidden}

/* --- Header --------------------------------------------------------------- */
.header{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:var(--container);margin:0 auto;padding:20px var(--gutter);
  position:relative;z-index:20
}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;color:#fff;text-decoration:none}
.brand:hover{text-decoration:none;color:#fff}
.brand__word{font:400 19px/1 var(--font-display);letter-spacing:-1px;color:#fff}
.nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav a{font:var(--type-body-md);color:var(--ink-mute-2);text-decoration:none}
.nav a:hover{color:#fff;text-decoration:none}
.nav a[aria-current="page"]{color:#fff}
.nav__toggle{display:none}

.menu{display:none;flex-direction:column;gap:2px;padding:8px 16px 20px;border-bottom:1px solid var(--hairline)}
.menu[data-open="true"]{display:flex}
.menu a{
  display:flex;align-items:center;min-height:44px;padding:13px 8px;
  font:var(--type-heading-sm);color:#fff;text-decoration:none
}
.menu a:hover{text-decoration:none}
.menu__cta{padding:10px 8px 0}

@media (max-width:640px){
  .nav{display:none}
  .nav__toggle{
    display:inline-flex;align-items:center;justify-content:center;min-height:44px;
    padding:8px 14px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.2);
    background:transparent;color:#fff;font:var(--type-button-sm);cursor:pointer
  }
}

/* --- Footer --------------------------------------------------------------- */
.footer{border-top:1px solid var(--hairline);background:var(--page)}
.footer__top{
  max-width:var(--container);margin:0 auto;
  padding:clamp(44px,5cqi,64px) var(--gutter) clamp(28px,3cqi,40px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(28px,4cqi,56px)
}
.footer__links{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.footer__links a{
  display:flex;align-items:center;min-height:44px;
  font:var(--type-body-md);color:rgba(255,255,255,.7);text-decoration:none
}
.footer__links a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer__legal{
  max-width:var(--container);margin:0 auto;
  padding:20px var(--gutter) clamp(36px,4cqi,56px);border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between
}
.footer__legal span{font:var(--type-micro);color:var(--ink-faint)}

/* --- Hero ----------------------------------------------------------------- */
.hero{padding-top:var(--hero-y);padding-bottom:var(--section-y)}
.hero__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(40px,5cqi,72px);align-items:center
}
.hero__sub{
  font:300 clamp(20px,2.4cqi,28px)/1.2 var(--font-display);
  letter-spacing:-.42px;color:#fff;max-width:30em;text-wrap:pretty
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.globe-slot{justify-self:end;position:relative;width:min(100%,560px);aspect-ratio:1}
.globe-slot canvas{display:block;width:100%;height:100%}

/* --- Bullets — indigo em-dash --------------------------------------------- */
.bullets{display:flex;flex-direction:column;gap:12px}
.bullets li{display:flex;gap:12px;font:var(--type-body-md);color:var(--ink-secondary)}
.bullets li::before{content:"—";color:var(--accent);flex:none}

/* --- Product mockup chrome ------------------------------------------------ */
.mock{border-radius:var(--r-card);overflow:hidden;border:1px solid rgba(255,255,255,.14);background:var(--page)}
.mock--raised{border-radius:var(--r-mockup);box-shadow:var(--elev-2)}
.mock__bar{
  display:flex;align-items:center;gap:10px;padding:11px 16px;
  border-bottom:1px solid var(--hairline);background:#141637
}
.mock__dots{display:flex;gap:5px}
.mock__dots i{width:7px;height:7px;border-radius:var(--r-pill);background:rgba(255,255,255,.22)}
.mock__url{
  flex:1;padding:4px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);
  font:var(--type-micro);color:rgba(255,255,255,.42)
}
.mock__body{padding:20px}
.mock__skeleton{filter:blur(1.4px);opacity:.34;display:flex;flex-direction:column;gap:9px}
.mock__skeleton i{display:block;height:9px;border-radius:3px;background:rgba(255,255,255,.16)}
.mock__skeleton i:first-child{height:11px;background:rgba(255,255,255,.3)}
.mock__skeleton i:last-child{height:34px;border-radius:6px;background:rgba(255,255,255,.12);margin-top:6px}

.verdict{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.verdict::before{content:"";width:6px;height:6px;border-radius:var(--r-pill);background:var(--warning);flex:none}
.verdict span{font:var(--type-caption);letter-spacing:-.39px;color:var(--warning)}
.verdict .safeword{margin-left:auto;font:var(--type-micro);letter-spacing:.6px;color:var(--accent-soft)}

.evidence{margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:8px}
.evidence div{display:flex;justify-content:space-between;gap:12px}
.evidence span:first-child{color:rgba(255,255,255,.6)}
.evidence span:last-child{color:rgba(255,255,255,.84)}

.safeword-row{
  margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border-radius:var(--r-compact);
  background:rgba(83,58,253,.16);border:1px solid rgba(185,185,249,.24)
}

.warnbox{
  margin-top:18px;border-radius:var(--r-card);border:1px solid rgba(234,34,97,.4);
  background:#141637;padding:20px;box-shadow:rgba(0,0,0,.4) 0 8px 28px
}
.warnbox__actions{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.warnbox__actions span{padding:9px 16px;border-radius:var(--r-pill);font:var(--type-button-sm)}
.warnbox__actions span:first-child{background:var(--accent);color:#fff}
.warnbox__actions span:last-child{border:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.8)}

/* --- Feature block -------------------------------------------------------- */
.feature{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.feature__copy{padding:clamp(28px,3.2cqi,44px)}
.feature__aside{
  background:var(--base);border-left:1px solid var(--hairline);
  padding:clamp(24px,2.6cqi,36px);display:flex;align-items:center
}
@media (max-width:719px){
  .feature__aside{border-left:0;border-top:1px solid var(--hairline)}
}

/* --- Steps ---------------------------------------------------------------- */
.step{padding-top:28px;border-top:2px solid rgba(83,58,253,.5)}
.step__n{
  display:block;font:var(--type-body-tabular);font-feature-settings:var(--feat-tnum);
  letter-spacing:-.42px;color:var(--accent);margin-bottom:12px
}

/* --- Capability card ------------------------------------------------------ */
.cap{display:flex;flex-direction:column;gap:12px}
.cap__note{margin-top:auto;padding-top:12px;font:var(--type-micro);color:var(--ink-faint)}

/* --- Tool card ------------------------------------------------------------ */
.tool{display:flex;flex-direction:column;gap:14px;min-height:214px;padding:28px}
.tool__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tool__foot{margin-top:auto;padding-top:8px}
.tool--pending .tool__name{color:rgba(255,255,255,.72)}
.tool--pending .tool__line{color:rgba(255,255,255,.48)}

/* --- Privacy panel -------------------------------------------------------- */
.privacy-panel{
  border:1px solid rgba(185,185,249,.3);border-radius:var(--r-mockup);
  background:linear-gradient(180deg,rgba(83,58,253,.14) 0%,rgba(83,58,253,0) 40%),var(--card);
  overflow:hidden
}
.privacy-panel__head{padding:clamp(28px,3.4cqi,48px);border-bottom:1px solid var(--hairline)}
.privacy-panel__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.privacy-panel__facts > div{
  padding:clamp(22px,2.4cqi,32px);
  border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)
}
/* The last cell's right border doubles against the panel edge */
.privacy-panel__facts > div:last-child{border-right:0}
.privacy-panel__foot{
  padding:clamp(22px,2.4cqi,32px);display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between
}

/* --- Cream interlude — appears exactly once on the whole site -------------- */
.interlude{background:var(--cream);color:var(--cream-ink)}
.interlude .wrap{
  padding-top:clamp(48px,6cqi,88px);padding-bottom:clamp(48px,6cqi,88px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(28px,4cqi,64px);align-items:center
}
.interlude h2{font:300 clamp(24px,3.4cqi,40px)/1.1 var(--font-display);letter-spacing:-.64px;text-wrap:pretty}
.interlude p{font:var(--type-body-lg);color:var(--cream-ink-secondary);text-wrap:pretty}
.interlude a{color:var(--accent);display:inline-flex;gap:8px;align-items:center;margin-top:24px;font:var(--type-body-lg)}
.interlude a:hover{color:var(--accent-press)}

/* --- Forms ---------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font:var(--type-caption);letter-spacing:-.39px;color:var(--ink-secondary)}
.input,.textarea{
  width:100%;min-height:40px;padding:8px 12px;
  border:1px solid var(--hairline-input);border-radius:var(--r-input);
  background:var(--card);color:var(--ink);font:var(--type-body-md);
  transition:border-color var(--dur-colour) var(--ease)
}
.textarea{padding:12px;resize:vertical;min-height:120px}
.input::placeholder,.textarea::placeholder{color:rgba(255,255,255,.38)}
.input:hover,.textarea:hover{border-color:rgba(255,255,255,.4)}
.input:invalid:not(:placeholder-shown){border-color:var(--warning)}

.subject{display:flex;flex-wrap:wrap;gap:8px}
.subject input{position:absolute;opacity:0;pointer-events:none}
.subject label{
  cursor:pointer;padding:9px 14px;min-height:40px;display:inline-flex;align-items:center;
  border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.2);
  background:transparent;color:rgba(255,255,255,.7);font:var(--type-button-sm);
  transition:background-color var(--dur-colour) var(--ease),border-color var(--dur-colour) var(--ease),color var(--dur-colour) var(--ease)
}
.subject input:checked + label{background:rgba(83,58,253,.24);border-color:var(--accent-soft);color:#fff}
.subject input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}

.form-row{display:flex;flex-wrap:wrap;gap:10px}
.form-row .field{flex:1;min-width:200px}

.form-note{font:var(--type-micro);color:var(--ink-mute);text-wrap:pretty}
.form-status{font:var(--type-caption);letter-spacing:-.39px;margin:0}
.form-status[data-state="ok"]{color:var(--accent-soft)}
.form-status[data-state="error"]{color:var(--warning)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- CTA panel ------------------------------------------------------------ */
.cta-panel{
  border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--card);
  padding:clamp(28px,3.4cqi,48px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(28px,3.4cqi,48px);align-items:center
}
.browser-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.browser-list a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;
  padding:12px 16px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.2);
  color:#fff;font:var(--type-button-sm);text-decoration:none
}
.browser-list a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.browser-list a span{color:var(--accent-soft)}

/* --- Legal pages ---------------------------------------------------------- */
.legal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(32px,5cqi,72px);align-items:start}
.legal__toc{position:sticky;top:24px}
.legal__toc nav{margin-top:32px;display:flex;flex-direction:column;gap:2px;padding-top:20px;border-top:1px solid var(--hairline)}
.legal__toc a{padding:7px 0;font:var(--type-body-md);color:var(--ink-mute);text-decoration:none}
.legal__toc a:hover{color:#fff;text-decoration:none}
.legal__body{max-width:38em;display:flex;flex-direction:column;gap:36px}
.legal__body h2{margin-bottom:14px}
.legal__body p{font:var(--type-body-lg);color:var(--ink-secondary);text-wrap:pretty}
.legal__body p + p{margin-top:12px}
.legal__body ul{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.legal__body ul li{display:flex;gap:12px;font:var(--type-body-lg);color:var(--ink-secondary);text-wrap:pretty}
.legal__body ul li::before{content:"—";color:var(--accent);flex:none}
.legal__note{
  padding:20px;border:1px dashed rgba(255,255,255,.24);border-radius:var(--r-compact);
  font:var(--type-caption);letter-spacing:-.39px;color:var(--ink-mute);text-wrap:pretty
}
@media (max-width:719px){.legal__toc{position:static}}

/* --- Motion ---------------------------------------------------------------
   Nothing moves unless the user caused it. The only exception is the hero
   globe, which stops entirely under prefers-reduced-motion.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* --- Print ---------------------------------------------------------------- */
@media print{
  .header,.footer,.globe-slot,.nav__toggle,.menu{display:none}
  body{background:#fff;color:#000}
  .page{background-image:none}
}