/* Ghostly public site. Hand-written, no build step, no third-party requests.
   World: the Expo Ledger from the console, taken public, in Volt. A deep navy band at the top and bottom of each page (the console's
   rail, at page scale), a pale ruled page between them, one blue for the hand that acts (#0055FF, #4D8BFF on dark), and signal orange
   (#FF6B1A) for the one button that matters on the navy band. Ledger strips and hairline rows carry the structure instead of cards.
   Light by default, dark follows the OS or the toggle. Archivo for everything; IBM Plex Mono only for file names (the source chips).
   The logo is outlined SVG from the console's _logo.html: no brand font loads. Flat surfaces, no gradients, no colored edge strips,
   no tracked all-caps labels.
   Contrast: --accent carries small text and links at 5.6:1 on white and 5.2:1 on --bg; the pairs are asserted in tests/test_site.py. */
@font-face { font-family: "Archivo"; src: url("fonts/archivo-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-0025, U+0027-FFFF; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --bg: #f5f7fb; --surface: #ffffff; --surface-2: #edf0f7;
  --line: #dce1ec; --line-strong: #b4bdcf;
  --ink: #0a0f1f; --ink-2: #353d52; --ink-3: #566079;
  --accent: #0055ff; --accent-ink: #ffffff; --accent-soft: #e6eeff;
  --bad: #b42318; --good: #067647;
  --band: #0a0f1f; --band-ink: #e8ecf6; --band-ink-2: #a3aec8; --band-brand: #4d8bff; --band-accent: #ff6b1a; --band-accent-ink: #0a0f1f;
  --band-line: rgba(255, 255, 255, .2); --band-bad: #ff9e91;
  --shot-light: #f5f7fb; --shot-dark: #070a12;
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 12px; --radius-md: 8px; --radius-sm: 6px;
  --gutter: clamp(16px, 4.5vw, 40px); --section: clamp(64px, 9vw, 120px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070a12; --surface: #10141f; --surface-2: #171c2a;
    --line: #232a3d; --line-strong: #3d4863;
    --ink: #e8ecf6; --ink-2: #b3bbd0; --ink-3: #8791ac;
    --accent: #4d8bff; --accent-ink: #04122e; --accent-soft: #0f1d3d;
    --bad: #f97066; --good: #12b76a;
    --band: #121a33; --band-line: rgba(255, 255, 255, .24);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #070a12; --surface: #10141f; --surface-2: #171c2a;
  --line: #232a3d; --line-strong: #3d4863;
  --ink: #e8ecf6; --ink-2: #b3bbd0; --ink-3: #8791ac;
  --accent: #4d8bff; --accent-ink: #04122e; --accent-soft: #0f1d3d;
  --bad: #f97066; --good: #12b76a;
  --band: #121a33; --band-line: rgba(255, 255, 255, .24);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; accent-color: var(--accent); scrollbar-color: var(--line-strong) var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--accent); color: var(--accent-ink); }
input, select, textarea, button { caret-color: var(--accent); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 1.2rem + 4.6vw, 4rem); line-height: 1.04; letter-spacing: -.032em; }
h2 { font-size: clamp(1.65rem, 1.15rem + 1.8vw, 2.5rem); line-height: 1.12; letter-spacing: -.024em; }
h3 { font-size: 1.15rem; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0 0 1em; max-width: 65ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--surface); color: var(--ink); padding: 10px 14px; border-radius: var(--radius-sm); }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.band :focus-visible { outline-color: var(--band-accent); }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 62ch; }
.muted { color: var(--ink-3); }

/* ---------------------------------------------------------------- the navy band: header + the page's opening */
.band { background: var(--band); color: var(--band-ink); border-block: 1px solid var(--line); }
.band a { color: inherit; }
.top .bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; padding-top: 18px; padding-bottom: 18px; }
.band .brand { display: inline-flex; color: var(--band-brand); text-decoration: none; }
.brand svg { height: 30px; width: auto; display: block; }
.top nav { display: flex; gap: 6px 26px; font-size: 15px; font-weight: 500; order: 3; flex-basis: 100%; }
.top nav a { color: var(--band-ink-2); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--band-ink); border-bottom-color: currentColor; }
.top .tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
#theme { background: none; border: 1px solid var(--band-line); color: var(--band-ink); width: 40px; height: 40px; border-radius: var(--radius-md); cursor: pointer; display: inline-grid; place-items: center; }
#theme:hover { border-color: var(--band-ink-2); }
#theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#theme .sun { display: none; } #theme .moon { display: block; }
:root[data-theme="dark"] #theme .sun { display: block; } :root[data-theme="dark"] #theme .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #theme .sun { display: block; } :root:not([data-theme="light"]) #theme .moon { display: none; }
}
@media (min-width: 760px) { .top nav { order: 0; flex-basis: auto; } }

.hero { padding: clamp(36px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); }
.hero h1 { max-width: 18em; }
.hero .lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.5; color: var(--band-ink-2); max-width: 34em; margin: 22px 0 0; }
.hero .lede strong { color: var(--band-ink); font-weight: 500; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.hero .fine { font-size: 14px; color: var(--band-ink-2); margin: 14px 0 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--radius-md); font: 600 16px/1 var(--font); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out; }
.btn:hover { text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }
.band .btn.primary { background: var(--band-accent); color: var(--band-accent-ink); }
.band .btn.primary:hover { background: color-mix(in srgb, var(--band-accent) 88%, #fff); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.secondary:hover { border-color: var(--ink-2); }
.band .btn.secondary { color: var(--band-ink); border-color: var(--band-line); }
.band .btn.secondary:hover { border-color: var(--band-ink-2); }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* The signature: a ledger strip, one bordered band of figures divided by hairlines. Only the variance turns red. */
.strip-fig { margin: clamp(40px, 6vw, 72px) 0 0; }
.strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--band-line); border: 1px solid var(--band-line); border-radius: var(--radius); overflow: hidden; }
.strip > div { background: var(--band); padding: 14px 18px 16px; }
.strip dt { font-size: 14px; color: var(--band-ink-2); }
.strip dd { margin: 2px 0 0; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.35rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.strip dd small { display: block; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--band-ink-2); margin-top: 2px; line-height: 1.35; }
.strip .over dd { color: var(--band-bad); }
.strip .u { font-size: .5em; font-weight: 500; letter-spacing: 0; }
@media (min-width: 900px) { .strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.strip-fig figcaption { font-size: 14px; color: var(--band-ink-2); margin-top: 12px; max-width: 58ch; }

/* ---------------------------------------------------------------- sections */
.section { padding: var(--section) 0 0; }
.section:last-of-type { padding-bottom: var(--section); }
.section > .wrap > h2 { max-width: 22em; }
.section .sub { color: var(--ink-2); max-width: 36em; margin: 18px 0 0; font-size: 1.1rem; }
.rule-top { border-top: 1px solid var(--line); }
.surface { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--section) 0; margin-top: var(--section); }

/* How it works: three ruled rows, the number in the gutter because the sequence is the point. */
.steps { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--line-strong); counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s); grid-row: span 2; font-size: 2.1rem; font-weight: 300; line-height: 1; color: var(--ink-3); letter-spacing: -.03em; padding-top: 2px; }
.steps h3 { max-width: 28em; }
.steps p { color: var(--ink-2); margin: 6px 0 0; max-width: 62ch; }
@media (min-width: 900px) {
  .steps li { grid-template-columns: 72px minmax(0, 5fr) minmax(0, 6fr); gap: 0 32px; align-items: start; }
  .steps li::before { grid-row: auto; font-size: 3rem; }
  .steps p { margin: 0; }
}

/* A proof block: copy beside one real screenshot. */
.proof { display: grid; gap: 28px; margin-top: var(--section); align-items: start; }
.proof h2 { max-width: 16em; }
.proof .copy p { color: var(--ink-2); margin-top: 16px; }
.facts { list-style: none; margin: 22px 0 0; padding: 0; max-width: 62ch; }
.facts li { border-top: 1px solid var(--line); padding: 12px 0; color: var(--ink); font-weight: 500; }
.facts li span { display: block; font-weight: 400; color: var(--ink-3); font-size: 15px; margin-top: 2px; }
.facts li:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 960px) {
  .proof { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 48px; }
  .proof .copy { grid-column: 1 / span 5; position: sticky; top: 32px; }
  .proof figure { grid-column: 6 / -1; }
  .proof.narrow figure { grid-column: 6 / -1; }
  .proof.narrow .copy { grid-column: 1 / span 5; position: static; }
  .proof.wide { display: block; }
  .proof.wide .head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 48px; align-items: start; }
  .proof.wide .head h2 { grid-column: 1 / span 5; max-width: none; }
  .proof.wide .head .d { grid-column: 6 / -1; }
}
.proof.wide .head .d p { color: var(--ink-2); margin-top: 16px; }
.proof.wide .head .d p:first-child { margin-top: 0; }
.proof.wide figure { margin-top: 36px; }
.proof.wide.shot-first figure { margin: 0 0 40px; }
@media (max-width: 959px) { .proof.wide .head h2 { margin-bottom: 18px; } }
figure { margin: 0; min-width: 0; }
.proof > *, .trust-grid > *, .dp > * { min-width: 0; }
.shot { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--shot-light); }
.shot.dark { background: var(--shot-dark); }
.shot img { width: 100%; height: auto; }
.swipe { display: none; }
@media (max-width: 720px) {
  .shot { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .shot.w1172 img { width: 780px; max-width: none; }
  .shot.w720 img { width: 600px; max-width: none; }
  .swipe { display: inline; }
}
figcaption { font-size: 14px; color: var(--ink-3); margin-top: 10px; max-width: 58ch; }
.wide-shot { margin-top: 40px; }

/* Integrations: eight cells in one ledger strip. Names are set in type: no vendor logos. */
.integrations { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.integrations li { background: var(--surface); padding: 16px 16px 18px; }
.integrations strong { display: block; font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; }
.integrations span { display: block; font-size: 14px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }
@media (min-width: 640px) { .integrations { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .integrations { grid-template-columns: repeat(8, minmax(0, 1fr)); } .integrations li { padding: 18px 14px 20px; } }
.small-print { font-size: 14px; color: var(--ink-3); margin: 16px 0 0; max-width: 58ch; }

/* Trust */
.trust-grid { display: grid; gap: 40px; margin-top: 0; }
.holds { margin: 28px 0 0; border-top: 1px solid var(--line-strong); }
.holds > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.holds dt { font-weight: 600; margin-bottom: 8px; }
.holds dd { margin: 0; color: var(--ink-2); }
.holds ul { margin: 0; padding-left: 1.1em; }
.holds li + li { margin-top: 3px; }
.tag { display: inline-block; font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-strong); margin-bottom: 6px; background: var(--surface-2); }
.tag.held { color: var(--ink); }
@media (min-width: 960px) { .trust-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 48px; } .trust-grid .a { grid-column: 1 / span 5; } .trust-grid .b { grid-column: 6 / -1; } }
.chip { font-family: var(--mono); font-size: .86em; background: var(--surface-2); border: 1px solid var(--line); padding: 1px 7px; border-radius: var(--radius-sm); white-space: nowrap; }

/* The closing band */
.closing { padding: clamp(56px, 8vw, 104px) 0; }
.closing h2 { max-width: 20em; }
.closing p { color: var(--band-ink-2); max-width: 34em; margin: 18px 0 0; font-size: 1.1rem; }

/* ---------------------------------------------------------------- footer */
.foot { padding: 40px 0 56px; font-size: 14px; color: var(--ink-3); }
.foot .cols { display: grid; gap: 24px; }
.foot .mk { display: inline-flex; align-items: center; color: var(--accent); text-decoration: none; }
.foot .mk svg { height: 26px; width: auto; display: block; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot nav a { color: var(--ink-2); }
.foot p { margin: 0 0 8px; max-width: 68ch; }
.foot p.mt { margin-top: 16px; }
@media (min-width: 900px) { .foot .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; } }

/* ---------------------------------------------------------------- design partners */
.page-hero { padding: clamp(32px, 6vw, 72px) 0 clamp(40px, 6vw, 72px); }
.page-hero h1 { max-width: 15em; }
.page-hero .lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--band-ink-2); max-width: 34em; margin: 20px 0 0; }
.dp { display: grid; gap: 48px; padding-block: clamp(40px, 6vw, 80px) clamp(40px, 6vw, 64px); }
.dp h2, .dp-after h2 { margin-bottom: 12px; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -.02em; }
.dp section + section { margin-top: 44px; }
.dp .rows { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line-strong); max-width: 62ch; }
.dp .rows li { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.dp .rows strong { color: var(--ink); font-weight: 600; }
.dp-after { display: grid; gap: 28px; padding-bottom: var(--section); border-top: 1px solid var(--line); padding-top: clamp(32px, 5vw, 56px); }
.dp-after section + section { margin-top: 0; }
@media (min-width: 960px) { .dp-after { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; } }
.standing { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px 20px; }
.standing h2 { font-size: 1.15rem; }
.standing p { margin: 8px 0 0; color: var(--ink-2); font-size: 16px; }
@media (min-width: 960px) { .dp { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 56px; } .dp .info { grid-column: 1 / span 7; } .dp .apply { grid-column: 8 / -1; } .apply .card { position: sticky; top: 24px; } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card h2 { font-size: 1.35rem; }
.card .intro { color: var(--ink-3); font-size: 15px; margin: 6px 0 18px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 500; font-size: 15px; margin-bottom: 6px; }
.field input, .field select { width: 100%; min-height: 46px; padding: 9px 12px; font: 400 16px/1.3 var(--font); color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-md); appearance: none; -webkit-appearance: none; }
.field select { padding-right: 38px; }
.selectwrap { position: relative; }
.selectwrap svg { position: absolute; right: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.field input:hover, .field select:hover { border-color: var(--ink-3); }
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field .hint { font-size: 13px; color: var(--ink-3); margin: 5px 0 0; }
.field.has-error input, .field.has-error select { border-color: var(--bad); }
.err { color: var(--bad); font-size: 14px; margin: 6px 0 0; font-weight: 500; }
.row2 { display: grid; gap: 0 16px; }
@media (min-width: 560px) and (max-width: 959px), (min-width: 1180px) { .row2 { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { border: 1px solid var(--bad); border-radius: var(--radius-md); padding: 12px 14px; margin: 0 0 18px; font-size: 15px; background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.notice p { margin: 0; font-weight: 600; }
.notice ul { margin: 6px 0 0; padding-left: 1.2em; }
.notice a { color: var(--ink); }
.form-foot { font-size: 14px; color: var(--ink-3); margin: 14px 0 0; }
.card .btn { width: 100%; }

.prose { padding-block: clamp(40px, 6vw, 72px) var(--section); }
.prose .measure > * + h2 { margin-top: 2em; }
.prose h2 { font-size: 1.4rem; letter-spacing: -.015em; margin-bottom: .5em; }
.prose li + li { margin-top: .4em; }

/* ---------------------------------------------------------------- the one authored motion: the hero settles in once */
@keyframes settle { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .lede, .hero .ctas, .hero .fine, .strip-fig { animation: settle .7s cubic-bezier(.16, 1, .3, 1) backwards; }
  .hero .lede { animation-delay: .08s; } .hero .ctas { animation-delay: .16s; } .hero .fine { animation-delay: .2s; } .strip-fig { animation-delay: .28s; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }