/* warpedtechnologies.io: one stylesheet for every page.
   Every value resolves through the tokens below (design-skills/landing-page-design, Part B):
   type on Tailwind's scale with its paired line heights, spacing from the spacing table, Tailwind radii,
   flat backgrounds (dark ones from the approved list), one accent, one easing curve. site.test.ts checks it. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* type: Tailwind's default scale, each size with its paired line height */
  --text-xs: 0.75rem;   --lh-xs: 1rem;
  --text-sm: 0.875rem;  --lh-sm: 1.25rem;
  --text-base: 1rem;    --lh-base: 1.5rem;
  --text-lg: 1.125rem;  --lh-lg: 1.75rem;
  --text-xl: 1.25rem;   --lh-xl: 1.75rem;
  --text-2xl: 1.5rem;   --lh-2xl: 2rem;
  --text-3xl: 1.875rem; --lh-3xl: 2.25rem;
  --text-4xl: 2.25rem;  --lh-4xl: 2.5rem;
  --text-5xl: 3rem;     --lh-5xl: 1;
  --text-6xl: 3.75rem;  --lh-6xl: 1;

  /* spacing: the table, nothing between */
  --sp-2: 2px; --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px;
  --sp-40: 40px; --sp-48: 48px; --sp-64: 64px; --sp-80: 80px; --sp-96: 96px;

  /* radius: Tailwind's values; nested shapes use outer minus gap */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-3xl: 24px; --r-full: 9999px;

  /* motion: one mass and spring curve */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 700ms;
  --dur-reveal: 900ms;
  --dur-micro: 240ms;

  /* layers */
  --z-island: 40; --z-menu: 35; --z-grain: 30; --z-skip: 50;

  /* light theme (the default) */
  --bg: #FFFFFF;
  --bg-2: #F5F5F5;
  --bg-3: #EBEBEB;
  --device: #181818;
  --fg: #111111;
  --fg-muted: #525252;
  --fg-faint: #6B6B6B;
  --line: #E0E0E0;
  --accent: #A96618;
  --btn-bg: #111111;
  --btn-fg: #FFFFFF;
  --btn-bg-hover: #313131;
  --hero-from: #000000;
  --hero-to: #666666;
  --glass: color-mix(in srgb, var(--bg) 72%, transparent);
  --glass-heavy: color-mix(in srgb, var(--bg) 80%, transparent);
  --glass-edge: color-mix(in srgb, var(--fg) 10%, transparent);
  --shadow: 0 24px 48px -24px color-mix(in srgb, #525252 40%, transparent);
  --grain: 0.05;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-2: #181818;
    --bg-3: #1F1F1F;
    --device: #272727;
    --fg: #F5F5F5;
    --fg-muted: #A3A3A3;
    --fg-faint: #8A8A8A;
    --line: #313131;
    --accent: #E4A944;
    --btn-bg: #F5F5F5;
    --btn-fg: #000000;
    --btn-bg-hover: #D4D4D4;
    --hero-from: #FFFFFF;
    --hero-to: #9B9B9B;
    --glass: color-mix(in srgb, var(--bg) 72%, transparent);
    --glass-heavy: color-mix(in srgb, var(--bg) 80%, transparent);
    --glass-edge: color-mix(in srgb, var(--fg) 14%, transparent);
    --shadow: 0 24px 48px -24px color-mix(in srgb, #000000 80%, transparent);
    --grain: 0.07;
  }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* a fixed grain over everything: texture without a gradient */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  background-image: url("/media/grain.png");
  opacity: var(--grain);
  mix-blend-mode: overlay;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p, li, dt, dd { text-wrap: pretty; }
em, i, cite, address { font-style: normal; }
strong { font-weight: 600; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
.tabular { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.ph { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: var(--sp-2);
  border-radius: var(--r-sm);
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-16);
}
@media (min-width: 768px) { .wrap { padding: 0 var(--sp-32); } }

.skip {
  position: fixed;
  top: var(--sp-8);
  left: var(--sp-8);
  z-index: var(--z-skip);
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-micro) var(--ease);
}
.skip:focus-visible { transform: none; }

/* ---------------------------------------------------------------- buttons and links */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  min-height: 44px;
  padding: var(--sp-8) var(--sp-12);
  border: 0;
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--btn-bg-hover); transform: translateY(-2px); }
.btn:active { transform: scale(0.98); }
.btn .ph { transition: transform var(--dur) var(--ease); }
.btn:hover .ph-arrow-right { transform: translateX(var(--sp-4)); }
.btn-sm {
  min-height: 36px;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--fg);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color var(--dur-micro) var(--ease), text-decoration-color var(--dur-micro) var(--ease), transform var(--dur) var(--ease);
}
.text-link:hover { text-decoration-color: var(--fg); }
.text-link:active { transform: translateY(1px); }
.text-link .ph { width: 1em; height: 1em; }

/* the store switch: data-ff-store on <html> ("soon" until Face Flapper is on the App Store, then "live") */
[data-ff-store="soon"] .live-only, [data-ff-store="live"] .soon-only { display: none !important; }

/* ---------------------------------------------------------------- island nav */
.island {
  position: fixed;
  top: var(--sp-24);
  left: 0;
  right: 0;
  z-index: var(--z-island);
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  width: max-content;
  max-width: calc(100% - 2 * var(--sp-16));
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-16);
  border-radius: var(--r-full);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--glass-edge), inset 0 1px 0 color-mix(in srgb, var(--fg) 8%, transparent), 0 8px 24px -12px color-mix(in srgb, #000000 20%, transparent);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 36px;
  color: var(--fg);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease);
}
.brand .mark { transition: transform var(--dur) var(--ease); }
.brand:hover .mark { transform: rotate(-8deg); }
.brand:active { transform: scale(0.98); }
.mark { display: block; flex: none; width: 28px; }
.mark > svg { width: 100%; height: auto; }

/* ---------------------------------------------------------------- the living letter (rig/: letter-rig.js and .css) */
/* The "a" of the wordmark has eyes: they follow the pointer, blink and smile (the logo, kept from the first site).
   site.js builds one into every [data-rig] host; without script the host keeps its drawn mark. The eyes are cut out of
   the ink, so the page shows through them in both themes. Two quick clicks on the hero's "a" make it blush. */
.mark.wt-rig { height: calc(28px * 108 / 125); }
.wordmark {
  --wm-h: 64px;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--wm-h) * 22 / 200);
  margin-bottom: var(--sp-24);
  color: var(--fg);
}
.wordmark > svg { flex: none; width: auto; height: var(--wm-h); overflow: visible; }
.wordmark .wt-rig { flex: none; width: calc(var(--wm-h) * 117 / 200); height: var(--wm-h); }
@media (min-width: 400px) { .wordmark { --wm-h: 80px; } }
@media (min-width: 768px) { .wordmark { --wm-h: 96px; } }
.wt-rig { --wt-rig-blush-blend: screen; --wt-rig-blush: #FF6B85; }
@media (prefers-color-scheme: dark) { .wt-rig { --wt-rig-blush-blend: multiply; --wt-rig-blush: #FF4F6B; } }
.island-links { display: flex; align-items: center; gap: var(--sp-4); }
.island-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--r-full);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease), background-color var(--dur-micro) var(--ease), transform var(--dur) var(--ease);
}
.island-links a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.island-links a:active { transform: scale(0.98); }
.island-links a[aria-current] { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }

.burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease), transform var(--dur) var(--ease);
}
.burger:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.burger:active { transform: scale(0.98); }
.burger span {
  position: absolute;
  left: var(--sp-12);
  right: var(--sp-12);
  top: 50%;
  height: 2px;
  border-radius: var(--r-full);
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.burger span:first-child { transform: translateY(-4px); }
.burger span:last-child { transform: translateY(4px); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(0) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(0) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-96) var(--sp-32) var(--sp-64);
  background: var(--glass-heavy);
  -webkit-backdrop-filter: blur(64px);
  backdrop-filter: blur(64px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s var(--ease) var(--dur);
}
.menu.open { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease), visibility 0s var(--ease); }
.menu ul { display: flex; flex-direction: column; gap: var(--sp-8); }
.menu li {
  opacity: 0;
  transform: translateY(var(--sp-48));
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.menu.open li { opacity: 1; transform: none; }
.menu.open li:nth-child(1) { transition-delay: 100ms; }
.menu.open li:nth-child(2) { transition-delay: 150ms; }
.menu.open li:nth-child(3) { transition-delay: 200ms; }
.menu.open li:nth-child(4) { transition-delay: 250ms; }
.menu.open li:nth-child(5) { transition-delay: 300ms; }
.menu.open li:nth-child(6) { transition-delay: 350ms; }
.menu a:not(.btn) {
  display: block;
  padding: var(--sp-8) 0;
  color: var(--fg);
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease), transform var(--dur) var(--ease);
}
.menu a:not(.btn):hover { color: var(--fg-muted); }
.menu a:not(.btn):active { transform: translateY(1px); }
.menu a[aria-current] { color: var(--accent); }
.menu .btn { margin-top: var(--sp-24); }

@media (max-width: 899px) {
  .island { width: auto; left: var(--sp-16); right: var(--sp-16); max-width: none; justify-content: space-between; }
  .js .island-links, .js .island .btn { display: none; }
  .js .burger { display: block; }
  .island-links { flex-wrap: wrap; }
}
@media (min-width: 900px) { .menu { display: none; } }

/* ---------------------------------------------------------------- reveal on scroll (IntersectionObserver, site.js) */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--sp-64));
  filter: blur(12px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease), filter var(--dur-reveal) var(--ease);
  transition-delay: var(--delay, 0ms);
}
.js .reveal.in { opacity: 1; transform: none; filter: blur(0); }
.d1 { --delay: 100ms; } .d2 { --delay: 200ms; } .d3 { --delay: 300ms; } .d4 { --delay: 400ms; }

/* ---------------------------------------------------------------- sections */
.section { padding: var(--sp-64) 0 var(--sp-80); }
/* in-page links land below the floating island (24px down, 52px tall on phones) */
main section[id] { scroll-margin-top: var(--sp-96); }
/* headings broken where the thought breaks: one sentence or phrase per line */
.line { display: block; }
/* on a phone the hero's two lines wrap as one sentence (balanced); from 768px each is its own line */
.hero-title .line { display: inline; }
@media (min-width: 1024px) { .section { padding: var(--sp-80) 0 var(--sp-96); } }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--accent); }
.section-title {
  margin-top: var(--sp-12);
  max-width: 680px;
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  letter-spacing: -0.02em;
}
.section-lede { margin-top: var(--sp-16); max-width: 65ch; color: var(--fg-muted); font-size: var(--text-lg); line-height: var(--lh-lg); }
@media (min-width: 768px) {
  .section-title { font-size: var(--text-5xl); line-height: var(--lh-5xl); letter-spacing: -0.03em; }
}

/* ---------------------------------------------------------------- hero */
.hero { padding: var(--sp-96) 0 var(--sp-64); }
.hero-grid { display: grid; gap: var(--sp-48); align-items: center; }
.hero-copy { padding-top: var(--sp-24); }
.eyebrow {
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
}
.hero-title {
  margin-top: var(--sp-16);
  max-width: 680px;
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  letter-spacing: -0.03em;
  /* the one gradient on the site: on the hero heading's text, left to right, never on a background */
  background-image: linear-gradient(90deg, var(--hero-from), var(--hero-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  margin-top: var(--sp-16);
  max-width: 680px;
  color: var(--fg-muted);
  font-size: var(--text-base);
  line-height: var(--lh-base);
}
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12) var(--sp-16); margin-top: var(--sp-32); }
.cta-note { color: var(--fg-faint); font-size: var(--text-sm); line-height: var(--lh-sm); }
.proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-16);
  max-width: 680px;
  margin-top: var(--sp-24);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}
.proof li { display: inline-flex; align-items: center; gap: var(--sp-8); }
@media (max-width: 767px) { .proof { display: grid; gap: var(--sp-8); } }
.proof .ph { color: var(--accent); width: 1.125em; height: 1.125em; }

.hero-media { position: relative; justify-self: center; width: min(100%, 300px); }
.phone {
  position: relative;
  padding: var(--sp-8);
  border-radius: var(--r-3xl);
  background: var(--device);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #FFFFFF 10%, transparent), var(--shadow);
}
/* nested radius: 24px outer, 8px gap, so 16px inside */
.screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 552 / 1200;
  border-radius: var(--r-2xl);
  background: var(--bg-3);
}
.screen img, .screen video { width: 100%; height: 100%; object-fit: cover; }
.screen video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur) var(--ease); }
.screen.playing video { opacity: 1; }
/* loading: a skeleton shaped like the game's start screen, until the poster has decoded */
.skeleton { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: var(--sp-16); padding: var(--sp-24); background: var(--bg-3); transition: opacity var(--dur) var(--ease); }
.skeleton i { display: block; border-radius: var(--r-full); background: color-mix(in srgb, var(--fg) 10%, transparent); }
.skeleton .sk-title { width: 70%; height: 24px; }
.skeleton .sk-face { width: 45%; aspect-ratio: 1; }
.skeleton .sk-pill { width: 35%; height: 24px; }
.skeleton .sk-button { width: 60%; height: 40px; margin-top: var(--sp-24); }
.js .screen:not(.ready) .skeleton i { animation: pulse 1600ms var(--ease) infinite alternate; }
.screen.ready .skeleton { opacity: 0; }
@keyframes pulse { from { opacity: 1; } to { opacity: 0.4; } }

.media-control {
  position: absolute;
  right: var(--sp-16);
  bottom: var(--sp-16);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-full);
  background: color-mix(in srgb, #000000 60%, transparent);
  color: #FFFFFF;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color var(--dur-micro) var(--ease), transform var(--dur) var(--ease);
}
.media-control:hover { background: color-mix(in srgb, #000000 80%, transparent); transform: scale(1.04); }
.media-control:active { transform: scale(0.98); }
.media-control[hidden] { display: none; }
.media-control .ph { width: 20px; height: 20px; }
.media-control .ph-play { display: none; }
.media-control[aria-pressed="true"] .ph-play { display: block; }
.media-control[aria-pressed="true"] .ph-pause { display: none; }
.media-error {
  margin-top: var(--sp-12);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  text-align: center;
}
.media-error[hidden] { display: none; }

@media (min-width: 768px) {
  .hero { padding: var(--sp-96) 0 var(--sp-80); }
  .hero-title { font-size: var(--text-5xl); line-height: var(--lh-5xl); }
  .hero-title .line { display: block; }
  .hero-sub { font-size: var(--text-lg); line-height: var(--lh-lg); }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-64); }
  .hero-grid { padding-top: var(--sp-32); }
  .hero-copy { padding-top: var(--sp-16); }
  .hero-media { width: 320px; }
}

/* ---------------------------------------------------------------- products: zig zag rows */
.products { display: grid; gap: var(--sp-80); margin-top: var(--sp-48); }
.product { display: grid; gap: var(--sp-40); align-items: center; }
.product-id { display: flex; align-items: center; gap: var(--sp-16); }
.app-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow);
}
.product-name { font-size: var(--text-2xl); line-height: var(--lh-2xl); letter-spacing: -0.02em; }
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  margin-top: var(--sp-4);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}
.status::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--accent); }
.product-line {
  margin-top: var(--sp-24);
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.product-desc { margin-top: var(--sp-12); max-width: 65ch; color: var(--fg-muted); }
.benefits { display: grid; gap: var(--sp-16); margin-top: var(--sp-24); }
.benefits li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-12); align-items: start; color: var(--fg-muted); }
.benefits .ph { margin-top: var(--sp-2); color: var(--accent); width: 1.25rem; height: 1.25rem; }
.benefits strong { color: var(--fg); }
.product-links { display: flex; flex-wrap: wrap; gap: var(--sp-12) var(--sp-24); margin-top: var(--sp-32); }

/* screens: overlapping phones at mixed heights, not a row of equal cards */
.screens { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: var(--sp-24) 0; }
.screens .phone { width: 46%; max-width: 220px; flex: none; }
.screens .phone + .phone { margin-left: calc(-1 * var(--sp-40)); }
.screens .phone:nth-child(1) { transform: rotate(-4deg); }
.screens .phone:nth-child(2) { z-index: 1; margin-top: var(--sp-48); transform: rotate(3deg); }
.screens .phone:nth-child(3) { margin-top: var(--sp-16); transform: rotate(-2deg); }
.screens.three .phone { width: 36%; }
.screens .screen { aspect-ratio: 600 / 1300; }

.numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-24) var(--sp-16);
  margin-top: var(--sp-48);
  padding: var(--sp-24) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.numbers div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--sp-4); }
.numbers div:last-child { grid-column: 1 / -1; }
.numbers dt { color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.numbers dd { font-size: var(--text-3xl); line-height: var(--lh-3xl); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .numbers { grid-template-columns: repeat(5, minmax(0, 1fr)); } .numbers div:last-child { grid-column: auto; } }

.teaser {
  display: grid;
  gap: var(--sp-24);
  align-items: center;
  padding: var(--sp-32);
  border-radius: var(--r-3xl);
  border: 1px solid var(--line);
  background: transparent;
}
.teaser .globe { width: 96px; height: 96px; color: var(--accent); }
.teaser p { color: var(--fg-muted); max-width: 65ch; }
.teaser .product-name { margin-bottom: var(--sp-8); }
.teaser .text-link { margin-top: var(--sp-16); }
@media (min-width: 768px) { .teaser { grid-template-columns: auto 1fr; gap: var(--sp-40); padding: var(--sp-48); } }

.also { margin-top: var(--sp-16); }
.also h3 { font-size: var(--text-xl); line-height: var(--lh-xl); }
.also ul { margin-top: var(--sp-16); border-top: 1px solid var(--line); }
.also li { border-bottom: 1px solid var(--line); }
.also a {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-16) 0;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), color var(--dur-micro) var(--ease);
}
.also a:hover { transform: translateX(var(--sp-8)); }
.also a:active { transform: translateX(var(--sp-8)) scale(0.99); }
.also .name { display: inline-flex; align-items: center; gap: var(--sp-8); font-weight: 600; }
.also .name .ph { width: 1rem; height: 1rem; color: var(--fg-faint); }
.also .what { max-width: 65ch; color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
@media (min-width: 768px) { .also a { grid-template-columns: 240px 1fr; gap: var(--sp-24); align-items: baseline; } }

@media (min-width: 1024px) {
  .product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-64); }
  .product.flip .screens { order: 2; }
  .product-line { font-size: var(--text-3xl); line-height: var(--lh-3xl); }
}

/* ---------------------------------------------------------------- how it works */
.how { background: var(--bg-2); }
.how-grid { display: grid; gap: var(--sp-48); }
.steps { display: grid; gap: var(--sp-32); counter-reset: step; }
.steps li { display: grid; grid-template-columns: 48px 1fr; gap: var(--sp-16); align-items: start; }
.steps .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.steps h3 { font-size: var(--text-xl); line-height: var(--lh-xl); padding-top: var(--sp-12); }
.steps p { margin-top: var(--sp-4); color: var(--fg-muted); }
@media (min-width: 1024px) {
  .how-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-64); align-items: start; }
  .steps li:nth-child(2) { margin-left: var(--sp-48); }
  .steps li:nth-child(3) { margin-left: var(--sp-96); }
}

/* ---------------------------------------------------------------- tagline reveal (B11) */
.tagline-section { padding: var(--sp-96) 0; }
.tagline {
  max-width: 680px;
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.tagline .line { text-wrap: balance; }
.tagline .w {
  color: color-mix(in srgb, var(--fg) 30%, transparent);
  transition: color var(--dur) var(--ease);
}
.tagline .w.on { color: var(--fg); }
@media (min-width: 768px) { .tagline { font-size: var(--text-5xl); line-height: var(--lh-5xl); } }

/* ---------------------------------------------------------------- studio */
.studio-grid { display: grid; gap: var(--sp-48); }
.studio-copy p { margin-top: var(--sp-16); max-width: 65ch; color: var(--fg-muted); font-size: var(--text-lg); line-height: var(--lh-lg); }
.ledger { border-top: 1px solid var(--line); }
.ledger div { display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-16); padding: var(--sp-12) 0; border-bottom: 1px solid var(--line); }
.ledger dt { color: var(--fg-faint); font-size: var(--text-sm); line-height: var(--lh-sm); padding-top: var(--sp-2); }
.ledger dd { font-weight: 500; }
.contact-list { display: grid; gap: var(--sp-16); margin-top: var(--sp-32); }
.contact-list li { display: grid; gap: var(--sp-4); }
.contact-list .who { color: var(--fg-faint); font-size: var(--text-sm); line-height: var(--lh-sm); }
@media (min-width: 1024px) { .studio-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-64); align-items: start; } }

/* ---------------------------------------------------------------- FAQ: a two column list, no accordion */
.faq-list { display: grid; gap: var(--sp-32); margin-top: var(--sp-48); }
.faq-list div { padding-top: var(--sp-16); border-top: 1px solid var(--line); }
.faq-list dt { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 600; }
.faq-list dd { margin-top: var(--sp-8); color: var(--fg-muted); max-width: 65ch; }
@media (min-width: 768px) { .faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-40) var(--sp-48); } }

/* ---------------------------------------------------------------- final CTA */
.final { padding: var(--sp-80) 0 var(--sp-96); }
.final-card {
  display: grid;
  gap: var(--sp-24);
  justify-items: start;
  padding: var(--sp-40) var(--sp-24);
  border-radius: var(--r-3xl);
  background: var(--bg-2);
}
.final-card .section-title { margin-top: 0; }
.final-card p { max-width: 65ch; color: var(--fg-muted); font-size: var(--text-lg); line-height: var(--lh-lg); }
.final-card .cta-note { color: var(--fg-faint); font-size: var(--text-sm); line-height: var(--lh-sm); }
.final-card .ff-mini { width: 64px; height: 64px; border-radius: var(--r-xl); }
@media (min-width: 768px) { .final-card { padding: var(--sp-64); } }

/* ---------------------------------------------------------------- footer */
.site-footer { padding: var(--sp-48) 0 var(--sp-64); border-top: 1px solid var(--line); }
.footer-grid { display: grid; gap: var(--sp-32); }
.footer-brand p { margin-top: var(--sp-12); color: var(--fg-muted); max-width: 40ch; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-16); }
@media (min-width: 768px) { .footer-links { gap: var(--sp-8) var(--sp-24); } }
.footer-links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease), transform var(--dur) var(--ease);
}
.footer-links a:hover { color: var(--fg); }
.footer-links a:active { transform: translateY(1px); }
.footer-links a[aria-current] { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fineprint { color: var(--fg-faint); font-size: var(--text-xs); line-height: var(--lh-xs); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .fineprint { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- legal pages and the 404 */
.page { padding: var(--sp-96) 0 var(--sp-80); }
.page-head { padding-top: var(--sp-48); max-width: 680px; }
.page-head h1 { margin-top: var(--sp-12); font-size: var(--text-4xl); line-height: var(--lh-4xl); letter-spacing: -0.03em; }
.page-head p { max-width: 65ch; margin-top: var(--sp-16); color: var(--fg-muted); font-size: var(--text-lg); line-height: var(--lh-lg); }
.page-head .fineprint { margin-top: var(--sp-8); color: var(--fg-faint); font-size: var(--text-sm); line-height: var(--lh-sm); }
.back { margin-bottom: var(--sp-8); }
.prose { max-width: 65ch; margin-top: var(--sp-48); }
.prose h2 { margin-top: var(--sp-48); font-size: var(--text-2xl); line-height: var(--lh-2xl); letter-spacing: -0.02em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin-top: var(--sp-16); color: var(--fg-muted); }
.prose ul { display: grid; gap: var(--sp-8); }
.prose li { display: grid; grid-template-columns: 8px 1fr; gap: var(--sp-12); }
.prose li p { margin-top: 0; }
.prose li::before { content: ""; width: 8px; height: 8px; margin-top: var(--sp-8); border-radius: var(--r-full); background: var(--accent); }
.prose strong { color: var(--fg); }
.prose a { color: var(--fg); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color var(--dur-micro) var(--ease); }
.prose a:hover { text-decoration-color: var(--fg); }
@media (min-width: 768px) { .page-head h1 { font-size: var(--text-5xl); line-height: var(--lh-5xl); } }

.lost { min-height: 100dvh; display: grid; align-content: center; padding: var(--sp-96) 0 var(--sp-64); }
.lost-mark { display: block; width: 96px; color: var(--fg); }
.lost-mark > svg { width: 100%; height: auto; }
.lost-mark.wt-rig { height: calc(96px * 108 / 125); }
.lost h1 { margin-top: var(--sp-32); max-width: 680px; font-size: var(--text-4xl); line-height: var(--lh-4xl); letter-spacing: -0.03em; }
.lost p { margin-top: var(--sp-16); max-width: 65ch; color: var(--fg-muted); font-size: var(--text-lg); line-height: var(--lh-lg); }
.lost .hero-cta { margin-top: var(--sp-32); }
@media (min-width: 768px) { .lost h1 { font-size: var(--text-6xl); line-height: var(--lh-6xl); } }

/* ---------------------------------------------------------------- Reduce Motion: nothing moves by itself */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .tagline .w { color: var(--fg); transition: none; }
  .js .screen:not(.ready) .skeleton i { animation: none; }
  .btn, .btn .ph, .text-link, .also a, .brand, .brand .mark, .burger, .burger span, .menu, .menu li, .island-links a, .media-control, .skip { transition: none; }
  .btn:hover, .also a:hover, .media-control:hover { transform: none; }
}