/* ─────────────────────────────────────────────────────────────────────────────
   testa-iptv.se

   The look is SKRN (Progression Studios), the streaming template the operator
   selected. The look was taken whole; the implementation was not. The reference
   is Bootstrap 4 + jQuery + FlexSlider + Font Awesome + Iconsmind — roughly
   500 KB of JavaScript and two icon fonts before a single page of content. This
   file is what ships instead.

   references/design.md governs this file. If the two disagree, the doc is wrong
   — update it to match reality.

   ── The measurement that decided the palette ────────────────────────────────

   The template's green is #3db13d, and it is used there as a button fill with
   white type on it (.btn-green-pro sets `color:#ffffff; background:#3db13d`)
   and as the colour of every tick in every feature list.

     #3DB13D on white  → 2,78:1
     white on #3DB13D  → 2,78:1

   Both fail WCAG AA, and both fail SILENTLY: the page looks exactly as designed
   and a reader with daylight on the screen loses the label off the primary
   button. So the green is kept VERBATIM for the jobs it can do — fills behind
   large bold type, the rule under a heading, the tick marks (which are shapes,
   not text), the glow under the primary button, the mark in the wordmark — and
   two measured siblings do the jobs it cannot.

   A tick mark is a shape and may be --leaf. The word beside it is text and is
   --ink. That distinction is the whole rule, and it is the one an editor is most
   likely to collapse.

   Every ratio below is measured, not assumed.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* The reference's green */
  --leaf:       #3DB13D;   /* hue 120° — decorative only, 2,78:1 on white */
  --leaf-ink:   #1F7A2E;   /* 5,41:1 on white — white type on it, links */
  --leaf-deep:  #175F24;   /* 7,78:1 on white — hover, type on the wash */
  --leaf-lift:  #7ED47E;   /* 8,36:1 on --night — green on the dark band */
  --leaf-wash:  #EDF7ED;
  --leaf-veil:  rgba(61, 177, 61, .18);

  /* Ink — the template's own greys, all measured */
  --ink:        #333333;   /* headings — 12,63:1 on white */
  --ink-2:      #555555;   /* body — 7,45:1 on white */
  --ink-3:      #666666;   /* muted — 5,74:1 on white */
  --rule:       #262626;   /* the 40×5 pill under a heading (decorative) */
  --night:      #232323;   /* the invert band — white on it is 15,71:1 */
  --night-2:    #1A1A1A;
  --line:       #E7E7E7;
  --line-soft:  rgba(0, 0, 0, .07);
  --wash:       #FAFAFA;
  --paper:      #FFFFFF;

  --display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --r-card: 10px;
  --r-btn: 4px;
  --r-pill: 10px;

  --shadow-head: 0 0 10px rgba(0, 0, 0, .06);
  --shadow-lift: 0 26px 30px rgba(0, 0, 0, .09);
  --shadow-glow: 0 12px 28px rgba(31, 122, 46, .32);

  --wrap: 1170px;   /* Bootstrap's own .container at xl, kept */
  --gut: 24px;
}

/* Both faces are served from this origin. The reference links them from
   fonts.googleapis.com; /vem-skriver-det-har/ and llms.txt both state that the
   chat is the only outside request this site makes, and a Google Fonts link
   would make those sentences false. See scripts/shell.js, "Third-party
   scripts". */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/montserrat-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/montserrat-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/lato-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/lato-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.8;          /* the template's own, and most of why it reads calm */
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--leaf-ink); text-decoration: none; }
a:hover { color: var(--leaf-deep); text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--leaf-ink);
  outline-offset: 2px;
  border-radius: 2px;
}

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--leaf-ink); color: #fff;
  padding: 12px 18px; font-family: var(--display); font-size: 13px;
}
.skip:focus { left: 0; text-decoration: none; }

/* ── Typography ────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 .6rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}
h1 { font-size: 44px; line-height: 1.15; letter-spacing: -.02em; }
h2 { font-size: 30px; }
h3 { font-size: 19px; }
h4 { font-size: 16px; }

p { margin: 0 0 1.1rem; }

.lede { font-size: 18px; line-height: 1.7; color: var(--ink-2); }

.kicker {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--leaf-deep);
  margin-bottom: 12px;
}

strong, b { font-weight: 700; color: var(--ink); }
em { font-style: italic; }
code, kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
}

/* The template's signature: a 40×5px rounded bar 30px under a section heading.
   It is load-bearing — the 30px of padding goes with it, and removing the rule
   collapses the whole vertical rhythm. */
.section-head h2,
.article .col-main > h2 {
  position: relative;
  padding-bottom: 30px;
  margin-bottom: 26px;
}
.section-head h2::after,
.article .col-main > h2::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  display: block;
  width: 40px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--rule);
}
.section-head.mid h2::after { left: 50%; margin-left: -20px; }
.section.invert .section-head h2::after { background: var(--leaf); }

/* ── Buttons ───────────────────────────────────────────────────────────────── */

/* The template's .btn is 13px Montserrat 400 with 12px/20px padding, which comes
   out around 37px tall — under the 44px tap target `npm run audit` asserts. The
   padding is kept for the look and `min-height` guarantees the target. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: #F9F9F9;
  /* The reference sets this to #666666, which measures 5,45:1 on #F9F9F9 and
     therefore passes AA. It still reads as a *disabled* control next to the
     green primary — and on this site the quiet button is often the order link,
     so "looks disabled" is the expensive failure. --ink at 12,2:1 keeps the
     template's shape and restores the affordance. */
  color: var(--ink);
  cursor: pointer;
  transition: background .25s ease-in-out, color .25s ease-in-out,
              border-color .25s ease-in-out, box-shadow .25s ease-in-out;
}
.btn:hover {
  background: var(--leaf-ink);
  border-color: var(--leaf-ink);
  color: #fff;
  text-decoration: none;
}
.btn-primary {
  background: var(--leaf-ink);
  border-color: var(--leaf-ink);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover { background: var(--leaf-deep); border-color: var(--leaf-deep); }
.btn-ghost { background: transparent; }
.btn-light {
  background: #fff;
  border-color: #fff;
  color: var(--leaf-deep);
  box-shadow: none;
}
.btn-light:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: 12px; }
.btn-lg { padding: 16px 30px; font-size: 15px; }

/* ── Ticker ────────────────────────────────────────────────────────────────── */

.ticker {
  background: var(--night);
  color: rgba(255, 255, 255, .72);
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .02em;
}
.ticker .container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: center;
  padding-top: 9px;
  padding-bottom: 9px;
}
.ticker b { color: #fff; font-weight: 600; }
.ticker .hl { color: var(--leaf-lift); margin-left: auto; font-weight: 600; }

/* ── Masthead ──────────────────────────────────────────────────────────────── */

.masthead {
  position: relative;
  z-index: 50;
  background: var(--paper);
  box-shadow: var(--shadow-head);
  border-bottom: 1px solid var(--line-soft);
}
.masthead .nav {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand b { font-weight: 700; }
.brand .mark { color: var(--leaf); flex: none; }

.desktop-nav { display: none; margin-left: auto; }
.desktop-nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
/* nowrap converts a wrapped nav label — which produces no horizontal overflow
   and still looks broken — into overflow, which `npm run audit` does catch. */
.desktop-nav li { white-space: nowrap; }
.desktop-nav a {
  display: block;
  position: relative;
  font-family: var(--display);
  font-size: 13px;
  line-height: 1;
  color: #272727;
  padding: 30px 16px;
}
.desktop-nav a:hover { color: #272727; text-decoration: none; }
/* The template's underline: a 2px rounded bar inset 20px from each edge that
   fades in rather than sliding. */
.desktop-nav a::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  margin-top: 11px;
  height: 2px;
  width: calc(100% - 32px);
  border-radius: 6px;
  background: var(--leaf);
  opacity: 0;
  transition: opacity .25s ease-in-out;
}
.desktop-nav a:hover::before { opacity: 1; }

.masthead .btn-sm { margin-left: auto; }

/* Mobile menu is a <details>: no JavaScript, keyboard-accessible for free, and
   the links stay in the HTML source for crawlers. */
.mobile-nav { margin-left: 4px; }
.mobile-nav summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  cursor: pointer;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.bars, .bars::before, .bars::after {
  display: block; width: 20px; height: 2px;
  background: var(--ink); border-radius: 2px;
}
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; }
.bars::after { top: 6px; }
.mobile-nav[open] summary { background: var(--wash); }

.mobile-panel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 18px 30px rgba(0, 0, 0, .10);
  padding: 8px var(--gut) 22px;
  max-height: 74vh;
  overflow-y: auto;
}
.mobile-panel ul { list-style: none; margin: 0 0 14px; padding: 0; }
.mobile-panel a {
  display: block;
  font-family: var(--display);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
}
.mobile-panel a:hover { color: var(--leaf-deep); text-decoration: none; }
.mobile-panel .btn { width: 100%; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.hero { padding: 62px 0 54px; background: var(--paper); }
.hero.tall { padding: 84px 0 70px; }
.hero-grid { display: grid; gap: 40px; }
.hero-copy h1 { margin-bottom: 18px; }
.hero-copy .lede { max-width: 60ch; margin-bottom: 26px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--ink-3);
  max-width: 56ch;
}

/* The right-hand column is a spec card, not a photograph. On this domain the
   facts ARE the argument. Never set align:'right' without filling this half —
   in the reference template a hero image fills it, so an empty column reads as
   a banner that failed to load. */
.hero-card {
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 30px 28px;
  align-self: start;
}
.hero-card h2 {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--leaf-deep);
  margin-bottom: 18px;
}
.hero-card dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 11px 16px; }
.hero-card dt { font-size: 13.5px; color: var(--ink-3); }
.hero-card dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  text-align: right;
}

/* ── Sections ──────────────────────────────────────────────────────────────── */

.section { padding: 62px 0; background: var(--paper); }
.section.odd { background: var(--wash); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section.invert { background: var(--night); color: rgba(255, 255, 255, .78); }
.section.invert h2, .section.invert h3 { color: #fff; }
.section.invert .kicker { color: var(--leaf-lift); }
.section.invert a { color: var(--leaf-lift); }
.section.invert .card {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .14);
}
.section.invert .card p { color: rgba(255, 255, 255, .74); }

.section-head { max-width: 68ch; margin-bottom: 34px; }
.section-head.mid { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-bottom: 0; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: 1fr; }
.g3 { grid-template-columns: 1fr; }
.g4 { grid-template-columns: 1fr; }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px 26px;
}
.section.odd .card { background: var(--paper); }
.card h3 { margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }
.num-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--leaf-wash);
  color: var(--leaf-deep);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 14px;
}
.section.invert .num-mark { background: rgba(61, 177, 61, .22); color: var(--leaf-lift); }

/* ── Figures strip ─────────────────────────────────────────────────────────── */

.figures {
  background: var(--night);
  padding: 44px 0;
}
.figures .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 20px;
  text-align: center;
}
.figures .num {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  color: #fff;
}
.figures .lbl {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .68);
}

/* ── Checkmark list ────────────────────────────────────────────────────────── */

/* The reference draws this with Font Awesome's `content:"\f00c"` and a 90 KB
   font file. It is a nine-point path.

   THE TICK IS A SHAPE AND IS --leaf. THE LABEL IS TEXT AND IS --ink.
   #3DB13D is 2,78:1 on white and cannot carry type. */
.checks { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.checks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 6px;
  font-family: var(--display);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
}
.checks svg { position: absolute; left: 0; top: .34em; color: var(--leaf); }
.section.invert .checks li { color: rgba(255, 255, 255, .88); }
.section.invert .checks svg { color: var(--leaf-lift); }

/* ── Tables ────────────────────────────────────────────────────────────────── */

.scroller { overflow-x: auto; margin: 0 0 1.4rem; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
}
table.data caption {
  caption-side: bottom;
  text-align: left;
  padding-top: 10px;
  font-size: 13px;
  color: var(--ink-3);
}
table.data th, table.data td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data th {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data .r { text-align: right; }

/* ── The window grid ───────────────────────────────────────────────────────── */

/* The one piece of arithmetic this domain does in public. The counts are
   computed in shell.js and re-derived independently by `npm run verify` check 9.

   THE COUNTS STAY REAL TEXT IN REAL CELLS. They are the loudest numbers on the
   page and the easiest thing to "tidy" into a CSS counter, at which point the
   arithmetic disappears for a screen reader and for a crawler and the page looks
   identical. `npm run audit-a11y` check 6 catches it. */
.window-grid td:first-child { font-family: var(--display); font-weight: 600; color: var(--ink); white-space: nowrap; }
.window-grid .w { white-space: nowrap; color: var(--ink-3); }
.window-grid .p {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  text-align: center;
}
.window-grid th.p { font-size: 11.5px; text-align: center; }
.window-grid .wk { color: var(--leaf-deep); }
/* A zero is a value, not an absence — Söndag 20.00 covers no evening peak at
   all, and that is the most important row in the table. Inverted rather than
   coloured: the palette has no warning hue and inventing one for a single cell
   would put an undeclared colour on the site.

   The chip wraps the digit rather than filling the cell. Filling it drew the eye
   to the right row and read as a rendering fault. */
.window-grid td.zero b {
  display: inline-block;
  min-width: 2.1em;
  padding: 3px 0 4px;
  background: var(--night);
  color: #fff;
  border-radius: 4px;
  font-weight: 700;
}
.grid-note {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-3);
  margin: -.6rem 0 1.6rem;
}

/* ── The protocol table ────────────────────────────────────────────────────── */

.protocol td.n {
  font-family: var(--display);
  font-weight: 700;
  color: var(--leaf-deep);
  width: 34px;
}
.protocol th.n { width: 34px; }
.protocol .pass { font-family: var(--display); font-weight: 600; color: var(--ink); }
.protocol .win { color: var(--ink-3); font-size: 13px; }
.protocol { min-width: 720px; }

/* ── Answer box, notes, inline CTA ─────────────────────────────────────────── */

.answer {
  background: var(--leaf-wash);
  border-left: 4px solid var(--leaf);
  border-radius: var(--r-card);
  padding: 22px 24px;
  margin: 0 0 1.8rem;
}
.answer .kicker { margin-bottom: 6px; color: var(--leaf-deep); }
.answer p:last-child { margin-bottom: 0; }

.note {
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-3);
  border-radius: var(--r-card);
  background: var(--wash);
  padding: 20px 22px;
  margin: 0 0 1.6rem;
  font-size: 14.5px;
}
.note.warn { border-left-color: var(--rule); background: #fff; }
.note p:last-child { margin-bottom: 0; }

/* The sentence every page comparing providers must carry: we sell one of the
   things the reader would be testing. `npm run verify` check 13 enforces it. */
.bias-note {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-3);
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin: 1.6rem 0;
}

.inline-cta {
  background: var(--night);
  color: rgba(255, 255, 255, .82);
  border-radius: var(--r-card);
  padding: 24px 26px;
  margin: 0 0 1.7rem;
  font-size: 14.5px;
}
.inline-cta a { color: var(--leaf-lift); }
.inline-cta p:last-child { margin-bottom: 0; }

/* ── Steps ─────────────────────────────────────────────────────────────────── */

.steps { list-style: none; counter-reset: s; margin: 0 0 1.6rem; padding: 0; }
.steps li {
  counter-increment: s;
  position: relative;
  padding: 0 0 20px 52px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.steps li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.steps li::before {
  content: counter(s);
  position: absolute;
  left: 0; top: 0;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--leaf-wash);
  color: var(--leaf-deep);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
}
.steps strong { display: block; font-family: var(--display); color: var(--ink); margin-bottom: 3px; }

/* ── Price ladder ──────────────────────────────────────────────────────────── */

.ladder { display: grid; gap: 22px; }
.tier {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 34px 26px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.tier h3 { font-size: 17px; margin-bottom: 12px; }
.tier .price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
  color: var(--ink);
}
.tier .price span { font-size: 18px; font-weight: 400; color: var(--ink-3); }
.tier .per { font-size: 13px; color: var(--ink-3); margin: 8px 0 18px; }
.tier .checks { flex: 1 0 auto; }
.tier .btn { width: 100%; margin-top: 14px; }
.tier-label {
  position: absolute;
  top: -11px; left: 26px;
  background: var(--leaf);
  color: var(--night-2);          /* 7,55:1 — the green cannot carry white type */
  font-family: var(--display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 20px;
  /* The label is absolutely positioned on the tier's top edge, so a second line
     grows *down* into the h3 beneath it. "Vanligaste valet" wrapped at five
     columns and overlapped the heading. Keep every label to one line — if a new
     one does not fit at 1200px, shorten the label rather than removing this. */
  white-space: nowrap;
}
.tier-label-plain { background: var(--ink); color: #fff; }
/* The reference's .pricing-table-col-shadow-pro. The other four tiers keep a
   1px border so nothing shifts by a pixel between them. */
.tier-pick { box-shadow: var(--shadow-lift); border-color: rgba(0, 0, 0, .05); }

/* ── FAQ ───────────────────────────────────────────────────────────────────── */

.queries { border-top: 1px solid var(--line); margin-bottom: 1.6rem; }
.queries details { border-bottom: 1px solid var(--line); }
.queries summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 34px 17px 0;
  position: relative;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.queries summary::-webkit-details-marker { display: none; }
.queries summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--leaf-ink);
  border-bottom: 2px solid var(--leaf-ink);
  transform: rotate(45deg);
  transition: transform .2s ease-in-out;
}
.queries details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.queries details > div { padding: 0 0 18px; }
.queries details > div p:last-child { margin-bottom: 0; }

/* ── Showcase ──────────────────────────────────────────────────────────────── */

.showcase { display: grid; gap: 24px; }
.show-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  color: inherit;
  transition: box-shadow .25s ease-in-out, transform .25s ease-in-out;
}
.show-card:hover { box-shadow: var(--shadow-lift); text-decoration: none; transform: translateY(-2px); }
.show-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.show-card .cap { padding: 22px 22px 24px; }
.show-card h3 { font-size: 17px; margin-bottom: 8px; }
.show-card p { font-size: 14px; margin: 0; color: var(--ink-2); }
.stamp {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--leaf-deep);
  margin-bottom: 8px;
}

/* ── Tag links ─────────────────────────────────────────────────────────────── */

.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.4rem; }
.tag-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--paper);
  font-family: var(--display);
  font-size: 13px;
  color: var(--ink);
}
.tag-link:hover { border-color: var(--leaf-ink); color: var(--leaf-deep); text-decoration: none; }

/* ── Marquee ───────────────────────────────────────────────────────────────── */

/* The reference's scrolling word band, as a CSS animation rather than a jQuery
   marquee. The strip is duplicated once with aria-hidden on the copy, so a
   screen reader reads the list once and the animation has something to scroll
   into. `npm run audit-a11y` check 5 asserts exactly that shape. */
.marquee {
  overflow: hidden;
  background: var(--night);
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 15px 0;
}
.marquee .track { display: flex; width: max-content; animation: slide 36s linear infinite; }
.marquee .run { display: flex; }
.marquee span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
  padding: 0 26px;
  white-space: nowrap;
}
.marquee span:nth-child(3n + 1) { color: var(--leaf-lift); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee .track { animation: none; }
}

/* ── CTA band ──────────────────────────────────────────────────────────────── */

.enlist { background: var(--leaf-ink); color: rgba(255, 255, 255, .88); padding: 52px 0; }
.enlist .container { display: grid; gap: 24px; align-items: center; }
.enlist .kicker { color: rgba(255, 255, 255, .74); }
.enlist h2 { color: #fff; margin-bottom: 10px; }
.enlist p { margin: 0; max-width: 62ch; }

/* ── Article ───────────────────────────────────────────────────────────────── */

.trail {
  padding-top: 20px;
  font-size: 12.5px;
  color: var(--ink-3);
  font-family: var(--display);
}
.trail a { color: var(--ink-3); }
.trail span[aria-hidden] { padding: 0 7px; opacity: .5; }
.trail span[aria-current] { color: var(--ink); }

.article { padding: 24px 0 62px; }
.article-head { max-width: 72ch; margin-bottom: 30px; }
.article-head h1 { margin-bottom: 10px; }
.article .meta { font-family: var(--display); font-size: 12.5px; color: var(--ink-3); }

.wrap { display: grid; gap: 34px; }

/* The TOC is emitted BEFORE .col-main in the source, so the phone stack reads
   h1 → meta → contents → body instead of burying the contents list at the very
   bottom. Explicit grid placement puts it back on the right on desktop. */
.toc {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--wash);
  padding: 22px 22px 18px;
  align-self: start;
}
/* .74rem uppercase and still an <h2>: the size is presentation, the level is
   structure. `npm run audit-a11y` check 1 depends on it staying an h2. */
.toc h2 {
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
  padding-bottom: 0;
}
.toc h2::after { display: none; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: 7px; }
.toc a { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.toc a:hover { color: var(--leaf-deep); }
.toc .related { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.toc .related a { display: block; margin-bottom: 7px; font-family: var(--display); font-size: 13px; }

.col-main { min-width: 0; max-width: 76ch; }
.col-main > h2 { margin-top: 2.2rem; }
.col-main > h2:first-child { margin-top: 0; }
.col-main > h3 { margin-top: 1.8rem; }
.col-main ul, .col-main ol { padding-left: 22px; margin: 0 0 1.2rem; }
.col-main ul.checks, .col-main ol.steps { padding-left: 0; }
.col-main li { margin-bottom: 7px; }
.col-main figure { margin: 0 0 1.6rem; }
.col-main figure img { border-radius: var(--r-card); width: 100%; }

/* ── Related block ─────────────────────────────────────────────────────────── */

.related-block { background: var(--wash); border-top: 1px solid var(--line); padding: 54px 0; }
.related-block .entry {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px 24px 22px;
  color: inherit;
  transition: box-shadow .25s ease-in-out;
}
.related-block .entry:hover { box-shadow: var(--shadow-lift); text-decoration: none; }
.related-block .entry h3 { font-size: 16px; margin-bottom: 7px; }
.related-block .entry p { font-size: 14px; margin: 0; color: var(--ink-2); }

/* ── Footer ────────────────────────────────────────────────────────────────── */

footer { background: var(--paper); border-top: 1px solid var(--line); padding: 52px 0 0; }
footer .cols { display: grid; gap: 32px; margin-bottom: 34px; }
footer .brand { margin-bottom: 14px; }
.foot-blurb { font-size: 13.5px; color: var(--ink-3); max-width: 46ch; margin: 0; }
/* .74rem uppercase and still an <h2>, same rule as .toc h2. */
footer .cols h2 {
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
footer .cols ul { list-style: none; margin: 0; padding: 0; }
footer .cols li { margin-bottom: 7px; }
footer .cols a { font-size: 13.5px; color: var(--ink-2); }
footer .cols a:hover { color: var(--leaf-deep); }
.legal {
  border-top: 1px solid var(--line);
  padding: 22px 0 26px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-3);
}

/* ── Breakpoints ───────────────────────────────────────────────────────────── */

@media (max-width: 479px) {
  /* At 360px the container is 312px and the masthead row wants ~390px with the
     pill in it, which is horizontal scroll on every page at once. Nothing about
     ordering is lost — the mobile panel carries the same button, and so does
     every page's hero and CTA band. See references/design.md, "Breakpoints". */
  .masthead .btn-sm { display: none; }
  .mobile-nav { margin-left: auto; }
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  .tier .price { font-size: 36px; }
}

@media (min-width: 560px) {
  .figures .container { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 700px) {
  .g2 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .showcase { grid-template-columns: repeat(2, 1fr); }
  .ladder { grid-template-columns: repeat(2, 1fr); }
  .enlist .container { grid-template-columns: 1fr auto; }
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.25fr .75fr; align-items: center; }
  .g3 { grid-template-columns: repeat(3, 1fr); }
  .g4 { grid-template-columns: repeat(4, 1fr); }
  .showcase { grid-template-columns: repeat(3, 1fr); }
  .wrap { grid-template-columns: minmax(0, 1fr) 290px; }
  .toc { grid-column: 2; grid-row: 1; position: sticky; top: 22px; }
  .col-main { grid-column: 1; grid-row: 1; }
  footer .cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  h1 { font-size: 52px; }
}

/* The reference design's pricing block has three tiers. This one has five, and
   its feature lines are sentences rather than two-word labels — they say which
   of the nine measurements each period reaches, which is the whole point of the
   ladder on this domain and cannot be shortened to "Catch-up ✓".

   Five columns therefore do not fit until 1200px. Below that they wrap to three
   or four words a line and the ladder becomes unreadable while producing no
   overflow at all, so `npm run audit` passes it. This is the case that audit
   cannot see. */
@media (min-width: 1000px) {
  .ladder { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
  .ladder { grid-template-columns: repeat(5, 1fr); }
  .tier { padding: 34px 18px 30px; }
  .tier-label { left: 18px; }
  .tier .checks li { font-size: 12.5px; padding-left: 23px; }
  .tier .price { font-size: 38px; }
}

/* The desktop nav appears here. Three constants must move together or the
   audits assert the wrong thing while still passing: this rule, NAV_BREAKPOINT
   in audit-nav.js, and the desktop-1000 / desktop-1080 viewports in
   audit-layout.js. */
@media (min-width: 1081px) {
  .desktop-nav { display: block; }
  .mobile-nav { display: none; }
  .masthead .btn-sm { margin-left: 10px; }
}

@media print {
  .ticker, .masthead, .enlist, .related-block, .marquee, footer .cols { display: none; }
  body { font-size: 12px; }
  .toc { display: none; }
}