/* The home page at turritopsis.ai. One stylesheet for every page. It wears the app's look: one dark appearance, the
   design system's tokens (Design/design-system/tokens.json, named the same), Inter for the interface and SF Pro Rounded
   for anything the coach says. The app screens drawn here are the design system's components in HTML and CSS rather
   than pictures of them, so they stay sharp at any size and weigh almost nothing. There is no JavaScript. */

:root {
  color-scheme: dark;

  --surface-background: #070a0e;
  --surface-card: #182331;
  --surface-elevated: #12191d;
  --surface-raised: #1d314a;
  --surface-dark: #000000;
  --border-default: #1d2327;
  --border-accent: #272f2f;
  --stroke-subtle: #ffffff1a;
  --stroke-strong: #ffffff80;
  --text-primary: #f4f6f8;
  --text-secondary: #a5afba;
  --text-white: #ffffff;
  --text-on-accent: #070a0e;
  --accent-primary: #7ef2c7;
  --accent-secondary: #8bcbff;
  --accent-coral: #ff6467;
  --voice-red: #ff0000;
  --score-excellent: #7ed9b7;
  --score-good: #8bcbff;
  --glass-fill-top: #5eaeff47;
  --glass-fill-mid: #3b82f62e;
  --glass-fill-bottom: #2563eb1a;
  --glass-stroke: #8bcbff40;
  --coach-insight-base: #4667a9d9;
  --coach-insight-sheen: #ffffff33;
  --coach-insight-glow: #33e5bf2e;
  /* The Coach Insight surface's three layers, bottom to top from the last. */
  --insight:
    linear-gradient(180deg, var(--coach-insight-glow) 0%, #33e5bf0f 35%, #33e5bf00 100%),
    linear-gradient(180deg, var(--coach-insight-sheen) 0%, #ffffff26 40%, #ffffff00 100%),
    var(--coach-insight-base);

  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-rounded: "SF Pro Rounded", ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-pill: 999px;

  --shadow-glass: 0 10px 30px 0 rgba(0, 0, 0, 0.25);
  --glow-voice: 0 0 10.7px 0 rgba(255, 0, 0, 0.3), inset 0 0 6.1px 0 rgba(255, 0, 0, 0.1);
  --glow-primary: 0 8px 24px 0 rgba(126, 242, 199, 0.25);
  --blur-glass: 30px;

  --gutter: 20px;
  --section: 112px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 720px) {
  :root { --section: 72px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--surface-background);
  color: var(--text-primary);
  font: 400 17px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--accent-secondary); }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }

/* Header */

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--surface-background) 82%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--stroke-subtle);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }

.brand {
  display: flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none;
  font: 700 18px/1.21 var(--font-sans); letter-spacing: -0.3px;
}
.brand img { width: 34px; height: 34px; }
.brand, .glass-button { white-space: nowrap; }

/* The glass button, for the header's shortcut to the form: the one mint action stays the form's own. */
.glass {
  background: linear-gradient(180deg, var(--glass-fill-top) 0%, var(--glass-fill-mid) 45%, var(--glass-fill-bottom) 100%);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
}
.glass-button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--radius-pill);
  color: var(--text-primary); text-decoration: none; font: 600 14px/1 var(--font-sans);
  transition: opacity 180ms ease-out;
}
.glass-button:hover { opacity: 0.85; }

/* Type */

.overline {
  display: inline-block; margin-bottom: 16px;
  font: 800 12px/1.21 var(--font-sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent-primary);
}
.section-title {
  max-width: 18ch; font: 700 clamp(32px, 4.6vw, 48px)/1.08 var(--font-sans); letter-spacing: -1px;
}
.section-lede {
  max-width: 38rem; margin-top: 16px; font-size: clamp(17px, 1.6vw, 19px); color: var(--text-secondary);
}
.coach-voice { font-family: var(--font-rounded); }

/* Buttons and the signup form */

.primary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  border: 0; border-radius: var(--radius-pill); background: var(--accent-primary); color: var(--text-on-accent);
  font: 700 14px/1.21 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
  text-decoration: none; cursor: pointer; box-shadow: var(--glow-primary); transition: opacity 180ms ease-out;
}
.primary:hover { opacity: 0.9; }
.primary:active { opacity: 0.8; }

.signup { max-width: 30rem; }
.signup-row {
  display: flex; gap: 8px; padding: 6px; border-radius: var(--radius-pill);
  background: var(--surface-card); border: 1px solid var(--stroke-subtle);
}
.signup-row:focus-within { border-color: color-mix(in srgb, var(--accent-primary) 60%, transparent); }
.signup input[type="email"] {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 8px 0 18px; border: 0; background: none; outline: none;
  color: var(--text-primary); font: 400 17px/1.3 var(--font-sans); caret-color: var(--accent-primary);
}
.signup input[type="email"]::placeholder { color: #ffffff80; }
.signup-note { margin-top: 12px; font-size: 14px; color: var(--text-secondary); }
.signup-note svg { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }

/* A field people never see and bots fill in. Moved off screen rather than hidden, which some bots skip. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 480px) {
  .brand { font-size: 16px; gap: 8px; }
  .brand img { width: 30px; height: 30px; }
  .glass-button { padding: 0 14px; font-size: 13px; }
  .signup-row { flex-direction: column; border-radius: var(--radius-20); padding: 8px; }
  .signup input[type="email"] { padding-left: 12px; }
  .primary { width: 100%; }
}

/* Hero */

.hero { padding: 72px 0 var(--section); position: relative; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
.hero h1 {
  font: 800 clamp(44px, 7.4vw, 84px)/1.0 var(--font-sans); letter-spacing: -2.5px;
}
.hero h1 span { color: var(--accent-primary); }
.hero .lede { max-width: 34rem; margin: 24px 0 32px; font-size: clamp(18px, 1.8vw, 21px); color: var(--text-secondary); }
.hero .lede strong { color: var(--text-primary); font-weight: 600; }

@media (max-width: 900px) {
  .hero { padding-top: 48px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 56px; }
  .hero .phone { justify-self: center; }
}

/* The phone and the app screen inside it */

.phone {
  position: relative; width: 330px; max-width: 100%; aspect-ratio: 390 / 820; padding: 11px;
  border-radius: 54px; background: #0b0f14;
  box-shadow: 0 0 0 1px #ffffff1f, 0 0 0 7px #11161c, 0 0 0 8px #ffffff14, 0 40px 90px -20px rgba(0, 0, 0, 0.8);
}
/* A soft glow in the coach's insight color, so the screen reads as lit rather than as a black slab on black. */
.phone::before {
  content: ""; position: absolute; inset: -18% -30%; z-index: -1;
  background: radial-gradient(closest-side, #33e5bf26, #5b8cff14 55%, transparent);
}
.screen {
  position: relative; height: 100%; overflow: hidden; border-radius: 44px; background: var(--surface-background);
  display: flex; flex-direction: column; padding: 14px 16px 16px; gap: 12px; font-size: 14px; line-height: 20px;
}
.status-bar { display: flex; justify-content: space-between; align-items: center; padding: 2px 10px 0;
  font: 600 14px/1 var(--font-sans); }
.status-bar .island { width: 96px; height: 28px; border-radius: 20px; background: #000; }
.status-bar .glyphs { display: flex; gap: 5px; align-items: center; }
.status-bar .glyphs i { display: block; width: 16px; height: 10px; border-radius: 3px; border: 1.5px solid var(--text-primary); }
.status-bar .glyphs b { display: block; width: 4px; height: 10px; border-radius: 1px; background: var(--text-primary); }

.screen-head { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.screen-title { font: 700 17px/1.21 var(--font-sans); letter-spacing: -0.3px; }
.date-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-subtle); font: 600 11px/16px var(--font-sans);
}
.date-chip::before { content: ""; width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--accent-primary); }

.coach-says { font: 400 15px/21px var(--font-rounded); color: var(--text-primary); }

/* The Coach Insight surface, reserved for what the coach itself says. */
.insight, .bubble.insight { background: var(--insight); border: 1px solid #ffffff38; }

.readiness { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius-12); }
.readiness-badge {
  width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--accent-primary); color: var(--text-on-accent);
}
.readiness-badge .icon { width: 18px; height: 18px; stroke-width: 2; }
.readiness-text { flex: 1; min-width: 0; }
.readiness-title { font: 600 14px/19px var(--font-sans); }
.readiness-sub { font-size: 12px; line-height: 16px; color: #f4f6f8cc; }

.ring { position: relative; width: 62px; height: 62px; flex: none; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring .track { stroke: var(--surface-raised); }
.ring .value { stroke: var(--accent-primary); stroke-linecap: round; }
.ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-num { font: 700 18px/1.1 var(--font-sans); }
.ring-of { font-size: 10px; line-height: 1.2; color: var(--text-secondary); }

.scores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.score {
  padding: 10px 12px; border-radius: var(--radius-12); background: var(--surface-card);
  border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent);
}
.score-head { display: flex; align-items: center; gap: 6px; font: 600 13px/18px var(--font-sans); }
.score-head .icon { width: 15px; height: 15px; }
.score-value { margin-top: 4px; font: 700 18px/1.21 var(--font-sans); color: var(--tier); }
.score-tier { font: 600 11px/14px var(--font-sans); color: var(--tier); }

.screen .spacer { flex: 1; }

/* Suggestion chips: sample replies, in quotes, because they model what to say. */
.say-card {
  display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px;
  border: 1px solid var(--stroke-subtle); background: color-mix(in srgb, var(--surface-card) 70%, transparent);
}
.say-title { font: 700 10px/1.21 var(--font-sans); letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-secondary); }
.say { padding: 9px 14px; border-radius: var(--radius-pill); font: 500 13px/18px var(--font-sans); }

/* The voice bar, in its listening state: the red strands move as the person speaks. */
.voicebar { display: flex; align-items: center; gap: 10px; }
.circle {
  width: 50px; height: 50px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); color: var(--text-primary);
}
.circle.home { color: var(--accent-primary); }
.circle .icon { width: 20px; height: 20px; }
.capsule {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 14px 0 5px;
  border-radius: var(--radius-pill);
}
.talk {
  width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--voice-red); color: var(--text-white);
}
.talk .icon { width: 20px; height: 20px; stroke-width: 2.4; }
.talk.live { background: var(--text-white); border: 1.5px solid var(--voice-red); box-shadow: var(--glow-voice); }
.talk.live::after { content: ""; width: 16px; height: 16px; border-radius: 3px; background: var(--voice-red); }
.wave { flex: 1; min-width: 0; height: 28px; overflow: hidden; }
.wave svg { width: 200%; height: 100%; }
.wave path { fill: none; stroke: var(--voice-red); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.wave .s1 { animation: wave-slide 2.4s linear infinite, wave-breathe 1.9s ease-in-out infinite alternate; }
.wave .s2 { opacity: 0.72; animation: wave-slide 3.1s linear infinite, wave-breathe 2.3s ease-in-out infinite alternate-reverse; }
.wave .s3 { opacity: 0.45; animation: wave-slide 3.9s linear infinite reverse, wave-breathe 1.6s ease-in-out infinite alternate; }
.wave path { transform-origin: center; transform-box: fill-box; }
@keyframes wave-slide { to { translate: -50% 0; } }
@keyframes wave-breathe { from { scale: 1 0.35; } to { scale: 1 1; } }
.dots { flex: 1; display: flex; justify-content: space-between; align-items: center; height: 28px; }
.dots i { display: block; width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--voice-red); }
.dots i:nth-child(n+4):nth-child(-n+14) { width: 6px; height: 6px; }
.dots i:nth-child(n+7):nth-child(-n+11) { width: 7px; height: 7px; }

/* Sections */

.section { padding: var(--section) 0; border-top: 1px solid var(--stroke-subtle); }
.section-head { margin-bottom: 48px; }

/* Six apps */

.apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.app-tile {
  display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--radius-16);
  background: var(--surface-card); border: 1px solid var(--border-default);
}
.app-tile .badge {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
  border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--accent-primary);
}
.app-tile h3 { font: 600 18px/1.3 var(--font-sans); }
.app-tile p { font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.app-tile .replaces {
  margin-top: auto; padding-top: 8px; font: 800 11px/1.21 var(--font-sans); letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-secondary);
}
.app-tile .replaces s { text-decoration-color: var(--accent-coral); text-decoration-thickness: 1.5px; }

@media (max-width: 900px) { .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .apps { grid-template-columns: 1fr; } }

/* Insight, not a data dump */

.compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: stretch; }
.compare-arrow { display: flex; align-items: center; color: var(--text-secondary); }
.compare-label {
  margin-bottom: 12px; font: 800 12px/1.21 var(--font-sans); letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-secondary);
}
.compare-panel { display: flex; flex-direction: column; }
.data-dump {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px; border-radius: var(--radius-16);
  background: var(--surface-elevated); border: 1px solid var(--border-default);
}
.metric { padding: 12px; border-radius: var(--radius-10); background: var(--surface-card); }
.metric-name { font: 500 12px/1.21 var(--font-sans); color: var(--text-secondary); }
.metric-value { margin-top: 4px; font: 700 20px/1.21 var(--font-sans); font-variant-numeric: tabular-nums; }
.metric-value small { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.metric svg { width: 100%; height: 26px; margin-top: 8px; }
.metric svg path { fill: none; stroke: var(--accent-secondary); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0.7; }

.coach-card { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--radius-16); }
.coach-card-head { display: flex; align-items: center; gap: 8px; font: 800 12px/1.21 var(--font-sans);
  letter-spacing: 1px; text-transform: uppercase; }
.coach-card-head .icon { width: 18px; height: 18px; color: var(--accent-primary); }
.coach-card p { font: 400 18px/1.5 var(--font-rounded); }
.coach-card p strong { font-weight: 600; }

@media (max-width: 900px) {
  .compare { grid-template-columns: 1fr; }
  .compare-arrow { justify-content: center; transform: rotate(90deg); }
}

/* Talk, type or tap */

.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mode {
  display: flex; flex-direction: column; gap: 20px; padding: 24px; border-radius: var(--radius-16);
  background: var(--surface-card); border: 1px solid var(--border-default);
}
.mode h3 { font: 600 20px/1.3 var(--font-sans); }
.mode p { margin-top: 6px; font-size: 15px; color: var(--text-secondary); }
.mode-demo {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 150px; padding: 16px;
  border-radius: var(--radius-12); background: var(--surface-background); border: 1px solid var(--border-default);
}
.bubble {
  align-self: flex-end; max-width: 90%; padding: 10px 14px; border-radius: 18px 18px 4px 18px;
  background: var(--surface-card); border: 1px solid var(--stroke-subtle); font-size: 14px; line-height: 20px;
}
.bubble.coach { align-self: flex-start; border-radius: 18px 18px 18px 4px; font-family: var(--font-rounded); border: 1px solid #ffffff38; }
.draft {
  display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 6px 6px 6px 16px; border-radius: 25px;
  font-size: 14px;
}
.draft > span:first-child { flex: 1; }
.caret { display: inline-block; width: 1.5px; height: 18px; margin-left: 1px; vertical-align: -4px; background: var(--accent-primary);
  animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.send {
  width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--accent-primary); color: var(--text-on-accent);
}
.send .icon { width: 16px; height: 16px; stroke-width: 2.6; }
.set-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-10);
  background: var(--surface-card); font: 500 14px/1.21 var(--font-sans);
}
.set-row span:first-child { color: var(--text-secondary); width: 42px; }
.set-row span:nth-child(2) { flex: 1; font-variant-numeric: tabular-nums; }
.check {
  width: 24px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 1.5px solid var(--stroke-strong); color: var(--text-on-accent);
}
.check.done { background: var(--accent-primary); border-color: var(--accent-primary); }
.check .icon { width: 15px; height: 15px; stroke-width: 3; }

@media (max-width: 900px) { .modes { grid-template-columns: 1fr; } }

/* Goes deeper */

.depth { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.layer {
  position: relative; padding: 24px; border-radius: var(--radius-16); background: var(--surface-card);
  border: 1px solid var(--border-default);
}
.layer .icon { width: 28px; height: 28px; color: var(--accent-primary); margin-bottom: 18px; }
.layer h3 { font: 600 18px/1.3 var(--font-sans); }
.layer p { margin-top: 8px; font-size: 15px; color: var(--text-secondary); }
.tag {
  position: absolute; top: 22px; right: 20px; padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-subtle); font: 600 11px/1.21 var(--font-sans); color: var(--text-secondary);
}

@media (max-width: 1000px) { .depth { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .depth { grid-template-columns: 1fr; } }

/* Apple Health */

.health { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.flow { display: flex; flex-direction: column; gap: 12px; }
.flow-step {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-16);
  background: var(--surface-card); border: 1px solid var(--border-default);
}
.flow-step .icon { color: var(--accent-secondary); }
.flow-step strong { display: block; font: 600 16px/1.3 var(--font-sans); }
.flow-step span { font-size: 14px; color: var(--text-secondary); }
.flow-step.coach { border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent); }
.flow-step.coach .icon { color: var(--accent-primary); }
.flow-join { align-self: center; width: 1.5px; height: 20px; background: var(--stroke-strong); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-subtle); font: 500 14px/1.21 var(--font-sans);
}
.chip .icon { width: 16px; height: 16px; color: var(--accent-primary); }
.fine { margin-top: 20px; font-size: 14px; color: var(--text-secondary); }

@media (max-width: 900px) { .health { grid-template-columns: 1fr; gap: 40px; } }

/* Professionals and safety */

.trust { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
.trust-card { padding: 32px; border-radius: var(--radius-20); background: var(--surface-card); border: 1px solid var(--border-default); }
.trust-card h3 { font: 700 24px/1.25 var(--font-sans); letter-spacing: -0.3px; }
.trust-card p { margin-top: 12px; color: var(--text-secondary); }
.trust-card .icon { width: 32px; height: 32px; margin-bottom: 20px; color: var(--accent-primary); }
.trust-card.safety .icon { color: var(--accent-coral); }
.points { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.points li { display: flex; gap: 10px; font-size: 15px; }
.points .icon { width: 20px; height: 20px; margin: 2px 0 0; color: var(--accent-primary); }

@media (max-width: 900px) { .trust { grid-template-columns: 1fr; } }

/* Your data */

.privacy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.privacy div { padding: 24px; border-radius: var(--radius-16); border: 1px solid var(--stroke-subtle); }
.privacy .icon { color: var(--accent-secondary); margin-bottom: 14px; }
.privacy h3 { font: 600 17px/1.3 var(--font-sans); }
.privacy p { margin-top: 6px; font-size: 15px; color: var(--text-secondary); }

@media (max-width: 900px) { .privacy { grid-template-columns: 1fr; } }

/* Join */

.join { position: relative; overflow: hidden; }
.join::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 900px; height: 600px; translate: -50% -20%; z-index: -1;
  background: radial-gradient(closest-side, #33e5bf1f, #5b8cff0f 55%, transparent);
}
.join .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.join .section-title { max-width: none; }
.join .section-lede { margin-bottom: 32px; }
.join .signup { width: 100%; text-align: left; }
.join .signup-note { text-align: center; }
.join-mark { width: 72px; height: 72px; margin-bottom: 24px; }

/* Footer */

.site-footer { padding: 40px 0 56px; border-top: 1px solid var(--stroke-subtle); font-size: 14px; color: var(--text-secondary); }
.site-footer .wrap { display: grid; gap: 20px; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.footer-row nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-row a { color: var(--text-secondary); text-decoration: none; }
.footer-row a:hover { color: var(--text-primary); }
.disclaimer { max-width: 52rem; font-size: 13px; line-height: 1.55; }

/* The small pages a signup lands on */

.notice { min-height: calc(100vh - 65px); display: flex; align-items: center; padding: 64px 0; }
.notice .wrap { max-width: 36rem; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.notice h1 { font: 700 clamp(32px, 5vw, 44px)/1.1 var(--font-sans); letter-spacing: -1px; }
.notice p { color: var(--text-secondary); font-size: 18px; }
.notice .coach-line { padding: 18px 20px; border-radius: var(--radius-12); font: 400 17px/1.5 var(--font-rounded); color: var(--text-primary); }
.notice .signup { width: 100%; }
.error-text { color: var(--accent-coral); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wave .s1, .wave .s2, .wave .s3, .caret { animation: none; }
  .wave path { scale: 1 0.6; }
}