/*
 * Landing-page styles. Scoped to the logged-out marketing view +
 * the logged-in tool launcher on /. Everything here is page-local
 * so it doesn't fight the table/form rules in mobile.css.
 */

.landing main.container,
.landing main {
    /* Hero needs to bleed edge-to-edge; the page wraps its own
     * inner .container blocks. */
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

.hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #334155 100%);
    color: #f8fafc;
    padding: 5rem 1rem 4.5rem;
    text-align: center;
}

.hero-kicker {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 1rem;
}

.hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.hero .lead {
    font-size: 1.15rem;
    color: #cbd5e1;
    max-width: 38rem;
    margin: 0 auto 2rem;
}

/* Logo hero (new). Centred wordmark — "Odds" small with horizontal
 * rules on each side, "Artist" large below. The .oa-logo container
 * uses inline-block so it shrinks to the widest child (the "Artist"
 * line); the top row is a flex row whose `flex: 1 1 auto` rules grow
 * to fill the remaining space, which is what guarantees the top row's
 * total width matches the "Artist" text width below it. */
.hero-logo {
    padding: 6rem 1rem 4.5rem;
}
.oa-logo {
    display: inline-block;
    text-align: center;
    color: #f8fafc;
    margin: 0 0 1.5rem;
}
.oa-logo-top {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.15rem;
}
.oa-line {
    flex: 1 1 auto;
    height: 3px;
    background: currentColor;
    border-radius: 2px;
}
.oa-odds {
    font-family: 'Fjalla One', 'Arial Narrow', sans-serif;
    font-size: clamp(0.95rem, 1.6vw, 1.25rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 400;
    white-space: nowrap;
    /* Optical correction — the uppercase letterspacing pushes the word
     * right; nudge half a tracking unit left so it sits centred between
     * the two rules. */
    padding-left: 0.16em;
}
.oa-artist {
    font-family: 'Fjalla One', 'Arial Narrow', sans-serif;
    font-size: clamp(4rem, 11vw, 7rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 0.95;
    text-transform: uppercase;
}
/* Bottom rule mirrors the two top rules — single full-width line
 * directly under ARTIST. Because .oa-logo is inline-block and shrinks
 * to its widest child (the ARTIST text), this line automatically
 * matches ARTIST's width without any JS measurement. */
.oa-logo-bottom {
    height: 3px;
    background: currentColor;
    border-radius: 2px;
    margin-top: 0.3rem;
}

/* Big primary CTA — high-contrast amber so it visibly outranks the
 * supporting Create-account / Sign-in buttons below. Uses Bootstrap's
 * btn-warning but tightens the radius and the focus ring for the
 * dark hero background. */
.hero-cta-primary {
    background: #f5af19;
    border-color: #f5af19;
    color: #0f172a;
    font-weight: 700;
    border-radius: 999px;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    box-shadow: 0 12px 24px -10px rgba(245, 175, 25, 0.55);
}
.hero-cta-primary:hover,
.hero-cta-primary:focus {
    background: #ffc14d;
    border-color: #ffc14d;
    color: #0f172a;
}
.hero-secondary-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}
.hero-secondary-actions .btn {
    font-weight: 500;
}

/* Single "open the guide" callout that replaces the old How-it-works
 * step list. One full-width hover-able link so the call-to-action is
 * unambiguous; visitors who didn't take the hero CTA get a second
 * obvious opportunity to land on /guide/. */
.guide-callout-section {
    padding: 3rem 1rem;
}
.guide-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    max-width: 56rem;
    margin: 0 auto;
    color: #0f172a;
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease,
                border-color 120ms ease;
}
.guide-callout:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 14px 30px -18px rgba(15, 23, 42, 0.3);
    color: #0f172a;
}
.guide-callout h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
}
.guide-callout p {
    margin: 0;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 36rem;
}
.guide-callout-cta {
    color: #b07000;
    font-weight: 600;
    white-space: nowrap;
}

/* Dark-theme: the white guide-callout card needs to lift onto the dark
 * page background, and `.section-light` needs to stop being white. */
[data-theme="dark"] .section-light { background: var(--bg-page); }
[data-theme="dark"] .guide-callout {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .guide-callout:hover { color: var(--text); }
[data-theme="dark"] .guide-callout p { color: var(--text-mid); }
[data-theme="dark"] .guide-callout-cta { color: #ffc14d; }

.hero .btn-primary {
    background: #f1f5f9;
    border-color: #f1f5f9;
    color: #0f172a;
    font-weight: 600;
}
.hero .btn-primary:hover,
.hero .btn-primary:focus {
    background: #ffffff;
    border-color: #ffffff;
    color: #0f172a;
}
.hero .btn-outline-light {
    border-color: #475569;
}
.hero .btn-outline-light:hover,
.hero .btn-outline-light:focus {
    background: #1f2937;
    border-color: #64748b;
}

.logo-strip {
    background: #0b1220;
    padding: 2rem 1rem;
    color: #94a3b8;
}
.logo-strip .label {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    color: #64748b;
    text-align: center;
    margin-bottom: 1.25rem;
}
.logo-strip .logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.25rem 2rem;
    max-width: 64rem;
    margin: 0 auto;
}
.logo-strip .logos img {
    height: 36px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    /* Mixed-format logos (some on dark backgrounds, some not) —
     * desaturate so they sit consistently against the dark strip. */
    filter: grayscale(1) brightness(1.6) contrast(0.9);
    opacity: 0.85;
    transition: opacity 120ms ease, filter 120ms ease;
}
.logo-strip .logos img:hover {
    filter: none;
    opacity: 1;
}

.section {
    padding: 4rem 1rem;
}
.section-light {
    background: #f8fafc;
}
.section-title {
    text-align: center;
    margin-bottom: 2.5rem;
}
.section-title h2 {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}
.section-title p {
    color: #64748b;
    max-width: 40rem;
    margin: 0 auto;
}

.feature-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.75rem;
    height: 100%;
    transition: transform 120ms ease, box-shadow 120ms ease,
                border-color 120ms ease;
}
.feature-card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 10px 24px -16px rgba(15, 23, 42, 0.25);
}
.feature-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #0f172a;
}
.feature-card p {
    color: #475569;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
}

.steps {
    counter-reset: step;
}
.step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.step:last-child { margin-bottom: 0; }
.step .num {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 50%;
    background: #0f172a;
    color: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.step h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: #0f172a;
}
.step p {
    color: #475569;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
}

.cta-band {
    background: #0f172a;
    color: #f8fafc;
    padding: 3.5rem 1rem;
    text-align: center;
}
.cta-band h2 {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}
.cta-band p {
    color: #cbd5e1;
    max-width: 34rem;
    margin: 0 auto 1.75rem;
}
.cta-band .btn-light {
    color: #0f172a;
    font-weight: 600;
}

.landing-footer {
    background: #0b1220;
    color: #64748b;
    padding: 2.25rem 1rem 2rem;
    font-size: 0.85rem;
}
.landing-footer .container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    align-items: center;
    max-width: 64rem;
}
.landing-footer a {
    color: #94a3b8;
    text-decoration: none;
}
.landing-footer a:hover { color: #f1f5f9; }
.landing-footer .disclaimer {
    color: #64748b;
    font-size: 0.78rem;
    max-width: 30rem;
}

/* Logged-in dashboard launcher — used on / when the user is signed
 * in. The previous .tool-card grid hard-coded white backgrounds
 * (#ffffff / #0f172a text), which left dark-mode users looking at
 * four bright cards on a dark page. The new layout — brand block at
 * the top + two big .tool-panel sections — reads every colour from
 * tokens, so dark mode falls out for free. */
.dashboard-launcher {
    padding: 2.5rem 1rem 3rem;
    background: var(--bg-page);
    color: var(--text);
}

.dashboard-brand {
    text-align: center;
    margin: 0 auto 2rem;
    color: var(--text);
}
/* Dashboard variant of the wordmark logo. Same geometry as the
 * marketing-hero version (.oa-logo) — `display: inline-block` shrinks
 * to the widest child (Artist), flex top row's `flex: 1 1 auto` rules
 * grow to match — just smaller because the logged-in user already
 * knows where they are; the logo here is identity reinforcement, not
 * a hero CTA. */
.oa-logo--dashboard {
    color: var(--text);
    margin: 0 auto 1rem;
}
.oa-logo--dashboard .oa-artist {
    font-size: clamp(2.5rem, 6vw, 4rem);
}
.oa-logo--dashboard .oa-odds {
    font-size: clamp(0.75rem, 1.1vw, 0.9rem);
}
.dashboard-greeting {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 1.25rem 0 0.35rem;
    color: var(--text);
}
.dashboard-subtitle {
    color: var(--text-mid);
    font-size: 0.95rem;
    margin: 0;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}

/* Two-panel layout — left = Tracking, right = Find a bet. Symmetric
 * 50/50 split on desktop, single column on mobile. Each panel is a
 * <section> (not a link) because anchors can't nest; the primary CTA
 * at the bottom of each panel is its own full-width link. */
.tool-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    max-width: 64rem;
    margin: 0 auto;
}
.tool-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.75rem 1.5rem 1.25rem;
    box-shadow: var(--shadow-card);
    color: var(--text);
    transition: border-color 120ms ease, box-shadow 120ms ease,
                transform 120ms ease;
}
.tool-panel:hover {
    transform: translateY(-2px);
    border-color: var(--line-strong);
    box-shadow: 0 14px 32px -18px rgba(15, 23, 42, 0.35);
}
.tool-panel-head { margin-bottom: 1rem; }
.tool-panel-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.7rem;
    font-weight: 700;
    color: #b07000;
    background: rgba(245, 175, 25, 0.12);
    border: 1px solid rgba(245, 175, 25, 0.35);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}
.tool-panel h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: var(--text);
}
.tool-panel-head p {
    margin: 0;
    color: var(--text-mid);
    font-size: 0.95rem;
    line-height: 1.5;
}

.tool-panel-links {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    flex: 1 1 auto;
}
.tool-panel-links li {
    margin-bottom: 0.4rem;
}
.tool-panel-links li:last-child { margin-bottom: 0; }
.tool-panel-links a {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    background: transparent;
    border: 1px solid transparent;
    transition: background 120ms ease, border-color 120ms ease;
}
.tool-panel-links a:hover {
    background: var(--surface-muted, color-mix(in srgb, var(--bg-card) 92%, var(--text) 8%));
    border-color: var(--line);
    color: var(--text);
}
.tool-panel-link-title {
    font-weight: 600;
    font-size: 0.98rem;
}
.tool-panel-link-meta {
    font-size: 0.82rem;
    color: var(--text-mid);
}

.tool-panel-cta {
    display: inline-block;
    margin-top: auto;
    align-self: flex-start;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: #f5af19;
    border: 1px solid #f5af19;
    color: #0f172a;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease;
}
.tool-panel-cta:hover,
.tool-panel-cta:focus {
    background: #ffc14d;
    border-color: #ffc14d;
    color: #0f172a;
}

/* Dark-theme: the eyebrow chip needs a brighter amber on dark, and
 * the .tool-panel-cta hover state already passes contrast as-is. */
[data-theme="dark"] .tool-panel-eyebrow {
    color: #ffc14d;
    background: rgba(245, 175, 25, 0.15);
    border-color: rgba(245, 175, 25, 0.4);
}

@media (max-width: 768px) {
    .hero { padding: 3.5rem 1rem 3rem; }
    .hero h1 { font-size: 1.85rem; }
    .hero .lead { font-size: 1rem; }
    .hero-logo { padding: 3.5rem 1rem 3rem; }
    .oa-logo-top { gap: 0.6rem; }
    .oa-line { height: 2px; }
    .oa-logo-bottom { height: 2px; margin-top: 0.2rem; }
    .hero-cta-primary {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
        font-size: 1rem;
    }
    .section { padding: 2.75rem 1rem; }
    .section-title h2 { font-size: 1.4rem; }
    .logo-strip .logos { gap: 1rem 1.5rem; }
    .logo-strip .logos img { height: 28px; }
    .cta-band { padding: 2.5rem 1rem; }
    .cta-band h2 { font-size: 1.35rem; }
    .guide-callout {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 1.25rem 1.25rem;
    }
    .guide-callout-cta { align-self: flex-end; }
    /* Dashboard panels collapse to a single column on mobile. */
    .tool-panels {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .tool-panel { padding: 1.25rem 1.1rem 1.1rem; }
    .dashboard-greeting { font-size: 1.25rem; }
}