/* 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;
  --bad: #C9423E;
  --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;
  color-scheme: dark;
}
/* 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); }
.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; }
.btn-light:hover:not(:disabled) { background: #fff; }
.btn-ghost { color: var(--ink); border-color: var(--line); background: var(--card); }
.btn-ghost:hover { border-color: #C9C9C5; }
.btn-ghost-light { color: #F5F5F3; border-color: #3A3A37; background: transparent; }
.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: 46px; height: 23px; color: var(--ink); }
.logo-mark-sm { width: 36px; 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:hover .ic, .nav-links a[aria-current] .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; }
.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;
}
.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: 28px; 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; }
.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; }
.sc-tabs { display: grid; gap: 4px; align-content: start; }
.sc-tab { position: relative; display: grid; gap: 6px; text-align: left; padding: 16px 18px 20px; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; overflow: hidden; transition: background-color 200ms ease, border-color 200ms ease; }
.sc-tab strong { display: flex; align-items: center; gap: 12px; font: 500 16.5px/1.3 var(--sans); color: var(--subtle); transition: color 150ms ease; }
.sc-tab .ic { width: 20px; height: 20px; color: var(--faint); transition: color 150ms ease; }
.sc-tab span { padding-left: 32px; font-size: 15px; line-height: 1.5; color: var(--subtle); display: none; }
.sc-tab:hover strong, .sc-tab:hover .ic { color: var(--ink); }
.sc-tab[aria-selected="true"] { background: var(--card); border-color: var(--line); }
.sc-tab[aria-selected="true"] strong, .sc-tab[aria-selected="true"] .ic { color: var(--ink); }
.sc-tab[aria-selected="true"] span { display: block; animation: fade-up .4s var(--ease) both; }
.sc-progress { position: absolute; left: 50px; right: 18px; bottom: 10px; height: 2px; border-radius: 2px; background: var(--line); opacity: 0; }
.sc-progress::after { content: ""; position: absolute; inset: 0; background: var(--ink); border-radius: 2px; 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; }
.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 .3s 2.1s forwards; }
.site-v2 { opacity: 0; animation: fade-up .45s var(--ease) 2.3s forwards; }
.scene-push .toast { --t: 2.6s; }

/* 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 2.4s var(--ease) .2s 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 .5s var(--ease) calc(var(--i) * 70ms) 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 .9s 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; }
.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 .5s var(--ease) .8s forwards !important; }
.row-pick .row-btn { animation: press .3s var(--ease) .9s; }
.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: 1.3s; } .s2 { --d: 2.1s; } .s3 { --d: 2.9s; }

/* Scene: previews */
.scene-preview .row { opacity: 0; animation: fade-up .4s var(--ease) var(--t) forwards; }
.b1 { --t: .15s; } .b2 { --t: .45s; } .b3 { --t: .9s; --live: 2.6s; }
.row-new { border-color: #BFE3CD; }
.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: 3s; } .tag:nth-child(2) { animation-delay: 3.2s; } .tag:nth-child(3) { animation-delay: 3.4s; }

/* 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(--bad); padding: 4px 8px; border-radius: 999px; background: rgba(201,66,62,.09); }
.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 .25s 1.5s forwards; }
.now-b { opacity: 0; animation: fade-in .3s 1.65s forwards; }
.v14 { animation: dim .4s 1.5s forwards; }
.v13 .row-btn { animation: press .3s var(--ease) 1.1s, fade-out .2s 1.5s forwards; }
.v13 { animation: pick .5s var(--ease) 1.6s forwards; }
.scene-undo .toast { --t: 2s; }

/* 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: .8s; } .a2 { --t: 1.5s; } .a3 { --t: 3.4s; }
.bubble-code .l1 { --d: 1.8s; } .bubble-code .l2 { --d: 2.05s; } .bubble-code .l3 { --d: 2.3s; } .bubble-code .l4 { --d: 2.55s; } .bubble-code .l5 { --d: 2.8s; }
.c { color: #8A8A84; } .s { color: var(--ok-soft); } .k { color: #8EC1FF; }

/* 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 { color: #FF9C98; }
.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; }
.ox-skin { fill: #FFFFFF; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.ox-horn { fill: #F1E2C2; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.ox-muzzle { fill: #F4D6C8; stroke: var(--ink); stroke-width: 2; }
.ox-pink { fill: #F2C2B3; }
.ox-cheek { fill: #F2A594; opacity: .55; }
.ox-ink { fill: var(--ink); }
.ox-line { fill: none; stroke: var(--ink); 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(--ink); stroke-width: 15; }
.ox-leg-fill { stroke: #FFFFFF; stroke-width: 11; }
.ox-hoof { stroke: #3A3A37; 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); }

/* 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: 200px; 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: center; gap: 20px; min-height: 76px; font-size: 14px; flex-wrap: wrap; padding-block: 18px; }
.footer .logo-mark { color: #F5F5F3; }
.footer ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-left: auto; }
.footer a { text-decoration: none; transition: color 150ms ease; }
.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: #9FD3B3; background: #F3FAF6; } }
@keyframes dim { to { opacity: .45; } }

/* Responsive */
@media (max-width: 1080px) {
  .showcase { grid-template-columns: 1fr; }
  .sc-tabs { grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; }
  .sc-tab { scroll-snap-align: start; }
  .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; }
  .js .display .w > span { animation: none; transform: none; }
  .js .display .ul path { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Mobile menu: a native <details>, no script ---------- */
.nav-menu { display: none; position: relative; }
.nav-menu summary { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; list-style: none; color: var(--ink); }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary .ic { width: 20px; height: 20px; }
.nav-menu .ic-close, .nav-menu[open] .ic-open { display: none; }
.nav-menu[open] .ic-close { display: block; }
.nav-menu ul { position: absolute; right: 0; top: 48px; min-width: 220px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px -12px rgb(0 0 0 / .14); }
.nav-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 15px; color: var(--text); text-decoration: none; }
.nav-menu a:hover { background: var(--stage); color: var(--ink); }
.nav-menu .ic { width: 17px; height: 17px; color: var(--subtle); }
@media (max-width: 1080px) { .nav-links { gap: 20px; } .nav-links .ic { display: none; } }
@media (max-width: 880px) { .nav-menu { display: block; } .nav-actions { gap: 8px; } }

/* ---------- 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; }
.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; }
.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; }

@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; }
}

/* ---------- Auth: one centered card on the page background ---------- */
.page-auth { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.auth { flex: 1; display: grid; place-items: center; padding: clamp(40px, 8vh, 96px) 16px; }
.auth-card { width: min(420px, 100%); padding: clamp(28px, 5vw, 40px); background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 1px 2px rgb(0 0 0 / .03), 0 24px 48px -32px rgb(0 0 0 / .12); }
.auth-mark { display: block; width: 40px; height: 20px; color: var(--ink); margin-bottom: 28px; }
.auth-title { font: 600 32px/1.1 var(--display); letter-spacing: -0.024em; color: var(--ink); }
.auth-lede { margin-top: 10px; font-size: 15.5px; color: var(--subtle); text-wrap: pretty; }
.auth-note { display: flex; gap: 10px; margin-top: 20px; padding: 12px 14px; border-radius: 10px; background: var(--stage); font-size: 14px; line-height: 1.5; color: var(--text); }
.auth-note .ic { width: 17px; height: 17px; margin-top: 1px; color: var(--subtle); }
.auth-github { width: 100%; margin-top: 28px; }
.auth-steps { display: grid; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); counter-reset: step; list-style: none; }
.auth-steps li { position: relative; padding-left: 34px; font-size: 14.5px; line-height: 1.5; color: var(--subtle); counter-increment: step; }
.auth-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--stage); font: 500 12px/1 var(--mono); color: var(--ink); }
.auth-steps strong { display: block; font-weight: 500; color: var(--ink); }
.auth-fine { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--subtle); }
.page-auth .footer { margin-top: 0; }

/* ---------- Blog: the list and the article. Colors come only from the
   tokens, so a future dark-mode toggle flips the tokens, not these rules. */
.blog-hero { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(40px, 5vw, 64px); }
.blog-hero .lede { margin-top: 24px; }
.blog-list { display: grid; gap: clamp(32px, 4vw, 44px); padding-bottom: clamp(96px, 11vw, 160px); max-width: 720px; }
.blog-item h2 a { font: 600 clamp(24px, 2.4vw, 30px)/1.2 var(--display); letter-spacing: -0.018em; color: var(--ink); text-decoration: none; }
.blog-item h2 a:hover { text-decoration: underline; text-decoration-color: #C9C9C5; text-underline-offset: 4px; }
.blog-item p { margin-top: 8px; font-size: 16.5px; color: var(--subtle); text-wrap: pretty; }
.blog-item time { display: block; margin-top: 10px; font: 400 13px/1 var(--mono); color: var(--faint); }

.blog-post { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(96px, 11vw, 160px); }
.blog-head { margin-bottom: 40px; }
.blog-head h1 { font: 600 clamp(38px, 4.4vw, 54px)/1.06 var(--display); letter-spacing: -0.028em; color: var(--ink); }
.blog-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; font: 400 13.5px/1.5 var(--mono); color: var(--subtle); }
.blog-meta span::before { content: ""; }
.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); }

/* Pasted RSS bodies: tables and code blocks match the docs' quiet tables. */
.blog-post table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.blog-post th { font: 500 12px/16px var(--sans); color: var(--subtle); text-align: left; padding: 12px 16px; background: var(--bg); border: 1px solid var(--line); }
.blog-post td { padding: 12px 16px; border: 1px solid var(--line); vertical-align: top; }
.blog-post pre { margin: 18px 0; padding: 16px 18px; border-radius: 12px; background: var(--night); color: var(--night-text); overflow-x: auto; font: 400 13.5px/1.7 var(--mono); }
.blog-post pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
/* Pasted bodies carry their own <img>: fit them to the column, keep the ratio. */
.blog-post img { width: 100%; height: auto; }