/* Hallmark · shape: Workbench (draw 631fd6) · genre: modern-minimal · theme: brand · redesign: full · job: start a league
 * paper: #FDF9EE cream paper · accent: #FE540C · display: the site's sans (Inter stack) 850 · body: the same stack · hero: Stage (swapped from Banner) · nav: kept (the site header) · footer: kept (the site footer) · signature: the real scoring screen standing over the real overlay on a live stream, in the hero
 * hero-review: fix · 5 findings · 5 resolved · finish-review: subagent · 7 findings · 6 resolved 1 answered (heads kept as the owner wrote them) · gap: the terms stay behind their disclosures, as the polish left them
 * axes: light/grotesk-heavy/chromatic-orange · posture: committed (navy field bands) · contrast: pass · fold: pass · imagery: screenshots 16 (the owner's own app and overlay captures) · surface: absolute · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, the owner's facts keep the pricing and leagues screens wordy; every disclosure kept closed and every section given one composition so the squint still reads */
/* Hallmark · waive 7b · surface: absolute, the white screens band and the white plan and league cards on cream · the ThisOver brand's own card system, shared with every other page */
/* Hallmark · waive 47b · the phone frames are baked into the owner's captures by tool/marketing/frame_phones.py · real ThisOver app screens inside each one */
/* Hallmark · waive 42 · the shared ThisOver header and four-column footer, kept as the owner asked · every page of thisover.com uses them */
/* Hallmark · dismissed F4 · the second fill is the carousel's current dot (.phones-dots button::before), a position marker, not a button */
/* Hallmark · dismissed 3 · the three columns of .h-steps are a real <ol> with counter numerals, no icon tiles */
/* Hallmark · dismissed 49 · every .btn carries white-space: nowrap in style.css, so the long button labels never wrap */
/* Hallmark · waive 49b · the arrow links, .league-card and the footer links run to two lines at 320 · each is a real phrase that names its page, and the league card holds a name and a sentence */
/* Hallmark · answered F19 · the brand's display weight (850) over body 400, with 600 to 750 on labels and buttons, as on every ThisOver page */
/* Hallmark · dismissed kept-heading players never pay · the h1 is the same words, set over two lines with a <br> as before */
/* Hallmark · dropped the drawn batter, the drawn stumps and the drawn scoring phone (hero-batter.webp, hero-stumps.webp, .phone) · 80 and 84 name them; the real scoring screen and overlay captures lead the hero instead */
/* Home page only (linked from index.html after style.css). Everything here is
   scoped under .hm, so the shared header and footer keep style.css's look. */

/* ---------------------------------------------------------------- frame */
html,body{overflow-x:clip}
[hidden]{display:none!important}
.hm{--container:1160px;--gutter:24px}
.hm .phones-btn:disabled{opacity:.55;cursor:not-allowed}
.hm :focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.hm .on-dark :focus-visible{outline-color:var(--color-accent)}
.hm .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.hm h1,.hm h2,.hm h3{text-wrap:balance}
.hm h1{font-size:clamp(2.5rem,3vw + 1rem,3.75rem);line-height:1.02;font-weight:var(--display-weight);letter-spacing:var(--tracking-display);max-width:none}
.hm h2{font-size:clamp(2rem,2vw + 1rem,3rem);line-height:1.05;font-weight:var(--display-weight);letter-spacing:var(--tracking-display);max-width:20ch}
.hm h3{font-size:var(--text-title);line-height:1.2;font-weight:750;letter-spacing:-.015em}
.hm .lead{font-size:var(--text-lead);line-height:1.45;color:var(--color-muted);max-width:52ch;margin-top:var(--space-md)}
.hm .on-dark{background:var(--color-field);color:var(--color-on-field)}
.hm .on-dark .lead,.hm .on-dark p{color:var(--color-on-field-2)}
.hm .on-dark h2,.hm .on-dark h3{color:var(--color-on-field)}
.hm .h-more{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-xl);margin-top:var(--space-xl)}
.hm .h-head-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap-columns);align-items:start}
.hm .h-head-split h2{grid-column:1 / span 6}
.hm .h-head-split .lead{grid-column:8 / span 5;margin-top:0}
/* One composition a section; no reveals (the page is composed). */
.js.motion .hm .rv{opacity:1;transform:none}
.hm .plan.best::before{display:none}
.hm section{padding-block:var(--section-gap-s)}

/* ---------------------------------------------------------------- hero */
.hm .h-hero{display:grid;align-items:center;min-height:calc(100svh - 72px - var(--space-3xl));padding-block:var(--space-xl);background:var(--color-paper);container-type:inline-size}
.hm .h-hero::before,.hm .h-hero::after{content:none}
.hm .h-hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:var(--space-xl);align-items:center}
.hm .h-hero h1{color:var(--color-ink)}
.hm .h-hero .lead{max-width:34ch;margin-top:var(--space-lg)}
.hm .h-hero .cta{margin-top:var(--space-xl);gap:var(--space-sm)}
/* The store badges stay, a step quieter than the two buttons above them. */
.hm .h-hero .stores.app{margin-top:var(--space-md);gap:var(--space-xs)}
.hm .h-hero .stores.app .store{padding:var(--space-xs) var(--space-md) var(--space-xs) var(--space-sm);gap:var(--space-xs)}
.hm .h-hero .stores.app .store svg{width:20px;height:20px}
.hm .h-hero .stores.app .store small{font-size:.7rem}
.hm .h-hero .stores.app .store b{font-size:var(--text-sm)}
.hm .h-hero .also{margin-top:var(--space-md);font-size:var(--text-sm)}
/* The overlay still across, the scoring screen standing over its right end;
   the figure runs on into the right margin (up to 96px) on a wide screen. */
.hm .h-shot{margin:0 max(calc(-1 * var(--space-3xl)),min(0px,calc((var(--container) - 100cqw) / 2 + var(--space-lg)))) var(--space-xl) 0;display:grid;grid-template-columns:minmax(0,60fr) minmax(0,28fr) minmax(0,12fr);grid-template-rows:auto 1fr}
.hm .h-stream{grid-column:1 / 3;grid-row:1;width:100%;height:auto;margin-top:var(--space-2xl);border-radius:var(--space-sm);box-shadow:var(--shadow-card)}
.hm .h-phone{grid-column:2 / 4;grid-row:1 / 3;justify-self:end;width:100%;height:auto;filter:drop-shadow(0 24px 32px var(--color-shade))}
.hm .h-shot figcaption{grid-column:1 / 2;grid-row:2;margin-top:var(--space-sm);padding-right:var(--space-lg);font-size:var(--text-sm);color:var(--color-muted)}

/* ---------------------------------------------------------------- live strips */
.hm .results .wrap,.hm .numbers .wrap{max-width:var(--container);padding-inline:var(--gutter)}
.hm .numbers{background:var(--color-paper-2);border-bottom:0}
@media (max-width:520px){.hm .numbers dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}.hm .numbers dd{font-size:clamp(1.5rem,7vw,2.25rem);font-variant-numeric:tabular-nums}}

/* ---------------------------------------------------------------- match day */
.hm .h-match{padding-bottom:var(--section-gap-s)}
.hm .h-steps{list-style:none;counter-reset:step;margin:var(--space-2xl) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap-columns)}
.hm .h-steps li{counter-increment:step;border-top:var(--rule-hair) solid var(--color-on-field-rule);padding-top:var(--space-lg)}
.hm .h-steps li::before{content:counter(step);display:block;font-size:var(--text-display-s);font-weight:var(--display-weight);line-height:1;letter-spacing:var(--tracking-display);color:var(--color-accent-on-field);font-variant-numeric:tabular-nums;margin-bottom:var(--space-md)}
.hm .h-steps p{margin-top:var(--space-xs);max-width:45ch}
.hm .h-sub{margin-top:var(--space-3xl)}
.hm .h-sub h3{font-size:clamp(2rem,2vw + 1rem,3rem);line-height:1.05;font-weight:var(--display-weight);letter-spacing:var(--tracking-display)}
.hm .h-sub p{margin-top:var(--space-md);font-size:var(--text-lead)}
.hm .h-match .phones-wrap{margin-top:var(--space-lg)}
.hm .h-match .phones-wrap.wide .phones{padding-inline:max(var(--gutter),calc(50% - 580px + var(--gutter)))}
.hm .h-match .phone-slide figcaption b{color:var(--color-on-field)}
.hm .h-match .phone-slide figcaption span{color:var(--color-on-field-2)}
.hm .on-dark .phones-btn{border-color:var(--color-on-field-2);color:var(--color-on-field)}
.hm .on-dark .phones-btn:hover{background:var(--color-on-field);color:var(--color-ink)}
.hm .on-dark .phones-dots button::before{background:var(--color-on-field-rule)}
.hm .on-dark .phones-dots button:hover::before{background:var(--color-on-field-2)}
.hm .on-dark .phones-dots button[aria-current="true"]::before{background:var(--color-accent)}
.hm .h-match .h-more{margin-top:var(--space-lg)}
.hm .h-match .phones-ctl{justify-content:flex-start;padding-inline:max(var(--gutter),calc(50% - 580px + var(--gutter)))}

/* ---------------------------------------------------------------- scoring rows */
.hm .h-scoring{background:var(--color-paper)}
.hm .h-scoring-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--space-2xl);align-items:start}
.hm .h-scoring details.fine.more{margin-top:var(--space-lg)}
.hm .h-rows{list-style:none;margin:0;padding:0;border-bottom:var(--rule-hair) solid var(--color-rule)}
.hm .h-rows li{border-top:var(--rule-hair) solid var(--color-rule)}
.hm .h-rows a{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(0,1.3fr);column-gap:var(--space-lg);align-items:baseline;padding-block:var(--space-lg);text-decoration:none;color:var(--color-ink);transition:color var(--dur-short) var(--ease-out)}
.hm .h-rows svg{width:24px;height:24px;color:var(--color-accent-text);align-self:center}
.hm .h-rows b{font-size:var(--text-lg);font-weight:750;letter-spacing:-.01em}
.hm .h-rows span{color:var(--color-muted)}
.hm .h-rows a:hover b{color:var(--color-accent-text)}
.hm .h-rows a:active b{color:var(--color-ink)}

/* ---------------------------------------------------------------- screens rail */
.hm .h-screens{background:var(--color-card)}
.hm .h-screens .phones-wrap{margin-top:var(--space-2xl)}
.hm .h-screens .phones{padding-inline:max(var(--gutter),calc(50% - 580px + var(--gutter)))}

/* ---------------------------------------------------------------- leagues + find a team */
.hm .h-leagues{background:var(--color-paper-2)}
.hm .h-split,.hm .h-find{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--space-2xl);align-items:center}
.hm .h-leagues .cta{margin-top:var(--space-lg)}
.hm .h-leagues details.fine.more{margin-top:var(--space-md)}
.hm .h-find{grid-template-columns:minmax(0,7fr) minmax(0,5fr);margin-top:var(--space-3xl);padding-top:var(--space-3xl);border-top:var(--rule-hair) solid var(--color-rule-strong)}
.hm .h-find>.h-head{order:2}
.hm .h-find .req{margin:0;max-width:none}
.hm .h-find .req+.req{margin-top:var(--space-md)}

/* ---------------------------------------------------------------- pricing as rows */
.hm .h-pricing{background:var(--color-paper)}
.hm .h-pricing .plans{grid-template-columns:minmax(0,1fr);gap:0;margin-top:var(--space-2xl);border-bottom:var(--rule-hair) solid var(--color-rule-strong)}
.hm .h-pricing .plan{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) minmax(0,4fr) minmax(0,2.8fr) minmax(0,2.6fr);grid-template-areas:"flag price per lives btn" "name price per lives btn";column-gap:var(--gap-columns);align-items:center;padding:var(--space-lg) 0;background:none;border:0;border-top:var(--rule-hair) solid var(--color-rule-strong);border-radius:0;box-shadow:none}
.hm .h-pricing .plan .flag{position:static;grid-area:flag;justify-self:start;align-self:end}
.hm .h-pricing .plan .name{grid-area:name;align-self:start;font-size:var(--text-lg);color:var(--color-ink)}
.hm .h-pricing .plan:not(.best) .name{align-self:center;grid-row:1 / span 2}
.hm .h-pricing .price{grid-area:price;margin:0;grid-row:1 / span 2}
.hm .h-pricing .per{grid-area:per;margin:0;grid-row:1 / span 2}
.hm .h-pricing .plan .lives{grid-area:lives;margin:0;grid-row:1 / span 2}

.hm .h-pricing .plan .btn{grid-area:btn;grid-row:1 / span 2;width:auto;margin:0;justify-self:end;display:inline-block;text-align:center}
.motion .hm .h-pricing .plan:hover{transform:none}
.hm .h-pricing .plans-all,.hm .h-pricing .links{text-align:left;justify-content:flex-start;margin-inline:0}
.hm .h-pricing details.fine{margin-inline:0}
.hm .h-pricing .offers{margin-top:var(--space-2xl);gap:var(--gap-columns)}
.hm .h-pricing .offers .cell{background:none;border:0;border-top:var(--rule-hair) solid var(--color-rule-strong);border-radius:0;box-shadow:none;padding:var(--space-lg) 0 0}
.motion .hm .h-pricing .offers .cell:hover{transform:none;box-shadow:none}
.hm .h-pricing .offers .ic{display:inline-block;width:auto;height:auto;background:none;margin:0 0 var(--space-xs);color:var(--color-accent-text)}
.hm .h-pricing .offers .ic svg{width:24px;height:24px}
.motion .hm .h-pricing .offers .cell:hover .ic svg{transform:none}

/* ---------------------------------------------------------------- video */
.hm .h-video-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--space-2xl);align-items:center}
.hm .h-video .video{max-width:none;margin:0}

/* ---------------------------------------------------------------- close */
.hm .h-close-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--space-2xl);align-items:stretch;margin-top:var(--space-3xl)}
.hm .h-close-grid>*{border-top:var(--rule-hair) solid var(--color-on-field-rule);padding-top:var(--space-2xl)}
.hm .h-close-grid h2{font-size:var(--text-display-s)}
.hm .h-close-grid .lead{margin-top:0}
.hm .h-close-grid .stores{margin-top:var(--space-lg)}
.hm .h-close-grid .store{min-width:0;}

/* ---------------------------------------------------------------- narrow */
@media (max-width:60rem){
  .hm .h-hero{min-height:0;padding-block:var(--space-xl) var(--space-2xl)}
  .hm .h-hero h1{font-size:clamp(2.1rem,7vw + .5rem,3.25rem)}
  .hm .h-hero-text{display:contents}
  .hm .h-hero .h-hero-grid{row-gap:0}
  .hm .h-hero-grid>*,.hm .h-hero-text>*{order:4}
  .hm .h-hero h1{order:1}.hm .h-hero .lead{order:2}.hm .h-shot{order:3;margin:var(--space-lg) 0 0}
  .hm .h-hero .cta{margin-top:var(--space-lg)}
  .hm .h-hero-grid,.hm .h-scoring-grid,.hm .h-split,.hm .h-find,.hm .h-video-grid,.hm .h-close-grid{grid-template-columns:minmax(0,1fr);row-gap:var(--space-xl)}
  .hm .h-find>.h-head{order:0}
  .hm .h-head-split{grid-template-columns:minmax(0,1fr)}
  .hm .h-head-split h2,.hm .h-head-split .lead{grid-column:1}
  .hm .h-head-split .lead{margin-top:var(--space-md)}
  .hm .h-steps{grid-template-columns:minmax(0,1fr);row-gap:var(--space-xl)}
  .hm .h-rows a{grid-template-columns:24px minmax(0,1fr);row-gap:var(--space-2xs)}
  .hm .h-rows span{grid-column:2}
  .hm .h-pricing .plan{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"flag flag" "name price" "per per" "lives lives" "btn btn";row-gap:var(--space-xs)}
  .hm .h-pricing .plan:not(.best) .name,.hm .h-pricing .price,.hm .h-pricing .per,.hm .h-pricing .plan .lives,.hm .h-pricing .plan .btn{grid-row:auto}
  .hm .h-pricing .plan .btn{width:100%;margin-top:var(--space-xs)}
}
@media (prefers-reduced-motion:reduce){.hm .h-rows a{transition:none}}