/* ==================================================================================================
   navrick — site
   ==================================================================================================
   Depends on tokens.css. No framework, no build step, no third-party requests.

   Two rules govern everything here:
     1. Never a shadow without a border.          (ported from the product)
     2. Colour means state, never decoration.     (ported from the product)

   Motion is capped at SEVEN named behaviours. They are numbered in the MOTION section below. If you
   are about to add an eighth, delete one first — restraint is the brand.
   ================================================================================================== */

/* --------------------------------------------------------------------------------------------------
   RESET + BASE
   -------------------------------------------------------------------------------------------------- */

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

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

/* The nav is sticky at 60px, so anything an anchor can land on needs to clear it — otherwise
   /#memory and /#faq drop the reader onto a heading hidden behind the bar. */
[id],
.log__day {
  scroll-margin-top: 84px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--body);
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button,
input {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.plate :focus-visible {
  outline-color: var(--on-plate);
}

/* screen-reader-only, for the skip link and form labels */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: top var(--dur) var(--ease);
}
.skip:focus {
  top: 12px;
}

/* --------------------------------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: 780px;
}

section {
  position: relative;
}

/* paper sections */
.band {
  padding-block: var(--space-9);
  border-top: 1px solid var(--border);
}
.band--flush {
  border-top: 0;
}

/* ink plates — full bleed. Exactly three on the page: the hero shot, memory, and the close.
   .plate-wrap exists so the halftone dissolves can sit OUTSIDE the plate's box, on the paper. The
   plate must therefore not clip: overflow stays visible on purpose. */
.plate-wrap {
  position: relative;
}

.plate {
  position: relative;
  isolation: isolate;
  background: var(--plate);
  color: var(--on-plate);
  padding-block: var(--space-9);
}

/* film grain — ink plates only. At #f5f4f0 a 4% grain is invisible and it only hurts body copy.
   Absolutely positioned INSIDE the plate so it never becomes a composited full-page layer. */
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../assets/grain.png");
  background-size: 64px 64px;
  mix-blend-mode: overlay;
  opacity: 0.05;
  pointer-events: none;
}

/* The §2 shader host. Layering inside a plate, back to front:
     plate background  →  .shader (z-index -2)  →  ::after grain (z-index -1)  →  content (in flow)
   Both decorative layers sit on negative z-indices inside the plate's own stacking context (.plate has
   `isolation: isolate`), so they can never escape it or cover the copy.

   The 8% opacity is what makes this a texture rather than an image: at this level the "back" pixels
   are plate-on-plate and vanish, and only the lit dither dots read. If js/shader.js never runs — no
   WebGL, reduced motion, module blocked — this div stays empty and the plate keeps the static grain
   it already had. Nothing about the layout depends on it. */
.shader {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.08;
  pointer-events: none;
  overflow: hidden;
}
.shader canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* the paper → ink dissolve. A halftone dot ramp masked by a gradient, sitting at the top edge of a
   plate. Zero bytes, and the single most editorial move available to us. */
.dissolve {
  position: absolute;
  left: 0;
  right: 0;
  height: 128px;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--plate) 0.85px, transparent 0.95px);
  background-size: 4px 4px;
}
.dissolve--in {
  /* above a plate, on paper: dots thicken downward into the ink */
  top: -128px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000);
  mask-image: linear-gradient(to bottom, transparent, #000);
}
.dissolve--out {
  /* below a plate, on paper: dots thin downward away from the ink */
  bottom: -128px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}

.rule {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}
.plate .rule {
  background: var(--plate-rule);
}
@media (min-resolution: 2dppx) {
  .rule {
    height: 0.5px;
  }
}

/* --------------------------------------------------------------------------------------------------
   TYPE
   -------------------------------------------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 var(--space-4);
  max-width: none; /* mono + 0.14em tracking blows past the 58ch reading measure */
  font-family: var(--font-verbatim);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.plate .eyebrow {
  color: var(--on-plate-muted);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: var(--display-1);
  line-height: 0.98;
  letter-spacing: -0.032em;
}

h2 {
  font-size: var(--display-2);
  line-height: 1.06;
}

h3 {
  font-size: var(--display-3);
  line-height: 1.15;
}

.lede {
  margin: var(--space-5) 0 0;
  max-width: var(--measure-text);
  font-size: var(--body-lg);
  line-height: 1.55;
  color: var(--ink-muted);
}
.plate .lede {
  color: var(--on-plate-muted);
}

p {
  max-width: var(--measure-text);
}

.mono {
  font-family: var(--font-verbatim);
  font-size: var(--text-sm);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--ink-muted);
}
.plate .muted {
  color: var(--on-plate-muted);
}

/* A handful of one-off layout adjustments, as classes rather than style attributes — see the CSP
   note above .orb--dictation. */
.measure-46 {
  max-width: 46ch;
}
.centered {
  text-align: center;
}
.centered .waitlist,
.centered .disclosure,
.centered .lede,
.centered p {
  margin-inline: auto;
}
.spaced-top {
  margin-top: var(--space-4) !important;
}
.spaced-top-lg {
  margin-top: var(--space-6) !important;
}

/* --------------------------------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-right: auto;
}

/* the SVG carries its own plate and corner radius; currentColor is the plate, not the glyph */
.brand__mark {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--ink);
}
.brand__mark svg {
  width: 100%;
  height: 100%;
}

.nav__links {
  display: flex;
  gap: var(--space-5);
  font-size: var(--text-md);
  color: var(--ink-muted);
}
.nav__links a {
  transition: color var(--dur) var(--ease);
}
.nav__links a:hover {
  color: var(--ink);
}

@media (max-width: 820px) {
  .nav__links {
    display: none;
  }
}

/* --------------------------------------------------------------------------------------------------
   BUTTONS + WAITLIST FORM
   -------------------------------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding-inline: 22px;
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--text-md);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn:hover {
  --btn-bg: var(--accent-hover);
}
/* MOTION 6 — press */
.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

.btn--sm {
  height: 38px;
  padding-inline: 16px;
  font-size: var(--text-base);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--border-strong);
  box-shadow: none;
}
.btn--ghost:hover {
  --btn-bg: var(--accent-soft-bg);
  border-color: var(--border-strong);
}

.plate .btn {
  --btn-bg: var(--on-plate);
  --btn-fg: var(--plate);
  box-shadow: none;
}
.plate .btn:hover {
  --btn-bg: #ffffff;
}

.waitlist {
  display: flex;
  gap: 10px;
  margin-top: var(--space-6);
  max-width: 470px;
}

.waitlist input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding-inline: 18px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.waitlist input::placeholder {
  color: var(--ink-muted);
}
.waitlist input:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent-soft-bg);
}

.plate .waitlist input {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--plate-border);
  color: var(--on-plate);
}
.plate .waitlist input::placeholder {
  color: var(--on-plate-muted);
}
.plate .waitlist input:focus {
  border-color: var(--on-plate);
  box-shadow: 0 0 0 3px rgba(245, 244, 240, 0.12);
}

.waitlist-msg {
  margin: var(--space-3) 0 0;
  min-height: 1.2em;
  font-family: var(--font-verbatim);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.waitlist-msg[data-state="ok"] {
  color: var(--ok);
}
.waitlist-msg[data-state="err"] {
  color: var(--err);
}
.plate .waitlist-msg {
  color: var(--on-plate-muted);
}
.plate .waitlist-msg[data-state="ok"] {
  color: #8fc192;
}
.plate .waitlist-msg[data-state="err"] {
  color: #e09a92;
}

/* the honesty line under the hero CTA */
.disclosure {
  margin: var(--space-4) 0 0;
  max-width: 52ch;
  font-family: var(--font-verbatim);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(56px, 9vw, 104px) var(--space-9);
}

.hero__lede {
  max-width: 46ch;
}

/* --------------------------------------------------------------------------------------------------
   THE ORB  —  ported from src/island/Orb.tsx
   --------------------------------------------------------------------------------------------------
   Product rule, from ARCHITECTURE.md §12: "no microphone icon anywhere — the orb IS the level meter."
   88px stage; the body is a lit sphere; a blurred ambient glow sits behind it; a second radial
   highlight blended with `screen` drifts around inside. Live DOM, never a raster: it breathes, and a
   JPEG of a glowing sphere on ink is the worst thing you can hand a compressor.
   -------------------------------------------------------------------------------------------------- */

@property --orb-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #8b8a85;
}

.orb {
  --orb-color: var(--mode-idle);
  --orb-size: 72px;
  position: relative;
  width: 88px;
  height: 88px;
  flex: none;
  display: grid;
  place-items: center;
  /* MOTION 5 — mode-shift (the colour half) */
  transition: --orb-color var(--dur-slow) var(--ease);
}

.orb__glow {
  position: absolute;
  width: var(--orb-size);
  height: var(--orb-size);
  border-radius: 50%;
  background: var(--orb-color);
  filter: blur(16px);
  opacity: 0.42;
  transform: scale(1.5);
}

.orb__body {
  position: relative;
  width: var(--orb-size);
  height: var(--orb-size);
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 30%,
    color-mix(in srgb, var(--orb-color) 22%, white) 0%,
    var(--orb-color) 52%,
    color-mix(in srgb, var(--orb-color) 68%, black) 100%
  );
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.35);
  overflow: hidden;
  /* MOTION 3 — orb-breathe */
  animation: orb-breathe 2.2s ease-in-out infinite;
}

.orb__drift {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 70% 68%,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0) 58%
  );
  mix-blend-mode: screen;
  /* MOTION 4 — orb-drift */
  animation: orb-drift 7s linear infinite;
}

/* both infinite loops pause when the orb is off-screen — set by site.js */
.orb[data-visible="false"] .orb__body,
.orb[data-visible="false"] .orb__drift {
  animation-play-state: paused;
}

.orb--sm {
  width: 40px;
  height: 40px;
  --orb-size: 26px;
}

/* Mode colours as classes, not inline style attributes, so the production CSP can keep
   `style-src 'self'` with no 'unsafe-inline'. A style="" attribute is blocked by that policy;
   a class is not. site.js drives the §2 carousel through setProperty(), which CSP permits. */
.orb--dictation {
  --orb-color: var(--mode-dictation);
}
.orb--question {
  --orb-color: var(--mode-question);
}
.orb--agent {
  --orb-color: var(--mode-agent);
}
.orb--rec {
  --orb-color: var(--rec);
}

/* the island pill — the orb in its real housing */
.island {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 14px 4px 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--plate-2) 95%, transparent);
  border: 1px solid var(--plate-border);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.island__label {
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------------------------------
   §2 — ONE KEY, FOUR OUTCOMES
   -------------------------------------------------------------------------------------------------- */

.index {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-5);
}

.keys {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 38px;
  padding-inline: 12px;
  font-family: var(--font-verbatim);
  font-size: var(--text-base);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--plate-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--on-plate);
}
.keys__plus {
  font-family: var(--font-verbatim);
  font-size: var(--text-sm);
  color: var(--on-plate-muted);
}

.modes {
  width: 100%;
  max-width: 720px;
  margin-top: var(--space-2);
  border-top: 1px solid var(--plate-rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.mode {
  position: relative;
  padding: var(--space-4) 4px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-verbatim);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-plate-muted);
  transition: color var(--dur) var(--ease);
}
/* the tick mark on the rule */
.mode::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 1px;
  height: 9px;
  background: var(--plate-rule);
  transition: background var(--dur) var(--ease), height var(--dur) var(--ease);
}
.mode:hover {
  color: var(--on-plate);
}
.mode[aria-selected="true"] {
  color: var(--on-plate);
}
.mode[aria-selected="true"]::before {
  height: 15px;
  background: var(--on-plate);
}

.mode-caption {
  min-height: 3.2em;
  max-width: 34ch;
  margin: 0;
  font-size: var(--body-lg);
  color: var(--on-plate);
  /* MOTION 5 — mode-shift (the caption half) */
  transition: opacity var(--dur) var(--ease);
}
.mode-caption[data-swapping="true"] {
  opacity: 0;
}

/* reduced-motion fallback: all four modes shown at once, so the argument survives. See site.js. */
.modes-static {
  display: none;
  gap: var(--space-6);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: 820px;
  text-align: center;
}
.modes-static > li {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  list-style: none;
}

/* --------------------------------------------------------------------------------------------------
   PRODUCT FRAMES
   --------------------------------------------------------------------------------------------------
   Because --bg and the site's paper are the same value, a borderless screenshot bleeds invisibly into
   the page. Every capture gets a hairline plus a shadow — never a shadow without a border.
   -------------------------------------------------------------------------------------------------- */

.frame {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.plate .frame {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.frame__caption {
  margin: var(--space-3) 0 0;
  font-family: var(--font-verbatim);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
.plate .frame__caption {
  color: var(--on-plate-muted);
}

/* placeholder until the founder supplies a real capture — deliberately obviously-a-placeholder,
   because a fake product window is worse than an honest empty one */
.frame--pending {
  display: grid;
  place-items: center;
  min-height: 300px;
  background-image: radial-gradient(circle, var(--border-strong) 0.9px, transparent 1px);
  background-size: 8px 8px;
}
.frame--pending span {
  font-family: var(--font-verbatim);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  background: var(--bg);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.hero__stage {
  position: relative;
  margin-top: var(--space-8);
}
.hero__island {
  position: absolute;
  right: clamp(8px, 4vw, 56px);
  bottom: -18px;
  z-index: 2;
}

/* --------------------------------------------------------------------------------------------------
   MOTION  —  seven behaviours, numbered. Nothing else on this page moves.
   --------------------------------------------------------------------------------------------------
   Three run on Motion (js/motion.js, vendored framer-motion 12.42.2) because they need the product's
   real spring solver. Four stay here, because CSS is the right tool for an infinite loop, a 120ms
   press, and a stepped clip-path sweep.

   #  behaviour     where          trigger              property                  timing
   1  reveal        motion.js      inView, once         opacity + y 8px           spring 380/30
   2  plate-lift    motion.js      inView, once         opacity + y 16px          spring 380/30 m1.4
   3  orb-breathe   THIS FILE      in-viewport          scale 1→1.06→1            2.2s infinite
   4  orb-drift     THIS FILE      in-viewport          rotate 360deg             7s linear
   5  mode-shift    motion.js      §2 dwell / click     --orb-color + caption     spring 260/24
   6  press         THIS FILE      :active              translateY 1px            120ms
   7  type-in       THIS FILE      inView (motion.js)   clip-path sweep           900ms steps(28)

   Springs 380/30 and 260/24 are copied from src/island/Orb.tsx and src/shared/ui/GlassCard.tsx. They
   are not tuned to taste; they are the product's numbers.
   -------------------------------------------------------------------------------------------------- */

@keyframes orb-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

@keyframes orb-drift {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes type-in {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Elements are VISIBLE BY DEFAULT. js/motion.js adds .reveal-ready to <html> before hiding anything —
   and removes it again if the animation bundle fails to load — so a reader with JS disabled, JS broken
   or a blocked vendor script never gets a blank page.

   Motions 1 and 2 no longer live here: js/motion.js animates opacity and y with the product's real
   springs and writes the result inline, which outranks these rules. All this block does is set the
   pre-animation state and provide a resting state if an animation is interrupted. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(8px);
}
.reveal-ready [data-reveal="plate"] {
  transform: translateY(16px);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* MOTION 7 — type-in */
.reveal-ready .type-in {
  clip-path: inset(0 100% 0 0);
}
.type-in.is-in {
  animation: type-in 0.9s steps(28) forwards;
}

@media (prefers-reduced-motion: reduce) {
  /* 1, 2, 7 off — final state, instantly */
  .reveal-ready [data-reveal],
  .reveal-ready .type-in {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
  }
  /* 3, 4 off — the orb renders static in its lit active state */
  .orb__body,
  .orb__drift {
    animation: none !important;
  }
  /* 5 replaced, not frozen — see .modes-static, swapped in by site.js */
  html {
    scroll-behavior: auto;
  }
  /* 6 kept: a 1px press has no vestibular cost and is real affordance feedback. */
}

/* --------------------------------------------------------------------------------------------------
   §3–§6 — THE FOUR BEATS
   --------------------------------------------------------------------------------------------------
   One skeleton, four times, so the reader learns the layout once. Left column says it; right column
   shows the OUTCOME IN ITS DESTINATION — never the feature in our own chrome.
   -------------------------------------------------------------------------------------------------- */

.beat__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

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

.beat__text h2 {
  margin-bottom: var(--space-5);
}
.beat__text p {
  margin: 0 0 var(--space-4);
  color: var(--ink-muted);
  max-width: 44ch;
}

/* the recurring memory mark — four identical marks that resolve into §7's ledger */
.beat__memory {
  margin-top: var(--space-5) !important;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--ink-muted);
  max-width: 24ch;
}

/* the way out of the landing page's summary and into /product's detail */
.beat__more {
  margin: var(--space-3) 0 0 !important;
  font-size: var(--text-md);
}
.beat__more a {
  color: var(--ink);
  border-bottom: 1px solid var(--border-strong);
  transition: border-color var(--dur) var(--ease);
}
.beat__more a:hover {
  border-color: var(--ink);
}

/* §3 — an abstract, unbranded field. Obviously a diagram: no traffic lights, no fake app name. */
.field {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.field__label {
  margin: 0 0 var(--space-3);
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--text-xs);
}
.field__text {
  margin: 0;
  max-width: none;
  font-size: var(--body-lg);
  line-height: 1.55;
}
.term {
  font-family: var(--font-verbatim);
  font-size: 0.94em;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--ink);
}

.leader {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding-left: 12%;
  color: var(--ink-muted);
}
.leader__line {
  flex: none;
  width: clamp(24px, 8vw, 72px);
  height: 1px;
  background: var(--border-strong);
}

/* §4 — the real dark-glass material, ported from src/shared/ui/GlassCard.tsx:14. The blur needs
   something with structure behind it, hence the halftone patch. */
.beat__art--glass {
  position: relative;
  padding: clamp(24px, 4vw, 48px) 0;
}
.halftone {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background-image: radial-gradient(circle, var(--border-strong) 0.9px, transparent 1px);
  background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(120% 90% at 60% 40%, #000 30%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 60% 40%, #000 30%, transparent 72%);
}

.glass {
  position: relative;
  max-width: 420px;
  margin-inline: auto;
  padding: var(--space-4);
  border-radius: 16px;
  background: color-mix(in srgb, var(--plate-2) 95%, transparent);
  border: 1px solid var(--plate-border);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: rgba(255, 255, 255, 0.85);
}
.glass__head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--space-3);
}
.glass__title {
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--text-xs);
}
.glass__q {
  margin: 0 0 var(--space-3);
  max-width: none;
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.55);
}
.glass__a {
  margin: 0;
  max-width: none;
  font-size: var(--text-md);
  line-height: 1.55;
}
.glass__cite {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--text-xs);
}

/* §5 — two hairline-ruled rows, then the approve gate. The constraint is the selling point. */
.stack {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.stack__row {
  padding: var(--space-5);
}
.stack__row + .stack__row {
  border-top: 1px solid var(--border);
}
.stack__label {
  margin: 0 0 var(--space-3);
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--text-xs);
}
.stack__body {
  margin: 0;
  max-width: none;
  font-size: var(--body-lg);
}
.stack__pre {
  margin: 0;
  padding: var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: 1.7;
  white-space: pre-wrap;
  color: var(--ink);
}
.gate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.gate .btn[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* §6 — the anchor chips */
.anchors {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.anchors li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-md);
}
.anchors li + li {
  border-top: 1px solid var(--border);
}
.chip {
  flex: none;
  padding: 3px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--ink-muted);
  font-size: var(--text-xs);
}
.anchors li:first-child .chip {
  border-color: var(--ink);
  color: var(--ink);
}

/* --------------------------------------------------------------------------------------------------
   §7 — THE MEMORY LEDGER
   --------------------------------------------------------------------------------------------------
   The message is the ink density: reading top to bottom, the right-hand column gets darker. No chart,
   no axis, no numbers to parse. Pure CSS, zero bytes.
   -------------------------------------------------------------------------------------------------- */

.ledger {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  border-top: 1px solid var(--plate-rule);
}
.ledger li {
  display: grid;
  grid-template-columns: 3ch 9ch 12ch 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: 9px 0;
  border-bottom: 1px solid var(--plate-rule);
}
.ledger__n {
  color: var(--on-plate);
}
.ledger__w,
.ledger__r {
  color: var(--on-plate-muted);
  font-size: var(--text-xs);
}
.ledger__bar {
  height: 9px;
  background-image: radial-gradient(circle, var(--on-plate) 1.1px, transparent 1.3px);
  background-size: 7px 7px;
  background-repeat: repeat-x;
  background-position: left center;
  width: var(--w, 0%);
  opacity: 0.85;
}

/* The density run, by row. In CSS rather than inline style attributes so the CSP stays tight. */
.ledger li:nth-child(1) .ledger__bar { --w: 0%; }
.ledger li:nth-child(2) .ledger__bar { --w: 9%; }
.ledger li:nth-child(3) .ledger__bar { --w: 22%; }
.ledger li:nth-child(4) .ledger__bar { --w: 31%; }
.ledger li:nth-child(5) .ledger__bar { --w: 40%; }
.ledger li:nth-child(6) .ledger__bar { --w: 53%; }
.ledger li:nth-child(7) .ledger__bar { --w: 62%; }
.ledger li:nth-child(8) .ledger__bar { --w: 75%; }
.ledger li:nth-child(9) .ledger__bar { --w: 84%; }
.ledger li:nth-child(10) .ledger__bar { --w: 100%; }

@media (max-width: 720px) {
  .ledger li {
    grid-template-columns: 3ch 1fr;
    row-gap: 4px;
  }
  .ledger__r {
    text-align: right;
  }
  .ledger__bar {
    grid-column: 1 / -1;
  }
}

/* the correction that isn't there — the em-dash is the product */
.absence {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--plate-border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
}
.absence__tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}
.absence__tbl th,
.absence__tbl td {
  text-align: left;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  font-weight: 400;
  border-bottom: 1px solid var(--plate-rule);
}
.absence__tbl tr:last-child th,
.absence__tbl tr:last-child td {
  border-bottom: 0;
}
.absence__tbl th {
  color: var(--on-plate-muted);
  white-space: nowrap;
}
.absence__tbl s {
  color: var(--on-plate-muted);
}
.absence__note {
  margin: var(--space-4) 0 0;
  color: var(--on-plate-muted);
  font-size: var(--text-md);
}

.diagram {
  margin-top: var(--space-8);
}
.diagram svg {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------------------------------
   §8 / §9 — THE ANTI-HYPE PAIR
   -------------------------------------------------------------------------------------------------- */

.facts {
  margin: var(--space-8) 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}
.facts > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
}
.facts dt {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.facts dd {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-muted);
}
@media (max-width: 760px) {
  .facts > div {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

.state {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-7);
  margin: var(--space-7) 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.state li {
  display: grid;
  gap: 2px;
}
.state__n {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* --------------------------------------------------------------------------------------------------
   §10 — FAQ
   --------------------------------------------------------------------------------------------------
   Native <details>. Works with JavaScript disabled, is keyboard accessible for free, and cannot
   clip its own answer — the old hand-rolled accordion capped every panel at max-height: 200px.
   -------------------------------------------------------------------------------------------------- */

.faq {
  margin-top: var(--space-7);
  border-top: 1px solid var(--border);
}
.faq details {
  border-bottom: 1px solid var(--border);
}
.faq summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--font-verbatim);
  font-size: 18px;
  color: var(--ink-muted);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
  color: var(--ink);
}
.faq summary:hover {
  color: var(--ink-muted);
}
.faq p {
  margin: 0 0 var(--space-5);
  color: var(--ink-muted);
  max-width: 66ch;
}

/* --------------------------------------------------------------------------------------------------
   §11 — CLOSE
   -------------------------------------------------------------------------------------------------- */

.close {
  padding-block: clamp(72px, 11vw, 140px);
}
.close .waitlist {
  justify-content: center;
}
.close h2 {
  margin-bottom: var(--space-6);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------------------------------
   /manifesto  —  the essay
   --------------------------------------------------------------------------------------------------
   One column, one reading measure, no sidebar and no decoration. The only typographic events are the
   lead paragraph and the two pull quotes, and those are set in the display face so they read as the
   argument's spine rather than as ornament.
   -------------------------------------------------------------------------------------------------- */

.essay {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--space-9) var(--gutter);
}

.essay__head {
  margin-bottom: var(--space-8);
}
.essay__head h1 {
  font-size: var(--display-2);
  line-height: 1.05;
  margin-bottom: var(--space-5);
}
.essay__stamp {
  margin: 0;
  color: var(--ink-muted);
}

.essay__body h2 {
  font-size: var(--text-xl);
  margin: var(--space-8) 0 var(--space-4);
}

.essay__body p {
  margin: 0 0 var(--space-5);
  max-width: none;
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-muted);
}

.essay__lead {
  font-size: var(--body-lg) !important;
  color: var(--ink) !important;
}

.essay__body strong {
  color: var(--ink);
  font-weight: 600;
}
.essay__body em {
  font-style: normal;
  color: var(--ink);
}

/* the two pull quotes — the argument's load-bearing sentences */
.pull {
  margin: var(--space-8) 0 !important;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-display);
  font-size: var(--display-3) !important;
  font-weight: 600;
  line-height: 1.2 !important;
  letter-spacing: -0.025em;
  color: var(--ink) !important;
  text-wrap: balance;
}

.essay__body a,
.essay__foot a {
  color: var(--ink);
  border-bottom: 1px solid var(--border-strong);
  transition: border-color var(--dur) var(--ease);
}
.essay__body a:hover,
.essay__foot a:hover {
  border-color: var(--ink);
}

.essay__foot {
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.essay__foot p {
  margin: 0;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------------------------------
   /product  —  the deep sections
   --------------------------------------------------------------------------------------------------
   A section head, then two columns of prose, then the limits. The limits block is deliberately given
   the same visual weight as the claims above it — on this site the constraints are part of the pitch,
   not a disclaimer hidden at the bottom.
   -------------------------------------------------------------------------------------------------- */

.deep__head {
  max-width: 46ch;
  margin-bottom: var(--space-8);
}
.deep__head h2 {
  margin-bottom: var(--space-4);
}
.deep__head .lede {
  margin-top: 0;
}

.deep__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.deep__grid h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
  max-width: 26ch;
}
.deep__grid p {
  margin: 0 0 var(--space-4);
  color: var(--ink-muted);
  max-width: 52ch;
}
.deep__grid p:last-child {
  margin-bottom: 0;
}
.deep__grid em {
  font-style: normal;
  color: var(--ink);
}

.deep__grid--second {
  margin-top: var(--space-8);
}

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

.limits {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-strong);
}
.limits__label {
  margin: 0 0 var(--space-4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--ink);
}
.limits ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
  max-width: 76ch;
}
.limits li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-muted);
}
/* an em-dash marker, not a bullet and not an icon */
.limits li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--border-strong);
}

/* --------------------------------------------------------------------------------------------------
   /build-log
   --------------------------------------------------------------------------------------------------
   A ledger, not a blog. Date in the left gutter, one Bricolage line as the claim, prose underneath,
   and a mono aside for the thing that was actually learned. Hairlines do the separating.
   -------------------------------------------------------------------------------------------------- */

.log {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
  counter-reset: none;
}

.log__day {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-6);
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--border);
}

.log__date {
  margin: 0;
  padding-top: 5px;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  white-space: nowrap;
}

.log__body h2 {
  font-size: var(--text-xl);
  line-height: 1.2;
  margin-bottom: var(--space-4);
  max-width: 30ch;
}

.log__body p {
  margin: 0 0 var(--space-4);
  color: var(--ink-muted);
  max-width: 62ch;
}
.log__body p:last-child {
  margin-bottom: 0;
}

.log__body strong {
  color: var(--ink);
  font-weight: 600;
}

.log__body em {
  font-style: normal;
  color: var(--ink);
}

/* the aside: what the entry actually taught, set apart by a rule rather than a box */
.log__note {
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-strong);
  font-size: var(--text-sm) !important;
  line-height: 1.7;
}

.log__foot {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.log__foot p {
  color: var(--ink-muted);
  max-width: 58ch;
}
.log__foot a {
  color: var(--ink);
  border-bottom: 1px solid var(--border-strong);
}
.log__foot a:hover {
  border-color: var(--ink);
}

@media (max-width: 720px) {
  .log__day {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .log__date {
    padding-top: 0;
  }
}

/* current page in the nav */
.nav__links a[aria-current="page"] {
  color: var(--ink);
}

/* --------------------------------------------------------------------------------------------------
   DOC PAGES  —  /privacy, /terms
   --------------------------------------------------------------------------------------------------
   Before this pass these two shipped their own palette (#1f6b4a) and system fonts, so they read as a
   different company's legal boilerplate. Same tokens now, same voice.
   -------------------------------------------------------------------------------------------------- */

.doc {
  max-width: 740px;
  margin-inline: auto;
  padding: var(--space-7) var(--gutter) var(--space-9);
}

.doc__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-7);
  font-size: var(--text-md);
  color: var(--ink-muted);
  transition: color var(--dur) var(--ease);
}
.doc__back:hover {
  color: var(--ink);
}

.doc h1 {
  font-size: var(--display-2);
  margin-bottom: var(--space-2);
}

.doc h2 {
  font-size: var(--text-xl);
  margin: var(--space-8) 0 var(--space-3);
}

.doc p,
.doc li {
  color: var(--ink-muted);
  max-width: 66ch;
}

.doc ul {
  padding-left: 1.15em;
}
.doc li {
  margin-bottom: var(--space-2);
}

.doc code {
  font-family: var(--font-verbatim);
  font-size: 0.92em;
}

.doc__stamp {
  font-family: var(--font-verbatim);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.doc__note {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-md);
}

.doc a:not(.doc__back) {
  color: var(--ink);
  border-bottom: 1px solid var(--border-strong);
  transition: border-color var(--dur) var(--ease);
}
.doc a:not(.doc__back):hover {
  border-color: var(--ink);
}

.doc__foot {
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--text-base);
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------------------------------- */

.foot {
  padding-block: var(--space-7);
  border-top: 1px solid var(--border);
  font-size: var(--text-base);
  color: var(--ink-muted);
}
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
}
.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-left: auto;
}
.foot a {
  transition: color var(--dur) var(--ease);
}
.foot a:hover {
  color: var(--ink);
}

/* 2026 waitlist editorial system. Shared pages deliberately follow the restrained landing language. */
:root {
  --bg: #f6f5ee;
  --sheet: #f6f5ee;
  --surface: #eeede6;
  --surface-raised: #ffffff;
  --border: #d8d6ce;
  --border-strong: #aaa8a1;
  --ink: #11110f;
  --ink-muted: #6d6c67;
  --accent: #11110f;
  --accent-hover: #31312e;
  --on-ink: #ffffff;
  --plate: #11110f;
  --font-display: Georgia, "Times New Roman", serif;
  --font-ui: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 0.7s;
}

body { background: var(--bg); }
h1, h2, h3, .brand, .pull { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.035em; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
.nav { background: rgba(246, 245, 238, 0.94); border-bottom-color: var(--border); backdrop-filter: blur(18px); }
.nav__inner { min-height: 76px; }
.brand { font-size: 24px; }
.brand__mark { display: none; }
.brand--mark-only { font-size: 0; }
.brand--mark-only .brand__mark { display: block; width: 38px; height: 38px; object-fit: cover; }
.nav__links { gap: 32px; font-size: 14px; }
.btn { border: 0; border-radius: 999px; box-shadow: none; }
.band { padding-block: 112px; }
.band--flush { padding-top: 88px; }
.band + .band { border-top: 1px solid var(--border); }
.band h1 { max-width: 760px; font-size: clamp(48px, 6vw, 72px); line-height: 0.99; }
.band h2 { max-width: 700px; font-size: clamp(36px, 4.4vw, 52px); line-height: 1.04; }
.lede { font-family: var(--font-display); font-size: 22px; line-height: 1.25; }
.eyebrow, .mono, .disclosure, .log__date { font-family: var(--font-ui); }
.disclosure, .field, .stack, .absence, .doc__note { border-radius: 3px; box-shadow: none; }
.deep__grid { gap: 80px; }
.facts > div, .limits, .log__day, .faq details { border-color: var(--border); }
.facts dt, .deep__grid h3, .log__body h2, .faq summary { font-family: var(--font-display); font-weight: 400; }
.foot { padding-block: 64px; }
.doc { padding-top: 80px; }
.doc h1, .essay__head h1 { font-family: var(--font-display); font-size: clamp(48px, 6vw, 72px); line-height: 1; }
.essay__body p { font-family: var(--font-ui); }
.pull { border-color: var(--border-strong); font-size: clamp(30px, 4vw, 48px) !important; }

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__inner { min-height: 64px; }
  .band { padding-block: 80px; }
  .deep__grid { gap: 48px; }
}