/* Brand palette from the logo: ink #0a1828 on paper #f7f6f5, T highlight #f7f7f7, notebook cream #ede8e2.
   Light (paper) is the default theme; [data-theme="dark"] switches to the ink palette. The theme is
   chosen by the toggle and persisted, so the default stays light regardless of OS preference until
   the visitor picks otherwise. Light lives on :root so a page renders correctly even before (or
   without) the pre-paint snippet, which is why the light-only rules below match
   :not([data-theme="dark"]) rather than an explicit light attribute. */
:root {
  --accent: #24507e;
  --btn-bg: #0a1828;
  --btn-fg: #f7f6f5;
  --btn-shadow: 0 6px 20px rgba(10, 24, 40, .30);
  --btn-shadow-hover: 0 8px 28px rgba(10, 24, 40, .45);
  --bg: #f7f6f5;
  --bg-soft: #f1eeea;
  --card: #ffffff;
  --fg: #0a1828;
  --fg-strong: #0a1828;
  --muted: #51606f;
  --border: #e6e2dc;
  --shadow: 0 10px 40px rgba(10, 24, 40, 0.10);
  --radius: 16px;
  --maxw: 1080px;
}
:root[data-theme="dark"] {
  --accent: #8fb4de;
  --btn-bg: #f7f7f7;
  --btn-fg: #0a1828;
  --btn-shadow: 0 6px 20px rgba(0, 0, 0, .40);
  --btn-shadow-hover: 0 8px 28px rgba(0, 0, 0, .55);
  --bg: #0a1828;
  --bg-soft: #0d1e31;
  --card: #102336;
  --fg: #f7f6f5;
  --fg-strong: #f7f7f7;
  --muted: #9daebe;
  --border: #22374d;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { color: var(--fg-strong); }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.accent { color: var(--accent); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 12px; font-weight: 600; font-size: 15px;
  border: 1px solid transparent; cursor: pointer; transition: transform .08s ease, box-shadow .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--btn-shadow); }
.btn-primary:hover { box-shadow: var(--btn-shadow-hover); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Nav */
header.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(12px);
  background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.brand .mark { width: 30px; height: 30px; display: block; }
/* In light mode the logo alone sits on a dark-ink tile so the dark-tuned mark keeps its
   ground; the wordmark stays ink on paper. */
:root:not([data-theme="dark"]) .brand .mark { background: #0a1828; padding: 4px; border-radius: 9px; width: 34px; height: 34px; }

/* Light/dark toggle */
.theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--muted);
  cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.theme-toggle:hover { color: var(--fg); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .ico-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
/* On doc pages (no nav bar) the toggle floats in the top-right corner. */
.theme-toggle.floating { position: fixed; top: 18px; right: 18px; z-index: 60;
  background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(8px); }
.nav-links { display: flex; align-items: center; gap: 22px; }
/* Plain nav links are muted; the Buy button keeps its own (white) button colour. */
.nav-links a:not(.btn) { color: var(--muted); font-weight: 500; font-size: 14px; }
.nav-links a:not(.btn):hover { color: var(--fg); }
.nav-links .btn-primary { color: var(--btn-fg); }
@media (max-width: 720px) { .nav-links .hide-sm { display: none; } }

/* Buttons used as real <button> elements inherit font (form controls don't),
   and native button appearance must not wash out the solid background. */
button.btn { font-family: inherit; appearance: none; -webkit-appearance: none; }

/* Legal / support / changelog pages */
.doc-page { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; }
.doc-page h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; margin: 0 0 6px; }
.doc-page .updated { color: var(--muted); font-size: 13px; margin: 0 0 32px; }
.doc-page h2 { font-size: 20px; margin: 32px 0 8px; }
.doc-page p, .doc-page li { color: var(--fg); font-size: 15px; }
.doc-page a { color: var(--accent); }
.doc-page .back { display: inline-block; margin-bottom: 24px; color: var(--muted); font-size: 14px; }
.doc-page form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 8px 0 4px; }
.doc-page form label { display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.doc-page form > div, .doc-page form label { flex: 1 1 260px; }
.doc-page input[type="email"], .doc-page input[type="text"] {
  width: 100%; font: inherit; font-size: 15px; color: var(--fg);
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px;
}
.doc-page input[type="email"]:focus, .doc-page input[type="text"]:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.doc-page form button {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 0; border-radius: 10px; padding: 12px 20px; box-shadow: var(--btn-shadow);
}
.doc-page form button:hover:not(:disabled) { box-shadow: var(--btn-shadow-hover); }
.doc-page form button:disabled { opacity: .6; cursor: default; }
.doc-page #result:not(:empty) {
  margin: 14px 0 0; padding: 11px 14px; font-size: 14.5px;
  border-left: 3px solid var(--accent); background: var(--bg-soft); border-radius: 0 8px 8px 0;
}
.compare-note { text-align: center; color: var(--muted); font-size: 12.5px; margin: 14px auto 0; max-width: 640px; }
.compare-note a { color: var(--accent); }
.compare-cta { text-align: center; color: var(--muted); font-size: 15px; margin: 28px auto 0; max-width: 640px; }
.compare-cta a { color: var(--accent); font-weight: 600; }
.compare .na { color: var(--muted); opacity: .5; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--fg); }
.dl-meta { color: var(--muted); font-size: 13px; margin-top: 14px; }
.ql-note { color: var(--muted); font-size: 13px; margin-top: 10px; max-width: 560px; margin-left: auto; margin-right: auto; }

/* Hero */
.hero { padding: 84px 0 40px; text-align: center; }
.badge { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); margin-bottom: 22px; }
.hero h1 { font-size: clamp(34px, 6vw, 60px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 18px; }
.hero p.lede { font-size: clamp(17px, 2.5vw, 21px); color: var(--muted); max-width: 800px; margin: 0 auto 30px; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 20px 0; }
.btn .ico-apple { width: 15px; height: 15px; flex: none; margin-top: -2px; }
.cta-note { color: var(--muted); font-size: 13px; margin-top: 14px; }

/* App mockup */
.mockup { max-width: 900px; margin: 54px auto 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow); background: var(--card); }
.mockup .titlebar { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 14px;
  background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.mockup .dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
.mockup .title { margin-left: 10px; color: var(--muted); font-size: 13px; }
.mockup .body { display: grid; grid-template-columns: 190px 1fr; min-height: 380px; }
.mockup .sidebar { background: var(--bg-soft); border-right: 1px solid var(--border); padding: 14px; font-size: 13px; }
.mockup .sidebar .sec { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .06em; margin: 10px 0 6px; }
.mockup .sidebar .item { padding: 5px 8px; border-radius: 7px; color: var(--muted); }
.mockup .sidebar .item.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 600; }
.mockup .content { padding: 26px 30px; text-align: left; overflow: hidden; }
.mockup .content h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.01em; }
.mockup .content p { color: var(--fg); margin: 10px 0; font-size: 14px; }
.mockup .callout { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent);
  padding: 10px 14px; border-radius: 8px; margin: 14px 0; font-size: 13.5px; }
.mockup .callout.note { border-color: #3b82f6; background: color-mix(in srgb, #3b82f6 8%, transparent); }
.mockup .code { background: #0a1828; color: #f7f6f5; border-radius: 8px; padding: 12px 14px; font-size: 12.5px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; margin: 14px 0; overflow-x: auto; }
.mockup .code .k { color: #c792ea; } .mockup .code .s { color: #c3e88d; } .mockup .code .c { color: #676e95; }
.mockup .comp { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 6px;
  border: 1px dashed var(--accent); color: var(--accent); font-size: 12px; font-weight: 600; }

/* Sections */
section { padding: 72px 0; }
section#pricing { padding-bottom: 96px; }
section.soft { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { text-align: center; max-width: 780px; margin: 0 auto 44px; }
.section-head h2 { font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.02em; margin: 0 0 12px; }
.section-head p { color: var(--muted); font-size: 17px; margin: 0; }

/* Feature grid */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }
.feature { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.feature .ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 20px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); margin-bottom: 14px; }
.feature h3 { margin: 0 0 6px; font-size: 17px; }
.feature p { margin: 0; color: var(--muted); font-size: 14.5px; }
.feature .tag { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.feature .kick { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--accent); margin-bottom: 8px; }
.feature-figure { max-width: 860px; margin: 0 auto; }
/* Compact card variant: icon and title share a row, blurb stays to a line or two. */
.feature-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.feature-head .ico { width: 34px; height: 34px; font-size: 17px; margin: 0; flex: none; }
.feature-head h3 { margin: 0; }
.feature .read-more { display: inline-block; margin-top: 10px; color: var(--accent); font-size: 13.5px; font-weight: 600; }
.feature .read-more:hover { text-decoration: underline; }

/* Comparison table */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
table.compare { width: 100%; border-collapse: collapse; min-width: 640px; }
table.compare th, table.compare td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border); font-size: 14.5px; }
table.compare th:first-child, table.compare td:first-child { text-align: left; color: var(--muted); }
table.compare thead th { font-size: 14px; }
table.compare thead th.us { color: var(--accent); }
table.compare tbody tr:last-child td { border-bottom: none; }
table.compare .col-us { background: color-mix(in srgb, var(--accent) 7%, transparent); font-weight: 600; }
.yes { color: #22b06b; font-weight: 700; } .no { color: var(--muted); opacity: .6; }

/* Pricing */
.pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 800px; margin: 0 auto; }
@media (max-width: 640px) { .pricing { grid-template-columns: 1fr; } }
.plan { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; }
.plan.pro { border-color: var(--accent); box-shadow: var(--shadow); position: relative; }
.plan .plan-name { font-weight: 700; font-size: 18px; }
.plan .price { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 2px; }
.plan .price small { font-size: 15px; font-weight: 500; color: var(--muted); }
.price .price-was { font-size: 24px; font-weight: 600; color: var(--muted); margin: 0 4px; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 24px; }
.plan .btn { margin-top: 22px; }
.plan .usd-note { text-align: center; color: var(--muted); font-size: 12.5px; margin: 10px 0 0; }
.plan li { padding: 7px 0; font-size: 14.5px; display: flex; gap: 10px; align-items: flex-start; }
.plan li::before { content: '✓'; color: #22b06b; font-weight: 800; }
.plan .btn { width: 100%; justify-content: center; }
.ribbon { position: absolute; top: 16px; right: 16px; background: var(--btn-bg);
  color: var(--btn-fg); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.promo-line { color: var(--muted); font-size: 13px; margin: -2px 0 4px; }
.promo-line s { color: var(--muted); }
.cta-note s { color: var(--muted); }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border: 1px solid var(--border); border-radius: 12px; padding: 4px 18px; margin-bottom: 12px; background: var(--card); }
.faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; font-size: 15.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] summary { color: var(--accent); }
.faq p { color: var(--muted); margin: 0 0 16px; font-size: 14.5px; }

/* Footer */
footer { padding: 40px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 13.5px; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* Grouped comparison (generated from comparison-data.json) */
.compare-group { text-align: center; margin: 34px 0 4px; font-size: 19px; }
.compare-blurb { text-align: center; color: var(--muted); font-size: 14px; margin: 0 auto 14px; max-width: 640px; }
.compare .partial { color: #c98a1b; font-weight: 600; }
.compare thead th a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--border); }
.compare .vdate { display: block; font-weight: 400; font-size: 10.5px; color: var(--muted); margin-top: 2px; }

/* MDX input -> output demo */
.mdx-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 860px; margin: 0 auto; }
@media (max-width: 720px) { .mdx-demo { grid-template-columns: 1fr; } }
.mdx-demo .pane { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: hidden; text-align: left; }
.mdx-demo .pane-head { padding: 9px 14px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.mdx-demo pre { margin: 0; padding: 16px; font-size: 13px; line-height: 1.55; overflow-x: auto; }
.mdx-demo .pane-body { padding: 16px; }
.demo-callout { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 10px 12px; border-radius: 8px; font-size: 14px; margin-bottom: 12px; }
.demo-comp { border: 1px dashed var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.demo-comp code { color: var(--accent); }
.demo-comp span { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.mdx-demo-note { text-align: center; color: var(--muted); font-size: 14px; max-width: 720px; margin: 18px auto 0; }

/* Pre-launch honesty */
.prelaunch-note { max-width: 560px; margin: 14px auto 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, #c98a1b 45%, transparent); background: color-mix(in srgb, #c98a1b 8%, transparent); border-radius: 10px; font-size: 13.5px; color: var(--fg); }
.btn-disabled { opacity: .55; cursor: not-allowed; }

/* Comparison pages (/compare/*) — generated by build-compare-pages.mjs */
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); border-bottom: 1px dotted var(--border); }
.crumbs a:hover { color: var(--accent); }
.cmp-hero { padding-top: 52px; }
.cmp-tldr { max-width: 760px; margin: 0 auto; font-size: 17px; color: var(--fg); text-align: left; }

/* Choose-us / choose-them cards */
.cmp-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 860px; margin: 30px auto 0; }
.cmp-choose-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; }
.cmp-choose-h { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: 8px; }
.cmp-choose-card p { margin: 0; color: var(--fg); font-size: 15px; }

/* Strengths, both ways */
.cmp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 940px; margin: 0 auto; }
.cmp-col { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; }
.cmp-win { border-top: 3px solid #22b06b; }
.cmp-lose { border-top: 3px solid #c98a1b; }
.cmp-col h3 { margin: 0 0 12px; font-size: 17px; }
.cmp-list { list-style: none; padding: 0; margin: 0; }
.cmp-list li { position: relative; padding: 8px 0 8px 26px; font-size: 14.5px; color: var(--muted); border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.cmp-list li:last-child { border-bottom: none; }
.cmp-win .cmp-list li::before { content: '✓'; position: absolute; left: 0; top: 8px; color: #22b06b; font-weight: 800; }
.cmp-lose .cmp-list li::before { content: '•'; position: absolute; left: 4px; top: 8px; color: #c98a1b; font-weight: 800; }

/* Prose sections */
.cmp-narrow { max-width: 780px; }
.cmp-prose { margin: 0 0 26px; }
.cmp-prose:last-child { margin-bottom: 0; }
.cmp-prose h3 { font-size: 20px; letter-spacing: -0.01em; margin: 0 0 8px; }
.cmp-prose p { margin: 0; color: var(--fg); font-size: 15.5px; }

/* More comparisons + hub */
.cmp-more { text-align: center; margin-top: 30px; }
.cmp-more h3 { font-size: 15px; color: var(--muted); font-weight: 600; margin: 0 0 14px; }
.cmp-more-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cmp-more-link { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-size: 13.5px; font-weight: 600; color: var(--fg); }
.cmp-more-link:hover { border-color: var(--accent); color: var(--accent); }
.cmp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .cmp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cmp-grid { grid-template-columns: 1fr; } }
.cmp-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: transform .1s ease, border-color .15s ease; }
.cmp-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.cmp-card-h { font-weight: 700; font-size: 18px; color: var(--fg-strong); margin-bottom: 8px; }
.cmp-card p { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; flex: 1; }
.cmp-card-cta { color: var(--accent); font-size: 14px; font-weight: 600; }

@media (max-width: 640px) {
  .cmp-choose, .cmp-cols { grid-template-columns: 1fr; }
}

/* ── Review-ledger system (ported from the pitch-redesign run). Code panels stay dark in
   both themes by design. ── */
:root {
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --note: #9a6700;
  --accent-wash: color-mix(in srgb, var(--accent) 14%, transparent);
  --code-bg: #071320;
  --code-surface: #0d1f31;
  --code-text: #d7e3ee;
  --code-muted: #7d97ae;
  --diff-add: rgba(47, 203, 134, .18);
  --diff-del: rgba(228, 146, 143, .15);
  --diff-note: rgba(217, 164, 65, .16);
}
:root[data-theme="dark"] { --note: #d9a441; }

/* figure / capture panel */
.ledger { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--card); box-shadow: var(--shadow); margin: 0; }
.ledger-chrome { display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.ledger-chrome .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--border); flex: none; }
.ledger-name { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: 6px; }
.ledger-tag { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--accent);
  background: var(--accent-wash); padding: 3px 9px; border-radius: 999px; }
.ledger img { width: 100%; height: auto; display: block; }
.ledger figcaption { font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  padding: 10px 14px; border-top: 1px solid var(--border); background: var(--bg-soft); line-height: 1.5; }
.hero-figure { max-width: 900px; margin: 54px auto 0; }

/* Real app screenshots. These already carry the macOS window chrome, so unlike
   .ledger they get no drawn titlebar — that would double it up. */
.shot { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--card); box-shadow: var(--shadow); margin: 0; }
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption { font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  padding: 10px 14px; border-top: 1px solid var(--border); background: var(--bg-soft); line-height: 1.5; }
/* Appearance-matched captures, swapped by the theme toggle rather than by
   prefers-color-scheme, since the toggle overrides the OS preference. */
.shot-dark { display: none; }
:root[data-theme="dark"] .shot-light { display: none; }
:root[data-theme="dark"] .shot-dark { display: block; }

/* terminal / diff panel */
.codeledger { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; }
.cl-head { display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  background: var(--code-surface); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.cl-head .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); flex: none; }
.cl-head .name { font-family: var(--mono); font-size: 11.5px; color: var(--code-muted); margin-left: 6px; }
.codeledger pre { margin: 0; padding: 16px 14px; overflow-x: auto; max-width: 100%; }
.codeledger code { font-family: var(--mono); font-size: 11.5px; line-height: 1.8;
  color: var(--code-text); white-space: pre; }
.ln { color: var(--code-muted); opacity: .65; user-select: none; }
.c-dim { color: var(--code-muted); }
.c-cmd { color: #4ade9b; }
.c-warn { color: #e7b85c; }
.c-flag { color: #e0a66b; }
.c-str { color: #7fb0ff; }
.diffline { display: inline-block; padding: 1px 8px; border-radius: 4px; }
.diff-add { background: var(--diff-add); color: var(--code-text); }
.diff-del { background: var(--diff-del); color: #e4a9a9; text-decoration: line-through;
  text-decoration-color: rgba(228, 146, 143, .55); }
.diff-note { background: var(--diff-note); color: #e7c98c; }

/* section furniture */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .06em; text-transform: lowercase; color: var(--accent); }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .7; }
.space-motif { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono);
  font-size: 12.5px; color: var(--muted); margin-top: 20px; }
.keycap { font-family: var(--mono); font-size: 12px; color: var(--fg-strong); background: var(--card);
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 7px; padding: 4px 14px; }

/* stat strip */
.strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.strip-in { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; }
.stat { padding: 24px clamp(16px, 2.4vw, 30px); border-right: 1px solid var(--border); min-width: 0; }
.stat:last-child { border-right: none; }
.stat .n { font-family: var(--mono); font-size: clamp(23px, 3vw, 31px); color: var(--fg-strong);
  font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .n span { color: var(--accent); }
.stat .l { font-size: 13.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; }

/* workflow */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.flow-step { padding: 20px 20px 22px; border-right: 1px solid var(--border); min-width: 0; }
.flow-step:last-child { border-right: none; }
.flow-step .num { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: .08em; }
.flow-step h3 { font-size: 16px; margin: 10px 0 0; color: var(--fg-strong); }
.flow-step p { font-size: 13.5px; color: var(--muted); margin-top: 7px; line-height: 1.5; }

/* two-column pillar */
.stack { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 76px); }
.spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: center; }
.spotlight > * { min-width: 0; }
.spot-copy h3 { font-size: 23px; margin: 0; color: var(--fg-strong); }
.spot-copy > p { margin-top: 12px; color: var(--muted); font-size: 16px; }
.spot-list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 11px; }
.spot-list li { display: flex; gap: 11px; font-size: 15px; color: var(--muted); align-items: flex-start; }
.spot-list li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.spot-list b { color: var(--fg-strong); font-weight: 620; }
.pillar-mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 11px; background: var(--accent-wash); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); margin-bottom: 16px; }
.pillar-mark svg { width: 21px; height: 21px; }

/* surface availability list */
.surfaces { display: flex; flex-direction: column; gap: 2px; }
.surface-row { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--border); font-size: 14.5px; }
.surface-row:last-child { border-bottom: none; }
.surface-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.surface-row .nm { color: var(--fg); }
.avail { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.avail.build { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.avail.soon { color: var(--note); border-color: color-mix(in srgb, var(--note) 35%, transparent); }
.platform-note { font-size: 13px; color: var(--muted); margin-top: 16px; line-height: 1.6; }

/* Cookie consent banner — injected by analytics.js */
.consent {
  position: fixed; z-index: 100; left: 24px; right: 24px; bottom: 24px;
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px;
  padding: 16px 20px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.consent-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.consent-text a { color: var(--accent); text-decoration: underline; }
/* Equal weight on both buttons: a decline that reads as the quieter option is not a free choice. */
.consent-actions { display: flex; gap: 10px; flex: none; margin-left: auto; }
.consent-actions .btn { padding: 9px 18px; font-size: 14px; }

@media (max-width: 560px) {
  .consent { left: 12px; right: 12px; bottom: 12px; flex-direction: column; align-items: stretch; gap: 14px; }
  .consent-actions { margin-left: 0; }
  .consent-actions .btn { flex: 1; justify-content: center; }
}

@media (max-width: 900px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow-step { border-bottom: 1px solid var(--border); }
}
@media (max-width: 860px) {
  .spotlight { grid-template-columns: 1fr; }
  .strip-in { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .flow { grid-template-columns: 1fr; }
  .flow-step { border-right: none; }
  .strip-in { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--border); }
}