/* MARKETING PATTERNS — bands, hero, cards, comparison grid, footer.
   Copied VERBATIM from apps/marketing/src/site.css in the AEGIS repository.
   NOT imported by styles.css, on purpose: unlike app.css this file styles bare
   elements (body, h1, h2, h3, p, html) and would restyle a consumer's page. Link
   it explicitly on a marketing surface:

     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="patterns/marketing.css">
     <link rel="stylesheet" href="patterns/brand.css">
   Do not edit values here to change the look — edit tokens/. Every value in this
   file already resolves through a custom property. */

/* ============================================================================
   THE MARKETING SITE'S LAYOUT SYSTEM.

   Colour comes entirely from @aegis/ui — there is not one hex in this file.
   That is the point: when the design system's palette changes, this site
   changes with it, and nobody has to remember a second copy exists.

   What IS defined here is a type scale and a spacing rhythm, because density
   is a per-surface decision. The app's base type is 12px for a dense panel
   read at desk distance; a landing page read once by a stranger needs air, and
   sharing a scale between them would make one of the two wrong. Same reasoning
   that keeps apps/mobile's metrics separate from the web's.

   Layout structure follows docs/21 §3: a four-stop breakpoint ladder with the
   real work at 991 and 767, a 4→2→1 collapse, three container widths, and the
   comparison grid that refuses to stack.
   ========================================================================= */

:root {
  /* Marketing type scale. Larger than the app's at every step. */
  --m-display: clamp(2.3rem, 1.5rem + 2.2vw, 3.5rem);
  --m-h2:      clamp(1.9rem, 1.2rem + 2.1vw, 3rem);
  --m-h3:      clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --m-lead:    clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);
  --m-body:    1rem;
  --m-small:   0.875rem;
  --m-eyebrow: 0.75rem;

  /* Three container widths — docs/21 §3.4. Prose never gets the full one. */
  --w-page:    80rem;   /* outer bound of any band */
  --w-centred: 60rem;   /* centred headline blocks */
  --w-measure: 48rem;   /* body copy */

  /* Band rhythm: 80 → 64 → 48, set once and stepped at the breakpoints. */
  --band-y: 5rem;
  --gutter: 1.5rem;
}

/* `color-scheme` moved to tokens/colors.css, where it now drives the palette
   itself via light-dark(). It was here, and app pages never load this file — so
   the app's scrollbars stayed dark on a light surface and "System" did nothing. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--m-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--text-inverse);
  padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-md) 0;
}
.skip:focus { left: 0; }

:where(a):focus-visible, :where(button):focus-visible, :where(input):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* --- containers ---------------------------------------------------------- */
.wrap     { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--gutter); }
.centred  { max-width: var(--w-centred); margin-inline: auto; text-align: center; }
.measure  { max-width: var(--w-measure); }
.centred .measure { margin-inline: auto; }

/* --- bands --------------------------------------------------------------
   Full-bleed background, constrained content. Alternating tone gives a long
   page a countable rhythm — docs/21 §3.5. The separator is a real element so
   the transition between bands stays designable. */
.band       { padding-block: var(--band-y); position: relative; }
.band.tint  { background: var(--surface-raised); }
.band.sunk  { background: var(--surface-sunken); }
.band + .band { border-top: 1px solid var(--line-subtle); }

/* --- section headings ---------------------------------------------------
   Eyebrow, then heading. No gradient fills and no two-tone headings: that is
   the single most recognisable "AI generated" device and docs/21 §3.10
   rejects it. Where a heading needs two levels, it gets two weights. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--m-eyebrow);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  display: flex; align-items: center; gap: var(--space-2);
}
.centred .eyebrow { justify-content: center; }
.eyebrow::before {
  content: ''; width: 5px; height: 5px; border-radius: var(--radius-full);
  background: var(--accent); flex: 0 0 auto;
}

h1 { font-size: var(--m-display); line-height: 1.04; letter-spacing: -0.03em; font-weight: var(--weight-bold); }
h2 { font-size: var(--m-h2); line-height: 1.1; letter-spacing: -0.02em; font-weight: var(--weight-bold); }
h3 { font-size: var(--m-h3); line-height: 1.25; font-weight: var(--weight-semibold); }
p  { color: var(--text-secondary); }
.lead { font-size: var(--m-lead); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.small { font-size: var(--m-small); }
.dim { color: var(--text-muted); }
h1 + .lead, h2 + .lead, h3 + p { margin-top: var(--space-4); }

/* Step marker — a countable sequence on a long page. docs/21 §3.10 took this
   from a competitor's giant pale numeral set behind the section. That version
   was tried here and abandoned: at 1440 the content column is centred inside
   80rem, leaving no margin wide enough to hold a 9rem numeral, so it either
   collided with the eyebrow or drifted off on its own in the gutter. This does
   the same job — tells you where you are in the sequence — legibly, at every
   width, and in the register of an instrument rather than a brochure. */
.step {
  font-family: var(--font-mono);
  font-size: var(--m-eyebrow);
  letter-spacing: var(--tracking-wider);
  color: var(--text-faint);
  margin-bottom: var(--space-2);
}
.step b { color: var(--accent); font-weight: var(--weight-semibold); }

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-target-min); padding-inline: var(--space-5);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font-weight: var(--weight-semibold); font-size: var(--m-body);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--motion-feedback) var(--ease-out),
              border-color var(--motion-feedback) var(--ease-out);
}
.btn.primary { background: var(--accent); color: var(--text-inverse); }
.btn.primary:hover { background: var(--accent); filter: brightness(1.1); }
.btn.ghost { border-color: var(--line-default); color: var(--text-primary); }
.btn.ghost:hover { background: var(--surface-hover); }
.btn.lg { min-height: 3.25rem; padding-inline: var(--space-6); font-size: var(--m-lead); }

/* --- header -------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--surface-base) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-subtle);
}
.site-head .bar {
  width: 100%; max-width: var(--w-page); margin-inline: auto;
  padding: var(--space-3) var(--gutter);
  display: flex; align-items: center; gap: var(--space-6);
}
.wordmark {
  font-weight: var(--weight-bold); font-size: 1.05rem; letter-spacing: 0.16em;
  color: var(--text-primary); text-decoration: none; display: inline-flex;
  align-items: baseline; gap: 0.45em; flex: 0 0 auto;
}
.wordmark span { color: var(--accent); letter-spacing: 0; font-size: 1.15em; }
.wordmark.sm { font-size: 0.95rem; }
.nav { display: flex; gap: var(--space-5); margin-inline-start: auto; }
.nav a {
  color: var(--text-secondary); text-decoration: none; font-size: var(--m-small);
  font-weight: var(--weight-medium); padding-block: var(--space-2);
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--text-primary); }
.head-cta { display: flex; gap: var(--space-2); align-items: center; }
.head-cta .btn { min-height: 2.5rem; font-size: var(--m-small); padding-inline: var(--space-4); }

.burger { display: none; background: none; border: 0; padding: var(--space-2);
  min-height: var(--tap-target-min); min-width: var(--tap-target-min);
  flex-direction: column; gap: 5px; justify-content: center; align-items: center;
  margin-inline-start: auto; cursor: pointer; }
.burger span { display: block; width: 20px; height: 2px; background: var(--text-primary); }
.m-nav { display: none; flex-direction: column; padding: var(--space-3) var(--gutter) var(--space-5);
  gap: var(--space-1); border-top: 1px solid var(--line-subtle); }
.m-nav a { color: var(--text-primary); text-decoration: none; padding-block: var(--space-3);
  font-size: var(--m-lead); }
.m-nav .btn { margin-top: var(--space-3); }

/* --- hero ---------------------------------------------------------------
   Asymmetric on desktop, reordered on mobile so the CTA lands above the
   product image rather than below it — docs/21 §3.11. */
.hero { padding-block: clamp(3rem, 7vw, 6rem) var(--band-y); }
.hero-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero-copy { max-width: 38rem; }
.hero-art  { position: relative; }
.hero-art img { width: 100%; height: auto; border-radius: var(--radius-lg);
  border: 1px solid var(--line-default); box-shadow: var(--shadow-lg); display: block; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* --- generic grids — the 4→2→1 ladder, docs/21 §3.2 ---------------------- */
.grid { display: grid; gap: var(--space-5); }
.grid.two   { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.four  { grid-template-columns: repeat(4, 1fr); }

/* --- cards --------------------------------------------------------------
   One recipe, used everywhere — docs/21 §3.8. Eyebrow, heading, one short
   paragraph, then the payload. A slot with nothing to put in it is removed
   rather than filled. */
.card {
  background: var(--surface-raised); border: 1px solid var(--line-default);
  border-radius: var(--radius-lg); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.card h3 { margin: 0; }
.card p { margin: 0; font-size: var(--m-small); }
.card.flat { background: transparent; border-color: var(--line-subtle); }

/* A specimen: a fragment of real product output shown inside a card. */
.specimen {
  background: var(--surface-sunken); border: 1px solid var(--line-subtle);
  border-radius: var(--radius-md); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.specimen .claim { color: var(--text-primary); font-size: var(--m-small); }
.specimen .evidence {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--text-muted); letter-spacing: var(--tracking-wide);
}
.specimen .fails { color: var(--status-caution); font-size: var(--m-small); }

/* --- feature bands — one feature, one band. docs/21 §3.6 ----------------- */
/* Alternating sides come from DOM ORDER, not a modifier class.
   A `.flip` class setting `order: 2` on the first child was tried and removed:
   in a band whose markup is image-then-copy it moves the image to position two,
   which is exactly where a copy-then-image band already puts it — so all four
   bands rendered identically with the image always on the right, and the class
   did nothing while looking like it did something.
   Now the markup says which side: image first in the source puts it on the
   left. The only override is on a phone, below. */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.feature img { width: 100%; height: auto; border-radius: var(--radius-lg);
  border: 1px solid var(--line-default); display: block; }
.ticks { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.ticks li { display: flex; gap: var(--space-3); align-items: flex-start;
  color: var(--text-secondary); font-size: var(--m-small); }
.ticks li::before { content: '›'; color: var(--accent); font-weight: var(--weight-bold); flex: 0 0 auto; }

/* --- logo strip ---------------------------------------------------------- */
.logos { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  align-items: center; justify-content: center; }
.logos li { list-style: none; font-family: var(--font-mono); font-size: var(--m-small);
  color: var(--text-muted); letter-spacing: var(--tracking-wide);
  border: 1px solid var(--line-subtle); border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4); }

/* --- the "will not do" band --------------------------------------------- */
.wont { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.wont .card { border-color: var(--line-default); }
.wont h3 { color: var(--text-primary); display: flex; gap: var(--space-2); align-items: baseline; }
.wont h3::before { content: '—'; color: var(--status-breached); font-weight: var(--weight-bold); }

/* --- waitlist ------------------------------------------------------------ */
.waitlist { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.waitlist input[type='email'] {
  flex: 1 1 18rem; min-height: var(--tap-target-min);
  background: var(--surface-sunken); color: var(--text-primary);
  border: 1px solid var(--line-default); border-radius: var(--radius-md);
  padding-inline: var(--space-4); font-size: var(--m-body); font-family: inherit;
}
.waitlist input::placeholder { color: var(--text-faint); }
.wl-note { margin-top: var(--space-3); font-size: var(--m-small); color: var(--text-muted); }
.wl-msg { margin-top: var(--space-3); font-size: var(--m-small); }
.wl-msg.ok   { color: var(--status-ok); }
.wl-msg.err  { color: var(--status-breached); }

/* --- comparison grid ----------------------------------------------------
   docs/21 §3.3. The one thing on the site that does NOT collapse to a single
   column: a comparison you have to scroll through one plan at a time is not a
   comparison. The row label lifts into a centred band spanning every column
   and the values stay side by side. --cmp-min is the floor a column may shrink
   to; below that, drop a column rather than stack. */
/* OPAQUE, deliberately. This table had no background of its own and showed
   the page ground through its rows, which was fine while the ground was a flat
   colour. With the tape behind it, a grid of small figures sat on top of moving
   text — the one place on the site where legibility matters most, since the
   whole argument of the page is that you can compare plans at a glance.

   --surface-base rather than --surface-raised: base restores exactly what the
   rows looked like before, so the head and group bands keep the hierarchy they
   were designed with instead of flattening against a lifted body. */
.cmp { --cmp-min: 6.5rem; background: var(--surface-base); border: 1px solid var(--line-default);
  border-radius: var(--radius-lg); overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: minmax(12rem, 1.6fr) repeat(3, minmax(var(--cmp-min), 1fr));
  border-top: 1px solid var(--line-subtle); }
.cmp-row:first-child { border-top: 0; }
.cmp-head { position: sticky; top: 3.75rem; z-index: 10; background: var(--surface-raised); }
.cmp-group { background: var(--surface-sunken); font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--text-muted); padding: var(--space-3) var(--space-4); }
.cmp-label { padding: var(--space-3) var(--space-4); font-size: var(--m-small); }
.cmp-label .note { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-top: 2px; }
.cmp-val { padding: var(--space-3) var(--space-4); text-align: center; font-size: var(--m-small);
  border-left: 1px solid var(--line-subtle); display: flex; align-items: center; justify-content: center; }
.cmp-val.feat { background: var(--accent-soft); }
.cmp-head .cmp-val { flex-direction: column; gap: 2px; font-weight: var(--weight-semibold); }
.cmp-head .cmp-val .sub { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.yes { color: var(--status-ok); }
.no  { color: var(--text-faint); }

/* --- plan cards ---------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: start; }
.plan { position: relative; }
.plan.feat { border-color: var(--accent); }
.plan .price { font-family: var(--font-mono); font-size: 2.5rem; font-weight: var(--weight-bold);
  color: var(--text-primary); line-height: 1; }
.plan .price .per { font-size: var(--m-small); color: var(--text-muted); font-weight: var(--weight-normal); }
.plan .flag { position: absolute; top: calc(var(--space-3) * -1); left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--text-inverse); font-size: var(--text-xs);
  font-weight: var(--weight-semibold); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full); white-space: nowrap; }

/* --- prose (legal pages) ------------------------------------------------- */
.prose { max-width: var(--w-measure); }
.prose h2 { font-size: var(--m-h3); margin-top: var(--space-8); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--text-secondary); margin-top: var(--space-3); line-height: var(--leading-relaxed); }
.prose ul, .prose ol { padding-inline-start: var(--space-5); }
.prose a { color: var(--accent); }
.prose strong { color: var(--text-primary); }
.notice { border: 1px solid var(--status-caution); background: var(--status-caution-soft);
  border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-6); }
.notice p { color: var(--text-primary); margin: 0; }

/* --- footer -------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--line-subtle); background: var(--surface-sunken);
  padding-block: var(--band-y) var(--space-6); margin-top: var(--band-y); }
.foot-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--space-6); }
.foot-brand p { font-size: var(--m-small); margin-top: var(--space-3); max-width: 22rem; }
.site-foot h3 { font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wider); color: var(--text-muted); font-family: var(--font-mono); }
.site-foot ul { list-style: none; margin-top: var(--space-3); display: flex;
  flex-direction: column; gap: var(--space-2); }
.site-foot a { color: var(--text-secondary); text-decoration: none; font-size: var(--m-small); }
.site-foot a:hover { color: var(--text-primary); }
.foot-legal { margin-top: var(--band-y); padding-top: var(--space-5);
  border-top: 1px solid var(--line-subtle); }
.foot-legal p { font-size: var(--m-small); max-width: var(--w-measure); }
.foot-legal p + p { margin-top: var(--space-3); }
.foot-legal a { color: var(--accent); }

/* ==========================================================================
   THE LADDER. Four stops; the structural work happens at 991 and 767.
   ======================================================================= */

@media (min-width: 1440px) { :root { --band-y: 6rem; --gutter: 2rem; } }

@media (max-width: 991px) {
  :root { --band-y: 4rem; }
  .nav, .head-cta { display: none; }
  .burger { display: flex; }
  .m-nav[data-open='true'] { display: flex; }
  .grid.four, .grid.three { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .wont { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; max-width: 28rem; margin-inline: auto; }
  .cmp-head { top: 3.5rem; }
}

@media (max-width: 767px) {
  :root { --band-y: 3rem; --gutter: 1rem; }
  .hero-grid, .feature { grid-template-columns: 1fr; }
  /* The image drops below the CTA rather than pushing it down — docs/21 §3.11 */
  .hero-art { order: 2; }
  /* One column: the image always follows the copy, whichever side it took on a
     wide screen. An image above the text pushes the point of the band below
     the fold — docs/21 §3.11. */
  .feature > picture[data-shot] { order: 2; }
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
  .wont { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero-cta .btn, .waitlist .btn { width: 100%; }
  .waitlist input[type='email'] { flex-basis: 100%; }
  /* The comparison keeps its columns. The label lifts to a full-width band. */
  .cmp-row { grid-template-columns: repeat(3, 1fr); }
  .cmp-label { grid-column: 1 / -1; text-align: center;
    border-bottom: 1px solid var(--line-subtle); }
  .cmp-val { border-left: 0; }
  .cmp-val + .cmp-val { border-left: 1px solid var(--line-subtle); }
  .cmp-group { text-align: center; }
}

@media (max-width: 479px) {
  .cmp { --cmp-min: 5rem; }
  .cmp-val, .cmp-label { padding-inline: var(--space-2); }
}

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

/* --- utilities appended ------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.badge-planned {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
  color: var(--status-caution); border: 1px solid var(--status-caution);
  border-radius: var(--radius-full); padding: 1px var(--space-2);
  vertical-align: middle; font-weight: var(--weight-medium); white-space: nowrap;
}
code { font-family: var(--font-mono); font-size: 0.9em; color: var(--text-primary); }

/* --- theme toggle -------------------------------------------------------
   The control itself now lives in patterns/app.css, because the app header needs
   it as much as the marketing header does and app.css is the file both surfaces
   load. What stays here is the mobile-nav placement, which is marketing-only. */
.m-nav-theme { padding-block: var(--space-3); }
.m-nav-theme .theme-btn { width: 100%; justify-content: center; min-height: var(--tap-target-min); }

/* The picture is the grid item; the img fills it. NOT `display: contents` —
   that removes the picture from the box tree, so `order` no longer applies to
   it and `.feature.flip` silently stops flipping. */
picture[data-shot] { display: block; min-width: 0; }
picture[data-shot] img { display: block; width: 100%; height: auto; }

/* --- product screenshots ------------------------------------------------
   A dark screenshot on a dark page separates itself: its own background is
   darker than the surface it sits on. A LIGHT screenshot on a light page does
   not — the app's own #fbfcfe against the page's #ffffff is a two-value
   difference, and the image dissolves into the band leaving an empty outline.
   That was visible in the first light render and is the one thing supporting
   both themes actually costs.
   So in light the image gets a real edge and a real shadow: it has to read as a
   screen resting on the page rather than as a patch of the page. */
.hero-art picture img, .feature picture img, .hero-art img, .feature img {
  border: 1px solid var(--line-default);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}
:root[data-theme='light'] .hero-art img,
:root[data-theme='light'] .feature img {
  border-color: var(--line-strong);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 28px rgba(16, 24, 40, 0.10);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .hero-art img,
  :root:not([data-theme='dark']) .feature img {
    border-color: var(--line-strong);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 28px rgba(16, 24, 40, 0.10);
  }
}

/* --- broker strip -------------------------------------------------------
   Type, not logos. Each name carries its own status, because a single footnote
   under a row of six names is read by nobody and the difference between
   "connected" and "planned" is the difference between a fact and an intention. */
.brokers {
  list-style: none; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; margin-top: var(--space-6);
  background: var(--line-subtle);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
}
.broker {
  background: var(--surface-base);
  padding: var(--space-4) var(--space-3);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  min-height: 5.5rem; justify-content: center;
}
.broker-name {
  font-family: var(--font-mono); font-size: var(--m-small);
  letter-spacing: var(--tracking-wide); color: var(--text-secondary);
}
.broker-state {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--text-faint);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.broker-state::before {
  content: ''; width: 5px; height: 5px; border-radius: var(--radius-full);
  background: currentColor; flex: 0 0 auto;
}
/* Only the one that is true today gets colour. Spending the accent on an
   intention is how a roadmap starts reading as a feature list. */
.broker.is-live .broker-name { color: var(--text-primary); }
.broker.is-live .broker-state { color: var(--status-ok); }
.broker.is-next .broker-state { color: var(--text-muted); }

/* --- explainers ---------------------------------------------------------
   Inline SVG, so they take the theme's colours from the same tokens as
   everything else and stay sharp at any density. */
.explain {
  margin: var(--space-8) auto 0;
  max-width: 46rem; width: 100%;
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-lg);
}
.explain svg { display: block; width: 100%; height: auto; }
/* Below the point where a 640-wide diagram's 9px labels stop being readable,
   it scrolls rather than shrinking into illegibility. */
@media (max-width: 640px) {
  .explain { overflow-x: auto; padding: var(--space-4); }
  .explain svg { min-width: 34rem; }
}

@media (max-width: 767px) {
  .brokers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .brokers { grid-template-columns: 1fr; }
}

/* --- the theme control ---------------------------------------------------
   The design system homes these three classes in `patterns/app.css`, which the
   marketing pages do not link — they link `marketing.css` and `brand.css` only.
   So the control shipped as bare unstyled text here. Duplicated rather than
   moved, because the app's copy is deliberately different: it collapses to a
   36px icon-only button in a 48px header, and this one keeps its word.

   `--m-small` is a marketing scale token, so this cannot simply live in the
   shared layer either. */
.theme-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 2.5rem; padding-inline: var(--space-3);
  background: none; border: 1px solid var(--line-default); border-radius: var(--radius-md);
  color: var(--text-secondary); font: inherit; font-size: var(--m-small);
  font-weight: var(--weight-medium); cursor: pointer;
  transition: color var(--motion-feedback) var(--ease-out),
              border-color var(--motion-feedback) var(--ease-out);
}
.theme-btn:hover { color: var(--text-primary); border-color: var(--line-strong); }
.theme-ico {
  width: 13px; height: 13px; border-radius: var(--radius-full); flex: 0 0 auto;
  border: 1.5px solid currentColor;
}
/* System: half filled — the control shows it is deferring rather than deciding. */
.theme-btn[data-mode='system'] .theme-ico { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.theme-btn[data-mode='light']  .theme-ico { background: currentColor; }
.theme-btn[data-mode='dark']   .theme-ico { background: transparent; }
.theme-txt { min-width: 3.4em; text-align: left; }