/* ==========================================================================
   svenskstream.se — "Tablån"
   Implements references/design.md. Read that file before changing anything here.

   The design is grounded in the printed Swedish TV listings page: warm paper,
   a serif set for reading, oxblood section heads, tabular figures aligned hard
   right with a dotted leader running across the gutter.

   Three rules the whole sheet depends on:
     - No shadows. Depth is a 1px rule and a change of ground
     - No hover transforms. The ink changes, the paper does not move
     - One accent. --ox as a SOLID FIELD is reserved for .warn
   ========================================================================== */

:root {
  /* Palette — mirrors references/design.md, "Palette". Contrast measured there. */
  --paper: #F6F2EA;
  --paper-2: #FFFFFF;
  --ink: #1A1614;
  --ink-2: #5A524B;
  --rule: #DED5C6;
  --rule-soft: #EAE3D7;
  --well: #F0E9DC;
  --ox: #7A1B2E;
  --ox-deep: #5E1422;
  --ox-wash: #F3E4E5;

  /* Serif for anything read as a sentence, sans for anything scanned as data.
     Georgia sits far down the display stack on purpose: a sibling property is a
     Georgia site, and Iowan/Palatino are humanist where Georgia is sturdy. */
  --font-display: "Iowan Old Style", Constantia, "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", Georgia, serif;
  --font-body: "Iowan Old Style", Constantia, "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", Georgia, serif;
  --font-ui: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  --max: 1140px;
  --gutter: 24px;
  --radius: 2px;
  --header-h: 66px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.66;
  /* Tabular figures everywhere. On a listings page the numbers have to align. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--ox); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ox-deep); }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Visually hidden but read aloud. */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ox); color: var(--paper);
  padding: 12px 20px; font-family: var(--font-ui); font-weight: 600;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--ox); outline-offset: 2px; }
/* Oxblood drops to 2,6:1 against the ink ground, so the ring turns paper there. */
.topbar :focus-visible, footer :focus-visible, .mobile-panel :focus-visible { outline-color: var(--paper); }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--font-display); margin: 0 0 .5em; }

h1 {
  font-size: clamp(2.2rem, 5.4vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -.014em;
  line-height: 1.12;
  margin-bottom: .34em;
}

/* Signature: the masthead rule. A hairline runs from the end of the heading to
   the right edge of the column, vertically centred. See design.md, "Typography".
   Disabled on the small label headings in the TOC and footer. */
h2 {
  display: flex;
  align-items: center;
  gap: .7em;
  font-size: clamp(1.5rem, 2.7vw, 2rem);
  font-weight: 600;
  letter-spacing: -.008em;
  line-height: 1.22;
  margin: 2.1em 0 .7em;
}
h2::after {
  content: "";
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 1px;
  background: var(--rule);
}

h3 { font-size: 1.14rem; font-weight: 700; line-height: 1.34; margin-bottom: .4em; }

p { margin: 0 0 1.05em; }

/* Kickers, labels and anything scanned rather than read. */
.kicker {
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .17em;
  color: var(--ox);
}

.lead { font-size: 1.16rem; color: var(--ink-2); line-height: 1.6; }

strong, b { font-weight: 700; }

ul, ol { padding-left: 1.3em; margin: 0 0 1.05em; }
li { margin-bottom: .4em; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }

blockquote {
  margin: 1.6em 0;
  padding-left: 1.1em;
  border-left: 3px solid var(--ox);
  color: var(--ink-2);
  font-style: italic;
}

code {
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: .9em;
  background: var(--well);
  padding: .1em .35em;
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   Topbar
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: .78rem;
  letter-spacing: .01em;
}
.topbar .container {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; min-height: 36px; flex-wrap: wrap;
}
.topbar b { font-weight: 700; }
.topbar .hl { color: var(--paper); font-weight: 700; }
.topbar .sep { width: 1px; height: 12px; background: rgba(246, 242, 234, .34); }

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.nav {
  display: flex; align-items: center; gap: 26px;
  min-height: var(--header-h);
}

.brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand b { font-weight: 600; color: var(--ox); }
.brand .mark { color: var(--ox); flex: none; }

.desktop-nav { margin-left: auto; }
.desktop-nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
/* Load-bearing: without nowrap a long label wraps to a second line, which
   produces no horizontal overflow and still looks broken. With it, the same
   condition becomes overflow — which `npm run audit` does catch. */
.desktop-nav li { margin: 0; white-space: nowrap; }
.desktop-nav a {
  font-family: var(--font-ui);
  font-size: .92rem;
  color: var(--ink);
  text-decoration: none;
  display: flex; align-items: center;
  min-height: 44px;
  border-bottom: 2px solid transparent;
  transition: color 140ms, border-color 140ms;
}
.desktop-nav a:hover { color: var(--ox); border-bottom-color: var(--ox); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px;
  padding: 11px 22px;
  background: var(--ox);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: .94rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--ox);
  border-radius: var(--radius);
  transition: background-color 140ms, border-color 140ms;
  text-align: center;
}
.btn:hover { background: var(--ox-deep); border-color: var(--ox-deep); color: var(--paper); }

.btn-ghost { background: transparent; color: var(--ox); }
.btn-ghost:hover { background: var(--ox); color: var(--paper); }

.btn-sm { min-height: 44px; padding: 9px 16px; font-size: .88rem; }

/* --------------------------------------------------------------------------
   Mobile navigation — <details>, no JavaScript
   -------------------------------------------------------------------------- */
.mobile-nav { display: none; margin-left: auto; position: relative; }
.mobile-nav summary {
  list-style: none;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  cursor: pointer;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.bars, .bars::before, .bars::after {
  display: block; width: 20px; height: 2px; background: var(--ink);
  transition: transform 140ms, opacity 140ms;
}
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; }
.bars::after { top: 6px; }
.mobile-nav[open] .bars { background: transparent; }
.mobile-nav[open] .bars::before { transform: translateY(6px) rotate(45deg); }
.mobile-nav[open] .bars::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-panel {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: min(300px, calc(100vw - 2 * var(--gutter)));
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 10px 14px 16px;
  z-index: 50;
}
.mobile-panel ul { list-style: none; margin: 0 0 12px; padding: 0; }
.mobile-panel li { margin: 0; border-bottom: 1px solid rgba(246, 242, 234, .16); }
.mobile-panel a {
  display: flex; align-items: center;
  min-height: 46px;
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: .95rem;
  text-decoration: none;
}
.mobile-panel a:hover { color: var(--paper); text-decoration: underline; }
.mobile-panel .btn { width: 100%; background: var(--paper); color: var(--ink); border-color: var(--paper); }
.mobile-panel .btn:hover { background: var(--ox); color: var(--paper); border-color: var(--ox); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding: 62px 0 54px; border-bottom: 1px solid var(--rule); }
.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 418px;
  gap: 58px;
  align-items: start;
}
.hero h1 { margin-top: .18em; }
.hero .lead { max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-note {
  margin-top: 16px;
  font-family: var(--font-ui);
  font-size: .84rem;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   The ledger — the signature element
   Label left in serif, figure right in oxblood tabular sans, dotted leader
   stretching between them. See references/design.md, "The ledger".
   -------------------------------------------------------------------------- */
.ledger {
  background: var(--paper-2);
  border: 1px solid var(--ink);
  padding: 24px 24px 20px;
}
.ledger > .kicker { display: block; margin-bottom: 15px; }
.ledger-rows { margin: 0; border-top: 2px solid var(--ink); }

.ledger-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.ledger-row dt {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  flex: 0 1 auto;
}
.ledger-row dd {
  margin: 0;
  flex: none;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ox);
  white-space: nowrap;
}

/* The leader has to stretch to whatever width is left. If it ever collapses to
   zero the label and figure no longer fit one line — `npm run audit` checks for
   exactly that and fails on it. */
.leader {
  flex: 1 1 auto;
  min-width: 14px;
  border-bottom: 1px dotted var(--rule);
  align-self: flex-end;
  margin-bottom: .34em;
  transition: border-color 140ms;
}
.ledger-row:hover .leader { border-bottom-color: var(--ox); }

.ledger-foot {
  display: flex; align-items: baseline; gap: 10px;
  padding: 15px 0 4px;
  border-top: 2px solid var(--ink);
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
}
.ledger-foot-val {
  flex: none;
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--ox);
  white-space: nowrap;
}
.ledger-caption {
  margin: 14px 0 0;
  font-family: var(--font-ui);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */
.trust { border-bottom: 1px solid var(--rule); }
.trust .container {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.trust-item { padding: 26px 26px 24px; border-left: 1px solid var(--rule); }
.trust-item:first-child { border-left: 0; padding-left: 0; }
.trust-num {
  font-family: var(--font-ui);
  font-size: 1.62rem;
  font-weight: 700;
  color: var(--ox);
  line-height: 1.1;
  display: block;
}
.trust-label {
  display: block;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: .82rem;
  color: var(--ink-2);
  line-height: 1.42;
}

/* --------------------------------------------------------------------------
   Sections, grids, cards
   -------------------------------------------------------------------------- */
section { padding: 58px 0; }
section.tight { padding: 40px 0; }

.section-head { margin-bottom: 26px; max-width: 62ch; }
.section-head h2 { margin: .3em 0 .4em; }
.section-head p { color: var(--ink-2); margin: 0; }

.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
  display: block;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 140ms;
}
.card h3 { margin-bottom: .35em; transition: color 140ms; }
.card p { margin: 0 0 14px; font-size: .96rem; color: var(--ink-2); }
.card .leader {
  display: block;
  min-width: 0;
  margin: 0;
  border-bottom: 1px dotted var(--rule);
}
/* The ink changes, the paper does not move. No lift, no shadow. */
a.card:hover { border-color: var(--ox); }
a.card:hover h3 { color: var(--ox); }
a.card:hover .leader { border-bottom-color: var(--ox); }

/* --------------------------------------------------------------------------
   Photography — framed, never bled
   On a warm paper ground an unframed photo floats and the page stops reading as
   one system. Every photo sits inside a 1px ink rule, the same treatment the
   ledger and the cards get. No full-bleed heroes, no shadow, no overlay text.
   -------------------------------------------------------------------------- */
.shot { margin: 1.9em 0; }
.shot img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--well); /* holds the reserved box before the file lands */
}
.shot figcaption {
  margin-top: 9px;
  font-family: var(--font-ui);
  font-size: .76rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.shot figcaption a { color: var(--ink-2); }
.shot figcaption a:hover { color: var(--ox); }

/* --------------------------------------------------------------------------
   Answer box, warning box, inline CTA
   -------------------------------------------------------------------------- */
.answer {
  background: var(--well);
  border-left: 3px solid var(--ox);
  padding: 18px 22px;
  margin: 0 0 1.6em;
}
.answer .kicker { display: block; margin-bottom: 6px; }
.answer p { margin: 0 0 .7em; }
.answer p:last-child { margin-bottom: 0; }

/* The ONE place the accent becomes a solid field. Reserved for "this genuinely
   does not work". Using it for emphasis destroys the only thing it means.
   See references/design.md, "One accent, and no second one". */
.warn {
  background: var(--ox);
  color: var(--paper);
  padding: 18px 22px;
  margin: 1.6em 0;
  border-radius: var(--radius);
}
.warn .kicker { display: block; margin-bottom: 6px; color: var(--paper); opacity: .82; }
.warn p { margin: 0 0 .7em; }
.warn p:last-child { margin-bottom: 0; }
.warn a { color: var(--paper); text-decoration-thickness: 1px; }
.warn a:hover { color: var(--paper); }
.warn strong { font-weight: 700; }

.inline-cta {
  border-top: 1px solid var(--ox);
  border-bottom: 1px solid var(--ox);
  padding: 16px 0;
  margin: 1.9em 0;
  font-family: var(--font-ui);
  font-size: .95rem;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Steps — only for content that genuinely is a sequence
   -------------------------------------------------------------------------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 1.4em 0 1.8em; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 18px 52px;
  margin: 0;
  border-bottom: 1px solid var(--rule-soft);
}
.steps li:not(:first-child) { padding-top: 18px; }
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0;
  top: 0;
  font-family: var(--font-ui);
  font-size: .84rem;
  font-weight: 700;
  color: var(--ox);
  letter-spacing: .04em;
}
.steps li:not(:first-child)::before { top: 18px; }
.steps h3 { margin-bottom: .25em; }
.steps p { margin: 0; color: var(--ink-2); font-size: .98rem; }

/* --------------------------------------------------------------------------
   FAQ — <details>, no JavaScript
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule); margin: 0 0 1.6em; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 0;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  transition: color 140ms;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+";
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ox);
  flex: none;
  width: 1em;
  line-height: 1.5;
}
.faq details[open] summary::before { content: "\2212"; }
.faq summary:hover { color: var(--ox); }
.faq details > div { padding: 0 0 16px 26px; color: var(--ink-2); }
.faq details > div p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 1.6em 0; }
.plan {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px 20px 20px;
  display: flex; flex-direction: column;
}
.plan.popular { border: 2px solid var(--ox); }
.plan h3 { margin-bottom: .3em; }
.plan .price {
  font-family: var(--font-ui);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--ox);
  line-height: 1.1;
}
.plan .price span { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.plan .per { font-family: var(--font-ui); font-size: .82rem; color: var(--ink-2); margin: 6px 0 14px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 18px; flex: 1; }
.plan li {
  font-size: .92rem;
  color: var(--ink-2);
  padding: 7px 0;
  border-bottom: 1px solid var(--rule-soft);
  margin: 0;
}
.plan .btn { width: 100%; }

.tag {
  position: absolute; top: -1px; right: 14px;
  transform: translateY(-50%);
  background: var(--ox); color: var(--paper);
  font-family: var(--font-ui); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  padding: 4px 9px;
}
.tag-plain { background: var(--ink); }

/* The trial is a two-day one-off purchase, NOT the bottom rung of the ladder.
   As a fifth column it invited a per-month comparison against products sold by
   the month, and dropped every card below the width its feature lines need. */
.trial-band {
  display: flex; align-items: center; gap: 28px;
  background: var(--well);
  border-left: 4px solid var(--ox);
  padding: 24px 26px;
  margin: 1.8em 0;
}
.trial-copy { flex: 1; }
.trial-copy .kicker { display: block; margin-bottom: 5px; }
.trial-copy h3 { margin-bottom: .3em; }
.trial-copy p { margin: 0; font-size: .96rem; color: var(--ink-2); }
.trial-buy { flex: none; text-align: right; }
.trial-buy .price {
  font-family: var(--font-ui);
  font-size: 1.7rem; font-weight: 700; color: var(--ox);
  line-height: 1.1; margin-bottom: 12px;
}
.trial-buy .price span { font-size: .78rem; font-weight: 600; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.tbl { overflow-x: auto; margin: 1.5em 0; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-ui);
  font-size: .8rem;
  color: var(--ink-2);
  padding-bottom: 10px;
}
thead th {
  font-family: var(--font-ui);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-2);
  text-align: left;
  padding: 0 12px 9px 0;
  border-bottom: 2px solid var(--ink);
  vertical-align: bottom;
}
tbody th {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
tbody td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
  vertical-align: top;
}
tbody td.num, tbody td.price-cell {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
tbody td.price-cell { color: var(--ox); font-weight: 700; }

.plan-table tbody th { position: relative; padding-right: 18px; }
.plan-table .plan-name { display: block; font-size: 1.04rem; }
.plan-table .plan-term { display: block; font-family: var(--font-ui); font-size: .78rem; font-weight: 400; color: var(--ink-2); }
.plan-table .tag { position: static; transform: none; display: inline-block; margin-top: 6px; }
.plan-table tr.featured { background: var(--ox-wash); }
.plan-table td.buy { text-align: right; }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--well);
  border-top: 1px solid var(--ox);
  border-bottom: 1px solid var(--ox);
  padding: 44px 0;
  margin: 0;
}
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cta-band .kicker { display: block; margin-bottom: 6px; }
.cta-band h2 { margin: 0 0 .3em; }
.cta-band h2::after { display: none; }
.cta-band p { margin: 0; color: var(--ink-2); max-width: 52ch; }
.cta-band .btn { flex: none; }

/* --------------------------------------------------------------------------
   Breadcrumbs, chips
   -------------------------------------------------------------------------- */
.crumbs {
  font-family: var(--font-ui);
  font-size: .8rem;
  color: var(--ink-2);
  padding-top: 20px;
  padding-bottom: 4px;
}
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ox); text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 7px; color: var(--rule); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.3em 0; }
.chip {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 8px 15px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
  font-family: var(--font-ui);
  font-size: .88rem;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 140ms, color 140ms;
}
.chip:hover { border-color: var(--ox); color: var(--ox); }

/* --------------------------------------------------------------------------
   Article layout
   -------------------------------------------------------------------------- */
.article { padding: 8px 0 62px; }
.wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 256px;
  gap: 56px;
  align-items: start;
}

/* .col-main is a plain div, never a second <main>. One <main id="main"> per page
   is emitted by page(); nesting another removes the landmark the skip link needs. */
.col-main { min-width: 0; padding-top: 22px; }
/* A serif at 18px past roughly 70 characters is genuinely harder to read. */
.col-main > p, .col-main > ul, .col-main > ol { max-width: 68ch; }
.col-main > h2:first-of-type { margin-top: 1.4em; }

.meta {
  font-family: var(--font-ui);
  font-size: .8rem;
  color: var(--ink-2);
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}

.toc { position: sticky; top: calc(var(--header-h) + 22px); padding-top: 26px; font-family: var(--font-ui); }
/* These are top-level sections styled as small labels. Do not change them to h4
   or h5 to match their size — that is a heading-level skip. */
.toc h2 {
  display: block;
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--ink-2);
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ink);
}
.toc h2::after { display: none; }
.toc ul { list-style: none; padding: 0; margin: 0 0 30px; }
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: 7px 0;
  font-size: .87rem;
  line-height: 1.4;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
  transition: color 140ms;
}
.toc a:hover { color: var(--ox); }
.toc .related a { color: var(--ox); }

.related-block { background: var(--paper); border-top: 1px solid var(--rule); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer {
  background: var(--ink);
  color: var(--paper);
  padding: 52px 0 30px;
  margin-top: 0;
}
footer .brand { color: var(--paper); margin-bottom: 14px; }
footer .brand b { color: var(--paper); }
footer .brand .mark { color: var(--paper); }
.foot-blurb {
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(246, 242, 234, .74);
  max-width: 34ch;
}
.cols { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 34px; }
/* Small uppercase labels, but structurally top-level sections. See .toc h2. */
footer h2 {
  display: block;
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: rgba(246, 242, 234, .56);
  margin: 0 0 12px;
}
footer h2::after { display: none; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin: 0; }
footer .cols a {
  display: block;
  padding: 6px 0;
  font-family: var(--font-ui);
  font-size: .89rem;
  color: var(--paper);
  text-decoration: none;
}
footer .cols a:hover { color: var(--paper); text-decoration: underline; }
.legal {
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid rgba(246, 242, 234, .18);
  font-family: var(--font-ui);
  font-size: .78rem;
  line-height: 1.6;
  color: rgba(246, 242, 234, .6);
}
.legal a { color: rgba(246, 242, 234, .84); }

/* --------------------------------------------------------------------------
   Responsive — see references/design.md, "Breakpoints"
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .desktop-nav ul { gap: 17px; }
  .desktop-nav a { font-size: .88rem; }
  .nav { gap: 18px; }
}

@media (max-width: 1080px) {
  .hero .container { grid-template-columns: minmax(0, 1fr) 350px; gap: 40px; }
  .pricing { grid-template-columns: repeat(2, 1fr); }
  .cols { grid-template-columns: 1.4fr repeat(3, 1fr); row-gap: 30px; }
  .cols > div:first-child { grid-column: 1 / -1; }
  .foot-blurb { max-width: 60ch; }
}

/* The nav has its own breakpoint above the layout one: six labels plus the brand
   and the CTA need roughly 1000px, while the two-column layout is still
   comfortable down to 900. */
@media (max-width: 1000px) {
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
  .nav > .btn-sm { margin-left: auto; }
}

@media (max-width: 900px) {
  .hero { padding: 44px 0 40px; }
  .hero .container { grid-template-columns: 1fr; gap: 34px; }
  .wrap { grid-template-columns: 1fr; gap: 34px; }
  .toc { position: static; padding-top: 0; border-top: 1px solid var(--rule); padding-top: 26px; }
  .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
  .trust .container { grid-template-columns: repeat(2, 1fr); }
  .trust-item { padding: 20px 20px 18px; border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); }
  .trust-item:nth-child(-n+2) { border-top: 0; }
  .trust-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  section { padding: 44px 0; }
  .cta-band .container { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 700px) {
  .cols { grid-template-columns: repeat(2, 1fr); }
  .trial-band { flex-direction: column; align-items: flex-start; gap: 18px; }
  .trial-buy { text-align: left; }
  .trial-buy .btn { width: auto; }

  /* Stack table rows into cards and re-render each cell's heading from
     data-label, so a phone never drags a price table sideways and there is still
     only one copy of the table in the markup. A <td> without data-label loses its
     heading here — `npm run audit-a11y` fails the build on that. */
  .tbl { overflow-x: visible; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  tbody tr {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper-2);
    padding: 14px 16px;
    margin-bottom: 14px;
  }
  .plan-table tr.featured { background: var(--ox-wash); border-color: var(--ox); }
  tbody th { border-bottom: 1px solid var(--rule); padding: 0 0 10px; margin-bottom: 8px; }
  tbody td {
    display: flex; justify-content: space-between; gap: 16px;
    border-bottom: 1px solid var(--rule-soft);
    padding: 8px 0;
  }
  tbody td::before {
    content: attr(data-label);
    font-family: var(--font-ui);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-2);
    flex: none;
  }
  tbody td.buy { border-bottom: 0; padding-top: 14px; }
  tbody td.buy::before { content: none; }
  .plan-table td.buy { text-align: left; }
  .plan-table td.buy .btn { width: 100%; }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }
  body { font-size: 17px; }
  .g2, .g3, .g4, .pricing { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr; }
  .nav > .btn-sm { display: none; }
  .topbar .container { gap: 9px; font-size: .72rem; }
  .ledger { padding: 20px 18px 16px; }
  .ledger-row { padding: 9px 0; }
  .ledger-row dt, .ledger-row dd { font-size: .94rem; }
  h2 { gap: .5em; }
  h2::after { min-width: 1rem; }
  .steps li { padding-left: 42px; }
  .trust .container { grid-template-columns: 1fr; }
  .trust-item { border-left: 0; padding-left: 0; padding-right: 0; }
  .trust-item:first-child { border-top: 0; }
  .trust-item:nth-child(n+2) { border-top: 1px solid var(--rule); }
}

/* --------------------------------------------------------------------------
   Print — the site is a listings page, so it should print like one
   -------------------------------------------------------------------------- */
@media print {
  .topbar, .site-header, .cta-band, .toc, footer, .skip, .hero-actions { display: none; }
  body { background: #fff; font-size: 11pt; }
  .wrap { display: block; }
  a { text-decoration: none; color: #000; }
}

/* --------------------------------------------------------------------------
   Reduced motion — drop every transition, keep every state change
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}