/* ===========================================================================
   Mood Street landing demo: the iconic card, the deck, the throw.
   A web translation of MoodStreet/Views/Sentiment/SentimentCardView.swift,
   DeckStack.swift (deck geometry + throw constants) and Color+Theme.swift.
   Loaded after the inline page styles, so it may override them.
   =========================================================================== */

:root {
    /* surfaces */
    --ms-card: #1E1E1E;
    --ms-obsidian: #0A0A0A;
    /* brand */
    --ms-accent: #DA7756;
    --ms-sand: #E8C49A;
    --ms-coin-gold: #FFD452;
    /* market */
    --ms-bull: #33D97F;
    --ms-bear: #EF4444;
    --ms-flat: #8E8E93;
    /* ink */
    --ms-ink-90: rgba(255,255,255,.90);
    --ms-ink-70: rgba(255,255,255,.70);
    --ms-ink-45: rgba(255,255,255,.45);
    --ms-ink-40: rgba(255,255,255,.40);
    --ms-ink-35: rgba(255,255,255,.35);
    --ms-ink-25: rgba(255,255,255,.25);
    --ms-hairline: rgba(255,255,255,.06);
    /* geometry */
    --ms-card-radius: 24px;
    --ms-plate-radius: 20px;
    --ms-gutter: 16px;
    --ms-ring-width: 2px;
    --ms-chart-h: 150px;
    --ms-bar-h: 8px;
    /* the one brand ring: card border, coin chip, story circles */
    --ms-ring: conic-gradient(from 0deg, #DA7756, #FFD452, #FF8C73, #D98CF2, #E8C49A, #DA7756);
    --ms-card-shadow: 0 5px 20px rgba(218,119,86,.12), 0 12px 24px rgba(0,0,0,.4);
    --ms-glow-top: linear-gradient(to bottom, rgba(218,119,86,.14), rgba(218,119,86,.03), transparent);
    --ms-glow-bottom: linear-gradient(to bottom, transparent, rgba(218,119,86,.08));
}

/* A card thrown 500px sideways must never widen the document. */
body { overflow-x: clip; }

/* ---------------------------------------------------------------- the demo */
.demo { min-width: 0; position: relative; padding: 8px 12px 0; }
.demo-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; color: var(--soft); font-size: 12px; }
.demo-label span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.demo figcaption { color: rgba(233,228,220,.55); font-size: 12px; text-align: center; margin-top: 14px; text-wrap: balance; }

/* ----------------------------------------------------------- the deck stack
   Three bottom anchored layers: front card, the real next card at .955 / +12,
   a bare plate at .91 / +22. DeckGeometry.homePeekRoom is 38. */
.deck {
    --ms-card-h: clamp(560px, 82vh, 700px);
    position: relative;
    width: min(100%, 400px);
    /* The card is a phone: about 0.57 wide for tall. The viewport height alone
       cannot hold that, because in tablet portrait the hero column is narrow
       while 82vh is tall, and the card became a 700px skyscraper (0.448 at
       768x1024). aspect-ratio drives the height from the card's OWN width and
       the vh clamp stays on as the cap. 726 = 700 + the 26px of peek room. */
    aspect-ratio: 400 / 726;
    height: auto;
    max-height: calc(var(--ms-card-h) + 26px);
    margin-inline: auto;
}
/* The empty state is one seal, one line and a text button: holding a whole
   card of near black under it reads as a page that failed to load. */
.deck.is-empty { aspect-ratio: auto; height: clamp(300px, 46vh, 380px); }
.deck-slot { position: absolute; left: 0; right: 0; top: 0; height: calc(100% - 26px); transform-origin: bottom center; }
.deck-slot[data-layer="1"] { z-index: 3; }
.deck-slot[data-layer="2"] { z-index: 2; }
.deck-slot[data-layer="3"] { z-index: 1; }
.deck-rim { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.20); border-radius: var(--ms-card-radius); pointer-events: none; }
/* The next card peeks by 12px: that sliver reads as a card edge, not as a
   half line of someone else's paragraph. */
.deck-slot[data-layer="2"] .deck-rim {
    /* border-box origin, or the gradient is laid out inside the padding box and
       the 1px border line shows the repeat, which leaks a sliver of the card
       behind it into the peek. */
    background: linear-gradient(to top, #1E1E1E 0 34px, rgba(30,30,30,0) 74px) border-box no-repeat;
}
.msc.is-dim .msc-ring { display: none; }
.deck-plate { position: absolute; inset: 0; background: rgba(30,30,30,.7); border: 1px solid rgba(255,255,255,.14); border-radius: var(--ms-plate-radius); }
.msc-throw { position: absolute; inset: 0; will-change: transform; }

/* ------------------------------------------------------------- the surface */
.msc {
    position: absolute; inset: 0;
    background: var(--ms-card);
    border-radius: var(--ms-card-radius);
    box-shadow: var(--ms-card-shadow);
    overflow: hidden;
    touch-action: pan-y;
    -webkit-user-select: none; user-select: none;
}
.msc.is-dim { opacity: .5; }
.msc.is-grabbed { touch-action: none; }
.msc::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 140px; background: var(--ms-glow-top); pointer-events: none; }
.msc::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: var(--ms-glow-bottom); pointer-events: none; }
.msc-front { animation: msFloat 2.8s ease-in-out infinite alternate; }
@keyframes msFloat { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
.msc:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 4px; }

/* the 2px conic mood ring, drawn as a masked border */
.msc-ring {
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    border-radius: var(--ms-card-radius);
    padding: var(--ms-ring-width);
    background: var(--ms-ring);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
/* the vote edge takes the ring's place while the card is grabbed */
.msc-edge { position: absolute; inset: 0; z-index: 4; pointer-events: none; border: 3px solid transparent; border-radius: var(--ms-card-radius); opacity: 0; }
.msc-wash { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; }

/* overscroll-behavior is deliberately NOT set: contain froze the whole page
   while the cursor sat over the card, and on a phone it ate the first reading
   swipe. The default chains to the page once the card's content ends, which is
   what the app does when the card is not being thrown. */
.msc-scroll { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.msc-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.msc-body { padding-bottom: 24px; }

/* ---------------------------------------------------------------- header */
.msc-head { padding: 24px var(--ms-gutter) 14px; }
.msc-over { display: flex; align-items: center; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.msc-over .ticker { color: var(--ms-ink-70); }
.msc-over .sep { color: var(--ms-ink-25); margin: 0 6px; }
.msc-over .cls { color: var(--ms-ink-45); }
.msc-glyphs { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--ms-ink-40); }
.msc-glyphs svg { width: 14px; height: 14px; display: block; }
.msc-name { margin-top: 12px; font-size: 20px; font-weight: 500; line-height: 1.2; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msc-quote { margin-top: 12px; display: flex; align-items: baseline; gap: 10px; }
.msc-price { font-family: ui-rounded, "SF Pro Rounded", Inter, sans-serif; font-size: 42px; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.msc-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.msc-pill svg { width: 11px; height: 11px; display: block; }
.msc-pill.up { color: var(--ms-bull); background: rgba(51,217,127,.15); }
.msc-pill.down { color: var(--ms-bear); background: rgba(239,68,68,.15); }
.msc-pill.flat { color: var(--ms-flat); background: rgba(142,142,147,.15); }
.msc-cap { margin-top: 8px; font-size: 11px; color: var(--ms-flat); }

/* ----------------------------------------------------------- chart block */
.msc-chart { padding-bottom: 10px; }
.msc-ranges { display: flex; justify-content: center; align-items: center; gap: 2px; padding: 0 10px; }
/* .40 ink measured 3.78:1 on #1E1E1E; .55 measures 5.5:1. Five of the six
   chips are inactive at any moment, so this is most of the chart row. */
.msc-range { border: 0; background: transparent; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.1; color: rgba(255,255,255,.55); transition: color .18s, background-color .18s; }
.msc-range[aria-pressed="true"] { color: var(--ms-accent); font-weight: 700; background: rgba(218,119,86,.12); }
.msc-plot { margin-top: 8px; padding: 0 6px; height: var(--ms-chart-h); }
.msc-plot svg { display: block; width: 100%; height: var(--ms-chart-h); }
.msc-axis-t { font-size: 9px; fill: var(--ms-ink-35); }
.msc-prev-t { font-size: 9px; font-weight: 500; fill: var(--ms-ink-40); }

/* -------------------------------------------------------------- KPI grid */
.msc-kpis { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 8px; padding: 0 var(--ms-gutter) 10px; }
.msc-kpi { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.msc-kpi .k { font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.46); white-space: nowrap; }
.msc-kpi .v { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ms-ink-90); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------------- sentiment bar */
.msc-sent { padding: 12px var(--ms-gutter); }
.msc-bar { position: relative; height: var(--ms-bar-h); }
.msc-bar-track { position: absolute; inset: 0; border-radius: 4px; background: rgba(255,255,255,.14); transition: opacity .25s ease-out; }
.msc-bar-fills { position: absolute; inset: 0; display: flex; gap: 1.5px; }
.msc-bar-fills i { display: block; width: 0; border-radius: 4px; transition: width .3s ease-out; }
.msc-bar-fills .bear { background: var(--ms-bear); }
.msc-bar-fills .pass { background: rgba(232,196,154,.6); }
.msc-bar-fills .bull { background: var(--ms-bull); }
.msc-sent.is-revealed .msc-bar-track { opacity: 0; }
.msc-sent-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.msc-sent-h { font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ms-accent); white-space: nowrap; }
/* The tallies hold no width before the reveal, or they crowd the header off
   its line on a narrow card. */
.msc-tally { display: none; align-items: center; gap: 12px; }
.msc-sent.is-revealed .msc-tally { display: flex; }
.msc-tally span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.msc-tally .t-bear { color: var(--ms-bear); }
.msc-tally .t-pass { color: var(--ms-sand); }
.msc-tally .t-bull { color: var(--ms-bull); }
.msc-tally svg { display: block; }
.msc-filter { color: var(--ms-ink-40); display: flex; }
.msc-filter svg { width: 13px; height: 13px; display: block; }
/* The label that makes an illustrative bar acceptable cannot be the least
   legible line on the card: .35 ink measured 3.21:1, .6 measures 6.0:1. */
.msc-illus { display: none; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,.6); }
.msc-sent.is-revealed .msc-illus { display: block; }

.msc-div { height: 1px; background: var(--ms-hairline); }

/* --------------------------------------------------------------- recap */
.msc-about { padding: 16px var(--ms-gutter) 0; }
.msc-sec { display: flex; align-items: center; gap: 8px; }
.msc-sec i { display: block; width: 2px; height: 14px; border-radius: 1px; background: var(--ms-sand); }
.msc-sec span { font-size: 13px; font-weight: 500; color: var(--ms-ink-45); }
/* Ragged right: justified text on a 360px card opened rivers and split
   words at the line end ("be- hind") on a phone. */
.msc-about p { margin-top: 10px; font-size: 15px; line-height: 1.4; color: var(--ms-ink-90); text-align: left; }

/* --------------------------------------------------------------- stamps */
.msc-stamps { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
/* The stamp is a positioned FRAME, and .box is the stamped word inside it.
   A stamp that was its own box could only be as wide as the space left of
   its own inset, so "SUPER BULL" broke over two lines at every width and its
   strapline, hung below the box, landed on the KPI grid. The frame spans the
   card for the centred stamps, the box shrinks to its one nowrap line, and
   the strapline is a second row of the same column. */
.msc-stamp { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 9px; opacity: 0; }
.msc-stamp .box { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 3px solid currentColor; border-radius: 8px; font-size: 24px; font-weight: 900; letter-spacing: 2px; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.msc-stamp svg { width: 20px; height: 20px; display: block; }
.msc-stamp[data-k="bull"] { top: 28px; left: 28px; align-items: flex-start; color: var(--ms-bull); }
.msc-stamp[data-k="bear"] { top: 28px; right: 28px; align-items: flex-end; color: var(--ms-bear); }
.msc-stamp[data-k="pass"] { top: 50%; left: 0; right: 0; color: var(--ms-sand); }
.msc-stamp[data-k="superbull"] { top: 50%; left: 0; right: 0; color: var(--ms-bull); }
.msc-stamp[data-k="superbear"] { top: 50%; left: 0; right: 0; color: var(--ms-bear); }
/* The app ignites a super over a full card ZStack, so its two lines always
   have a ground of their own (SentimentFeedView.swift:2628). The three
   centred stamps land wherever the card's middle happens to be, which on a
   700px card is the KPI grid, so they carry that ground with them. The two
   corner stamps sit over the header and are left as they are. */
.msc-stamp[data-k="pass"] .box,
.msc-stamp[data-k="superbull"] .box,
.msc-stamp[data-k="superbear"] .box { background: rgba(14,14,14,.74); }
.msc-stamp .sub { font-size: 12px; font-weight: 800; letter-spacing: 1.8px; white-space: nowrap; padding: 3px 9px; border-radius: 6px; background: rgba(14,14,14,.74); }
.msc-pass-glyph { display: block; width: 26px; height: 9px; border-radius: 5px; background: currentColor; }

/* ---------------------------------------------------------- empty deck */
.deck-empty { position: absolute; left: 0; right: 0; top: 0; height: calc(100% - 26px); z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 0 24px; }
.deck-empty svg { width: 64px; height: 64px; color: var(--ms-bull); }
.deck-empty .deck-empty-t { font-family: Barlow, sans-serif; font-size: 40px; font-weight: 700; line-height: 1; color: #fff; letter-spacing: -.01em; }
.deck-empty p { font-size: 15px; color: var(--soft); max-width: 320px; }
.deck-again { border: 0; background: transparent; color: var(--ms-accent); font-size: 13px; font-weight: 600; min-height: 44px; padding: 0 8px; }
.deck-again:hover { color: #f0a288; }

/* ---------------------------------------------------- hint and feedback */
.deck-hint { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font-size: 12px; color: var(--muted); text-wrap: balance; }
.deck-hint svg { width: 15px; height: 15px; flex: none; color: var(--ms-accent); }
.deck-hint span { text-align: center; text-wrap: balance; }
.demo-answer { margin-top: 10px; min-height: 38px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; color: var(--soft); text-wrap: balance; }

@media (max-width: 1050px) {
    .demo { padding-inline: 4px; }
}
@media (max-width: 760px) {
    .demo { max-width: 420px; width: 100%; margin-inline: auto; padding-inline: 8px; }
    .deck { --ms-card-h: clamp(520px, 76vh, 660px); }
}
@media (max-width: 480px) {
    /* One line for the sentiment row on a phone width card. The header keeps
       the app's 1.2px tracking and the filter glyph keeps its place: the
       tallies give up the width instead, since they only exist after a call. */
    .msc-tally { gap: 7px; }
    .msc-tally span { font-size: 9px; gap: 3px; }
}
@media (max-width: 370px) {
    .deck { --ms-card-h: clamp(500px, 74vh, 620px); }
    .msc-kpis { column-gap: 10px; }
    /* On a 272px card the header and the three tallies cannot share a line at
       the app's tracking, so the tallies take a second line with the filter
       glyph at its end, rather than the header giving up its letter spacing. */
    .msc-sent-row { flex-wrap: wrap; row-gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .msc-front { animation: none; }
}

/* No JavaScript, no deck: do not leave a tall empty box. */
.deck:empty { height: 0; }

/* ===========================================================================
   Below the hero, the launch email's story (moodstreet-newsletter-app-store-
   launch.html, sent 2026-09-30) at the site's own widths: what the game is in
   two beats, how it plays in four real 1.0.1 screens, the Mood Street Index
   drawn live, Season 1 with its clock, then the rust band. The components are
   DESIGN.md's: the phone frame (bezel #141210 with a 1px warm rim), the 3px
   mood ring around the lead phone, the 2px ring panel around the chart and
   the season card, the rubber swipe stamps, the M coin. Rows alternate the
   phone left and right from 761px and stack, phone first, below it.
   =========================================================================== */
:root {
    --ms-bezel: #141210;
    --ms-bezel-rim: #3B2F28;
    --ms-rule: #2C2723;
    --ms-chart-ground: #0D0C0B;
    --ms-faint: #A29D95;
    --ms-frame: conic-gradient(from 200deg, #DA7756, #FFD452, #FF8C73, #D98CF2, #E8C49A, #DA7756);
    --ms-frame-lead: conic-gradient(from 210deg, #DA7756, #FFD452, #FF8C73, #D98CF2, #E8C49A, #DA7756);
}

.coin-mark {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--coin); color: #1a1205;
    font-family: Barlow, sans-serif; font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: 0;
}

/* ------------------------------------------------- what it is: two beats */
.what {
    padding-block: 112px 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px 88px; align-items: end;
}
.what h2 { font-size: clamp(44px, 4.2vw, 60px); }
.what h2 span { display: block; }
.what h2 span + span { color: var(--rust); }
.halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 44px; }
.half { border-top: 1px solid var(--ms-rule); padding-top: 22px; }
.half h3, .play-copy h3 { font-family: Barlow, sans-serif; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.half h3 { font-size: 30px; line-height: 1.05; }
.half h3 span { color: var(--sand); }
.half p { margin-top: 12px; max-width: 44ch; font-size: 15px; line-height: 1.6; color: var(--soft); }
.half .coin-mark { display: inline-grid; width: 20px; height: 20px; font-size: 14px; vertical-align: -4px; margin-right: 7px; }

/* ------------------------------------------------------ how it plays */
.plays { padding-block: 136px 0; }
.plays > h2 { text-align: center; font-size: clamp(52px, 5.4vw, 76px); }
.play {
    display: grid; grid-template-columns: auto minmax(0, 460px);
    justify-content: center; align-items: center; column-gap: clamp(56px, 8vw, 112px);
    margin-top: 112px;
}
.plays > h2 + .play { margin-top: 72px; }
.play.flip { grid-template-columns: minmax(0, 460px) auto; }
.play.flip > .shot { grid-column: 2; grid-row: 1; }
.play.flip > .play-copy { grid-column: 1; grid-row: 1; }
.play-copy { min-width: 0; }
.play-copy h3 { font-size: clamp(36px, 3.4vw, 48px); line-height: 1; }
.play-copy h3 span { color: var(--sand); }
.play-copy > p { margin-top: 20px; max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--muted); }
.play-copy > p.lead { color: var(--soft); }
.play-copy > p strong { color: var(--text); font-weight: 600; }

/* The phone: the real screen inside a bezel. Each inner radius is the outer
   one minus the padding, so the corners nest (DESIGN.md, Shapes). */
.shot { --scr: 264px; --scr-r: 34px; --pad: 7px; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.shot-lead { --scr: 300px; --scr-r: 40px; --pad: 9px; }
.phone {
    width: calc(var(--scr) + 2 * var(--pad) + 2px); max-width: 100%;
    padding: var(--pad); border: 1px solid var(--ms-bezel-rim);
    border-radius: calc(var(--scr-r) + var(--pad) + 1px);
    background: var(--ms-bezel);
}
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 720 / 1564; border-radius: var(--scr-r); background: var(--surface); }
.ring { max-width: 100%; padding: 3px; border-radius: calc(var(--scr-r) + var(--pad) + 3px); background: var(--rust); background-image: var(--ms-frame-lead); }
.ring .phone { width: calc(var(--scr) + 2 * var(--pad)); border: 0; border-radius: calc(var(--scr-r) + var(--pad)); }
.shot figcaption { margin-top: 12px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .3px; color: var(--ms-faint); }

/* The app's rubber verdict stamps, set in the copy (DESIGN.md, Swipe
   Stamps): Bull green, Bear red, Pass sand, super rust. */
.calls { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.calls li { font-size: 16px; line-height: 1.6; color: var(--text); }
.stamp {
    display: inline-block; padding: 0 7px; border: 2px solid currentColor; border-radius: 5px;
    font-size: 12px; line-height: 19px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase;
    white-space: nowrap; vertical-align: 1px;
}
.stamp.bull { color: var(--ms-bull); }
.stamp.bear { color: var(--ms-bear); }
.stamp.pass { color: var(--ms-sand); }
.stamp.super { color: var(--ms-accent); }

/* The ten analyst discs: a white plate under every logo, since the ten PNGs
   ship on four different grounds (AnalystAvatar, LeaderboardView.swift). */
.discs { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.discs li { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; }
.discs img { display: block; width: 23px; height: 23px; border-radius: 50%; object-fit: contain; }
.play-copy > p.fine { margin-top: 18px; max-width: 52ch; font-size: 12px; line-height: 1.55; color: var(--ms-faint); }

/* ---------------------------------------------- the Mood Street Index */
.index {
    padding-block: 136px 0;
    display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 420px);
    justify-content: center; align-items: center; gap: 40px clamp(48px, 7vw, 96px);
}
.chart { min-width: 0; }
.chart-frame { padding: 2px; border-radius: 28px; background: var(--rust); background-image: var(--ms-frame); }
.chart-in {
    border-radius: 26px; padding: 22px 22px 16px 24px;
    background:
        linear-gradient(180deg, rgba(218,119,86,.13) 0, rgba(218,119,86,.03) 70px, rgba(218,119,86,0) 140px),
        linear-gradient(0deg, rgba(218,119,86,.05) 0, rgba(218,119,86,0) 80px),
        var(--ms-chart-ground);
}
.chart-title { font-family: Barlow, sans-serif; font-weight: 700; font-size: clamp(26px, 2.5vw, 32px); line-height: 1; color: var(--text); }
.chart-title .ix { color: var(--rust); }
.chart-title .vs { color: rgba(233,228,220,.55); }
.chart-title .sp { color: var(--sand); }
.chart-sub { margin-top: 8px; font-size: 14px; line-height: 1.4; font-weight: 500; color: rgba(233,228,220,.66); }
.chart-plot { position: relative; margin-top: 14px; }
.chart-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-state { position: absolute; inset: 0 0 30px; display: grid; place-items: center; text-align: center; font-size: 13px; color: var(--muted); }
.chart-cap { margin: 14px auto 0; max-width: 460px; text-align: center; font-size: 12px; line-height: 1.45; font-weight: 600; letter-spacing: .3px; color: var(--ms-faint); text-wrap: balance; }
.msi-svg text { font-family: Inter, sans-serif; font-variant-numeric: tabular-nums; }
.msi-svg .ybase { font-weight: 600; fill: rgba(233,228,220,.66); }
.msi-svg .xtick { font-weight: 600; letter-spacing: .8px; fill: rgba(233,228,220,.6); }
.msi-svg .lvl { font-family: Barlow, sans-serif; font-weight: 700; }
.msi-svg .lname { font-weight: 600; fill: rgba(233,228,220,.74); }
.index-copy { min-width: 0; }
.index-copy h2 { font-size: clamp(40px, 4vw, 56px); }
.index-copy > p { margin-top: 20px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.index-copy > p strong { color: var(--text); font-weight: 600; }
.index-copy > p a { color: var(--rust); text-underline-offset: 3px; }
.index-copy > p a:hover { color: #f0a288; }

/* ------------------------------------------------------------ Season 1
   The clock is filled by demo.js from the data attributes and changes state
   on opening day and at the closing bell, so the copy cannot go stale
   between publishes while scripts run; the static date line names both
   dates for a visitor without scripts. The heading is two tone through
   ::first-line (the markup keeps its one <br>), and demo.js swaps it for
   the email's date line once the season is open. */
.season {
    padding-block: 136px 128px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 48px 88px; align-items: center;
}
.season-copy h2 { font-size: clamp(46px, 4.7vw, 66px); color: var(--sand); }
.season-copy h2::first-line { color: var(--text); }
.season-copy h2 .l1 { display: block; color: var(--text); }
.season-copy h2 .l2 { display: block; color: var(--sand); }
.season-lead { margin-top: 22px; max-width: 440px; font-size: 16px; line-height: 1.6; color: var(--soft); }
.season-copy .text-link { margin-top: 22px; }
.season-frame { min-width: 0; padding: 2px; border-radius: 28px; background: var(--rust); background-image: var(--ms-frame); }
/* The clock: four Barlow numbers with tabular digits so the seconds never
   jitter, terracotta colons, small caps labels. role=timer keeps screen
   readers quiet (a timer's live region is off by default); the aria-label
   carries the day count and is refreshed once a minute. */
.season-clock {
    border-radius: 26px; padding: 34px clamp(18px, 3vw, 36px) 32px; text-align: center;
    background:
        linear-gradient(180deg, rgba(218,119,86,.16) 0, rgba(218,119,86,0) 64px),
        linear-gradient(0deg, rgba(218,119,86,.09) 0, rgba(218,119,86,0) 170px),
        var(--bg);
}
.clock-label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); }
.clock-label.is-open { color: var(--green); }
.clock-label.is-closed { color: var(--sand); }
.clock-digits { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin-top: 16px; }
.clock-unit { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; max-width: 132px; }
.clock-unit strong {
    font-family: Barlow, sans-serif; font-weight: 700; font-size: clamp(56px, 5.4vw, 88px); line-height: .9; letter-spacing: -.01em;
    color: #fff; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: center;
}
.clock-unit span { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(233,228,220,.55); }
.clock-colon { font-family: Barlow, sans-serif; font-weight: 700; font-size: clamp(42px, 4.2vw, 68px); line-height: 1.05; color: var(--rust); flex: 0 0 auto; }
.clock-date { margin-top: 20px; font-size: 14px; line-height: 1.5; color: var(--soft); }
.clock-digits.is-done .clock-unit strong { color: var(--sand); }
.season-prizes { margin: 12px auto 0; max-width: 470px; font-size: 12px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* ------------------------------------------------------------ widths */
/* From 1051px the tour sits on the page grid: two equal halves of the
   1200px measure, the phone centred in its half and the copy starting on a
   column line, so a flipped row's copy starts on the page margin like the
   hero and the season, and a plain row's copy on the right column line the
   beats and the season share. The phones grow with the width but never
   past the viewport's height (0.46 is the 720 by 1564 screen's ratio), so
   the lead phone keeps its ring on screen on a short laptop display. */
@media (min-width: 1051px) {
    .play, .play.flip { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
    .play-copy { max-width: 460px; }
    .shot { --scr: min(320px, calc((100vh - 110px) * .46)); --scr-r: calc(var(--scr) * .13); --pad: 8px; }
    .shot-lead { --scr: min(360px, calc((100vh - 90px) * .46)); --pad: 10px; }
}
@media (max-width: 1050px) {
    .what { grid-template-columns: 1fr; align-items: start; padding-block: 96px 0; }
    .play, .index, .season { column-gap: 48px; }
    .shot { --scr: 240px; --scr-r: 31px; }
    .shot-lead { --scr: 272px; --scr-r: 37px; }
}
@media (max-width: 900px) {
    .index { grid-template-columns: minmax(0, 600px); }
    .season { grid-template-columns: minmax(0, 1fr); }
    .season-frame { max-width: 620px; }
    .clock-unit strong { font-size: clamp(56px, 12vw, 88px); }
    .clock-colon { font-size: clamp(40px, 9vw, 68px); }
}
@media (max-width: 760px) {
    .what { padding-block: 72px 0; gap: 32px; }
    .plays { padding-block: 96px 0; }
    .plays > h2 { font-size: 56px; }
    .plays > h2 + .play { margin-top: 48px; }
    .play, .play.flip { grid-template-columns: minmax(0, 1fr); row-gap: 34px; margin-top: 80px; justify-items: center; }
    .play.flip > .shot, .play.flip > .play-copy { grid-column: auto; grid-row: auto; }
    .play-copy { width: 100%; max-width: 460px; }
    .play-copy h3 { font-size: 38px; }
    .shot { --scr: 224px; --scr-r: 29px; --pad: 6px; }
    .shot-lead { --scr: 256px; --scr-r: 35px; --pad: 8px; }
    .index { padding-block: 96px 0; row-gap: 36px; }
    .index-copy h2 { font-size: 44px; }
    .season { padding-block: 96px 88px; gap: 36px; }
    .season-copy h2 { font-size: 50px; }
    .season-lead { margin-top: 18px; }
}
@media (max-width: 640px) {
    .halves { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .what h2 { font-size: 46px; }
}
@media (max-width: 420px) {
    .chart-in { padding: 18px 16px 12px 18px; }
    .chart-sub { font-size: 13px; }
    .season-clock { padding-inline: 14px; }
}
@media (max-width: 370px) {
    .what h2 { font-size: 40px; }
    .plays > h2 { font-size: 48px; }
    .play-copy h3 { font-size: 34px; }
    .shot { --scr: 208px; --scr-r: 27px; }
    .shot-lead { --scr: 236px; --scr-r: 32px; }
    .season-copy h2 { font-size: 40px; }
    .clock-unit strong { font-size: 48px; }
    .clock-colon { font-size: 34px; }
    .clock-unit span { font-size: 9px; letter-spacing: .08em; }
}