/* angajuu.de — the Ledger stylesheet (spec 2026-08-10 §3–§6).

   Swiss editorial ledger: precise, quiet, dense but clear. Four rules carry
   the whole system, and every block below is an application of one of them.

   1. Hairlines, not boxes. Structure is drawn with 1px var(--color-border);
      a shadow appears exactly once on the page, on the one floating surface
      (the hero ledger figure, in frames.css). Radius is 3px on controls and
      6px on cards — never more.
   2. Two type voices. Plus Jakarta Sans is for reading; IBM Plex Mono,
      uppercase, 10-12px, tracked, is for anything the machine recorded —
      identifiers, column labels, status, versions, coverage, the footer's
      compliance line. A reader can tell prose from record at a glance.
   3. Navy is structure, teal is signal. --color-brand carries headings,
      primary buttons and the deep bands and is unbudgeted. --color-accent
      means "juujuu did this" and appears in five places, all listed in the
      teal budget in test/style.test.js. Status colours only ever colour
      status data.
   4. Light and generous. One measure (--page-max), one centring expression
      shared by nav, bands and footer, mobile-first throughout.

   Mobile-first: base rules are the mobile layout; every override lives in a
   `@media (min-width: …)` query. No `max-width` query in this file.

   Light-only (spec 2026-08-09 §2, carried forward): one theme, from CSS
   alone — no toggle, no pre-paint script, nothing for JavaScript to decide.
   Token values live in tokens.css and the hero figure's chrome in frames.css;
   neither is duplicated here. */

/* --- Fonts: three faces only (Ledger redesign, spec §3.2) ---
   Plus Jakarta Sans + IBM Plex Mono replaced Inter Variable + JetBrains Mono.
   InterVariable.woff2, InterVariable-Italic.woff2, JetBrainsMono-Regular.woff2
   and JetBrainsMono-SemiBold.woff2 were all removed outright — a test
   (test/assets.test.js) asserts their absence, not just that they're
   undeclared, and test/style.test.js asserts no rule below still names either
   retired family. The three faces that ship are subset to Latin (see README.md
   for the reproducible fontTools command). Nothing in this stylesheet may
   therefore depend on a real italic face: emphasis comes from size, weight
   and colour instead. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/PlusJakartaSans-Variable.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

/* --- Reset --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background: var(--color-base);
  color: var(--color-text);
  /* 16px, not the app's 13px: this page is read once by a stranger, not
     worked in all day by someone who knows it. The Ledger scale (spec §4)
     raises it from the warm-light 15px — the page is denser now and the
     reading voice has to stay comfortable next to the mono record voice. */
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Tertiary links (spec: links get `color: var(--color-accent-text)`). Every
   nav, footer and CTA link on the page carries its own class and its own
   colour — the reset above already covers them — so an unclassed link inside
   `main` can only be inline prose: the legal pages' citations, which are the
   only place this page has body copy pointing somewhere else. Colour alone
   is not a safe affordance (WCAG 2.1 SC 1.4.1), so the underline carries the
   signal too, kept thin and offset so it reads as a link's own mark rather
   than as emphasis. */
main a:not([class]) {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 140ms var(--ease);
}

main a:not([class]):hover {
  color: var(--color-brand);
}

ul {
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

table {
  border-collapse: collapse;
}

/* --- Layout constants --- */
:root {
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* Measure. Bands stay full-bleed — only their CONTENT is capped, by growing
     the inline padding once the viewport exceeds the measure:
       padding-inline: max(<gutter>, (100% - var(--page-max)) / 2)
     Nav, bands and footer all use the same expression so their left edges line
     up at every width. Above 1280px the gutter floor stops binding and the
     content centres at --page-max; below it, the mobile-first gutters apply
     unchanged. No max-width query anywhere — the formula self-floors. */
  --page-max: 1280px;
}

/* The only animation on the page is juujuu's status dot, and it is already
   opt-in behind `prefers-reduced-motion: no-preference`. This block covers
   the rest: smooth scrolling and the interaction transitions. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Two type voices (rule 2) ---
   `.mono` is the record voice: identifiers, coverage figures, versions. It
   sets family and figure behaviour only — tracking and uppercase belong to
   the *label* classes below, because a version string reads better as "v3"
   than as "V3", while a column header reads better shouted. */
.mono {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Section kicker: the record voice used as a label. */
.kicker {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* --- Headlines and body copy (spec §4 scale, pinned by test/style.test.js) --- */
.hero__headline {
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1.02;
  letter-spacing: -2.5px;
  font-weight: 800;
  color: var(--color-text);
  text-wrap: balance;
}

h2 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -1.2px;
  font-weight: 800;
  color: var(--color-brand);
  text-wrap: balance;
}

h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--color-brand);
}

.band p {
  color: var(--color-text-muted);
  max-width: 68ch;
}

/* Leads sit between the display tier and body copy: 19px under the hero
   headline, 17px under a section H2. Both muted — a lead explains, it does
   not compete with the line above it. */
.band .hero__lead {
  font-size: 19px;
  line-height: 1.5;
  max-width: 46ch;
}

.band .band__lead {
  font-size: 17px;
  max-width: 58ch;
}

/* --- Long-form content (legal pages) ---
   The reset above (`ul` losing its markers, on top of `*` zeroing padding) is
   correct for the marketing bands: every marketing list draws its own marker
   explicitly (`.pricing__plan li::before`, `.juujuu__points li::before`) or is
   a nav/footer list that was never meant to show bullets. It is wrong for the
   legal pages' long-form prose lists, which need real markers, indentation and
   inter-item spacing like any other body copy.
   Scoped to `main.band`: only the four legal pages wrap their `<main>` in
   `.band` with no `band--*` modifier — every marketing section is always
   `.band band--*` — so this cannot leak into the marketing bands' lists. */
main.band ul {
  list-style: disc;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

main.band ol {
  list-style: decimal;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

main.band li {
  color: var(--color-text-muted);
}

/* The legal pages run H1 then a long alternation of H2 and prose. They have no
   band grid to give them rhythm, so the seam between sections is drawn here —
   the same hairline the marketing bands use between each other. */
main.band h1 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -1.2px;
  font-weight: 800;
  color: var(--color-brand);
}

main.band h2 {
  font-size: 20px;
  letter-spacing: -0.4px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

main.band p {
  max-width: 74ch;
  color: var(--color-text-muted);
}

/* --- Focus (rule 3: the accent's interaction role) ---
   Every interactive element gets a visible ring, but the accent's two teal
   tones split by ground: --color-accent-text (teal-dark, 4.9-5.5:1) on the
   light bands, where plain --color-accent falls to 2.3-2.5:1 and fails the
   3:1 non-text minimum (WCAG 2.1 SC 1.4.11); --color-accent back on the deep
   navy band (CTA + footer), where it measures 4.5:1 — accent-text drops to
   2.1:1 there and would fail in the other direction. `outline` rather than a
   box-shadow ring so it follows the element's own shape and survives inside
   the overflow-clipped hero figure. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 3px;
  border-radius: 3px;
}

.band--cta :focus-visible,
footer :focus-visible {
  outline-color: var(--color-accent);
}

/* --- Skip link ---
   Visually hidden until focused, then unmistakably visible: off-screen via
   negative top rather than opacity, so it never intercepts pointer events or
   sits invisibly in the tab order's way. Navy, not teal — it is structure. */
.skip {
  position: absolute;
  top: -48px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--color-brand);
  color: var(--color-brand-contrast);
  font-size: 14px;
  font-weight: 600;
  border-radius: 3px;
  transition: top 140ms var(--ease);
}

.skip:focus {
  top: 8px;
}

/* --- Nav ---
   Sticky, on the page's own ground, separated from the first band by the
   same hairline every other seam uses. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  /* Wraps rather than clips: below about 360px the lockup, the language
     switch and the CTA no longer fit on one line, and a nav that overflows is
     a nav whose CTA is half off the screen. Costs nothing at every width where
     the row does fit. */
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 20px;
  background: var(--color-base);
  border-bottom: 1px solid var(--color-border);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  color: var(--color-brand);
}

/* The mark is an inline <svg> (not an <img>) specifically so it can bind its
   left ring to --color-brand and its right ring + lens to --color-accent and
   theme correctly — an externally-referenced image cannot see the document's
   custom properties. That binding lives on the inline SVG attributes, not on
   a CSS rule, so it sits outside the teal budget in test/style.test.js by
   design: the budget scopes decorative teal *in the stylesheet*, not the
   logo's own brand colour, which the mark carries wherever it renders. The
   persona figures bind their teal the same way, for the same reason. */
.nav__logo-mark {
  height: 26px;
  width: auto;
}

.nav__logo-word {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: inherit;
}

/* Deep-band variant (navy CTA band / footer): the wordmark is bound to
   currentColor, so repainting color here from --color-brand to
   --color-brand-contrast flips it with no second asset needed. The vesica
   ring/lens colours are fixed by design (navy customer ring, teal AI ring)
   and do not currently follow this flip — no template applies the class yet;
   a future navy placement of the mark itself will need its own variant. */
.logo--on-deep {
  color: var(--color-brand-contrast);
}

/* Below 768px the three section links form a second, full-width row of the
   already-wrapping nav instead of disappearing: three short anchors fit any
   phone width, and a menu that needs no toggle needs no script. `order: 1`
   pushes the row below the logo/actions row; ≥768px restores the single
   inline row. */
.nav__links {
  display: flex;
  align-items: center;
  order: 1;
  flex-basis: 100%;
  gap: 20px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.nav__links a {
  transition: color 140ms var(--ease);
}

.nav__links a:hover {
  color: var(--color-text);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.nav__lang {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 5px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 3px;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}

.nav__lang:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

/* Visible at every width: on the marketing site this link is the only path
   to angajuu.online/login, so hiding it on phones locks existing users out. */
.nav__login {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: color 140ms var(--ease);
}

.nav__login:hover {
  color: var(--color-text);
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  background: var(--color-brand);
  color: var(--color-brand-contrast);
  font-size: 14px;
  font-weight: 600;
  border-radius: 3px;
  white-space: nowrap;
  transition: opacity 140ms var(--ease);
}

.nav__cta:hover {
  opacity: 0.88;
}

@media (min-width: 768px) {
  .nav {
    padding: 12px max(40px, (100% - var(--page-max)) / 2);
  }

  .nav__links {
    order: 0;
    flex-basis: auto;
    gap: 28px;
    margin-left: 40px;
  }
}

@media (min-width: 1440px) {
  .nav {
    padding: 12px max(80px, (100% - var(--page-max)) / 2);
  }
}

/* Pointer-coarse hit-area floor (44px minimum touch target, achieved by
   hit-area padding rather than by enlarging controls). The 36px visual height
   of .nav__cta and the 29px height of .nav__lang are correct and must not grow
   here — only the invisible tappable area does, via a centred ::after sized
   independently of the element's own box. */
@media (pointer: coarse) {
  .nav__cta,
  .nav__lang,
  .nav__login,
  .nav__links a,
  .cta {
    position: relative;
  }

  .nav__cta::after,
  .nav__lang::after,
  .nav__login::after,
  .nav__links a::after,
  .cta::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 44px);
    height: 44px;
  }
}

/* --- Bands ---
   Each band is its own horizontal-scroll container: a defensive last line
   below the body rule's own `overflow-x: hidden` so unpredictable inline
   content (a long unbroken German compound, a wide mono figure) scrolls
   inside the section instead of ever pushing the page itself sideways. */
.band {
  padding: 56px 20px;
  overflow-x: auto;
}

/* The seam between bands is a hairline, never a gap and never a gradient —
   the page reads as one continuous ledger with ruled sections. */
.band + .band {
  border-top: 1px solid var(--color-border);
}

.band > * + * {
  margin-top: 20px;
}

@media (min-width: 768px) {
  .band {
    padding: 88px max(40px, (100% - var(--page-max)) / 2);
  }
}

@media (min-width: 1440px) {
  .band {
    padding: 112px max(80px, (100% - var(--page-max)) / 2);
  }
}

/* Band ground rhythm — three discrete steps, never a gradient. White paper
   for the two bands that carry cards, the page's own base for the rest, navy
   for the closing call. */
.band--hero,
.band--personas,
.band--pricing {
  background: var(--color-base);
}

.band--args {
  background: var(--color-surface);
}

.band--juujuu {
  background: var(--color-surface-sunken);
}

.band--cta {
  background: var(--color-band-deep);
  color: var(--color-brand-contrast);
}

/* --- Buttons ---
   Three weights, one geometry: 44px tall, 3px radius, no shadow. Navy fills
   the primary action, a navy hairline carries the secondary, and teal is
   reserved for the single closing call on the navy band. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 140ms var(--ease), background 140ms var(--ease), color 140ms var(--ease);
}

.cta--primary {
  background: var(--color-brand);
  color: var(--color-brand-contrast);
}

.cta--primary:hover {
  opacity: 0.88;
}

.cta--outline {
  border: 1px solid var(--color-brand);
  color: var(--color-brand);
}

.cta--outline:hover {
  background: var(--color-brand-tint);
}

/* The page's one teal fill: the closing call on the navy band. Teal on navy
   is the strongest pairing the palette has, and it is spent exactly once. */
.cta--accent {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.cta--accent:hover {
  opacity: 0.9;
}

/* --- Hero (spec §6.2) ---
   Copy left, the live ledger card right. The card IS the product screenshot:
   no window chrome, no device frame, no illustration — the table a customer
   would actually see, marked as invented sample data by frames.css. */
.band--hero {
  display: grid;
  gap: 40px;
  align-items: start;
}

.band--hero > * + * {
  margin-top: 0;
}

.hero__copy > * + * {
  margin-top: 20px;
}

.hero__headline {
  margin-top: 16px;
}

/* The teal 25% underline: a tint, never the raw accent, so the headline's
   text contrast is untouched and the mark reads as a highlighter stroke
   rather than a second colour of type. */
.hero__highlight {
  background: linear-gradient(transparent 72%, var(--color-accent-tint) 72%);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

@media (min-width: 1080px) {
  .band--hero {
    grid-template-columns: 1.02fr 1fr;
    gap: 64px;
    align-items: center;
  }

  /* Grid items default to `min-width: auto`, so the ledger table's intrinsic
     width would otherwise set its column's width and push the page sideways —
     where the body rule's own `overflow-x: hidden` clips rather than
     scrolls. */
  .band--hero > * {
    min-width: 0;
  }
}

/* --- The ledger table (spec §4) ---
   The record voice at full strength: mono uppercase column heads on the page's
   own ground, 1px row dividers, one tinted row, status as a chip, coverage as
   a 4px meter. Everything a status colour touches here is status data. */
.ledger {
  width: 100%;
  font-size: 14px;
}

.ledger thead th {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  text-align: left;
  white-space: nowrap;
  padding: 11px 12px;
  background: var(--color-base);
  border-bottom: 1px solid var(--color-border-strong);
}

.ledger td {
  padding: 12px 12px;
  border-top: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text);
}

.ledger tbody tr:first-child td {
  border-top: none;
}

.ledger td.mono {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* The coverage cell is a meter and its figure reading as one unit. Without
   this the 44px track plus the percentage exceed the column's content width
   at the narrower breakpoints and the figure drops under its own meter. */
.ledger td:nth-child(4) {
  white-space: nowrap;
}

/* The one tinted row. Amber at 5% is a wash, not a fill — it marks the row
   that is mid-change without shouting over the rest of the table. */
.ledger__row--partial {
  background: rgba(224, 145, 18, 0.05);
}

/* The version cell of the changing row carries the arrow, and it is the only
   cell in the table that reports a transition — so it is the only one that
   takes the status colour of the row it sits in. */
.ledger__row--partial td:last-child.mono {
  color: var(--color-partial);
  font-weight: 600;
}

/* --- Chips: status as a record, not as decoration --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

.chip--covered::before,
.chip--partial::before,
.chip--gap::before,
.chip--unassessed::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.chip--covered {
  color: var(--color-covered);
  background: rgba(10, 125, 90, 0.10);
}

.chip--partial {
  color: var(--color-partial);
  background: rgba(224, 145, 18, 0.13);
}

.chip--gap {
  color: var(--color-gap);
  background: rgba(192, 36, 44, 0.10);
}

.chip--unassessed {
  color: var(--color-text-faint);
  background: var(--color-surface-sunken);
}

/* The roadmap chip is deliberately NOT teal. Teal means "juujuu did this";
   an honesty marker is not that, and an amber chip reads as "not yet" where
   a teal or green one would read as "ready". Its ground is opaque so the chip
   looks identical on all four band backgrounds. */
.chip--roadmap {
  background: var(--color-partial-tint);
  border: 1px solid var(--color-partial-data);
  color: var(--color-partial);
}

/* --- Coverage meter: a 4px track, filled to the row's degree --- */
.meter {
  display: inline-block;
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-surface-sunken);
  margin-right: 10px;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
}

.meter::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 2px;
}

.meter--covered::after {
  width: 100%;
  background: var(--color-covered-data);
}

.meter--partial::after {
  width: 67%;
  background: var(--color-partial-data);
}

/* Zero coverage draws a stub, not an empty track: a gap that renders as
   nothing is indistinguishable from a gap nobody has assessed yet, and the
   difference between those two is the whole point of the fourth row. */
.meter--gap::after {
  width: 3px;
  background: var(--color-gap);
}

.meter--unassessed {
  background: transparent;
  border: 1px dashed var(--color-border-strong);
}

/* --- juujuu's line under the table ---
   The figure's caption is juujuu speaking about the row above it, so it takes
   the accent: a 2px teal rule and the accent's own tint as ground. This is one
   of the five budgeted teal uses. */
.ledger__alert {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--color-border);
  border-left: 2px solid var(--color-accent);
  background: var(--color-accent-tint);
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text);
}

/* Mobile shows the three columns that carry the story — identity, what it is,
   where it stands. Coverage joins at 768px and the version column at 1080px,
   where there is room for them to be read rather than merely fitted. */
.ledger th:nth-child(4),
.ledger td:nth-child(4),
.ledger th:nth-child(5),
.ledger td:nth-child(5) {
  display: none;
}

@media (min-width: 768px) {
  .ledger th,
  .ledger td {
    padding-left: 14px;
    padding-right: 14px;
  }

  .ledger th:nth-child(4),
  .ledger td:nth-child(4) {
    display: table-cell;
  }
}

@media (min-width: 1080px) {
  .ledger th:nth-child(5),
  .ledger td:nth-child(5) {
    display: table-cell;
  }
}

/* --- Argument strip (spec §6.3) ---
   Four numbered columns read as a sequence, not a feature grid. The two
   roadmap notes are extra list items after the loop; from 960px they take
   grid cells 2 and 4 of the second row, directly under the argument each one
   qualifies. Markers are suppressed on the <ol> because every item already
   carries its own mono index — a browser bullet would be a second, competing
   numbering. */
.args {
  list-style: none;
  display: grid;
  gap: 32px;
  margin-top: 40px;
}

.args__no {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-text-faint);
}

.args__title {
  margin-top: 10px;
}

.band .args__body {
  margin-top: 10px;
  font-size: 15px;
  max-width: 42ch;
}

/* Every argument is ruled off at the top, at every width — the hairline is
   what makes four paragraphs read as four ledger entries rather than as a
   stack of prose. */
.args__item {
  border-top: 1px solid var(--color-border-strong);
  padding-top: 16px;
}

/* One row of four, and no second row. The strip used to carry two footnote
   items — a dashed seam under arguments 02 and 04, naming the unbuilt half of
   each — placed on the grid explicitly. Both the items and their placement
   rules are gone: the section names four reasons and says nothing about what
   ships when, so the grid needs no row-2 vocabulary at all. */
@media (min-width: 960px) {
  .args {
    grid-template-columns: repeat(4, 1fr);
    gap: 36px 32px;
  }
}

/* --- The turn (spec 2026-08-17 §4.2) ---
   Sunken ground so the band separates from the hero above it and the argument
   strip below without introducing a fourth ground step. Rules, mono labels and
   a strike on the "früher" column: the ledger's grammar, none of its markup. */
.band--craft {
  background: var(--color-surface-sunken);
}

.turn__labels {
  display: none;
  margin-top: 40px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-text-faint);
}

.turn {
  list-style: none;
  margin-top: 24px;
  border-top: 1px solid var(--color-border-strong);
}

.turn__row {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border-strong);
}

.band .turn__then {
  font-size: 15px;
  color: var(--color-text-faint);
  text-decoration: line-through;
}

.band .turn__now {
  font-size: 17px;
  color: var(--color-brand);
}

.band .craft__closing {
  margin-top: 32px;
  font-size: 19px;
  color: var(--color-brand);
}

@media (min-width: 960px) {
  .turn__labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .turn__row {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: baseline;
  }
}

/* --- The guided path (spec 2026-08-17 §4.6) ---
   Deliberately the argument strip's geometry — four ruled columns, mono
   numbering — because it IS a sequence, and giving it a second visual
   vocabulary would say the two bands are unrelated when one answers the
   other. Plain surface ground: the sunken step is spent on juujuu above it. */
.band--hand {
  background: var(--color-surface);
}

.steps {
  list-style: none;
  display: grid;
  gap: 32px;
  margin-top: 40px;
}

.steps__item {
  border-top: 1px solid var(--color-border-strong);
  padding-top: 16px;
}

.steps__no {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-text-faint);
}

.steps__title {
  margin-top: 10px;
}

.band .steps__body {
  margin-top: 10px;
  font-size: 15px;
  max-width: 42ch;
}

.band .hand__closing {
  margin-top: 40px;
  font-size: 17px;
}

@media (min-width: 960px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 36px 32px;
  }
}

/* --- Personas (spec §6.4) --- */
.personas {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

.persona-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 24px;
}

/* Sized to the vesica figures' own 88x62 viewBox rather than the tall box the
   retired bar figures needed: a wide mark in a portrait box just letterboxes,
   drawing the creature small and leaving dead air above the name. */
.persona-card__figure {
  width: 96px;
  height: 68px;
  margin-bottom: 20px;
}

.persona-card__name {
  font-size: 17px;
}

.band .persona-card__value {
  margin-top: 10px;
  font-size: 15px;
}

@media (min-width: 768px) {
  .personas {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* --- juujuu pillar (spec §6.5) ---
   What juujuu does today on the left, one demonstration of it on the right. */
.band--juujuu {
  display: grid;
  gap: 40px;
  align-items: start;
}

.band--juujuu > * + * {
  margin-top: 0;
}

.juujuu__copy > * + * {
  margin-top: 16px;
}

/* The one moving thing on the page: juujuu's status dot, breathing to say the
   analyst is reading right now. Its colour is the accent — juujuu's signal —
   and its motion is opt-in only (the keyframes below are behind
   `prefers-reduced-motion: no-preference`, not merely damped by the reduce
   block above). */
.band--juujuu .kicker::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: middle;
}

.band--juujuu .kicker {
  color: var(--color-accent-text);
}

@media (prefers-reduced-motion: no-preference) {
  .band--juujuu .kicker::before {
    animation: juujuu-pulse 2.6s var(--ease) infinite;
  }
}

@keyframes juujuu-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.juujuu__points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}

.juujuu__points li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--color-text-muted);
  max-width: 52ch;
}

.juujuu__points li::before {
  content: '';
  position: absolute;
  left: 0;
  /* 11px is off the 4px grid on purpose: it centres the rule on the first
     line's x-height at this size and line-height, not on the grid. */
  top: 11px;
  width: 12px;
  height: 1px;
  background: var(--color-border-strong);
}

/* The optimizer card: the ask, struck through, then the story juujuu made of
   it, held by a 2px teal rule — the second of the five budgeted teal uses. */
.optimizer {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 24px;
}

/* The card is a two-beat sequence — the ask, then the story — so its rhythm
   is set on the card and the seam between the beats is doubled. Written as an
   adjacent-sibling rule rather than as a margin on the label, because the
   first label must sit flush with the top of the card. */
.optimizer > * + * {
  margin-top: 10px;
}

.optimizer__before + .optimizer__label {
  margin-top: 28px;
}

.band .optimizer__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.band .optimizer__before {
  font-size: 17px;
  color: var(--color-text-faint);
}

.optimizer__before del {
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-gap);
}

.band .optimizer__after {
  margin-top: 10px;
  padding-left: 16px;
  border-left: 2px solid var(--color-accent);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
}

.band .optimizer__tags {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-covered);
}

@media (min-width: 1080px) {
  .band--juujuu {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }

  .band--juujuu > * {
    min-width: 0;
  }

  .optimizer {
    padding: 32px;
  }
}

/* --- Pricing (spec §6.6): two columns divided by a hairline, no card, no
   "most popular" badge. The plans are a comparison table without the table. --- */
.pricing__cols {
  display: grid;
  gap: 28px;
  margin-top: 40px;
}

.pricing__plan {
  border-top: 1px solid var(--color-border-strong);
  padding-top: 20px;
}

.band .pricing__price {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  margin-top: 6px;
}

.pricing__plan ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.pricing__plan li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.pricing__plan li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 1px;
  background: var(--color-border-strong);
}

.pricing__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.band .pricing__subline {
  font-size: 14px;
  color: var(--color-text-faint);
}

/* A roadmap line: the chip, then the sentence it qualifies. */
.roadmap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.band .roadmap {
  font-size: 14px;
  color: var(--color-text-muted);
}

/* The brand line, closing the band. */
.band .closing {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--color-brand);
  max-width: none;
}

@media (min-width: 768px) {
  .pricing__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .pricing__plan {
    padding: 24px 36px 0 0;
  }

  .pricing__plan + .pricing__plan {
    padding-left: 36px;
    border-left: 1px solid var(--color-border);
  }
}

/* --- Closing call: the page's one deep band --- */
.band--cta h2 {
  color: var(--color-brand-contrast);
}

.band .cta__sub {
  color: var(--color-brand-contrast);
  opacity: 0.76;
  font-size: 17px;
  max-width: 46ch;
}

.band--cta .cta {
  margin-top: 28px;
}

/* --- Footer: the compliance record, in the record voice, on the deep band --- */
footer {
  padding: 32px 20px;
  background: var(--color-band-deep);
  color: var(--color-brand-contrast);
  /* The closing band is navy too, so without a seam the two merge into one
     undifferentiated block and the CTA appears to float in a void. White at
     14% is the same hairline idea as --color-border, read on the deep ground —
     the light bands' border token would be invisible here. */
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__tagline {
  font-size: 15px;
  font-weight: 600;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 14px;
  opacity: 0.8;
}

.footer__links a {
  transition: opacity 140ms var(--ease);
}

.footer__links a:hover {
  opacity: 0.7;
}

.footer__meta,
.footer__note {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.62;
}

/* The Insights footer column (Task 13 adds the markup; the rule ships now so
   that task touches copy and template only). Same record-voice heading
   treatment as .footer__meta, one size up so it reads as a heading rather
   than as compliance metadata. */
.footer__insights {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__heading {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* The seven article links themselves (Task 13): the pre-staged rules above
   only reached the column's container and heading, not its list — without
   this the seven <li> would stack with zero gap, since the global reset
   zeroes list margins/padding. Same font-size, opacity and hover treatment
   as .footer__links, just stacked instead of wrapped. */
.footer__insights ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  opacity: 0.8;
}

.footer__insights a {
  transition: opacity 140ms var(--ease);
}

.footer__insights a:hover {
  opacity: 0.7;
}

@media (min-width: 768px) {
  footer {
    padding: 36px max(40px, (100% - var(--page-max)) / 2);
    flex-direction: row;
    /* flex-start, not center (Task 13): the insights column is now the
       tallest thing in the row — seven stacked links next to single-line
       siblings — and centering it left the tagline and legal links visually
       adrift at different heights. Top-aligning is the ordinary multi-column
       footer convention and reads correctly for all four children. */
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  footer {
    padding: 36px max(80px, (100% - var(--page-max)) / 2);
  }
}

/* --- Insights hub and article templates (Task 4) ---
   Two new page types, still card- and hairline-based like the rest of the
   site: the hub is three grids of article cards behind a hero and a "which
   reader are you" strip, the article is a long-form reading column plus a
   related-articles grid. Neither page is fanned out by the build yet
   (Task 12) — these rules style insights.html and article.html directly,
   the same way the six home-page bands are styled by their own classes. */

/* Ground rhythm for the hub's and article's own bands, following the same
   three-discrete-steps idea the home page uses (rule 4): the hero and the
   theme-group bands sit on the page's own ground, the paths strip and the
   related-articles band on the raised paper, so each band is legible from
   its neighbour without a gradient. */
.band--insights-hero,
.band--theme {
  background: var(--color-base);
}

.band--paths,
.band--related {
  background: var(--color-surface);
}

/* --- Path cards: four doors into the workshop --- */
.path-cards {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

.path-card {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 24px;
}

.band .path-card__label {
  font-size: 13px;
  color: var(--color-brand);
}

.path-card__desc {
  margin-top: 10px;
  font-size: 15px;
}

/* A tertiary link, styled exactly like the unclassed prose links above
   (`main a:not([class))`): teal-dark for the mark, navy on hover. Written out
   in full because a classed element never matches that `:not([class])`
   selector. */
.path-card__link {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.path-card__link:hover {
  color: var(--color-brand);
}

/* Two, then four — never three-plus-an-orphan. The fourth door ("I'm just
   starting out") landed against a `repeat(3, 1fr)` written for three, which put
   one card alone on a second row at a third of the width with two empty cells
   beside it. Four across is not the fix on its own: at 768 the band's own
   measure leaves 688px, so four bordered cards would be 154px each, narrower
   than any card this site ships. So 2×2 is the deliberate middle state, and the
   single row waits for 1080 — where a card is 232px, wider than the three
   article cards already shipping at 768. Both breakpoints are the file's
   existing vocabulary; no new one was invented for this. */
@media (min-width: 768px) {
  .path-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1080px) {
  .path-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Article cards: the theme-grouped grids on the hub, and "keep reading"
   on the article page. Same hairline-card geometry as .persona-card and
   .optimizer (1px border, 6px radius, 24px padding). --- */
.article-cards {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

.article-card {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 24px;
  background: var(--color-surface);
}

.band .article-card__theme {
  font-size: 11px;
  color: var(--color-text-faint);
}

.article-card__title {
  display: block;
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--color-brand);
}

.band .article-card__desc {
  margin-top: 10px;
  font-size: 15px;
}

.band .article-card__meta {
  margin-top: 16px;
  font-size: 11px;
  color: var(--color-text-faint);
}

@media (min-width: 768px) {
  .article-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* The article cards sit on --color-surface already (their own background),
   so on .band--related — which is also --color-surface — they would
   otherwise disappear into their ground. The hub's .band--theme is
   --color-base, where the card's surface reads as a raised card correctly;
   the related band gets its own border so the card stays legible there too. */
.band--related .article-card {
  border-color: var(--color-border-strong);
}

.band--related__all {
  margin-top: 24px;
}

.band--related__all a {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.band--related__all a:hover {
  color: var(--color-brand);
}

/* --- Homepage insights funnel (Task 13) ---
   The featured band on the home page reuses .article-cards / .article-card
   wholesale (Task 4) and needs only its own ground. The four contextual
   "read more" links — the band's own "all insights" link, the three persona
   cards, the juujuu band and the argument strip — share one small link
   style: the same underlined teal-dark-to-navy treatment as .path-card__link
   and .band--related__all above, so one rule covers all four spots instead
   of four near-duplicates. */
.band--insights {
  background: var(--color-base);
}

.band--insights__all {
  margin-top: 24px;
}

.persona-card__link,
.article-card__link,
.band--insights__all a,
.juujuu__more a,
.args__more a {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Only the persona card's link is a bare <a> rather than one wrapped in a
   <p> — the juujuu and args bands' parents already put 16px/20px above their
   next child, but .persona-card has no such rule, so this link needs its own
   block display and top margin to land below the card's value paragraph. */
.persona-card__link {
  display: inline-block;
  margin-top: 12px;
}

.persona-card__link:hover,
.article-card__link:hover,
.band--insights__all a:hover,
.juujuu__more a:hover,
.args__more a:hover {
  color: var(--color-brand);
}

/* Like .persona-card__link, a bare <a> in a card that has no child-spacing
   rule of its own. Every card on the hub now ends the same way — the three
   reading-path cards already carried this link, and an article card whose
   only affordance was an undecorated title read as unclickable next to them. */
.article-card__link {
  display: inline-block;
  margin-top: 16px;
}

/* --- Article: the reading column ---
   One measure, centred inside the band's own padding. Rhythm is generous:
   40px between the header and the body, the same value the home page uses
   between its own major groupings (.personas, .pricing__cols).

   This must stay a *child* of the band, never the band itself. `.band`'s
   horizontal padding is `max(80px, (100% - var(--page-max)) / 2)`, whose
   `100%` resolves against the containing block — the viewport-wide <main> —
   not against the band's own used width. On one element, that padding and
   this max-width fight: past ~1600px the padding exceeds the measure and the
   content box collapses to zero, one word per line. See the guard in
   test/template.test.js. */
.article {
  max-width: 68ch;
  margin-inline: auto;
}

.article > * + * {
  margin-top: 40px;
}

.article__header > * + * {
  margin-top: 12px;
}

.article__headline {
  /* Below the hero clamp on purpose (spec: a page title, not the hero) —
     this is the exact clamp main.band already uses for its own H1, one step
     down from the H2/hero scale. */
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -1.2px;
  font-weight: 800;
  color: var(--color-brand);
  text-wrap: balance;
}

.band .article__lead {
  font-size: 19px;
}

.band .article__meta {
  font-size: 11px;
  color: var(--color-text-faint);
}

.article__body > * + * {
  margin-top: 20px;
}

.article__body p {
  line-height: 1.7;
}

/* A subsection head inside the reading column, not a band head: 20px is the
   same size main.band already uses for its own long-form subheadings, with
   the same hairline seam — the article body has no band grid to give it
   rhythm either, so the seam is drawn the same way. */
.article__body h2 {
  font-size: 20px;
  letter-spacing: -0.4px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.article__body h3 {
  margin-top: 28px;
}

/* Real markers for long-form content, mirroring main.band's legal-list fix
   exactly — the marketing reset (`ul { list-style: none }`) is correct for
   the home page's self-drawn lists and wrong for an article's prose lists. */
.article__body ul {
  list-style: disc;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.article__body ol {
  list-style: decimal;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.article__body li {
  color: var(--color-text-muted);
}

/* Prefixed with .band (rather than bare .article__body a) to outrank
   `main a:not([class])` above: an unclassed prose link in an article body
   must read as an article link (navy), not as the legal pages' tertiary
   teal-dark citation link — the two live in different reading contexts even
   though both are bare <a> tags in flowing prose. */
.band .article__body a {
  color: var(--color-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.band .article__body a:hover {
  text-decoration-thickness: 2px;
}

/* --- Article figures ---
   Expanded from lib/figures.js into the reading column (see the header there
   for why a body may not carry its own SVG). The drawing carries no text at
   all, so the caption is not decoration under a picture — it is the half of
   the figure that says what it means, and it is sized and coloured as prose,
   not as a label.

   The figure breaks the column's 20px paragraph rhythm on purpose: 40px above
   and below is the same air .article puts between the header and the body, so
   a figure reads as a pause in the argument rather than as an illustrated
   paragraph. */
.figure {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* The <figure> is a block in the flow, and .article__body's `> * + *` rule
   already spaces it — but that rule adds 20px, and the two margins above must
   win without !important. Owning both edges here and zeroing the generic top
   margin keeps one number in one place. */
.article__body > .figure + * {
  margin-top: 0;
}

.figure svg {
  display: block;
  width: 100%;
  height: auto;
}

.band .figure__caption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-faint);
}

/* The motif sits in the article header, above the kicker: small, left-aligned
   with the text, and never full-bleed like a scene figure. It is the article's
   face on the page — the same mark family the nav carries, one theme apart. */
.figure--motif-requirements,
.figure--motif-vsdd,
.figure--motif-day,
.figure--motif-craft {
  margin: 0 0 20px;
  width: 60px;
}

/* A motif's caption would be a label under a logo — the theme is already named
   in the kicker directly below it. Kept in the registry (every figure has one,
   in both languages, and test/figures.test.js enforces that) and hidden here,
   where the decision is a layout one. */
.figure--motif-requirements .figure__caption,
.figure--motif-vsdd .figure__caption,
.figure--motif-day .figure__caption,
.figure--motif-craft .figure__caption {
  display: none;
}

/* The same honesty strip the hero ledger carries (assets/frames.css), for the
   same reason and in the same amber: a figure showing invented requirement
   rows says so on the artwork, not only in a build warning the reader never
   sees. Drawn here rather than shared with .hero__ledger because that one is a
   floating card with a shadow and this one is flush in a reading column — the
   strip is the shared idea, not the shared box. */
.figure[data-provisional] {
  position: relative;
  padding-top: 26px;
}

.figure[data-provisional]::before {
  content: 'PREVIEW';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  line-height: 25px;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-partial);
  background: var(--color-partial-tint);
  border-bottom: 1px dashed var(--color-partial-data);
  padding: 0 14px;
}

/* The ledger table inside a figure is the home page's table in a narrower
   column: it keeps its own hairlines and chips, and scrolls inside the figure
   rather than pushing the reading column sideways on a phone. */
.figure .ledger {
  width: 100%;
}

.figure--coverage-strip {
  overflow-x: auto;
}

/* --- The In-angajuu box: how the article's claim shows up in the product --- */
.vignette {
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 24px;
}

.band .vignette__label {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.vignette__label + * {
  margin-top: 10px;
}

/* A pulled line, held by structure rather than by italics — the shipped
   faces have no real italic to depend on. */
.band .pullquote {
  border-left: 3px solid var(--color-brand);
  padding-left: 20px;
  font-size: 20px;
  line-height: 1.4;
  font-style: normal;
  color: var(--color-text);
}