/* Homepage layout (DESIGN.md). Tokens and components live in base.css. */
.hm{max-width:calc(var(--wrap) + 40px);margin:0 auto;padding:0 20px}
.hm-hero{padding:96px 0 64px;max-width:780px}
.hm-hero h1{font-size:clamp(40px,6.6vw,64px);line-height:1.02;letter-spacing:-.02em}
.hm-lede{margin:20px 0 0;max-width:46ch;font-size:19px;line-height:1.55;color:var(--ink-muted)}
.hm-quick{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0;max-width:640px}
.hm-quick input{flex:1 1 320px;min-width:0;min-height:56px;padding:0 16px;border:1px solid var(--hairline-strong);border-radius:var(--r-ctl);background:var(--surface-2);color:var(--ink);font:15px var(--mono)}
.hm-quick input::placeholder{color:var(--ink-faint)}
.hm-quick input:focus{outline:2px solid var(--accent);outline-offset:2px}
.hm-quick .btn{min-height:56px;padding:0 24px}

/* tool grid: 6 tiles in a 3-column grid, alternating wide and narrow so no row repeats */
.hm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{display:flex;flex-direction:column;gap:24px;padding:24px;border:1px solid var(--hairline);border-radius:var(--r-panel);background:var(--surface-1);color:var(--ink-muted);overflow:hidden;transition:border-color .2s var(--ease)}
a.tile:hover{border-color:var(--hairline-strong)}
a.tile:hover .go::after{transform:translateX(4px)}
.tile h2{font-size:24px;margin:0 0 8px}
.tile p{font-size:15.5px;max-width:52ch}
.go{display:inline-flex;align-items:center;gap:6px;margin-top:16px;min-height:24px;font-weight:600;color:var(--ink)}
.go::after{content:"→";color:var(--accent);transition:transform .2s var(--ease)}
.tile img{display:block;width:100%;height:auto;border:1px solid var(--hairline);border-radius:var(--r-ctl);background:var(--surface-2)}
.tile figure{margin:0}
.t-canvas img{aspect-ratio:16/8;object-fit:cover;object-position:top}
.tile figcaption{margin-top:8px;font-size:13px;color:var(--ink-faint)}
.t-check,.t-arena,.t-guides{grid-column:span 2}
.t-check{display:grid;grid-template-columns:5fr 7fr;align-items:center}
.t-arena{display:grid;grid-template-columns:5fr 6fr;align-items:start}
.t-guides{display:grid;grid-template-columns:5fr 6fr;align-items:start}
.t-live,.t-canvas,.t-custom{justify-content:space-between}
.standings{border-top:1px solid var(--hairline)}
.st-h{padding:12px 0 4px;font-size:13px;color:var(--ink-subtle)}
.standings ol{list-style:none;margin:0;padding:0}
.standings li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--hairline);color:var(--ink)}
.standings li b{font:500 15px var(--mono);font-variant-numeric:tabular-nums}
.standings .up{color:var(--up)}.standings .down{color:var(--down)}
.st-note{padding-top:8px;font-size:13px;color:var(--ink-faint)}
.sk{height:24px;border-radius:6px;background:var(--surface-2);border:0!important;margin:10px 0}
.glist{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.glist a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid var(--hairline);color:var(--ink);font-size:15px}
.glist a::after{content:"→";color:var(--ink-faint);transition:transform .2s var(--ease),color .2s var(--ease)}
.glist a:hover::after{transform:translateX(4px);color:var(--accent)}
.t-custom .cta{display:flex;flex-wrap:wrap;gap:8px}
.t-custom .cta .btn{flex:1 1 auto}
.hm-nfa{margin:32px 0 0;font-size:14px;color:var(--ink-subtle)}

@media (max-width:980px){
  .hm-grid{grid-template-columns:1fr 1fr}
  .t-check,.t-arena,.t-guides{grid-column:span 2}
}
@media (max-width:720px){
  .hm-hero{padding:48px 0 40px}
  .hm-lede{font-size:17px}
  .hm-quick .btn{width:100%}
  .hm-grid{grid-template-columns:1fr}
  .t-check,.t-arena,.t-guides{grid-column:auto;grid-template-columns:1fr}
  .tile{padding:20px}
}