/* ─────────────────────────────────────────────────────────────────
   CalChat — site styles v3 "iOS paper / dark"
   Warm paper light mode. Deep graphite dark mode.
   Apple-flavoured: layered cards, glass nav, generous radii.
   All colour values via CSS tokens — theme switch is free.
   ───────────────────────────────────────────────────────────────── */

/* ── Global theme transition — only transform/opacity/background/color ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
  transition:
    background-color 220ms var(--ease-out),
    border-color     220ms var(--ease-out),
    color            220ms var(--ease-out),
    box-shadow       220ms var(--ease-out);
}
/* Kill transition on user-interaction elements to avoid sluggishness */
button, a, input { transition-duration: 120ms }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--m-body);
  font-weight: var(--w-medium);
  line-height: 1.7;
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100% }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0 }
input { font: inherit }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm) }
::selection { background: var(--fg); color: var(--bg) }

/* ── Layout ──────────────────────────────────────────────────────── */
/* viewport-fit=cover means the page extends under the notch and the rounded
   corners, so the gutter has to include the safe-area inset or content sits
   under the hardware in landscape. */
.wrap {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: max(var(--pad-x), env(safe-area-inset-left))
                  max(var(--pad-x), env(safe-area-inset-right));
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0 }

/* ── Corner registration marks ───────────────────────────────────── */
body::before, body::after,
#reg-bl, #reg-br {
  content: "";
  position: fixed;
  width: 12px; height: 12px;
  z-index: 999;
  pointer-events: none;
}
body::before  { top: 10px;    left: 10px;    border-top: 1px solid var(--line); border-left: 1px solid var(--line) }
body::after   { top: 10px;    right: 10px;   border-top: 1px solid var(--line); border-right: 1px solid var(--line) }
#reg-bl { bottom: 10px; left: 10px;    border-bottom: 1px solid var(--line); border-left: 1px solid var(--line) }
#reg-br { bottom: 10px; right: 10px;   border-bottom: 1px solid var(--line); border-right: 1px solid var(--line) }

/* Purely decorative crop marks. At phone width they're four floating corner
   ticks fighting the real content for attention, and the bottom pair collides
   with the browser's own UI. Desktop-only ornament. */
@media (max-width: 860px) {
  body::before, body::after, #reg-bl, #reg-br { display: none }
}

/* ── Black noisy blob ────────────────────────────────────────────── */
.blob {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 40% 38%,
      var(--blob-hi)  0%,
      var(--blob-mid) 38%,
      var(--blob-lo)  70%,
      transparent     100%);
  filter: url(#noiseFilter) blur(0px);
  mix-blend-mode: var(--blob-mix);
  will-change: transform, opacity;
}

/* ── Grid lines overlay ──────────────────────────────────────────── */
.grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 100% clamp(48px, 8vw, 72px), calc(100% / 6) 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 20%, transparent 70%);
          mask-image: linear-gradient(180deg, #000 0%, #000 20%, transparent 70%);
  opacity: .65;
}

/* ── Typography ──────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-sans); letter-spacing: -0.04em; overflow-wrap: break-word; line-height: 1 }

.t-mega {
  font-size: var(--m-mega);
  font-weight: var(--w-black);
  letter-spacing: -0.05em;
  line-height: .92;
  text-wrap: balance;
}
.t-h1  { font-size: var(--m-h1);  font-weight: var(--w-bold);    letter-spacing: -0.04em;  line-height: 1.02; text-wrap: balance }
.t-h2  { font-size: var(--m-h2);  font-weight: var(--w-bold);    letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance }
.t-h3  { font-size: var(--m-h3);  font-weight: var(--w-semibold); letter-spacing: -0.02em; line-height: 1.25 }
.t-lead { font-size: var(--m-lead); line-height: 1.75; color: var(--fg-3); font-weight: var(--w-medium); max-width: 54ch }
.t-mono { font-family: var(--font-mono) }
.t-muted { color: var(--fg-3) }
.t-dim   { color: var(--fg-4) }
.dim     { color: var(--fg-4) }

.sec-label {
  font-family: var(--font-mono);
  font-size: var(--m-xs);
  letter-spacing: 0.06em;
  color: var(--fg-4);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s-6);
}
.sec-label::before { content: "//"; color: var(--fg-5) }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: .72em 1.6em;
  font-size: var(--m-sm);
  font-weight: var(--w-semibold);
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-family: var(--font-sans);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.btn:active { transform: scale(.97) }

/* Primary: foreground fill */
.btn--primary {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}
.btn--primary:hover {
  background: var(--fg-2);
  border-color: var(--fg-2);
  box-shadow: 0 0 0 4px var(--accent-dim);
}

/* Outline */
.btn--outline {
  background: transparent;
  border-color: var(--line);
  color: var(--fg-2);
}
.btn--outline:hover {
  border-color: var(--fg-4);
  color: var(--fg);
}

/* Ghost mono */
.btn--mono {
  background: var(--bg-surface);
  border-color: var(--line);
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: var(--m-2xs);
  letter-spacing: 0.04em;
  padding: .6em 1.2em;
  border-radius: var(--r-sm);
}
.btn--mono:hover { color: var(--fg); border-color: var(--fg-5) }
.btn--lg { padding: .9em 2em; font-size: var(--m-body) }

/* ── Email capture ───────────────────────────────────────────────── */
.field {
  display: flex;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 5px 5px 20px;
  max-width: 420px;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim) }
/* font-size must be >=16px on touch: iOS Safari auto-zooms the whole page when
   focusing a smaller input and never zooms back out, which is a common cause of
   a site suddenly appearing "zoomed in" and misaligned after tapping a field. */
.field input { flex: 1; border: 0; background: none; font-size: max(16px, var(--m-sm)); color: var(--fg); min-width: 0; outline: none }
.field input::placeholder { color: var(--fg-5) }
.field .btn { flex-shrink: 0 }
.field.done {
  justify-content: center; padding: 14px;
  font-size: var(--m-sm); color: var(--fg-2);
  border-color: var(--accent); background: var(--accent-dim);
  font-family: var(--font-mono); letter-spacing: 0.02em;
  /* Success state is always a single centered row — the mobile rule below
     turns .field into a column for the input+button layout, which must not
     carry over once the form is replaced by the confirmation. */
  flex-direction: row; align-items: center; gap: 8px;
}
/* Belt-and-braces sizing for the injected tick. The icon is created in JS, so
   a missing width/height attribute there would otherwise let it fall back to
   the 300x150 SVG default and blow up to fill the container. */
.field.done svg {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  color: var(--accent);
}

/* ── Reveal on scroll ────────────────────────────────────────────── */
.rev {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
.rev.in { opacity: 1; transform: translateY(0) }
.rev[data-d="1"] { transition-delay: 60ms  }
.rev[data-d="2"] { transition-delay: 120ms }
.rev[data-d="3"] { transition-delay: 180ms }
.rev[data-d="4"] { transition-delay: 240ms }
.rev[data-d="5"] { transition-delay: 300ms }

/* ────────────────────────────────────────────────────────────────────
   THEME TOGGLE — iOS-style pill switch
   ──────────────────────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px;
  cursor: pointer;
  position: relative;
  width: 64px;
  height: 32px;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color     var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}
.theme-toggle:active { transform: scale(.96) }

/* Sliding thumb */
.theme-toggle__thumb {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 220ms var(--ease-out), background-color 220ms var(--ease-out);
  will-change: transform;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
[data-theme="dark"] .theme-toggle__thumb {
  transform: translateX(32px);
}

/* Sun / moon icons inside thumb */
.theme-toggle__thumb svg {
  width: 13px;
  height: 13px;
  color: var(--bg);
  transition: opacity 180ms var(--ease-out);
  position: absolute;
}
.theme-toggle__sun  { opacity: 1 }
.theme-toggle__moon { opacity: 0 }
[data-theme="dark"] .theme-toggle__sun  { opacity: 0 }
[data-theme="dark"] .theme-toggle__moon { opacity: 1 }

/* Track labels */
.theme-toggle__track {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 7px;
  pointer-events: none;
}
.theme-toggle__track span {
  font-size: 10px;
  line-height: 24px;
  color: var(--fg-5);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  user-select: none;
}

/* ── Nav ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.nav.stuck {
  background: var(--nav-stuck-bg);
  border-bottom-color: var(--line);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 24px; min-width: 0 }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: var(--w-semibold);
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.brand svg { width: 24px; height: 24px; color: var(--fg) }

.nav__links { display: flex; gap: 32px }
.nav__links a {
  font-family: var(--font-mono);
  font-size: var(--m-2xs);
  letter-spacing: 0.05em;
  color: var(--fg-4);
  transition: color var(--dur-base) var(--ease-out);
}
.nav__links a:hover { color: var(--fg) }

/* min-width:0 so this can actually shrink inside the flex row — without it the
   group keeps its full content width and pushes the burger past the viewport
   edge instead of the CTA giving way. */
.nav__r { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 1 }

/* Nav CTA label swap — full text by default, short text on narrow screens. */
.nav__cta-short { display: none }
@media (max-width: 640px) {
  .nav__cta-full  { display: none }
  .nav__cta-short { display: inline }
}

.burger {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-base) var(--ease-out);
}
.burger:hover { border-color: var(--fg-4) }
@media (max-width: 900px) {
  .nav__links { display: none }
  /* Target the secondary CTA by class, not by :first-child — position-based
     selectors silently pick the wrong button whenever the markup order or
     element count in .nav__r changes. */
  .nav__r .btn--outline { display: none }
  .burger { display: inline-flex }
}

/* Mobile sheet */
.sheet {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 199;
  background: var(--bg-elevated);
  border-top: 1px solid var(--line);
  padding: 32px var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.sheet.open { opacity: 1; transform: translateY(0); pointer-events: auto }
.sheet a {
  padding: 18px 0;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--fg-3);
  transition: color var(--dur-base) var(--ease-out);
}
.sheet a:hover { color: var(--fg) }
/* The two CTAs are buttons, not list rows — they must not inherit the
   full-bleed bottom rule, the muted link colour (which left dark-on-dark
   text on the filled button), or the mono link font. */
.sheet .btn {
  border-bottom: 0; text-align: center;
  font-family: var(--font-sans); font-size: var(--m-body);
}
.sheet .btn--primary { color: var(--bg) }
.sheet .btn--outline { color: var(--fg-2) }
.sheet .btn--outline { margin-top: 24px }
.sheet .btn + .btn { margin-top: 10px }

/* Six rows plus two buttons overflow a short phone in landscape, and the
   sheet is position:fixed so the page behind it can't scroll to reveal them.
   Let the sheet itself scroll, and keep the bottom item clear of the home
   indicator / URL bar. */
@media (max-width: 900px) {
  .sheet {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
}

/* ── HERO ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--nav-h) + clamp(1.25rem, 1rem + 2vw, 2.5rem));
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
  overflow: hidden;
  background: var(--bg);
}

.hero .grid-lines { position: absolute; inset: 0 }

/* Blobs — colour tokens swap per theme */
.hero__blob-1 {
  width: clamp(360px, 52vw, 720px);
  height: clamp(360px, 52vw, 720px);
  top: -8%; right: -6%;
  opacity: var(--blob-op1);
  animation: blobDrift1 18s ease-in-out infinite;
}
.hero__blob-2 {
  width: clamp(200px, 28vw, 400px);
  height: clamp(200px, 28vw, 400px);
  top: 40%; right: 12%;
  opacity: var(--blob-op2);
  animation: blobDrift2 22s ease-in-out infinite;
}
@keyframes blobDrift1 {
  0%, 100% { transform: translate(0,0) scale(1) }
  33%  { transform: translate(-24px, 18px) scale(1.04) }
  66%  { transform: translate(16px, -22px) scale(.97) }
}
@keyframes blobDrift2 {
  0%, 100% { transform: translate(0,0) scale(1) }
  50%  { transform: translate(20px, -28px) scale(1.06) }
}

.hero__inner { position: relative; z-index: 1 }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 2rem + 4vw, 6rem);
  align-items: center;
}
.hero__copy { max-width: 32rem }

/* Eyebrow chip */
.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--m-2xs);
  letter-spacing: 0.07em;
  color: var(--fg-4);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 4px 10px;
  margin-bottom: 18px;
  background: var(--bg-elevated);
}
.hero__chip::before { content: "›"; color: var(--fg-3); font-size: 1em }

.hero__headline { margin-bottom: 16px }
.hero__headline .dim { color: var(--fg-5) }
.hero__sub { margin-bottom: 22px; max-width: 42ch }
.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 20px }
.hero__field { max-width: 420px; width: 100% }

/* Command pill */
.cmd-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--r-pill);
  padding: .72em 1.4em;
  font-family: var(--font-mono);
  font-size: var(--m-sm);
  font-weight: var(--w-semibold);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  border: none;
}
.cmd-pill:active { transform: scale(.97) }
.cmd-pill:hover  { box-shadow: 0 0 0 4px var(--accent-dim) }
.cmd-pill__copy {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(128,128,128,.18);
  border-radius: var(--r-pill);
  flex-shrink: 0;
  transition: background var(--dur-base) var(--ease-out);
}
.cmd-pill:hover .cmd-pill__copy { background: rgba(128,128,128,.26) }
.cmd-pill__copy svg { width: 14px; height: 14px }
.cmd-pill.copied { box-shadow: 0 0 0 4px var(--accent-dim) }
.cmd-pill.copied .cmd-pill__text::after { content: " ✓" }

.hero__kpi { font-size: var(--m-sm); color: var(--fg-3); line-height: 1.7 }
.hero__kpi strong { color: var(--fg); font-weight: var(--w-bold) }
.hero__kpi span   { color: var(--fg-5) }

/* Phone stage */
.hero__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  justify-self: end;
  position: relative;
}
.hero__stage-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: var(--m-2xs);
  color: var(--fg-4);
  letter-spacing: 0.05em;
  align-self: flex-start;
}
.hero__stage-label::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fg-3);
  animation: livePulse 2.4s cubic-bezier(0.23,1,0.32,1) infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-dim) }
  70%  { box-shadow: 0 0 0 8px transparent }
  100% { box-shadow: 0 0 0 0 transparent }
}

/* Phone frame — iOS-radius */
.phone-frame {
  position: relative;
  width: clamp(220px, 28vw, 310px);
  aspect-ratio: 390/844;
}
.phone-frame::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 38px;
  border: 1px solid var(--line);
  z-index: 2;
  pointer-events: none;
}
.phone-frame__screen {
  position: absolute;
  inset: 0;
  border-radius: 37px;
  overflow: hidden;
  background: var(--bg-surface);
}
.phone-frame__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 37px;
}

/* Ambient shadow under phone */
.phone-glow {
  position: absolute;
  bottom: -40px; left: 50%;
  transform: translateX(-50%);
  width: 80%; height: 60px;
  background: radial-gradient(ellipse, var(--accent-dim) 0%, transparent 70%);
  filter: blur(16px);
  pointer-events: none;
}


/* ── BENTO FEATURE GRID ───────────────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
}

.bento__checker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.bento__cell {
  padding: clamp(.9rem, .7rem + 1vw, 1.4rem);
  position: relative;
  overflow: hidden;
  min-height: clamp(130px, 14vw, 190px);
  display: flex;
  flex-direction: column;
}

/* Tile variants — all use token vars that flip per theme */
.bc-dark { background: var(--tile-dark); position: relative }
.bc-ink  { background: var(--tile-ink);  position: relative }
.bc-cta  { background: var(--tile-dark) }

/* Accent tile: noisy gradient */
.bc-blue {
  background: var(--tile-ink);
}
.bc-blue::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--tile-grad-a) 0%, var(--tile-grad-b) 60%, transparent 100%);
  filter: url(#noiseFilter);
  opacity: var(--tile-noise-op);
  pointer-events: none;
}
.bc-blue::after {
  content: "";
  position: absolute;
  inset: 0;
  filter: url(#noiseFilter);
  opacity: .12;
  pointer-events: none;
  z-index: 1;
}

/* Mirrored gradient on cells 02 and 06 — right to left */
.bc-grad-r { position: relative }
.bc-grad-r::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(315deg, var(--tile-grad-a) 0%, var(--tile-grad-b) 60%, transparent 100%);
  filter: url(#noiseFilter);
  opacity: var(--tile-noise-op);
  pointer-events: none;
  z-index: 0;
}

/* Noisy overlay on bc-dark / bc-ink */
.bc-dark::after, .bc-ink::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(128,128,128,0.04) 0%, rgba(128,128,128,0) 100%);
  filter: url(#noiseFilter);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* Right col: screenshot — free-floating, no box */
.bento__shot {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bento__shot img {
  width: 100%; height: auto;
  object-fit: contain; object-position: top center;
  display: block;
  border-radius: var(--r-xl);
  box-shadow: 0 24px 64px -12px rgba(32,28,20,.18), 0 8px 24px -6px rgba(32,28,20,.10);
}
[data-theme="dark"] .bento__shot img {
  box-shadow: 0 24px 64px -12px rgba(0,0,0,.55), 0 8px 24px -6px rgba(0,0,0,.35);
}

/* Cell content */
.bento__num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-5);
  letter-spacing: 0.08em;
  margin-bottom: auto;
  padding-bottom: 14px;
}
.bento__title {
  color: var(--fg); margin-bottom: 4px; position: relative; z-index: 1;
  font-size: var(--m-h3); font-weight: var(--w-semibold); letter-spacing: -0.02em;
}
.bento__desc { color: var(--fg-4); font-size: 0.78rem; line-height: 1.45; position: relative; z-index: 1 }
.bento__ex   { font-family: var(--font-mono); font-size: 0.68rem; color: var(--fg-3); margin-top: 8px; opacity: .75; position: relative; z-index: 1 }


/* ── SECTION SCAFFOLDING ─────────────────────────────────────────── */
.sec { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); position: relative }

/* Alt sections: shiny edge-fade gradient */
.sec--alt {
  background: var(--sec-alt-bg);
  position: relative;
}
.sec--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      var(--tile-grad-a) 0%,
      var(--tile-grad-b) 20%,
      transparent 50%,
      var(--tile-grad-b) 80%,
      var(--tile-grad-a) 100%);
  filter: url(#noiseFilter);
  opacity: var(--tile-noise-op);
  pointer-events: none;
  z-index: 0;
}
.sec--alt > * { position: relative; z-index: 1 }

.shead { margin-bottom: clamp(1rem, .75rem + 1.5vw, 1.75rem) }
.shead .sec-label { margin-bottom: 10px }
.shead .t-h2 { margin-bottom: 8px }
.shead .t-lead { max-width: 48ch }

/* ── MEMORY SECTION ──────────────────────────────────────────────── */
.memory-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 260px;
  gap: clamp(1.25rem, .75rem + 2vw, 2.5rem);
  align-items: stretch;
}
.memory__col { display: flex; flex-direction: column }
.memory__col--thread { height: 100% }
.memory__col--thread .thread-card { flex: 1; display: flex; flex-direction: column }

/* iOS-style card: larger radius, layered shadow */
.recall-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 16px;
  box-shadow: var(--shadow-md);
}
.recall-card__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-surface);
}
.recall-dot { width: 9px; height: 9px; border-radius: 50% }
.recall-dot--g { background: #3dba6a; animation: recallPulse 2.4s cubic-bezier(0.23,1,0.32,1) infinite }
.recall-dot--y { background: #c8a000; opacity: .6 }
.recall-dot--r { background: #c03030; opacity: .45 }
@keyframes recallPulse {
  0%   { box-shadow: 0 0 0 0 rgba(61,186,106,.5) }
  70%  { box-shadow: 0 0 0 7px transparent }
  100% { box-shadow: 0 0 0 0 transparent }
}
.recall-card__path {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-4);
  margin-left: 6px;
}
.recall-card__body { padding: 16px }

.recall-log { margin-bottom: 0; display: flex; flex-direction: column; gap: 4px }
.recall-log__line {
  font-family: var(--font-mono);
  font-size: 11px; line-height: 1.6;
  color: var(--fg-4); display: flex; align-items: baseline; gap: 8px;
}
.recall-log__line .rk { color: var(--fg-2); flex-shrink: 0; font-weight: var(--w-semibold) }
.recall-log__line .rv { color: var(--fg-2) }
.recall-log__line .rc { color: var(--fg-5); font-size: 10px }

.recall-divider { height: 1px; background: var(--line); margin: 10px 0 8px }

.recall-chips { display: flex; flex-wrap: wrap; gap: 7px }
.recall-chip {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--fg-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  background: var(--bg-surface);
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base);
  opacity: 0; transform: translateY(8px);
  display: inline-flex; align-items: center; gap: 5px;
}
.recall-chip::before { content: "•"; color: var(--fg-4); font-size: 9px }
.recall-chip.in {
  opacity: 1; transform: translateY(0);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), border-color var(--dur-base), color var(--dur-base);
}
.recall-chip:hover { border-color: var(--fg-5); color: var(--fg-2) }

/* Memory thread — iOS message bubble feel */
.thread-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px; margin-top: 0;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-md);
}
.thread-label {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--fg-5);
  display: flex; align-items: center; gap: 6px;
}
.thread-label::before { content: "›"; color: var(--fg-3) }
.thread-ask {
  align-self: flex-end; max-width: 80%;
  background: var(--bg-border);
  color: var(--fg-2);
  font-size: var(--m-sm);
  padding: 10px 14px;
  border-radius: 18px 18px 4px 18px;
  border: 1px solid var(--line);
}
.thread-reply { display: flex; align-items: flex-start; gap: 10px; max-width: 92% }
.thread-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--fg-4);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--bg-surface), 0 0 10px 2px var(--accent-dim);
}
.thread-avatar svg { width: 14px; height: 14px }
.thread-bubble {
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
  border-radius: 4px 18px 18px 18px;
  padding: 11px 14px;
  font-size: var(--m-sm); line-height: 1.55; color: var(--fg-2);
}
.thread-bubble b { color: var(--fg-2); font-weight: var(--w-semibold) }
.thread-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.thread-meta span {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-4);
  background: var(--bg-border); border: 1px solid var(--line);
  padding: 3px 8px; border-radius: var(--r-pill);
}

.memory__stage { position: relative; display: flex; flex-direction: column; align-items: center }
.memory__shot { width: 100%; max-width: 260px }
.memory__shot img {
  width: 100%; height: auto;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.rev .thread-ask   { opacity: 0; transform: translateY(12px) }
.rev .thread-reply { opacity: 0; transform: translateY(12px) }
.rev.in .thread-ask   { animation: floatUp .55s var(--ease-out) .6s forwards }
.rev.in .thread-reply { animation: floatUp .55s var(--ease-out) .9s forwards }
@keyframes floatUp { to { opacity: 1; transform: translateY(0) } }

@media (max-width: 980px) {
  .memory-wrap { grid-template-columns: 1fr 1fr }
  .memory__stage { grid-column: 1 / -1; justify-self: center; max-width: 260px }
}

/* ── COMPARISON ──────────────────────────────────────────────────── */
.diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--line);
  box-shadow: var(--shadow-sm);
}

.diff__head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}
.diff__lbl {
  padding: 11px clamp(1rem, .8rem + 1vw, 1.6rem);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: var(--w-semibold);
  display: flex; align-items: center; gap: 8px;
}
.diff__lbl--old { background: var(--bg-elevated); color: var(--fg-4) }
.diff__lbl--old::before { content: "✕"; opacity: .45; font-size: 10px }
.diff__lbl--now { background: var(--fg); color: var(--bg) }
.diff__lbl--now::before { content: "✓"; font-size: 10px }

.diff__row { display: contents }
.diff__old, .diff__now {
  display: flex; align-items: flex-start; gap: 12px;
  padding: clamp(.85rem, .7rem + .5vw, 1.1rem) clamp(1rem, .8rem + 1vw, 1.6rem);
  font-size: var(--m-body); line-height: 1.45;
  border-bottom: 1px solid var(--line); position: relative;
}
.diff__row:last-child .diff__old,
.diff__row:last-child .diff__now { border-bottom: 0 }

.diff__old { background: var(--bg-elevated); color: var(--fg-4) }
.diff__old:hover { background: var(--bg-surface) }
.diff__old svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; opacity: .55 }

.diff__now { background: var(--bg); color: var(--fg-2); font-weight: var(--w-medium) }
.diff__now::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--fg); opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.diff__now:hover::before { opacity: 1 }
.diff__now:hover { background: var(--bg-elevated) }
.diff__now svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--fg-3) }

.diff__n {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); background: var(--bg-surface); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: 2px 6px;
  flex-shrink: 0; margin-top: 2px; letter-spacing: 0.05em; font-weight: var(--w-semibold);
}
.diff__now .diff__n {
  background: var(--fg); border-color: var(--fg);
  color: var(--bg); opacity: 1;
}

/* Gated on .motion-ready: this hides the rows and depends on the .in class to
   bring them back. If the motion module fails to load, .in is never added and
   the comparison table renders as an empty box — so only arm it once motion is
   confirmed running. */
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .diff.rev .diff__old,
  .motion-ready .diff.rev .diff__now { opacity: 0; transform: translateY(10px) }
  .diff.rev.in .diff__old {
    animation: diffSlide .5s var(--ease-out) forwards;
    animation-delay: calc(60ms + var(--r, 0) * 60ms);
  }
  .diff.rev.in .diff__now {
    animation: diffSlide .5s var(--ease-out) forwards;
    animation-delay: calc(120ms + var(--r, 0) * 60ms);
  }
  @keyframes diffSlide { to { opacity: 1; transform: translateY(0) } }
}


/* ── MANIFESTO / STATS ───────────────────────────────────────────── */
.manifesto {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  text-align: center;
  background: var(--bg-elevated);
}
.manifesto__blob {
  position: absolute;
  inset: 0;
  background: linear-gradient(315deg, var(--tile-grad-a) 0%, var(--tile-grad-b) 60%, transparent 100%);
  filter: url(#noiseFilter);
  opacity: var(--tile-noise-op);
  pointer-events: none;
}
.manifesto__stmt {
  position: relative;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  font-weight: var(--w-black); letter-spacing: -0.045em; line-height: 1.15;
  text-wrap: balance; max-width: 28ch; margin-inline: auto;
  margin-bottom: 0;
  color: var(--fg);
}
.manifesto__stmt em { font-style: normal; color: var(--fg-4) }

.stats { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, .75rem + 3vw, 4rem) }
.stat { display: flex; flex-direction: column; align-items: center; gap: 6px }
.stat__n {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem);
  font-weight: var(--w-black); color: var(--fg);
  letter-spacing: -0.05em; line-height: 1;
}
.stat__l {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-4);
}

/* ── TRY IT / DEMO ───────────────────────────────────────────────── */
.try-split {
  display: grid;
  grid-template-columns: 1fr minmax(0, 380px);
  gap: clamp(1.25rem, .75rem + 3vw, 3rem);
  align-items: center;
}
.try-panels { display: flex; flex-direction: column; gap: 10px }

.try-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, .9rem + 1.2vw, 1.6rem);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.try-panel:hover { border-color: var(--fg-5); box-shadow: var(--shadow-md) }
.try-panel--primary { padding: clamp(.8rem, .6rem + .8vw, 1.1rem) }
.try-panel__kicker { margin-bottom: 6px }
.try-panel__h { margin-bottom: 8px }
.try-panel__sub { margin-bottom: 12px; max-width: 40ch }
.try-fine { font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); margin-top: 8px }

.try-phone { display: flex; flex-direction: column; align-items: center; gap: 14px }
.try-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-4);
  letter-spacing: 0.05em; align-self: flex-start;
}
.try-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-3);
  animation: livePulse 2.4s cubic-bezier(0.23,1,0.32,1) infinite;
}
.try-hint { font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); text-align: center }
.try-hint em { font-style: normal; color: var(--fg-3) }

/* App iframe frame — iOS phone shape */
.appframe {
  position: relative;
  width: 100%; max-width: 380px;
  aspect-ratio: 390/844;
  border: 1px solid var(--line);
  border-radius: 38px;
  overflow: hidden;
  box-shadow: var(--shadow-phone);
}
/* The iframe is laid out at 1/--afs of the frame and scaled back up, so the
   embedded app always believes it has a ~390px-wide phone viewport regardless
   of how wide the frame actually is. Driving both the size and the scale from
   one variable keeps them in sync — a hardcoded scale(.5) renders the app at
   half size the moment the frame is narrower than 380px, which is exactly what
   happens on a phone. */
.appframe {
  --afs: .5;
}
.appframe iframe {
  position: absolute; top: 0; left: 0;
  width: calc(100% / var(--afs));
  height: calc(100% / var(--afs));
  transform: scale(var(--afs)); transform-origin: top left;
  border: 0; background: transparent; color-scheme: light;
  pointer-events: auto;
  scrollbar-width: none;
  overflow: hidden;
}
.appframe iframe::-webkit-scrollbar { display: none }

.try-qr-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap }
.try-qr-box {
  padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-elevated); line-height: 0; flex-shrink: 0;
}
.try-qr-box img { display: block; border-radius: var(--r-sm) }
.try-store-meta .t-h3 { margin-bottom: 10px }


/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq-top { margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2rem) }
.faq-top .sec-label { margin-bottom: 10px }
.faq-top .t-h2 { margin-bottom: 0 }

.qgrid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}

.qa {
  background: var(--bg-elevated);
  transition: background-color var(--dur-base) var(--ease-out);
}
.qa:hover { background: var(--bg-surface) }
.qa.open  { background: var(--bg) }

.qa__q {
  width: 100%; text-align: left;
  padding: 16px 20px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  font-size: var(--m-sm); font-weight: var(--w-semibold);
  letter-spacing: -0.015em; line-height: 1.35;
  color: var(--fg-3);
  transition: color var(--dur-base) var(--ease-out);
}
.qa__q:hover { color: var(--fg) }
.qa.open .qa__q { color: var(--fg) }

.qa__pm { width: 16px; height: 16px; position: relative; flex-shrink: 0; margin-top: 2px }
.qa__pm::before, .qa__pm::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: var(--fg-5);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base);
}
.qa__pm::before { width: 10px; height: 1.5px }
.qa__pm::after  { width: 1.5px; height: 10px }
.qa.open .qa__pm::after { transform: translate(-50%,-50%) scaleY(0) }
.qa.open .qa__pm::before, .qa.open .qa__pm::after { background: var(--fg) }

.qa__a { overflow: hidden; height: 0; transition: height var(--dur-slow) var(--ease-out) }
.qa__a-in {
  padding: 0 20px 16px; color: var(--fg-4); font-size: var(--m-sm); line-height: 1.6;
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.qa.open .qa__a-in {
  opacity: 1; transform: translateY(0);
  transition-delay: 60ms;
}


/* ── FOOTER ──────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(1.25rem, 1rem + 1vw, 2rem);
  background: var(--bg-elevated);
}
.foot__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 24px; margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.foot__brand .brand { margin-bottom: 14px }
.foot__brand p { color: var(--fg-4); font-size: var(--m-sm); max-width: 30ch; line-height: 1.6; margin-bottom: 20px }
.foot__store-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 14px; font-size: var(--m-sm); font-family: var(--font-mono);
  color: var(--fg-3);
  transition: border-color var(--dur-base), color var(--dur-base);
}
.foot__store-btn:hover { border-color: var(--fg-3); color: var(--fg) }
.foot__col h4 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--fg-5);
  margin-bottom: 16px; font-weight: var(--w-medium);
}
.foot__col a {
  display: block; padding: 6px 0; font-size: var(--m-sm); color: var(--fg-4);
  transition: color var(--dur-base) var(--ease-out);
}
.foot__col a:hover { color: var(--fg) }
.foot__bar {
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 24px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-5);
  flex-wrap: wrap; letter-spacing: 0.04em;
}


/* ── Decorative fading rule lines ───────────────────────────────────── */
.rule-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-block: 8px 0;
  pointer-events: none;
}
.rule-lines span {
  display: block;
  height: 1px;
  width: 100%;
  max-width: var(--maxw);
  padding-inline: var(--pad-x);
  background: transparent;
  position: relative;
}
.rule-lines span::after {
  content: "";
  position: absolute;
  inset: 0 var(--pad-x);
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--line) 30%, var(--line) 70%, transparent 100%);
  opacity: 0.6;
}
.rule-lines span:nth-child(2)::after { opacity: 0.35 }
.rule-lines span:nth-child(3)::after { opacity: 0.15 }

/* ── Scan line break ──────────────────────────────────────────────── */
.scan { position: relative; padding-block: clamp(.3rem, .2rem + .4vw, .6rem) }
.scan.rev { opacity: 1; transform: none }
.scan__line {
  display: block; height: 1px; width: 100%;
  position: relative; overflow: hidden;
  background: var(--line);
}
.scan__line::before {
  content: ""; position: absolute; inset: 0 100% 0 0;
  background: var(--fg); transform-origin: left;
}
.scan.in .scan__line::before { animation: scanAnim 1s var(--ease-out) forwards }
@keyframes scanAnim {
  0%  { inset: 0 100% 0 0 }
  50% { inset: 0 0 0 0 }
  100%{ inset: 0 0 0 100% }
}
.scan__line::after {
  content: "";
  position: absolute; left: 0; top: -2px;
  width: clamp(28px, 5vw, 56px); height: 2px;
  background: var(--fg); border-radius: 1px;
}
@media (prefers-reduced-motion: reduce) { .scan.in .scan__line::before { animation: none } }

/* ── MOBILE OVERHAUL ─────────────────────────────────────────────── */

/* Tablet — 860px */
@media (max-width: 1024px) {
  /* The blobs are the main horizontal-overflow source: they're sized in vw
     and offset with negative percentages, so they push the layout wider than
     the viewport and hand the browser a scrollable page that drifts sideways.
     body{overflow-x:hidden} hides the scrollbar but not the reflow. */
  .hero { contain: paint }
}

@media (max-width: 860px) {
  /* Hero — copy first, phone below */
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem }
  .hero__copy { max-width: none }
  .hero__stage { justify-self: center }
  .phone-frame { width: clamp(200px, 52vw, 280px) }

  /* Bento */
  .bento { grid-template-columns: 1fr; gap: 1.5rem }
  .bento__shot { order: -1 }
  .bento__shot img { max-width: 260px; margin-inline: auto }

  /* Try */
  .try-split { grid-template-columns: 1fr; gap: 1.5rem }
  .try-phone { order: -1 }
  .appframe { max-width: 340px; margin-inline: auto; --afs: .86 }

  /* Footer */
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 20px }
}

/* Mobile — 640px */
@media (max-width: 640px) {
  /* Nav — keep one CTA in the bar. Hiding both (the 900px rule already drops
     "Try it free") left the header with a logo, a toggle and a hamburger, so
     the page had no visible action until you opened the menu. */
  .nav__links { display: none }
  .nav__r { gap: 8px }
  /* Uses the short "Get access" label. Don't let it shrink below its text —
     flex-shrink:0 here, and the burger/brand are also fixed, so the row fits
     by virtue of the short label rather than by squashing the button. */
  .nav__r .btn--primary {
    display: inline-flex; padding: .6em 1em; font-size: var(--m-xs);
    flex-shrink: 0; white-space: nowrap;
  }
  .nav__in { gap: 10px }
  .burger { display: inline-flex; flex-shrink: 0 }
  .brand { flex-shrink: 0 }
  /* 64px toggle + CTA + burger is tight at 360px; shrink the toggle. */
  .theme-toggle { width: 52px; height: 30px }
  .theme-toggle__thumb { width: 22px; height: 22px }
  [data-theme="dark"] .theme-toggle__thumb { transform: translateX(22px) }
  .theme-toggle__track { padding: 0 5px }
  .theme-toggle__track span { line-height: 22px; font-size: 9px }

  /* Hero */
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 1.5rem); padding-bottom: 2rem }
  .hero__grid { gap: 1.75rem }
  .hero__stage { justify-self: center; order: 1 }
  .phone-frame { width: min(66vw, 260px) }
  .hero__actions { flex-direction: column; align-items: stretch }
  .hero__actions .btn { width: 100%; justify-content: center }
  .hero__kpi { font-size: var(--m-xs) }
  /* The pill field puts a 20px-left-padded input next to a button inside a
     420px pill. Under ~380px the button squeezes the input to nothing —
     stack them so both stay usable. */
  /* :not(.done) so the success state keeps its centered single row — an ID
     selector here outranks .field.done and would otherwise re-stack it. */
  .hero__field:not(.done), #waitlist .field:not(.done) {
    flex-direction: column; border-radius: var(--r-lg);
    padding: 10px; gap: 8px;
  }
  .hero__field input, #waitlist .field input { padding: 6px 10px; min-height: 40px }
  .hero__field .btn, #waitlist .field .btn { width: 100%; min-height: 44px }

  /* Touch ergonomics: 44px minimum on things a finger has to hit, and lift
     the smallest ornamental type to a legible floor. Sub-11px mono reads as
     "zoomed out" next to the oversized headings — part of why the page felt
     visually unresolved. */
  .btn--mono { min-height: 44px; font-size: var(--m-xs) }
  .foot__col a { padding: 11px 0 }
  .foot__store-btn { min-height: 44px }
  .qa__q { padding: 18px 16px; min-height: 56px }
  .qa__a-in { padding: 0 16px 16px }
  .bento__num { font-size: 11px }
  .try-fine, .try-hint { font-size: 12px }
  .sec-label, .nav__links a, .thread-meta span, .recall-chip { font-size: 12px }
  /* Give the logo and inline mail link real vertical hit area. */
  .brand { padding-block: 8px }
  .foot__brand .brand { padding-block: 0 }
  .faq-top .link { display: inline-block; padding-block: 10px }
  .recall-card__path, .recall-log__line, .thread-label { font-size: 12px }
  .recall-log__line .rc { font-size: 11px }
  .diff__lbl, .stat__l, .foot__col h4 { font-size: 11px }
  .foot__bar { font-size: 11px }
  /* Inputs must be >=16px or iOS Safari zooms the page on focus — that alone
     makes a site feel like it "jumps and zooms in". */
  .field input { font-size: 16px }

  /* Rule lines */
  .rule-lines { padding-block: 4px 0 }

  /* Blobs are ~367px of noise-filtered gradient sitting over the headline at
     phone width, muddying the text it's behind. Shrink and soften them. */
  .hero__blob-1 { width: 62vw; height: 62vw; top: -4%; right: -14% }
  .hero__blob-2 { width: 40vw; height: 40vw; top: 46%; right: -8% }
  .grid-lines { background-size: 100% 56px, calc(100% / 3) 100%; opacity: .4 }

  /* Bento — two columns still work at phone width, but the vw-based
     min-height collapses to ~130px while the text inside doesn't shrink,
     so cells overflow. Let content set the height instead. */
  .bento__checker { grid-template-columns: 1fr 1fr }
  .bento__cell { min-height: 0; padding: 1rem .85rem }
  .bento__num { padding-bottom: 10px }
  .bento__desc { font-size: .82rem }
  .bento__ex { font-size: .75rem; overflow-wrap: anywhere }

  /* Memory */
  .memory-wrap { grid-template-columns: 1fr; gap: 1.25rem }
  .memory__col--intro { order: 1 }
  .memory__col--thread { order: 2 }
  .memory__stage { order: 3; grid-column: auto; max-width: 230px; margin-inline: auto }

  /* The log lines are key/value/comment in one nowrap-ish flex row. At phone
     width the three parts collide, so stack the comment under its pair. */
  .recall-log__line { flex-wrap: wrap; gap: 4px 8px }
  .recall-log__line .rv { overflow-wrap: anywhere }
  .recall-log__line .rc { flex-basis: 100% }
  .recall-card__body { padding: 14px }

  /* Bubbles capped at 80/92% of a 390px screen leaves them awkwardly
     narrow with a ragged edge; give them the room. */
  .thread-ask { max-width: 92% }
  .thread-reply { max-width: 100% }

  /* Comparison */
  .diff { grid-template-columns: 1fr }
  .diff__head { display: none }
  .diff__row { display: grid; grid-template-columns: 1fr }
  .diff__old { opacity: 0.7 }
  .diff__row:last-child .diff__now { border-bottom: 0 }

  /* Try — the demo is the one thing on the page a visitor is meant to
     actually use, so it gets the width rather than being shrunk to a
     thumbnail. The iframe is scaled 2x-down at 380px, so a narrower frame
     needs a proportionally larger scale or the app renders unreadably
     small inside it. */
  .try-split { gap: 1.25rem }
  .appframe { max-width: min(340px, 88vw); --afs: .86 }
  .try-qr-row { flex-direction: column; align-items: flex-start; gap: 14px }

  /* FAQ */
  .qgrid { grid-template-columns: 1fr }

  /* Stats */
  .stats { gap: 1.5rem }

  /* Footer */
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 16px }
  .foot__brand { grid-column: 1 / -1 }
}

/* Small mobile — 400px */
@media (max-width: 400px) {
  /* At 360px the brand + toggle + CTA + burger genuinely don't fit on one
     row. The CTA is the one that gives way: the hero form is a screen-length
     away and the menu holds the same action, so nothing is lost. */
  .nav__r .btn--primary { display: none }

  .bento__checker { grid-template-columns: 1fr }
  .foot__grid { grid-template-columns: 1fr }
  .stats { flex-direction: column; align-items: center }
  /* No max-width clamp here: the frame should still take the full gutter-to-
     gutter width. Shrinking it to 220px was what made the live demo — the
     one interactive thing on the page — too small to read or type into. */
}

/* ── Noisy surface utility ───────────────────────────────────────── */
.noise-grey { position: relative }
.noise-grey::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  filter: url(#noiseFilter);
  opacity: 0.5; pointer-events: none; z-index: 0;
}
.noise-grey > * { position: relative; z-index: 1 }

/* ── Utility ─────────────────────────────────────────────────────── */
.link {
  color: var(--fg-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .75;
  transition: opacity var(--dur-base);
}
.link:hover { opacity: 1 }