/* ═══════════════════════════════════════════════════════════════════════
   HIT HOOT — finish layer (loaded last).
   One typeface (Geist), normal capitalisation, flat surfaces with thin
   borders, small consistent corners, blue used sparingly and red only for
   live. Capitals are kept for small broadcast tags (LIVE, PPV, PGM).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --ink: #0B0D10; --panel: #121519; --panel2: #171B20; --line: #23272E; --line2: #2E333B;
    --text: #ECEEF1; --mut: #8B93A0; --soft: #B9C0CA;
    --blue: #0A84FF; --blue-d: #0070E0; --live: #F23B30; --tally: #F23B30;
    --r: 8px; --rs: 6px;
    --hh-head: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --hh-body: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --hh-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
body.hh { font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01"; }

/* ── capitalisation: normal everywhere, capitals only on small tags ── */
body.hh, body.hh * { text-transform: none !important; text-shadow: none !important; letter-spacing: normal !important; }
body.hh :is(h1, h2, h3, h4, h5, .hh-btn, .hh-nav a, .hh-chip, .hh-golive, .hh-subnav a, .hh-signin, .bx-acts a, .hh-drawer a) { letter-spacing: -.01em !important; }
body.hh :is(.hh-badge, .bx-tag, .hh-tag, .bx-nx .th .l, .bx-ticker .tag, .hh-tv .foot .pr, .hh-eyebrow, .hx-cap) {
    text-transform: uppercase !important; letter-spacing: .06em !important; font-family: var(--hh-body); font-weight: 600 !important; font-size: 11px !important; }

/* ── headings ── */
:where(.hh) :where(h1, h2, h3, h4) { font-family: var(--hh-head); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.hh h1 { letter-spacing: -.03em !important; }
.hh h2 { letter-spacing: -.025em !important; }
.hh-eyebrow { color: var(--mut); }
.hh-rowhead { margin: 40px 0 14px; }
.hh-rowhead h2, .bx-head h2 { font-size: 20px !important; font-weight: 600; }
.hh-rowhead .all, .bx-head .all { font-size: 13.5px; font-weight: 500; color: var(--mut); }
.hh-rowhead .all:hover, .bx-head .all:hover { color: var(--text); }
.bx-head { margin: 40px 0 14px; gap: 12px; }
.bx-head h2::before { display: none; }
.bx-head .rule { display: none; }
.bx-head .n { font-family: var(--hh-body); font-weight: 500; font-size: 13px; padding: 0; border: 0; color: var(--mut); }
.bx-head .all { margin-left: auto; }

/* ── top bar ── */
.hh-bar { padding: 0 20px; height: 60px; background: rgba(11,13,16,.9); }
.hh-logo img { height: 22px; }
.hh-nav { margin-left: 14px; gap: 2px; }
.hh-nav a { font-family: var(--hh-body); font-weight: 500; font-size: 14px; padding: 7px 11px; border-radius: var(--rs); }
.hh-nav a.on { background: transparent; color: var(--text); }
.hh-nav a:hover { background: var(--panel2); }
.hh-search { max-width: 340px; }
.hh-search input { height: 36px; padding: 0 12px 0 34px; border-radius: var(--rs); font-size: 13.5px; background: var(--panel); }
.hh-search input:focus { outline: 0; border-color: var(--line2); box-shadow: 0 0 0 3px rgba(10,132,255,.25); }
.hh-search svg { left: 11px; width: 15px; height: 15px; }
.hh-golive { font-family: var(--hh-body); font-weight: 600; font-size: 13.5px; height: 36px; padding: 0 14px; border-radius: var(--rs); gap: 8px; }
.hh-golive .dot { width: 7px; height: 7px; }
.hh-signin { font-family: var(--hh-body); font-weight: 500; font-size: 14px; color: var(--soft); }
.hh-me > button, .hh-burger { width: 36px; height: 36px; border-radius: var(--rs); font-family: var(--hh-body); font-weight: 600; font-size: 14px; }
.hh-menu { border-radius: var(--r); box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.hh-menu a { border-radius: var(--rs); font-weight: 500; font-size: 14px; }
@media (max-width: 960px) {
    .hh-bar { height: 56px; }
    .hh-golive { font-size: 13px; padding: 0 12px; }
    .hh-drawer.open { inset: 56px 0 0 0; }
    .hh-drawer a { font-family: var(--hh-body); font-weight: 500; font-size: 17px; }
}

/* ── buttons ── */
.hh-btn { font-family: var(--hh-body); font-weight: 600; font-size: 14px; line-height: 1; height: 38px; padding: 0 16px; border-radius: var(--rs); gap: 8px; box-shadow: none !important; transition: background-color .15s ease, border-color .15s ease; }
.hh-btn.big { font-size: 15px; height: 44px; padding: 0 20px; }
.hh-btn.sm { font-size: 13px; height: 32px; padding: 0 12px; }
.hh-btn.ghost { background: transparent; border: 1px solid var(--line2); color: var(--text); }
.hh-btn.ghost:hover { background: var(--panel2); }
.hh-chanrow .hh-btn, .hh-dev .hh-btn, .hh-snav .hh-btn { font-size: 13.5px; height: 36px; padding: 0 14px; }
@media (max-width: 640px) { .hh-gate .hh-btn.big { font-size: 15px; height: 44px; padding: 0 18px; } .hh-chanrow .hh-btn { font-size: 13px; } }

/* ── chips / filters / tabs ── */
.hh-cats { gap: 6px; }
.hh-chip, .bx-acts a { font-family: var(--hh-body); font-weight: 500; font-size: 13.5px; padding: 6px 12px; border-radius: var(--rs); background: transparent; border: 1px solid var(--line); color: var(--soft); box-shadow: none !important; }
.hh-chip.on, .bx-acts a.on { background: var(--text); border-color: var(--text); color: var(--ink); }
.hh-chip:hover, .bx-acts a:hover { background: var(--panel2); border-color: var(--line2); color: var(--text); }
.hh-chip.on:hover, .bx-acts a.on:hover { background: var(--text); color: var(--ink); }
.hh-subnav { gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.hh-subnav a { font-family: var(--hh-body); font-weight: 500; font-size: 14px; padding: 10px 12px; border: 0; border-radius: 0; background: none; color: var(--mut); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.hh-subnav a:hover { color: var(--text); }
.hh-subnav a.on, .hh-subnav a[class*="tool-"].on { color: var(--text); background: none; border-color: transparent; border-bottom-color: var(--text); }
.bx-days a { border-radius: var(--rs); }
.bx-days a b { font-family: var(--hh-body); font-weight: 600; font-size: 18px; }
.bx-days a span { font-size: 11.5px; font-weight: 500; letter-spacing: 0; }
.bx-days a.on { background: var(--panel2); border-color: var(--line2); }
.bx-days a.on span { color: var(--text); }

/* ── surfaces: flat, thin border, small corners ── */
.hh-card, .hh-panel, .hh-sidebox, .hh-about, .hh-plan, .hh-stat, .hh-monitor, .hh-dev, .hh-toolcard, .hh-src, .hh-ctl, .hh-tv, .hh-epg, .hh-strip,
.bx-next, .bx-ch, .bx-board, .bx-stat, .bx-band, .bx-stage, .bx-tools-hero, .ch-text, .ch-cta, .hh-chanhero, .hh-player, .hh-hero, .hh-cookie, .hh-countdown div, .hh-srcrow {
    border-radius: var(--r) !important; box-shadow: none !important; }
.hh-card { transition: border-color .15s ease; }
.hh-card:hover, .bx-ch:hover { transform: none !important; border-color: var(--line2); box-shadow: none !important; }
.hh-card:hover .hh-thumb > svg, .hh-card:hover .hh-thumb > img { transform: none; }
.bx-live .hh-card { border-color: var(--line); }
.hh-card .meta { padding: 12px 12px 14px; }
.hh-card .t { font-size: 14.5px; font-weight: 600; }
.hh-card .s { font-size: 13px; }
.hh-avatar { border-radius: var(--rs); font-family: var(--hh-body); font-weight: 600; }
.hh-thumb { border-radius: 0; }

/* badges on thumbnails */
.hh-badge { top: 8px; left: 8px; padding: 3px 7px; border-radius: 4px; gap: 5px; }
.hh-badge.ppv { right: 8px; left: auto; background: rgba(11,13,16,.82); border: 1px solid rgba(255,255,255,.18); }
.hh-badge.feat { background: rgba(11,13,16,.82); color: #fff; border: 1px solid rgba(255,255,255,.18); bottom: 8px; top: auto; }
.hh-badge.cd { right: 8px; bottom: 8px; }
.hh-badge.live .dot, .bx-tag .dot { width: 6px; height: 6px; box-shadow: none; animation: hh-pulse 1.4s infinite; }
.hh-viewers { border-radius: 4px; font-size: 12px; bottom: 8px; right: 8px; }
.bx-tag { clip-path: none; border-radius: 4px; padding: 4px 8px; }
.bx-tag.gold { background: rgba(11,13,16,.82); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.bx-tag.dark { background: rgba(11,13,16,.82); border: 1px solid rgba(255,255,255,.18); }

/* pills */
.hh-pill { font-size: 12px; font-weight: 500; border-radius: 4px; padding: 2px 8px; }
.hh-tpill { border-radius: 4px; padding: 2px 7px; font-size: 10.5px !important; }
.hh-tag { border-radius: 4px; }

/* ── hero blocks: no gradient washes, no glowing owl ── */
.hh-hero { background: var(--panel); }
.hh-hero h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; }
.hh-hero h1 .b { color: var(--text); }
.hh-hero p { color: var(--soft); font-size: 16px; }
.hh-hero .owl img { filter: none; width: min(240px, 26vw); }
.hh-hero.spot .feat { background: none; border: 1px solid var(--line2); color: var(--soft); border-radius: 4px; font-family: var(--hh-body); font-weight: 600; font-size: 11px !important; padding: 3px 8px; }
.hh-hero.spot .art::before { background: linear-gradient(90deg, var(--panel) 0%, transparent 30%); }
.bx-stage.brand { background: var(--panel); }
.bx-stage.brand .owl img { filter: none; width: min(220px, 24vw); opacity: .95; }
.bx-stage.is-live { border-color: var(--line2); }
.bx-stage.is-feat { border-color: var(--line); }
.bx-stage .shot::after { background: linear-gradient(0deg, rgba(11,13,16,.94) 0%, rgba(11,13,16,.5) 40%, rgba(11,13,16,0) 70%); }
.bx-l3 .chan { clip-path: none; border-radius: 4px; font-family: var(--hh-body); font-weight: 600; font-size: 13px; padding: 4px 10px 4px 4px; background: rgba(11,13,16,.8); border: 1px solid rgba(255,255,255,.14); }
.bx-l3 .chan .hh-avatar { width: 22px; height: 22px; border-radius: 3px; font-size: 10px; }
.bx-l3 h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.05; margin-top: 12px; }
.bx-l3 .meta { font-size: 14.5px; color: var(--soft); }
.bx-stage.brand .bx-l3 h1 em, .bx-l3 h1 em, .bx-title h1 em { color: inherit; font-style: normal; }
.bx-stage .top .viewers { border-radius: 4px; font-size: 12.5px; font-weight: 500; }
.bx-countdown { font-family: var(--hh-mono); font-weight: 500; }
.bx-next h3, .hh-sidebox h3, .hh-panel h3, .hh-about h3 { font-size: 15px !important; font-weight: 600; color: var(--text); letter-spacing: -.01em !important; }
.bx-next { padding: 14px; }
.bx-nx { border-radius: var(--rs); }
.bx-nx .th { border-radius: 4px; }
.bx-nx .th .l { border-radius: 3px; font-size: 9.5px !important; }
.bx-nx b { font-size: 13.5px; font-weight: 500; }

/* ── the ticker: a plain strip ── */
.bx-ticker { border-radius: var(--r); border-color: var(--line); background: var(--panel); }
.bx-ticker .tag { clip-path: none; padding: 0 14px; font-size: 11px !important; }
.bx-ticker .tag .dot { width: 6px; height: 6px; }
.bx-ticker .item { font-size: 13.5px; font-weight: 400; color: var(--soft); }
.bx-ticker .item b { font-family: var(--hh-body); font-size: 13.5px; font-weight: 600; color: var(--text); }
.bx-ticker .item .v { color: var(--mut); font-weight: 500; font-size: 12.5px; }
.bx-ticker .item::before { content: '·'; color: var(--mut); font-size: 16px; }

/* ── page titles and stats ── */
.bx-title { margin: 8px 0 6px; }
.bx-title h1 { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.1; }
.bx-title p { color: var(--mut); font-size: 15px; }
.hh-pagehead h2 { font-size: 26px; }
.hh-studio h2.sec { font-size: 18px; }
.hh-stat .k, .bx-stat span { font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--mut); }
.hh-stat .v, .bx-stat b { font-family: var(--hh-body); font-weight: 600; font-size: 26px; letter-spacing: -.02em; }
.bx-stat b { font-size: 20px; }
.hh-countdown b { font-family: var(--hh-mono); font-weight: 500; font-size: 28px; }
.hh-countdown span { letter-spacing: 0; }

/* ── channels ── */
.bx-ch .cov { background: var(--panel2); }
.bx-ch .cov::after { background: linear-gradient(0deg, var(--panel) 0%, transparent 60%); }
.bx-ch .body .hh-avatar { border-radius: var(--r); }
.bx-ch .nm { font-family: var(--hh-body); font-weight: 600; font-size: 17px; letter-spacing: -.015em; line-height: 1.25; }
.bx-chspot .bx-ch .nm { font-size: 21px; }
.bx-ch .st span { font-size: 12px; font-weight: 500; letter-spacing: 0; border-radius: 4px; padding: 2px 8px; }
.bx-ch .st span.up { border-color: var(--line); color: var(--soft); }
.bx-ch.feat, .bx-ch.is-live { border-color: var(--line); }
.bx-chspot .bx-ch .next { border-radius: var(--rs); }
.bx-chspot .bx-ch .next b { font-family: var(--hh-body); font-size: 14px; font-weight: 600; }
.bx-chspot .bx-ch .next .when { font-family: var(--hh-body); font-weight: 600; background: var(--ink); color: var(--text); border: 1px solid var(--line); border-radius: 4px; }
.hh-chanhero h1 { font-size: 28px; }

/* ── schedule board ── */
.bx-row .tm { font-family: var(--hh-body); }
.bx-row .tm b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.bx-row .tm span { font-size: 12px; letter-spacing: 0; font-weight: 500; }
.bx-row .th { border-radius: 4px; }
.bx-row .tt b { font-size: 15.5px; font-weight: 600; }
.bx-row .tt .tags span { font-size: 11.5px; font-weight: 500; letter-spacing: 0; border-radius: 4px; }
.bx-row .price { font-family: var(--hh-body); font-weight: 600; font-size: 14px; }
.bx-row.on { background: rgba(242,59,48,.05); }
.bx-row.on::before { width: 2px; }
.bx-row.feat::after { display: none; }
.bx-dayhead { font-family: var(--hh-body); font-weight: 500; font-size: 12.5px; letter-spacing: 0; }

/* ── watch page ── */
.hh-watch .info h1 { font-size: 26px; line-height: 1.2; }
.hh-gate { background: rgba(11,13,16,.88); }
.hh-gate h2 { font-size: clamp(22px, 2.6vw, 30px); }
.hh-upitem { border-radius: var(--rs); }
.hh-upitem .when { font-family: var(--hh-body); font-weight: 600; border-radius: 4px; }
.hh-upitem .when b { font-size: 15px; }

/* ── tables, forms, steps ── */
.hh-tbl th { font-family: var(--hh-body); font-weight: 500; font-size: 12.5px; letter-spacing: 0; color: var(--mut); }
.hh-tbl tr:hover td { background: rgba(255,255,255,.02); }
.hh-field label { font-weight: 500; font-size: 13.5px; }
.hh-field input, .hh-field select, .hh-field textarea, .hh-input { border-radius: var(--rs); padding: 9px 12px; font-size: 14.5px; background: var(--ink); border-color: var(--line2); }
.hh-field input:focus, .hh-field select:focus, .hh-field textarea:focus, .hh-input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10,132,255,.22); }
.hh-steps .st { font-family: var(--hh-body); font-weight: 500; font-size: 13px; }
.hh-steps .st::before { width: 10px; height: 10px; top: 10px; }
.hh-snav a.tab { border-radius: var(--rs); font-weight: 500; font-size: 14px; padding: 8px 12px; }
.hh-keybox { border-radius: var(--rs); font-family: var(--hh-mono); }
.hh-flash { border-radius: var(--r); font-weight: 500; font-size: 14px; }
.hh-monitor .mhead h3 { font-size: 15px; }
.hh-monitor .idle b { font-family: var(--hh-body); font-size: 17px; font-weight: 600; }
.hh-plan.hot { background: var(--panel); border-color: var(--line2); }
.hh-plan h3 { font-size: 18px; }
.hh-plan .price { font-family: var(--hh-body); font-weight: 600; font-size: 36px; letter-spacing: -.03em; }
.hh-plan .price span { font-size: 14px; font-weight: 500; letter-spacing: 0; }
.hh-plan .current { font-family: var(--hh-body); font-weight: 600; font-size: 13.5px; border-radius: var(--rs); }
.hh-strip { border-style: solid; }
.hh-strip h3, .hh-dev h3, .hh-src h3, .hh-toolcard h3 { font-size: 16px; }
.hh-toolcard .price { font-family: var(--hh-body); font-weight: 600; font-size: 15px; }
.hh-paircode, .hh-scorectl .sc { font-family: var(--hh-mono); font-weight: 500; }
.hh-thm, .hh-srcrow .take, .hh-bump, .hh-scorectl .nm, .hh-epg .ch b { font-family: var(--hh-body); font-weight: 600; letter-spacing: 0; }
.hh-ctl h4 { font-size: 13px; letter-spacing: 0; }

/* ── tools pages: drop the rainbow, keep the tool colour as a quiet accent ── */
.bx-tools-hero { background: var(--panel); padding: 44px 40px; }
.bx-tools-hero h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.05; }
.bx-tools-hero h1 .w { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--mut); display: inline; }
.bx-tools-hero p { color: var(--soft); font-size: 16px; }
.bx-wall { transform: none; }
.bx-mon { border: 1px solid var(--line2); border-radius: var(--rs); box-shadow: none; }
.bx-mon .lab { clip-path: none; border-radius: 3px; font-family: var(--hh-body); font-weight: 600; font-size: 10.5px; letter-spacing: .04em; }
.bx-mon .mv i:first-child { box-shadow: none; }
.bx-mon .epg::after { box-shadow: none; }
.bx-band { background: var(--panel); border-color: var(--line); padding: 36px; }
.bx-band .kicker { font-family: var(--hh-body); font-weight: 600; font-size: 13px; letter-spacing: 0; }
.bx-band h2 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.1; }
.bx-band h2 span { color: inherit; }
.bx-band .lede { color: var(--soft); font-size: 15.5px; }
.bx-band li { font-size: 14.5px; color: var(--soft); }
.bx-band li::before { width: 5px; height: 5px; border-radius: 50%; transform: none; margin-top: 9px; }
.bx-band .inc { font-size: 13px; font-weight: 500; letter-spacing: 0; }
.bx-flow .n { font-family: var(--hh-body); font-weight: 600; font-size: 14px; letter-spacing: 0; border-radius: var(--rs); background: var(--panel); border-color: var(--line2); color: var(--text); }
.bx-flow .n small { font-family: var(--hh-body); }
.hh-toolcard[class*="tool-"] { border-top-width: 1px; border-top-color: var(--line); }
.hh-toolcard[class*="tool-"] .hd .ic { border-radius: var(--rs); }

/* ── channel pages ── */
.ch-btn { background: var(--chc); }
.ch-btn:hover { background: var(--chc); filter: brightness(1.08); }
.ch-cta { background: var(--panel); border-color: var(--line); }
.ch-cta h2 { color: var(--text); font-size: clamp(24px, 3vw, 32px); line-height: 1.15; }
.ch-cta p { color: var(--soft); }
.ch-cta .ch-btn { background: var(--chc); color: #fff; font-size: 14px; padding: 0 18px; }
.ch-announce { background: color-mix(in srgb, var(--ac) 70%, #000); font-weight: 500; font-size: 14px; }
.ch-announce b { font-size: 14px; }
.hh-wl-nav a { font-family: var(--hh-body); font-weight: 500; font-size: 14px; letter-spacing: 0; border-radius: var(--rs); }

/* ── footer ── */
.hh-footer { font-size: 13px; }
.hh-cookie { font-size: 13.5px; }
.bx-stage.brand .shot { grid-template-columns: 1.45fr .55fr; min-height: 340px; }
.bx-stage.brand .bx-l3 h1 { font-size: clamp(30px, 3.3vw, 44px); text-wrap: wrap; }
.hh-tpill { font-size: 12px; font-weight: 500; letter-spacing: 0; }
.bx-band .kicker { display: flex; align-items: center; gap: 8px; color: var(--mut); }
.bx-band .kicker::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--tool); }
.bx-band .hh-btn.tl { background: var(--blue); color: #fff; }
.bx-band .hh-btn.tl:hover { background: var(--blue-d); filter: none; }
.bx-band .inc b { color: var(--text); font-weight: 500; }
.bx-mon .lab { background: rgba(11,13,16,.85); color: var(--text); border: 1px solid rgba(255,255,255,.14); }
.bx-mon .field { background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 12%), linear-gradient(180deg, #17663A, #10502D); }
.bx-mon .field::after { display: none; }
.bx-mon .tvs i { background: rgba(var(--tool-rgb), .55); opacity: 1; animation: none; border-radius: 2px; }
.bx-mon .mv i { background: #17663A; border-color: rgba(255,255,255,.1); }
.bx-mon .mv i:nth-child(3) { border-color: rgba(255,255,255,.35); }
.bx-mon .epg i { background: #1A1F27; border-color: #2E333B; border-radius: 2px; }
.bx-mon .epg i.now { background: rgba(var(--tool-rgb), .55); border-color: transparent; }
.bx-mon .sb i.c { background: #1A212C; }
.bx-mon .l3g { border-left-width: 2px; border-left-color: var(--soft); }
.bx-flow .n small { color: var(--mut); }
.bx-ch .cov > svg { opacity: .6; }
/* buttons sized inline on older pages fall in line */
body.hh .hh-btn { font-size: 14px !important; min-height: 38px; height: auto !important; padding: 0 16px !important; }
body.hh .hh-btn.big { font-size: 15px !important; min-height: 44px; padding: 0 20px !important; }
body.hh .hh-btn.sm { font-size: 13px !important; min-height: 32px; padding: 0 12px !important; }
/* older pages (style.css) share the same type and surfaces */
:root { --font-heading: var(--hh-head); --font-body: var(--hh-body); --font-pixel: var(--hh-mono);
    --bg: var(--ink); --bg-card: var(--panel); --bg-card-hover: var(--panel2); --bg-input: var(--ink); --bg-nav: rgba(11,13,16,.9);
    --accent: var(--blue); --accent-hover: var(--blue-d); --border: var(--line); --border-hover: var(--line2); --radius: 6px; --radius-lg: 8px; }
/* stock photos stand in for missing artwork */
img.hh-stock { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-tint { position: absolute; inset: 0; opacity: .38; mix-blend-mode: multiply; pointer-events: none; }
.bx-ch .cov > img.hh-stock { opacity: 1; }
.bx-ch .cov { aspect-ratio: 16/7; }

/* ── display type: the sports headline face, for big headlines only ── */
:root { --hh-display: Archivo, "Arial Narrow", system-ui, sans-serif; }
body.hh :is(.hx-d, .bx-title h1, .pl-hero h1, .bx-tools-hero h1, .bx-l3 h1, .bx-band h2, .pl-comhd h2, .pl-final h2, .pl-alc h2, .pl-sec > h2, .hh-auth h1, .hh-chanhero h1, .hh-gate h2, .hh-watch .info h1) {
    font-family: var(--hh-display); font-stretch: 78%; font-weight: 850; text-transform: uppercase !important; letter-spacing: -.005em !important; line-height: .92; }
body.hh :is(.hx-d, .bx-title h1, .pl-hero h1, .bx-tools-hero h1, .bx-l3 h1, .bx-band h2, .pl-comhd h2, .pl-final h2, .pl-alc h2, .pl-sec > h2) em,
body.hh .hx-d .b { font-style: normal; color: var(--blue); }
.bx-title h1 { font-size: clamp(40px, 5.4vw, 64px); }
.pl-hero h1 { font-size: clamp(48px, 7vw, 88px); }
.pl-sec > h2, .pl-alc h2, .pl-comhd h2, .pl-final h2 { font-size: clamp(34px, 4.4vw, 52px); }
.bx-tools-hero h1 { font-size: clamp(48px, 6.4vw, 84px); }
.bx-band h2 { font-size: clamp(36px, 4.6vw, 56px); }
.bx-l3 h1 { font-size: clamp(40px, 5.6vw, 76px); }
.hh-watch .info h1 { font-size: clamp(28px, 3vw, 38px); line-height: 1; }
.hh-chanhero h1 { font-size: clamp(30px, 3.6vw, 44px); }
.hh-auth h1 { font-size: 40px; }
.hh-gate h2 { font-size: clamp(28px, 3.4vw, 44px); }
body.hh { overflow-x: clip; }
body.hh :is(.hx-d, .bx-title h1, .pl-hero h1, .bx-tools-hero h1, .bx-l3 h1, .bx-band h2, .pl-comhd h2, .pl-final h2, .pl-alc h2, .pl-sec > h2, .hh-auth h1, .hh-chanhero h1, .hh-gate h2, .hh-watch .info h1) * { text-transform: inherit !important; }
.hx-hero .acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }

/* ── photo page heads: a full-width shot behind the title ── */
.bx-title.photo, .pl-hero.photo { position: relative; isolation: isolate; margin-top: -26px; padding: 96px 0 44px; }
.pl-hero.photo { max-width: none; padding: 110px 0 56px; }
.pl-hero.photo > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.bx-title.photo::before, .pl-hero.photo::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1;
    background: linear-gradient(0deg, var(--ink) 0%, rgba(11,13,16,.55) 55%, rgba(11,13,16,.35) 100%), linear-gradient(90deg, rgba(11,13,16,.85), rgba(11,13,16,.2) 70%), var(--ph) center 35% / cover no-repeat; }
.pl-hero.photo::before { background: linear-gradient(0deg, var(--ink) 0%, rgba(11,13,16,.6) 60%, rgba(11,13,16,.45) 100%), var(--ph) center 30% / cover no-repeat; }
.bx-title.photo p, .pl-hero.photo p { color: #DDE2E8; }
.bx-title .hh-eyebrow, .pl-hero .hh-eyebrow { color: var(--blue); font-size: 12px !important; }
.bx-title.photo .bx-stat { background: rgba(11,13,16,.7); backdrop-filter: blur(6px); }
/* tools hero gets the truck-in-the-cloud shot */
.bx-tools-hero { background: linear-gradient(90deg, rgba(11,13,16,.96) 0%, rgba(11,13,16,.82) 45%, rgba(11,13,16,.5) 100%), url(/assets/img/stock/football-line.jpg) center / cover; border-color: var(--line2); }
.bx-tools-hero h1 .w { color: var(--blue); }
/* plans: the popular plan carries the colour */
.pl-card.pro { background: linear-gradient(180deg, rgba(10,132,255,.12), transparent 40%), var(--panel2); box-shadow: inset 0 3px 0 var(--blue); }
.pl-card .pl-name { font-family: var(--hh-display); font-stretch: 78%; font-weight: 850; font-size: 28px; text-transform: uppercase !important; line-height: .95; }
.pl-card .pl-price { font-family: var(--hh-display); font-stretch: 78%; font-weight: 850; font-size: 52px; letter-spacing: 0 !important; }
.pl-card .pl-price span span, .pl-card .pl-price > span > span { font-family: var(--hh-body); font-stretch: 100%; font-weight: 400; }
.pl-card.all .pl-split .lbl b { color: var(--ok); }
.pl-bar i { background: var(--blue); }
.pl-card.all .pl-bar i { background: var(--ok); }
/* tool monitors show real shots */
.bx-mon .field { background: url(/assets/img/stock/football-line.jpg) center / cover; }
.bx-mon .mv i { background: #111 center / cover; }
.bx-mon .mv i:nth-child(1) { background-image: url(/assets/img/stock/basketball-team.jpg); }
.bx-mon .mv i:nth-child(2) { background-image: url(/assets/img/stock/basketball-gym.jpg); }
.bx-mon .mv i:nth-child(3) { background-image: url(/assets/img/stock/volleyball.jpg); border-color: #00FF46; }
.bx-mon .mv i:nth-child(4) { background-image: url(/assets/img/stock/football-action.jpg); }
.bx-mon .tvs i { background: #111 center / cover; border: 2px solid #2B3038; }
.bx-mon .tvs i:nth-child(1) { background-image: url(/assets/img/stock/basketball-gym.jpg); }
.bx-mon .tvs i:nth-child(2) { background-image: url(/assets/img/stock/football-action.jpg); }
.bx-mon .tvs i:nth-child(3) { background-image: url(/assets/img/stock/volleyball.jpg); }
.bx-mon .tvs i:nth-child(4) { background-image: url(/assets/img/stock/basketball-team.jpg); }
.bx-mon .tvs i:nth-child(5) { background-image: url(/assets/img/stock/football-line.jpg); }
.bx-mon .tvs i:nth-child(6) { background-image: url(/assets/img/stock/worship-stage.jpg); }
.bx-mon .tvs { gap: 4%; inset: 14% 8%; }
.bx-mon .epg i.now { background: url(/assets/img/stock/football-lights.jpg) center / cover; border: 2px solid var(--tool); }
.bx-mon .epg span:nth-child(2) i.now { background-image: url(/assets/img/stock/worship-stage.jpg); }
.bx-mon .epg span:nth-child(3) i.now { background-image: url(/assets/img/stock/concert.jpg); }
.bx-mon .epg::after { background: var(--tool); }
.bx-band .kicker { color: var(--tool); font-weight: 600; }
.bx-band h2 span { color: var(--tool); }
.pl-card { padding-top: 46px; } .pl-badge { top: 16px; left: 20px; right: auto; }
.bx-mon .tvs i:nth-child(2n) { border: 2px solid #2B3038; animation: none; }
@media (max-width: 560px) { .hx-tv .bugr { display: none; } }

/* dashboard rail groups: each a card with its own color */
.hh-snav { gap: 8px; }
.hh-snav .hh-sgroup { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--g); border-radius: 10px; padding: 8px 6px 6px; display: flex; flex-direction: column; gap: 1px; }
.hh-snav .hh-sgrp { font-size: 12px; font-weight: 800; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--g); margin: 0 8px 4px; }
.hh-snav .hh-sgroup a.tab { padding: 6px 10px; color: var(--soft); }
.hh-snav .hh-sgroup a.tab:hover { background: var(--panel2); color: var(--text); }
.hh-snav .hh-sgroup a.tab.on { background: color-mix(in srgb, var(--g) 18%, transparent); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--g); }

/* PLANS stands out in the header: gold, a pill of its own (Barry, 2026-10-18) */
.hh-nav a.nav-plans { color: #FFC800; font-weight: 700; border: 1px solid rgba(255,200,0,.55); background: rgba(255,200,0,.08); margin-left: 4px; }
.hh-nav a.nav-plans:hover, .hh-nav a.nav-plans.on { background: #FFC800; color: #0b0d10; border-color: #FFC800; }
.hh-drawer a.nav-plans { color: #FFC800; font-weight: 700; }