/* ============================================================
   MyBioVault landing page
   Aesthetic: "the records office for your body"
   Warm paper, ink hairlines, editorial serif, mono file-labels.
   ============================================================ */

/* ---------- fonts (self-hosted, EU-friendly: no CDN calls) ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/Fraunces-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/Fraunces-Italic-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/fonts/PlexMono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/fonts/PlexMono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --paper: #F4EFE6;
  --paper-high: #FAF7F0;
  --ink: #1B1712;
  /* The muted steps keep their original names, but the alphas were raised so all
     of them clear WCAG AA (4.5:1) on --paper, down to the 10px mono labels.
     Was: --ink-50 at 0.5 (3.29:1), --ink-60 at 0.6 (4.46:1). */
  --ink-80: rgba(27, 23, 18, 0.8);
  --ink-70: rgba(27, 23, 18, 0.7);
  --ink-60: rgba(27, 23, 18, 0.66);   /* 5.36:1 */
  --ink-50: rgba(27, 23, 18, 0.62);   /* 4.71:1 */
  --line: rgba(27, 23, 18, 0.16);
  --line-strong: rgba(27, 23, 18, 0.55);
  /* accent: deep indigo document ink, warm paper's opposite */
  --accent: #3A3583;                  /* 9.73:1 on paper */
  --accent-12: rgba(58, 53, 131, 0.12);
  --mist: #B7B2E8;          /* the accent, legible on ink: 8.96:1 */
  --vermilion: #B84019;     /* darkened from #C2451E, which was 4.40:1 on paper. Now 4.85:1 */
  --paper-on-ink-75: rgba(244, 239, 230, 0.75);
  --paper-on-ink-60: rgba(244, 239, 230, 0.6);
  --paper-on-ink-52: rgba(244, 239, 230, 0.52);   /* small print on ink, 4.90:1 */
  --paper-on-ink-22: rgba(244, 239, 230, 0.22);   /* hairlines only, never text */

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Switzer', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Plex Mono', 'Consolas', monospace;

  --ease: cubic-bezier(0.19, 0.66, 0.22, 1);
  --wrap: 1240px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* paper grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { max-width: 100%; }
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }
.ownership :focus-visible, .site-foot :focus-visible { outline-color: var(--mist); }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Off-screen until tabbed to, so a keyboard visitor can jump the nav.
   Nothing in the design changes for anyone using a mouse. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 3000;
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: 12px; }
section { scroll-margin-top: 84px; }

/* ---------- type utilities ---------- */
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.kicker-light { color: var(--paper-on-ink-60); }

.h2 {
  font-family: var(--serif);
  font-weight: 520;
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin-top: 22px;
  text-wrap: balance;
}
.h2 em, .join-title em, .hero-title em {
  font-style: italic;
  font-weight: 480;
  color: var(--accent);
}
.tl-mono-html {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.body-copy {
  margin-top: 26px;
  max-width: 47ch;
  color: var(--ink-80);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 24px;
  /* 44px is the floor for a comfortable touch target; the padding alone landed
     this at 43 and every button on the page is one people tap on a phone. */
  min-height: 44px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn[disabled] { opacity: 0.55; cursor: wait; }

/* ---------- header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.site-head.scrolled { border-bottom-color: var(--line); }
.head-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 66px;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.wordmark .dot { color: var(--vermilion); }
.wordmark-light { color: var(--paper); }
.head-nav { display: flex; gap: 28px; }
.head-nav a {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink-60);
  text-decoration: none;
  transition: color 0.2s;
}
.head-nav a:hover { color: var(--ink); }
.head-cta { padding: 11px 18px; }

/* ---------- language menu ----------
   A <details> element, so it opens with no JavaScript and holds nothing but a list
   of links. Styled as a control rather than as another bracketed nav item: hairline
   box, mono label, same weight as the field borders elsewhere on the page. */
.head-actions { display: flex; align-items: center; gap: 12px; }
.lang-menu { position: relative; }
.lang-menu summary {
  display: flex;
  align-items: center;
  gap: 7px;
  /* both are needed: list-style for Firefox, the marker rule below for WebKit */
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink-60);
  /* matches .head-cta's box so the two sit level either side of the gap */
  padding: 11px 13px;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  user-select: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover,
.lang-menu[open] summary { color: var(--ink); border-color: var(--ink); }
/* Drawn with borders rather than set as a glyph: ▾ is missing from Plex Mono and
   would fall back to whatever the system has, at a size that never matches. */
.lang-menu summary::after {
  content: "";
  width: 0;
  height: 0;
  border-inline: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.85;
  transition: transform 0.2s var(--ease);
}
.lang-menu[open] summary::after { transform: rotate(180deg); }

/* A closed <details> hides its own content, but it does it through an internal slot
   that still gives this absolutely positioned panel a 330x412 box to measure. Saying
   it outright means the panel is not laid out, painted or focusable until it opens,
   rather than trusting each engine to arrive at the same answer. */
.lang-menu:not([open]) .lang-panel { display: none; }
.lang-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  /* wide enough for two columns of language names, never wider than the viewport */
  width: min(330px, calc(100vw - 40px));
  max-height: min(66vh, 440px);
  overflow-y: auto;
  padding: 12px 6px 8px;
  background: var(--paper-high);
  border: 1px solid var(--ink);
  box-shadow: 0 14px 34px rgba(27, 23, 18, 0.13);
  z-index: 120;
}
.lang-panel-head {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-50);
  padding: 0 12px 9px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.lang-list {
  columns: 2;
  column-gap: 4px;
}
/* Without this a name can be split across the two columns mid-row */
.lang-list li { break-inside: avoid; }
.lang-list a {
  display: block;
  padding: 6px 12px;
  font-family: var(--sans);
  font-size: 0.83rem;
  line-height: 1.35;
  color: var(--ink-70);
  text-decoration: none;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.lang-list a:hover { color: var(--ink); background: var(--accent-12); }
.lang-list a.active { color: var(--ink); font-weight: 600; }
/* The dot is drawn, for the same reason the caret above is */
.lang-list a.active::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- hero ---------- */
.hero { padding-top: clamp(70px, 10vh, 130px); }
.hero-title {
  font-family: var(--serif);
  font-weight: 490;
  font-size: clamp(2.9rem, 7.4vw, 6.6rem);
  line-height: 0.99;
  letter-spacing: -0.015em;
  margin-top: 28px;
  text-wrap: balance;
}
.hero-line { display: block; }
.hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
  margin-top: clamp(36px, 5vw, 64px);
}
.lede {
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--ink-80);
  max-width: 54ch;
}
.microline {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-top: 14px;
}
/* The three-item line under the hero form. Flex with a tight gap so the row
   stays no wider than the form above it, and each item is nowrap so a break
   lands between items instead of orphaning "anytime" onto its own line. */
.microline-items {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 12px;
}
.microline-items > span { white-space: nowrap; }
/* Separator trails the item it follows rather than leading the next one, so a
   wrap leaves it at the end of a line, reading as "continues", instead of
   dangling at the start of the next line like a stray bullet. */
.microline-items > span:not(:last-child)::after {
  content: "·";
  margin-left: 12px;
  color: var(--line-strong);
}
.microline-legal { margin-top: 7px; }

/* --accent is 9.73:1 on paper, so this stays legible at 10.5px */
.microline a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* hero load choreography */
.hero-anim {
  opacity: 0;
  transform: translateY(22px);
  animation: rise 0.95s var(--ease) forwards;
}
.a1 { animation-delay: 0.05s; }
.a2 { animation-delay: 0.16s; }
.a3 { animation-delay: 0.27s; }
.a4 { animation-delay: 0.38s; }
.a5 { animation-delay: 0.55s; }
.a6 { animation-delay: 0.68s; }
@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* ---------- signup form ---------- */
.signup {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--ink);
  background: var(--paper-high);
}
.signup input[type="email"] {
  flex: 1 1 200px;
  min-width: 0;
  padding: 16px 18px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: none;
}
.signup input[type="email"]::placeholder { color: var(--ink-50); }
.signup input[type="email"]:focus { outline: none; }
.signup:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.signup .btn { border: none; border-left: 1px solid var(--ink); }
.signup .hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}
/* ---------- no-JavaScript signup result ----------
   A form submitted without main.js is answered with a redirect back to this page
   carrying a fragment, and :target reveals just that one line. Every paragraph in
   here is display:none until it is the target, so with JavaScript running (where
   main.js writes into .form-note instead) the whole block never appears. */
.nojs-status > p { display: none; }
.nojs-status > p:target {
  display: block;
  margin: 0;
  padding: 14px 20px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  text-align: center;
  /* clears the sticky header when the browser jumps to the fragment */
  scroll-margin-top: 80px;
}
.nojs-status > p#check-address:target,
.nojs-status > p#too-many:target,
.nojs-status > p#trouble:target { background: var(--vermilion); }

.form-note {
  flex-basis: 100%;
  order: 3;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--vermilion);
  padding: 0 18px;
}
.form-note:not(:empty) { padding: 10px 18px 12px; }
.signup.done { border-color: var(--accent); background: transparent; }
.signup.done input, .signup.done .btn { display: none; }
.signup.done .form-note {
  color: var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  letter-spacing: 0;
  padding: 18px 20px 6px;
}
.form-reset {
  order: 4;
  align-self: flex-start;
  margin: 0 20px 14px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s;
}
.form-reset:hover { color: var(--accent); }
.join-form .form-reset { align-self: center; }

/* ---------- day strip (fig. 01) ---------- */
.daystrip { margin-top: clamp(56px, 9vw, 110px); }
.fig-caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line-strong);
  padding-top: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.fig-caption-right { color: var(--ink-50); text-align: right; }
.fig-hint { display: none; color: var(--accent); }
.daystrip-scroll { overflow-x: auto; scrollbar-width: thin; }
.daystrip-svg {
  display: block;
  width: 100%;
  min-width: 880px;
  height: auto;
  margin-top: 8px;
}
.tl-mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.tl-serif {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
}
.tl-dim { opacity: 0.62; }   /* matches --ink-50, so the SVG labels clear AA too */
.tl-hours text { font-size: 10px; }

.fig-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 6px;
  padding-bottom: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.fig-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { display: inline-block; }
.sw-line { width: 18px; height: 2px; background: var(--ink); }
.sw-hatch {
  width: 12px; height: 12px;
  background: repeating-linear-gradient(45deg, transparent 0 3px, var(--accent) 3px 4px);
  border: 1px solid var(--line);
}
.sw-diamond { width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); }
.sw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vermilion); }
.sw-dash { width: 18px; border-top: 2px dashed var(--accent); }

/* timeline draw-in, triggered by .revealed */
.tl-hr { stroke-dasharray: 1; stroke-dashoffset: 1; }
.daystrip.revealed .tl-hr { animation: draw 2.1s 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.tl-sleep, .daystrip .tl-hair, .tl-goal, .tl-goal + text { opacity: 0; transition: opacity 0.7s var(--ease); }
.daystrip.revealed .tl-sleep { opacity: 0.55; transition-delay: 0.5s; }
.daystrip.revealed .tl-hair, .daystrip.revealed .tl-goal, .daystrip.revealed .tl-goal + text { opacity: 1; transition-delay: 0.6s; }
.tl-event { opacity: 0; }
.daystrip.revealed .e1 { animation: fadein 0.6s 1.35s var(--ease) forwards; }
.daystrip.revealed .e2 { animation: fadein 0.6s 1.7s var(--ease) forwards; }
.daystrip.revealed .e3 { animation: fadein 0.6s 1.95s var(--ease) forwards; }
.daystrip.revealed .e4 { animation: fadein 0.6s 2.15s var(--ease) forwards; }
.daystrip.revealed .e5 { animation: fadein 0.6s 2.35s var(--ease) forwards; }
@keyframes fadein { to { opacity: 1; } }

/* ---------- sources marquee ---------- */
.sources { padding-top: clamp(70px, 10vw, 120px); }
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line-strong);
  padding-block: 20px;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group {
  display: flex;
  align-items: baseline;
  gap: 40px;
  padding-right: 40px;
  white-space: nowrap;
}
.marquee-group span {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  letter-spacing: -0.01em;
}
.marquee-group span.alt { font-style: italic; color: var(--accent); }
.marquee-group i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 1.1rem;
  color: var(--vermilion);
  transform: translateY(-2px);
}
@keyframes marquee { to { transform: translateX(-50%); } }

.sources-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 40px;
  padding-top: 18px;
}
.sources-line {
  font-size: 15px;
  color: var(--ink-60);
  max-width: 62ch;
}

/* the source register */
.register {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4.5vw, 76px);
  margin-top: clamp(34px, 4.5vw, 56px);
}
.register-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.register-head .rh-how { color: var(--ink-50); letter-spacing: 0.14em; }
.register-row {
  display: grid;
  grid-template-columns: minmax(112px, 0.72fr) minmax(0, 1.28fr);
  gap: 8px 22px;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding: 15px 2px 15px 0;
  transition: border-color 0.25s var(--ease);
}
.register-row:last-child { border-bottom-color: var(--line-strong); }
.r-name {
  font-family: var(--serif);
  font-weight: 520;
  font-size: 1.16rem;
  letter-spacing: -0.005em;
  transition: color 0.25s var(--ease);
}
.register-row.is-doc .r-name { font-style: italic; color: var(--accent); }
.r-what { font-size: 14.5px; line-height: 1.5; color: var(--ink-60); }
.register-row:hover .r-name { color: var(--accent); }
.register-row:hover .r-what { color: var(--ink-80); }
.register-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 30px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.register-foot b { color: var(--accent); font-weight: 500; }

/* ---------- the system ---------- */
.system { padding-block: clamp(90px, 13vw, 160px) 0; }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(44px, 6vw, 72px);
}
.step {
  border-top: 1px solid var(--line-strong);
  padding-top: 22px;
}
.step-no {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 460;
  font-size: 2.6rem;
  color: var(--accent);
  line-height: 1;
}
.step-title {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 18px 0 10px;
}
.step p { font-size: 15.5px; color: var(--ink-70); max-width: 38ch; }

/* ---------- insight ---------- */
.insight { padding-block: clamp(90px, 13vw, 160px) 0; }
.insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: stretch;
}
/* the two artifacts share the column height, so the text never outruns them */
.insight-board {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(22px, 3vw, 38px);
}
.feature-list { margin-top: clamp(30px, 4vw, 48px); }
.feature-list li {
  border-top: 1px solid var(--line);
  padding: 24px 0;
}
.feature-list h3 {
  font-family: var(--serif);
  font-weight: 520;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.feature-list p { font-size: 15.5px; color: var(--ink-70); max-width: 44ch; }

.board {
  border: 1px solid var(--line-strong);
  background: var(--paper-high);
  box-shadow: 10px 10px 0 rgba(27, 23, 18, 0.05);
  transform: rotate(-0.5deg);
}
.board-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink-70);
}
.board-status { color: var(--accent); }
.board-tiles { display: grid; grid-template-columns: 1fr 1fr; }
.tile { padding: 20px 18px 18px; display: flex; flex-direction: column; align-items: flex-start; }
.tile:nth-child(even) { border-left: 1px solid var(--line); }
.tile:nth-child(n+3) { border-top: 1px solid var(--line); }
.tile-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.tile-value {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2.3rem;
  line-height: 1.1;
  margin-top: 8px;
}
.tile-value small { font-size: 1.05rem; font-weight: 460; }
.tile-delta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-top: 5px;
}
.tile-delta.up { color: var(--accent); }
.tile-delta.warn { color: var(--vermilion); }
.spark { width: 64px; height: 20px; margin-top: 12px; }
.tile-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.42;
  margin-top: 8px;
  color: var(--ink-80);
}

/* the zoom-level trend card, second artifact under the board */
.trend {
  border: 1px solid var(--line-strong);
  background: var(--paper-high);
  box-shadow: 10px 10px 0 rgba(27, 23, 18, 0.05);
  transform: rotate(0.4deg);
  padding: 16px 18px 14px;
}
.trend-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  color: var(--ink-70);
}
.trend-scale { color: var(--ink-50); white-space: nowrap; }
.trend-scale b {
  color: var(--accent);
  font-weight: 500;
  box-shadow: 0 1px 0 var(--accent);
}
.trend-svg { display: block; width: 100%; height: auto; margin-top: 12px; }
.trend-foot {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--ink-50);
}
.trend-foot b { color: var(--accent); font-weight: 500; }
.trend-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.insight-board.revealed .trend-line {
  animation: draw 1.6s 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.trend-area, .trend-goal, .trend-dot { opacity: 0; transition: opacity 0.7s var(--ease) 1.1s; }
.insight-board.revealed .trend-area { opacity: 1; }
.insight-board.revealed .trend-goal { opacity: 1; }
.insight-board.revealed .trend-dot { opacity: 1; }

/* ---------- goals ---------- */
.goals { padding-block: clamp(90px, 13vw, 160px) 0; }
.goals-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.goal { border-top: 1px solid var(--line); padding: 20px 0; }
.goal-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink-70);
}
.goal-target { color: var(--accent); }
.bar {
  height: 10px;
  border: 1px solid var(--ink);
  margin-top: 12px;
  background: var(--paper-high);
}
.bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 1.3s var(--ease);
}
[data-reveal].revealed .bar-fill, .revealed .goal .bar-fill { width: var(--w); }
.goal:nth-child(1) .bar-fill { transition-delay: 0.2s; }
.goal:nth-child(2) .bar-fill { transition-delay: 0.35s; }
.goal:nth-child(3) .bar-fill { transition-delay: 0.5s; }
.goal-foot {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-top: 18px;
}

/* ---------- ownership charter ---------- */
.ownership {
  margin-top: clamp(100px, 14vw, 170px);
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(90px, 12vw, 150px);
}
.charter-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.charter-lede {
  margin-top: 26px;
  max-width: 52ch;
  font-size: 17px;
  color: var(--paper-on-ink-75);
}
.ownership .h2 em { color: var(--mist); }
.stamp-holder { padding-top: 12px; }
.stamp {
  width: clamp(112px, 12vw, 150px);
  height: auto;
  color: var(--paper);
  animation: spin 36s linear infinite;
}
.stamp-text {
  font-family: var(--mono);
  font-size: 8.6px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  fill: currentColor;
}
@keyframes spin { to { transform: rotate(360deg); } }

.charter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(40px, 5vw, 80px);
  margin-top: clamp(48px, 6vw, 80px);
}
.clause {
  border-top: 1px solid var(--paper-on-ink-22);
  padding: 30px 0 34px;
}
.clause-no {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
}
.clause-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  margin: 14px 0 10px;
}
.clause p { font-size: 15.5px; line-height: 1.62; color: var(--paper-on-ink-75); max-width: 46ch; }

/* ---------- join ---------- */
.join { padding-block: clamp(110px, 15vw, 190px); }
.join-inner { text-align: center; }
.join-title {
  font-family: var(--serif);
  font-weight: 490;
  font-size: clamp(3.4rem, 9.5vw, 7.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 24px;
  text-wrap: balance;
}
.join-lede {
  margin: 26px auto 0;
  max-width: 54ch;
  font-size: 17px;
  color: var(--ink-80);
}
.join-form { max-width: 620px; margin: 44px auto 0; }
.join-form .microline { text-align: center; }

/* ---------- footer ---------- */
.site-foot {
  background: var(--ink);
  color: var(--paper);
  padding-block: 60px 52px;
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 40px;
  align-items: start;
}
.foot-brand p {
  margin-top: 14px;
  font-size: 15px;
  color: var(--paper-on-ink-60);
  line-height: 1.55;
}
.foot-meta { display: grid; gap: 10px; color: var(--paper-on-ink-75); }
.foot-meta #clock { color: var(--paper-on-ink-60); }
.foot-legal { display: grid; gap: 12px; }
.foot-legal p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--paper-on-ink-52);
  max-width: 60ch;
}
/* --mist is the accent's legible form on ink, 8.96:1 */
.foot-links a {
  color: var(--mist);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- reveal-on-scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
[data-reveal].revealed { opacity: 1; transform: none; }
[data-stagger].revealed > * { opacity: 1; transform: none; }
[data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-stagger].revealed > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].revealed > *:nth-child(2) { transition-delay: 0.16s; }
[data-stagger].revealed > *:nth-child(3) { transition-delay: 0.27s; }
[data-stagger].revealed > *:nth-child(4) { transition-delay: 0.38s; }
[data-stagger].revealed > *:nth-child(5) { transition-delay: 0.49s; }

/* ---------- responsive ---------- */
/* The hero form needs ~410px to keep its button on one line. Below this the
   lede and form stack so the form always gets the full column. */
@media (max-width: 1120px) {
  .hero-foot { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 960px) {
  .head-nav { display: none; }
  .insight-grid, .goals-grid { grid-template-columns: 1fr; }
  .register { grid-template-columns: 1fr; gap: 34px; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { padding-block: 26px; }
  .charter { grid-template-columns: 1fr; }
  .charter-head { grid-template-columns: 1fr; }
  .stamp-holder { order: -1; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 620px) {
  /* Below this the designed line breaks no longer fit, so the headings reflow
     and text-wrap: balance evens them out. The hero lines go inline, which keeps
     the staggered fade but drops the rise: transforms do not apply to inline boxes. */
  .hero-line { display: inline; }
  .brk { display: none; }
  .signup { flex-direction: column; }
  /* The row layout gives the field `flex: 1 1 200px` so it fills the width beside
     the button. Once this is a column, flex-basis measures HEIGHT instead, which
     stretched the input to 200px tall on every phone. Natural height here. */
  .signup input[type="email"] { flex: 0 0 auto; }
  .signup .btn { border-left: none; border-top: 1px solid var(--ink); width: 100%; }
  .signup.done .btn { display: none; }
  .head-cta { padding: 12px 15px; font-size: 10.5px; }
  /* The header is down to the wordmark plus these two by now, so the language
     control gives up its padding first and keeps the CTA at full size. */
  .head-actions { gap: 8px; }
  .lang-menu summary { padding: 11px 9px; letter-spacing: 0.08em; }
  /* Anchored to the picker, the panel's right edge lines up with the picker's, which
     on a phone puts its left edge off the side of the screen: the CTA still sits
     between the picker and the margin. So below this it spans the viewport instead,
     pinned under the 66px header. Fixed insets rather than percentages on purpose,
     because the header's backdrop-filter may or may not be the containing block and
     a percentage would resolve against the wrong box. */
  .lang-panel {
    position: fixed;
    top: 72px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 96px);
  }
  .fig-hint { display: inline; }
  .fig-caption { flex-wrap: wrap; }
  .board, .trend { transform: none; }
  .register-row { grid-template-columns: 1fr; gap: 5px; }
  .board-tiles { grid-template-columns: 1fr; }
  .tile:nth-child(even) { border-left: none; }
  .tile:nth-child(n+2) { border-top: 1px solid var(--line); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-anim, [data-reveal], [data-stagger] > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .stamp { animation: none; }
  .tl-hr, .trend-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; }
  .trend-area, .trend-goal, .trend-dot { opacity: 1 !important; transition: none !important; }
  .tl-event, .tl-sleep, .daystrip .tl-hair, .tl-goal, .tl-goal + text { opacity: 1 !important; animation: none !important; transition: none !important; }
  .marquee-group { gap: 24px; }
  .tl-sleep { opacity: 0.55 !important; }
  .bar-fill { transition: none; width: var(--w); }
}