/* ============================================
   Product landing pages — the shared marketing template.
   /competitions, /competitions/over-the-bar, /lotto, /memberships, /facilities.

   Brand redesign 2026: warm shell, navy accent owns interaction, flat surfaces,
   ONE red conversion button per page (the hero CTA), gold only for the money
   moment on dark. No gradients on surfaces, no emoji, no top-accent borders,
   no button shadows. All rules page-scoped under .c-product-page.
   Tokens only — no raw hex, no raw px font-size (css-lint enforces).
   ============================================ */

.c-product-page {
    background: var(--bg);
    min-height: 100vh;

    /* Marketing type scale — a step smaller than the app --font-size-* scale so these
       pages match the homepage and use-case marketing text (their body runs ~15px),
       with headings kept large for contrast. Scoped to this page only; overriding the
       tokens here (rather than every rule) keeps one source of truth for the page scale. */
    --font-size-base: 15px;   /* body copy */
    --font-size-lg: 16px;     /* card/step/fee titles, section sub, sum values */
    --font-size-xl: 18px;     /* hero lead */
    --font-size-3xl: 27px;    /* section / earnings / final titles, the money figure */
    --font-size-4xl: 34px;    /* hero title */
}

/* Shared centered column for every section's inner content */
.c-product-page__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Section rhythm + optional headers */
.c-product-page__section {
    padding: 64px 0;
}

.c-product-page__section-head {
    max-width: 640px;
    margin: 0 0 36px 0;
}

.c-product-page__section-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.c-product-page__eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--font-size-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 12px 0;
}

.c-product-page__section-title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--ink-heading);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

.c-product-page__section-sub {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: var(--body);
    margin: 14px 0 0 0;
}

/* ==========================================================================
   Hero — two-column on desktop (text + framed screenshot), stacked on mobile.
   Sits on the warm shell, no white band, full container width used.
   ========================================================================== */

.c-product-page__hero {
    padding: 56px 0 24px;
}

.c-product-page__hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}

.c-product-page__hero-title {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--ink-heading);
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 12px 0 0 0;
}

.c-product-page__hero-lead {
    font-size: var(--font-size-xl);
    line-height: 1.55;
    color: var(--body);
    margin: 20px 0 0 0;
    max-width: 32em;
}

.c-product-page__hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 32px 0 0 0;
}

/* ==========================================================================
   Buttons — flat fills, no shadow, no gradient.
   Primary (red) is the ONE conversion button per page (hero CTA).
   Accent = navy fill; ghost = white + hairline.
   ========================================================================== */

.c-product-page__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1;
    padding: 15px 26px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.c-product-page__btn--primary {
    background: var(--red);
    color: var(--red-ink);
}

.c-product-page__btn--primary:hover,
.c-product-page__btn--primary:focus,
.c-product-page__btn--primary:visited,
.c-product-page__btn--primary:active {
    background: var(--red-strong);
    color: var(--red-ink);
}

.c-product-page__btn--accent {
    background: var(--accent);
    color: var(--card);
}

.c-product-page__btn--accent:hover,
.c-product-page__btn--accent:focus,
.c-product-page__btn--accent:visited,
.c-product-page__btn--accent:active {
    background: var(--accent-strong);
    color: var(--card);
}

.c-product-page__btn--ghost {
    background: var(--card);
    color: var(--ink);
    border-color: var(--line);
}

.c-product-page__btn--ghost:hover,
.c-product-page__btn--ghost:focus,
.c-product-page__btn--ghost:visited,
.c-product-page__btn--ghost:active {
    color: var(--ink);
    border-color: var(--accent);
}

/* Quiet inline "See how it works" text link with a down chevron */
.c-product-page__jump {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.c-product-page__jump:hover,
.c-product-page__jump:focus,
.c-product-page__jump:visited,
.c-product-page__jump:active {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   Framed screenshot slot — a light browser chrome around a real screenshot.
   Placeholder state (this PR): a labelled sunken panel that reads as an
   intentional "shot goes here", swapped for an <img> in the screenshot pass.
   ========================================================================== */

.c-product-page__frame {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.c-product-page__frame-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--line);
}

.c-product-page__frame-dot {
    width: 9px;
    height: 9px;
    border-radius: var(--r-pill);
    background: var(--line-strong);
}

.c-product-page__frame-body {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    background: var(--bg-sunken);
    padding: 20px;
}

/* When a real screenshot lands, it fills the body edge to edge */
.c-product-page__frame-body img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-product-page__frame-label {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   Phone device mockup — real MOBILE screenshots (readable, true to how
   supporters actually enter). Used for the hero visual + the "see it in
   action" gallery on competition pages.
   ========================================================================== */

.c-product-page__phone {
    position: relative;
    width: 236px;
    flex: 0 0 auto;
    border-radius: 34px;
    background: var(--navy-deep);
    padding: 9px;
    box-shadow: 0 24px 50px -20px rgba(19, 26, 42, 0.5);
}

.c-product-page__phone--hero {
    width: 268px;
}

/* speaker/notch pill */
.c-product-page__phone::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.35);
    z-index: 2;
}

.c-product-page__phone-screen {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    background: var(--card);
    aspect-ratio: 236 / 500;
}

.c-product-page__phone-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.c-product-page__hero-media--phone {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.c-product-page__phone-note {
    margin: 14px 0 0 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--muted);
    text-align: center;
}

/* Gallery as a row of phones with a step label + caption under each */
.c-product-page__gallery--phones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 30px;
}

.c-product-page__phone-item {
    width: 236px;
    text-align: center;
}

.c-product-page__phone-step {
    margin: 16px 0 0 0;
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--ink-heading);
}

.c-product-page__phone-caption {
    margin: 4px 0 0 0;
    font-size: var(--font-size-sm);
    line-height: 1.45;
    color: var(--body);
}

/* ==========================================================================
   How it works — 3 numbered steps, strip on desktop / stacked on mobile
   ========================================================================== */

.c-product-page__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0;
}

.c-product-page__step {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 28px;
}

.c-product-page__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.c-product-page__step-title {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--ink-heading);
    margin: 18px 0 0 0;
    letter-spacing: -0.01em;
}

.c-product-page__step-text {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--body);
    margin: 8px 0 0 0;
}

/* ==========================================================================
   Earnings — the money moment. Dark navy band, gold figure (gold-on-dark is
   the ONLY sanctioned gold, and only for money). Full-bleed background.
   ========================================================================== */

.c-product-page__earnings {
    background: var(--navy-section);
}

.c-product-page__earnings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.c-product-page__earnings-title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--card);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

.c-product-page__earnings-text {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: var(--body-on-dark);
    margin: 16px 0 0 0;
}

/* The illustrated sum sits in a quiet inner card on the dark band */
.c-product-page__sum {
    background: var(--navy-deep-2);
    border: 1px solid var(--line-on-dark);
    border-radius: var(--r-lg);
    padding: 32px;
}

.c-product-page__sum-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
}

.c-product-page__sum-row + .c-product-page__sum-row {
    border-top: 1px solid var(--line-on-dark);
}

.c-product-page__sum-label {
    font-size: var(--font-size-base);
    color: var(--body-on-dark);
}

.c-product-page__sum-value {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--card);
}

.c-product-page__sum-row--total {
    padding-top: 18px;
}

.c-product-page__sum-row--total .c-product-page__sum-label {
    font-size: var(--font-size-lg);
    color: var(--card);
    font-weight: 600;
}

.c-product-page__sum-total {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--gold);
    letter-spacing: -0.02em;
    line-height: 1;
}

.c-product-page__earnings-note {
    font-size: var(--font-size-sm);
    color: var(--body-on-dark);
    margin: 16px 0 0 0;
}

/* Quiet transparency link to the pricing page, on the dark earnings band */
.c-product-page__earnings-link {
    display: inline-block;
    margin: 16px 0 0 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--card);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.c-product-page__earnings-link:hover,
.c-product-page__earnings-link:focus,
.c-product-page__earnings-link:visited,
.c-product-page__earnings-link:active {
    color: var(--card);
    opacity: 0.85;
}

/* ==========================================================================
   Fees / low-risk — hairline-divided editorial rows (NOT an icon-square grid)
   ========================================================================== */

.c-product-page__fees {
    max-width: 760px;
}

.c-product-page__fee {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap: 24px;
    padding: 22px 0;
    border-top: 1px solid var(--line-soft);
}

.c-product-page__fee:first-child {
    border-top: none;
}

.c-product-page__fee-lead {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--accent);
    letter-spacing: -0.01em;
    margin: 0;
}

.c-product-page__fee-text {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--body);
    margin: 0;
}

/* ==========================================================================
   Gallery — "see it in action", grid of framed shots with captions
   ========================================================================== */

/* 4 framed shots as a balanced 2×2 (never a 3+1 with a lonely last card) */
.c-product-page__gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.c-product-page__shot-caption {
    font-size: var(--font-size-sm);
    color: var(--body);
    margin: 12px 0 0 0;
    text-align: center;
}

/* ==========================================================================
   Resources — plain, clearly-labelled outbound text links (comp pages only)
   ========================================================================== */

.c-product-page__resources {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.c-product-page__resource {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 14px 20px;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.c-product-page__resource:hover,
.c-product-page__resource:focus,
.c-product-page__resource:visited,
.c-product-page__resource:active {
    color: var(--accent-strong);
    border-color: var(--accent);
}

/* ==========================================================================
   Final CTA band — quiet accent-soft band, ONE navy button, reassuring line.
   (Red is spent on the hero; the closing button is navy per the one-red rule.)
   ========================================================================== */

.c-product-page__final {
    background: var(--accent-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.c-product-page__final-inner {
    max-width: 720px;
    text-align: center;
    padding-top: 64px;
    padding-bottom: 64px;
}

.c-product-page__final-title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--ink-heading);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

.c-product-page__final-actions {
    margin: 28px 0 0 0;
}

.c-product-page__final-note {
    font-size: var(--font-size-base);
    color: var(--body);
    margin: 18px 0 0 0;
}

/* ==========================================================================
   Cross-sell — "clubs also use Bluefundr for…", 3 flat product cards
   ========================================================================== */

.c-product-page__cross {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.c-product-page__cross-card {
    display: block;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 26px;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.c-product-page__cross-card:hover,
.c-product-page__cross-card:focus-visible {
    border-color: var(--accent);
}

.c-product-page__cross-name {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--ink-heading);
    margin: 0;
    letter-spacing: -0.01em;
}

.c-product-page__cross-text {
    font-size: var(--font-size-base);
    line-height: 1.55;
    color: var(--body);
    margin: 8px 0 0 0;
}

.c-product-page__cross-card:hover .c-product-page__cross-name,
.c-product-page__cross-card:focus-visible .c-product-page__cross-name {
    color: var(--accent);
}

/* ==========================================================================
   Mobile — single breakpoint at 900px (grids collapse), 600px (tighten)
   ========================================================================== */

@media (max-width: 900px) {
    .c-product-page__hero-grid,
    .c-product-page__earnings-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .c-product-page__steps {
        grid-template-columns: 1fr;
    }

    .c-product-page__hero-lead {
        max-width: none;
    }
}

@media (max-width: 600px) {
    .c-product-page__inner {
        padding: 0 20px;
    }

    .c-product-page__section {
        padding: 44px 0;
    }

    .c-product-page__hero {
        padding: 32px 0 8px;
    }

    .c-product-page__hero-title {
        font-size: var(--font-size-3xl);
    }

    .c-product-page__hero-lead {
        font-size: var(--font-size-lg);
    }

    .c-product-page__section-title,
    .c-product-page__earnings-title,
    .c-product-page__final-title {
        font-size: var(--font-size-2xl);
    }

    .c-product-page__hero-actions {
        gap: 12px;
    }

    .c-product-page__btn {
        width: 100%;
    }

    .c-product-page__fee {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .c-product-page__gallery {
        grid-template-columns: 1fr;
    }

    .c-product-page__sum {
        padding: 24px;
    }

    .c-product-page__final-inner {
        padding-top: 44px;
        padding-bottom: 44px;
    }
}