:root {
  color-scheme: light;
  --canvas: #f8f4f7;
  --paper: #fffdfd;
  --ink: #211821;
  --ink-secondary: #6d616b;
  --brand: #7b1e58;
  --brand-pressed: #611642;
  --brand-soft: #f4e5ed;
  --spark: #ee4776;
  --spark-soft: #ffe6ee;
  --night: #2b192c;
  --champagne: #f4cda5;
  --line: #e8dde5;
  --control: #9a8996;
  --success: #246b56;
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --band: clamp(64px, 8vw, 96px);
  --gutter: clamp(20px, 4vw, 48px);
  --radius-control: 14px;
  --radius-media: 18px;
  --radius-panel: 24px;
  --shadow-sm: 0 12px 32px rgba(54, 25, 45, 0.08);
  --shadow-lg: 0 32px 80px rgba(54, 25, 45, 0.16);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --max: 1200px;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1.0625rem, 1rem + 0.18vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  --text-2xl: clamp(1.875rem, 1.45rem + 1.3vw, 2.75rem);
  --text-hero: clamp(2.5rem, 2rem + 3vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
::selection { color: var(--paper); background: var(--brand); }
img { display: block; max-width: 100%; height: auto; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
button, summary, [role="tab"] { cursor: pointer; }
:focus-visible { outline: 3px solid var(--spark); outline-offset: 4px; }

.skip-link {
  position: fixed;
  z-index: 50;
  top: var(--sp-2);
  left: var(--sp-2);
  min-width: 44px;
  min-height: 44px;
  padding: 10px var(--sp-2);
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-140%);
  transition: transform 160ms var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  padding: 12px var(--gutter) 0;
  pointer-events: none;
}
.nav-shell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: min(100%, var(--max));
  min-height: 64px;
  margin: 0 auto;
  padding: 0 12px 0 var(--sp-3);
  border: 1px solid rgba(123, 30, 88, 0.12);
  border-radius: var(--radius-media);
  background: rgba(255, 253, 253, 0.88);
  box-shadow: 0 8px 24px rgba(54, 25, 45, 0.08);
  backdrop-filter: blur(20px) saturate(150%);
  pointer-events: auto;
}
.wordmark {
  display: inline-flex;
  align-items: baseline;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
}
.brand-i { position: relative; display: inline-block; }
.heart {
  position: absolute;
  left: 54%;
  bottom: 87%;
  color: var(--spark);
  font-family: sans-serif;
  font-size: 0.42em;
  line-height: 1;
  transform: translateX(-50%) rotate(8deg);
  transform-origin: center;
}
.desktop-nav { display: flex; justify-content: center; gap: var(--sp-4); padding: 0 var(--sp-4); }
.desktop-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
  transition: color 160ms var(--ease-out);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 52px;
  padding: 14px var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 120ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.button:active, .menu-button:active, [role="tab"]:active { transform: scale(0.97); }
.button-small { min-height: 44px; padding: 10px 18px; font-size: var(--text-sm); }
.button-primary { background: var(--brand); color: var(--paper); }
.button-primary:active { background: var(--brand-pressed); }
.button-light { background: var(--paper); color: var(--night); }
.menu-button { display: none; width: 48px; height: 48px; border: 0; background: transparent; border-radius: 12px; }
.menu-button svg { margin: auto; }
.mobile-menu {
  width: min(100%, var(--max));
  margin: 8px auto 0;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
}
.mobile-menu a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--sp-2); border-radius: 10px; text-decoration: none; font-weight: 650; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  width: min(100%, calc(var(--max) + 2 * var(--gutter)));
  min-height: calc(100dvh - 88px);
  margin: -76px auto 0;
  padding: 152px var(--gutter) var(--sp-10);
  gap: var(--sp-10);
}
.hero-copy { position: relative; z-index: 2; }
.hero-kicker, .eyebrow {
  margin: 0 0 var(--sp-2);
  color: var(--brand);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
h1 {
  max-width: 760px;
  margin-bottom: var(--sp-3);
  font-size: var(--text-hero);
  font-weight: 750;
  letter-spacing: -0.055em;
  line-height: 1.04;
}
h1 span { color: var(--brand); }
.hero-lede { max-width: 54ch; margin-bottom: var(--sp-4); color: var(--ink-secondary); font-size: var(--text-lg); line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: var(--sp-3); }
.text-link { display: inline-flex; align-items: center; min-height: 52px; gap: var(--sp-1); color: var(--brand); font-weight: 700; }

.hero-visual { position: relative; min-width: 0; height: min(68vw, 680px); max-height: 680px; }
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 7% 3% 4% 9%;
  border-radius: 46% 54% 49% 51% / 42% 43% 57% 58%;
  background: var(--brand-soft);
  transform: rotate(-4deg);
}
.portrait { overflow: hidden; border-radius: var(--radius-media); background: #eadde5; box-shadow: var(--shadow-lg); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait-label { position: absolute; z-index: 3; top: 16px; left: 16px; padding: 7px 10px; border-radius: 999px; background: rgba(255,253,253,.92); color: var(--brand); font-size: var(--text-xs); font-weight: 800; box-shadow: var(--shadow-sm); }
.portrait-main { position: absolute; inset: 2% 10% 6% 14%; transform: rotate(2deg); }
.profile-glance {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(300px, 52%);
  padding: var(--sp-3);
  border: 1px solid rgba(123, 30, 88, 0.12);
  border-radius: var(--radius-panel);
  background: rgba(255, 253, 253, 0.94);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(16px);
}
.glance-top { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-xl); font-weight: 750; letter-spacing: -0.03em; }
.verified { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--brand); color: var(--paper); font-size: 0.8rem; }
.profile-glance p { margin: 4px 0 12px; color: var(--ink-secondary); font-size: var(--text-sm); }
.glance-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.glance-chips span { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.mode-orbit { position: absolute; display: flex; align-items: center; gap: var(--sp-1); min-height: 44px; padding: 10px 14px; border-radius: 999px; background: var(--night); color: var(--paper); box-shadow: var(--shadow-sm); font-size: var(--text-sm); font-weight: 700; }
.mode-orbit svg { width: 18px; height: 18px; }
.mode-orbit-dating { top: 0; right: 3%; transform: rotate(4deg); }
.mode-orbit-parent { left: 3%; bottom: 18%; transform: rotate(-5deg); }

.value-strip {
  display: flex;
  flex-wrap: nowrap;
  width: min(calc(100% - 2 * var(--gutter)), var(--max));
  margin: 0 auto;
  overflow-x: auto;
  border-block: 1px solid var(--line);
  scrollbar-width: none;
}
.value-strip::-webkit-scrollbar { display: none; }
.value-strip > div { display: flex; flex: 1 0 auto; align-items: center; justify-content: center; min-height: 88px; gap: var(--sp-1); padding: 0 var(--sp-3); color: var(--ink-secondary); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.value-strip svg { width: 20px; color: var(--brand); }

.section { width: min(100%, calc(var(--max) + 2 * var(--gutter))); margin: 0 auto; padding: var(--band) var(--gutter); }
.section-heading { max-width: 760px; margin-bottom: var(--sp-6); }
.section-heading.centered { margin-inline: auto; text-align: center; }
h2 { margin-bottom: var(--sp-3); font-size: var(--text-2xl); font-weight: 720; letter-spacing: -0.045em; line-height: 1.1; }
h3 { margin-bottom: var(--sp-2); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.section-heading > p:last-child, .profile-copy > p, .genetics-copy > p, .tour-copy > p { max-width: 60ch; color: var(--ink-secondary); line-height: 1.65; }

.path-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 520px);
  margin: 0 auto var(--sp-6);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
  background: rgba(255, 253, 253, 0.7);
}
.path-switch button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; gap: var(--sp-1); border: 0; border-radius: 12px; background: transparent; color: var(--ink-secondary); font-weight: 700; transition: transform 120ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.path-switch button[aria-selected="true"] { background: var(--brand); color: var(--paper); box-shadow: 0 8px 20px rgba(123, 30, 88, 0.18); }
.path-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);
  align-items: center;
  min-height: 720px;
  padding: var(--sp-8);
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--night);
  color: var(--paper);
  box-shadow: var(--shadow-lg);
  gap: var(--sp-8);
}
.path-panel[hidden] { display: none; }
.path-panel.is-changing { opacity: 0.65; transform: translateY(8px); }
.path-panel { transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
.path-copy { align-self: center; }
.path-number { display: inline-block; margin-bottom: var(--sp-3); color: var(--champagne); font-size: var(--text-sm); font-weight: 750; }
.path-copy h3 { max-width: 600px; font-size: clamp(2rem, 1.55rem + 1.6vw, 3rem); }
.path-copy > p { max-width: 52ch; color: #eadfe8; }
.check-list { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 30px; color: #f4ebf1; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--champagne); font-weight: 800; }
.device-frame { position: relative; width: min(100%, 340px); margin: 0 auto; padding: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 42px; background: #161016; box-shadow: 0 32px 64px rgba(0, 0, 0, 0.28); }
.device-frame::before { content: ""; position: absolute; z-index: 2; top: 14px; left: 50%; width: 32%; height: 22px; border-radius: 999px; background: #161016; transform: translateX(-50%); }
.device-frame img { width: 100%; border-radius: 34px; }
.tilted-right { transform: rotate(3deg) translateY(56px); }
.tilted-left { transform: rotate(-3deg) translateY(56px); }

.profile-section { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: var(--sp-12); }
.profile-art { position: relative; min-width: 0; min-height: 660px; }
.profile-art::before { content: ""; position: absolute; inset: 6% 10% 5% 3%; border-radius: 38% 62% 56% 44% / 42% 42% 58% 58%; background: var(--spark-soft); }
.portrait-secondary { position: absolute; inset: 0 18% 8% 6%; }
.profile-snapshot { position: absolute; display: flex; align-items: center; width: min(300px, 58%); gap: var(--sp-2); padding: var(--sp-2); border: 1px solid rgba(123, 30, 88, 0.12); border-radius: var(--radius-media); background: rgba(255, 253, 253, 0.96); box-shadow: var(--shadow-sm); }
.profile-snapshot svg { flex: 0 0 auto; width: 24px; color: var(--brand); }
.profile-snapshot span { display: grid; font-size: var(--text-sm); font-weight: 700; line-height: 1.35; }
.profile-snapshot small { color: var(--ink-secondary); font-size: var(--text-xs); font-weight: 600; }
.snapshot-one { right: 0; top: 18%; }
.snapshot-two { right: 3%; bottom: 8%; }
.icon-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--sp-4); border-block: 1px solid var(--line); }
.icon-facts > div { display: flex; min-width: 0; align-items: center; gap: var(--sp-2); padding: var(--sp-3) 0; }
.icon-facts > div:nth-child(odd) { padding-right: var(--sp-3); }
.icon-facts > div:nth-child(even) { padding-left: var(--sp-3); border-left: 1px solid var(--line); }
.icon-facts svg { flex: 0 0 auto; color: var(--brand); }
.icon-facts span { display: grid; min-width: 0; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.icon-facts small { color: var(--ink-secondary); font-size: var(--text-xs); font-weight: 600; }

.planning-section { padding-top: var(--sp-8); }
.planning-grid { display: grid; grid-template-columns: 1.35fr 0.65fr 0.9fr; grid-template-rows: auto auto; gap: 6px; }
.planning-card { display: flex; min-width: 0; min-height: 220px; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-4); overflow: hidden; border-radius: var(--radius-media); background: var(--paper); }
.planning-card h3 { font-size: var(--text-lg); }
.planning-card span { display: block; margin-bottom: var(--sp-1); color: var(--brand); font-size: var(--text-sm); font-weight: 750; }
.planning-icon { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.planning-featured { grid-row: span 2; min-height: 446px; flex-direction: column; justify-content: flex-end; background: var(--brand); color: var(--paper); }
.planning-featured .planning-icon { background: rgba(255, 255, 255, 0.14); color: var(--paper); }
.planning-featured span { color: var(--champagne); }
.planning-featured p { color: #eadfe8; }
.planning-photo { position: relative; grid-row: span 2; min-height: 446px; padding: 0; background: var(--brand-soft); }
.planning-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; transform: scale(1.01); }

.introduction-section { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; gap: var(--sp-10); }
.intro-copy > p { max-width: 44ch; }
.intro-actions { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.save-demo { display: inline-flex; min-height: 48px; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 750; }
.save-demo[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.save-status { color: var(--ink-secondary); font-size: var(--text-sm); }
.reply-demo { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--paper); box-shadow: var(--shadow-sm); }
.reply-context { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-3); }
.reply-context img { width: 88px; height: 88px; border-radius: 20px; object-fit: cover; }
.reply-context div { display: grid; gap: 4px; }
.reply-context span, .reply-demo label, .intro-preview > span { color: var(--brand); font-size: var(--text-sm); font-weight: 800; }
.reply-context strong { font-size: 1rem; line-height: 1.45; }
.reply-demo label { display: block; margin-bottom: 8px; color: var(--ink-secondary); }
.reply-demo textarea { width: 100%; min-height: 108px; padding: 16px; resize: vertical; border: 1px solid var(--line); border-radius: 16px; background: var(--canvas); color: var(--ink); font: inherit; line-height: 1.5; }
.reply-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-top: var(--sp-2); color: var(--ink-secondary); font-size: var(--text-sm); }
.reply-footer button { min-height: 44px; padding: 8px 14px; border-radius: 999px; background: var(--brand); color: var(--paper); font-weight: 750; }
.intro-preview { margin-top: var(--sp-2); padding: var(--sp-2); border-radius: 16px; background: var(--spark-soft); }
.intro-preview p { margin: 4px 0; color: var(--ink); font-weight: 700; }
.intro-preview small { color: var(--ink-secondary); }

.genetics-section { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: var(--sp-10); }
.guardrails { display: grid; margin-top: var(--sp-4); border-top: 1px solid var(--line); }
.guardrails > div { display: flex; gap: var(--sp-2); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.guardrails svg { flex: 0 0 auto; color: var(--brand); }
.guardrails span { display: grid; gap: 2px; }
.guardrails small { color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.5; }
.genetics-visual { position: relative; min-height: 720px; }
.genetics-visual::before { content: ""; position: absolute; inset: 0 0 14% 10%; border-radius: 40% 60% 44% 56% / 52% 42% 58% 48%; background: var(--brand-soft); }
.genetics-device { position: absolute; top: 0; left: 4%; width: min(310px, 58%); transform: rotate(-3deg); }
.dna-path { position: absolute; z-index: 3; right: 0; top: 14%; width: min(360px, 60%); padding: var(--sp-3); border: 1px solid rgba(123, 30, 88, 0.12); border-radius: var(--radius-panel); background: rgba(255, 253, 253, 0.96); box-shadow: var(--shadow-lg); }
.journey-label { display: block; margin-bottom: 8px; color: var(--brand); font-size: var(--text-xs); line-height: 1.4; text-transform: uppercase; letter-spacing: .08em; }
.dna-path > div { position: relative; display: flex; gap: var(--sp-2); padding: 12px 0; }
.dna-path > div + div::before { content: ""; position: absolute; top: -12px; left: 17px; width: 1px; height: 24px; background: var(--line); }
.dna-path > div > span { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--brand); color: var(--paper); font-size: var(--text-sm); font-weight: 800; }
.dna-path p { display: grid; margin: 0; line-height: 1.35; }
.dna-path small { color: var(--ink-secondary); font-size: var(--text-sm); }
.prototype-note { position: absolute; right: 0; bottom: 1%; width: min(420px, 74%); margin: 0; color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.5; }

.privacy-section { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); align-items: center; padding-block: var(--sp-12); gap: var(--sp-10); }
.privacy-intro h2 { max-width: 560px; }
.privacy-console { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--paper); box-shadow: var(--shadow-sm); }
.privacy-person { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: var(--sp-2); padding: var(--sp-3); background: var(--brand-soft); }
.privacy-person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.privacy-person div { display: grid; line-height: 1.35; }
.privacy-person span { color: var(--ink-secondary); font-size: var(--text-sm); }
.privacy-person .permission-status { color: var(--success); font-weight: 750; }
.permission-row { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); }
.permission-row > span:first-child { display: flex; align-items: center; gap: var(--sp-2); font-weight: 650; }
.permission-row svg { color: var(--brand); }
.switch { position: relative; display: inline-block; flex: 0 0 52px; width: 52px; height: 32px; border-radius: 999px; background: var(--brand); }
.switch i { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); box-shadow: 0 2px 8px rgba(54, 25, 45, 0.18); }
.switch.is-off { background: #d7ccd3; }
.switch.is-off i { right: 24px; }
.privacy-console > p { margin: 0; padding: var(--sp-2) var(--sp-3); color: var(--ink-secondary); font-size: var(--text-sm); }
.sharing-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: var(--sp-3); }
.sharing-form label { display: grid; gap: 8px; color: var(--ink-secondary); font-size: var(--text-xs); font-weight: 750; }
.sharing-form select { width: 100%; min-height: 48px; padding: 10px 36px 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); color: var(--ink); font: inherit; font-size: var(--text-sm); }
.sharing-actions { display: flex; gap: 8px; padding: 0 var(--sp-3) var(--sp-2); }
.sharing-actions .button { flex: 1; }
.button-ghost { border-color: var(--line); background: transparent; }
.button-ghost:disabled { opacity: .45; cursor: not-allowed; }
.share-summary { display: grid; gap: 4px; margin: 0 var(--sp-3) var(--sp-2); padding: var(--sp-2); border-radius: 14px; background: var(--brand-soft); }
.share-summary span { color: var(--ink-secondary); font-size: var(--text-sm); }

.how-section { position: relative; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; gap: var(--sp-4); }
.steps li { position: relative; min-width: 0; padding-top: var(--sp-3); border-top: 2px solid var(--brand); }
.steps > li > span { display: block; margin-bottom: var(--sp-3); color: var(--brand); font-size: var(--text-sm); font-variant-numeric: tabular-nums; font-weight: 800; }
.steps h3 { font-size: var(--text-lg); }
.steps p { color: var(--ink-secondary); font-size: 1rem; line-height: 1.55; }

.tour-section { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: var(--sp-10); }
.tour-copy, .tour-stage { min-width: 0; }
.tour-nav { display: flex; flex-wrap: nowrap; gap: var(--sp-1); margin-top: var(--sp-4); padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.tour-nav::-webkit-scrollbar { display: none; }
.tour-nav button { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-secondary); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; transition: transform 120ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.tour-nav button[aria-selected="true"] { background: var(--brand); color: var(--paper); border-color: var(--brand); }
.tour-stage { position: relative; min-height: 700px; }
.tour-stage::before { content: ""; position: absolute; inset: 4% 4% 6% 16%; border-radius: 56% 44% 40% 60% / 50% 38% 62% 50%; background: var(--spark-soft); }
.tour-device { position: absolute; top: 0; left: 16%; width: min(330px, 58%); padding: 8px; overflow: hidden; border-radius: 42px; background: #161016; box-shadow: var(--shadow-lg); }
.tour-device img { border-radius: 34px; transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
.tour-device.is-changing img { opacity: 0.4; transform: translateY(8px); }
.tour-caption { position: absolute; right: 0; bottom: 8%; display: grid; width: min(360px, 60%); gap: 4px; padding: var(--sp-3); border: 1px solid rgba(123, 30, 88, 0.12); border-radius: var(--radius-media); background: var(--paper); box-shadow: var(--shadow-sm); }
.tour-caption span { color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.5; }

.membership-section { display: grid; grid-template-columns: .7fr 1.3fr; align-items: start; gap: var(--sp-8); padding-block: var(--sp-10); }
.membership-section > div:first-child > p { max-width: 42ch; }
.membership-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.membership-groups article { min-height: 240px; padding: var(--sp-4); border-radius: var(--radius-media); background: var(--paper); }
.membership-groups article:first-child { background: var(--night); color: var(--paper); }
.membership-groups article:first-child p { color: #eadfe8; }
.membership-groups svg { width: 32px; height: 32px; margin-bottom: var(--sp-4); color: var(--spark); }
.membership-groups h3 { font-size: var(--text-lg); }
.membership-note { grid-column: 2; margin: 0; color: var(--ink-secondary); font-size: var(--text-sm); }

.faq-section { display: grid; grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr); gap: var(--sp-10); }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { display: grid; grid-template-columns: 1fr 44px; align-items: center; min-height: 72px; gap: var(--sp-2); padding: 12px 0; font-weight: 700; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 1.4rem; transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out); }
details[open] summary span { background: var(--brand); color: var(--paper); transform: rotate(45deg); }
details p { max-width: 66ch; margin: 0; padding: 0 56px var(--sp-3) 0; color: var(--ink-secondary); }

.final-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  width: min(calc(100% - 2 * var(--gutter)), var(--max));
  margin: var(--sp-8) auto var(--sp-12);
  padding: var(--sp-8);
  border-radius: var(--radius-panel);
  background: var(--night);
  color: var(--paper);
  box-shadow: var(--shadow-lg);
  gap: var(--sp-6);
}
.final-cta .eyebrow { color: var(--champagne); }
.final-cta h2 { max-width: 760px; margin: 0; }

footer { width: min(100%, calc(var(--max) + 2 * var(--gutter))); margin: 0 auto; padding: var(--sp-10) var(--gutter) var(--sp-4); border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: 1fr 1fr; align-items: start; padding-bottom: var(--sp-8); gap: var(--sp-8); }
.footer-mark { font-size: 1.75rem; }
.footer-top p { max-width: 46ch; margin: 0; color: var(--ink-secondary); }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: var(--sp-8); gap: var(--sp-6); }
.footer-links > div { display: grid; align-content: start; gap: var(--sp-1); }
.footer-links strong { margin-bottom: var(--sp-1); }
.footer-links a { display: flex; align-items: center; min-height: 44px; color: var(--ink-secondary); }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); color: var(--ink-secondary); font-size: var(--text-sm); }

.legal-nav { grid-template-columns: auto 1fr; }
.legal-nav .button { justify-self: end; }
.legal-page { width: min(calc(100% - 2 * var(--gutter)), 820px); margin: 0 auto; padding: 176px 0 var(--sp-12); }
.legal-page h1 { max-width: 760px; margin-bottom: var(--sp-3); font-size: clamp(2.75rem, 7vw, 5.5rem); }
.legal-lede { max-width: 66ch; margin-bottom: var(--sp-8); color: var(--ink-secondary); font-size: var(--text-lg); }
.legal-page section { padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.legal-page section h2 { margin-bottom: var(--sp-2); font-size: var(--text-xl); }
.legal-page section p { max-width: 68ch; margin: 0; color: var(--ink-secondary); }
.legal-page .principle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0; }
.legal-page .principle-grid article { padding: var(--sp-3); border-radius: 20px; background: var(--paper); }
.legal-page .principle-grid h2 { font-size: var(--text-lg); }

[data-reveal] { opacity: 1; transform: none; }
.js [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); }
.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (hover: hover) and (pointer: fine) {
  .desktop-nav a:hover, .footer-links a:hover { color: var(--brand); }
  .button-primary:hover { background: var(--brand-pressed); transform: translateY(-1px); }
  .button-light:hover { background: var(--champagne); transform: translateY(-1px); }
  .text-link:hover { color: var(--brand-pressed); }
  .path-switch button:hover:not([aria-selected="true"]), .tour-nav button:hover:not([aria-selected="true"]) { background: var(--brand-soft); color: var(--brand); }
  summary:hover span { background: #ead7e3; }
}

@media (max-width: 960px) {
  .desktop-nav { display: none; }
  .nav-shell { grid-template-columns: auto 1fr auto; }
  .nav-shell > .button { justify-self: end; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
  .path-panel { padding: var(--sp-6); gap: var(--sp-4); }
  .profile-section, .genetics-section, .tour-section { gap: var(--sp-6); }
  .planning-grid { grid-template-columns: 1fr 1fr; }
  .planning-featured { grid-row: span 2; }
  .planning-photo { grid-row: auto; min-height: 220px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --band: 64px; }
  .site-header { padding: 8px 12px 0; }
  .nav-shell { min-height: 56px; padding: 0 4px 0 var(--sp-2); }
  .nav-shell > .button { display: none; }
  .menu-button { display: grid; justify-self: end; }
  .hero { grid-template-columns: 1fr; min-height: auto; margin-top: -64px; padding-top: 128px; padding-bottom: var(--sp-8); gap: var(--sp-6); }
  h1 { max-width: 680px; }
  .hero-actions { align-items: stretch; }
  .hero-actions .button { flex: 1 1 auto; }
  .hero-visual { height: min(116vw, 620px); }
  .portrait-main { inset: 2% 8% 5% 9%; }
  .mode-orbit-parent { left: 0; }
  .mode-orbit-dating { right: 0; }
  .value-strip { width: 100%; padding-inline: 4px; }
  .value-strip > div { justify-content: flex-start; min-height: 72px; }
  .path-panel { grid-template-columns: 1fr; min-height: 0; padding: var(--sp-4); }
  .path-copy { order: 1; }
  .device-frame { order: 2; width: min(100%, 320px); }
  .tilted-right, .tilted-left { transform: none; }
  .profile-section, .introduction-section, .genetics-section, .privacy-section, .tour-section, .membership-section, .faq-section { grid-template-columns: 1fr; }
  .profile-art { min-height: 580px; }
  .profile-copy { order: -1; }
  .planning-grid { grid-template-columns: 1fr; gap: 8px; }
  .planning-card, .planning-featured, .planning-photo { min-height: 240px; grid-row: auto; }
  .planning-featured { min-height: 360px; }
  .planning-photo { min-height: 420px; }
  .genetics-visual { min-height: 700px; }
  .genetics-device { left: 0; width: 62%; }
  .dna-path { top: 18%; width: 64%; }
  .prototype-note { width: 92%; }
  .privacy-section { padding-block: var(--sp-8); }
  .sharing-form { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: var(--sp-4); }
  .tour-copy { order: -1; }
  .tour-stage { min-height: 650px; }
  .tour-device { left: 7%; width: 66%; }
  .tour-caption { width: 68%; }
  .membership-groups { grid-template-columns: 1fr; }
  .membership-note { grid-column: 1; }
  .final-cta { grid-template-columns: 1fr; align-items: start; margin-top: var(--sp-4); padding: var(--sp-4); }
  .final-cta .button { width: 100%; }
  .footer-top { grid-template-columns: 1fr; gap: var(--sp-3); }
  .footer-bottom { flex-direction: column; }
  .legal-page { padding-top: 128px; }
}

@media (max-width: 420px) {
  :root { --gutter: 20px; }
  .hero-kicker { max-width: 30ch; }
  h1 { font-size: clamp(2.5rem, 11vw, 3.25rem); }
  .hero-actions { flex-direction: column; gap: var(--sp-1); }
  .text-link { justify-content: center; }
  .hero-visual { height: 520px; }
  .profile-glance { width: 62%; padding: var(--sp-2); }
  .mode-orbit { padding: 8px 10px; }
  .mode-orbit-parent { bottom: 22%; }
  .path-switch { margin-bottom: var(--sp-4); }
  .path-switch button { font-size: var(--text-sm); }
  .path-panel { padding: var(--sp-3); }
  .profile-art { min-height: 500px; }
  .portrait-secondary { inset: 0 12% 8% 0; }
  .profile-snapshot { width: 64%; padding: 12px; }
  .icon-facts { grid-template-columns: 1fr; }
  .icon-facts > div:nth-child(odd), .icon-facts > div:nth-child(even) { padding-inline: 0; border-left: 0; }
  .icon-facts > div + div { border-top: 1px solid var(--line); }
  .genetics-visual { min-height: 660px; }
  .genetics-device { width: 68%; }
  .dna-path { top: 16%; width: 68%; padding: var(--sp-2); }
  .dna-path > div { padding: 8px 0; }
  .dna-path small { font-size: var(--text-xs); }
  .prototype-note { bottom: 0; font-size: var(--text-xs); }
  .privacy-person { grid-template-columns: 48px 1fr; }
  .privacy-person img { width: 48px; height: 48px; }
  .privacy-person .permission-status { grid-column: 2; }
  .sharing-actions { flex-direction: column; }
  .tour-stage { min-height: 570px; }
  .tour-device { left: 0; width: 72%; }
  .tour-caption { width: 72%; padding: var(--sp-2); }
  .faq-list details p { padding-right: 0; }
  .footer-links { grid-template-columns: 1fr; gap: var(--sp-4); }
  .reply-context { grid-template-columns: 64px 1fr; }
  .reply-context img { width: 64px; height: 64px; border-radius: 16px; }
  .reply-footer { align-items: flex-start; flex-direction: column; }
  .reply-footer button { width: 100%; }
  .legal-page .principle-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-reveal].is-visible { opacity: 1; transform: none; transition: opacity 100ms linear; }
  .path-panel, .tour-device img, .button, .path-switch button, .tour-nav button, summary span { transition-duration: 100ms; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --ink-secondary: #4f444d; --line: #9a8996; }
  .nav-shell, .profile-glance, .profile-snapshot, .dna-path { background: var(--paper); backdrop-filter: none; }
}

@media (min-width: 761px) and (max-width: 820px) {
  .hero { grid-template-columns: 0.95fr 1.05fr; }
  .hero-visual { height: 560px; }
  .profile-section, .genetics-section, .tour-section { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .profile-art { min-height: 560px; }
  .genetics-visual { min-height: 640px; }
  .tour-stage { min-height: 620px; }
}

@media (min-width: 1200px) {
  .hero-visual { height: 680px; }
}