/* =========================================================================
   SnookerON / BilliardON ordering sites - 2026 design system
   This file is IDENTICAL on both domains. Every brand colour arrives as a
   CSS custom property printed by cfginc/head.php from the brand palette.
   ========================================================================= */

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

:root {
    --text:        #eef1f5;
    --text-dim:    #b9c2ce;
    --muted:       #8d97a5;
    --line:        rgba(255,255,255,0.09);
    --line-soft:   rgba(255,255,255,0.055);
    --white:       #ffffff;

    --radius:      18px;
    --radius-sm:   12px;
    --radius-lg:   26px;
    --maxw:        1200px;
    --header-h:    74px;

    --shadow-1:    0 2px 10px rgba(0,0,0,0.30);
    --shadow-2:    0 18px 50px rgba(0,0,0,0.45);
    --shadow-pop:  0 30px 80px rgba(0,0,0,0.60);

    --ease:        cubic-bezier(.22,.61,.36,1);

    --ui:          'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --display:     'Barlow Condensed', 'Arial Narrow', var(--ui);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }

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

body.is-locked { overflow: hidden; }

img, svg { max-width: 100%; display: block; }

/* SAFETY NET. Every icon() SVG is sized by the component it sits in; one dropped into
   ordinary running text has no such rule and inflates to the full width of its container
   (a paragraph on the thank-you page turned into a giant circle this way). Text-level
   elements therefore default to the size of the line. Any component rule - all of which
   carry a class - still wins over this. */
p > svg, li > svg, span > svg, td > svg {
    width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
strong { color: var(--white); font-weight: 700; }

::selection { background: rgba(var(--accent-rgb), 0.35); }

/* ------------------------------------------------------------- layout ---- */

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

.section { padding: 96px 0; position: relative; }
.section--tight { padding: 64px 0; }
.section--alt { background: var(--bg-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

.section-head { max-width: 720px; margin-bottom: 46px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--display);
    font-size: 15px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
    color: var(--accent-hi);
    margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); border-radius: 2px; }
.section-head.center .eyebrow::before { display: none; }

h1, .h1 { font-size: clamp(38px, 5.6vw, 66px); letter-spacing: -0.03em; }
h2, .h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3, .h3 { font-size: clamp(20px, 2.1vw, 25px); }

.lead { font-size: clamp(17px, 1.35vw, 19.5px); color: var(--text-dim); line-height: 1.72; }
.muted { color: var(--muted); }
.small { font-size: 14.5px; }
.accent-text { color: var(--accent-hi); }

/* ------------------------------------------------------------ buttons ---- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 28px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease);
    white-space: nowrap;
    background: none;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-primary {
    /* --btn-a/--btn-b, not --accent-hi: see the note beside them in cfginc/head.php. The label
       sits ON this gradient, so every stop has to clear 4.5:1 against --accent-ink. */
    background: linear-gradient(135deg, var(--btn-a) 0%, var(--btn-b) 100%);
    color: var(--accent-ink);
    box-shadow: 0 10px 26px rgba(var(--accent-rgb), 0.30);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(var(--accent-rgb), 0.42); }

.btn-ghost { border-color: var(--line); color: var(--text); background: rgba(255,255,255,0.03); }
.btn-ghost:hover { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.07); transform: translateY(-2px); }

.btn-quiet { padding: 10px 16px; font-size: 14.5px; border-radius: 10px; color: var(--muted); }
.btn-quiet:hover { color: var(--text); background: rgba(255,255,255,0.06); }

.btn-block { width: 100%; }
.btn-sm { padding: 11px 20px; font-size: 14.5px; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

@media (max-width: 560px) { .hide-sm { display: none; } }

/* --------------------------------------------------------------- chip ---- */

.chip {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 15px 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.10);
    color: var(--text);
    font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18); }
.chip--neutral { border-color: var(--line); background: rgba(255,255,255,0.04); color: var(--text-dim); }
.chip--soon { border-color: rgba(255,196,60,0.4); background: rgba(255,196,60,0.10); color: #ffd479; }

.pill {
    display: inline-block; padding: 4px 11px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.pill--accent { background: var(--accent); color: var(--accent-ink); }
.pill--soft   { background: rgba(255,255,255,0.08); color: var(--text-dim); }
.pill--second { background: rgba(var(--second-rgb), 0.18); color: var(--white); border: 1px solid rgba(var(--second-rgb), 0.42); }

/* ------------------------------------------------------------- header ---- */

.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    height: var(--header-h);
    display: flex; align-items: center;
    background: rgba(8,10,12,0.55);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: background .25s var(--ease), border-color .25s var(--ease);
}
.site-header.is-stuck { background: rgba(8,10,12,0.88); border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 22px; }

.brand-logo { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-logo img { height: 30px; width: auto; }
.brand-logo .brand-sub {
    font-family: var(--display); font-size: 14px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); padding-left: 12px; border-left: 1px solid var(--line);
}

.main-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.main-nav a {
    padding: 9px 13px; border-radius: 9px; white-space: nowrap;
    font-size: 15px; font-weight: 600; color: var(--text-dim);
    transition: color .18s, background .18s;
}
.main-nav a:hover { color: var(--white); background: rgba(255,255,255,0.06); }

.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.cart-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 16px 10px 14px;
    border-radius: 999px; border: 1px solid var(--line);
    background: rgba(255,255,255,0.04);
    font-size: 15px; font-weight: 700; cursor: pointer;
    transition: border-color .18s, background .18s, transform .18s var(--ease);
}
.cart-btn:hover { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.10); }
.cart-btn svg { width: 19px; height: 19px; }
.cart-btn .cart-count {
    min-width: 21px; height: 21px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--accent); color: var(--accent-ink);
    font-size: 12px; font-weight: 800; line-height: 1;
}
.cart-btn .cart-count[data-empty="1"] { background: rgba(255,255,255,0.12); color: var(--muted); }
.cart-btn.is-bumped { animation: cartBump .45s var(--ease); }
@keyframes cartBump { 0%,100% { transform: scale(1); } 35% { transform: scale(1.12); } }

.nav-toggle {
    display: none; width: 44px; height: 44px; border-radius: 12px;
    border: 1px solid var(--line); background: rgba(255,255,255,0.04);
    align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

.mobile-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 890;
    background: rgba(10,12,14,0.97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    padding: 14px 0 22px;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.mobile-nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
.mobile-nav a {
    display: block; padding: 14px 4px; font-size: 17px; font-weight: 600;
    border-bottom: 1px solid var(--line-soft);
}
.mobile-nav .btn { margin-top: 18px; }

/* --------------------------------------------------------------- hero ---- */

.hero {
    position: relative; overflow: hidden;
    padding: calc(var(--header-h) + 78px) 0 92px;
    background:
        radial-gradient(1100px 620px at 82% -8%, var(--glow-a) 0%, transparent 62%),
        radial-gradient(900px 560px at 6% 22%, var(--glow-b) 0%, transparent 58%),
        var(--bg);
}
.hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
    background-size: 74px 74px;
    mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 76%);
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 76%);
}
.hero .wrap { position: relative; z-index: 2; }

.hero-grid {
    display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 56px; align-items: center;
}
.hero h1 { margin: 18px 0 20px; }
.hero h1 em { font-style: normal; color: var(--accent-hi); }
.hero .lead { max-width: 560px; }
.hero .btn-row { margin-top: 32px; }

/* Two flex items only: the icon, and one <span> holding the whole sentence. Loose text beside
   the icon becomes several anonymous flex items that each wrap on their own. align-items is
   flex-start so the icon sits on the first line when the sentence runs to two. */
.hero-note { margin-top: 20px; font-size: 14px; line-height: 1.55; color: var(--muted); display: flex; align-items: flex-start; gap: 8px; }
.hero-note svg { width: 15px; height: 15px; flex: none; opacity: .8; margin-top: 4px; }

.hero-stats {
    display: flex; flex-wrap: wrap; gap: 34px;
    margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line);
}
.hero-stats .stat b {
    display: block; font-family: var(--display); font-size: 34px; font-weight: 700;
    line-height: 1; color: var(--white); letter-spacing: .01em;
}
.hero-stats .stat span { font-size: 13.5px; color: var(--muted); }

/* ----------------------------------------------------- scoreboard mock ---- */

/* Room at the top for the camera chip to sit clear of the tablet, and at the left/bottom
   for the phone remote that leans out of the frame. */
/* --phone-in is how far the leaning phone reaches OVER the tablet. The timer strip pads
   itself by the same amount, so the phone can never sit on top of the match clock. Change
   the one variable and both stay in step. */
.mock { position: relative; padding: 34px 0 42px 0; --phone-in: 56px; --phone-w: 118px; }

.mock-tablet {
    position: relative;
    border-radius: 22px;
    padding: 13px;
    background: linear-gradient(160deg, #2b3038 0%, #14181d 46%, #0c0f12 100%);
    box-shadow: var(--shadow-pop), 0 0 0 1px rgba(255,255,255,0.07) inset;
    transform: perspective(1600px) rotateY(-9deg) rotateX(3deg);
    transition: transform .6s var(--ease);
}
.mock:hover .mock-tablet { transform: perspective(1600px) rotateY(-4deg) rotateX(1deg); }
.mock-tablet::after {
    content: ""; position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.22);
}

.mock-screen {
    border-radius: 12px; overflow: hidden;
    background: #05070a;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.9) inset;
}

.mock-top {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 13px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb),0.22), rgba(255,255,255,0.02));
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim);
}
.mock-top .live {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    color: #ff5d5d; letter-spacing: .14em;
}
.mock-top .live i { width: 7px; height: 7px; border-radius: 50%; background: #ff3b3b; animation: livePulse 1.6s infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* --------------------------------------------------------------------------
   THE SCREEN ITSELF - a CSS rebuild of what app/app_snookeron.php and
   app/app_billiardon_club.php actually draw, so the picture on the marketing
   page is the product and not a stylised idea of it. Keep the two in step.
   -------------------------------------------------------------------------- */

.mock-screen--snk, .mock-screen--bil { background: #05070a; }

/* ------------------------------------------------------------- SnookerON --- */

.snk-board { display: grid; grid-template-columns: 1fr 74px 1fr; align-items: start; padding: 10px 10px 4px; gap: 6px; }
.snk-side { min-width: 0; }

/* name plate + frames box, exactly the pairing the app puts above the points */
.snk-namerow { display: flex; align-items: stretch; gap: 3px; }
.snk-namerow--right { flex-direction: row; }
.snk-name {
    flex: 1; min-width: 0;
    padding: 5px 7px; border-radius: 4px;
    background: rgba(255,255,255,0.07); color: #dfe4ea;
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; justify-content: center;
}
/* the app turns the plate of whoever is at the table light grey with black text */
.snk-name.is-at-table { background: #d4d4d4; color: #101010; }
.snk-frames {
    width: 34px; flex: none;
    border: 1px solid rgba(255,255,255,0.55); border-radius: 4px;
    font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1;
    color: var(--white); text-align: center;
    display: flex; align-items: center; justify-content: center;
}

.snk-points {
    margin-top: 4px; padding: 6px 0 8px;
    background: rgba(0,0,0,0.85);
    font-family: var(--display); font-weight: 400;
    font-size: clamp(48px, 6.4vw, 78px); line-height: .92; letter-spacing: .06em;
    color: #ffffff; text-align: center; font-variant-numeric: tabular-nums;
}

/* the break strip under the points: the balls of the current break, then its value */
.snk-break {
    margin-top: 3px; padding: 5px 7px; min-height: 26px;
    background: rgba(0,0,0,0.85);
    display: flex; align-items: center; justify-content: center; gap: 7px;
}
.snk-break-balls { display: inline-flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.snk-break-balls i {
    width: 7px; height: 7px; border-radius: 50%;
    box-shadow: inset -1px -1px 2px rgba(0,0,0,.6), inset 1px 1px 2px rgba(255,255,255,.3);
}
.snk-break b { font-size: 11px; font-weight: 700; color: #fff; letter-spacing: .04em; }

.snk-mid { text-align: center; padding-top: 2px; }
.snk-bestof-label { font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; color: #101010;
                    background: #d4d4d4; border-radius: 3px 3px 0 0; padding: 1px 0; font-weight: 700; }
.snk-bestof {
    background: #d4d4d4; color: #101010; border-radius: 0 0 4px 4px;
    font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1; padding: 2px 0 5px;
}
.snk-frame-no { margin-top: 9px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* the ball row the marker actually taps */
.snk-balls { display: flex; gap: 7px; justify-content: center; padding: 9px 12px 7px; }
.snk-ball {
    width: 26px; height: 26px; border-radius: 50%; background: var(--b);
    box-shadow: inset -3px -4px 7px rgba(0,0,0,.55), inset 3px 3px 6px rgba(255,255,255,.3);
}

.snk-actions { display: flex; gap: 5px; justify-content: center; align-items: center; padding: 0 12px 9px; flex-wrap: wrap; }
.snk-foul {
    font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff;
    padding: 4px 8px; border-radius: 7px;
    background: linear-gradient(180deg, rgba(255,255,255,0.16), transparent), var(--b);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5) inset;
}
.snk-tag {
    font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff;
    padding: 4px 9px; border-radius: 6px;
}
.snk-tag--pot  { background: #212e6b; }
.snk-tag--safe { background: #215334; }

/* the timer strip along the bottom of the app */
.mock-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 13px 8px calc(var(--phone-in) + 12px);
    border-top: 1px solid rgba(255,255,255,0.07);
    font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.mock-bar b, .mock-bar em {
    font-style: normal; font-family: var(--display); font-size: 12px; letter-spacing: .04em;
    color: var(--text-dim); margin-left: 4px;
}
.mock-bar-right { margin-left: auto; }

/* ------------------------------------------------------------ BilliardON --- */

.bil-board { display: grid; grid-template-columns: 1fr 82px 1fr; align-items: start; padding: 12px 10px 6px; gap: 6px; }
.bil-side { min-width: 0; text-align: center; }

.bil-nameline { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.bil-avatar {
    width: 20px; height: 20px; border-radius: 50%; flex: none;
    background: linear-gradient(150deg, rgba(255,255,255,0.28), rgba(255,255,255,0.07));
    border: 1.5px solid rgba(255,255,255,0.8);
}
.bil-name {
    font-size: 12.5px; font-weight: 700; color: #fff; letter-spacing: .03em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bil-points {
    margin-top: 6px; padding: 4px 0 6px;
    background: rgba(0,0,0,0.25);
    font-family: var(--display); font-weight: 300;
    font-size: clamp(56px, 7.4vw, 92px); line-height: .95;
    color: #fff; font-variant-numeric: tabular-nums;
}

/* the per-rack achievement toggles (break-and-run, runout, golden break) - amber when on,
   the same switches the app puts under each score */
.bil-flags { display: flex; gap: 9px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.bil-flags span {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #b9a887;
}
.bil-flags span i {
    width: 18px; height: 9px; border-radius: 5px; position: relative;
    background: rgba(255,255,255,0.18); flex: none;
}
.bil-flags span i::after {
    content: ""; position: absolute; top: 1.5px; left: 1.5px;
    width: 6px; height: 6px; border-radius: 50%; background: #888;
}
.bil-flags span.is-on { color: #ffce6a; }
.bil-flags span.is-on i { background: rgba(255,170,0,0.55); }
.bil-flags span.is-on i::after { left: 10.5px; background: #ffaa00; }

.bil-pm { display: flex; gap: 8px; justify-content: center; margin-top: 9px; }
.bil-pm span {
    width: 44px; height: 26px; border-radius: 7px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-dim); font-size: 17px; font-weight: 700; line-height: 24px; text-align: center;
}
.bil-pm span.is-plus { background: rgba(var(--accent-rgb),0.30); border-color: rgba(var(--accent-rgb),0.45); color: #fff; }

.bil-mid { text-align: center; }
.bil-raceto-label { font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; }
.bil-raceto { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1.05; color: #fff; }
.bil-clock { margin-top: 10px; line-height: 1.25; }
.bil-clock .l { display: block; font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bil-clock b { display: block; font-family: var(--display); font-size: 13px; color: #fff; letter-spacing: .04em; }
.bil-clock em { display: block; font-style: normal; font-family: var(--display); font-size: 11px; color: #cfcfcf; letter-spacing: .04em; }
.bil-pause { margin-top: 11px; color: var(--text-dim); }
.bil-pause i { display: inline-block; width: 3px; height: 11px; background: currentColor; margin: 0 1px; vertical-align: middle; }
.bil-pause span { display: block; font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

.bil-rack { display: flex; gap: 6px; justify-content: center; padding: 10px 12px 13px; border-top: 1px solid rgba(255,255,255,0.07); flex-wrap: wrap; }
.bil-ball {
    width: 24px; height: 24px; border-radius: 50%; background: var(--b);
    box-shadow: inset -3px -4px 6px rgba(0,0,0,.55), inset 3px 3px 5px rgba(255,255,255,.28);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; font-style: normal; color: #fff;
}
.bil-ball.is-potted { opacity: .26; }

/* floating phone remote */
.mock-phone {
    position: absolute; z-index: 3;
    left: calc(var(--phone-in) - var(--phone-w)); bottom: 46px; width: var(--phone-w);
    border-radius: 18px; padding: 8px;
    background: linear-gradient(160deg, #2c3138 0%, #14171b 60%);
    box-shadow: var(--shadow-2), 0 0 0 1px rgba(255,255,255,0.08) inset;
    transform: rotate(-7deg);
}
.mock-phone .screen { background: #06080b; border-radius: 11px; padding: 9px 8px; }
.mock-phone .ptitle { font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 7px; }
.mock-phone .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.mock-phone .pad b { height: 21px; border-radius: 5px; background: rgba(255,255,255,0.09); }
.mock-phone .pad b.a { background: rgba(var(--accent-rgb),0.55); }
.mock-phone .pad b.s { background: rgba(var(--second-rgb),0.5); }
.mock-phone .bar { margin-top: 7px; height: 16px; border-radius: 5px; background: rgba(var(--accent-rgb),0.30); }

/* floating camera chip.
   It is FIRST in the DOM but the tablet next to it is transformed, so without a z-index the
   tablet paints over the chip and eats the bottom half of the words. */
.mock-cam {
    position: absolute; right: -8px; top: 0; z-index: 3;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 15px 9px 11px; border-radius: 999px;
    background: rgba(10,13,16,0.92); border: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    font-size: 12.5px; font-weight: 700; color: var(--text-dim); white-space: nowrap;
}
.mock-cam svg { width: 16px; height: 16px; color: var(--accent-hi); }

/* -------------------------------------------------------- switch notice -- */

.notice {
    display: grid; grid-template-columns: 60px minmax(0,1fr); gap: 20px;
    padding: 26px 30px;
    border-radius: var(--radius);
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    background: linear-gradient(120deg, rgba(var(--accent-rgb),0.13), rgba(255,255,255,0.02) 62%);
}
.notice .ico {
    width: 60px; height: 60px; border-radius: 16px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--accent-rgb), 0.18); border: 1px solid rgba(var(--accent-rgb), 0.32);
}
.notice .ico svg { width: 27px; height: 27px; color: var(--accent-hi); }
.notice h3 { margin-bottom: 8px; }

/* -------------------------------------------------------------- cards ---- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.18); }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* steps */
/* The number sits in the OPPOSITE corner to the icon. It used to be top-left at the same
   height as the icon tile, which printed the outlined numeral straight over it. */
.step { position: relative; }
.step .num {
    position: absolute; top: 20px; right: 26px; left: auto;
    font-family: var(--display); font-size: 54px; font-weight: 700; line-height: 1;
    color: transparent; -webkit-text-stroke: 1.5px rgba(var(--accent-rgb),0.55);
    pointer-events: none;
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--text-dim); font-size: 15.5px; }

/* feature cards */
.feature .ico {
    width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.28), rgba(var(--accent-rgb),0.10));
    border: 1px solid rgba(var(--accent-rgb),0.28);
}
.feature .ico svg { width: 22px; height: 22px; color: var(--accent-hi); }
.feature h3 { font-size: 18.5px; margin-bottom: 8px; }
.feature p { font-size: 15px; color: var(--text-dim); margin: 0; }

/* checklist */
.checklist li {
    display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 13px;
    padding: 11px 0; border-bottom: 1px solid var(--line-soft);
    font-size: 15.5px; color: var(--text-dim);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li b { color: var(--white); font-weight: 700; }
.checklist .tick {
    width: 22px; height: 22px; border-radius: 50%; margin-top: 3px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--accent-rgb),0.16); border: 1px solid rgba(var(--accent-rgb),0.36);
}
.checklist .tick svg { width: 12px; height: 12px; color: var(--accent-hi); }

/* compare old vs new */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
/* single-column variant: the old hardware-vs-subscription comparison is gone, so the
   remaining panel must not sit at half width on a wide screen */
.compare--single { grid-template-columns: minmax(0, 640px); justify-content: center; }
.compare .col { border-radius: var(--radius); border: 1px solid var(--line); padding: 26px; background: var(--surface); }
.compare .col.old { background: rgba(255,255,255,0.02); }
.compare .col.new { border-color: rgba(var(--accent-rgb),0.35); background: linear-gradient(150deg, rgba(var(--accent-rgb),0.10), var(--surface) 60%); }
.compare h4 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.compare .col.new h4 { color: var(--accent-hi); }
.compare li { display: flex; gap: 11px; padding: 9px 0; font-size: 15.5px; color: var(--text-dim); }
.compare li svg { width: 17px; height: 17px; flex: none; margin-top: 4px; }
.compare .col.old li svg { color: #7a828e; }
.compare .col.new li svg { color: var(--accent-hi); }

/* --------------------------------------------------------------- plans --- */

.plans { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: start; }

.plan {
    position: relative;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--surface);
    padding: 32px;
    display: flex; flex-direction: column;
    transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.plan:hover { transform: translateY(-4px); }
.plan--featured {
    border-color: rgba(var(--accent-rgb),0.45);
    background: linear-gradient(165deg, rgba(var(--accent-rgb),0.13) 0%, var(--surface) 46%);
    box-shadow: 0 24px 60px rgba(var(--accent-rgb),0.14);
}
.plan--featured::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--accent-rgb),0.55), transparent 40%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.plan .plan-flag { position: absolute; top: -12px; left: 32px; }

.plan-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.plan-logo { height: 26px; width: auto; }
.plan h3 { font-size: 23px; }
.plan .plan-sub { color: var(--text-dim); font-size: 15.5px; margin-bottom: 22px; min-height: 3.1em; }

.plan-price { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 4px; }
.plan-price .amount {
    font-family: var(--display); font-weight: 700; font-size: 62px; line-height: .9;
    color: var(--white); letter-spacing: -0.01em;
}
.plan-price .cur { font-family: var(--display); font-size: 30px; color: var(--text-dim); line-height: 1.2; }
.plan-price .per { font-size: 14.5px; color: var(--muted); padding-bottom: 7px; }
.plan-vat { font-size: 13px; color: var(--muted); margin-bottom: 22px; }

.plan-features { margin: 4px 0 26px; border-top: 1px solid var(--line-soft); padding-top: 18px; }
.plan-features li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 11px; padding: 7px 0; font-size: 15px; color: var(--text-dim); }
.plan-features svg { width: 16px; height: 16px; margin-top: 4px; color: var(--accent-hi); }

.plan-buy { margin-top: auto; display: flex; gap: 12px; align-items: center; }
.plan-buy .btn { flex: 1; }

/* quantity stepper */
.qty {
    display: inline-flex; align-items: center;
    border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,0.04);
    padding: 4px;
}
.qty button {
    width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
    background: transparent; color: var(--text-dim); font-size: 19px; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background .16s, color .16s;
}
.qty button:hover { background: rgba(var(--accent-rgb),0.20); color: var(--white); }
.qty input {
    width: 42px; border: 0; background: transparent; text-align: center;
    color: var(--white); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
    -moz-appearance: textfield; appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--sm button { width: 28px; height: 28px; font-size: 16px; }
.qty--sm input { width: 34px; font-size: 14.5px; }

/* period switcher on a plan card */
.period-switch {
    display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px;
    padding: 5px; margin-bottom: 22px;
    border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.03);
}
.period-opt {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 9px 4px; border: 0; border-radius: 10px; cursor: pointer;
    background: transparent; color: var(--text-dim);
    font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center;
    transition: background .18s var(--ease), color .18s var(--ease);
}
.period-opt:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.period-opt.is-active { background: var(--accent); color: var(--accent-ink); }
.period-opt i { font-style: normal; font-size: 10.5px; font-weight: 800; opacity: .85; letter-spacing: .02em; }
.period-opt.is-active i { opacity: 1; }

/* recommended hardware */
.hw-block { margin-bottom: 26px; }
.hw-title { display: flex; align-items: center; gap: 11px; font-size: 20px; margin-bottom: 16px; }
.hw-title svg { width: 21px; height: 21px; color: var(--accent-hi); flex: none; }
.hw-scroll { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.hw-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.hw-table th {
    text-align: left; padding: 14px 20px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); border-bottom: 1px solid var(--line); font-weight: 700; white-space: nowrap;
}
.hw-table td { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); font-size: 15px; color: var(--text-dim); vertical-align: top; }
.hw-table tr:last-child td { border-bottom: 0; }
.hw-table td b { color: var(--white); font-weight: 700; }
.hw-table td:first-child { white-space: nowrap; }
/* Tablets table only (tier | what to look for | models): the tier pill needs no room, the
   spec column carries the argument, and the model names must not be squeezed into a
   four-line stack. The camera and hub tables order their columns differently - leave them. */
.hw-table--specs th:nth-child(1), .hw-table--specs td:nth-child(1) { width: 16%; }
.hw-table--specs th:nth-child(2), .hw-table--specs td:nth-child(2) { width: 50%; }
.hw-table--specs th:nth-child(3), .hw-table--specs td:nth-child(3) { width: 34%; }
.hw-note { display: flex; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--muted); }
.hw-note svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.hw-disclaimer { border-color: rgba(255,196,60,0.34); background: linear-gradient(120deg, rgba(255,196,60,0.09), rgba(255,255,255,0.02) 62%); }
.hw-disclaimer .ico { background: rgba(255,196,60,0.14); border-color: rgba(255,196,60,0.32); }
.hw-disclaimer .ico svg { color: #ffc43c; }

/* add-on rows */
.addon-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.addon-tabs button {
    padding: 10px 18px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line); background: rgba(255,255,255,0.03);
    color: var(--text-dim); font-size: 14.5px; font-weight: 700;
    transition: all .18s var(--ease);
}
.addon-tabs button:hover { color: var(--white); border-color: rgba(255,255,255,0.24); }
.addon-tabs button.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.addon-panel { display: none; }
.addon-panel.is-active { display: block; animation: fadeUp .3s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.addon-row {
    display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 20px; align-items: center;
    padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); margin-bottom: 12px;
    transition: border-color .2s, background .2s;
}
.addon-row:hover { border-color: rgba(var(--accent-rgb),0.35); background: var(--surface-2); }
.addon-row .t { font-weight: 700; font-size: 16.5px; }
.addon-row .d { font-size: 14px; color: var(--muted); }
.addon-row .p { font-family: var(--display); font-size: 27px; font-weight: 700; color: var(--white); white-space: nowrap; }
.addon-row .p small { font-family: var(--ui); font-size: 12.5px; color: var(--muted); font-weight: 600; display: block; text-align: right; letter-spacing: 0; }

/* ---------------------------------------------------------------- faq ---- */

.faq details {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); margin-bottom: 12px; overflow: hidden;
}
.faq details[open] { border-color: rgba(var(--accent-rgb),0.34); background: var(--surface-2); }
.faq summary {
    list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; position: relative;
    font-size: 17px; font-weight: 700; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px;
    margin-top: -6px; border-right: 2px solid var(--accent-hi); border-bottom: 2px solid var(--accent-hi);
    transform: rotate(45deg); transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .answer { padding: 0 24px 22px; color: var(--text-dim); font-size: 15.5px; }

/* ------------------------------------------------------------- proof ---- */

/* The one piece of evidence on the page. It gets the weight of a hero, not of a card: the poster
   runs the full column width and the copy sits around it. */

.proof {
    border: 1px solid rgba(var(--accent-rgb),0.26); border-radius: var(--radius-lg);
    background:
        radial-gradient(760px 300px at 50% 0%, rgba(var(--accent-rgb),0.16), transparent 72%),
        var(--surface);
    padding: 42px;
}
.proof-head { max-width: 780px; }
.proof-head h2 { margin: 10px 0 0; }
.proof-head .lead { margin-top: 12px; }

.proof-player { margin: 30px 0 0; }

/* The button IS the poster - a whole clickable frame, so the target is the picture and not just
   the little play badge. */
.proof-play {
    display: block; position: relative; width: 100%; padding: 0; border: 0; cursor: pointer;
    border-radius: var(--radius); overflow: hidden; background: #000;
    box-shadow: var(--shadow-2);
    -webkit-appearance: none; appearance: none;
}
.proof-play img { display: block; width: 100%; height: auto; }
.proof-play::after {
    /* a touch of shade so the badge and the label stay legible on any frame */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.26), transparent 34%, transparent 66%, rgba(0,0,0,0.34));
    pointer-events: none;
}
.proof-btn {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 84px; height: 84px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--accent-ink);
    box-shadow: 0 10px 40px rgba(0,0,0,0.55), 0 0 0 10px rgba(var(--accent-rgb),0.16);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.proof-btn svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.proof-play:hover .proof-btn { transform: translate(-50%, -50%) scale(1.07); }
.proof-play:focus-visible { outline: 3px solid var(--accent-hi); outline-offset: 3px; }

/* TOP RIGHT, not top left: a club's stream puts its own logo in the top-left corner - both of
   these videos do - and a badge dropped on top of someone's logo is the wrong first impression
   for a section about crediting them. */
.proof-live {
    position: absolute; right: 16px; top: 16px;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 999px;
    background: rgba(0,0,0,0.62); backdrop-filter: blur(6px);
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #fff;
}
.proof-live .dot { width: 8px; height: 8px; border-radius: 50%; background: #ff2f3a; }

.proof-player figcaption {
    margin-top: 14px; font-size: 15px; color: var(--text);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
}
.proof-player figcaption span { color: var(--muted); font-size: 13.5px; }

.proof-points {
    margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 34px;
}
.proof-points > div { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }
.proof-points svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--accent-hi); }
.proof-points b { color: var(--white); font-weight: 700; }

/* The setup video in "What you need". It reuses the proof facade's look, so these rules only
   place it: capped and centred, because that section's wrap is full width and a 16:9 poster
   stretched right across it would be the largest thing on the page - larger than the price.
   Declared AFTER .proof-player so the margin here wins; the two selectors weigh the same. */
.setup-video { max-width: 840px; margin: 46px auto 0; }
.setup-video video {
    display: block; width: 100%; border-radius: var(--radius);
    background: #000; box-shadow: var(--shadow-2);
}
.setup-video figcaption { justify-content: center; text-align: center; }

/* Once played, the poster is replaced by the real player and must keep the same shape. */
.proof-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow-2); }
.proof-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 820px) {
    .proof { padding: 24px 20px; }
    .proof-points { grid-template-columns: 1fr; gap: 16px; }
    .proof-btn { width: 64px; height: 64px; }
    .proof-btn svg { width: 24px; height: 24px; }
}

/* ------------------------------------------------------ assurance row ---- */

/* The four things that lower the risk of a first order, directly under the price. Deliberately
   quiet - a loud panel here reads as a sales pitch at the exact moment the visitor is deciding
   whether to trust us. */

.assure {
    margin-top: 34px; padding: 26px 28px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 34px;
}
.assure-item { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }
.assure-item svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--accent-hi); }
.assure-item b { color: var(--white); font-weight: 700; }
.assure-item em { font-style: normal; color: var(--white); font-weight: 600; }

@media (max-width: 820px) {
    .assure { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
}

/* -------------------------------------------------------- disclosure ---- */

/* A long reference block folded away until it is asked for - the equipment tables. Same
   <details> mechanics as the FAQ, but sized as a section rather than a question, and it must
   not inherit the FAQ's rules, which is why it carries its own class. */

.disclose {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); margin-top: 30px; overflow: hidden;
}
.disclose[open] { border-color: rgba(var(--accent-rgb),0.30); background: var(--surface-2); }
.disclose > summary {
    list-style: none; cursor: pointer; padding: 22px 60px 22px 24px; position: relative;
    display: block;
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::after {
    content: ""; position: absolute; right: 26px; top: 50%; width: 10px; height: 10px;
    margin-top: -8px; border-right: 2px solid var(--accent-hi); border-bottom: 2px solid var(--accent-hi);
    transform: rotate(45deg); transition: transform .22s var(--ease);
}
.disclose[open] > summary::after { transform: rotate(-135deg); margin-top: -3px; }
.disclose .disclose-title {
    display: block; font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--white);
}
.disclose .disclose-sub { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.disclose .disclose-body { padding: 4px 24px 26px; }
.disclose .disclose-body .hw-block:first-child { margin-top: 0; }

/* ----------------------------------------------------------- cta band ---- */

.cta-band {
    border-radius: var(--radius-lg);
    padding: 54px;
    text-align: center;
    background:
        radial-gradient(700px 320px at 50% 0%, rgba(var(--accent-rgb),0.30), transparent 70%),
        var(--surface);
    border: 1px solid rgba(var(--accent-rgb),0.30);
}
.cta-band h2 { margin-bottom: 14px; }
.cta-band .btn-row { justify-content: center; margin-top: 28px; }

/* ------------------------------------------------------------- footer ---- */

.site-footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: 58px 0 34px; margin-top: 20px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 34px; }
.site-footer h5 { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; font-weight: 700; }
.site-footer li { padding: 6px 0; }
.site-footer a { color: var(--text-dim); font-size: 15px; }
.site-footer a:hover { color: var(--accent-hi); }
.site-footer .logo { height: 28px; margin-bottom: 16px; }
.footer-bottom {
    margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--line-soft);
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
    font-size: 13.5px; color: var(--muted);
}
.pay-note { display: flex; align-items: center; gap: 9px; }
.pay-note svg { width: 16px; height: 16px; }

/* -------------------------------------------------------- cart drawer ---- */

.drawer-overlay {
    position: fixed; inset: 0; z-index: 950;
    background: rgba(4,6,8,0.66);
    backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .28s var(--ease);
}
.drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 960;
    width: min(440px, 100%);
    display: flex; flex-direction: column;
    background: var(--bg-2);
    border-left: 1px solid var(--line);
    box-shadow: -30px 0 80px rgba(0,0,0,0.5);
    transform: translateX(102%);
    transition: transform .34s var(--ease);
}
.drawer.is-open { transform: none; }

.drawer-head {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 22px; border-bottom: 1px solid var(--line); flex: none;
}
.drawer-head h3 { font-size: 19px; }
/* the cart glyph next to the title - without a size it opened the drawer with a
   200px shopping trolley on top of the heading */
.drawer-head > svg { width: 20px; height: 20px; flex: none; color: var(--accent-hi); }
.drawer-head .close {
    margin-left: auto; width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--line); background: rgba(255,255,255,0.04);
    display: flex; align-items: center; justify-content: center;
}
.drawer-head .close svg { width: 16px; height: 16px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.drawer-foot { flex: none; padding: 18px 22px 22px; border-top: 1px solid var(--line); background: var(--surface); }

.cart-line {
    display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 14px;
    padding: 16px 0; border-bottom: 1px solid var(--line-soft);
}
.cart-line:first-child { padding-top: 2px; }
.cart-line .mark {
    width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--accent-rgb),0.14); border: 1px solid rgba(var(--accent-rgb),0.28);
    font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--accent-hi);
}
.cart-line .mark.is-second { background: rgba(var(--second-rgb),0.16); border-color: rgba(var(--second-rgb),0.34); color: #cfe6f7; }
.cart-line .t { font-weight: 700; font-size: 15.5px; }
.cart-line .d { font-size: 13px; color: var(--muted); margin-bottom: 9px; }
.cart-line .price { text-align: right; font-weight: 800; font-size: 15.5px; white-space: nowrap; }
.cart-line .unit { font-size: 12px; color: var(--muted); font-weight: 600; }
.cart-line .rm {
    background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 12.5px;
    padding: 0; margin-left: 12px; text-decoration: underline; text-underline-offset: 3px;
}
.cart-line .rm:hover { color: #ff6b6b; }
.cart-line .ctl { display: flex; align-items: center; }

.cart-empty { text-align: center; padding: 46px 10px; color: var(--muted); }
.cart-empty svg { width: 44px; height: 44px; margin: 0 auto 16px; opacity: .35; }

.sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 15px; color: var(--text-dim); }
.sum-row.save { color: var(--accent-hi); font-weight: 700; }
.sum-row.total {
    margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line);
    font-size: 21px; font-weight: 800; color: var(--white);
}
.sum-note { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

/* ------------------------------------------------------------ cart page -- */

.cart-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,0.9fr); gap: 26px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.panel + .panel { margin-top: 20px; }
.panel h3 { font-size: 19px; margin-bottom: 18px; }
.panel--sticky { position: sticky; top: calc(var(--header-h) + 20px); }

.cart-table-row {
    display: grid; grid-template-columns: 46px minmax(0,1fr) auto auto auto; gap: 18px; align-items: center;
    padding: 20px 0; border-bottom: 1px solid var(--line-soft);
}
.cart-table-row:last-of-type { border-bottom: 0; }
.cart-table-row .mark { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb),0.14); border: 1px solid rgba(var(--accent-rgb),0.28); font-family: var(--display); font-weight: 700; color: var(--accent-hi); }
.cart-table-row .mark.is-second { background: rgba(var(--second-rgb),0.16); border-color: rgba(var(--second-rgb),0.34); color: #cfe6f7; }
.cart-table-row .t { font-weight: 700; font-size: 17px; }
.cart-table-row .d { font-size: 13.5px; color: var(--muted); }
.cart-table-row .u { font-size: 14.5px; color: var(--text-dim); white-space: nowrap; }
.cart-table-row .l { font-weight: 800; font-size: 17px; white-space: nowrap; min-width: 76px; text-align: right; }

.promo-form { display: flex; gap: 10px; }
.promo-form input { flex: 1; }

/* --------------------------------------------------------------- forms --- */

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.field .req { color: var(--accent-hi); }

/* Every text-like input, listed by type so a checkbox never gets caught. A missing type here
   means a raw white browser box in the middle of a dark form - which is what password did. */
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password],
input[type=search], input[type=url], input[type=date], select, textarea {
    width: 100%; padding: 13px 15px;
    color-scheme: dark;
    border-radius: 11px; border: 1px solid var(--line);
    background: rgba(255,255,255,0.035);
    color: var(--text); font-family: inherit; font-size: 15.5px;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
input::placeholder, textarea::placeholder { color: #6c7683; }
/* A club signing in gets browser autofill on these fields; left alone Chrome paints them
   pale blue and the dark form falls apart at exactly the wrong moment. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    /* --surface2 was a typo for --surface-2. An undefined custom property makes the whole
       declaration invalid at computed-value time, so this rule did nothing and Chrome went on
       painting its pale blue autofill background over the dark form. */
    -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
    caret-color: var(--text);
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.16);
    background: rgba(255,255,255,0.06);
}
select {
    appearance: none; -webkit-appearance: none; cursor: pointer; color-scheme: dark;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d97a5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 13px center; background-size: 18px;
    padding-right: 40px;
}
select option { background: #14181d; color: var(--text); }

/* the rule for a field, said before it is broken rather than after */
.field-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.field-hint.is-bad { color: #ffb3b3; }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }

.check {
    display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 12px;
    font-size: 14.5px; color: var(--text-dim); cursor: pointer; align-items: start;
}
.check input { width: 20px; height: 20px; accent-color: var(--accent); margin-top: 2px; }

.form-error, .form-ok {
    padding: 14px 18px; border-radius: 11px; margin-bottom: 20px; font-size: 15px;
}
/* The error box leads with an icon() that has no width of its own - unsized it inflated to
   fill the whole box and buried the message the customer needs to read. Flex only here:
   .form-ok is plain prose, and flex would break its sentence into columns. */
.form-error { display: flex; align-items: flex-start; gap: 11px; }
.form-error svg, .form-ok svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }
.form-error {
    background: rgba(255,70,70,0.10); border: 1px solid rgba(255,70,70,0.35); color: #ffb3b3;
}
.form-ok {
    background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.34); color: var(--text);
}

/* the reassurance lines under a summary: "nothing is shipped", "card handled by the provider" */
.assure { margin-top: 20px; display: grid; gap: 10px; }
.assure li { display: flex; gap: 9px; align-items: flex-start; }
.assure svg { width: 15px; height: 15px; flex: none; margin-top: 2px; opacity: .85; }

/* steps bar on checkout */
.steps-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 34px; flex-wrap: wrap; }
.steps-bar .s { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--muted); font-weight: 600; }
.steps-bar .s i {
    width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-size: 13px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.07); color: var(--muted);
}
.steps-bar .s i svg { width: 14px; height: 14px; }   /* the tick on a finished step */
.steps-bar .s.is-done i { background: rgba(var(--accent-rgb),0.22); color: var(--accent-hi); }
.steps-bar .s.is-now  i { background: var(--accent); color: var(--accent-ink); }
.steps-bar .s.is-now  { color: var(--white); }
.steps-bar .sep { flex: 1; height: 1px; background: var(--line); min-width: 18px; }

/* review list on checkout step 2 */
.review-list li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.review-list li:last-child { border-bottom: 0; }
.review-list .q { color: var(--muted); font-size: 13.5px; }

/* --------------------------------------------------------------- toast --- */

.toast-host { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 990; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 20px; border-radius: 999px;
    background: rgba(16,20,24,0.97); border: 1px solid rgba(var(--accent-rgb),0.4);
    box-shadow: var(--shadow-2); font-size: 15px; font-weight: 600;
    animation: toastIn .28s var(--ease);
}
.toast svg { width: 17px; height: 17px; color: var(--accent-hi); }
.toast.is-out { animation: toastOut .28s var(--ease) forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px); } }

/* --------------------------------------------------------- page header --- */

.page-hero {
    padding: calc(var(--header-h) + 54px) 0 40px;
    background: radial-gradient(760px 340px at 20% 0%, var(--glow-a), transparent 66%), var(--bg);
    border-bottom: 1px solid var(--line-soft);
}
.page-hero h1 { font-size: clamp(30px, 4vw, 46px); }
.page-hero .lead { margin-top: 12px; }

/* ------------------------------------------------------- reveal on scroll */

/* only hidden when JS is running, so a script failure can never blank the shop */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* -------------------------------------------------------------- to top --- */

.to-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 700;
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--line); background: rgba(16,20,24,0.9);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease);
}
.to-top.is-on { opacity: 1; pointer-events: auto; }
.to-top:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb),0.5); }
.to-top svg { width: 18px; height: 18px; color: var(--accent-hi); }

.eml-fallback { unicode-bidi: bidi-override; }

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 1080px) {
    .hero-grid { grid-template-columns: 1fr; gap: 54px; }
    .mock { max-width: 560px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .cart-layout { grid-template-columns: 1fr; }
    .panel--sticky { position: static; }
}

/* The header row is logo + nav + cart, and the nav cannot shrink (its links are nowrap).
   Between these widths it needs ~1120px, so the cart button - the one control a shop cannot
   afford to lose - was being pushed off the right edge on any ordinary laptop. Tighten the
   row first, then hand over to the burger while the links still fit. */
@media (max-width: 1200px) {
    .site-header .wrap { gap: 14px; }
    .brand-logo .brand-sub { display: none; }
    .main-nav { gap: 0; }
    .main-nav a { padding: 9px 10px; font-size: 14.5px; }
}

@media (max-width: 1000px) {
    .main-nav { display: none; }
    .nav-toggle { display: flex; }
    .header-actions { margin-left: auto; }
}

@media (max-width: 900px) {
    .main-nav { display: none; }
    .nav-toggle { display: flex; }
    .header-actions { margin-left: auto; }
    /* TWO up, not one. A nine-card feature grid collapsed straight to a single column at 900px,
       which is tablet width - the device most of these clubs are reading this on - and turned a
       screen and a half of content into three screens of scrolling for no gain. */
    .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .plans { grid-template-columns: 1fr; }
    .compare { grid-template-columns: 1fr; }
    .section { padding: 72px 0; }
    .brand-logo .brand-sub { display: none; }
}

@media (max-width: 680px) {
    body { font-size: 16px; }
    .wrap { padding: 0 18px; }
    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    /* Desktop breathing room costs a phone reader a whole screen of scrolling across eleven
       sections, and buys nothing on a narrow viewport. */
    .section { padding: 52px 0; }
    .field-row { grid-template-columns: 1fr; }
    .hero { padding-top: calc(var(--header-h) + 46px); }
    .hero-stats { gap: 24px; }
    .mock { --phone-in: 40px; --phone-w: 96px; }
    .mock-cam { right: 0; font-size: 11.5px; }
    .snk-balls .snk-ball { width: 22px; height: 22px; }
    .bil-rack .bil-ball { width: 21px; height: 21px; font-size: 9px; }
    .cta-band { padding: 36px 22px; }
    .card, .plan, .panel { padding: 22px; }
    .addon-row { grid-template-columns: minmax(0,1fr) auto; row-gap: 14px; }
    .addon-row .p { grid-column: 2; text-align: right; }
    .cart-table-row { grid-template-columns: 40px minmax(0,1fr) auto; row-gap: 12px; }
    .cart-table-row .u { grid-column: 2; }
    .cart-table-row .l { grid-column: 3; }
    .footer-grid { grid-template-columns: 1fr; }
    .btn { width: 100%; }
    .btn-row .btn { width: auto; flex: 1 1 auto; }
    .qty button { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
}

/* ============================================================ announce ====
   The launch banner: the scoreboard is no longer club-only, and StreamON is
   the one app that runs it. Deliberately the loudest thing on the page after
   the hero - it is the single most important change this site has to land.
   Built from the same tokens as everything else, so it inherits each brand's
   colour without a second definition. */

.announce {
    position: relative; overflow: hidden;
    margin-top: 6px;
    padding: 34px 36px;
    border-radius: var(--radius);
    border: 1px solid rgba(var(--accent-rgb), 0.42);
    background:
        radial-gradient(620px 300px at 88% -20%, rgba(var(--second-rgb), 0.22), transparent 62%),
        linear-gradient(125deg, rgba(var(--accent-rgb), 0.22), rgba(255,255,255,0.02) 68%);
}
.announce::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-hi), var(--second), transparent);
}
.announce-tag {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 15px; border-radius: 999px;
    background: var(--accent); color: var(--accent-ink);
    font-size: 11.5px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase;
}
.announce-tag .dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--accent-ink);
    animation: announcePulse 1.8s ease-in-out infinite;
}
@keyframes announcePulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.announce h2 {
    margin: 18px 0 12px;
    font-family: var(--font-display, inherit);
    font-size: clamp(28px, 4.6vw, 46px); line-height: 1.06; letter-spacing: -0.02em;
}
.announce h2 em { font-style: normal; color: var(--accent-hi); }
.announce p.big {
    margin: 0 0 22px; max-width: 760px;
    font-size: clamp(15.5px, 1.7vw, 18px); line-height: 1.62; color: var(--text-dim);
}
.announce p.big strong { color: var(--text); }

.announce-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; align-items: center; }

.announce-who { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.announce-who span {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06);
    font-size: 14px; font-weight: 800; color: var(--text);
}
.announce-who svg { width: 17px; height: 17px; color: var(--accent-hi); }

/* the StreamON slab inside the banner */
.streamon-card {
    border-radius: 18px; padding: 24px;
    border: 1px solid rgba(255,255,255,0.18);
    background: linear-gradient(165deg, rgba(0,0,0,0.42), rgba(0,0,0,0.22));
}
.streamon-card .kicker {
    font-size: 10.5px; font-weight: 900; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
}
.streamon-card .name {
    margin: 8px 0 10px;
    font-family: var(--font-display, inherit);
    font-size: clamp(26px, 3.4vw, 34px); font-weight: 900; letter-spacing: -0.015em;
    color: var(--text);
}
.streamon-card .name b { color: var(--accent-hi); font-weight: 900; }
.streamon-card p { margin: 0 0 16px; font-size: 14px; line-height: 1.62; color: var(--text-dim); }
.streamon-steps { list-style: none; margin: 0 0 18px; padding: 0; }
.streamon-steps li {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 9px 0; border-top: 1px solid rgba(255,255,255,0.10);
    font-size: 13.8px; line-height: 1.55; color: var(--text-dim);
}
.streamon-steps li:first-child { border-top: 0; }
.streamon-steps .n {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.22); border: 1px solid rgba(var(--accent-rgb), 0.42);
    color: var(--text); font-size: 12px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
}
.streamon-steps b { color: var(--text); }
.streamon-systems { display: flex; flex-wrap: wrap; gap: 8px; }
.streamon-systems span {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05);
    font-size: 12.5px; font-weight: 800; color: var(--text-dim);
}
.streamon-systems i { width: 8px; height: 8px; border-radius: 50%; flex: none; }

@media (max-width: 900px) {
    .announce { padding: 26px 22px; }
    .announce-split { grid-template-columns: 1fr; gap: 24px; }
}

/* -------------------------------------- how-it-works explainer (inline SVG) ----
   Only the FRAME lives here. The drawing's own animation CSS travels inside the
   <svg> (cfginc/howitworks_svg.php), because the same markup is written out as a
   standalone .svg file that has to animate on its own - splitting the two would
   mean maintaining the animation twice. */
.hiw-frame {
    margin: 0 0 40px;
    padding: 0;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-2);
}
.hiw-frame svg { display: block; width: 100%; height: auto; }
.hiw-frame figcaption {
    padding: 13px 20px 15px;
    border-top: 1px solid var(--line-soft);
    background: rgba(255,255,255,0.02);
    font-size: 13.5px;
    color: var(--muted);
    text-align: center;
}
@media (max-width: 760px) {
    /* The stage is a wide 1200x620 and the copy inside it is sized in user units, so on a phone
       the type would scale down with the drawing until it was unreadable. Cap how wide the frame
       can get relative to the text around it rather than letting it shrink to a thumbnail. */
    .hiw-frame { margin-bottom: 30px; border-radius: 16px; }
    .hiw-frame figcaption { padding: 11px 14px 13px; font-size: 12.5px; }
}

/* ---------------------------------------------------------------- StreamON mark
   The app's own logo (app_android/brand/streamon) is GREEN and lives on its own near-black tile.
   It must never be dropped into the site-accent boxes: on this site the accent is a different
   colour per domain, and tinting the container fights the mark it is there to introduce. */
.ico--app {
    background: #07090c;
    border-color: rgba(255,255,255,0.16);
    padding: 7px;
}
.ico--app img { width: 100%; height: 100%; object-fit: contain; display: block; }

.streamon-lockup { display: flex; align-items: center; gap: 13px; margin: 8px 0 10px; }
.streamon-lockup img { width: 46px; height: 46px; flex: none; display: block; }
.streamon-lockup .name { margin: 0; }

/* ------------------------------------------------------------------ chat ---
   The chat bubble: cfginc/chat_widget.php + libraries/chat.js. Every colour is a brand token,
   so each shop's bubble is in its own palette. It sits under the cart drawer (950/960) and
   over the header (900); the launcher pushes the to-top button up rather than covering it. */

.chat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.chat-launcher {
    position: fixed; right: 22px; bottom: 22px; z-index: 940;
    display: flex; align-items: center; gap: 10px;
    height: 56px; padding: 0 22px 0 18px;
    border: 0; border-radius: 999px; cursor: pointer;
    background: linear-gradient(135deg, var(--btn-a) 0%, var(--btn-b) 100%);
    color: var(--accent-ink); font-size: 15px; font-weight: 700;
    box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.36), var(--shadow-1);
    transition: transform .18s var(--ease), opacity .2s var(--ease);
}
.chat-launcher:hover { transform: translateY(-2px); }
.chat-launcher-ico { width: 24px; height: 24px; flex: none; }
.chat.is-open .chat-launcher { opacity: 0; pointer-events: none; transform: scale(.9); }
.has-chat .to-top { bottom: 92px; }
.chat-teasing .to-top { opacity: 0; pointer-events: none; }

.chat-teaser {
    position: fixed; right: 22px; bottom: 90px; z-index: 941; max-width: 292px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px 16px 5px 16px;
    box-shadow: var(--shadow-2); animation: chatIn .3s var(--ease);
}
.chat-teaser[hidden] { display: none; }
.chat-teaser-body {
    display: block; width: 100%; text-align: left; padding: 14px 40px 14px 16px;
    border: 0; background: none; cursor: pointer; font-size: 14px; line-height: 1.45; color: var(--text-dim);
}
.chat-teaser-body b { display: block; margin-bottom: 2px; font-size: 15px; color: var(--white); }
.chat-teaser-x {
    position: absolute; top: 6px; right: 6px; width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
}
.chat-teaser-x:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.chat-teaser-x svg { width: 15px; height: 15px; }

.chat-panel {
    position: fixed; right: 22px; bottom: 22px; z-index: 945;
    width: 392px; height: min(640px, calc(100vh - 44px - var(--header-h)));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-pop); animation: chatIn .26s var(--ease);
}
.chat-panel[hidden] { display: none; }
@keyframes chatIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.chat-head {
    display: flex; align-items: center; gap: 12px; padding: 13px 10px 13px 16px;
    background: linear-gradient(180deg, rgba(var(--accent-rgb),0.16), rgba(var(--accent-rgb),0.03));
    border-bottom: 1px solid var(--line);
}
.chat-avatar { width: 40px; height: 40px; flex: none; overflow: hidden; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-title { flex: 1; min-width: 0; line-height: 1.25; }
.chat-title b { display: block; font-size: 16px; color: var(--white); }
.chat-title span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.chat-icon-btn {
    width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer;
}
.chat-icon-btn:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.chat-icon-btn svg { width: 18px; height: 18px; }

.chat-log {
    flex: 1; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 10px;
}
.chat-msg {
    max-width: 86%; padding: 10px 14px; border-radius: 16px;
    font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-msg--bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text); border-bottom-left-radius: 5px; }
.chat-msg--me { align-self: flex-end; background: rgba(var(--accent-rgb),0.18); border: 1px solid rgba(var(--accent-rgb),0.34); color: var(--white); border-bottom-right-radius: 5px; }
.chat-msg--note { background: rgba(255,184,0,0.08); border-color: rgba(255,184,0,0.26); color: var(--text-dim); }
.chat-msg a { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 2px; }
.chat-msg b { color: var(--white); }
.chat-typing { display: flex; gap: 5px; padding: 15px 16px; }
.chat-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: chatDot 1.1s infinite ease-in-out; }
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 14px 12px; }
.chat-chips[hidden] { display: none; }
.chat-chips button {
    padding: 7px 13px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(var(--accent-rgb),0.40); background: rgba(var(--accent-rgb),0.08);
    color: var(--text); font-size: 13.5px; font-weight: 600;
}
.chat-chips button:hover { background: rgba(var(--accent-rgb),0.18); }

.chat-input { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--bg-2); }
.chat-input[hidden] { display: none; }
.chat-input textarea {
    flex: 1; min-height: 44px; max-height: 132px; resize: none; outline: none;
    padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line);
    background: var(--surface); color: var(--text);
    font: inherit; font-size: 16px; line-height: 1.35;       /* 16px: iOS zooms the page into anything smaller */
}
.chat-input textarea:focus { border-color: rgba(var(--accent-rgb),0.6); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15); }
.chat-send {
    width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 14px; cursor: pointer;
    background: linear-gradient(135deg, var(--btn-a) 0%, var(--btn-b) 100%); color: var(--accent-ink);
}
.chat-send svg { width: 19px; height: 19px; }
.chat-input.is-busy .chat-send { opacity: .45; pointer-events: none; }

.chat-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 14px 11px; background: var(--bg-2); font-size: 11.5px; line-height: 1.35; color: var(--muted);
}
.chat-human {
    flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,0.04);
    color: var(--text); font-size: 12.5px; font-weight: 700;
}
.chat-human:hover { border-color: rgba(var(--accent-rgb),0.5); }
.chat-human svg { width: 14px; height: 14px; }

.chat-handoff {
    align-self: stretch; display: flex; flex-direction: column; gap: 10px; padding: 14px;
    background: var(--bg-2); border: 1px solid rgba(var(--accent-rgb),0.35); border-radius: 16px;
}
.chat-handoff-head { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--white); }
.chat-handoff-head svg { width: 18px; height: 18px; color: var(--accent-hi); }
.chat-handoff-lead, .chat-handoff-small { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.chat-handoff label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.chat-handoff label em { font-style: normal; font-weight: 500; color: var(--muted); }
.chat-handoff input, .chat-handoff textarea {
    padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); outline: none; resize: vertical;
    background: var(--surface); color: var(--text); font: inherit; font-size: 16px;
}
.chat-handoff input:focus, .chat-handoff textarea:focus { border-color: rgba(var(--accent-rgb),0.6); }
.chat-handoff .btn svg { width: 16px; height: 16px; }
.chat-handoff .btn.is-busy { opacity: .6; pointer-events: none; }
.chat-handoff-error {
    margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 13.5px;
    background: rgba(255,80,80,0.10); border: 1px solid rgba(255,80,80,0.30); color: #ffd7d7;
}
.chat-handoff-error[hidden] { display: none; }
.chat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 560px) {
    .chat-launcher { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 56px; padding: 0; justify-content: center; }
    .chat-launcher-label { display: none; }
    .has-chat .to-top { right: 21px; bottom: calc(84px + env(safe-area-inset-bottom)); }
    .chat-teaser { left: 16px; right: 16px; max-width: none; bottom: calc(84px + env(safe-area-inset-bottom)); }
    /* a sheet over the whole screen: a floating box on a phone leaves no room to type */
    .chat-panel { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: 100%; height: 100dvh; border: 0; border-radius: 0; }
    html.chat-open, html.chat-open body { overflow: hidden; }
    .chat-msg { max-width: 90%; }
    .chat-foot { padding-bottom: calc(11px + env(safe-area-inset-bottom)); }
}

@media print { .chat { display: none; } }

/* ------------------------------------------------- the shorter home page + What to buy ---
   Oct 2026 simplification pass (index.php header has the measurements). Everything below is
   new; the components it replaced (the announcement, the hardware disclosure) keep their old
   rules until nothing uses them - removing them is a separate, testable edit. */

.main-nav a.is-active { color: var(--white); background: rgba(255,255,255,0.06); }

/* the price, and beside it the reassurance and the other system's compact card */
@media (min-width: 901px) {
    .plans { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
}
.plans-side { display: flex; flex-direction: column; gap: 24px; }
.assure--stack { margin-top: 0; grid-template-columns: 1fr; gap: 16px; }
.plan--compact { padding: 26px 28px; }
.plan--compact .plan-head { justify-content: space-between; margin-bottom: 12px; }
.plan--compact h3 { font-size: 20px; }
.plan--compact .plan-sub { min-height: 0; margin: 4px 0 16px; font-size: 15px; }
.plan--compact .period-switch { margin-bottom: 16px; }
.plan--compact .plan-price .amount { font-size: 46px; }
.plan--compact .plan-vat { margin-bottom: 16px; min-height: 1.2em; }

/* The hero drawing's leaning phone reaches 62px left of the tablet, into the text column: measured,
   the intro ran 15px under it at every laptop width ("one subscriptio" on the live page). The
   column keeps 32px clear of it. On a phone the drawing sits below the text, and the leaning
   phone - half off the screen's left edge there, over the first player's name - is left out. */
@media (min-width: 1081px) {
    .hero-grid > div:first-child { padding-right: 32px; }
}
@media (max-width: 680px) {
    .mock-phone { display: none; }
    .mock { --phone-in: 0px; }
    /* the plate centres its text with flex, so a name wider than the plate is cut on BOTH sides -
       "M. ASHFORD" read ". ASHFOR" at 390px. Tighter letters fit it. */
    .snk-name { padding: 5px 4px; font-size: 10px; letter-spacing: .02em; }
}

/* three proof points, one row */
.proof-points:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* features: six short rows instead of nine cards */
.feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 34px; }
.feature-row { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; }
.feature-row .ico {
    width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
    background: rgba(var(--accent-rgb), 0.14); border: 1px solid rgba(var(--accent-rgb), 0.28);
}
.feature-row .ico svg { width: 22px; height: 22px; color: var(--accent-hi); }
.feature-row h3 { font-size: 17.5px; margin-bottom: 4px; }
.feature-row p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-dim); }
.feature-also { margin: 34px auto 0; max-width: 760px; text-align: center; font-size: 15px; color: var(--muted); }

/* what you need: the checklist beside the picks */
.need-grid { align-items: stretch; }
.eq-home h3, .eq-pick h3 { margin: 14px 0 6px; font-size: 21px; }
.eq-home dl, .eq-pick dl { margin: 16px 0 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; }
.eq-home dt, .eq-pick dt {
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
    font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.eq-home dt svg, .eq-pick dt svg { width: 16px; height: 16px; color: var(--accent-hi); flex: none; }
.eq-home dd, .eq-pick dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-dim); }
.eq-home dd b, .eq-pick dd b { color: var(--white); }
.eq-home .small { margin: 0 0 18px; }
.eq-home .btn svg { width: 16px; height: 16px; }

/* What to buy */
.eq-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.eq-jump a {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px;
    border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--text); font-size: 14.5px; font-weight: 700;
}
.eq-jump a:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.eq-jump svg { width: 16px; height: 16px; color: var(--accent-hi); }
.eq-pick { display: flex; flex-direction: column; align-items: flex-start; }
.eq-pick dl { align-self: stretch; }
/* the three tablet tables share their columns, so they read as one list in three parts */
.eq-table--tablets { table-layout: fixed; }
.eq-table--tablets th:nth-child(1) { width: 31%; }
.eq-table--tablets th:nth-child(2) { width: 10%; }
.eq-table--tablets th:nth-child(3) { width: 25%; }
.eq-table--tablets th:nth-child(4) { width: 11%; }
.eq-table--tablets th:nth-child(5) { width: 23%; }
.eq-pick.is-featured { border-color: rgba(var(--accent-rgb), 0.45); background: linear-gradient(165deg, rgba(var(--accent-rgb), 0.12) 0%, var(--surface) 50%); }
.eq-pick .eq-more { margin-top: auto; font-size: 14.5px; font-weight: 700; }
.eq-need { margin: -6px 0 14px; font-size: 15px; color: var(--muted); }
.eq-table { min-width: 680px; }
.eq-table td:first-child { white-space: normal; min-width: 210px; }
.eq-table tr.is-pick td { background: rgba(var(--accent-rgb), 0.07); }
.eq-table tr.is-narrow td { opacity: .62; }
.eq-table .pill { margin-left: 6px; vertical-align: 2px; }
.hw-title .pill { margin-left: 4px; }
.eq-steps { margin: 6px 0 0; padding-left: 22px; }
.eq-steps li { padding: 7px 0; font-size: 15.5px; color: var(--text-dim); }
.eq-steps li b { color: var(--white); }
.eq-mount .card h3 { margin-bottom: 8px; }

@media (max-width: 900px) {
    .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .proof-points:has(> div:nth-child(3):last-child) { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .feature-list { grid-template-columns: 1fr; gap: 22px; }
    .plan--compact { padding: 22px; }
    .eq-home dl, .eq-pick dl { grid-template-columns: 1fr; gap: 2px; }
    .eq-home dd, .eq-pick dd { margin-bottom: 10px; }
    /* On a phone a five-column table scrolls sideways and hides the chip, the RAM and "take the
       8 GB version" off the right edge. Each row becomes a small card instead, every cell labelled. */
    .eq-table, .eq-table tbody, .eq-table tr, .eq-table td { display: block; width: auto; min-width: 0; }
    .eq-table { min-width: 0; }
    .eq-table thead { display: none; }
    .eq-table tr { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
    .eq-table tr:last-child { border-bottom: 0; }
    .eq-table td { padding: 2px 0; border: 0; font-size: 14.5px; }
    .eq-table td:first-child { min-width: 0; padding-bottom: 6px; font-size: 15.5px; }
    .eq-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
    .eq-table td:empty { display: none; }
    .eq-table tr.is-narrow td { opacity: 1; }
    .eq-table tr.is-narrow { opacity: .62; }
}