/*
 * gameweek-forecast.css — /premier-league-predictions-gameweek-N
 *
 * The page's whole surface. It does not import rules.css: that furniture reads as
 * documentation, and this is an editorial data page. The shape is a full-bleed hero on the
 * site's dark green, a jump nav, day-grouped white match cards, a summary table, and a CTA
 * band that closes on the hero's colour.
 *
 * ## The bar
 *
 * Home and away are the two poles of one scale and the draw is the neutral middle, so this is a
 * diverging scale, not three categories - which is why the draw is grey and why the segments are
 * always in home | draw | away order. Reversing them for an away favourite would make the shape
 * meaningless; the whole point is that a glance down the page shows which way each match leans.
 *
 * Colours are green600 #698825 and red700 #943838 - the pair already checked for the table
 * predictor's bands - with grey400 #B1B0A9 as the midpoint. Re-validated as a trio for this use:
 * worst adjacent pair ΔE 21.1 normal vision, 19.2 deuteranopia, 17.5 tritanopia, all clear of the
 * floor. Those numbers were run against a white card, which is why the cards stay white in this
 * redesign. Do not substitute a colour, or the surface, without re-running that check.
 *
 * The grey sits at 2.12:1 against the card, under the 3:1 mark. That is permitted only where
 * every segment is separately labelled, which is why the percentages above the bar are not
 * optional decoration - remove them and the palette stops being accessible.
 *
 * Colour is never the only channel here either: the three percentages are written out in text
 * above every bar, and the bar carries an aria-label saying the same thing.
 *
 * ## Light only
 *
 * Every public page on this site is light, and this one commits to that rather than defining
 * half a dark theme that has never been looked at. The validator numbers above are the light
 * surface only.
 */

/* ------------------------------------------------------------------- page */

/* Solid, replacing main.css's lime-teal gradient: the hero and CTA bands supply this page's
   colour, and cards on a gradient never sit still. grey100 rather than white so the white
   cards read as cards. */
body.gwf_page {
    background: var(--grey100);
}

/* Jumped-to sections must not land under the fixed title bar. */
.gwf_page section[id] {
    scroll-margin-top: calc(var(--title-bar-h) + 16px);
}

.gwf_main {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 16px;
}

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

/* green900 into teal900 - the two darkest steps of the site's own pair, the same family as the
   landing gradient but taken down to where white type carries. The stripes are mowing lines:
   a whisper of pitch, well under any contrast that could interfere with the type. */
.gwf_hero {
    /* main.css styles the bare <header> element for the landing page: height 96px, flex, a
       32px top margin. Unpicked here or the band collapses and its content spills over the
       cards below. */
    height: auto;
    margin-top: 0;
    display: block;
    background:
        repeating-linear-gradient(115deg,
            rgba(255, 255, 255, 0.035) 0 56px, transparent 56px 112px),
        linear-gradient(150deg, var(--green900), var(--teal900));
    color: #fff;
    padding: 40px 16px 44px;
}

.gwf_hero_inner {
    max-width: 748px;
    margin: 0 auto;
}

.gwf_kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green300);
    margin-bottom: 10px;
}

.gwf_hero h1 {
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.12;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

/* Two numbers, no plot: stat tiles, not a chart. Translucent on the band rather than white
   cards, so the hero stays one object when it is screenshotted - which is this block's job. */
.gwf_hero_stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    /* Its own top margin rather than a bottom margin on whatever precedes it, so the gap does
       not depend on which of the heading or a standfirst is above it. */
    margin-top: 26px;
}

.gwf_hero_stat {
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    padding: 18px 20px;
}

.gwf_hero_label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--green300);
    margin-bottom: 8px;
}

.gwf_hero_value {
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* The "v" between two percentages: smaller and dimmer so the two numbers stay the thing being
   read, with its own spacing rather than whitespace in the markup. */
.gwf_hero_v {
    font-size: 20px;
    font-weight: 600;
    color: var(--green300);
    margin: 0 6px;
}

.gwf_hero_note {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--green100);
}

/* ------------------------------------------------------------------ intro */

/* The round in brief, straight under the hero: the page's one passage of standfirst-sized
   prose, so it reads a step up from the card previews and a step down from the hero sub. */
.gwf_intro {
    max-width: 780px;
    margin: 24px auto 0;
    padding: 0 16px;
}

.gwf_intro p {
    max-width: 62ch;
    font-size: 17px;
    line-height: 1.65;
    color: var(--grey900);
}

.gwf_intro p + p {
    margin-top: 12px;
}

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

/* Wraps on a desktop, where all ten fit in two rows at most; on a phone it becomes one row
   scrolling sideways instead - see the small-screen block. */
.gwf_jump {
    max-width: 780px;
    margin: 20px auto 4px;
    padding: 0 16px;
}

.gwf_jump_inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gwf_jump_link {
    flex-shrink: 0;
    padding: 7px 13px;
    background: #fff;
    border: 1px solid var(--grey300);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--grey800);
    text-decoration: none;
    white-space: nowrap;
}

.gwf_jump_link span {
    font-weight: 400;
    color: var(--grey500);
    margin: 0 4px;
}

.gwf_jump_link:hover {
    border-color: var(--teal600);
    color: var(--grey900);
}

/* ------------------------------------------------------------------- days */

/* A label with a rule running off it, not a boxed heading: the cards are the objects on this
   page and the day is just where a group starts. */
.gwf_day {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey700);
    margin: 28px 0 12px;
}

.gwf_day::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--grey300);
}

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

.gwf_match {
    background: #fff;
    border: 1px solid var(--grey200);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 1px 2px rgba(79, 76, 64, 0.05), 0 6px 20px rgba(79, 76, 64, 0.05);
}

.gwf_match + .gwf_match {
    margin-top: 12px;
}

/* The card's hero band, drawn from both kits. Pulled out to the card's edges by the padding it
   sits inside, and radiused to 15px rather than 16 - the card's radius measured from outside a
   1px border, which is the curve the inside of that border actually has. A 16 here leaves a
   hairline of white in each top corner. */
.gwf_match_art {
    position: relative;
    height: 56px;
    margin: -20px -22px 16px;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

/* Both sides span the full band and the away one is clipped over the top, rather than the two
   being boxed into a half each. Two boxes meeting at a seam show a sub-pixel line of card through
   the join at some widths; an underlay cannot.
 *
 * 58% wide against a seam that runs 58%→42%, so each kit finishes just past the widest point of
 * its own side and no club's last stripe is cut off by the diagonal. --kit comes from
 * ClubColours::BandStyle(), which documents why it arrives as a property and not a background. */
.gwf_art_side {
    position: absolute;
    inset: 0;
    background-image: var(--kit);
    background-repeat: no-repeat;
    background-size: 58% 100%;
}

.gwf_art_away {
    background-position: 100% 0;
    clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
}

/* Depth, and the reason white kits still read as a band. Brighton, Leeds, Spurs and Forest all
   lead with white, and at 56px tall an unshaded white stripe is indistinguishable from the card
   behind it - the same failure the chip's inset ring exists to prevent, at fifty times the area.
 *
 * Darkening only, no white at the top: lifting the highlight would take the one thing holding a
   white kit apart from the card and use it to make the problem worse. It never reaches zero
   either - a white stripe sitting at exactly the card's white is a hole in the band rather than
   a stripe, and Brighton lead with one, so their band appeared to start a fifth of the way in. */
.gwf_match_art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(79, 76, 64, 0.08) 45%, rgba(79, 76, 64, 0.24));
    box-shadow: inset 0 -1px 0 rgba(79, 76, 64, 0.22);
}

.gwf_match_head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.gwf_match_title {
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--grey900);
}

/* A chip and the club it labels, kept on one line. A chip that wraps away from its name is a
   colour identifying nothing, and colour alone does not identify a Premier League club - which
   is the whole basis on which docs/supported_team.md §1.2 allows a chip at all. */
.gwf_club {
    white-space: nowrap;
}

/* The kit chip, filled by ClubColours::ChipStyle(). Same 16px width as the table predictor's,
   which is not a coincidence or a taste: four stripes at 4px each is the point at which stripes
   stop reading as stripes, and Newcastle and Brighton both have four.
 *
 * The inset ring is load bearing rather than a nicety. Brighton, Leeds, Spurs and Forest all lead
 * with white and would otherwise lose a stripe, or the whole chip, into the card. */
.gwf_kit {
    display: inline-block;
    flex: 0 0 auto;
    width: 16px;
    height: 18px;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
    vertical-align: -3px;
    margin-right: 7px;
}

/* The away side's colours sit on the far side of its name, so the two clubs mirror each other
   and the pair reads outward from the fixture the way the card does below it: home on the left,
   away on the right, same as the percentages and the bar. */
.gwf_kit_away {
    margin-right: 0;
    margin-left: 7px;
}

/* Shorter for the table, where the row is set in 15px and a heading-sized chip would lead it. */
.gwf_kit_sm {
    height: 14px;
    vertical-align: -2px;
    margin-right: 6px;
}

.gwf_kit_sm.gwf_kit_away {
    margin-right: 0;
    margin-left: 6px;
}

.gwf_match_v {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: var(--grey500);
    padding: 0 2px;
}

.gwf_kick {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--grey700);
    background: var(--grey100);
    border-radius: 999px;
    padding: 4px 11px;
    font-variant-numeric: tabular-nums;
}

/* Three columns rather than flex space-between: the middle column has to sit over the middle
   of the bar whatever the numbers are. The full names live in the heading; down here the
   short codes only say which pole is which. */
.gwf_pcts {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 10px;
    margin-bottom: 8px;
}

.gwf_pole_draw { text-align: center; }
.gwf_pole_away { text-align: right; }

/* tabular-nums so the percentages down the page line up on their own column rather than
   shuffling by a pixel or two per row. */
.gwf_pct {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    line-height: 1.05;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The text uses the darker step of each pair, not the mark colour: a 30px number has to clear a
   text contrast bar the 16px bar beside it does not. The mark carries the identity, the ink
   stays ink. */
.gwf_pct_home { color: var(--green800); }
.gwf_pct_away { color: var(--red800); }
.gwf_pct_draw { color: var(--grey700); font-size: 22px; }

.gwf_pole_name {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--grey600);
}

/* -------------------------------------------------------------------- bar */

/* 2px of surface between fills, as a gap rather than a border: a border would eat into the
   segment and make a 5% segment narrower than 5%. */
.gwf_bar {
    display: flex;
    gap: 2px;
    height: 16px;
    margin: 0 0 18px;
}

.gwf_seg {
    display: block;
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 3px;          /* A 2% chance still has to be visible as something. */
    border-radius: 2px;
}

/* 4px rounding on the outer ends only, so the bar reads as one object anchored at both ends
   rather than three floating pills. */
.gwf_seg_home { background: var(--green600); border-radius: 4px 2px 2px 4px; }
.gwf_seg_draw { background: var(--grey400); }
.gwf_seg_away { background: var(--red700);  border-radius: 2px 4px 4px 2px; }

/* ------------------------------------------------------------ scorelines */

/* Closes the card beneath the prose, whose verdict sentence usually names the likeliest
   score - so the rule above it separates the writing from its evidence. The rule renders in
   the prose-less case too (under the big bar), where it is harmless. */
.gwf_scores_head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 8px;
    padding-top: 14px;
    border-top: 1px solid var(--grey200);
}

.gwf_scores_label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey600);
}

.gwf_xg {
    font-size: 13px;
    color: var(--grey700);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gwf_scores {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
    /* Roughly the prose measure below. Full-width lanes on a desktop card leave half the lane
       empty and push the percentages a long way from the bars they label. */
    max-width: 560px;
}

/* Chip, bar, number - three fixed lanes, so the bars all start from the same zero and the
   percentages sit in their own right-aligned column instead of trailing each bar at a
   different distance. */
.gwf_score {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
}

/* Coloured by which result the scoreline is, matching the big bar - but on the darker step of
   the green, because unlike the bar these carry text. green600 gives white only 4.08:1;
   green700 is 5.42 and red700 7.29.
 *
 * The draw is pale rather than a third dark fill, which solves two problems at once. No neutral
 * dark enough to hold white text stays far enough from green700 to be told apart - grey700 was
 * ΔE 11.4 in normal vision, under the floor - while the pale step reads at ΔE 40.8 against both
 * and takes grey900 text at 6.51:1. It also puts the neutral where the scale says it belongs:
 * absent of colour, between the two poles.
 *
 * The border is not decoration. grey200 on a white card is 1.32:1, so without it the chip has
 * no edge and the label appears to float. */
.gwf_score_chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    border-radius: 7px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gwf_score_home { background: var(--green700); }
.gwf_score_away { background: var(--red700); }
.gwf_score_draw {
    background: var(--grey200);
    border: 1px solid var(--grey400);
    color: var(--grey900);
}

/* No visible track: a track is an axis, and it would read as "of 100%" when the scale runs to
   25. The three bars starting from one left edge frame each other. */
.gwf_score_track {
    display: block;
}

/* Same fills as the big bar - one encoding, two marks - with the 4px rounding on the data end
   only, so the bar reads as growing from zero rather than as a floating pill. The grey draw
   fill sits under 3:1 against the card, which is allowed only because the percentage is
   printed in the next column - the same deal the big bar's midpoint segment has. */
.gwf_score_fill {
    display: block;
    height: 10px;
    min-width: 4px;
    border-radius: 2px 4px 4px 2px;
}

.gwf_fill_home { background: var(--green600); }
.gwf_fill_draw { background: var(--grey400); }
.gwf_fill_away { background: var(--red700); }

.gwf_score_pct {
    font-size: 13px;
    font-weight: 600;
    color: var(--grey700);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* --------------------------------------------------------------- preview */

/* The written preview, directly under the big bar - the bar is divider enough, so no rule of
   its own. Measure is capped because this is the only prose in the component, and full-width
   prose on a desktop card runs to well over a hundred characters. */
.gwf_preview {
    margin: 16px 0 0;
    max-width: 66ch;
    font-size: 15px;
    line-height: 1.65;
    color: var(--grey800);
}

.gwf_preview + .gwf_preview {
    margin-top: 10px;
}

/* --------------------------------------------------------------- summary */

.gwf_summary_day {
    margin-top: 36px;
}

.gwf_table_card {
    background: #fff;
    border: 1px solid var(--grey200);
    border-radius: 16px;
    padding: 8px 16px;
    box-shadow: 0 1px 2px rgba(79, 76, 64, 0.05), 0 6px 20px rgba(79, 76, 64, 0.05);
}

/* The wrapper scrolls rather than the page, so a narrow screen never scrolls the whole body. */
.gwf_table_wrap {
    overflow-x: auto;
}

.gwf_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    color: var(--grey800);
}

.gwf_table th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grey700);
    padding: 10px 10px 8px;
    border-bottom: 2px solid var(--grey200);
}

.gwf_table td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--grey200);
    line-height: 1.4;
}

.gwf_table tr:last-child td { border-bottom: none; }

.gwf_table a {
    color: var(--teal700);
    font-weight: 600;
    text-decoration: none;
}
.gwf_table a:hover { color: var(--teal900); }

.gwf_td_num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The favourite, in ink rather than in a fourth colour: emphasis is the text's own channel,
   and the row already has a diverging palette working two cells away. */
.gwf_td_fav {
    font-weight: 700;
    color: var(--grey900);
}

.gwf_td_score {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
    color: var(--grey900);
}

/* ------------------------------------------------------------ share & cta */

.gwf_share {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 28px 0 0;
}

/* The per-network intents under the share button. Same shape as the study's .bias_share and
   deliberately quieter than the button above them: that one is the primary action on a phone,
   and these are the fallback for the desktop half where navigator.share is missing. */
.gwf_share_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    /* Pulled up into the dead band under the status line. That line reserves 20px whether or not
       it has a message in it, so that a clipboard copy does not shove the page down when it
       reports back - which leaves a gap here on the every-time case where it says nothing. */
    margin-top: -8px;
}

.gwf_share_row_label {
    font-size: 13px;
    font-weight: 700;
    color: var(--grey700);
    margin-right: 2px;
}

.gwf_share_row a {
    color: var(--green800);
    text-decoration: none;
    border: 1px solid var(--grey300);
    border-radius: 999px;
    /* Sized for the touch target, not the icon, exactly as on the study: the icon is 18px and
       the button is 44px because the whole point of them is being pressed on a phone. */
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.gwf_share_row a svg { height: 18px; }

.gwf_share_row a:hover,
.gwf_share_row a:focus {
    background: var(--green100);
    border-color: var(--green400);
}

/* On the page's light ground now, not on the old dark container. */
.gwf_status {
    margin: 0;
    min-height: 20px;
    font-size: 14px;
    color: var(--green800);
}

.gwf_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border: 1px solid var(--grey300);
    border-radius: 8px;
    background: #fff;
    color: var(--grey800);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.gwf_btn_primary {
    background: var(--green700);
    border-color: var(--green700);
    color: #fff;
}
.gwf_btn_primary:hover { background: var(--green800); border-color: var(--green800); }

/* ----------------------------------------------------------------- author */

/* Who is writing, and their record. A white card like the matches, not a coloured callout: it is
   the same kind of object as everything above it - a claim with numbers under it - and dressing
   it as a promotion would be the one place on the page that asks to be believed rather than
   checked. */
.gwf_author {
    background: #fff;
    border: 1px solid var(--grey200);
    border-radius: 16px;
    padding: 22px;
    margin: 32px 0 0;
    box-shadow: 0 1px 2px rgba(79, 76, 64, 0.05), 0 6px 20px rgba(79, 76, 64, 0.05);
}

.gwf_author_h {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey700);
    margin-bottom: 12px;
}

.gwf_author_lead {
    font-size: 15px;
    line-height: 1.65;
    color: var(--grey800);
    max-width: 66ch;
}

/* auto-fit rather than four fixed columns: at 360px the four would each be too narrow to hold
   "of 399" on one line, and a wrapped denominator reads as a second number. */
/* Both rules live on this block rather than one of them on the note below, because the note is
   capped to a reading measure and a border on it stops short of the card edge - which reads as a
   mistake rather than as a divider. */
.gwf_author_stats {
    list-style: none;
    margin: 18px 0 0;
    padding: 16px 0;
    border-top: 1px solid var(--grey200);
    border-bottom: 1px solid var(--grey200);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px 12px;
}

/* No bottom rule when nothing follows it. */
.gwf_author_stats:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.gwf_author_num {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--green800);
    font-variant-numeric: tabular-nums;
}

/* The denominator rides with the position at a smaller size, so "2 of 399" reads as one figure
   rather than as two competing ones. */
.gwf_author_of {
    font-size: 15px;
    font-weight: 600;
    color: var(--grey600);
    margin-left: 5px;
}

.gwf_author_lab {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--grey700);
}

/* The limit, set in the same ink as the lead rather than hidden in small print. A record that
   only listed the good years would be the genre this page is trying not to be. */
/* main.css gives a bare <a> grey500, which on this card reads as body text that happens to be
   paler. The same teal the summary table's links use, so a link looks like a link everywhere on
   the page. */
.gwf_author_note a {
    color: var(--teal700);
    font-weight: 600;
    text-decoration: none;
}
.gwf_author_note a:hover { color: var(--teal900); text-decoration: underline; }

.gwf_author_note {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--grey700);
    max-width: 66ch;
}

.gwf_generated {
    font-size: 13px;
    color: var(--grey700);
    text-align: center;
    margin: 16px 0 36px;
}

/* Closes on the hero's surface, so the page is bookended rather than trailing off. */
.gwf_cta {
    background:
        repeating-linear-gradient(115deg,
            rgba(255, 255, 255, 0.035) 0 56px, transparent 56px 112px),
        linear-gradient(150deg, var(--green900), var(--teal900));
    color: #fff;
    padding: 40px 16px calc(56px + var(--safe-bottom));
}

.gwf_cta_inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.gwf_cta h2 {
    font-size: 26px;
    color: #fff;
    margin-bottom: 12px;
}

.gwf_cta p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--green100);
    max-width: 46em;
    margin: 0 auto 22px;
}

/* The one loud thing on the page, and it is on the dark band where nothing competes with it:
   yellow500 under green900 text is 10.9:1, and the hover lightens because the text is dark. */
.gwf_btn_cta {
    background: var(--yellow500);
    border-color: var(--yellow500);
    color: var(--green900);
    font-size: 16px;
    padding: 14px 30px;
}
.gwf_btn_cta:hover { background: var(--yellow400); border-color: var(--yellow400); }

/* ------------------------------------------------------------------ small */

@media (max-width: 560px) {
    .gwf_hero { padding: 28px 16px 32px; }

    /* One row, scrolling sideways rather than wrapping into a wall of pills. The negative
       margin lets the row bleed to the screen edge, so a half-visible pill signals there is
       more to scroll. */
    .gwf_jump_inner {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -16px;
        padding: 2px 16px 8px;
        -webkit-overflow-scrolling: touch;
    }

    /* The hero stacks: two 40px numbers side by side on a phone leaves neither room to
       breathe, and this block is the one people screenshot. */
    .gwf_hero_stats { grid-template-columns: 1fr; }
    .gwf_hero_value { font-size: 34px; }
    .gwf_hero_v { font-size: 17px; margin: 0 4px; }

    .gwf_match { padding: 16px; border-radius: 14px; }
    .gwf_match_title { font-size: 17px; }

    /* Shallower, and re-pulled to the phone card's own padding and radius. Ten cards down a
       phone, 56px of decoration each is 560px of scrolling before the tenth match exists. */
    .gwf_match_art { height: 40px; margin: -16px -16px 14px; border-radius: 13px 13px 0 0; }

    .gwf_pct { font-size: 24px; }
    .gwf_pct_draw { font-size: 18px; }
    .gwf_pole_name { font-size: 11px; }
    .gwf_score { grid-template-columns: 44px minmax(0, 1fr) 38px; gap: 10px; }
    .gwf_day { margin-top: 22px; }
    .gwf_table_card { padding: 4px 10px; }
    .gwf_cta h2 { font-size: 22px; }
}