/* =============================================================
   DoveBoard — doveboard.com
   One stylesheet. No build step. No framework. Edit freely.

   Sections: 0 fonts · 1 tokens · 2 base · 3 type · 4 layout
             5 nav · 6 buttons · 7 hero · 8 forms · 9 mockup
             10 wall · 11 question machine · 12 lens split
             13 ownership · 14 feature bands · 15 cards & grids
             16 terminal · 17 pricing · 18 faq · 19 footer
             20 spine · 21 motion · 22 responsive
   ============================================================= */

/* ---------- 0. Fonts ----------
   Self-hosted, deliberately. A privacy-first product whose marketing
   site phones a font CDN on every page load is a broken promise, so
   these files are the only fonts and they come from this origin.

   Each family is ONE variable file per subset covering every weight the
   site uses. Bricolage ships without its optical-size axis: pinning it
   drops the latin file from 75 KB to 41 KB and renders identically at
   every size this site actually sets. The latin-ext faces are declared
   but only fetched if a visitor's text needs a character in that range.
   -------------------------------------------------------------- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/bricolage-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/bricolage-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/instrument-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/instrument-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1. Tokens ----------
   The two accent ramps are stepped in OKLCh at a fixed hue — dove at
   181.7deg, gild at 85.2deg, the hues of the two originals — so every
   step is perceptually even rather than eyeballed. They are written as
   hex because an unsupported oklch() on a near-black page is invisible
   text, and the source oklch() is in the comment beside each one.
   -------------------------------------------------------------- */
:root {
  --ink:        #07090C;   /* oklch(13.9% .008 255.5) */
  --ink-2:      #0C1017;
  --ink-3:      #11161F;
  --paper:      #E9EEF5;   /* oklch(94.7% .011 256.7) — 17.1:1 on ink */
  --fog:        #8A94A4;   /* 6.51:1 on ink */
  --fog-dim:    #7A869C;   /* 5.43:1 on ink — AA on every surface here */

  --dove:       #4FD8C4;   /* personal / life — oklch(80.3% .121 181.7) */
  --gild:       #E3B23C;   /* business       — oklch(78.8% .141  85.2) */

  /* dove ramp, hue 181.7 */
  --dove-100:   #D2FCF4;   /* oklch(96% .045 181.7) */
  --dove-200:   #9DF1E2;   /* oklch(90% .085 181.7) */
  --dove-300:   #63E0CC;   /* oklch(83% .115 181.7) */
  --dove-500:   #00B29E;   /* oklch(68% .130 181.7) */
  --dove-700:   #006B5E;   /* oklch(47% .090 181.7) */
  --dove-800:   #004840;   /* oklch(36% .068 181.7) */
  --dove-900:   #002B26;   /* oklch(26% .048 181.7) */

  /* gild ramp, hue 85.2 */
  --gild-100:   #FEF0D4;   /* oklch(96% .040 85.2) */
  --gild-200:   #F6DBA1;   /* oklch(90% .080 85.2) */
  --gild-300:   #EDC56E;   /* oklch(84% .115 85.2) */
  --gild-500:   #C79600;   /* oklch(70% .145 85.2) */
  --gild-700:   #7A5B01;   /* oklch(49% .100 85.2) */
  --gild-800:   #553F03;   /* oklch(38% .076 85.2) */
  --gild-900:   #352602;   /* oklch(28% .055 85.2) */

  --dove-deep:  #1E8F80;
  --gild-deep:  #9A741C;

  --accent:     var(--dove);

  --glass:      rgba(255,255,255,.035);
  --glass-2:    rgba(255,255,255,.055);
  --hair:       rgba(255,255,255,.09);
  --hair-soft:  rgba(255,255,255,.05);

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shell: 1180px;
  --pad: clamp(20px, 5vw, 40px);
  --band: clamp(76px, 9vw, 132px);
  --r: 14px;
  --r-lg: 20px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient aurora — three slow drifting fields, fixed behind everything,
   echoing the product's own aurora system. Three periods that share no
   common multiple worth waiting for (58s / 46s / 71s), so the
   combination never visibly repeats.

   NO filter: blur(). THIS IS THE WHOLE POINT OF THIS BLOCK.
   These used to be blurred at 90px, and blurring two ~900px fixed
   layers on every composited frame cost 33ms of a 16.7ms budget: the
   page scrolled at 20fps under a 4x CPU throttle, and at 60fps with
   nothing changed but that one line. A radial-gradient with soft stops
   is already a blur — the filter was re-blurring something blurry and
   buying nothing. Widening the fields and adding a mid stop gets the
   same picture for free. Measured both ways; do not put it back. */
html::before,
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -2;
  border-radius: 50%;
  pointer-events: none;
}
body::before {
  width: 96vw; height: 96vw;
  top: -34vw; left: -26vw;
  background: radial-gradient(circle,
    rgba(79,216,196,.13), rgba(79,216,196,.05) 42%, transparent 68%);
  animation: drift-a 58s var(--ease) infinite alternate;
}
body::after {
  width: 88vw; height: 88vw;
  top: 26vh; right: -30vw;
  background: radial-gradient(circle,
    rgba(227,178,60,.115), rgba(227,178,60,.042) 42%, transparent 68%);
  animation: drift-b 46s var(--ease) infinite alternate;
}
html::before {
  width: 70vw; height: 70vw;
  top: 62vh; left: 14vw;
  background: radial-gradient(circle,
    rgba(140,196,150,.07), rgba(140,196,150,.025) 44%, transparent 70%);
  animation: drift-c 71s var(--ease) infinite alternate;
}
@keyframes drift-a {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(9vw, 7vh, 0) scale(1.12); }
}
@keyframes drift-b {
  from { transform: translate3d(0,0,0) scale(1.06); }
  to   { transform: translate3d(-8vw, -9vh, 0) scale(1); }
}
@keyframes drift-c {
  from { transform: translate3d(0,0,0) scale(1.1); }
  to   { transform: translate3d(-11vw, 6vh, 0) scale(.94); }
}
/* site.js sets this when the tab goes to the background. */
body.is-still::before,
body.is-still::after,
html.is-still::before { animation-play-state: paused; }

img, svg { max-width: 100%; display: block; }

a { color: inherit; }

::selection { background: rgba(79,216,196,.28); }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--dove); color: #04211C;
  padding: 12px 18px; z-index: 100;
  font-family: var(--font-mono); font-size: 13px;
}
.skip:focus { left: 12px; top: 12px; }

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

/* Honeypot — hidden from sighted users by position, from assistive
   tech by aria-hidden, and out of the tab order. Bots fill it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- 3. Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.028em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.85rem, 6.8vw, 5.1rem); letter-spacing: -.042em; line-height: .98; }
h2 { font-size: clamp(2.05rem, 4.3vw, 3.3rem); letter-spacing: -.034em; }
h3 { font-size: clamp(1.28rem, 2vw, 1.6rem); letter-spacing: -.02em; }
h4 { font-size: 1.06rem; letter-spacing: -.012em; }

p { margin: 0 0 1.15em; color: var(--fog); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  line-height: 1.6;
  color: #A6B0BF;
  max-width: 62ch;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  flex: none;
}

.mono { font-family: var(--font-mono); }

strong { color: var(--paper); font-weight: 600; }

.gild-text { color: var(--gild); }
.dove-text { color: var(--dove); }

/* A number allowed to be enormous. The scale IS the argument, so the
   type carries it rather than a paragraph explaining it. */
.bignum {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5.5rem, 18vw, 14rem);
  line-height: .82;
  letter-spacing: -.055em;
  margin: 0;
  background: linear-gradient(118deg, var(--dove) 6%, var(--dove-200) 34%, var(--gild-200) 66%, var(--gild) 94%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .bignum { color: var(--paper); -webkit-text-fill-color: currentColor; background: none; }
}

/* ---------- 4. Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.band {
  position: relative;
  padding-block: var(--band);
}

.band--tint { background: linear-gradient(180deg, transparent, rgba(12,16,23,.72) 18%, rgba(12,16,23,.72) 82%, transparent); }

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--hair) 22%, var(--hair) 78%, transparent);
}

.stack > * + * { margin-top: 18px; }

.section-head { max-width: 760px; margin-bottom: clamp(38px, 5vw, 60px); }
.section-head--mid { margin-inline: auto; text-align: center; }
.section-head--mid .eyebrow { justify-content: center; }
.section-head--mid .lede { margin-inline: auto; }

/* ---------- 5. Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7,9,12,.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hair-soft);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 66px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-right: auto;
  flex: none;
}
.brand svg { width: 24px; height: 24px; flex: none; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.01em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0; padding: 0;
}
/* :not(.btn) is load-bearing. Without it this rule out-specifies
   .btn--primary and paints the nav's call to action --fog on --dove,
   which is 1.9:1 and unreadable. */
.nav-links a:not(.btn) {
  font-size: 14.5px;
  color: var(--fog);
  text-decoration: none;
  transition: color .18s var(--ease);
}
.nav-links a:not(.btn):hover { color: var(--paper); }
.nav-links a[aria-current="page"]:not(.btn) { color: var(--paper); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--hair);
  border-radius: 9px;
  color: var(--paper);
  width: 40px; height: 38px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 16px; height: 1.5px;
  background: currentColor;
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 16px; height: 1.5px; background: currentColor;
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after  { top: 5px; }

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 13px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--dove); color: #04211C; }   /* 9.64:1 */
.btn--primary:hover { background: var(--dove-300); }

.btn--gild { background: var(--gild); color: #2A1E04; }      /* 8.32:1 */
.btn--gild:hover { background: var(--gild-300); }

.btn--ghost {
  background: var(--glass);
  border-color: var(--hair);
  color: var(--paper);
}
.btn--ghost:hover { background: var(--glass-2); border-color: rgba(255,255,255,.16); }

.btn--sm { padding: 10px 16px; font-size: 14px; }
.btn--lg { padding: 15px 26px; font-size: 16px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(48px, 7vw, 84px);
  padding-bottom: clamp(40px, 5vw, 68px);
}

.hero-head { max-width: 940px; }

.hero h1 { margin-bottom: 22px; }
.hero h1 .split-life { color: var(--dove); }
.hero h1 .split-biz  { color: var(--gild); }

.hero-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fog-dim);
  letter-spacing: .02em;
  margin-top: 14px;
}

/* The one-line thesis, set apart. */
.thesis {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -.02em;
  color: var(--paper);
  margin: 0;
  padding-left: 22px;
  border-left: 2px solid var(--accent);
}

/* ---------- 8. Forms ---------- */
.waitlist {
  display: flex;
  gap: 10px;
  margin-top: 30px;
  max-width: 470px;
  flex-wrap: wrap;
}
.waitlist input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  background: var(--glass);
  border: 1px solid var(--hair);
  border-radius: 10px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 13px 16px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.waitlist input[type="email"]::placeholder { color: var(--fog-dim); }
.waitlist input[type="email"]:hover { border-color: rgba(255,255,255,.16); }
.waitlist input[type="email"]:focus {
  outline: none;
  border-color: var(--dove);
  background: var(--glass-2);
  box-shadow: 0 0 0 3px rgba(79,216,196,.14);
}

.form-msg {
  font-family: var(--font-mono);
  font-size: 12.5px;
  margin-top: 12px;
  min-height: 18px;
  letter-spacing: .01em;
}
.form-msg[data-state="ok"]  { color: var(--dove); }
.form-msg[data-state="err"] { color: #F08A7A; }

/* Long-form form (contact) */
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fog);
  margin-bottom: 9px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--hair);
  border-radius: 10px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 15.5px;
  padding: 13px 15px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.field textarea { min-height: 168px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A94A4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
  cursor: pointer;
}
.field select option { background: var(--ink-2); color: var(--paper); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--dove);
  background: var(--glass-2);
  box-shadow: 0 0 0 3px rgba(79,216,196,.14);
}

/* ---------- 9. Product mockup ---------- */
.mock-wrap {
  margin-top: clamp(40px, 5vw, 64px);
  position: relative;
}
.mock-wrap::before {
  content: "";
  position: absolute;
  inset: 12% 6% -6% 6%;
  background: radial-gradient(ellipse at 50% 50%, rgba(79,216,196,.16), transparent 68%);
  filter: blur(56px);
  z-index: -1;
  transition: background .5s var(--ease);
}
.mock-wrap:has(.mock[data-lens="business"])::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(227,178,60,.16), transparent 68%);
}

.mock {
  --accent: var(--dove);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(17,22,31,.94), rgba(9,12,17,.97));
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9);
}
.mock[data-lens="business"] { --accent: var(--gild); }

.mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hair-soft);
  background: rgba(255,255,255,.02);
}
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.13); }
.mock-title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fog-dim);
  margin-left: 10px;
  letter-spacing: .04em;
}

.mock-body {
  display: grid;
  grid-template-columns: 194px 1fr;
  min-height: 396px;
}

.mock-side {
  border-right: 1px solid var(--hair-soft);
  padding: 16px 12px;
  background: rgba(255,255,255,.012);
}

.lens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  background: rgba(255,255,255,.045);
  border-radius: 9px;
  margin-bottom: 18px;
}
.lens button {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 8px 4px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--fog);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lens button:hover { color: var(--paper); }
.lens button[aria-pressed="true"] {
  background: var(--accent);
  color: #04211C;
  font-weight: 700;
}
.mock[data-lens="business"] .lens button[aria-pressed="true"] { color: #2A1E04; }

.mock-nav { list-style: none; margin: 0; padding: 0; }
.mock-nav li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--fog);
  padding: 8px 10px;
  border-radius: 8px;
}
.mock-nav li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 1.5px;
  background: var(--fog-dim);
  flex: none;
}
.mock-nav li.is-on {
  background: rgba(255,255,255,.05);
  color: var(--paper);
}
.mock-nav li.is-on::before { background: var(--accent); }

.mock-main { padding: 22px 24px; }

.mock-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.mock-h {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -.02em;
  margin: 0 0 20px;
}

.mock-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--hair-soft);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  margin-bottom: 9px;
  font-size: 13.5px;
  color: #B6BFCC;
}
.mock-check {
  width: 15px; height: 15px;
  border-radius: 4px;
  border: 1.5px solid var(--fog-dim);
  flex: none;
}
.mock-row.is-done { color: var(--fog-dim); }
.mock-row.is-done .mock-check {
  background: var(--accent);
  border-color: var(--accent);
}
.mock-row .mock-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--accent);
  border: 1px solid currentColor;
  padding: 3px 7px;
  border-radius: 5px;
  opacity: .85;
}

.mock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.mock-card {
  border: 1px solid var(--hair-soft);
  border-radius: 10px;
  padding: 13px;
  background: rgba(255,255,255,.02);
}
.mock-card .k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fog-dim);
  margin-bottom: 7px;
}
.mock-card .v {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: -.02em;
  color: var(--paper);
}
.mock-card .v small {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent);
  margin-left: 6px;
  letter-spacing: .04em;
}

.mock-bars { display: flex; align-items: flex-end; gap: 5px; height: 42px; margin-top: 10px; }
.mock-bars i {
  flex: 1;
  background: var(--accent);
  opacity: .32;
  border-radius: 2px 2px 0 0;
}
.mock-bars i:nth-child(4) { opacity: .85; }

/* Lens content swap */
.mock[data-lens="personal"] .lens-biz  { display: none; }
.mock[data-lens="business"] .lens-life { display: none; }

/* ---------- 10. The wall — every space, at once ----------
   The vastness visual. No paragraph does in a page what a dense grid
   of the entire product does in two seconds, so the grid is the
   argument and the copy just points at it. */
.wall-head {
  display: flex;
  align-items: flex-end;
  gap: clamp(20px, 4vw, 46px);
  flex-wrap: wrap;
}
.wall-head .bignum { flex: none; }
.wall-blurb { flex: 1 1 330px; padding-bottom: .55em; }
.wall-blurb .lede { margin: 0; }

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
  margin-top: clamp(28px, 4vw, 44px);
}
.wall-item {
  --accent: var(--dove);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 13px 12px;
  border: 1px solid var(--hair-soft);
  border-radius: 11px;
  background: rgba(255,255,255,.022);
  overflow: hidden;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.wall-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  opacity: .4;
  transition: opacity .2s var(--ease);
}
.wall-item:hover {
  border-color: rgba(255,255,255,.17);
  background: rgba(255,255,255,.05);
  transform: translateY(-2px);
}
.wall-item:hover::after { opacity: 1; }
.wall-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.018em;
  color: var(--paper);
  line-height: 1.15;
}
.wall-grp {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fog-dim);
}
.wall-item[data-lens="business"] { --accent: var(--gild); }
.wall-item[data-lens="both"]::after {
  background: linear-gradient(90deg, var(--dove), var(--gild));
}

.wall-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 24px;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fog-dim);
}
.wall-legend span { display: flex; align-items: center; gap: 9px; }
.wall-legend i { width: 16px; height: 2px; border-radius: 1px; flex: none; }

/* "What every space is" — native <details>. No script involved. */
.spacelist { margin-top: 30px; }
.spacelist > summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fog);
  padding: 15px 0;
  border-top: 1px solid var(--hair-soft);
  border-bottom: 1px solid var(--hair-soft);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 11px;
  transition: color .18s var(--ease);
}
.spacelist > summary::-webkit-details-marker { display: none; }
.spacelist > summary::before {
  content: "+";
  font-size: 15px;
  line-height: 1;
  color: var(--accent);
}
.spacelist[open] > summary::before { content: "\2013"; }
.spacelist > summary:hover { color: var(--paper); }
.spacelist-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 36px;
  padding: 24px 0 4px;
}
.spacelist-body div {
  padding: 12px 0;
  border-bottom: 1px solid var(--hair-soft);
  font-size: 14px;
  color: var(--fog);
  line-height: 1.5;
}
.spacelist-body b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -.014em;
  color: var(--paper);
  margin-bottom: 2px;
}

/* ---------- 11. The question machine ----------
   The differentiator, made playable. Every table name in the output is
   a real table in the product's schema, and the claim being made is
   structural — a question that crosses life and work is one query here
   and three exports anywhere else — rather than a claim about a
   result. With scripting off the two selects are ordinary form
   controls and the panel shows a fixed, hand-picked pairing. */
.qm {
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  overflow: hidden;
}
.qm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hair-soft);
  background: rgba(255,255,255,.02);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fog-dim);
}
.qm-head .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.13); flex: none; }
.qm-head .dot:first-child { background: rgba(79,216,196,.55); }
.qm-head .right { margin-left: auto; letter-spacing: .08em; }

.qm-ask {
  padding: clamp(24px, 3.6vw, 38px) clamp(20px, 3.4vw, 34px);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.4;
  color: var(--paper);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 11px;
  margin: 0;
}
.qm-ask select {
  font-family: var(--font-display);
  font-size: inherit;
  font-weight: 600;
  letter-spacing: -.03em;
  appearance: none;
  border: 0;
  border-bottom: 2px dashed currentColor;
  border-radius: 0;
  background-color: transparent;
  padding: 1px 25px 1px 3px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E9EEF5' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1px center;
  max-width: 100%;
}
.qm-ask select option { background: var(--ink-2); color: var(--paper); font-size: 15px; }
.qm-ask .sel-life { color: var(--dove); }
.qm-ask .sel-biz  { color: var(--gild); }

.qm-out {
  border-top: 1px solid var(--hair-soft);
  background: rgba(0,0,0,.3);
  padding: 20px clamp(20px, 3.4vw, 34px) 24px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--fog);
  overflow-x: auto;
}
.qm-sql {
  color: #B6BFCC;
  white-space: pre;
  display: block;
  margin: 0 0 16px;
}
.qm-sql .kw { color: var(--dove); }
.qm-sql .tb { color: var(--gild-300); }
.qm-yes, .qm-no { display: flex; gap: 11px; align-items: flex-start; }
.qm-yes { color: var(--dove); }
.qm-no  { color: var(--fog-dim); }
.qm-yes::before { content: "\2713"; flex: none; }
.qm-no::before  { content: "\2717"; flex: none; }
.qm-foot {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fog-dim);
  letter-spacing: .02em;
  margin: 16px 0 0;
  line-height: 1.65;
}

/* ---------- 12. The lens split ----------
   Personal and business, shown rather than described. */
.split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(255,255,255,.012);
}
.split-seam {
  background: linear-gradient(180deg, transparent, var(--dove) 12%, #8CC496 50%, var(--gild) 88%, transparent);
  opacity: .75;
}
.split-side { padding: clamp(26px, 3.4vw, 42px); position: relative; }
.split-side::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% -30%;
  height: 62%;
  background: radial-gradient(ellipse at 50% 100%, var(--accent), transparent 70%);
  opacity: .13;
  pointer-events: none;
}
.split-side > * { position: relative; z-index: 1; }
.split-side--life { --accent: var(--dove); }
.split-side--biz  { --accent: var(--gild); }
.split-side .eyebrow { color: var(--accent); }
.split-side h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: 12px; }
.split-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.split-list li {
  display: flex;
  gap: 11px;
  font-size: 14.5px;
  color: var(--fog);
  line-height: 1.45;
}
.split-list li::before {
  content: "";
  width: 5px; height: 5px;
  margin-top: 8px;
  border-radius: 1.5px;
  background: var(--accent);
  flex: none;
}
.split-note {
  margin-top: 26px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fog-dim);
  letter-spacing: .02em;
}

/* ---------- 13. Ownership ---------- */
.own {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(30px, 5vw, 68px);
  align-items: center;
}
.own-panel {
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  overflow: hidden;
}
.own-manifest {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.95;
  padding: 20px 22px;
  margin: 0;
  color: var(--fog);
  background: rgba(0,0,0,.28);
  overflow-x: auto;
  white-space: pre;
}
.own-manifest .k  { color: var(--dove); }
.own-manifest .n  { color: var(--paper); }
.own-manifest .c  { color: var(--fog-dim); }
.own-manifest .ok { color: var(--dove); }
.own-formats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 1px;
  background: var(--hair-soft);
  border-top: 1px solid var(--hair-soft);
}
.own-formats div {
  background: var(--ink-2);
  padding: 15px 14px;
}
.own-formats .f {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dove);
  margin-bottom: 5px;
}
.own-formats .d { font-size: 12.5px; color: var(--fog); line-height: 1.4; }

/* ---------- 14. Feature bands ---------- */
.feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.feature + .feature { margin-top: clamp(64px, 8vw, 116px); }

.feature--flip .feature-text { order: 2; }

.feature[data-lens="business"] { --accent: var(--gild); }
.feature[data-lens="business"] .eyebrow { color: var(--gild); }

.feature-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.feature-list li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  color: var(--fog);
  line-height: 1.5;
}
.feature-list li::before {
  content: "";
  width: 6px; height: 6px;
  margin-top: 9px;
  border-radius: 2px;
  background: var(--accent);
  flex: none;
}

.panel {
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  padding: 22px;
  position: relative;
  overflow: hidden;
  min-height: 300px;
}
.panel::after {
  content: "";
  position: absolute;
  inset: auto -30% -55% -30%;
  height: 60%;
  background: radial-gradient(ellipse at 50% 100%, var(--accent), transparent 70%);
  opacity: .18;
  pointer-events: none;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fog-dim);
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--hair-soft);
}
.panel-head span:last-child { color: var(--accent); }

/* Canvas panel decoration */
.canvas-art {
  position: relative;
  height: 232px;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 28px 28px;
  border-radius: 10px;
}
.canvas-node {
  position: absolute;
  border: 1px solid var(--accent);
  background: rgba(79,216,196,.08);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 9px 11px;
  white-space: nowrap;
}
.canvas-line { position: absolute; background: var(--accent); opacity: .4; }
.canvas-dot {
  position: absolute;
  width: 7px; height: 7px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: var(--ink);
}

/* Theme swatch panel */
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.swatch {
  border: 1px solid var(--hair-soft);
  border-radius: 10px;
  padding: 12px;
  background: rgba(255,255,255,.02);
}
.swatch .chips { display: flex; gap: 5px; margin-bottom: 9px; }
.swatch .chips i { width: 13px; height: 13px; border-radius: 4px; }
.swatch .nm {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fog-dim);
}

/* ---------- 15. Cards & grids ---------- */
.card {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--glass);
  padding: 26px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: 15px; margin-bottom: 0; }
.card--link:hover { border-color: rgba(255,255,255,.18); background: var(--glass-2); }

.card-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 14px;
}

/* Trust strip */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--hair-soft);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r);
  overflow: hidden;
}
.strip div {
  background: var(--ink);
  padding: 22px 20px;
}
.strip .k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.strip .t { font-size: 14.5px; color: var(--fog); line-height: 1.5; }

/* Feature tour rows */
.tour {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: clamp(18px, 4vw, 44px);
  padding: 34px 0;
  border-top: 1px solid var(--hair-soft);
}
.tour:last-of-type { border-bottom: 1px solid var(--hair-soft); }
.tour-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 6px;
}
.tour h3 { margin-bottom: 12px; }
.tour p { font-size: 15.5px; }
.tour ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 9px;
}
.tour ul li {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fog);
  letter-spacing: .01em;
  padding-left: 16px;
  position: relative;
}
.tour ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 1px;
  background: var(--accent);
}
.tour[data-lens="business"] { --accent: var(--gild); }

/* Quote / social proof placeholder */
.proof {
  border: 1px dashed var(--hair);
  border-radius: var(--r-lg);
  padding: clamp(30px, 5vw, 52px);
  text-align: center;
}
.proof .mark {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--fog-dim);
  opacity: .4;
  margin-bottom: 12px;
}

/* CTA band */
.cta {
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: clamp(34px, 5vw, 62px);
  background: linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  position: relative;
  overflow: hidden;
}
.cta::after {
  content: "";
  position: absolute;
  inset: auto -20% -70% 30%;
  height: 90%;
  background: radial-gradient(ellipse at 50% 100%, rgba(227,178,60,.2), transparent 68%);
  pointer-events: none;
}
.cta > * { position: relative; z-index: 1; }

/* ---------- 16. Terminal ---------- */
.term {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: rgba(0,0,0,.34);
  overflow: hidden;
  margin: 22px 0;
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hair-soft);
  background: rgba(255,255,255,.02);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fog-dim);
}
.term-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.13); flex: none; }
.term-bar .right { margin-left: auto; }
.term pre {
  margin: 0;
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.85;
  color: #B6BFCC;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
.term .p  { color: var(--dove); }      /* prompt */
.term .c  { color: var(--fog-dim); }   /* comment */
.term .o  { color: var(--fog); }       /* output */
.term .hl { color: var(--gild-300); }

/* ---------- 17. Pricing ---------- */
.price-toggle {
  display: inline-flex;
  padding: 4px;
  gap: 3px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--glass);
}
.price-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.price-toggle label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 9px;
  color: var(--fog);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.price-toggle label:hover { color: var(--paper); }
.price-toggle input:checked + label { background: var(--paper); color: var(--ink); font-weight: 500; }
.price-toggle input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 18px;
  margin-top: 34px;
  align-items: stretch;
}
.plan {
  --accent: var(--dove);
  position: relative;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
}
.plan[data-tone="business"] { --accent: var(--gild); }
.plan[data-best] {
  border-color: rgba(79,216,196,.42);
  box-shadow: 0 0 0 1px rgba(79,216,196,.14), 0 30px 60px -40px rgba(79,216,196,.5);
}
.plan-flag {
  position: absolute;
  top: 0; right: 20px;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--dove);
  color: #04211C;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: 500;
}
.plan-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -.022em;
  margin: 0 0 4px;
}
.plan-kind {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.plan-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3rem);
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--paper);
  align-items: baseline;
  gap: 7px;
  margin: 0;
}
.plan-price .per {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--fog-dim);
  text-transform: none;
}
.plan-sub { font-size: 14px; color: var(--fog); margin: 12px 0 0; line-height: 1.5; }
.plan-feats {
  list-style: none;
  margin: 22px 0 26px;
  padding: 20px 0 0;
  border-top: 1px solid var(--hair-soft);
  display: grid;
  gap: 10px;
  align-content: start;
  flex: 1;
}
.plan-feats li {
  display: flex;
  gap: 11px;
  font-size: 14.5px;
  color: var(--fog);
  line-height: 1.45;
}
.plan-feats li::before {
  content: "";
  width: 5px; height: 5px;
  margin-top: 8px;
  border-radius: 1.5px;
  background: var(--accent);
  flex: none;
}
.plan-feats li.off { color: var(--fog-dim); }
.plan-feats li.off::before { background: none; box-shadow: inset 0 0 0 1px var(--fog-dim); }
.plan .waitlist { margin-top: 0; max-width: none; }
.plan .waitlist input[type="email"] { flex: 1 1 100%; }
.plan .waitlist .btn { width: 100%; }
.plan-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fog-dim);
  letter-spacing: .03em;
  margin-top: 12px;
  text-align: center;
  line-height: 1.55;
}

/* CSS-only billing toggle: two radios, two visibilities. It is a radio
   rather than a button precisely so it keeps working with scripting
   off — and where :has() is missing, both prices show at once instead
   of one being hidden with no way to reveal it. */
.plan .term-once,
.plan .term-month,
.plan .sub-once,
.plan .sub-month { display: none; }
body:has(#bill-once:checked)  .plan .term-once  { display: flex; }
body:has(#bill-month:checked) .plan .term-month { display: flex; }
body:has(#bill-once:checked)  .plan .sub-once   { display: block; }
body:has(#bill-month:checked) .plan .sub-month  { display: block; }
@supports not selector(:has(*)) {
  .price-toggle { display: none; }
  .plan .term-once, .plan .term-month { display: flex; }
  .plan .sub-once,  .plan .sub-month  { display: block; }
  .plan .term-month { margin-top: 14px; }
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.compare caption { text-align: left; margin-bottom: 18px; color: var(--fog); font-size: 14px; }
.compare th, .compare td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--hair-soft);
  text-align: left;
  vertical-align: top;
}
.compare thead th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fog-dim);
  border-bottom-color: var(--hair);
}
.compare thead th:nth-child(2) { color: var(--dove); }
.compare thead th:nth-child(3) { color: var(--gild); }
.compare tbody th { font-weight: 500; color: var(--paper); font-size: 14.5px; }
.compare td { color: var(--fog); }
.compare .y { color: var(--dove); }
.compare .n { color: var(--fog-dim); }

/* ---------- 18. FAQ ---------- */
.faq { border-top: 1px solid var(--hair-soft); }
.faq details { border-bottom: 1px solid var(--hair-soft); }
.faq summary {
  cursor: pointer;
  padding: 22px 40px 22px 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  font-weight: 600;
  letter-spacing: -.015em;
  list-style: none;
  position: relative;
  transition: color .18s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--dove); }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 11px; height: 11px;
  margin-top: -6px;
  border-right: 1.5px solid var(--fog);
  border-bottom: 1.5px solid var(--fog);
  transform: rotate(45deg);
  transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > div { padding: 0 40px 24px 0; }
.faq details p { font-size: 15.5px; max-width: 74ch; }

/* ---------- 19. Footer ---------- */
.foot {
  border-top: 1px solid var(--hair-soft);
  padding-block: 52px 40px;
  background: rgba(9,12,17,.6);
  position: relative;
  z-index: 1;
}
.foot-top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 44px;
}
/* Not a heading. These label the three footer nav regions, and as
   <h4> after the page's <h2>s they put a two-level jump in the outline
   of every page on the site. */
.foot-h {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fog-dim);
  margin: 0 0 16px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot ul a {
  font-size: 14.5px;
  color: var(--fog);
  text-decoration: none;
  transition: color .18s var(--ease);
}
.foot ul a:hover { color: var(--paper); }
.foot-blurb { font-size: 14.5px; max-width: 40ch; }
.foot-parent {
  font-size: 13px;
  color: var(--fog-dim);
  line-height: 1.65;
  margin-top: 16px;
  max-width: 40ch;
}
.foot-parent a { color: var(--fog); }
.foot-base {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  padding-top: 26px;
  border-top: 1px solid var(--hair-soft);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fog-dim);
  letter-spacing: .03em;
}
.foot-base .spacer { margin-left: auto; }

/* Legal / prose pages */
.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-top: 46px; }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { font-size: 1.15rem; margin-top: 32px; }
.prose ul { color: var(--fog); padding-left: 20px; }
.prose li { margin-bottom: 9px; }
.prose a { color: var(--dove); }

/* ---------- 20. The spine ----------
   One path, weaving side to side down the whole scroll, with the
   sections hanging off alternating sides of it. Decorative, never
   interactive, always behind the content.

   THE DEFAULT IS THE FULLY DRAWN PATH. Everything below only ever
   takes drawing away — from a browser that has a scroll timeline, or
   from one where site.js is running. So the failure direction is
   "already drawn" rather than "invisible for ever", and reduced-motion
   and no-JS both land on a still page that looks deliberate because it
   is the same picture, finished. */
.spine-host { position: relative; }
/* Content sits above the spine. Note the :not() — `.spine-host > *`
   and `.spine` have identical specificity, so without it whichever
   came later in this file would decide whether the spine is
   positioned at all, and the spine would silently collapse in flow. */
.spine-host > *:not(.spine) { position: relative; z-index: 1; }

.spine {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}
.spine svg { width: 100%; height: 100%; display: block; }

.spine-line {
  fill: none;
  stroke: url(#spine-grad);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.spine-glow {
  fill: none;
  stroke: url(#spine-grad);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: .22;
  filter: blur(4px);
}
.spine-node {
  fill: var(--ink);
  stroke: var(--dove);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  opacity: .9;
}
.spine-node--biz { stroke: var(--gild); }

/* THE REVEAL IS A CLIP, NOT A DASH.
   stroke-dashoffset is the obvious way to draw a path on, and it is
   the wrong one here: this SVG is stretched with
   preserveAspectRatio="none", so screen length and user-space length
   differ by a different factor on a vertical run than on a diagonal.
   Normalising with pathLength="1" fixes the arithmetic and not the
   geometry, so the line stops short of where the maths says it is —
   measured at ~57% drawn when the offset read 100%.

   Clipping the container top-down is immune to all of that, animates
   on the compositor, and on a path this vertical is visually the same
   gesture. */
@keyframes spine-draw {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: no-preference) {
  /* 1. The whole thing in CSS, where the browser has scroll timelines.
        The timeline is NAMED on the .spine box rather than each path
        calling view() for itself: a bare view() would make the SVG
        element its own subject, and it is the div's progress through
        the viewport that this is meant to track. */
  @supports (animation-timeline: view()) {
    .spine {
      view-timeline-name: --spine;
      view-timeline-axis: block;
      animation: spine-draw linear both;
      animation-timeline: --spine;
      animation-range: cover 0% cover 92%;
    }
  }
  /* 2. Otherwise, and only when site.js is actually running, --draw is
        set from the scroll position. It is registered just below with
        an initial value of 1 — fully drawn — so the spine is never
        blank waiting for a scroll event that may never come. */
  @supports not (animation-timeline: view()) {
    .js .spine {
      clip-path: inset(0 0 calc((1 - var(--draw, 1)) * 100%) 0);
    }
  }
}

/* Registered so the initial value is a real typed 1 rather than only
   the fallback inside each var(). site.js writes it; nothing in this
   stylesheet does. */
@property --draw {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

/* ---------- 21. Reveal + motion ----------
   THE HIDDEN STATE IS GATED ON .no-js HAVING GONE, and that is not a
   nicety. A bare `.reveal { opacity: 0 }` means a visitor with
   scripting off gets a blank page below the hero, because the class
   that would reveal it is added by the script that is not running. The
   `no-js` class ships in the HTML and site.js removes it, so the
   default — no JS, a failed script load, a blocked file — is the whole
   page, visible.

   site.js also marks everything already on screen as `is-in` BEFORE it
   removes that class, so nothing a visitor can already see is taken
   away from them for the length of an animation frame. */
html:not(.no-js) .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: var(--rd, 0ms);
}
html:not(.no-js) .reveal.is-in { opacity: 1; transform: none; }

/* Staggered, and deliberately fast. A reader should never be waiting
   on an animation to be allowed to read — 45ms steps capped at seven
   means the last card in a row lands a third of a second after the
   first, which registers as "arriving together" rather than "queueing". */
.stagger > *:nth-child(1) { --rd: 0ms; }
.stagger > *:nth-child(2) { --rd: 45ms; }
.stagger > *:nth-child(3) { --rd: 90ms; }
.stagger > *:nth-child(4) { --rd: 135ms; }
.stagger > *:nth-child(5) { --rd: 180ms; }
.stagger > *:nth-child(6) { --rd: 225ms; }
.stagger > *:nth-child(n+7) { --rd: 270ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html:not(.no-js) .reveal { opacity: 1; transform: none; }
  html::before, body::before, body::after { animation: none; }
  /* Say it twice. The blanket rule above kills the animation, but an
     animation with `both` fill can still hold its from-state, and the
     from-state here is an invisible spine. */
  .spine {
    animation: none !important;
    clip-path: none !important;
  }
}

/* ---------- 22. Responsive ---------- */
@media (max-width: 1040px) {
  .own { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1.5fr 1fr 1fr; }
}

@media (max-width: 900px) {
  /* The weave compresses into a gentle meander down a narrow page,
     which is the right thing. The nodes do not: a circle in a viewBox
     stretched this far vertically renders as a tall thin ellipse, so
     they go rather than being drawn wrong. */
  .spine-node { display: none; }
  .spine-line { stroke-width: 1.3; }
  .spine-glow { stroke-width: 7; opacity: .18; }

  .feature { grid-template-columns: 1fr; }
  .feature--flip .feature-text { order: 0; }
  .split { grid-template-columns: 1fr; }
  .split-seam { height: 1px; background: linear-gradient(90deg, transparent, var(--dove) 12%, #8CC496 50%, var(--gild) 88%, transparent); }
  .tour { grid-template-columns: 1fr; gap: 14px; }
  .tour-label { padding-top: 0; }
  .compare { font-size: 13.5px; }
  .compare th, .compare td { padding: 11px 10px; }
}

@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 66px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(9,12,17,.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--hair);
    padding: 8px var(--pad) 18px;
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { border-top: 1px solid var(--hair-soft); }
  .nav-links li:first-child { border-top: 0; }
  .nav-links a { display: block; padding: 15px 0; font-size: 16px; }
  .nav-links .btn { margin-top: 14px; justify-content: center; }

  .mock-body { grid-template-columns: 1fr; }
  .mock-side { border-right: 0; border-bottom: 1px solid var(--hair-soft); }
  .mock-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .mock-main { padding: 18px; }

  .swatches { grid-template-columns: repeat(2, 1fr); }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-blurb, .foot-parent { max-width: none; }
  .foot-top > :first-child { grid-column: 1 / -1; }
  .wall { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 7px; }
  /* The longest option — "how well I keep my morning routine" — has to
     fit on one line beside the question mark at 390px, or the mark is
     stranded on a line of its own. This is the size at which it does. */
  .qm-ask { font-size: clamp(1rem, 4.4vw, 1.4rem); gap: 6px 8px; }
  .qm-ask select { flex: 0 1 auto; min-width: 0; }
  .qm-out { font-size: 11.5px; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .mock-grid { grid-template-columns: 1fr; }
  .waitlist { flex-direction: column; }
  .waitlist .btn { width: 100%; }
  .wall { grid-template-columns: repeat(2, 1fr); }
  .thesis { padding-left: 16px; }
  .compare th, .compare td { padding: 10px 8px; }
}