/* mysmartiptv.se — governed by references/design.md.
   If the two disagree, the document is wrong; update it to match this file.

   The look is Polo (InspiroThemes), home-creative demo. The implementation is
   not: the reference is Bootstrap 4 + jQuery + Flickity + Font Awesome 5 + a
   bespoke icon font. This is one stylesheet.

   Layout order:
     1  tokens          6  hero              11 tables
     2  reset + type    7  sections          12 ladder
     3  fonts           8  cards / icon-box  13 marquee / enlist
     4  ticker + nav    9  symptom grid      14 footer
     5  article + TOC  10  notes / answer    15 breakpoints
*/

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root {
  /* The accent is hue 42°, chosen because that band was empty. The reference
     design's own blue could not be used; the reasoning, and the measurements
     behind it, are in references/design.md — which does not ship.

     **Nothing that names another property may appear in this file.** styles.css
     is served to every visitor, so a comment here is public. The first version
     of this block named two of them and `npm run deploy` refused the build,
     which is exactly what that scan is for. */
  --amber:      #F2A20C;              /* 2,11:1 on white — SHAPES ONLY, never type */
  --amber-ink:  #8A5A00;              /* 5,93:1 on white — links, buttons with type */
  --amber-deep: #6B4500;              /* 8,48:1 on white — hover, type on the wash */
  --amber-lift: #FFC24D;              /* 11,37:1 on --night — accent on the dark band */
  --amber-wash: #FDF4E1;
  --amber-veil: rgba(242,162,12,.16);

  --ink:    #1F1F1F;                  /* 16,48:1 — Polo's own heading colour */
  --ink-2:  #484848;                  /*  9,15:1 — Polo's own body colour */
  --ink-3:  #6A6A6A;                  /*  5,41:1 */
  --night:  #16181D;                  /* white on it is 18,26:1 */
  --night-2:#0F1114;
  --line:   #E6E8EB;                  /* Polo's own border colour */
  --wash:   #F7F9FB;                  /* Polo's .background-grey, verbatim */
  --paper:  #FFFFFF;

  --display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;

  /* Polo is a low-radius design — 3-6px throughout, nothing rounded but pills.
     That is what separates it from the softer sibling sites. */
  --r-card: 6px;
  --r-btn: 3px;

  --wrap: 1200px;
  --pad: 80px;                        /* Polo's own section padding */
}

/* ── 2. Reset and base type ──────────────────────────────────────────────── */
*, *::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.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  margin: 0;
  font-weight: 700;
  letter-spacing: -.01em;
}
h1 { font-size: 46px; line-height: 1.12; }
h2 { font-size: 33px; line-height: 1.22; }
h3 { font-size: 19px; line-height: 1.35; }

p { margin: 0 0 18px; }
ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin: 0 0 8px; }
strong, b { font-weight: 600; color: var(--ink); }
em { font-style: italic; }
small { font-size: 13px; }

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

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

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

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

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

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

/* Dates on facts that move. references/apps.md marks every one of them
   **rörlig**, and a rörlig fact without its date is the defining failure of
   this domain. */
.dated { color: var(--ink-3); font-size: 13px; white-space: nowrap; }

/* ── 3. Fonts ────────────────────────────────────────────────────────────── */
/* Self-hosted. /vem-vi-ar/ and llms.txt both state that the chat is the only
   outside request this site makes; a fonts.googleapis.com link would make those
   sentences false. See references/design.md, "Typography". */
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/outfit-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: 'Outfit'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/outfit-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: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/plex-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: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/plex-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;
}

/* ── 4. Ticker, masthead, buttons ────────────────────────────────────────── */
.ticker {
  background: var(--night-2); color: #C9CCD2;
  font-size: 12.5px; line-height: 1.4;
}
.ticker .container {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  justify-content: center; align-items: center;
  padding-top: 9px; padding-bottom: 9px;
}
.ticker b { color: #fff; font-weight: 600; }
.ticker .hl { color: var(--amber-lift); font-weight: 600; }

.masthead { background: var(--paper); border-bottom: 1px solid var(--line); }
.masthead .nav {
  display: flex; align-items: center; gap: 26px;
  min-height: 74px;
}
/* The vertical padding is a tap target, not decoration: the wordmark measured
   116×37 at 390px and `npm run audit` wants 44. Same reason for the padding on
   .trail a, .toc a, footer .cols a and the burger below. */
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 0;
  font-family: var(--display); font-size: 21px; font-weight: 400;
  color: var(--ink); text-decoration: none; letter-spacing: -.02em;
  flex: 0 0 auto;
}
.brand b { font-weight: 700; }
.brand .mark { color: var(--amber); flex: 0 0 auto; }

.desktop-nav { display: none; margin-left: auto; }
.desktop-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.desktop-nav li { margin: 0; }
.desktop-nav a {
  display: inline-block; padding: 10px 0;
  font-family: var(--display); font-size: 14px; font-weight: 500;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.desktop-nav a:hover { color: var(--amber-deep); }

.btn {
  display: inline-block;
  font-family: var(--display); font-size: 13px; font-weight: 500;
  letter-spacing: .06em;
  padding: 13px 26px; border-radius: var(--r-btn);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--wash); color: var(--ink); border-color: #D8DBDF; }
.btn-sm { padding: 12px 18px; font-size: 12.5px; }

/* The primary button carries white type, so it uses --amber-ink at 5,93:1 and
   never --amber at 2,11:1. The glow is the reference's, recoloured to the colour
   the button actually is. It appears on the hero CTA and the band CTA only — on
   every button it stops meaning anything. */
.btn-primary {
  background: var(--amber-ink); border-color: var(--amber-ink); color: #fff;
  box-shadow: 0 10px 24px rgba(138,90,0,.28);
}
.btn-primary:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: #fff; }
.masthead .btn-primary { box-shadow: none; margin-left: auto; }
.desktop-nav + .btn-primary { margin-left: 0; }

.btn-ghost { background: transparent; }
.btn-light { background: #fff; border-color: #fff; color: var(--ink); }
.btn-light:hover { background: var(--wash); border-color: var(--wash); color: var(--ink); }
.btn-line { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.btn-line:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

/* Mobile nav is a <details>: no JS, keyboard-accessible for free, and the links
   stay in the HTML source for crawlers. */
.mobile-nav { margin-left: auto; position: relative; }
.mobile-nav > summary {
  list-style: none; cursor: pointer;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-btn);
}
.mobile-nav > summary::-webkit-details-marker { display: none; }
.bars, .bars::before, .bars::after {
  display: block; width: 18px; 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-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  width: min(320px, calc(100vw - 48px));
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 18px 40px rgba(15,17,20,.14);
  padding: 14px;
}
.mobile-panel ul { list-style: none; margin: 0 0 12px; padding: 0; }
.mobile-panel li { margin: 0; border-bottom: 1px solid var(--line); }
.mobile-panel li:last-child { border-bottom: 0; }
.mobile-panel a {
  display: block; padding: 11px 6px;
  font-family: var(--display); font-size: 14.5px; font-weight: 500;
  color: var(--ink); text-decoration: none;
}
.mobile-panel a:hover { color: var(--amber-deep); }
.mobile-panel .btn { display: block; text-align: center; }

/* ── 5. Trail, article, TOC ──────────────────────────────────────────────── */
.trail {
  padding-top: 11px; padding-bottom: 0;
  font-size: 13px; color: var(--ink-3);
}
.trail a { display: inline-block; padding: 11px 0; color: var(--ink-3); text-decoration: none; }
.trail a:hover { color: var(--amber-deep); text-decoration: underline; }
.trail span[aria-hidden] { margin: 0 7px; color: #C4C8CE; }

.article { padding: 30px 0 var(--pad); }
.article-head { max-width: 780px; margin-bottom: 34px; }
.article-head .meta { color: var(--ink-3); font-size: 13.5px; margin-top: 12px; }

.wrap { display: grid; gap: 44px; }
.col-main { min-width: 0; }
.col-main > h2 {
  margin: 44px 0 0; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.col-main > h2 + * { margin-top: 20px; }
.col-main > h3 { margin: 30px 0 12px; }
.col-main figure { margin: 0 0 28px; }
.col-main figure img { border-radius: var(--r-card); width: 100%; }

/* .toc h2 is styled small and uppercase and is still an <h2>. The size is
   presentation; the level is structure. Same for footer .cols h2. */
.toc { min-width: 0; }
.toc h2, footer .cols h2 {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 14px;
}
.toc ul { list-style: none; margin: 0 0 32px; padding: 0; }
.toc li { margin: 0; border-bottom: 1px solid var(--line); }
.toc li:last-child { border-bottom: 0; }
.toc a, .toc .related a {
  display: block; padding: 11px 0;
  font-size: 14px; color: var(--ink-2); text-decoration: none;
}
.toc a:hover { color: var(--amber-deep); }
.toc .related { border-top: 3px solid var(--amber); padding-top: 20px; }
.toc .related a { border-bottom: 1px solid var(--line); }
.toc .related a:last-child { border-bottom: 0; }

/* ── 6. Hero ─────────────────────────────────────────────────────────────── */
/* Polo's full-bleed dark hero. The photograph is a real <img> rather than a CSS
   background, so it can be preloaded as the LCP element, appears in the image
   sitemap and carries alt text. The reference sets it with data-bg-image and a
   script, which does none of that. */
.hero {
  position: relative; overflow: hidden;
  background: var(--night); color: #fff;
  padding: 84px 0;
  isolation: isolate;
}
.hero.full { padding: 132px 0 120px; }
.hero-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,17,20,.62) 0%, rgba(15,17,20,.78) 100%);
}
.hero .container { position: relative; }
.hero-copy { max-width: 760px; }
.hero.full .hero-copy { max-width: 820px; margin: 0 auto; text-align: center; }
.hero .kicker { color: var(--amber-lift); }
.hero h1 { color: #fff; font-size: 52px; }
.hero.full h1 { font-size: 60px; }
.hero .lede {
  font-size: 18px; line-height: 1.62; color: #D5D8DE;
  margin: 20px 0 0; max-width: 640px;
}
.hero.full .lede { margin-left: auto; margin-right: auto; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero.full .hero-actions { justify-content: center; }
.hero-note { font-size: 13.5px; color: #A8ADB6; margin: 18px 0 0; }

/* On the dark hero the primary button flips to the accent at full strength with
   dark type on it. --amber-ink carries white type at 5,93:1 and is the right
   answer on a white ground, but against a near-black photograph it reads as
   muddy brown and the reference's CTA is the loudest thing on the screen.

   This is the same rule as everywhere else, applied the other way round: amber
   cannot carry *white* type, but it carries *dark* type at 8,64:1 on --night.
   The colour never changes what it is allowed to do; only the type on it does. */
.hero .btn-primary {
  background: var(--amber); border-color: var(--amber); color: var(--night);
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
}
.hero .btn-primary:hover { background: var(--amber-lift); border-color: var(--amber-lift); color: var(--night); }

/* ── 7. Sections ─────────────────────────────────────────────────────────── */
.section { padding: var(--pad) 0; background: var(--paper); }
.section.odd { background: var(--wash); }
.section.invert { background: var(--night); color: #C9CCD2; }
.section.invert h2, .section.invert h3 { color: #fff; }
.section.invert .kicker { color: var(--amber-lift); }
.section.invert a { color: var(--amber-lift); }
.section.invert .card { background: #1D2027; border-color: #2A2E37; }
.section.invert .card p { color: #B4B9C1; }

.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.mid { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin: 0; }
.section-head p { margin: 16px 0 0; font-size: 17px; line-height: 1.62; color: var(--ink-3); }
.section.invert .section-head p { color: #A8ADB6; }

/* Polo puts a hairline under a centred section head. Here it is a 40x2 rule in
   the accent — the one place the accent appears at full strength on white, and
   safe there because it is a shape rather than type. */
.section-head h2::after {
  content: ''; display: block;
  width: 40px; height: 2px; background: var(--amber);
  margin-top: 22px;
}
.section-head.mid h2::after { margin-left: auto; margin-right: auto; }

/* ── 8. Cards, icon boxes, checks, steps, tags ───────────────────────────── */
.grid { display: grid; gap: 24px; }
/* **A grid item's default `min-width: auto` is min-content, not zero.** A column
   holding a `.scroller` whose table has `min-width: 480px` therefore refuses to
   shrink below 480, and the whole document scrolls sideways on a 360px phone —
   while the scroller itself looks perfectly well behaved, because it is the
   *track* that will not narrow, not the table. `npm run audit` reported it as
   504px of overflow on the homepage and pointed at the marquee, which was
   merely the widest thing it could see. */
.grid > * { min-width: 0; }
.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: 26px;
}
.section.odd .card { background: var(--paper); }
.card h3 { margin: 0 0 10px; }
.card p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.card .num-mark {
  display: block; font-family: var(--display); font-size: 13px; font-weight: 600;
  color: var(--amber-deep); letter-spacing: .1em; margin-bottom: 10px;
}
a.card { text-decoration: none; display: block; }
a.card:hover { border-color: var(--amber); }

/* Polo's .icon-box: a round icon on the left, heading and body indented past
   it. The disc is a shape and may be --amber; the heading beside it is text and
   is --ink. */
.icon-box { position: relative; padding-left: 74px; text-decoration: none; display: block; }
.icon-box .icon {
  position: absolute; left: 0; top: 2px;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--amber-veil); color: var(--amber-deep);
  display: grid; place-items: center;
}
.icon-box h3 { margin: 6px 0 8px; font-size: 17px; }
.icon-box p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
a.icon-box:hover h3 { color: var(--amber-deep); }
.section.invert .icon-box .icon { background: rgba(255,194,77,.14); color: var(--amber-lift); }
.section.invert .icon-box p { color: #B4B9C1; }

.checks { list-style: none; margin: 0 0 18px; padding: 0; }
.checks li { position: relative; padding-left: 24px; margin-bottom: 9px; font-size: 14.5px; }
.checks svg { position: absolute; left: 0; top: 5px; color: var(--amber); }
.checks span { color: var(--ink-2); }
.section.invert .checks span { color: #C9CCD2; }
.section.invert .checks svg { color: var(--amber-lift); }

.steps { list-style: none; counter-reset: s; margin: 0 0 22px; padding: 0; }
.steps li {
  counter-increment: s; position: relative;
  padding: 0 0 20px 48px; margin: 0;
  border-left: 1px solid var(--line); margin-left: 13px;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(s);
  position: absolute; left: -14px; top: 0;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--amber-ink); color: #fff;
  font-family: var(--display); font-size: 13px; font-weight: 600;
  display: grid; place-items: center;
}
.steps strong { display: block; font-family: var(--display); font-size: 16px; margin-bottom: 5px; }

.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-link {
  display: inline-block;
  font-family: var(--display); font-size: 13px; font-weight: 500;
  padding: 10px 15px; border: 1px solid var(--line); border-radius: var(--r-btn);
  color: var(--ink-2); text-decoration: none; background: var(--paper);
}
.tag-link:hover { border-color: var(--amber); color: var(--amber-deep); }

/* ── 9. Symptom grid ─────────────────────────────────────────────────────── */
/* This site's version of Polo's zero-gutter portfolio grid. In the reference the
   tiles are portfolio pieces; here each one is a fault.

   The caption is always in the DOM, never hover-only. Polo fades
   .portfolio-description in over the image on :hover; a caption that exists only
   on hover is invisible to a crawler, to a screen reader and to every phone. */
.symptom-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.symptom {
  position: relative; display: block; overflow: hidden;
  text-decoration: none; background: var(--night);
  aspect-ratio: 4 / 3;
}
/* **The photograph has to be visible.** The first build ran the img at
   opacity:.5 over a --night ground with a gradient to .85 on top of that, and
   the result was eight tiles that read as flat black rectangles — the images
   loaded, were correct, and could not be seen. In the reference the photograph
   is the tile and the overlay is what moves on hover, so that is what happens
   here: the picture sits at .92, and hovering darkens it to bring the caption
   forward rather than the other way round. */
.symptom img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.001);
  transition: transform .5s ease, opacity .3s;
  opacity: .92;
}
.symptom:hover img { transform: scale(1.06); opacity: .55; }
.symptom .cap {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  display: block; padding: 26px 22px 22px;
  background: linear-gradient(180deg, rgba(15,17,20,0) 0%, rgba(15,17,20,.72) 42%, rgba(15,17,20,.94) 100%);
}
.symptom .stamp {
  display: block; font-family: var(--display);
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber-lift); margin-bottom: 7px;
}
.symptom .h3 {
  display: block; font-family: var(--display); font-size: 19px; font-weight: 700;
  color: #fff; line-height: 1.25; letter-spacing: -.01em;
}
.symptom .p { display: block; font-size: 13.5px; color: #C0C4CB; margin-top: 6px; }
.symptom:hover .h3 { color: var(--amber-lift); }

/* ── 10. Answer, not-this, notes, inline CTA, FAQ ────────────────────────── */
/* On a fault page .answer names the cause, not the symptom. .not-this names the
   reader's wrong theory, which is what stops them acting on the right one. */
.answer {
  background: var(--amber-wash); border-left: 3px solid var(--amber);
  border-radius: var(--r-card); padding: 22px 24px; margin: 0 0 4px;
}
.answer .kicker { color: var(--amber-deep); }
.answer p { margin: 0 0 12px; font-size: 15.5px; }
.answer p:last-child { margin-bottom: 0; }

.not-this {
  background: var(--wash); border-left: 3px solid var(--line);
  border-radius: var(--r-card); padding: 20px 24px; margin: 12px 0 30px;
}
.not-this .kicker { color: var(--ink-3); }
.not-this p { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-3); }
.not-this p:last-child { margin-bottom: 0; }

.note {
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 20px 22px; margin: 0 0 24px; background: var(--paper);
}
.note p { margin: 0 0 12px; font-size: 14.5px; }
.note p:last-child { margin-bottom: 0; }
.note.warn { border-color: #E7D6A8; background: #FEFAF0; }
/* The two-address fact. See references/apps.md — it is the most useful
   paragraph on the site, so it is the one note that is allowed to shout. */
.note.key { border-color: var(--amber); border-left-width: 3px; background: var(--amber-wash); }
.note.fee { border-color: var(--line); background: var(--wash); }

/* Every page that names a third-party app carries this in its own words. Not a
   footer disclaimer — a sentence in the paragraph where the app is named. */
.third-party {
  font-size: 13.5px; color: var(--ink-3);
  border-left: 2px solid var(--line); padding-left: 14px;
  margin: 0 0 22px;
}

.inline-cta {
  background: var(--wash); border-radius: var(--r-card);
  padding: 18px 22px; margin: 26px 0; font-size: 14.5px;
}

.queries { margin: 0 0 26px; }
.queries details { border-bottom: 1px solid var(--line); }
.queries summary {
  cursor: pointer; list-style: none; padding: 16px 30px 16px 0; position: relative;
  font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--ink);
}
.queries summary::-webkit-details-marker { display: none; }
.queries summary::after {
  content: ''; position: absolute; right: 6px; top: 24px;
  width: 8px; height: 8px; border-right: 2px solid var(--amber-ink);
  border-bottom: 2px solid var(--amber-ink); transform: rotate(45deg);
  transition: transform .2s;
}
.queries details[open] summary::after { transform: rotate(-135deg); top: 27px; }
.queries div { padding: 0 0 18px; font-size: 14.5px; }
.queries div p:last-child { margin-bottom: 0; }

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

/* The headroom table. The counts stay real text in real cells — they are the
   loudest numbers on the site 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. audit-a11y check 6 catches it. */
.stream-grid td.w, .stream-grid th.w { white-space: nowrap; font-weight: 600; color: var(--ink); }
.stream-grid td.p, .stream-grid th.p { text-align: center; font-variant-numeric: tabular-nums; }
.stream-grid td.p { font-size: 15px; color: var(--ink); }

/* A zero is a value, not an absence, and it is the most important cell in the
   table — a 10 Mbit/s line carries no 4K stream at all. The chip hugs the digit
   rather than filling the cell; filling it reads as a rendering fault. The digit
   stays a text node inside the wrapper, so the a11y check and verify check 9
   both still see it. */
.stream-grid td.zero b {
  display: inline-block; min-width: 2.1em;
  background: var(--night); color: #fff;
  border-radius: 3px; padding: 1px 6px; font-weight: 600;
}

/* ── 12. Price ladder ────────────────────────────────────────────────────── */
.ladder { display: grid; grid-template-columns: 1fr; gap: 20px; }
.tier {
  position: relative; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 30px 24px 24px;
}
/* The picked tier gets the lifted shadow; the others keep a 1px border so
   nothing shifts by a pixel between them. */
.tier-pick { border-color: transparent; box-shadow: 0 18px 40px rgba(15,17,20,.10); }
.tier-label {
  position: absolute; top: 0; left: 24px; transform: translateY(-50%);
  white-space: nowrap;                 /* a second line grows DOWN into the h3 */
  font-family: var(--display); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--amber-ink); color: #fff;
  padding: 5px 11px; border-radius: 2px;
}
.tier-label-plain { background: var(--ink); }
.tier h3 { font-size: 17px; margin: 0 0 4px; }
.price {
  font-family: var(--display); font-size: 42px; font-weight: 700;
  color: var(--ink); line-height: 1.1; letter-spacing: -.02em;
}
.price span { font-size: 19px; font-weight: 500; color: var(--ink-3); }
.per { font-size: 13px; color: var(--ink-3); margin: 4px 0 18px; }
.tier .checks { margin-bottom: 20px; }
.tier .btn { display: block; text-align: center; }

/* ── 13. Figures strip, marquee, enlist band, related ────────────────────── */
.figures { background: var(--wash); padding: 56px 0; }
.figures .container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
.figures .cell { text-align: center; }
.figures .num {
  display: block; font-family: var(--display); font-size: 40px; font-weight: 700;
  color: var(--ink); line-height: 1.1; letter-spacing: -.02em;
}
/* Polo's .seperator-small: a hairline under each figure. */
.figures .cell::after {
  content: ''; display: block; width: 40px; height: 1px;
  background: var(--line); margin: 14px auto;
}
.figures .lbl { display: block; font-size: 13px; color: var(--ink-3); }

/* Replaces Polo's client-logo carousel, which cannot ship here at all: a row of
   third-party logos is the exact shape of an affiliation claim. See
   references/apps.md, "Trademarks". */
.marquee { overflow: hidden; background: var(--night); padding: 16px 0; }
.track { display: flex; width: max-content; animation: slide 44s linear infinite; }
.run { display: flex; }
.run span {
  font-family: var(--display); font-size: 13px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: #8D939C; padding: 0 26px; white-space: nowrap;
}
.run span::after { content: '·'; margin-left: 26px; color: var(--amber); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .track { animation: none; }
  .run[aria-hidden] { display: none; }
}

.enlist { background: var(--amber-ink); color: #fff; padding: 56px 0; }
.enlist .container {
  display: flex; flex-direction: column; gap: 24px;
  align-items: flex-start;
}
.enlist .kicker { color: #F6DFB4; }
.enlist h2 { color: #fff; margin: 0 0 10px; font-size: 28px; }
.enlist p { margin: 0; color: #F4E5C9; max-width: 620px; font-size: 15px; }

.related-block { background: var(--wash); padding: var(--pad) 0; }
.related-block .entry {
  display: block; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 24px; text-decoration: none;
}
.related-block .entry:hover { border-color: var(--amber); }
.related-block .entry h3 { margin: 0 0 8px; font-size: 17px; }
.related-block .entry p { margin: 0; font-size: 14px; color: var(--ink-3); }

/* ── 14. Footer ──────────────────────────────────────────────────────────── */
footer { background: var(--wash); border-top: 1px solid var(--line); }
footer .cols {
  display: grid; grid-template-columns: 1fr; gap: 34px;
  padding: 56px 0 40px;
}
footer .brand { margin-bottom: 16px; }
.foot-blurb { font-size: 14px; color: var(--ink-3); margin: 0; max-width: 380px; }
footer .cols ul { list-style: none; margin: 0; padding: 0; }
footer .cols li { margin: 0; }
footer .cols a { display: inline-block; padding: 10px 0; font-size: 14px; color: var(--ink-2); text-decoration: none; }
footer .cols a:hover { color: var(--amber-deep); text-decoration: underline; }
.legal {
  border-top: 1px solid var(--line);
  padding: 22px 0 26px;
  font-size: 12.5px; line-height: 1.7; color: var(--ink-3);
}

/* ── 15. Breakpoints ─────────────────────────────────────────────────────── */
/* The masthead CTA is hidden below 480px. Not cosmetic: the wordmark, the nav
   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: 479px) {
  /* **The direct child only.** `.masthead .btn-primary` also matches the order
     button inside the mobile panel, because the <details> sits inside the
     masthead — so the first version of this rule hid the one button that is
     supposed to survive here, at exactly the width where it is the only way to
     order. `npm run audit-nav` caught it as a zero-size tap target at 360 and
     390px; nothing about the page looked wrong. */
  .masthead .nav > .btn-primary { display: none; }
  h1 { font-size: 33px; }
  .hero h1, .hero.full h1 { font-size: 32px; }
  h2, .section-head h2 { font-size: 26px; }
  .hero { padding: 56px 0; }
  .hero.full { padding: 72px 0 64px; }
  .price { font-size: 36px; }
  :root { --pad: 56px; }
}

@media (min-width: 480px) {
  .symptom-grid { grid-template-columns: repeat(2, 1fr); }
}

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

@media (min-width: 700px) {
  .g2, .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
  .ladder { grid-template-columns: repeat(2, 1fr); }
  .enlist .container { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 900px) {
  .wrap { grid-template-columns: minmax(0, 1fr) 260px; }
  /* Explicit placement: the TOC is emitted BEFORE .col-main so the phone stack
     reads h1 → meta → contents → body. On desktop it goes back to the right. */
  .toc { grid-column: 2; grid-row: 1; }
  .col-main { grid-column: 1; grid-row: 1; }
  .g3 { grid-template-columns: repeat(3, 1fr); }
  .g4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1000px) {
  .ladder { grid-template-columns: repeat(3, 1fr); }
  .symptom-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 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-1120 viewports in audit-layout.js. */
@media (min-width: 1120px) {
  .desktop-nav { display: block; }
  .mobile-nav { display: none; }
  .masthead .btn-primary { margin-left: 0; }
  .symptom-grid { grid-template-columns: repeat(4, 1fr); }
}

/* The ladder's feature lines are sentences, not "Catch-up ✓". At 1000-1199px in
   five columns they wrap to three words each and become unreadable WHILE
   PRODUCING NO HORIZONTAL OVERFLOW AT ALL, so npm run audit passes it. Found by
   looking, not by an audit. */
@media (min-width: 1200px) {
  .ladder { grid-template-columns: repeat(5, 1fr); }
  .tier { padding: 30px 18px 20px; }
  .tier .checks li { font-size: 13px; }
  .price { font-size: 38px; }
}

@media print {
  .ticker, .masthead, .enlist, .marquee, .related-block, footer, .toc { display: none; }
  .hero { background: none; color: #000; padding: 0; }
  .hero h1 { color: #000; }
  .hero-img, .hero-veil { display: none; }
  body { font-size: 11pt; }
}