/* ------------------------------------------------------------ self-hosted fonts
   Jost + Geist (latin subsets from @fontsource) and a Phosphor icon subset that
   holds only the icons this site uses (4.5 KB instead of 147 KB from a CDN).
   To add an icon, re-subset Phosphor.ttf with its codepoint and add a rule here. */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/jost-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jost-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/jost-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/geist-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/geist-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/geist-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Phosphor";src:url("/fonts/phosphor-subset.woff2") format("woff2");font-weight:normal;font-style:normal;font-display:block}
.ph{font-family:"Phosphor"!important;speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;letter-spacing:0;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ph.ph-arrow-right:before{content:"\e06c"}
.ph.ph-caret-down:before{content:"\e136"}
.ph.ph-caret-left:before{content:"\e138"}
.ph.ph-caret-right:before{content:"\e13a"}
.ph.ph-check:before{content:"\e182"}
.ph.ph-check-circle:before{content:"\e184"}
.ph.ph-dots-three:before{content:"\e1fe"}
.ph.ph-equals:before{content:"\e21c"}
.ph.ph-gear:before{content:"\e270"}
.ph.ph-heart-straight:before{content:"\e2aa"}
.ph.ph-identification-card:before{content:"\e2c8"}
.ph.ph-instagram-logo:before{content:"\e2d0"}
.ph.ph-list:before{content:"\e2f0"}
.ph.ph-lock-simple:before{content:"\e308"}
.ph.ph-map-pin:before{content:"\e316"}
.ph.ph-pause:before{content:"\e39e"}
.ph.ph-plus:before{content:"\e3d4"}
.ph.ph-pulse:before{content:"\e000"}
.ph.ph-scales:before{content:"\e750"}
.ph.ph-seal-check:before{content:"\e606"}
.ph.ph-shield-check:before{content:"\e40c"}
.ph.ph-shield-warning:before{content:"\e412"}
.ph.ph-sliders-horizontal:before{content:"\e434"}
.ph.ph-sparkle:before{content:"\e6a2"}
.ph.ph-tiktok-logo:before{content:"\eaf2"}
.ph.ph-user-check:before{content:"\eafa"}
.ph.ph-user-focus:before{content:"\e6fc"}
.ph.ph-x:before{content:"\e4f6"}
.ph.ph-x-logo:before{content:"\e4bc"}
.ph.ph-warning-circle:before{content:"\e4e2"}
.ph.ph-users:before{content:"\e4d6"}
.ph.ph-chat-circle:before{content:"\e168"}
.ph.ph-flag:before{content:"\e244"}
.ph.ph-eye-slash:before{content:"\e224"}

/* ==========================================================================
   One to One - landing page styles
   Brand palette from the brand board; structure and atmosphere inspired by
   wope.com (dark canvas, spotlight glow, perspective grid, hairline panels,
   pill controls, accordion FAQ, glowing CTA card).
   Type: Jost (display, wordmark, labels) + Geist (body, UI).
   Radius rule: interactive = pill, containers = 20px, phone = 40px.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* palette */
  --bg: #0B0712;            /* cosmic black */
  --bg-2: #0F0819;
  --plum: #170226;          /* midnight plum */
  --violet: #2C1248;        /* deep violet */
  --aubergine: #4A1D6B;     /* royal aubergine */
  --uv: #7950A8;            /* ultraviolet */
  --lavender: #BDA6D8;      /* moonlit lavender */
  --opal: #F0EAF5;          /* pale opal */

  --ink: #F0EAF5;
  --body: #CFC4DD;
  --muted: #9A8DB0;
  --error: #E8B4C3;

  /* aurora (hero background). Two overlay tints plus the pulse cycle; the
     drifting blobs below read from --uv / --aubergine / --lavender. */
  --aurora-1: rgba(121, 80, 168, 0.22);
  --aurora-2: rgba(189, 166, 216, 0.13);
  --aurora-pulse: 10s;

  --line: rgba(189, 166, 216, 0.14);
  --line-strong: rgba(189, 166, 216, 0.28);
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);

  /* type */
  --font-display: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* shape */
  --r-card: 20px;
  --r-pill: 999px;
  --r-phone: 40px;

  /* layout */
  --container: 1200px;
  --gutter: 24px;
  --nav-h: 72px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
strong, b { font-weight: 600; }
::selection { background: rgba(121, 80, 168, 0.5); color: var(--opal); }

/* faint star field, fixed and cheap */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.65;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(240, 234, 245, 0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 8%, rgba(240, 234, 245, 0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 84% 42%, rgba(189, 166, 216, 0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 66%, rgba(240, 234, 245, 0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 88%, rgba(240, 234, 245, 0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 82%, rgba(189, 166, 216, 0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 74%, rgba(240, 234, 245, 0.3) 50%, transparent 51%);
  background-size: 1100px 900px;
}

/* --------------------------------------------------------------- type */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 6.2vw, 4.75rem); letter-spacing: -0.025em; line-height: 1.02; }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
h3 { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; }
h4 { font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--ink); letter-spacing: 0.01em; }

p { text-wrap: pretty; }
.lede { font-size: 1.125rem; color: var(--body); max-width: 56ch; }
.eyebrow {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lavender);
}
.statement {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
  max-width: 28ch;
  margin-top: 64px;
  text-wrap: balance;
}
.statement--inline { margin-top: 32px; font-size: clamp(1.25rem, 2vw, 1.625rem); }
.smallprint { font-size: 0.9rem; color: var(--muted); max-width: 64ch; margin-top: 32px; }

/* --------------------------------------------------------------- layout */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(80px, 9vw, 120px) 0; }
.section__head { max-width: 720px; display: grid; gap: 18px; }
.section__head--center { margin: 0 auto; text-align: center; justify-items: center; }
.section__head--center .lede { max-width: 48ch; }

/* --------------------------------------------------------------- components */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  border-radius: var(--r-pill);
  font: 500 0.9375rem/1 var(--font-body);
  letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: opacity 0.2s ease, transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn--primary {
  background: var(--opal); color: var(--bg);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}
.btn--primary:hover { opacity: 0.86; }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }
.btn--sm { height: 38px; padding: 0 16px; font-size: 0.875rem; }
.btn--lg { height: 52px; padding: 0 28px; font-size: 1rem; }
.btn__busy { display: none; }
.btn.is-busy { pointer-events: none; opacity: 0.7; }
.btn.is-busy .btn__label { display: none; }
.btn.is-busy .btn__busy { display: inline; }
.btn.is-busy .btn__busy::after { content: "…"; }

.pill {
  display: inline-block; padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lavender);
}

.panel {
  position: relative;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.panel__label {
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--lavender);
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--lavender); text-decoration: none; font-weight: 500; font-size: 0.9375rem;
  margin-top: 40px;
  transition: color 0.2s ease, gap 0.25s var(--ease);
}
.link-arrow:hover { color: var(--ink); gap: 12px; }
.link-arrow i { font-size: 1.1em; }

.glyph { color: var(--lavender); }

/* read by screen readers, never shown */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------- stellar buttons
   Dark glass pill. A cursor-tracked highlight rides the 1px border (transparent
   border + padding-box fill + border-box gradient) and a field of small
   four-point stars twinkles inside, masked to a circle around the pointer.
   Always on: with nobody hovering, the highlight centre (--ax/--ay) orbits the
   pill on a CSS animation. On hover or keyboard focus (.is-lit) the centre
   switches to --mx / --my, written by main.js in px (50% defaults centre it
   for focus). --cx / --cy is whichever pair is active. */
@property --ax { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --ay { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.btn--stellar {
  --mx: 50%;
  --my: 50%;
  --cx: var(--ax);
  --cy: var(--ay);
  position: relative;
  isolation: isolate;
  color: var(--ink);
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)) padding-box,
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(rgba(189, 166, 216, 0.18), rgba(189, 166, 216, 0.18)) border-box;
  animation: stellar-orbit 7s linear infinite;
}
.btn--stellar.btn--sm { animation-delay: -3.5s; }
.btn--stellar.is-lit { --cx: var(--mx); --cy: var(--my); }
.btn--stellar::before {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)) padding-box,
    linear-gradient(var(--bg), var(--bg)) padding-box,
    radial-gradient(120px circle at var(--cx) var(--cy),
      rgba(240, 234, 245, 0.95), rgba(189, 166, 216, 0.35) 45%, rgba(189, 166, 216, 0.14) 100%) border-box;
  opacity: 0.85;
  transition: opacity 0.32s ease;
  pointer-events: none;
}
.btn--stellar.is-lit::before { opacity: 1; transition-duration: 0.18s; }

.btn__stars {
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; overflow: hidden;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.32s ease;
  -webkit-mask-image: radial-gradient(90px circle at var(--cx) var(--cy), #000 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(90px circle at var(--cx) var(--cy), #000 0%, #000 40%, transparent 100%);
}
.btn--stellar.is-lit .btn__stars { opacity: 1; transition-duration: 0.18s; }
.btn__stars i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F0EAF5' d='M12 0C12 7.5 16.5 12 24 12 16.5 12 12 16.5 12 24 12 16.5 7.5 12 0 12 7.5 12 12 7.5 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: scale(0);
  animation: twinkle var(--dur) ease-in-out infinite var(--delay);
  will-change: transform, opacity;
}
.btn__stars i.is-lavender {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23BDA6D8' d='M12 0C12 7.5 16.5 12 24 12 16.5 12 12 16.5 12 24 12 16.5 7.5 12 0 12 7.5 12 12 7.5 12 0Z'/%3E%3C/svg%3E");
}
@keyframes stellar-orbit {
  0%    { --ax: 0%;   --ay: 50%; }
  12.5% { --ax: 15%;  --ay: 0%; }
  25%   { --ax: 50%;  --ay: 0%; }
  37.5% { --ax: 85%;  --ay: 0%; }
  50%   { --ax: 100%; --ay: 50%; }
  62.5% { --ax: 85%;  --ay: 100%; }
  75%   { --ax: 50%;  --ay: 100%; }
  87.5% { --ax: 15%;  --ay: 100%; }
  100%  { --ax: 0%;   --ay: 50%; }
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: rotate(var(--rot)) scale(0); }
  50% { opacity: 1; transform: rotate(calc(var(--rot) + 30deg)) scale(1); }
}

/* --------------------------------------------------------------- nav */
.scroll-sentinel { position: absolute; top: 48px; height: 1px; width: 1px; }
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(11, 7, 18, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark { width: 36px; height: auto; }
.brand__word {
  font-family: var(--font-display); font-weight: 400; font-size: 0.875rem;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--opal);
  transform: translateY(1px);
}
.nav__links { display: flex; gap: 32px; }
.nav__links a { color: var(--muted); text-decoration: none; font-size: 0.9375rem; transition: color 0.2s ease; }
.nav__links a:hover { color: var(--ink); }
.nav__actions { display: flex; align-items: center; gap: 12px; }
.nav__toggle {
  display: none; width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--ink); font-size: 1.25rem;
  place-items: center;
}
.nav__mobile {
  display: grid;
  background: rgba(11, 7, 18, 0.94);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  padding: 8px var(--gutter) 16px;
}
.nav__mobile[hidden] { display: none; }
.nav__mobile a { padding: 14px 4px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 1.125rem; border-bottom: 1px solid var(--line); }
.nav__mobile a:last-child { border-bottom: 0; }

/* --------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: min(100dvh, 960px);
  display: grid; align-items: center;
  padding: calc(var(--nav-h) + 48px) 0 56px;
  overflow: hidden;
  isolation: isolate;
}
/* aurora: two tinted radial washes that pulse together, plus three colour
   fields drifting on long mirrored cycles, all in brand ultraviolet,
   aubergine and lavender. The fields are radial gradients rather than
   blurred solids, so their soft edges cost nothing to composite and only
   transform animates. This is the deepest hero layer, under the grid. */
.hero__aurora {
  position: absolute; inset: 0; z-index: -3;
  pointer-events: none; overflow: hidden;
}
.hero__aurora-pulse {
  position: absolute; inset: -10%;
  background:
    radial-gradient(circle at 36% 32%, var(--aurora-1) 0%, transparent 62%),
    radial-gradient(circle at 66% 60%, var(--aurora-2) 0%, transparent 66%);
  opacity: 0.55;
  animation: aurora-pulse var(--aurora-pulse) ease-in-out infinite;
}
.hero__blob {
  position: absolute;
  width: 62%; height: 62%;
  border-radius: 50%;
  /* closest-side keeps the fade inside the box, so the field never meets its
     own edge and no seam shows against the canvas */
  background: radial-gradient(circle closest-side, var(--c) 0%, transparent 100%);
  opacity: 0.42;
  will-change: transform;
}
.hero__blob--uv {
  --c: rgba(121, 80, 168, 0.72);
  top: -24%; left: -20%;
  animation: aurora-drift-a 30s var(--ease) infinite alternate;
}
.hero__blob--aubergine {
  --c: rgba(74, 29, 107, 0.85);
  bottom: -26%; right: -20%;
  width: 66%; height: 66%;
  animation: aurora-drift-b 40s var(--ease) infinite alternate;
}
.hero__blob--lavender {
  --c: rgba(189, 166, 216, 0.3);
  top: 24%; left: 30%;
  width: 40%; height: 40%;
  opacity: 0.32;
  animation: aurora-drift-c 50s var(--ease) infinite alternate;
}
@keyframes aurora-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.68; transform: scale(1.06); }
}
@keyframes aurora-drift-a {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  to { transform: translate3d(6%, 4%, 0) scale(1.18); }
}
@keyframes aurora-drift-b {
  from { transform: translate3d(5%, 3%, 0) scale(1); }
  to { transform: translate3d(-6%, -4%, 0) scale(1.24); }
}
@keyframes aurora-drift-c {
  from { transform: translate3d(3%, -5%, 0) scale(0.92); }
  to { transform: translate3d(-4%, 6%, 0) scale(1.12); }
}

/* twinkling stars, injected by main.js into any .starfield. Each layer sets
   its own mask and stacking; the dots themselves are shared. The hero fades
   out before the section seam so nothing sparkles on the edge of the trust
   strip. Dots sit above the glow, behind the copy. */
.starfield {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
}
.starfield i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  border-radius: 50%; background: var(--c);
  opacity: 0; transform: scale(0.5);
  animation: star-twinkle var(--dur) ease-in-out infinite var(--delay);
  will-change: opacity, transform;
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: var(--peak); transform: scale(1); }
}
.hero__stars {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 64%, transparent 94%);
  mask-image: linear-gradient(180deg, #000 0%, #000 64%, transparent 94%);
}

.hero__grid {
  position: absolute; inset: 0; z-index: -2;
  pointer-events: none; overflow: hidden;
  perspective: 900px; perspective-origin: 50% 0%;
  -webkit-mask-image: radial-gradient(70% 88% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 92%);
  mask-image: radial-gradient(70% 88% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 92%);
}
.hero__grid::before {
  content: "";
  position: absolute; left: -40%; right: -40%; top: 0; bottom: -20%;
  background-image:
    linear-gradient(rgba(189, 166, 216, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(189, 166, 216, 0.13) 1px, transparent 1px);
  background-size: 120px 120px;
  transform-origin: 50% 0%;
  transform: rotateX(56deg);
}
.hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 34% at 50% 36%, rgba(121, 80, 168, 0.46), transparent 70%),
    radial-gradient(68% 46% at 50% 44%, rgba(74, 29, 107, 0.36), transparent 72%),
    linear-gradient(180deg, transparent 60%, var(--bg) 100%);
}
.hero__inner { text-align: center; display: grid; justify-items: center; }

.hero__mark { position: relative; width: 150px; height: 180px; margin-bottom: 20px; }
.hero__half {
  position: absolute; inset: 0;
  background: url("/assets/mark-300.png") center / contain no-repeat;
  background-image: image-set(url("/assets/mark-300.webp") type("image/webp"), url("/assets/mark-300.png") type("image/png"));
  filter: drop-shadow(0 0 24px rgba(189, 166, 216, 0.35));
}
.hero__half--l { clip-path: inset(0 50% 0 0); }
.hero__half--r { clip-path: inset(0 0 0 50%); }
.hero__core {
  position: absolute; left: 50%; top: 50%; width: 70%; height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(189, 166, 216, 0.55) 22%, transparent 60%);
  filter: blur(8px);
}

.hero__eyebrow { margin-bottom: 22px; }
.hero__title { max-width: 22ch; }
.hero__lede { margin-top: 26px; max-width: 58ch; font-size: 1.125rem; color: var(--body); }
.hero__cta { margin-top: 36px; }
.hero__meta {
  margin-top: 28px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0;
  font-size: 0.875rem; color: var(--muted);
}
.hero__meta strong { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.hero__meta span + span { padding-left: 14px; margin-left: 14px; border-left: 1px solid var(--line-strong); }

/* app status: where the build is, drawn as a small constellation under the
   CTA. Stages behind us are lit stars on a lit path, the current stage is the
   brightest point (flared like the core of the mark) and stages ahead are
   open rings on a dotted path. On a slow beat (motion rules below) a light
   runs the lit path into the current star, the star flares, and a streak
   shoots on toward the next stage, whose ring catches it. Only aria-current
   moves: every other state follows from it through sibling selectors, and
   main.js sets it from CONFIG.buildStage. */
.hero__status { margin-top: 52px; width: 100%; display: grid; justify-items: center; gap: 24px; }
.hero__status-label {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--lavender);
}
.hero__status-label::before,
.hero__status-label::after { content: ""; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
.hero__status-label::after { transform: scaleX(-1); }

.status { width: min(100%, 560px); display: grid; grid-template-columns: repeat(4, 1fr); }
.status__step {
  --dot: 11px;
  position: relative;
  display: grid; justify-items: center; gap: 14px;
  font-size: 0.875rem; line-height: 1.3; color: var(--body);
  white-space: nowrap;
}
/* markers. Done is a lit star. Current is opal inside a halo, with a glow
   (clear in the middle, because it paints above the dot) and a cross flare.
   Ahead is an open ring. */
.status__dot {
  position: relative; width: var(--dot); height: var(--dot); border-radius: 50%;
  background: radial-gradient(circle, var(--opal) 0 18%, var(--lavender) 42%, var(--uv) 100%);
  box-shadow: 0 0 10px rgba(121, 80, 168, 0.75);
}
.status__step[aria-current] { color: var(--ink); }
.status__step[aria-current] .status__dot {
  background: var(--opal);
  box-shadow: 0 0 0 5px rgba(240, 234, 245, 0.12), 0 0 16px 2px rgba(240, 234, 245, 0.45);
}
.status__step[aria-current] .status__dot::before,
.status__step[aria-current] .status__dot::after { content: ""; position: absolute; pointer-events: none; }
.status__step[aria-current] .status__dot::before {
  inset: -13px; border-radius: 50%;
  background: radial-gradient(circle closest-side, transparent 38%, rgba(189, 166, 216, 0.45) 50%, transparent);
  opacity: 0.7;
}
.status__step[aria-current] .status__dot::after {
  inset: -15px;
  background:
    linear-gradient(90deg, transparent, rgba(240, 234, 245, 0.9), transparent) 50% 50% / 100% 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(240, 234, 245, 0.9), transparent) 50% 50% / 1px 100% no-repeat;
  opacity: 0.7;
}
.status__step[aria-current] ~ .status__step { color: var(--muted); }
.status__step[aria-current] ~ .status__step .status__dot { background: none; box-shadow: inset 0 0 0 1.5px rgba(189, 166, 216, 0.42); }

/* path (::before) and the light that runs along it (::after). Each step
   draws the stretch from the previous marker to its own, stopping short of
   both so every marker sits in a little air. The light is parked off the
   end until the motion rules move it: a glint on lit stretches, a streak
   with a bright head on the stretch to the next stage, nothing further on. */
.status__step + .status__step::before,
.status__step + .status__step::after {
  content: "";
  position: absolute; top: calc(var(--dot) / 2 - 0.5px); height: 1px;
  left: calc(-50% + 15px); right: calc(50% + 15px);
}
.status__step + .status__step::before {
  background: linear-gradient(90deg, rgba(121, 80, 168, 0.9), rgba(189, 166, 216, 0.9));
  filter: drop-shadow(0 0 3px rgba(121, 80, 168, 0.9));
}
.status__step[aria-current]::before { background: linear-gradient(90deg, rgba(121, 80, 168, 0.9), var(--opal)); }
.status__step[aria-current] ~ .status__step::before {
  background: repeating-linear-gradient(90deg, rgba(189, 166, 216, 0.5) 0 2px, transparent 2px 6px);
  filter: none;
}
.status__step + .status__step::after { background: linear-gradient(90deg, transparent, var(--opal), transparent) -60% 0 / 40% 100% no-repeat; }
.status__step[aria-current] ~ .status__step::after { content: none; }
.status__step[aria-current] + .status__step::after {
  content: "";
  background: linear-gradient(90deg, transparent, var(--opal)) -60% 0 / 34% 100% no-repeat;
  filter: drop-shadow(0 0 3px rgba(240, 234, 245, 0.9));
}

/* --------------------------------------------------------------- trust strip
   The four USPs. Each cell carries a matching icon and, on hover, a cursor-
   following spotlight (--mx/--my written by main.js), a lifted glowing icon
   with a one-shot ring pulse, and brighter text. */
.trust { padding: 8px 0 0; }
.trust__list {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.trust__item {
  --mx: 50%;
  --my: 50%;
  position: relative; overflow: hidden;
  padding: 34px 28px 36px;
  display: grid; gap: 8px; align-content: start;
  border-left: 1px solid var(--line);
  transition: background 0.35s ease;
}
.trust__item:first-child { border-left: 0; }
.trust__item::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(121, 80, 168, 0.30), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.trust__item::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(189, 166, 216, 0.7), transparent);
  transform: scaleX(0);
  transition: transform 0.5s var(--ease);
}
.trust__item:hover { background: rgba(255, 255, 255, 0.02); }
.trust__item:hover::before { opacity: 1; }
.trust__item:hover::after { transform: scaleX(1); }

.trust__icon {
  position: relative;
  width: 48px; height: 48px; margin-bottom: 12px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--lavender); font-size: 1.45rem;
  transition: transform 0.4s var(--ease), border-color 0.3s ease, color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.trust__icon::after {
  content: "";
  position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid rgba(189, 166, 216, 0.7);
  opacity: 0;
}
.trust__item:hover .trust__icon {
  transform: translateY(-4px);
  color: var(--opal);
  border-color: rgba(189, 166, 216, 0.65);
  background: rgba(121, 80, 168, 0.28);
  box-shadow: 0 10px 30px -12px rgba(121, 80, 168, 0.8);
}
.trust__item:hover .trust__icon::after { animation: trust-ping 0.9s var(--ease) both; }
.trust__item:hover .trust__icon i { animation: trust-breathe 2.4s ease-in-out infinite; }
@keyframes trust-ping { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.8); } }
@keyframes trust-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.trust__item strong {
  position: relative;
  font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; color: var(--ink);
  letter-spacing: -0.01em;
}
.trust__desc { position: relative; color: var(--muted); font-size: 0.9375rem; transition: color 0.3s ease; }
.trust__item:hover .trust__desc { color: var(--body); }

/* --------------------------------------------------------------- ratio */
.ratio__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; }
.ratio__copy { display: grid; gap: 20px; }
.ratio__copy h2 { max-width: 16ch; margin-bottom: 10px; }
.ratio__copy strong { color: var(--ink); font-weight: 500; }
.ratio__pairs { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }

.ratio__panel { padding: 36px 36px 32px; overflow: hidden; }
.ratio__panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 110%, rgba(121, 80, 168, 0.28), transparent 70%);
}
.ratio__counters {
  position: relative;
  margin-top: 28px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.counter { display: grid; gap: 2px; }
.counter:last-child { text-align: right; }
.counter__num {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.75rem, 4.6vw, 4rem); letter-spacing: -0.03em; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.counter__lbl { color: var(--muted); font-size: 0.9375rem; }
.ratio__lock { display: grid; justify-items: center; gap: 10px; color: var(--lavender); font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.1em; }
.ratio__lock i {
  width: 52px; height: 52px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 1.35rem;
  border: 1px solid var(--line-strong); background: var(--surface-2);
}
.ratio__bar { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 6px; margin-top: 30px; }
.ratio__bar span { border-radius: var(--r-pill); background: linear-gradient(90deg, var(--uv), var(--lavender)); transform-origin: right center; }
.ratio__bar span:last-child { background: linear-gradient(90deg, var(--lavender), var(--uv)); transform-origin: left center; }
.ratio__note { position: relative; margin-top: 18px; font-size: 0.875rem; color: var(--muted); text-align: center; font-style: italic; }

/* --------------------------------------------------------------- verify */
.verify__steps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.verify__step { padding: 28px 32px 36px; display: grid; gap: 14px; align-content: start; }
.verify__step h3 span { color: var(--lavender); }
.verify__step p { color: var(--body); }
.verify__ui {
  height: 150px; margin-bottom: 14px;
  border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(44, 18, 72, 0.5), rgba(23, 2, 38, 0.3));
  display: grid; align-content: center; gap: 10px; padding: 18px;
  overflow: hidden;
}
.verify__ui--id { display: flex; align-items: center; justify-content: center; gap: 18px; }

.mini-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.mini-row--faded { opacity: 0.55; }
.mini-avatar { width: 32px; height: 32px; border-radius: var(--r-pill); flex: none; background: linear-gradient(135deg, var(--aubergine), var(--uv)); }
.mini-avatar--lg { width: 44px; height: 44px; }
.mini-lines { flex: 1; display: grid; gap: 6px; }
.mini-lines i { display: block; height: 6px; border-radius: var(--r-pill); background: rgba(189, 166, 216, 0.25); }
.mini-lines i:last-child { width: 60%; }
.mini-stamp { font-size: 0.72rem; font-weight: 500; color: var(--bg); background: var(--opal); padding: 4px 10px; border-radius: var(--r-pill); }
.mini-stamp--pending { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.mini-doc {
  width: 92px; height: 62px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04);
  display: grid; place-items: center; font-size: 1.7rem; color: var(--lavender);
}
.mini-doc--selfie { width: 62px; border-radius: var(--r-pill); }
.mini-match { width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--opal); color: var(--bg); display: grid; place-items: center; font-size: 0.95rem; flex: none; }

.verify__result { margin-top: 56px; max-width: 720px; display: grid; gap: 8px; }
.verify__result > p:first-child { font-size: 1.125rem; }

.ledger { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ledger__col { padding: 28px 28px; border-left: 1px solid var(--line); display: grid; gap: 14px; align-content: start; }
.ledger__col:first-child { border-left: 0; padding-left: 0; }
.ledger__col ul { display: grid; gap: 8px; }
.ledger__col li, .ledger__col p { font-size: 0.9375rem; color: var(--muted); }

/* --------------------------------------------------------------- the case */
.case { position: relative; }
.case::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent);
}
.case__inner { max-width: 760px; display: grid; gap: 22px; }
.case__inner h2 { max-width: 22ch; margin-bottom: 12px; }
.case__inner p { font-size: 1.125rem; }

/* --------------------------------------------------------------- interest bento */
.bento { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 48px; }
.bento__cell { padding: 28px 32px 36px; display: grid; gap: 14px; align-content: start; }
.bento__cell h3 .glyph { margin-right: 4px; }
.bento__cell--super { background: linear-gradient(180deg, rgba(121, 80, 168, 0.22), rgba(255, 255, 255, 0.01)); }
/* the Super Interest corner glow. It used to be a ::before on the card, but
   .starcard owns that pseudo now, so it lives in its own clipped layer and
   the card no longer needs overflow: hidden (which cut off the border light). */
.bento__glow {
  position: absolute; inset: 0;
  border-radius: inherit; overflow: hidden;
  pointer-events: none;
}
.bento__glow::before {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(189, 166, 216, 0.28), transparent 65%);
}
.interest__ui { position: relative; margin-bottom: 14px; padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(11, 7, 18, 0.45); }
.mini-profile { display: flex; align-items: center; gap: 14px; }
.mini-profile__meta { display: grid; gap: 2px; flex: 1; }
.mini-profile__meta b { color: var(--ink); font-weight: 500; font-size: 0.95rem; }
.mini-profile__meta em { font-style: normal; font-size: 0.78rem; color: var(--lavender); display: inline-flex; gap: 5px; align-items: center; }
.chip { border-radius: var(--r-pill); padding: 8px 14px; font-size: 0.8rem; border: 1px solid var(--line-strong); color: var(--ink); background: var(--surface-2); white-space: nowrap; }
.mini-mutual { margin-top: 14px; display: flex; gap: 10px; align-items: center; font-size: 0.85rem; color: var(--lavender); }
.mini-mutual__dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--lavender); box-shadow: 0 0 0 4px rgba(189, 166, 216, 0.18); }
.mini-stack { position: relative; height: 112px; }
.mini-stack__card { position: absolute; left: 0; right: 0; height: 56px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.mini-stack__card:nth-child(2) { top: 24px; transform: scale(0.94); opacity: 0.6; }
.mini-stack__card:nth-child(3) { top: 48px; transform: scale(0.88); opacity: 0.3; }
.mini-stack__card--top {
  top: 0; z-index: 1;
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  background: linear-gradient(90deg, rgba(121, 80, 168, 0.5), rgba(44, 18, 72, 0.75));
  border-color: rgba(189, 166, 216, 0.4); color: var(--ink); font-size: 0.85rem;
}

/* --------------------------------------------------------------- inside (phones) */
.inside__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; }
.screen figcaption { margin-top: 22px; font-size: 0.9375rem; color: var(--muted); line-height: 1.55; }
.screen figcaption strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 6px; }

.phone {
  border-radius: var(--r-phone);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #140B20;
  padding: 10px;
  aspect-ratio: 9 / 19.2;
  box-shadow: 0 50px 90px -50px rgba(10, 1, 24, 0.95), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.phone__screen {
  height: 100%;
  border-radius: calc(var(--r-phone) - 9px);
  overflow: hidden;
  background: linear-gradient(180deg, #170226 0%, #0B0712 100%);
  display: flex; flex-direction: column;
  font-size: 12px; line-height: 1.4; color: var(--body);
}
.app__topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 10px; color: var(--lavender); font-size: 16px; }
.app__mark { width: 18px; }
.app__topbar--title { color: var(--ink); }
.app__topbar--title b { font-family: var(--font-display); font-weight: 400; font-size: 17px; }
.app__count { min-width: 24px; height: 24px; padding: 0 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.08); display: grid; place-items: center; font-size: 11px; color: var(--ink); }

.app__photo {
  flex: 1; min-height: 0; margin: 0 10px; border-radius: 18px; position: relative; overflow: hidden;
  background:
    radial-gradient(60% 50% at 70% 30%, rgba(189, 166, 216, 0.35), transparent 70%),
    linear-gradient(160deg, #4A1D6B 0%, #2C1248 45%, #170226 100%);
}
.app__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 7, 18, 0.9), transparent 55%); }
.app__photo-meta { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; color: var(--ink); font-size: 11px; }
.app__photo-meta b { font-family: var(--font-display); font-weight: 400; font-size: 19px; width: 100%; }
.app__photo-meta span { display: inline-flex; gap: 4px; align-items: center; color: var(--lavender); }
.app__body { padding: 12px 14px 4px; display: grid; gap: 8px; }
.app__label { font-size: 11px; color: var(--muted); }
.app__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.app__tags span { font-size: 10.5px; padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink); }
.app__prompt { font-family: var(--font-display); font-size: 12.5px; color: var(--ink); font-style: italic; }
.app__actions { display: flex; gap: 8px; padding: 10px 14px 16px; margin-top: auto; }
.app__actions--stack { flex-direction: column; width: 100%; padding: 0; margin-top: 0; }
.app__btn { flex: 1; height: 36px; border-radius: var(--r-pill); display: grid; place-items: center; font-size: 11.5px; font-weight: 500; }
.app__btn--ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.app__btn--fill { background: var(--opal); color: var(--bg); }

.app__list { padding: 6px 12px; display: grid; gap: 8px; }
.app__card { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
.app__card b { display: flex; align-items: center; gap: 4px; color: var(--ink); font-size: 12px; font-weight: 500; }
.app__card b i { color: var(--lavender); }
.app__card p { margin: 2px 0 0; font-size: 10.5px; color: var(--muted); }
.app__card--super { background: linear-gradient(90deg, rgba(121, 80, 168, 0.38), rgba(44, 18, 72, 0.55)); border-color: rgba(189, 166, 216, 0.38); }
.app__card--super p { color: var(--body); }
.app__card-glyph { width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--opal); color: var(--bg); display: grid; place-items: center; flex: none; font-size: 13px; }
.app__card--faded { opacity: 0.5; }
.app__avatar { width: 34px; height: 34px; border-radius: var(--r-pill); flex: none; background: linear-gradient(135deg, var(--uv), var(--violet)); }
.app__avatar--b { background: linear-gradient(135deg, var(--aubergine), var(--lavender)); }
.app__avatar--c { background: linear-gradient(135deg, var(--violet), var(--uv)); }
.app__avatar--d { background: linear-gradient(135deg, var(--lavender), var(--aubergine)); }
.app__avatar--e { background: radial-gradient(circle at 30% 30%, var(--lavender), var(--aubergine) 70%); }
.app__avatar--lg { width: 72px; height: 72px; }
.app__empty { margin: auto 16px 16px; font-size: 10.5px; color: var(--muted); text-align: center; }

.app--align { align-items: center; justify-content: center; text-align: center; padding: 24px 18px; position: relative; }
.app__align-glow { position: absolute; inset: 0; background: radial-gradient(55% 38% at 50% 40%, rgba(121, 80, 168, 0.55), transparent 70%); }
.app__align-mark { width: 84px; position: relative; margin-bottom: 14px; filter: drop-shadow(0 0 18px rgba(189, 166, 216, 0.4)); }
.app__align-title { font-family: var(--font-display); font-size: 22px; color: var(--ink); margin-bottom: 6px; position: relative; }
.app__align-sub { font-size: 12px; color: var(--body); margin-bottom: 22px; position: relative; }

.app__me { display: grid; justify-items: center; gap: 6px; padding: 16px; text-align: center; }
.app__me b { display: flex; gap: 5px; align-items: center; color: var(--ink); font-weight: 500; font-size: 12.5px; margin-top: 6px; }
.app__me b i { color: var(--lavender); }
.app__me span { font-size: 11px; color: var(--muted); }
.app__rows { padding: 8px 12px; display: grid; gap: 6px; }
.app__rows div { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); color: var(--ink); font-size: 12px; }
.app__rows div i:first-child { color: var(--lavender); font-size: 14px; }
.app__rows div i:last-child { margin-left: auto; color: var(--muted); }

/* --------------------------------------------------------------- usp grid (what makes us different)
   Seven glass cards, each carrying its own slow field of stars clipped to
   the card (the page-level body::before field keeps the gutters alive). The
   outline light: one pointermove listener on
   .usp__grid (main.js) writes --mx/--my to every card relative to its own
   rect, so the hovered card lights fully and its neighbours catch a glancing
   light on the nearest edge. The ring is a 1px masked pseudo-element (a
   dual background-clip ring would tint a translucent face); a second pseudo
   adds a faint interior wash at the same point. */
.usp {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, rgba(23, 2, 38, 0.42) 18%, rgba(23, 2, 38, 0.42) 82%, transparent 100%);
}
.usp .container { position: relative; z-index: 1; }
/* per-card star layers, injected by main.js as the first child of every
   .starcard. The clip lives here (border-radius: inherit + overflow: hidden),
   never on the card, so the border glow at inset: -1px is not cut off. Dots
   breathe on 2.5-6s cycles, sparkles flare once per 6-9s cycle; the layer
   sits at 0.77 opacity at rest and lifts to 1 on hover. */
.starcard__stars {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; overflow: hidden;
  pointer-events: none;
  opacity: 0.72;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
/* the card under the pointer sharpens its own sky: the whole layer comes up
   and every star in it gains a halo. This is keyed to the card, not the grid,
   so only the one being hovered intensifies. Keyboard focus does the same. */
.starcard:hover .starcard__stars,
.starcard:focus-within .starcard__stars {
  opacity: 1;
  filter: brightness(1.4);
}
.starcard__stars i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  border-radius: 50%;
  color: var(--c); background: currentColor;
  opacity: 0; transform: scale(0.45);
  animation: card-twinkle var(--dur) ease-in-out infinite var(--delay);
  will-change: opacity, transform;
  transition: box-shadow 0.35s ease;
}
/* the halo is on the round dots only; a square glow behind a sparkle reads
   as a smudge, and the layer's brightness already lifts those */
.starcard:hover .starcard__stars i:not(.is-sparkle),
.starcard:focus-within .starcard__stars i:not(.is-sparkle) {
  box-shadow: 0 0 7px 0 currentColor;
}
/* dark for most of a long cycle, then one brief appearance */
.starcard__stars i.is-blink { animation-name: card-blink; }
/* sparkles stay out most of the cycle, then flare once with a quarter turn */
.starcard__stars i.is-sparkle {
  animation-name: card-sparkle; animation-timing-function: ease-in-out;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F0EAF5' d='M12 0C12 7.5 16.5 12 24 12 16.5 12 12 16.5 12 24 12 16.5 7.5 12 0 12 7.5 12 12 7.5 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* every star goes out completely between flares, rather than resting at a
   floor, so the field keeps rearranging itself as you watch it */
@keyframes card-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.45); }
  42%, 58% { opacity: var(--peak); transform: scale(1.1); }
}
@keyframes card-blink {
  0%, 64% { opacity: 0; transform: scale(0.3); }
  76% { opacity: var(--peak); transform: scale(1.15); }
  88%, 100% { opacity: 0; transform: scale(0.3); }
}
@keyframes card-sparkle {
  0%, 62%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  72% { opacity: var(--peak); transform: scale(1.35) rotate(45deg); }
  82% { opacity: 0.3; transform: scale(0.7) rotate(90deg); }
}

.usp__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-top: 56px; }
.usp__cell {
  padding: 24px 28px 32px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025)),
    linear-gradient(rgba(11, 7, 18, 0.45), rgba(11, 7, 18, 0.45));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: grid; gap: 12px; align-content: start;
}
.usp__cell--even { grid-column: 1 / span 7; }
.usp__cell--verified { grid-column: 8 / span 5; }
.usp__cell--approved { grid-column: 1 / span 4; }
.usp__cell--intentional { grid-column: 5 / span 4; }
.usp__cell--active { grid-column: 9 / span 4; }
.usp__cell--private { grid-column: 1 / span 5; }
.usp__cell--rare { grid-column: 6 / span 7; }

/* Shared card treatment: a star field behind the copy and a cursor-tracked
   light that rides the 1px border (::before) with a soft wash inside it
   (::after). main.js writes --mx / --my per card and puts .is-lit on the
   grid, so every card in a grid lights together while the one under the
   pointer is brightest. Used by the standards grid, the two verification
   steps and the Interest cards. A card only needs the .starcard class; its
   own padding, background and border stay where they are. */
.starcard {
  --mx: 50%;
  --my: 50%;
  position: relative; isolation: isolate;
}
/* Content clears the star layer. The :not() list matters: a bare
   `.starcard > *` has the same specificity as `.starcard__stars` and, coming
   later, would override its `position: absolute`, collapsing the layer to
   zero height and hiding every star. Excluding the decorative layers here
   leaves their own positioning intact. */
.starcard > *:not(.starcard__stars):not(.bento__glow) { position: relative; z-index: 1; }
.starcard::before {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; padding: 1px;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(240, 234, 245, 0.9), rgba(189, 166, 216, 0.30) 45%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.starcard::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(189, 166, 216, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.starcard-grid.is-lit .starcard::before, .starcard-grid.is-lit .starcard::after,
.starcard:focus-within::before, .starcard:focus-within::after { opacity: 1; transition-duration: 0.18s; }

.usp__icon { font-size: 1.5rem; color: var(--lavender); margin-top: 6px; }
.usp__cell h3 { font-size: 1.375rem; }
.usp__cell p { color: var(--muted); }

.usp__ui {
  position: relative; overflow: hidden;
  min-height: 150px; padding: 18px;
  border-radius: 14px; border: 1px solid var(--line);
  background: rgba(11, 7, 18, 0.38);
  display: grid; place-items: center; align-content: center; gap: 12px;
}
.usp__chip, .usp__caption { position: relative; }
.usp__caption { font-size: 0.8rem; color: var(--muted); text-align: center; }
.usp__arrow { color: var(--muted); font-size: 0.9rem; }
.chip--seal { display: inline-flex; align-items: center; gap: 6px; background: var(--opal); color: var(--bg); border-color: var(--opal); }
.chip--seal i { font-size: 0.95rem; }
.chip .ph-map-pin { color: var(--lavender); }

/* even: two facing columns of equal dots with a level line */
.usp__ui--even { grid-template-columns: 1fr; }
.usp__balance { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; gap: 22px; width: 100%; max-width: 360px; }
.usp__side { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; justify-items: end; }
.usp__side--men { justify-items: start; }
.usp__side span { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--lavender), var(--uv)); opacity: 0.9; }
.usp__side--men span { background: linear-gradient(135deg, var(--uv), var(--aubergine)); }
.usp__level { width: 1px; height: 64px; background: linear-gradient(180deg, transparent, var(--lavender), transparent); }

/* verified: id -> face -> seal */
.usp__strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.usp__ui--verified .mini-doc { width: 66px; height: 46px; font-size: 1.3rem; }
.usp__ui--verified .mini-doc--selfie { width: 46px; }

/* approved: four-node stepper, third lit */
.usp__stepper { display: grid; gap: 10px; width: 100%; max-width: 220px; font-size: 0.85rem; color: var(--muted); }
.usp__stepper li { display: flex; align-items: center; gap: 12px; position: relative; }
.usp__stepper li span {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  border: 1px solid var(--line-strong); background: transparent;
}
.usp__stepper li.is-done { color: var(--body); }
.usp__stepper li.is-done span { background: var(--uv); border-color: var(--uv); }
.usp__stepper li.is-on { color: var(--ink); }
.usp__stepper li.is-on span { background: var(--opal); border-color: var(--opal); box-shadow: 0 0 0 4px rgba(189, 166, 216, 0.22), 0 0 18px rgba(189, 166, 216, 0.6); }

/* intentional */
.usp__ui--intentional .mini-mutual { margin-top: 0; }

/* active: reuse mini rows */
.usp__ui--active { grid-template-columns: 1fr; align-content: center; }
.usp__ui--active .mini-row { width: 100%; }

/* private */
.usp__ui--private { grid-auto-flow: column; justify-content: center; align-items: center; gap: 16px; }
.usp__lock {
  width: 44px; height: 44px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 1.2rem; color: var(--lavender);
  border: 1px solid var(--line-strong); background: var(--surface-2);
}

/* rare alignment: orbit lines crossing at one bright point */
.usp__ui--rare { padding: 0; min-height: 190px; border-color: rgba(189, 166, 216, 0.2); background: radial-gradient(60% 80% at 50% 50%, rgba(121, 80, 168, 0.28), rgba(11, 7, 18, 0.35) 70%); }
.usp__orbits { width: 100%; height: 100%; display: block; }

/* --------------------------------------------------------------- how it works */
.how__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 32px; margin-top: 56px; }
.how__steps li { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line); }
.how__n { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--lavender); }
.how__steps h3 { font-size: 1.25rem; }
.how__steps p { color: var(--muted); font-size: 1rem; }
.how__cta { margin-top: 64px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.how__city { color: var(--muted); font-size: 0.9375rem; }

/* --------------------------------------------------------------- voices */
.voices__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px 24px; margin-top: 56px; }
.voice { padding-left: 24px; border-left: 1px solid var(--line-strong); display: grid; gap: 18px; align-content: start; }
.voice p { font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; line-height: 1.25; color: var(--ink); letter-spacing: -0.01em; }
.voice--lead { grid-column: 1 / span 7; }
.voice--lead p { font-size: clamp(1.75rem, 2.8vw, 2.375rem); }
.voice:nth-child(2) { grid-column: 8 / span 5; }
.voice:nth-child(3) { grid-column: 4 / span 6; margin-top: 8px; }
.voice footer { display: grid; gap: 2px; font-size: 0.9rem; }
.voice footer b { color: var(--ink); font-weight: 500; }
.voice footer span { color: var(--muted); }
.voices__count { margin-top: 64px; font-family: var(--font-display); font-size: 1.25rem; color: var(--muted); }
.voices__count strong { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- membership */
.membership__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.membership__copy { display: grid; gap: 20px; }
.membership__copy h2 { max-width: 14ch; }
.membership__copy .statement--inline { margin-top: 12px; }
.membership__never-title { color: var(--muted); font-size: 0.9375rem; margin-bottom: 8px; }
.membership__never li { display: flex; gap: 18px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--line); }
.membership__never li:last-child { border-bottom: 1px solid var(--line); }
.membership__never i { font-size: 1.4rem; color: var(--lavender); flex: none; margin-top: 2px; }
.membership__never b { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------- safety */
.safety__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; margin-top: 56px; }
.safety__grid li { display: grid; gap: 6px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line); }
.safety__grid li b { font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; color: var(--ink); }
.safety__grid li p { color: var(--muted); }
.safety__lead { grid-column: 1 / -1; display: flex !important; gap: 24px; align-items: center; padding: 28px 32px !important; border-top: 1px solid var(--line) !important; }
.safety__lead i { font-size: 2rem; color: var(--lavender); flex: none; }
.safety__lead b { font-size: 1.375rem; }
.safety__lead p { margin-top: 4px; }
.safety__links { display: flex; gap: 32px; flex-wrap: wrap; }
.safety__links .link-arrow { margin-top: 48px; }

/* --------------------------------------------------------------- waitlist */
.waitlist__card { padding: 72px 48px 64px; text-align: center; overflow: hidden; display: grid; justify-items: center; }
.waitlist__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 40% at 50% 0%, rgba(121, 80, 168, 0.5), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(121, 80, 168, 0.35), transparent 70%);
}
.waitlist__mark { position: relative; width: 72px; height: auto; filter: drop-shadow(0 0 22px rgba(189, 166, 216, 0.45)); }
.waitlist__head { position: relative; margin-top: 28px; display: grid; gap: 18px; justify-items: center; }
.waitlist__head p { max-width: 54ch; font-size: 1.125rem; }

.form { position: relative; width: 100%; max-width: 760px; margin-top: 48px; text-align: left; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.field { display: grid; gap: 8px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-size: 0.875rem; color: var(--ink); font-weight: 500; }
.field label em { font-style: normal; font-weight: 400; color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="number"], .field select {
  width: 100%; height: 48px; padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
  color: var(--ink); font: 400 1rem var(--font-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  -webkit-appearance: none; appearance: none;
}
.field input:hover, .field select:hover { border-color: var(--line-strong); }
.field input:focus, .field select:focus { outline: none; border-color: var(--lavender); box-shadow: 0 0 0 3px rgba(189, 166, 216, 0.18); background: rgba(255, 255, 255, 0.06); }
.field input[type="number"] { -moz-appearance: textfield; }
.field input::-webkit-outer-spin-button, .field input::-webkit-inner-spin-button { -webkit-appearance: none; }
.select { position: relative; }
.select select { padding-right: 44px; }
.select select:invalid { color: var(--muted); }
.select select option { color: var(--ink); background: var(--plum); }
.select i { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice label { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.choice span {
  display: grid; place-items: center; height: 48px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--body); font-weight: 400; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.choice input:checked + span { background: var(--opal); color: var(--bg); border-color: var(--opal); font-weight: 500; }
.choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(189, 166, 216, 0.28); }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400 !important; color: var(--body) !important; font-size: 0.9375rem !important; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--lavender); }
.check a { color: var(--lavender); }
.field__error { display: none; font-size: 0.8125rem; color: var(--error); }
.field.is-invalid .field__error { display: block; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid .choice span { border-color: var(--error); }

.form__submit { margin-top: 36px; display: grid; justify-items: center; gap: 18px; text-align: center; }
.form__note { font-size: 0.875rem; color: var(--muted); max-width: 52ch; }
.form__error { font-size: 0.9rem; color: var(--error); }
.form__error[hidden] { display: none; }

.waitlist__success { position: relative; margin-top: 40px; display: grid; justify-items: center; gap: 12px; max-width: 54ch; }
.waitlist__success[hidden] { display: none; }
.waitlist__success i { font-size: 2.5rem; color: var(--lavender); }
.waitlist__success h3 { font-size: 2rem; }
.waitlist__success p { font-size: 1.0625rem; }

/* --------------------------------------------------------------- faq
   Same night sky as the hero: a soft glow from the top edge and a field of
   twinkling stars behind the accordion. Both are decorative and sit behind
   the copy, so the section reads the same with JS off. */
.faq { position: relative; isolation: isolate; overflow: hidden; }
.faq__glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(46% 38% at 50% 0%, rgba(121, 80, 168, 0.3), transparent 72%),
    radial-gradient(80% 50% at 50% 6%, rgba(74, 29, 107, 0.22), transparent 76%);
}
.faq__stars {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 99%);
}

.faq__inner { max-width: 940px; }
.faq__inner .lede a { color: var(--lavender); text-decoration: none; transition: opacity 0.2s ease; }
.faq__inner .lede a:hover { opacity: 0.78; }

/* no rule above the first question: the list opens on the divider under it */
.faq__list { margin-top: 84px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 4px; text-align: left;
  font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--ink); line-height: 1.3;
  letter-spacing: -0.005em;
  transition: color 0.2s ease;
}
.faq__q:hover { color: var(--opal); }
.faq__q i { flex: none; color: var(--lavender); font-size: 1.25rem; transition: transform 0.35s var(--ease); }
.faq__q[aria-expanded="true"] i { transform: rotate(45deg); }
.faq__q:focus-visible { outline: 2px solid var(--lavender); outline-offset: -2px; border-radius: 8px; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 4px 28px; color: var(--muted); max-width: 68ch; }
.faq__a a { color: var(--lavender); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

/* --------------------------------------------------------------- legal pages
   Terms and Privacy. Same night sky as the hero and the FAQ over the title,
   then a single reading column. Body copy sits a little larger and looser
   than the landing page, because these are read rather than scanned. */
.legal {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--nav-h) + 72px) 0 56px;
}
.legal__glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(44% 70% at 50% 0%, rgba(121, 80, 168, 0.3), transparent 72%),
    radial-gradient(90% 80% at 50% 0%, rgba(74, 29, 107, 0.2), transparent 78%);
}
.legal__stars {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 96%);
}
.legal__head { max-width: 780px; display: grid; gap: 20px; justify-items: start; }
.legal__head h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.legal__meta {
  display: flex; flex-wrap: wrap; gap: 8px 0;
  font-size: 0.875rem; color: var(--muted);
}
.legal__meta span + span { padding-left: 14px; margin-left: 14px; border-left: 1px solid var(--line-strong); }

.legal__doc { max-width: 780px; padding-bottom: clamp(72px, 9vw, 120px); }

/* contents list, so a long document can be entered part of the way down */
.legal__toc {
  margin-bottom: 8px; padding: 26px 28px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
}
.legal__toc h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 0.75rem;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--lavender);
  margin-bottom: 18px;
}
.legal__toc ol { display: grid; gap: 10px; counter-reset: toc; }
.legal__toc li { counter-increment: toc; display: flex; gap: 12px; font-size: 0.9375rem; }
.legal__toc li::before { content: counter(toc) "."; color: var(--muted); min-width: 1.6em; font-variant-numeric: tabular-nums; }
.legal__toc a { color: var(--body); text-decoration: none; transition: color 0.2s ease; }
.legal__toc a:hover { color: var(--ink); }

.legal__section { margin-top: 52px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal__section > h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.5rem;
  color: var(--ink); letter-spacing: -0.01em; line-height: 1.2;
  padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
}
.legal__section h3 {
  font-size: 1.0625rem; font-family: var(--font-body); font-weight: 500;
  color: var(--ink); margin-top: 28px; margin-bottom: 10px;
}
.legal__section p { color: var(--body); }
.legal__section p + p { margin-top: 16px; }
.legal__section ul { display: grid; gap: 12px; margin-top: 16px; }
.legal__section li { position: relative; padding-left: 24px; color: var(--body); }
.legal__section li::before {
  content: ""; position: absolute; left: 6px; top: 0.72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--lavender);
}
.legal__section a { color: var(--lavender); }

/* the capitalised passages are conspicuous on purpose in the source
   documents, so they keep their emphasis here rather than being softened */
.legal__notice {
  margin-top: 22px; padding: 22px 24px;
  border: 1px solid var(--line-strong); border-radius: var(--r-card);
  background: var(--surface);
  font-size: 0.875rem; line-height: 1.7; letter-spacing: 0.01em; color: var(--body);
}
.legal__notice p + p { margin-top: 14px; }

.legal__contact { display: grid; gap: 4px; margin-top: 18px; color: var(--body); }

/* placeholders the source documents leave open; deliberately loud so they
   cannot be published unnoticed */
.legal__todo { color: var(--error); border-bottom: 1px dashed currentColor; }

@media (max-width: 680px) {
  .legal { padding-top: calc(var(--nav-h) + 40px); }
  .legal__toc { padding: 22px 20px; }
  .legal__section { margin-top: 40px; }
  /* the meta line wraps here, so the separators would start a line */
  .legal__meta { display: grid; gap: 4px; }
  .legal__meta span + span { padding-left: 0; margin-left: 0; border-left: 0; }
}


/* --------------------------------------------------------------- content pages
   The pillar pages (ratio, verification, how it works, standards, safety, FAQ,
   about) reuse the legal reading column above, plus these few pieces. */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.8125rem; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.nav__links a[aria-current="page"], .nav__mobile a[aria-current="page"] { color: var(--ink); }

.legal__section .steps { display: grid; gap: 14px; margin-top: 20px; counter-reset: step; }
.legal__section .steps li { counter-increment: step; padding-left: 44px; }
.legal__section .steps li::before {
  content: counter(step, decimal-leading-zero); left: 0; top: 0.1em; width: auto; height: auto;
  border-radius: 0; background: none; color: var(--lavender);
  font-family: var(--font-display); font-size: 0.9375rem; letter-spacing: 0.04em;
}
.legal__section .steps b { color: var(--ink); font-weight: 500; }
.legal__section .steps--big li { padding-top: 16px; border-top: 1px solid var(--line); }
.legal__section .steps--big li::before { top: 16px; }
.legal__section .statement { margin-top: 28px; }
.legal__section .ledger--page { margin-top: 8px; }
.legal__section .ledger--page li { padding-left: 0; }
.legal__section .ledger--page li::before { display: none; }
.legal__section .ledger--page h3 { margin-top: 0; }
.legal__section .faq__list--page { margin-top: 8px; }
.legal__section :is(ol, ul, div) + p { margin-top: 16px; }

.page-cta { margin-top: 72px; padding: clamp(28px, 4vw, 44px); display: grid; gap: 16px; justify-items: start; }
.page-cta h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.page-cta p { color: var(--body); max-width: 52ch; }

.related { margin-top: 56px; }
.related h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 0.75rem;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--lavender); margin-bottom: 18px;
}
.related__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.related__grid a {
  display: grid; gap: 4px; padding: 18px 20px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
  transition: border-color 0.2s ease;
}
.related__grid a:hover { border-color: var(--line-strong); }
.related__grid b { color: var(--ink); font-weight: 500; }
.related__grid span { color: var(--muted); font-size: 0.875rem; }
.faq__more { text-align: center; }
@media (max-width: 680px) {
  .related__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- footer */
/* The brand block and its sign-off on the left, three link columns on the
   right, then the alignment line (two paths meeting at one point of light,
   the brand idea in one quiet device) and a bottom row with the social
   buttons, the contact pill and the legal line. */
.footer { border-top: 1px solid var(--line); padding: 96px 0 44px; background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 40px 32px; align-items: start; }
.footer__brand { display: grid; gap: 26px; align-content: start; justify-items: start; }
.footer__signoff {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.5rem, 2.3vw, 1.875rem); line-height: 1.18; letter-spacing: -0.005em;
  color: var(--ink);
}
.footer__cta { margin-top: 2px; }

.footer__col { display: grid; gap: 14px; align-content: start; }
.footer .footer__heading {
  font-family: var(--font-display); font-weight: 400; font-size: 1rem; line-height: 1.3;
  letter-spacing: 0.01em; color: var(--ink);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer__col li { padding: 0; }
.footer__col li::before { content: none; }
.footer__col a {
  display: inline-block; padding: 6px 0;
  color: var(--muted); text-decoration: none; font-size: 0.9375rem; line-height: 1.4;
  transition: color 0.2s ease;
}
.footer__col a:hover { color: var(--ink); }
.footer__col a:focus-visible { color: var(--ink); outline: 2px solid var(--lavender); outline-offset: 3px; border-radius: 3px; }

/* alignment line: each path grows in from its own edge and they meet at the
   point of light. The drawn state is the default (no JS, reduced motion);
   main.js only plays the meeting once, when the line first comes into view. */
.footer__align { display: flex; align-items: center; margin-top: 88px; }
.footer__path { flex: 1; height: 1px; }
.footer__path--left { background: linear-gradient(90deg, rgba(189, 166, 216, 0.04), rgba(189, 166, 216, 0.5)); transform-origin: 0 50%; }
.footer__path--right { background: linear-gradient(270deg, rgba(189, 166, 216, 0.04), rgba(189, 166, 216, 0.5)); transform-origin: 100% 50%; }
.footer__star { position: relative; flex: none; width: 34px; height: 34px; margin: 0 6px; }
.footer__star::before, .footer__star::after {
  content: ""; position: absolute; left: 50%; top: 50%; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--opal), transparent);
}
.footer__star::before { width: 34px; height: 1.5px; transform: translate(-50%, -50%); }
.footer__star::after { width: 1.5px; height: 22px; transform: translate(-50%, -50%); background: linear-gradient(180deg, transparent, var(--opal), transparent); }
.footer__star span {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--opal);
  box-shadow: 0 0 10px 2px rgba(240, 234, 245, 0.55), 0 0 28px 8px rgba(121, 80, 168, 0.55);
}
.js .footer__align.is-waiting .footer__path { transform: scaleX(0); }
.js .footer__align.is-waiting .footer__star { opacity: 0; transform: scale(0.4); }
.js .footer__align.is-met .footer__path { transition: transform 1.6s var(--ease); }
.js .footer__align.is-met .footer__star { transition: opacity 0.6s ease 1.15s, transform 0.9s var(--ease) 1.15s; }

.footer__bottom {
  margin-top: 28px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px 32px;
  font-size: 0.875rem; color: var(--muted);
}
.footer__legal { grid-column: 1 / -1; }
.footer__legal [data-var="legalEntity"] { white-space: nowrap; }

/* social: labelled glass pills, the same height as the contact pill. On hover
   or focus the icon turns opal, the ring lavender and an ultraviolet glow
   blooms behind it. */
.footer__social { display: flex; flex-wrap: wrap; gap: 10px; }
.footer__social a {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 20px 0 16px;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--body); font-family: var(--font-display); font-size: 0.9875rem; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.35s ease, transform 0.35s var(--ease);
}
.footer__social a i { font-size: 1.25rem; color: var(--lavender); transition: color 0.25s ease; }
.footer__social a::before {
  content: ""; position: absolute; inset: -6px; z-index: -1; border-radius: inherit;
  background: radial-gradient(closest-side, rgba(121, 80, 168, 0.45), transparent);
  opacity: 0; transform: scale(0.7);
  transition: opacity 0.35s ease, transform 0.45s var(--ease);
}
.footer__social a:hover, .footer__social a:focus-visible {
  color: var(--opal); border-color: rgba(189, 166, 216, 0.55); background: rgba(121, 80, 168, 0.18);
  box-shadow: 0 0 18px rgba(121, 80, 168, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}
.footer__social a:hover i, .footer__social a:focus-visible i { color: var(--opal); }
.footer__social a:hover::before, .footer__social a:focus-visible::before { opacity: 1; transform: scale(1.1); }
.footer__social a:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }

/* contact pill: the public address and a round copy button in one compact
   capsule on the right of the footer's bottom row. The button stays hidden
   without JS (main.js unhides it); the address is a mailto either way.
   Copying swaps the icon for a check, lights the button in lavender and
   floats a small "Copied" tag above it for two seconds. */
.contact-pill {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 5px 0 18px;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-pill:hover, .contact-pill:focus-within { border-color: var(--line-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 24px rgba(121, 80, 168, 0.18); }
.contact-pill__email {
  font-family: var(--font-display); font-size: 0.9875rem; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  background: linear-gradient(90deg, var(--lavender), var(--opal)) 0 100% / 0 1px no-repeat;
  padding-bottom: 1px;
  transition: background-size 0.45s var(--ease);
}
.contact-pill__email:hover, .contact-pill__email:focus-visible { background-size: 100% 1px; }
.contact-pill__email:focus-visible { outline: 2px solid var(--lavender); outline-offset: 4px; border-radius: 2px; }
.contact-pill__copy {
  position: relative; flex: none;
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--lavender);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.35s ease, transform 0.15s ease;
}
.contact-pill__copy[hidden] { display: none; }
.contact-pill__copy:hover { color: var(--ink); border-color: rgba(189, 166, 216, 0.5); background: var(--surface-2); }
.contact-pill__copy:active { transform: scale(0.94); }
.contact-pill__copy:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }
.contact-pill__icon {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.contact-pill__icon--done { display: none; }
.contact-pill__copy::after {
  content: "Copied";
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  padding: 5px 10px; border-radius: var(--r-pill);
  border: 1px solid rgba(189, 166, 216, 0.45); background: var(--plum);
  color: var(--opal); font: 500 0.75rem/1 var(--font-body); white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 16px rgba(121, 80, 168, 0.35);
  opacity: 0; transform: translate(-50%, 4px); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.35s var(--ease);
}
.contact-pill__copy.is-copied {
  color: var(--opal); border-color: rgba(189, 166, 216, 0.65); background: rgba(121, 80, 168, 0.25);
  box-shadow: 0 0 0 4px rgba(189, 166, 216, 0.1), 0 0 20px rgba(121, 80, 168, 0.5);
}
.contact-pill__copy.is-copied::after { opacity: 1; transform: translate(-50%, 0); }
.contact-pill__copy.is-copied .contact-pill__icon--copy { display: none; }
.contact-pill__copy.is-copied .contact-pill__icon--done { display: block; animation: copy-pop 0.4s var(--ease); }
@keyframes copy-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* --------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.8s var(--ease) var(--d, 0s), transform 0.8s var(--ease) var(--d, 0s);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }

  /* hero: the two paths converge, then the shared point lights up */
  .hero__half--l { animation: mark-left 1.6s var(--ease) both; }
  .hero__half--r { animation: mark-right 1.6s var(--ease) both; }
  .hero__core { opacity: 0; animation: mark-core 1.4s ease-out 0.9s both; }
  .hero__eyebrow, .hero__title, .hero__lede, .hero__cta, .hero__meta, .hero__status { animation: rise 1s var(--ease) both; }
  .hero__eyebrow { animation-delay: 0.55s; }
  .hero__title { animation-delay: 0.65s; }
  .hero__lede { animation-delay: 0.8s; }
  .hero__cta { animation-delay: 0.95s; }
  .hero__meta { animation-delay: 1.1s; }
  .hero__status { animation-delay: 1.25s; }
  .hero__glow { animation: glow-in 1.8s ease-out both; }

  /* app status. Entrance: the current star lights up. Then every 5.6s a light runs each
     lit stretch in turn (0.7s apiece); as it arrives the current star flares
     and its label glints, and a streak shoots on toward the next stage,
     whose ring catches it. The breathing halo runs at half the beat and
     peaks on each arrival.

     Timings depend on how far along the rail a stage sits, so they are set
     per position. The light runs a lit stretch at
     3.2s, 3.9s, 4.6s; a stage lights up as current at 1.8s to 2.4s
     (--t-light), the light reaches it at --t-arrive (3.2s plus 0.7s per
     stretch before it), its halo breathes from a quarter beat earlier
     (--t-breathe) and the streak toward it leaves 0.2s after the previous
     stage's arrival.

     The lit path itself does not animate: a scaleX draw-in on it froze in
     Chrome as a stub at the first frame. The light and streak animations
     are written out with literal times. */
  .status__step:nth-child(2)::after { animation: status-flow 5.6s linear 3.2s infinite; }
  .status__step:nth-child(3)::after { animation: status-flow 5.6s linear 3.9s infinite; }
  .status__step:nth-child(4)::after { animation: status-flow 5.6s linear 4.6s infinite; }
  .status__step[aria-current] + .status__step:nth-child(2)::after { animation: status-run 5.6s linear 3.4s infinite; }
  .status__step[aria-current] + .status__step:nth-child(3)::after { animation: status-run 5.6s linear 4.1s infinite; }
  .status__step[aria-current] + .status__step:nth-child(4)::after { animation: status-run 5.6s linear 4.8s infinite; }

  .status__step:nth-child(1) { --t-light: 1.8s; --t-arrive: 3.2s; --t-breathe: 1.8s; }
  .status__step:nth-child(2) { --t-light: 2s; --t-arrive: 3.9s; --t-breathe: 2.5s; --t-run: 3.4s; }
  .status__step:nth-child(3) { --t-light: 2.2s; --t-arrive: 4.6s; --t-breathe: 3.2s; --t-run: 4.1s; }
  .status__step:nth-child(4) { --t-light: 2.4s; --t-arrive: 5.3s; --t-breathe: 3.9s; --t-run: 4.8s; }
  .status__step[aria-current] { animation: status-glint 5.6s ease-out var(--t-arrive) infinite; }
  .status__step[aria-current] .status__dot { animation: status-light 0.9s ease-out var(--t-light) backwards; }
  .status__step[aria-current] .status__dot::before { animation: status-breathe 2.8s ease-in-out var(--t-breathe) infinite; }
  .status__step[aria-current] .status__dot::after { animation: status-flare 5.6s ease-out var(--t-arrive) infinite; }
  .status__step[aria-current] + .status__step .status__dot { animation: status-catch 5.6s linear var(--t-run) infinite; }

  .ratio__bar span { transform: scaleX(0); transition: transform 1.2s var(--ease) 0.2s; }
  .is-in .ratio__bar span { transform: scaleX(1); }
}
@keyframes mark-left { from { transform: translateX(-56px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mark-right { from { transform: translateX(56px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mark-core { from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes glow-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes status-light { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes status-breathe {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.2); }
}
/* the rest run once per 5.6s beat: 12.5% is the 0.7s the light spends on a stretch */
@keyframes status-flow {
  0% { background-position: -60% 0; }
  12.5%, 100% { background-position: 160% 0; }
}
@keyframes status-flare {
  0%, 30%, 100% { opacity: 0.7; transform: none; }
  6% { opacity: 1; transform: scale(1.45); }
}
@keyframes status-glint {
  0%, 30%, 100% { text-shadow: 0 0 0 rgba(189, 166, 216, 0); }
  6% { text-shadow: 0 0 14px rgba(189, 166, 216, 0.9); }
}
@keyframes status-run {
  0% { background-position: -60% 0; }
  16%, 100% { background-position: 160% 0; }
}
@keyframes status-catch {
  0%, 10%, 30%, 100% { box-shadow: inset 0 0 0 1.5px rgba(189, 166, 216, 0.42); }
  13% { box-shadow: inset 0 0 0 1.5px rgba(240, 234, 245, 0.95), 0 0 12px 1px rgba(189, 166, 216, 0.6); }
}
/* the same runs downward, for the upright rail on narrow screens */
@keyframes status-flow-down {
  0% { background-position: 0 -60%; }
  12.5%, 100% { background-position: 0 160%; }
}
@keyframes status-run-down {
  0% { background-position: 0 -60%; }
  16%, 100% { background-position: 0 160%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn--stellar {
    background:
      linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)) padding-box,
      linear-gradient(var(--bg), var(--bg)) padding-box,
      linear-gradient(rgba(189, 166, 216, 0.32), rgba(189, 166, 216, 0.32)) border-box;
  }
  .btn--stellar::before, .btn__stars { display: none; }
  .hero__aurora-pulse { opacity: 0.55; }
  .starfield i { opacity: 0.28; transform: none; }
  .starcard__stars { opacity: 1; }
  .starcard__stars i { opacity: 0.3; transform: none; }
  .starcard::before, .starcard::after { display: none; }
  .js .footer__align.is-waiting .footer__path, .js .footer__align.is-waiting .footer__star { opacity: 1; transform: none; }
}
@media (hover: none), (pointer: coarse) {
  .starcard::before, .starcard::after { display: none; }
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .voice--lead { grid-column: 1 / span 12; }
  .voice:nth-child(2) { grid-column: 1 / span 6; }
  .voice:nth-child(3) { grid-column: 7 / span 6; margin-top: 0; }
}

@media (max-width: 1024px) {
  .ratio__grid { grid-template-columns: 1fr; gap: 48px; }
  .ratio__copy h2 { max-width: 20ch; }
  .usp__grid { grid-template-columns: 1fr 1fr; }
  .usp__cell { grid-column: auto / span 1; }
  .usp__cell--even, .usp__cell--verified, .usp__cell--rare { grid-column: 1 / -1; }
  .membership__grid { grid-template-columns: 1fr; gap: 48px; }
  .bento { grid-template-columns: 1fr; }
  .bento__glow::before { inset: -30% -20% auto auto; width: 50%; }

  .inside__track {
    display: flex; overflow-x: auto; gap: 20px;
    scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter);
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  }
  .screen { flex: 0 0 min(76vw, 300px); scroll-snap-align: start; }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: grid; }

  /* four columns stop fitting: the brand block takes its own row and the
     three link columns share the next */
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 40px); }
  .hero__mark { width: 118px; height: 142px; }
  .hero__meta { flex-direction: column; align-items: center; gap: 8px; }
  .hero__meta span + span { padding-left: 0; margin-left: 0; border-left: 0; }

  .trust__list { grid-template-columns: 1fr 1fr; }
  .trust__item { padding: 26px 20px 28px; }
  .trust__list li:nth-child(3) { border-left: 0; }
  .trust__list li:nth-child(n + 3) { border-top: 1px solid var(--line); }

  .ratio__panel { padding: 28px 24px 26px; }
  .verify__steps { grid-template-columns: 1fr; }
  .ledger { grid-template-columns: 1fr; }
  .ledger__col { border-left: 0; padding: 22px 0; border-top: 1px solid var(--line); }
  .ledger__col:first-child { border-top: 0; }

  .how__steps { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .voice:nth-child(2), .voice:nth-child(3) { grid-column: 1 / span 12; }
  .safety__grid { grid-template-columns: 1fr; }
  .safety__lead { flex-direction: column; align-items: flex-start; gap: 14px; }

  .waitlist__card { padding: 56px 24px 48px; }
  .form__grid { grid-template-columns: 1fr; }
  .field--full { grid-column: auto; }
  .footer { padding-top: 72px; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 24px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__align { margin-top: 64px; }
  .footer__bottom { grid-template-columns: 1fr; justify-items: start; }
}

@media (max-width: 680px) {
  .usp__grid { grid-template-columns: 1fr; gap: 16px; }
  .usp__cell, .usp__cell--even, .usp__cell--verified, .usp__cell--rare { grid-column: auto; }
  .usp__cell { padding: 22px 22px 28px; }
  .starcard::before, .starcard::after { display: none; }
}

@media (max-width: 520px) {
  .btn--sm { padding: 0 14px; font-size: 0.8125rem; }
  .brand__word { display: none; }
  .footer .brand__word { display: inline; }  /* the nav needs the room; the footer doesn't */

  /* four labels no longer fit on one line, so the rail stands up: a marker
     beside each label and the path running down between them. Same states
     and the same beat, with the runs turned downward. */
  .hero__status { margin-top: 44px; gap: 16px; }
  .status { width: auto; grid-template-columns: none; }
  .status__step { grid-template-columns: var(--dot) auto; justify-items: start; align-items: center; gap: 14px; padding: 12px 0; }
  .status__step + .status__step::before,
  .status__step + .status__step::after {
    top: calc(-50% + 12px); bottom: calc(50% + 12px); height: auto;
    left: calc(var(--dot) / 2 - 0.5px); right: auto; width: 1px;
  }
  .status__step + .status__step::before {
    background: linear-gradient(180deg, rgba(121, 80, 168, 0.9), rgba(189, 166, 216, 0.9));
  }
  .status__step[aria-current]::before { background: linear-gradient(180deg, rgba(121, 80, 168, 0.9), var(--opal)); }
  .status__step[aria-current] ~ .status__step::before { background: repeating-linear-gradient(180deg, rgba(189, 166, 216, 0.5) 0 2px, transparent 2px 6px); }
  .status__step + .status__step::after {
    background: linear-gradient(180deg, transparent, var(--opal), transparent) 0 -60% / 100% 40% no-repeat;
    animation-name: status-flow-down;
  }
  .status__step[aria-current] + .status__step::after { background: linear-gradient(180deg, transparent, var(--opal)) 0 -60% / 100% 34% no-repeat; }
  .status .status__step[aria-current] + .status__step::after { animation-name: status-run-down; }  /* outranks the per-position rules */
  .trust__list { grid-template-columns: 1fr; }
  .trust__list li { border-left: 0; border-top: 1px solid var(--line); }
  .trust__list li:first-child { border-top: 0; }
  .how__steps { grid-template-columns: 1fr; }
  .ratio__counters { gap: 8px; }
  .counter__num { font-size: 2.5rem; }
  .ratio__lock i { width: 44px; height: 44px; }
  .footer__col a { padding: 10px 0; }
  .footer__col ul { gap: 0; }
}