/* Relocation Decision Pack.
 *
 * Identity-preserving: the tokens below are lifted from the site's styles.css
 * so the paid artifact reads as the same house as the free calculator. The
 * first version used Georgia on #f5f2e9 with a rust accent and matched nothing.
 *
 * The document is built as SHEETS. On screen each sheet is a page of paper on a
 * desk; in print each sheet is a physical page with a running header and a page
 * number. That structure is the difference between a web page and a report, and
 * it is most of why the first version did not feel like something you had paid
 * for.
 */

:root {
  color-scheme: light;

  /* Warm-paper editorial theme, OKLCH, neutrals tinted to 80deg. From styles.css. */
  --surface-page:   oklch(0.985 0.008 80);
  --surface-sheet:  oklch(0.995 0.004 80);
  --surface-raised: oklch(0.965 0.010 80);
  --surface-sunken: oklch(0.945 0.012 80);
  --ink-primary:    oklch(0.22 0.015 80);
  --ink-secondary:  oklch(0.42 0.012 80);
  --ink-tertiary:   oklch(0.58 0.010 80);
  --rule:           oklch(0.88 0.012 80);
  --rule-strong:    oklch(0.78 0.014 80);

  --accent:         oklch(0.45 0.08 200);
  --accent-soft:    oklch(0.93 0.04 200);
  --accent-ink:     oklch(0.32 0.08 200);

  /* Comparison by TEMPERATURE, never stoplight. PRODUCT.md is explicit: Oslo is
     not "red" because its gross is lower. Cool reads cheaper, warm reads
     costlier, and neither reads as good or bad. */
  --cool:           oklch(0.45 0.08 200);
  --cool-soft:      oklch(0.94 0.035 200);
  --warm:           oklch(0.52 0.11 45);
  --warm-soft:      oklch(0.95 0.035 45);
  --caution:        oklch(0.55 0.12 70);
  --caution-soft:   oklch(0.96 0.045 70);

  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Figures are first-class typography here, per PRODUCT.md. */
  --figures: 'Geist', ui-sans-serif, system-ui, sans-serif;

  --sheet-width: 46rem;
  --gutter: clamp(1.5rem, 5vw, 3.75rem);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink-primary);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- structure */

.pack { padding: clamp(1rem, 4vw, 3rem) 1rem 6rem; }

.sheet {
  width: min(var(--sheet-width), 100%);
  margin: 0 auto clamp(1rem, 3vw, 2rem);
  padding: var(--gutter);
  background: var(--surface-sheet);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: 0 1px 2px oklch(0.22 0.015 80 / 0.05), 0 8px 24px oklch(0.22 0.015 80 / 0.05);
}

.sheet--cover { padding-block: clamp(2.5rem, 7vw, 5rem); }

/* -------------------------------------------------------------- typography */

h1, h2, h3, .wordmark { font-family: var(--display); font-weight: 600; }
h1, h2, .cover-pair, .pair-sub { text-wrap: balance; }
p, li { text-wrap: pretty; }

h1 {
  font-size: clamp(2.1rem, 6vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0.2em 0 0.35em;
}

/* The cover leads on WHAT THIS IS, then which pair. The first version buried
   "Relocation Decision Pack" in 0.68rem caps in the masthead corner and made the
   city pair the title, so the artifact never announced itself. */
.cover-title {
  font-size: clamp(2.8rem, 9vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0.1em 0 0.15em;
}
.cover-pair {
  font-family: var(--display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--accent-ink);
  margin: 0 0 0.4rem;
}
.prepared {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin: 0 0 2rem;
}

h2 {
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule-strong);
}

h3 {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin: 2rem 0 0.75rem;
}

p { margin: 0 0 1rem; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.lede { font-size: 1.06rem; color: var(--ink-secondary); }
.fine { font-size: 0.82rem; color: var(--ink-tertiary); line-height: 1.5; }

/* The section number sits beside the rule rather than inside the heading text,
   so the headings themselves stay readable as a table of contents. */
.section-mark {
  display: block;
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

/* ------------------------------------------------------------------- cover */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 2.5rem;
  border-bottom: 2px solid var(--ink-primary);
}

.wordmark { font-size: 1.15rem; letter-spacing: -0.02em; }

.masthead-kind {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  text-align: right;
}

.pair-sub { font-size: 1.05rem; color: var(--ink-secondary); margin-bottom: 2rem; }

.sample-label {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  margin-bottom: 1.5rem;
  background: var(--caution-soft);
  border: 1px solid var(--caution);
  color: oklch(0.38 0.1 70);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* How to read it: numbered, not carded. */
.guide { margin: 0; padding: 0; counter-reset: guide; list-style: none; }
.guide li {
  counter-increment: guide;
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: 0.9rem;
  max-width: 62ch;
}
.guide li::before {
  content: counter(guide);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
}
.guide strong { font-weight: 600; }

/* Contents. Numbered where the report numbers itself, blank where it does not,
   so the numbers mean the same thing here as on the section headings. */
.contents {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1.6rem max-content 1fr;
  gap: 0;
}
.contents li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule);
}
.contents li:last-child { border-bottom: 0; }
.c-num { font-family: var(--display); font-weight: 600; color: var(--accent); }
.c-title { font-weight: 600; font-size: 0.95rem; }
.c-note { color: var(--ink-tertiary); font-size: 0.85rem; }
@media (max-width: 34rem) {
  .contents { grid-template-columns: 1.6rem 1fr; }
  .c-note { grid-column: 2; }
}

/* -------------------------------------------------------- scenario / inputs */

.scenario {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
}
.scenario div {
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.scenario dt {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: 0.2rem;
}
.scenario dd { margin: 0; font-size: 0.95rem; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- the headline */

.headline { margin: 0.5rem 0 1.5rem; }
.headline .figure {
  font-family: var(--display);
  font-size: clamp(2.6rem, 8vw, 3.9rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.headline .figure-note {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-secondary);
  max-width: 46ch;
}
.headline .figure-alt { color: var(--ink-tertiary); font-size: 0.85rem; margin: 0.25rem 0 0; }

/* ------------------------------------------------------------------ tables */

/* Wrapper, not the table, carries the scroll: a table that sets overflow on
   itself breaks its own sticky header and still clips in print. */
.table-wrap { margin: 0 0 1rem; }

/* Below 40rem the four-column comparison cannot fit, and letting it scroll
   clipped the DESTINATION column, the one the reader came for, while the
   invisible receipt text held rows open at double height. The receipt column is
   the one thing here that is reproduced in full elsewhere (the appendix lists
   every line's sources), so on a narrow screen it steps aside and the note
   below the table says where it went. Nothing is lost, and the table fits. */
@media (max-width: 40rem) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  td.receipt, thead th:last-child { display: none; }
  tbody th { white-space: normal; }
  table { font-size: 0.85rem; }
  thead th, tbody td { padding-inline: 0.35rem; }
}
.receipts-hint { display: none; }
@media (max-width: 40rem) { .receipts-hint { display: block; } }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

thead th {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  text-align: right;
  padding: 0 0.6rem 0.5rem;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
thead th:first-child { text-align: left; padding-left: 0; }

tbody th {
  font-weight: 400;
  text-align: left;
  padding: 0.55rem 0.6rem 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}
tbody td {
  text-align: right;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

tbody tr.is-total th, tbody tr.is-total td {
  border-top: 2px solid var(--ink-primary);
  border-bottom: 0;
  padding-top: 0.7rem;
  font-weight: 600;
}

/* The receipt column is prose in a numbers table, so it gets a smaller,
   quieter treatment and is allowed to wrap. */
td.receipt {
  text-align: left;
  white-space: normal;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--ink-tertiary);
  max-width: 17rem;
}

/* --------------------------------------------------------------- the deltas */

.deltas { list-style: none; margin: 0; padding: 0; }
/* The value track is `auto` and the BAR is the flexible one. With the value on
   a minmax(6rem, auto) track it grew past its column and pushed the whole row
   off the right edge in print, cutting "NOK 252,756 less" in half. min-width:0
   on the bar is what lets the row shrink instead of overflowing. */
.deltas li {
  display: grid;
  grid-template-columns: minmax(5rem, 10rem) minmax(1.5rem, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.deltas li:last-child { border-bottom: 0; }
.delta-label { font-size: 0.92rem; }
.delta-bar { height: 0.5rem; background: var(--surface-sunken); position: relative; min-width: 0; }
.delta-bar i { position: absolute; inset-block: 0; left: 0; display: block; }
.delta-bar.is-cool i { background: var(--cool); }
.delta-bar.is-warm i { background: var(--warm); }
.delta-value { text-align: right; font-size: 0.88rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta-value.is-cool { color: var(--cool); }
.delta-value.is-warm { color: var(--warm); }

/* ---------------------------------------------------------------- non-cash */

.noncash {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.25rem 1.5rem;
  margin: 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--rule);
}
.noncash div { margin: 0; }
.noncash dt {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-tertiary); margin-bottom: 0.3rem;
}
.noncash dd {
  margin: 0; font-family: var(--display); font-size: 1.5rem; font-weight: 600;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.noncash .versus { font-size: 0.8rem; color: var(--ink-tertiary); font-family: var(--body); font-weight: 400; }

/* ------------------------------------------------------------- availability */

.availability {
  padding: 0.9rem 1.1rem;
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  margin: 0 0 1rem;
}
.availability strong {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.availability p { margin: 0; font-size: 0.9rem; }
.availability.check { background: var(--cool-soft); border-color: var(--cool); }
.availability.check strong { color: var(--accent-ink); }
.availability.caution { background: var(--caution-soft); border-color: var(--caution); }
.availability.caution strong { color: oklch(0.38 0.1 70); }
.availability.unavailable { background: var(--surface-sunken); }
.availability.unavailable strong { color: var(--ink-secondary); }

/* ------------------------------------------------------------------- lists */

.rows { list-style: none; margin: 0; padding: 0; }
.rows > li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.92rem;
}
.rows > li:last-child { border-bottom: 0; }
.rows strong { font-weight: 600; }
.rows .note { display: block; color: var(--ink-tertiary); font-size: 0.83rem; margin-top: 0.15rem; }

.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.4rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.88rem;
}
.checks li:last-child { border-bottom: 0; }
.checks li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.95em;
  width: 0.5rem; height: 0.5rem;
  background: var(--caution);
}
.checks li.is-clear::before { background: var(--cool); }

/* ---------------------------------------------------------------- appendix */

/* Source strings contain raw URLs, and an unbroken URL has a min-content width
   the size of the URL. That, not the tables, is what pushed the whole page into
   horizontal scroll at 390px: the appendix alone accounted for all 214px of it.
   `anywhere` rather than `break-word` because only `anywhere` lets the
   container's min-content size shrink, which is the half that fixes layout. */
.receipts, td.receipt, .rows .note, .checks li { overflow-wrap: anywhere; }

.receipts { list-style: none; margin: 0; padding: 0; font-size: 0.84rem; }
.receipts > li { padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
.receipts > li:last-child { border-bottom: 0; }
.receipts .who { font-weight: 600; }
.receipts ul { margin: 0.4rem 0 0; padding-left: 1.1rem; color: var(--ink-tertiary); font-size: 0.8rem; }
.receipts ul li { margin-bottom: 0.2rem; }

/* ------------------------------------------------------- scenario controls */

/* The report's own calculator: a plain GET form, screen only. Labels take the
   .scenario dt treatment so the form reads as part of the cover, and inputs
   opt back out of the label's uppercase (text-transform inherits). */
.controls { margin-top: 0.5rem; }
.controls fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.controls fieldset:disabled { opacity: 0.55; }
.ctl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.9rem 1.25rem;
  margin: 0.75rem 0;
}
.ctl-grid label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.ctl-grid input, .ctl-grid select {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  font-family: var(--body);
  font-size: 0.9rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-primary);
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--surface-page);
}
.ctl-grid input:focus-visible, .ctl-grid select:focus-visible,
.ctl-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ctl-more { margin: 0.5rem 0 0; border-top: 1px solid var(--rule); padding-top: 0.75rem; }
.ctl-more summary { cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--accent-ink); }
.ctl-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--ink-secondary);
}
.ctl-check input { margin-top: 0.2rem; accent-color: var(--accent); }
.ctl-actions { margin-top: 1rem; }

/* -------------------------------------------------------------------- misc */

.actions { margin-top: 2rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }

button {
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--ink-primary);
  background: var(--ink-primary);
  color: var(--surface-sheet);
  border-radius: 2px;
  cursor: pointer;
}
button:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.colophon {
  width: min(var(--sheet-width), 100%);
  margin: 0 auto;
  padding: 0 var(--gutter);
  font-size: 0.78rem;
  color: var(--ink-tertiary);
}
.colophon a { color: var(--accent-ink); }

/* =============================================================== print ==== */

@page {
  size: letter;
  margin: 14mm 15mm 16mm;
}

@media print {
  :root { --gutter: 0; }

  body { background: #fff; font-size: 10.5pt; line-height: 1.45; }

  .pack { padding: 0; }

  /* Each sheet becomes a physical page. The last one must not emit a trailing
     blank page, which is the classic break-after mistake. */
  .sheet {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    break-after: page;
  }
  .sheet:last-of-type { break-after: auto; }

  h1 { font-size: 26pt; }
  h2 { font-size: 14pt; }
  h3 { font-size: 8pt; margin-top: 14pt; }
  p, table, .rows > li, .deltas li { font-size: 10pt; }
  td.receipt, .fine, .receipts { font-size: 8pt; }
  .headline .figure { font-size: 30pt; }
  .cover-title { font-size: 34pt; }
  .cover-pair { font-size: 16pt; }
  .noncash dd { font-size: 15pt; }

  /* Rows and headings must not be orphaned across a page break. */
  tr, .deltas li, .rows > li, .checks li, .receipts > li { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  table { break-inside: auto; }
  thead { display: table-header-group; }

  .table-wrap { overflow: visible; }

  /* Screen-only chrome. The scenario controls and the line pointing at them
     are interactive surface; on paper the scenario dl above them is the
     record of what this render used. */
  .actions, .colophon, .controls-block, .controls-note { display: none; }

  .sample-label, .availability, .delta-bar i, .masthead { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

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

/* Running foot: one per sheet, print only. @page margin boxes are the textbook
   answer and are unevenly supported across engines. */
.sheet-foot { display: none; }
@media print {
  .sheet-foot {
    display: block;
    margin-top: 1.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--rule);
    font-size: 7.5pt;
    color: var(--ink-tertiary);
  }
}

/* Sales-page masthead: wordmark left, a small mirror of the site's skyline right.
   The PNG ships with a cream rectangle slightly darker than the page, so the
   site's own trick applies here too: brightness lifts the cream above the sheet
   colour and `darken` then picks the lighter sheet wherever they differ, so the
   rectangle disappears and only the linework survives. */
.masthead-art {
  width: clamp(88px, 18vw, 150px);
  height: auto;
  filter: brightness(1.04);
  mix-blend-mode: darken;
  align-self: center;
  flex-shrink: 0;
}
a.wordmark { text-decoration: none; color: inherit; }
a.wordmark:hover { color: var(--accent-ink); }
.actions a { text-decoration: none; }
@media print { .masthead-art { display: none; } }

/* ============================================== sales page (/pack/) ==== */
/*
 * The sales page is the same house as the report: same tokens, same sheets,
 * same typography. It only adds what a report has no use for, which is calls
 * to action, an FAQ, and a signup row. Everything here is namespaced under
 * .pack-page or a class the report never emits, so the rendered report cannot
 * pick up a sales style by accident.
 *
 * PRE-LAUNCH LABEL SWAP. Every CTA on the sales page ships both labels and the
 * body class picks one. `<body class="pack-page prelaunch">` shows "Tell me
 * when it opens"; dropping `prelaunch` shows "Get your Decision Pack". That is
 * the whole switch, so enabling checkout does not mean hunting down six button
 * labels and missing one.
 */

.prelaunch .lbl-live { display: none; }
body:not(.prelaunch) .lbl-pre { display: none; }

/* Long words and pasted-in figures must never widen the sheet. The report
   solves this for its own long strings (see .receipts above); the sales page
   carries prose in more places, so it gets the same treatment. */
.pack-page p, .pack-page li, .pack-page dd, .pack-page dt { overflow-wrap: break-word; }
/* ISO dates break at their hyphens like any other text, which reads as a typo.
   Short enough to hold together at every width we support. */
.nowrap { white-space: nowrap; }

.eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}

/* Sheet variants give a long page some rhythm, so it does not read as one card
   pattern repeated nine times. */
.sheet--tint { background: var(--surface-raised); }
.sheet--quiet { background: transparent; box-shadow: none; border-style: dashed; }
.sheet--quiet h3 { margin-top: 0; }
.sheet--get { border-color: var(--rule-strong); border-top-width: 3px; }

/* ------------------------------------------------------------------- CTAs */

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; }

.cta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  max-width: 100%;
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--ink-primary);
  border-radius: 2px;
  background: var(--ink-primary);
  color: var(--surface-sheet);
  text-decoration: none;
}
.cta:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--surface-sheet); }
.cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cta-price { font-weight: 400; opacity: 0.75; }

.cta--ghost { background: transparent; color: var(--ink-primary); }
.cta--ghost:hover { background: var(--surface-raised); color: var(--accent-ink); border-color: var(--accent-ink); }
.cta--accent { background: var(--accent); border-color: var(--accent); }
.cta--wide { flex: 1 1 14rem; padding-block: 0.85rem; font-size: 0.95rem; }
.cta--link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cta--link:hover { background: none; color: var(--accent); }

.cta-note { margin-top: 0.85rem; }

/* Mid-page CTA: rules above and below, no box. Deliberately the quietest of the
   three treatments, because it interrupts a reading passage. */
.rule-cta {
  margin: 2rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--rule-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.rule-cta p { margin: 0; font-size: 0.9rem; color: var(--ink-secondary); max-width: 34ch; }

/* The loud one. Bleeds to the sheet edge so it reads as a break in the page
   rather than another card. */
.panel-cta {
  margin: 2rem calc(var(--gutter) * -1) calc(var(--gutter) * -1);
  padding: 1.5rem var(--gutter);
  background: var(--accent-soft);
  border-top: 1px solid var(--accent);
}
.panel-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.panel-lead { margin: 0; font-size: 1rem; color: var(--ink-primary); max-width: 46ch; }
.panel-cta .cta-row { margin-top: 1.1rem; }
/* On the tinted panel the ghost button needs the sheet colour behind it, or the
   outline floats on the accent wash and reads as disabled. */
.panel-cta .cta--ghost { background: var(--surface-sheet); border-color: var(--accent-ink); color: var(--accent-ink); }
.panel-cta .cta--ghost:hover { background: var(--surface-page); }

/* -------------------------------------------------------- comparison table */

/* The report's table rules hide the last header cell and hold every cell on one
   line below 40rem, both of which are right for a four-column receipts table
   and wrong for a two-option comparison where the last column is the product.
   Opt out by name rather than loosening the shared rule. */
.compare tbody td { white-space: normal; text-align: left; }
.compare thead th { text-align: left; white-space: normal; }
.compare thead th:last-child { color: var(--accent-ink); }
@media (max-width: 40rem) {
  .compare thead th:last-child { display: table-cell; }
  .compare { font-size: 0.8rem; }
}

/* ---------------------------------------------------------------- the FAQ */

.qa { margin: 0; }
.qa dt {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 1.5rem 0 0.4rem;
}
.qa dt:first-child { margin-top: 0; }
.qa dd { margin: 0; color: var(--ink-secondary); font-size: 0.94rem; max-width: 68ch; }
.qa dd a, .pack-page p a, .pack-page li a { color: var(--accent-ink); }

/* ------------------------------------------------------------ signup row */

/* No display property anywhere in this block. The section and the status line
   both ship with the `hidden` attribute and are revealed by email-capture.js;
   a display rule here would win over [hidden] and show an unwired form. */
.pack-page .email-capture { margin-top: 1.25rem; }
.notify-lead { font-size: 0.95rem; color: var(--ink-secondary); }
.notify-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.notify-row input[type='email'] {
  flex: 1 1 12rem;
  min-width: 0;
  font-family: var(--body);
  font-size: 0.9rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--surface-page);
  color: var(--ink-primary);
}
.notify-row input[type='email']:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.notify-row button { padding-block: 0.65rem; }
.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--ink-tertiary);
  line-height: 1.45;
}
.consent input { margin-top: 0.2rem; accent-color: var(--accent); }
.ec-status { font-size: 0.9rem; color: var(--accent-ink); font-weight: 500; }
.sheet--get > .fine { margin-top: 1.4rem; }

/* "NOK 1,130,390" carries a no-break space, matching the report, so the currency
   code cannot be orphaned on its own line. That makes the string unbreakable, and
   at the 2.6rem floor it is wider than a 360px sheet. Drop the floor on the
   narrowest phones only; 390px and up keeps the full size. */
@media (max-width: 24rem) {
  .pack-page .headline .figure { font-size: 2.1rem; }
}

/* A sales page is not a document you print, but nothing should look broken if
   somebody does. */
@media print {
  .cta-row, .rule-cta, .panel-cta, .email-capture, .cta { display: none; }
}