/* The app's look (app/src/theme.ts): since 2026-10-13 "Black", a gradient
   from dark charcoal to black, faint glass cards, white text, no accent
   colour (the one action is white), vivid good / warn / danger, and violet
   only where Logic speaks. Manrope. Change these with theme.ts. */
:root {
  --g1: #1f232a;
  --g2: #101216;
  --g3: #040506;
  --bg: #101216;
  --surface: rgba(255, 255, 255, 0.07);
  --raised: rgba(255, 255, 255, 0.15);
  --line: rgba(255, 255, 255, 0.18);
  --ink: #f4f6f9;
  --soft: rgba(244, 246, 249, 0.74);
  --on-accent: #14181e;
  --bar: #0b0d10;
  --good: #66f2a8;
  --warn: #ffc847;
  --danger: #ff8573;
  --ai: #d0bdff;
  --spark: #ae8fff;
  --ai-soft: rgba(174, 143, 255, 0.14);
  --ai-line: rgba(174, 143, 255, 0.45);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 500 17px/1.55 "Manrope", system-ui, sans-serif;
}
/* The app's gradient held to the window, as the app's screen is. A fixed
   layer rather than `background-attachment: fixed`, which iPhone Safari
   ignores (the gradient then stretched over the whole page). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(160deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%);
}
main { max-width: 720px; margin: 0 auto; padding: 0 16px; }
h1, h2, h3 { font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
h1 { font-size: clamp(38px, 8vw, 60px); margin: 56px 0 16px; }
h2 { font-size: 28px; margin: 48px 0 12px; }
p, li { color: var(--soft); }
strong { color: var(--ink); font-weight: 700; }
a { color: var(--ink); }
.lede { font-size: 19px; color: var(--ink); }
.glass, .card, .price {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.card { padding: 16px; }
.price { padding: 20px; margin-top: 16px; }

/* The landing page. */
.lp-cta {
  display: inline-block; background: var(--ink); color: var(--on-accent); text-decoration: none;
  font-weight: 800; padding: 14px 22px; border-radius: 14px; border: 0; font-size: 16px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.lp-cta:hover { transform: translateY(-1px); }

/* The demo: the app's log sheet and debrief (app/app/log.tsx,
   app/app/debrief/[id].tsx), drawn at the app's own sizes in points on a
   390-wide screen and scaled to fit the phone (--k, set by the script). */
.demo { position: relative; width: 100%; max-width: 380px; margin: 0 auto; }
.phone {
  border: 10px solid var(--bar); border-radius: 48px; overflow: hidden; background: var(--bg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);
}
.fit { --k: .9; position: relative; height: calc(800px * var(--k)); overflow: hidden; }
.app {
  position: absolute; top: 0; left: 0; width: 390px; height: 800px; transform: scale(var(--k)); transform-origin: 0 0;
  background: linear-gradient(165deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%);
  display: flex; flex-direction: column; font-size: 16px; line-height: 1.38; overflow: hidden;
}
.status { height: 50px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 34px; font-size: 15px; font-weight: 700; }
.status i { width: 110px; height: 30px; border-radius: 20px; background: #000; }
.status b { width: 26px; height: 12px; border-radius: 4px; border: 1.5px solid var(--ink); position: relative; }
.status b::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: var(--ink); border-radius: 1.5px; }
.scene { flex: 1; display: none; flex-direction: column; min-height: 0; }
.scene.on { display: flex; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px 4px; flex: none; }
.head .link { min-width: 56px; font-size: 16px; font-weight: 600; color: var(--soft); }
.head .link.save { text-align: right; color: var(--ink); font-weight: 700; }
.when { background: var(--raised); border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; height: 36px; display: flex; align-items: center; font-size: 14px; font-weight: 700; }
.scroll { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.inner { padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 14px; transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.block { background: var(--surface); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 18px; }
.label { font-size: 13px; font-weight: 600; color: var(--soft); margin-bottom: 6px; }
.rpe-call { font-size: 15px; font-weight: 600; min-height: 24px; margin-bottom: 8px; }
.rpe-call b { font-size: 22px; font-weight: 800; margin-right: 6px; }
.rpe-call span.soft { font-size: 14px; font-weight: 500; color: var(--soft); }
.rpe { display: flex; gap: 3px; height: 30px; }
.rpe i { flex: 1; border-radius: 4px; background: var(--raised); transition: background .15s; }
.rpe i.on { background: var(--ink); }
.rpe i.on.hard { background: var(--warn); }
.rpe i.on.max { background: var(--danger); }
.rpe i.cur { box-shadow: inset 0 0 0 2px var(--ink); }
.ends { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--soft); margin-top: 8px; }
.ask { font-size: 28px; line-height: 32px; font-weight: 800; letter-spacing: -.4px; margin: 0; }
.lines { background: var(--surface); border-radius: 18px; border-left: 4px solid; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.lines.good { border-color: var(--good); }
.lines.bad { border-color: var(--danger); }
.lines h4 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.2px; }
.lines.good h4, .lines.good .n { color: var(--good); }
.lines.bad h4, .lines.bad .n { color: var(--danger); }
.row { display: flex; align-items: center; gap: 8px; }
.n { width: 16px; text-align: center; font-size: 18px; font-weight: 800; }
.field { flex: 1; background: var(--raised); border-radius: 14px; padding: 13px 12px; font-size: 17px; min-height: 50px; border: 2px solid transparent; }
.field.focus { border-color: var(--ink); }
.field .ph { color: var(--soft); }
.where { border: 1px solid var(--line); border-radius: 999px; padding: 0 10px; height: 32px; display: flex; align-items: center; font-size: 13px; font-weight: 700; color: var(--soft); flex: none; }
.more { padding-left: 24px; font-size: 14px; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; background: var(--raised); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; min-height: 40px; font-size: 15px; font-weight: 600; color: var(--ink); }
.chip.small { padding: 5px 10px; min-height: 32px; font-size: 13px; }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }
button.chip { cursor: pointer; }
button.chip:hover { border-color: var(--ink); }
.step { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.step i { width: 44px; height: 44px; border-radius: 14px; background: var(--raised); display: grid; place-items: center; font-style: normal; font-size: 24px; }
.step b { font-size: 32px; font-weight: 800; min-width: 40px; text-align: center; }
.step span { font-size: 15px; color: var(--soft); }
.round { display: flex; align-items: center; gap: 14px; background: var(--raised); border-radius: 14px; padding: 0 14px; height: 44px; margin-bottom: 10px; font-size: 16px; color: var(--soft); }
.round b { color: var(--ink); opacity: .7; width: 22px; }
.round em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--ink); }
.meta { font-size: 13px; color: var(--soft); }
.fold { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border-radius: 14px; padding: 14px; font-size: 16px; font-weight: 600; }
.fold b { font-size: 15px; }
.step.drill { margin: 10px 0 0; }
.vhead { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.vhead .label { margin: 0; }
.vhead b { font-size: 15px; }
.input.focus { border-color: var(--ink); }
.input { background: var(--raised); border-radius: 14px; padding: 11px 12px; font-size: 16px; min-height: 46px; border: 2px solid transparent; }
.foot { flex: none; padding: 10px 16px 18px; border-top: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; gap: 8px; }
.button { background: var(--ink); color: var(--on-accent); border-radius: 14px; min-height: 52px; display: grid; place-items: center; font-size: 16px; font-weight: 700; transition: transform .12s, opacity .12s; }
.button.press { transform: scale(.98); opacity: .85; }
.thinking { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 0; color: var(--soft); font-size: 16px; font-weight: 600; }
.thinking svg { animation: breathe 1.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.35); opacity: 1; } 0%, 100% { opacity: .6; } }
.caret { display: inline-block; width: 2px; height: 1.05em; background: var(--ink); vertical-align: -3px; margin-left: 1px; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* The debrief. */
.dhead { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 6px; flex: none; }
.dhead h3 { margin: 0; font-size: 28px; letter-spacing: -.3px; }
.saved { font-size: 13px; font-weight: 700; color: var(--good); }
.x { width: 36px; height: 36px; border-radius: 50%; background: var(--raised); display: grid; place-items: center; font-size: 20px; }
.glance { background: var(--surface); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.glance .top { display: flex; justify-content: space-between; align-items: center; }
.glance .top .label { margin: 0; }
.glance .top b { font-size: 15px; }
.gl { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 21px; }
.gl .mk { font-weight: 700; }
.gl .t { flex: 1; }
.pos { flex: none; max-width: 150px; border-radius: 999px; padding: 5px 10px; font-size: 12.5px; font-weight: 700; background: var(--raised); }
.pos.none { background: transparent; border: 1px solid var(--line); }
.pos.unsure { background: transparent; border: 1px solid var(--ai); color: var(--ai); }
.unsure-ask { margin-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.bubble {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ai); border-radius: 18px; border-top-left-radius: 4px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px; align-self: flex-start; max-width: 92%;
  animation: rise .25s ease both;
}
.bubble.full { align-self: stretch; max-width: none; }
.who { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ai); }
.mine { align-self: flex-end; max-width: 85%; background: var(--ink); color: var(--on-accent); border-radius: 16px; border-bottom-right-radius: 4px; padding: 10px 14px; font-size: 15px; font-weight: 600; animation: rise .2s ease both; }
.points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.points li { color: var(--soft); font-weight: 500; font-size: 15px; display: flex; gap: 8px; line-height: 21px; }
.points li::before { content: "•"; color: var(--ai); width: 12px; flex: none; }
.mapbox { background: var(--raised); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.mapbox .h { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; color: var(--soft); }
.mapbox p { margin: 0; color: var(--ink); font-size: 14.5px; line-height: 20px; display: flex; align-items: center; gap: 8px; }
.mapbox p i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.plain { margin: 0; color: var(--ink); font-weight: 600; line-height: 22px; }
.next { color: var(--good); font-weight: 700; font-size: 15px; line-height: 21px; margin: 0; }
.unmapped { color: var(--soft); font-size: 14px; line-height: 20px; margin: 0; }
.notright { color: var(--soft); font-size: 14px; font-weight: 600; }
.composer { flex: none; padding: 10px 16px 14px; border-top: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; gap: 8px; }
.compose { display: flex; gap: 8px; align-items: flex-end; }
.compose .input { flex: 1; color: var(--soft); }
.send { width: 44px; height: 44px; border-radius: 50%; background: var(--ai-soft); border: 1px solid var(--ai-line); display: grid; place-items: center; font-size: 20px; opacity: .6; }
.skips { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--soft); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.picker { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.picker button {
  font: inherit; font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; min-height: 40px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
}
.picker button[aria-pressed="true"] { background: var(--ink); color: var(--on-accent); border-color: var(--ink); }
.demo-note { text-align: center; font-size: 13px; margin: 10px 0 0; }

.lp-band { max-width: 1080px; margin: 0 auto; padding: 72px 16px 0; }
.lp-band h2 { margin: 0 0 24px; font-size: clamp(28px, 5vw, 40px); }

/* Screenshots of the app itself (site/img), in the same phone. */
.shots { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.shots figure { margin: 0; }
.shots .phone { border-width: 8px; border-radius: 38px; max-width: 280px; margin: 0 auto; }
.shots img { display: block; width: 100%; height: auto; }
.shots figcaption { text-align: center; color: var(--soft); font-size: 15px; margin: 14px auto 0; max-width: 30ch; }
.shots figcaption b { color: var(--ink); display: block; }

.lp-measure { max-width: 720px; margin: 0 auto; padding: 72px 16px 0; display: flex; flex-direction: column; gap: 16px; }
.lp-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 6px; }
.lp-price b { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; }
.lp-close { text-align: center; padding: 28px 22px; }
.lp-close h2 { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .bubble, .mine, .thinking svg, .caret { animation: none; }
  .inner { transition: none; }
}
@media (max-width: 420px) { .phone { border-width: 8px; border-radius: 40px; } }

/* The pages (2026-10-13: one long page split into home, demo, inside and
   pricing, each reached from the header). */
.lp-cta.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.lp-page { padding-top: 40px; }
.lp-page h1 { margin: 0 0 16px; }
.lp-narrow { max-width: 44ch; margin: 0 0 32px; }
.lp-demo { max-width: 1080px; margin: 0 auto; padding: 40px 16px 0; display: grid; gap: 32px; align-items: center; }
@media (min-width: 920px) { .lp-demo { grid-template-columns: 1fr 380px; padding-top: 64px; } }
.lp-intro h1 { max-width: 14ch; }
.lp-intro .lede { max-width: 36ch; }
.lp-list { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.lp-list li { color: var(--ink); }
.lp-measure .card h3 { margin: 0 0 6px; font-size: 19px; }
.lp-measure .card p { margin: 0; }
.lp-next { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lp-next a {
  display: block; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; font-weight: 800; font-size: 18px; transition: border-color .15s;
}
.lp-next a:hover { border-color: var(--ink); }
.lp-next a span { display: block; font-size: 13px; font-weight: 600; color: var(--soft); margin-bottom: 2px; }


/* The bar and the foot on every page (2026-10-20, after SystemBJJ's
   PublicShell): the brand, the pages and the one filled ask in a bar that
   stays at the top, and a foot in columns. The bar's ground is the
   gradient's top tone with a blur, so the page reads as scrolling under it. */
.site-bar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(20, 23, 28, .72); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.site-bar-in { max-width: 1120px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.lp-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 18px; }
/* The wordmark (docs/brand, Henry's pick, 2026-10-30), at its own proportions. */
.lp-brand img { height: 24px; width: auto; display: block; }
.site-bar nav { display: flex; gap: 4px 18px; flex-wrap: wrap; }
.site-bar nav a { color: var(--soft); text-decoration: none; font-weight: 600; font-size: 15px; min-height: 44px; display: flex; align-items: center; }
.site-bar nav a:hover, .site-bar nav a[aria-current="page"] { color: var(--ink); }
.bar-cta {
  margin-left: auto; background: var(--ink); color: var(--on-accent); text-decoration: none; font-weight: 800; font-size: 14px;
  padding: 0 16px; min-height: 40px; border-radius: 12px; display: flex; align-items: center; white-space: nowrap;
}
.bar-cta:hover { opacity: .9; }
/* A phone: the brand and the ask on the first row, the pages under them. */
@media (max-width: 640px) {
  .site-bar-in { padding: 8px 16px 0; gap: 0 16px; }
  .site-bar nav { order: 3; width: 100%; }
  .site-bar nav a { min-height: 40px; }
}

.site-foot { max-width: 1120px; margin: 96px auto 0; padding: 40px 16px 48px; border-top: 1px solid var(--line); font-size: 14px; }
.foot-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot-brand p { margin: 12px 0 8px; max-width: 30ch; }
.foot-brand > a:last-child { color: var(--ink); font-weight: 600; }
.site-foot nav { display: flex; flex-direction: column; gap: 2px; }
.site-foot nav p { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.site-foot nav a { color: var(--ink); text-decoration: none; min-height: 32px; display: flex; align-items: center; }
.site-foot nav a:hover { text-decoration: underline; text-underline-offset: .2em; }
.foot-co { margin: 32px 0 0; color: var(--soft); }

/* The home page in SystemBJJ's shape (2026-10-20): the hero is two columns
   from 920px, the words on the left and the phone on the right with rings
   turning behind it, and one column under that. Then the facts, Logic's four
   cards, the loop, the map on a gridded stage, the price, the questions and
   the closing ask, each fading in as it is reached (reveal.js). */
.lp { max-width: none; padding: 0; }
.lp h2 { margin: 0; font-size: clamp(30px, 5vw, 46px); line-height: 1.05; letter-spacing: -0.03em; max-width: 20ch; }
.lp-eyebrow.ai { color: var(--ai); }

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); min-height: min(88svh, 860px);
  /* the phone is taller than the words; it is cut by the hero's foot on a short window, as SystemBJJ's is */ display: flex; align-items: center; padding: 48px 16px; }
.hero-in { width: 100%; max-width: 1120px; margin: 0 auto; display: grid; gap: 48px; align-items: center; justify-items: center; text-align: center; }
.hero-copy { position: relative; z-index: 1; max-width: 640px; }
.hero-title { margin: 0 auto 20px; font-size: clamp(44px, 9vw, 84px); line-height: .98; letter-spacing: -0.04em; max-width: 12ch; }
.hero-lede { margin: 0 auto; max-width: 46ch; font-size: clamp(17px, 2.4vw, 20px); line-height: 1.55; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 32px; }
.text-link { color: var(--ink); font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.text-link:hover { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--ai); text-decoration-thickness: 2px; }
.hero-price { margin: 20px 0 0; font-size: 15px; color: var(--ink); font-weight: 600; }
.trust { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 14px; }
.trust li { display: flex; align-items: center; gap: 6px; }
.trust li::before { content: "✓"; color: var(--good); font-weight: 800; }
.hero-product { position: relative; width: 100%; display: flex; justify-content: center; }
.phone-shot { position: relative; z-index: 1; margin: 0; width: min(300px, 78vw); }
.phone-shot .phone { border-width: 8px; border-radius: 40px; }
.phone-shot img { display: block; width: 100%; height: auto; }
@media (min-width: 920px) {
  .hero { padding: 56px 32px; }
  .hero-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); text-align: left; justify-items: start; gap: 56px; }
  .hero-copy .hero-title, .hero-copy .hero-lede { margin-left: 0; margin-right: 0; }
  .hero-copy .hero-ctas, .hero-copy .trust { justify-content: flex-start; }
  .hero-product { justify-self: center; }
  .hero .phone-shot { width: 300px; }
}

/* Decoration only, in the page's own line colour; it turns only for a
   reader who has not asked for less motion. */
.rings { position: absolute; top: 50%; left: 50%; width: min(860px, 160vw); height: auto; transform: translate(-50%, -50%); pointer-events: none; fill: none; stroke: var(--line); stroke-width: 1.2; opacity: .7; }
.ring-lit { stroke: var(--ai-line); }
@media (prefers-reduced-motion: no-preference) {
  .rings-spin { transform-origin: 500px 500px; animation: spin 240s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

.facts { border-bottom: 1px solid var(--line); }
.facts dl { max-width: 1120px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .facts dl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts dl > div { padding: 28px 12px; text-align: center; }
.facts dt { font-size: clamp(34px, 5vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.facts dd { margin: 8px auto 0; color: var(--soft); font-size: 14px; max-width: 20ch; }

.band { max-width: 1120px; margin: 0 auto; padding: 96px 16px 0; }
.band.narrow { max-width: 760px; }
.band-head { margin-bottom: 32px; }
.band-head.center { text-align: center; }
.band-head.center h2 { margin: 0 auto; }

.ai-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ai-card { padding: 18px; display: flex; flex-direction: column; }
.ai-card h3 { margin: 18px 0 6px; font-size: 19px; }
.ai-card > p { margin: 0; font-size: 15px; }
.mock { background: rgba(0, 0, 0, .28); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 172px; font-size: 14px; line-height: 1.4; }
.mock p { margin: 0; }
.said { color: var(--soft); font-style: italic; }
.mock-arrow { color: var(--ai); text-align: center; font-weight: 800; }
.line { color: var(--ink); background: var(--surface); border-left: 3px solid; border-radius: 8px; padding: 6px 8px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.line b { font-size: 12px; }
.line.good { border-color: var(--good); } .line.good b { color: var(--good); }
.line.bad { border-color: var(--danger); } .line.bad b { color: var(--danger); }
.by { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ai); }
.bubble-ai { color: var(--ink); background: var(--ai-soft); border: 1px solid var(--ai-line); border-radius: 14px; border-top-left-radius: 4px; padding: 10px 12px; }
.taps { display: flex; flex-wrap: wrap; gap: 6px; }
.taps span { border: 1px solid var(--line); background: var(--raised); border-radius: 999px; padding: 5px 11px; font-weight: 700; font-size: 13px; color: var(--ink); }
.taps span.on { background: var(--ink); color: var(--on-accent); border-color: var(--ink); }
.q { align-self: flex-end; background: var(--ink); color: var(--on-accent); font-weight: 600; border-radius: 14px; border-bottom-right-radius: 4px; padding: 8px 12px; }
.mock .a { color: var(--ink); }
.mock .a b { color: var(--ai); font-size: 12px; display: block; }
.tag { align-self: flex-start; color: var(--ai); border: 1px solid var(--ai-line); background: var(--ai-soft); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.mock .pt::before { content: "• "; color: var(--ai); }
.kicker { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }

.loop { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--line); }
.loop li { padding: 24px 24px 0 0; }
.loop-when { font-size: 13px; font-weight: 700; color: var(--good); }
.loop h3 { margin: 8px 0 6px; font-size: 22px; }
.loop p { margin: 0; max-width: 32ch; }

.stage-wrap { max-width: 1120px; margin: 0 auto; padding: 96px 16px 0; }
.stage {
  display: grid; justify-items: center; gap: 40px; padding: 40px 16px; border: 1px solid var(--line); border-radius: 24px;
  background-color: var(--surface);
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 28px 28px;
}
@media (min-width: 840px) { .stage { grid-template-columns: auto minmax(0, 400px); justify-content: center; align-items: center; gap: 64px; padding: 56px 32px; } }
.pin, .callout-n {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: var(--on-accent); font-weight: 800; font-size: 14px; flex: none;
}
.pin { position: absolute; z-index: 2; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(0, 0, 0, .45); }
.callouts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.callouts li { display: flex; gap: 14px; align-items: flex-start; }
.callouts h3 { margin: 2px 0 4px; font-size: 19px; }
.callouts p { margin: 0; }
.stage-note { text-align: center; font-size: 13px; margin: 14px 0 0; }

.plans { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.plan { padding: 22px; }
.plan.lead { border-color: var(--ink); }
.plan-name { margin: 0; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flag { font-size: 12px; font-weight: 800; color: var(--on-accent); background: var(--good); border-radius: 999px; padding: 2px 8px; }
.plan-price { margin: 10px 0 4px; display: flex; align-items: baseline; gap: 8px; }
.plan-price b { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.plan-note { margin: 0; font-size: 14px; }
.plan-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plan-list li { color: var(--ink); display: flex; gap: 8px; }
.plan-list li::before { content: "✓"; color: var(--good); font-weight: 800; }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-weight: 700; font-size: 18px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; font-weight: 600; color: var(--soft); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; max-width: 60ch; }

.close { max-width: 760px; margin: 96px auto 0; padding: 48px 24px; text-align: center; }
@media (max-width: 791px) { .close { margin-left: 16px; margin-right: 16px; } }
.close h2 { margin: 0 auto 10px; }
.close p { margin: 0; }
.hero-ctas.center { justify-content: center; margin-top: 24px; }

/* New information arrives as it is scrolled to (reveal.js marks the page
   ready only when it can observe and the reader has not asked for less
   motion; without it everything is simply there). */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--reveal-delay, 0ms); }
.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }

/* The hero's video (2026-10-20): the recording under a drawn status bar,
   in the same phone. It has no status bar of its own, since the web build
   was recorded in a browser; the strip is the recording's top tone. */
.hero-video .phone { background: #222; }
.vid-status { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 4px 22px 0 26px; font-size: 13px; font-weight: 700; background: #222; }
.vid-status i { width: 76px; height: 22px; border-radius: 14px; background: #000; }
.vid-status b { width: 20px; height: 10px; border-radius: 3px; border: 1.5px solid var(--ink); position: relative; }
.vid-status b::after { content: ""; position: absolute; inset: 1px 4px 1px 1px; background: var(--ink); border-radius: 1px; }
.hero-video video { display: block; width: 100%; height: auto; aspect-ratio: 590 / 1276; background: #111; }
.hero-video figcaption { text-align: center; font-size: 13px; color: var(--soft); margin-top: 12px; }