/* LakehouseBox (lakehousebox.com) — one hand-written stylesheet, no build step.
   Fonts are self-hosted (fonts/fonts.css). No third-party request is made by any page. */

:root {
  --bg: #fbf8f4; --bg-soft: #f5efe7; --ink: #1a1917; --ink-soft: #4f4a44; --muted: #77706a;
  --rule: #e5ded4; --accent: #e0471c; --accent-deep: #c23c14; --tint: #fdece3; --ok: #3ca66a;
  --dark: #1f1d1b; --dark-2: #2b2826; --code: #efe9df; --code-dim: #9a928a; --ok-text: #2a7d4f;
  /* 2026-09-21 LakehouseBox tokens (docs/design/lakehousebox-handoff/tokens.css) */
  --action: #bb3614; --lake: #e0f1f7; --night: #191e21; --width: 1320px; --gutter: 56px;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 10; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 6px; font-size: 15px; }
.skip:focus { top: 12px; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; font-size: 17px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
p a, td a, .panel li a, article.legal li a, article.doc li a, .docnav a.on { border-bottom: 1px solid var(--accent); }
code, pre { font-family: var(--mono); }
.wrap { max-width: calc(var(--width) + 2 * var(--gutter)); margin: 0 auto; padding: 16px var(--gutter) 0; position: relative; }
.serif { font-family: var(--serif); }
.mono { font-family: var(--mono); }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 20px; }
.eyebrow .n { display: inline-block; border: 1px solid var(--ink); border-radius: 6px; padding: 1px 8px; margin-right: 12px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* nav */
nav.top { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; min-height: 72px; margin-bottom: 40px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-weight: 600; font-size: 27px; letter-spacing: -.02em; font-variation-settings: "opsz" 36; white-space: nowrap; }
.brand .mark { flex: none; }
nav.top ul { display: flex; gap: 8px 28px; list-style: none; margin: 0 auto; padding: 0; font-size: 15px; color: var(--ink); flex-wrap: wrap; }
nav.top ul a { display: inline-block; padding: 10px 0 8px; color: var(--ink); font-weight: 500; border-bottom: 3px solid transparent; }
nav.top ul a[aria-current="page"] { border-bottom-color: var(--accent); }
nav.top ul a:hover { color: var(--ink); }
nav.top .menu { display: none; font: inherit; font-size: 15px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--ink); border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; }
nav.top .menu[aria-expanded="true"] { background: var(--ink); color: #fff; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: 7px; background: var(--action); color: #fff; min-height: 44px; font-family: var(--serif); font-size: 20px; font-weight: 500; font-variation-settings: "opsz" 20; border: 0; cursor: pointer; }
.btn:hover { background: #9c2c0f; }
.btn.sm { padding: 8px 20px; font-size: 18px; white-space: nowrap; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.btn[disabled] { opacity: .55; cursor: default; }
.link { font-family: var(--serif); font-size: 20px; border-bottom: 1.5px solid var(--accent); padding-bottom: 1px; }

.sql { background: var(--dark); border-radius: 8px; padding: 16px 16px 14px; font-family: var(--mono); font-size: 12px; color: var(--code); opacity: 0; animation: rise .5s ease-out 4.6s forwards; }
.sql .q { color: var(--accent); }
.sql .kw { color: #f0a48a; }
.sql table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 12px; background: var(--dark-2); border-radius: 6px; overflow: hidden; }
.sql th, .sql td { text-align: left; padding: 7px 10px; border-bottom: 1px solid #3a3634; font-weight: 400; }
.sql th { color: var(--code-dim); }
.sql td + td, .sql th + th { border-left: 1px solid #3a3634; }
.sql tr:last-child td { border-bottom: 0; }
.sql tbody tr { opacity: 0; animation: rise .35s ease-out forwards; }
.sql tbody tr:nth-child(1) { animation-delay: 5.3s; } .sql tbody tr:nth-child(2) { animation-delay: 5.55s; } .sql tbody tr:nth-child(3) { animation-delay: 5.8s; }
/* shared: page-level type and the small helpers other pages use */
h1 { font-family: var(--serif); font-weight: 600; font-size: 88px; line-height: 1; letter-spacing: -.025em; margin: 0 0 24px; font-variation-settings: "opsz" 72; }
h1 em { font-style: normal; color: var(--accent); }
.sub { font-family: var(--serif); font-size: 23px; line-height: 1.35; color: var(--ink-soft); margin: 0 0 30px; max-width: 34ch; font-variation-settings: "opsz" 22; }
.ctas { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.fine { font-size: 15px; color: var(--muted); }
.fine a { border-bottom: 1px solid var(--rule); }
button.copy { font: inherit; font-size: 13px; min-height: 36px; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
button.copy:hover { background: var(--ink); color: #fff; }

/* sections */
section.block { padding: 96px 0 0; }
#foundations h2, #benefits h2, #deploy h2 { max-width: none; }
.soon { display: inline-block; margin-left: 12px; border: 1px solid var(--accent); color: var(--accent-deep); border-radius: 6px; padding: 1px 8px; letter-spacing: .14em; }
h2 { font-family: var(--serif); font-weight: 600; font-size: 64px; letter-spacing: -.025em; line-height: 1.02; margin: 0 0 44px; font-variation-settings: "opsz" 72; max-width: 22ch; }
h2 em { font-style: normal; color: var(--accent); }
h3 { font-family: var(--serif); font-weight: 600; font-size: 25px; margin: 0 0 8px; font-variation-settings: "opsz" 24; }
.lede { font-family: var(--serif); font-size: 23px; line-height: 1.4; color: var(--ink-soft); max-width: 56ch; margin: 0 0 40px; font-variation-settings: "opsz" 22; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); }
.three > div { display: grid; grid-template-columns: 60px 1fr; gap: 24px; padding-right: 40px; }
.three > div + div { border-left: 1px solid var(--rule); padding-left: 40px; }
.three svg { width: 50px; height: 50px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.three p { margin: 0; color: var(--ink-soft); font-family: var(--serif); font-size: 19px; line-height: 1.45; font-variation-settings: "opsz" 18; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.two .left p { font-family: var(--serif); font-size: 21px; line-height: 1.45; color: var(--ink-soft); font-variation-settings: "opsz" 20; margin: 0 0 18px; }
table.plain { width: 100%; border-collapse: collapse; font-size: 15.5px; }
table.plain th, table.plain td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.plain th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
table.plain td:first-child { font-family: var(--serif); font-size: 19px; font-variation-settings: "opsz" 18; white-space: nowrap; }
table.plain .yes { color: var(--ok-text); font-weight: 500; }
table.plain .no { color: var(--muted); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.stepcard { border: 1px solid var(--rule); border-radius: 10px; background: #fff; padding: 22px 24px 20px; display: flex; flex-direction: column; }
.stepcard .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; color: var(--accent-deep); margin-bottom: 10px; }
.stepcard p { margin: 0 0 14px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; }
pre.code { margin: auto 0 0; background: var(--dark); color: var(--code); border-radius: 8px; padding: 14px 16px; font-size: 12px; line-height: 1.6; overflow-x: auto; white-space: pre; }
pre.code .c { color: var(--code-dim); }
pre.code .k { color: #f0a48a; }
pre.code .s { color: #d9c8a6; }

.agents { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; margin-top: 28px; }
.panel { border: 1px solid var(--rule); border-radius: 10px; background: #fff; padding: 22px 24px; }
.panel h3 { font-size: 22px; }
.panel ul { margin: 0; padding: 0 0 0 1.1em; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.panel li { margin: 0 0 8px; }
.panel li b { color: var(--ink); font-weight: 500; }
.quote { background: var(--tint); border-radius: 8px; padding: 16px 18px; font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink); margin: 0 0 12px; white-space: pre-wrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips span { font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--rule); border-radius: 6px; padding: 4px 10px; color: var(--ink-soft); }

.pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.tier { border: 1px solid var(--ink); border-radius: 10px; background: #fff; padding: 28px 30px; }
.tier .price { font-family: var(--serif); font-size: 64px; font-weight: 600; letter-spacing: -.02em; line-height: 1; margin: 6px 0 4px; font-variation-settings: "opsz" 72; }
.tier .price small { font-size: 22px; font-weight: 400; color: var(--ink-soft); margin-left: 6px; letter-spacing: 0; }
.tier ul { margin: 18px 0 0; padding: 0; list-style: none; }
.tier li { padding: 9px 0; border-top: 1px solid var(--rule); font-size: 15.5px; display: flex; justify-content: space-between; gap: 16px; }
.tier li span:last-child { color: var(--ink-soft); font-family: var(--mono); font-size: 12.5px; text-align: right; }
.tier .btn { margin-top: 22px; }
.roadmap h3 { margin-bottom: 14px; }
.roadmap ul { margin: 0; padding: 0; list-style: none; }
.roadmap li { padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15.5px; color: var(--ink-soft); display: grid; grid-template-columns: 1fr auto; gap: 16px; }
.roadmap li b { color: var(--ink); font-weight: 500; }
.roadmap li span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--muted); align-self: center; }

footer { margin-top: 110px; border-top: 1px solid var(--rule); padding: 36px 0 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: start; font-size: 14.5px; color: var(--ink-soft); }
footer .brand { font-size: 26px; margin-bottom: 10px; }
footer ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px 22px; flex-wrap: wrap; justify-content: flex-end; }
footer ul a { display: inline-block; padding: 6px 0; }
footer p { margin: 6px 0 0; max-width: 62ch; }

/* signup */
.form-wrap { max-width: 560px; }
.field { margin: 0 0 18px; }
.field label { display: block; font-size: 14.5px; color: var(--ink-soft); margin-bottom: 6px; }
.field input { width: 100%; padding: 12px 14px; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 7px; }
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field .hint { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-soft); margin: 0 0 22px; }
.check input { margin-top: 4px; }
.err { display: none; border-left: 3px solid var(--accent); background: var(--tint); color: var(--accent-deep); padding: 12px 16px; margin: 0 0 18px; font-size: 15px; border-radius: 4px; }
.err b { font-family: var(--mono); font-size: 13px; }
.stage { display: none; }
.stage.on { display: block; }
.keybox { background: var(--dark); color: var(--code); padding: 16px 18px; border-radius: 8px; font-family: var(--mono); font-size: 13px; word-break: break-all; position: relative; }
.keybox .copy { position: absolute; right: 10px; top: 10px; background: var(--dark-2); color: var(--code); border: 1px solid #3a3634; border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 11.5px; cursor: pointer; }
.warn { border-left: 3px solid var(--accent); background: var(--bg-soft); padding: 12px 16px; margin: 16px 0; font-size: 15px; }
details { margin: 20px 0; font-size: 14.5px; color: var(--ink-soft); }
details summary { cursor: pointer; }

/* legal + docs (the same long-form article) */
article.legal, article.doc { max-width: 78ch; font-size: 16.5px; line-height: 1.6; }
article.legal h1, article.doc h1 { font-size: 52px; margin-bottom: 18px; }
article.legal h2, article.doc h2 { font-size: 32px; margin: 56px 0 16px; max-width: none; letter-spacing: -.02em; }
article.legal h3, article.doc h3 { font-size: 22px; margin: 28px 0 10px; }
article.legal table, article.doc table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14.5px; margin: 18px 0 24px; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
article.legal th, article.legal td, article.doc th, article.doc td { border-top: 1px solid var(--rule); padding: 10px 12px; text-align: left; vertical-align: top; }
article.legal th, article.doc th { border-top: 0; }
article.legal td + td, article.legal th + th, article.doc td + td, article.doc th + th { border-left: 1px solid var(--rule); }
article.legal th, article.doc th { background: var(--bg-soft); font-weight: 500; }
article.legal blockquote, article.doc blockquote { border-left: 3px solid var(--accent); margin: 0 0 20px; padding: 8px 16px; background: var(--tint); }
article.legal code, article.doc code { font-size: 13.5px; background: var(--bg-soft); border: 1px solid #ece4d8; padding: 1px 6px; border-radius: 5px; }
article.legal pre, article.doc pre { background: #15191c; color: var(--code); padding: 18px 20px; border-radius: 10px; overflow-x: auto; font-size: 13px; line-height: 1.65; margin: 18px 0 22px; border: 1px solid #2a3237; }
article.legal pre code, article.doc pre code { background: none; color: inherit; padding: 0; border: 0; font-size: inherit; }
.draft { border: 1px solid var(--accent); background: var(--tint); border-radius: 8px; padding: 14px 18px; font-size: 15px; margin: 0 0 32px; max-width: 78ch; }
.legalnav { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 28px; }
.legalnav a.on { color: var(--accent-deep); }

@media (prefers-reduced-motion: reduce) {
  .fly, .cur { display: none; }
  * { animation: none !important; }
  .sql, .sql tbody tr { opacity: 1; transform: none; }
  .connector path { stroke-dashoffset: 0; }
}
@media (max-width: 1100px) {
  .wrap { padding: 16px 32px 0; }
  h1 { font-size: 60px; } h2 { font-size: 44px; }
  /* minmax(0, 1fr), not 1fr: a bare 1fr's minimum is the content, and a step card's pre.code (white-space: pre) is
     559 px wide, which made the whole page 627 px at a 390 px viewport (measured 2026-09-21); with a 0 minimum the
     card shrinks and the pre scrolls inside it */
  .three, .two, .steps, .agents, .pricing { grid-template-columns: minmax(0, 1fr); }
  .stepcard, .panel, .tier, .roadmap { min-width: 0; }
  .three > div + div { border-left: 0; padding-left: 0; margin-top: 36px; }
  nav.top ul { gap: 6px 20px; font-size: 15px; }
  footer { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wrap { padding: 12px 20px 0; }
  .brand { font-size: 26px; gap: 8px; }
  .brand .mark { width: 26px; height: 26px; }
  .btn.sm { padding: 7px 14px; font-size: 16px; }
  h1 { font-size: 44px; } h2 { font-size: 36px; }
  .sub, .lede { font-size: 19px; }
  .ctas { gap: 16px; }
  .tier { padding: 22px 18px; } .tier .price { font-size: 48px; }
  .card-form { padding: 20px 18px; }
  table.plain td:first-child { white-space: normal; }
  footer ul { gap: 10px 16px; }
}
/* a link that is a button (no navigation, no `#`): the signup page's "Wrong address?" (item 12) */
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-deep); text-decoration: underline; cursor: pointer; }

/* docs */
article.doc { max-width: 86ch; }
article.doc h1 { font-size: 46px; }
article.doc .lede { font-size: 20px; margin-bottom: 28px; max-width: none; }
article.doc table { font-size: 14px; }
article.doc td:first-child code { white-space: nowrap; }
article.doc dl { margin: 0 0 24px; }
article.doc dt { font-weight: 500; margin-top: 16px; }
article.doc dd { margin: 4px 0 0; color: var(--ink-soft); }
article.doc .route { border: 1px solid var(--rule); border-radius: 8px; padding: 14px 18px; margin: 0 0 14px; background: #fff; }
article.doc .route h3 { margin: 0 0 8px; font-family: var(--mono); font-size: 16px; font-weight: 500; }
article.doc .route h3 .m { display: inline-block; min-width: 4.5em; color: var(--accent-deep); }
article.doc .route p { margin: 6px 0; font-size: 15px; }
article.doc .route .kv { font-size: 14px; color: var(--ink-soft); margin: 4px 0; }
article.doc .route .kv b { color: var(--ink); font-weight: 500; }
article.doc .warnbox { border-left: 3px solid var(--accent); background: var(--tint); padding: 10px 16px; margin: 16px 0; border-radius: 4px; font-size: 15px; }
.docnav { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 28px; }
.docnav a { padding-bottom: 4px; border-bottom: 2px solid transparent; }
.docnav a.on { color: var(--accent-deep); border-bottom-color: var(--accent); }
/* 404 */
.notfound { min-height: 40vh; }
.notfound h1 { font-size: 64px; }
@media print {
  nav.top, footer ul, .skip, .btn, .menu { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  article.legal, article.doc { max-width: none; }
  a { border-bottom: 0; }
}

/* signup (2026-09-20: our own page, two columns; docs/permissions-and-access.md) */
.signup { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 72px; align-items: start; }
.signup h1 { font-size: 64px; }
.checks { list-style: none; margin: 0 0 40px; padding: 0; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 16px; align-items: start; margin: 0 0 20px; font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
.checks li b { color: var(--ink); font-weight: 500; }
.checks .chk { width: 24px; height: 24px; border-radius: 50%; background: var(--ok); display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.checks .chk svg { width: 14px; height: 14px; }
.selfhost { border: 1px solid var(--rule); border-radius: 10px; background: #fff; padding: 20px 24px; max-width: 520px; }
.selfhost h3 { margin: 0 0 8px; font-size: 20px; }
.selfhost p { margin: 0 0 12px; color: var(--ink-soft); font-size: 15.5px; }
.selfhost .link { font-size: 17px; }
.card-form { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 28px 30px; box-shadow: 0 18px 50px rgba(26, 25, 23, .06), 0 1px 3px rgba(26, 25, 23, .05); }
.card-form h2 { font-size: 40px; margin: 0 0 14px; }
.card-form .sub { font-size: 19px; max-width: none; }
.card-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.card-form .nocard { text-align: center; margin: 10px 0 18px; }
.card-form .terms { margin: 0 0 12px; }
.card-form select { width: 100%; padding: 12px 14px; font: inherit; border: 1px solid var(--rule); border-radius: 7px; background: #fff; }
.card-form pre.code { margin: 0 0 18px; }
.card-form h3 { margin: 24px 0 8px; }
.card-form .keybox { margin: 0 0 10px; }
.selfhosted-api { margin-top: 18px; }
.selfhosted-api summary { cursor: pointer; }
.selfhosted-api .field { margin-top: 12px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.handle { display: flex; align-items: center; border: 1px solid var(--rule); border-radius: 7px; background: #fff; overflow: hidden; }
.handle .pre { font-family: var(--mono); font-size: 13.5px; color: var(--muted); padding: 0 0 0 14px; white-space: nowrap; }
.handle input { border: 0 !important; border-radius: 0 !important; font-family: var(--mono); padding-left: 4px !important; }
.handle input:focus { outline: none !important; }
.handle.taken { border-color: var(--accent); }
.handle.free { border-color: var(--ok); }
.hidden { display: none !important; }
.note { border-left: 3px solid var(--ok); background: #eef8f1; color: var(--ok-text); padding: 10px 14px; border-radius: 4px; font-size: 14.5px; margin: 0 0 18px; }
@media (max-width: 1000px) {
  .signup { grid-template-columns: 1fr; gap: 36px; }
  .signup h1 { font-size: 48px; }
}

/* blog (generated by docs_build.py from blog/) */
article.post .eyebrow { margin-bottom: 14px; }
article.post .postfoot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--rule); }
article.post .postlist { list-style: none; padding: 0; margin: 0; }
article.post .postlist li { margin: 0 0 32px; }
article.post .postlist time { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
article.post .postlist h2 { font-size: 26px; margin: 4px 0 8px; }
article.post .postlist h2 a { border-bottom: none; }
article.post .postlist p { margin: 0; color: var(--ink-soft); }

/* ------------------------------------------------------------------------------------------------
   Homepage (2026-09-21, LakehouseBox; docs/design/lakehousebox-site-2026-09-21.md). Full-bleed
   sections carry their own .inner; body.home scopes the type that differs from the other pages. */
.inner { max-width: calc(var(--width) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
body.home .eyebrow { font-size: 11.5px; letter-spacing: .2em; color: var(--accent); margin: 0 0 20px; }
body.home h1 { font-weight: 400; font-size: clamp(48px, 5.9vw, 84px); line-height: 1.0; letter-spacing: -.04em; margin: 0 0 26px; font-variation-settings: "opsz" 72; text-wrap: balance; }
body.home h1 em { font-style: italic; color: var(--accent); }
body.home h2 { font-weight: 400; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 22px; max-width: 22ch; text-wrap: balance; }
body.home h3 { font-weight: 500; font-size: 24px; line-height: 1.2; margin: 0 0 8px; }
body.home .sub { font-family: var(--sans); font-size: 17.5px; line-height: 1.55; color: var(--muted); max-width: 46ch; margin: 0 0 30px; }
body.home .link { font-size: 18px; border-bottom-color: var(--accent); display: inline-block; padding: 6px 0; }
body.home section.block { padding: 84px 0; }
body.home .soon { font-family: var(--mono); font-size: 11px; text-transform: uppercase; vertical-align: middle; }

/* hero */
.hero { padding: 28px 0 0; }
.hero-grid { display: grid; grid-template-columns: 50fr 50fr; gap: 32px; align-items: center; }
.hero-copy .ctas { margin: 0 0 22px; }
.hero-copy .fine { margin: 0 0 6px; }
.deploy-link a { border-bottom-color: var(--accent); color: var(--ink-soft); }
.art { position: relative; padding-top: 22%; }
.art picture, .art img { display: block; width: 100%; height: auto; }
.art img { aspect-ratio: 1 / 1; }
/* the floating cards: dark "terminals" with a small cream table card attached, wired into the box */
.tcard { position: absolute; z-index: 2; border: 1px solid #3d474d; border-radius: 12px; padding: 12px 16px 14px; color: #edf3f5; background: linear-gradient(180deg, #232a2e, #171c1f); box-shadow: 0 18px 36px rgba(25, 30, 33, .22), 0 2px 4px rgba(25, 30, 33, .18); font-family: var(--mono); font-size: 11.5px; line-height: 1.7; }
.tc-left { top: 0; left: 0; width: 47%; }
.tc-right { top: 4%; right: 0; width: 36%; }
.tc-hd { font-size: 15px; letter-spacing: .01em; color: #fff; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #364249; font-family: var(--sans); font-weight: 500; }
.tc-hd .p, .tcard code .p { color: var(--accent); font-family: var(--mono); }
.tcard code { display: block; white-space: pre-wrap; word-break: break-word; font-family: inherit; color: #c9d5db; }
.tcard code .k { color: #f6ad84; }
.mini { position: absolute; right: -14%; bottom: -34%; width: 46%; background: #fbf8f4; color: var(--ink); border: 1px solid #e3d8c8; border-radius: 8px; padding: 6px 8px 8px; box-shadow: 0 10px 22px rgba(25, 30, 33, .18); transform: rotate(-4deg); }
.tc-right .mini { right: auto; left: -16%; bottom: -46%; transform: rotate(5deg); }
.mini span { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.mini .grid { display: block; height: 34px; border-radius: 3px; background: linear-gradient(#ded4c5 1px, transparent 1px) 0 0 / 100% 8px, linear-gradient(90deg, #ded4c5 1px, transparent 1px) 0 0 / 25% 100%, #f3ece2; border: 1px solid #ded4c5; }
.connector { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; fill: none; stroke: var(--accent); stroke-width: .35; stroke-linecap: round; overflow: visible; }
.connector path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s cubic-bezier(.4, 0, .2, 1) .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.cur { display: inline-block; width: .55em; height: 1.05em; vertical-align: -.2em; margin-left: 2px; background: #f6ad84; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tc-left .mini { animation: bob-l 5.5s ease-in-out infinite alternate; }
.tc-right .mini { animation: bob-r 6.5s ease-in-out infinite alternate; }
@keyframes bob-l { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(-3deg) translateY(-5px); } }
@keyframes bob-r { from { transform: rotate(5deg) translateY(0); } to { transform: rotate(4deg) translateY(-6px); } }
/* a small table chip rides each connector into the box: the result becomes a table */
.fly { position: absolute; z-index: 1; width: 7%; aspect-ratio: 5 / 3.4; border-radius: 3px; background: linear-gradient(#ded4c5 1px, transparent 1px) 0 0 / 100% 33%, linear-gradient(90deg, #ded4c5 1px, transparent 1px) 0 0 / 25% 100%, #f8f2e8; border: 1px solid #d8cdbc; box-shadow: 0 4px 10px rgba(25, 30, 33, .18); opacity: 0; }
.fly-l { left: 27.5%; top: 31%; animation: fly-l 9s cubic-bezier(.4, 0, .6, 1) 2.2s infinite; }
.fly-r { left: 71.5%; top: 31%; animation: fly-r 9s cubic-bezier(.4, 0, .6, 1) 6.7s infinite; }
@keyframes fly-l { 0% { left: 27.5%; top: 31%; opacity: 0; transform: scale(1); } 6% { opacity: 1; } 24% { left: 34%; top: 46%; } 34% { left: 41.5%; top: 55%; opacity: 1; transform: scale(.75); } 40% { left: 42.5%; top: 58%; opacity: 0; transform: scale(.6); } 100% { opacity: 0; } }
@keyframes fly-r { 0% { left: 71.5%; top: 31%; opacity: 0; transform: scale(1); } 6% { opacity: 1; } 24% { left: 66%; top: 45%; } 34% { left: 59.5%; top: 54%; opacity: 1; transform: scale(.75); } 40% { left: 58.5%; top: 57%; opacity: 0; transform: scale(.6); } 100% { opacity: 0; } }
.annot { position: absolute; right: -2%; bottom: 5%; margin: 0; text-align: left; }
/* handwritten asides (Caveat, self-hosted; decorative, aria-hidden) */
.hand { font-family: "Caveat", "Bradley Hand", "Segoe Print", cursive; font-weight: 500; font-size: 22px; line-height: 1.05; letter-spacing: .01em; color: #6b655e; transform: rotate(-4deg); margin: 0; position: relative; }
.hand .sq { position: absolute; width: 34px; height: 12px; left: -42px; top: 8px; fill: none; stroke: #8a837b; stroke-width: 1.4; stroke-linecap: round; }
.hand-public { position: absolute; right: 8%; bottom: 8%; }
.hand-journal { position: absolute; right: 26px; bottom: 22px; transform: rotate(-6deg); }
.hand-price { position: absolute; right: -8px; top: -30px; transform: rotate(-5deg); font-size: 21px; }
body.home .tier { position: relative; }
.annot.hand { position: absolute; right: 0; bottom: 4%; transform: rotate(-5deg); }
.compat .logos img[src$="spark-icon.svg"] { width: 24px; height: 24px; }

/* the agent prompt */
.entrance { margin-top: 44px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; padding: 22px 26px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px 40px; align-items: start; }
.entrance .hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-weight: 500; font-size: 17px; }
.entrance .quote { margin: 0; font-size: 13.5px; }
.entrance-side p { margin: 0 0 14px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.entrance .chips span { color: var(--muted); }

/* compatibility strip */
.compat { margin-top: 56px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.compat-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 56px; padding-block: 24px; }
.compat .grp { display: flex; align-items: baseline; gap: 18px; }
.compat .grp + .grp { border-left: 1px solid var(--rule); padding-left: 56px; }
.compat .k { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.compat .v { font-family: var(--mono); font-size: 14.5px; color: var(--ink); }
.compat .logos { display: inline-flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.compat .logos > span { display: inline-flex; align-items: center; gap: 8px; }
.compat .logos img { width: 22px; height: 22px; display: block; }
.compat .link { font-size: 15px; padding: 0; border-bottom-color: var(--rule); color: var(--ink-soft); }

/* dark demonstration (recorded 2026-09-20; numbers in the page's head comment) */
.dark { background: #15191c; color: var(--bg); padding: 72px 0 64px; }
.dark .eyebrow { color: #ff7a4a; }
.dark h2 { color: #fff; margin-bottom: 36px; font-size: clamp(32px, 3.4vw, 46px); }
.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.stg h3 { color: #fff; font-size: 23px; font-weight: 400; display: flex; align-items: baseline; gap: 16px; margin: 0 0 14px; }
.stg h3 .n { font-family: var(--serif); font-size: 21px; color: #8d9ba3; }
.stg .cap { color: #9fb0b8; font-size: 14px; line-height: 1.5; margin: 14px 0 0; min-height: 3em; }
.stages { align-items: stretch; }
.stg { display: flex; flex-direction: column; }
.stg .shell { flex: 1; }
.shell { background: linear-gradient(180deg, #24292d, #1d2225); border: 1px solid #3a454b; border-radius: 12px; padding: 14px 18px 18px; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: #edf3f5; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.shell-hd { font-size: 12.5px; color: #dfe7eb; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid #3a454b; }
.shell-hd .p { color: var(--accent); }
.shell .ask { color: #fff; margin-bottom: 12px; }
.shell .p { color: #ff946e; }
.shell .answer { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: #c4cdd1; margin: 0; }
.shell .answer b { color: #fff; font-weight: 500; }
.shell-ft { margin-top: 12px; font-size: 11.5px; color: #9fb0b8; line-height: 1.5; }
.chart { display: block; width: 100%; height: auto; background: var(--bg-soft); border-radius: 8px; padding: 6px 4px 2px; }
.chart .g { stroke: var(--rule); stroke-width: 1; }
.chart .ax { font-family: var(--mono); font-size: 8.5px; fill: var(--muted); }
.chart .rain { fill: #9fb6cc; }
pre.sqlx { margin: 0 0 16px; font-family: inherit; font-size: inherit; white-space: pre-wrap; color: #edf3f5; }
pre.sqlx .k { color: #f6ad84; }
.done { display: grid; grid-template-columns: 24px 1fr; gap: 0 12px; align-items: start; font-family: var(--sans); }
.done .chk { width: 24px; height: 24px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; }
.done .chk svg { width: 13px; height: 13px; }
.done b { display: block; font-weight: 500; font-size: 14.5px; color: #fff; }
.done small { color: #c4cdd1; font-size: 12.5px; line-height: 1.45; display: block; margin-top: 2px; }
.saved { margin-top: 34px; padding-top: 0; border: 0; color: #c9d5db; font-family: var(--mono); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; }
.saved .ti { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.6; margin-right: 4px; }
.saved .tbl { color: #ff946e; }
.saved .dot { color: #6b7a82; }
.closing { font-family: var(--serif); font-size: 26px; line-height: 1.2; color: #fff; margin: 18px 0 0; text-align: center; font-variation-settings: "opsz" 28; }
details.ran { margin: 26px 0 0; border-top: 1px solid #2f383d; padding-top: 12px; font-size: 14px; color: #c4cdd1; }
details.ran summary { cursor: pointer; color: #9fb0b8; font-size: 13px; padding: 6px 0; display: inline-block; }
table.evidence { width: 100%; border-collapse: collapse; font-size: 13.5px; color: #c4cdd1; margin-top: 10px; }
table.evidence td { padding: 8px 0; border-top: 1px solid #364249; vertical-align: top; }
table.evidence td:first-child { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #9fb0b8; width: 72px; padding-right: 12px; padding-top: 10px; }

/* benefits */
.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; margin-top: 44px; }
.four > div { border-top: 1px solid var(--ink); padding-top: 20px; }
.four h3 { font-size: 24px; }
.ico { display: block; width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin: 0 0 16px; }
.four p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.55; }

/* public data */
.public { background: var(--lake); padding: 84px 0 76px; }
.split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 70px; align-items: start; }
.public .sub { color: #3f4a50; }
.public .split > div:first-child { position: relative; }
.public .fine a { border-bottom: 1px solid var(--accent); color: var(--ink-soft); }
.plates { display: flex; align-items: flex-start; margin: 40px 0 0 6px; padding-bottom: 18px; }
.plate { flex: none; width: 33%; max-width: 236px; margin: 0; background: var(--bg); border: 1px solid #c9dde6; border-radius: 9px; overflow: hidden; box-shadow: 0 18px 34px rgba(24, 60, 78, .18), 0 2px 4px rgba(24, 60, 78, .08); transform: rotate(-5deg) translateY(8px); transform-origin: 50% 100%; }
.plate + .plate { margin-left: -14px; }
.plate:nth-child(2) { transform: rotate(0deg); z-index: 1; }
.plate:nth-child(3) { transform: rotate(5deg) translateY(10px); }
.plate figcaption { padding: 12px 14px 10px; }
.plate strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.1; }
.plate span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 5px; }
.plate svg { display: block; width: 100%; height: auto; }
.public .fine { margin: 26px 0 0; color: var(--ink-soft); }
.allowance { border-left: 1px solid #bbd4de; padding-left: 50px; padding-top: 6px; }
.pill { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 7px 14px; border-radius: 20px; background: var(--action); color: #fff; }
.upto { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin: 22px 0 0; }
.number { font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 7.4vw, 108px); line-height: 1; letter-spacing: -.04em; margin: 2px 0 6px; }
.allowance h3 { font-weight: 400; font-size: 34px; line-height: 1.1; margin: 0 0 14px; }
.allowance p { color: #3f4a50; margin: 0 0 18px; }
.allowance code { font-size: 14px; background: #fff; border: 1px solid #bbd4de; border-radius: 4px; padding: 1px 6px; color: var(--action); }

/* deployment */
.deploy .dep { gap: 28px; margin-top: 40px; }
.dep-card { border: 1px solid var(--rule); border-radius: 14px; background: #fff; padding: 28px 30px 30px; }
.dep-hd { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.dep-hd h3 { margin: 0; font-size: 26px; }
.dep-hd .ico { margin: 0; width: 34px; height: 34px; }
.euflag { width: 44px; height: auto; flex: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); border-radius: 3px; }
.dep-card p { font-family: var(--sans); font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; }
.dep-card p.fine { font-size: 14.5px; color: var(--muted); }
.dep-card p a { border-bottom-color: var(--accent); }
.dep-card .providers { margin: 0 0 10px; }
.dep-card .providers span { color: var(--ink-soft); }
.dep-card .link { padding: 0; }

/* journal teaser */
.editorial { padding: 24px 0 72px; }
.edit-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: center; border-top: 1px solid var(--rule); padding-top: 72px; }
.edit-copy .meta { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); margin: -8px 0 26px; }
.edit-copy .btn.ghost { font-size: 17px; }
.edit-art { position: relative; background: var(--lake); border-radius: 18px; padding: 30px 30px 18px; }
.pull { margin: 0 0 6px; font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.2; color: var(--ink); max-width: 24ch; font-variation-settings: "opsz" 28; }
.art.small { max-width: 330px; margin: 8px 0 0 auto; padding-top: 24%; }
.art.small .tcard { width: 52%; font-size: 10.5px; padding: 9px 12px 10px; }
.art.small .tc-hd { font-size: 12.5px; margin-bottom: 5px; padding-bottom: 5px; }

/* pricing */
body.home .pricing { margin-top: 40px; }
body.home .tier .eyebrow { margin: 0; }
body.home .tier .price { font-weight: 400; }
body.home .tier .price small { font-size: 20px; }
.tier .compute-note { margin: 18px 0 0; }
body.home .roadmap h3 { font-size: 24px; }
body.home .roadmap .fine { margin: 18px 0 0; }
body.home .roadmap .fine a { border-bottom-color: var(--accent); }

/* homepage footer sits inside .wrap; the shared footer rules apply */
body.home footer { margin-top: 0; }

@media (max-width: 1100px) {
  .four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inner { padding-inline: 32px; }
  .compat .link { margin-left: 0; }
}
@media (max-width: 900px) {
  /* the navigation disclosure: nav.js adds html.js and toggles .open; without it the list wraps */
  html.js nav.top .menu { display: inline-flex; align-items: center; margin-left: auto; }
  html.js nav.top ul { display: none; order: 3; flex-basis: 100%; flex-direction: column; gap: 0; margin: 0; padding: 6px 0 12px; border-top: 1px solid var(--rule); }
  html.js nav.top.open ul { display: flex; }
  html.js nav.top ul a { display: block; padding: 12px 0; font-size: 17px; color: var(--ink); }
  html:not(.js) nav.top ul { order: 3; flex-basis: 100%; }
  nav.top { min-height: 64px; margin-bottom: 24px; }
  .hero { padding-top: 16px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .art { max-width: 560px; width: 100%; margin: 0 auto; padding-top: 0; }
  .art .tcard { position: static; width: 100%; margin-bottom: 12px; }
  .art .tc-right, .mini, .connector, .annot, .fly, .hand { display: none; }
  .edit-art { padding: 22px 20px 12px; }
  .art.small { margin: 0 auto; }
  .entrance { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 32px; }
  .stages { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .shell { min-height: 0; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .allowance { border-left: 0; border-top: 1px solid #bbd4de; padding: 32px 0 0; }
  .edit-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  body.home section.block, .public, .dark { padding-top: 64px; padding-bottom: 64px; }
  .compat { margin-top: 40px; }
}
@media (max-width: 600px) {
  .inner { padding-inline: 20px; }
  /* brand + Menu on one row; the Start free button joins the opened list (the hero has one anyway) */
  html.js nav.top .btn.sm { display: none; }
  html.js nav.top.open .btn.sm { display: inline-flex; order: 4; margin: 4px 0 8px; }
  .four { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .compat-row { gap: 12px 20px; }
  .compat .grp { flex-direction: column; gap: 4px; }
  .compat .grp + .grp { border-left: 0; padding-left: 0; }
  .plates { margin-left: 0; }
  .plate { width: 34%; }
  .plate + .plate { margin-left: -8px; }
  .plate strong { font-size: 15px; }
  .plate span { font-size: 7px; letter-spacing: .06em; }
  .plate figcaption { padding: 9px 10px 7px; }
  .closing { font-size: 24px; }
  .entrance { padding: 18px; }
  .entrance .hd { flex-wrap: wrap; }
  body.home .tier li { flex-direction: column; gap: 2px; }
  body.home .tier li span:last-child { text-align: left; }
}

/* page h1 (review item 33) */
.page-h1 { font-size: clamp(40px, 6vw, 64px); }
.stage-h2 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 18px; }


/* ============================================================================================================
   The journal's article page (2026-09-22, the founder's mockup): back link, category eyebrow, serif title and
   lede, author row, hero figure, the text beside an "In this article" rail, pull quotes on the lake tint, code
   blocks with a label and Copy (post.js), a closing card, the next article. Generated by docs_build.py.
   ============================================================================================================ */
article.post-article { max-width: none; font-size: 17px; line-height: 1.6; padding-top: 8px; }
.post-back { margin: 0 0 22px; font-size: 15px; }
.post-back a { color: var(--accent); font-weight: 500; border-bottom: 0; }
.post-back a:hover { color: var(--accent-deep); }
.post-head { max-width: 78ch; }
.post-cat { color: var(--accent); margin-bottom: 14px; }
article.post-article h1 { font-size: clamp(40px, 5vw, 62px); line-height: 1.02; letter-spacing: -.025em; margin: 0 0 16px; max-width: 22ch; }
article.post-article .lede { font-family: var(--sans); font-size: 21px; line-height: 1.4; color: var(--ink-soft); margin: 0 0 26px; max-width: 60ch; }
.post-by { display: flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 14.5px; color: var(--ink-soft); margin: 0 0 30px; }
.post-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-soft); border: 1px solid var(--rule); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: var(--ink); }
.post-author { color: var(--ink); font-weight: 500; }
.post-dot { color: var(--muted); }
.post-hero { margin: 0 0 44px; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #f6f1ea, #efe8de); aspect-ratio: 21 / 9; }
.post-hero img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 3% 6%; box-sizing: border-box; }
.post-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; align-items: start; }
.post-body { max-width: 72ch; }
.post-body > p:first-child { font-family: var(--serif); font-size: 24px; line-height: 1.35; color: var(--ink); letter-spacing: -.01em; margin: 0 0 34px; font-variation-settings: "opsz" 22; }
.post-body h2 { font-size: 32px; letter-spacing: -.02em; margin: 44px 0 12px; max-width: none; }
.post-body h3 { font-size: 22px; margin: 28px 0 10px; }
.post-body p { color: var(--ink-soft); margin: 0 0 18px; }
.post-body li { color: var(--ink-soft); margin: 0 0 8px; }
.post-body b, .post-body strong { color: var(--ink); font-weight: 600; }
.post-body a { border-bottom: 1px solid var(--accent); }
.post-body blockquote { display: grid; grid-template-columns: auto 1fr; gap: 0 22px; align-items: center; background: var(--lake); border: 0; border-radius: 10px; margin: 26px 0 30px; padding: 26px 30px 26px 26px; }
.post-body blockquote::before { content: "\201C"; font-family: var(--serif); font-size: 64px; line-height: .6; color: var(--accent); align-self: start; margin-top: 10px; }
.post-body blockquote p { margin: 0; font-family: var(--serif); font-size: 28px; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); border-left: 2px solid rgba(26, 25, 23, .18); padding-left: 22px; }
.post-code { margin: 0 0 8px; border-radius: 10px; overflow: hidden; background: #1e2226; }
.post-code-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; font-family: var(--sans); font-size: 12.5px; color: #b9c3c7; background: #2a2f34; }
.post-code-head button { background: none; border: 0; color: #e9eef1; font: inherit; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 4px; }
.post-code-head button:hover { color: #fff; }
.post-body .post-code pre { margin: 0; border-radius: 0; background: #1e2226; color: #e9eef1; padding: 18px 20px; font-size: 13.5px; line-height: 1.7; display: flex; gap: 22px; }
.post-body pre .post-gutter { color: #6b747a; text-align: right; user-select: none; flex: none; }
.post-body pre code { white-space: pre; }
.post-body pre + p > em:only-child, .post-code + p > em:only-child { font-style: normal; font-size: 13.5px; color: var(--muted); }
.post-body .post-code + p { margin-top: 6px; }
.post-cta { display: flex; align-items: center; gap: 26px; border: 1px solid #f1c9b5; background: linear-gradient(90deg, #fff6f1, #fff); border-radius: 12px; padding: 22px 28px; margin: 40px 0 34px; }
.post-cta-mark svg { width: 44px; height: 44px; display: block; }
.post-cta-h { font-family: var(--serif); font-size: 26px; letter-spacing: -.015em; color: var(--ink); margin: 0 0 6px; }
.post-cta-link { color: var(--accent); font-weight: 600; font-size: 17px; border-bottom: 1px solid var(--accent); }
.post-cta-link:hover { color: var(--accent-deep); }
.post-next { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center; border-top: 1px solid var(--rule); padding: 24px 0 8px; border-bottom: 0 !important; color: var(--ink); }
.post-next-img { display: block; height: 68px; border-radius: 8px; overflow: hidden; background: var(--bg-soft); }
.post-next-img img, .post-next-blank { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.post-next .eyebrow { display: block; color: var(--accent); margin: 0 0 6px; font-size: 11px; }
.post-next-title { display: block; font-family: var(--serif); font-size: 22px; letter-spacing: -.015em; }
.post-next:hover .post-next-title { color: var(--accent-deep); }
.post-rail { position: sticky; top: 24px; border-left: 1px solid var(--rule); padding-left: 24px; font-family: var(--sans); }
.post-toc-h { font-family: var(--serif); font-size: 19px; font-weight: 600; margin: 0 0 12px; color: var(--ink); }
.post-toc ol { list-style: none; margin: 0; padding: 0; }
.post-toc li { margin: 0; }
.post-toc a { display: block; padding: 6px 0 6px 14px; border-left: 2px solid var(--rule); font-size: 14.5px; color: var(--ink-soft); border-bottom: 0; }
.post-toc a:hover { color: var(--ink); }
.post-toc a.on { color: var(--accent); border-left-color: var(--accent); }
.post-copylink { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--rule); width: 100%; background: none; font: inherit; font-size: 14px; color: var(--ink-soft); cursor: pointer; text-align: left; }
.post-copylink svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.post-copylink:hover, .post-copylink.done { color: var(--accent-deep); }
@media (max-width: 1000px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .post-rail { position: static; border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 18px; order: -1; }
  .post-toc a { display: inline-block; border-left: 0; padding: 4px 14px 4px 0; }
  .post-copylink { display: none; }
}
@media (max-width: 640px) {
  .post-hero { aspect-ratio: 4 / 3; }
  .post-body blockquote { grid-template-columns: 1fr; padding: 20px; }
  .post-body blockquote::before { display: none; }
  .post-body blockquote p { border-left: 0; padding-left: 0; font-size: 23px; }
  .post-cta { flex-direction: column; align-items: flex-start; gap: 14px; }
  .post-next { grid-template-columns: 1fr; }
}


/* The blog's front (2026-09-22, the founder's mockup): eyebrow, serif title, one line with the Atom link, then one
   row per post: thumbnail on its tint, category, title, description, date · author, an arrow. Generated by docs_build.py. */
article.post-index { max-width: none; padding-top: 8px; }
.bl-eyebrow { color: var(--accent); margin-bottom: 14px; }
article.post-index h1 { font-size: clamp(44px, 5.6vw, 72px); line-height: 1; letter-spacing: -.03em; margin: 0 0 18px; }
.bl-sub { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 30px; border-bottom: 1px solid var(--rule); }
.bl-sub .lede { font-family: var(--sans); font-size: 24px; color: var(--ink-soft); margin: 0; max-width: none; }
.bl-feed { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 16px; color: var(--ink-soft); border-bottom: 1px solid var(--ink-soft); padding-bottom: 1px; }
.bl-feed:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
.bl-feed svg { width: 18px; height: 18px; fill: #3f7fa8; stroke: #3f7fa8; stroke-width: 2; stroke-linecap: round; }
.bl-feed svg path { fill: none; }
.bl-list { list-style: none; margin: 0; padding: 0; }
.bl-row { display: grid; grid-template-columns: 352px minmax(0, 1fr) auto; gap: 0 44px; align-items: center; padding: 40px 0; border-bottom: 1px solid var(--rule); }
.bl-thumb { display: block; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--tint); border-bottom: 0; }
.bl-thumb img, .bl-blank { display: block; width: 100%; height: 100%; object-fit: contain; }
.bl-row:nth-child(odd) .bl-thumb { background: var(--lake); }
.bl-cat { color: var(--accent); margin: 0 0 10px; }
.bl-text h2 { font-size: 36px; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 12px; max-width: none; }
.bl-text h2 a { border-bottom: 0; }
.bl-text h2 a:hover { color: var(--accent-deep); }
.bl-desc { font-family: var(--sans); font-size: 20px; line-height: 1.45; color: var(--ink-soft); margin: 0 0 14px; max-width: 60ch; }
.bl-meta { font-family: var(--sans); font-size: 16px; color: var(--muted); margin: 0; display: flex; gap: 10px; }
.bl-arrow { font-size: 30px; line-height: 1; color: var(--accent); border-bottom: 0; padding: 8px; }
.bl-arrow:hover { color: var(--accent-deep); transform: translateX(4px); }
@media (max-width: 900px) {
  .bl-row { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 28px 0; }
  .bl-thumb { max-width: 420px; }
  .bl-arrow { display: none; }
  .bl-text h2 { font-size: 28px; }
  .bl-desc { font-size: 18px; }
}

/* Code highlighting on the article page (post.js, keyword lists only, no library) */
.post-code .tk-k { color: #8fd3ff; }
.post-code .tk-f { color: #e2c4ff; }
.post-code .tk-s { color: #c3e88d; }
.post-code .tk-n { color: #f8b76b; }
.post-code .tk-c { color: #8a959c; font-style: italic; }
.post-code .tk-v { color: #ffd479; }
/* pandoc writes <pre class="sql">: the homepage's .sql fade-in must not hide an article's code */
.post-body pre.sql { opacity: 1; animation: none; }


/* Homepage spacing pass (2026-09-22, the founder's annotated review): the 50 GB offer centred against the whole
   left column; the deploy → blog → pricing gaps cut by roughly 40 %; pricing sits closer to the footer; the four
   capability items get a 40 px tinted icon well and firmer headings. Narrow scopes; no fixed heights, no negatives. */
body.home .four { margin-top: 40px; gap: 36px 32px; }
body.home .four > div { padding-top: 22px; }
body.home .four .ico { width: 26px; height: 26px; margin: 0; stroke-width: 1.7; }
body.home .four > div::before { content: none; }
body.home .four .ico-well { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--tint); margin: 0 0 18px; }
body.home .four h3 { font-weight: 600; margin: 0 0 10px; }
body.home .public { padding-bottom: 64px; }
body.home .public .split { align-items: center; }
body.home .allowance { padding-top: 0; }
body.home section.deploy.block { padding-bottom: 52px; }
body.home .editorial { padding: 16px 0 44px; }
body.home .edit-grid { padding-top: 44px; align-items: start; }
body.home .edit-copy { padding-top: 28px; }
body.home #pricing { padding-top: 52px; padding-bottom: 40px; }
@media (max-width: 900px) {
  body.home .public .split { align-items: start; }
  body.home .edit-copy { padding-top: 0; }
  body.home section.deploy.block { padding-bottom: 48px; }
  body.home .editorial { padding: 8px 0 40px; }
  body.home .edit-grid { padding-top: 36px; }
  body.home #pricing { padding-top: 44px; padding-bottom: 36px; }
}

/* Every copy control carries the same small icon (2026-09-22): a pseudo-element with a masked SVG, so it survives the
   label swap to "Copied" and takes the button's colour. Site buttons, the key boxes, the article code blocks, the app. */
button.copy::before, .keybox .copy::before, .post-code-head button::before, .copy-ic::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px; flex: none;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat; }
.keybox .copy::before { width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; }
.post-code-head button::before { margin-right: 4px; }

/* Second restrained pass on the homepage (2026-09-23, the founder's reference rendering): the capabilities section and
   the public-data section sit a little tighter (their bottom padding was the one gap the reference still showed), the
   capability headings share one size and rhythm with the copy under them. No layout, artwork or copy change. */
body.home section.benefits.block { padding-top: 72px; padding-bottom: 60px; }
body.home .four h3 { font-size: 22px; line-height: 1.2; margin: 0 0 8px; }
body.home .four p { font-size: 15.5px; line-height: 1.55; }
body.home .public { padding-top: 72px; padding-bottom: 56px; }
body.home .public .fine { margin-top: 22px; }
@media (max-width: 900px) {
  body.home section.benefits.block { padding-top: 56px; padding-bottom: 48px; }
  body.home .public { padding-top: 56px; padding-bottom: 48px; }
}

/* Messaging pass (2026-09-23): the hero's Iceberg line, and the service-boundary section between the connect area and the
   demo: a centred heading and intro, two plain cards (the second on the lake tint), one closing sentence. */
.hero-copy .hero-note { margin: -8px 0 22px; color: var(--muted); font-size: 14px; }
body.home section.boundary.block { padding: 64px 0 60px; }
.boundary .inner { text-align: center; }
.boundary h2 { margin-left: auto; margin-right: auto; max-width: 26ch; }
.boundary .bnd-intro { margin: 0 auto 34px; max-width: 64ch; }
.bnd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; text-align: left; }
.bnd-card { border: 1px solid var(--rule); border-radius: 14px; background: #fff; padding: 24px 26px 20px; display: flex; flex-direction: column; }
.bnd-card.us { background: var(--lake); border-color: #bbd4de; }
.bnd-card .eyebrow { margin: 0 0 16px; }
.bnd-card.us .eyebrow { color: #2974a2; }
.bnd-hd { display: flex; gap: 16px; align-items: flex-start; }
.bnd-hd .ico-well { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--tint); flex: none; }
.bnd-card.us .ico-well { background: #fff; }
.bnd-hd .ico { width: 26px; height: 26px; margin: 0; stroke-width: 1.7; }
.bnd-card h3 { font-family: var(--sans); font-weight: 600; font-size: 19px; line-height: 1.3; margin: 6px 0 8px; }
.bnd-card p { font-family: var(--sans); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.bnd-card.us p { color: #3f4a50; }
.bnd-when { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); font-style: italic; color: var(--muted) !important; font-size: 14.5px !important; }
.bnd-card.us .bnd-when { border-top-color: #bbd4de; }
.bnd-hd + .bnd-when { margin-top: 18px; }
.bnd-close { margin: 28px auto 0; max-width: 64ch; font-family: var(--sans); font-size: 16px; color: var(--ink-soft); }
@media (max-width: 900px) {
  .bnd-grid { grid-template-columns: minmax(0, 1fr); }
  .boundary .inner { text-align: left; }
  .boundary h2, .boundary .bnd-intro, .bnd-close { margin-left: 0; }
  body.home section.boundary.block { padding: 48px 0 48px; }
}
body.home .boundary h2 { margin: 0 auto 18px; }
body.home .boundary .bnd-intro { margin: 0 auto 34px; max-width: 64ch; }
@media (max-width: 900px) {
  body.home .boundary h2, body.home .boundary .bnd-intro { margin-left: 0; margin-right: 0; }
}