/* Drabble.it — Public Website Styles */

/* ── Reset & Base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary: #fc6703;
    --primary-light: #ff7d2b;
    --primary-dark: #e25a00;
    --primary-rgb: 252, 103, 3;
    --navy: #0f172a;
    --white: #ffffff;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --success: #22c55e;
    --warning: #ca8a04;
    --danger: #ef4444;
    --purple: #8b5cf6;
    --info: #0ea5e9;
    --bg: var(--gray-50);
    --bg-alt: var(--white);
    --text: var(--gray-800);
    --text-secondary: var(--gray-500);
    --border: var(--gray-200);
    --nav-bg: rgba(248,250,252,0.85);
    --card-bg: var(--white);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --max-width: 1200px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark {
    --primary: #ff7d2b;
    --primary-light: #ff9450;
    --primary-dark: #fc6703;
    --primary-rgb: 255, 125, 43;
    --bg: #0f172a;
    --bg-alt: #1e293b;
    --text: #f1f5f9;
    --text-secondary: #94a3b8;
    --border: #334155;
    --nav-bg: rgba(15,23,42,0.85);
    --card-bg: #1e293b;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal; font-style: normal;
    font-size: inherit; line-height: 1;
    letter-spacing: normal; text-transform: none;
    display: inline-block; white-space: nowrap;
    word-wrap: normal; direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

/* Custom inline SVG icons (e.g. bowling, which has no Material Symbol). Sits inside a
   .material-symbols-outlined span so it inherits that context's font-size for sizing
   and color via currentColor — behaving exactly like a Material glyph everywhere.
   display:block (a centered 1em box) so flex/grid contexts center it like a glyph
   instead of the downward baseline bias an inline-block would carry. */
.icon-bowling { width: 1em; height: 1em; display: block; }

/* ── Typography ───────────────────────────────── */
.h-xl  { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.h-lg  { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.h-md  { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.h-sm  { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.3; }
.t-lg  { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.6; color: var(--text-secondary); }
.t-md  { font-size: 1rem; line-height: 1.6; color: var(--text-secondary); }
.t-sm  { font-size: 0.875rem; line-height: 1.5; color: var(--text-secondary); }
.label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); }
.text-primary { color: var(--primary); }

/* ── Layout ───────────────────────────────────── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section   { padding: 120px 0; }
.section-alt { background: var(--bg-alt); }
.text-center { text-align: center; }

/* ── Navigation ───────────────────────────────── */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: var(--nav-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}
/* Three zones: brand (left) · nav links (centered) · controls (right).
   1fr auto 1fr keeps the middle truly centered regardless of the side widths. */
.nav-inner {
    max-width: var(--max-width); margin: 0 auto; padding: 0 24px;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    height: 64px;
}
.nav-logo-wrap { justify-self: start; display: flex; align-items: center; gap: 10px; }
.brand-mark { height: 34px; width: 34px; }
html.dark .brand-mark { filter: invert(1) brightness(1.6); }
.brand-word { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
/* Header wordmark — Comfortaa 700, "drabble" with the d and bb in the Drabble orange,
   then "sports" in secondary grey.

   The orange half is byte-for-byte the application's logotype (layouts/app
   .nav-wordmark), which still reads "drabble" + ".it". Keeping it identical is the
   point: "sports" is a suffix naming the site, set back in grey so it reads as
   subordinate rather than as a different logo. Signed in or out, the mark a visitor
   recognises is the same one — which is what the earlier note here was worried about
   when the two diverged.

   .dot is kept as an alias of .wm-o because older markup uses it. */
.nav-wordmark { font-family: 'Comfortaa', system-ui, sans-serif; font-size: 1.375rem;
    font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.nav-wordmark .wm-o, .nav-wordmark .dot { color: var(--primary); }
.nav-wordmark .wm-sub { color: var(--text-secondary); }
/* Baseball shares softball's Material glyph. Render it 10% smaller everywhere it's used,
   mirroring the real-life size difference between a baseball and a softball. scale()
   keeps it 90% of the softball icon regardless of the per-context font-size. */
.material-symbols-outlined.icon-baseball { transform: scale(0.9); }
/* The menu wrapper "disappears" on desktop so its two children become grid items. */
.nav-menu { display: contents; }
.nav-center { justify-self: center; display: flex; gap: 32px; align-items: center; }
.nav-right { justify-self: end; display: flex; gap: 16px; align-items: center; }
.nav-center a {
    font-size: 0.875rem; font-weight: 500; color: var(--text-secondary);
    transition: color var(--transition);
}
.nav-center a:hover { color: var(--text); }
.nav-cta {
    font-size: 0.875rem; font-weight: 600;
    padding: 8px 20px; border-radius: 8px;
    background: var(--primary); color: var(--white) !important;
    transition: all var(--transition);
}
.nav-cta:hover { background: var(--primary-dark); transform: translateY(-1px); }

/* Theme toggle */
.theme-toggle {
    background: none; border: 1px solid var(--border); border-radius: 8px;
    cursor: pointer; padding: 6px 8px; display: flex; align-items: center;
    justify-content: center; color: var(--text-secondary);
    transition: all var(--transition); font-size: 1rem; line-height: 1;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-secondary); }
.theme-toggle .icon-moon  { display: inline; }
.theme-toggle .icon-sun   { display: none; }
html.dark .theme-toggle .icon-moon { display: none; }
html.dark .theme-toggle .icon-sun  { display: inline; }

/* Mobile nav */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text); margin: 5px 0; transition: var(--transition); }

@media (max-width: 820px) {
    .nav-inner { display: flex; justify-content: space-between; }
    .nav-toggle { display: block; }
    /* Collapse the centre links + right controls into one dropdown panel. */
    .nav-menu {
        display: none; flex-direction: column; align-items: stretch; position: absolute;
        top: 64px; left: 0; right: 0; background: var(--bg);
        border-bottom: 1px solid var(--border);
        padding: 24px; gap: 18px;
    }
    .nav-menu.open { display: flex; }
    .nav-center { flex-direction: column; align-items: flex-start; gap: 18px; }
    .nav-right { gap: 16px; }
}

/* ── Hero ─────────────────────────────────────── */
.hero {
    display: flex; align-items: flex-start;
    padding-top: 128px; padding-bottom: 80px;
}
.hero .container { width: 100%; }
.hero-grid { display: block; }
.hero-content { max-width: 740px; margin: 0 auto; text-align: center; }
.hero-content .btn-group { justify-content: center; }
.hero h1 { margin-bottom: 22px; }
.hero h1 .accent { color: var(--primary); }
.hero p { margin-bottom: 36px; }
/* Demo console sits directly below the title block, centered (see Hero Live-Demo Console). */

/* ── Buttons ──────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 32px; border-radius: 12px;
    font-size: 1rem; font-weight: 600;
    transition: all var(--transition); border: none; cursor: pointer;
    font-family: var(--font);
}
.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-outline {
    background: transparent; color: var(--text);
    border: 1.5px solid var(--border);
}
.btn-outline:hover { border-color: var(--text); }
.btn-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-sm { padding: 10px 20px; font-size: 0.875rem; border-radius: 10px; }
.btn-white { background: var(--white); color: var(--primary); }
.btn-white:hover { opacity: 0.92; transform: translateY(-1px); }

/* ── Feature Cards ────────────────────────────── */
.feature-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 32px; margin-top: 64px;
}
@media (max-width: 900px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .feature-grid { grid-template-columns: 1fr; }
}
.feature-card {
    padding: 36px; border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    transition: all var(--transition);
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
html.dark .feature-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.feature-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px; font-size: 1.5rem;
    background: rgba(var(--primary-rgb),0.1); color: var(--primary);
}
.feature-card h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 10px; }
.feature-card p { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; }

/* Icon color variants */
.fi-green  { background: rgba(34,197,94,0.1); color: var(--success); }
.fi-purple { background: rgba(139,92,246,0.1); color: var(--purple); }
.fi-warning { background: rgba(202,138,4,0.12); color: var(--warning); }
.fi-info   { background: rgba(14,165,233,0.1); color: var(--info); }
.fi-danger { background: rgba(239,68,68,0.1); color: var(--danger); }

/* ── How It Works ─────────────────────────────── */
.steps {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 24px; margin-top: 64px;
}
@media (max-width: 900px) {
    .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .steps { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
}
.step {
    text-align: center;
    padding: 40px 28px 36px;
    border-radius: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    position: relative;
    transition: all var(--transition);
}
.step:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(var(--primary-rgb),0.12);
}
.step-icon {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.75rem;
    position: relative;
}
.step-icon::after {
    content: ''; position: absolute; inset: -4px;
    border-radius: 50%; border: 2px dashed;
    opacity: 0.3;
}
.step:nth-child(1) .step-icon { background: rgba(var(--primary-rgb),0.1); color: var(--primary); }
.step:nth-child(1) .step-icon::after { border-color: var(--primary); }
.step:nth-child(2) .step-icon { background: rgba(139,92,246,0.1); color: var(--purple); }
.step:nth-child(2) .step-icon::after { border-color: var(--purple); }
.step:nth-child(3) .step-icon { background: rgba(14,165,233,0.1); color: var(--info); }
.step:nth-child(3) .step-icon::after { border-color: var(--info); }
.step:nth-child(4) .step-icon { background: rgba(34,197,94,0.1); color: var(--success); }
.step:nth-child(4) .step-icon::after { border-color: var(--success); }
.step-number {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
    background: var(--primary); color: var(--white);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb),0.3);
}
.step:nth-child(2) .step-number { background: var(--purple); box-shadow: 0 2px 8px rgba(139,92,246,0.3); }
.step:nth-child(3) .step-number { background: var(--info); box-shadow: 0 2px 8px rgba(14,165,233,0.3); }
.step:nth-child(4) .step-number { background: var(--success); box-shadow: 0 2px 8px rgba(34,197,94,0.3); }
.step h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 8px; }
.step p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }

@media (min-width: 901px) {
    .steps { position: relative; }
    .step:not(:last-child)::before {
        content: '\2192'; position: absolute;
        right: -18px; top: 50%; transform: translateY(-50%);
        font-size: 1.25rem; color: var(--gray-400);
        z-index: 1;
    }
}

/* ── Sports Strip (chips) ─────────────────────── */
/* Grid of 4 per row (2 rows of the 8 sports). max-content keeps each chip its natural
   pill width; justify-items:center stops narrower chips stretching to the column width. */
.sport-chips {
    display: grid; grid-template-columns: repeat(4, max-content); gap: 14px;
    justify-content: center; justify-items: center; margin-top: 56px;
}
@media (max-width: 600px) { .sport-chips { grid-template-columns: repeat(2, max-content); } }
.sport-chip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 22px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--card-bg);
    font-weight: 600; font-size: 0.9375rem; color: var(--text);
    transition: all var(--transition);
}
.sport-chip .material-symbols-outlined { font-size: 1.25rem; color: var(--primary); }
.sport-chip:hover {
    border-color: var(--primary); transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--primary-rgb),0.14);
}

/* ── Audience / Use Case Cards ────────────────── */
/* TWO cards, matching the two buyers on /pricing/ (the organization that records, and the
   person who owns the record) — it was four, which told a different story from the pricing. */
.audience-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 24px; margin-top: 64px; max-width: 900px; margin-left: auto; margin-right: auto;
}
@media (max-width: 560px) {
    .audience-grid { grid-template-columns: 1fr; }
}
.audience-card {
    padding: 36px 28px; border-radius: 16px;
    border: 1px solid var(--border); background: var(--card-bg);
    transition: all var(--transition);
    position: relative; overflow: hidden;
}
.audience-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
html.dark .audience-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.audience-card .audience-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px; font-size: 1.5rem;
    background: rgba(var(--primary-rgb),0.1); color: var(--primary);
}
.audience-card:nth-child(2) .audience-icon { background: rgba(139,92,246,0.1); color: var(--purple); }
.audience-card:nth-child(2):hover { box-shadow: 0 12px 40px rgba(139,92,246,0.12); }
.audience-card:nth-child(3) .audience-icon { background: rgba(34,197,94,0.1); color: var(--success); }
.audience-card:nth-child(3):hover { box-shadow: 0 12px 40px rgba(34,197,94,0.12); }
.audience-card:nth-child(4) .audience-icon { background: rgba(14,165,233,0.1); color: var(--info); }
.audience-card:nth-child(4):hover { box-shadow: 0 12px 40px rgba(14,165,233,0.12); }
.audience-card h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 10px; }
.audience-card p { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; }

/* ── Verb Band (light-touch brand) ────────────── */
.verb-band {
    padding: 88px 0; text-align: center;
}
.verb-inner { max-width: 760px; margin: 0 auto; }
/* .hero-free / .hero-free-tick lived here: a pill above the fold advertising the free
   tier. Both were deleted on 2026-09-04 with the free plan itself, and no markup referenced
   them any more. The check glyph they used was a plain Unicode U+2713 rather than a Material
   ligature, because fonts/icons.css ships a 35-symbol SUBSET and a missing glyph renders as
   its own NAME in words; .plan-flag below still relies on that, so the note stays. */

.verb-band h2 .accent { color: var(--primary); }
.verb-band p { margin: 16px auto 32px; max-width: 560px; }

/* ── CTA Section ──────────────────────────────── */
.cta-section { padding: 120px 0; text-align: center; }
.cta-box {
    max-width: 720px; margin: 0 auto;
    padding: 80px 48px; border-radius: 24px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--white);
    box-shadow: 0 24px 60px rgba(var(--primary-rgb),0.28);
}
.cta-box h2 { margin-bottom: 16px; color: var(--white); }
.cta-box p { margin-bottom: 40px; color: rgba(255,255,255,0.85); }

/* ── Footer ───────────────────────────────────── */
.footer {
    border-top: 1px solid var(--border);
    padding: 64px 0 40px;
    background: var(--bg-alt);
}
.footer-grid {
    display: grid; grid-template-columns: 2fr repeat(4, 1fr);
    gap: 40px;
}
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
.footer-brand .nav-logo-wrap { margin-bottom: 16px; }
.footer-brand p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; max-width: 280px; }
.footer-col h4 {
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 16px;
}
.footer-col a {
    display: block; font-size: 0.875rem; color: var(--text-secondary);
    padding: 4px 0; transition: color var(--transition);
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
    margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border);
    font-size: 0.8125rem; color: var(--text-secondary);
    display: flex; justify-content: space-between; align-items: center;
}
@media (max-width: 480px) {
    .footer-bottom { flex-direction: column; gap: 8px; }
}

/* ── Placeholder / Coming Soon ────────────────── */
.placeholder-page {
    min-height: 100vh; display: flex; align-items: center;
    justify-content: center; padding-top: 96px; padding-bottom: 32px; text-align: center;
}
.placeholder-content { max-width: 520px; }
.placeholder-content h1 { margin-bottom: 16px; }
.placeholder-content p { margin-bottom: 32px; }
.placeholder-icon {
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(var(--primary-rgb),0.1); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: var(--primary); margin: 0 auto 32px;
}

/* ── Hero Live-Demo Console ───────────────────── */
/* Sport selector tabs above the demo console */
.demo-tabs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    max-width: 1040px; margin: 48px auto 0;
}
.demo-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--card-bg);
    color: var(--text-secondary); font-family: var(--font);
    font-size: 0.8125rem; font-weight: 600; cursor: pointer;
    transition: all var(--transition);
}
.demo-tab .material-symbols-outlined { font-size: 1.05rem; }
.demo-tab:hover { color: var(--text); border-color: var(--text-secondary); transform: translateY(-1px); }
.demo-tab.active {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
.demo-tab.active .material-symbols-outlined { color: #fff; }

/* Wrapper holds the card + the floating mic; NOT clipped, so the mic's pulse rings
   can extend beyond the card's rounded, overflow-hidden edges. */
.hero-demo-wrap { position: relative; max-width: 1040px; margin: 18px auto 0; }
.demo-note {
    margin: 14px auto 0;
    font-size: 0.6875rem; line-height: 1.4;
    color: var(--text-secondary);
    text-align: center;
}
.hero-demo {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.10);
    overflow: hidden;
}
html.dark .hero-demo { box-shadow: 0 24px 60px rgba(0,0,0,0.4); }

.demo-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 20px; border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.demo-sport {
    display: inline-flex; align-items: center; gap: 9px;
    font-weight: 700; font-size: 0.9375rem; color: var(--text);
}
.demo-sport .material-symbols-outlined { font-size: 1.375rem; color: var(--primary); }
/* Labels the hero console for what it is. This was `.demo-live`, a red dot blinking on
   a 1.6s loop beside the words "LIVE DEMO" — the visual grammar of a live broadcast,
   attached to a scripted animation with no data behind it. The wording was the bigger
   problem, but a pulsing red dot makes the same claim without words, so both went. */
.demo-tag {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--card-bg);
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-secondary);
}

.demo-body {
    position: relative;
    display: grid; grid-template-columns: minmax(0,0.92fr) minmax(0,1.7fr) minmax(0,0.92fr);
    height: 360px;
}
.demo-col { padding: 16px 16px 18px; display: flex; flex-direction: column; min-width: 0; }
.demo-pbp { border-right: 1px solid var(--border); }
.demo-box { background: var(--bg); }
.demo-said { border-left: 1px solid var(--border); padding-bottom: 86px; }
.demo-col-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 14px;
}
.demo-col-title .material-symbols-outlined { font-size: 1.0625rem; color: var(--primary); }

.demo-feed {
    flex: 1; display: flex; flex-direction: column; gap: 8px;
    justify-content: flex-start; overflow: hidden;
}
.demo-entry {
    font-size: 0.8125rem;
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.demo-entry.in { opacity: 1; transform: translateY(0); }

/* Left feed — play-by-play row, mirrors the app's .evt tracker rows */
.demo-entry.pbp {
    display: flex; align-items: center; gap: 0.5rem; color: var(--text);
    padding: 6px 4px;
}
/* Player name has priority (never truncates); the parens detail trims with an ellipsis. */
.demo-entry.pbp .evt-who { flex-shrink: 0; white-space: nowrap; font-weight: 600; }
.demo-entry.pbp .evt-right { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; min-width: 0; }
.demo-entry.pbp .evt-play {
    display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.5rem;
    border-radius: 999px; background: rgba(var(--primary-rgb),0.08);
    color: var(--text); min-width: 0; overflow: hidden;
}
.demo-entry.pbp .evt-play .lbl { flex-shrink: 0; white-space: nowrap; }
.demo-entry.pbp .evt-play .det {
    color: var(--text-secondary); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo-entry.pbp .evt-src { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--primary); }
.demo-entry.pbp .evt-src .material-symbols-outlined { font-size: 1.05rem; }

/* Right feed — voice "Heard" row, mirrors the app's voice-input log */
.demo-entry.said {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 9px 11px; border-radius: 10px;
    background: var(--bg); border: 1px solid var(--border);
}
.vbadge {
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 8px; border-radius: 999px;
}
.vbadge.ok { background: rgba(34,197,94,0.16); color: var(--success); }
.vbadge.no { background: rgba(239,68,68,0.16); color: var(--danger); }
.demo-entry.said .vtext {
    color: var(--text); font-weight: 500; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.demo-entry.said .vreason {
    font-size: 0.6875rem; color: var(--text-secondary); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
/* Failed (non-stat) input — subtle red accent, like the app's failure rows. */
.demo-entry.said.fail { border-color: rgba(239,68,68,0.40); background: rgba(239,68,68,0.06); }

/* Center column — live box score, mirrors the app's summary (.bx-table) */
.demo-box-scroll { flex: 1; overflow: hidden; }
.bx-table { width: 100%; border-collapse: collapse; font-size: 0.6875rem; }
.bx-table th, .bx-table td {
    padding: 4px 5px; text-align: center; white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
.bx-table thead th {
    font-weight: 700; color: var(--text-secondary); text-transform: uppercase;
    letter-spacing: 0.02em; background: var(--bg);
}
.bx-table .bx-l { text-align: left; font-weight: 600; color: var(--text); padding-left: 2px; }
.bx-table thead .bx-l { color: var(--text-secondary); }
.bx-table .bx-corner { font-weight: 700; }
.bx-table thead th { font-size: 0.6875rem; vertical-align: bottom; }
.bx-table td.bx-num { font-variant-numeric: tabular-nums; }
/* Player header: jersey number stacked above the name. */
.bx-pnum { display: block; font-size: 0.625rem; font-weight: 700; color: var(--primary); line-height: 1.1; }
.bx-pname { display: block; }
.bx-table thead .bx-pri, .bx-table tbody td.bx-pri { color: var(--primary); font-weight: 700; }
.bx-table tbody td { color: var(--text-secondary); }
.bx-table tbody tr:last-child td { border-bottom: none; }
/* Derived / computed rows — distinct "calculated" color. */
.bx-table tr.bx-derived { background: rgba(14,165,233,0.06); }
.bx-table tr.bx-derived td { color: var(--info); }
.bx-table tr.bx-derived td.bx-l { color: var(--info); font-weight: 600; }
.bx-table tr.bx-derived:first-of-type td { border-top: 1px solid var(--border); }
/* Flash a changed cell + its row when a stat lands. */
.bx-table td.bx-bump { animation: bxBump 1s ease-out; }
@keyframes bxBump {
    0%   { background: rgba(var(--primary-rgb),0.5); color: var(--primary); font-weight: 700; }
    100% { background: transparent; }
}
/* Soft highlight across the whole player column (header + cells) when they act. */
.bx-table .bx-colbump { animation: bxCol 1.1s ease-out; }
@keyframes bxCol {
    0%   { background: rgba(var(--primary-rgb),0.16); }
    100% { background: transparent; }
}

/* Floating voice mic — lower-right corner, mirrors the app tracker FAB.
   Fixed to the mic's size so the transcript bubble can't shift its position. */
.demo-mic-fab {
    position: absolute; right: 16px; bottom: 16px; z-index: 5;
    width: 60px; height: 60px;
}
.demo-mic-wrap {
    position: relative; width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
}
/* Surround rings — pulse ONLY while the mic is actuated (orange/listening). */
.demo-ring {
    position: absolute; top: 50%; left: 50%;
    width: 60px; height: 60px; margin: -30px 0 0 -30px;
    border-radius: 50%; border: 2px solid var(--primary);
    opacity: 0;
}
.demo-mic-fab.speaking .demo-ring   { animation: demoPulse 1.2s ease-out infinite; }
.demo-mic-fab.speaking .demo-ring.d2 { animation-delay: 0.6s; }
@keyframes demoPulse {
    0%   { transform: scale(0.9);  opacity: 0.6; }
    70%  { opacity: 0.12; }
    100% { transform: scale(2.4);  opacity: 0; }
}
/* Idle mic — plain white, no pulse. */
.demo-mic {
    position: relative; z-index: 2;
    width: 60px; height: 60px; border-radius: 50%; cursor: default;
    display: flex; align-items: center; justify-content: center;
    background: var(--card-bg); color: var(--text-secondary); font-size: 1.6rem;
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease,
                border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Actuated: fill orange + lift; the rings ripple only in this state. */
.demo-mic-fab.speaking .demo-mic {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--white); border-color: transparent;
    box-shadow: 0 14px 34px rgba(var(--primary-rgb),0.5);
    transform: scale(1.08);
}
/* Transcript bubble floats above the mic while listening. Absolutely positioned and
   right-anchored to the mic so its width never moves the mic. */
.demo-transcript {
    position: absolute; right: 0; bottom: calc(100% + 12px);
    width: max-content; max-width: 230px; text-align: center;
    font-size: 0.75rem; color: var(--text); line-height: 1.3;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 6px 11px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    opacity: 0; transform: translateY(6px); pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.demo-mic-fab.speaking .demo-transcript { opacity: 1; transform: translateY(0); }
.demo-transcript .tr-quote { color: var(--text); font-weight: 600; }
.demo-transcript .tr-dots { color: var(--primary); font-weight: 600; }

@media (max-width: 760px) {
    .hero-demo-wrap { max-width: 480px; }
    /* Phones: Voice Inputs on top, Play-by-Play right under it — each a single compact
       line (latest entry only) — then the box-score "stats form" full-width below. */
    .demo-body {
        grid-template-columns: 1fr;
        grid-template-areas: "said" "pbp" "box";
        height: auto;
    }
    /* Sport selector: icons only, tight enough to stay on one row (no wrap). */
    .demo-tabs { gap: 4px; flex-wrap: nowrap; }
    .demo-tab { padding: 6px 7px; gap: 0; }
    .demo-tab .material-symbols-outlined { font-size: 1.15rem; }
    .demo-tab-label { display: none; }

    .demo-col { padding: 8px 14px; }
    .demo-col-title { margin-bottom: 6px; }
    .demo-said { grid-area: said; border-left: none; }
    .demo-pbp  { grid-area: pbp; border-right: none; border-top: 1px solid var(--border); }
    .demo-box  { grid-area: box; border-top: 1px solid var(--border); padding-bottom: 84px; }
    /* No stretch/extra space — the feeds size to their single entry. */
    .demo-said .demo-feed, .demo-pbp .demo-feed { flex: 0 0 auto; min-height: 0; gap: 0; }
    .demo-feed { justify-content: flex-start; min-height: 0; }
    /* Only the most recent entry in each feed. */
    .demo-pbp .demo-entry:not(:first-child),
    .demo-said .demo-entry:not(:first-child) { display: none; }
    /* Voice Input as one compact line: badge + transcript, no reason line. */
    .demo-entry.said { flex-direction: row; align-items: center; gap: 8px; padding: 6px 9px; }
    .demo-entry.said .vbadge { flex-shrink: 0; }
    .demo-entry.said .vtext { flex: 1; min-width: 0; }
    .demo-entry.said .vreason { display: none; }
}

/* ── Animations ───────────────────────────────── */
.fade-in {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }
.stagger > * { transition-delay: calc(var(--i, 0) * 0.1s); }

@media (prefers-reduced-motion: reduce) {
    /* This block used to suppress ONE selector (.demo-entry), which left the real problem
       in place: .fade-in parks every section at opacity 0 with a 24px offset and waits for
       an IntersectionObserver, so a visitor who asked for no motion still got the whole
       site sliding at them, section by section, on every page.

       The sweep below is the standard blanket: kill durations everywhere rather than
       chase each transform, because page-local <style> blocks (/clubs/, /different/)
       declare their own hover transitions that a targeted rule here would not reach.
       !important is what crosses that boundary, since a page-local block otherwise wins on
       source order. Durations go to 0.01ms rather than `none` so that transitionend and
       animationend listeners still fire and nothing waits forever on an event. */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }

    /* .fade-in needs more than a dead transition: with the animation gone it would simply
       stay at opacity 0 until the observer fires, and never appear at all if it does not
       (no JS, a failed script, print). Show the content outright. */
    .fade-in { opacity: 1 !important; transform: none !important; }

    /* The mic pulse keeps animating, by the decision this block already recorded: it
       reports listening state rather than decorating it, and a frozen indicator reads as
       stopped. It is small, in place, and does not move the page. (The "live" dot that
       used to be exempted here went with the LIVE DEMO badge.) */
    .demo-mic-fab.speaking .demo-ring { animation: demoPulse 1.2s ease-out infinite !important; }
    .demo-mic-fab.speaking .demo-ring.d2 { animation-delay: 0.6s !important; }
}

/* ── Stats Row ────────────────────────────────── */
.stats-row {
    display: flex; justify-content: center; gap: 64px;
    margin-top: 64px; flex-wrap: wrap;
}
.stat { text-align: center; }
.stat-value {
    font-size: clamp(2rem, 4vw, 3rem); font-weight: 700;
    color: var(--primary); line-height: 1.1; margin-bottom: 4px;
}
.stat-label { font-size: 0.875rem; color: var(--text-secondary); }

/* ── Sports Detail Page ───────────────────────── */
.subhero {
    padding-top: 140px; padding-bottom: 48px; text-align: center;
}
.subhero .container { max-width: 760px; }
.sport-stats {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.sport-stats span {
    font-size: 0.8125rem; font-weight: 500; color: var(--text);
    padding: 5px 12px; border-radius: 8px;
    background: var(--bg); border: 1px solid var(--border);
}

/* ── Per-sport detail pages ───────────────────── */
.sport-hero { padding-top: 128px; padding-bottom: 32px; text-align: center; }
.sport-hero .container { max-width: 760px; }
.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 22px; transition: color var(--transition);
}
.back-link:hover { color: var(--primary); }
.back-link .material-symbols-outlined { font-size: 1.05rem; }
.sport-hero-badge {
    width: 88px; height: 88px; border-radius: 24px; margin: 0 auto 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.75rem; color: var(--primary);
    background: rgba(var(--primary-rgb),0.1); border: 1px solid var(--border);
}
.voice-examples { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 30px; }
.voice-ex {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--card-bg);
    font-size: 0.875rem; font-weight: 500; color: var(--text);
}
.voice-ex .material-symbols-outlined { font-size: 1.05rem; color: var(--primary); }

.stat-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px; }
@media (max-width: 760px) { .stat-groups { grid-template-columns: 1fr; } }
.stat-group {
    padding: 28px; border-radius: 16px;
    border: 1px solid var(--border); background: var(--card-bg);
}
.stat-group h3 { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 700; margin-bottom: 16px; }
.stat-group h3 .material-symbols-outlined { font-size: 1.25rem; color: var(--primary); }
.derived-note { margin-top: 36px; text-align: center; font-size: 0.8125rem; color: var(--text-secondary); }

/* Compact sport tiles for the /sports/ hub — matches app.drabble.it reports "By Sport". */
.sport-tiles {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 14px; margin-top: 48px;
}
@media (max-width: 1024px) { .sport-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .sport-tiles { grid-template-columns: repeat(2, 1fr); } }
.sport-tile {
    display: block; text-align: center;
    border: 1.5px solid var(--border); border-radius: 12px; padding: 18px 16px;
    background: var(--card-bg); transition: all var(--transition);
}
.sport-tile:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--primary-rgb),0.12); }
.sport-tile .material-symbols-outlined { font-size: 30px; color: var(--primary); }
.sport-tile .sport-tile-name { font-weight: 700; font-size: 0.9375rem; margin-top: 8px; color: var(--text); }
/* The stats each sport works out for you — read from that sport's own page at build time,
   so a tile can never claim something the sport page does not. */
.sport-tile .sport-tile-stats {
    margin-top: 6px; font-size: 0.75rem; line-height: 1.5;
    color: var(--text-secondary); text-wrap: balance;
}

/* ── "What every sport gets" ──────────────────── */
.uni-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 20px; margin-top: 44px;
}
@media (max-width: 900px) { .uni-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .uni-grid { grid-template-columns: 1fr; } }
.uni-card {
    border: 1px solid var(--border); border-radius: 14px;
    padding: 22px 20px; background: var(--card-bg);
}
.uni-card .material-symbols-outlined { font-size: 26px; color: var(--primary); }
.uni-card h3 { font-size: 0.9375rem; font-weight: 700; margin: 10px 0 6px; color: var(--text); }
.uni-card p { font-size: 0.8125rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }

/* ── Pricing cards (option B: fetched from /api/plans) ───── */
.pricing-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px; max-width: 760px; margin: 48px auto 0;
}
.price-card {
    position: relative; display: flex; flex-direction: column;
    padding: 36px 30px; border-radius: 18px;
    border: 1px solid var(--border); background: var(--card-bg);
    transition: all var(--transition);
}
.price-card.featured { border-color: var(--primary); box-shadow: 0 16px 48px rgba(var(--primary-rgb),0.14); }
.price-badge {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    background: var(--primary); color: #fff;
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.price-card h3 { font-size: 1.25rem; font-weight: 700; }
.price-card .price-blurb { font-size: 0.9375rem; color: var(--text-secondary); margin-top: 6px; min-height: 2.7em; }
.price-amount { display: flex; align-items: baseline; gap: 6px; margin: 20px 0 4px; }
.price-amount .amt { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.price-amount .per { font-size: 0.875rem; color: var(--text-secondary); }
.price-features { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 28px; }
.price-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9375rem; color: var(--text); }
.price-features li .material-symbols-outlined { font-size: 1.125rem; color: var(--success); flex-shrink: 0; margin-top: 1px; }
.price-card .btn { margin-top: auto; justify-content: center; }
.pricing-loading { grid-column: 1 / -1; text-align: center; color: var(--text-secondary); padding: 40px 0; }

/* Route link on a homepage card — the card now hands off to a dedicated page rather than
   being the whole story. */
.feature-card .card-link{display:inline-block;margin-top:14px;font-size:.85rem;font-weight:600;color:var(--primary)}
.feature-card .card-link:hover{text-decoration:underline}

/* ── The dividing line (homepage) ─────────────────
   Two cards stating what every plan includes and what Pro adds, side by side. The homepage used to
   leave the money question to /pricing/, so a visitor read six capability cards without
   learning which of them cost anything. Deliberately NOT .audience-card: those two cards
   are two BUYERS, these two are one buyer's two tiers, and giving them the same treatment
   made the page look like it had four audiences. */
.divide-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 20px; margin-top: 48px; max-width: 860px; margin-left: auto; margin-right: auto;
}
@media (max-width: 640px) { .divide-grid { grid-template-columns: 1fr; } }
.divide-card {
    padding: 28px 26px; border-radius: 16px;
    border: 1px solid var(--border); background: var(--card-bg);
}
.divide-card h3 { font-size: 1.15rem; margin: 14px 0 8px; }
.divide-card p { color: var(--text-secondary); margin: 0 0 16px; }
.divide-card ul { list-style: none; padding: 0; margin: 0; }
.divide-card li {
    position: relative; padding-left: 24px; margin-bottom: 9px;
    font-size: 0.95rem; line-height: 1.5;
}
/* U+2713 in the text font. The Material Symbols subset is not loaded for list bullets,
   and a missing glyph in that font renders as its own NAME in words. */
.divide-card li::before {
    content: '\2713'; position: absolute; left: 0; top: 0;
    font-weight: 700; color: var(--success);
}
.divide-tag {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.divide-card.is-included .divide-tag { background: rgba(34,197,94,0.12); color: #15803d; }
.divide-card.is-pro { border-color: rgba(var(--primary-rgb),0.45); }
.divide-card.is-pro .divide-tag { background: rgba(var(--primary-rgb),0.12); color: var(--primary-dark); }
.divide-card.is-pro li::before { color: var(--primary); }
html.dark .divide-card.is-included .divide-tag { color: #4ade80; }
html.dark .divide-card.is-pro .divide-tag { color: var(--primary-light); }