/* Free tools + Learn (2026-11-03). Shares the landing header styles. */
.site main.site-main { max-width: 820px; padding: 18px 16px 40px; }
.lp-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 12px max(16px, calc((100vw - 1120px) / 2));
  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.lp-top .topnav { margin-left: auto; }
.lp-top .btn-sm { margin: 0; }
.topnav a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 720px) { .lp-top .btn-sm { margin-left: auto; } }
.crumbs { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.crumbs a { color: var(--muted); }
.site h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.1; margin: 10px 0 8px; color: var(--ink); }
.lede { font-size: 18px; color: var(--muted); margin: 0 0 22px; }
.tool { background: linear-gradient(160deg, var(--sand), var(--panel)); border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: grid; gap: 14px; }
.tool label { font-weight: 600; }
.tool input, .tool select { font-size: 18px; padding: 11px 12px; width: 100%; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tool-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0; }
.tool-out div { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.tool-out dt { font-size: 13px; color: var(--muted); }
.tool-out dd { margin: 4px 0 0; font: 700 22px var(--display); color: var(--palm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tool-stake { max-width: 240px; }
.rg-note { background: var(--sand); border-left: 4px solid var(--sunset); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0; }
.explainer { margin-top: 30px; }
.explainer h2 { font-size: 24px; margin: 26px 0 8px; color: var(--ink); }
.explainer p, .explainer li { font-size: 17px; line-height: 1.65; }
.explainer.learn { margin-top: 0; }
.related h2 { font-size: 20px; }
.rel { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.rel a { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; text-decoration: none; color: var(--ink); background: var(--panel); }
.rel a:hover { border-color: var(--palm); }
.hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.hub-card { display: block; text-decoration: none; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; transition: transform .2s, border-color .2s; }
.hub-card:hover { border-color: var(--palm); transform: translateY(-2px); }
.hub-card h2 { font-size: 19px; margin: 0 0 4px; color: var(--palm); }
.hub-card p { margin: 0; font-size: 14px; }
.soft-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 40px 0 0; padding: 18px; border-radius: 20px; background: var(--sand); border: 1px solid var(--line); }
.soft-cta div { flex: 1 1 260px; }
.soft-cta p { margin: 4px 0 0; }
.soft-cta .btn { margin: 0; }

/* Phase 4.2: NFL team pages + book-vs-book pages (rendered by /odds.js) */
.team-odds, .book-vs { margin: 20px 0 28px; }
.team-odds { min-height: 245px; } .book-vs { min-height: 346px; }            /* reserve the loaded card's height (CLS) */
@media (max-width: 600px) { .team-odds { min-height: 348px; } .book-vs { min-height: 436px; } }
.team-sides { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; font-size: 17px; }
.team-sides .odds { color: var(--palm, #1F6B4A); }
.vs-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 10px 0; }
.vs-row .bar { grid-column: 1 / -1; height: 10px; border-radius: 6px; background: var(--line, #e6e1d6); overflow: hidden; }
.vs-row .bar-fill { height: 100%; background: var(--palm, #1F6B4A); width: 0; }
.vs-pct { font-variant-numeric: tabular-nums; font-weight: 600; }