/* Hero card: compact Scene 1. Scoped to .hs1; uses the site's tokens with fallbacks (light + dark). */
.hs1{--hs1-surface:var(--surface,#fff);--hs1-s2:var(--surface-2,#EEF3E6);--hs1-line:var(--line,#D7DFD0);--hs1-ink:var(--ink,#0E1A12);--hs1-muted:var(--muted,#4A5A4F);--hs1-moss:var(--moss,#2B6B10);--hs1-spark:var(--spark,#7ED321);--hs1-on:var(--on-spark,#0E1A12);--hs1-wash:var(--wash,#E6F4D3);
  position:relative;margin:0;background:var(--hs1-surface);color:var(--hs1-ink);border:1px solid var(--hs1-line);border-radius:22px;box-shadow:var(--shadow,0 18px 50px -24px rgba(15,44,30,.45));overflow:hidden;font-size:14px;line-height:1.45;min-width:0}
@media (prefers-color-scheme:dark){.hs1{--hs1-surface:var(--surface,#11281B);--hs1-s2:var(--surface-2,#163323);--hs1-line:var(--line,#24402F);--hs1-ink:var(--ink,#EEF5EA);--hs1-muted:var(--muted,#A9BBAE);--hs1-moss:var(--moss,#9BE34A);--hs1-wash:var(--wash,#1A3A23)}}
.hs1 *{box-sizing:border-box}
.hs1 p{margin:0}
.hs1-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hs1-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--hs1-line);background:color-mix(in srgb,var(--hs1-s2) 55%,var(--hs1-surface))}
.hs1-av{flex:none;width:36px;height:36px;border-radius:50%;background:#0F2C1E;color:var(--hs1-spark);display:grid;place-items:center;font:800 16px var(--display,system-ui)}
.hs1-id{display:grid;line-height:1.2;min-width:0}.hs1-id b{font:700 15px var(--display,system-ui)}.hs1-id span{font-size:12.5px;color:var(--hs1-muted)}
.hs1-illus{margin-left:auto;font-size:11.5px;color:var(--hs1-muted);border:1px solid var(--hs1-line);padding:3px 9px;border-radius:999px;white-space:nowrap}
.hs1-steps{display:flex;gap:6px;padding:12px 16px 0;list-style:none;margin:0}
.hs1-steps li{flex:1;display:grid;gap:5px;font-size:11.5px;font-weight:650;color:var(--hs1-muted)}
.hs1-steps li:before{content:'';height:4px;border-radius:4px;background:var(--hs1-line);transition:background .4s}
.hs1[data-step="1"] .hs1-steps li:nth-child(-n+1):before,.hs1[data-step="2"] .hs1-steps li:nth-child(-n+2):before,.hs1[data-step="3"] .hs1-steps li:before{background:var(--hs1-spark)}
.hs1-stage{display:grid;padding:14px 16px}
/* Panes share one grid cell: the card is as tall as the tallest pane, so nothing jumps or clips. */
.hs1-pane{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .45s,transform .45s,visibility 0s .45s}
.hs1[data-step="1"] [data-pane="1"],.hs1[data-step="2"] [data-pane="2"],.hs1[data-step="3"] [data-pane="3"]{opacity:1;visibility:visible;transform:none;transition:opacity .45s,transform .45s,visibility 0s}
.hs1-chip{display:inline-block;font-size:11.5px;font-weight:700;color:var(--hs1-moss);background:var(--hs1-wash);border-radius:999px;padding:2px 9px}
.hs1-welcome h4{margin:8px 0 2px;font:800 22px/1.1 var(--display,system-ui);letter-spacing:-.02em}
.hs1-q{color:var(--hs1-muted);margin-bottom:10px!important}
.hs1-ch{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hs1-ch li{position:relative;text-align:center;font-weight:700;padding:16px 4px;border:2px solid var(--hs1-line);border-radius:14px;transition:border-color .3s,background .3s}
.hs1-ch i{position:absolute;top:5px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--hs1-spark);color:var(--hs1-on);font:700 11px/18px system-ui;font-style:normal;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.hs1.t-text [data-ch="text"],.hs1.t-email [data-ch="email"]{border-color:var(--hs1-spark);background:var(--hs1-wash)}
.hs1.t-text [data-ch="text"] i,.hs1.t-email [data-ch="email"] i{transform:scale(1)}
.hs1-more{margin-top:10px!important;font-size:12.5px;color:var(--hs1-muted)}
.hs1-more small{font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.hs1-done{margin-top:12px!important;font-weight:800;color:var(--hs1-moss);opacity:0;transition:opacity .4s}.hs1-done span{font-weight:500;color:var(--hs1-muted)}
.hs1.t-done .hs1-done{opacity:1}
.hs1-sms{display:flex;flex-direction:column;gap:8px}
.hs1-b{max-width:85%;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.hs1-b.on{opacity:1;transform:none}
.hs1-b p{padding:9px 13px;border-radius:18px;font-size:14.5px;line-height:1.35}
.hs1-b.max p{background:var(--hs1-s2);border-bottom-left-radius:6px}
.hs1-b.me{align-self:flex-end}.hs1-b.me p{background:#2F7D18;color:#fff;border-bottom-right-radius:6px}
.hs1-b small,.hs1-disc{display:block;margin-top:3px;font-size:10.5px;color:var(--hs1-muted)}
.hs1-mail{font-size:13.5px;display:grid;gap:6px;align-content:start}
.hs1-from{font-size:12.5px;overflow-wrap:anywhere}.hs1-from b{font-weight:700}
.hs1-lbl{font-size:11px;font-style:italic;color:var(--hs1-muted)}
.hs1-focus{margin:0;padding-left:18px}.hs1-focus li{margin:1px 0}
.hs1-sub{font-weight:650}
.hs1-acc{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.hs1-acc li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;padding:5px 9px;border:1px solid var(--hs1-line);border-radius:10px}
.hs1-acc b{font-size:13.5px}.hs1-acc span{grid-column:1;font-size:12px;color:var(--hs1-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs1-acc em{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-size:11px;font-weight:650;color:var(--hs1-moss);background:var(--hs1-wash);border-radius:999px;padding:2px 7px;white-space:nowrap}
.hs1-foot{display:flex;align-items:center;gap:10px;padding:0 16px 16px}
.hs1-cta{display:inline-flex;align-items:center;background:var(--hs1-spark);color:var(--hs1-on);font-weight:700;font-size:13.5px;padding:8px 16px;border-radius:999px;text-decoration:none}
.hs1-replay{font:inherit;font-size:13px;background:transparent;color:var(--hs1-ink);border:1px solid var(--hs1-line);border-radius:999px;padding:7px 14px;cursor:pointer}
.hs1-cta:focus-visible,.hs1-replay:focus-visible{outline:3px solid var(--hs1-moss);outline-offset:2px}
@media (max-width:420px){.hs1-stage{padding:12px 14px}.hs1-illus{display:none}.hs1-welcome h4{font-size:20px}}
/* Reduced motion (or no JS): no animation; the email (the payoff) shows, fully readable. */
@media (prefers-reduced-motion:reduce){.hs1 *,.hs1 *:before{transition:none!important;animation:none!important}}
.hs1.hs1-static .hs1-pane{opacity:1;visibility:visible;transform:none}
.hs1.hs1-static [data-pane="1"],.hs1.hs1-static [data-pane="2"]{display:none}

/* ux_fixes_2026-11-02: live vs soon channels, full account lines, panes centered so no frame looks empty. */
.hs1-ch li.soon{color:var(--hs1-muted);border-style:dashed;opacity:.6}.hs1-ch li.soon small{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.hs1-acc span{white-space:normal;overflow:visible;text-overflow:clip}.hs1-welcome,.hs1-sms{align-self:center}.hs1-sms .hs1-lbl{margin-bottom:2px}

/* gameday_site_2026-11-02: phone width. The panes share one grid cell, so the card is as tall as the tallest pane (the email).
   Keep the email compact (3 accounts and the focus list, each on one line) so the welcome and hello panes leave no tall blank gap. */
@media (max-width:560px){
 .hs1-stage{padding:10px 14px}
 .hs1-mail{gap:4px;font-size:13px}
 .hs1-focus{margin:0;padding:0;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .hs1-focus li{display:inline;margin:0}
 .hs1-focus li+li:before{content:" · "}
 .hs1-acc li:nth-child(n+4){display:none}
 .hs1-acc{grid-template-columns:minmax(0,1fr)}
 .hs1-acc li{display:flex;align-items:center;gap:6px;padding:5px 8px;min-width:0}
 .hs1-acc b{flex:none}
 .hs1-acc span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .hs1-acc em{flex:none}
}