/* Octaflow — Still Water, v2.
   One ocean behind the whole page (water.js). You start just under the
   surface and sink as you scroll. The nautilus is the one object in it.
   Lagoon is the light; Champagne belongs only to the "yes". */

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --harbor: #072433;
  --abyss: #03151D;
  --petrol: #0C5560;
  --flow: #0E7C86;
  --lagoon: #8FEBDF;
  --champagne: #E9D5A8;
  --mist: #EEF4F5;

  --text: #EAF3F4;
  --text-soft: #AACBD1;
  --text-faint: #86AAB1;
  --hair: rgba(143, 235, 223, 0.14);
  --glass: rgba(10, 40, 52, 0.42);
  --glass-edge: rgba(255, 255, 255, 0.12);

  --font: "Figtree", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1240px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
  scrollbar-color: rgba(143, 235, 223, 0.35) var(--abyss);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--abyss); scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--lagoon);
}

/* The ocean. Before WebGL starts (and without it) a still gradient stands in. */
#ocean {
  position: fixed; inset: 0; z-index: -1;
  width: 100vw; height: 100vh; display: block;
  background: linear-gradient(180deg, #0E4150 0%, #0A3140 22%, var(--harbor) 55%, var(--abyss) 100%);
}
#ocean.live { background: none; }

::selection { background: var(--lagoon); color: var(--harbor); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

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

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; }
p { text-wrap: pretty; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 30;
  background: var(--mist); color: var(--harbor); padding: 10px 16px; border-radius: 999px;
}
.skip:focus { top: 16px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ───────── Header: open at the surface, glass once you dive ───────── */

.site-header { position: fixed; inset: 14px 0 auto; z-index: 20; pointer-events: none; }
.site-header .wrap {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 62px; padding: 0 10px 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.site-header.scrolled .wrap {
  background: rgba(6, 30, 40, 0.58);
  border-color: var(--glass-edge);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 11px;
  font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em; text-decoration: none;
}
.wordmark img { width: 30px; height: 30px; border-radius: 8px; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 34px); font-size: 0.95rem; }
.nav a { text-decoration: none; color: #D2E6E9; transition: color 0.3s var(--ease); }
.nav a:hover { color: var(--text); }
.nav .pill-link {
  color: var(--harbor); background: var(--mist);
  padding: 10px 18px; border-radius: 999px; font-weight: 600;
  transition: background-color 0.3s var(--ease);
}
.nav .pill-link:hover { color: var(--harbor); background: #fff; }

/* ───────── Buttons ───────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 30px; border-radius: 999px;
  font: 600 1rem var(--font); letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; border: 0;
  transition: transform 0.45s var(--ease), background-color 0.3s var(--ease);
}
.btn-light { background: var(--mist); color: var(--harbor); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.8); }
.btn-light:hover { background: #fff; transform: translateY(-2px); }
.link-quiet { color: #D2E6E9; text-decoration: none; font-weight: 500; transition: color 0.3s var(--ease); }
.link-quiet:hover { color: var(--text); }

/* ───────── Hero ───────── */

.hero {
  min-height: max(720px, 100svh);
  display: grid; align-items: center;
  padding: 120px 0 72px;
}
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 40px clamp(32px, 5vw, 80px); align-items: center;
}
.hero-copy { display: grid; gap: 26px; }
.hero h1 {
  font-size: clamp(3.2rem, 7.4vw, 6rem);
  line-height: 0.95; letter-spacing: -0.04em; font-weight: 500;
}
.hero h1 span { color: var(--lagoon); }
.hero .lede { font-size: clamp(1.13rem, 1.5vw, 1.3rem); line-height: 1.55; color: #D2E6E9; max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 10px; }

.hero-visual { position: relative; display: grid; justify-items: center; }

/* The nautilus: the one object in the water. */
.shell {
  --px: 0; --py: 0;
  width: min(100%, 500px);
  transform: translate3d(calc(var(--px) * -18px), calc(var(--py) * -14px), 0);
}
.shell img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.45));
  animation: drift 14s ease-in-out infinite alternate;
  transform-origin: 55% 55%;
}
@keyframes drift {
  0%   { transform: translateY(0) rotate(-2deg); }
  100% { transform: translateY(-16px) rotate(2.5deg); }
}

/* ───────── The Octa bar: the app's own glass pill ───────── */

.octa {
  position: relative; z-index: 2;
  display: grid; justify-items: center; gap: 12px;
  width: min(100%, 470px);
  margin-top: -64px;
}
.bar {
  width: 250px; max-width: 100%;
  min-height: 54px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: 28px;
  color: #F3F8F9;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 50px -24px rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  transition: width 0.6s var(--ease);
  font-size: 0.95rem; line-height: 1.3;
}
.bar[data-wide] { width: 100%; }
.bar-lead { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--lagoon); }
.bar-lead svg { width: 20px; height: 20px; }
.bar-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bar-heard { font-size: 0.78rem; color: rgba(234, 243, 244, 0.64); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar[data-phase="needs"] .bar-line { white-space: normal; }
.bar[data-phase="needs"] .bar-lead { color: var(--champagne); }
.bar-trail { flex: none; display: flex; gap: 8px; }
.bar-btn {
  font: 500 0.85rem var(--font); color: #F3F8F9;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.12);
}
.bar-btn.yes {
  background: var(--champagne); color: var(--harbor); border-color: transparent;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.bar-btn.yes.pressed { background: #F6E8C6; transform: scale(0.93); }

.wave { display: flex; align-items: center; gap: 2px; height: 16px; }
.wave i { width: 2.5px; border-radius: 2px; background: var(--lagoon); height: 30%; animation: level 0.9s ease-in-out infinite alternate; }
.wave i:nth-child(2) { animation-delay: -0.3s; }
.wave i:nth-child(3) { animation-delay: -0.6s; }
.wave i:nth-child(4) { animation-delay: -0.15s; }
.wave i:nth-child(5) { animation-delay: -0.45s; }
@keyframes level { to { height: 100%; } }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(143, 235, 223, 0.25); border-top-color: var(--lagoon); animation: turn 0.8s linear infinite; }
@keyframes turn { to { transform: rotate(1turn); } }

.bar-swap { animation: swap 0.5s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(5px); filter: blur(3px); } }

.octa-note { display: flex; align-items: center; gap: 14px; font-size: 0.8rem; color: var(--text-faint); }
.octa-note button {
  font: 500 0.8rem var(--font); color: var(--text-faint);
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: rgba(134, 170, 177, 0.45);
}
.octa-note button:hover { color: var(--text); }

/* ───────── Sections ───────── */

.section { padding: clamp(110px, 15vw, 200px) 0; }
.section-head { max-width: 18ch; font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.02; letter-spacing: -0.038em; }
.section-sub { margin-top: 22px; max-width: 44ch; color: var(--text-soft); font-size: 1.15rem; }

.everyone {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px 88px; align-items: end;
}
.everyone h2 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); line-height: 1.03; letter-spacing: -0.036em; max-width: 15ch; }
.everyone p { margin-top: 24px; color: var(--text-soft); font-size: 1.12rem; max-width: 46ch; }
.specs { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 14px 32px; font-size: 0.98rem; padding-top: 26px; border-top: 1px solid var(--hair); }
.specs dt { color: var(--text-faint); }
.specs dd { margin: 0; font-weight: 500; }


/* ───────── Small fish, far off, crossing left to right ───────── */

body { position: relative; }
main { position: relative; z-index: 1; }
.schools { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.schools .defs { position: absolute; }
.school { position: absolute; left: 0; animation: swim 60s linear infinite; }
.school .f { position: absolute; height: auto; animation: bob 2.4s ease-in-out infinite alternate; }
.school.shallow .f { fill: rgba(3, 24, 33, 0.55); }
.school.mid .f { fill: rgba(160, 214, 212, 0.16); }
.school.deep .f { fill: rgba(143, 235, 223, 0.11); }
@keyframes swim { from { transform: translateX(-10vw); } to { transform: translateX(112vw); } }
@keyframes bob { from { transform: translateY(-2px) rotate(-1.5deg); } to { transform: translateY(2px) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) { .schools { display: none; } }

/* ───────── Watch it work ───────── */

.picks { margin-top: clamp(40px, 5vw, 56px); display: flex; flex-wrap: wrap; gap: 10px; }
.pick {
  font: 500 0.95rem var(--font); color: var(--text-soft);
  padding: 11px 18px; border-radius: 999px; cursor: pointer;
  background: rgba(10, 40, 52, 0.35); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pick:hover { color: var(--text); border-color: rgba(143, 235, 223, 0.35); }
.pick[aria-pressed="true"] { color: var(--harbor); background: var(--mist); border-color: transparent; }

.stage {
  margin-top: 22px;
  border-radius: 26px;
  /* Large panels stay unblurred: a full-viewport backdrop blur over the
     WebGL ocean can blank the whole page in Chromium. */
  background: rgba(6, 28, 38, 0.78);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.stage-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--hair); }
.stage-dots { display: flex; gap: 7px; }
.stage-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.stage-label { font-size: 0.78rem; color: var(--text-faint); }
.stage-bar { display: grid; justify-items: center; padding: 22px 20px 6px; }
.stage-bar .bar { width: min(100%, 520px); }
.stage-bar .bar[data-wide] { width: min(100%, 520px); }
.stage-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; padding: 26px clamp(18px, 3vw, 36px) 10px; min-height: 300px; }
.plan-title { font-size: 0.8rem; color: var(--text-faint); margin-bottom: 14px; }
.plan-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan-steps li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
  padding: 14px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid transparent;
  opacity: 0.5; transition: opacity 0.5s var(--ease), background-color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.plan-steps li.active { opacity: 1; background: rgba(143, 235, 223, 0.06); border-color: rgba(143, 235, 223, 0.22); }
.plan-steps li.done { opacity: 1; }
.plan-steps li.declined { opacity: 0.6; }
.plan-steps .route { grid-column: 1; font-size: 0.74rem; color: var(--lagoon); font-weight: 600; }
.plan-steps .ask-step .route { color: var(--champagne); }
.plan-steps .what { grid-column: 1; font-size: 0.98rem; }
.plan-steps .state { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; display: grid; place-items: center; color: var(--lagoon); }
.plan-steps .state svg { width: 18px; height: 18px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }

.app {
  border-radius: 18px; padding: 18px;
  background: rgba(238, 244, 245, 0.06); border: 1px solid var(--hair);
  display: grid; align-content: start; gap: 16px;
}
.app-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.82rem; }
.app-name { font-weight: 600; }
.app-sub { color: var(--text-faint); }
.track { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; }
.cover { width: 52px; height: 52px; border-radius: 10px; background: linear-gradient(135deg, var(--petrol), var(--harbor)); border: 1px solid var(--hair); }
.track-title { font-weight: 600; }
.track-artist { color: var(--text-faint); font-size: 0.88rem; }
.play-state { font-size: 0.8rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hair); color: var(--text-soft); }
.app[data-app="spotify"] .play-state { transition: color 0.4s var(--ease); }
.progress { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.progress i { display: block; width: 38%; height: 100%; background: var(--lagoon); }
.thread { display: grid; gap: 8px; }
.msg { max-width: 80%; padding: 9px 13px; border-radius: 16px; font-size: 0.92rem; background: rgba(255, 255, 255, 0.07); justify-self: start; }
.msg.out { justify-self: end; background: var(--flow); color: #fff; animation: swap 0.5s var(--ease); }
.msg b { font-weight: 600; margin-right: 6px; color: var(--text-soft); }
.thread.looked { outline: 1px dashed rgba(143, 235, 223, 0.45); outline-offset: 8px; border-radius: 8px; }
.thread.looked .last { background: rgba(143, 235, 223, 0.14); }
.compose { padding: 10px 14px; border-radius: 14px; border: 1px solid var(--hair); color: var(--text-faint); font-size: 0.92rem; }
.compose.has { color: var(--text); border-color: rgba(143, 235, 223, 0.3); }
.mail { padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease); }
.mail.open { background: rgba(255, 255, 255, 0.05); border-color: var(--hair); }
.mail-from { font-weight: 600; }
.mail-subj { font-size: 0.9rem; }
.mail-body { color: var(--text-faint); font-size: 0.9rem; margin-top: 4px; }
.appearance { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); justify-self: start; }
.appearance span { padding: 7px 14px; border-radius: 9px; font-size: 0.88rem; color: var(--text-soft); transition: background-color 0.4s var(--ease), color 0.4s var(--ease); }
.appearance .on { background: var(--mist); color: var(--harbor); }
.preview { height: 96px; border-radius: 12px; background: #E9EFF1; padding: 12px; display: grid; gap: 8px; align-content: start; transition: background-color 0.6s var(--ease); }
.preview i { height: 9px; border-radius: 5px; background: rgba(7, 36, 51, 0.18); transition: background-color 0.6s var(--ease); }
.preview i:nth-child(1) { width: 60%; } .preview i:nth-child(2) { width: 85%; } .preview i:nth-child(3) { width: 40%; }
.preview.dark { background: #13232A; }
.preview.dark i { background: rgba(234, 243, 244, 0.2); }

.stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px clamp(18px, 3vw, 36px) 22px; min-height: 64px; }
.stage-result { color: var(--text-soft); font-size: 0.95rem; }
.replay { font: 500 0.88rem var(--font); color: var(--text-soft); background: none; border: 1px solid var(--glass-edge); padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.replay:hover { color: var(--text); border-color: rgba(143, 235, 223, 0.35); }
.bar button.bar-btn { cursor: pointer; }
.bar button.bar-btn:hover { background-color: rgba(255, 255, 255, 0.18); }
.bar button.bar-btn.yes:hover { background: #F6E8C6; }

.routes { list-style: none; margin: clamp(48px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.routes li { color: var(--text-soft); padding-top: 22px; border-top: 1px solid var(--hair); }
.routes b { display: block; color: var(--text); font-weight: 600; font-size: 1.1rem; margin-bottom: 8px; }

/* ───────── Trust ───────── */

.trust .yes { max-width: 760px; }
.trust .yes h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.04em; }
.trust .yes h2 span { color: var(--champagne); }
.trust .yes p { margin-top: 26px; color: var(--text-soft); font-size: 1.15rem; max-width: 44ch; }
.yes-list { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.yes-list li { font-size: 0.9rem; padding: 7px 15px; border-radius: 999px; border: 1px solid rgba(233, 213, 168, 0.3); color: var(--champagne); }

.honest { margin-top: clamp(110px, 13vw, 170px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px 80px; align-items: center; }
.honest h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.04; letter-spacing: -0.035em; max-width: 16ch; }
.honest p { margin-top: 22px; color: var(--text-soft); font-size: 1.1rem; max-width: 42ch; }
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.results li {
  display: grid; grid-template-columns: 124px 1fr; gap: 16px; align-items: center;
  padding: 18px 20px; border-radius: 18px;
  background: rgba(6, 28, 38, 0.66); border: 1px solid var(--glass-edge);
}
.results .tag { font-size: 0.82rem; font-weight: 600; }
.results [data-kind="ok"] .tag { color: var(--lagoon); }
.results [data-kind="unsure"] .tag { color: #F2C98A; }
.results [data-kind="blind"] .tag { color: var(--text-soft); }

/* ───────── Privacy map ───────── */

.map { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.map-col { padding: 28px 26px; border-radius: 22px; background: rgba(6, 28, 38, 0.66); border: 1px solid var(--glass-edge); }
.map-col h3 { font-size: 1.2rem; letter-spacing: -0.02em; margin-bottom: 16px; }
.map-col:nth-child(1) h3 { color: var(--lagoon); }
.map-col:nth-child(3) h3 { color: var(--text-soft); }
.map-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.map-col li { color: var(--text-soft); padding-left: 18px; position: relative; }
.map-col li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.map-col:nth-child(3) li::before { width: 8px; height: 1.5px; border-radius: 0; top: 0.75em; }
.map-more { margin-top: 26px; }
.map-more a { color: var(--lagoon); }

/* ───────── FAQ ───────── */

.faq-list { margin-top: clamp(40px, 5vw, 64px); max-width: 860px; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 2px; font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 500; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 1.5px solid var(--lagoon); border-bottom: 1.5px solid var(--lagoon);
  transform: rotate(45deg) translateY(-3px); transition: transform 0.4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq details p { color: var(--text-soft); padding: 0 2px 26px; max-width: 62ch; }


/* ───────── Above the water: a daylight band for the trust story ───────── */

.site-header.on-light .wrap { background: rgba(255, 255, 255, 0.72); border-color: rgba(7, 36, 51, 0.1); box-shadow: 0 16px 34px -24px rgba(0, 0, 0, 0.25); }
.site-header.on-light .wordmark { color: #0B1B22; }
.site-header.on-light .nav a { color: #3E5961; }
.site-header.on-light .nav a:hover { color: #0B1B22; }
.site-header.on-light .nav a[aria-current="page"]:not(.pill-link) { color: #0B1B22; }
.site-header.on-light .nav .pill-link { background: var(--harbor); color: var(--mist); }
.site-header.on-light .nav .pill-link:hover { background: var(--petrol); color: #fff; }
.site-header .wordmark, .site-header .nav a { transition: color 0.4s var(--ease), background-color 0.4s var(--ease); }

.surface {
  position: relative; z-index: 1;
  margin: 120px 0;
  overflow-x: clip;
  background: var(--mist);
  color: #0B1B22;
  color-scheme: light;
  --text: #0B1B22;
  --text-soft: #3E5961;
  --text-faint: #5A737A;
  --hair: #CFDEE1;
}
.surface ::selection { background: var(--flow); color: #fff; }
.surface :focus-visible { outline-color: var(--flow); }
.waterline { position: absolute; left: 0; width: 200%; height: 80px; fill: var(--mist); pointer-events: none; }
.waterline.top { top: -79px; }
.waterline.bottom { bottom: -79px; transform: scaleY(-1); }
.waterline .w-back { opacity: 0.45; }
@media (prefers-reduced-motion: no-preference) {
  .waterline.top { animation: tide 26s linear infinite; }
  .waterline.bottom { animation: tide-flip 32s linear infinite; }
  @keyframes tide { to { transform: translateX(-50%); } }
  @keyframes tide-flip { from { transform: scaleY(-1); } to { transform: translateX(-50%) scaleY(-1); } }
}
.surface .trust .yes h2 span { color: #8A6A2E; }
.surface .yes-list li { border-color: rgba(138, 106, 46, 0.35); color: #7A5C22; }
.surface .results li { background: #fff; border-color: var(--hair); box-shadow: none; }
.surface .results [data-kind="ok"] .tag { color: var(--flow); }
.surface .results [data-kind="unsure"] .tag { color: #9A6512; }
.surface .results [data-kind="blind"] .tag { color: #3E5961; }
.surface .map-col { background: #fff; border-color: var(--hair); box-shadow: none; }
.surface .map-col:nth-child(1) h3 { color: var(--flow); }
.surface .map-col:nth-child(3) h3 { color: #3E5961; }
.surface .map-more a { color: var(--petrol); }

/* ───────── Close: the deepest, stillest water ───────── */

.close { padding: clamp(120px, 16vw, 210px) 0 0; text-align: center; }
.close .wrap { position: relative; }

/* Down here the only light is the anglerfish's lure (drawn into the water by water.js). */
.angler {
  position: absolute; z-index: 0; pointer-events: none;
  right: max(0px, calc(50% - 690px)); top: 34%;
  width: clamp(150px, 13vw, 200px);
  opacity: 0.7;
  animation: prowl 18s ease-in-out infinite alternate;
}
.close .wrap > :not(.angler) { position: relative; z-index: 1; }
.close .site-footer { position: relative; z-index: 2; }
@media (max-width: 1240px) {
  .angler { top: calc(100% + 10px); right: 6%; width: 120px; }
}
.angler svg { display: block; width: 100%; height: auto; overflow: visible; }
.angler-stalk { transform-origin: 170px 52px; animation: sway 3.6s ease-in-out infinite alternate; }
.angler-tail { transform-origin: 356px 150px; animation: fan 1.9s ease-in-out infinite alternate; }
.angler-fin { transform-origin: 262px 162px; animation: fan 1.3s ease-in-out infinite alternate-reverse; }
@keyframes fan { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } }
@keyframes prowl {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-18px, -8px) rotate(-2deg); }
  100% { transform: translate(-36px, 4px) rotate(1deg); }
}
@keyframes sway { from { transform: rotate(-2.5deg); } to { transform: rotate(3deg); } }
.close h2 { font-size: clamp(3rem, 7.6vw, 5.6rem); line-height: 0.96; letter-spacing: -0.04em; }
.close p { margin: 26px auto 0; color: var(--text-soft); font-size: 1.15rem; max-width: 40ch; }
.close .btn { margin-top: 40px; }

.site-footer {
  margin-top: clamp(120px, 15vw, 200px);
  padding: 28px 0 40px;
  border-top: 1px solid var(--hair);
  font-size: 0.9rem; color: var(--text-faint);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--text); }

/* ───────── Long-form pages ───────── */

.page-top { padding: 170px 0 clamp(40px, 6vw, 72px); }
.page-top h1 { font-size: clamp(2.8rem, 6.4vw, 4.8rem); line-height: 0.97; letter-spacing: -0.04em; max-width: 13ch; }
.page-top p { margin-top: 24px; color: #D2E6E9; font-size: 1.15rem; max-width: 46ch; }

.doc { padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 9vw, 110px); }
.doc .wrap { max-width: 760px; }
.doc h2 { font-size: 1.65rem; letter-spacing: -0.024em; margin: 2.4em 0 0.7em; }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li, .doc td { color: var(--text-soft); }
.doc p + p { margin-top: 1em; }
.doc ul { padding-left: 1.2em; margin: 0.8em 0 0; }
.doc li { margin-bottom: 0.55em; }
.doc li::marker { color: var(--lagoon); }
.doc a { color: var(--lagoon); }
.doc strong { color: var(--text); font-weight: 600; }
.doc table { width: 100%; border-collapse: collapse; margin: 1.2em 0 0; font-size: 0.98rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 15px 22px 15px 0; border-bottom: 1px solid var(--hair); }
.doc th { font-weight: 600; color: var(--text); }
.doc .summary {
  font-size: clamp(1.25rem, 2vw, 1.45rem); line-height: 1.5; color: var(--text); letter-spacing: -0.012em;
  padding: 30px 32px; border-radius: 22px;
  background: rgba(6, 28, 38, 0.66); border: 1px solid var(--glass-edge);
}
.doc .summary + p { margin-top: 2em; }
.doc .updated { color: var(--text-faint); font-size: 0.95rem; margin-top: 3em; }

.page .close { padding-top: clamp(80px, 10vw, 130px); }
.page .site-footer { margin-top: clamp(80px, 10vw, 130px); }
.nav a[aria-current="page"]:not(.pill-link) { color: var(--text); }

/* Subpages: headings and intros centered; long legal text stays left-aligned
   inside a centered column, because centered paragraphs are hard to read. */
.page-top { text-align: center; }
.page-top h1, .page-top p { margin-inline: auto; }
.page-top h1 { max-width: 16ch; }
.doc h2 { text-align: center; }
.doc .toc { justify-content: center; }
.doc .updated { text-align: center; }
.doc-center p { text-align: center; }

.toc {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin: 2.2em 0 0; padding: 18px 0; border-block: 1px solid var(--hair);
  font-size: 0.95rem;
}
.doc .toc a { color: var(--text-soft); text-decoration: none; }
.doc .toc a:hover { color: var(--text); }
.doc h2[id] { scroll-margin-top: 110px; }
.doc kbd {
  font: 600 0.88em var(--font); color: var(--text);
  padding: 2px 8px; border-radius: 6px; border: 1px solid var(--glass-edge);
  background: rgba(255, 255, 255, 0.06);
}

/* Download */
.get-icon { display: block; width: 112px; height: 112px; margin: 0 auto 28px; }
.get-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 40px; }
.get-note { color: var(--text-faint); font-size: 0.95rem; }
.doc .steps { list-style: none; counter-reset: step; padding: 0; margin: 1em 0 1.2em; }
.doc .steps li { counter-increment: step; position: relative; padding-left: 52px; margin-bottom: 1.2em; }
.doc .steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 600; font-size: 0.95rem; color: var(--lagoon); border: 1px solid var(--hair);
}

/* Pricing */
.plans-section { padding: clamp(24px, 4vw, 48px) 0 0; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin-inline: auto; }
.plan {
  display: flex; flex-direction: column;
  padding: clamp(28px, 3.4vw, 40px); border-radius: 24px;
  background: rgba(6, 28, 38, 0.66); border: 1px solid var(--glass-edge);
}
.plan-pro { background: rgba(12, 60, 70, 0.72); border-color: rgba(143, 235, 223, 0.32); }
.plan { text-align: center; }
.plan ul { align-self: center; text-align: left; max-width: 34ch; }
.plan h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text-soft); }
.plan-pro h2 { color: var(--lagoon); }
.plan-price { margin-top: 18px; display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.plan-price .amount { font-size: clamp(2.8rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.plan-price .per { color: var(--text-soft); font-size: 1.05rem; }
.plan-sub { margin-top: 10px; color: var(--text-faint); font-size: 0.98rem; }
.plan ul { list-style: none; padding: 0; margin: 28px 0 36px; display: grid; gap: 12px; }
.plan li { position: relative; padding-left: 26px; color: var(--text-soft); }
.plan li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 9px; height: 5px; border-left: 2px solid var(--lagoon); border-bottom: 2px solid var(--lagoon);
  transform: translateY(-60%) rotate(-45deg);
}
.plan .btn { margin-top: auto; }
.btn-ghost { color: var(--text); border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, 0.04); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }
.plans-note { margin-top: 20px; color: var(--text-faint); font-size: 0.95rem; text-align: center; }

/* Welcome (after payment) */
.welcome { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 64px 0; }
.welcome .get-icon { margin: 0 auto 32px; }
.welcome h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; letter-spacing: -0.04em; }
.welcome p { margin: 22px auto 0; max-width: 44ch; color: #D2E6E9; font-size: 1.15rem; }
.welcome .welcome-try { color: var(--lagoon); }
.welcome .welcome-small { color: var(--text-faint); font-size: 0.95rem; margin-top: 40px; }
.welcome a { color: var(--lagoon); }

/* ───────── Motion: visible by default; reveals only enhance ───────── */

@media (prefers-reduced-motion: no-preference) {
  /* No blur on reveals: a filtered ancestor over backdrop-filtered glass can
     fail to paint in Chromium. Opacity and movement only. */
  .js .rise { opacity: 0; transform: translateY(22px); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); }
  .js .rise.in { opacity: 1; transform: none; }
  .hero-copy > * { animation: surface 1.4s var(--ease) both; }
  .hero-visual { animation: surface-plain 1.8s var(--ease) 0.2s both; }
  .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  @keyframes surface { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } }
  @keyframes surface-plain { from { opacity: 0; transform: translateY(24px); } }
}
@media (prefers-reduced-motion: reduce) {
  .wave i, .spin, .bar-swap, .shell img, .angler, .angler-stalk, .angler-tail, .angler-fin { animation: none; }
  .wave i { height: 60%; }
  .bar { transition: none; }
}

/* ───────── Small screens ───────── */

@media (max-width: 900px) {
  .hero .wrap, .everyone, .stage-body, .honest, .map, .routes { grid-template-columns: 1fr; }
  .hero { padding-top: 104px; }
  .hero-visual { order: -1; }
  .shell { width: min(62vw, 340px); }
  .octa { margin-top: -40px; }
  .nav .hide-sm { display: none; }
  .plans { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .site-header .wrap { width: calc(100% - 24px); }
  .bar { font-size: 0.88rem; padding: 10px 12px; gap: 10px; }
  .bar-btn { padding: 5px 10px; }
  .results li { grid-template-columns: 1fr; gap: 6px; }
  .stage-foot { flex-wrap: wrap; }
  .hero-actions .btn { width: 100%; }
  .doc .summary { padding: 22px; }
}