/* ── Starting Up — the public page ────────────────────────────────────
   The front door, on the same identity as the application behind it: the
   same yellow, ink and paper from brand.css, the same hairlines, the same
   mono voice for anything that is data rather than prose.

   What differs is the pitch. The app is 13.5px and dense because it is read
   fifty times a day; this is 16px with 84px bands because it is read once.
   The type scale is the only thing allowed to be loud — a landing scale
   pasted into a dashboard is the clearest symptom of a design that was not
   thought about twice, so the two files deliberately do not share one.

   ## Rules, not cards, here too

   The Core section is a specification sheet, the products are a register
   with a status column, and the tools are a grid of hairlines. Sixteen
   rounded boxes was what made the page read as generated.

   ## Tokens

   Everything comes from brand.css. What is left here is what only this page
   needs, and it follows the same three-block pattern so an explicit theme
   choice beats the operating system in both directions.
   `test/landing.test.js` asserts the two dark blocks agree.
   ──────────────────────────────────────────────────────────────────── */

:root,
:root:not([data-theme="dark"]),
:root[data-theme="light"] {
  --ld-tint:    #efeadc;   /* the alternating band */
  --ld-surface: #ffffff;   /* a raised block, used sparingly */
  --ld-lift:    0 1px 2px rgba(20, 17, 11, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ld-tint:    #191510;
    --ld-surface: #1a1610;
    --ld-lift:    0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  --ld-tint:    #191510;
  --ld-surface: #1a1610;
  --ld-lift:    0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ── Base ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--su-paper);
  color: var(--su-ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--su-yellow-deep); outline-offset: 3px; border-radius: 2px; }

.sprite { display: none; }
.icon {
  width: 20px; height: 20px; display: block; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 90;
  background: var(--su-yellow); color: #14110b;
  padding: 0.6rem 1rem; border-radius: var(--radius); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.muted { color: var(--su-ink-2); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.shell { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 28px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; }
}

/* The one decorative device on the page: a mono micro-label behind a short
   yellow rule. It repeats, so it reads as a system rather than as decoration. */
.label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--su-ink-3); line-height: 1.3;
}
.eyebrow { display: flex; align-items: flex-start; gap: 10px; }
.eyebrow::before {
  content: ""; width: 18px; height: 2px; background: var(--su-yellow);
  flex: none; margin-top: 5px;
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 15px;
  border: 1px solid var(--su-line-2);
  border-radius: var(--radius);
  background: var(--ld-surface);
  color: var(--su-ink);
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--su-sunk); border-color: var(--su-line-3); }
.btn-primary {
  background: var(--su-yellow); border-color: var(--su-yellow-lo); color: #14110b;
  font-weight: 600;
}
.btn-primary:hover { background: var(--su-yellow-hi); border-color: var(--su-yellow); }
.btn-quiet { background: none; border-color: transparent; color: var(--su-ink-2); }
.btn-quiet:hover { background: var(--su-sunk); color: var(--su-ink); border-color: transparent; }
.btn-outline { background: none; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15.5px; }

/* On the near-black bands. Yellow carries text there, which is the one place
   the brand rule inverts — so the outline variant can be light on dark. */
.btn-ink { background: var(--su-yellow); border-color: var(--su-yellow); color: #14110b; font-weight: 600; }
.btn-ink:hover { background: var(--su-yellow-hi); }
.btn-ink-outline { background: none; border-color: rgba(244, 240, 230, .28); color: var(--su-night-ink); }
.btn-ink-outline:hover { background: rgba(244, 240, 230, .08); border-color: rgba(244, 240, 230, .5); }

/* ── Header ────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--su-paper);
  border-bottom: 1px solid var(--su-line);
}
.header-inner { display: flex; align-items: center; gap: 26px; height: 62px; }

.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand-mark {
  width: 24px; height: 24px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--su-yellow); color: #14110b;
  display: grid; place-items: center;
}
.brand-mark .icon { width: 15px; height: 15px; stroke-width: 2.3; }
.brand-word { font-size: 15.5px; font-weight: 600; letter-spacing: -0.022em; }

.site-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav-list { display: flex; gap: 2px; }
.nav-list a {
  display: block; padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--su-ink-2);
}
.nav-list a:hover { color: var(--su-ink); background: var(--su-sunk); }
.nav-actions { display: flex; align-items: center; gap: 8px; }

.nav-toggle {
  display: none; margin-left: auto;
  width: 38px; height: 38px; border: 1px solid var(--su-line-2);
  border-radius: var(--radius-sm); background: var(--ld-surface);
  place-items: center;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 16px; height: 1.5px; background: var(--su-ink); border-radius: 1px;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }

@media (max-width: 880px) {
  .nav-toggle { display: grid; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 62px;
    flex-direction: column; align-items: stretch; gap: 14px;
    background: var(--su-paper); border-bottom: 1px solid var(--su-line);
    padding: 18px 28px 24px;
  }
  .site-nav.is-open { display: flex; }
  .nav-list { flex-direction: column; gap: 2px; }
  .nav-list a { padding: 10px; font-size: 15px; }
  .nav-actions { flex-direction: column; align-items: stretch; }
}

/* ── Bands ─────────────────────────────────────────────────────────── */

.band { padding: 84px 0; border-top: 1px solid var(--su-line); }
.band-tint { background: var(--ld-tint); }
.band-slim { padding: 56px 0; }
.band-flush-end { padding-bottom: 0; }

.band-head { max-width: 62ch; display: flex; flex-direction: column; gap: 15px; }
.band-head h2 { font-size: clamp(27px, 3.4vw, 35px); text-wrap: balance; }
.band-head h3 { font-size: clamp(22px, 2.6vw, 27px); text-wrap: balance; }
.band-head-sm h3 { font-size: clamp(20px, 2.3vw, 25px); }
.lead { font-size: 16.5px; color: var(--su-ink-2); line-height: 1.6; }
.band-body { margin-top: 46px; }

/* ── Hero ──────────────────────────────────────────────────────────── */

.hero { padding: 78px 0 88px; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 60px; align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hero-copy h1 {
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.04; letter-spacing: -0.042em;
  max-width: 15ch;
}
.hero-copy h1 em { font-style: normal; color: var(--su-ink-2); }
.hero-copy .lead { font-size: 17px; max-width: 46ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.hero-note {
  font-size: 13px; color: var(--su-ink-3); max-width: 46ch; line-height: 1.55;
  border-top: 1px solid var(--su-line); padding-top: 15px;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 46px; } }

/* The schematic. Hairlines and squares, not a glow — it is a wiring diagram of
   an account, and it should read like one. */
.hero-visual { margin: 0; }
.graph {
  border: 1px solid var(--su-line-2); border-radius: var(--radius-lg);
  background: var(--ld-surface); box-shadow: var(--ld-lift);
  padding: 22px 20px 20px;
  display: flex; flex-direction: column; align-items: center;
}
.node {
  border: 1px solid var(--su-line-2); border-radius: var(--radius);
  background: var(--ld-surface); padding: 11px 13px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%;
}
.node-kicker, .node-meta {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--su-ink-3);
}
.node-title { font-size: 14px; font-weight: 600; letter-spacing: -0.012em; }
.node-account { border-left: 2px solid var(--su-yellow); }
.node-core { background: var(--su-sunk); }
.node-entity { padding: 10px 11px; }
.node-entity .node-title { font-size: 12.5px; }
.node-badge {
  width: 18px; height: 18px; border-radius: 2px; margin-bottom: 5px;
  border: 1px solid var(--su-line-2); background: var(--su-sunk);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: var(--su-ink-2);
}
.graph-entities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }

.wire { width: 1px; height: 20px; background: var(--su-line-2); }
.wire-stem { width: 1px; }
.wire-fan { width: 100%; height: 18px; position: relative; }
.wire-fan::before {
  content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 0;
  height: 1px; background: var(--su-line-2);
}
.wire-fan i { position: absolute; top: 0; width: 1px; height: 18px; background: var(--su-line-2); }
.wire-fan i:nth-child(1) { left: 16.6%; }
.wire-fan i:nth-child(2) { left: 50%; }
.wire-fan i:nth-child(3) { left: 83.4%; }
/* The default fan spreads downward; naming it anyway so the pair reads as a
   pair in the markup rather than as one named case and one unnamed one. */
.wire-fan-down::before { top: 0; bottom: auto; }
.wire-fan-up::before { top: auto; bottom: 0; }

/* ── Chips ─────────────────────────────────────────────────────────── */

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-row-tight { gap: 5px; margin-top: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--su-line); border-radius: var(--radius-sm);
  padding: 2px 7px; background: var(--ld-surface);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em;
  color: var(--su-ink-2); white-space: nowrap;
}
.chip-solid { border-color: var(--su-yellow-lo); background: var(--su-yellow-wash); color: var(--su-yellow-deep); }
.chip-tag { color: var(--su-ink-4); }

/* ── Professions ───────────────────────────────────────────────────── */

.profession-picker { border: 0; padding: 0; margin: 0; }
.profession-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: 1px solid var(--su-line-2); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--ld-surface);
}
.profession-item { position: relative; border-left: 1px solid var(--su-line); }
.profession-item:first-child { border-left: 0; }
.profession-input { position: absolute; opacity: 0; pointer-events: none; }
.profession-card {
  display: flex; flex-direction: column; gap: 7px;
  padding: 17px 17px 19px; height: 100%; cursor: pointer;
  transition: background .12s ease;
}
.profession-card:hover { background: var(--su-sunk); }
.profession-mark {
  width: 20px; height: 20px; border-radius: 2px;
  border: 1px solid var(--su-line-2); background: var(--su-sunk);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--su-ink-2);
}
.profession-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.014em; }
.profession-body { font-size: 13px; color: var(--su-ink-2); line-height: 1.5; }
.profession-input:checked + .profession-card { background: var(--su-yellow-wash); }
.profession-input:checked + .profession-card .profession-mark {
  background: var(--su-yellow); border-color: var(--su-yellow-lo); color: #14110b;
}
.profession-input:checked + .profession-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--su-yellow);
}
.profession-input:focus-visible + .profession-card {
  outline: 2px solid var(--su-yellow-deep); outline-offset: -2px;
}
@media (max-width: 700px) {
  .profession-item { border-left: 0; border-top: 1px solid var(--su-line); }
  .profession-item:first-child { border-top: 0; }
}

.recommend { margin-top: 28px; }
.recommend-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
  gap: 38px; align-items: start;
}
.recommend-panel[hidden] { display: none; }
.recommend-lead { font-size: 14px; color: var(--su-ink-2); }
.recommend-title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--su-ink-3);
  margin-bottom: 12px;
}
.recommend-bundle {
  border-left: 2px solid var(--su-yellow); padding-left: 17px;
  display: flex; flex-direction: column; gap: 5px;
}
.bundle-name { font-size: 15.5px; font-weight: 600; }
.bundle-price {
  font-family: var(--font-mono); font-size: 27px; font-weight: 500;
  letter-spacing: -0.035em; display: flex; align-items: baseline; gap: 4px;
}
.bundle-price span { font-size: 13px; color: var(--su-ink-3); letter-spacing: 0; }
.bundle-from { font-family: var(--font-ui); font-size: 14px; color: var(--su-ink-2); }
.bundle-note { font-size: 12px; color: var(--su-ink-3); line-height: 1.5; }
.bundle-note a { color: var(--su-yellow-deep); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) { .recommend-panel { grid-template-columns: 1fr; gap: 24px; } }

/* ── The Core specification sheet ──────────────────────────────────── */

.core-grid { border-top: 1px solid var(--su-line-2); }

/* Two children, two columns — the key and its value. Explicit rather than
   letting auto-placement decide, because auto-placement with mixed spans is
   how a row silently gains a hole. */
.core-card {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: 40px; padding: 26px 0; border-bottom: 1px solid var(--su-line);
}
.card-key { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.card-val { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card-icon { color: var(--su-ink-3); display: block; }
.core-card h3 { font-size: 17.5px; letter-spacing: -0.024em; }
.card-val > p { font-size: 14.5px; color: var(--su-ink-2); line-height: 1.6; max-width: 68ch; }
.card-sub {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--su-ink-3);
}
.card-note { font-size: 13px; color: var(--su-ink-3); line-height: 1.6; max-width: 68ch; }
@media (max-width: 780px) {
  .core-card { grid-template-columns: 1fr; gap: 14px; }
}

.tick-list { display: flex; flex-direction: column; gap: 5px; }
.tick-list li { display: flex; gap: 9px; align-items: baseline; font-size: 14px; color: var(--su-ink-2); }
.tick-list li::before {
  content: ""; width: 5px; height: 5px; border-radius: 1px;
  background: var(--su-yellow-lo); flex: none; transform: translateY(-2px);
}

.split {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px;
  border: 1px solid var(--su-line); border-radius: var(--radius-lg); overflow: hidden;
}
.split-pane { padding: 15px 17px; }
.split-pane + .split-pane { border-left: 1px solid var(--su-line); background: var(--su-sunk); }
.split-head {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--su-ink-3);
}
.plain-list { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; }
.plain-list li { font-size: 13.5px; color: var(--su-ink-2); }
@media (max-width: 620px) {
  .split { grid-template-columns: 1fr; }
  .split-pane + .split-pane { border-left: 0; border-top: 1px solid var(--su-line); }
}

/* ── Tools: rules, not boxes ───────────────────────────────────────── */

.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--su-line-2); }
.tool-card {
  padding: 24px 26px 24px 0; border-bottom: 1px solid var(--su-line);
  display: flex; flex-direction: column; gap: 7px;
}
.tool-card:nth-child(3n+2), .tool-card:nth-child(3n) {
  padding-left: 26px; border-left: 1px solid var(--su-line);
}
.tool-card h3 { font-size: 15.5px; letter-spacing: -0.02em; }
.tool-card p { font-size: 14px; color: var(--su-ink-2); line-height: 1.55; }
@media (max-width: 780px) {
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card { padding: 20px 0 !important; border-left: 0 !important; }
}

/* ── The chain: the one band yellow may carry text on ──────────────── */

.chain-band { background: var(--su-night); color: var(--su-night-ink); padding: 76px 0; margin-top: 84px; }
.chain-band .label { color: var(--su-yellow); }
.chain-band .eyebrow::before { background: var(--su-yellow); }
.chain-title { font-size: clamp(25px, 3vw, 33px); color: var(--su-night-ink); margin-top: 15px; }
.chain-lead { font-size: 15.5px; color: var(--su-night-ink-2); max-width: 62ch; line-height: 1.6; margin-top: 12px; }
.chain { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 42px; border-top: 1px solid var(--su-night-3); }
.chain-link {
  padding: 19px 15px 19px 0; border-right: 1px solid var(--su-night-3);
  display: flex; flex-direction: column; gap: 5px; position: relative;
}
.chain-link:last-child { border-right: 0; }
.chain-link::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px;
}
.chain-link:first-child::before, .chain-link:last-child::before { background: var(--su-yellow); }
.chain-icon { color: var(--su-yellow); }
.chain-label { font-size: 14.5px; font-weight: 600; color: var(--su-night-ink); letter-spacing: -0.014em; }
.chain-meta { font-size: 12px; color: var(--su-night-ink-2); }
@media (max-width: 880px) {
  .chain { grid-template-columns: repeat(2, 1fr); }
  .chain-link { border-bottom: 1px solid var(--su-night-3); padding-right: 15px; }
}

/* ── Profession workspaces ─────────────────────────────────────────── */

.flow-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 50px; align-items: start; }
@media (max-width: 920px) { .flow-layout { grid-template-columns: 1fr; gap: 30px; } }
.flow { margin: 0; border-top: 1px solid var(--su-line-2); }
.flow-steps { display: flex; flex-direction: column; }
.flow-step {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 0; border-bottom: 1px solid var(--su-line);
  font-size: 14.5px;
}
.flow-dot {
  width: 6px; height: 6px; border-radius: 1px; flex: none;
  background: var(--su-line-3);
}
.flow-step-accent { background: var(--su-yellow-wash); padding-left: 11px; padding-right: 11px; margin: 0 -11px; border-radius: var(--radius-sm); }
.flow-step-accent .flow-dot { background: var(--su-yellow); }
.flow-step-end { font-weight: 600; }
.flow-step-end .flow-dot { background: var(--su-ink); }
.flow-caption { font-size: 12.5px; color: var(--su-ink-3); padding-top: 13px; }
.flow-side { display: flex; flex-direction: column; gap: 26px; }
.side-title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--su-ink-3);
  margin-bottom: 11px;
}

.band-footnote {
  margin-top: 44px; padding: 17px 19px;
  border-left: 2px solid var(--su-yellow); background: var(--ld-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14.5px; color: var(--su-ink-2); line-height: 1.6; max-width: 80ch;
}
.band-footnote strong { color: var(--su-ink); }

/* ── The product register ──────────────────────────────────────────── */

.legend { display: flex; flex-wrap: wrap; gap: 20px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--su-ink-2); }

/* A status is a square mark and a word, the same shape the application uses.
   `landing.js` rewrites the class when the registry says a product is live. */
.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--su-ink-3); white-space: nowrap;
}
.status::before {
  content: ""; width: 6px; height: 6px; border-radius: 1px;
  background: var(--su-ink-4); flex: none;
}
.status-available { color: var(--su-ok); }
.status-available::before { background: var(--su-ok); }
.status-building { color: var(--su-warn); }
.status-building::before { background: var(--su-warn); }
.status-future { color: var(--su-ink-3); }

.product-grid { border-top: 1px solid var(--su-line-2); }
.product-card {
  display: grid; grid-template-columns: 165px minmax(0, 1fr) 130px;
  gap: 28px; align-items: baseline;
  padding: 17px 0; border-bottom: 1px solid var(--su-line);
  position: relative;
}
/* Explicit placement, because `landing.js` appends a card whose source order is
   status, name, description — and the visual order has to hold either way. */
.product-card h3 { grid-column: 1; grid-row: 1; font-size: 15px; letter-spacing: -0.018em; }
.product-card p { grid-column: 2; grid-row: 1; font-size: 14px; color: var(--su-ink-2); line-height: 1.55; }
.product-card .status { grid-column: 3; grid-row: 1; justify-self: end; }
/* The registry hands over an accent per product; it earns a hairline, not a
   background. */
.product-card[style*="--accent"]::before {
  content: ""; position: absolute; left: -12px; top: 19px; bottom: 19px;
  width: 2px; background: var(--accent);
}
.product-alias {
  display: block; margin-top: 4px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.03em; color: var(--su-ink-3);
}
@media (max-width: 780px) {
  .product-card { grid-template-columns: 1fr; gap: 7px; }
  .product-card h3, .product-card p, .product-card .status {
    grid-column: 1; grid-row: auto; justify-self: start;
  }
}

/* ── Integration hub ───────────────────────────────────────────────── */

.hub { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center; }
.hub-side { display: flex; flex-direction: column; gap: 1px; }
.hub-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; border: 1px solid var(--su-line);
  background: var(--ld-surface); font-size: 13.5px; border-radius: var(--radius-sm);
}
.hub-core {
  border: 1px solid var(--su-yellow-lo); background: var(--su-yellow-wash);
  border-radius: var(--radius-lg); padding: 22px 24px; text-align: center;
  display: flex; flex-direction: column; gap: 7px; align-items: center; min-width: 210px;
}
.hub-core .card-icon { color: var(--su-yellow-deep); margin: 0; }
.hub-core-title { font-size: 15.5px; font-weight: 600; letter-spacing: -0.02em; }
.hub-core-body { font-size: 13px; color: var(--su-ink-2); max-width: 24ch; }
@media (max-width: 880px) { .hub { grid-template-columns: 1fr; } }

.note-row { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 46px; border-top: 1px solid var(--su-line-2); }
.note {
  padding: 21px 26px 0 0; border-right: 1px solid var(--su-line);
  display: flex; flex-direction: column; gap: 7px;
}
.note:last-child { border-right: 0; }
.note:not(:first-child) { padding-left: 26px; }
.note h3, .note h4 { font-size: 14.5px; letter-spacing: -0.018em; }
.note p { font-size: 13.5px; color: var(--su-ink-2); line-height: 1.55; }
@media (max-width: 780px) {
  .note-row { grid-template-columns: 1fr; }
  .note { border-right: 0; border-bottom: 1px solid var(--su-line); padding: 18px 0 !important; }
}

/* ── Identities ────────────────────────────────────────────────────── */

.switcher-layout { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 50px; align-items: start; }
@media (max-width: 920px) { .switcher-layout { grid-template-columns: 1fr; gap: 30px; } }

/* The same control the application draws, so the page is showing the product
   rather than an illustration of it. */
.switcher { border: 1px solid var(--su-line-2); border-radius: var(--radius-lg); background: var(--su-sunk); overflow: hidden; }
.switcher-head {
  padding: 10px 13px; border-bottom: 1px solid var(--su-line);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--su-ink-3);
}
.switcher-list { padding: 5px; display: flex; flex-direction: column; gap: 1px; }
.switcher-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px; border-radius: var(--radius-sm); font-size: 13.5px;
}
.switcher-item.is-active { background: var(--su-yellow-wash); font-weight: 600; }
.switcher-mark {
  width: 22px; height: 22px; border-radius: 2px; flex: none;
  border: 1px solid var(--su-line-2); background: var(--ld-surface);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--su-ink-2);
}
.switcher-tag {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em;
  color: var(--su-yellow-deep);
}
.switcher-foot { padding: 11px 13px; border-top: 1px solid var(--su-line); font-size: 12px; color: var(--su-ink-3); line-height: 1.5; }

.principle { display: flex; flex-direction: column; gap: 0; }
.principle-lead { font-size: 14.5px; color: var(--su-ink-2); line-height: 1.6; max-width: 64ch; margin-top: 11px; }
.ledger {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px;
  border: 1px solid var(--su-line); border-radius: var(--radius-lg); overflow: hidden;
}
.ledger-col { padding: 17px 19px; }
.ledger-col + .ledger-col { border-left: 1px solid var(--su-line); background: var(--su-sunk); }
.ledger-head {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--su-ink-3);
}
@media (max-width: 700px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger-col + .ledger-col { border-left: 0; border-top: 1px solid var(--su-line); }
}

.developers { margin-top: 76px; }

/* ── Pricing ───────────────────────────────────────────────────────── */

.pricing-note { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 40px; align-items: start; }
.pricing-title { font-size: 22px; letter-spacing: -0.028em; }
.pricing-note p { font-size: 14.5px; color: var(--su-ink-2); line-height: 1.6; max-width: 66ch; }
.pricing-note p + p { margin-top: 12px; }
@media (max-width: 780px) { .pricing-note { grid-template-columns: 1fr; gap: 14px; } }

/* ── CTA and footer ────────────────────────────────────────────────── */

.cta-band { background: var(--su-night); color: var(--su-night-ink); padding: 86px 0; }
.cta-inner { display: flex; flex-direction: column; gap: 19px; align-items: flex-start; max-width: 62ch; }
.cta-band .label { color: var(--su-yellow); }
.cta-band .eyebrow::before { background: var(--su-yellow); }
.cta-band h2 { font-size: clamp(28px, 3.8vw, 42px); letter-spacing: -0.038em; color: var(--su-night-ink); text-wrap: balance; }
.cta-band .lead { color: var(--su-night-ink-2); }

.site-footer { background: var(--su-night-2); color: var(--su-night-ink-2); padding: 58px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 36px; padding-bottom: 46px; }
.footer-brand .brand-word { color: var(--su-night-ink); }
.footer-tagline { font-size: 13.5px; margin-top: 13px; max-width: 30ch; line-height: 1.55; }
.footer-head {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: #7d7466;
  margin-bottom: 13px;
}
.footer-col li { margin-bottom: 7px; }
.footer-col a { font-size: 14px; color: var(--su-night-ink-2); }
.footer-col a:hover { color: var(--su-night-ink); }
.footer-base {
  border-top: 1px solid var(--su-night-3); padding: 19px 0 28px;
  display: flex; gap: 17px; flex-wrap: wrap; align-items: center; font-size: 13px;
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }