/* ===== FONTS ===== */
/* Manrope, self-hosted so no request leaves the site. These are the
   variable files Google Fonts served (v20), so one file covers every
   weight the site uses (400, 600, 700, 800). Only the latin and latin-ext
   subsets are kept; unicode-range means latin-ext downloads only when a
   page has a character from it. index.html carries a copy of this block. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ===== BRAND ACCENT ===== */
  --accent:        #6B30C6;   /* default */
  --accent-hover:  #5929AA;   /* hover */
  --accent-press:  #47228C;   /* active / pressed */
  --accent-glow:   rgba(71, 34, 140, 0.4);   /* accent-press @ 40% — glow shadows */

  /* ===== STATUS ===== */
  --critical:      #F04438;   /* error borders, over-limit counters */
  --critical-text: #DB2E22;   /* error copy — darker, for contrast on light */
  /* Deliberate, do not darken. Figma text/critical -> critical/extra/200.
     4.31:1 on --offwhite is just under the 4.5:1 guideline, and that is
     accepted: an error message never stands alone - the --critical border
     on the field or checkbox carries it too, at 3.42:1 (3:1 needed).
     critical/extra/300 (#C5261B) is reserved for press states, like
     accent/extra/300. */
  --caution:       #FF8B00;                  /* caution/100 — the expired link badge on /mailing-list/confirm */
  --caution-40:    rgba(255, 139, 0, 0.40);  /* caution/40 — its halo */

  /* ===== BRAND NEUTRALS ===== */
  --dark:     #08091C;   /* dark/100 */
  --yellow:   #DFFF15;
  --white:    #FFFFFF;
  --offwhite: #F4F4F4;   /* grey/100 */
  --gray:     #E0E0E0;

  /* ===== TEXT ROLES ===== */
  --text-secondary: var(--dark-68);   /* dark/68 */

  /* ===== ALPHA LADDER — 4, 6, 10, 12, 14, 16, 40, 68, 88, 100 ===== */
  /* Note: the 40 step is deliberately 0.36 per the design system. */
  --dark-4:    rgba(8, 9, 28, 0.04);
  --dark-10:   rgba(8, 9, 28, 0.10);
  --dark-14:   rgba(8, 9, 28, 0.14);
  --dark-40:   rgba(8, 9, 28, 0.36);
  --dark-68:   rgba(8, 9, 28, 0.68);
  --dark-88:   rgba(8, 9, 28, 0.88);

  --accent-6:  rgba(107, 48, 198, 0.06);
  --accent-12: rgba(107, 48, 198, 0.12);
  --accent-16: rgba(107, 48, 198, 0.16);
  --accent-40: rgba(107, 48, 198, 0.40);
  --accent-68: rgba(107, 48, 198, 0.68);

  --white-10:  rgba(255, 255, 255, 0.10);
  --white-14:  rgba(255, 255, 255, 0.14);
  --white-40:  rgba(255, 255, 255, 0.36);
  --white-68:  rgba(255, 255, 255, 0.68);
  --white-88:  rgba(255, 255, 255, 0.88);

  --yellow-40: rgba(223, 255, 21, 0.40);

  /* ===== HOW IT WORKS — web-only pastel accents ===== */
  /* These are NOT brand colours. They exist only to differentiate the
     three step cards on the web landing page and must not be reused
     elsewhere or treated as part of the brand palette. */
  --hiw-yellow-bg:     rgba(223, 255, 21, 0.22);
  --hiw-yellow-text:   #4A5200;
  --hiw-yellow-pin:    #f0ff6e;

  --hiw-purple-bg:     #EDE3FA;
  --hiw-purple-text:   #47228C;
  --hiw-purple-pin:    #B98CE8;

  --hiw-blue-bg:       #DFF0F8;
  --hiw-blue-text:     #104F6A;
  --hiw-blue-pin:      #7ec8e3;
  --hiw-blue-pin-deep: #3a8fb5;   /* blue pin base — no brand equivalent */

  /* ===== TYPE SCALE ===== */
  /* Font sizes. Root is 16px, so 1rem = 16px. */
  --fs-h1:       clamp(2rem, 3.6vw, 3.25rem);   /* 32 → 52px, stays above every h2 */
  --fs-h2:       clamp(1.8rem, 3vw, 3rem);      /* 28.8 → 48px */
  --fs-h3:       1.15rem;      /* 18.4px */
  --fs-h3-sm:    1.1rem;       /* 17.6px — FAQ contact card */
  --fs-title-lg: 1.25rem;     /* 20px — design system Title Large; pair with --fw-title-lg, --lh-heading */
  --fs-body:     1rem;         /* 16px */
  --fs-body-sm:  0.9375rem;    /* 15px */
  --fs-label:    0.875rem;     /* 14px */
  --fs-caption:  0.8125rem;    /* 13px */
  --fs-overline: 0.75rem;      /* 12px */

  /* Line heights — one per size band. Four distinct values, no aliases,
     so no two tokens ever resolve to the same number. */
  --lh-heading:  1.2;   /* --fs-h1, --fs-h2, --fs-title-lg */
  --lh-h3:       1.3;   /* --fs-h3, --fs-h3-sm */
  --lh-label:    1.5;   /* --fs-label */
  --lh-text:     1.6;   /* --fs-body, --fs-body-sm, --fs-caption, --fs-overline */

  /* Shared heading treatment */
  --ls-heading: -0.02em;
  --fw-heading: 800;
  --fw-title-lg: 700;   /* Title Large/Bold */

  /* ===== SPACING SCALE ===== */
  /* The only vertical/gap values used on the page. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Gap between adjacent page sections — set once, here. */
  --section-gap: var(--space-24);

  --radius: 20px;
  --transition: 0.35s cubic-bezier(.4,0,.2,1);
}
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Manrope', system-ui, sans-serif;
  /* Matches the sections' own background so the --section-gap margins
     read as one continuous grey surface rather than white bands. */
  background: var(--offwhite);
  color: var(--dark);
  overflow-x: hidden;
  line-height: var(--lh-text);
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
/* No grey flash after a tap; press feedback comes from our own :active styles. */
a, button, input, select, textarea, label { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

/* ===== UTILS ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-label {
  display: inline-block;
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-6);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

/* ===== FOCUS — SHARED CHROME =====
   The nav is --dark-88 once scrolled and sits over the purple hero before that;
   the footer is --dark. Rings there take --yellow, since --accent would vanish
   into either. :focus-visible, so a pointer click does not draw them. */
.nav-logo:focus-visible,
.nav-links a:focus-visible,
.nav-cta:focus-visible,
.mobile-menu a:focus-visible,
.mobile-menu-cta:focus-visible,
.footer-col ul a:focus-visible,
.social-btn:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

/* ===== NAV ===== */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0 32px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: box-shadow var(--transition);
}
nav.scrolled {
  background: var(--dark-88);
  backdrop-filter: blur(16px);
  box-shadow: 0 2px 24px rgba(0,0,0,0.18);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--dark);
  transition: color var(--transition);
}
nav.scrolled .nav-logo { color: var(--white); }
/* The wordmark rides currentColor: accent on the light page, white once the
   nav darkens. Height only — width follows the aspect ratio. Scoped to the
   svg so the legal pages' text logo keeps its current colours. */
.nav-logo { min-height: 44px; }
.nav-logo svg {
  height: 28px;
  width: auto;
  display: block;
  color: var(--accent);
  transition: color var(--transition);
}
nav.scrolled .nav-logo svg { color: var(--white); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  color: var(--dark-68);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  transition: color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--dark); }
}

nav.scrolled .nav-links a { color: var(--white-68); }
@media (hover: hover) and (pointer: fine) {
  nav.scrolled .nav-links a:hover { color: var(--white); }
}

.nav-cta {
  background: var(--dark);
  color: var(--white);
  padding: 10px 22px;
  border-radius: 100px;
  font-weight: 600;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  transition: transform var(--transition), box-shadow var(--transition), background-color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--accent-glow);
}
}

nav.scrolled .nav-cta {
  background: var(--accent);
  color: var(--white);
}
@media (hover: hover) and (pointer: fine) {
  nav.scrolled .nav-cta:hover {
  background: var(--accent-hover);
  box-shadow: 0 8px 24px var(--accent-glow);
}
}

nav.scrolled .nav-cta:active { background: var(--accent-press); }
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  cursor: pointer;
}
.nav-hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: var(--transition);
}
nav.scrolled .nav-hamburger span { background: var(--white); }
/* The overlay underneath is light, so the header goes bare over it and
   its contents take the dark treatment. These sit after the .scrolled
   rules, so an open menu wins over a scrolled header. */
nav.menu-open {
  background: transparent !important;
  backdrop-filter: none;
  box-shadow: none;
}
nav.menu-open .nav-logo { color: var(--accent); }
nav.menu-open .nav-logo svg { color: var(--accent); }
nav.menu-open .nav-hamburger span { background: var(--dark); }
nav.menu-open .nav-hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
nav.menu-open .nav-hamburger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
nav.menu-open .nav-hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
/* Full-screen light overlay. It sits under the nav (z-index 99 vs 100),
   so the header stays visible on top; the top padding clears its 68px. */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--offwhite);
  padding: calc(68px + var(--space-6)) 24px 24px;
  z-index: 99;
  flex-direction: column;
  gap: 16px;
}
.mobile-menu.open { display: flex; }
/* Direct children only, so the social buttons keep their own component
   styles. Spacing separates items - no rules. */
.mobile-menu > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  color: var(--dark);
  font-size: var(--fs-h3);
  padding: 10px 0;
  text-align: center;
}
/* Pinned to the bottom of the overlay: the space above the socials is
   whatever the screen has left, not a fixed gap. */
.mobile-menu .footer-socials {
  margin-top: auto;
  justify-content: center;
}
/* The footer's component, recoloured for the light surface with the
   hairline and secondary-icon roles the light page uses elsewhere. */
.mobile-menu .social-btn {
  background: var(--dark-4);
  border-color: var(--dark-14);
  color: var(--text-secondary);
}
/* Yellow rings belong to the dark chrome; on the light overlay they
   would wash out, so rings here take the accent like the page. */
.mobile-menu a:focus-visible {
  outline-color: var(--accent);
}
.mobile-menu-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  background: var(--accent);
  color: var(--white) !important;
  font-weight: 600;
  font-size: var(--fs-body) !important;
  padding: 12px 36px !important;
  border-radius: 100px;
  text-align: center;
  margin-top: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .mobile-menu-cta:hover { background: var(--accent-hover); }
}

.mobile-menu-cta:active { background: var(--accent-press); }

/* ===== FOOTER ===== */
footer {
  background: var(--dark);
  padding: var(--space-12) 0 var(--space-8);
  color: var(--white-68);
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--white-10);
}
.footer-brand-name {
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}
.footer-brand-name svg { height: 32px; width: auto; display: block; }
.footer-brand p {
  font-size: var(--fs-label);
  margin-top: 12px;
  line-height: var(--lh-label);
  max-width: 260px;
}
.footer-col h4 {
  color: var(--white);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col ul a {
  color: var(--white-40);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  transition: color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .footer-col ul a:hover { color: var(--white); }
}

.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.social-btn {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--white-10);
  border: 1px solid var(--white-10);
  display: flex; align-items: center; justify-content: center;
  color: var(--white-68);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.social-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .social-btn:hover {
  background: var(--accent-16);
  border-color: var(--accent-40);
}
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { font-size: var(--fs-caption); }

/* ===== RESPONSIVE — header/footer, copied from the landing page ===== */
@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  nav { padding: 0 16px; }
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .nav-cta,
  .mobile-menu-cta { font-size: var(--fs-body); }
}

/* ==========================================================================
   LEGAL PAGE — long-form document layout (privacy, terms)
   Every value below comes from the existing token scale. No new colours,
   fonts, shadows or spacing steps are introduced.
   ========================================================================== */

.legal {
  /* Top clears the 68px fixed nav the way the hero does. The bottom used to
     come from the contact block's margin; now it is stated here so the last
     section still breathes before the footer. */
  padding: var(--space-24) var(--space-6);
  background: var(--offwhite);
}
.legal-container {
  max-width: 720px;
  margin: 0 auto;
  /* Manrope's standard ligatures draw "(c)" as ©, which corrupts GDPR
     references like Art. 6(1)(c). */
  font-variant-ligatures: no-common-ligatures;
}

/* --- Title block --- */
.legal h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--dark);
}
.legal-updated {
  margin-top: var(--space-2);          /* h1 → Last updated: 8px */
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--text-secondary);
}
.legal-intro {
  margin-top: var(--space-8);          /* Last updated → intro: 32px */
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--dark);
  max-width: 75ch;                     /* ~75 characters per line */
}

/* --- Sections --- */
.legal-section {
  margin-top: var(--space-12);        /* between sections: 48px */
  /* The id lives on the section, so this is what an #anchor jump targets.
     Keeps the heading clear of the 68px fixed nav. */
  scroll-margin-top: var(--space-24);
}
/* When there is no intro, the first section still clears the meta line by 32px */
.legal-updated + .legal-section { margin-top: var(--space-8); }

.legal-section h2 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-h3);
  letter-spacing: normal;
  color: var(--dark);
}
.legal-section h2 .legal-num {
  color: var(--text-secondary);
  margin-right: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.legal-section > * + * { margin-top: var(--space-4); }   /* h2 → p, p → p: 16px */
.legal-section > * + h3 { margin-top: var(--space-6); }  /* p → sub-heading: 24px */
.legal-section > h2 + h3 { margin-top: var(--space-4); }  /* h2 → first sub-heading: 16px */

.legal-section h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-text);
  color: var(--dark);
}
.legal-section strong { font-weight: 700; }

.legal-section p {
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--dark);
  max-width: 75ch;
}

/* --- Lists --- */
.legal-section ul {
  list-style: disc;
  padding-left: var(--space-6);
  max-width: 75ch;
}
.legal-section li {
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--dark);
}
.legal-section li + li { margin-top: var(--space-2); }   /* list items: 8px */
.legal-section ul ul {
  list-style: circle;
  margin-top: var(--space-2);                               /* item → nested list: 8px */
}

/* --- Tables: scroll horizontally on narrow screens --- */
.legal-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.legal-section table {
  border-collapse: collapse;
  width: 100%;
  /* Floor the table wider than a phone's content column (337px at 375px) so
     two prose columns keep a legible width and the wrapper scrolls, rather
     than the columns crushing down to a few words per line. Irrelevant at the
     720px desktop container, where the table is narrower than this anyway. */
  min-width: 380px;
  font-size: var(--fs-body);
  line-height: var(--lh-text);
}
.legal-section th,
.legal-section td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--gray);
  vertical-align: top;
}
.legal-section th {
  font-weight: 700;
  color: var(--dark);
  border-bottom-color: var(--dark-14);
}
.legal-section td { color: var(--dark); }
.legal-section tbody tr:last-child th,
.legal-section tbody tr:last-child td { border-bottom: none; }

/* --- Links --- */
.legal a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-40);
  text-underline-offset: 2px;
  transition: color var(--transition), text-decoration-color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .legal a:hover { color: var(--accent-hover); text-decoration-color: var(--accent-hover); }
}

.legal a:active { color: var(--accent-press); }
.legal a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .legal { padding: var(--space-24) var(--space-4); }   /* 24px → 16px sides */
  .legal-section { margin-top: var(--space-8); }
}