/* ox landing page. Plain CSS, no build step. Fonts and icons are self-hosted (fonts/LICENSES.md). */
@font-face { font-family: "Switzer"; src: url("fonts/switzer-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("fonts/familjen-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Fragment Mono"; src: url("fonts/fragment-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

@property --n { syntax: "<integer>"; initial-value: 0; inherits: false; }

:root {
  /* Light surfaces: neutral, not cream. */
  --bg: #FBFBFA;
  --stage: #F1F1EF;
  --card: #FFFFFF;
  --line: #E7E7E4;
  --ink: #111111;
  --on-ink: #F5F5F3;
  --text: #333333;
  --subtle: #6F6F6F;
  --faint: #A6A6A2;
  /* Dark surfaces: the dashboard, the AI card, the footer. */
  --night: #0F0F0E;
  --night-2: #171716;
  --night-line: #292927;
  --night-text: #D2D2CE;
  --night-ink: #F5F5F3;
  --night-subtle: #8D8D88;
  /* State colors, used only where a state is shown. */
  --ok: #2FB463;
  --ok-ink: #1C7F45;
  --ok-soft: #74D6A2;
  --warn: #E9A23B;
  /* Danger, the console's tokens (docs/design/README.md "Danger"): a flat
     maroon surface with white text and a hairline; a readable red only
     for the rare text on a neutral surface. */
  --danger-bg: #871c27;
  --danger-bg-hover: #972631;
  --danger-bg-active: #781923;
  --danger-fg: #ffffff;
  --danger-border: #5e1219;
  --danger-soft: color-mix(in srgb, var(--danger-bg) 8%, transparent);
  --danger-text: #a52230;
  --blue: #519DFA;
  --bar: #0077E6;
  --radius: 14px;
  --display: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --sans: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --hand: "Caveat", "Bradley Hand", cursive;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* The page defaults to the OS theme; the nav toggle overrides it
   (PRD_ox1.md V-42). The attribute is set by the inline script in the
   pages' head; dark resolves to the console's Blue palette. */
:root[data-theme="dark"] {
  --bg: #030614;
  --stage: #04081a;
  --card: #070d1e;
  --line: #10172b;
  --ink: #f1f5f9;
  --on-ink: #030614;
  --text: #cbd5e1;
  --subtle: #8b9bb4;
  --faint: #5b6b85;
  /* The "night" components (the dashboard mock, the comparison column,
     the report, the pro plan, the AI card, the footer, code blocks) take
     the blue palette too, instead of clashing neutral blacks (V-42). */
  --night: #050a1a;
  --night-2: #0a1120;
  --night-line: #15203a;
  --night-text: #cbd5e1;
  --night-ink: #f1f5f9;
  --night-subtle: #8b9bb4;
  --danger-bg: #701a23;
  --danger-bg-hover: #7d212a;
  --danger-bg-active: #60151d;
  --danger-border: #bc4f5a;
  --danger-soft: color-mix(in srgb, var(--danger-bg) 30%, transparent);
  --danger-text: #ef8d97;
  color-scheme: dark;
}
/* The head's color-scheme meta says "light dark" for the first paint; the
   page's own choice then wins. */
:root:not([data-theme="dark"]) { color-scheme: light; }
/* A pill on a hard light surface keeps a dark text. */
html[data-theme="dark"] .bubble-ai b { color: #111111; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
/* Controls skip the double-tap-zoom wait and never end up text-selected
   by a long press. */
.nav-links a, .nav-login, .theme-toggle { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg { display: block; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, figure, blockquote, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
code { font: 400 .88em var(--mono); background: var(--stage); padding: 2px 6px; border-radius: 5px; color: var(--ink); }

.wrap { width: min(var(--max, 1200px), 100% - var(--gutter)); margin-inline: auto; }
:root { --gutter: clamp(32px, 5vw, 72px); }
@media (min-width: 1600px) { :root { --max: 1320px; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--on-ink); padding: 10px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.muted { color: var(--subtle); }
.ic { width: 18px; height: 18px; flex: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 20px; border-radius: 8px; border: 1px solid transparent;
  font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition-property: transform, background-color, border-color, color;
  transition-duration: 160ms; transition-timing-function: var(--ease);
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 7px; gap: 7px; }
.btn-sm .ic { width: 16px; height: 16px; }
.nav-login { display: inline-flex; align-items: center; gap: 7px; }
.nav-login .ic { width: 16px; height: 16px; }
.btn-dark { background: var(--ink); color: var(--on-ink); }
@media (hover: hover) { .btn-dark:hover:not(:disabled) { background: #333; } }
/* .btn-light has a hard light background in both themes, so its text stays dark. */
.btn-light { background: #F5F5F3; color: #111111; }
@media (hover: hover) { .btn-light:hover:not(:disabled) { background: #fff; } }
.btn-ghost { color: var(--ink); border-color: var(--line); background: var(--card); }
@media (hover: hover) { .btn-ghost:hover { border-color: #C9C9C5; } }
.btn-ghost-light { color: #F5F5F3; border-color: #3A3A37; background: transparent; }
@media (hover: hover) { .btn-ghost-light:hover { border-color: #75756F; } }
.btn-outline { color: var(--ink); border-color: var(--line); background: transparent; }
.btn:disabled { cursor: not-allowed; opacity: .8; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.logo { display: block; border-radius: 4px; }
.logo-mark { width: 43px; height: 24px; color: var(--ink); }
.logo-mark-sm { width: 32px; height: 18px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { display: inline-flex; align-items: center; gap: 7px; }
.nav-links .ic { width: 16px; height: 16px; color: var(--subtle); transition: color 150ms ease; }
.nav-links a[aria-current] .ic { color: var(--ink); }
@media (hover: hover) { .nav-links a:hover .ic { color: var(--ink); } }
.nav-links a[aria-current] { color: var(--ink); }
.nav-links a, .nav-login { font-size: 15px; text-decoration: none; color: var(--text); transition: color 150ms ease; }
@media (hover: hover) { .nav-links a:hover, .nav-login:hover { color: var(--ink); } }
.nav-actions { display: flex; align-items: center; gap: 22px; }

/* Theme toggle: flips between light and dark, saved in localStorage. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px; border: none;
  background: transparent; color: var(--subtle); cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
@media (hover: hover) { .theme-toggle:hover { background: var(--stage); color: var(--ink); } }
.theme-toggle .ic { width: 18px; height: 18px; }
/* The sun shows in dark mode (press to go light), the moon in light mode. */
.theme-toggle .ic-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

/* Type scale. Familjen Grotesk 600 carries every headline, Switzer everything else. */
.display { font: 600 clamp(52px, 6.6vw, 92px)/1 var(--display); letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.h2 { font: 600 clamp(36px, 4.2vw, 54px)/1.06 var(--display); letter-spacing: -0.028em; color: var(--ink); text-wrap: balance; }
.h2-light { color: var(--night-ink); }
.body { margin-top: 20px; max-width: 540px; font-size: 18px; color: var(--text); text-wrap: pretty; }
.body-light { color: var(--night-text); }

/* Hero: headline and buttons on the left, the pitch on the right, the product underneath. */
.hero { padding-top: 88px; }
.hero-top { display: grid; grid-template-columns: 1.7fr 1fr; gap: 48px 72px; align-items: end; }
.lede { font-size: 19px; line-height: 1.55; color: var(--text); max-width: 440px; text-wrap: pretty; }
.cta-row { display: flex; align-items: center; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
.cta-note { margin-top: 16px; font-size: 14.5px; color: var(--subtle); max-width: 440px; }
.hero-side { padding-bottom: 6px; }

.hero-visual { position: relative; margin-top: 96px; }
.note { position: absolute; right: 7%; top: -74px; display: flex; align-items: flex-start; gap: 4px; font: 500 26px/1 var(--hand); color: var(--text); transform: rotate(-3deg); }
.note-arrow { width: 56px; height: 46px; margin-top: 10px; }

.app { background: var(--night); color: var(--night-text); border-radius: 16px; overflow: hidden; font: 400 12.5px/1.5 var(--mono); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 40px 80px -40px rgba(0,0,0,.45); }
.app-bar { display: flex; align-items: center; gap: 18px; padding: 13px 18px; border-bottom: 1px solid var(--night-line); }
.lights { display: flex; gap: 7px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; background: var(--night-line); }
.app-crumb { display: flex; align-items: center; gap: 10px; font: 500 13.5px/1 var(--sans); color: var(--night-ink); }
.app-mark { width: 25px; height: 14px; color: var(--night-ink); }
.app-user { margin-left: auto; font-size: 11.5px; color: var(--night-subtle); }
.app-body { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; padding: 18px; }
.app-col { display: grid; gap: 14px; align-content: start; }
.srv, .run { background: var(--night-2); border: 1px solid var(--night-line); border-radius: 10px; padding: 16px 18px; }
.srv-head { display: flex; align-items: center; gap: 10px; color: var(--night-subtle); }
.srv-head strong, .proj-name strong, .run-title span:first-child { font: 600 13.5px/1.3 var(--sans); color: var(--night-ink); }
.srv-meta { font-size: 11.5px; }
.srv-state { margin-left: auto; color: var(--ok-soft); font-size: 11.5px; }
.meter { height: 6px; margin-top: 16px; background: var(--night-line); border-radius: 3px; overflow: hidden; }
.meter span { display: block; height: 100%; width: var(--w); background: var(--blue); border-radius: 3px; transform-origin: left; animation: grow-x 1.2s var(--ease) .2s both; }
.meter-l { display: flex; justify-content: space-between; margin-top: 9px; font-size: 11.5px; color: var(--night-subtle); }
.projects { border: 1px solid var(--night-line); border-radius: 10px; overflow: hidden; }
.proj { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--night-2); }
.proj + .proj { border-top: 1px solid var(--night-line); }
.proj-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.proj-name strong { display: block; }
.proj-name span { font-size: 11.5px; color: var(--night-subtle); }
.run-title { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 11.5px; }
.run-title .muted { color: var(--night-subtle); }
.run ol { display: grid; gap: 12px; }
.run li { display: flex; align-items: center; gap: 11px; color: var(--night-text); opacity: .35; animation: fade-in .3s var(--d) forwards; }
.run .t { margin-left: auto; font-size: 11.5px; color: var(--night-subtle); }
.r1 { --d: .5s; } .r2 { --d: 1.3s; } .r3 { --d: 1.9s; } .r4 { --d: 2.5s; } .r5 { --d: 3.1s; } .r6 { --d: 3.6s; }
.proj-live-now { --live: 3.9s; }
.proj-live-now .proj-dot { background: var(--warn); animation: to-ok-bg .3s var(--live) forwards; }

/* Shared status bits (dark and light mocks) */
.pill { margin-left: auto; display: inline-grid; padding: 4px 10px; border-radius: 999px; font: 400 11px/1.3 var(--mono); background: rgba(47,180,99,.14); color: var(--ok-soft); white-space: nowrap; }
.pill-deploy { background: rgba(233,162,59,.16); color: var(--warn); animation: to-live .3s var(--ease) var(--live, 3.6s) forwards; }
.pill-t { grid-area: 1 / 1; text-align: center; }
.pill-t1 { animation: fade-out .2s var(--live, 3.6s) forwards; }
.pill-t2 { opacity: 0; animation: fade-in .3s calc(var(--live, 3.6s) + .1s) forwards; }
.tick { position: relative; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--night-line); flex: none; animation: tick-done .25s var(--d, 0s) forwards; }
.tick::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 3.5px; height: 7px; border-right: 1.7px solid #fff; border-bottom: 1.7px solid #fff; transform: rotate(45deg); opacity: 0; animation: fade-in .2s var(--d, 0s) forwards; }
.tick-on { background: var(--ok); border-color: var(--ok); }
.tick-on::after { opacity: 1; animation: none; }

/* Stack: a calm, static wall of what ox runs. */
.stack { margin-top: clamp(56px, 7vw, 80px); }
.stack > p { font-size: 14.5px; color: var(--subtle); margin-bottom: 18px; }
.stack-list { display: flex; flex-wrap: wrap; gap: 10px; }
.stack-list li { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 14.5px; font-weight: 500; color: #555552; white-space: nowrap; }
.stack-list .ic { width: 16px; height: 16px; color: #72726E; }

/* Sections */
.section { padding-top: clamp(104px, 12vw, 168px); }
.section-intro { max-width: 720px; margin-bottom: 56px; }
.see-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: #C9C9C5; text-underline-offset: 4px; transition: text-decoration-color 150ms ease; }
@media (hover: hover) { .see-all:hover { text-decoration-color: currentColor; } }
.see-all .ic { width: 16px; height: 16px; }
.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.split-top { align-items: start; }

/* Bills */
.bills { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bill { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px 20px; }
.bill-title { font-size: 14px; font-weight: 500; color: var(--subtle); margin-bottom: 14px; }
.bill ul { display: grid; gap: 12px; }
.bill li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.bill li span:last-child { font: 400 13.5px/1.6 var(--mono); color: var(--ink); white-space: nowrap; }
.bill-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--subtle); }
.bill-total strong { font: 300 32px/1 var(--sans); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bill-ox { background: var(--night); border-color: var(--night); color: var(--night-text); }
.bill-ox .bill-title, .bill-ox .bill-total { color: var(--night-subtle); }
.bill-ox .bill-total { border-color: var(--night-line); }
.bill-ox li span:last-child, .bill-ox .bill-total strong { color: #F5F5F3; }
.fine { grid-column: 1 / -1; font-size: 13.5px; color: var(--subtle); }

/* Showcase */
.showcase { display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px; align-items: stretch; }
/* Every row is a visible control: a quiet tinted card, a stronger one when open.
   Mixing in --ink tints toward black in light and toward white in dark. */
.sc-tabs {
  --tab-bg: color-mix(in srgb, var(--ink) 2%, var(--card));
  --tab-hover: var(--card);
  --tab-on: var(--card);
  --tab-line: var(--line);
  --tab-on-line: color-mix(in srgb, var(--ink) 20%, var(--line));
  display: grid; gap: 8px; align-content: start;
}
:root[data-theme="dark"] .sc-tabs {
  --tab-bg: color-mix(in srgb, var(--ink) 3%, var(--card));
  --tab-hover: color-mix(in srgb, var(--ink) 6%, var(--card));
  --tab-on: color-mix(in srgb, var(--ink) 8%, var(--card));
  --tab-line: color-mix(in srgb, var(--ink) 9%, var(--line));
  --tab-on-line: color-mix(in srgb, var(--ink) 26%, var(--line));
}
.sc-tab { position: relative; display: grid; gap: 8px; width: 100%; text-align: left; padding: 13px 14px; border: 1px solid var(--tab-line); border-radius: 12px; background: var(--tab-bg); cursor: pointer; overflow: hidden; -webkit-user-select: none; user-select: none; touch-action: manipulation; transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms var(--ease); }
.sc-tab strong { display: flex; align-items: center; gap: 12px; font: 500 16px/1.3 var(--sans); color: var(--text); transition: color 150ms ease; }
.sc-chip { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--subtle); transition: background-color 200ms ease, color 200ms ease; }
.sc-chip .ic { width: 17px; height: 17px; }
.sc-chev { flex: none; width: 15px; height: 15px; margin-left: auto; color: var(--faint); opacity: 0; transform: translateX(-4px); transition: opacity 150ms ease, transform 200ms var(--ease), color 150ms ease; }
.sc-tab > span { padding-left: 44px; font-size: 15px; line-height: 1.5; color: var(--subtle); display: none; }
@media (hover: hover) and (pointer: fine) {
  .sc-tab:hover { background: var(--tab-hover); border-color: var(--tab-on-line); transform: translateY(-1px); }
  .sc-tab:hover strong { color: var(--ink); }
  .sc-tab:hover .sc-chip { color: var(--ink); }
  .sc-tab:hover .sc-chev { opacity: 1; transform: none; }
}
.sc-tab:active { transform: scale(.99); }
.sc-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 12px; }
.sc-tab[aria-selected="true"] { background: var(--tab-on); border-color: var(--tab-on-line); box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 10px 24px -16px rgb(0 0 0 / .22); transform: none; }
.sc-tab[aria-selected="true"] strong { color: var(--ink); }
.sc-tab[aria-selected="true"] .sc-chip { background: var(--ink); color: var(--on-ink); }
.sc-tab[aria-selected="true"] .sc-chev { opacity: 1; transform: none; color: var(--ink); }
.sc-tab[aria-selected="true"] > span { display: block; animation: fade-up .4s var(--ease) both; }
.sc-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: color-mix(in srgb, var(--ink) 8%, transparent); opacity: 0; }
.sc-progress::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.showcase.is-playing .sc-tab[aria-selected="true"] .sc-progress { opacity: 1; }
.showcase.is-playing .sc-tab[aria-selected="true"] .sc-progress::after { animation: grow-x var(--dur, 7s) linear forwards; }
.showcase.is-paused .sc-progress::after { animation-play-state: paused !important; }

.sc-stage { position: relative; display: grid; place-items: center; min-height: 520px; padding: 40px; border-radius: 18px; background: var(--stage); overflow: hidden; }
.scene { position: relative; width: min(500px, 100%); display: grid; gap: 14px; font: 400 13px/1.5 var(--mono); color: var(--text); animation: scene-in .5s var(--ease) both; }
.scene[hidden] { display: none; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; }
.card-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 600 15px/1.3 var(--sans); color: var(--ink); margin-bottom: 14px; }
.card-title .muted { font: 400 12px/1.3 var(--mono); }
.rows { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); }
.row .muted { font-size: 12px; }
.row-btn { font: 500 12.5px/1 var(--sans); padding: 7px 10px; border-radius: 6px; background: var(--ink); color: var(--on-ink); }
.row-btn.ghost { background: transparent; color: var(--subtle); border: 1px solid var(--line); }
.toast { justify-self: center; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font: 500 14px/1 var(--sans); opacity: 0; animation: fade-up .45s var(--ease) var(--t) forwards; }
.scene .pill { background: rgba(47,180,99,.12); color: var(--ok-ink); }
.scene .pill-deploy { background: rgba(233,162,59,.16); color: #95600F; animation-name: to-live-light; }
/* The light scene's dark greens and amber are unreadable on the dark cards. */
:root[data-theme="dark"] .scene .pill, :root[data-theme="dark"] .scene .now, :root[data-theme="dark"] .site-h em { color: var(--ok-soft); }
:root[data-theme="dark"] .zero-n { color: var(--ok-soft) !important; }
:root[data-theme="dark"] .scene .pill-deploy { color: var(--warn); animation-name: to-live; }
.scene .tick { border-color: #CFCFCA; }

/* Scene: push */
.mini-term { justify-self: start; padding: 10px 14px; border-radius: 9px; background: var(--ink); color: var(--on-ink); animation: fade-up .4s var(--ease) .2s both; }
.mini-term .muted { color: var(--night-subtle); }
.browser { border-radius: var(--radius); overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.browser-bar { display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.browser-bar .lights i { background: #DADAD6; }
.url { flex: 1; max-width: 240px; margin-inline: auto; text-align: center; padding: 4px 10px; border-radius: 6px; background: var(--stage); font-size: 12px; color: var(--subtle); }
.browser-page { display: grid; padding: 34px 28px 38px; }
.site { grid-area: 1 / 1; }
.site-kicker { font: 500 12.5px/1 var(--sans); color: var(--subtle); margin-bottom: 12px; }
.site-h { font: 300 36px/1.02 var(--sans); color: var(--ink); letter-spacing: -0.035em; }
.site-h em { font-style: normal; color: var(--ok-ink); }
.site-btn { display: inline-block; margin-top: 18px; padding: 9px 14px; border-radius: 7px; background: var(--ink); color: var(--on-ink); font: 500 13px/1 var(--sans); }
.site-v1 { animation: fade-out .25s 1.3s forwards; }
.site-v2 { opacity: 0; animation: fade-up .4s var(--ease) 1.45s forwards; }
.scene-push .toast { --t: 1.7s; }

/* Scene: zero downtime */
.zero-head { display: flex; gap: 40px; margin-bottom: 18px; }
.zero-head p { display: grid; gap: 6px; font-size: 12px; }
.zero-head strong { font: 600 24px/1 var(--sans); letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.zero-n { color: var(--ok-ink) !important; }
.count { counter-reset: n var(--n); animation: count-up 1.6s var(--ease) .15s both; }
.js .count { font-size: 0 !important; line-height: 0; }
.js .count::after { content: counter(n); font: 600 24px/1 var(--sans); }
@keyframes count-up { from { --n: 0; } to { --n: 1204; } }
.bars { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 170px; padding-top: 26px; }
.bars i { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; background: #B9D6FA; transform-origin: bottom; animation: grow-y .4s var(--ease) calc(var(--i) * 45ms) both; }
.bars i.new { background: var(--bar); }
.switch-line { position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); border-left: 1.5px dashed var(--ink); opacity: 0; animation: fade-in .3s .55s forwards; }
.switch-line span { position: absolute; top: 0; left: 8px; white-space: nowrap; font-size: 11.5px; color: var(--ink); }
.bars-legend { display: flex; gap: 20px; margin-top: 14px; font-size: 12px; color: var(--subtle); }
.bars-legend span { display: flex; align-items: center; gap: 8px; }
@media (max-width: 560px) {
  /* The label wraps beside the line instead of running past the card. */
  .switch-line span { width: 12ch; white-space: normal; line-height: 1.3; }
}
.sw { width: 10px; height: 10px; border-radius: 3px; }
.sw-old { background: #B9D6FA; } .sw-new { background: var(--bar); }

/* Scene: backups */
.scene-backup .row { animation: fade-up .35s var(--ease) both; }
.scene-backup .row:nth-child(2) { animation-delay: .1s; } .scene-backup .row:nth-child(3) { animation-delay: .2s; }
.row-pick { animation: fade-up .35s var(--ease) both, pick .4s var(--ease) .5s forwards !important; }
.row-pick .row-btn { animation: press .3s var(--ease) .55s; }
.steps-mini { display: grid; gap: 10px; margin-top: 18px; padding: 4px 12px; }
.steps-mini li { display: flex; align-items: center; gap: 10px; opacity: .35; animation: fade-in .3s var(--d) forwards; }
.s1 { --d: .85s; } .s2 { --d: 1.35s; } .s3 { --d: 1.85s; }

/* Scene: previews */
.scene-preview .row { opacity: 0; animation: fade-up .4s var(--ease) var(--t) forwards; }
.b1 { --t: .1s; } .b2 { --t: .3s; } .b3 { --t: .55s; --live: 1.6s; }
.row-new { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.branch { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.branch .ic { width: 15px; height: 15px; color: var(--subtle); }
.card-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag { padding: 5px 10px; border-radius: 999px; background: var(--stage); font-size: 11.5px; color: var(--text); opacity: 0; animation: fade-up .35s var(--ease) forwards; }
.tag:nth-child(1) { animation-delay: 1.9s; } .tag:nth-child(2) { animation-delay: 2.05s; } .tag:nth-child(3) { animation-delay: 2.2s; }

/* Scene: undo */
.scene-undo .row { grid-template-columns: 1fr auto 44px; }
.scene-undo .row > span:first-child .muted { margin-left: 8px; }
.bad { font-size: 11.5px; color: var(--danger-fg); padding: 3px 8px; border: 1px solid var(--danger-border); border-radius: 999px; background: var(--danger-bg); }
.now { justify-self: end; font: 400 11px/1 var(--mono); padding: 5px 8px; border-radius: 999px; background: rgba(47,180,99,.12); color: var(--ok-ink); }
.now-a { animation: fade-out .2s .95s forwards; }
.now-b { opacity: 0; animation: fade-in .25s 1.05s forwards; }
.v14 { animation: dim .35s .95s forwards; }
.v13 .row-btn { animation: press .3s var(--ease) .7s, fade-out .2s .95s forwards; }
.v13 { animation: pick .4s var(--ease) 1s forwards; }
.scene-undo .toast { --t: 1.25s; }

/* Scene: AI */
.chat { display: grid; gap: 12px; }
.bubble { max-width: 92%; padding: 11px 14px; border-radius: 14px; opacity: 0; animation: fade-up .4s var(--ease) var(--t, .1s) forwards; }
.bubble-you { justify-self: end; background: var(--ink); color: var(--on-ink); font: 400 15px/1.4 var(--sans); border-bottom-right-radius: 4px; }
.bubble-ai { background: var(--stage); color: var(--text); border-bottom-left-radius: 4px; }
.bubble-ai b { font-weight: 400; color: var(--ink); background: #fff; padding: 1px 5px; border-radius: 4px; }
.bubble-code { max-width: 100%; background: var(--night); color: #E8E8E4; font: 400 12.5px/1.8 var(--mono); white-space: pre; overflow-x: auto; }
.bubble-code code { background: none; padding: 0; color: inherit; font: inherit; }
.bubble-code [class^="l"] { opacity: 0; animation: fade-in .25s var(--d) forwards; }
.a1 { --t: .5s; } .a2 { --t: .95s; } .a3 { --t: 2.1s; }
.bubble-code .l1 { --d: 1.15s; } .bubble-code .l2 { --d: 1.3s; } .bubble-code .l3 { --d: 1.45s; } .bubble-code .l4 { --d: 1.6s; } .bubble-code .l5 { --d: 1.75s; }
.c { color: #8A8A84; } .s { color: var(--ok-soft); } .k { color: #8EC1FF; }

/* Showcase depth (DECISIONS 2026-10-08, calmed 2026-10-09): a plain stage
   with a faint neutral grid and grain, and the scene fragments lit from
   the top left with neutral tinted shadows, matching the console
   illustrations. Nothing glows. Static layers only; the scene timing
   above is unchanged. */
.sc-stage {
  --sc-grid: rgba(30,41,59,.12);
  --sc-tint: 30,41,59; --sc-tint-a: .55; --sc-hi: rgba(255,255,255,.95); --sc-top: rgba(255,255,255,0);
  --sc-grain: .05; --sc-grain-mode: multiply;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
  background: var(--stage);
}
:root[data-theme="dark"] .sc-stage {
  --sc-grid: rgba(255,255,255,.07);
  --sc-tint: 1,3,12; --sc-tint-a: 1; --sc-hi: rgba(255,255,255,.07); --sc-top: rgba(255,255,255,.035);
  --sc-grain: .09; --sc-grain-mode: overlay;
}
.sc-stage::before, .sc-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sc-stage::before { background-image: linear-gradient(var(--sc-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sc-grid) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, rgba(0,0,0,.55), transparent 80%); mask-image: radial-gradient(60% 70% at 50% 50%, rgba(0,0,0,.55), transparent 80%); opacity: .55; }
.sc-stage::after { opacity: var(--sc-grain); mix-blend-mode: var(--sc-grain-mode); -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
.scene .card, .scene .browser {
  border-color: color-mix(in srgb, var(--ink) 8%, var(--line));
  background: linear-gradient(180deg, var(--sc-top), transparent 40%), var(--card);
  box-shadow:
    inset 0 1px 0 var(--sc-hi),
    0 1px 2px rgba(var(--sc-tint), calc(.22 * var(--sc-tint-a))),
    0 8px 18px -6px rgba(var(--sc-tint), calc(.42 * var(--sc-tint-a))),
    0 26px 44px -18px rgba(var(--sc-tint), calc(.55 * var(--sc-tint-a)));
}
.scene .browser-bar { background: linear-gradient(180deg, var(--sc-top), transparent), color-mix(in srgb, var(--ink) 3%, var(--card)); }
.scene .row { background: color-mix(in srgb, var(--ink) 2%, var(--card)); border-color: color-mix(in srgb, var(--ink) 7%, var(--line)); box-shadow: inset 0 1px 0 var(--sc-hi), 0 1px 2px rgba(var(--sc-tint), calc(.12 * var(--sc-tint-a))); }
.scene .mini-term, .scene .toast { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(var(--sc-tint), calc(.22 * var(--sc-tint-a))), 0 10px 22px -8px rgba(var(--sc-tint), calc(.45 * var(--sc-tint-a))); }
.scene .pill, .scene .now { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 24%, transparent); }

/* How: a real sequence, so it keeps its step numbers, small and inline. */
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(40px, 5vw, 56px); }
.how-ic { width: 28px; height: 28px; color: var(--ink); margin-bottom: 28px; }
.how h3 { display: grid; gap: 8px; font: 500 20px/1.3 var(--sans); color: var(--ink); letter-spacing: -0.01em; margin-bottom: 10px; }
.how-n { font: 400 12.5px/1 var(--mono); color: var(--subtle); letter-spacing: 0; }
.how p { font-size: 16px; color: var(--subtle); max-width: 34ch; }
.how-cmd { display: block; width: fit-content; max-width: 100%; margin-top: 16px; padding: 8px 12px; border-radius: 8px; font-size: 12px; line-height: 1.6; white-space: pre; overflow-x: auto; }

/* AI card */
.ai-card { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 64px); align-items: center; padding: clamp(40px, 6vw, 72px) clamp(22px, 5vw, 64px); border-radius: 22px; background: var(--night); color: var(--night-text); }
.ai-card code { background: #232322; color: #F5F5F3; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.ai-status { min-height: 22px; margin-top: 14px; font-size: 14px; color: var(--ok-soft); }
.ai-status.is-error { justify-self: start; width: fit-content; padding: 2px 10px; border: 1px solid var(--danger-border); border-radius: 6px; background: var(--danger-bg); color: var(--danger-fg); }
.ai-works { margin-top: 6px; font-size: 14px; color: var(--night-subtle); }
.ai-files { display: grid; gap: 16px; min-width: 0; }
.ai-file { background: var(--night-2); border: 1px solid var(--night-line); border-radius: 14px; overflow: hidden; }
.ai-file figcaption { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--night-line); font: 400 12px var(--mono); color: var(--night-text); }
.ai-file figcaption > span:first-child { display: flex; align-items: center; gap: 8px; }
.ai-file figcaption .ic { width: 15px; height: 15px; color: var(--night-subtle); }
.ai-file figcaption .muted { color: var(--night-subtle); }
.ai-file pre { padding: 20px 18px; overflow-x: auto; font: 400 13px/1.85 var(--mono); color: #E8E8E4; }
.ai-file code { background: none; padding: 0; color: inherit; font: inherit; }

/* Copy button: both labels share one grid cell, so the button never changes width. */
.btn-copy .swap-ic, .btn-copy .swap-label { display: inline-grid; }
.btn-copy .swap-ic > *, .btn-copy .swap-label > * { grid-area: 1 / 1; transition-property: opacity, transform; transition-duration: 200ms; transition-timing-function: var(--ease); }
.btn-copy .swap-label > * { text-align: left; }
.btn-copy .ic-b, .btn-copy .label-b { opacity: 0; transform: scale(.6); }
.btn-copy .label-b { transform: translateY(4px); }
.btn-copy.is-copied .ic-a, .btn-copy.is-copied .label-a { opacity: 0; transform: scale(.6); }
.btn-copy.is-copied .label-a { transform: translateY(-4px); }
.btn-copy.is-copied .ic-b, .btn-copy.is-copied .label-b { opacity: 1; transform: none; }
.btn-copy.is-copied .ic-b { color: var(--ok-ink); }

/* Included: icon beside the heading, no cards. */
.included { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(32px, 4vw, 44px) 36px; }
.included li { display: grid; grid-template-columns: 22px 1fr; gap: 6px 14px; align-content: start; }
.included .ic { grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; color: var(--ink); }
.included strong, .next strong { font: 500 17px/1.35 var(--sans); color: var(--ink); }
.included span, .next span { font-size: 15.5px; color: var(--subtle); text-wrap: pretty; }

.next { display: grid; gap: 28px; }
.next li { display: grid; gap: 4px; }

/* Compare */
.table-wrap { overflow-x: auto; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.compare { width: 100%; border-collapse: collapse; min-width: 700px; font-size: 16px; }
.compare th, .compare td { padding: 18px 20px; text-align: left; }
.compare tbody tr + tr > * { border-top: 1px solid var(--line); }
.compare thead th { font: 500 14px/1.3 var(--sans); color: var(--subtle); padding-top: 22px; }
.compare tbody th { font-weight: 500; color: var(--ink); }
/* On narrow screens the table scrolls sideways; the question column stays put. */
.compare th:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
.compare td { color: var(--subtle); }
.compare .col-ox { background: var(--night); color: var(--night-ink); font-weight: 500; }
.compare tbody tr + tr > .col-ox { border-top-color: var(--night-line); }

/* Proof */
.quote { margin-top: 48px; max-width: 520px; }
.quote p { font: 400 19px/1.5 var(--sans); color: var(--ink); text-wrap: pretty; }
.quote p::before { content: "“"; } .quote p::after { content: "”"; }
.quote figcaption { margin-top: 12px; font-size: 14.5px; color: var(--subtle); }
.report { background: var(--night); color: var(--night-text); border-radius: 16px; padding: 24px 26px; font: 400 13px/1.5 var(--mono); }
.report-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--night-line); }
.report-head > span:first-child { display: flex; align-items: center; gap: 8px; color: #F5F5F3; }
.report-head .ic { width: 16px; height: 16px; color: var(--ok-soft); }
.report-head .muted { color: var(--night-subtle); }
.report-big { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 32px 0 28px; font-family: var(--sans); }
.report-big strong { font: 300 64px/1 var(--sans); letter-spacing: -0.04em; color: #F5F5F3; font-variant-numeric: tabular-nums; }
.report-big span { font-size: 17px; color: var(--night-text); }
.report-list { display: grid; gap: 12px; }
.report-list li { display: flex; align-items: center; gap: 12px; }
.report-list .ic { width: 16px; height: 16px; color: var(--ok-soft); }
.report-id { margin-top: 28px; font-size: 12px; color: var(--night-subtle); }

/* Pricing */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.plan-lead { font-size: 13px; font-weight: 500; color: var(--subtle); margin: 4px 0 10px; }
.plan-pro .plan-lead { color: var(--night-subtle); }
.plan li b { font-weight: 500; color: var(--ink); }
.plan-pro li b { color: #F5F5F3; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px 28px; }
.plan h3 { font: 500 16px/1.3 var(--sans); color: var(--ink); }
.price { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 6px; flex-wrap: wrap; }
.price strong { font: 300 64px/1 var(--sans); color: var(--ink); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.price span { font-size: 15px; color: var(--subtle); }
.plan-sub { font-size: 15.5px; color: var(--subtle); margin-bottom: 26px; }
.plan ul { display: grid; gap: 12px; margin-bottom: 32px; flex: 1; align-content: start; }
.plan li { position: relative; padding-left: 26px; font-size: 15.5px; }
.plan li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 5px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7; }
.plan .btn { width: 100%; }
.plan-soon { margin-top: 10px; text-align: center; font-size: 13px; color: var(--subtle); }
.plan-pro .plan-soon { color: var(--night-subtle); }
.plan-pro li a { text-decoration: underline; }
.plan-pro { background: var(--night); border-color: var(--night); color: var(--night-text); }
.plan-pro h3, .plan-pro .price strong { color: #F5F5F3; }
.plan-pro .price span, .plan-pro .plan-sub { color: var(--night-subtle); }
.badge { position: absolute; top: 28px; right: 24px; padding: 5px 10px; border-radius: 999px; background: #232322; color: var(--ok-soft); font: 400 12px/1.2 var(--mono); }
/* The ox leaning on the Pro card. Its body is clipped at the card's top edge (y=84 in the
   SVG) so it rises from behind the card; the forelegs are drawn over it. 132px = 1.1x the viewBox. */
.ox-buddy { position: absolute; left: 26px; top: -92px; pointer-events: none; }
.ox-fig { width: 132px; height: 114px; overflow: visible; }
.ox-fig * { transform-box: view-box; }
/* The ox's own palette: --ink flips to near-white in dark mode, which would erase its outline. */
.ox-fig { --ox-line: #111111; --ox-body: #FFFFFF; --ox-horn: #F1E2C2; --ox-muzzle: #F4D6C8; --ox-pink: #F2C2B3; --ox-cheek: #F2A594; --ox-hoof: #3A3A37; }
html[data-theme="dark"] .ox-fig { --ox-line: #0B1226; --ox-body: #E2E8F0; --ox-horn: #D9BF8C; --ox-muzzle: #E8BFB2; --ox-pink: #E3A99A; --ox-cheek: #E58B7A; --ox-hoof: #334155; }
.ox-skin { fill: var(--ox-body); stroke: var(--ox-line); stroke-width: 2; stroke-linejoin: round; }
.ox-horn { fill: var(--ox-horn); stroke: var(--ox-line); stroke-width: 2; stroke-linejoin: round; }
.ox-muzzle { fill: var(--ox-muzzle); stroke: var(--ox-line); stroke-width: 2; }
.ox-pink { fill: var(--ox-pink); }
.ox-cheek { fill: var(--ox-cheek); opacity: .55; }
.ox-ink { fill: var(--ox-line); }
.ox-line { fill: none; stroke: var(--ox-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Forelegs are round-capped strokes: an ink stroke under a narrower white one draws an outlined limb. */
.ox-leg path { fill: none; stroke-linecap: round; }
.ox-leg-line { stroke: var(--ox-line); stroke-width: 15; }
.ox-leg-fill { stroke: var(--ox-body); stroke-width: 11; }
.ox-hoof { stroke: var(--ox-hoof); stroke-width: 11; }
.ox-note { position: absolute; left: 150px; top: 14px; display: flex; align-items: flex-start; gap: 2px; white-space: nowrap; font: 500 25px/1 var(--hand); color: var(--text); transform: rotate(-4deg); }
.ox-note-arrow { width: 44px; height: 36px; margin-top: 12px; }

.ox-head { transform-origin: 60px 60px; animation: ox-tilt 5.5s ease-in-out infinite alternate; }
.ox-blink { transform-origin: 60px 36px; animation: ox-blink 4.8s infinite; }
.ox-ear-l { transform-origin: 38px 36px; animation: ox-flick-l 7s ease-in-out infinite; }
.ox-ear-r { transform-origin: 82px 36px; animation: ox-flick-r 7s ease-in-out 2.4s infinite; }
.ox-tap { transform-origin: 99px 81px; animation: ox-tap 3.6s ease-in-out 2s infinite; }
.ox-joy { transform-origin: 60px 84px; }
.ox-eyes { transition: transform 180ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .plan-pro:hover .ox-joy { animation: ox-hop 520ms var(--ease); }
}
/* Entrance, once the Pro card scrolls in: rise, drop the forelegs on the edge, then speak. */
.js .plan-pro.in .ox-rise { animation: ox-rise 760ms var(--ease) 380ms backwards; }
.js .plan-pro.in .ox-paws { animation: ox-paws 320ms var(--ease) 900ms backwards; }
.js .plan-pro.in .ox-note { animation: ox-note 420ms var(--ease) 1250ms backwards; }
@keyframes ox-rise { from { transform: translateY(90px); } 72% { transform: translateY(-3px); } to { transform: none; } }
@keyframes ox-paws { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes ox-note { from { opacity: 0; transform: translateY(6px) rotate(-4deg); } to { opacity: 1; transform: rotate(-4deg); } }
@keyframes ox-tilt { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
@keyframes ox-blink { 0%, 93%, 97%, 100% { transform: none; } 95% { transform: scaleY(.1); } }
@keyframes ox-flick-l { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(14deg); } 96% { transform: rotate(-4deg); } }
@keyframes ox-flick-r { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(-14deg); } 96% { transform: rotate(4deg); } }
@keyframes ox-tap { 0%, 70%, 100% { transform: none; } 76%, 88% { transform: rotate(9deg); } 82%, 94% { transform: none; } }
@keyframes ox-hop { 40% { transform: translateY(-6px) scaleY(1.03); } 70% { transform: translateY(1px) scaleY(.98); } }

.plans-fine { margin-top: 20px; font-size: 15px; color: var(--subtle); }
.plans-fine strong { font-weight: 500; color: var(--ink); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 500 17.5px/1.35 var(--sans); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat; color: var(--subtle); transition: transform 200ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 40px 24px 0; font-size: 16px; color: var(--subtle); animation: fade-up .35s var(--ease); }
.faq details p:has(+ p) { padding-bottom: 12px; }
.faq details p:has(+ ul) { padding-bottom: 6px; }
.faq details p strong { font-weight: 500; color: var(--ink); }
.faq details ul { display: grid; gap: 6px; padding: 0 40px 20px 20px; list-style: disc; font-size: 16px; color: var(--subtle); animation: fade-up .35s var(--ease); }

/* Final */
.final { position: relative; margin-top: 180px; background: var(--night); color: var(--night-text); overflow: hidden; isolation: isolate; }
.mountains { position: absolute; inset: auto 0 0 0; width: 100%; height: 72%; z-index: -1; }
.final-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: end; padding: clamp(96px, 11vw, 140px) 0 clamp(80px, 9vw, 120px); }
.final-mark { width: 175px; height: 97px; color: #F5F5F3; }
.final-tag { margin-top: 32px; font: 300 26px/1.25 var(--sans); letter-spacing: -0.02em; color: #F5F5F3; }
.cta-note-dark { color: var(--night-subtle); }

/* Footer */
.footer { background: var(--night); color: var(--night-subtle); border-top: 1px solid var(--night-line); }
.footer-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px 56px; flex-wrap: wrap; padding-block: 44px calc(40px + env(safe-area-inset-bottom)); font-size: 14.5px; }
.footer-brand { display: grid; gap: 14px; }
.footer a.footer-love { display: inline-grid; grid-template-columns: auto auto auto; justify-content: start; align-items: start; gap: 8px; padding-block: 4px; font-size: 14px; line-height: 1.45; }
.footer-love .ic { width: 18px; height: 18px; margin-top: 2px; }
.footer-love .ic-go { opacity: .6; transition: transform 150ms ease, opacity 150ms ease; }
@media (prefers-reduced-motion: reduce) { .footer-love .ic-go { transition: none; } }
@media (hover: hover) { .footer-love:hover .ic-go { opacity: 1; transform: translate(2px, -2px); } .footer-love:hover span { text-decoration: underline; text-underline-offset: 3px; } }
.footer .logo-mark { color: #F5F5F3; }
.footer-cols { display: grid; grid-template-columns: repeat(5, auto); gap: 24px 64px; }
.footer-h { margin-bottom: 6px; font: 500 14px/20px var(--sans); color: #F5F5F3; }
.footer ul { display: grid; }
.footer a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; transition: color 150ms ease; }
.footer a[aria-current] { color: #F5F5F3; }
.footer a.footer-ext { gap: 8px; }
.footer-ext .ic { width: 16px; height: 16px; }
@media (hover: hover) { .footer a:hover { color: #F5F5F3; } }

/* Headline motion. Hero words rise out of a mask, then "own" gets a hand-drawn
   underline. Transforms only: the old blur and font-weight settle repainted
   every frame (see the 60fps-animation skill). Section headings behave the
   same; their final weight is set statically. */
.display em { font-style: normal; font-weight: 600; position: relative; white-space: nowrap; }
.display .w { display: inline-block; overflow: clip; overflow-clip-margin: .12em; vertical-align: top; padding-bottom: .06em; }
.display .w > span { display: inline-block; }
.display .ul { position: absolute; left: -2%; bottom: -.08em; width: 104%; height: .22em; overflow: visible; color: var(--ink); }
.display .ul path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .display .w > span { transform: translateY(105%); animation: word-in 1100ms var(--ease) forwards; animation-delay: calc(120ms + var(--i) * 90ms); }
.js .display .ul path { stroke-dashoffset: 1; animation: draw 700ms cubic-bezier(.6,0,.2,1) 1050ms forwards; }
@keyframes word-in { to { transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.reveal .h2 { font-weight: 600; }
/* Scroll reveal: only hidden when JS runs, so the page still reads without it. */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* Keyframes */
@keyframes fade-in { to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes scene-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tick-done { to { background: var(--ok); border-color: var(--ok); } }
@keyframes to-live { to { background: rgba(47,180,99,.14); color: var(--ok-soft); } }
@keyframes to-live-light { to { background: rgba(47,180,99,.12); color: var(--ok-ink); } }
@keyframes to-ok-bg { to { background: var(--ok); } }
@keyframes press { 50% { transform: scale(.95); } }
@keyframes pick { to { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: color-mix(in srgb, var(--ok) 7%, var(--card)); } }
@keyframes dim { to { opacity: .45; } }

/* Responsive */
@media (max-width: 1080px) {
  .showcase { grid-template-columns: 1fr; }
  /* A strip of compact rows that scrolls sideways; the scene below tells the rest. */
  .sc-tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 2px; padding: 2px 2px 6px; scrollbar-width: none; }
  .sc-tabs::-webkit-scrollbar { display: none; }
  .sc-tab { scroll-snap-align: start; padding: 8px 14px 8px 8px; border-radius: 999px; }
  .sc-tab strong { gap: 10px; font-size: 15px; white-space: nowrap; }
  .sc-chip { width: 28px; height: 28px; border-radius: 999px; }
  .sc-chip .ic { width: 15px; height: 15px; }
  .sc-chev, .sc-tab[aria-selected="true"] > span { display: none; }
  .sc-tab:focus-visible { border-radius: 999px; }
  .sc-progress { left: 18px; right: 18px; bottom: 3px; border-radius: 2px; }
  .sc-progress::after { border-radius: 2px; }
  .ai-card { grid-template-columns: 1fr; }
  .hero-top { grid-template-columns: 1.3fr 1fr; }
  .app-body { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .nav-links { display: none; }
  .hero { padding-top: 56px; }
  .hero-top, .split, .final-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { margin-top: 88px; }
  .note { right: 16px; top: -64px; font-size: 23px; }
  .plans { grid-template-columns: 1fr; max-width: 560px; }
  .plan-pro { margin-top: 88px; }
}
@media (max-width: 560px) {
  .nav-login { display: none; }
  .bills { grid-template-columns: 1fr; }
  .cta-row { flex-wrap: wrap; }
  .cta-row .btn { flex: 1 1 auto; }
  .srv-meta, .app-user { display: none; }
  .run li { font-size: 11.5px; }
  .sc-stage { padding: 20px 14px; min-height: 480px; }
  .ai-card { border-radius: 18px; }
  .ai-actions .btn { width: 100%; }
  .row { grid-template-columns: 1fr auto; }
  .row > .muted { display: none; }
  .scene-undo .row { grid-template-columns: 1fr auto 40px; }
  .scene-undo .bad { display: none; }
  .report { padding: 20px; }
  .report-big strong { font-size: 52px; }
  .badge { position: static; align-self: flex-start; margin-bottom: 16px; }
  .ox-buddy { left: 14px; }
  .ox-note { left: 140px; font-size: 22px; }
  .ox-note-arrow { display: none; }
}

/* Short landscape phones: the showcase stage shouldn't fill the screen. */
@media (max-height: 520px) and (orientation: landscape) {
  .sc-stage { min-height: 380px; }
  .hero { padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .js .reveal { opacity: 1; transform: none; }
  .sc-tab, .sc-tab:hover, .sc-tab:active, .sc-chev { transform: none; }
  .js .display .w > span { animation: none; transform: none; }
  .js .display .ul path { animation: none; stroke-dashoffset: 0; }
}

@media (max-width: 1080px) { .nav-links { gap: 20px; } .nav-links .ic { display: none; } }


/* ---------- Docs: a quiet sidebar and a reading column ---------- */
.docs { padding: clamp(40px, 6vw, 72px) 0 clamp(96px, 10vw, 140px); }
.docs-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.docs-nav { position: sticky; top: 92px; max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); overflow-y: auto; font-size: 14px; }
.docs-nav-label { display: flex; align-items: center; gap: 8px; font: 500 12px/16px var(--sans); color: var(--subtle); letter-spacing: .02em; margin-bottom: 12px; }
.docs-nav-label .ic { width: 15px; height: 15px; }
.docs-nav ul { display: grid; gap: 2px; border-left: 1px solid var(--line); }
.docs-nav li a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; border-left: 1px solid transparent; color: var(--subtle); text-decoration: none; transition: color 150ms ease, border-color 150ms ease; }
@media (hover: hover) { .docs-nav li a:hover { color: var(--ink); border-left-color: #C9C9C5; } }
.docs-nav code { background: none; padding: 0; font-size: .92em; color: inherit; }
.docs-skill { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-weight: 500; color: var(--ink); text-decoration: none; }
.docs-skill .ic { width: 16px; height: 16px; }

.prose { max-width: 720px; font-size: 16.5px; line-height: 1.7; color: var(--text); }
.prose > * + * { margin-top: 18px; }
.prose h1 { font: 600 clamp(38px, 4.4vw, 54px)/1.06 var(--display); letter-spacing: -0.028em; color: var(--ink); margin-bottom: 8px; }
.prose h1 + p { font-size: 19px; line-height: 1.6; }
.prose h2 { font: 600 clamp(24px, 2.4vw, 30px)/1.2 var(--display); letter-spacing: -0.018em; color: var(--ink); margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--line); scroll-margin-top: 88px; }
.prose h2 code, .prose h1 code { font-size: .82em; background: var(--stage); }
.prose h3 { font: 600 19px/1.3 var(--display); color: var(--ink); margin-top: 40px; scroll-margin-top: 88px; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { color: var(--ink); text-decoration-color: #C9C9C5; text-underline-offset: 3px; }
@media (hover: hover) { .prose a:hover { text-decoration-color: currentColor; } }
.prose ul { display: grid; gap: 10px; padding-left: 20px; list-style: disc; }
.prose ul ul { margin-top: 10px; list-style: circle; }
.prose li::marker { color: #B5B5B0; }
.prose code { overflow-wrap: anywhere; }

.doc-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.doc-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.doc-table th { font: 500 12px/16px var(--sans); color: var(--subtle); text-align: left; padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.doc-table td { padding: 12px 16px; vertical-align: top; }
.doc-table tr + tr td { border-top: 1px solid var(--line); }
.doc-table td:first-child { white-space: nowrap; color: var(--ink); }
.doc-table td code { overflow-wrap: normal; }

/* display: grid turns figcaption and pre into grid items, so the scrolling
   pre's long lines no longer push the max-content of the whole section:
   without it, .docs-grid's mobile track was as wide as the widest pre. */
.code { display: grid; border-radius: 12px; overflow: hidden; background: var(--night); color: var(--night-text); }
.code figcaption { font: 500 12px/16px var(--sans); color: var(--night-subtle); padding: 12px 18px; border-bottom: 1px solid var(--night-line); }
.code pre { margin: 0; padding: 16px 18px 18px; overflow-x: auto; font: 400 13.5px/1.7 var(--mono); }
.code code { background: none; padding: 0; color: inherit; font-size: inherit; }
.code .c { color: #7C7C76; } .code .k { color: #9CC3FF; } .code .s { color: #D9C9A3; }
/* The per-block copy button (docs.js wires it, on /docs and the posts). */
.code figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.code-copy, .code-wrap { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--night-line); border-radius: 6px; background: transparent; color: var(--night-subtle); font: 500 11.5px/1.4 var(--sans); cursor: pointer; transition: color 150ms ease, border-color 150ms ease; }
@media (hover: hover) { .code-copy:hover, .code-wrap:hover { color: #F5F5F3; border-color: #3A3A37; } }
.code-copy .ic, .code-wrap .ic { width: 13px; height: 13px; }
.code-copy.is-copied { color: var(--ok-soft); border-color: var(--ok); }

@media (max-width: 880px) {
  .docs-grid { grid-template-columns: 1fr; }
  .docs-nav { position: static; max-height: none; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
  .docs-nav ul { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); border-left: 0; }
  .docs-nav li a { padding-left: 0; border: 0; }
}

/* ---------- Blog: the index, the cards, and the post page. Colors come
   from the tokens. */
.blog-hero { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(32px, 4vw, 48px); }
.blog-hero .lede { margin-top: 24px; max-width: 520px; color: var(--subtle); }

/* The category filter: plain links to fixed, empty targets, so a click
   filters in place without a script and never scrolls the page. */
.filter-target { position: fixed; top: 0; left: 0; width: 0; height: 0; }
.blog-filter { margin-bottom: clamp(36px, 4vw, 52px); }
.blog-filter ul { display: flex; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font: 500 14px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.chip .ic { width: 15px; height: 15px; color: var(--subtle); transition: color 150ms ease; }
@media (hover: hover) { .chip:hover { border-color: color-mix(in srgb, var(--ink) 24%, var(--line)); color: var(--ink); } }
.chip-all,
.blog-index:has(#c-guides:target) .chip[data-cat="guides"],
.blog-index:has(#c-engineering:target) .chip[data-cat="engineering"],
.blog-index:has(#c-product:target) .chip[data-cat="product"],
.blog-index:has(#c-opinion:target) .chip[data-cat="opinion"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.blog-index:has(#c-guides:target) .chip[data-cat="guides"] .ic,
.blog-index:has(#c-engineering:target) .chip[data-cat="engineering"] .ic,
.blog-index:has(#c-product:target) .chip[data-cat="product"] .ic,
.blog-index:has(#c-opinion:target) .chip[data-cat="opinion"] .ic { color: var(--on-ink); }
.blog-index:has(.filter-target[id^="c-"]:target) .chip-all { background: var(--card); border-color: var(--line); color: var(--text); }
.blog-index:has(#c-guides:target) .post-card:not([data-cat="guides"]),
.blog-index:has(#c-engineering:target) .post-card:not([data-cat="engineering"]),
.blog-index:has(#c-product:target) .post-card:not([data-cat="product"]),
.blog-index:has(#c-opinion:target) .post-card:not([data-cat="opinion"]) { display: none; }

/* The grid: three columns, two on tablets, one on phones. The newest post
   on the index is a wide card above the rest. */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(44px, 5vw, 64px) clamp(24px, 2.6vw, 36px); }
.blog-index .post-grid { padding-bottom: clamp(96px, 11vw, 160px); }
.post-card { position: relative; }
.card-inner { display: flex; flex-direction: column; gap: 22px; height: 100%; }
.card-body { display: flex; flex-direction: column; flex: 1; }
.card-cat { font: 500 13px/1 var(--sans); color: var(--subtle); letter-spacing: .01em; }
.card-title { margin-top: 12px; font: 600 21px/1.25 var(--display); letter-spacing: -0.014em; color: var(--ink); text-wrap: balance; }
.card-link { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 200ms ease; }
.card-link::after { content: ""; position: absolute; inset: -10px; border-radius: calc(var(--radius) + 6px); }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { outline: 2px solid var(--blue); outline-offset: 2px; }
.card-excerpt { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--subtle); text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.card-body .byline { margin-top: auto; padding-top: 18px; }

.post-card-featured { grid-column: 1 / -1; padding-bottom: clamp(44px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.post-card-featured .card-inner { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 4vw, 56px); }
.post-card-featured .card-title { margin-top: 16px; font-size: clamp(28px, 2.9vw, 38px); line-height: 1.12; letter-spacing: -0.024em; }
.post-card-featured .card-excerpt { margin-top: 16px; font-size: 17px; -webkit-line-clamp: 4; line-clamp: 4; }
.post-card-featured .card-body .byline { margin-top: 0; padding-top: 26px; }

/* The byline: the author's photo, the author, the date and reading time. */
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; line-height: 1.4; color: var(--subtle); }
.avatar { display: block; flex: none; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: 62% 30%; background: var(--stage); box-shadow: 0 0 0 1px var(--line); }
.avatar-lg { width: 52px; height: 52px; }
.byline-name { font-weight: 500; color: var(--ink); }
.byline-meta { display: inline-flex; gap: 6px; }
.byline-sep { color: var(--faint); }

/* The cover (blog_render.go coverFor): a line-art vignette of the post's
   category on the stage tint, drawn by the C illustrations block below. */
.cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--stage);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .post-card:hover .cover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgb(0 0 0 / .4); }
  .post-card:hover .card-link { text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
}

/* ---------- A post ---------- */
/* Reading progress: a scroll-driven animation, so no script; browsers
   without scroll timelines simply show no bar. */
.read-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .read-progress { display: block; position: fixed; inset: 0 0 auto; z-index: 60; height: 2px; background: var(--ok); transform-origin: 0 50%; transform: scaleX(0); animation: read-grow linear both; animation-timeline: scroll(root block); }
}
@keyframes read-grow { to { transform: scaleX(1); } }

.post-head { --max: 820px; padding-top: clamp(48px, 7vw, 88px); text-align: center; }
.post-kicker { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: var(--faint); }
.post-kicker > a:first-child { color: var(--subtle); text-decoration: none; }
@media (hover: hover) { .post-kicker > a:first-child:hover { color: var(--ink); } }
.post-kicker .chip { height: 30px; padding: 0 12px; font-size: 13px; }
.post-head h1 { margin-top: 24px; font: 600 clamp(36px, 4.8vw, 58px)/1.05 var(--display); letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.post-dek { max-width: 640px; margin: 20px auto 0; font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.55; color: var(--subtle); text-wrap: pretty; }
.post-head .byline { justify-content: center; margin-top: 28px; font-size: 14px; }
.post-head .avatar { width: 30px; height: 30px; }
.post-cover { --max: 1080px; margin-top: clamp(36px, 5vw, 56px); }
.post-cover .cover { aspect-ratio: 21 / 9; border-radius: 20px; }

.post-layout { --max: 1200px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; margin-top: clamp(48px, 6vw, 72px); }
.post-body { width: 100%; max-width: 680px; font-size: 18px; line-height: 1.75; }
.post-toc { display: none; }
@media (min-width: 1240px) {
  .post-layout { grid-template-columns: minmax(0, 1fr) 680px minmax(0, 1fr); align-items: start; }
  .post-body { grid-column: 2; }
  .post-toc { display: block; grid-column: 3; justify-self: start; position: sticky; top: 100px; width: min(232px, 100% - 48px); max-height: calc(100dvh - 140px); margin-left: 56px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.post-toc-label { font: 500 12px/16px var(--sans); color: var(--subtle); letter-spacing: .02em; margin-bottom: 10px; }
.post-toc ul { display: grid; border-left: 1px solid var(--line); }
.post-toc a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; border-left: 1px solid transparent; font-size: 13.5px; line-height: 1.4; color: var(--subtle); text-decoration: none; text-wrap: pretty; transition: color 150ms ease, border-color 150ms ease; }
.post-toc .sub a { padding-left: 26px; font-size: 13px; }
@media (hover: hover) { .post-toc a:hover { color: var(--ink); } }
.post-toc a.is-here { color: var(--ink); border-left-color: var(--ink); }

/* Body typography: a 680px measure, 18px at 1.75, steady heading rhythm. */
.post-body > * + * { margin-top: 22px; }
.post-body h2 { margin-top: 64px; padding-top: 0; border-top: 0; font: 600 clamp(25px, 2.5vw, 31px)/1.2 var(--display); letter-spacing: -0.02em; scroll-margin-top: 96px; }
.post-body h3 { margin-top: 44px; font: 600 21px/1.3 var(--display); letter-spacing: -0.01em; scroll-margin-top: 96px; }
.post-body h4 { margin-top: 32px; font: 600 18px/1.35 var(--display); color: var(--ink); }
.post-body h2 + *, .post-body h3 + *, .post-body h4 + * { margin-top: 14px; }
.h-anchor { margin-left: .35em; color: var(--faint); font-weight: 400; text-decoration: none; opacity: 0; transition: opacity 150ms ease, color 150ms ease; }
@media (hover: hover) { .post-body h2:hover .h-anchor, .post-body h3:hover .h-anchor { opacity: 1; } }
@media (hover: hover) { .h-anchor:hover { color: var(--ink); } }
.post-body p, .post-body li { text-wrap: pretty; }
.post-body ul, .post-body ol { display: grid; gap: 10px; padding-left: 22px; }
.post-body ol { list-style: decimal; }
.post-body ol li::marker { color: var(--subtle); font-variant-numeric: tabular-nums; }
.post-body li > p + p { margin-top: 10px; }
.post-body li > ul, .post-body li > ol { margin-top: 10px; }
.post-body code { font-size: .84em; }
.post-body blockquote { padding: 2px 0 2px 22px; border-left: 3px solid var(--ok); font: 400 20px/1.55 var(--display); color: var(--ink); }
.post-body blockquote > * + * { margin-top: 12px; }
.post-body hr { height: 1px; margin-block: 48px; border: 0; background: var(--line); }
.post-body img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; }
.post-body .code { margin-top: 26px; }
.post-body .code + * { margin-top: 26px; }
.post-body .code pre { font-size: 13.5px; line-height: 1.7; }
.post-body .code figcaption { padding-block: 9px; }
/* Pasted posts carry highlight.js classes; these follow the docs' three. */
.post-body .hljs-comment, .post-body .hljs-meta { color: #7C7C76; }
.post-body .hljs-keyword, .post-body .hljs-built_in, .post-body .hljs-literal, .post-body .hljs-selector-tag { color: #9CC3FF; }
.post-body .hljs-string, .post-body .hljs-attr, .post-body .hljs-attribute, .post-body .hljs-number { color: #D9C9A3; }
.post-body .hljs-variable, .post-body .hljs-title, .post-body .hljs-section { color: var(--ok-soft); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.post-body table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.post-body th { padding: 11px 16px; background: var(--stage); font: 500 13px/1.3 var(--sans); color: var(--subtle); text-align: left; white-space: nowrap; }
.post-body td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.post-body th + th, .post-body td + td { border-left: 1px solid var(--line); }
.blog-source { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; color: var(--subtle); }
.blog-source a { color: var(--ink); }

/* The end of a post: the author, then newer and older, then more posts. */
.post-end { --max: 680px; margin-top: 72px; }
.author-card { display: flex; align-items: center; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.author-name { font: 600 17px/1.3 var(--display); color: var(--ink); }
.author-bio { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--subtle); text-wrap: pretty; }
.post-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.pager-link { display: grid; align-content: start; gap: 8px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color 150ms ease, background-color 150ms ease; }
@media (hover: hover) { .pager-link:hover { border-color: color-mix(in srgb, var(--ink) 24%, var(--line)); background: var(--card); } }
.pager-dir { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--subtle); }
.pager-dir .ic { width: 14px; height: 14px; }
.pager-title { font: 600 16.5px/1.3 var(--display); color: var(--ink); text-wrap: balance; }
.pager-newer { grid-column: 2; justify-items: end; text-align: right; }
.pager-newer .ic { transform: scaleX(-1); }

.post-more { margin-top: clamp(88px, 10vw, 128px); padding-top: clamp(48px, 5vw, 64px); border-top: 1px solid var(--line); }
.post-more h2 { margin-bottom: clamp(28px, 3vw, 40px); font: 600 clamp(26px, 2.6vw, 32px)/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink); }

.post-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; margin-block: clamp(72px, 9vw, 112px) clamp(88px, 10vw, 136px); padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: 20px; background: var(--stage); }
.post-cta h2 { font: 600 22px/1.2 var(--display); letter-spacing: -0.015em; color: var(--ink); }
.post-cta p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--subtle); max-width: 520px; text-wrap: pretty; }
.post-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 1080px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-card-featured .card-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
@media (max-width: 880px) {
  .post-card-featured .card-inner { grid-template-columns: 1fr; gap: 22px; }
  .post-cta { grid-template-columns: 1fr; gap: 18px; }
  .blog-filter { margin-inline: calc(var(--gutter) / -2); }
  .blog-filter ul { overflow-x: auto; padding-inline: calc(var(--gutter) / 2); scrollbar-width: none; }
  .blog-filter ul::-webkit-scrollbar { display: none; }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
  .post-body { font-size: 17px; line-height: 1.72; }
  .post-cover .cover { aspect-ratio: 16 / 10; border-radius: var(--radius); }
  .post-pager { grid-template-columns: 1fr; }
  .pager-newer { grid-column: auto; grid-row: 1; }
  .author-card { align-items: flex-start; padding: 20px; }
  .post-kicker { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .read-progress { display: none; }
  .cover { transition: none; }
  .post-card:hover .cover { transform: none; }
}

.quote-by { display: flex; align-items: center; gap: 10px; }
.quote-by .avatar { width: 36px; height: 36px; }

/* Story (/story): the post's measure and type, a round portrait on top. */
.story-portrait { display: grid; justify-items: center; gap: 12px; }
.story-portrait img { width: clamp(128px, 22vw, 176px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 54% 28%; background: var(--stage); box-shadow: 0 0 0 1px var(--line), 0 12px 32px -18px rgba(0, 0, 0, .35); }
.story-portrait figcaption { font-size: 14px; color: var(--subtle); }
.story .post-head h1 { margin-top: 28px; }
.story-cta { --max: 760px; }
.post-body .story-wide img, .post-body .story-trips img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--stage); }
.post-body .story-wide { margin-top: 30px; }
.post-body .story-mtn { display: flex; align-items: center; gap: 12px; }
.story-mtn .ic { flex: none; width: 28px; height: 28px; color: var(--subtle); }
.story-gallery { --gap: clamp(8px, 1.6vw, 16px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(22px, 3vw, 30px) var(--gap); width: min(1000px, calc(100vw - 40px)); margin-top: 40px; margin-left: 50%; transform: translateX(-50%); }
.sg { display: flex; flex-direction: column; min-width: 0; }
.sg-6 { grid-column: span 6; } .sg-4 { grid-column: span 4; } .sg-3 { grid-column: span 3; } .sg-2 { grid-column: span 2; }
.story-gallery img, .story-gallery video { display: block; width: 100%; border: 1px solid var(--line); border-radius: 16px; background: var(--stage); object-fit: cover; }
.story-gallery img { height: auto; }
.sg-clip video { flex: 1 1 0; min-height: 0; height: 0; aspect-ratio: auto; }
.story-hint { display: none; }
.story-gallery figcaption { margin-top: 9px; font-size: 13.5px; line-height: 1.4; color: var(--subtle); }
.post-body .story-trips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 14px); margin-top: clamp(8px, 2vw, 14px); }
.post-body .story-trips img { aspect-ratio: 3 / 4; object-fit: cover; }
.story-wide figcaption, .story-trips figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--subtle); }

/* ===== C illustrations (editorial line art) =====
   Brand and concept art (docs/DECISIONS.md, 2026-10-08): isometric line
   drawings generated as inline SVG, colored only through these tokens so
   light and dark both work. Hatching is drawn as lines, not <pattern>s, so
   the SVGs carry no ids. Product UI stays real UI (direction A). */
.ln-svg { --ln-ink: var(--ink); --ln-paper: var(--card); --ln-pen: color-mix(in srgb, var(--blue) 72%, var(--ink)); --ln-ok: var(--ok);
  --ln-bad: var(--danger-text); --ln-hand: var(--hand); --ln-mono: var(--mono); --ln-sans: var(--sans); --ln-ease: var(--ease); }
.ln-svg { display: block; max-width: 100%; height: auto; overflow: visible; color: var(--ln-ink); --ln-ink2: color-mix(in srgb, var(--ln-ink) 60%, var(--ln-paper)); --ln-shade: color-mix(in srgb, var(--ln-pen) 45%, var(--ln-ink)); }
.ln-svg path, .ln-svg circle, .ln-svg ellipse { stroke-linecap: round; stroke-linejoin: round; }
.ln-ft, .ln-fl, .ln-fr { stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.ln-ft { fill: var(--ln-paper); }
.ln-fl { fill: color-mix(in srgb, currentColor 5%, var(--ln-paper)); }
.ln-fr { fill: color-mix(in srgb, currentColor 12%, var(--ln-paper)); }
.ln-ft.ln--pen { fill: color-mix(in srgb, var(--ln-pen) 16%, var(--ln-paper)); }
.ln-ft.ln--ok { fill: color-mix(in srgb, var(--ln-ok) 20%, var(--ln-paper)); }
.ln-h { fill: none; stroke: currentColor; stroke-width: .8; opacity: .34; }
.ln-sh { fill: none; stroke: var(--ln-shade); stroke-width: .7; opacity: .45; }
.ln-l { fill: none; stroke: currentColor; stroke-width: 1.5; }
.ln-thin { fill: none; stroke: currentColor; stroke-width: 1; opacity: .55; }
.ln-led { stroke: currentColor; stroke-width: 1; fill: var(--ln-paper); }
.ln-led.ln--ok { fill: var(--ln-ok); }
.ln-led.ln--pen { fill: var(--ln-pen); }
.ln-ox { fill: var(--ln-paper); stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ln-snow { fill: var(--ln-paper); stroke: currentColor; stroke-width: 1.5; }
.ln-paper { fill: var(--ln-paper); stroke: currentColor; stroke-width: 1.5; }
.ln-note { font: 500 21px/1 var(--ln-hand); fill: var(--ln-pen); }
.ln-note.ln--ok { fill: var(--ln-ok); }
.ln-note.ln--s { font-size: 18px; }
.ln-mono { font: 400 11.5px/1 var(--ln-mono); fill: currentColor; }
.ln-mono.ln--dim, .ln-dim { fill: var(--ln-ink2); }
.ln-mono.ln--pen { fill: var(--ln-pen); }
.ln-mono.ln--ok { fill: var(--ln-ok); }
.ln-mono.bad { fill: var(--ln-bad); }
.ln-mono.ln--s { font-size: 10px; }
.ln-mono.ln--l { font-size: 13px; }
.ln-strike { fill: none; stroke: var(--ln-bad); stroke-width: 1.5; }
.ln-fig { font: 400 10px/1 var(--ln-mono); letter-spacing: .14em; fill: var(--ln-ink2); }
.ln-pen { fill: none; stroke: var(--ln-pen); stroke-width: 1.75; }
.ln-pen.ln--ok { stroke: var(--ln-ok); }
.ln-pen.ln--dim { stroke: var(--ln-ink2); }
.ln-ghost { fill: none; stroke: var(--ln-pen); stroke-width: 1.5; stroke-dasharray: 5 5; }
.ln-rail { fill: none; stroke: var(--ln-ink2); stroke-width: 6; opacity: .28; }
.ln-flow { fill: none; stroke: var(--ln-pen); stroke-width: 1.8; stroke-dasharray: 2 7; }
.ln-tag path { fill: var(--ln-paper); stroke: var(--ln-pen); stroke-width: 1.5; }
.ln-tag circle { fill: none; stroke: var(--ln-pen); stroke-width: 1.2; }
.ln-tag text { font: 400 11px/1 var(--ln-mono); fill: var(--ln-pen); }
.ln-chk circle { fill: var(--ln-paper); stroke: var(--ln-ok); stroke-width: 1.5; }
.ln-chk path { fill: none; stroke: var(--ln-ok); stroke-width: 2; }
.ln-chk.ln-no circle, .ln-chk.ln-no path { stroke: var(--ln-bad); }
.ln-seal circle { fill: var(--ln-paper); stroke: currentColor; stroke-width: 1.5; }
.ln-seal .ln--in { stroke-width: 1; stroke-dasharray: 1.5 2.5; }
.ln-stamp rect { fill: none; stroke: var(--ln-ok); stroke-width: 2; }
.ln-stamp rect + rect { stroke-width: 1; }
.ln-stamp text { font: 400 14px/1 var(--ln-mono); letter-spacing: .04em; fill: var(--ln-ok); }
/* Motion. The resting styles above are the final frame; reduced motion and
   paused figures keep or start from them. */
.ln-draw { stroke-dasharray: 1; }
.ln-svg .ln-draw, .ln-svg .ln-chk path { animation: ln-draw 1s var(--ln-ease) backwards; animation-delay: var(--d, 0s); }
.ln-svg .ln-chk path { stroke-dasharray: 1; }
.ln-svg .ln-note { animation: ln-write 1.3s steps(14, end) backwards; animation-delay: var(--d, 0s); }
.ln-svg .ln-pop, .ln-svg .ln-tag, .ln-svg .ln-stamp, .ln-svg .ln-seal { animation: ln-pop .7s var(--ln-ease) backwards; animation-delay: var(--d, 0s); }
.ln-svg .ln-flow { animation: ln-flow 1.1s linear infinite; }
.ln-svg .ln-float { animation: ln-float 6s ease-in-out infinite; }
.ln-svg .ln-ghost { animation: ln-ghost 2.8s ease-in-out infinite; }
@keyframes ln-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ln-write { from { clip-path: inset(-40% 100% -40% -4%); } to { clip-path: inset(-40% -4% -40% -4%); } }
@keyframes ln-pop { from { opacity: 0; translate: 0 6px; } }
@keyframes ln-flow { to { stroke-dashoffset: -18; } }
@keyframes ln-float { 50% { translate: 0 -5px; } }
@keyframes ln-ghost { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ln-svg, .ln-svg * { animation: none !important; } }
.ln-ttl { font: 600 12.5px/1 var(--ln-sans); fill: currentColor; }
.ln-svg .ln--t-pen { fill: var(--ln-pen); }
.ln-svg .ln--t-ok { fill: var(--ln-ok); }
.ln-svg .ln--t-bad { fill: var(--ln-bad); }
.ln-svg .ln--t-dim, .ln-svg .ln-old { fill: var(--ln-ink2); }
.ln-btn { fill: color-mix(in srgb, var(--ln-pen) 12%, var(--ln-paper)); stroke: var(--ln-pen); stroke-width: 1.5; }
.ln-svg .ln-sweep { animation: ln-sweep 6s linear infinite; }
@keyframes ln-sweep { from { translate: 0 0; } to { translate: var(--ln-span, 0) 0; } }
/* Pages: the story's signature drawing, and the blog's covers. */
.post-body a.story-ext .ic { display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -2px; }
.story-art { --max: 760px; margin-top: clamp(32px, 5vw, 56px); }
.story-art .ln-svg { width: 100%; }
.js .story-art:not(.in) .ln-svg, .js .story-art:not(.in) .ln-svg * { animation-play-state: paused; }
.ln-cover .ln-svg { width: 100%; height: 100%; padding: 6% 8%; }
.ln-cover .ln-svg .ln-float, .ln-cover .ln-svg .ln-ghost { animation: none; }
@media (hover: hover) and (pointer: fine) {
  .post-card:hover .ln-cover .ln-float { animation: ln-float 3s ease-in-out infinite; }
}

/* ===== Mobile system ===== */
/* Most visitors arrive on a phone (DECISIONS 2026-10-09). The rules, also in
   docs/design/README.md "Mobile and touch rules":
   - A touch target is at least --tap (44px) on both axes, 8px from the next.
   - Every control has an :active state; hover styles live inside
     @media (hover: hover), so a tap never leaves a stuck hover.
   - Fixed layers clear the notch and the home bar with env(safe-area-*).
   - Text is 14px or larger; a mock's tiny print is aria-hidden decoration.
   - Sideways strips (the showcase, photos) snap, show a peek
     of the next card, and contain their overscroll.
   - The menu, the docs pages and search open as sheets that lock the page
     behind them. */
:root { --tap: 44px; --sheet-r: 20px; }
a, button, summary, label, [role="tab"] { touch-action: manipulation; -webkit-tap-highlight-color: color-mix(in srgb, var(--ink) 8%, transparent); }

/* The phone menu: a native <details> whose content is a full-width sheet
   under the bar. popover.js closes it on an outside tap and on Esc. */
.nav-menu { display: none; }
.nav-menu summary { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 10px; cursor: pointer; list-style: none; color: var(--ink); }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:active { background: var(--stage); }
.nav-menu summary .ic { width: 22px; height: 22px; }
.nav-menu .ic-close, .nav-menu[open] .ic-open { display: none; }
.nav-menu[open] .ic-close { display: block; }
.nav-sheet { position: fixed; top: calc(68px + env(safe-area-inset-top)); left: 0; right: 0; bottom: 0; z-index: 49; display: flex; flex-direction: column; gap: 24px; padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-top: 1px solid var(--line); animation: sheet-down 220ms var(--ease) both; }
.sheet-links { display: grid; }
.sheet-links li + li { border-top: 1px solid var(--line); }
.sheet-links a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 12px; border-radius: 12px; font: 500 18px/1.2 var(--sans); color: var(--ink); text-decoration: none; }
.sheet-links a:active { background: var(--stage); }
.sheet-links a[aria-current] { background: var(--stage); }
.sheet-links .ic { width: 20px; height: 20px; color: var(--subtle); }
.sheet-actions { display: grid; gap: 10px; margin-top: auto; }
.sheet-actions .btn { width: 100%; height: 52px; font-size: 16.5px; border-radius: 12px; }
/* The bar's blur makes it the containing block of fixed children, which
   would trap the sheet inside the bar; it goes solid while the menu is open,
   and the page behind stops scrolling. */
.nav:has(.nav-menu[open]) { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
html:has(.nav-menu[open]), html:has(.docs-menu[open]) { overflow: hidden; }
@keyframes sheet-down { from { opacity: 0; transform: translateY(-8px); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes scrim-in { from { opacity: 0; } }

/* A bottom sheet (the docs pages) over a scrim. The scrim is a sibling
   outside the <details>, so a tap on it counts as outside and closes it. */
.sheet-scrim { display: none; }
.sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 8px; background: inherit; font: 600 17px/1.3 var(--display); color: var(--ink); }
.sheet-close { display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-right: -10px; border: 0; border-radius: 10px; background: none; color: var(--subtle); cursor: pointer; }
.sheet-close:active { background: var(--stage); color: var(--ink); }
.sheet-close .ic { width: 20px; height: 20px; }

/* The phone's sticky sign-up bar (site-chrome.html; main.js shows it). */
.m-cta { display: none; }

/* "On this page" as chips, where the side list doesn't fit. */
.onpage { display: none; margin: 24px 0 28px; }
.onpage summary { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font: 500 15px/1 var(--sans); color: var(--ink); cursor: pointer; list-style: none; }
.onpage summary::-webkit-details-marker { display: none; }
.onpage summary:active { background: var(--stage); }
.onpage .ic { width: 16px; height: 16px; flex: none; }
.onpage-caret { color: var(--subtle); transition: transform 200ms var(--ease); }
.onpage[open] .onpage-caret { transform: rotate(90deg); }
.onpage ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.onpage a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 10px 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); font-size: 15px; line-height: 1.3; color: var(--text); text-decoration: none; }
.onpage a:active { background: var(--stage); color: var(--ink); }
.post-onpage { --max: 680px; }
@media (max-width: 1179px) { .docs-main .onpage { display: block; } }
@media (max-width: 1239px) { .post-onpage .onpage { display: block; } }
@media (min-width: 1240px) { .post-onpage { display: none; } }

/* Code: a Wrap toggle beside Copy (docs.js adds it), and wide tables fade
   at the edge that still scrolls. */
.code-wrap { display: none; }
.code.is-wrapped pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.post-body .code code { font-size: inherit; }
.table-wrap, .doc-table {
  --fade: var(--card); --shade: color-mix(in srgb, var(--ink) 16%, transparent);
  background:
    linear-gradient(to right, var(--fade) 40%, transparent) left / 40px 100% no-repeat local,
    linear-gradient(to left, var(--fade) 40%, transparent) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--shade), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--shade), transparent) right / 14px 100% no-repeat scroll,
    var(--card);
}

@media (hover: none), (pointer: coarse), (max-width: 880px) {
  .btn-sm { height: var(--tap); padding: 0 16px; }
  .chip { height: var(--tap); padding: 0 16px; }
  .see-all { min-height: var(--tap); }
  .h-anchor { opacity: 1; display: inline-block; min-width: var(--tap); padding: 10px 15px; margin: -10px -15px -10px 0; text-align: center; }
  .nav-login { min-height: var(--tap); }
  .post-kicker .chip { height: var(--tap); padding: 0 16px; font-size: 14px; }
  /* A list of links only (a post's "In this guide") is a list of rows. */
  .post-body li > a:only-child { display: inline-flex; align-items: center; min-height: var(--tap); }
  .code-wrap { display: inline-flex; margin-left: auto; }
  .code-copy, .code-wrap { min-width: var(--tap); min-height: var(--tap); justify-content: center; padding: 0 14px; border-radius: 10px; font-size: 14px; }
  .code-copy .ic, .code-wrap .ic { width: 16px; height: 16px; }
  .code figcaption { padding-block: 6px; font-size: 14px; }
  .post-body .code figcaption { padding-block: 6px; }
  .chip:active, .pager-link:active, .post-card:active .cover { opacity: .85; }
  .faq summary:active { color: var(--subtle); }
}
.code-wrap[aria-pressed="true"] { color: #F5F5F3; border-color: #75756F; }

@media (max-width: 880px) {
  .nav-menu { display: block; }
  .nav-actions { gap: 8px; }
  .theme-toggle { width: var(--tap); height: var(--tap); }
  .nav-actions .nav-cta { height: var(--tap); }

  /* Grouped footer: two columns of thumb-sized rows. */
  .footer-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .footer a { display: flex; min-height: var(--tap); font-size: 15.5px; }

  .m-cta:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); transform: translateY(100%); visibility: hidden; transition: transform 260ms var(--ease), visibility 0s linear 260ms; }
  .m-cta.is-on { transform: none; visibility: visible; transition: transform 260ms var(--ease); }
  .m-cta .btn { width: 100%; height: 52px; font-size: 16.5px; border-radius: 12px; }
  .m-cta .ic { width: 20px; height: 20px; }

  /* FAQ rows and the pager are full thumb rows. */
  .faq summary { min-height: 64px; padding-block: 16px; }
  .faq summary::after { width: 16px; height: 16px; background-size: 16px 1.5px, 1.5px 16px; }
  .post-kicker > a:first-child { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }
  .logo { display: inline-flex; align-items: center; min-height: var(--tap); }
  .read-progress { top: env(safe-area-inset-top); }

  /* The showcase as a carousel (main.js adds .is-carousel): every scene is a
     card in a snapping row with a peek of the next; the tabs above follow
     the swipe, and a tab tap scrolls to its scene. No autoplay. */
  .sc-tab { padding: 9px 18px 9px 9px; }
  .sc-tab strong { font-size: 15.5px; }
  .is-carousel .sc-stage { display: flex; gap: 12px; min-height: 0; padding: 0 0 4px; border-radius: 0; background: none; box-shadow: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; isolation: auto; }
  .is-carousel .sc-stage::-webkit-scrollbar { display: none; }
  .is-carousel .sc-stage::before, .is-carousel .sc-stage::after, .is-carousel .sc-progress { display: none; }
  .is-carousel .scene { flex: 0 0 86%; width: auto; min-height: 460px; align-content: center; padding: 28px 16px; border-radius: 18px; scroll-snap-align: center; scroll-snap-stop: always; isolation: isolate; overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
    background: var(--stage); }
}

@media (max-width: 640px) {
  .code pre, .post-body .code pre { font-size: 14px; }
  .byline, .post-kicker { font-size: 14px; }
  .card-cat, .pager-dir { font-size: 14px; }
  .story-wide figcaption, .story-trips figcaption, .story-gallery figcaption { font-size: 14px; }
  /* Photos become a swipe strip that bleeds to the screen edge, so a thumb
     moves through them instead of scrolling past five tall pictures. */
  .story { overflow-x: clip; }
  .story-hint { display: flex; align-items: center; gap: 6px; margin-top: 28px; font-size: 14px; color: var(--subtle); }
  .story-hint .ic { width: 16px; height: 16px; }
  .story-gallery { display: flex; gap: 12px; width: 100vw; margin-top: 10px; padding: 0 20px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; overscroll-behavior-x: contain; scrollbar-width: none; align-items: stretch; -webkit-overflow-scrolling: touch; }
  .story-gallery::-webkit-scrollbar { display: none; }
  .sg { flex: 0 0 82%; scroll-snap-align: start; }
  .sg-6 { flex-basis: 90%; }
  .sg-clip { flex-basis: 60%; }
  .sg:not(.sg-clip) img { aspect-ratio: 4 / 3; }
  .sg.sg-6 img { aspect-ratio: 16 / 9; }
  .sg-clip video { flex: 1 1 0; min-height: 0; height: 0; aspect-ratio: auto; }
  /* Story photos: a swipeable strip with a peek. */
  .post-body .story-trips { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .post-body .story-trips::-webkit-scrollbar { display: none; }
  .post-body .story-trips figure { scroll-snap-align: start; }
}

@media (max-width: 560px) {
  /* The hero mock, simplified: the apps over the update's steps in one
     column, the server card left out, so nothing runs off the edge. */
  .app-body { gap: 12px; padding: 12px; }
  .app .srv { display: none; }
  .run { padding: 14px 16px; }
  .run ol { gap: 10px; }
  .run li { align-items: flex-start; }
  .app { font-size: 13px; }
  .app .srv-state, .app .meter-l, .app .proj-name span, .app .run-title, .app .run .t, .app .run li { font-size: 12.5px; }
}

/* Short landscape phones: a slimmer sign-up bar. */
@media (max-width: 880px) and (max-height: 500px) {
  .m-cta { padding-block: 6px calc(6px + env(safe-area-inset-bottom)); padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  .m-cta .btn { height: var(--tap); }
  .nav-sheet { gap: 12px; }
  .sheet-links a { min-height: 48px; }
  .is-carousel .scene { min-height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .m-cta:not([hidden]), .m-cta.is-on { transition: none; }
  .sc-stage, .story-trips { scroll-behavior: auto; }
}
/* ===== End of the mobile system ===== */