/* Inter self-hosted (OFL, fonts/OFL-Inter.txt) instead of Google Fonts:
   no third-party request per visitor. Only the three weights used.
   The .woff files are Latin subsets (pyftsubset, ~10x smaller) and are
   what the deploy fileset ships; the .ttf stays as the fallback. */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_400Regular.woff") format("woff"), url("fonts/Inter_400Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_500Medium.woff") format("woff"), url("fonts/Inter_500Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_600SemiBold.woff") format("woff"), url("fonts/Inter_600SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The app's light system (mobile-app/src/theme/themes/light.ts):
     paper ground, ink text, pine accent, Inter only. The page was the
     retired dark theme until 2026-09-22. Contrast on paper: ink 16:1,
     muted 7.4:1, dim 5.6:1, pine 8.3:1; white on the darkest-to-
     lightest pine of --grad is 9.2:1 to 6.5:1. */
  --bg: #F7F4EC;
  --bg2: #EFEBE0;
  --card: #FFFFFF;
  --line: #DDD8CB;
  --text: #161A16;
  --muted: #4A524B;
  --dim: #5C645D;
  --purple: #0F5148;
  --pink: #0F5148;
  --grad: linear-gradient(100deg, #0F5148 0%, #12685A 100%);
  --head: "Inter", system-ui, -apple-system, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--bg2); padding: .1em .4em; border-radius: 6px; }
a.inline { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid #0F5148; outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1120px, 92vw); margin: 0 auto; }

.grain {
  pointer-events: none; position: fixed; inset: -50%; z-index: 50; opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)} 60%{transform:translate(-4%,-1%)} 80%{transform:translate(3%,3%)} }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--head); font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 18px;
}
.h1 {
  font-family: var(--head); font-weight: 600; letter-spacing: -.035em; line-height: .96;
  font-size: clamp(52px, 9.5vw, 128px); margin: 0 0 28px; max-width: 11ch;
}
.h1 .word { display: inline-block; margin-right: .22em; }
.js .h1 .word { transform: translateY(110%); opacity: 0; }
.h2 {
  font-family: var(--head); font-weight: 600; letter-spacing: -.03em; line-height: 1.02;
  font-size: clamp(36px, 5.6vw, 72px); margin: 0 0 20px; max-width: 16ch;
}
.hl {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sub, .lead { color: var(--muted); font-size: clamp(17px, 1.6vw, 21px); max-width: 44ch; margin: 0 0 28px; }
.hero .sub { max-width: 40ch; }

/* ---------- reveal ---------- */
/* Hidden start states exist only under html.js (set inline in the
   <head>, removed by main.js if the animation library is missing), so
   the page reads in full without scripts. */
.js .reveal { opacity: 0; transform: translateY(18px); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--head); font-weight: 600;
  border-radius: 999px; padding: 15px 26px; font-size: 16px; transition: transform .16s var(--ease), background .16s, border-color .16s;
  will-change: transform;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 30px -12px rgba(15,81,72,.45); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -14px rgba(15,81,72,.55); }
.btn-ghost { border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); transform: translateY(-2px); }
/* The TestFlight buttons until the public link exists (main.js): still
   readable, clearly not a link. */
.btn-disabled, .btn-disabled:hover { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.btn-small { padding: 9px 16px; font-size: 14px; background: var(--text); color: var(--bg); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4vw; transition: background .3s, backdrop-filter .3s;
}
.nav.solid { background: rgba(247,244,236,.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.wordmark { font-family: var(--head); font-weight: 600; font-size: 22px; letter-spacing: -.03em; }
.nav nav { display: flex; gap: 26px; align-items: center; font-size: 14px; color: var(--muted); }
.nav nav a:not(.btn):hover { color: var(--text); }
@media (max-width: 720px) { .nav nav a:not(.btn) { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 120px 0 80px; overflow: hidden; }
#particles { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-inner { position: relative; z-index: 2; width: min(1120px, 92vw); }
.scroll-hint { position: absolute; bottom: 28px; left: 50%; width: 1px; height: 56px; background: var(--line); overflow: hidden; }
.scroll-hint span { position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--grad); animation: drop 1.8s var(--ease) infinite; }
@keyframes drop { to { top: 100% } }

.hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 32vh; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--bg) 85%);
}

/* ---------- stories strip ---------- */
.stories { padding: 140px 0 40px; }
.strip { margin-top: 44px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; cursor: grab; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip::-webkit-scrollbar { display: none; }
.strip.dragging { cursor: grabbing; scroll-snap-type: none; }
.strip { perspective: 1200px; }
/* Phones: cards align to the left edge so the next one peeks in;
   centred snapping hid it (owner 2026-09-25: "user does not know
   whether he can swipe"). */
@media (max-width: 720px) {
  .strip-track { padding-left: 6vw; padding-right: 6vw; }
  .slide { scroll-snap-align: start; width: 70vw; }
}
.strip-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 6px; }
.strip-dots { display: flex; gap: 7px; }
.strip-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .3s, transform .3s; }
.strip-dots i.on { background: var(--purple); transform: scale(1.35); }
.strip-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text); display: grid; place-items: center; cursor: pointer; font-size: 16px; transition: border-color .16s, transform .16s; }
.strip-arrow:hover { border-color: var(--text); transform: translateY(-1px); }
/* Pointer devices: no arrows, no dots (owner 2026-09-26). The strip
   is dragged or scrolled with the trackpad. Touch devices keep the
   dot row; the arrows never show there. */
@media (hover: hover) { .strip-nav { display: none; } }
@media (hover: none) { .strip-arrow { display: none; } }
.strip-track { display: flex; gap: 22px; padding: 10px max(4vw, calc((100vw - 1120px) / 2)) 30px; width: max-content; }
.slide {
  flex: none; width: min(300px, 74vw); aspect-ratio: 9/16; border-radius: 26px; padding: 26px; scroll-snap-align: center;
  display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden;
  background: radial-gradient(130% 90% at 15% 0%, var(--c1) 0%, var(--c2) 55%, #071F1B 140%);
  color: #fff;
  box-shadow: 0 40px 70px -40px rgba(7,31,27,.55); user-select: none;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.slide.hover { transition: transform .12s ease-out; box-shadow: 0 50px 80px -30px rgba(15,81,72,.45); z-index: 2; }
.slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.2) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.slide.hover::after { transform: translateX(120%); }
.slide::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 40% at 80% 20%, rgba(255,255,255,.18), transparent 70%); }
.slide-k { font-size: 10px; letter-spacing: .22em; opacity: .9; margin: 0 0 auto; font-family: var(--head); }
.slide-big { font-family: var(--head); font-weight: 600; font-size: 96px; line-height: .9; letter-spacing: -.02em; margin: 0 0 8px; }
.slide-big small { font-size: 24px; letter-spacing: 0; margin-left: .12em; vertical-align: .4em; }
.slide-t { font-family: var(--head); font-weight: 600; font-size: 22px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 10px; }
.slide-q { font-size: 30px; }
.slide-arch { font-size: 44px; line-height: .95; letter-spacing: -.035em; margin-bottom: 14px; }
.slide-s { font-size: 13px; opacity: .92; margin: 0; }
.slide-final .slide-s { margin-top: 16px; font-family: var(--head); letter-spacing: .12em; font-size: 11px; }

/* ---------- how (pinned phone) ---------- */
.how { position: relative; }
.how-track { height: auto; }
.js .how-track { height: 400vh; }
.how-sticky {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  width: min(1120px, 92vw); margin: 0 auto; gap: 40px;
}
.js .how-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; }
.how-sticky { padding: 80px 0; }
.js .how-sticky { padding: 0; }
.how-copy { position: relative; }
.step { margin-bottom: 40px; }
/* Laptop: every step title stays on screen as a list and the active
   one is lit; only its paragraph is open. Scrolling reads as progress
   down a list instead of one block replacing another (owner
   2026-09-25: the hard cut between steps felt wrong). */
.js .step { margin: 0 0 22px; opacity: .32; transition: opacity .45s var(--ease); }
.js .step.active { opacity: 1; }
.js .step p:not(.step-num) { max-height: 0; overflow: hidden; margin: 0; transition: max-height .5s var(--ease), margin .5s var(--ease); }
.js .step.active p:not(.step-num) { max-height: 200px; margin-top: 0; }
.js .step h2 { margin-bottom: 10px; }
.step h2 { font-family: var(--head); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(30px, 3.6vw, 48px); margin: 0 0 18px; }
.step p { color: var(--muted); max-width: 38ch; margin: 0; }
.step-num { font-family: var(--head); color: var(--pink); font-size: 13px; letter-spacing: .2em; margin: 0 0 14px; }
.with-num .step-num { display: block; }

.phone-wrap { position: relative; display: grid; place-items: center; }
.phone-glow {
  position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(15,81,72,.22), rgba(18,104,90,.08) 45%, transparent 70%);
  filter: blur(30px); z-index: 0;
}
.phone {
  position: relative; z-index: 1; width: min(320px, 72vw); aspect-ratio: 9/19.2;
  background: #161A16; border-radius: 48px; padding: 12px;
  box-shadow: 0 0 0 2px #2b2f2b, 0 0 0 5px #0e110e, 0 40px 80px -36px rgba(22,26,22,.55), inset 0 0 0 1px #111;
}
.phone-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 34%; height: 26px; background: #161A16; border-radius: 20px; z-index: 3; }
.screen { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: var(--bg); }
.app-screen { position: absolute; inset: 0; padding: 62px 20px 24px; opacity: 0; }
.app-screen[data-screen="0"] { opacity: 1; }
.js .app-screen, .js .app-screen[data-screen="0"] { opacity: 0; transform: scale(.96) translateY(10px); }
.app-h1 { font-family: var(--head); font-weight: 600; font-size: 26px; line-height: 1.05; letter-spacing: -.03em; margin: 0 0 10px; }
.app-h1.big { font-size: 34px; margin-bottom: 14px; }
.app-h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.app-p { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 0 0 18px; }
.app-kicker { font-size: 10px; letter-spacing: .2em; color: var(--muted); margin: 0 0 8px; }
.app-caption { font-size: 10px; letter-spacing: .15em; color: var(--dim); text-align: center; margin-top: 18px; }
.src-card {
  display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px; margin-bottom: 10px; font-size: 12px;
}
.src-card.on { border-color: rgba(15,81,72,.6); }
.src-card b { display: block; font-size: 14px; font-family: var(--head); }
.src-card small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 6px; }
.src-card .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #12897A; margin-right: 6px; }
.src-card .link { color: #0F5148; font-weight: 600; }
.src-icon { width: 30px; height: 30px; border-radius: 9px; background: #E3EEEA; color: #0F5148; display: grid; place-items: center; font-size: 14px; flex: none; }
.pulse-ring { position: relative; height: 130px; display: grid; place-items: center; margin: 6px 0 10px; }
.pulse-ring div { position: absolute; width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid #0F5148; opacity: 0; animation: ring 2.4s ease-out infinite; }
.pulse-ring div:nth-child(2) { animation-delay: .8s; border-color: #12897A; }
.pulse-ring div:nth-child(3) { animation-delay: 1.6s; }
@keyframes ring { 0% { transform: scale(.4); opacity: .9 } 100% { transform: scale(2.2); opacity: 0 } }
.signal-list { list-style: none; padding: 0; margin: 0; }
.signal-list li { display: flex; justify-content: space-between; font-size: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.signal-list b { color: var(--text); font-family: var(--head); }
.trait { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; font-size: 12px; margin: 10px 0; color: var(--muted); }
.bar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.pill-row span { display: inline-block; font-size: 11px; padding: 5px 10px; border-radius: 999px; background: #E3EEEA; color: #0F5148; margin: 0 5px 6px 0; font-weight: 500; }
.bar i { display: block; height: 100%; width: var(--w); background: var(--grad); transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease) .2s; }
.app-screen.active .bar i { transform: scaleX(1); }
.share-card {
  aspect-ratio: 9/14; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end;
  background: radial-gradient(120% 90% at 20% 0%, #0F5148 0%, #12685A 60%, #071F1B 130%);
  color: #fff;
  box-shadow: 0 20px 40px -22px rgba(15,81,72,.55); margin-bottom: 14px;
}
.share-kicker { font-size: 9px; letter-spacing: .2em; opacity: .8; margin: 0 0 auto; }
.share-title { font-family: var(--head); font-weight: 600; font-size: 30px; line-height: .98; letter-spacing: -.03em; margin: 0 0 8px; }
.share-line { font-size: 11px; opacity: .9; margin: 0 0 10px; }
.share-tags span, .acard-tags span { display: inline-block; font-size: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.16); margin-right: 5px; }
.share-btn { text-align: center; font-family: var(--head); font-weight: 600; font-size: 13px; padding: 12px; border-radius: 999px; background: var(--grad); color: #fff; margin-bottom: 8px; }
.share-btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); }

@media (max-width: 860px) {
  /* Phones: no pin, no 400vh track. The four steps stack, each with
     its own small phone screen (main.js moves the screens), so the
     section is as tall as its content and the title never sits under
     the fixed nav (owner on-device 2026-09-25). */
  .js .how-track { height: auto; }
  .js .how-sticky { position: static; height: auto; padding: 72px 0 24px; }
  .how-sticky { grid-template-columns: 1fr; gap: 0; }
  .how-copy { min-height: 0; }
  .js .step { opacity: 1; margin: 0 0 40px; }
  .js .step p:not(.step-num) { max-height: none; overflow: visible; }
  .js .how-sticky > .phone-wrap { display: none; }
  /* Each step's small phone shows the DESKTOP screen, laid out at
     its desktop width and scaled down as one picture (main.js sets
     the scale), so every screen fits cleanly instead of being
     reflowed into a 160px column with 11px type (owner 2026-09-26). */
  .mini-phone { width: min(220px, 60vw); margin: 22px auto 0; }
  .mini-phone .phone { width: 100%; }
  .mini-phone .screen { overflow: hidden; }
  .mini-phone .app-screen, .js .mini-phone .app-screen {
    position: absolute; inset: auto; left: 0; top: 0; width: 296px; height: 631px;
    transform-origin: 0 0; opacity: 1;
  }
  .phone { width: min(160px, 40vw); }
}

/* ---------- card wall ---------- */
.cards { padding: 160px 0 80px; }
.card-grid {
  width: min(1180px, 94vw); margin: 56px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; perspective: 1200px;
}
.acard {
  position: relative; aspect-ratio: 9/14; border-radius: 22px; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end;
  background: radial-gradient(120% 90% at 20% 0%, var(--c1) 0%, var(--c2) 60%, #071F1B 135%);
  color: #fff;
  transform: rotate(var(--tilt)); transform-style: preserve-3d;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  overflow: hidden;
}
.acard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.acard:hover::after { transform: translateX(120%); }
.acard:hover { box-shadow: 0 50px 80px -30px rgba(42,174,156,.35); }
.acard-kicker { font-size: 10px; letter-spacing: .2em; opacity: .75; margin: 0 0 auto; }
.acard h3 { font-family: var(--head); font-weight: 600; font-size: clamp(30px, 3vw, 40px); line-height: .98; letter-spacing: -.03em; margin: 0 0 10px; }
.acard p { font-size: 14px; opacity: .92; margin: 0 0 14px; max-width: 26ch; }

@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px) { .card-grid { grid-template-columns: 1fr; } .acard { aspect-ratio: 9/12; } }

/* ---------- physics ---------- */
.physics { padding: 120px 0 0; }
.pit { position: relative; height: min(70vh, 640px); margin-top: 40px; border-top: 1px solid var(--line); overflow: hidden; cursor: grab; touch-action: pan-y; }
.pit:active { cursor: grabbing; }
.pit canvas { display: block; }

/* ---------- privacy ---------- */
.privacy { padding: 160px 0; background: var(--bg2); }
.plain { list-style: none; padding: 0; margin: 40px 0 0; max-width: 62ch; }
.plain li { padding: 22px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 18px; }
.plain li:last-child { border-bottom: 1px solid var(--line); }
.plain b { color: var(--text); font-family: var(--head); margin-right: 6px; }
.counter { font-family: var(--head); font-weight: 600; color: var(--text); font-size: 28px; vertical-align: middle; }
.slide .counter { color: #fff; font-size: inherit; vertical-align: baseline; }

/* ---------- cta / footer ---------- */
.cta { padding: 180px 0 140px; text-align: center; }
.cta .h2, .cta .lead { margin-left: auto; margin-right: auto; }
.cta .cta-row { justify-content: center; }
.foot { padding: 30px 0 40px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }
.foot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.foot nav { display: flex; gap: 18px; }
.foot a:hover { color: var(--text); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .scroll-hint span, .pulse-ring div { animation: none; }
  .btn, .slide, .slide::after, .acard, .acard::after, .bar i { transition: none; }
  .js .h1 .word, .js .reveal { opacity: 1; transform: none; }
}

/* Phones (owner on-device 2026-09-25: "everything looks so big"):
   the desktop minimums were a fifth larger than a phone page needs.
   One scale here; nothing else changes. */
@media (max-width: 720px) {
  body { font-size: 15px; line-height: 1.5; }
  .eyebrow { font-size: 11px; margin-bottom: 14px; }
  .h1 { font-size: clamp(38px, 10.5vw, 52px); margin-bottom: 18px; }
  .h2 { font-size: clamp(28px, 7.6vw, 36px); margin-bottom: 14px; }
  .sub, .lead { font-size: 16px; margin-bottom: 22px; }
  .btn { padding: 13px 20px; font-size: 15px; }
  .btn-small { padding: 8px 14px; font-size: 13px; }
  .nav { padding: 12px 5vw; }
  .wordmark { font-size: 18px; }
  .step h2 { font-size: 26px; }
  .plain li { font-size: 15px; padding: 16px 0; }
  .counter { font-size: 22px; }
  .privacy { padding: 90px 0; }
  .cta { padding: 110px 0 90px; }
  .physics { padding-top: 80px; }
  .pit { height: min(52vh, 420px); }
  /* Hero copy anchored to the top; the figure lives in the band under
     the buttons (main.js places it there), so nothing overlaps the
     headline any more. */
  .hero { min-height: 0; place-items: start center; padding: 104px 0 56px; }
  /* No particle figure on phones (owner 2026-09-26: "it comes, goes";
     at phone size it never read as a figure). main.js skips it too. */
  #particles, .hero-fade, .scroll-hint { display: none; }
}