/* ── tokens ─────────────────────────────────────────────────────────
     Palette, radii and type scale measured off clerk.com. */
  :root {
    color-scheme: light;
    --ground:      #f7f7f8;
    --sheet:       #ffffff;
    --ink:         #131316;
    --ink-2:       #42434d;
    --muted:       #747686;
    --faint:       #9394a1;
    --line:        #e8e8ec;
    --line-2:      #d9d9de;
    --accent:      #131316;
    --accent-2:    #2a2a30;
    --accent-lite: #ffffff;
    --accent-soft: #ececed;
    --dark:        #131316;
    --dark-2:      #0e0e11;
    --dark-line:   #26262c;
    --dark-text:   #8b8d98;
    --green:       #22a06b;
    --amber:       #b06f14;
    --r-btn:       6px;
    --r-card:      12px;
    --r-sheet:     16px;
    --shadow-card: 0 1px 2px rgba(19,19,22,.04), 0 8px 24px -12px rgba(19,19,22,.16);
    --shadow-pop:  0 2px 4px rgba(19,19,22,.04), 0 24px 56px -20px rgba(19,19,22,.28);
    --sheet-w:     1184px;

    /* ── brand ─────────────────────────────────────────────────────────
       Soba's own identity, independent of the Clerk-derived UI palette
       above. See brand/README.md. */
    --brand-ink:    #1a1815;
    --brand-soba:   #8a7a63;
    --brand-husk:   #c9bda8;
    --brand-ground: #f6f3ec;
    --brand-black:  #141210;
  }

  /* ── base ───────────────────────────────────────────────────────── */
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "Inter", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
  }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  p, li, td, th, blockquote, .fact, .acc-text { overflow-wrap: break-word; }
  a { color: inherit; text-decoration: none; }
  p { margin: 0; }
  h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
  ::selection { background: var(--accent-soft); color: var(--accent); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

  .bb-sticky { display: none; }
  .mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

  /* ── page sheet ─────────────────────────────────────────────────── */
  .sheet {
    max-width: var(--sheet-w); margin: 0 auto;
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: var(--r-sheet);
    overflow: hidden;
  }
  .inner { max-width: 1040px; margin-inline: auto; padding-inline: 32px; }

  /* ── announcement + nav ─────────────────────────────────────────── */
  .banner {
    background: var(--ink); color: #fff;
    height: 40px; display: flex; align-items: center; justify-content: center;
    gap: 14px; font-size: 13px; font-weight: 500;
  }
  .banner span { opacity: .55; }
  .banner a { display: inline-flex; align-items: center; gap: 5px; }
  .banner a:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* the sticky offset and the wrap's own padding stack above the pill, so
     both are halved rather than one of them zeroed. */
  .navwrap { position: sticky; top: 4px; z-index: 60; padding: 4px 16px 12px; }
  .nav {
    max-width: var(--sheet-w); margin-inline: auto;
    background: rgba(255,255,255,.86); backdrop-filter: blur(14px) saturate(1.6);
    border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 1px 2px rgba(19,19,22,.05), 0 10px 30px -18px rgba(19,19,22,.25);
    height: 56px; display: flex; align-items: center; gap: 18px; padding: 0 14px 0 18px;
  }
  .nav-sep { width: 1px; height: 20px; background: var(--line-2); flex: none; }
  .nav > .nav-sep { margin-inline: 10px; }
  .nav-right .nav-sep { margin-inline: 8px; }
  .logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; letter-spacing: -.03em; }
  .logo svg { display: block; }
  /* which product you are on, in the shape the docs nav already uses for it */
  .nav-tag {
    font-size: 13px; font-weight: 500; color: var(--muted);
    padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px;
    white-space: nowrap;
  }
  /* the positioning line, between the section pill and the links. The only
     thing in this bar that is not a destination, so it is set a step down from
     a link and in muted — a motto that reads as clickable is a worse motto. */
  .nav-motto {
    font-size: 13px; color: var(--muted); white-space: nowrap;
    letter-spacing: -.01em;
  }
  .nav-links { display: flex; align-items: center; gap: 24px; margin-right: auto; }
  .nav-links a { font-size: 15px; color: var(--ink); opacity: .82; }
  .nav-links a:hover { opacity: 1; }
  .nav-right { display: flex; align-items: center; gap: 4px; }
  /* the bars are absolutely placed so the open state rotates about one shared
     centre and actually closes into an X. */
  .nav-burger {
    display: none; position: relative; flex: none; margin-left: 6px;
    width: 34px; height: 34px; padding: 0; cursor: pointer;
    background: transparent; border: 1px solid var(--line-2); border-radius: 8px;
  }
  .nav-burger i {
    position: absolute; left: 9px; width: 14px; height: 1.5px; border-radius: 2px;
    background: var(--ink); transition: transform .18s ease, opacity .14s ease, top .18s ease;
  }
  .nav-burger i:nth-child(1) { top: 11px; }
  .nav-burger i:nth-child(2) { top: 15.5px; }
  .nav-burger i:nth-child(3) { top: 20px; }
  .nav.is-open .nav-burger i:nth-child(1) { top: 15.5px; transform: rotate(45deg); }
  .nav.is-open .nav-burger i:nth-child(2) { opacity: 0; }
  .nav.is-open .nav-burger i:nth-child(3) { top: 15.5px; transform: rotate(-45deg); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: var(--r-btn); font-family: inherit; font-weight: 500; font-size: 13px;
    height: 32px; padding: 0 12px; border: .5px solid transparent; cursor: pointer;
    letter-spacing: -.01em; transition: background .14s ease, color .14s ease, border-color .14s ease;
  }
  .btn-text { background: transparent; color: var(--ink); }
  .btn-text:hover { background: rgba(19,19,22,.05); }
  .btn-dark { background: var(--ink); color: #fff; }
  .btn-dark:hover { background: #2a2a30; }
  .btn-accent { background: var(--ink); color: #fff; }
  .btn-accent:hover { background: #2a2a30; }
  .btn-outline { background: #fff; color: var(--ink); border-color: var(--line-2); }
  .btn-outline:hover { border-color: var(--faint); }
  .btn-lg { height: 40px; padding: 0 18px; font-size: 14px; }
  .arrow { font-size: 9px; opacity: .7; }

  /* ── hero ───────────────────────────────────────────────────────── */
  /* the eyebrow used to sit above the headline; without it the top rule sat
     too close to a 60px line */
  .hero { position: relative; padding: 152px 0 104px; text-align: center; overflow: hidden; }
  .hero-bg {
    position: absolute; inset: 0; pointer-events: none;
    color: var(--ink); opacity: .055;
  }
  .hero-fade {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(76% 62% at 50% 40%, #fff 24%, rgba(255,255,255,.72) 52%, rgba(255,255,255,0) 78%);
  }
  .hero-in { position: relative; }
  h1 {
    font-size: clamp(33px, 5vw, 60px); line-height: 1.08; letter-spacing: -.032em;
    max-width: 20ch; margin-inline: auto;
  }
  /* the two words the whole page is about, underlined rather than recoloured */
  h1 em {
    font-style: normal; white-space: nowrap;
    box-shadow: inset 0 -.11em 0 rgba(26, 24, 21, .22);
  }
  .hero-sub {
    margin-top: 22px; font-size: 18px; line-height: 1.55; color: var(--muted);
    max-width: 60ch; margin-inline: auto; letter-spacing: -.012em;
  }
  .hero-cta { margin-top: 30px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
  .prompt-pill {
    margin: 36px auto 0; width: fit-content; max-width: 100%;
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 7px 8px 7px 14px; box-shadow: var(--shadow-card);
  }
  .prompt-pill code { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--muted); white-space: nowrap; overflow-x: auto; }
  .prompt-pill code b { color: var(--ink); font-weight: 500; }
  .icon-btn {
    border: 0; background: transparent; cursor: pointer; color: var(--faint);
    width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; font-size: 11px;
    font-family: "JetBrains Mono", monospace;
  }
  .icon-btn:hover { background: var(--ground); color: var(--ink); }

  /* ── runtime strip ──────────────────────────────────────────────── */
  .strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip > div { padding: 30px 24px; border-left: 1px solid var(--line); display: flex; align-items: center; }
  .strip > div:first-child { border-left: 0; }
  /* no glyphs: a diamond, a square and a something were decoration dressed as
     icons, and the third of them was not a thing anybody connects */
  .strip-item { flex-direction: column; align-items: flex-start; gap: 5px; }
  .strip-item b { font-weight: 600; font-size: 16px; letter-spacing: -.02em; }
  .strip-item em { font-style: normal; font-size: 13px; color: var(--muted); line-height: 1.4; }

  /* ── section furniture ──────────────────────────────────────────── */
  .section { padding: 92px 0; }
  /* the nav is sticky, so an anchor lands under it unless the target
     reserves the room itself */
  .section, .dark-band, .quote-band { scroll-margin-top: 76px; }
  .eyebrow { font-size: 13px; font-weight: 500; color: var(--accent); letter-spacing: -.005em; }
  .sec-h { font-size: clamp(30px, 3.6vw, 44px); font-weight: 400; line-height: 1.1; letter-spacing: -.028em; margin-top: 14px; max-width: 18ch; text-wrap: balance; }
  .sec-p { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 56ch; letter-spacing: -.012em; }
  .sec-p b { font-weight: 600; color: var(--ink); }
  .sec-head-c { text-align: center; }
  .sec-h-wide { max-width: 30ch; }
  .sec-head-c .sec-h, .sec-head-c .sec-p { margin-inline: auto; }
  .link-more { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; margin-top: 26px; }
  .link-more:hover { color: var(--accent); }
  /* on a dark ground --accent IS the ground, so the hover would erase the
     link. Underline it instead, the way the banner's links behave. */
  .dark-band .link-more:hover, .cn-open .link-more:hover {
    color: #fff; text-decoration: underline; text-underline-offset: 4px;
  }

  /* ── two-column feature ─────────────────────────────────────────── */
  .split { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: 56px; align-items: start; }
  .split-flip { grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); }
  /* nothing under the head any more, so it sits against the middle of the
     figure rather than floating at the top of an empty column */
  .split-mid { align-items: center; }

  /* Lead with the thing, then the detail. Desktop keeps heading and detail
     stacked in the left column; a phone puts the mock between them so the
     first thing you see is the component, not five paragraphs about it. */
  .split-lead { grid-template-areas: "head stage" "rest stage"; column-gap: 56px; row-gap: 0; }
  .split-lead > .sp-head { grid-area: head; }
  .split-lead > .sp-rest { grid-area: rest; }
  .split-lead > .stage { grid-area: stage; }

  /* accordion list, Clerk's component index */
  .acc { margin-top: 34px; border-top: 1px solid var(--line); }
  .acc-item { border-bottom: 1px solid var(--line); padding: 18px 0; }
  .acc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .acc-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; }
  .acc-item.is-open .acc-dot { background: var(--accent); border-color: var(--accent); }
  .acc-title { font-family: "JetBrains Mono", monospace; font-size: 12.5px; font-weight: 500; }
  /* component picker: a row of buttons, not an accordion */
  .pv-label {
    display: flex; align-items: center; gap: 10px; margin-top: 30px;
    font-size: 12.5px; font-weight: 600; letter-spacing: -.01em;
  }
  .pv-label .in-design { margin-left: 0; }
  .pv-dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 16px; }
  .pv-dot {
    width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px;
    background: var(--line-2); cursor: pointer;
    transition: background .18s ease, width .18s ease;
  }
  .pv-dot { position: relative; }
  .pv-dot::after { content: ""; position: absolute; inset: -14px -8px; }
  .pv-dot:hover { background: var(--faint); }
  .pv-dot[aria-selected="true"] { width: 18px; background: var(--accent); }

  /* carousel arrows flanking the live preview */
  .stage-frame { position: relative; }
  .pv-arrow {
    width: 32px; height: 32px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 50%; background: #fff;
    color: var(--ink-2); cursor: pointer;
    box-shadow: 0 1px 2px rgba(19, 19, 22, .06), 0 6px 16px -8px rgba(19, 19, 22, .25);
    transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
  }
  .pv-arrow:hover { border-color: var(--line-2); color: var(--ink); transform: scale(1.06); }
  .pv-arrow:active { background: var(--ground); transform: scale(.96); }
  /* fixed height, not centred: panel heights vary from 177px to 625px, so
     50% would make the arrows jump on every switch. */
  .stage-arrow { position: absolute; top: 130px; margin-top: -16px; z-index: 6; }
  .stage-prev { left: -18px; }
  .stage-next { right: -18px; }
  @media (max-width: 1000px) { .stage-arrow { display: none; } }

  /* a segmented picker: grey trough, white pill for the live component */
  .pv-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 14px;
    padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: var(--ground);
  }
  .pv-tab {
    display: flex; align-items: center; gap: 9px; text-align: left;
    font-family: inherit; font-size: 13px; font-weight: 500;
    padding: 9px 11px; border: 1px solid transparent; border-radius: 7px;
    background: transparent; color: var(--ink-2); cursor: pointer; letter-spacing: -.01em;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .pv-tab i {
    width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); flex: none;
    font-style: normal; transition: background .15s ease;
  }
  .pv-tab:hover { background: rgba(255, 255, 255, .72); color: var(--ink); }
  .pv-tab[aria-selected="true"] {
    background: #fff; border-color: var(--line); color: var(--accent);
    box-shadow: 0 1px 2px rgba(19, 19, 22, .06);
  }
  .pv-tab[aria-selected="true"] i { background: var(--accent); }
  .pv-desc {
    margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--muted);
    max-width: 46ch; min-height: 44px;
  }

  /* only the toggling accordions advertise themselves as clickable */
  [data-accordion] .acc-head { cursor: pointer; user-select: none; }
  [data-accordion] .acc-head::after {
    content: ""; width: 7px; height: 7px; margin-left: auto; margin-right: 2px;
    border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
    transform: rotate(45deg) translate(-2px, -2px); transform-origin: center;
    transition: transform .2s ease, border-color .15s ease;
  }
  [data-accordion] .acc-item.is-open .acc-head::after {
    transform: rotate(225deg) translate(-2px, -2px); border-color: var(--accent);
  }
  [data-accordion] .acc-head:hover .acc-title { color: var(--accent); }
  [data-accordion] .acc-head:hover::after { border-color: var(--accent); }
  [data-accordion] .acc-head:hover .acc-dot { border-color: var(--accent); }
  [data-accordion] .acc-item:not(.is-open) .acc-head:hover { opacity: 1; }
  .acc-title { transition: color .15s ease; }
  .acc-dot { transition: border-color .15s ease, background .15s ease; }
  .pv-item { border-radius: 6px; transition: color .15s ease, background .15s ease; }
  .pv-item:hover { background: var(--ground); }
  .pv-item { padding-inline: 8px; margin-inline: -8px; }
  .acc-body { padding: 10px 0 2px 21px; }
  .acc-text { font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 46ch; }
  .acc-list { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
  .acc-list span { font-family: "JetBrains Mono", monospace; font-size: 12.5px; font-weight: 500; color: var(--ink); }
  .acc-list span.on { color: var(--accent); }
  .acc-list span em { font-style: normal; color: var(--faint); font-weight: 400; margin-left: 8px; }
  /* span.in-design, not .in-design: `.acc-list span` is more specific and would
     otherwise win the font-family and leave the tag in monospace. */
  span.in-design {
    font-family: "Inter", ui-sans-serif, sans-serif; font-size: 12px; font-weight: 500; color: var(--faint);
    border: 1px solid var(--line); border-radius: 4px; padding: 1.5px 5px;
    margin-left: 10px; white-space: nowrap; vertical-align: 1.5px;
  }

  /* ── product card (the run board) ───────────────────────────────── */
  /* ── component gallery (left list drives the right preview) ────── */
  .pv-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: 0; padding: 7px 0; cursor: pointer;
    font-family: "JetBrains Mono", monospace; font-size: 12.5px; font-weight: 500;
    color: var(--ink); letter-spacing: -.01em;
  }
  .pv-item:hover { color: var(--accent); }
  .pv-item[aria-selected="true"] { color: var(--accent); }
  .pv-item i {
    width: 5px; height: 5px; border-radius: 50%; background: var(--line-2);
    flex: none; font-style: normal; transition: background .15s ease;
  }
  .pv-item[aria-selected="true"] i { background: var(--accent); }
  /* the .ghost behind these is absolutely positioned, so the slide needs a
     stacking context of its own or the blur paints over the card. */
  .pv-viewport { position: relative; overflow: hidden; transition: height .38s cubic-bezier(.4, 0, .2, 1); }
  .pv-track { display: flex; align-items: flex-start; transition: transform .38s cubic-bezier(.4, 0, .2, 1); }
  .pv-panel { position: relative; flex: 0 0 100%; min-width: 0; }
  .pv-panel .mockcard,
  .pv-panel .codecard,
  .pv-panel .sfoot { max-width: 408px; margin-inline: auto; }
  .pv-panel[hidden] { display: none !important; }
  .mockcard {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
    box-shadow: var(--shadow-pop); overflow: hidden;
  }
  .mock-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 7px 8px 7px 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted);
  }
  .mock-bar b { color: var(--ink); font-weight: 600; font-family: "JetBrains Mono", monospace; font-size: 12px; }
  .mock-body { padding: 28px 26px 24px; }
  .mock-mark {
    width: 40px; height: 40px; border-radius: 11px; background: var(--brand-black);
    display: grid; place-items: center; margin: 0 auto 18px;
  }
  .mock-title { text-align: center; font-size: 17px; font-weight: 700; letter-spacing: -.025em; }
  .mock-sub { text-align: center; font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
  .mock-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
  .mock-btn {
    position: relative; display: flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px;
    background: #fff; font-size: 14px; font-weight: 500; letter-spacing: -.012em; color: var(--ink);
  }
  .mock-btn-in { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-2); }
  .mock-btn-in svg { color: var(--ink); flex: none; }
  .mock-badge {
    position: absolute; right: 10px; font-size: 10.5px; font-weight: 500; color: var(--muted);
    background: var(--ground); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px;
  }
  .mock-or {
    display: flex; align-items: center; gap: 12px; margin: 18px 0;
    font-size: 12px; color: var(--faint);
  }
  .mock-or::before, .mock-or::after { content: ""; height: 1px; flex: 1; background: var(--line); }
  .mock-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; letter-spacing: -.01em; }
  .mock-input {
    display: flex; align-items: center; height: 38px; padding: 0 12px;
    border: 1px solid var(--line-2); border-radius: 8px; background: #fff;
    font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: var(--muted);
  }
  .mock-hint { font-size: 11.5px; color: var(--faint); margin-top: 7px; }
  .mock-cta {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    height: 40px; margin-top: 20px; border-radius: 8px;
    background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; letter-spacing: -.012em;
  }
  .mock-cta .arrow { opacity: .55; }
  .mock-foot {
    border-top: 1px solid var(--line); padding: 12px; text-align: center;
    font-size: 12px; color: var(--faint); background: #fcfcfd;
  }
  /* pricing table + checkout previews */
  .mock-wide { max-width: none !important; }
  .mock-body-tight { padding: 16px; }

  /* ── the connect button, the one control that lives in the host UI ─────── */
  .cbtn-stage { padding: 18px 4px; text-align: center; }
  .cbtn-stage + .cbtn-stage { border-top: 1px solid var(--line); }
  .cbtn {
    display: inline-flex; align-items: center; gap: 9px;
    height: 38px; padding: 0 16px; border-radius: 9px;
    background: var(--ink); color: #fff; border: 1px solid var(--ink);
    font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  }
  .cbtn-glyph { flex: none; opacity: .9; }
  .cbtn-ghost {
    --btn-ground: #fff;
    background: #fff; color: var(--ink); border-color: var(--line-2);
    box-shadow: 0 1px 2px rgba(19, 19, 22, .05);
  }
  .cbtn-on {
    --btn-ground: #fff;
    background: #fff; color: var(--ink); border-color: var(--line-2); font-weight: 500;
    font-family: "JetBrains Mono", monospace; font-size: 12.5px;
  }
  .cbtn-cap { margin-top: 11px; font-size: 12px; color: var(--faint); letter-spacing: -.005em; }
  .plangrid { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .plan { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
  .plan-head { padding: 14px 14px 13px; background: #fcfcfd; border-bottom: 1px solid var(--line); }
  .plan-name { font-size: 13px; font-weight: 700; letter-spacing: -.015em; }
  .plan-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
  .plan-price { display: flex; align-items: baseline; gap: 5px; margin-top: 12px; }
  .plan-price b { font-size: 23px; font-weight: 700; letter-spacing: -.035em; }
  .plan-price span { font-size: 11.5px; color: var(--muted); }
  .plan-toggle { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
  .toggle { width: 26px; height: 15px; border-radius: 999px; background: var(--line-2); position: relative; flex: none; }
  .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
  .plan-cta {
    margin: 13px 13px 0; height: 32px; border-radius: 7px; background: var(--ink); color: #fff;
    font-size: 12.5px; font-weight: 500; display: grid; place-items: center; letter-spacing: -.01em;
  }
  .plan-cta-quiet { background: var(--ground); color: var(--muted); border: 1px solid var(--line); }
  .plan-feats { padding: 14px 13px 15px; display: flex; flex-direction: column; gap: 9px; }
  .plan-feat { display: flex; gap: 8px; font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
  .plan-feat i { font-style: normal; color: var(--faint); flex: none; }

  /* ── billing builder ────────────────────────────────────────────────
     Two panes: the parameters you set on the left, the offer and the
     invoice they produce on the right. Driven by the script at the foot
     of index.html; every value here is also legible with JS off. */
  .bb {
    margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    border: 1px solid var(--line); border-radius: 16px; background: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset,
                0 1px 2px rgba(19, 19, 22, .04),
                0 28px 60px -34px rgba(19, 19, 22, .42);
    overflow: hidden;
  }
  .bb-left { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
  .bb-left-bar, .bb-right-bar {
    display: flex; align-items: center; gap: 8px; justify-content: space-between;
    padding: 13px 22px; border-bottom: 1px solid var(--line);
    font-size: 12px; color: var(--muted);
  }
  .bb-left-bar b { color: var(--ink); font-weight: 600; font-size: 13px; letter-spacing: -.015em; }
  .bb-editing { margin-right: auto; font-size: 12px; color: var(--faint); }
  .bb-editing em { font-style: normal; font-weight: 500; color: var(--ink-2); }
  .bb-right-bar { justify-content: flex-start; background: #fbfbfc; }
  .bb-arrow { color: var(--faint); }

  .bb-fields { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 6px 22px; }
  .bb-field {
    display: flex; align-items: center; gap: 18px;
    padding: 11px 0; border-bottom: 1px solid var(--line);
  }
  .bb-field:last-child { border-bottom: 0; }
  .bb-field:first-child { padding-top: 0; }
  .bb-head { flex: none; width: 92px; }
  .bb-lab {
    font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500; color: var(--muted);
  }
  .bb-hint { display: none; }
  .bb-seg {
    margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px;
    padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: var(--ground);
  }
  .bb-opt {
    font: inherit; font-size: 12.5px; font-weight: 500; letter-spacing: -.01em;
    color: var(--muted); cursor: pointer; white-space: nowrap;
    background: transparent; border: 1px solid transparent; border-radius: 7px;
    padding: 6px 12px;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .bb-opt:hover { background: rgba(255, 255, 255, .72); color: var(--ink); }
  .bb-opt.is-on {
    background: #fff; border-color: var(--line); color: var(--ink); font-weight: 600;
    box-shadow: 0 1px 2px rgba(19, 19, 22, .07);
  }
  .bb-field.is-mute { opacity: .38; }
  .bb-field.is-mute .bb-opt { pointer-events: none; }
  .bb-opt.is-void { opacity: .35; pointer-events: none; text-decoration: line-through; }
  .bb-left-foot {
    display: flex; align-items: center; gap: 16px; justify-content: space-between;
    padding: 13px 20px; border-top: 1px solid var(--line); background: #fbfbfc;
  }
  .bb-left-foot p { font-size: 12.5px; color: var(--muted); }
  .bb-reset {
    font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; flex: none;
    background: none; border: 0; padding: 4px 2px; text-decoration: underline;
    text-underline-offset: 3px; text-decoration-color: var(--line-2);
  }
  .bb-reset:hover { color: var(--ink); }

  .bb-right { background: var(--ground); display: flex; flex-direction: column; }
  .bb-quote {
    margin: 22px 22px 0; background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset,
                0 2px 4px rgba(19, 19, 22, .04),
                0 26px 50px -22px rgba(19, 19, 22, .3);
    padding: 24px 24px 22px;
  }
  .bb-q-top { display: flex; align-items: center; gap: 10px; }
  .bb-plan { font-size: 13px; font-weight: 700; letter-spacing: -.015em; }
  .bb-pill {
    margin-left: auto; font-size: 11.5px; font-weight: 500; border-radius: 999px;
    padding: 3px 9px; background: #eaf6f0; color: var(--green);
  }
  .bb-price { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
  .bb-price b { font-size: 42px; font-weight: 700; letter-spacing: -.042em; line-height: 1; }
  .bb-price s { font-size: 19px; color: var(--faint); letter-spacing: -.03em; }
  .bb-price span { font-size: 12.5px; color: var(--muted); }
  .bb-then { margin-top: 9px; font-size: 12.5px; color: var(--muted); line-height: 1.5; min-height: 19px; }
  .bb-feats { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .bb-feats li {
    position: relative; padding-left: 19px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45;
  }
  .bb-feats li::before {
    content: "\2713"; position: absolute; left: 0; top: 0; color: var(--faint); font-size: 11px;
  }
  .bb-cta {
    margin-top: 17px; height: 38px; display: grid; place-items: center;
    background: var(--accent); color: #fff; border-radius: 8px;
    font-size: 13px; font-weight: 500; letter-spacing: -.01em;
  }
  .bb-applied {
    margin-top: 10px; display: flex; align-items: center; gap: 7px; justify-content: center;
    font-size: 11.5px; color: var(--green);
  }
  .bb-applied i { font-style: normal; }
  .bb-applied[hidden], .bb-rec-row[hidden], .bb-price s[hidden] { display: none; }

  /* the deck: the plan being priced sits on top, the rest of the catalogue
     tucks under it so you can see there are more without reading them. */
  .bb-deck { position: relative; margin: 20px 20px 0; }
  .bb-deck .bb-quote { margin: 0; position: relative; z-index: 3; }
  .bb-peek {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; font: inherit; text-align: left; cursor: pointer;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow-card); padding: 44px 18px 13px;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
  }
  #bb-peek-1 { z-index: 2; width: calc(100% - 18px); margin: -38px auto 0; }
  #bb-peek-2 { z-index: 1; width: calc(100% - 36px); margin: -34px auto 0; background: #fcfcfd; }
  .bb-peek:hover { transform: translateY(4px); border-color: var(--line-2); background: #fff; }
  .bb-peek:focus-visible { transform: translateY(4px); }
  .bb-peek-n { font-size: 12.5px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
  .bb-peek-p { font-size: 12.5px; color: var(--muted); }
  .bb-deck-k { margin: 14px 20px 0; font-size: 11.5px; color: var(--faint); text-align: center; }

  /* ── the run, drawn top to bottom ───────────────────────────────────
     Two bars and a fork into three destinations. The fork's rail is built
     from the three cells so its ends land exactly on the outer cards'
     centres, whatever the column width works out to. */

  /* right: everything a run can land on */
  .ar-k {
    display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px;
    font-size: 12px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  }
  .ar-k + .ar-grid + .ar-k { margin-top: 16px; }
  .ar-k em {
    font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--muted); margin-left: auto;
    background: var(--ground); border-radius: 999px; padding: 2px 8px;
  }
  .ar-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .ar-chip {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
    min-width: 0; box-shadow: 0 1px 1px rgba(19, 19, 22, .03);
  }
  /* the marks are the providers' own; they sit in ink so the row stays one system */
  .ar-chip svg { width: 14px; height: 14px; flex: none; color: var(--ink); }
  .ar-cn {
    min-width: 0; font-size: 11.5px; font-weight: 600; letter-spacing: -.015em; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ar-cn em {
    font-style: normal; font-weight: 400; font-size: 10.5px; letter-spacing: 0; color: var(--faint);
  }
  /* the rest of the runtimes, folded into one row so the column stays short */
  .ar-more {
    grid-column: 1 / -1;
    font-family: "Inter", ui-sans-serif, sans-serif; font-size: 11.5px; font-weight: 400;
    color: var(--faint); background: var(--ground); border-style: dashed; box-shadow: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ar-dots { font-family: "JetBrains Mono", monospace; letter-spacing: .12em; color: var(--line-2); }
  .ar-any {
    display: block; margin-top: 10px; padding: 9px 10px; text-align: center;
    border: 1px dashed var(--line-2); border-radius: 8px;
    font-size: 11px; color: var(--muted);
  }

  .flow { margin: 44px auto 0; max-width: 860px; }

  /* narrower than the fork below them: one app, one layer, four places it
     can go — the shape of the figure should say that before the words do */
  .fl-bar {
    max-width: 600px; margin-inline: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    border: 1px solid var(--line); border-radius: 12px; background: #fff;
    padding: 18px 22px; box-shadow: 0 1px 2px rgba(19, 19, 22, .04);
  }
  .fl-bar b { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; letter-spacing: -.025em; }
  .fl-bar span { font-size: 13.5px; color: var(--muted); text-align: right; }
  .fl-mark { width: 18px; height: 18px; flex: none; }
  /* the layer itself, on a tint of the page's own grey */
  .fl-bar-soba { background: var(--accent-soft); border-color: var(--line-2); box-shadow: none; }
  .fl-bar-soba span { color: var(--muted); }

  /* the fork: a stem, a rail across the three cells, a drop into each */
  .fl-fork { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; height: 44px; }
  .fl-fork::before {
    content: ""; position: absolute; top: 2px; height: 16px; left: 50%; width: 1px;
    margin-left: -.5px; background: var(--line-2);
  }
  .fk { position: relative; }
  .fk::before {
    content: ""; position: absolute; top: 18px; bottom: 9px; left: 50%; width: 1px;
    margin-left: -.5px; background: var(--line-2);
  }
  .fk::after { content: ""; position: absolute; top: 18px; height: 1px; background: var(--line-2); }
  .fk-l::after { left: 50%; right: -6px; }
  .fk-c::after { left: -6px; right: -6px; }
  .fk-r::after { left: -6px; right: 50%; }

  .fl-ends { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .fl-card {
    position: relative;
    border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 15px;
    box-shadow: 0 1px 2px rgba(19, 19, 22, .04);
  }
  /* the arrowhead belongs to the card it points into */
  .fl-card::before {
    content: ""; position: absolute; top: -10px; left: 50%; margin-left: -4px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 9px solid var(--line-2);
  }
  /* the one you pay for is the one you do not own */
  .fl-card-buy { border-style: dashed; border-color: var(--line-2); background: var(--ground); box-shadow: none; }
  .fl-k { display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
  .fl-m { width: 14px; height: 14px; flex: none; margin-top: 1px; fill: var(--ink); }
  .fl-v { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--brand-soba); }
  .fl-v-cost { color: var(--muted); }
  .fl-s { margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

  /* one arrow down between the bars */
  .fl-down { position: relative; height: 34px; }
  .fl-down::before {
    content: ""; position: absolute; top: 4px; bottom: 9px; left: 50%; width: 1px;
    margin-left: -.5px; background: var(--line-2);
  }
  .fl-down::after {
    content: ""; position: absolute; bottom: 0; left: 50%; margin-left: -4px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 9px solid var(--line-2);
  }

  .fl-note {
    margin-top: 22px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--muted);
  }
  .fl-note b { color: var(--ink); font-weight: 600; }
  .fl-note a { margin-left: 6px; font-weight: 500; color: var(--ink); }
  .fl-note a:hover { text-decoration: underline; text-underline-offset: 3px; }

  @media (max-width: 760px) {
    .fl-bar { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; }
    .fl-bar span { text-align: left; }
    .fl-fork { grid-template-columns: minmax(0, 1fr); height: 34px; }
    .fl-fork .fk:not(.fk-l) { display: none; }
    .fl-fork .fk:not(.fk-c) { display: none; }
    .fk-c::after { display: none; }
    .fl-ends { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .fl-card + .fl-card::before { top: -22px; }
  }

  .bb-rec { margin: 22px 20px 20px; border-top: 1px solid var(--line-2); padding-top: 14px; }
  .bb-rec-k {
    font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500; color: var(--faint); margin-bottom: 4px;
  }
  .bb-rec-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 7px 0; font-size: 12.5px; color: var(--muted); border-bottom: 1px dotted var(--line-2);
  }
  .bb-rec-row:last-child { border-bottom: 0; }
  .bb-rec-row b { color: var(--ink); font-weight: 600; white-space: nowrap; }

  @media (max-width: 900px) {
    .bb { grid-template-columns: minmax(0, 1fr); }
    .bb-left { border-right: 0; border-bottom: 1px solid var(--line); }
  }
  @media (max-width: 560px) {
    .bb-field { flex-direction: column; align-items: flex-start; gap: 8px; }
    .bb-head { width: auto; }
    .bb-seg { justify-content: flex-start; }
    .bb-left-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  }

  .co-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--line);
    font-size: 14px; font-weight: 700; letter-spacing: -.02em;
  }
  .co-x { color: var(--faint); font-weight: 400; font-size: 16px; }
  .co-lines { padding: 4px 0; }
  .co-line {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 11px 16px; font-size: 13px; color: var(--ink-2);
  }
  .co-amt { text-align: right; }
  .co-amt b { display: block; color: var(--ink); font-weight: 600; }
  .co-amt em { font-style: normal; font-size: 11px; color: var(--faint); }
  .co-total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 13px; color: var(--ink); font-weight: 600; }
  .co-sec { margin: 12px 16px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fcfcfd; }
  .co-sec-last { margin-bottom: 16px; }
  .co-sec-t { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 10px; }
  .co-select {
    display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px;
    border: 1px solid var(--line-2); border-radius: 8px; background: #fff; font-size: 12.5px; color: var(--ink-2);
  }
  .co-card { width: 20px; height: 14px; border-radius: 3px; background: var(--line-2); flex: none; }
  .co-caret { margin-left: auto; color: var(--faint); font-size: 11px; }
  .co-pay { margin-top: 10px; height: 36px; font-size: 13px; }
  .co-or { margin: 0 16px; }
  .co-alt {
    display: grid; place-items: center; height: 34px; border-radius: 8px; background: #fff;
    border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 500; color: var(--ink);
  }
  .co-alt + .co-alt { margin-top: 8px; }

  .mock-row { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 8px; padding: 12px 13px; }
  .mock-row + .mock-row { margin-top: 8px; }
  .mock-row b { font-size: 13.5px; font-weight: 600; letter-spacing: -.015em; display: block; }
  .mock-row em { font-style: normal; font-size: 11px; color: var(--faint); margin-left: auto; font-family: "JetBrains Mono", monospace; }
  .mock-row p { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
  .live-dot.off { background: var(--line-2); }
  .live-dot.warn { background: var(--amber); }

  .stage { position: relative; padding: 8px 0 0; }
  .ghost {
    position: absolute; inset: 34px -26px auto auto; width: 74%; height: 300px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
    filter: blur(2.5px); opacity: .55; transform: translateX(26px);
  }
  /* the connect previews are card-width, so the backdrop follows the card
     rather than the column it sits in. */
  #connect .ghost {
    inset: 26px auto auto 50%; width: 408px; opacity: .5;
    transform: translateX(calc(-50% + 26px));
  }
  .board {
    position: relative; background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-card); box-shadow: var(--shadow-pop); overflow: hidden;
  }
  .board-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--line);
    font-size: 12px; color: var(--muted);
  }
  .board-top b { color: var(--ink); font-weight: 600; font-size: 13px; letter-spacing: -.02em; }
  .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); display: inline-block; margin-right: 8px; vertical-align: 1px; }
  .board.is-live .dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .board-body { padding: 14px; }
  .board-label { font-size: 11.5px; color: var(--faint); margin-bottom: 6px; }
  .board-label::after { content: none; }
  .board-label::after { content: ""; height: 1px; flex: 1; background: var(--line); }

  /* ── the split, stated as the equation it is ────────────────────── */
  .eqn {
    display: grid; grid-template-columns: 1fr 62px 1fr 62px 1fr;
    align-items: stretch; margin-top: 48px;
  }
  .eq-op {
    display: grid; place-items: center;
    font-size: 21px; font-weight: 400; color: var(--faint); letter-spacing: -.02em;
  }
  .eq-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
    border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; padding: 22px;
  }
  .eq-card h3 { font-size: 17px; letter-spacing: -.025em; }
  .eq-card p { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
  .eq-k {
    font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500; color: var(--faint);
  }
  .eq-tag {
    margin-top: auto; padding-top: 14px; font-size: 11.5px; color: var(--faint);
  }
  /* the sum sits back; yours is the outlined side; Soba's is the filled one */
  .eq-sum { background: var(--ground); border-color: var(--line-2); }
  .eq-yours { box-shadow: 0 1px 2px rgba(19, 19, 22, .04); }
  .eq-ours { position: relative; background: var(--ink); border-color: var(--ink); }
  /* the half of the equation Soba is, ringed and named */
  .eq-ours::after {
    content: ""; position: absolute; inset: -20px; border: 1.5px dashed var(--faint);
    border-radius: 22px; pointer-events: none;
  }
  .eq-here {
    position: absolute; top: -20px; left: 50%; transform: translate(-50%, -50%);
    background: #fff; padding: 0 12px; z-index: 1;
    font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap;
  }
  .eq-ours h3 { color: #fff; }
  .eq-ours p { color: rgba(255, 255, 255, .68); }
  .eq-ours .eq-k, .eq-ours .eq-tag { color: rgba(255, 255, 255, .45); }
  .eq-foot {
    margin-top: 22px; text-align: center; font-size: 13px; line-height: 1.55; color: var(--faint);
  }
  @media (max-width: 860px) {
    .eqn { grid-template-columns: minmax(0, 1fr); }
    .eq-op { padding: 10px 0; }
    .eq-tag { margin-top: 4px; padding-top: 0; }
  }

  /* ── the dashboard: the hosted half, as a product surface ───────── */
  .dash {
    max-width: 960px; margin: 48px auto 0; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--line); background: #fff;
    box-shadow: 0 24px 48px -28px rgba(19, 19, 22, .3), 0 2px 6px rgba(19, 19, 22, .05);
  }
  .dash-bar {
    display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 13px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fbfbfc, #f5f5f7);
  }
  .dash-lights { display: flex; gap: 7px; }
  .dash-lights i { width: 10px; height: 10px; border-radius: 50%; display: block; }
  .dash-lights i:nth-child(1) { background: #ff5f57; }
  .dash-lights i:nth-child(2) { background: #febc2e; }
  .dash-lights i:nth-child(3) { background: #28c840; }
  .dash-url {
    flex: 1; text-align: center; font-family: "JetBrains Mono", monospace; font-size: 11.5px;
    color: var(--faint);
  }
  .dash-bar span.in-design { margin-left: 0; flex: none; }
  .dash-body { display: grid; grid-template-columns: 178px minmax(0, 1fr); }
  .dash-side { border-right: 1px solid var(--line); background: var(--ground); padding: 16px 12px; }
  .dash-org {
    display: flex; align-items: center; gap: 8px; padding: 0 8px 14px;
    font-size: 13.5px; font-weight: 600; letter-spacing: -.015em;
  }
  .dash-nav { display: flex; flex-direction: column; gap: 1px; }
  .dash-nav span {
    padding: 7px 9px; border-radius: 6px; font-size: 13px; color: var(--muted);
    letter-spacing: -.01em;
  }
  .dash-nav span.is-on { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(19, 19, 22, .05); }
  .dash-main { padding: 20px 22px 22px; }
  .dash-top { display: flex; align-items: baseline; justify-content: space-between; }
  .dash-h { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
  .dash-range {
    font-size: 11.5px; color: var(--faint);
    border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px;
  }
  .dash-lead {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    margin-top: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line);
  }
  .dash-lk { display: block; font-size: 12.5px; color: var(--muted); }
  .dash-lv {
    display: block; margin-top: 4px; font-size: 34px; font-weight: 600;
    letter-spacing: -.035em; line-height: 1.05;
  }
  .dash-ln { display: block; margin-top: 6px; font-size: 12px; color: var(--faint); }
  .dash-spark { width: 220px; height: 56px; flex: none; opacity: .75; }
  .dash-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); margin-top: 1px; }
  .dstat { background: #fff; padding: 16px 2px 18px; }
  .dstat:not(:first-child) { padding-left: 18px; }
  .dstat-k { display: block; font-size: 12px; color: var(--muted); }
  .dstat-v { display: block; margin-top: 3px; font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
  .dstat-d { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); }
  .dash-rows { margin-top: 4px; border-top: 1px solid var(--line); }
  .drow {
    display: grid; grid-template-columns: 1.3fr .9fr 1.2fr 96px; gap: 12px; align-items: center;
    padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2);
  }
  .drow:last-child { border-bottom: 0; }
  .drow .mono { font-size: 11.5px; color: var(--muted); }
  .drow-h { color: var(--faint); font-size: 12px; }
  .dtag {
    justify-self: start; font-size: 11px; padding: 2px 8px; border-radius: 20px;
    background: #eaf6f0; color: var(--green);
  }
  .dtag-b { background: var(--ground); color: var(--muted); }
  .dtag-o { background: #fdf3e4; color: var(--amber); }
  .drow > :last-child { text-align: right; }
  @media (max-width: 820px) {
    .dash-body { grid-template-columns: minmax(0, 1fr); }
    .dash-side { border-right: 0; border-bottom: 1px solid var(--line); }
    .dash-nav { flex-direction: row; flex-wrap: wrap; }
    .dash-lead { flex-direction: column; align-items: flex-start; gap: 12px; }
    .dash-spark { width: 100%; }
    .dash-stats { grid-template-columns: minmax(0, 1fr); }
    .dstat:not(:first-child) { padding-left: 2px; }
    .drow { grid-template-columns: 1fr 1fr; }
  }

  .facts { margin-top: 30px; border-top: 1px solid var(--line); }
  .fact {
    padding: 16px 0; border-bottom: 1px solid var(--line);
    font-size: 14px; line-height: 1.6; color: var(--muted);
  }
  .fact b { color: var(--ink); font-weight: 600; }

  /* the proportion bar: how much of the inference bill is somebody else's */
  .diagram { width: 100%; height: auto; display: block; }
  .diagram text { font-family: inherit; }
  .o-label { font-size: 13px; font-weight: 600; fill: var(--ink); letter-spacing: -.02em; }
  .o-mine { fill: var(--ink); }
  .o-note { font-size: 11px; fill: var(--muted); }
  .o-rail { stroke: var(--line); stroke-width: 1; fill: none; }
  /* payments running down each route into the side that gets billed */
  .o-flow {
    stroke: var(--line-2); stroke-width: 2; fill: none; stroke-linecap: round;
    stroke-dasharray: 3 11; animation: flow 1.5s linear infinite;
  }
  .o-flow.o-d2 { animation-delay: -.5s; }
  .o-flow.o-d3 { animation-delay: -1s; }
  .o-flow.o-mine { stroke: var(--ink); animation-delay: -.25s; }
  @keyframes flow { to { stroke-dashoffset: -42; } }
  .o-tip { fill: var(--line-2); }
  .o-tip-mine { fill: var(--ink); }
  @media (prefers-reduced-motion: reduce) { .o-flow { animation: none; stroke-dasharray: 3 7; } }
  .seg-theirs { fill: var(--ground); stroke: var(--line-2); stroke-width: 1; }
  .seg-yours { fill: var(--ink); }
  .seg-t { font-size: 15px; font-weight: 600; fill: var(--ink); letter-spacing: -.02em; }
  .seg-n { font-size: 11px; fill: var(--muted); }
  .seg-yn { font-size: 11px; fill: rgba(255, 255, 255, .6); }
  .seg-y { font-size: 15px; font-weight: 600; fill: #fff; letter-spacing: -.02em; }
  .o-rule { stroke: var(--line); stroke-width: 1; }
  .o-foot { font-size: 10.5px; fill: var(--faint); }

  .facts { margin-top: 30px; border-top: 1px solid var(--line); }
  .fact {
    padding: 16px 0; border-bottom: 1px solid var(--line);
    font-size: 14px; line-height: 1.6; color: var(--muted);
  }
  .fact b { color: var(--ink); font-weight: 600; }

  /* the routing diagram: a run walks the trunk and takes the first branch that answers */
  .diagram { width: 100%; height: auto; display: block; }
  .diagram text { font-family: inherit; }
  .d-edge { font-size: 10.5px; fill: var(--faint); }
  .d-boundary { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 4; }
  .d-run { fill: var(--ink); }
  .d-runlabel { font-size: 12px; font-weight: 500; fill: #fff; }
  .d-trunk { stroke: var(--line-2); stroke-width: 1.5; fill: none; }
  .wire { stroke: var(--line-2); stroke-width: 1.5; fill: none; transition: stroke .25s ease, stroke-width .25s ease; }
  .box { fill: #fff; stroke: var(--line); transition: stroke .25s ease; }
  .b-name { font-size: 13px; font-weight: 600; fill: var(--ink); letter-spacing: -.015em; }
  .b-sub { font-size: 10.5px; fill: var(--muted); }
  .b-class { font-family: "JetBrains Mono", monospace; font-size: 10px; fill: var(--faint); }
  .b-paid { fill: var(--amber); }
  .wire-state { font-family: "JetBrains Mono", monospace; font-size: 9.5px; fill: var(--faint); }
  .spark { fill: var(--ink); opacity: 0; }

  .b-pay { font-family: "JetBrains Mono", monospace; font-size: 10px; fill: var(--faint); }
  .opt.is-yours .box { stroke-dasharray: 4 4; }
  .opt.is-yours .b-name, .opt.is-yours .b-yours { fill: var(--ink-2); }

  .dark-band { background: var(--dark); color: #fff; padding: 96px 0; }
  .dark-band .eyebrow { color: var(--accent-lite); }
  .dark-band .sec-h { color: #fff; }
  .dark-band .sec-p { color: var(--dark-text); }
  /* ── the daemon, as it arrives: a volume you drag it out of ─────── */
  .dmg {
    max-width: 620px; margin-inline: auto; border-radius: 11px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .08) inset,
      0 36px 74px -26px rgba(0, 0, 0, .9),
      0 4px 16px rgba(0, 0, 0, .45);
  }
  .dmg-bar {
    position: relative; display: flex; align-items: center; height: 40px; padding: 0 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: linear-gradient(180deg, rgba(60, 60, 64, .96), rgba(46, 46, 50, .96));
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
  }
  .dmg-lights { display: flex; gap: 8px; }
  .dmg-lights i {
    width: 11px; height: 11px; border-radius: 50%; display: block;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35) inset;
  }
  .dmg-lights i:nth-child(1) { background: #ff5f57; }
  .dmg-lights i:nth-child(2) { background: #febc2e; }
  .dmg-lights i:nth-child(3) { background: #28c840; }
  .dmg-title {
    position: absolute; left: 0; right: 0; text-align: center; pointer-events: none;
    font-size: 13px; font-weight: 600; letter-spacing: -.012em; color: rgba(255, 255, 255, .78);
  }
  .dmg-body {
    display: flex; align-items: center; justify-content: center; gap: 30px;
    padding: 54px 44px 46px;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 62%),
      linear-gradient(180deg, #202023, #171719);
  }
  .dmg-slot { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 132px; }
  .dmg-art {
    width: 96px; height: 96px; display: block;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45));
  }
  .dmg-name {
    font-size: 12.5px; letter-spacing: -.01em; color: rgba(255, 255, 255, .82);
    padding: 2px 8px; border-radius: 5px; white-space: nowrap;
  }
  /* the app is the selected item, the way a freshly opened volume shows it */
  .dmg-name.is-sel { background: rgba(255, 255, 255, .14); color: #fff; }
  .dmg-arrow { width: 96px; height: 24px; flex: none; margin-bottom: 26px; }
  .dmg-chev {
    fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 2.6;
    stroke-linecap: round; stroke-linejoin: round;
    animation: dmgdrift 2.2s ease-in-out infinite;
  }
  .dmg-c1 { animation-delay: 0s; }
  .dmg-c2 { animation-delay: .11s; }
  .dmg-c3 { animation-delay: .22s; }
  .dmg-c4 { animation-delay: .33s; }
  .dmg-c5 { animation-delay: .44s; }
  @keyframes dmgdrift { 0%, 55%, 100% { opacity: .18; } 22% { opacity: .95; } }
  .dmg-foot {
    display: flex; align-items: center; gap: 12px; padding: 13px 18px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .025);
    font-size: 12.5px; line-height: 1.5; color: var(--dark-text);
  }
  .dmg-foot .dmg-cmd {
    font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 5px; padding: 2px 6px;
    white-space: nowrap;
  }
  .dmg-foot .dmg-vol {
    font-family: "JetBrains Mono", monospace; font-size: 11px; color: rgba(255, 255, 255, .7);
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 5px; padding: 3px 7px; flex: none;
  }
  .dmg-foot span.in-design { margin-left: auto; flex: none; }
  @media (max-width: 760px) {
    .dmg-body { gap: 10px; padding: 34px 16px 30px; }
    .dmg-slot { width: 104px; }
    .dmg-art { width: 74px; height: 74px; }
    .dmg-arrow { width: 56px; margin-bottom: 24px; }
    .dmg-foot { flex-wrap: wrap; gap: 8px; }
    .dmg-foot span.in-design { margin-left: 0; }
  }
  /* the path of one run, drawn: your call → their machine → your surfaces */
  .nvf {
    margin: 26px auto 0;
    display: grid; grid-template-columns: 1fr auto 2.1fr auto 1fr;
    align-items: stretch; gap: 4px;
  }
  .nvf-node {
    background: rgba(255, 255, 255, .028); border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px; padding: 18px 16px; align-self: center;
  }
  .nvf-mid { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
  /* the two places a run can land, as a pair of tabs over the diagram */
  .opt-tabs { display: flex; justify-content: center; gap: 8px; margin-top: 26px; flex-wrap: wrap; }
  .opt-tab {
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    font: inherit; font-size: 14px; letter-spacing: -.014em; color: rgba(255, 255, 255, .82);
    background: transparent; border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px; padding: 7px 16px 7px 8px;
    transition: background .15s, color .15s, border-color .15s;
  }
  .opt-tab:hover { border-color: rgba(255, 255, 255, .34); color: #fff; }
  .opt-tab b {
    display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    font-size: 11px; font-weight: 600; flex: none;
    color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .1);
  }
  .opt-tab[aria-selected="true"] {
    background: #fff; border-color: #fff; color: var(--ink); font-weight: 500;
  }
  .opt-tab[aria-selected="true"] b { color: #fff; background: var(--ink); }
  .nvf-rows { list-style: none; margin: 12px 0 0; padding: 0; }
  .nvf-rows li {
    display: flex; align-items: baseline; gap: 10px; padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 12px; color: var(--dark-text);
  }
  .nvf-rows li b { margin-left: auto; font-weight: 500; color: rgba(255, 255, 255, .88); }
  /* the cloud visual, packed into the narrower middle column */
  /* the cloud pair matches the height of the install window it replaces */
  .nvf-opt .sbc { margin-top: 0; gap: 14px; padding-top: 0; min-height: 254px; align-items: stretch; }
  .nvf-opt .sbc-phone { width: 150px; background: var(--dark-2); border-color: rgba(255, 255, 255, .16); }
  .nvf-opt .sbc-screen { padding: 10px 10px 14px; }
  .nvf-opt .sbc-box { padding: 14px; }
  .nvf-opt .sbc-rows li { padding: 6px 0; font-size: 11.5px; }
  .nvf-opt .sbc-s { font-size: 11px; }
  .nvf-cap {
    margin-top: 12px; padding: 0 4px; text-align: center; min-height: 39px;
    font-size: 12.5px; line-height: 1.55; color: var(--dark-text);
  }
  .nvf-cap b { font-weight: 600; color: rgba(255, 255, 255, .92); }
  .nvf-cap a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
  .nvf-k {
    font-size: 13px; font-weight: 600; color: #fff; letter-spacing: -.015em; margin-bottom: 7px;
  }
  .nvf-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    font-size: 13px; font-weight: 600; color: #fff; letter-spacing: -.015em;
  }
  .nvf-head em {
    margin-left: auto; font-style: normal; font-size: 12px; font-weight: 500;
    color: var(--dark-text);
  }
  .nvf-s { font-size: 12.5px; line-height: 1.5; color: var(--dark-text); }
  /* the two ends of the flow are the same app, before and after: you type,
     your machine works, the text appears. Two paragraphs said that; this
     shows it, and the middle of the diagram stops being the only picture. */
  .appm {
    margin: 12px 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 9px;
    background: var(--dark-2); overflow: hidden;
  }
  .appm-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, .62);
  }
  .appm-dot { width: 9px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, .22); }
  .appm-body { padding: 11px 10px 12px; }
  .appm-you {
    background: rgba(255, 255, 255, .07); border-radius: 7px; padding: 8px 9px;
    font-size: 11.5px; line-height: 1.4; color: rgba(255, 255, 255, .86);
  }
  /* the caret, so the box reads as something being typed rather than quoted */
  .appm-cur {
    display: inline-block; width: 1.5px; height: 11px; margin-left: 2px;
    vertical-align: -1px; background: rgba(255, 255, 255, .7);
  }
  .appm-go {
    margin-top: 9px; margin-left: auto; width: fit-content;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px; padding: 4px 9px;
    font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, .82);
  }
  /* and the answer coming back, as lines rather than invented prose */
  .appm-body-out { display: flex; flex-direction: column; gap: 7px; padding-block: 14px 16px; }
  .appm-ln { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
  .appm-ln-m { width: 78%; }
  .appm-ln-s { width: 46%; background: rgba(255, 255, 255, .1); }
  /* the install window, sitting inside the machine it installs onto */
  .nvf-opt .dmg { max-width: none; margin: 0; border-radius: 10px; }
  .nvf-opt .dmg-bar { height: 32px; padding: 0 10px; }
  .nvf-opt .dmg-lights i { width: 9px; height: 9px; }
  .nvf-opt .dmg-title { font-size: 11.5px; }
  .nvf-opt .dmg-body { gap: 14px; padding: 62px 14px 56px; }
  .nvf-opt .dmg-slot { width: 96px; gap: 9px; }
  .nvf-opt .dmg-art { width: 72px; height: 72px; }
  .nvf-opt .dmg-name { font-size: 11.5px; }
  .nvf-opt .dmg-arrow { width: 58px; height: 18px; margin-bottom: 20px; }
  .nvf-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    padding: 0 2px;
  }
  .nvf-lab {
    font-size: 12px; color: var(--dark-text);
  }
  .nvf-chevs { width: 72px; height: 26px; flex: none; }
  .nvf-chev {
    fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    animation: dmgdrift 2.2s ease-in-out infinite;
  }
  .nvf-c2 { animation-delay: .13s; }
  .nvf-c3 { animation-delay: .26s; }
  @media (prefers-reduced-motion: reduce) { .nvf-chev { animation: none; opacity: .5; } }
  @media (max-width: 900px) {
    .nvf { grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 460px; }
    .nvf-link { flex-direction: row; gap: 10px; padding: 4px 0; }
    .nvf-opt .sbc { min-height: 0; }
    .nvf-chevs { width: 48px; height: 18px; }
  }
  .foot-legal {
    margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
    font-size: 12px; line-height: 1.6; color: var(--faint);
  }
  .foot-legal + .foot-bottom { margin-top: 20px; padding-top: 0; border-top: 0; }
  @media (max-width: 760px) {
    .mwin-body { font-size: 11px; padding: 16px 14px 18px; }
    .mwin-rule { margin-inline: -14px; }
    .mrow { grid-template-columns: 1fr; gap: 2px; }
  }

  /* ── soba cloud: a phone, and the box it is driving ─────────────── */
  .sbc { display: flex; align-items: center; gap: 22px; padding-top: 6px; }
  .sbc-phone {
    width: 186px; flex: none; border-radius: 22px; overflow: hidden;
    background: var(--dark); border: 1px solid var(--ink);
    box-shadow: var(--shadow-pop);
  }
  .sbc-bar { display: flex; justify-content: center; padding: 8px 0 2px; }
  .sbc-bar i { width: 46px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .22); }
  .sbc-screen { padding: 12px 12px 18px; }
  .sbc-app {
    font-size: 11.5px; font-weight: 600; color: #fff; letter-spacing: -.01em;
    padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .sbc-app span { float: right; font-weight: 400; color: var(--dark-text); }
  .sbc-msg {
    margin-top: 10px; border-radius: 10px; padding: 8px 10px;
    background: rgba(255, 255, 255, .06); font-size: 11px; line-height: 1.45;
    color: rgba(255, 255, 255, .82);
  }
  .sbc-mine { background: #fff; color: var(--ink); margin-left: 26px; }
  .sbc-run { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--dark-text); }
  .sbc-run i {
    width: 5px; height: 5px; border-radius: 50%; background: #fff; flex: none;
    animation: dmgdrift 2.2s ease-in-out infinite;
  }
  .sbc-ln {
    display: block; height: 5px; margin-top: 7px; border-radius: 3px;
    background: rgba(255, 255, 255, .16);
  }
  .sbc-ln-s { width: 58%; }
  .sbc-box {
    flex: 1; min-width: 0; background: var(--sheet); border: 1px solid var(--line);
    border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 16px 18px;
  }
  .sbc-k {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; letter-spacing: -.015em; color: var(--ink);
  }
  .sbc-tag {
    margin-left: auto; font-size: 10.5px; color: var(--muted);
    border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px;
  }
  .sbc-rows { list-style: none; margin: 12px 0 0; padding: 0; }
  .sbc-rows li {
    display: flex; align-items: baseline; gap: 10px; padding: 7px 0;
    border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted);
  }
  .sbc-rows li b { margin-left: auto; font-weight: 500; color: var(--ink); }
  .sbc-s { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--faint); }
  @media (max-width: 760px) {
    .sbc { flex-direction: column; align-items: stretch; gap: 16px; }
    .sbc-phone { width: 186px; align-self: center; }
  }

  /* ── code cards ─────────────────────────────────────────────────── */
  .codecard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
  .codecard + .codecard { margin-top: 12px; }
  .codebar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 7px 8px 7px 14px; border-bottom: 1px solid var(--line);
    font-size: 12px; color: var(--muted);
  }
  .codebar b { color: var(--ink); font-weight: 600; }
  .codecard pre {
    margin: 0; padding: 16px; overflow-x: auto; background: #fcfcfd;
    font-family: "JetBrains Mono", monospace; font-size: 12.5px; line-height: 1.75; color: var(--ink-2);
  }
  .k { color: var(--accent); }
  .s { color: #1a7f64; }
  .n { color: #b06f14; }
  .cm { color: var(--faint); }
  .kw { color: var(--ink); font-weight: 500; }

  /* ── small cards ────────────────────────────────────────────────── */
  .lcard { border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
  .lcard h3 { font-size: 15px; letter-spacing: -.02em; }
  .lcard p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
  .lcard .tag { font-size: 12px; font-weight: 500; color: var(--accent); }

  /* ── status ─────────────────────────────────────────────────────── */
  .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 44px; }
  .slist { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
  .slist li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
  .slist .m { font-family: "JetBrains Mono", monospace; font-size: 11px; line-height: 1.7; }
  .slist.ok .m { color: var(--accent); }
  .slist.todo .m { color: var(--faint); }
  .sfoot { margin-top: 18px; font-size: 13px; color: var(--faint); line-height: 1.55; }

  /* ── changelog releases (changelog.html) ────────────────────────── */
  .rel {
    display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 32px;
    margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line);
  }
  .rel + .rel { margin-top: 44px; }
  .rel-meta { position: sticky; top: 96px; align-self: start; }
  .rel-v {
    font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 600;
    letter-spacing: -.02em; color: var(--ink);
  }
  .rel-d { margin-top: 4px; font-size: 13px; color: var(--muted); }
  .rel-tag { margin-top: 12px; }
  .rel-tag span.in-design { margin-left: 0; }
  .rel-body h3 { font-size: 20px; letter-spacing: -.025em; }
  .rel-lede { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
  .rel-h {
    margin-top: 26px; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500; color: var(--faint);
  }
  .rel-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .rel-list li {
    position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--ink-2);
    max-width: 62ch;
  }
  .rel-list li::before {
    content: ""; position: absolute; left: 2px; top: 9px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--line-2);
  }
  @media (max-width: 860px) {
    .rel { grid-template-columns: 1fr; gap: 18px; }
    .rel-meta { position: static; display: flex; align-items: baseline; gap: 12px; }
    .rel-tag { margin-top: 0; }
  }

  /* ── the argument ───────────────────────────────────────────────────
     The page opens the way the docs do: the two prices, the way out, then
     the five surfaces everything below is one of. These are text sections,
     so they get type and rules rather than product chrome. */

  /* the market, drawn as one figure. Two standalone cards read as a pricing
     table — as though these were Soba's two plans — so the comparison sits
     inside a board, under a header that says whose prices these are. */
  .market { margin-top: 46px; box-shadow: var(--shadow-card); }
  .market .board-body { padding: 0; }
  .mkt { display: grid; grid-template-columns: minmax(0, 1fr) 176px minmax(0, 1fr); }
  /* the punchline that used to sit at the foot of each column is gone; its
     space is kept, split evenly, and the content centres inside it */
  .mkt-col { padding: 60px 30px; display: flex; flex-direction: column; justify-content: center; }
  /* the side you are stuck with, set apart from the side you cannot buy */
  .mkt-col-cost { background: var(--ground); }
  /* this column sits on a tint, so the greys calibrated against white land a
     step too light on it: --faint on --ground is about 2.7:1 */
  .mkt-col-cost .mkt-k,
  .mkt-col-cost .pcb-k { color: var(--muted); }
  .mkt-col-cost .mkt-p,
  .mkt-col-cost .pcb-out-less { color: var(--ink-2); }
  /* the gutter is the seam between the two prices, and the badge sits on it:
     the divide and the thing that spans it, in one place */
  .mkt-mid {
    position: relative; display: grid; place-items: center;
    background: linear-gradient(to right, #fff 50%, var(--ground) 50%);
  }
  .mkt-mid::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 1px; background: var(--line);
  }
  .mkt-badge {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px;
    background: #fff; border: 1px solid var(--line-2); border-radius: 10px;
    padding: 13px 14px; box-shadow: var(--shadow-card);
    font-size: 12.5px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap;
  }
  .mkt-arrows { width: 84px; height: 12px; }
  .mkt-arrows path { fill: none; stroke: var(--faint); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
  .mkt-k {
    font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500; color: var(--faint);
  }
  .mkt-h { margin-top: 10px; font-size: clamp(22px, 2.4vw, 27px); line-height: 1.1; font-weight: 700; letter-spacing: -.032em; }
  .mkt-p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--muted); }
  /* what is actually on each counter, named. The same two vendors sit on both
     sides, so the marks carry the argument as much as the words do. */
  .marks { position: absolute; width: 0; height: 0; }
  .mchips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
  .mchip {
    display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line);
    border-radius: 999px; background: #fff; padding: 5px 11px 5px 9px;
    font-size: 12px; color: var(--muted); white-space: nowrap;
  }
  .mchip b { font-weight: 600; color: var(--ink); }
  .mchip-m { width: 13px; height: 13px; flex: none; fill: var(--ink); }
  .mkt-col-cost .mchip { border-color: var(--line-2); }
  .mkt-p em { font-style: italic; color: var(--ink-2); }

  /* the one thing the figure cannot show: it is a snapshot, and the distance
     it draws is growing */
  .widen-t {
    margin: 26px auto 0; max-width: 46ch; text-align: center;
    font-size: 17px; line-height: 1.45; font-weight: 500;
    letter-spacing: -.02em; color: var(--ink);
  }

  /* the same $20, spent at each counter, inside the price it buys.
     Both bars start at the same edge, so the length is the whole argument. */
  .pcb { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 20px; }
  .mkt-col-cost .pcb { border-top-color: var(--line-2); }
  .pcb-k {
    font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500; color: var(--faint);
  }
  .tw-bar { margin-top: 10px; display: flex; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--ground); overflow: hidden; }
  .mkt-col-cost .tw-bar { background: #fff; }
  .tw-seg { display: flex; align-items: center; padding: 0 11px; min-width: 0; }
  .tw-seg i { font-style: normal; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tw-seg-buy { flex: 29; background: var(--ink); color: #fff; }
  .tw-seg-rest { flex: 71; color: var(--muted); }
  .tw-seg-all { flex: 1; }
  .pcb-out { margin-top: 10px; font-size: 13.5px; font-weight: 600; letter-spacing: -.015em; }
  .pcb-out-less { color: var(--faint); font-weight: 500; }

  /* the customer's own objection, and the symptoms it explains */
  /* ── what the customer is working out ────────────────────────────────
     A band of its own rather than a tail on the section above: on white it
     read as the market figure trailing off into empty page. */
  /* the one thing on the page in someone else's voice, so it gets the room
     to be the only thing on screen */
  .quote-band {
    border-top: 1px solid var(--dark-line); border-bottom: 1px solid var(--dark-line);
    background: var(--dark); color: #fff; padding: 148px 0 152px;
  }
  .squeeze { max-width: 980px; margin-inline: auto; text-align: center; }
  .squeeze blockquote {
    margin: 0; font-size: clamp(28px, 4.4vw, 50px); line-height: 1.16;
    letter-spacing: -.036em; font-weight: 600; text-wrap: balance;
  }
  .squeeze-cite { margin-top: 34px; font-size: 13px; color: var(--dark-text); opacity: .7; }

  @media (max-width: 760px) {
    /* stacked, a measure between the two columns means nothing */
    .mkt { grid-template-columns: minmax(0, 1fr); }
    /* stacked, the seam runs across rather than down */
    .mkt-mid { background: #fff; padding: 18px 0; }
    .mkt-mid::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
    .mkt-badge { flex-direction: row; gap: 12px; padding: 9px 14px; }
    .mkt-arrows { width: 56px; }
    .squeeze { text-align: left; }
  }
  @media (max-width: 620px) {
    .mkt-col { padding: 22px 20px; }
  }

  /* ── cta ────────────────────────────────────────────────────────── */
  .cta { padding: 104px 0 112px; text-align: center; }

  .cta h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -.03em; max-width: 16ch; margin-inline: auto; }

  /* ── footer ─────────────────────────────────────────────────────── */
  .foot { max-width: var(--sheet-w); margin: 0 auto; padding: 48px 32px 56px; }
  .foot-grid { display: grid; grid-template-columns: 1.6fr repeat(2, 1fr); gap: 32px; }
  .foot h4 { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
  .foot-col { display: flex; flex-direction: column; gap: 9px; }
  .foot-col a { font-size: 13.5px; color: var(--muted); }
  .foot-col a:hover { color: var(--ink); }
  .foot-note { font-size: 13px; color: var(--muted); max-width: 34ch; margin-top: 12px; line-height: 1.55; }
  .foot-bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 12.5px; color: var(--faint); }

  /* ── the acts (connect.html) ──────────────────────────────────────────
     One capability per act: a short label, a line big enough to be the only
     thing on screen, and then the figure that proves it. Four cells of prose
     said the same four things; these show them. */
  .act { padding: 104px 0; }
  .act + .act { border-top: 1px solid var(--line); }
  .act-k { text-align: center; font-size: 13px; font-weight: 500; color: var(--accent); }
  .act-h {
    margin: 14px auto 0; max-width: 20ch; text-align: center; text-wrap: balance;
    font-size: clamp(30px, 3.9vw, 46px); font-weight: 400;
    line-height: 1.08; letter-spacing: -.03em;
  }
  .act-p {
    margin: 18px auto 0; max-width: 58ch; text-align: center;
    font-size: 17px; line-height: 1.6; color: var(--muted); letter-spacing: -.012em;
  }
  .act-fig { margin-top: 56px; }
  .act-more { display: flex; justify-content: center; margin-top: 30px; }
  /* the chevrons that carry a run from one box to the next, everywhere here */
  .act-chev { width: 40px; height: 24px; fill: none; stroke: var(--line-2); stroke-width: 1.6; stroke-linecap: round; }

  /* three things you already pay for, into one connection. The bracket is
     drawn rather than implied by a row of arrows: the claim is that they
     converge, and three separate arrows say the opposite. */
  .afan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px minmax(0, .82fr);
    align-items: stretch; gap: 0;
  }
  .afan-col { display: flex; flex-direction: column; gap: 8px; }
  .afan-row {
    display: flex; align-items: center; gap: 13px; flex: 1;
    border: 1px solid var(--line); border-radius: 11px; background: #fff;
    padding: 14px 16px;
  }
  .afan-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .afan-tx b { font-size: 14.5px; font-weight: 600; letter-spacing: -.02em; }
  .afan-tx em { font-style: normal; font-size: 12.5px; color: var(--faint); }
  /* two of these are not here yet, and a page that says so everywhere else
     should say so here: no tick, no brand mark, and the row recedes */
  .afan-row.is-soon { background: transparent; border-style: dashed; }
  .afan-row.is-soon .afan-tx b { color: var(--muted); }
  .afan-row.is-soon .afan-glyph { color: var(--line-2); }
  .afan-soon {
    margin-left: auto; flex: none;
    font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500; color: var(--faint);
    border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px;
  }

  /* already paid for, which is the whole argument of the act */
  .afan-on {
    margin-left: auto; flex: none; width: 21px; height: 21px; border-radius: 50%;
    display: grid; place-items: center; font-size: 11px; font-weight: 600;
    background: var(--accent-soft); color: var(--ink);
  }
  .afan-m { width: 17px; height: 17px; fill: var(--ink); flex: none; }
  .afan-glyph { width: 17px; flex: none; text-align: center; font-size: 14px; color: var(--ink); }

  /* the bracket: three rows gathered onto one line, and one line out */
  .afan-brk { position: relative; }
  .afan-brk::before {
    content: ""; position: absolute; left: 20px; right: 50%; top: 15.4%; bottom: 15.4%;
    border: 1px solid var(--line-2); border-right: 0; border-radius: 9px 0 0 9px;
  }
  .afan-brk::after {
    content: ""; position: absolute; left: 50%; right: 16px; top: 50%;
    height: 1px; background: var(--line-2);
  }
  .afan-tip {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 13px; height: 13px; fill: none;
    stroke: var(--line-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  }

  /* the hub: the product, between what you already pay for and what it gives
     back. Centred and on its own, because it is the one thing on this figure
     that is being sold. */
  .afan-hub {
    align-self: center; text-align: center;
    border: 1px solid var(--line-2); border-radius: var(--r-card); background: #fff;
    box-shadow: var(--shadow-pop); padding: 30px 28px 28px;
  }
  .afan-hub .afan-core-icon { margin: 0 auto 16px; width: 56px; height: 56px; border-radius: 14px; }
  .afan-hub .afan-core-tx { align-items: center; gap: 5px; }
  .afan-hub .afan-core-tx b { font-size: 17px; }
  .afan-hub .afan-core-tx em { line-height: 1.4; }
  .afan-hub-s {
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
    font-size: 13px; line-height: 1.58; color: var(--muted);
  }
  .afan-core-icon { width: 40px; height: 40px; border-radius: 10px; flex: none; }
  .afan-core-tx { display: flex; flex-direction: column; gap: 3px; }
  .afan-core-tx b { font-size: 16px; font-weight: 600; letter-spacing: -.025em; }
  .afan-core-tx em { font-style: normal; font-size: 12.5px; color: var(--faint); }

  /* the prompt, and the record it leaves */
  .aapp { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 26px; align-items: start; }
  .aapp-ask {
    border: 1px solid var(--line); border-radius: var(--r-card); background: #fff;
    box-shadow: var(--shadow-pop); overflow: hidden;
  }
  .aapp-bar {
    display: flex; align-items: center; gap: 9px;
    padding: 12px 16px; border-bottom: 1px solid var(--line);
  }
  .aapp-bar .appm-dot { background: var(--line-2); }
  .aapp-bar b { color: var(--ink); font-weight: 600; font-size: 13.5px; letter-spacing: -.02em; }
  .aapp-when {
    margin-left: auto; font-family: "JetBrains Mono", monospace;
    font-size: 10.5px; letter-spacing: .04em; color: var(--faint);
  }
  .aapp-body { padding: 22px 20px 20px; }
  .aapp-tool { font-size: 13px; font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
  .aapp-cmd {
    display: flex; align-items: baseline; gap: 9px;
    margin-top: 11px; padding: 13px 14px; border-radius: 9px;
    background: var(--dark); color: #f2f2f4; font-size: 13px;
  }
  .aapp-cmd i { font-style: normal; color: rgba(255, 255, 255, .4); }
  .aapp-why { margin-top: 13px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
  .aapp-acts { margin-top: 20px; display: flex; gap: 9px; }
  .aapp-btn {
    flex: 1; text-align: center; border-radius: var(--r-btn); font-size: 13px; font-weight: 500;
    padding: 9px 0; border: 1px solid var(--line-2);
  }
  .aapp-deny { color: var(--ink); background: #fff; }
  .aapp-allow { color: #fff; background: var(--ink); border-color: var(--ink); }
  .aapp-log-k {
    font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500; color: var(--faint);
  }
  .aapp-rows { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); }
  .aapp-rows li {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 2px; border-bottom: 1px solid var(--line);
  }
  .aapp-rows .live-dot { flex: none; }
  .aapp-r { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .aapp-r b { font-size: 14px; font-weight: 600; letter-spacing: -.018em; }
  .aapp-r em { font-style: normal; font-size: 12.5px; color: var(--faint); }
  .aapp-rows .pill { margin-left: auto; }
  .aapp-foot { margin-top: 18px; font-size: 12.5px; line-height: 1.6; color: var(--faint); }
  .aapp-foot b { color: var(--ink-2); font-weight: 600; }

  /* where the work is allowed to go, and the two places it is not. The cost
     column folded into the who-pays one: "a second time, on top" says the
     same thing a yes/no column said, without a column agreeing with itself. */
  .acost {
    border: 1px solid var(--line); border-radius: var(--r-card); background: #fff;
    box-shadow: var(--shadow-card); overflow: hidden;
  }
  .acost-top {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    padding: 15px 22px; border-bottom: 1px solid var(--line); background: var(--ground);
  }
  .acost-top-k {
    font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500; color: var(--faint);
  }
  .acost-top-v { font-size: 14px; font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
  .acost-t { width: 100%; border-collapse: collapse; }
  .acost-t th {
    text-align: left; padding: 12px 22px; font-size: 12px; font-weight: 500; color: var(--faint);
    border-bottom: 1px solid var(--line);
  }
  .acost-th-r, .acost-td-r { text-align: right; }
  .acost-t td {
    padding: 16px 22px; font-size: 13.5px; color: var(--muted);
    border-bottom: 1px solid var(--line);
  }
  .acost-t td b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.018em; color: var(--ink); }
  .acost-t tr:last-child td { border-bottom: 0; }
  /* the two you allowed read at full strength; the two you did not recede */
  .acost-t tr:not(.is-on) td { color: var(--faint); }
  .acost-t tr:not(.is-on) td b { color: var(--muted); font-weight: 500; }

  /* the verdict, as a badge rather than a word floating in a cell. Shared by
     the cost table and the approval log so the page has one way of saying
     yes, no and never. */
  .pill {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    border-radius: 999px; padding: 4px 11px 4px 8px;
    font-size: 12.5px; font-weight: 500; letter-spacing: -.01em;
    background: var(--ground); color: var(--muted); border: 1px solid var(--line);
  }
  .pill i { font-style: normal; font-size: 10.5px; line-height: 1; }
  .pill-ok { background: #fff; color: var(--ink); border-color: var(--line-2); }

  .acost-foot {
    display: flex; align-items: center; gap: 16px;
    padding: 15px 22px; border-top: 1px solid var(--line); background: var(--ground);
  }
  .acost-foot-k {
    font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500; color: var(--faint); white-space: nowrap;
  }
  .acost-bar {
    flex: 1; min-width: 60px; height: 6px; border-radius: 3px;
    background: var(--line); overflow: hidden;
  }
  .acost-bar i { display: block; height: 100%; background: var(--ink); }
  .acost-foot-v { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
  .acost-foot-v b { color: var(--ink); font-weight: 600; }

  @media (max-width: 900px) {
    .afan { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .afan-hub { justify-self: stretch; }
    .afan-brk { height: 54px; }
    .afan-brk::before { left: 25%; right: 25%; top: 12px; bottom: 50%; border: 1px solid var(--line-2); border-bottom: 0; border-radius: 12px 12px 0 0; }
    .afan-brk::after { left: 50%; right: auto; top: 50%; bottom: 10px; width: 1px; height: auto; }
    .afan-tip { right: auto; left: 50%; top: auto; bottom: 2px; transform: translateX(-50%) rotate(90deg); }
    .aapp { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 620px) {
    .act { padding: 68px 0; }
    .act-fig { margin-top: 38px; }
    .acost-t th, .acost-t td { padding-inline: 15px; }
    .acost-t th:nth-child(2), .acost-t td:nth-child(2) { display: none; }
    .acost-top, .acost-foot { padding-inline: 15px; }
    .acost-foot { flex-wrap: wrap; }
    .acost-bar { order: 3; flex-basis: 100%; }
  }

  /* ── Soba App (connect.html) ──────────────────────────────────────────
     The page opens dark and stays dark until the diagram has finished
     talking: what is being sold here is a thing that runs on somebody
     else's machine, so the page shows the machine before it explains it.
     Everything past that seam is the ordinary light sheet. */
  .cn-open {
    position: relative; overflow: hidden;
    background: var(--dark); color: #fff;
    border-bottom: 1px solid var(--dark-line);
  }
  /* the front page's circuit traces at a fifth of the contrast: texture at
     reading distance, nothing at arm's length */
  .cn-open-bg { position: absolute; inset: 0; color: #fff; opacity: .05; pointer-events: none; }
  /* one light source, above and behind the headline, and no other glow */
  .cn-open::before {
    content: ""; position: absolute; left: 50%; top: -360px;
    width: 960px; height: 680px; transform: translateX(-50%); pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 70%);
  }
  .cn-in { position: relative; padding-top: 104px; text-align: center; }
  /* the app icon, on the ground the app itself is nearly the colour of: the
     ring is what separates #141210 from #131316 at a glance */
  .cn-icon {
    width: 76px; height: 76px; display: block; margin: 0 auto 22px;
    border-radius: 17px; box-shadow:
      0 0 0 1px rgba(255, 255, 255, .1),
      0 18px 40px -12px rgba(0, 0, 0, .8);
  }
  .cn-k { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .58); letter-spacing: -.005em; }
  .cn-h1 {
    margin: 16px auto 0; font-size: clamp(36px, 5.4vw, 62px); font-weight: 700;
    line-height: 1.04; letter-spacing: -.038em; max-width: 17ch; text-wrap: balance;
  }
  .cn-sub {
    margin: 22px auto 0; font-size: 17px; line-height: 1.62;
    color: var(--dark-text); max-width: 62ch; letter-spacing: -.012em;
  }
  .cn-cta { margin-top: 32px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
  /* the light-ground buttons invert: .btn-accent is --ink, which on this
     ground is the ground */
  .btn-light { background: #fff; color: var(--ink); }
  .btn-light:hover { background: #e7e7ea; }
  .btn-ghost { background: transparent; color: #fff; border-color: var(--dark-line); }
  .btn-ghost:hover { border-color: #4b4b56; }

  /* the four facts a developer checks before reading a word of the rest */
  .cn-rail {
    margin-top: 68px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--dark-line); text-align: left;
  }
  .cn-rail > div { padding: 22px 22px 26px; border-left: 1px solid var(--dark-line); }
  .cn-rail > div:first-child { border-left: 0; padding-left: 0; }
  .cn-rail-k {
    font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500; color: var(--dark-text);
  }
  .cn-rail-v { margin-top: 9px; font-size: 14.5px; line-height: 1.4; letter-spacing: -.018em; }

  /* the diagram keeps the dark, under a hairline of its own */
  .cn-flow { position: relative; border-top: 1px solid var(--dark-line); padding: 76px 0 88px; }
  .cn-flow-h {
    text-align: center; font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 400; letter-spacing: -.028em; line-height: 1.15;
  }
  .cn-flow-p {
    margin: 12px auto 0; max-width: 48ch; text-align: center;
    font-size: 15.5px; line-height: 1.55; color: var(--dark-text);
  }

  /* one panel divided rather than cards floating: cards would say these are
     separate things */
  .cn-quad {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px; background: var(--line);
  }
  /* the cells are read across as much as down, so the doc link sits on one
     line at the foot of every cell rather than wherever the prose ended */
  .cn-cell { background: #fff; padding: 30px 28px; display: flex; flex-direction: column; }
  .cn-cell h3 { font-size: 15.5px; letter-spacing: -.02em; }
  .cn-cell-h + p { margin-top: 12px; }
  .cn-cell p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--muted); }
  .cn-cell .slist { margin-top: 16px; }
  .cn-cell .link-more { margin-top: auto; padding-top: 20px; align-self: flex-start; }

  /* Each face is named twice: once in words, once by the field that carries
     it, set on the rule between them. A boxed chip inside a boxed cell inside
     a boxed panel is three frames for one fact. */
  .cn-cell-h { display: flex; align-items: baseline; gap: 14px; }
  .cn-cell-h h3 { white-space: nowrap; }
  .cn-lead { flex: 1; height: 1px; background: var(--line); }
  .cn-frag {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px; letter-spacing: -.01em; color: var(--faint); white-space: nowrap;
  }
  /* the panels carry the page, so they sit on the card shadow rather than the
     pop one: at this size --shadow-pop reads as a floating dialog */
  .cn-panel { box-shadow: var(--shadow-card); }

  @media (max-width: 700px) {
    /* the rule needs room on both sides to read as one; below this the field
       goes under the title instead */
    .cn-cell-h { display: block; }
    .cn-cell-h h3 { white-space: normal; }
    .cn-lead { display: none; }
    .cn-frag { margin-top: 6px; }
  }

  @media (max-width: 900px) {
    .cn-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cn-rail > div:nth-child(3) { border-left: 0; padding-left: 0; }
    .cn-rail > div:nth-child(n + 3) { border-top: 1px solid var(--dark-line); }
    .cn-quad { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 620px) {
    .cn-in { padding-top: 68px; }
    .cn-icon { width: 62px; height: 62px; border-radius: 14px; margin-bottom: 18px; }
    .cn-rail { margin-top: 48px; }
    .cn-rail > div { padding: 18px 16px 20px; }
    .cn-flow { padding: 56px 0 64px; }
    .cn-cell { padding: 24px 20px; }
  }

  /* ── responsive ─────────────────────────────────────────────────── */
  @media (max-width: 1000px) {
    .split, .split-flip { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .grid2 { grid-template-columns: minmax(0, 1fr); }
    .bcard-wide { grid-column: span 1; }
    /* the links do not disappear on a phone, they move into a menu — 18
       screens of scroll with no way to jump is not navigation. */
    .nav-burger { display: grid; }
    /* the motto goes with the links: once they are behind the burger there is
       no row left to spend on the one item that is not navigation. Its own
       separator goes with it, or it would hang off the pill. */
    .nav-motto, .nav-motto + .nav-sep { display: none; }
    .nav { position: relative; }
    .nav-links {
      display: block; position: absolute; top: calc(100% + 9px); left: 0; right: 0;
      background: #fff;
      border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop);
      padding: 6px; margin: 0;
      opacity: 0; visibility: hidden; transform: translateY(-6px);
      transition: opacity .16s ease, transform .16s ease, visibility .16s;
    }
    .nav.is-open .nav-links { opacity: 1; visibility: visible; transform: none; }
    .nav-links a {
      display: block; padding: 11px 12px; border-radius: 8px;
      font-size: 15px; opacity: 1; color: var(--ink);
    }
    .nav-links a + a { border-top: 1px solid var(--line); border-radius: 0; }
    .nav-links a:active { background: var(--ground); }
    .ghost { display: none; }
    .section, .dark-band { padding: 68px 0; }
    .quote-band { padding: 108px 0 112px; }
  }
  @media (max-width: 620px) {
    .inner { padding-inline: 20px; }
    .foot-grid { grid-template-columns: repeat(2, 1fr); }
    .hero { padding: 96px 0 68px; }
  }

  /* ── responsive: tablets and phones ─────────────────────────────── */
  @media (max-width: 760px) {
    /* the banner is a fixed 40px row of centred text on desktop; on a phone
       it has to wrap instead of running off the side. */
    .banner {
      height: auto; min-height: 40px; padding: 9px 16px; gap: 8px;
      flex-wrap: wrap; text-align: center; font-size: 12.5px; line-height: 1.45;
    }
    .navwrap { top: 4px; padding: 4px 10px 10px; }
    .nav { height: 52px; gap: 10px; padding: 0 8px 0 14px; }
    /* .nav-links carried the margin-right:auto and is hidden by now, so the
       logo has to push the actions to the right in its place. */
    .logo { margin-right: auto; font-size: 16px; }
    .nav-tag { display: none; }
    .nav > .nav-sep { display: none; }
    .hero-sub { font-size: 16px; }
    .sec-p { font-size: 15.5px; }
    .cta { padding: 72px 0 78px; }
    .foot { padding: 40px 24px 48px; }
    .foot-bottom { margin-top: 32px; }
    .split, .split-flip { gap: 32px; }
    .acc-body { padding-left: 0; }
  }

  @media (max-width: 620px) {
    /* below the sheet's max width it is already edge to edge, so the rounded
       corners and side rules only draw a card that isn't there. */

    .strip > div { padding: 22px 16px; }
    .grid2 { gap: 10px; }
    .lcard { padding: 18px; }
    .mock-body { padding: 22px 18px 20px; }
    .co-line, .co-head { padding-inline: 13px; }
    .section, .dark-band { padding: 56px 0; }
    .quote-band { padding: 84px 0 88px; }
    .squeeze-cite { margin-top: 24px; }
  }

  @media (max-width: 620px) {
    /* the diagram's labels are 13px inside a 520-unit viewBox, so squeezing it
       into a 360px phone renders them at ~8px. Keep its width and scroll it. */
    .board-body-fig { overflow-x: auto; }
    .board-body-fig .diagram { min-width: 460px; }
  }

  @media (max-width: 480px) {
    .inner { padding-inline: 16px; }
    .foot { padding-inline: 16px; }
    /* one column: two 4rem-wide cells of mono text is worse than a list */
    .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .foot-note { max-width: none; }
    /* stacked full-width CTAs read as buttons; two half-width ones do not */
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { width: 100%; }
    .nav-right .nav-sep { display: none; }
    .nav-right .btn-text { display: none; }
    .prompt-pill { padding: 6px 6px 6px 12px; }
    .prompt-pill code { font-size: 12px; }
    th, td { padding: 13px 16px; }
  }

  @media (max-width: 1000px) {
    .split-lead { grid-template-areas: "head" "stage" "rest"; row-gap: 34px; }
    .split-lead > .sp-rest > .facts:first-child { margin-top: 0; border-top: 0; }
    .split-lead > .sp-rest > .link-more:first-child { margin-top: 0; }
  }

  /* ── mobile-first corrections ───────────────────────────────────── */
  @media (max-width: 760px) {
    /* the builder's whole point is watching the offer change, so on a phone
       the offer comes first and a live price bar pins to the bottom while
       the controls scroll past it. */
    /* the sheet is edge to edge well before this, so its corners and side
       rules only draw a card that isn't there — and its overflow:hidden was
       the scrollport that stopped anything inside it from sticking. */
    .sheet { border-radius: 0; border-left: 0; border-right: 0; overflow: visible; }
    .bb { display: flex; flex-direction: column; overflow: visible; }
    .bb-right { border-radius: 11px 11px 0 0; }
    .bb-right { order: -1; border-bottom: 1px solid var(--line); }
    .bb-left { border-bottom: 0; }
    .bb-sticky {
      position: sticky; bottom: 0; z-index: 5; order: 2;
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 12px 20px; border-top: 1px solid var(--line-2);
      border-radius: 0 0 11px 11px;
      background: rgba(255,255,255,.94); backdrop-filter: blur(12px) saturate(1.6);
    }
    .bb-sticky-plan { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
    .bb-sticky-price b { font-size: 21px; font-weight: 700; letter-spacing: -.035em; }
    .bb-sticky-price span { font-size: 12px; color: var(--muted); }
  }

  @media (max-width: 620px) {
    /* three short labels stay one row on a phone — stacking them cost three
       screens-worth of height for six words. */
    .strip > div.strip-item { gap: 5px; padding: 15px 12px; }
    .strip-item b { font-size: 13.5px; }
    .strip-item em { font-size: 11.5px; }

    /* the arrows are hidden below 1000px, so on a phone the dots were the only
       control. Give them room and let the panel take a swipe. */
    .pv-dots { gap: 10px; margin-bottom: 18px; }
    .pv-dot { width: 7px; height: 7px; }
    .pv-dot[aria-selected="true"] { width: 22px; }
    .pv-viewport { touch-action: pan-y; }

    /* the 4-up ledger wraps into a misaligned 2x2 with an orphaned header */
    .drow-h { display: none; }
    .drow { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 12px 0; }
    .drow > :nth-child(1) { font-weight: 600; color: var(--ink); }
    .drow > :nth-child(2), .drow > :nth-child(4) { text-align: right; }
    .drow > :nth-child(3) { grid-column: 1; justify-self: start; }

    /* desktop section rhythm made the page 18 screens long */
    .section, .dark-band { padding: 48px 0; }
    .quote-band { padding: 68px 0 72px; }
    .split, .split-flip { gap: 28px; }
    .sec-h { font-size: 27px; margin-top: 10px; }
    .sec-p { margin-top: 14px; }
    .cta { padding: 56px 0 60px; }
    .acc { margin-top: 24px; }
    .facts, .tablecard, .grid3, .grid2 { margin-top: 28px; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .pv-viewport { height: auto !important; }
    .stream-row { opacity: 1; transform: none; }
  }