/* ===================================================================
 *
 *  Products: The Board and Spread Edge as two cards, each with a live
 *  mini-preview of its page (js/products.js fills the rows). Black like
 *  the two pages themselves, flowing into the black footer; gold, green
 *  and red from the shared exchange palette (css/exchange-ui.css).
 *
 *  # products
 *    ## header
 *    ## cards
 *    ## preview window
 *
 * =================================================================== */

.s-products {
    position: relative;
    padding-top: var(--section-pad);
    padding-bottom: 10rem;
    background-color: var(--xg-black);
    /* a soft gold glow behind the header, fading out over the cards */
    background-image: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(197, 179, 88, 0.14), transparent 70%);
    color: var(--xg-silver);
}


/* -------------------------------------------------------------------
 * ## header
 * ------------------------------------------------------------------- */

.s-products .section-header {
    text-align: center;
}
.s-products .display-1 {
    color: var(--xg-white);
    margin-bottom: 1.4rem;
}
.prod-lead {
    max-width: 60rem;
    margin: 0 auto 6rem;
    font-weight: 300;
    font-size: 2.2rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}


/* -------------------------------------------------------------------
 * ## cards
 * ------------------------------------------------------------------- */

.prod-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.2rem;
}
.prod-grid::after {
    content: none;   /* .row's clearfix would become a grid item */
}

.prod-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.6rem 3.2rem;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(165deg, #171717 0%, #0b0b0b 55%, #080808 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -24px rgba(0, 0, 0, 0.9);
    color: var(--xg-silver);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.prod-card:hover,
.prod-card:focus {
    color: var(--xg-silver);
}
/* the sheen: a diagonal band of light that sweeps across on hover */
.prod-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.07) 48%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.9s ease;
}
/* hover: a lift, the sheen and the arrow nudge; the card keeps its own plain
   shadow and edge (no gold glow, Evan 2026-10-09) */
@media (hover: hover) {
    .prod-card:hover {
        transform: translateY(-6px);
    }
    .prod-card:hover::before {
        transform: translateX(100%);
    }
    .prod-card:hover .prod-cta i {
        transform: translateX(4px);
    }
}
.prod-card:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 4px;
}

.prod-text {
    padding: 2.8rem 1.6rem 0;
}
.prod-text h3 {
    margin: 0 0 1.2rem;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.2;
    color: var(--xg-white);
}
.prod-text p {
    margin: 0 0 2.8rem;
    font-size: 1.7rem;
    line-height: 1.6;
    color: var(--xg-silver);
}
/* the call to action: a big gold pill */
.prod-cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    height: 5.4rem;
    padding: 0 2.8rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #dccb72, var(--theme-color));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 28px -10px rgba(197, 179, 88, 0.7);
    font-weight: 600;
    font-size: 1.6rem;
    color: #0a0a0a;
}
.prod-cta i {
    font-size: 1.4rem;
    transition: transform 0.3s;
}


/* -------------------------------------------------------------------
 * ## preview window
 * Big type, three rows: it has to read at a glance (Evan 2026-10-09).
 * ------------------------------------------------------------------- */

/* The window stretches to fill its card (side-by-side cards share a height),
   so The Board's window, which has no key footer, matches Spread Edge's: its
   rows window takes the extra height. */
.prod-window {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid #1d1d1d;
    background: #030303;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9);
    line-height: 1.2;
}
.pw-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.8rem;
    border-bottom: 1px solid #1a1a1a;
    background: linear-gradient(180deg, #101010, #070707);
}
.pw-bar img {
    height: 2.4rem;
    width: auto;
}
.pw-name {
    font-weight: 700;
    font-size: 1.7rem;
    color: var(--xg-white);
}
.pw-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    color: var(--xg-silver);
}
.pw-live i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--xg-green);
    box-shadow: 0 0 8px var(--xg-green);
    /* steady, like the pages' own LIVE dots: a pulse kept the page painting
       every frame for a purely decorative effect */
}

.pw-head,
.pv-row {
    display: grid;
    align-items: center;
    column-gap: 1.6rem;
    padding: 0 1.8rem;
}
.pw-head--board,
.pw-rows--board .pv-row {
    grid-template-columns: 1fr auto 9.6rem;
}
.pw-head--edge,
.pw-rows--edge .pv-row {
    grid-template-columns: 1fr auto 7.2rem;
}
.pw-head {
    padding-top: 1.4rem;
    padding-bottom: 0.9rem;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #7a7a7a;
}
.pw-head span:not(:first-child) {
    text-align: right;
}

/* The rows window: three rows tall, the track drifting up through it on an
   endless loop (js/products.js), its top and bottom edges fading the rows in
   and out. */
.pw-rows {
    position: relative;
    flex: 1 0 21.6rem;   /* at least 3 x .pv-row */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.6rem, #000 calc(100% - 1.6rem), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 1.6rem, #000 calc(100% - 1.6rem), transparent 100%);
}
.pv-track {
    will-change: transform;
}
.pv-row {
    height: 7.2rem;
    border-top: 1px solid #141414;
}
.pv-ghost .sk {
    height: 1.6rem;
}
.pv-ghost .sk:not(:first-child) {
    justify-self: end;
}
.pv-arrive .pv-row {
    animation: pv-in 0.5s ease both;
}
.pv-arrive .pv-row:nth-child(2) { animation-delay: 0.08s; }
.pv-arrive .pv-row:nth-child(3) { animation-delay: 0.16s; }
@keyframes pv-in { from { opacity: 0; transform: translateY(6px); } }

.pv-game {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}
.pv-teams {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.8rem;
    color: var(--xg-white);
    white-space: nowrap;
}
.pv-teams b {
    font-weight: 700;
}
/* a soft light disc behind each mark: dark logos (Iowa's black Tigerhawk)
   vanish on the black window without it */
.pv-logo {
    box-sizing: border-box;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0.3rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1) 70%);
    object-fit: contain;
}
.pv-at {
    margin: 0 0.2rem;
    font-size: 1.4rem;
    color: #6a6a6a;
}
.pv-when {
    font-family: var(--xg-mono);
    font-size: 1.25rem;
    color: var(--xg-slate);
}
.pv-when--live {
    color: var(--xg-green);
}

.pv-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    font-family: var(--xg-mono);
}
.pv-ln {
    font-size: 1.25rem;
    color: var(--xg-silver);
    white-space: nowrap;
}
.pv-px {
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--xg-white);
}
/* A changed price fades its new value in (the ticker lamps' refresh), on
   opacity so the compositor runs it: a color flash animates on the main
   thread, and with a dozen live games one was nearly always running. */
.pv-px.pv-tick {
    animation: pv-flash 0.7s ease-out;
}
.pv-px.pv-tock {   /* same flash, second name: alternating restarts it */
    animation: pv-flash-b 0.7s ease-out;
}
@keyframes pv-flash { 0% { opacity: 0.15; } 100% { opacity: 1; } }
@keyframes pv-flash-b { 0% { opacity: 0.15; } 100% { opacity: 1; } }

.pv-book {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    font-family: var(--xg-mono);
    font-size: 1.5rem;
}
.pv-book span {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
}
.pv-book i,
.pv-book em {
    font-family: var(--xg-mono);
    font-style: normal;
}
.pv-book i {
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    color: #7a7a7a;
}
.pv-bid { color: var(--xg-green); }
.pv-ask { color: var(--xg-red); }

/* Spread Edge's fair column, in the page's own edge colors */
.pv-fair {
    font-family: var(--xg-mono);
    font-weight: 700;
    font-size: 2.4rem;
    text-align: right;
    color: var(--theme-color);
}
.pv-fair--up { color: var(--xg-green); }
.pv-fair--dn { color: var(--xg-red); }

.pw-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.8rem;
    padding: 1.2rem 1.8rem 1.4rem;
    border-top: 1px solid #141414;
    font-size: 1.2rem;
    color: var(--xg-slate);
}
.pw-key::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 0.7rem;
    border-radius: 50%;
    vertical-align: 1px;
    background: var(--theme-color);
}
.pw-key--up::before { background: var(--xg-green); }
.pw-key--dn::before { background: var(--xg-red); }

@media (prefers-reduced-motion: reduce) {
    .pv-arrive .pv-row,
    .pv-px.pv-tick,
    .pv-px.pv-tock { animation: none; }
    .prod-card,
    .prod-card::before { transition: none; }
}


/* -------------------------------------------------------------------
 * responsive: products
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 950px) {
    .prod-grid {
        grid-template-columns: 1fr;
        max-width: 64rem;
    }
}

@media only screen and (max-width: 600px) {
    .s-products {
        padding-bottom: 7rem;
    }
    .prod-lead {
        font-size: 1.9rem;
        margin-bottom: 4rem;
    }
    .prod-card {
        padding: 1rem 1rem 2.6rem;
        border-radius: 18px;
    }
    .prod-text {
        padding: 2.4rem 1.2rem 0;
    }
    .prod-text h3 {
        font-size: 2.6rem;
    }
    .pw-head,
    .pv-row,
    .pw-bar,
    .pw-foot {
        padding-left: 1.4rem;
        padding-right: 1.4rem;
    }
    .pw-head,
    .pv-row {
        column-gap: 1.2rem;
    }
    /* phones: the Board preview drops bid/ask to keep its prices large */
    .pw-head--board,
    .pw-rows--board .pv-row {
        grid-template-columns: 1fr auto;
    }
    .pw-head--board span:nth-child(3),
    .pw-rows--board .pv-book,
    .pw-rows--board .pv-ghost .sk:nth-child(3) {
        display: none;
    }
    .pw-head--edge,
    .pw-rows--edge .pv-row {
        grid-template-columns: 1fr auto 6rem;
    }
}

@media only screen and (max-width: 420px) {
    .pv-logo {
        display: none;
    }
}