/*
  The page is a TV guide: a time ruler with a red NOW marker, program blocks, a schedule, a pricing grid.
  Dark only, to match the app (design/website-a-full.dc.html is the spec).
*/

:root {
  --bg: #0a0c10;
  --well: #0e1218;
  --surface: #12171e;
  --raised: #171d26;
  --line: #262e38;
  --line-soft: #1b222b;
  --fg: #f4f6f8;
  --muted: #a3adba;
  --dim: #8591a0;
  --accent: #4fe3c1;
  --on-accent: #04201a;
  --accent-soft: #12302b;
  --accent-track: #26443e;
  --amber: #e0a458;
  --live: #ff5c5c;
  --frame: #1b222b;
  --tw: 8.1rem;
  --pad: clamp(1rem, 4.4vw, 3.5rem);
  --font-display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html { overflow-x: clip; }

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

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  background: var(--accent); color: var(--on-accent); padding: 0.6rem 1rem; border-radius: 0.5rem; font-weight: 600;
}
.skip:focus { top: 1rem; }

.wrap {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-left: max(var(--pad), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
}

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Header ---------- */

/* The header stays on screen: at the top it looks as it always did, and once the page has moved (js/header.js adds "scrolled") it goes
   slim with a soft background and a line under it. The link of the section being read is lit (js/header.js adds "active"). */
.site-header {
  padding-block: 1.4rem; position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid transparent; transition: padding-block 0.18s, background-color 0.18s, border-color 0.18s;
}
.site-header.scrolled { padding-block: 0.65rem; background: rgba(10, 12, 16, 0.88); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nav a.active { color: var(--fg); box-shadow: 0 2px 0 var(--accent); border-radius: 1px; }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--fg); text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; }
.brand svg { width: 1.9rem; height: 1.9rem; }

.nav { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.nav a:hover { color: var(--fg); }
/* The header menus (Features, Updates, Help): the trigger is a link, js/header.js opens the menu on hover, click and keyboard; without
   JavaScript the menu opens on hover or focus. tools/website-nav/build_nav.py writes the markup. */
.nav-group { position: relative; }
.nav-group::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.7rem; }
.nav-trigger::after { content: ""; display: inline-block; margin-left: 0.4rem; border: 0.27rem solid transparent; border-top-color: currentColor; border-bottom-width: 0; opacity: 0.7; vertical-align: 0.1em; }
.nav-menu {
  display: none; position: absolute; top: calc(100% + 0.5rem); left: -0.9rem; z-index: 40; min-width: 13.5rem; margin: 0; padding: 0.4rem; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 0.8rem; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
.nav-end .nav-menu { left: auto; right: -0.6rem; }
.nav-group.open > .nav-menu, html:not(.js) .nav-group:hover > .nav-menu, html:not(.js) .nav-group:focus-within > .nav-menu { display: block; }
.nav-group.open > .nav-trigger { color: var(--fg); }
.nav-menu a { display: block; padding: 0.5rem 0.8rem; border-radius: 0.5rem; white-space: nowrap; box-shadow: none; }
.nav-menu a:hover { background: var(--raised); }
.nav .nav-menu a.active, .nav .nav-menu a[aria-current="page"] { color: var(--accent); box-shadow: none; }
.nav .nav-trigger.active { color: var(--fg); box-shadow: 0 2px 0 var(--accent); }
.nav a.pill, .pill {
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 0.9rem; padding: 0.65rem 1.25rem;
  border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.nav a.pill:hover { color: var(--on-accent); filter: brightness(1.07); }

/* Language switch (EN | PL) */
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font-size: 0.85rem; font-weight: 650; line-height: 1; }
.lang-switch a, .lang-switch .current { padding: 0.4rem 0.75rem; text-decoration: none; }
.lang-switch a { color: var(--muted); }
.lang-switch a:hover { color: var(--fg); background: var(--raised); }
.lang-switch .current { background: var(--accent-soft); color: var(--accent); }

/* ---------- The time ruler ---------- */

.ruler-bar { position: relative; z-index: 4; }
.ruler { position: relative; height: 2.9rem; border-bottom: 1px solid var(--line); color: var(--dim); font-size: 0.8rem; font-weight: 500; }
.ruler > span { position: absolute; top: 1.45rem; padding-left: 0.4rem; white-space: nowrap; }
.ruler > span::before { content: ""; position: absolute; left: 0; top: -1.1rem; height: 2.9rem; border-left: 1px solid var(--line-soft); }
.ruler > span:nth-of-type(1) { left: 0; }
.ruler > span:nth-of-type(2) { left: 18%; }
.ruler > span:nth-of-type(3) { left: 36%; }
.ruler > span:nth-of-type(4) { left: 54%; }
.ruler > span:nth-of-type(5) { left: 72%; }
.ruler > span:nth-of-type(6) { left: 90%; }
.ruler .now { position: absolute; left: 27%; top: 0; bottom: 0; border-left: 2px solid var(--live); z-index: 3; }
.ruler .now em {
  position: absolute; top: 0.1rem; left: 0.4rem; white-space: nowrap; font-style: normal; background: var(--live); color: #fff;
  font-weight: 800; font-size: 0.7rem; letter-spacing: 0.08em; padding: 0.15rem 0.5rem; border-radius: 0.4rem; line-height: 1.4;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.8rem 1.5rem; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  background: var(--accent); color: var(--on-accent); border: 1.5px solid var(--accent);
}
.btn:hover { filter: brightness(1.07); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--fg); border-color: #34404d; }
.btn.ghost:hover { border-color: var(--muted); filter: none; }

/* ---------- Typography ---------- */

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.5rem, 5.2vw, 4.1rem); font-weight: 800; line-height: 1.03; letter-spacing: -0.03em; }
h1 em { display: block; font-style: normal; color: var(--amber); font-size: 0.8em; margin-top: 0.2em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; }

.eyebrow { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--muted); max-width: 40rem; }
.muted { color: var(--muted); }
.measure { max-width: 38rem; }
.fineprint { font-size: 0.88rem; color: var(--dim); max-width: 46rem; }
.origin { color: var(--muted); font-size: 0.95rem; font-style: italic; max-width: 34rem; }

/* ---------- Hero ---------- */

/* The glow and the phone stick out of the hero a little: clipped, so the page never pans sideways (iPhone, 4 November 2026). */
.hero { padding-block: clamp(2.2rem, 5vw, 4rem) 0; position: relative; overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3rem); align-items: center; position: relative; }
.hero-grid::before {
  content: ""; position: absolute; right: -10%; top: -4%; width: 62%; height: 110%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(79, 227, 193, 0.14), transparent);
}
.hero-copy { display: flex; flex-direction: column; gap: 1.3rem; align-items: flex-start; position: relative; z-index: 1; }
.cta-row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.status { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.82rem; font-weight: 700; }
.status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--live); }

.stage { position: relative; z-index: 1; padding-bottom: 2.6rem; }
.stage .tv { width: 100%; }
.stage .phone { position: absolute; width: 24%; left: -5%; bottom: 0; }

/* ---------- Device frames ---------- */

.tv, .phone, .pad { margin: 0; background: var(--frame); box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, 0.55); }
.tv { border: 0.4rem solid var(--frame); border-radius: 1.1rem; overflow: hidden; }
.phone { border: 0.32rem solid var(--frame); border-radius: 1.6rem; overflow: hidden; }
.pad { border: 0.4rem solid var(--frame); border-radius: 1.3rem; overflow: hidden; }
.tv img, .phone img, .pad img { width: 100%; }

/* ---------- Sections ---------- */

.section { padding-block: clamp(3rem, 7vw, 6rem) 0; }
.section-head { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); }

.pair { display: flex; gap: 1rem; align-items: flex-end; justify-content: center; }
.pair .tv, .pair .pad { flex: 1 1 0; min-width: 0; }
.pair .phone { flex: 0 0 24%; }

/* ---------- Tonight on Theamo: program blocks ---------- */

.guide { border: 1px solid var(--line); border-radius: 1.2rem; overflow: hidden; background: var(--well); }
.grow { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); border-top: 1px solid var(--line-soft); }
.grow:first-child { border-top: 0; }
.gch { display: flex; flex-direction: column; justify-content: center; padding: 1rem 1.3rem; background: var(--surface); border-right: 1px solid var(--line-soft); }
.gch b { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1.1; color: var(--amber); }
.gch small { font-size: 0.78rem; font-weight: 500; color: var(--dim); }
.gslot { display: flex; padding: 0.65rem; }
.gblk {
  position: relative; flex: 0 1 var(--w, 100%); margin-left: var(--o, 0%); min-width: 0; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem; align-items: center;
  background: var(--raised); border-radius: 0.8rem; padding: 1rem 1.2rem 1.1rem;
}
.gblk h3 { font-size: 1.2rem; line-height: 1.2; padding-right: 3.4rem; }
.gblk p, .gblk li { font-size: 0.9rem; line-height: 1.5; color: var(--muted); margin-top: 0.3rem; }
.gblk ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.gblk ul li { margin-top: 0.15rem; }
.gblk li::marker { color: var(--accent); }
.gblk.live { background: var(--accent-soft); outline: 1.5px solid var(--accent); outline-offset: -1.5px; }
.gblk .thumb { width: 13.5rem; margin: 0; }
.gblk .thumb .tv { border-width: 0.25rem; border-radius: 0.6rem; box-shadow: 0 0 0 2px var(--line-soft); }
.gblk .thumb .phone { width: 4.6rem; margin-inline: auto; border-width: 0.2rem; border-radius: 0.9rem; box-shadow: 0 0 0 2px var(--line-soft); }
.gblk .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--accent-track); }
.gblk .bar i { display: block; height: 100%; width: var(--p, 62%); background: var(--accent); }

.tag { position: absolute; right: 0.9rem; top: 0.8rem; background: var(--live); color: #fff; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; padding: 0.15rem 0.5rem; border-radius: 0.3rem; line-height: 1.5; }
.tag.pro { background: #2a323c; color: var(--amber); }
.badge { display: inline-block; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; padding: 0.1rem 0.5rem; border-radius: 0.3rem; margin-right: 0.5rem; vertical-align: 0.15em; line-height: 1.5; }
.badge.b-pro { background: #2a323c; color: var(--amber); }
.badge.b-start { background: var(--raised); color: var(--muted); }
.pillar-more { margin-top: 1.4rem; color: var(--muted); }

/* ---------- The schedule ---------- */

.sched { border: 1px solid var(--line); border-radius: 1.2rem; overflow: hidden; background: var(--well); }
.srow {
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(90deg, var(--surface) var(--tw), var(--line-soft) var(--tw) calc(var(--tw) + 1px), transparent calc(var(--tw) + 1px));
}
.sched > .srow:first-child { border-top: 0; }
.srow > summary, .more-row > summary { list-style: none; cursor: pointer; }
.srow > summary::-webkit-details-marker, .more-row > summary::-webkit-details-marker { display: none; }
.srow > summary {
  display: grid; grid-template-columns: var(--tw) minmax(0, 1fr) auto 3.2rem; align-items: center; min-height: 3.6rem;
}
.srow > summary:hover h3 { color: var(--accent); }
.time { padding: 0.6rem 0 0.6rem 1.4rem; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--amber); line-height: 1.1; }
.time small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.75rem; color: var(--dim); margin-top: 0.15rem; letter-spacing: 0; }
.srow > summary h3 { padding: 0.85rem 1rem 0.85rem 1.4rem; font-size: 1.1rem; line-height: 1.25; }
.srow[open] > summary h3 { font-size: 1.5rem; padding-top: 1.5rem; padding-bottom: 0.3rem; }
.srow[open] > summary .time { font-size: 1.5rem; padding-top: 1.5rem; align-self: start; }
.srow[open] > summary { align-items: start; }
.srow > summary .kind { font-size: 0.85rem; color: var(--dim); padding-right: 0.6rem; text-align: right; }
.srow[open] > summary .kind { padding-top: 1.7rem; }
.srow > summary::after, .more-row > summary::after { content: "+"; color: var(--accent); font-size: 1.5rem; line-height: 1; text-align: center; }
.srow[open] > summary::after { content: "\2013"; padding-top: 1.4rem; }
.slotb { margin-left: calc(var(--tw) + 1px); padding: 0.4rem 1.2rem 1.6rem 1.4rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; }
.srow.flip .slotb > .pair { order: -1; }
.slotb .feature-copy { display: flex; flex-direction: column; gap: 0.8rem; }
.slotb .feature-copy ul { margin: 0.2rem 0 0; padding-left: 1.2rem; color: var(--muted); display: grid; gap: 0.4rem; font-size: 0.97rem; }
.slotb .feature-copy li::marker { color: var(--accent); }
.slotb .lede { font-size: 1.02rem; }
.slotb .pair { align-items: center; }

.more-row { border-top: 1px solid var(--line-soft); background: #0b1015; }
.more-row > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; font-weight: 600; font-size: 0.95rem; color: var(--accent); }
.more-row > summary::after { content: "\203A"; font-size: 1.6rem; transition: transform 0.15s; }
.more-row[open] > summary::after { transform: rotate(90deg); }
.more-row > .srow:first-of-type { border-top: 1px solid var(--line-soft); }

/* ---------- Gallery ---------- */

.rail-label { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 2rem 0 0.9rem; }
.rail {
  display: flex; gap: 1.2rem; overflow-x: auto; padding-bottom: 1rem;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-color: #34404d transparent; scrollbar-width: thin;
}
.rail figure { margin: 0; flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.6rem; }
.rail .tv { width: min(30rem, 82vw); }
.rail .pad { width: min(30rem, 82vw); }
.rail .pad.port { width: min(15rem, 60vw); }
.rail .phone { width: min(13rem, 56vw); }
.rail .phone.land { width: min(26rem, 84vw); border-radius: 1.3rem; }
.rail figure.land { width: min(26rem, 84vw); }
.rail figcaption { font-size: 0.9rem; color: var(--muted); max-width: 30rem; }
.rail.wide figure { width: min(30rem, 82vw); }

/* ---------- Pricing: a guide grid ---------- */

.launch-note { margin: 0 0 1.2rem; padding: 0.55rem 1rem; border-radius: 0.8rem; background: var(--accent-soft); color: var(--accent); font-weight: 600; text-align: center; }
.plans { border: 1px solid var(--line); border-radius: 1.2rem; overflow: hidden; background: var(--well); }
.prow { display: grid; grid-template-columns: 17rem minmax(0, 1fr); border-top: 1px solid var(--line-soft); min-height: 7rem; }
.prow:first-child { border-top: 0; }
.pch { background: var(--surface); border-right: 1px solid var(--line-soft); padding: 1.1rem 1.5rem; display: flex; flex-direction: column; gap: 0.15rem; justify-content: center; }
.pch .badge { align-self: flex-start; margin-right: 0; }
.pch h3 { font-size: 1.25rem; font-weight: 800; }
.pch .price { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; line-height: 1.15; color: var(--amber); letter-spacing: -0.03em; }
.pch .price small { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: var(--dim); letter-spacing: 0; }
.pch .price .was { font-size: 0.6em; font-weight: 600; color: var(--dim); text-decoration: line-through; margin-right: 0.25rem; }
.pch .alt { font-size: 0.88rem; color: var(--muted); }
.prow.feat .pch { background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 1rem; margin: 0; list-style: none; align-content: center; }
.chips li { background: var(--raised); border-radius: 0.65rem; padding: 0.6rem 0.9rem; font-weight: 600; font-size: 0.9rem; line-height: 1.35; color: #c5ccd6; }
.chips li.on { background: var(--accent-soft); color: var(--accent); }

.table-wrap { overflow-x: auto; margin-top: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid var(--line); border-radius: 1.2rem; background: var(--well); }
.compare { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.compare caption { text-align: left; padding: 1rem 1.2rem 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.compare th, .compare td { text-align: left; padding: 0.7rem 1.2rem; border-top: 1px solid var(--line-soft); }
.compare tbody th { font-weight: 500; }
.compare thead th { color: var(--dim); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--surface); }
.compare td.free, .compare td.pro { white-space: nowrap; }
.compare td.pro { color: var(--accent); font-weight: 650; }
.compare td.free { color: var(--muted); }

.panel { margin-top: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid var(--line); border-radius: 1.2rem; background: var(--well); padding: clamp(1.2rem, 3vw, 2rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; }
.panel .feature-copy { display: flex; flex-direction: column; gap: 0.8rem; }
.panel .feature-copy ul { margin: 0.2rem 0 0; padding-left: 1.2rem; color: var(--muted); display: grid; gap: 0.4rem; font-size: 0.97rem; }
.panel .feature-copy li::marker { color: var(--accent); }
.panel .pair { order: -1; }

/* ---------- Works with: channel plates ---------- */

.plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.9rem; padding: 0; margin: 0; list-style: none; }
.plates li { background: var(--raised); border: 1px solid var(--line); border-radius: 0.9rem; padding: 1.5rem 1rem; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.3; display: flex; align-items: center; justify-content: center; min-height: 6rem; }

/* ---------- Privacy: one big live block ---------- */

.big { position: relative; overflow: hidden; margin-top: clamp(3rem, 7vw, 6rem); border-radius: 1.4rem; background: var(--accent-soft); border: 1.5px solid var(--accent); padding: clamp(1.6rem, 4vw, 3rem) clamp(1.3rem, 4vw, 3.1rem) clamp(2rem, 4.4vw, 3.3rem); }
.big .tag { top: 1.2rem; right: 1.4rem; font-size: 0.72rem; padding: 0.2rem 0.6rem; }
.big h2 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); margin-top: 0.7rem; }
.big .lede { color: #b8d8d0; margin-top: 0.9rem; max-width: 46rem; }
.big a { color: #fff; }
.big .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: #1d4a41; }
.big .bar i { display: block; height: 100%; width: 100%; background: var(--accent); }

/* ---------- FAQ: episodes ---------- */

.faq { counter-reset: ep; border: 1px solid var(--line); border-radius: 1.2rem; overflow: hidden; background: var(--well); }
.faq details { counter-increment: ep; border-top: 1px solid var(--line-soft); }
.faq details:first-child { border-top: 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 1.2rem; padding: 1.15rem 1.5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "EP " counter(ep); flex: 0 0 4.4rem; font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; color: var(--amber); white-space: nowrap; }
html:lang(pl) .faq summary::before { content: "ODC. " counter(ep); }
.faq summary::after { content: "+"; margin-left: auto; padding-left: 1rem; color: var(--accent); font-family: var(--font-body); font-weight: 400; font-size: 1.7rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--accent); }
.faq details p { color: var(--muted); padding: 0 1.5rem 1.3rem calc(1.5rem + 4.4rem + 1.2rem); max-width: 52rem; }

/* ---------- NEXT: the launch signup ---------- */

.next { margin-top: clamp(3rem, 7vw, 6rem); border: 1px solid var(--line); border-radius: 1.2rem; background: var(--well); display: grid; grid-template-columns: var(--tw) minmax(0, 1fr); overflow: hidden; }
.next .time { background: var(--surface); border-right: 1px solid var(--line-soft); padding: 1.8rem 0 0 1.4rem; font-size: 1.5rem; }
.next .nb { padding: clamp(1.3rem, 3vw, 2.2rem); display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
.next h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.next .lede { max-width: 38rem; }

/* ---------- Footer ---------- */

.site-footer { margin-top: clamp(3rem, 7vw, 6rem); color: var(--dim); font-size: 0.92rem; }
.site-footer .wrap { border-top: 1px solid var(--line); padding-block: 1.6rem 2.6rem; display: flex; flex-wrap: wrap; gap: 0.8rem 1.8rem; align-items: baseline; }
.site-footer nav { display: flex; gap: 0.6rem 1.6rem; flex-wrap: wrap; }
.site-footer a { color: var(--muted); text-decoration: none; font-weight: 500; }
.site-footer a:hover { color: var(--fg); text-decoration: underline; }
.site-footer p { margin: 0; }
.site-footer .note-line { flex-basis: 100%; order: 3; }
.site-footer .build { margin-left: auto; font-size: 0.8rem; color: var(--dim); }
.site-footer .build span { font-variant-numeric: tabular-nums; }

/* ---------- Teaser ---------- */

.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; padding: 0; margin: 0; list-style: none; counter-reset: reason; }
.reasons li { position: relative; overflow: hidden; background: var(--raised); border-radius: 0.9rem; padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; counter-increment: reason; }
.reasons li::before { content: counter(reason, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: var(--amber); }
.reasons li.live { background: var(--accent-soft); outline: 1.5px solid var(--accent); outline-offset: -1.5px; }
.reasons strong { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.25; padding-right: 3rem; }
.reasons span { color: var(--muted); font-size: 0.93rem; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.tile { background: var(--raised); border: 1px solid var(--line-soft); border-radius: 0.9rem; padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; }
.tile p { color: var(--muted); font-size: 0.95rem; }
.tile h3 { font-size: 1.1rem; }
.statement { background: var(--well); border: 1px solid var(--line); border-radius: 1.2rem; padding: clamp(1.3rem, 3vw, 2.2rem); }

/* ---------- Document pages (privacy, support, terms, report) ---------- */

.doc { padding-block: clamp(1.5rem, 4vw, 3rem) 1rem; }
.doc .wrap { max-width: 50rem; display: grid; gap: 1.2rem; }
.doc h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); }
.doc h2 { font-size: 1.45rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); }
.doc h1 + .lede + h2, .doc h1 + h2 { border-top: 0; padding-top: 0; }
.doc ul, .doc ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.5rem; }
.doc li::marker { color: var(--accent); }
.doc .note { background: var(--surface); border: 1px solid var(--line); border-radius: 0.9rem; padding: 1rem 1.2rem; color: var(--muted); }
.doc .site-title-bar { display: none; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; background: var(--raised); padding: 0.12em 0.4em; border-radius: 0.35em; overflow-wrap: anywhere; }

/* ---------- Report a problem form ---------- */

.report-form { display: grid; gap: 1.1rem; }
.report-form label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: 0.4rem; }
.report-form input[type="text"], .report-form input[type="email"], .report-form textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--fg); background: var(--raised);
  border: 1px solid #34404d; border-radius: 0.75rem; padding: 0.75rem 0.9rem;
}
.report-form textarea { min-height: 8rem; resize: vertical; }
.report-form input:focus, .report-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.report-form ::placeholder { color: var(--dim); opacity: 1; }
.report-form .hint { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--dim); }
.report-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.report-form .btn { justify-self: start; cursor: pointer; font: inherit; font-weight: 800; }
.report-form .btn:disabled { opacity: 0.6; cursor: progress; }
.report-status { min-height: 1.5rem; margin: 0; font-weight: 600; }
.report-status.success { color: var(--accent); }
.report-status.error { color: #ff7a7e; }
.report-status.sending { color: var(--muted); }

/* ---------- Responsive ---------- */

@media (max-width: 62rem) {
  .hero-grid, .slotb, .panel { grid-template-columns: minmax(0, 1fr); }
  .srow.flip .slotb > .pair, .panel .pair { order: 0; }
  .stage .phone { width: 28%; left: 0; }
  .gblk { flex-basis: 100%; margin-left: 0; }
  .reasons, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prow { grid-template-columns: 14rem minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  :root { --tw: 4.6rem; }
  .nav { gap: 0.8rem; }
  .nav a.hide-small, .nav .nav-group.hide-small { display: none; }
  .site-header { padding-block: 1rem; position: relative; }
  .site-header.scrolled { padding-block: 1rem; background: none; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .brand { font-size: 1.2rem; }
  .brand svg { width: 1.6rem; height: 1.6rem; }
  .nav a.pill { padding: 0.55rem 0.9rem; font-size: 0.82rem; }
  /* the ruler keeps three labels instead of six */
  .ruler > span:nth-of-type(even) { display: none; }
  .ruler .now em { font-size: 0.62rem; padding-inline: 0.4rem; }
  .cta-row { flex-direction: column; align-self: stretch; }
  .cta-row .btn { width: 100%; }
  .stage { padding-bottom: 0; }
  .stage .phone { display: none; }
  .grow { grid-template-columns: minmax(0, 1fr); }
  .guide { background: transparent; border: 0; border-radius: 0; overflow: visible; display: grid; gap: 0.8rem; }
  .grow { border: 0; display: block; }
  .gch { flex-direction: row; align-items: baseline; gap: 0.6rem; padding: 0 0 0.3rem; background: transparent; border: 0; }
  .gch b { font-size: 1rem; }
  .gslot { padding: 0; }
  .gblk { display: block; padding: 1.1rem 1.1rem 1.3rem; border-radius: 0.9rem; }
  .gblk .thumb { display: none; }
  .sched, .plans { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .sched { display: grid; gap: 0.7rem; }
  .srow { background: var(--raised); border: 0; border-radius: 0.9rem; overflow: hidden; }
  .srow > summary { grid-template-columns: var(--tw) minmax(0, 1fr) 2.6rem; }
  .srow > summary .kind { display: none; }
  .srow[open] > summary h3, .srow > summary h3 { font-size: 1.05rem; padding: 0.85rem 0.4rem 0.85rem 0.6rem; }
  .srow[open] > summary h3 { padding-top: 1rem; padding-bottom: 0.4rem; }
  .srow[open] > summary .time { font-size: 1.15rem; padding-top: 1rem; }
  .srow[open] > summary::after { padding-top: 0.9rem; }
  .time { padding-left: 1rem; }
  .srow { background: var(--raised); }
  .slotb { margin-left: 0; padding: 0.4rem 1rem 1.2rem; }
  .more-row { border: 1px solid var(--line-soft); border-radius: 0.9rem; overflow: hidden; display: grid; gap: 0.7rem; }
  .more-row > summary { border-bottom: 0; }
  .more-row > .srow:first-of-type { border-top: 0; }
  .plans { display: grid; gap: 0.7rem; }
  .prow { grid-template-columns: minmax(0, 1fr); background: var(--raised); border: 0; border-radius: 0.9rem; overflow: hidden; min-height: 0; }
  .pch { border: 0; padding: 1rem 1.1rem 0.4rem; display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: baseline; }
  .pch h3 { grid-column: 1; }
  .pch .price { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-size: 1.6rem; }
  .pch .alt { grid-column: 1; }
  .pch .badge { grid-column: 1; justify-self: start; }
  .prow.feat { outline: 1.5px solid var(--accent); outline-offset: -1.5px; }
  .chips { padding: 0.5rem 1.1rem 1.1rem; }
  .compare { font-size: 0.9rem; }
  .compare th, .compare td { padding: 0.6rem 0.7rem; }
  .compare caption { padding-inline: 0.7rem; }
  .pair { flex-direction: column; align-items: stretch; }
  .pair .tv, .pair .pad { flex: none; width: 100%; }
  .pair .phone { flex: none; width: 56%; margin-inline: auto; }
  .faq summary { padding: 1rem 1rem; gap: 0.8rem; font-size: 1rem; flex-wrap: wrap; }
  .faq summary::before { flex-basis: 3.4rem; }
  .faq details p { padding: 0 1rem 1.2rem; }
  .next { grid-template-columns: minmax(0, 1fr); }
  .next .time { border: 0; padding: 1.1rem 1.2rem 0; }
  .reasons, .tiles { grid-template-columns: minmax(0, 1fr); }
  .site-footer .build { margin-left: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---------- Changelog (generated by tools/changelog/build_changelog.py from docs/website-changelog.md; design/website-changelog.dc.html is the spec) ---------- */
.clpage { padding-block: clamp(1.5rem, 4vw, 3rem) 2rem; }
.clpage .wrap { display: grid; gap: 1.1rem; max-width: 46rem; }
.clpage h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; margin: 0; }
.clpage .lede { margin: 0; max-width: 38rem; }
.cl-more { justify-self: start; font-weight: 600; color: var(--accent); }
.cl-more::after { content: " \2192"; }
.cl-list { margin-top: 0.6rem; }
.cl-block { padding: 1.6rem 0; border-top: 1px solid var(--line); }
.cl-head { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.4rem; }
.cl-head h2 { font-size: clamp(1.5rem, 4vw, 1.9rem); line-height: 1.1; margin: 0; }
.cl-head time { font-size: 0.85rem; color: var(--dim); }
.cl-group { margin: 1rem 0 0.4rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.cl-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.cl-block li { position: relative; padding-left: 1.1rem; line-height: 1.55; color: #e6eaf0; }
.cl-block li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--accent); }
.cl-empty { margin: 0; padding: 1.4rem 0; border-top: 1px solid var(--line); color: var(--dim); }

/* ---------- What's next (generated by tools/roadmap/build_roadmap.py; design/website-roadmap.dc.html is the spec) ---------- */
.rmpage { padding-block: clamp(1.5rem, 4vw, 3rem) 1rem; }
.rmpage .wrap { display: grid; gap: 1.2rem; }
.rmpage h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06; max-width: 52rem; }
.rmpage .lede { max-width: 42rem; margin: 0; }
.rm-note { justify-self: start; margin: 0.2rem 0 0; font-size: 0.82rem; font-weight: 600; color: var(--amber); background: #1b1710; border: 1px solid #3b3220; border-radius: 99px; padding: 0.45rem 0.9rem; }
.rm-ship { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: baseline; margin-top: 1.2rem; padding: 0.9rem 1.3rem; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--well); }
.rm-ship b { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.rm-ship span { color: #c5ccd6; }
.rm-ship a { margin-left: auto; font-weight: 600; color: var(--accent); }
/* The themes: a few cards, no columns and no order */
.rm-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.rm-theme { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 1.3rem 1.4rem; }
.rm-theme::before { content: ""; display: block; width: 2.1rem; height: 4px; border-radius: 3px; background: var(--accent); margin-bottom: 0.8rem; }
.rm-theme h3 { font-size: 1.2rem; line-height: 1.2; margin: 0; }
.rm-theme p { margin: 0.45rem 0 0; color: var(--muted); line-height: 1.5; }
@media (max-width: 62rem) { .rm-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .rm-themes { grid-template-columns: 1fr; } }
.rm-say { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; margin-top: 2.4rem; padding: 2rem 2.4rem; border: 1.5px solid var(--accent); border-radius: 1.2rem; background: var(--accent-soft); }
.rm-say h2 { font-size: 1.7rem; margin: 0; }
.rm-say p { margin: 0.4rem 0 0; color: #b8d8d0; max-width: 38rem; }
.rm-say .btn { margin-left: auto; }
@media (max-width: 46rem) {
  .rm-say { padding: 1.4rem; }
  .rm-say .btn { margin-left: 0; }
}

/* ---------- Getting started guide (guide.html) ---------- */

.gstart .wrap { max-width: 80rem; gap: 1.6rem; }
.gstart { --g-size: 1.18rem; }
html[data-gsize="1"] .gstart { --g-size: 1.4rem; }
html[data-gsize="2"] .gstart { --g-size: 1.65rem; }
.g-kicker { color: var(--accent); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; margin: 0; }
.g-controls { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem 1.2rem; }
.g-pick { margin: 0; font-weight: 700; font-size: 1.1rem; flex-basis: 100%; }
.g-tabs { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.g-tab, .g-sz, .g-print { font: inherit; font-weight: 800; color: var(--fg); background: var(--raised); border: 2px solid var(--line); border-radius: 0.9rem; cursor: pointer; }
.g-tab { font-size: 1.35rem; padding: 0.8rem 1.6rem; font-family: var(--font-display); }
.g-tab[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.g-tab:focus-visible, .g-sz:focus-visible, .g-print:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.g-size { display: flex; gap: 0.5rem; align-items: center; color: var(--muted); font-weight: 600; margin-left: auto; }
.g-sz { padding: 0.3rem 0.8rem; }
.g-sz[data-size="0"] { font-size: 0.95rem; } .g-sz[data-size="1"] { font-size: 1.25rem; } .g-sz[data-size="2"] { font-size: 1.6rem; }
.g-sz[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.g-print { padding: 0.5rem 1rem; font-size: 1rem; color: var(--muted); }
.g-toc { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem 1.4rem; }
.g-toc h2 { margin: 0 0 0.4rem; border: 0; padding: 0; font-size: 1.2rem; }
.g-toc ol { display: grid; gap: 0; padding-left: 1.6rem; font-size: 1.15rem; }
.g-toc li { padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft); }
.g-toc a { color: var(--fg); font-weight: 600; text-decoration: none; }
.g-toc a:hover, .g-toc a:focus-visible { color: var(--accent); text-decoration: underline; }
.g-topic { border-top: 1px solid var(--line); padding-top: 2rem; display: grid; gap: 1rem; scroll-margin-top: 1rem; }
.g-topic h3 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); margin: 0; }
.g-intro { font-size: var(--g-size); color: var(--muted); margin: 0; line-height: 1.55; max-width: 46rem; }
.g-for { font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 1.4rem 0 0.4rem; }
.g-steps { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 1.4rem; }
.g-step { display: flex; gap: 1rem; align-items: flex-start; }
.g-num { flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 800 1.5rem/2.8rem var(--font-display); text-align: center; }
.g-body h4 { margin: 0 0 0.25rem; font-size: calc(var(--g-size) * 1.2); font-family: var(--font-display); }
.g-body p { margin: 0; font-size: var(--g-size); line-height: 1.55; color: var(--muted); max-width: 40rem; }
.g-pic { margin: 0.8rem 0 0; }
.g-pic img { display: block; width: min(15rem, 100%); height: auto; border-radius: 1rem; border: 1px solid var(--line); }
.g-pic-wide img { width: min(34rem, 100%); }
.g-table { margin: 0; display: grid; gap: 0; }
.g-row { display: flex; gap: 1.2rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.g-row dt { flex: none; width: min(15rem, 38%); font: 800 calc(var(--g-size) * 1) var(--font-display); }
.g-row dd { margin: 0; font-size: var(--g-size); color: var(--muted); line-height: 1.5; }
.g-parts .g-row dt { color: var(--accent); }
.g-sub { font-size: 1.5rem; margin: 1.4rem 0 0.2rem; font-family: var(--font-display); }
/* With scripts: one device at a time. Without them everything is shown, one device after the other. */
html.js .g-panel { display: none; }
html.js[data-gdevice="iphone"] .g-panel[data-device="iphone"], html.js[data-gdevice="ipad"] .g-panel[data-device="ipad"],
html.js[data-gdevice="appletv"] .g-panel[data-device="appletv"] { display: block; }
html.js .g-for { display: none; }
html.js .g-remote, html.js .g-tv-only { display: none; }
html.js[data-gdevice="appletv"] .g-remote { display: grid; }
html.js[data-gdevice="appletv"] .g-tv-only { display: list-item; }
@media (max-width: 36rem) { .g-row { flex-direction: column; gap: 0.2rem; } .g-row dt { width: auto; } .g-size { margin-left: 0; } }
@media print {
  .site-header, .site-footer, .g-controls, .g-print, .g-pic { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .gstart * { color: #000 !important; background: transparent !important; border-color: #888 !important; }
  .g-num { border: 2px solid #000 !important; }
  .g-topic { break-inside: avoid-page; }
}

/* ---------- The remote picture and its legend (guide.html) ---------- */

.g-signs { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.g-signbox { display: flex; gap: 0.8rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 0.8rem 1.1rem; flex: 1 1 15rem; }
.g-signbox .g-sign { width: 2.8rem; height: 2.8rem; flex: none; }
.g-signbox strong { display: block; font: 800 1.25rem var(--font-display); }
.g-signbox span { color: var(--muted); font-size: calc(var(--g-size) * 0.95); }
.g-remote-wrap { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: start; margin-top: 0.6rem; }
.g-remote-pic { margin: 0; position: sticky; top: 5rem; }
.g-remote-pic img { width: 15rem; height: auto; display: block; }
.g-legend { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 0; }
.g-legend li { display: flex; gap: 0.8rem; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.g-legend li::marker { content: ""; }
.g-badge { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 800 1.25rem/2.4rem var(--font-display); text-align: center; }
.g-legend .g-sign { flex: none; width: 2.2rem; height: 2.2rem; }
.g-legend strong { display: block; font: 800 calc(var(--g-size) * 1.02) var(--font-display); }
.g-legend span { color: var(--muted); font-size: var(--g-size); line-height: 1.45; }
@media (max-width: 40rem) { .g-remote-wrap { grid-template-columns: 1fr; } .g-remote-pic { position: static; } .g-remote-pic img { margin-inline: auto; } }
@media print { .g-remote-pic { display: block !important; } .g-remote-pic img { filter: invert(1); } }
.g-legend li > .g-badge { color: var(--on-accent); font: 800 1.25rem/2.4rem var(--font-display); }
.g-signbox > div { display: grid; gap: 0.15rem; }

/* ---------- Guide: first five minutes, Free and Pro, questions, words ---------- */

.g-quick { background: var(--accent-soft); border: 1.5px solid var(--accent); border-radius: 1.1rem; padding: 1.2rem 1.4rem; display: grid; gap: 0.8rem; }
.g-quick h2 { margin: 0; border: 0; padding: 0; font-size: clamp(1.5rem, 3vw, 1.9rem); }
.g-quick ol { list-style: none; counter-reset: q; padding: 0 !important; margin: 0; display: grid; gap: 0.6rem; }
.g-quick li { counter-increment: q; }
.g-quick li::marker { content: ""; }
.g-quick a { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 0.9rem; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 0.9rem; padding: 0.8rem 1rem; text-decoration: none; color: var(--fg); }
.g-quick a::before { content: counter(q); grid-row: span 2; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 800 1.4rem/2.6rem var(--font-display); text-align: center; }
.g-quick a:hover, .g-quick a:focus-visible { border-color: var(--accent); }
.g-quick strong { font: 800 calc(var(--g-size) * 1.1) var(--font-display); }
.g-quick span { color: var(--muted); font-size: var(--g-size); }
.g-plain ul { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.5rem; font-size: var(--g-size); color: var(--muted); line-height: 1.5; }
.g-plain li::marker { color: var(--accent); }
.g-q { background: var(--surface); border: 1px solid var(--line); border-radius: 0.9rem; padding: 0.2rem 1.1rem; }
.g-q summary { cursor: pointer; font: 800 calc(var(--g-size) * 1.05) var(--font-display); padding: 0.8rem 0; }
.g-q summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.g-q p { margin: 0 0 0.9rem; font-size: var(--g-size); line-height: 1.55; color: var(--muted); }
@media print { .g-q p { display: block !important; } .g-quick a::before { border: 2px solid #000 !important; } }

/* ---------- Guide: a link to every section ---------- */

.g-anchor { margin-left: 0.5rem; color: var(--dim); text-decoration: none; font-weight: 700; opacity: 0.5; padding: 0 0.3rem; }
.g-topic:hover .g-anchor, .g-anchor:focus-visible, .g-anchor:hover { opacity: 1; color: var(--accent); }
@media (hover: none) { .g-anchor { opacity: 0.8; } }
.gstart [id] { scroll-margin-top: 1rem; }
.g-topic:target h3 { color: var(--accent); }
@media print { .g-anchor { display: none !important; } }

/* Phone menu (home page): the section links are hidden below 40rem, so a menu button opens a list of them. Needs JavaScript
   (the "js" class); without it the header stays as it was. The header sticks to the top so the button is always in reach. */
.menu-btn, .menu { display: none; }
@media (max-width: 40rem) {
  html { scroll-padding-top: 4.6rem; }
  .js .site-header.has-menu {
    position: sticky; top: 0; z-index: 30; padding-block: 0.55rem;
    background: var(--bg); border-bottom: 1px solid var(--line-soft);
  }
  .js .site-header.has-menu .wrap { flex-wrap: nowrap; }
  .js .site-header.has-menu .nav .lang-switch, .js .site-header.has-menu .nav a.pill { display: none; }
  .js .menu-btn {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 0.8rem; border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  }
  .menu-btn span { width: 1.1rem; height: 2px; border-radius: 2px; background: var(--fg); transition: transform 0.18s, opacity 0.18s; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .js .menu:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 20; padding-top: 3.9rem; background: var(--bg); overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.menu-open { overflow: hidden; }
  .menu .wrap { padding-bottom: 6.5rem; }
  .menu-label { margin: 1.2rem 0 0.2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
  .menu ul { list-style: none; margin: 0; padding: 0; }
  .menu-list a, .menu-more a { display: flex; align-items: center; gap: 0.9rem; color: var(--fg); text-decoration: none; }
  .menu-list a { padding: 0.8rem 0.4rem; border-bottom: 1px solid var(--line); font-size: 1.08rem; font-weight: 600; }
  .menu-list a::after { content: "\203A"; margin-left: auto; color: var(--dim); }
  .menu-list a:active, .menu-list a:hover { background: var(--accent-soft); }
  .menu-list .mt { width: 2.6rem; font-size: 0.72rem; font-weight: 600; color: var(--dim); }
  .menu-more a { padding: 0.5rem 0.4rem; font-size: 0.98rem; font-weight: 500; color: var(--muted); }
  .menu-foot {
    position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem var(--pad) calc(0.9rem + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line-soft);
  }
}
@media (min-width: 40.01rem) { .menu-btn, .menu { display: none !important; } }

/* Getting started: the "Gestures and buttons" card at the top (design/website-gestures.dc.html, option A) */
.g-gestures { border: 1.5px solid var(--accent); border-radius: 1.1rem; padding: 1.2rem 1.4rem; display: grid; gap: 0.9rem; background: linear-gradient(180deg, var(--accent-soft), var(--surface)); scroll-margin-top: 1rem; }
.g-gestures-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.g-gestures h2 { margin: 0; border: 0; padding: 0; font-size: clamp(1.5rem, 3vw, 1.9rem); }
.g-gestures .g-panel > .g-intro { margin-bottom: 0.9rem; }
.g-tiles { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
@media (max-width: 64rem) { .g-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .g-tiles { grid-template-columns: 1fr; } }
.g-tile { display: flex; gap: 0.9rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 0.8rem; }
.g-tile::marker { content: ""; }
.g-phone { flex: none; }
.g-tile > div { flex: 1; min-width: 0; }
.g-tile strong { display: flex; gap: 0.5rem; align-items: flex-start; font: 800 calc(var(--g-size) * 1.02)/1.3 var(--font-display); }
.g-tile strong .g-sign { width: 1.5rem; height: 1.5rem; flex: none; margin-top: 0.1rem; }
.g-tile div > span { display: block; color: var(--muted); font-size: var(--g-size); line-height: 1.45; margin-top: 0.2rem; }
.g-more { display: none; font: inherit; font-weight: 700; color: var(--accent); background: none; border: 0; padding: 0.6rem 0 0; cursor: pointer; }
.g-set-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.4rem; }
.g-set-tab { font: inherit; font-weight: 700; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 99px; padding: 0.45rem 1rem; cursor: pointer; }
.g-set-tab[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.g-set-tab:focus-visible, .g-more:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.g-set-tabs { display: none; }
html.js .g-set-tabs { display: flex; }
html.js .g-set-title { display: none; }
html.js .g-gestures .g-set { display: none; }
html.js .g-gestures[data-gset="live"] .g-set[data-gset="live"], html.js .g-gestures[data-gset="rec"] .g-set[data-gset="rec"],
html.js .g-gestures[data-gset="guide"] .g-set[data-gset="guide"] { display: block; }
.g-gestures .g-remote-pic { position: static; }
.g-gestures-all { margin: 0; font-weight: 700; }
@media (max-width: 40rem) {
  html.js .g-more { display: block; }
  html.js .g-gestures:not(.g-all) .g-tile:nth-child(n+4) { display: none; }
  html.js .g-gestures.g-all .g-more { display: none; }
}
@media print {
  .g-gestures { border: 1.5px solid #000; background: none; }
  .g-tile:nth-child(n+4) { display: flex !important; }
  .g-more, .g-set-tabs, .g-gestures-all { display: none !important; }
  .g-gestures .g-set { display: block !important; }
  .g-set-title { display: block !important; }
  .g-phone { filter: invert(1); }
  html.g-printing-card .gstart .wrap > :not(.g-gestures) { display: none !important; }
  /* The Apple TV card on one sheet (it was five pages): the three sets side by side, a small remote over each list, smaller type. */
  html.js[data-gdevice="appletv"] .g-gestures .g-panel[data-device="appletv"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.9rem; align-items: start; }
  .g-gestures .g-panel[data-device="appletv"] > :not(.g-set) { grid-column: 1 / -1; margin-block: 0.15rem; }
  .g-gestures .g-panel[data-device="appletv"] .g-set { break-inside: avoid; font-size: 0.7rem; }
  .g-gestures .g-set .g-set-title { font-size: 0.95rem; margin: 0.2rem 0 0.3rem; }
  .g-gestures .g-set .g-remote-wrap { grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.5rem; margin-top: 0; }
  .g-gestures .g-set .g-remote-pic img { width: 5.6rem; }
  .g-gestures .g-set[data-gset="guide"] { grid-column: 1 / -1; }
  .g-gestures .g-set .g-table { display: block; column-count: 2; column-gap: 0.9rem; }
  .g-gestures .g-set .g-row { break-inside: avoid; }
  .g-gestures .g-set .g-legend li { gap: 0.35rem; padding: 0.22rem 0; align-items: flex-start; }
  .g-gestures .g-set .g-legend strong, .g-gestures .g-set .g-legend span { font-size: 0.64rem; line-height: 1.15; }
  .g-gestures .g-set .g-badge { width: 1.1rem; height: 1.1rem; font-size: 0.65rem; line-height: 1.1rem; }
  .g-gestures .g-set .g-legend .g-sign { display: none; }
  .g-gestures .g-set .g-row { flex-direction: column; gap: 0.05rem; padding: 0.22rem 0; }
  .g-gestures .g-set .g-row dt { width: auto; font-size: 0.66rem; }
  .g-gestures .g-set .g-row dd { font-size: 0.64rem; line-height: 1.15; }
  .g-gestures { padding: 0.8rem 1rem; gap: 0.4rem; }
  .g-gestures h2 { font-size: 1.25rem; }
  .g-gestures .g-panel > .g-intro { font-size: 0.8rem; margin: 0 0 0.3rem; }
  .g-gestures .g-panel[data-device="appletv"] > p:not(.g-intro) { display: none; }
  .g-gestures .g-set .g-legend li { padding: 0.07rem 0; }
  .g-gestures .g-panel[data-device="appletv"] > .g-intro { display: none; }
}
@page { margin: 1cm; }

/* Remote and gestures (gestures.html, option B): every device on one sheet */
.g-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.4rem; align-items: start; }
.g-sheet-col { background: var(--surface); border: 1px solid var(--line); border-radius: 1.1rem; padding: 1.1rem 1.3rem; display: grid; gap: 0.8rem; }
.g-sheet-col h2 { margin: 0; border: 0; padding: 0; font-size: 1.4rem; }
.g-plainlist li { gap: 0.8rem; }
.g-sheet .g-remote-wrap { grid-template-columns: 11rem minmax(0, 1fr); }
.g-sheet .g-remote-pic img { width: 11rem; }
@media (max-width: 52rem) { .g-sheet { grid-template-columns: 1fr; } }
@media (max-width: 40rem) { .g-sheet .g-remote-wrap { grid-template-columns: 1fr; } }
@media print { .g-sheet { grid-template-columns: 1fr 1.6fr; } .g-sheet-col { border: 1px solid #000; break-inside: avoid-page; } }

/* ---------- Press page: Spread the word (posts to copy, pictures and clips to save) ---------- */

.sp-tabs { display: none; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 1.1rem; }
html.js .sp-tabs { display: flex; }
.sp-tab { font: inherit; font-weight: 700; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 99px; padding: 0.5rem 1.1rem; cursor: pointer; }
.sp-tab[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.sp-tab:focus-visible, .sp-copy:focus-visible, .sp-dl:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
html.js .sp-panel { display: none; }
html.js .sp-panel.sp-on { display: block; }
.sp-card { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem 1.2rem; margin: 0 0 1rem; }
.sp-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.7rem; }
.sp-head h3 { margin: 0; font-size: 1.15rem; }
.sp-where { margin: 0.15rem 0 0; color: var(--dim); font-size: 0.9rem; }
.sp-text { background: var(--bg); border: 1px solid var(--line); border-radius: 0.7rem; padding: 0.8rem 1rem; user-select: text; }
.sp-text p { margin: 0 0 0.8rem; line-height: 1.55; }
.sp-text p:last-child { margin-bottom: 0; }
.sp-copy { flex: none; font: inherit; font-weight: 700; font-size: 0.92rem; color: var(--on-accent); background: var(--accent); border: 1.5px solid var(--accent); border-radius: 99px; padding: 0.5rem 1.1rem; cursor: pointer; }
.sp-copy.sp-done { color: var(--accent); background: var(--accent-soft); }
.sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 0.6rem; }
.sp-grid-sq { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 52rem) { .sp-grid-sq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .sp-grid, .sp-grid-sq { grid-template-columns: 1fr; } }
.sp-fig { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 0.6rem; }
.sp-fig img { display: block; width: 100%; height: auto; border-radius: 0.6rem; }
.sp-fig figcaption, .sp-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0.1rem 0.1rem; }
.sp-dl { font-weight: 700; font-size: 0.9rem; color: var(--accent); border: 1px solid var(--accent); border-radius: 99px; padding: 0.4rem 0.9rem; text-decoration: none; }
.sp-dl:hover { background: var(--accent-soft); }
.sp-video { display: block; width: 100%; height: auto; border-radius: 0.7rem; background: #000; }
.sp-note { color: var(--dim); font-size: 0.9rem; margin-top: 1rem; }
@media print { .sp-tabs, .sp-copy, .sp-dl { display: none !important; } html.js .sp-panel { display: block !important; } }