/* ===========================================================================
   mega-tv.se — "Glöd"
   Rebuilt from Leverage 2.1 "home-1" + theme-orange. Implements
   references/design.md — read that file before changing anything here.

   Three rules carry the identity and are easy to erode by accident:

     1. THE SITE IS DARK. home-1 runs three near-blacks (#040402 / #111111 /
        #191919) across every band and never goes light. The ONE light surface
        is `.col-main`, the article prose column, because thirty pages of
        Swedish prose set on near-black is a real reading problem.

     2. --flare BEHAVES OPPOSITELY ON THE TWO SURFACE FAMILIES. On dark it
        passes everywhere (5,33–6,21:1). On light it is 3,03:1 and FAILS as
        body text — use --flare-deep there. Every ratio below is measured, not
        assumed. Getting this backwards ships an inaccessible page that looks
        completely fine.

     3. NO SHADOWS, NO HOVER TRANSFORMS, 2px RADII. Depth is the surface ladder
        plus a hairline. Nothing lifts, scales or moves on hover.
   =========================================================================== */

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

/* Figtree, variable 300–900, one file per subset. Self-hosted because
   /om-mega-tv/ and llms.txt both state that the chat widget is the only thing
   this site loads from anywhere else — a fonts.googleapis.com link would make
   both sentences false. `swap` so text paints immediately in the fallback. */
@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree-var-latin.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  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+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree-var-latin-ext.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Accent — theme-orange.css, verbatim */
  --flare:      #fc5130;   /* 6,21:1 on ink-deep · 5,72:1 on ink · 5,33:1 on ink-lift */
  --ember:      #e0040b;   /* gradient partner only. 3,77:1 on ink — never behind text */
  --flare-deep: #b92d08;   /* 5,80:1 on white · 5,60:1 on paper · 5,26:1 on paper-2 */

  /* The dark ladder — home-1's own band colours, verbatim */
  --ink-deep: #040402;
  --ink:      #111111;
  --ink-lift: #191919;

  /* The light faces — the template's --card-bg-color and its neighbours */
  --paper:   #f5f5f5;
  --paper-2: #eeeeee;
  --white:   #f9f9f9;

  --text:      #2f323a;   /* 12,18:1 on white · 11,76:1 on paper */
  --text-2:    #636363;   /* 5,71:1 on white · 5,18:1 on paper-2. NOT the template's
                             #6f6f6f, which is 4,33:1 on paper-2 and fails */
  --text-inv:   #f5f5f5;  /* 18,82 / 17,32 / 16,13:1 down the dark ladder */
  --text-inv-2: #a8a8a8;  /* 8,63 / 7,94 / 7,40:1 */

  --hair-dark:  rgba(255, 255, 255, .12);  /* --secondary-l-color */
  --hair-light: rgba(0, 0, 0, .12);        /* --primary-l-color */

  --warn: #e8b64c;  /* one border colour on /lagligt-eller-inte/ and nowhere else */

  --grad: linear-gradient(45deg, var(--ember) 15%, var(--flare) 65%);

  --radius: 2px;
  --max: 1240px;
  --gutter: 24px;

  --font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
}

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text-inv);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

/* ── The one CSS rule without which this site overflows on every phone ──────
   Grid items default to `min-width: auto`, which floors them at their
   min-content width — and an `auto` or `1fr` track is then floored at the same
   number. It does not matter that the grid container is 312px wide: the track
   grows past it and the page scrolls sideways.

   Here the culprit is `table.data th { white-space: nowrap }` inside
   `.scroller`. Three Swedish column headings that may not wrap give the table a
   790px min-content, `.col-main` inherits it (capped at its own 74ch = 806px),
   and the single mobile column of `.wrap` becomes 806px inside a 312px
   container. Measured, not guessed: 27 of 30 pages overflowed, worst case
   470px, and `.scroller`'s `overflow-x: auto` does not prevent it.

   `min-width: 0` lets the item shrink and hands the overflow back to
   `.scroller`, which is what has the horizontal scrollbar and is where a wide
   table is supposed to scroll. The desktop rule already does this with
   `minmax(0, 1fr)`; this is the same fix for every other grid on the site. */
.wrap > *,
.grid > *,
.showcase > *,
.ladder > *,
.ledger > *,
.hl-row > *,
.figures .container > *,
.enlist .container > * { min-width: 0; }

/* ── Type ─────────────────────────────────────────────────────────────────── */

h1, h2, h3 { margin: 0 0 .6em; line-height: 1.15; text-wrap: balance; }

h1 {
  font-weight: 900;
  font-size: clamp(2.2rem, 6.4vw, 4.25rem);
  letter-spacing: -.035em;
}
h2 {
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  letter-spacing: -.022em;
}
h3 { font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .5em; }
strong, b { font-weight: 700; }

.kicker {
  display: block;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--flare);
  margin-bottom: .9em;
}

.lede { font-size: 1.15rem; color: var(--text-inv-2); max-width: 62ch; }

/* The gradient-clipped word in the hero headline. One per page, at most. */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

a { color: var(--flare); text-underline-offset: .18em; }
a:hover { color: var(--text-inv); }

.skip {
  position: absolute; left: -9999px;
  background: var(--flare); color: var(--ink-deep);
  padding: .8rem 1.2rem; font-weight: 700; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

:focus-visible {
  outline: 3px solid var(--flare);
  outline-offset: 2px;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
/* The template puts white text on --primary-color. That is 3,14:1 and fails.
   --ink-deep on --flare is 6,21:1, and near-black on coral is the stronger
   graphic anyway. Deliberate divergence — see references/design.md. */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px;
  padding: .7rem 1.5rem;
  background: var(--flare);
  color: var(--ink-deep);
  font-weight: 700; font-size: .95rem;
  text-decoration: none;
  border: 2px solid var(--flare);
  border-radius: var(--radius);
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--ember); border-color: var(--ember); color: var(--white); }

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

.btn-ghost {
  background: transparent;
  color: var(--flare);
  border-color: var(--flare);
}
.btn-ghost:hover { background: var(--flare); color: var(--ink-deep); border-color: var(--flare); }

/* The template's `.dark-button`: a 2px gradient frame. This design's signature
   gesture. One per band — more than that and it stops reading as an accent. */
.btn-frame {
  position: relative;
  background: transparent;
  color: var(--text-inv);
  border-color: transparent;
  z-index: 0;
}
.btn-frame::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--radius);
  padding: 2px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  z-index: -1;
}
.btn-frame:hover { background: var(--grad); color: var(--white); }

.more {
  display: inline-block;
  font-weight: 700; font-size: .92rem;
  color: var(--flare);
  text-decoration: none;
  border-bottom: 2px solid var(--flare);
  padding-bottom: 2px;
}
.more:hover { color: var(--text-inv); border-color: var(--text-inv); }

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

.ticker {
  background: var(--ink-deep);
  border-bottom: 1px solid var(--hair-dark);
  font-size: .82rem;
  color: var(--text-inv-2);
}
.ticker .container {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
  padding-block: .55rem;
}
.ticker b { color: var(--text-inv); font-weight: 800; font-variant-numeric: tabular-nums; }
.ticker .hl { color: var(--flare); font-weight: 700; margin-left: auto; }

@media (max-width: 700px) {
  .ticker .container > span:nth-child(n+3) { display: none; }
  .ticker .hl { margin-left: auto; }
}

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

.masthead {
  background: var(--ink-deep);
  border-bottom: 1px solid var(--hair-dark);
  position: sticky; top: 0; z-index: 50;
}
.nav {
  display: flex; align-items: center; gap: 1.2rem;
  padding-block: .8rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--text-inv);
  font-weight: 900; font-size: 1.15rem; letter-spacing: -.03em;
  text-decoration: none;
  margin-right: auto;
}
.brand .mark { color: var(--flare); flex: none; }
.brand b { font-weight: 900; color: var(--flare); }

.desktop-nav { display: none; }
.desktop-nav ul { display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; }
/* nowrap is a regression guard, not styling: a wrapped nav label produces no
   horizontal overflow and still looks broken, which the overflow audit would
   pass. With nowrap the same condition becomes overflow, which it catches. */
.desktop-nav li { white-space: nowrap; margin: 0; }
.desktop-nav a {
  display: block;
  padding: .65rem .7rem;
  color: var(--text-inv);
  font-size: .92rem; font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.desktop-nav a:hover { color: var(--flare); border-image: var(--grad) 1; border-bottom-color: var(--flare); }

/* Mobile nav is <details>: no JS, keyboard-accessible for free, and the links
   stay in the HTML source for crawlers. */
.mobile-nav { position: relative; }
.mobile-nav summary {
  list-style: none; cursor: pointer;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair-dark);
  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(--text-inv);
}
.bars { position: relative; }
.bars::before, .bars::after { content: ''; position: absolute; left: 0; }
.bars::before { top: -6px; }
.bars::after { top: 6px; }
.mobile-nav[open] summary { border-color: var(--flare); }

.mobile-panel {
  position: absolute; right: 0; top: calc(100% + .8rem);
  width: min(88vw, 320px);
  background: var(--ink-lift);
  border: 1px solid var(--hair-dark);
  border-top: 3px solid var(--flare);
  border-radius: var(--radius);
  padding: 1rem;
  max-height: 76vh; overflow-y: auto;
}
.mobile-panel ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.mobile-panel li { margin: 0; }
.mobile-panel a {
  display: block; padding: .7rem .4rem;
  color: var(--text-inv); font-weight: 600; font-size: .95rem;
  text-decoration: none;
  border-bottom: 1px solid var(--hair-dark);
}
.mobile-panel a:hover { color: var(--flare); }
.mobile-panel .btn { width: 100%; }

/* The wordmark is one short word, so the masthead has more room than on a
   three-word brand and the desktop nav can appear at 1000px.
   `npm run audit-nav` straddles this number — move one, move the other. */
@media (min-width: 1000px) {
  .desktop-nav { display: block; }
  .mobile-nav { display: none; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
/* home-1's hero is a full-bleed photograph under a dark mask. The template runs
   a Swiper carousel of them; this is one image, so the first frame is the only
   frame and it is in the HTML.
   THE MASK IS LOAD-BEARING. Without it the headline is white text over an
   unknown mid-tone. If the image is swapped, check the headline against the new
   photograph's lightest region. */

.hero {
  position: relative;
  background: var(--ink-deep);
  padding-block: clamp(3rem, 8vw, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero.tall { padding-block: clamp(4rem, 11vw, 8rem); }

.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero.has-img::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(4, 4, 2, .94) 0%, rgba(4, 4, 2, .84) 45%, rgba(4, 4, 2, .72) 100%),
    linear-gradient(to top, rgba(4, 4, 2, .9) 0%, rgba(4, 4, 2, 0) 55%);
  z-index: -1;
}
.hero-copy { max-width: 44rem; position: relative; }
.hero h1 { margin-bottom: .45em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero-note { margin-top: 1.4rem; font-size: .88rem; color: var(--text-inv-2); }

/* ── Figures strip ────────────────────────────────────────────────────────── */
/* home-1's `.counter.funfacts`, with the count-up animation removed. The numbers
   were never counting up from anything. */

.figures { background: var(--ink-lift); border-block: 1px solid var(--hair-dark); }
.figures .container {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem 1rem;
  padding-block: 2.2rem;
}
.figures .cell { text-align: center; }
.num {
  display: block;
  font-weight: 900; font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--flare);
}
.lbl { display: block; font-size: .82rem; color: var(--text-inv-2); margin-top: .3rem; }

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

/* ── Bands ────────────────────────────────────────────────────────────────── */
/* Three near-blacks, cycled. Two adjacent bands never share a background. */

.section { background: var(--ink); padding-block: clamp(3rem, 7vw, 5rem); }
.section.lift { background: var(--ink-lift); }
.section.deep { background: var(--ink-deep); }

.section-head { max-width: 62ch; margin-bottom: 2.4rem; }
.section-head.mid { margin-inline: auto; text-align: center; }
.section-head p { color: var(--text-inv-2); font-size: 1.08rem; margin-bottom: 0; }

.band-note { margin-top: 1.8rem; font-size: .88rem; color: var(--text-inv-2); }

/* ── Highlights ───────────────────────────────────────────────────────────── */
/* home-1's sections 1 and 2: alternating text/image rows. The alternation is
   the component — rows do not take a side. */

.highlights { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.hl-row { display: grid; gap: 1.8rem; align-items: center; }
.hl-copy p { color: var(--text-inv-2); }
.hl-copy h3 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 800; letter-spacing: -.02em; }
.hl-img img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--hair-dark);
}

@media (min-width: 860px) {
  .hl-row { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .hl-row.image-left .hl-copy { order: 2; }
  .hl-row.image-left .hl-img { order: 1; }
}

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

.grid { display: grid; gap: 1.2rem; }
@media (min-width: 640px) { .g2, .g3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .g3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--ink);
  border: 1px solid var(--hair-dark);
  border-top: 3px solid var(--flare);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.section .card { background: var(--ink-lift); }
.section.lift .card { background: var(--ink); }
.section.deep .card { background: var(--ink-lift); }
.card p { color: var(--text-inv-2); font-size: .95rem; margin-bottom: 0; }
.card h3 a { text-decoration: none; }

.num-mark {
  display: block;
  font-weight: 900; font-size: .78rem; letter-spacing: .14em;
  color: var(--flare);
  font-variant-numeric: tabular-nums;
  margin-bottom: .7rem;
}

/* ── Showcase ─────────────────────────────────────────────────────────────── */
/* The template's news grid, without the carousel. */

.showcase { display: grid; gap: 1.4rem; }
@media (min-width: 700px) { .showcase { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .showcase { grid-template-columns: repeat(3, 1fr); } }

.show-card {
  display: block;
  color: inherit; text-decoration: none;
  background: var(--ink-lift);
  border: 1px solid var(--hair-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
.section.lift .show-card { background: var(--ink); }
.show-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.show-card .cap { padding: 1.2rem; border-top: 3px solid var(--flare); }
.show-card h3 { font-size: 1.05rem; margin-bottom: .4em; }
.show-card p { font-size: .9rem; color: var(--text-inv-2); margin: 0; }
.show-card:hover { border-color: var(--flare); }
.show-card:hover h3 { color: var(--flare); }
.stamp {
  display: inline-block;
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--flare);
  margin-bottom: .6rem;
}

/* ── Platforms ────────────────────────────────────────────────────────────── */
/* The template's client-logo strip as text tiles. NO third-party logos, ever —
   they are trademarks and this site holds none of them. */

.platforms {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--hair-dark);
  border: 1px solid var(--hair-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 640px) { .platforms { grid-template-columns: repeat(4, 1fr); } }
.platforms a, .platforms span {
  display: flex; align-items: center; justify-content: center;
  min-height: 72px; padding: .8rem;
  background: var(--ink);
  color: var(--text-inv);
  font-weight: 600; font-size: .9rem; text-align: center;
  text-decoration: none;
}
.section.lift .platforms a, .section.lift .platforms span { background: var(--ink-lift); }
.section.deep .platforms a, .section.deep .platforms span { background: var(--ink-deep); }
.platforms a:hover { color: var(--flare); }

/* The homepage puts the FAQ directly after the platform tiles inside one band.
   Without this the heading sits hard against the grid and reads as a caption
   for it rather than as a new section. */
.platforms + h2 { margin-top: 3rem; }

/* ── Ladder ───────────────────────────────────────────────────────────────── */

.ladder { display: grid; gap: 1.2rem; }
@media (min-width: 700px) { .ladder { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .ladder { grid-template-columns: repeat(5, 1fr); } }

.tier {
  display: flex; flex-direction: column;
  background: var(--ink-lift);
  border: 1px solid var(--hair-dark);
  border-radius: var(--radius);
  padding: 1.5rem 1.2rem;
}
.section.lift .tier, .section.deep .tier { background: var(--ink); }
.tier h3 { font-size: 1.1rem; margin-bottom: .3em; }
.tier ul { list-style: none; padding: 0; margin: 1rem 0 1.4rem; font-size: .88rem; }
.tier li {
  padding-left: 1.1rem; position: relative;
  color: var(--text-inv-2); margin-bottom: .6em;
}
.tier li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; background: var(--flare);
}
.tier .btn { margin-top: auto; }

.tier-pick { border-color: var(--flare); border-top: 3px solid var(--flare); }
.tier-trial { border-top: 3px solid var(--flare); }

.tier-label {
  display: inline-block; align-self: flex-start;
  background: var(--grad);
  color: var(--white);
  font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: var(--radius);
  margin-bottom: .8rem;
}
.tier-label-plain {
  background: none;
  color: var(--flare);
  padding-inline: 0;
}

.price {
  font-weight: 900; font-size: 2.3rem; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text-inv);
  line-height: 1;
}
.price span { font-size: 1.1rem; font-weight: 700; }
.per { font-size: .82rem; color: var(--text-inv-2); margin: .5rem 0 0; }

/* ── Ledger ───────────────────────────────────────────────────────────────── */
/* The right column earns the page, so it is never shorter than the left. */

.ledger { display: grid; gap: 1.2rem; }
@media (min-width: 800px) { .ledger { grid-template-columns: repeat(2, 1fr); } }
.ledger > div {
  background: var(--ink-lift);
  border: 1px solid var(--hair-dark);
  border-left: 3px solid var(--flare);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.section.lift .ledger > div { background: var(--ink); }
.ledger > div:last-child { border-left-color: var(--text-inv-2); }
.ledger ul { list-style: none; padding: 0; margin: 0; }
.ledger li {
  padding-left: 1.1rem; position: relative;
  font-size: .93rem; color: var(--text-inv-2); margin-bottom: .8em;
}
.ledger li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; background: currentColor;
}

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

ol.steps { list-style: none; padding: 0; margin: 0 0 1.6em; counter-reset: step; }
ol.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.2rem 3rem;
  border-left: 2px solid var(--hair-dark);
  margin: 0 0 0 .8rem;
}
ol.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: -.85rem; top: 0;
  width: 1.7rem; height: 1.7rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--flare); color: var(--ink-deep);
  font-size: .72rem; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
ol.steps strong { display: block; margin-bottom: .2em; }

/* ── Notes and callouts ───────────────────────────────────────────────────── */

.note {
  background: var(--ink-lift);
  border: 1px solid var(--hair-dark);
  border-left: 3px solid var(--flare);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  margin: 0 0 1.6em;
  font-size: .95rem;
}
.note.warn { border-left-color: var(--warn); }
.note > :last-child { margin-bottom: 0; }

.answer {
  background: var(--ink-lift);
  border: 1px solid var(--hair-dark);
  border-top: 3px solid var(--flare);
  border-radius: var(--radius);
  padding: 1.4rem;
  margin: 0 0 2em;
  font-size: 1.05rem;
}
.answer > :last-child { margin-bottom: 0; }

.inline-cta {
  background: var(--ink-lift);
  border: 1px solid var(--hair-dark);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 2.4em 0;
  text-align: center;
}
.inline-cta p { margin-bottom: 1.2em; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
/* <details>, so no JavaScript and keyboard-accessible for free. The question
   text must stay byte-identical to the FAQPage schema — npm run verify checks. */

.queries {
  border: 1px solid var(--hair-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
.queries details { border-bottom: 1px solid var(--hair-dark); }
.queries details:last-child { border-bottom: 0; }
.queries summary {
  cursor: pointer; list-style: none;
  padding: 1rem 2.6rem 1rem 1.2rem;
  font-weight: 700; font-size: 1rem;
  position: relative;
  min-height: 44px;
  display: flex; align-items: center;
}
.queries summary::-webkit-details-marker { display: none; }
.queries summary::after {
  content: ''; position: absolute; right: 1.2rem; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--flare); border-bottom: 2px solid var(--flare);
  transform: translateY(-70%) rotate(45deg);
}
.queries details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.queries summary:hover { color: var(--flare); }
.queries details > div {
  padding: 0 1.2rem 1.2rem;
  color: var(--text-inv-2);
  font-size: .95rem;
}

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

.scroller { overflow-x: auto; margin: 0 0 1.8em; }
table.data {
  width: 100%; border-collapse: collapse;
  font-size: .92rem;
  background: var(--ink-lift);
  border: 1px solid var(--hair-dark);
  border-radius: var(--radius);
}
table.data caption {
  caption-side: bottom;
  text-align: left;
  font-size: .82rem; color: var(--text-inv-2);
  padding-top: .7rem;
}
table.data th, table.data td {
  padding: .7rem .85rem;
  text-align: left;
  border-bottom: 1px solid var(--hair-dark);
}
table.data th {
  font-weight: 800; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--flare);
  white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td { color: var(--text-inv-2); }
table.data td:first-child { color: var(--text-inv); font-weight: 600; }
table.data .r { text-align: right; font-variant-numeric: tabular-nums; }

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

.related-block { background: var(--ink-lift); padding-block: clamp(2.5rem, 6vw, 4rem); }
.entry {
  display: block;
  background: var(--ink);
  border: 1px solid var(--hair-dark);
  border-top: 3px solid var(--flare);
  border-radius: var(--radius);
  padding: 1.4rem;
  color: inherit; text-decoration: none;
}
.entry:hover { border-color: var(--flare); }
.entry h3 { font-size: 1.02rem; }
.entry p { font-size: .9rem; color: var(--text-inv-2); margin: 0; }

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

.enlist { background: var(--ink); border-top: 1px solid var(--hair-dark); padding-block: clamp(2.8rem, 6vw, 4.5rem); }
.enlist .container {
  display: grid; gap: 1.6rem; align-items: center;
}
.enlist p { color: var(--text-inv-2); margin-bottom: 0; max-width: 58ch; }
.enlist h2 { margin-bottom: .4em; }
@media (min-width: 860px) {
  .enlist .container { grid-template-columns: 1fr auto; gap: 2.5rem; }
}

/* ── Tags ─────────────────────────────────────────────────────────────────── */

.tags { display: flex; flex-wrap: wrap; gap: .6rem; }
.tag-link {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: .5rem 1rem;
  background: var(--ink-lift);
  border: 1px solid var(--hair-dark);
  border-radius: var(--radius);
  color: var(--text-inv); font-size: .88rem; font-weight: 600;
  text-decoration: none;
}
.tag-link:hover { border-color: var(--flare); color: var(--flare); }

/* ── Article ──────────────────────────────────────────────────────────────── */
/* `.col-main` is the ONE light surface on the site. Thirty pages of Swedish
   prose set on near-black is a real reading problem; this is the fix, and it is
   why --flare-deep exists at all. */

.trail {
  padding-block: 1rem;
  font-size: .82rem; color: var(--text-inv-2);
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.trail a { color: var(--text-inv-2); text-decoration: none; }
.trail a:hover { color: var(--flare); }
.trail span[aria-current] { color: var(--text-inv); }

.article { background: var(--ink); padding-bottom: clamp(3rem, 7vw, 5rem); }
.article-head { max-width: 52rem; padding-block: 1rem 2.2rem; }
.article-head .meta { font-size: .82rem; color: var(--text-inv-2); }

.wrap { display: grid; gap: 2rem; }

.toc {
  background: var(--ink-lift);
  border: 1px solid var(--hair-dark);
  border-top: 3px solid var(--flare);
  border-radius: var(--radius);
  padding: 1.3rem;
  align-self: start;
}
.toc h2 {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--flare); font-weight: 800;
  margin-bottom: 1em;
}
.toc ul { list-style: none; padding: 0; margin: 0 0 1.4rem; counter-reset: toc; }
.toc li { counter-increment: toc; margin-bottom: .55em; }
.toc li::before {
  content: counter(toc, decimal-leading-zero) '  ';
  color: var(--flare); font-weight: 800; font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.toc a { color: var(--text-inv-2); font-size: .9rem; text-decoration: none; }
.toc a:hover { color: var(--flare); }
.toc .related { border-top: 1px solid var(--hair-dark); padding-top: 1.2rem; }
.toc .related a { display: block; padding: .35rem 0; }

.col-main {
  background: var(--paper);
  color: var(--text);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 4vw, 2.6rem);
  max-width: 74ch;
}
.col-main figure { margin: 0 0 2em; }
.col-main figure img {
  width: 100%; border-radius: var(--radius);
  border: 1px solid var(--hair-light);
}
.col-main h2 {
  margin-top: 1.8em;
  scroll-margin-top: 5.5rem;
  font-size: clamp(1.35rem, 2.8vw, 1.8rem);
}
.col-main h2:first-of-type { margin-top: 0; }
.col-main h3 { margin-top: 1.6em; }
.col-main a { color: var(--flare-deep); }
.col-main a:hover { color: var(--text); }

/* Every dark-surface component that can appear inside `.col-main` is repainted
   here for the light face. Missing one of these is the single most likely way
   to ship an unreadable block on this site. */
.col-main .answer,
.col-main .note,
.col-main .inline-cta,
.col-main .ledger > div,
.col-main .show-card,
.col-main .tag-link,
.col-main table.data {
  background: var(--white);
  border-color: var(--hair-light);
  color: var(--text);
}
/* `.show-card` and `.tag-link` reach the light column through /blogg/, which
   lists its own posts inside `.col-main`. Both were missing from this list on
   the first build and rendered as near-black boxes on a light page — readable,
   but plainly a component that had not been looked at. */
.col-main .show-card p { color: var(--text-2); }
.col-main .show-card:hover { border-color: var(--flare-deep); }
.col-main .show-card:hover h3 { color: var(--flare-deep); }
.col-main .stamp { color: var(--flare-deep); }
.col-main .tag-link:hover { border-color: var(--flare-deep); color: var(--flare-deep); }
.col-main .answer { border-top-color: var(--flare); }
.col-main .note { border-left-color: var(--flare); }
.col-main .note.warn { border-left-color: #9a6b00; }
.col-main .ledger > div { border-left-color: var(--flare); }
.col-main .ledger > div:last-child { border-left-color: var(--text-2); }
.col-main .ledger li,
.col-main table.data td,
.col-main .queries details > div { color: var(--text-2); }
.col-main table.data td:first-child { color: var(--text); }
.col-main table.data th { color: var(--flare-deep); }
.col-main table.data th,
.col-main table.data td { border-bottom-color: var(--hair-light); }
.col-main table.data caption { color: var(--text-2); }
.col-main .queries { border-color: var(--hair-light); background: var(--white); }
.col-main .queries details { border-bottom-color: var(--hair-light); }
.col-main .queries summary:hover { color: var(--flare-deep); }
.col-main .queries summary::after { border-color: var(--flare-deep); }
.col-main .kicker { color: var(--flare-deep); }
.col-main ol.steps li { border-left-color: var(--hair-light); }
.col-main ol.steps li:last-child { border-left-color: transparent; }
.col-main .btn-ghost { color: var(--flare-deep); border-color: var(--flare-deep); }
.col-main .btn-ghost:hover { background: var(--flare-deep); color: var(--white); }

@media (min-width: 1000px) {
  .wrap {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 2.5rem;
    align-items: start;
  }
  /* The TOC is emitted BEFORE .col-main in the DOM so the phone stack reads
     h1 → meta → contents → body, instead of burying the contents list at the
     bottom where nobody would use it. Explicit placement puts it back on the
     right here. Do not "fix" the source order. */
  .toc { grid-column: 2; grid-row: 1; position: sticky; top: 5.5rem; }
  .col-main { grid-column: 1; grid-row: 1; }
}

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

footer {
  background: var(--ink-lift);
  border-top: 1px solid var(--hair-dark);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
footer .cols { display: grid; gap: 2rem; }
@media (min-width: 640px) { footer .cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { footer .cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; } }

/* Styled at .74rem uppercase. THEY ARE STILL <h2>. The size is presentation;
   the level is structure. Demoting them fails npm run audit-a11y. */
footer h2 {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--flare); font-weight: 800;
  margin-bottom: 1.1em;
}
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: .5em; }
footer a { color: var(--text-inv-2); font-size: .92rem; text-decoration: none; }
footer a:hover { color: var(--flare); }
footer .brand { margin-bottom: 1rem; }
.foot-blurb { font-size: .9rem; color: var(--text-inv-2); max-width: 40ch; margin: 0; }

/* home-1 splits the copyright into its own strip beneath the columns rather
   than folding it into the footer. Kept. */
.copyright {
  background: var(--ink-deep);
  border-top: 1px solid var(--hair-dark);
  padding-block: 1.4rem;
}
.copyright p {
  font-size: .8rem; color: var(--text-inv-2);
  margin: 0 0 .5em; max-width: 90ch;
}
.copyright p:last-child { margin-bottom: 0; }

/* ── Reduced motion ───────────────────────────────────────────────────────── */

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

/* ── Print ────────────────────────────────────────────────────────────────── */

@media print {
  .ticker, .masthead, .toc, .enlist, .inline-cta, .related-block, footer, .copyright { display: none; }
  body { background: #fff; color: #000; }
  .col-main { max-width: none; padding: 0; background: #fff; }
  .article, .section { background: #fff; color: #000; }
}