/* ── Self-hosted fonts ───────────────────────────────────────────────────────────
   These were two extra origins: fonts.googleapis.com for a stylesheet, then
   fonts.gstatic.com for the files that stylesheet names — and the browser could not
   discover the second until the first came back. Now five files from our own origin,
   which is already connected and edge-cached by the time they are asked for.

   Bricolage and Hanken each ship as ONE variable file covering their whole range, so
   they are declared once with a weight RANGE instead of four and three times over;
   the browser interpolates. Only IBM Plex Mono is static, and only at the three
   weights the stylesheet actually uses.

   latin subset only (house standard). The unicode-range is Google's own, kept
   verbatim, so a character outside it falls back to the system stack rather than
   rendering tofu. Filenames carry Google's font version (v9/v12/v20) because that is
   what makes `immutable` caching safe without content hashing — see _headers.

   DUPLICATED IN landing.css, which index.html loads instead of this file.
   check-contract.mjs asserts the two stay identical; the header lockup SVG has the
   same shape of problem and the same guard. Change one, change both. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-v9-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
                 U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-v12-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
                 U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-v20-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
                 U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-v20-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
                 U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-v20-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
                 U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   BTC DCA Engine — marketing landing page (index.html)
   Sentence II tokens ported from src/app.css. Dark mode is the
   `.dark` class on <html> (shared with the app via localStorage.theme).
   ============================================================ */
:root{
  --bg:#F7F6F2; --surface:#FFFFFF; --surface-2:#EDEBE5; --surface-3:#E1DED6; --surface-4:#CFCBC1;
  --ink:#15140F; --ink-2:#55524A; --ink-3:#6E6A61; --rule:#E3E0D8; --rule-strong:#C9C5BA;
  --accent:#F7931A; --accent-ink:#8F4C06; --accent-tint:#FBE9D3;
  --up:#146138; --up-tint:#DFF3E7; --down:#A32B2A; --down-tint:#F9E2E1;
  --s2:#2A78D6; --s3:#C2417C; --s1:#D67208;
  /* display glass — identical in both themes */
  --well:#0A0B0D; --well-2:#15171B; --well-3:#1F2228; --well-edge:#2A2E35; --well-grid:#1C1F24;
  --well-ink:#F3F4F6; --well-dim:#8E95A0; --well-faint:#7F8793;
  --amber:#FFB454; --well-up:#3BC47A; --well-down:#FF6B63; --ref:#8E95A0;
  --focus:#8F4C06; --on-accent:#15140F; --scrim:rgba(21,20,15,.35); --scrim-modal:rgba(21,20,15,.5);
  --display:"Bricolage Grotesque","Hanken Grotesk",-apple-system,sans-serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-surface:3px;
  color-scheme:light;
}
:root.dark{
  --bg:#17181B; --surface:#1F2024; --surface-2:#26282D; --surface-3:#31343A; --surface-4:#43474F;
  --ink:#F2F3F5; --ink-2:#A9AEB7; --ink-3:#8A909A; --rule:#2B2E34; --rule-strong:#3E424A;
  --accent-ink:#F5A340; --accent-tint:rgba(247,147,26,.16);
  --up:#3DC17A; --up-tint:rgba(61,193,122,.14); --down:#F06560; --down-tint:rgba(240,101,96,.14);
  --s2:#3987E5; --s3:#D55181; --focus:#F7931A; --scrim:rgba(0,0,0,.55); --scrim-modal:rgba(0,0,0,.7);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;min-height:100dvh;overflow-x:hidden}
h1,h2,h3,h4{text-wrap:balance;margin:0}
p{text-wrap:pretty;margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{max-width:100%}
[hidden]{display:none!important}
:where(button,a,input,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
::selection{background:var(--accent-tint);color:var(--ink)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--surface-4);border-radius:999px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ── utilities ── */
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.disp{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.eyebrow{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.accent-ink{color:var(--accent-ink)}

/* ── header / nav ── */
.brand{display:inline-flex;align-items:center;color:var(--ink)}
.brand .lockup{height:30px;width:auto;display:block}
.lp-nav{margin-left:auto;display:inline-flex;gap:2px;align-items:center}
.lp-nav a{color:var(--ink-2);font-weight:600;font-size:13.5px;padding:8px 13px;border-radius:999px}
.lp-nav a:hover{color:var(--ink);background:var(--surface-2)}
.lp-nav a.on{color:var(--ink);background:var(--surface-2)}
.icon{width:16px;height:16px;flex:none}

/* ── pill / button ── */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:10px 16px;
  font-size:14px;font-weight:600;background:var(--surface-2);color:var(--ink);line-height:1.2;white-space:nowrap;
  transition:background-color .15s,color .15s,transform .15s}
.pill:hover{background:var(--surface-3)}
.pill.solid{background:var(--accent);color:var(--on-accent)}
.pill.solid:hover{background:var(--accent-ink);color:var(--bg)}
.pill.quiet{background:transparent;color:var(--ink-2)}
.pill.quiet:hover{background:var(--surface-2);color:var(--ink)}
.pill.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--rule-strong)}
.pill.ghost:hover{background:var(--surface-2)}
.pill.lg{padding:13px 22px;font-size:15px}
.pill.round{width:34px;height:34px;padding:0}
.pill.round .icon{width:14px;height:14px}

/* ── badges ── */
.t{display:inline-flex;align-items:center;gap:4px;font-weight:600;border-radius:999px;padding:2px 9px;font-size:11.5px;white-space:nowrap}
.t.up{color:var(--up);background:var(--up-tint)}
.t.down{color:var(--down);background:var(--down-tint)}
.t.pro{color:var(--accent-ink);background:var(--accent-tint);font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px}
.t.free,.t.guest{color:var(--ink-2);background:var(--surface-2);font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px}

/* ── ruled figures ── */
.figs{display:grid;border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule)}
.figs>div{padding:16px 18px 16px 0;min-width:0}
.figs>div+div{border-left:1px solid var(--rule);padding-left:18px}
.figs .k{font-size:13px;color:var(--ink-2)}
.figs .v{font-family:var(--display);font-variation-settings:"opsz" 40;font-weight:700;font-size:28px;letter-spacing:-.025em;line-height:1.05;font-variant-numeric:tabular-nums;margin-top:6px;overflow-wrap:anywhere}
.figs .v small{font-size:14px;color:var(--ink-3);margin-left:3px;letter-spacing:0}
.figs .s{font-size:12.5px;color:var(--ink-3);margin-top:6px}

/* ── section head ── */
.sec-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sec-head h2{font-family:var(--display);font-variation-settings:"opsz" 24;font-weight:700;font-size:clamp(22px,3vw,30px);letter-spacing:-.025em;line-height:1.1}
.sec-head .r{margin-left:auto;font-size:13px;color:var(--ink-3)}

/* ── ruled comparison table ── */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px;min-width:520px}
.tbl thead th{font-size:12.5px;font-weight:500;color:var(--ink-3);text-align:right;padding:0 0 10px 14px;border-bottom:1px solid var(--rule-strong);white-space:nowrap}
.tbl thead th:first-child{text-align:left;padding-left:0}
.tbl tbody th{text-align:left;padding:14px 14px 14px 0;border-bottom:1px solid var(--rule);font-weight:600;white-space:nowrap;vertical-align:middle}
.tbl tbody th .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:10px;vertical-align:0}
.tbl tbody td{padding:14px 0 14px 14px;border-bottom:1px solid var(--rule);text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap;vertical-align:middle}
.tbl tbody td .big{font-family:var(--display);font-variation-settings:"opsz" 24;font-weight:700;font-size:19px;letter-spacing:-.02em}
.tbl tbody td .up{color:var(--up);font-weight:600}
.tbl tbody tr:hover th,.tbl tbody tr:hover td{background:var(--surface-2)}

/* ── the well (dark instrument glass) — same in both themes ── */
.well{background:var(--well);border-radius:var(--r-surface);padding:22px 24px 18px;color:var(--well-ink);
  box-shadow:inset 0 0 0 1px var(--well-edge),inset 0 2px 14px rgba(0,0,0,.6);position:relative;
  --bg:var(--well);--ink:var(--well-ink);--ink-2:var(--well-dim);--ink-3:var(--well-faint);--rule:var(--well-grid);
  --rule-strong:var(--well-edge);--focus:var(--amber);--surface:var(--well-2);--surface-2:var(--well-3);
  --surface-3:var(--well-edge);--surface-4:var(--well-faint);--up:var(--well-up);--down:var(--well-down);
  --accent-ink:var(--amber);--accent-tint:rgba(255,180,84,.14);--scrim:rgba(0,0,0,.6)}
.well .head{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap}
.well .ro{display:flex;flex-direction:column;gap:5px;min-width:0}
.well .ro .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--well-dim);white-space:nowrap}
.well .ro b{font:600 22px var(--mono);letter-spacing:-.01em;color:var(--amber);font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.well .ro.main b{font-size:clamp(30px,4.4vw,40px);color:var(--well-ink)}
.well .ro b small{font-size:13px;color:var(--well-dim);margin-left:4px;font-weight:500}
.well .ro b.up{color:var(--well-up)}
.well .ctrls{margin-left:auto;display:flex;gap:6px;align-self:flex-start;flex-wrap:wrap}
.seg{display:inline-flex;gap:2px;background:var(--well-2);border-radius:999px;padding:3px;box-shadow:inset 0 0 0 1px var(--well-edge)}
.seg button{font:600 10.5px var(--mono);letter-spacing:.04em;color:var(--well-dim);padding:5px 11px;border-radius:999px;transition:background-color .15s,color .15s;line-height:1.4}
.seg button:hover{color:var(--well-ink)}
.seg button.on{background:var(--well-ink);color:var(--well)}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chips .lbl{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--well-faint);margin-right:4px}
.tog{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 12px 5px 9px;font-size:12.5px;font-weight:600;
  color:var(--well-dim);background:var(--well-2);box-shadow:inset 0 0 0 1px var(--well-edge);cursor:pointer;
  transition:background-color .15s,color .15s;white-space:nowrap;line-height:1.3}
.tog:hover{color:var(--well-ink)}
.tog .sw{width:8px;height:8px;border-radius:50%;background:var(--well-faint);flex:none;transition:background-color .15s,box-shadow .15s}
.tog.on{color:var(--well-ink);background:var(--well-3)}
.tog.on .sw{background:var(--amber);box-shadow:0 0 6px var(--amber)}
.tog .p{font:600 9px var(--mono);letter-spacing:.08em;color:var(--amber);background:rgba(255,180,84,.14);border-radius:999px;padding:1px 6px;text-transform:uppercase}
.legend{display:flex;gap:16px;flex-wrap:wrap;font:500 11px var(--mono);color:var(--well-dim);align-items:center}
.legend .li{display:inline-flex;align-items:center;gap:7px;cursor:pointer;background:none;border:0;font:inherit;color:inherit}
.legend .li i{width:16px;height:3px;display:inline-block;border-radius:2px}
.legend .li b{color:var(--well-ink);font-weight:600}
.chart-foot{display:flex;gap:16px;margin-top:10px;font:500 10.5px var(--mono);letter-spacing:.04em;color:var(--well-faint);flex-wrap:wrap;align-items:center}
.chart-foot .src{margin-left:auto}

/* ── chart svg ── */
.chart-box{position:relative;width:100%}
.chart-svg{display:block;width:100%;height:100%;overflow:visible}
.chart-svg .grid-line{stroke:var(--well-grid);stroke-width:1}
.chart-svg .grid-lbl{fill:var(--well-faint);font:500 10px var(--mono);letter-spacing:.04em}
.chart-svg .series{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart-svg .series.hi{stroke-width:2.75}
.chart-svg .end-dot{stroke:var(--well);stroke-width:2}
.chart-svg .end-lbl{font:600 11px var(--mono);letter-spacing:-.01em}
.chart-svg .cross{stroke:var(--well-faint);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.tt{position:absolute;pointer-events:none;background:var(--well-3);color:var(--well-ink);border-radius:var(--r-surface);
  padding:10px 12px;font:500 11.5px var(--mono);z-index:5;min-width:180px;box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0;transition:opacity .12s;transform:translate(-50%,0)}
.tt .tt-d{color:var(--well-dim);font-size:10px;letter-spacing:.08em;margin-bottom:7px;text-transform:uppercase}
.tt .r{display:flex;gap:14px;justify-content:space-between;margin-top:4px;white-space:nowrap}
.tt .r .nm{display:inline-flex;align-items:center;gap:7px}
.tt .r i{width:8px;height:8px;border-radius:50%;display:inline-block}
.tt .r b{font-variant-numeric:tabular-nums;font-weight:600}

  /* ── site footer ── */
  /* One footer on every page. The markup lives between <!-- foot --> markers on each page and is
     held identical by check-contract; this block is duplicated verbatim into landing.css (the
     landing page loads no app.css) and check-contract holds the two copies equal as well.
     The footer is the site's dark instrument panel — the same --well tokens in both themes, like
     the landing's exhibit and CTA band — so every colour here is a --well* token, never --bg/--ink.
     It sits OUTSIDE the page column (.app, or the landing's .wrap) so it can span the viewport
     without 100vw arithmetic, which overflows by the scrollbar's width wherever scrollbars take
     space; .foot-in is the 1120px grid. The mark is two static SVG files rather than the inline
     #btc-mark symbol: the generated pages dropped that symbol for weight, and a panel whose colours
     never change can use a cached file. */
  .foot { position: relative; overflow: hidden; background: var(--well); color: var(--well-dim); border-top: 1px solid var(--well-edge); padding: 0 0 calc(24px + env(safe-area-inset-bottom)); font-size: 13px; line-height: 1.45; }
  .foot::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--accent) 0, var(--amber) 38%, transparent 70%); }
  .foot::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(60% 90% at 12% 0%, rgba(255,180,84,.09), transparent 60%); }
  .foot-wm { position: absolute; right: -60px; top: -24px; width: 400px; height: auto; max-width: none; pointer-events: none; user-select: none; }
  .foot-in { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 44px 24px 0; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 34px 40px; }
  .foot-brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
  .foot-mark { display: block; line-height: 0; border-radius: 2px; }
  .foot-mark img { display: block; width: 52px; height: auto; }
  .foot-line { margin: 0; font: 800 clamp(24px, 2.6vw, 32px)/1.05 var(--display); letter-spacing: -.03em; color: var(--well-ink); }
  .foot-line em { font-style: normal; color: var(--amber); }
  .foot-tag { margin: 0; max-width: 34ch; text-wrap: pretty; color: var(--well-dim); }
  .foot-col { display: flex; flex-direction: column; align-items: flex-start; }
  .foot-h { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--well-faint); margin: 0 0 6px; }
  .foot-col a { position: relative; color: var(--well-dim); text-decoration: none; font-weight: 500; padding: 5px 0; }
  .foot-col a:hover, .foot-base a:hover { color: var(--well-ink); }
  .foot-col a[aria-current="page"] { color: var(--well-ink); }
  /* The current page's link: a bar in the gutter to its left, fading downward — the top hairline's
     gradient turned vertical. The text stays aligned with its siblings. */
  .foot-col a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 50%; width: 3px; height: 1.15em; transform: translateY(-50%); border-radius: 2px; background: linear-gradient(180deg, var(--accent) 0, var(--amber) 55%, transparent 100%); }
  .foot-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; border-top: 1px solid var(--well-edge); padding-top: 14px; font: 500 11px var(--mono); letter-spacing: .06em; color: var(--well-faint); }
  .foot-base .slot { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; }
  .foot-base .slot:empty { display: none; }
  .foot-base a { color: inherit; text-decoration: none; }
  /* /app's "Data through …" is the one live fact any footer carries; it gets the pulse the landing's
     dateline uses. It is empty until the data loads, so nothing pulses beside nothing. */
  .foot-base #data-through:not(:empty) { color: var(--well-dim); display: inline-flex; align-items: center; gap: 7px; }
  .foot-base #data-through:not(:empty)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--well-up); animation: foot-blip 2.6s ease-out infinite; }
  /* It is a link to the sources page's "When the numbers update" — the answer to "why is the close a
     day behind?" — so it underlines on hover like a link, and an empty one is not in the tab order. */
  .foot-base #data-through:empty { display: none; }
  .foot-base #data-through:hover, .foot-base #data-through:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
  @keyframes foot-blip { 0% { box-shadow: 0 0 0 0 rgba(59,196,122,.55); } 70% { box-shadow: 0 0 0 7px rgba(59,196,122,0); } 100% { box-shadow: 0 0 0 0 rgba(59,196,122,0); } }
  .foot a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
  @media (max-width: 767px) {
    .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 20px; padding: 34px 20px 0; }
    .foot-brand { grid-column: 1 / -1; }
    .foot-wm { width: 300px; right: -70px; top: -10px; }
    .foot-col a { padding: 9px 0; min-height: 44px; display: inline-flex; align-items: center; }
    .foot-base .slot { margin-left: 0; flex-basis: 100%; }
    /* /app's phone tab bar floats over the bottom of the page; the class sits on app.html's <footer>
       tag, outside the parity markers. */
    .foot.with-tabbar { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  }
  @media (prefers-reduced-motion: reduce) { .foot-base #data-through:not(:empty)::before { animation: none; } }
  /* ── /site footer ── */
.lp .foot{margin-top:20px}

/* ── site drawer ── */
  /* The phone drawer on every page (nav.js). `.menu-btn` is the hamburger, shown only where the
     header's text links are hidden. Duplicated verbatim into landing.css; check-contract holds the
     two copies equal. */
  .menu-btn { display: none; background: transparent; color: var(--ink); }
  .menu-btn:hover { background: var(--surface-2); }
  .menu-btn.pill.round .icon { width: 22px; height: 22px; }
  .drawer.side { position: fixed; inset: 0; z-index: 85; background: var(--scrim-modal); display: flex; justify-content: flex-end; align-items: stretch; opacity: 0; pointer-events: none; transition: opacity .25s; }
  .drawer.side.open { opacity: 1; pointer-events: auto; }
  .drawer.side .panel { width: min(84vw, 360px); height: 100%; background: var(--surface); box-shadow: -12px 0 40px var(--scrim); display: flex; flex-direction: column; gap: 4px; padding: max(12px, env(safe-area-inset-top)) 20px calc(22px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .25s; outline: 0; }
  .drawer.side.open .panel { transform: none; }
  .drawer.side .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
  .drawer.side .panel-title { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
  .drawer.side .panel-nav, .drawer.side .panel-acts { display: flex; flex-direction: column; }
  .drawer.side .panel-acts { margin-top: 4px; }
  .drawer.side .item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 4px; border-bottom: 1px solid var(--rule); font-size: 16px; font-weight: 600; text-decoration: none; color: var(--ink); width: 100%; text-align: left; }
  .drawer.side .panel-acts .item { font-size: 15px; font-weight: 500; color: var(--ink-2); }
  .drawer.side .item.danger { color: var(--down); }
  .drawer.side .panel-legal { margin: auto 0 0; padding-top: 18px; font: 500 11px var(--mono); letter-spacing: .06em; color: var(--ink-3); }
  .drawer.side .panel-legal a { color: inherit; text-decoration: none; }
  .drawer.side .who { display: flex; align-items: center; gap: 12px; padding: 6px 4px 14px; }
  .drawer.side .who .nm { font-weight: 600; font-size: 14px; display: flex; gap: 8px; align-items: center; }
  .drawer.side .who .em { font-size: 12px; color: var(--ink-3); }
  html.drawer-open { overflow: hidden; }
  @media (max-width: 767px) { .menu-btn { display: inline-flex; } }
  @media (prefers-reduced-motion: reduce) { .drawer.side, .drawer.side .panel { transition: none; } }
  /* ── /site drawer ── */

  /* ── nav badge ── */
  /* "New" beside the MCP link, in every header and in the phone drawer. The badge is aria-hidden, so
     the link's accessible name stays "MCP" — the name check-content's chrome audit holds it to.
     The ring pulses three times on load and then rests. It is finite on purpose: the global
     reduced-motion rule shortens an animation's duration but an INFINITE one keeps recalculating
     style forever (see the landing's live dot), and a badge that never stops moving stops being
     noticed anyway. Duplicated verbatim into landing.css; check-contract holds the copies equal. */
  .nav-new { display: inline-block; margin-left: 7px; padding: 2px 6px 1px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 600 9px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; animation: nav-new-ring 2.4s cubic-bezier(.4, 0, .6, 1) .6s 3 both; }
  .drawer.side .item .nav-new { margin-left: -4px; padding: 3px 7px 2px; font-size: 10px; vertical-align: 0; }
  @keyframes nav-new-ring {
    0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 55%, transparent); }
    70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 0%, transparent); }
  }
  @media (prefers-reduced-motion: reduce) { .nav-new { animation: none; } }
  /* ── /nav badge ── */
/* The landing keeps its text links down to 661px, so its hamburger appears only below that. */
@media (min-width:661px) and (max-width:767px){.lp-nav .menu-btn{display:none}}

/* ── skip link, page rhythm, reveal ── */
.skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:999px;font-weight:600;font-size:13px}
.skip:focus{top:12px}
.sec{padding:clamp(48px,7vw,84px) 0}
.sec-tight{padding:clamp(34px,5vw,56px) 0}
/* reveal is a progressive enhancement: only armed once JS adds .reveal-ready,
   so with no/failed JS every section stays fully visible.

   Deliberately rare: exactly three elements on the page carry [data-reveal] — the risk table, the
   pricing matrix and the final CTA. They sit roughly a screenful apart, so two are never revealing
   at once, and none of them is part of a set.

   It used to be on nineteen, twelve of which were individual cards inside two grids, staggered by
   80ms steps. A per-item cascade across a grid is what makes an effect read as blanket-applied
   rather than chosen, so the stagger is not merely unused here — there is no `data-delay` rule to
   reach for, on purpose. If a future grid wants one, that is the moment to re-read this comment.

   16px/.7s -> 8px/.45s: at three occurrences the motion no longer has to announce itself. Half the
   travel over two-thirds the time reads as the block settling into place instead of sliding in. */
.reveal-ready [data-reveal]{opacity:0;transform:translateY(8px);transition:opacity .45s cubic-bezier(.4,0,.1,1),transform .45s cubic-bezier(.4,0,.1,1)}
.reveal-ready [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal-ready [data-reveal]{opacity:1;transform:none}}

@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   Direction D — the blend: editorial hero · matrix · use-cases
   ============================================================ */
.lp-top{position:sticky;top:0;z-index:40;display:block;padding:12px 0;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule)}
.lp-top .wrap{display:flex;align-items:center;gap:16px;width:100%}

.k-head{margin-bottom:8px}
.kicker{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.lead{font-size:clamp(16px,1.7vw,19px);color:var(--ink-2);max-width:62ch;line-height:1.6;margin-top:14px}

/* ---- HERO ---- */
.ed-hero{padding:clamp(40px,7vw,84px) 0 clamp(22px,4vw,40px)}
.dateline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:500 11px var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);padding-bottom:22px;border-bottom:1px solid var(--rule);margin-bottom:26px}
.dateline .sep{color:var(--rule-strong)}
.dateline .live{display:inline-flex;align-items:center;gap:7px;color:var(--accent-ink)}
.dateline .live i{width:7px;height:7px;border-radius:50%;background:var(--up);display:inline-block;
  animation:live-pulse 2.6s cubic-bezier(.4,0,.6,1) infinite}
/* The ring is drawn with box-shadow rather than a pseudo-element so it cannot affect layout: the
   dateline is a wrapping flex row, and a ::after that participated in it would shift the line at
   the widths where it wraps. Spread animates 0 -> 5px and fades, so the dot's own 7px box never
   changes and nothing reflows. `infinite` is deliberate but NOT free — see the note below. */
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--up) 50%,transparent)}
  70%{box-shadow:0 0 0 5px color-mix(in srgb,var(--up) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--up) 0%,transparent)}}
/* The global reduce rule collapses animation-duration to .001ms, which for an INFINITE animation
   means it still runs — invisibly, forever, at ~1000fps of style recalculation. Stop it outright. */
@media (prefers-reduced-motion:reduce){.dateline .live i{animation:none}}
/* 21ch, not 15ch: 15 was tuned for the previous, much longer headline. The share card breaks
   "What would your investment / have been worth?" in two lines, and 21ch is the MEASURED minimum
   that reproduces that break at 768px and up (19ch gives three; 23ch and 26ch give the same two,
   so anything wider only adds slack). 375px still takes three lines — the card is a fixed 1200px
   canvas and a phone is not, so that one is not matchable and is not a defect.
   No &nbsp; anywhere in this heading: at 36-84px a glued pair is an overflow risk and overflow
   beats orphan (gotcha 2.10-pre). `balance` does the work; the two-pass sweep confirms no runt. */
.ed-h1{font-family:var(--display);font-weight:800;font-size:clamp(36px,7.2vw,84px);line-height:1.0;letter-spacing:-.04em;max-width:21ch;text-wrap:balance}
.ed-h1 em{font-style:normal;color:var(--accent-ink)}
.ed-h1 .strike{position:relative;color:var(--ink-3);white-space:nowrap}
.ed-h1 .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.07em;background:var(--accent);transform:rotate(-3deg)}
/* The four series the share card names, in the exhibit's own colours — so the dot beside
   "Bitcoin" up here is the same dot on the chart below, and the eye carries one legend down the
   page. This row is NOT decoration: the headline is now a question every calculator in this
   category asks, so the differentiation has to live somewhere, and it lives here and in the
   dateline. Delete this row and the hero says nothing the competition doesn't.
   Colours are the chart's literals rather than tokens for exactly that reason; they must not
   drift from the exhibit, and a token would let them. */
.hero-assets{display:flex;flex-wrap:wrap;gap:11px 24px;margin:22px 0 0;padding:0;list-style:none;
  font:600 clamp(14px,1.35vw,16px)/1.3 var(--sans);color:var(--ink)}
.hero-assets li{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.hero-assets i{width:9px;height:9px;border-radius:50%;flex:none}
/* Below ~430px the row wraps 3+1 and strands "S&P 500" on a line of its own. A greedy flex wrap
   cannot balance that; a 2-column grid can, and 2x2 also echoes the share card's block. Measured
   fit: the widest cell ("Mag 7 stocks" + dot) is well inside a half-column at 320px. */
@media (max-width:430px){
  .hero-assets{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:11px 20px}}
.ed-lede{font-size:clamp(17px,1.9vw,21px);color:var(--ink-2);max-width:56ch;line-height:1.55;margin-top:24px}
.ed-lede b{color:var(--ink);font-weight:600}
.ed-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

/* ---- EXHIBIT ---- */
.exhibit{margin:0}
.exhibit .well{padding:20px 24px 16px}
.exhibit .well .top{display:flex;align-items:flex-end;gap:20px 34px;flex-wrap:wrap;margin-bottom:8px}
.tallies{display:flex;gap:22px 32px;flex-wrap:wrap;align-items:flex-end}
.tally{display:flex;flex-direction:column;gap:5px}
.tally .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--well-faint);display:inline-flex;align-items:center;gap:7px}
.tally .k i{width:9px;height:9px;border-radius:50%}
.tally b{font:600 15px var(--mono);color:var(--well-ink);font-variant-numeric:tabular-nums}
.tally.lead b{font-family:var(--display);font-weight:700;font-size:clamp(26px,4vw,38px);letter-spacing:-.03em;color:var(--amber)}
.exhibit .ctrls{margin-left:auto}
.exhibit-chart{height:clamp(250px,34vw,360px);margin-top:6px}
.exhibit figcaption{font:500 12px var(--mono);letter-spacing:.02em;color:var(--ink-3);margin-top:14px;text-wrap:pretty}

/* ---- pull quote ---- */
.pull{margin:0;padding:clamp(30px,5vw,56px) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pull p{font-family:var(--display);font-weight:700;font-size:clamp(24px,4.2vw,44px);letter-spacing:-.03em;line-height:1.12;max-width:20ch;margin:0 auto;text-align:center;text-wrap:balance}
.pull .by{display:block;text-align:center;margin-top:18px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ---- method / standardization ---- */
.method-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;margin-top:26px}
.flow{background:var(--well);border-radius:var(--r-surface);box-shadow:inset 0 0 0 1px var(--well-edge);padding:26px;color:var(--well-ink)}
.flow-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.flow-node{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:12px 14px;background:var(--well-2);border-radius:var(--r-surface);box-shadow:inset 0 0 0 1px var(--well-edge);min-width:92px}
.flow-node .fk{font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--well-faint)}
.flow-node .fv{font:600 15px var(--mono);color:var(--well-ink)}
.flow-node.amber .fv{color:var(--amber)}
.flow-op{font:600 18px var(--mono);color:var(--well-faint)}
.flow-cap{margin-top:18px;font:500 11.5px var(--mono);color:var(--well-dim);text-align:center}
.units{display:flex;flex-direction:column;margin-top:2px}
.unit-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.unit-row:first-child{border-top:1px solid var(--rule-strong)}
.unit-row .dot{width:9px;height:9px;border-radius:50%;flex:none}
.unit-row .nm{font-weight:600}
.unit-row .u{margin-left:auto;font:600 14px var(--mono);font-variant-numeric:tabular-nums}
.unit-row .u small{color:var(--ink-3);font-weight:500;margin-left:3px}

/* ---- capabilities ---- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.cap{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-surface);padding:20px;display:flex;flex-direction:column;gap:9px;position:relative;transition:border-color .2s,transform .2s}
.cap:hover{border-color:var(--rule-strong);transform:translateY(-2px)}
.cap .ci{display:flex;align-items:center;gap:10px}
.cap .ci .sw{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 7px color-mix(in srgb,var(--accent) 60%,transparent)}
.cap .ci .n{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cap h3{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em;line-height:1.15}
.cap p{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.cap .tag{position:absolute;top:16px;right:16px}

/* ---- risk readout ---- */
.risk-tbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-variant-numeric:tabular-nums;min-width:460px}
.risk-tbl th,.risk-tbl td{text-align:right;padding:14px 0 14px 16px;border-bottom:1px solid var(--rule);white-space:nowrap;font-size:14px}
.risk-tbl thead th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;border-bottom:1px solid var(--rule-strong)}
.risk-tbl th:first-child,.risk-tbl td:first-child{text-align:left;padding-left:0;font-family:var(--sans)}
.risk-tbl tbody th{font-weight:600}
.risk-tbl tbody th .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:10px;vertical-align:0}
.risk-tbl .hero-col{color:var(--accent-ink);font-weight:700}
.risk-tbl tbody th .h{font:500 11px var(--mono);color:var(--ink-3);margin-left:8px}
.risk-note{font:500 13px var(--mono);color:var(--ink-3);margin-top:16px;line-height:1.55;text-wrap:pretty;max-width:80ch}
.risk-note b{color:var(--ink)}

/* ---- tier matrix (the spine) ---- */
.matrix-wrap{overflow-x:auto;margin-top:24px}
.matrix{width:100%;border-collapse:collapse;min-width:660px}
.matrix th,.matrix td{padding:13px 16px;border-bottom:1px solid var(--rule);text-align:center;vertical-align:middle}
.matrix thead .th-feat{text-align:left}
.matrix thead .th-tier{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em;border-bottom:2px solid var(--rule-strong)}
.matrix thead .th-tier .sub{display:block;font:500 10px var(--mono);color:var(--ink-3);letter-spacing:.04em;margin-top:3px;text-transform:none}
.matrix thead .th-pro{background:var(--accent-tint);color:var(--accent-ink);border-radius:var(--r-surface) var(--r-surface) 0 0}
.matrix td.col-pro,.matrix th.col-pro{background:var(--accent-tint)}
.matrix tbody th{text-align:left;font-weight:500;font-size:14px;color:var(--ink);white-space:nowrap}
.matrix tbody th .h{display:block;font:500 11px var(--mono);color:var(--ink-3);margin-top:2px;white-space:normal}
.matrix td{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink)}
.matrix .yes{color:var(--accent-ink);font-weight:700}
.matrix .no{color:var(--ink-3)}
.matrix tr.price-row td,.matrix tr.price-row th{border-bottom:0;padding-top:18px;font-weight:700}
.matrix tr.price-row .price{font-family:var(--display);font-size:22px;letter-spacing:-.02em}
.matrix tr.price-row .price small{font-size:12px;color:var(--ink-3);font-weight:500;font-family:var(--mono)}
.matrix .cta-row td{padding-top:14px}
.matrix .cta-row .pill{width:100%}

/* ---- use cases ---- */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 44px;margin-top:26px}
.case{border-left:2px solid var(--accent);padding:6px 0 6px 20px}
.case .q{display:block;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;line-height:1.2}
.case p{margin-top:8px;font-size:14px;color:var(--ink-2);line-height:1.55}
.case .who{margin-top:10px;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}

/* ---- final CTA band ---- */
.cta-band{background:var(--well);color:var(--well-ink);border-radius:var(--r-surface);padding:clamp(30px,5vw,52px);
  text-align:center;position:relative;overflow:hidden;
  --ink:var(--well-ink);--ink-2:var(--well-dim);--ink-3:var(--well-faint);--surface-2:var(--well-3);--surface-3:var(--well-edge);
  --rule-strong:var(--well-edge);--focus:var(--amber)}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 50% -20%,rgba(255,180,84,.22),transparent 60%);pointer-events:none}
.cta-band h2{position:relative;font-family:var(--display);font-weight:800;font-size:clamp(26px,4vw,44px);letter-spacing:-.03em;line-height:1.05;max-width:20ch;margin:0 auto}
.cta-band p{position:relative;color:var(--well-dim);margin-top:14px;font-size:15px}
.cap p a,.cta-band p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.cap p a:hover{color:var(--accent-ink)}
.cta-band p a:hover{color:var(--well-ink)}
.cta-band .cta-alt{margin-top:6px;font-size:14px}
.cta-band .acts{position:relative;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}

@media (max-width:920px){
  .method-grid{grid-template-columns:1fr;gap:26px}
  .caps{grid-template-columns:repeat(2,1fr)}
  .cases{grid-template-columns:1fr}
}
/* The header's text links hide below 661px, not 561px, since the MCP link joined them (2026-09-17):
   four links measured wrapping onto two lines at every width up to 653px. The drawer carries them. */
@media (max-width:660px){
  .lp-nav a:not(.pill){display:none}
  /* Phone order: the call to action first, then the two controls together on the right — the same
     shape as the simulator's masthead (Go Pro · theme · menu). Desktop keeps links · theme · CTA. */
  .lp-nav .pill.solid{order:-1}
}
@media (max-width:560px){
  .caps{grid-template-columns:1fr}
  .exhibit .well{padding:16px 14px}
  .tallies{gap:16px 22px}
}
/* ── the tier matrix on a phone ───────────────────────────────
   It was `min-width:660px` inside an `overflow-x:auto` wrapper with `nowrap` labels, which on a
   375px screen rendered the feature column and NOTHING ELSE: all three tiers sat off-screen with
   no scrollbar, no fade, no hint. A pricing table that shows no prices is worse than no table.

   Fixed by making it FIT rather than by advertising the scroll. A hint would still leave someone
   swiping a comparison table one column at a time with the row labels sliding out of view — the
   affordance treats the symptom. Letting the labels wrap and tightening the gutters puts all
   three tiers on screen at once, which is the only way a comparison reads as a comparison.

   The wrapper keeps `overflow-x:auto` as a floor: if a future row's content refuses to shrink,
   the table scrolls instead of tearing the layout. */
/* Breakpoint DERIVED, not picked: the table's `min-width:660px` plus the 48px of page padding
   either side means it stops fitting at a 708px viewport. 720px is that crossover with a little
   headroom, so there is no band where the table scrolls without an affordance. Measured at 320,
   375, 700 and 760 — tasks/lessons.md, "A breakpoint tuned to an assumed width is an untested
   number." Re-derive it if the page padding or the min-width changes. */
@media (max-width:720px){
  .matrix{min-width:0;table-layout:fixed}
  .matrix th,.matrix td{padding:11px 4px}
  .matrix thead .th-feat{width:40%}
  .matrix thead .th-tier{font-size:14px}
  .matrix thead .th-tier .sub{font-size:9px;letter-spacing:.02em}
    /* No `hyphens:auto` — it broke "Lump-sum comparison overlay" as "compari-son" and
     "real estate" as "real es-tate". A hyphenated product name reads as a typo. */
  .matrix tbody th{white-space:normal;font-size:12.5px;line-height:1.3;padding-left:0}
  .matrix tbody th .h{font-size:10px;line-height:1.35}
  .matrix td{font-size:12px}
  .matrix tr.price-row td,.matrix tr.price-row th{padding-top:14px}
  .matrix tr.price-row .price{font-size:17px}
  .matrix tr.price-row .price small{font-size:10px}
  .matrix .cta-row td{padding:12px 3px 0}
  .matrix .cta-row .pill{padding:8px 4px;font-size:11px;letter-spacing:-.01em}
}

/* ── chart type on a phone ────────────────────────────────────
   Not a "make it smaller" tweak. The chart's viewBox is derived from the measured box so that one
   user unit is one CSS pixel (landing.js, `draw`) — before that, a constant `viewBox="0 0 1000 360"`
   with `preserveAspectRatio="none"` scaled x by 0.299 and y by 0.694 at a 375px viewport and every
   glyph rendered 2.32x taller than it was drawn. Undistorted, the labels are now honestly 11px, and
   at 11px the five end labels claim 78px of a 244px-wide box at 320px.

   So this steps the two chart type sizes down where the box is narrow. The gutters are measured
   from the rendered text, so they follow this rule automatically — there is no padding constant to
   keep in step with it. 10.5px is the size the chart footer and the range switch already use.

   The end labels are NOT dropped on mobile even though the legend below repeats all five names:
   the legend maps a colour to a name, the end label maps a *line* to a name, and on a log axis
   where four of the five finish within one decade that is the reading the figure exists to give. */
@media (max-width:560px){
  .chart-svg .end-lbl{font-size:10.5px}
  .chart-svg .grid-lbl{font-size:9.5px}
}

/* ============================================================
   /mcp-server — the MCP server's marketing page. It borrows the landing's
   hero, section heads, caps, matrix, cases and CTA band; what follows is only
   what that page adds: the endpoint box, the example exchange, the client
   cards, code wells with copy buttons, and the question list.
   ============================================================ */
.dateline a{color:inherit}
.dateline a:hover{color:var(--ink)}
.endpoint{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:26px;max-width:640px;
  padding:10px 10px 10px 16px;background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r-surface)}
.endpoint-k{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
/* The URL never breaks inside itself: "…/mc" + "p" on a phone read as a different address. The
   label takes its own row when the box is narrow, and the button drops under the URL if it must. */
.endpoint code{font:600 clamp(13px,1.6vw,17px) var(--mono);color:var(--ink);white-space:nowrap;min-width:0;flex:0 1 auto}
.endpoint .copy{margin-left:auto}
@media (max-width:560px){.endpoint-k{flex-basis:100%}}
.copy{padding:6px 12px;font-size:12.5px}
.mcp-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:24px 0 0;padding:0;list-style:none;font:500 13px var(--sans);color:var(--ink-2)}
.mcp-facts li{display:inline-flex;align-items:center;gap:8px}
.mcp-facts li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.mcp-facts a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}

/* in ChatGPT's plugin directory: the copy beside a screenshot of the listing. The screenshot is
   ChatGPT's dark theme in both site themes, so it sits in a frame rather than on the page. */
.listing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px 44px;align-items:center;margin-top:6px}
.listing-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
.listing-copy .sec-head{margin:0}
.listing-copy .lead{margin:0}
.listing-copy .lead b{color:var(--ink);font-weight:600}
.listing-shot{margin:0;min-width:0}
.listing-shot img{display:block;width:100%;height:auto;border-radius:var(--r-surface);box-shadow:0 0 0 1px var(--rule-strong)}
.listing-shot figcaption{font:500 12px var(--mono);letter-spacing:.02em;color:var(--ink-3);margin-top:10px}
@media (max-width:920px){.listing{grid-template-columns:minmax(0,1fr)}}

/* the example exchange, drawn in the instrument well */
.chat{margin:24px 0 0}
.chat-well{display:flex;flex-direction:column;gap:14px;padding:clamp(18px,3vw,28px)}
.msg{display:flex;flex-direction:column;gap:6px;max-width:680px}
.msg .who{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--well-faint)}
.msg p{font-size:clamp(15px,1.6vw,17px);line-height:1.55;color:var(--well-ink)}
.msg.you{align-self:flex-end;text-align:right}
.msg.you p{background:var(--well-3);border-radius:14px 14px 3px 14px;padding:10px 14px}
.msg.tool p{font:500 13px var(--mono);color:var(--well-dim)}
.msg.tool code{color:var(--amber);font:inherit}
.msg.ai b{color:var(--amber);font-weight:700}
.msg.ai .src{font:500 11.5px var(--mono);color:var(--well-faint)}
.msg.ai .pill{align-self:flex-start;margin-top:4px}
.chat figcaption{font:500 12px var(--mono);letter-spacing:.02em;color:var(--ink-3);margin-top:14px;max-width:80ch}
.cap code,.lead code,.more-sub code,.client code,.faq code,.acct code{font:500 .88em var(--mono);background:var(--surface-2);border-radius:3px;padding:1px 5px}

/* first in class */
/* The pull quote's own rules would close it before the note under it, so the section draws the
   bottom rule at full width and the quote keeps only its top one. */
#proof .wrap{border-bottom:1px solid var(--rule)}
#proof .pull{border-bottom:0;padding-bottom:12px}
#proof .basis{max-width:68ch;margin:0 auto;padding-bottom:clamp(20px,3vw,34px);text-align:center;font-size:13.5px;color:var(--ink-3);line-height:1.6}
#pricing .note{font-size:13px;color:var(--ink-3);margin-top:16px;max-width:80ch}

/* the three main clients */
.clients{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.client{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-surface);padding:22px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.client h3,.acct h3{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1.1}
.client-sub{font:500 11px var(--mono);letter-spacing:.06em;color:var(--ink-3);margin-top:-6px}
.steps{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink-2);line-height:1.5}
.steps li::marker{font:600 12px var(--mono);color:var(--accent-ink)}
.steps b{color:var(--ink);font-weight:600}
.steps a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.client-note{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-top:auto;padding-top:4px}
.code{position:relative;background:var(--well);border-radius:var(--r-surface);box-shadow:inset 0 0 0 1px var(--well-edge);min-width:0}
/* pre-wrap, not pre: a one-line command in a narrow card scrolled sideways and hid its URL, which is
   the part a reader must check. Indentation in the JSON snippets survives; long lines wrap. */
.code pre{margin:0;padding:12px 14px;overflow-x:auto;font:500 12.5px/1.6 var(--mono);color:var(--well-ink);white-space:pre-wrap;overflow-wrap:anywhere}
.code code{font:inherit;background:none;padding:0;color:inherit}
/* A flag never splits at its own hyphens ("--" / "header"). A span, not U+2011: the copy button
   copies textContent, and a non-breaking hyphen pasted into a shell is not a hyphen. */
.code .nw{white-space:nowrap}
/* The copy button sits on the well, so it takes the well's colors rather than the page's. It
   gets its own row under the code rather than floating over it: a floating button covered the
   end of a long command, which is exactly the part a reader needs to see. */
.code .copy{display:flex;margin:0 8px 8px auto;background:var(--well-3);color:var(--well-ink)}
.code .copy:hover{background:var(--well-edge)}
.code .copy[hidden]{display:none}

/* more assistants: one disclosure each */
.more-h{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;margin-top:40px}
.more-sub{font-size:14px;color:var(--ink-2);margin-top:8px;max-width:80ch}
.more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-top:18px;align-items:start}
.client-more,.faq details{border-bottom:1px solid var(--rule);min-width:0}
.client-more summary,.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 8px 14px 2px;font-weight:600;font-size:15px;color:var(--ink)}
.client-more summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.client-more summary::after,.faq summary::after{content:"+";font:500 18px var(--mono);color:var(--accent-ink);flex:none;transition:transform .2s}
.client-more[open] summary::after,.faq details[open] summary::after{transform:rotate(45deg)}
.client-more > p{font-size:13.5px;color:var(--ink-2);margin:0 2px 10px;line-height:1.55}
.client-more > .code{margin-bottom:16px}

/* your account */
.acct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 44px;margin-top:26px}
.acct-col{display:flex;flex-direction:column;gap:12px;border-left:2px solid var(--accent);padding:4px 0 4px 20px}

/* the questions under "Try asking" are quotes, not titles: a little lighter than the landing's */
#ask .case .q{font-size:18px;font-weight:600;line-height:1.3;text-wrap:balance}
#ask .case{padding-top:4px;padding-bottom:4px}

/* questions */
.faq{margin-top:18px;max-width:820px}
.faq details > p{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin:0 2px 16px;max-width:72ch}
.faq a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}

@media (max-width:920px){
  .clients{grid-template-columns:minmax(0,1fr)}
  .acct{grid-template-columns:minmax(0,1fr)}
}
/* "No account" is the longest tier name on either page, and at 320px it ran 4px past its column. */
@media (max-width:360px){#pricing .matrix thead .th-tier{font-size:12.5px}}
/* Below 481px each tier column is ~46-78px, and a three-word note under the tier name can only break
   with one word stranded ("just the / URL"). The notes are supplementary (the lead above says the
   same, and the price row repeats the price), so they go rather than strand. */
@media (max-width:480px){#pricing .matrix thead .th-tier .sub{display:none}}
@media (max-width:640px){
  .more{grid-template-columns:minmax(0,1fr)}
  .msg{max-width:100%}
}
@media (prefers-reduced-motion:reduce){.client-more summary::after,.faq summary::after{transition:none}}