/* =========================================================================
   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 {
    background: linear-gradient(135deg, var(--accent-hi) 0%, var(--accent) 62%, var(--accent) 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; }

.hero-note { margin-top: 20px; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.hero-note svg { width: 15px; height: 15px; flex: none; opacity: .8; }

.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; }

/* ----------------------------------------------------------- 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);
    -webkit-box-shadow: 0 0 0 1000px var(--surface2) 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; }
    .grid-3 { grid-template-columns: 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; }
    .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; }
}