/* =========================================================================
   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.

   TWO THEMES (Nov 2026). LIGHT is the default and is what the server sends;
   dark is the visitor's choice (the header switch, remembered in their
   browser) and lives under :root[data-theme="dark"]. The neutral tokens below
   and the brand tokens in head.php switch together, so a rule written with
   tokens works in both. Never write a literal white or near-black for text
   or a surface that sits on the PAGE - only on a fixed dark object (the
   tablet and phone in the hero, a video poster), which keeps its own tokens.

   BROADCAST LOOK (7 Nov 2026, owner: two copycat sites had taken on the old
   look - dark pages, a pill above a two-colour heading, pill buttons, pill
   tags beside a device picture - so this shop had to look like itself
   again). The language is TV sports graphics, because that is the product:
   condensed capitals, the key words of a heading on a solid caption slab,
   square buttons and tags, sections numbered like scoreboard cells, the hero
   prices on a dark on-screen score bar, and the tablet resting on the cloth
   of a table. No pills, no glows, no glass.
   ========================================================================= */

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

:root {
    color-scheme: light;

    --text:        #121821;
    --text-dim:    #3d4754;
    --muted:       #5b6673;
    --strong:      #0b1016;   /* headings, prices, bold words in running text */
    --ink-rgb:     15,23,42;  /* tints and hovers: rgba(var(--ink-rgb), a) */
    --line:        rgba(15,23,42,0.11);
    --line-soft:   rgba(15,23,42,0.07);

    --header-bg:       rgba(255,255,255,0.74);
    --header-bg-stuck: rgba(255,255,255,0.94);
    --overlay:         rgba(15,23,42,0.38);
    --field-bg:        #ffffff;
    --field-bg-focus:  #ffffff;
    --placeholder:     #6b7581;
    --hero-grid:       rgba(15,23,42,0.045);
    --second-ink:      var(--second);

    --ok:          #06602f;   /* savings: green on both shops, red would read as a warning */
    --ok-rgb:      11,122,62;
    --danger:      #b42318;
    --danger-bg:   rgba(217,45,32,0.07);
    --danger-line: rgba(217,45,32,0.30);
    --warn:        #9a6200;
    --warn-rgb:    214,148,0;

    --shadow-1:    none;      /* flat print: an edge is a line, not a blur */
    --shadow-2:    0 14px 36px rgba(15,23,42,0.11);
    --shadow-pop:  0 30px 70px rgba(15,23,42,0.20);

    --radius:      6px;
    --radius-sm:   4px;
    --radius-lg:   8px;
    --maxw:        1200px;
    --header-h:    74px;

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

:root[data-theme="dark"] {
    color-scheme: dark;

    --text:        #eef1f5;
    --text-dim:    #b9c2ce;
    --muted:       #8d97a5;
    --strong:      #ffffff;
    --ink-rgb:     255,255,255;
    --line:        rgba(255,255,255,0.09);
    --line-soft:   rgba(255,255,255,0.055);

    --header-bg:       rgba(8,10,12,0.55);
    --header-bg-stuck: rgba(8,10,12,0.88);
    --overlay:         rgba(4,6,8,0.66);
    --field-bg:        rgba(255,255,255,0.035);
    --field-bg-focus:  rgba(255,255,255,0.06);
    --placeholder:     #6c7683;
    --hero-grid:       rgba(255,255,255,0.028);
    --second-ink:      #cfe6f7;

    --ok:          #5ad48f;
    --ok-rgb:      90,212,143;
    --danger:      #ffb3b3;
    --danger-bg:   rgba(255,70,70,0.10);
    --danger-line: rgba(255,70,70,0.35);
    --warn:        #ffc43c;
    --warn-rgb:    255,196,60;

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

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; color: var(--strong); }
/* the two big levels speak the scoreboard's type; h3 and below stay in the reading face */
h1, h2, .h1, .h2 { font-family: var(--display); font-weight: 700; letter-spacing: 0; line-height: 1.02; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
strong { color: var(--strong); font-weight: 700; }

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

/* A brand's two logos (cfginc/brands.php brand_logo()): dark ink on the light page, white
   lettering on the dark one. Where a brand has one mark for both, only one <img> is printed. */
.logo-on-dark { display: none !important; }
[data-theme="dark"] .logo-on-dark { display: block !important; }
[data-theme="dark"] .logo-on-light { display: none !important; }

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

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

.section { padding: 92px 0; position: relative; }
.section--tight { padding: 60px 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: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: 12px; }

/* A section's label is a scoreboard cell: the section's number in the brand colour, then the name.
   The numbers are a CSS counter over the home page's section heads, so a section moved or removed
   renumbers itself; a label anywhere else (the CTA, other pages) gets a plain square instead. */
body { counter-reset: shopSection; }
.eyebrow {
    display: inline-flex; align-items: stretch; gap: 0;
    font-family: var(--display);
    font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--strong);
    margin-bottom: 16px; padding-right: 10px;
    border: 1px solid var(--strong); border-radius: 3px; overflow: hidden;
}
.eyebrow::before {
    content: ""; width: 10px; flex: none; margin-right: 10px;
    background: var(--accent);
}
.section-head .eyebrow, .proof-copy .eyebrow { counter-increment: shopSection; }
.section-head .eyebrow::before, .proof-copy .eyebrow::before {
    content: counter(shopSection, decimal-leading-zero);
    width: auto; padding: 2px 8px 1px;
    color: var(--accent-ink); letter-spacing: .04em;
}

h1, .h1 { font-size: clamp(34px, 3.6vw, 52px); text-transform: uppercase; }
h2, .h2 { font-size: clamp(32px, 3.6vw, 48px); }
h3, .h3 { font-size: clamp(20px, 2.1vw, 24px); }

.lead { font-size: clamp(17px, 1.35vw, 19px); color: var(--text-dim); line-height: 1.7; }
.muted { color: var(--muted); }
.small { font-size: 14.5px; }
.accent-text { color: var(--accent-hi); }
a.accent-text { text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), 0.35); text-underline-offset: 3px; }
a.accent-text:hover { text-decoration-color: currentColor; }

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

/* Square keys with condensed capitals, like the buttons on the scoreboard itself. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 26px 13px;
    border: 2px solid transparent;
    border-radius: 4px;
    font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    line-height: 1.15;
    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;
    text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:focus-visible, .theme-btn:focus-visible, .cart-btn:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.45); outline-offset: 2px; }

.btn-primary {
    /* --btn-a/--btn-b, not --accent-hi: see the note beside them in cfginc/head.php. The label
       sits ON these fills, so both have to clear 4.5:1 against --accent-ink. The inset bar along
       the bottom is the key's edge - a flat colour with no glow. */
    background: var(--btn-a);
    color: var(--accent-ink);
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.22);
}
.btn-primary:hover { background: var(--btn-b); }

/* the second button is drawn in ink and turns solid ink on hover */
.btn-ghost { border-color: var(--strong); color: var(--strong); background: transparent; }
.btn-ghost:hover { background: var(--strong); color: var(--bg); }

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

.btn-block { width: 100%; }
.btn-sm { padding: 9px 16px 8px; font-size: 16px; }
.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 ---- */

/* the on-screen "bug" a broadcast keeps in its corner: ink plate, capitals, a blinking light */
.chip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 13px 5px 11px;
    border-radius: 3px;
    background: var(--strong);
    color: var(--bg);
    font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: livePulse 1.6s infinite; }

.pill {
    display: inline-block; padding: 3px 9px 2px; border-radius: 3px;
    font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.pill--accent { background: var(--accent); color: var(--accent-ink); }
.pill--soft   { background: rgba(var(--ink-rgb), 0.07); color: var(--text-dim); }
.pill--second { background: rgba(var(--second-rgb), 0.14); color: var(--strong); border: 1px solid rgba(var(--second-rgb), 0.40); }

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

.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    height: var(--header-h);
    display: flex; align-items: center;
    background: var(--header-bg);
    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: var(--header-bg-stuck); 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: 2px; margin-left: auto; }
.main-nav a {
    padding: 9px 13px 7px; white-space: nowrap;
    font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-dim);
    border-bottom: 3px solid transparent;
    transition: color .18s, border-color .18s;
}
.main-nav a:hover, .main-nav a.is-active { color: var(--strong); border-bottom-color: var(--accent); }

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

/* the language switch: the current code on a square key, the languages in a list under it */
.lang-menu { position: relative; flex: none; }
.lang-menu summary {
    list-style: none; cursor: pointer;
    height: 42px; padding: 0 11px; border-radius: 4px;
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--line); background: var(--surface); color: var(--text-dim);
    font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: .06em;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { color: var(--strong); border-color: rgba(var(--accent-rgb), 0.5); }
.lang-menu summary svg { width: 17px; height: 17px; }
[data-theme="dark"] .lang-menu summary { background: rgba(255,255,255,0.04); }
.lang-menu ul {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 150px;
    padding: 6px; border-radius: 4px; border: 1px solid var(--strong);
    background: var(--surface); box-shadow: var(--shadow-2);
}
[data-theme="dark"] .lang-menu ul { background: var(--surface-2); }
.lang-menu a { display: block; padding: 8px 10px; border-radius: 3px; font-size: 15px; font-weight: 600; color: var(--text); }
.lang-menu a:hover { background: rgba(var(--ink-rgb), 0.06); }
.lang-menu a[aria-current] { color: var(--strong); box-shadow: inset 3px 0 0 var(--accent); }

/* "This page is also in Deutsch" - offered once to a browser that prefers a language we have */
.lang-offer {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 945;
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
    max-width: calc(100% - 32px); padding: 12px 14px 12px 16px; border-radius: 4px;
    background: var(--strong); color: var(--bg); box-shadow: var(--shadow-2), inset 4px 0 0 var(--accent);
    font-size: 15px; font-weight: 600;
}
.lang-offer[hidden] { display: none; }
.lang-offer a { padding: 7px 12px 6px; border-radius: 3px; background: var(--accent); color: var(--accent-ink);
                font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.lang-offer button { border: 0; background: none; color: inherit; opacity: .75; cursor: pointer; font-size: 14px; text-decoration: underline; }

/* the light/dark switch - shows the icon of the theme it switches TO */
.theme-btn {
    width: 42px; height: 42px; flex: none; border-radius: 4px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); background: var(--surface); color: var(--text-dim);
    transition: border-color .18s, color .18s, transform .18s var(--ease);
}
.theme-btn:hover { color: var(--strong); border-color: rgba(var(--accent-rgb), 0.5); }
.theme-btn svg { width: 19px; height: 19px; }
.theme-ico { display: flex; }
.theme-ico--light { display: none; }
[data-theme="dark"] .theme-btn { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .theme-ico--dark { display: none; }
[data-theme="dark"] .theme-ico--light { display: flex; }

.cart-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 14px 8px 12px;
    border-radius: 4px; border: 1px solid var(--line);
    background: var(--surface);
    font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    cursor: pointer;
    transition: border-color .18s, background .18s, transform .18s var(--ease);
}
[data-theme="dark"] .cart-btn { background: rgba(255,255,255,0.04); }
.cart-btn:hover { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.08); }
.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: 3px; background: var(--accent); color: var(--accent-ink);
    font-family: var(--ui); font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: 0;
}
.cart-btn .cart-count[data-empty="1"] { background: rgba(var(--ink-rgb), 0.10); 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: var(--surface);
    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: var(--header-bg-stuck);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    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; display: flex; }

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

/* Plain ground with one brand rule under the header - the colour on this screen comes from the
   table cloth and the score bar, not from a glow. */
.hero {
    position: relative; overflow: hidden;
    padding: calc(var(--header-h) + 64px) 0 80px;
    background: var(--bg);
}
.hero::before {
    content: ""; position: absolute; left: 0; right: 0; top: var(--header-h); height: 5px;
    background: var(--accent);
}
.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: 20px 0 22px; }
/* the caption slab: the key words on solid brand colour, one slab per line when they wrap */
.hero h1 em {
    font-style: normal; color: var(--accent-ink); background: var(--accent);
    padding: 0 .14em; margin: 0 -.04em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero .lead { max-width: 560px; }
.hero .btn-row { margin-top: 30px; }

/* the games the app scores - the words a searcher typed, said once, as a caption line */
.hero-games { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 24px; padding: 0; }
.hero-games li {
    font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-dim);
}
/* the slash trails each name, so a wrapped line never starts with one */
.hero-games li:not(:last-child)::after { content: "/"; margin: 0 11px; color: var(--accent-hi); font-weight: 700; }

/* THE SCORE BAR: the hero's prices on the same dark strip the product draws over a stream. A dark
   object on either theme, so it carries its own tokens like the tablet does. */
.hero-stats {
    --text: #eef1f5; --muted: #a3adba; --strong: #ffffff;
    display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
    margin-top: 32px;
    background: #0b0d0f; color: var(--text);
    border-radius: 4px; overflow: hidden;
    box-shadow: inset 0 4px 0 var(--accent);
}
.hero-stats .stat { padding: 16px 18px 13px; min-width: 0; }
.hero-stats .stat + .stat { border-left: 1px solid rgba(255,255,255,0.12); }
.hero-stats .stat b {
    display: block; font-family: var(--display); font-size: clamp(28px, 2.5vw, 36px); font-weight: 700;
    line-height: 1; color: var(--strong); letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
.hero-stats .stat span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--muted); max-width: 132px; }
.hero-stats .stat small {
    display: block; margin-bottom: 5px;
    font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    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; isolation: isolate; padding: 60px 0 70px 0; --phone-in: 56px; --phone-w: 118px; }

/* THE TABLE UNDER THE TABLET: the brand's cloth seen from above, lit by the lamp over it, inside a
   wooden rail with six pockets. Drawn, not photographed - a picture of somebody's real table would
   be their table. --cloth comes from the brand palette (cfginc/brands.php). */
.mock::before {
    content: ""; position: absolute; z-index: -1;
    top: 4px; right: -58px; bottom: 4px; left: 5%;
    border: 18px solid #3b2516; border-radius: 12px;
    background:
        radial-gradient(ellipse 70% 60% at 52% 42%, rgba(255,255,255,0.16), transparent 72%),
        var(--cloth);
    box-shadow:
        inset 0 0 0 3px rgba(0,0,0,0.30),          /* the cushion's edge */
        inset 0 0 46px rgba(0,0,0,0.40),
        0 0 0 1px #24160c, var(--shadow-2);
}
.mock::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: -3px; right: -65px; bottom: -3px; left: calc(5% - 7px);
    --pk: radial-gradient(circle, #050505 0 9px, #1d120a 10px 11px, transparent 12px);
    background:
        var(--pk) 0 0 / 32px 32px no-repeat, var(--pk) 100% 0 / 32px 32px no-repeat,
        var(--pk) 0 100% / 32px 32px no-repeat, var(--pk) 100% 100% / 32px 32px no-repeat,
        var(--pk) 50% 0 / 32px 32px no-repeat, var(--pk) 50% 100% / 32px 32px no-repeat;
}

/* The tablet and the phone are dark objects on either page: a device screen does not change
   with the shop's theme. They carry the dark text tokens with them, so everything drawn inside
   reads the same on the light page as on the dark one. */
.mock-tablet, .mock-phone {
    --text: #eef1f5; --text-dim: #b9c2ce; --muted: #8d97a5; --strong: #ffffff;
    --ink-rgb: 255,255,255; --line: rgba(255,255,255,0.09); --line-soft: rgba(255,255,255,0.055);
    color: var(--text);
}

.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: #ffffff; 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 - on the PAGE, so it follows the theme.
   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: 7px 13px 6px 11px; border-radius: 3px;
    background: var(--surface); border: 1px solid var(--strong);
    box-shadow: var(--shadow-2);
    font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--strong); white-space: nowrap;
}
.mock-cam svg { width: 16px; height: 16px; color: var(--accent-hi); }

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

/* the "In short" box on the terms and the disclaimer on What to buy */
.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.28);
    background: linear-gradient(120deg, rgba(var(--accent-rgb),0.08), var(--surface) 62%);
}
.notice .ico {
    width: 60px; height: 60px; border-radius: 4px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.28);
}
.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;
    box-shadow: var(--shadow-1);
}
[data-theme="dark"] .card { box-shadow: none; }

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

/* 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(--strong); font-weight: 700; }
.checklist .tick {
    width: 22px; height: 22px; border-radius: 3px; margin-top: 3px;
    display: flex; align-items: center; justify-content: center;
    background: var(--strong);
}
.checklist .tick svg { width: 12px; height: 12px; color: var(--bg); }

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

/* The one piece of evidence on the page: copy on the left, the real match on the right.
   It sits on a BROADCAST BAND - the near-black of a TV picture on either theme - so the real stream
   reads as television, not as another card. The band carries the dark tokens with it, like the
   tablet, and the dark palette's accent (head.php prints it as --accent-hi-dark), because the light
   page's darker red is too dark to read on black. */
.section--broadcast {
    --text: #eef1f5; --text-dim: #b9c2ce; --muted: #8d97a5; --strong: #ffffff;
    --ink-rgb: 255,255,255; --line: rgba(255,255,255,0.12); --line-soft: rgba(255,255,255,0.07);
    --accent-hi: var(--accent-hi-dark); --bg: #0b0d0f;
    background: #0b0d0f; color: var(--text);
    border-top: 5px solid var(--accent); border-bottom: 0;
}
[data-theme="dark"] .section--broadcast { background: #000000; }

.proof {
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 48px; align-items: center;
}
.proof-copy h2 { margin: 0 0 14px; }
.proof-copy .lead { margin-bottom: 22px; }

.proof-points { display: grid; gap: 14px; }
.proof-points > div { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.6; color: var(--text-dim); }
.proof-points svg { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--accent-hi); }
.proof-points b { color: var(--strong); font-weight: 700; }

.proof-player { margin: 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: 64px; border-radius: 4px;
    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), inset 0 -4px 0 rgba(0,0,0,0.22);
    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: 6px 12px 5px; border-radius: 3px;
    background: rgba(0,0,0,0.78);
    font-family: var(--display); font-size: 15px; font-weight: 600; 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: 12px; font-size: 14.5px; 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; }

/* The setup video in "What you need". It reuses the proof facade's look; capped and centred,
   because a 16:9 poster stretched across the full wrap would be larger than the price. */
.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; }

/* -------------------------------------- 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. The drawing is a dark stage
   on either theme - like a video, it is a picture, not a part of the page. */
.hiw-frame {
    margin: 0 0 40px;
    padding: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: #0b0d0f;
    box-shadow: var(--shadow-2);
}
.hiw-frame svg { display: block; width: 100%; height: auto; }

/* the three steps, in words, under the drawing */
.steps-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 34px; list-style: none; margin: 0; padding: 0; }
.step-item { position: relative; padding-left: 58px; }
/* the step number is a scoreboard digit: ink cell, white figure, brand bar underneath */
.step-item .n {
    position: absolute; left: 0; top: 0;
    width: 42px; height: 48px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    background: var(--strong); color: var(--bg);
    box-shadow: inset 0 -4px 0 var(--accent);
    font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1; padding-bottom: 3px;
}
.step-item .n img { width: 100%; height: 100%; border-radius: 3px; }
.step-item h3 { font-size: 19px; margin: 8px 0 8px; }
.step-item p { margin: 0; font-size: 15.5px; color: var(--text-dim); }

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

.plans { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 24px; align-items: start; }
.plans-side { display: flex; flex-direction: column; gap: 24px; }

.plan {
    position: relative;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--surface);
    padding: 32px;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-1);
}
/* the main plan: an ink frame with the brand bar across its top, like a lower third */
.plan--featured {
    border: 2px solid var(--strong);
    box-shadow: inset 0 8px 0 var(--accent);
    padding-top: 40px;
}
.plan .plan-flag { position: absolute; top: -14px; left: 30px; }

.plan-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.plan-logo { height: 26px; width: auto; }
.plan h3 { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: 0; line-height: 1.05; }
.plan .plan-sub { color: var(--text-dim); font-size: 15.5px; margin-bottom: 22px; }

.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(--strong); 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; }
/* "10,75 €": languages that write the sign after the amount (cfginc/i18n.php curAfter) */
.plan-price--cur-after .cur { order: 2; }
.plan-price--cur-after .per { order: 3; }
/* what is actually charged, directly under the per-month figure - never anywhere less visible */
.plan-billed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 22px; font-size: 14.5px; color: var(--text-dim); }
.plan-billed s { color: var(--muted); }
.plan-save { padding: 2px 8px 1px; border-radius: 3px; font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ok); background: rgba(var(--ok-rgb),0.12); border: 1px solid rgba(var(--ok-rgb),0.30); }
.plan-billed [hidden] { display: none; }

.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: 6px 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; }

.plan--compact { padding: 26px 28px; }
.plan--compact .plan-head { justify-content: space-between; margin-bottom: 12px; }
.plan--compact h3 { font-size: 25px; }
.plan--compact .plan-sub { 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-billed { margin-bottom: 16px; font-size: 14px; }

/* quantity stepper */
.qty {
    display: inline-flex; align-items: center;
    border: 1px solid var(--line); border-radius: 4px; background: var(--surface);
    padding: 3px;
}
[data-theme="dark"] .qty { background: rgba(255,255,255,0.04); }
.qty button {
    width: 36px; height: 36px; border-radius: 3px; 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.14); color: var(--strong); }
.qty input {
    width: 42px; border: 0; background: transparent; text-align: center; padding: 0;
    color: var(--strong); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
    -moz-appearance: textfield; appearance: textfield; box-shadow: none;
}
.qty input:focus { box-shadow: none; background: transparent; }
.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: 4px; margin: 14px 0 22px;
    border-radius: 5px; border: 1px solid var(--line); background: rgba(var(--ink-rgb),0.03);
}
.period-opt {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 11px 4px 9px; border: 0; border-radius: 3px; 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(--strong); background: rgba(var(--ink-rgb),0.06); }
.period-opt.is-active { background: var(--accent); color: var(--accent-ink); }
.period-opt .po-month { font-size: 12px; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.period-opt.is-active .po-month { color: inherit; }
.period-opt i { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; color: var(--ok); }
.period-opt.is-active i { color: inherit; }
/* "Best value" (lowest per month) and "Recommended" (the default year) - set in index.php */
.period-opt[data-tag]::before {
    content: attr(data-tag); position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    padding: 2px 7px 1px; border-radius: 2px; white-space: nowrap;
    font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: var(--strong); color: var(--surface);
}

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

/* The three things that lower the risk of a first order, beside 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. */
div.assure {
    padding: 24px 26px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
    display: grid; grid-template-columns: 1fr; gap: 16px;
}
.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(--strong); font-weight: 700; }

/* the reassurance lines under a summary on the cart and the checkout */
ul.assure { margin-top: 20px; display: grid; gap: 10px; }
ul.assure li { display: flex; gap: 9px; align-items: flex-start; }
ul.assure svg { width: 15px; height: 15px; flex: none; margin-top: 2px; opacity: .85; }

/* ----------------------------------------------------------- features ---- */

.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: 3px; display: flex; align-items: center; justify-content: center;
    background: var(--strong); box-shadow: inset 0 -3px 0 var(--accent);
}
.feature-row .ico svg { width: 22px; height: 22px; color: var(--bg); }
.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 ---- */

.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(--strong); }
.eq-home .small { margin: 0 0 18px; }
.eq-home .btn svg { width: 16px; height: 16px; }
/* the count button carries a whole sentence ("Kaikki 13 tablettia, 12 kameraa ja 4 hubia") - it wraps */
.eq-home .btn { white-space: normal; text-align: left; }

/* three ways to film the table: one short card each */
.cam-head { margin: 64px 0 26px; }
.cam-options { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.cam-opt h3 { margin: 14px 0 8px; font-size: 20px; }
.cam-opt p { margin: 0; font-size: 15px; color: var(--text-dim); }
.cam-opt.is-featured { border-color: rgba(var(--accent-rgb), 0.45); }

/* -------------------------------------------------------------- add-ons --- */

/* channel tabs: words on a rule, the chosen one underlined in the brand colour */
.addon-tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.addon-tabs button {
    padding: 10px 2px 8px; margin-bottom: -1px; cursor: pointer;
    border: 0; border-bottom: 3px solid transparent; background: none;
    color: var(--text-dim);
    font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    transition: color .18s var(--ease), border-color .18s var(--ease);
}
.addon-tabs button:hover { color: var(--strong); }
.addon-tabs button.is-active { color: var(--strong); border-bottom-color: var(--accent); }

.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); }
.addon-row .t { font-weight: 700; font-size: 16.5px; color: var(--strong); }
.addon-row .d { font-size: 14px; color: var(--muted); }
.addon-row .p { font-family: var(--display); font-size: 27px; font-weight: 700; color: var(--strong); 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; }
.addon-buy { display: flex; gap: 10px; align-items: center; }

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

/* a ruled list, not a stack of boxes: each question on a line, a +/- key at the right */
.faq { border-top: 2px solid var(--strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
    list-style: none; cursor: pointer; padding: 20px 60px 20px 2px; position: relative;
    font-size: 17px; font-weight: 700; color: var(--strong);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    background: var(--strong); color: var(--bg);
    font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; background: var(--accent); color: var(--accent-ink); }
.faq .answer { padding: 0 60px 22px 2px; color: var(--text-dim); font-size: 15.5px; }

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

/* the closing call: another broadcast plate, so the page ends on the product's own look */
.cta-band {
    --text: #eef1f5; --text-dim: #b9c2ce; --muted: #8d97a5; --strong: #ffffff;
    --ink-rgb: 255,255,255; --line: rgba(255,255,255,0.12); --accent-hi: var(--accent-hi-dark); --bg: #0b0d0f;
    border-radius: var(--radius-lg);
    padding: 54px;
    text-align: center;
    background: #0b0d0f; color: var(--text);
    box-shadow: inset 0 6px 0 var(--accent);
}
[data-theme="dark"] .cta-band { background: #000000; border: 1px solid rgba(255,255,255,0.10); }
.cta-band h2 { margin-bottom: 14px; }
.cta-band .lead { max-width: 640px; margin: 12px auto 0; }
.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; width: auto; 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: var(--overlay);
    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(--surface);
    border-left: 1px solid var(--line);
    /* no shadow while closed: parked off-screen it still threw a grey band down the light page */
    box-shadow: none;
    transform: translateX(102%);
    transition: transform .34s var(--ease);
}
[data-theme="dark"] .drawer { background: var(--bg-2); }
.drawer.is-open { transform: none; box-shadow: -30px 0 80px rgba(0,0,0,0.25); }
[data-theme="dark"] .drawer.is-open { box-shadow: -30px 0 80px rgba(0,0,0,0.5); }

.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(var(--ink-rgb),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(--bg-2); }
[data-theme="dark"] .drawer-foot { 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, .cart-table-row .mark {
    width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--accent-rgb),0.11); 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, .cart-table-row .mark.is-second { background: rgba(var(--second-rgb),0.13); border-color: rgba(var(--second-rgb),0.34); color: var(--second-ink); }
.cart-line .t { font-weight: 700; font-size: 15.5px; color: var(--strong); }
.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; color: var(--strong); }
.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, .cart-table-row .rm:hover { color: var(--danger) !important; }
.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(--strong);
}
.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; box-shadow: var(--shadow-1); }
[data-theme="dark"] .panel { box-shadow: none; }
.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; font-size: 17px; }
.cart-table-row .t { font-weight: 700; font-size: 17px; color: var(--strong); }
.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; color: var(--strong); }

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

/* "Have a promo code?" under the drawer's and the checkout's totals - collapsed, since most buyers
   have no code and an open field sends them looking for one */
.promo-toggle { margin-top: 12px; font-size: 13.5px; }
.promo-toggle summary { cursor: pointer; color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.promo-toggle summary::-webkit-details-marker { display: none; }
.promo-toggle summary:hover { color: var(--strong); }
.promo-toggle[open] summary { margin-bottom: 10px; }
.promo-toggle .btn-quiet { padding-left: 0; padding-right: 0; }

/* "Android only", said before the card: the cart's summary, the New player tab, above the terms box */
.device-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.device-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--accent-hi); }

/* Pay inside the review column (checkout.php). The top one only where the summary column has
   dropped below the panels; beside them, the summary's own Pay is already in view. */
.pay-inline { margin: 0 0 20px; }
.pay-inline--foot { margin: 20px 0 0; }
.pay-inline .btn svg { width: 18px; height: 18px; }
@media (min-width: 1081px) { .pay-inline--top { display: none; } }

/* --------------------------------------------------------------- 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 browser box in the middle of a themed 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;
    border-radius: 4px; border: 1px solid var(--line);
    background: var(--field-bg);
    color: var(--text); font-family: inherit; font-size: 15.5px;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
[data-theme="light"] input[type=text], [data-theme="light"] input[type=email], [data-theme="light"] input[type=tel],
[data-theme="light"] input[type=password], [data-theme="light"] select, [data-theme="light"] textarea { border-color: rgba(15,23,42,0.18); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
/* A club signing in gets browser autofill on these fields; left alone Chrome paints them
   pale blue over the form at exactly the wrong moment. --surface-2 (with the hyphen): an
   undefined custom property voids the whole declaration, which is how this once did nothing. */
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(--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: var(--field-bg-focus);
}
select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    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: var(--surface); 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, .field-error { color: var(--danger); }
.field-error { margin-top: 6px; }

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

/* Checkout account step (checkout.php): "Who will own the tables?" - two radio cards. The same
   cards ask "which account?" when one sign-in opens both a club and a player. */
.owner-pick { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; display: grid; gap: 10px; }
.owner-pick legend {
    padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
}
.owner-opt {
    display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 12px; align-items: start;
    padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); cursor: pointer; transition: border-color .18s, background .18s;
}
.owner-opt:hover { border-color: rgba(var(--ink-rgb),0.24); }
.owner-opt input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); }
.owner-opt strong { display: block; color: var(--strong); font-size: 15.5px; }
.owner-opt small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.owner-opt:has(input:checked) { border-color: var(--accent); background: rgba(var(--accent-rgb),0.07); }
.owner-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.16); }
/* only the chosen owner's fields: CSS, so it works before (and without) site.js. A browser
   without :has shows both sets, and the server reads only the chosen one. */
.acct-new:has(input[name="newOwner"][value="player"]:checked) [data-owner-only="club"],
.acct-new:has(input[name="newOwner"][value="club"]:checked) [data-owner-only="player"] { display: none; }

/* a password field with its Show/Hide button inside the box */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 76px; }
.pw-toggle {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
    color: var(--accent-hi); font: inherit; font-size: 13px; font-weight: 700;
}
.pw-toggle:hover { background: rgba(var(--ink-rgb),0.06); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* the action inside a field message: "Use JohnClub", "Sign in with it" */
.link-btn {
    padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700;
    color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px;
}

/* a player's company and VAT fields, folded behind "Buying for a company?" (Details step) */
.company-toggle { margin: 0 0 16px; font-size: 14.5px; }
.company-toggle summary {
    cursor: pointer; color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px;
    list-style: none; margin-bottom: 4px;
}
.company-toggle summary::-webkit-details-marker { display: none; }
.company-toggle summary:hover { color: var(--strong); }
.company-toggle[open] summary { margin-bottom: 14px; }

.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: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger); }
.form-ok { background: rgba(var(--accent-rgb),0.09); border: 1px solid rgba(var(--accent-rgb),0.32); color: var(--text); }

/* Live order status on the thank-you page (cart_order_status_html() in cfginc/cart.php; polled by
   site.js). Left-aligned inside the centred reference panel: it is a sentence, not a headline. */
.order-status {
    margin-top: 20px; padding: 16px 18px; border-radius: 12px; text-align: left;
    background: rgba(var(--ink-rgb),0.035); border: 1px solid var(--line); color: var(--text);
}
.order-status.is-provisioned { background: rgba(var(--ok-rgb),0.08); border-color: rgba(var(--ok-rgb),0.30); }
.order-status.is-failed      { background: rgba(var(--warn-rgb),0.08); border-color: rgba(var(--warn-rgb),0.32); }
.order-status p { margin: 0; }
.order-status p + p, .order-status p + .btn { margin-top: 12px; }
.order-status-line { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.5; }
.order-status-line > svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }
.order-status.is-provisioned .order-status-line > svg { color: var(--ok); }
.order-status.is-failed .order-status-line > svg      { color: var(--warn); }
.order-status .btn svg { width: 16px; height: 16px; }
.order-status-spin {
    width: 17px; height: 17px; flex: none; margin-top: 3px; border-radius: 50%;
    border: 2px solid var(--line); border-top-color: var(--accent-hi);
    animation: orderSpin .9s linear infinite;
}
@keyframes orderSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .order-status-spin { animation: none; } }

/* "Your order X is paid" - one time, after a paid order was closed on a later visit. Rendered in
   the cart page, or in the drawer and lifted into .order-banner by site.js on any other page. */
.order-notice {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 14px 18px; border-radius: 11px; margin-bottom: 20px; font-size: 15px; line-height: 1.5;
    background: rgba(var(--ok-rgb),0.08); border: 1px solid rgba(var(--ok-rgb),0.30); color: var(--text);
}
.order-notice > svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--ok); }
.order-notice strong { color: var(--strong); }
.order-banner {
    position: fixed; left: 50%; top: calc(var(--header-h) + 12px); transform: translateX(-50%);
    z-index: 980; width: min(720px, calc(100% - 32px));
    box-shadow: var(--shadow-pop); background: var(--surface);
}
.order-banner .order-notice { margin: 0; background: rgba(var(--ok-rgb),0.08); padding-right: 46px; }
.order-banner-close {
    position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 8px;
    border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 20px; line-height: 1;
}
.order-banner-close:hover { color: var(--strong); background: rgba(var(--ink-rgb),0.06); }
.order-banner { border-radius: 11px; }

/* steps bar on cart and 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(var(--ink-rgb),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.16); color: var(--accent-hi); }
.steps-bar .s.is-now  i { background: var(--accent); color: var(--accent-ink); }
.steps-bar .s.is-now  { color: var(--strong); }
.steps-bar .sep { flex: 1; height: 1px; background: var(--line); min-width: 18px; }

/* review list on checkout */
.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: 4px;
    background: var(--surface); border: 1px solid var(--strong); box-shadow: inset 4px 0 0 var(--accent); color: var(--text);
    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 {
    position: relative;
    padding: calc(var(--header-h) + 54px) 0 40px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}
.page-hero::before {
    content: ""; position: absolute; left: 0; right: 0; top: var(--header-h); height: 5px;
    background: var(--accent);
}
.page-hero h1 { font-size: clamp(36px, 4.4vw, 54px); }
.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: var(--surface); box-shadow: var(--shadow-1);
    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; }

/* ------------------------------------------------- What to buy (equipment.php) --- */

.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-title .pill { margin-left: 4px; }
.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(--strong); font-weight: 700; }
.hw-table td:first-child { white-space: nowrap; }
.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(var(--warn-rgb),0.40); background: linear-gradient(120deg, rgba(var(--warn-rgb),0.09), var(--surface) 62%); }
.hw-disclaimer .ico { background: rgba(var(--warn-rgb),0.14); border-color: rgba(var(--warn-rgb),0.34); }
/* dark: a lighter amber wash, or the red link inside it drops to 4.28:1 */
[data-theme="dark"] .hw-disclaimer { background: linear-gradient(120deg, rgba(var(--warn-rgb),0.05), var(--surface) 62%); }
.hw-disclaimer .ico svg { color: var(--warn); }

.eq-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.eq-jump a {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 7px; border-radius: 3px;
    border: 1px solid var(--line); background: var(--surface); color: var(--text);
    font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.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; }
.eq-pick.is-featured { border: 2px solid rgba(var(--accent-rgb), 0.5); background: linear-gradient(170deg, rgba(var(--accent-rgb), 0.07) 0%, var(--surface) 50%); }
.eq-pick .eq-more { margin-top: auto; font-size: 14.5px; font-weight: 700; }
/* 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-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.06); }
.eq-table tr.is-narrow td { opacity: .62; }
.eq-table .pill { margin-left: 6px; vertical-align: 2px; }
.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(--strong); }
.eq-mount .card h3 { margin-bottom: 8px; }
/* CCTV: the stream paths read as something to type, and the avoid list is not a list of ticks */
.eq-table code {
    font: 600 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--strong);
    background: rgba(var(--ink-rgb),0.06); padding: 2px 6px; border-radius: 6px; overflow-wrap: break-word;
}
.eq-table--brands td:nth-child(3) { min-width: 200px; }
.eq-table--cctv td:nth-child(3) { white-space: nowrap; }
.eq-avoid { margin-top: 40px; }
.eq-avoid h3 { margin-bottom: 8px; }
.eq-avoid .tick svg { color: var(--muted); }

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

.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: 4px; cursor: pointer;
    background: var(--btn-a);
    color: var(--accent-ink);
    font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    box-shadow: 0 14px 34px rgba(0,0,0,0.22), inset 0 -4px 0 rgba(0,0,0,0.22);
    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); border: 1px solid var(--line); border-radius: 16px 16px 5px 16px;
    box-shadow: var(--shadow-2); animation: chatIn .3s var(--ease);
}
[data-theme="dark"] .chat-teaser { background: var(--surface-2); }
.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(--strong); }
.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(var(--ink-rgb),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.12), rgba(var(--accent-rgb),0.02));
    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(--strong); }
.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(var(--ink-rgb),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(--bg-2); border: 1px solid var(--line-soft); color: var(--text); border-bottom-left-radius: 5px; }
[data-theme="dark"] .chat-msg--bot { background: var(--surface-2); }
.chat-msg--me { align-self: flex-end; background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.30); color: var(--strong); border-bottom-right-radius: 5px; }
.chat-msg--note { background: rgba(var(--warn-rgb),0.08); border-color: rgba(var(--warn-rgb),0.28); color: var(--text-dim); }
.chat-msg a { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 2px; }
.chat-msg b { color: var(--strong); }
.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.06);
    color: var(--text); font-size: 13.5px; font-weight: 600;
}
.chat-chips button:hover { background: rgba(var(--accent-rgb),0.14); }

.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: var(--surface);
    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(--strong); }
.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: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger);
}
.chat-handoff-error[hidden] { display: none; }
.chat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

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

/* 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. The column keeps 32px clear of it. */
@media (min-width: 1081px) {
    .hero-grid > div:first-child { padding-right: 32px; }
}

@media (max-width: 1080px) {
    .hero-grid { grid-template-columns: 1fr; gap: 54px; }
    /* one column: the heading has the full width, so it can be larger than beside the drawing */
    .hero h1 { font-size: clamp(32px, 5.4vw, 46px); }
    .mock { max-width: 560px; }
    .proof { grid-template-columns: 1fr; gap: 30px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .cart-layout { grid-template-columns: 1fr; }
    .panel--sticky { position: static; }
}

/* The header row is logo + nav + theme switch + cart, and the nav cannot shrink (its links are
   nowrap). Tighten the row first, then hand over to the burger while the links still fit -
   otherwise the CART button, the one control a shop cannot lose, is pushed off the right edge. */
@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; }
}

/* Every other language runs longer than English ("So funktioniert's", "Was Sie brauchen"), and the
   header row cannot shrink - so it hands over to the burger earlier, measured with German. */
@media (max-width: 1320px) {
    html:not([lang="en"]) .main-nav { display: none; }
    html:not([lang="en"]) .nav-toggle { display: flex; }
    html:not([lang="en"]) .header-actions { margin-left: auto; }
}
/* ...and the cart key is just its icon and count there: "Handlekurv", "Warenkorb" and "Ostoskori" would push
   the row past a laptop's edge, and the basket needs no word */
html:not([lang="en"]) .cart-btn .hide-sm { display: none; }

@media (max-width: 900px) {
    /* TWO up, not one, at tablet width - the device most of these clubs read this on. */
    .grid-3, .cam-options { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .steps-row { grid-template-columns: 1fr; gap: 24px; }
    .plans { grid-template-columns: minmax(0, 1fr); }   /* minmax: a long word in a card may not widen the page */
    .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .section { padding: 72px 0; }
}

@media (max-width: 680px) {
    body { font-size: 16px; }
    .wrap { padding: 0 18px; }
    .grid-2, .grid-3, .cam-options { grid-template-columns: 1fr; }
    .feature-list { grid-template-columns: 1fr; gap: 22px; }
    /* 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; }
    .cam-head { margin-top: 48px; }
    .field-row { grid-template-columns: 1fr; }
    .hero { padding-top: calc(var(--header-h) + 40px); padding-bottom: 60px; }
    .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hero-stats .stat { padding: 13px 12px 11px; }
    .hero-stats .stat b { font-size: 24px; }
    .hero-stats .stat small { font-size: 12.5px; letter-spacing: .08em; }
    .hero-stats .stat span { font-size: 12px; }
    .mock { --phone-in: 0px; --phone-w: 96px; }
    /* no leaning phone here, so the table runs the full width under the tablet */
    .mock::before { left: -10px; right: -10px; border-width: 12px; }
    .mock::after { left: -16px; right: -16px; }
    /* the leaning phone sits half off the screen's left edge here, over the first player's name */
    .mock-phone { display: none; }
    .mock-cam { right: 0; font-size: 11.5px; }
    /* 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; }
    .snk-balls .snk-ball { width: 22px; height: 22px; }
    .bil-rack .bil-ball { width: 21px; height: 21px; font-size: 9px; }
    .proof-btn { width: 64px; height: 64px; }
    .proof-btn svg { width: 24px; height: 24px; }
    .cta-band { padding: 36px 22px; }
    .card, .plan, .panel { padding: 22px; }
    .plan--compact { padding: 22px; }
    .addon-row { grid-template-columns: minmax(0,1fr) auto; row-gap: 14px; }
    .addon-row .p { grid-column: 2; text-align: right; }
    .addon-buy { grid-column: 1 / -1; }
    .addon-buy .btn { width: auto; flex: 1; }
    .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; }
    /* capitals run wider than the old sentence case: a long label wraps instead of pushing the page */
    .btn { width: 100%; white-space: normal; text-align: center; }
    .btn-row .btn { width: auto; flex: 1 1 auto; }
    .qty button { width: 40px; height: 40px; }
    .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; }
    .notice { grid-template-columns: 1fr; padding: 22px; }
}

@media (max-width: 560px) {
    .theme-btn { width: 40px; height: 40px; }
    .lang-menu summary { height: 40px; padding: 0 9px; }
    .lang-menu summary svg { display: none; }   /* the code alone; the row has no room for the globe */
    .header-actions { gap: 6px; }
    .lang-offer { bottom: calc(84px + env(safe-area-inset-bottom)); }
    /* four buttons are ~70px wide here and two tags collide; the year is already highlighted */
    .period-opt[data-tag-kind="recommended"]::before { display: none; }
    .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 (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
}

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