/* Flashbox marketing site — shares the companion app's dark/accent palette. */
:root {
  --bg: #07090d; --bg-2: #0b0e14; --card: #141925; --card-2: #1a2030;
  --line: #242c3b; --line-2: #2f3a4d;
  --text: #eaf0fb; --muted: #97a1b5; --faint: #5c6680;
  --accent: #f5c518; --accent-deep: #e0a800; --accent-ink: #1a1500;
  --warn: #ffd23f; --danger: #ef5a6b;
  --radius: 18px; --radius-sm: 12px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --maxw: 1080px;
  --glow: 0 0 18px rgba(245,197,24,.35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(1100px 520px at 78% -160px, rgba(245,197,24,.13), transparent 62%),
    radial-gradient(900px 600px at 5% 10%, rgba(58,90,200,.10), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

/* ----------------------------- buttons ----------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-weight: 750; font-size: 15px; text-decoration: none;
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: 0 8px 22px rgba(245,197,24,.30); transition: transform .12s, box-shadow .12s, filter .12s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(245,197,24,.42); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; filter: grayscale(.3); }
.btn-lg { padding: 14px 24px; font-size: 16px; }
.btn-sm { padding: 8px 15px; font-size: 13.5px; }
.btn-block { width: 100%; }
.btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--line-2); box-shadow: none;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }

/* ------------------------------- nav ------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  padding: 14px max(20px, calc((100% - var(--maxw)) / 2));
  background: rgba(7,9,13,.72); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text);
}
/* LED dot-matrix wordmark logo (built in app.js). */
.brand .led-logo { height: 28px; width: auto; display: block; filter: drop-shadow(0 0 2px rgba(245,197,24,.45)); }
.foot .brand .led-logo { height: 24px; }
@media (max-width: 560px) { .brand .led-logo { height: 23px; } }
.brand-dot {
  width: 26px; height: 26px; border-radius: 8px; padding: 5px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: var(--glow);
}
.brand-dot span { background: var(--accent-ink); border-radius: 2px; opacity: .85; }
.nav-links { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.nav-links a {
  text-decoration: none; color: var(--muted); font-weight: 650; font-size: 14.5px;
  padding: 8px 13px; border-radius: 999px;
}
.nav-links a:hover { color: var(--text); background: var(--bg-2); }
.nav-links .nav-app { color: var(--accent); }
.nav .btn-sm { margin-left: 2px; }

/* ----------------------------- layout ------------------------------ */
section { padding: 0 max(20px, calc((100% - var(--maxw)) / 2)); }
.band { padding-top: 72px; padding-bottom: 72px; border-top: 1px solid var(--line); }
.band-alt { background: linear-gradient(180deg, rgba(255,255,255,.015), transparent); }
.section-title { font-size: clamp(26px, 4vw, 38px); font-weight: 800; text-align: center; }
.section-sub { text-align: center; color: var(--muted); max-width: 620px; margin: 14px auto 0; font-size: 17px; }

/* ------------------------------ hero ------------------------------- */
.hero {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
  padding-top: 64px; padding-bottom: 72px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: rgba(245,197,24,.10);
  border: 1px solid rgba(245,197,24,.28); padding: 6px 13px; border-radius: 999px;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.hero h1 { font-size: clamp(34px, 5.4vw, 58px); font-weight: 850; margin: 20px 0 0; }
.lede { color: var(--muted); font-size: 18px; max-width: 30em; margin: 20px 0 0; }
.lede b { color: var(--text); font-weight: 700; }
.hero-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 26px 0 0; }
.hero-points li { color: var(--muted); font-size: 14px; position: relative; padding-left: 22px; }
.hero-points li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--accent) 38%, transparent 42%);
  box-shadow: 0 0 8px rgba(245,197,24,.6);
}
/* `hidden` has to win. display:inline-block overrides it, so the empty element
   rendered as a stray yellow pill under the hero bullets whenever the offer had
   not loaded — which is exactly when the page is already looking broken. */
.hero-offer[hidden] { display: none; }
.hero-offer {
  display: inline-block; margin: 22px 0 0; padding: 11px 15px; border-radius: 12px;
  font-size: 14.5px; color: var(--text);
  background: rgba(255,210,63,.09); border: 1px solid rgba(255,210,63,.4);
}
.hero-offer b { color: var(--warn); }

/* Was-price. Only ever drawn from standard_price_pence — the figure the system
   genuinely charges once the launch hundred is gone — so the saving on the page
   is one somebody could actually have paid. */
/* Legible beside the amber. `--muted` against the yellow price and the yellow
   card border was hard to read — Andy: "Change the colour of the £99 as it's
   hard to see". White at reduced opacity keeps it clearly secondary without
   disappearing, and the strike still says what it is. */
.was-price {
  text-decoration: line-through; color: rgba(255,255,255,.62);
  font-weight: 500; margin-right: .45em;
}
.buy-price .was-price { font-size: .55em; }

/* Launch-offer note above the subscription grid. */
.offer-note {
  max-width: 760px; margin: 22px auto 0; text-align: center; padding: 14px 18px;
  border-radius: var(--radius-sm); color: var(--muted); font-size: 15px;
  background: rgba(255,210,63,.07); border: 1px solid rgba(255,210,63,.35);
}
.offer-note b { color: var(--warn); }

/* --------------------------- the device ---------------------------- */
.hero-device { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* NO SHELL. Andy: "you have placed the box in some sort of shell. Remove that
   shell. Its just a thin border it should have around the score board."
   
   The moulded case, the recessed bezel, the glass sheen, the little stand foot
   — all of it was drawn furniture around a photograph of nothing. The real
   product has a thin black frame and that is all, so that is all this is. The
   register page has always shown it this way. */
.device {
  width: 100%; max-width: 460px;
  background: #050608;
  border: 1px solid #22252c; border-radius: 10px; padding: 8px;
  box-shadow: 0 18px 44px -28px rgba(0,0,0,.9);
}
.device-screen { border-radius: 4px; overflow: hidden; background: #050608; }
.panel { position: relative; aspect-ratio: 128 / 32; width: 100%; }
.device-caption { color: var(--faint); font-size: 12.5px; letter-spacing: .02em; }

/* Real product photo in the hero (replaces the SVG mock when site/media/hero.* exists). */
.hero-photo {
  width: 100%; border-radius: 20px; border: 1px solid var(--line-2);
  box-shadow: var(--shadow); object-fit: cover;
}

/* ----------------------------- video ------------------------------- */
#video[hidden], #gallery[hidden] { display: none; }
.video-wrap {
  max-width: 900px; margin: 38px auto 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-2); box-shadow: var(--shadow); background: #000;
}
.video-wrap video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }

/* Multiple demo videos, side by side. */
.video-grid { max-width: 100%; margin: 38px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.video-grid .demo-video {
  width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; background: #000;
  border-radius: var(--radius); border: 1px solid var(--line-2); box-shadow: var(--shadow);
}
@media (max-width: 760px) { .video-grid { grid-template-columns: 1fr; } }

/* ---------------------------- gallery ------------------------------ */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 38px; }
.gallery-item {
  padding: 0; border: 1px solid var(--line); background: var(--card); cursor: pointer;
  border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.gallery-item:hover img { transform: scale(1.06); }
/* Video items in the gallery: first-frame thumbnail + play badge. */
.gallery-item.is-video { position: relative; }
.gallery-item.is-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-item .play-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff; font-size: 16px; padding-left: 3px;
  border: 1px solid rgba(255,255,255,.45); pointer-events: none; transition: background .2s;
}
.gallery-item.is-video:hover .play-badge { background: rgba(0,0,0,.72); }

/* Photo-slot placeholders (shown until you drop a file into site/media/). */
.gallery-item.placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; text-align: center; padding: 16px; cursor: default;
  border-style: dashed; border-color: var(--line-2);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 10px, transparent 10px 20px), var(--card);
}
.gallery-item.placeholder .ph-ic { font-size: 26px; opacity: .85; }
.gallery-item.placeholder .ph-label { font-size: 13.5px; font-weight: 650; color: var(--text); }
.ph-file { font-size: 11.5px; color: var(--faint); }
.ph-file code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--muted);
}
/* Video placeholder (until site/media/demo.mp4 exists). */
.video-wrap.placeholder-wrap { background: var(--card); border-style: dashed; border-color: var(--line-2); }
.media-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; aspect-ratio: 16 / 9; color: var(--muted); text-align: center; padding: 20px;
}
.media-placeholder .ph-ic { font-size: 34px; opacity: .85; }
.media-placeholder .ph-label { font-size: 16px; font-weight: 650; color: var(--text); }
.addon-price.included { color: var(--accent); }

/* The hero panel scales to its frame. The canvas is sized in DEVICE pixels —
   128 columns at 5.4 a piece is 691 wide — and the bezel it sits in is about
   400, with overflow:hidden. Left alone it was cropped at 43%, which quietly
   took the scores off the right-hand edge where they live. The register page
   has had `canvas{width:100%;height:auto}` all along; this is the same rule. */
#hero-panel { display: block; width: 100%; height: auto; }

/* simple lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 50; background: rgba(2,3,6,.9);
  display: grid; place-items: center; padding: 4vmin; backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }
/* Capped on the CONTAINER, not just the inner div. The markup carried
   id="lightbox-body" and not the class, so this rule matched nothing and a
   4080x3072 photo opened at natural size with nowhere to scroll — Andy: "when
   click a picture it is opening up full size!! it doesnt scroll so looks
   massive". Targeting .lightbox as well means a future markup change cannot
   quietly bring it back. */
.lightbox img, .lightbox video,
.lightbox-body img, .lightbox-body video {
  max-width: 94vw; max-height: 90vh; width: auto; height: auto;
  object-fit: contain; border-radius: 12px; box-shadow: var(--shadow);
  display: block;
}
.lightbox-close {
  position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(20,25,37,.8); color: var(--text);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { color: var(--accent); border-color: var(--accent); }

/* ---------------------------- features ----------------------------- */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.feature {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
}
.feature h3 { font-size: 17px; margin-bottom: 7px; }
.feature p { color: var(--muted); font-size: 14.5px; margin: 0; }
.feature-ic {
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: 14px;
  background: rgba(245,197,24,.10); border: 1px solid rgba(245,197,24,.25);
  position: relative;
}
.feature-ic::before, .feature-ic::after { content: ""; position: absolute; }
/* goal: ball */
.feature-ic[data-ic="goal"]::before { inset: 11px; border-radius: 50%; border: 2px solid var(--accent); box-shadow: 0 0 8px rgba(245,197,24,.5) inset; }
.feature-ic[data-ic="goal"]::after { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); left: 18px; top: 18px; }
/* card: red rectangle */
.feature-ic[data-ic="card"]::before { width: 13px; height: 18px; border-radius: 3px; background: var(--danger); left: 15px; top: 12px; transform: rotate(8deg); box-shadow: 0 0 10px rgba(239,90,107,.5); }
/* clock */
.feature-ic[data-ic="clock"]::before { inset: 11px; border-radius: 50%; border: 2px solid var(--accent); }
.feature-ic[data-ic="clock"]::after { width: 2px; height: 9px; background: var(--accent); left: 20px; top: 13px; transform-origin: bottom; transform: rotate(38deg); }
/* ticker: lines */
.feature-ic[data-ic="ticker"]::before { left: 11px; right: 11px; top: 16px; height: 2px; background: var(--accent); box-shadow: 0 6px 0 rgba(245,197,24,.5), 0 -6px 0 rgba(245,197,24,.5); }

/* ----------------------------- steps ------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; position: relative; }
.step-n {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  font-weight: 850; font-size: 18px; color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-deep)); box-shadow: var(--glow); margin-bottom: 16px;
}
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { color: var(--muted); margin: 0; }
.how-note { text-align: center; color: var(--muted); margin-top: 30px; }
.how-note a, .lede a, .faqs a, .foot a { color: var(--accent); text-decoration: none; font-weight: 650; }
.how-note a:hover, .faqs a:hover { text-decoration: underline; }

/* ------------------------- buy (hardware) -------------------------- */
.buy {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-top: 36px; box-shadow: var(--shadow);
}
.buy-info { padding: 30px 30px 30px; }
.kicker { font-size: 12px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.buy-info h3 { font-size: 24px; margin: 10px 0 12px; }
.buy-info > p { color: var(--muted); margin: 0 0 18px; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 26px; color: var(--text); font-size: 15px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: rgba(245,197,24,.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11L3.5 8l1-1 2 2 4.5-4.5 1 1z' fill='%23f5c518'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.buy-box { padding: 30px; background: linear-gradient(180deg, var(--card-2), var(--card)); border-left: 1px solid var(--line); }
.buy-price { display: flex; align-items: baseline; gap: 9px; }
.buy-price .big { font-size: 44px; font-weight: 860; letter-spacing: -.03em; }
.buy-per { color: var(--muted); font-size: 14px; }
.buy-box .btn { margin-top: 18px; }
.secure { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 14px; color: var(--faint); font-size: 12.5px; }
.methods { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; list-style: none; padding: 0; margin: 16px 0 0; }
.methods li { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--bg-2); color: var(--muted); font-size: 13px; }
.methods img { display: block; width: 22px; height: 22px; }
.buy-consent { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--faint); text-align: center; }
.buy-consent b { color: var(--muted); font-weight: 700; }
.lock { width: 12px; height: 12px; border-radius: 2px; border: 1.6px solid var(--faint); position: relative; }
.lock::before { content: ""; position: absolute; left: 2.5px; right: 2.5px; top: -4px; height: 5px; border: 1.6px solid var(--faint); border-bottom: 0; border-radius: 4px 4px 0 0; }

/* --------------------------- subscriptions ------------------------- */
.subs-head { text-align: center; margin: 56px 0 6px; }
.subs-head h3 { font-size: 24px; }
.subs-head p { color: var(--muted); margin: 8px 0 0; }
/* auto-fit, not a fixed 2. The catalogue is a runtime dial — plans can be
   added without a deploy — and a hardcoded two columns left the third package
   orphaned on a row of its own with a gap beside it. Andy: "The tiles are all
   out a bit". This lays out whatever it is given. */
.plan-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; margin-top: 26px; align-items: stretch;
}
.loading { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 30px; }

.plan {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; display: flex; flex-direction: column;
}
.plan.feat { border-color: rgba(245,197,24,.5); box-shadow: 0 0 0 1px rgba(245,197,24,.35), var(--shadow); }
.plan.has-offer { border-color: rgba(255,210,63,.6); box-shadow: 0 0 0 1px rgba(255,210,63,.45), var(--shadow); }
.tag-offer { background: var(--warn); color: #3a2c00; }
.plan .then { font-size: 12.5px; color: var(--warn); font-weight: 700; margin: 4px 0 0; }
.plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* The name stays on one line and the chip gives way instead. With both free to
   wrap, "2 months for the price of 1" took three lines in the pill and shoved
   "Single League" onto two — Andy: "The pills txt looks poor." */
.plan-name { font-size: 19px; font-weight: 780; white-space: nowrap; }
.tag {
  font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent); padding: 4px 9px;
  border-radius: 999px;
  /* A pill is one line by definition. Wrapped, it stops reading as a badge. */
  white-space: nowrap; flex: 0 0 auto;
}
.plan-price { margin: 16px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.plan-price .amt { font-size: 34px; font-weight: 850; letter-spacing: -.03em; }
.plan-price .per { color: var(--muted); font-size: 14px; }
.plan-desc { color: var(--muted); font-size: 14.5px; margin: 4px 0 16px; flex: 1; }
.plan .scope-note { font-size: 13px; color: var(--faint); margin: 0 0 16px; }
.plan .btn { margin-top: auto; }
.plan .btn-ghost { width: 100%; }

/* European bundle (full-width feature card) */
.bundle {
  margin-top: 16px; background:
    radial-gradient(600px 200px at 100% 0, rgba(245,197,24,.10), transparent 60%), var(--card);
  border: 1px solid rgba(245,197,24,.32); border-radius: var(--radius); padding: 26px 28px;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: center;
}
.bundle h3 { font-size: 22px; }
.bundle .bundle-desc { color: var(--muted); margin: 8px 0 14px; }
.bundle .bundle-count { color: var(--accent); font-weight: 700; white-space: nowrap; }
.bundle .chips { margin: 0; }
/* The chip gets its own line above the price. `align-self` does nothing here —
   .bundle-buy is a plain block, not a flex parent — so it sat inline and
   crowded "from £1.99". */
.bundle-buy .tag-offer { display: inline-block; margin: 0 0 10px; }
.bundle-buy { text-align: right; }
.bundle-buy .amt { font-size: 30px; font-weight: 850; }
.bundle-buy .per { color: var(--muted); font-size: 13.5px; display: block; margin-bottom: 12px; }
.bundle-note { font-size: 12.5px; color: var(--faint); margin: 10px 0 0; }

/* add-ons */
.addons-wrap { margin-top: 52px; }
.addons-title { font-size: 21px; text-align: center; }
.addons-sub { text-align: center; color: var(--muted); margin: 8px 0 22px; }
.addon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 720px; margin: 0 auto; }
.addon {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
}
.addon-ic { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto; background: rgba(245,197,24,.12); border: 1px solid rgba(245,197,24,.25); position: relative; }
.addon-ic::before { content: ""; position: absolute; left: 10px; right: 10px; top: 15px; height: 2px; background: var(--accent); box-shadow: 0 5px 0 rgba(245,197,24,.55), 0 -5px 0 rgba(245,197,24,.55); }
.addon-body { flex: 1; }
.addon-name { font-weight: 740; font-size: 16px; }
.addon-desc { color: var(--muted); font-size: 13.5px; }
.addon-price { font-weight: 820; color: var(--accent); white-space: nowrap; }

/* league chips */
.leagues-wrap { margin-top: 52px; text-align: center; }
.leagues-title { font-size: 20px; margin-bottom: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.chip {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 14px;
}
.chip.muted-chip { color: var(--muted); }

/* ------------------------------ FAQ -------------------------------- */
.faqs { max-width: 760px; margin: 36px auto 0; display: grid; gap: 12px; }
.faqs details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 20px; }
.faqs summary { cursor: pointer; font-weight: 680; font-size: 16.5px; padding: 16px 34px 16px 0; list-style: none; position: relative; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--accent); font-weight: 800; font-size: 20px; line-height: 1; }
.faqs details[open] summary::after { content: "–"; }
.faqs details p { color: var(--muted); margin: 0 0 16px; }

/* messages */
.msg { margin-top: 12px; font-size: 14px; min-height: 18px; text-align: center; }
.msg.ok { color: var(--accent); }
.msg.bad { color: var(--danger); }
.msg.warn { color: var(--warn); }

/* ----------------------------- footer ------------------------------ */
.foot { border-top: 1px solid var(--line); padding: 40px max(20px, calc((100% - var(--maxw)) / 2)); margin-top: 30px; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 18px; }
.foot-links a { color: var(--muted); text-decoration: none; font-size: 14px; }
.foot-links a:hover { color: var(--accent); }
.social { display: flex; gap: 2px; margin: -10px; }
.social a { display: inline-flex; padding: 10px; color: var(--muted); }
.social a:hover { color: var(--accent); }
.social svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.foot-fine { color: var(--faint); font-size: 12.5px; margin: 20px 0 0; }

/* --------------------------- responsive ---------------------------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 36px; }
  .hero-device { order: -1; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .buy { grid-template-columns: 1fr; }
  .buy-box { border-left: 0; border-top: 1px solid var(--line); }
  .bundle { grid-template-columns: 1fr; }
.bundle-buy { text-align: left; }
  .addon-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /* The section links go, but NOT the account link: hiding the whole nav left a
     phone with no way in to an existing account (Andy: "be good to have the
     Login at the top when it's on mobile"). */
  .nav-links a:not(.nav-app) { display: none; }
  .nav-links { margin-left: auto; gap: 0; }
  /* nowrap or the flex squeeze breaks "My account" over two lines and the
     header grows to fit it. */
  .nav-links .nav-app { padding: 8px 6px; white-space: nowrap; font-size: 14px; }
  .nav .btn-sm { white-space: nowrap; }
  .nav { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .features { grid-template-columns: 1fr; }
  .band { padding-top: 54px; padding-bottom: 54px; }
  .gallery-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}