/* watchsmartiptv.se — one stylesheet, no framework, no JavaScript for the interface.
   Governed by references/design.md. If the two disagree, that file is wrong:
   update it to match what is here. */

/* ─────────────────────────────────────────────────────────────────────────────
   Fonts — self-hosted variable woff2, latin and latin-ext.

   The reference design links both faces from fonts.googleapis.com. /om-oss/ and
   llms.txt both state that the chat widget is the only request this site makes
   to anyone else, and a Google Fonts link would make those sentences false on
   the page that promises not to overclaim. See scripts/shell.js,
   "Third-party scripts".
   ───────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/inter-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: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/playfair-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: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/playfair-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: 'Playfair Display';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/playfair-var-latin-italic.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;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Palette

   The reference ships turquoise #1ABC9C at hue 168°. It could not be used: a
   sibling property holds #00BFA6 at 172° on the same white canvas and in an
   adjacent subject, four degrees away. The template's own documentation calls
   the accent the one value you are meant to change, so it was changed.

   #4CB414 sits at hue 99°, in the widest unoccupied band available, 21° from
   its nearest neighbour on a light canvas. See references/design.md,
   "The measurement that decided the palette".

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

:root {
  --paper:      #FFFFFF;
  --paper-2:    #F7F8F9;   /* the alternating band */
  --paper-3:    #EEF0F2;   /* table stripes, inset wells */

  --ink:        #1A1D21;   /* headings — 16,93:1 on white */
  --text:       #3C4247;   /* body — 10,18:1 */
  --text-dim:   #6B7379;   /* captions, meta — 4,82:1, clears AA */

  --line:       #E4E7EA;
  --line-2:     #CBD1D6;

  --night:      #14171A;   /* dark band, footer, hero ground — white on it is 16,7:1 */
  --night-2:    #0E1113;   /* the legal strip under the footer */
  --on-night:   #E8EBED;
  --on-night-dim: #9AA3A9;

  /* The accent, split by the job it can actually do.
     --pulse is 2,70:1 on white and CANNOT carry text. It fills, it outlines,
     it draws icons. --pulse-ink carries every label and every link. */
  --pulse:      #4CB414;   /* hue 99  — fills, rules, icon strokes */
  --pulse-ink:  #2F7A0C;   /* 5,38:1 on white — links, buttons with type */
  --pulse-deep: #1F5207;   /* hover */
  --pulse-lift: #8FE04C;   /* 11,08:1 on --night — the accent on dark bands */
  --pulse-wash: #F0F8E8;   /* tinted band and icon discs */
  --pulse-veil: rgba(76, 180, 20, .14);

  --warn:       #B3261E;   /* reserved. Never a general accent */
  --warn-wash:  #FDF3F2;

  --font:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;
  --serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --mono:    ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas,
             'Liberation Mono', monospace;

  --max: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --pad: clamp(3.75rem, 7vw, 6.25rem);   /* the reference's flat 80px section padding */

  /* The reference is a low-radius design. Never pills except the header CTA. */
  --r:      4px;   /* cards, panels, tables */
  --r-btn:  3px;   /* buttons and inputs */

  --shadow:    0 2px 14px rgba(20, 23, 26, .05);
  --shadow-lg: 0 18px 44px rgba(20, 23, 26, .10);

  --t: 160ms ease;
}

/* ── 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(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; line-height: 1.22; letter-spacing: -.018em; margin: 0 0 .6em; }
h1 { font-size: clamp(2.05rem, 4.6vw, 3.15rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-size: 1.16rem; letter-spacing: -.008em; }
p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.3em; padding-left: 1.35em; }
li { margin: 0 0 .45em; }
strong, b { font-weight: 650; color: var(--ink); }
small { font-size: .82rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--pad) 0; }

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

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

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .8rem 1.2rem;
  font-weight: 600; text-decoration: none; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; color: #fff; }

/* The reference's small uppercase label. The one place the raw accent appears
   as type is here on a dark ground, where --pulse-lift carries it at 11:1. */
.kicker {
  display: block;
  font-size: .715rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pulse-ink);
  margin-bottom: .9rem;
}
.dark .kicker, .hero .kicker { color: var(--pulse-lift); }

/* The lede is where the reference's serif does its work. */
.lede {
  font-family: var(--serif);
  font-size: clamp(1.12rem, 2vw, 1.32rem);
  line-height: 1.6;
  color: var(--text);
  font-weight: 400;
}
.dark .lede, .hero .lede { color: var(--on-night); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px;
  padding: .72rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .015em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.btn-primary { background: var(--pulse-ink); border-color: var(--pulse-ink); color: #fff; }
.btn-primary:hover { background: var(--pulse-deep); border-color: var(--pulse-deep); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--pulse-ink); color: var(--pulse-deep); background: var(--pulse-wash); }
.btn-light { background: #fff; border-color: #fff; color: var(--ink); }
.btn-light:hover { background: var(--pulse-wash); border-color: var(--pulse-wash); color: var(--pulse-deep); }
/* The reference's `.button-border.button-light` on the photograph. */
.btn-outline { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn-outline:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn-lg { min-height: 54px; padding: .95rem 2.1rem; font-size: .95rem; }
/* 44px, not the 40 the reference uses for a small pill. `npm run audit` measures
   every `a.btn` and this is the masthead CTA, which is the most-tapped control
   on the site. */
.btn-sm { min-height: 44px; padding: .5rem 1.1rem; font-size: .82rem; border-radius: 999px; }

/* ── Masthead ──────────────────────────────────────────────────────────────── */
/* Two appearances, no scroll listener. `.over` is emitted by shell.js on pages
   whose hero is a full-bleed photograph and floats the bar on top of it; every
   other page gets the solid sticky bar. The reference swaps between the two on
   scroll with JavaScript, which is the one part of it not reproduced here. */

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.masthead.over {
  position: absolute; inset: 0 0 auto; z-index: 60;
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, .18);
}
.masthead .nav {
  display: flex; align-items: center; gap: 1.75rem;
  min-height: 76px;
}

.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--ink); text-decoration: none;
  font-size: 1.16rem; font-weight: 700; letter-spacing: -.025em;
  margin-right: auto;
}
.brand .mark { color: var(--pulse-ink); flex: none; }
.brand b { font-weight: 700; color: var(--pulse-ink); }
.over .brand, .over .brand b { color: #fff; }
.over .brand .mark { color: var(--pulse-lift); }

.desktop-nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.desktop-nav li { margin: 0; white-space: nowrap; }
/* .6rem of vertical padding, not the .35rem the look needs, so the link box
   clears 44px. The masthead is a fixed 76px with items centred, so the extra
   height costs nothing visually. */
.desktop-nav a {
  display: block; padding: .6rem 0;
  color: var(--ink); text-decoration: none;
  font-size: .875rem; font-weight: 550; letter-spacing: .005em;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.desktop-nav a:hover { color: var(--pulse-deep); border-bottom-color: var(--pulse); }
.over .desktop-nav a { color: rgba(255,255,255,.9); }
.over .desktop-nav a:hover { color: #fff; border-bottom-color: var(--pulse-lift); }
/* The pill goes to full-strength --pulse only when it is sitting on the
   photograph. `> .btn-primary` is load-bearing: the mobile panel hangs inside
   this same header and is white, and a descendant selector would put the bright
   fill on a white ground where the rest of the site uses --pulse-ink. */
.masthead.over .nav > .btn-primary {
  background: var(--pulse); border-color: var(--pulse); color: var(--night);
}
.masthead.over .nav > .btn-primary:hover {
  background: var(--pulse-lift); border-color: var(--pulse-lift); color: var(--night);
}

/* Mobile menu — a <details>. Keyboard-accessible natively, the links stay in the
   source for crawlers, and it costs no JavaScript. */
.mobile-nav { display: none; }
.mobile-nav > summary {
  list-style: none; cursor: pointer;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: var(--r-btn);
}
.mobile-nav > summary::-webkit-details-marker { display: none; }
.over .mobile-nav > summary { border-color: rgba(255,255,255,.4); }
.bars, .bars::before, .bars::after {
  display: block; width: 18px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform var(--t), opacity var(--t);
}
.over .bars, .over .bars::before, .over .bars::after { background: #fff; }
.bars { position: relative; }
.bars::before, .bars::after { content: ''; position: absolute; left: 0; }
.bars::before { top: -6px; }
.bars::after  { top: 6px; }
.mobile-nav[open] .bars { background: transparent; }
.mobile-nav[open] .bars::before { transform: translateY(6px) rotate(45deg); }
.mobile-nav[open] .bars::after  { transform: translateY(-6px) rotate(-45deg); }

.mobile-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem var(--gutter) 1.75rem;
}
.mobile-panel ul { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.mobile-panel li { margin: 0; border-bottom: 1px solid var(--line); }
.mobile-panel a {
  display: block; padding: .8rem 0;
  color: var(--ink); text-decoration: none; font-weight: 550; font-size: .95rem;
}
.mobile-panel a:hover { color: var(--pulse-deep); }
.mobile-panel .btn { width: 100%; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
/* The reference's `min-vh-100` slider: a photograph, a scrim, centred captions,
   and the masthead floating over the lot. */

.hero {
  position: relative;
  background: var(--night);
  color: var(--on-night);
  display: grid; align-items: center;
  min-height: 460px;
  padding: calc(76px + var(--pad)) 0 var(--pad);
  overflow: hidden;
  isolation: isolate;
}
.hero.full { min-height: clamp(560px, 86vh, 780px); }
.hero-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* The scrim. Deep enough that white type clears AA over any photograph the
   fetcher can return, and graded so the masthead has ground under it. */
.hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,15,17,.80) 0%, rgba(12,15,17,.52) 34%, rgba(12,15,17,.72) 100%);
}
.hero .container { position: relative; }
.hero-copy { max-width: 46rem; margin-inline: auto; text-align: center; }
.hero h1 { color: #fff; margin-bottom: .55em; text-wrap: balance; }
.hero .lede { margin-inline: auto; max-width: 40rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-top: 2rem; }
.hero-note { margin-top: 1.5rem; font-size: .82rem; color: var(--on-night-dim); }
.hero-note a { color: var(--pulse-lift); }

/* The plain hero for pages with no photograph. */
.hero:not(.shot) { background: var(--night); }

/* ── Page head (inner pages) ───────────────────────────────────────────────── */

.page-head {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(1.75rem, 3vw, 2.5rem);
}
.page-head h1 { margin-bottom: .35em; max-width: 24ch; text-wrap: balance; }
.page-head .meta { color: var(--text-dim); font-size: .82rem; }

.trail {
  font-size: .78rem; line-height: 1.2; color: var(--text-dim);
  margin-bottom: 1.1rem;
}
/* Breadcrumb links are 12,5px text and would be a 15px tap target. The padding
   grows the hit area to 45px and the matching negative margin pulls the layout
   back, so the row looks exactly as designed and is still tappable. Vertical
   only — horizontal padding here would let adjacent crumbs overlap. */
.trail a {
  color: var(--text-dim); text-decoration: none;
  display: inline-block;
  padding-block: .95rem;
  margin-block: -.95rem;
}
.trail a:hover { color: var(--pulse-deep); text-decoration: underline; }
.trail span[aria-hidden] { margin: 0 .45rem; color: var(--line-2); }
.trail [aria-current] { color: var(--ink); }

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

.section { padding: var(--pad) 0; }
.section.alt { background: var(--paper-2); }
.section.dark { background: var(--night); color: var(--on-night); }
.section.dark h2, .section.dark h3 { color: #fff; }
.section.dark a { color: var(--pulse-lift); }

.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.mid { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: .4em; text-wrap: balance; }
.section-head .lede { margin-bottom: 0; }

/* The reference puts a hairline under a centred section head. Here it is a
   short accent rule — the one place the raw accent appears at full strength on
   white, and it is a shape rather than type, so 2,70:1 is not a problem. */
.section-head.mid h2::after {
  content: ''; display: block;
  width: 44px; height: 3px; margin: 1.1rem auto 0;
  background: var(--pulse);
}

/* ── Figure strip ──────────────────────────────────────────────────────────── */

.figures { background: var(--paper); border-bottom: 1px solid var(--line); }
.figures .container {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.figures .cell { text-align: center; padding: .5rem 1rem; }
.figures .cell + .cell { border-left: 1px solid var(--line); }
.figures .num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 600; line-height: 1.1; color: var(--ink);
  letter-spacing: -.02em;
}
.figures .lbl {
  display: block; margin-top: .45rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--text-dim);
}

/* ── Grids ─────────────────────────────────────────────────────────────────── */

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

/* ── Feature box — the reference's .feature-box.fbox-border ────────────────── */

.fbox {
  display: block;
  padding: 2.4rem 1.9rem 2.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t), background-color var(--t);
}
a.fbox:hover { border-color: var(--pulse); background: var(--pulse-wash); }
.fbox-icon {
  display: grid; place-items: center;
  width: 66px; height: 66px; margin: 0 auto 1.4rem;
  border: 1px solid var(--pulse);
  border-radius: 50%;
  color: var(--pulse-ink);
  transition: background-color var(--t), color var(--t);
}
a.fbox:hover .fbox-icon { background: var(--pulse); color: #fff; }
.fbox h3 { margin-bottom: .5em; }
.fbox p { margin: 0; font-size: .93rem; color: var(--text); }
.fbox-more {
  display: inline-block; margin-top: 1.1rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pulse-ink);
}
.section.dark .fbox { background: transparent; border-color: rgba(255,255,255,.16); }
.section.dark .fbox p { color: var(--on-night-dim); }
.section.dark .fbox-icon { border-color: var(--pulse-lift); color: var(--pulse-lift); }

/* ── Plain card ────────────────────────────────────────────────────────────── */

.card {
  padding: 1.9rem 1.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}
.card h3 { margin-bottom: .45em; }
.card p { margin: 0; font-size: .93rem; }
.card .num-mark {
  display: inline-block; margin-bottom: .9rem;
  font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
  color: var(--pulse-ink); line-height: 1;
}
.section.alt .card { background: var(--paper); }

/* ── Promo band — the reference's .promo.promo-border.promo-full ───────────── */

.promo {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--paper);
}
.promo-copy { flex: 1 1 22rem; }
.promo h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  margin-bottom: .3em;
}
.promo h3 em {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  color: var(--pulse-ink);
}
.promo p { margin: 0; font-size: .93rem; color: var(--text-dim); }
.promo .btn { flex: none; }
.section.dark .promo { background: transparent; border-color: rgba(255,255,255,.2); }
.section.dark .promo p { color: var(--on-night-dim); }
.section.dark .promo h3 em { color: var(--pulse-lift); }

/* ── Explainer — the reference's vertical pill nav, rebuilt without JS ─────── */

.explainer { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2.75rem; }
.rail { position: sticky; top: 96px; align-self: start; }
.rail ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.rail li { margin: 0; }
.rail li + li { border-top: 1px solid var(--line); }
.rail a {
  display: flex; align-items: center; gap: .7rem;
  padding: .95rem 1.1rem;
  color: var(--ink); text-decoration: none;
  font-size: .9rem; font-weight: 550;
  background: var(--paper);
  transition: background-color var(--t), color var(--t);
}
.rail a:hover { background: var(--pulse-wash); color: var(--pulse-deep); }
.rail-icon { display: grid; place-items: center; color: var(--pulse-ink); flex: none; }
.rail-chev { margin-left: auto; color: var(--line-2); font-size: 1.1rem; line-height: 1; }
.rail a:hover .rail-chev { color: var(--pulse-ink); }

.panels > .panel + .panel { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.panel { scroll-margin-top: 96px; }
.panel h3 { font-size: 1.32rem; margin-bottom: .55em; }
.panel > :last-child { margin-bottom: 0; }

/* ── Device grid — the reference's six-up .clients-grid ────────────────────── */
/* Logos are forbidden on this site (references/apps.md, "Trademarks"), so the
   grid keeps its geometry and carries text. */

.device-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
.device-grid li { margin: 0; border-right: 1px solid var(--line); }
.device-grid li:last-child { border-right: 0; }
.device-grid a {
  display: flex; flex-direction: column; justify-content: center; gap: .3rem;
  min-height: 108px; padding: 1.2rem 1rem;
  text-align: center; text-decoration: none;
  background: var(--paper);
  transition: background-color var(--t);
}
.device-grid a:hover { background: var(--pulse-wash); }
.dev-label { font-size: .95rem; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.dev-sub { font-size: .75rem; color: var(--text-dim); }
.device-grid a:hover .dev-label { color: var(--pulse-deep); }

/* ── Full-width bar — the reference's .button-full ─────────────────────────── */

.full-bar {
  display: block;
  background: var(--pulse-ink);
  color: #fff;
  text-decoration: none;
  padding: clamp(1.4rem, 3vw, 2.1rem) 0;
  font-size: clamp(1rem, 2vw, 1.28rem);
  font-weight: 500;
  text-align: center;
  transition: background-color var(--t);
}
.full-bar:hover { background: var(--pulse-deep); color: #fff; }
.full-bar strong { color: #fff; font-weight: 700; }
.full-caret { margin-left: .5rem; font-weight: 700; }

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

.article { padding: var(--pad) 0; }
.article .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 3.5rem; }
.col-main { min-width: 0; }
.col-main > h2 {
  margin-top: 2.5em;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 96px;
}
.col-main > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.col-main > h3 { margin-top: 2em; scroll-margin-top: 96px; }
.col-main figure { margin: 0 0 2rem; }
.col-main figure img { border-radius: var(--r); width: 100%; }

.toc { grid-column: 2; grid-row: 1; position: sticky; top: 96px; align-self: start; font-size: .875rem; }
.toc h2 {
  font-size: .715rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: .9rem;
}
.toc ul { list-style: none; margin: 0 0 2rem; padding: 0; }
.toc li { margin: 0; border-left: 2px solid var(--line); }
.toc a {
  display: block; padding: .38rem 0 .38rem .85rem;
  color: var(--text); text-decoration: none;
}
.toc a:hover { color: var(--pulse-deep); }
.toc li:hover { border-left-color: var(--pulse); }
.toc .related a {
  display: block; padding: .38rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--pulse-ink);
}

/* ── Answer / not-this ─────────────────────────────────────────────────────── */

.answer {
  background: var(--pulse-wash);
  border-left: 3px solid var(--pulse);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1.4rem 1.6rem;
  margin: 0 0 1.25rem;
}
.answer .kicker { margin-bottom: .5rem; }
.answer p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.62; color: var(--ink); }
.answer > :last-child { margin-bottom: 0; }

.not-this {
  background: var(--paper-2);
  border-left: 3px solid var(--line-2);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1.25rem 1.6rem;
  margin: 0 0 2rem;
  color: var(--text-dim);
  font-size: .95rem;
}
.not-this .kicker { color: var(--text-dim); margin-bottom: .45rem; }
.not-this > :last-child { margin-bottom: 0; }

/* ── Notes ─────────────────────────────────────────────────────────────────── */

.note {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper-2);
  padding: 1.3rem 1.5rem;
  margin: 0 0 2rem;
  font-size: .95rem;
}
.note > :last-child { margin-bottom: 0; }
.note.key { border-color: var(--pulse); background: var(--pulse-wash); }
.note.fee { border-color: var(--line-2); background: var(--paper); }
.note.warn { border-color: #E9C8C5; background: var(--warn-wash); }
.note.warn strong { color: var(--warn); }
.dated {
  display: inline-block;
  font-size: .74rem; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.third-party {
  font-size: .88rem;
  color: var(--text-dim);
  border-left: 2px solid var(--line-2);
  padding-left: .95rem;
}

.inline-cta {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 1.3rem 1.5rem;
  margin: 0 0 2rem;
  background: var(--paper);
  font-size: .95rem;
}
.inline-cta > :last-child { margin-bottom: 0; }

/* ── Lists ─────────────────────────────────────────────────────────────────── */

.checks { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.checks li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; font-size: .92rem; }
.checks svg { position: absolute; left: 0; top: .32em; color: var(--pulse); }
.checks span { color: var(--text); }

.steps { list-style: none; counter-reset: step; margin: 0 0 2rem; padding: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3.1rem;
  margin-bottom: 1.4rem;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -.1rem;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border: 1px solid var(--pulse);
  border-radius: 50%;
  font-family: var(--serif); font-size: .95rem; font-weight: 600;
  color: var(--pulse-ink);
}
.steps strong { display: block; margin-bottom: .2rem; }

.tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.tag-link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink); text-decoration: none;
  font-size: .875rem; font-weight: 550;
  transition: border-color var(--t), background-color var(--t), color var(--t);
}
.tag-link:hover { border-color: var(--pulse); background: var(--pulse-wash); color: var(--pulse-deep); }

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

.scroller { overflow-x: auto; margin: 0 0 2rem; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%; border-collapse: collapse;
  font-size: .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
table.data caption {
  caption-side: bottom;
  padding-top: .8rem;
  font-size: .82rem; color: var(--text-dim); text-align: left;
}
table.data th, table.data td {
  padding: .72rem .9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
table.data thead th {
  background: var(--paper-2);
  font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:nth-child(even) { background: var(--paper-2); }
table.data .r { text-align: right; font-variant-numeric: tabular-nums; }

.stream-grid td.p, .stream-grid th.p { text-align: center; font-variant-numeric: tabular-nums; }
.stream-grid td.w { white-space: nowrap; font-weight: 600; color: var(--ink); }
/* A zero is a value, not an absence, and it is the most important cell in the
   table. The chip hugs the digit rather than filling the cell — filling it reads
   as a rendering fault. The digit stays a real text node. */
.stream-grid td.zero b {
  display: inline-block; min-width: 2.1em;
  background: var(--night); color: #fff;
  border-radius: var(--r-btn);
  padding: .1rem .35rem;
  font-weight: 700;
}
.grid-note { font-size: .85rem; color: var(--text-dim); margin-top: -1.25rem; margin-bottom: 2rem; }

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

.queries { border-top: 1px solid var(--line); margin-bottom: 2rem; }
.queries details { border-bottom: 1px solid var(--line); }
.queries summary {
  list-style: none; cursor: pointer;
  padding: 1.05rem 2.5rem 1.05rem 0;
  position: relative;
  font-weight: 600; color: var(--ink); font-size: 1rem;
  min-height: 44px;
}
.queries summary::-webkit-details-marker { display: none; }
.queries summary::after {
  content: '›';
  position: absolute; right: .6rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem; line-height: 1; color: var(--pulse-ink);
  transition: transform var(--t);
}
.queries details[open] summary::after { transform: translateY(-50%) rotate(90deg); }
.queries summary:hover { color: var(--pulse-deep); }
.queries details > div { padding: 0 2.5rem 1.3rem 0; font-size: .95rem; }
.queries details > div > :last-child { margin-bottom: 0; }

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

.ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.15rem; margin-bottom: 2rem; }
.tier {
  position: relative;
  display: flex; flex-direction: column;
  padding: 2.1rem 1.35rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}
.tier-pick { border-color: var(--pulse); box-shadow: var(--shadow-lg); }
.tier-label {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  white-space: nowrap;
  background: var(--pulse-ink); color: #fff;
  padding: .28rem .8rem;
  border-radius: var(--r-btn);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.tier-label-plain { background: var(--paper-3); color: var(--text-dim); }
.tier h3 { font-size: 1.02rem; margin-bottom: .35em; }
.tier .price {
  font-family: var(--serif); font-size: 2.35rem; font-weight: 600; line-height: 1;
  color: var(--ink); letter-spacing: -.02em;
}
.tier .price span { font-size: 1.1rem; font-weight: 400; }
.tier .per { font-size: .78rem; color: var(--text-dim); margin: .4rem 0 1.1rem; }
.tier .checks { margin-bottom: 1.4rem; }
.tier .checks li { font-size: .84rem; }
.tier .btn { margin-top: auto; width: 100%; }

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

.cta-band .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.cta-band h2 { margin-bottom: .3em; }
.cta-band .lede { margin-bottom: 0; max-width: 42rem; }
.cta-band .btn-primary { background: var(--pulse); border-color: var(--pulse); color: var(--night); }
.cta-band .btn-primary:hover { background: var(--pulse-lift); border-color: var(--pulse-lift); color: var(--night); }

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

.related-block .entry {
  display: block;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  text-decoration: none;
  transition: border-color var(--t);
}
.related-block .entry:hover { border-color: var(--pulse); }
.related-block .entry h3 { margin-bottom: .35em; font-size: 1.05rem; }
.related-block .entry p { margin: 0; font-size: .9rem; color: var(--text-dim); }

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

.site-foot { background: var(--night); color: var(--on-night-dim); font-size: .9rem; }
.site-foot .container { padding-block: 0; }
.foot-cols {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 2.5rem;
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}
.foot-brand .brand { color: #fff; margin-bottom: 1.1rem; }
.foot-brand .brand b { color: var(--pulse-lift); }
.foot-brand .brand .mark { color: var(--pulse-lift); }
.foot-brand p { max-width: 34rem; line-height: 1.7; }
.foot-contact span {
  display: inline-block; min-width: 6.5rem;
  color: #fff; font-weight: 600; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.site-foot h2 {
  color: #fff; font-size: .74rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .55rem; }
.site-foot a { color: var(--on-night-dim); text-decoration: none; }
.site-foot a:hover { color: var(--pulse-lift); text-decoration: underline; }

.foot-legal { background: var(--night-2); padding: 1.6rem 0; font-size: .8rem; line-height: 1.7; }
.foot-legal .container { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.foot-legal p { margin: 0; max-width: 62ch; color: #8B9298; }
.foot-links { white-space: nowrap; }
.foot-legal a { color: #8B9298; }

/* ── 404 ───────────────────────────────────────────────────────────────────── */

.notfound { padding: clamp(4rem, 9vw, 8rem) 0; text-align: center; }
.notfound .tags { justify-content: center; }

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

   **Three constants must move together** or the audits assert the wrong thing
   while still passing: the 1080px rule below, NAV_BREAKPOINT in
   scripts/audit-nav.js, and the desktop viewports in scripts/audit-layout.js.

   The nav has its own breakpoint above the layout one: six labels plus the
   wordmark and a pill need roughly 1080px on one line, while the rest of the
   layout is still comfortable in two columns down to 900.

   `white-space: nowrap` on `.desktop-nav li` is load-bearing. Without it a label
   wraps to a second line, which produces **no horizontal overflow** and still
   looks broken — the overflow audit would pass it. With nowrap the same
   condition becomes overflow, which `npm run audit` does catch.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── The ladder inside the article column ──────────────────────────────────
   Five tiers work in a full-width section: the container caps at 1180px, so
   each tier gets ~223px and a feature line wraps to two.

   Inside `.col-main` the same five tiers have ~788px — the container minus the
   272px TOC and the 56px gap — which is 157px each, about fourteen characters a
   line. "Hela utbudet öppet direkt, ingenting spärrat" becomes six lines and the
   tier is unreadable.

   **And it produces no horizontal overflow at all**, so `npm run audit` passes
   it. It is the class of problem the layout audit cannot see, and it was found
   by looking at a screenshot. The min-width guard matters: without it this rule
   outranks the 2-up and 1-up rules further down by specificity and the ladder
   stays three columns on a phone. */
@media (min-width: 761px) {
  .col-main .ladder { grid-template-columns: repeat(3, 1fr); }
  .col-main .tier-trial { grid-column: span 3; }
  .col-main .tier-trial .checks { columns: 2; column-gap: 2rem; }
}

@media (max-width: 1200px) {
  .desktop-nav ul { gap: 1.15rem; }
  .desktop-nav a { font-size: .82rem; }
}

@media (max-width: 1120px) {
  .ladder { grid-template-columns: repeat(3, 1fr); }
  .tier-trial { grid-column: span 3; }
  .tier-trial .checks { columns: 2; column-gap: 2rem; }
}

@media (max-width: 1080px) {
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
  .masthead .nav { gap: 1rem; }
  .masthead { position: relative; }
  .masthead.over { position: absolute; }
}

@media (max-width: 980px) {
  .article .wrap { grid-template-columns: 1fr; gap: 2rem; }
  .toc { grid-column: 1; grid-row: auto; position: static; }
  .toc ul { margin-bottom: 1.5rem; }
  .toc .related { display: none; }
  .explainer { grid-template-columns: 1fr; gap: 1.75rem; }
  .rail { position: static; }
  .device-grid { grid-template-columns: repeat(3, 1fr); }
  .device-grid li { border-bottom: 1px solid var(--line); }
  .device-grid li:nth-child(3n) { border-right: 0; }
}

@media (max-width: 900px) {
  .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
  .foot-cols { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .foot-brand { grid-column: span 2; }
}

@media (max-width: 760px) {
  .ladder { grid-template-columns: repeat(2, 1fr); }
  .tier-trial { grid-column: span 2; }
  .figures .container { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0; }
  .figures .cell:nth-child(odd) { border-left: 0; }
  .figures .cell:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 1.25rem; }
  .cta-band .container { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .device-grid { grid-template-columns: repeat(2, 1fr); }
  .device-grid li:nth-child(3n) { border-right: 1px solid var(--line); }
  .device-grid li:nth-child(2n) { border-right: 0; }
  .ladder { grid-template-columns: 1fr; }
  .tier-trial { grid-column: span 1; }
  .tier-trial .checks { columns: 1; }
  .promo { flex-direction: column; align-items: flex-start; }
  .promo .btn { width: 100%; }
  .foot-legal .container { flex-direction: column; }
}

/* The header CTA is hidden below 480px, and that is not cosmetic — the wordmark,
   the hamburger and a pill carrying a price do not fit a 360px viewport, and the
   overflow shows up as 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 CTA band. */
@media (max-width: 480px) {
  .masthead .btn-sm { display: none; }
  .foot-cols { grid-template-columns: 1fr; }
  .foot-brand { grid-column: span 1; }
  .hero-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .masthead, .site-foot, .full-bar, .cta-band, .toc, .hero-actions { display: none; }
  body { font-size: 11pt; }
}