/* TipKing landing — brand tokens mirror the app (src/app/globals.css):
   primary #005391, secondary #1B9ED3, accent #FEC310,
   electric #0B83F6 from the logo, navy-tinted neutrals.
   Dark only — the landing commits to one art direction (night football).
   Discipline: flat canvas with a single photographic hero backdrop,
   depth via surface steps + 1px hairlines, no glows or blur on backgrounds/surfaces,
   gold reserved for the primary button and scoreboard digits. */

:root {
    --primary: #005391;
    --secondary: #1b9ed3;
    --electric: #0b83f6;
    --gold: #fec310;
    --radius: 14px;
    --font-heading: "Sora", sans-serif;
    --font-body: "Manrope", sans-serif;
    --font-mono: "IBM Plex Mono", monospace;

    --bg: #101c2a;
    --surface: #162537;
    --panel: #233449;
    --line: rgba(120, 165, 210, 0.16);
    --ink: #eef4fb;
    --ink-dim: #9db3cc;
    --digit: var(--gold);
    --btn-primary-bg: var(--gold);
    --btn-primary-bg-hover: #ffd043;
    --btn-primary-ink: #10203a;
    --ghost-bg-hover: rgba(18, 34, 57, 0.75);
    --phone-frame-a: #1a3050;
    --phone-frame-b: #101c2a;
    --phone-line: rgba(120, 175, 235, 0.22);
    --phone-shadow: rgba(0, 20, 45, 0.55);

    --panel-2: #1a2c41;
    --line-strong: rgba(120, 165, 210, 0.30);
    --ink-faint: #6f89a6;
    --good: #3fd08a;
    --note: #7b3ff2;
    --chance: #c1f22e;
    --chance-ink: #0f1a3a;

    /* rendered .nav height per breakpoint — keeps hero padding and
       anchor scroll offsets in sync with the fixed header below */
    --nav-h: 92px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

a {
    color: inherit;
    text-decoration: none;
}

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

/* ---------- hero photo backdrop ---------- */
/* Single photographic atmosphere layer (night stadium), fading into the flat
   canvas below the scoreboard. Overlay keeps nav/headline contrast. */

.hero-photo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: min(100vh, 940px);
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(180deg,
            rgba(16, 28, 42, 0.5) 0%,
            rgba(16, 28, 42, 0.35) 45%,
            rgba(16, 28, 42, 0.72) 78%,
            #101c2a 100%),
        url("assets/hero-stadium.webp");
    background-size: cover;
    background-position: center bottom;
}

/* ---------- nav ---------- */

/* full-bleed fixed bar — the background/blur lives here so it spans the
   whole viewport; .nav below just centers the content inside it */
.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(16, 28, 42, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.nav {
    max-width: 1120px;
    margin: 0 auto;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

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

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

.brand-name em {
    font-style: normal;
    color: var(--electric);
}

.brand-name.small {
    font-size: 1.05rem;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 13px 24px;
    border-radius: 999px;
    white-space: nowrap;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-ink);
}

.btn-primary:hover {
    background: var(--btn-primary-bg-hover);
    transform: translateY(-1px);
}

.btn-ghost {
    border: 1px solid var(--line);
    color: var(--ink);
    background: transparent;
}

.btn-ghost:hover {
    border-color: rgba(27, 158, 211, 0.55);
    background: var(--ghost-bg-hover);
}

.btn-big {
    font-size: 1.1rem;
    padding: 17px 38px;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.icon-btn:hover {
    border-color: rgba(27, 158, 211, 0.55);
    background: var(--ghost-bg-hover);
}

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

.hero {
    max-width: 880px;
    margin: 0 auto;
    padding: calc(var(--nav-h) + 56px) 24px 48px;
    text-align: center;
}

.hero h1 {
    font-size: clamp(2.5rem, 6.5vw, 4.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink-dim);
    margin: 20px 0 20px;
}

.hl {
    color: var(--ink);
}

.lede {
    max-width: 560px;
    margin: 0 auto;
    color: var(--ink-dim);
    font-size: 1.25rem;
}

.cta-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 34px;
}

/* ---------- scoreboard countdown ---------- */
/* Echoes the board in the TipKing logo (white panel, 2:1, dotted colon). */

.countdown-block {
    max-width: 1120px;
    margin: 0 auto;
    padding: 48px 24px 8px;
    text-align: center;
}

/* The single brightest surface on the page (Factory: one bright figure on dark ground). */
.board {
    max-width: 780px;
    margin: 0 auto;
    background: var(--panel);
    border: 1px solid rgba(120, 165, 210, 0.28);
    border-radius: var(--radius);
    overflow: hidden;
    text-align: left;
}

.board-title {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-dim);
    padding: 16px 28px;
    border-bottom: 1px solid var(--line);
}

.fixture {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
}

.fixture + .fixture {
    border-top: 1px solid var(--line);
}

.fx-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 214px;
}

.fx-badge {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: #fff;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.badge-pl {
    background: #38003c;
}

.badge-cl {
    background: #0e2a6d;
}

.fx-names {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fx-league {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
}

.fx-date {
    font-family: var(--font-body);
    color: var(--ink-dim);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.digits {
    display: flex;
    align-items: center;
    gap: 14px;
}

.digit b {
    display: block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 2.9rem);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    line-height: 1;
    min-width: 2ch;
    text-align: center;
}

/* LED-style refresh flash, re-triggered by countdown.js when the value changes */
.digit b.tick {
    animation: tick 0.4s ease-out;
}

@keyframes tick {
    from { opacity: 0.45; }
    to { opacity: 1; }
}

.digit i {
    display: block;
    margin-top: 6px;
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink-dim);
}

/* dotted colon, like the scoreboard in the logo */
.sep {
    width: 5px;
    height: 30px;
    align-self: flex-start;
    margin-top: 10px;
    background:
        radial-gradient(circle 2.5px at 50% 5px, var(--electric) 99%, transparent),
        radial-gradient(circle 2.5px at 50% 25px, var(--electric) 99%, transparent);
}

.fixture.live .digit b {
    color: var(--secondary);
}

.fixture.live .fx-date {
    color: var(--secondary);
}

.fixture.live .fx-date::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--secondary);
    vertical-align: 1px;
    animation: pulse 1.6s ease-out infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.35; }
    100% { opacity: 1; }
}

.count-note {
    margin-top: 20px;
    color: var(--ink-dim);
    font-size: 1rem;
}

/* ---------- how it works ---------- */

.how {
    max-width: 1120px;
    margin: 0 auto;
    padding: 112px 24px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: center;
}

.how h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
    margin-bottom: 34px;
}

.steps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-bottom: 32px;
}

.step {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.step-num {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 10px;
}

.step h3 {
    font-size: 1.25rem;
    margin-bottom: 4px;
}

.step p {
    color: var(--ink-dim);
    font-size: 1rem;
}

/* ---------- phone mockups ---------- */

.phones {
    justify-self: center;
    display: flex;
    align-items: center;
}

.phone {
    width: min(280px, 72vw);
    border-radius: 40px;
    padding: 12px;
    background: linear-gradient(160deg, var(--phone-frame-a), var(--phone-frame-b));
    border: 1px solid var(--phone-line);
    box-shadow: 0 24px 64px -20px var(--phone-shadow);
    z-index: 1;
}

.phone-back {
    width: min(240px, 52vw);
    margin-right: -64px;
    z-index: 0;
}

.screen-img {
    width: 100%;
    height: auto;
    border-radius: 30px;
    background: #101c2a;
}

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

.faq {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 24px 96px;
}

.faq h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
    text-align: center;
    margin-bottom: 26px;
}

.faq-list {
    display: flex;
    flex-direction: column;
}

.faq-item {
    padding: 18px 0;
}

.faq-item + .faq-item {
    border-top: 1px solid var(--line);
}

.faq-item dt {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 5px;
}

.faq-item dd {
    color: var(--ink-dim);
    font-size: 1rem;
}

/* ---------- final cta ---------- */

.final-cta {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px 128px;
    text-align: center;
}

.final-cta h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
}

.final-cta p {
    color: var(--ink-dim);
    margin: 12px 0 30px;
}

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

.foot {
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.foot-grid {
    max-width: 1120px;
    margin: 0 auto;
    padding: 48px 24px 36px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 36px;
}

.foot-brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.foot-tagline {
    color: var(--ink-dim);
    font-size: 0.92rem;
    max-width: 240px;
}

.foot-col {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.foot-col h3 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 5px;
}

.foot-col a {
    color: var(--ink);
    font-size: 0.95rem;
    width: fit-content;
}

.foot-col a:hover {
    color: var(--secondary);
}

.foot-bottom {
    border-top: 1px solid var(--line);
    padding: 20px 24px;
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--ink-dim);
    font-size: 0.85rem;
}

.social {
    display: inline-flex;
    color: var(--ink-dim);
    transition: color 0.18s ease;
}

.social:hover {
    color: var(--secondary);
}

/* ---------- legal pages ---------- */

.legal {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}

.legal h1 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    margin-bottom: 8px;
}

.legal .updated {
    color: var(--ink-dim);
    font-size: 0.9rem;
    margin-bottom: 32px;
}

.legal h2 {
    font-size: 1.2rem;
    margin: 30px 0 10px;
}

.legal p, .legal li {
    color: var(--ink-dim);
    font-size: 1rem;
}

.legal ul {
    padding-left: 22px;
    margin: 8px 0;
}

.legal a {
    color: var(--secondary);
}

/* ---------- reveal animations ---------- */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.d1 { animation-delay: 0.12s; }
.d2 { animation-delay: 0.24s; }
.d3 { animation-delay: 0.38s; }

@keyframes rise {
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .fixture.live .fx-date::before {
        animation: none;
    }
    .digit b.tick {
        animation: none;
    }
}

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

@media (max-width: 860px) {
    .how {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 72px 24px;
    }
    .foot-grid {
        grid-template-columns: 1fr 1fr;
    }
    .hero {
        padding-top: calc(var(--nav-h) + 32px);
    }
}

@media (max-width: 640px) {
    :root {
        --nav-h: 78px;
    }
    .nav {
        padding: 16px 20px;
    }
    .nav .btn-ghost {
        padding: 10px 16px;
        font-size: 0.85rem;
    }
    .hero {
        padding: calc(var(--nav-h) + 20px) 20px 40px;
    }
    .phone {
        width: min(240px, 62vw);
    }
    .phone-back {
        width: min(190px, 42vw);
        margin-right: -48px;
    }
    .countdown-block {
        padding: 32px 20px 8px;
    }
    .board-title {
        padding: 14px 20px;
    }
    .fixture {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 20px;
    }
    .fx-meta {
        min-width: 0;
    }
    .digits {
        gap: 8px;
    }
    .digit b {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
    }
    .sep {
        height: 22px;
        margin-top: 6px;
    }
    .foot-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* ==================================================================
   Landing v2 — expanded sections
   ================================================================== */

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

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--secondary);
}

.eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--chance);
}

/* hero keeps the chip treatment — it carries the launch announcement.
   align-items: flex-start (not center) because the badge text can wrap to
   two lines on narrow screens — centering against the whole block would
   strand the dot between the lines instead of next to the first one. */
.hero .eyebrow {
    align-items: flex-start;
    margin-bottom: 2px;
    color: var(--ink-dim);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 7px 15px;
    background: rgba(21, 36, 54, 0.6);
}

.hero .eyebrow .dot {
    flex: none;
    margin-top: 5px;
    box-shadow: 0 0 0 4px rgba(193, 242, 46, 0.18);
}

/* ---------- board title becomes a row ---------- */

.board-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

@media (max-width: 640px) {
    .board-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

.fixture.hot {
    background: linear-gradient(90deg, rgba(193, 242, 46, 0.08), transparent 60%);
}

.fixture.hot .digit b {
    color: var(--digit);
}

.badge-chance {
    background: var(--chance);
    color: var(--chance-ink);
}

.badge-wc {
    background: #1a6b3a;
}

/* ---------- trust strip ---------- */

.trust {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(21, 36, 54, 0.4);
    margin-top: 40px;
}

.trust-row {
    max-width: 1120px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ink-dim);
    font-size: 0.95rem;
    font-weight: 600;
}

.trust-item .tick {
    color: var(--good);
    font-weight: 800;
}

/* ---------- generic section ---------- */

.sec {
    max-width: 1120px;
    margin: 0 auto;
    padding: 96px 24px;
    scroll-margin-top: var(--nav-h);
}

.sec-alt {
    max-width: none;
    background: var(--panel-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.sec-alt > * {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

.sec-head {
    max-width: 640px;
    margin: 0 auto 56px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.sec-head h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.5rem);
}

.sec-head p {
    color: var(--ink-dim);
    font-size: 1.1rem;
}

/* ---------- alternating how-to rows ---------- */

.rows {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    padding: 24px 0;
}

.row + .row {
    border-top: 1px solid var(--line);
}

.row:nth-child(even) .row-media {
    order: -1;
}

.step-k {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 10px;
}

.row-copy h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.row-copy p {
    color: var(--ink-dim);
    font-size: 1.05rem;
}

.pts {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.pt {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 6px 12px;
    color: var(--ink);
    background: var(--panel-2);
}

/* ---------- screenshot phone ---------- */

.shot {
    width: min(272px, 74vw);
    margin: 0 auto;
    border-radius: 20px;
    padding: 5px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    box-shadow: 0 18px 44px -28px var(--phone-shadow);
}

.shot img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    background: var(--bg);
}

.phone-lead {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 52px;
}

.shot-cap {
    max-width: 340px;
    margin: 22px auto 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--ink-dim);
}

/* ---------- illustrative mock (bonus row) ---------- */

.mock {
    width: min(300px, 80vw);
    margin: 0 auto;
    border-radius: 20px;
    background: var(--panel);
    border: 1px solid var(--line-strong);
    overflow: hidden;
}

.mock-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.9rem;
}

.mock-pill {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.62rem;
    color: var(--good);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 9px;
}

.mock-body {
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mock-q {
    font-weight: 700;
    font-size: 0.95rem;
}

.mock-choices {
    display: flex;
    gap: 10px;
}

.mock-choice {
    flex: 1;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 8px 0;
    color: var(--ink);
    background: var(--panel-2);
}

.mock-choice.yes {
    border-color: var(--good);
    color: var(--good);
}

.mock-note {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-dim);
}

.mock-note b {
    color: var(--gold);
}

/* ---------- leagues showcase ---------- */

.lg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.lg-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 180px;
}

.lg-card.feature {
    grid-column: span 3;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    background: linear-gradient(120deg, rgba(193, 242, 46, 0.12), rgba(21, 36, 54, 0.6));
    border-color: rgba(193, 242, 46, 0.45);
}

.lg-logo {
    width: 132px;
    height: auto;
    border-radius: 10px;
    flex: none;
}

.lg-feature-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lg-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lg-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
}

.lg-tag {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--chance-ink);
    background: var(--chance);
    border-radius: 999px;
    padding: 4px 10px;
    font-weight: 600;
}

.lg-tag.open {
    color: var(--good);
    background: rgba(63, 208, 138, 0.1);
    border: 1px solid var(--good);
}

.lg-tag.soon {
    color: var(--secondary);
    background: rgba(27, 158, 211, 0.1);
    border: 1px solid rgba(27, 158, 211, 0.5);
}

.lg-tag.done {
    color: var(--ink-faint);
    background: transparent;
    border: 1px solid var(--line-strong);
}

.lg-desc {
    color: var(--ink-dim);
    font-size: 0.92rem;
    flex: 1;
}

.lg-stats {
    display: flex;
    gap: 20px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-dim);
}

.lg-stats b {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--ink);
    font-weight: 800;
}

/* ---------- create league ---------- */

.create {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.create-copy .eyebrow {
    margin-bottom: 18px;
}

.create-copy h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.3rem);
    margin-bottom: 14px;
}

.create-note {
    color: var(--ink-dim);
    font-size: 1rem;
    margin-bottom: 28px;
}

.cstep {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.cnum {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 11px;
}

.cstep h3 {
    font-size: 1.15rem;
    margin-bottom: 3px;
}

.cstep p {
    color: var(--ink-dim);
    font-size: 0.98rem;
}

/* ---------- custom/white-label band ---------- */

.create-custom {
    margin-top: 40px;
    background: linear-gradient(120deg, rgba(254, 195, 16, 0.1), rgba(21, 36, 54, 0.6));
    border: 1px solid rgba(254, 195, 16, 0.4);
    border-radius: 18px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.create-custom h3 {
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}

.create-custom > p {
    color: var(--ink-dim);
    font-size: 0.98rem;
    max-width: 640px;
}

.custom-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 24px;
    margin: 4px 0 8px;
}

.custom-list li {
    position: relative;
    padding-left: 20px;
    color: var(--ink);
    font-size: 0.94rem;
}

.custom-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--gold);
}

.create-custom-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.create-custom-note {
    color: var(--ink-dim);
    font-size: 0.88rem;
}

/* ---------- invite card ---------- */

.invite {
    justify-self: center;
    width: min(360px, 90vw);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 24px 60px -30px var(--phone-shadow);
}

.invite-top {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
}

.invite-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 13px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--secondary);
}

.invite-link .invite-copy {
    color: var(--ink-dim);
}

.invite-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.invite-rank {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--panel);
    color: var(--ink-dim);
}

.invite-rank.g {
    background: var(--gold);
    color: var(--btn-primary-ink);
}

.invite-name {
    flex: 1;
    font-weight: 700;
    font-size: 0.9rem;
}

.invite-pts {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

/* ---------- feature grid ---------- */

.features-split {
    display: grid;
    grid-template-columns: minmax(250px, 320px) 1fr;
    gap: 56px;
    align-items: center;
}

.features-media {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fg {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.fcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fcard h3 {
    font-size: 1.12rem;
}

.fcard p {
    color: var(--ink-dim);
    font-size: 0.92rem;
}

/* ---------- faq (grouped) ---------- */

.faq {
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.faq-group h3 {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 8px;
}

.faq-item {
    padding: 0;
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding: 18px 34px 18px 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 24px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ink-dim);
    border-bottom: 2px solid var(--ink-dim);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
    transform: rotate(225deg);
}

.faq-item summary:hover {
    color: var(--secondary);
}

.faq-item summary:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
    border-radius: 4px;
}

.faq-item > p {
    color: var(--ink-dim);
    font-size: 1rem;
    padding-bottom: 18px;
    margin-top: -4px;
}

.final-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 64px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .faq-item summary::after {
        transition: none;
    }
}

/* ---------- hero micro-trust line ---------- */

.hero-micro {
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-faint);
}

/* ---------- pricing ---------- */
/* Size is the only axis between the paid tiers, so the cards carry the player
   cap as their own line right under the price — that is what is being sold. */

/* Subgrid so the price, the fine print, the player-cap chip and the button sit
   on the same line across all four cards — tiers differ in how much text each
   row holds, and a plain flex column would stagger them. */
.price-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto auto 1fr auto;
    gap: 18px;
    align-items: stretch;
}

.price-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px 24px;
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 10px;
}

.price-card.featured {
    background: linear-gradient(120deg, rgba(254, 195, 16, 0.1), rgba(21, 36, 54, 0.6));
    border-color: rgba(254, 195, 16, 0.4);
}

.price-tag {
    position: absolute;
    top: -11px;
    left: 24px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--btn-primary-ink);
    background: var(--gold);
    border-radius: 999px;
    padding: 4px 10px;
}

.price-name {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--secondary);
}

.price-amount {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.price-unit {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink-dim);
    letter-spacing: 0;
}

.price-alt {
    font-size: 0.85rem;
    color: var(--ink-faint);
    margin-top: -6px;
}

.price-cap {
    justify-self: start;
    align-self: start;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 6px 12px;
    background: var(--panel-2);
}

.price-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: start;
    margin: 6px 0 4px;
}

.price-list li {
    position: relative;
    padding-left: 20px;
    color: var(--ink-dim);
    font-size: 0.94rem;
}

.price-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--gold);
}

.price-card .btn {
    justify-content: center;
}

/* Business is not self-service — it sits in the grid so the reader sees the
   whole ladder, but drops the gold (reserved for what you can buy on the spot)
   and carries the blue brand accent instead. */
.price-card.business {
    background: var(--panel-2);
}

.price-card.business .price-list li::before {
    background: var(--secondary);
}

.price-card.business .price-amount {
    font-size: 1.6rem;
}

.price-note {
    max-width: 720px;
    margin: 28px auto 0;
    text-align: center;
    color: var(--ink-dim);
    font-size: 0.94rem;
}

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

@media (max-width: 1080px) {
    .price-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 860px) {
    .row,
    .create,
    .features-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .features-media {
        margin-bottom: 12px;
    }
    .row:nth-child(even) .row-media {
        order: 0;
    }
    .lg-grid,
    .fg,
    .price-grid {
        grid-template-columns: 1fr;
    }
    .lg-card.feature {
        grid-column: span 1;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .custom-list {
        grid-template-columns: 1fr;
    }
    .sec {
        padding: 64px 24px;
    }
}