.page { max-width: 880px; margin: 0 auto; padding: 0 20px 40px; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; }
.page-head nav { display: flex; gap: 16px; }
.page-head nav a { color: inherit; text-decoration: none; }
.page-head nav a:hover { text-decoration: underline; }
.page-main h1 { font-size: clamp(34px, 6vw, 52px); line-height: 1.05; letter-spacing: -.02em; margin: 18px 0 8px; }
.page-main h2 { font-size: 22px; margin: 34px 0 8px; }
.lede { font-size: 18px; max-width: 62ch; margin: 0 0 8px; }
.muted { opacity: .72; }
.page-foot { margin-top: 44px; font-size: 13px; opacity: .72; }
.sport-card { margin-top: 18px; padding: 16px; border: 1px solid rgb(255 255 255 / .14); border-radius: 8px; }
.sport-card h3 { margin: 0 0 4px; font-size: 18px; }
.cal { width: 100%; max-width: 480px; display: block; margin-top: 10px; }
.cal text { fill: currentColor; font-size: 11px; }
.cal .grid { stroke: rgb(255 255 255 / .16); }
.cal .ideal { stroke: rgb(255 255 255 / .4); stroke-dasharray: 4 4; }
.cal .pt { fill: #ffd23f; }
table.bins { width: 100%; max-width: 480px; margin-top: 10px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bins th, .bins td { padding: 3px 6px; text-align: right; border-bottom: 1px solid rgb(255 255 255 / .12); }
.recent, .bets { list-style: none; margin: 0; padding: 0; }
.recent li, .bets li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid rgb(255 255 255 / .12); }
.hit { color: #6fe0a0; }
.miss { color: #ffa08a; }
.group { padding: 12px; margin-top: 10px; border: 1px solid rgb(255 255 255 / .14); border-radius: 8px; }
.group header { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; }
.group ul { margin: 6px 0; padding: 0; list-style: none; opacity: .85; }
.totals { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0; font-size: 20px; font-weight: 700; }
.totals small { display: block; font-size: 12px; font-weight: 500; opacity: .7; }
.form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 10px; }
.form label { display: grid; gap: 3px; font-size: 13px; }
.page input { width: 130px; height: 40px; padding: 0 10px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .4); border-radius: 6px; color: inherit; font: inherit; }
.page button { min-height: 40px; padding: 0 14px; background: #ffd23f; color: #0c0f10; border: 0; border-radius: 6px; font-weight: 700; cursor: pointer; }
.page button.ghost { background: none; color: inherit; border: 1px solid rgb(255 255 255 / .25); font-weight: 500; }
.warn { padding: 10px 12px; margin-top: 10px; background: #3a1a16; border-radius: 6px; }
.limit { margin: 14px 0; display: grid; gap: 4px; justify-items: start; }

/* Legal pages */
.legal { max-width: 70ch; }
.legal ul { padding-left: 20px; }
.legal li + li { margin-top: 4px; }
.legal p + p { margin-top: 10px; }
.legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.legal .caps { font-size: 14px; letter-spacing: .01em; }
.legal .ph { padding: 0 3px; background: #ffd23f; color: #0c0f10; border-radius: 3px; }
.statement { margin: 18px 0; padding: 16px 18px; border: 1px solid rgb(255 255 255 / .14); border-left: 4px solid #ffd23f; border-radius: 8px; }
.table-wrap { overflow-x: auto; margin-top: 10px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal-table th, .legal-table td { padding: 8px 10px 8px 0; text-align: left; vertical-align: top; border-bottom: 1px solid rgb(255 255 255 / .14); }
.legal-table code { font-family: inherit; white-space: nowrap; }
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
.legal-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.notice { margin-top: 12px; padding: 10px 12px; font-size: 14px; border: 1px solid rgb(255 255 255 / .14); border-radius: 8px; }
@media (max-width: 520px) {
  .page-head { flex-wrap: wrap; row-gap: 8px; }
  .page-head nav { gap: 14px; font-size: 15px; }
  .page-head nav a { white-space: nowrap; }
}