@font-face {
  font-family: "Zodiak";
  src: url("/assets/zodiak.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* page */
  --bg: #050608;
  --ink: #f6f2e8;          /* headings */
  --text: #ebe6dc;         /* body on page */
  --text-panel: #e6e1d7;   /* body on panels (>= #d9d4ca) */
  --muted: #cfc9be;        /* secondary: 8.5:1 on panels, 12:1 on bg */
  /* glass panels: lighter, still opaque enough to read (body text 11:1 on them) */
  --pane: rgba(50, 52, 62, .8);
  --pane-strong: rgba(56, 58, 69, .92);
  --pane-border: rgba(255, 226, 160, .26);
  --pane-hi: inset 0 1px 0 rgba(255, 255, 255, .22);
  /* light falling on the glass from the top-left window: a gradient, never a blur */
  --pane-light: radial-gradient(130% 90% at 0% 0%, rgba(252, 222, 150, .085), rgba(252, 222, 150, 0) 60%);
  --line: rgba(255, 226, 160, .14);  /* lead lines: quiet dividers */
  /* no backdrop blur anywhere: the panels are opaque enough, and Safari repaints every blurred layer on scroll */
  --blur: none;
  /* brand */
  --amber: #eb9a1f;
  --amber-hover: #f3af37;
  --amber-press: #da8418;
  --amber-ink: #221106;
  --glow: #fced9e;
  --blue: #4293d8;
  --blue-light: #80c7f3;
  --navy: #0c3072;
  --teal: #24b6a1;
  --teal-light: #71e2ca;
  --focus: #74d1ff;
  --border-strong: #8a837c;
  /* type */
  --f-head: "Zodiak", Georgia, serif;
  --f-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-display: clamp(2.125rem, 1.5rem + 2.6vw, 3.625rem);
  --t-h2: clamp(1.875rem, 1.5rem + 1.5vw, 2.875rem);
  --t-h3: clamp(1.5rem, 1.36rem + .57vw, 1.875rem);
  --t-lg: clamp(1.125rem, 1.08rem + .19vw, 1.3125rem);
  --t-body: clamp(1.0625rem, 1.03rem + .14vw, 1.125rem);  /* 17px phone, 18px desktop */
  --t-small: .9375rem;
  --t-prose-h2: clamp(1.75rem, 1.5rem + 1vw, 2.375rem);
  /* layout */
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1184px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; scrollbar-color: #3b3d46 #0b0c0f; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 420;       /* Plus Jakarta's 400 is thin on black; the variable font gives a touch more stem */
  letter-spacing: .003em;
  line-height: 1.68;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--amber); text-underline-offset: 3px; }
a:hover { color: var(--amber-hover); }
::selection { background: var(--amber); color: var(--amber-ink); }
input, textarea { caret-color: var(--amber); }
strong, b { font-weight: 650; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }  /* no radius here: buttons keep their pill, panels their 12px */
.prose a:focus-visible, .crumbs a:focus-visible, .foot-col > a:focus-visible, .foot-links a:focus-visible { border-radius: 4px; }
.btn:focus-visible, .nav-toggle:focus-visible { outline-offset: 3px; }
h1, h2, h3 {
  font-family: var(--f-head);
  font-weight: 700;
  font-synthesis: none;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.02em; }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* glass pane */
.pane {
  background: var(--pane-light), var(--pane);
  border: 1px solid var(--pane-border);
  box-shadow: var(--pane-hi);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-radius: 12px;
  color: var(--text-panel);
}

/* soft light behind sections: light from the window, not decoration */
.light { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }  /* no blur filter: WebKit re-renders it every frame; the gradient is soft enough */
.light.amber { background: radial-gradient(circle closest-side, rgba(235,154,31,.46), rgba(235,154,31,.18) 45%, rgba(235,154,31,0) 100%); }
.light.blue  { background: radial-gradient(circle closest-side, rgba(66,147,216,.40), rgba(66,147,216,.15) 45%, rgba(66,147,216,0) 100%); }
.light.gold  { background: radial-gradient(circle closest-side, rgba(252,237,158,.30), rgba(252,237,158,.11) 45%, rgba(252,237,158,0) 100%); }

section, footer { position: relative; overflow-x: clip; overflow-y: visible; }
main { overflow-x: clip; }
.section { padding: clamp(72px, 8.5vw, 120px) 0; }
.section > .wrap { position: relative; }
.lede { font-size: var(--t-lg); line-height: 1.55; color: var(--text); max-width: 56ch; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 999px;
  font: 600 1rem/1 var(--f-body); letter-spacing: .005em;
  text-decoration: none; cursor: pointer; border: 0; white-space: nowrap;
  transition: background-color 120ms var(--ease), box-shadow 120ms var(--ease), transform 120ms var(--ease), border-color 120ms var(--ease);
}
.btn-primary { background: var(--amber); color: var(--amber-ink); box-shadow: 0 0 28px -6px rgba(235,154,31,.55); }
.btn-primary:hover { background: var(--amber-hover); color: var(--amber-ink); box-shadow: 0 0 24px -4px rgba(252,237,158,.45); }
.btn-primary:active { background: var(--amber-press); box-shadow: none; transform: translateY(1px); }
.btn-ghost { background: rgba(255,255,255,.04); color: var(--ink); border: 1.5px solid var(--border-strong); }
.btn-ghost:hover { color: var(--ink); background: rgba(255,255,255,.09); border-color: #b5aea6; }
.btn-sm { height: 42px; padding: 0 18px; font-size: .9375rem; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 20; border-bottom: 1px solid transparent; transition: background-color 200ms var(--ease), border-color 200ms var(--ease); }
.nav.is-scrolled { background: rgba(5, 6, 8, .94); border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; transition: height 200ms var(--ease); }
.nav.is-scrolled .wrap { height: 68px; }
/* brand left, links + free check right, language last: the switch used to float alone in the middle of the bar */
.nav .nav-links { margin-left: auto; order: 1; }
.nav .nav-right { order: 2; margin-left: 6px; margin-right: -12px; }  /* the ghost switch's text lines up with the page edge */
[id] { scroll-margin-top: 92px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 38px; height: 38px; }
.brand span { font-family: var(--f-head); font-weight: 700; font-size: 1.5rem; letter-spacing: -.01em; line-height: 1; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a:not(.btn) { color: var(--text); text-decoration: none; font-weight: 500; font-size: .9375rem; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.nav-links a:not(.btn):hover { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(246,242,232,.4); }
.nav-links a:not(.btn):focus-visible { border-radius: 4px; }

/* skip link: first tab stop, visible only while focused */
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 50; padding: 12px 18px; border-radius: 999px; background: var(--amber); color: var(--amber-ink); font-weight: 600; text-decoration: none; }
.skip:focus-visible { top: 18px; outline-offset: 3px; }

/* menu button (hidden above 900px) */
.nav-toggle { display: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid var(--border-strong); background: rgba(255,255,255,.04); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; transition: background-color 120ms var(--ease), border-color 120ms var(--ease); }
.nav-toggle:hover { background: rgba(255,255,255,.09); border-color: #b5aea6; }
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle .i-close, .nav.is-open .nav-toggle .i-open { display: none; }
.nav.is-open .nav-toggle .i-close { display: block; }


/* ---------- footer ---------- */
footer { padding: 72px 0 44px; position: relative; }
footer > .wrap { position: relative; }
footer > .wrap::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: -40px; height: 1px;
  background: linear-gradient(90deg, rgba(255,226,160,0), rgba(255,226,160,.22) 20%, rgba(235,154,31,.7) 50%, rgba(255,226,160,.22) 80%, rgba(255,226,160,0)); }
footer > .wrap::after { content: ""; position: absolute; left: 50%; top: -43px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 0 3px rgba(235,154,31,.18), 0 0 16px 3px rgba(235,154,31,.6); }
.foot-name { font-family: var(--f-head); font-weight: 700; color: var(--ink); font-size: clamp(3.5rem, 1rem + 11vw, 10rem); line-height: .95; letter-spacing: -.04em; opacity: .94; text-shadow: 0 0 80px rgba(235,154,31,.22); }
.foot-row { margin-top: 28px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: var(--t-small); color: var(--muted); }
.foot-row a { color: var(--ink); font-weight: 600; }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot-links a { color: var(--text); font-weight: 500; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; color: var(--ink); }
/* below 900px the links live in a glass panel under the bar; .nav.is-open (site.js) shows it */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav .nav-right { margin-left: auto; margin-right: 0; }
  .nav-links {
    position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 4px); z-index: 11; margin-left: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 10px;
    background: #24262e; border: 1px solid var(--pane-border); border-radius: 16px;
    box-shadow: var(--pane-hi), 0 24px 48px -16px rgba(0, 0, 0, .7);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 160ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms;
  }
  .nav.is-open .nav-links { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav-links a:not(.btn) { display: block; padding: 14px 16px; border-radius: 10px; font-size: 1.125rem; font-weight: 600; }
  .nav-links a:not(.btn):hover { background: rgba(255,255,255,.06); text-decoration: none; }
  .nav-links a:not(.btn):focus-visible { outline-offset: -2px; border-radius: 10px; }
  .nav-links a[aria-current="page"]:not(.btn) { color: var(--amber); text-decoration: none; }
  .nav-links .btn { margin: 8px 6px 4px; height: 52px; font-size: 1rem; background: var(--amber); color: var(--amber-ink); border-color: transparent; box-shadow: 0 0 28px -6px rgba(235,154,31,.55); }
  .nav-links .btn:hover { background: var(--amber-hover); }
  /* no script: no menu, so keep the old bar (brand + Free check) */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .nav-links { position: static; visibility: visible; opacity: 1; transform: none; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html:not(.js) .nav-links a:not(.btn) { display: none; }
  html:not(.js) .nav-links .btn { margin: 0; height: 42px; font-size: .9375rem; background: rgba(255,255,255,.04); color: var(--ink); border-color: var(--border-strong); box-shadow: none; }
}
@media (max-width: 600px) { .brand span { font-size: 1.3125rem; } .brand img { width: 34px; height: 34px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .nav-links { transition: none; } }

/* footer columns */
.foot-grid { margin-top: 36px; display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 28px 40px; font-size: var(--t-small); }
.foot-about p { color: var(--muted); max-width: 44ch; line-height: 1.6; }
.foot-about a { color: var(--ink); font-weight: 600; }
.foot-col { display: grid; align-content: start; gap: 10px; }
.foot-h { color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.foot-col > a { color: var(--text); text-decoration: none; font-weight: 500; width: fit-content; }
.foot-col > a:hover { color: var(--ink); text-decoration: underline; }
.foot-row { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 44px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } .foot-about { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  /* three columns no longer fit a link like "Prompts buyers ask": each group runs as a wrapped row */
  .foot-grid { grid-template-columns: 1fr; gap: 22px; }
  .foot-col { display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .foot-col.foot-about { display: block; }
  .foot-h { flex-basis: 100%; margin-bottom: 0; }
}

/* ---------- inner pages (shared layout for everything except the homepage) ---------- */
.page-top { position: relative; padding: 140px 0 48px; }
.page-top .light.amber { opacity: 1; width: 900px !important; height: 760px !important; }
.page-top .light.blue { opacity: .9; }
/* light falling from the window: a pre-blurred picture (assets/light/make_light.py), never a CSS blur */
.shafts { position: absolute; top: -70px; right: 0; width: min(1400px, 112vw); aspect-ratio: 16 / 11; pointer-events: none; z-index: 0;
  background: url("/assets/light/shafts.webp") no-repeat right top / contain; opacity: .95; }
.page-top .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; }
.page-top .wrap.has-art { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 30vw, 400px); gap: 24px clamp(32px, 5vw, 72px); align-items: center; }
.page-head { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.page-art { position: relative; margin: 0; aspect-ratio: 1; width: 100%; order: 2; }
.page-art img { width: 100%; height: 100%; object-fit: contain; }
.page-art svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: var(--t-small); color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span[aria-hidden] { color: rgba(255, 226, 160, .45); }
.crumb-here { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* stays on the crumbs line; the h1 right below carries the full title */
.page-top h1 { font-size: var(--t-display); line-height: 1.04; letter-spacing: -.025em; max-width: 18ch; text-shadow: 0 0 48px rgba(235,154,31,.28); }
.page-top .lede { max-width: 60ch; color: var(--ink); }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--t-small); color: var(--muted); }
.byline b { color: var(--ink); font-weight: 600; }
.byline span::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--amber); margin: 0 12px 2px 0; vertical-align: middle; }

.article { position: relative; padding: 24px 0 96px; }
.article .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 720px); justify-content: start; gap: 0 56px; }
.prose { color: var(--text); font-size: var(--t-body); line-height: 1.72; }
.prose > * + * { margin-top: 1.15em; }
.prose p, .prose li { max-width: 68ch; }
/* section heads: a lead line with one lit node, the way a seam of lead meets a piece of lit glass */
.prose h2 { position: relative; margin-top: 2.5em; padding-top: 30px; font-size: var(--t-prose-h2); line-height: 1.12; letter-spacing: -.02em; }
.prose h2::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(235,154,31,.9), rgba(235,154,31,.3) 96px, rgba(255,226,160,.13) 260px, rgba(255,226,160,0)); }
.prose h2::after { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 0 3px rgba(235,154,31,.18), 0 0 14px 2px rgba(235,154,31,.55); }
.prose > h2:first-child { margin-top: .4em; }
/* h3 in the body font: Zodiak's hairlines shimmer on black under 26px */
.prose h3 { margin-top: 1.9em; font-family: var(--f-body); font-weight: 650; font-size: 1.1875rem; line-height: 1.35; letter-spacing: -.005em; }
.prose h2 + *, .prose h3 + * { margin-top: .7em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .5em; }
.prose li::marker { color: var(--amber); font-weight: 600; }
/* bullets are small pieces of glass */
.prose ul:not([class]) { list-style: none; padding-left: 1.5em; }
.prose ul:not([class]) > li { position: relative; }
.prose ul:not([class]) > li::before { content: ""; position: absolute; left: -1.15em; top: .66em; width: 7px; height: 7px; border-radius: 1px; transform: rotate(45deg); background: var(--amber); box-shadow: 0 0 8px rgba(235,154,31,.45); }
.prose a { color: var(--blue-light); text-decoration: underline; text-decoration-color: rgba(128,199,243,.5); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); text-decoration-color: var(--ink); text-decoration-thickness: 2px; }
.prose strong { color: var(--ink); }
/* pull quote: a statement set in the headline face, hung off a lit lead line */
.prose blockquote { position: relative; margin: 2.2em 0; padding: 2px 0 2px 30px; font-family: var(--f-head); font-weight: 700; font-size: clamp(1.25rem, 1.12rem + .5vw, 1.5rem); line-height: 1.4; letter-spacing: -.01em; color: var(--ink); max-width: 34em; }
.prose blockquote::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(rgba(235,154,31,.9), rgba(235,154,31,.15)); }
.prose blockquote::after { content: ""; position: absolute; left: -3px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 12px 2px rgba(235,154,31,.55); }
.prose blockquote > * + * { margin-top: .6em; }
.prose code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9em; background: rgba(255,255,255,.09); padding: .1em .35em; border-radius: 4px; }
.prose pre { background: #121318; border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; overflow-x: auto; font-size: .875rem; line-height: 1.6; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; height: 1px; background: linear-gradient(90deg, rgba(255,226,160,0), rgba(255,226,160,.22), rgba(255,226,160,0)); margin: 2.6em 0; }
.prose img { border-radius: 0; }

/* tables scroll inside their own box on phones */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.6em 0; border: 1px solid var(--pane-border); border-radius: 12px; background: var(--pane-light), var(--pane); box-shadow: var(--pane-hi); }
.prose table { border-collapse: collapse; width: 100%; font-size: 1rem; line-height: 1.55; font-variant-numeric: tabular-nums; }
.prose table:has(tr > :nth-child(3)) { min-width: 560px; }  /* only tables with three or more columns need room to scroll; two-column ones reflow */
.table-wrap:focus-visible { outline-offset: -2px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.prose th { color: var(--ink); font-weight: 650; font-size: .9375rem; background: rgba(255,255,255,.05); border-bottom: 1.5px solid rgba(255,226,160,.28); }
.prose tr:last-child td { border-bottom: 0; }
.prose td { color: var(--text-panel); }
.prose td:first-child { color: var(--ink); font-weight: 600; }

/* definition lists (glossary) */
.prose dl { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 14px 24px; }
.prose dt { color: var(--ink); font-weight: 650; }
.prose dd { margin: 0; }

/* custom blocks (scoped to .prose: the homepage has its own .steps, .stat and .faq-list) */
.note { background: var(--pane-light), var(--pane); border: 1px solid var(--pane-border); box-shadow: var(--pane-hi); border-radius: 12px; padding: 22px 26px; color: var(--text-panel); }
.note > * + * { margin-top: .7em; }
.note.warn { box-shadow: var(--pane-hi), inset 0 2px 0 rgba(235,154,31,.75); }
.prose .stat { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 26px; margin: 2em 0; padding: 26px 30px; border-radius: 12px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(235,154,31,.2), rgba(235,154,31,0) 55%), var(--pane);
  border: 1px solid rgba(252,237,158,.3); box-shadow: inset 0 1px 0 rgba(255,236,190,.22); }
.prose .stat b { font-family: var(--f-head); font-weight: 700; font-size: clamp(2.75rem, 2.2rem + 2.2vw, 4.25rem); line-height: 1; color: var(--amber); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.prose .stat span { flex: 1 1 22ch; max-width: 40ch; color: var(--ink); font-size: 1.125rem; line-height: 1.45; }
.prose .stat small { flex-basis: 100%; font-size: var(--t-small); color: var(--muted); }
.prose .steps ol { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 14px; position: relative; }
.prose .steps ol::before { content: ""; position: absolute; left: 37px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(rgba(235,154,31,.7), rgba(66,147,216,.5)); }
.prose .steps li { counter-increment: step; position: relative; max-width: none; padding: 20px 24px 20px 76px; background: var(--pane-light), var(--pane); border: 1px solid var(--pane-border); box-shadow: var(--pane-hi); border-radius: 12px; color: var(--text-panel); }
.prose .steps li + li { margin-top: 0; }
.prose .steps li::before { content: counter(step); position: absolute; left: 20px; top: 18px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: var(--amber-ink); font-weight: 700; font-family: var(--f-head); box-shadow: 0 0 0 4px rgba(5,6,8,.9), 0 0 16px rgba(235,154,31,.45); }
.cta-inline { margin: 2.2em 0; }
.cta-inline p + p { margin-top: 14px; }

/* FAQ */
.prose .faq-list { display: grid; gap: 10px; margin-top: 14px; }
.prose .faq-list details { background: var(--pane-light), var(--pane); border: 1px solid var(--pane-border); box-shadow: var(--pane-hi); border-radius: 12px; color: var(--text-panel); transition: background-color 120ms var(--ease), border-color 120ms var(--ease); }
.prose .faq-list details:hover, .prose .faq-list details[open] { background: var(--pane-light), var(--pane-strong); border-color: rgba(255,226,160,.36); }
.prose .faq-list summary { cursor: pointer; list-style: none; padding: 18px 22px; border-radius: 12px; font-weight: 650; font-size: 1.0625rem; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; line-height: 1.4; }
.prose .faq-list summary::-webkit-details-marker { display: none; }
.prose .faq-list summary:focus-visible { outline-offset: -2px; }
.prose .faq-list summary .icon { color: var(--amber); transition: transform 200ms var(--ease); }
.prose .faq-list details[open] summary .icon { transform: rotate(45deg); }
.prose .faq-list details p { padding: 0 22px 20px; max-width: 64ch; }
.prose .faq-list details p + p { padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .prose .faq-list summary .icon, .prose .faq-list details { transition: none; } }

/* sources */
.sources { margin-top: 3em; padding-top: 1.4em; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--muted); line-height: 1.6; }
.sources h2 { font-size: 1rem; font-family: var(--f-body); font-weight: 650; color: var(--text); margin: 0 0 .6em; padding: 0; letter-spacing: 0; }
.sources h2::before, .sources h2::after { display: none; }
.sources ol { padding-left: 1.2em; }
.sources li + li { margin-top: .3em; }
.sources a { color: var(--blue-light); }

/* on this page: built by site.js from the h2s, sits in the free right column on wide screens */
.toc { display: none; }
@media (min-width: 1200px) {
  .article .wrap { grid-template-columns: minmax(0, 720px) minmax(0, 1fr); }
  .article .wrap > .prose { grid-column: 1; }
  .toc { display: block; grid-column: 2; grid-row: 1; justify-self: end; align-self: start; position: sticky; top: 100px; width: 100%; max-width: 280px; margin-top: 6px; font-size: var(--t-small); }
  .toc-h { color: var(--ink); font-weight: 650; margin-bottom: 12px; }
  .toc ol { list-style: none; margin: 0; padding: 0 0 0 16px; position: relative; display: grid; gap: 2px; }
  .toc ol::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
  .toc a { position: relative; display: block; padding: 6px 0; color: var(--muted); text-decoration: none; line-height: 1.4; }
  .toc a:hover { color: var(--ink); }
  .toc a[aria-current="true"] { color: var(--ink); }
  .toc a[aria-current="true"]::before { content: ""; position: absolute; left: -19px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px 2px rgba(235,154,31,.6); }
}

/* blog index: a real list, newest first, dates on the left */
.prose .post-list { list-style: none; padding: 0; margin-top: 1.2em; }
.prose .post-list li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 28px; padding: 22px 0; border-top: 1px solid var(--line); max-width: none; }
.prose .post-list li + li { margin-top: 0; }
.post-list li:last-child { border-bottom: 1px solid var(--line); }
.post-list time { color: var(--muted); font-size: var(--t-small); font-variant-numeric: tabular-nums; padding-top: .35em; }
.post-list a { font-family: var(--f-head); font-weight: 700; font-size: 1.375rem; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.post-list a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.post-list p { margin-top: 6px; color: var(--text); max-width: 62ch; }
.post-empty { padding: 22px 26px; border: 1px dashed rgba(255,226,160,.3); border-radius: 12px; color: var(--ink); }
@media (max-width: 600px) { .prose .post-list li { grid-template-columns: 1fr; padding: 20px 0; } .post-list time { padding-top: 0; } }

/* page-end CTA */
.page-cta { position: relative; padding: 48px 0 112px; }
.page-cta .wrap { position: relative; z-index: 1; }
.page-cta .pane { padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: center;
  background: radial-gradient(90% 140% at 100% 0%, rgba(235,154,31,.16), rgba(235,154,31,0) 60%), var(--pane-light), var(--pane); }
.page-cta h2 { font-size: var(--t-h3); }
.page-cta p { margin-top: 10px; color: var(--text-panel); max-width: 52ch; }
.page-cta .btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* forms on flow pages */
.flow-form { display: grid; gap: 18px; padding: clamp(22px, 3vw, 34px); max-width: 640px; }
.flow-form label { display: grid; gap: 8px; font-weight: 600; color: var(--ink); font-size: 1rem; }
.flow-form label small { font-weight: 420; color: var(--muted); font-size: .875rem; }  /* the browser's "smaller" went under 13px */
.prose .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }
.flow-form input, .flow-form textarea, .flow-form select { width: 100%; height: 52px; padding: 0 16px; border-radius: 8px; border: 1.5px solid var(--border-strong); background: rgba(5,6,8,.65); color: var(--ink); font: 420 1rem var(--f-body); transition: border-color 120ms var(--ease); }
.flow-form input::placeholder, .flow-form textarea::placeholder { color: #a39d93; }
.flow-form input:hover, .flow-form textarea:hover { border-color: #b5aea6; }
.flow-form textarea { height: auto; min-height: 120px; padding: 12px 16px; resize: vertical; }
.flow-form input:focus, .flow-form textarea:focus { border-color: var(--amber); outline: 2px solid var(--focus); outline-offset: 2px; }
.flow-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.flow-form .form-note { font-size: var(--t-small); color: var(--muted); display: flex; gap: 8px; align-items: center; }
.flow-form .form-msg { min-height: 1.4em; color: var(--glow); font-size: var(--t-small); }
.flow-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.flow-form .btn { justify-self: start; }

@media (max-width: 900px) {
  .page-cta .pane { grid-template-columns: 1fr; }
  .prose dl { grid-template-columns: 1fr; gap: 4px 0; }
  .prose dd { margin-bottom: 14px; }
  .page-top .wrap.has-art { grid-template-columns: 1fr; }
  .page-art { order: 0; width: min(66vw, 360px); margin: -20px auto 0; }
  .shafts { width: 980px; right: -260px; top: -60px; opacity: .85; }
}
/* wide screens: the article column is 720px, so the right of the page is free below the header. The art sits there
   instead of stretching the header to its own height, which left a void between the lede and the first paragraph. */
@media (min-width: 1200px) {
  .page-top .wrap.has-art { display: flex; flex-direction: column; align-items: flex-start; }
  .page-top .wrap.has-art .page-head { max-width: calc(100% - 400px - 56px); }
  .page-art { position: absolute; right: var(--gutter); top: -8px; width: 400px; order: 0; }
}
@media (max-width: 600px) {
  .page-top { padding-top: 112px; }
  .page-top .wrap, .page-head { gap: 16px; }
  .flow-form .row2 { grid-template-columns: 1fr; }
  .prose h2 { margin-top: 2.2em; padding-top: 24px; }
  .prose .stat { padding: 22px; }
  .prose .steps li { padding: 18px 18px 18px 64px; }
  .prose .steps li::before { left: 16px; }
  .prose .steps ol::before { left: 33px; }
}

/* LLM row: every page offers its Markdown and text twins and a copy button. Kept quiet: small, muted, no fill. */
.llm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.llm-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font: 500 .8125rem/1 var(--f-body); letter-spacing: .005em; color: var(--muted); background: transparent; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; text-decoration: none; cursor: pointer; transition: color 120ms var(--ease), border-color 120ms var(--ease), background-color 120ms var(--ease); }
.llm-btn::after { content: ""; position: absolute; inset: -6px -2px; }  /* 44px hit area around a quiet 32px chip */
.llm-btn:hover { color: var(--ink); border-color: rgba(255,226,160,.4); background: rgba(255,255,255,.05); }
.llm-btn .icon { width: 14px; height: 14px; }
.llm-btn[data-done] { border-color: rgba(113,226,202,.5); color: var(--teal-light); }

.foot-social { margin-top: 10px; } .foot-social a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 600; } .foot-social a:hover { color: var(--amber); } .foot-social .icon { width: 18px; height: 18px; }

/* ---------- languages ---------- */
/* Zodiak is Latin only: Cyrillic pages set headings in Playfair Display 700 (Google Fonts, loaded only on those pages).
   The wordmark and the big footer name stay in Zodiak (they are Latin on every page). */
html[lang="ru"], html[lang="uk"] { --f-head: "Playfair Display", "Zodiak", Georgia, serif; }
html[lang="ar"] { --f-head: "Amiri", "Zodiak", Georgia, serif; }
html[lang="he"] { --f-head: "Frank Ruhl Libre", "Zodiak", Georgia, serif; }
.brand span, .foot-name { font-family: "Zodiak", Georgia, serif; }
html[dir="rtl"] .brand span, html[dir="rtl"] .foot-name { font-family: var(--f-head); }

/* the switch: a small pill next to the menu button, opening a glass list; site.js closes it on a click outside or Escape */
.nav-right { display: flex; align-items: center; gap: 10px; }
.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; border-radius: 999px; border: 1.5px solid transparent; background: transparent; color: var(--text); font: 600 .8125rem/1 var(--f-body); letter-spacing: .04em; cursor: pointer; transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease); }
.lang[open] summary { background: rgba(255,255,255,.07); color: var(--ink); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { background: rgba(255,255,255,.07); color: var(--ink); }
.lang summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.lang summary .icon { width: 16px; height: 16px; }
.lang-menu { position: absolute; right: 0; top: 50px; z-index: 12; min-width: 200px; max-height: min(70vh, 520px); overflow-y: auto; padding: 8px; display: grid; gap: 2px; background: #24262e; border: 1px solid var(--pane-border); border-radius: 14px; box-shadow: var(--pane-hi), 0 24px 48px -16px rgba(0, 0, 0, .7); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
html[dir="rtl"] .lang-menu { right: auto; left: 0; }
.lang-menu a, .lang-menu span[aria-current] { display: block; padding: 11px 14px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: .9375rem; white-space: nowrap; }
.lang-menu a:hover { background: rgba(255,255,255,.06); text-decoration: none; }
.lang-menu span[aria-current] { color: var(--amber); }
.lang-menu a.lang-home { color: var(--text); }
.lang-menu a.lang-home::after { content: " ↗"; color: var(--muted); font-size: .8em; }
.lang-note { margin: 2px 12px 8px; padding: 0 0 8px; border-bottom: 1px solid var(--pane-border); font-size: var(--t-small, .8125rem); color: var(--muted); white-space: nowrap; }
@media (max-width: 900px) {
  .lang summary { height: 44px; border-color: var(--border-strong); background: rgba(255,255,255,.04); color: var(--ink); }
}
@media (max-width: 600px) {
  .lang summary span { display: none; }
  .lang summary { width: 40px; padding: 0; justify-content: center; }
}
/* headings in a Cyrillic fallback run a little wider than Zodiak: pull the hero and h2 sizes in a touch so lines still break well on phones */
html[lang="ru"] h1, html[lang="uk"] h1 { letter-spacing: -.01em; }

/* ---------- taglines ---------- */
/* A tagline is a lit line, not a heading: the headline face in the warm glow colour (16.9:1 on bg), set apart from the
   sentence it opens. Used for "Nobody knocks anymore. They ask." in the hero and the final call's second line. */
.tagline { display: block; margin-bottom: .55em; font-family: var(--f-head); font-weight: 700; font-size: 1.32em; line-height: 1.2; letter-spacing: -.012em; color: var(--glow); text-wrap: balance; }
.final .tagline { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); margin-bottom: .45em; }
/* the footer line sits under the big name like a maker's mark under a window */
.foot-tag { margin-top: 14px; font-family: var(--f-head); font-weight: 700; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.2; letter-spacing: -.01em; color: var(--muted); }
.foot-tag::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 14px .2em 4px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 12px 2px rgba(235,154,31,.55); vertical-align: middle; }

/* Pay now buttons + invoice alternative inside prose (Nov 1 2026, Stripe payment links; {{PAY:plan}} in content) */
.prose .pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 18px 0 8px; max-width: none; }
.prose .pay-row a.btn { text-decoration: none; color: var(--amber-ink); }
.prose .pay-row a.btn:hover { color: var(--amber-ink); }
.prose .pay-row .pay-alt { font-weight: 600; font-size: .9375rem; }
.prose .founding-left { color: var(--glow); font-weight: 600; }