/*
 * Landing page. The hero borrows the live view's stadium at night; below it the page is
 * plain white with red text accents, so the demo auction stays the one loud thing.
 */
:root {
    --red: #AC2019;
    --red-deep: #5A110D;
    --night: #1a0605;
    --gold: #FFC52E;
    --gold-deep: #E89B0C;
    --pitch: #2f6b22;
    --ink: #221a19;
    --muted: #6d5f5d;
    --line: #eadedc;
    --paper: #ffffff;
    --tint: #fbf3f2;
    --display: 'Fredoka', system-ui, sans-serif;
    --text: 'Lexend', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.lp { margin: 0; font-family: var(--text); font-weight: 300; color: var(--ink); background: var(--paper); line-height: 1.6; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.12rem; }

.lp-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* ── Buttons and links ───────────────────────────────────────────────────── */
.lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: 10px; padding: 13px 22px; cursor: pointer;
    font-family: var(--display); font-weight: 600; font-size: 1.02rem; text-decoration: none;
    transition: transform .12s ease, filter .12s ease;
}
.lp-btn:active { transform: translateY(1px); }
.lp-btn--gold { background: var(--gold); color: #2a1a00; }
.lp-btn--gold:hover { filter: brightness(1.06); }
.lp-btn--red { background: var(--red); color: #fff; }
.lp-btn--red:hover { background: #951a14; }
.lp-btn--sm { padding: 8px 16px; font-size: .95rem; }
.lp-link { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lp-link--light { color: #fff; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.lp-head {
    position: absolute; top: 0; left: 0; right: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; color: #fff;
    max-width: 1200px; margin: 0 auto;
}
.lp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 1.3rem; }
.lp-brand img { width: 34px; height: 34px; }
.lp-brand b { color: var(--gold); font-weight: 600; }
.lp-menu-btn { display: none; background: none; border: 0; color: #fff; font-size: 1.7rem; cursor: pointer; }
.lp-nav { display: flex; align-items: center; gap: 26px; font-weight: 400; }
.lp-nav a { text-decoration: none; }
.lp-nav a:not(.lp-btn):hover { color: var(--gold); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.lp-hero {
    position: relative; overflow: hidden; color: #fff;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center;
    padding: 130px max(20px, calc((100vw - 1160px) / 2)) 90px;
    background:
        radial-gradient(40% 50% at 8% 8%, rgba(255, 232, 196, .28), transparent 70%),
        radial-gradient(40% 50% at 92% 8%, rgba(255, 232, 196, .22), transparent 70%),
        radial-gradient(120% 90% at 50% 0%, #6b1712 0%, #3a0a0c 45%, var(--night) 80%);
}
/* A strip of pitch along the hero's bottom edge, a fixed height so it never cuts content. */
.lp-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 90px, transparent 90px 180px),
        linear-gradient(180deg, #2a5f1e, #1d3f14);
}
.lp-hero > * { position: relative; z-index: 1; }
.lp-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 700; letter-spacing: -.01em; max-width: 14ch; }
.lp-hero__sub { font-size: 1.1rem; color: rgba(255, 255, 255, .85); max-width: 52ch; margin: 18px 0 28px; }

.lp-join {
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px; padding: 16px; max-width: 460px;
}
.lp-join label { display: block; font-family: var(--display); font-weight: 500; font-size: 1.05rem; margin-bottom: 8px; }
.lp-join__row { display: flex; gap: 8px; }
.lp-join input {
    flex: 1; min-width: 0; padding: 12px 14px; border-radius: 10px; border: 2px solid transparent;
    font: 600 1.15rem var(--display); letter-spacing: .12em; text-transform: uppercase;
    background: #fff; color: var(--ink);
}
.lp-join input::placeholder { letter-spacing: .02em; font-weight: 400; color: #9b8d8b; text-transform: none; }
.lp-join__hint { margin: 8px 0 0; font-size: .86rem; color: rgba(255, 255, 255, .7); }
.lp-join.is-error input { border-color: #ff8a80; }
.lp-join.is-error .lp-join__hint { color: #ffb4ad; }
.lp-hero__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 26px; }

/* The demo lot — the one loud element on the page. */
.lp-demo {
    position: relative; justify-self: end; width: 100%; max-width: 440px;
    background: linear-gradient(160deg, #7a1812, var(--red-deep) 60%, #2a0806);
    border: 2px solid rgba(255, 197, 46, .6); border-radius: 22px;
    padding: 26px 24px 22px; box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.lp-demo__tag {
    position: absolute; top: 14px; right: 16px;
    font-size: .78rem; color: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px; padding: 1px 10px;
}
.lp-demo__player { display: flex; align-items: center; gap: 16px; }
.lp-demo__photo {
    width: 86px; height: 86px; border-radius: 50%; padding: 4px; flex: none;
    background: conic-gradient(var(--gold), #fff3c4, var(--gold-deep), var(--gold));
}
.lp-demo__photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lp-demo__name {
    font-family: var(--display); font-weight: 600; font-size: 1.45rem; color: var(--ink);
    background: var(--gold); padding: 4px 22px 4px 12px; display: inline-block;
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.lp-demo__role { margin-top: 6px; color: rgba(255, 255, 255, .8); font-size: .92rem; }
.lp-demo__bid { text-align: center; margin: 22px 0 10px; }
.lp-demo__label { font-size: .88rem; color: rgba(255, 255, 255, .7); }
.lp-demo__price {
    font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 6vw, 4.4rem); line-height: 1.05;
    color: var(--gold); font-variant-numeric: tabular-nums;
}
.lp-demo__bid.is-bump .lp-demo__price { animation: lp-bump .35s ease; }
@keyframes lp-bump { 40% { transform: scale(1.08); } }
.lp-demo__team { font-family: var(--display); font-size: 1.15rem; font-weight: 500; min-height: 1.6em; }
.lp-demo__feed { list-style: none; margin: 12px 0 0; padding: 0; min-height: 5.4em; border-top: 1px solid rgba(255, 255, 255, .15); }
.lp-demo__feed li { padding: 5px 2px; font-size: .9rem; color: rgba(255, 255, 255, .75); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.lp-demo__feed li:first-child { color: #fff; }
.lp-demo__sold {
    position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(-9deg);
    font-family: var(--display); font-weight: 700; font-size: 3.4rem; letter-spacing: .08em;
    color: #7df29a; border: 5px solid currentColor; border-radius: 12px; padding: 0 22px;
    background: rgba(20, 4, 6, .78);
    animation: lp-stamp .4s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes lp-stamp { from { transform: translate(-50%, -50%) rotate(-9deg) scale(2); opacity: 0; } }

/* ── Sections ────────────────────────────────────────────────────────────── */
.lp-section { padding: 84px 0; }
.lp-sec-head { max-width: 640px; margin-bottom: 36px; }
.lp-sec-head p { color: var(--muted); margin: 10px 0 0; font-size: 1.05rem; }
.lp-empty { color: var(--muted); background: var(--tint); border-radius: 12px; padding: 18px 20px; margin: 0; }

/* On air */
.lp-onair { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.lp-onair li {
    display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 18px;
    padding: 16px 4px; border-bottom: 1px solid var(--line);
}
.lp-onair__dot { width: 12px; height: 12px; border-radius: 50%; background: #e53935; box-shadow: 0 0 0 4px rgba(229, 57, 53, .18); }
.lp-onair__dot.is-paused { background: var(--gold-deep); box-shadow: 0 0 0 4px rgba(232, 155, 12, .2); }
.lp-onair__name { font-family: var(--display); font-weight: 600; font-size: 1.2rem; }
.lp-onair__state { color: var(--muted); font-size: .92rem; }
.lp-onair__code { font-size: .92rem; color: var(--muted); }
.lp-onair__code b { color: var(--ink); letter-spacing: .08em; font-weight: 600; }

.lp-sub-head { margin: 44px 0 14px; font-size: 1.3rem; }
.lp-upcoming { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lp-upcoming a {
    display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; text-decoration: none;
    border: 1px solid var(--line); background: #fff;
}
.lp-upcoming a:hover { border-color: var(--red); }
.lp-upcoming__date { font-size: .85rem; color: var(--red); font-weight: 500; }
.lp-upcoming__name { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.lp-upcoming__code { font-size: .85rem; color: var(--muted); letter-spacing: .08em; }

/* Steps on a strip of pitch */
.lp-steps { background: linear-gradient(180deg, #2f6b22, #255a1b); color: #fff; }
.lp-steps .lp-sec-head p { color: rgba(255, 255, 255, .8); }
.lp-pitch {
    list-style: none; margin: 0; padding: 0; counter-reset: none;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
    border-top: 3px dashed rgba(255, 255, 255, .45);
}
.lp-pitch li { position: relative; padding: 34px 22px 0 0; }
.lp-pitch__no {
    position: absolute; top: -22px; left: 0;
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; color: var(--pitch);
    font-family: var(--display); font-weight: 700; font-size: 1.25rem;
    box-shadow: 0 0 0 5px #2a6120;
}
.lp-pitch h3 { font-size: 1.25rem; margin-bottom: 6px; }
.lp-pitch p { margin: 0; color: rgba(255, 255, 255, .85); font-size: .96rem; }

/* Three screens */
.lp-screens { background: var(--tint); }
.lp-screens__row { display: grid; grid-template-columns: 1.35fr .75fr 1.1fr; gap: 36px; align-items: end; }
.lp-screen { margin: 0; }
.lp-screen figcaption { margin-top: 20px; }
.lp-screen p { color: var(--muted); margin: 6px 0 0; font-size: .96rem; }

.lp-laptop__screen { background: #221a19; border: 10px solid #221a19; border-radius: 12px 12px 0 0; aspect-ratio: 16 / 10; overflow: hidden; }
.lp-laptop__base { height: 14px; background: linear-gradient(#d9d2d0, #b9b0ae); border-radius: 0 0 14px 14px; margin: 0 -18px; }
.mock-console { height: 100%; background: #f6f2f1; display: grid; grid-template-rows: 1fr auto auto; gap: 8px; padding: 10px; }
.mock-console__lot { background: linear-gradient(135deg, var(--red), var(--red-deep)); border-radius: 8px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.mock-console__lot span { width: 42%; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .5); }
.mock-console__lot b { font-family: var(--display); color: var(--gold); font-size: 1.5rem; }
.mock-console__teams, .mock-console__actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mock-console__actions { grid-template-columns: repeat(3, 1fr); }
.mock-console i { font-style: normal; font-size: .72rem; text-align: center; padding: 6px 2px; border-radius: 6px; background: #fff; border: 1px solid var(--line); font-weight: 500; }
.mock-console__actions .is-sold { background: #2f8f3a; color: #fff; border-color: #2f8f3a; }

.lp-phone { width: 100%; max-width: 190px; margin: 0 auto; aspect-ratio: 9 / 18; border: 9px solid #221a19; border-radius: 28px; overflow: hidden; }
.mock-live { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; background: linear-gradient(180deg, #5a110d 0%, #2a0806 62%, var(--pitch) 62%); }
.mock-live__photo { width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--gold); background: #f2b8c6; }
.mock-live__strip { width: 100%; height: 16px; background: var(--gold); clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); }
.mock-live__strip--short { width: 72%; align-self: flex-start; }
.mock-live__price { font-family: var(--display); color: var(--gold); font-weight: 700; font-size: 1.5rem; margin-top: auto; }
.mock-live__chips { display: flex; gap: 4px; }
.mock-live__chips i { width: 26px; height: 10px; border-radius: 3px; background: #2f8f3a; }
.mock-live__chips i + i { background: #c62828; }
.mock-live__chips i + i + i { background: #b7791f; }

.lp-tv__screen { aspect-ratio: 16 / 9; border: 10px solid #221a19; border-radius: 10px; background: linear-gradient(180deg, #6fa0d6, #9cc4e6 55%, #4f8a3a 55%); position: relative; overflow: hidden; }
.mock-ov { position: absolute; left: 6%; right: 6%; bottom: 8%; height: 24%; background: #fff; border-radius: 6px; display: grid; grid-template-columns: 28% 1fr 32%; gap: 4px; padding: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); }
.mock-ov i { font-style: normal; border-radius: 4px; }
.mock-ov__bid { font-family: var(--display); color: var(--red); font-weight: 700; font-size: .95rem; display: grid; place-items: center; }
.mock-ov__name { background: linear-gradient(90deg, var(--red), var(--red-deep)); }
.mock-ov__teams { background: repeating-linear-gradient(180deg, #ececf1 0 6px, #fff 6px 9px); }

/* Budget rule */
.lp-rule__in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.lp-rule__copy p { color: var(--muted); font-size: 1.05rem; margin: 14px 0 0; max-width: 50ch; }
.lp-sum { border: 2px solid var(--ink); border-radius: 16px; padding: 10px 22px; font-variant-numeric: tabular-nums; }
.lp-sum__row, .lp-sum__total { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.lp-sum__row span { color: var(--muted); }
.lp-sum__row b { font-weight: 500; }
.lp-sum__row--minus b { color: var(--red); }
.lp-sum__total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 4px; font-family: var(--display); font-size: 1.25rem; }
.lp-sum__total b { color: var(--red); font-weight: 700; }

/* Features: a plain two-column list */
.lp-feat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.lp-feat li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.lp-feat img { width: 40px; height: 40px; }
.lp-feat p { margin: 4px 0 0; color: var(--muted); font-size: .96rem; }

/* Pricing: a scoreboard of teams against price */
.lp-pricing { background: var(--tint); }
.lp-price-table { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 2px solid var(--ink); border-radius: 16px; overflow: hidden; background: #fff; }
.lp-price { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 8px; text-decoration: none; border-left: 1px solid var(--line); }
.lp-price:first-child { border-left: 0; }
.lp-price:hover { background: var(--tint); }
.lp-price__teams { color: var(--muted); font-size: .95rem; }
.lp-price__teams b { display: block; text-align: center; font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--ink); font-weight: 600; }
.lp-price__amount { font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--red); white-space: nowrap; }
.lp-price.is-free { background: var(--red); }
.lp-price.is-free .lp-price__teams, .lp-price.is-free .lp-price__teams b { color: #fff; }
.lp-price.is-free .lp-price__amount { color: var(--gold); }
.lp-price.is-free:hover { background: #951a14; }

/* Closing band and footer */
.lp-close { background: linear-gradient(135deg, var(--red), var(--red-deep)); color: #fff; padding: 70px 0; }
.lp-close__in { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.lp-close h2 { max-width: 20ch; }
.lp-close__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.lp-foot { background: var(--night); color: rgba(255, 255, 255, .75); padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); }
.lp-foot__in { display: grid; grid-template-columns: auto 1fr; gap: 12px 40px; align-items: center; }
.lp-brand--foot { color: #fff; }
.lp-foot nav { display: flex; gap: 22px; justify-content: flex-end; flex-wrap: wrap; }
.lp-foot nav a { text-decoration: none; }
.lp-foot nav a:hover { color: var(--gold); }
.lp-foot p { grid-column: 1 / -1; margin: 0; font-size: .88rem; }

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .lp-hero { grid-template-columns: 1fr; padding-top: 110px; gap: 40px; }
    .lp-demo { justify-self: start; }
    .lp-pitch { grid-template-columns: 1fr 1fr; row-gap: 44px; }
    .lp-screens__row { grid-template-columns: 1fr 1fr; }
    .lp-screens__row .lp-screen:first-child { grid-column: 1 / -1; }
    .lp-rule__in { grid-template-columns: 1fr; gap: 30px; }
    .lp-price-table { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lp-price:nth-child(4) { border-left: 0; }
    .lp-price:nth-child(n + 4) { border-top: 1px solid var(--line); }
}

/* ── Phone ───────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .lp-menu-btn { display: block; }
    .lp-nav {
        position: absolute; top: 64px; left: 12px; right: 12px;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; color: var(--ink); border-radius: 14px; padding: 8px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
        display: none;
    }
    .lp-nav.is-open { display: flex; }
    .lp-nav a { padding: 12px 14px; border-radius: 8px; }
    .lp-nav a:not(.lp-btn):hover { background: var(--tint); color: var(--red); }
    .lp-nav .lp-btn { margin-top: 6px; }
    .lp-hero { padding-bottom: 70px; }
    .lp-join__row { flex-direction: column; }
    .lp-section { padding: 60px 0; }
    .lp-onair li { grid-template-columns: auto 1fr auto; row-gap: 4px; }
    .lp-onair__state { display: none; }
    .lp-onair__code { grid-column: 2; grid-row: 2; }
    .lp-onair .lp-btn { grid-row: 1 / span 2; grid-column: 3; }
    .lp-pitch { grid-template-columns: 1fr; border-top: 0; border-left: 3px dashed rgba(255, 255, 255, .45); margin-left: 20px; row-gap: 30px; }
    .lp-pitch li { padding: 0 0 0 34px; }
    .lp-pitch__no { top: -4px; left: -23px; }
    .lp-screens__row { grid-template-columns: 1fr; }
    .lp-feat { grid-template-columns: 1fr; }
    .lp-price-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-price:nth-child(n) { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
    .lp-price:nth-child(odd) { border-left: 0; }
    .lp-price:nth-child(-n + 2) { border-top: 0; }
    .lp-foot__in { grid-template-columns: 1fr; }
    .lp-foot nav { justify-content: flex-start; }
}

/* ── Legal pages (/terms, /refund-policy, /privacy) ──────────────────────── */
.lg-band {
    position: relative; color: #fff;
    background: linear-gradient(120deg, #6b1712, #3a0a0c 55%, var(--night));
}
.lg-band .lp-head { position: relative; }
.lg-nav { display: flex; }
.lg-band__in { padding: 26px 20px 44px; }
.lg-band h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; }
.lg-band p { margin: 6px 0 0; color: rgba(255, 255, 255, .7); font-size: .92rem; }
.lg-main { padding-top: 28px; padding-bottom: 70px; }
.lg-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.lg-tabs a {
    padding: 8px 16px; border-radius: 999px; text-decoration: none; font-weight: 500;
    border: 1px solid var(--line); color: var(--ink); background: #fff;
}
.lg-tabs a.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.lg-doc { max-width: 72ch; }
.lg-doc h2 { font-size: 1.3rem; margin: 30px 0 8px; }
.lg-doc p, .lg-doc li { color: #3d3230; font-weight: 300; }
.lg-doc ul { padding-left: 20px; }
.lg-doc li { margin-bottom: 6px; }
.lg-doc a, .lg-contact a { color: var(--red); }
.lg-lead { font-size: 1.12rem; color: var(--ink) !important; }
.lg-table { border-collapse: collapse; margin: 10px 0 4px; min-width: 300px; }
.lg-table th, .lg-table td { text-align: left; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.lg-table th { font-family: var(--display); font-weight: 600; background: var(--tint); }
.lg-contact { margin-top: 36px; font-weight: 500; }
@media (max-width: 720px) {
    .lg-nav { position: static; display: flex; flex-direction: row; background: none; box-shadow: none; padding: 0; color: #fff; gap: 14px; }
    .lg-nav a { padding: 0; }
}
.lp-price-note { margin: 18px 0 0; color: var(--muted); font-size: .95rem; max-width: 70ch; }
.lp-price-note a { color: var(--red); }