:root {
  color-scheme: light;
  --navy: #101d32;
  --navy-2: #1a2b43;
  --ink: #192334;
  --muted: #77808d;
  --line: #e5e6e2;
  --paper: #f8f8f5;
  --white: #fff;
  --lime: #d7f36a;
  --green: #247244;
  --red: #b64c3e;
  --amber: #967525;
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
a { color: inherit; }
button, input, select { font: inherit; }
.topbar { height: 72px; padding: 0 max(5.5vw, 24px); display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: var(--white); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; font: 800 12px/1 "Manrope", sans-serif; letter-spacing: .095em; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #d7f36a; color: var(--lime); border-radius: 8px 8px 8px 2px; font: 800 15px "Manrope", sans-serif; }
.brand-light { color: #9fa9b6; font-weight: 600; }
.season-tag { display: flex; align-items: center; gap: 9px; color: #c3cbd4; font: 500 10px "DM Mono", monospace; letter-spacing: .12em; }
.live-dot { width: 7px; height: 7px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 4px #d7f36a1b; }

main { max-width: 1260px; margin: 0 auto; padding: 0 32px; }
.hero { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 326px; padding: 58px 0 53px; overflow: hidden; }
.hero-copy { position: relative; z-index: 1; max-width: 560px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: #66717d; font: 500 10px "DM Mono", monospace; letter-spacing: .13em; }
.eyebrow-rule { width: 25px; height: 1px; background: #b3b9b6; }
h1, h2 { margin: 0; font-family: "Manrope", sans-serif; letter-spacing: -.055em; }
h1 { font-size: clamp(48px, 6.2vw, 74px); line-height: .99; font-weight: 800; }
h1 span { color: #638345; }
.hero-description { max-width: 410px; margin: 19px 0 0; color: #727b86; font-size: 14px; line-height: 1.7; }
.week-card { z-index: 1; width: 255px; min-height: 132px; padding: 22px 23px; border: 1px solid #e5e6e2; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px #101d320a; }
.week-card-label, .week-card-foot { display: block; color: #79818a; font: 500 9px "DM Mono", monospace; letter-spacing: .1em; }
.week-card strong { display: block; margin: 14px 0 13px; color: var(--navy); font: 700 19px "Manrope", sans-serif; letter-spacing: -.04em; }
.week-card-foot { padding-top: 11px; border-top: 1px solid #ecece9; color: #7e8790; letter-spacing: .06em; }
.week-calendar { margin-right: 5px; color: #769550; font-size: 13px; }
.hero-stamp { position: absolute; top: -32px; right: 275px; z-index: 0; width: 210px; height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e8e9e5; border-radius: 50%; color: #e8eae6; transform: rotate(-12deg); }
.hero-stamp span { font: 800 12px "Manrope", sans-serif; letter-spacing: .24em; }
.hero-stamp strong { font: 800 93px/.9 "Manrope", sans-serif; letter-spacing: -.1em; }
.hero-stamp i { margin-top: 8px; font: normal 7px/1.5 "DM Mono", monospace; letter-spacing: .15em; text-align: center; }

.stats-strip { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--navy); border-radius: 11px; overflow: hidden; color: var(--white); }
.summary-stat { min-height: 115px; padding: 21px 25px; border-right: 1px solid #ffffff18; }
.summary-stat:last-child { border-right: 0; }
.summary-label { display: block; color: #a3adb8; font: 500 9px "DM Mono", monospace; letter-spacing: .12em; }
.summary-stat strong { display: block; margin: 9px 0 5px; font: 700 24px "Manrope", sans-serif; letter-spacing: -.04em; }
.summary-note { display: block; color: #a3adb8; font-size: 10px; }
.summary-stat-edge strong { color: var(--lime); font-size: 20px; }
.summary-stat-record strong { color: var(--lime); }
.summary-stat-updated strong { font-size: 17px; }

.board-section { padding: 73px 0 0; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.section-kicker { margin-bottom: 10px; color: #71805f; }
h2 { color: var(--navy); font-size: clamp(29px, 3.4vw, 39px); line-height: 1.15; font-weight: 800; }
.heading-period { color: #8cab58; }
.search-box { display: flex; align-items: center; gap: 10px; width: 240px; padding: 10px 11px; border: 1px solid #e0e2de; border-radius: 7px; background: white; }
.search-icon { position: relative; width: 13px; height: 13px; border: 1.5px solid #8b949d; border-radius: 50%; }
.search-icon::after { position: absolute; right: -4px; bottom: -3px; width: 5px; height: 1.5px; background: #8b949d; content: ""; transform: rotate(45deg); }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); font-size: 12px; background: transparent; }
.search-box input::placeholder { color: #9ca3aa; }
kbd { padding: 2px 5px; border: 1px solid #e4e5e2; border-radius: 3px; color: #8a9299; font: 10px "DM Mono", monospace; }
.board-toolbar { display: flex; justify-content: space-between; align-items: center; margin-top: 27px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.filter-tabs { display: flex; gap: 6px; }
.filter-button { padding: 8px 10px; border: 0; border-radius: 5px; background: transparent; color: #78818c; cursor: pointer; font-size: 11px; transition: background .15s, color .15s; }
.filter-button span { margin-left: 4px; color: #a4abb1; font: 10px "DM Mono", monospace; }
.filter-button.is-active { background: #e9eddf; color: #4d6835; font-weight: 700; }
.filter-button.is-active span { color: #647e45; }
.sort-control { display: flex; align-items: center; gap: 8px; color: #92999e; font: 500 9px "DM Mono", monospace; letter-spacing: .07em; }
.sort-control select { max-width: 125px; padding: 6px 22px 6px 7px; border: 0; color: #48525d; background: transparent; outline-color: #819d5c; cursor: pointer; font: 500 11px "DM Sans", sans-serif; }
.board-scroll { overflow-x: auto; }
.board-columns { display: grid; grid-template-columns: minmax(215px, 1.5fr) minmax(130px, .9fr) repeat(5, minmax(105px, .8fr)) minmax(110px, .75fr); gap: 12px; padding: 12px 17px; color: #929aa1; font: 500 9px "DM Mono", monospace; letter-spacing: .09em; }
.board-columns span:nth-child(n+2) { padding-left: 7px; }
.game-list { display: grid; gap: 9px; }
.game-card { overflow: hidden; border: 1px solid #e7e8e4; border-radius: 8px; background: var(--white); transition: border-color .15s, transform .15s; }
.game-card:hover { border-color: #cdd4c2; transform: translateY(-1px); }
.game-primary { display: grid; grid-template-columns: minmax(215px, 1.5fr) minmax(130px, .9fr) repeat(5, minmax(105px, .8fr)) minmax(110px, .75fr); gap: 12px; min-height: 91px; align-items: center; padding: 14px 17px; }
.matchup { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.kickoff { margin-bottom: 2px; color: #8c949c; font: 10px "DM Mono", monospace; }
.away-team, .home-team { display: flex; align-items: center; gap: 8px; overflow: hidden; max-width: 100%; color: #26354a; font: 600 13px "Manrope", sans-serif; }
.at-label { color: #9da4a8; font: 400 10px "DM Sans", sans-serif; }
.home-indicator { padding: 3px 5px; border-radius: 3px; background: #f0f2ed; color: #89937f; font: 500 7px "DM Mono", monospace; letter-spacing: .08em; }
.spread-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding-left: 7px; }
.market-team { display: flex; align-items: center; gap: 7px; color: #354352; font: 500 11px "DM Sans", sans-serif; }
.market-team b { color: var(--navy); font: 700 13px "DM Mono", monospace; }
.market-book { color: #a0a6a9; font: 9px "DM Mono", monospace; }
.provider-name { color: #899199; font: 500 8px "DM Mono", monospace; letter-spacing: .04em; }
.market-unavailable { color: #a1a6aa; font-size: 10px; }
.difference-cell { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding-left: 7px; }
.difference-value { font: 700 18px "Manrope", sans-serif; letter-spacing: -.04em; }
.difference-home { color: var(--green); }
.difference-away { color: var(--red); }
.difference-neutral { color: var(--amber); }
.difference-missing { color: #b5bab9; }
.difference-hint { color: #939a9d; font-size: 9px; }
.recommended-bet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 10px 17px; border-top: 1px solid #edf0e7; background: #f7f9f2; }
.recommended-bet > span { color: #6a844b; font: 500 8px "DM Mono", monospace; letter-spacing: .08em; }
.recommended-bet strong { color: #354b2e; font: 700 12px "Manrope", sans-serif; }
.recommended-bet small { color: #858f7b; font: 9px "DM Mono", monospace; }
.game-details { border-top: 1px solid #f0f0ed; }
.prediction-note { margin: 0; padding: 9px 17px; color: #848e8d; font-size: 10px; }
.game-details summary { display: flex; justify-content: space-between; padding: 9px 17px; color: #848e8d; cursor: pointer; font-size: 10px; list-style: none; }
.game-details summary::-webkit-details-marker { display: none; }
.game-details[open] summary { color: #557344; }
.game-details[open] summary span { transform: rotate(45deg); }
.team-math { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 4px 17px 16px; }
.team-math > div { display: grid; gap: 5px; padding: 12px; border-radius: 5px; background: #f8f9f5; }
.team-math strong { color: var(--navy); font: 700 11px "Manrope", sans-serif; }
.team-math span { color: #737d83; font: 10px/1.5 "DM Mono", monospace; }
.team-math b { margin-top: 3px; color: #476c39; font: 600 10px "DM Sans", sans-serif; }
.loading-state, .error-state { display: flex; min-height: 140px; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid #e7e8e4; border-radius: 8px; background: white; color: #78828b; font-size: 12px; }
.loader { width: 20px; height: 20px; border: 2px solid #e3e8dd; border-top-color: #75944e; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-state strong { color: #9a4239; }
.error-state span { max-width: 440px; padding: 0 20px; text-align: center; line-height: 1.6; }
.empty-state { margin: 0; padding: 28px 12px; color: #79828a; text-align: center; font-size: 12px; }
.notice { margin-top: 12px; padding: 12px 14px; border: 1px solid #efddbb; border-radius: 6px; background: #fffaf0; color: #746540; font-size: 11px; line-height: 1.6; }
.notice strong { color: #685324; }

.method-section { display: grid; grid-template-columns: .85fr 1.5fr; gap: clamp(30px, 7vw, 94px); align-items: center; margin: 87px 0 0; padding: 45px 0 51px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.method-heading h2 { font-size: clamp(29px, 3.1vw, 38px); }
.method-heading h2 span { color: #768e57; }
.method-heading > p:last-child { max-width: 310px; margin: 15px 0 0; color: #7d858c; font-size: 12px; line-height: 1.7; }
.formula-card { overflow: hidden; border: 1px solid #e5e7e0; border-radius: 9px; background: white; }
.formula-step { display: grid; grid-template-columns: 34px 1fr 35px; align-items: center; gap: 12px; min-height: 67px; padding: 12px 19px; border-bottom: 1px solid #eff0ed; }
.step-index { color: #9aa68c; font: 10px "DM Mono", monospace; }
.formula-step strong { color: #354152; font: 600 11px "Manrope", sans-serif; }
.formula-step p { margin: 4px 0 0; color: #899199; font-size: 10px; }
.formula-sign { color: #adb2ac; font: 500 12px "DM Mono", monospace; text-align: right; }
.formula-result { background: #f9faf6; }
.formula-result .step-index, .formula-result .formula-sign { color: #6e8b4c; }
.formula-result strong { color: #466439; }
.method-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 13px; padding: 14px 19px; background: #f2f5eb; }
.method-footer > span:first-child { color: #78905a; font: 500 8px "DM Mono", monospace; letter-spacing: .08em; }
.method-footer > strong { color: #516247; font: 600 10px "DM Sans", sans-serif; }
.edge-key { display: flex; align-items: center; gap: 5px; color: #858e89; font-size: 9px; }
.calibration-summary { width: 100%; line-height: 1.6; }
.positive-dot, .negative-dot { width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: #45825b; }
.negative-dot { background: #bf685a; }

.record-section { margin: 74px 0 0; padding: 43px 0 49px; border-top: 1px solid var(--line); }
.record-heading { align-items: center; }
.record-summary { margin: 0; padding: 11px 15px; border-radius: 6px; background: var(--navy); color: var(--lime); font: 700 14px "DM Mono", monospace; }
.record-note { margin: 13px 0 18px; color: #7d858c; font-size: 11px; line-height: 1.6; }
.record-table-wrap { overflow-x: auto; border: 1px solid #e5e7e0; border-radius: 8px; background: white; }
.record-table { width: 100%; border-collapse: collapse; text-align: left; }
.record-table th { padding: 11px 14px; color: #929aa1; background: #f8f9f6; font: 500 8px "DM Mono", monospace; letter-spacing: .08em; }
.record-table td { padding: 12px 14px; border-top: 1px solid #eff0ed; color: #354152; font-size: 10px; white-space: nowrap; }
.record-table td:first-child { line-height: 1.6; }
.record-table td:first-child span { color: #838d93; }
.result-pending { color: #8b793c; }
.result-win { color: #247244; font-weight: 700; }
.result-loss { color: #b64c3e; font-weight: 700; }
.result-push { color: #78818c; font-weight: 700; }

.sources-row { display: flex; align-items: center; gap: 20px; min-height: 77px; }
.sources-row > a { color: #53604b; font-size: 10px; font-weight: 600; text-decoration: none; }
.sources-row > a:hover { text-decoration: underline; }
.sources-row > a span { color: #8fa171; }
.sources-row > p { margin-left: auto; color: #8b9397; font-size: 9px; text-align: right; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 72px; padding: 12px max(5.5vw, 24px); background: var(--navy); color: #a4afba; }
.footer-brand { color: white; font-size: 10px; }
.footer-brand .brand-mark { width: 25px; height: 25px; font-size: 12px; }
.footer > span { font-size: 9px; }
.footer > span:last-child { color: #758292; font: 9px "DM Mono", monospace; letter-spacing: .07em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }

/* Product interface */
:root {
  --navy: #0c1725;
  --navy-2: #17283a;
  --ink: #152235;
  --muted: #738092;
  --line: #e2e8ed;
  --paper: #f3f6f8;
  --lime: #bce76a;
  --green: #177b50;
  --red: #c14c48;
  --amber: #94701c;
}

body {
  background:
    radial-gradient(ellipse at 14% 0%, #e8eef0 0, transparent 37rem),
    var(--paper);
}

.topbar {
  position: relative;
  z-index: 2;
  height: 70px;
  padding: 0 max(calc((100vw - 1320px) / 2), 32px);
  border-bottom: 1px solid #ffffff12;
  background: #0c1725;
}

.brand { gap: 10px; font-size: 11px; letter-spacing: .07em; }
.brand-mark {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #bce76a;
  color: #132217;
  font-size: 17px;
  box-shadow: 0 4px 12px #bce76a24;
}
.brand-light { color: #aab5c2; }
.primary-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; margin-right: 34px; }
.primary-nav a {
  color: #c0c9d3;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}
.primary-nav a:hover { color: var(--lime); }
.season-tag { gap: 8px; padding: 9px 12px; border: 1px solid #ffffff20; border-radius: 999px; color: #d5dde4; font-size: 9px; letter-spacing: .08em; }
.live-dot { width: 6px; height: 6px; }

main { max-width: 1320px; padding-right: 32px; padding-left: 32px; }
.hero {
  min-height: 315px;
  margin: 27px 0 18px;
  padding: 48px 54px;
  overflow: hidden;
  border: 1px solid #24374b;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 76% 12%, #314b57a6 0, transparent 30%),
    radial-gradient(ellipse at 100% 100%, #183c31 0, transparent 42%),
    linear-gradient(112deg, #101e2e 0%, #13263a 56%, #172b38 100%);
  box-shadow: 0 16px 38px #12223818;
}
.hero::after {
  position: absolute;
  right: 300px;
  bottom: -220px;
  width: 520px;
  height: 520px;
  border: 1px solid #ffffff0c;
  border-radius: 50%;
  box-shadow: 0 0 0 44px #ffffff05, 0 0 0 90px #ffffff04;
  content: "";
  pointer-events: none;
}
.hero-copy { max-width: 625px; }
.hero .eyebrow { margin-bottom: 19px; color: #c6d2dd; font-size: 9px; letter-spacing: .16em; }
.hero-kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px #bce76a1c; }
h1 { color: #fff; font-size: clamp(48px, 5.8vw, 68px); line-height: 1.02; letter-spacing: -.065em; }
h1 span { color: var(--lime); }
.hero-description { max-width: 475px; margin-top: 17px; color: #bdc9d4; font-size: 13px; line-height: 1.75; }
.week-card {
  width: 267px;
  min-height: 142px;
  padding: 21px 22px;
  border: 1px solid #ffffff30;
  border-radius: 12px;
  background: #ffffff0d;
  box-shadow: 0 12px 30px #08111a22;
  backdrop-filter: blur(12px);
}
.week-card-label { display: flex; align-items: center; gap: 8px; color: #d2dce5; font-size: 9px; }
.week-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.week-card strong { margin: 14px 0 12px; color: #fff; font-size: 20px; }
.week-card-foot { display: flex; align-items: center; gap: 5px; border-color: #ffffff20; color: #aebbc7; font-size: 8px; }
.week-calendar { color: var(--lime); }
.hero-stamp { display: none; }

.stats-strip {
  grid-template-columns: 1fr .9fr .9fr 1.35fr 1fr;
  overflow: hidden;
  border: 1px solid #e3e8eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px #18283b08;
  color: var(--ink);
}
.summary-stat { min-height: 105px; padding: 19px 20px; border-color: #e9edf0; }
.summary-label { color: #8490a0; font-size: 8px; letter-spacing: .105em; }
.summary-stat strong { margin: 9px 0 4px; color: #17263a; font-size: 25px; }
.summary-stat-record strong { color: #238252; }
.summary-stat-edge strong { color: #238252; font-size: 18px; }
.summary-stat-updated strong { font-size: 16px; }
.summary-note { color: #8a95a3; font-size: 9px; }

.board-section { padding-top: 63px; }
.section-heading { align-items: center; }
.section-kicker { color: #43805a; font-size: 9px; }
h2 { color: #122238; letter-spacing: -.05em; }
.heading-period { color: #419263; }
.search-box { width: 270px; padding: 11px 13px; border-color: #dce3e8; border-radius: 9px; box-shadow: 0 3px 9px #13223607; }
.search-box:focus-within { border-color: #82aa8d; box-shadow: 0 0 0 3px #31814a15; }
.search-box input { font-size: 12px; }
.board-toolbar { margin-top: 25px; padding: 12px 0; border-color: #dfe6e9; }
.filter-tabs { padding: 3px; border: 1px solid #e0e6e9; border-radius: 9px; background: #eaf0f2; }
.filter-button { padding: 8px 12px; border-radius: 7px; color: #667486; }
.filter-button.is-active { background: #fff; color: #1b6c46; box-shadow: 0 1px 4px #13223618; }
.sort-control { color: #8591a0; }
.sort-control select { padding: 7px 22px 7px 9px; border: 1px solid #e0e6e9; border-radius: 7px; background: #fff; }
.board-columns { color: #8190a0; font-size: 8px; }
.game-list { gap: 8px; }
.game-card {
  border-color: #e2e8eb;
  border-radius: 10px;
  box-shadow: 0 2px 8px #192a3d05;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.game-card:hover { border-color: #c6d5cb; box-shadow: 0 8px 18px #192a3d0c; transform: translateY(-1px); }
.game-primary { min-height: 88px; }
.kickoff { color: #8390a0; font-size: 9px; }
.away-team, .home-team { color: #17283d; font-size: 12px; }
.home-indicator { border-radius: 4px; background: #edf3ed; color: #64816b; }
.provider-name { color: #7d8b9a; font-size: 8px; }
.market-team { color: #435268; }
.market-team b { color: #19283a; }
.market-book { color: #8d99a6; }
.difference-cell { padding: 7px 10px; border-left: 1px solid #edf0f2; }
.difference-value { font-size: 17px; }
.difference-home { color: #168052; }
.difference-away { color: #c44b4b; }
.recommended-bet { border-color: #e4ede1; background: #f2f8ef; }
.recommended-bet > span { color: #2d7950; }
.recommended-bet strong { color: #1a5837; }
.game-details, .prediction-note { border-color: #edf0f2; }
.game-details summary { color: #748394; }
.game-details[open] summary { color: #23754b; }
.team-math > div { background: #f3f6f4; }
.team-math strong { color: #17283d; }
.loading-state, .error-state { border-color: #e2e8eb; border-radius: 10px; }
.loader { border-color: #e0e9de; border-top-color: #398655; }

.method-section { gap: clamp(36px, 6vw, 84px); margin-top: 78px; border-color: #dde5e8; }
.method-heading h2 span { color: #38835a; }
.method-heading > p:last-child { color: #788696; }
.formula-card { border-color: #e0e7e9; border-radius: 12px; box-shadow: 0 6px 20px #16283a08; }
.formula-step { border-color: #edf1f2; }
.step-index { color: #819a84; }
.formula-step strong { color: #23344a; }
.formula-step p { color: #7c8997; line-height: 1.55; }
.formula-result { background: #f5f8f3; }
.formula-result .step-index, .formula-result .formula-sign, .formula-result strong { color: #337b4d; }
.method-footer { background: #edf5e9; }
.method-footer > span:first-child { color: #34764a; }
.method-footer > strong { color: #355640; }
.edge-key { color: #758477; }

.record-section { margin-top: 67px; border-color: #dde5e8; }
.record-note { color: #788696; }
.record-summary { border-radius: 8px; background: #142338; color: var(--lime); }
.record-table-wrap { border-color: #e0e7e9; border-radius: 11px; box-shadow: 0 4px 16px #15283b08; }
.record-table th { color: #798899; background: #f5f7f7; }
.record-table td { border-color: #edf0f1; color: #344359; }
.result-win { color: #197a4c; }
.result-loss { color: #c04a47; }
.sources-row > a { color: #365f43; }
.footer { background: #0c1725; }

@media (max-width: 900px) {
  .topbar { padding-right: 24px; padding-left: 24px; }
  .primary-nav { gap: 18px; margin-right: 20px; }
  main { padding: 0 24px; }
  .hero { padding-right: 34px; padding-left: 34px; }
  .stats-strip { grid-template-columns: repeat(3, 1fr); }
  .summary-stat { border-bottom: 1px solid #e9edf0; }
  .summary-stat:nth-child(3) { border-right: 0; }
  .summary-stat:nth-child(n+4) { border-bottom: 0; }
  .board-columns, .game-primary { min-width: 1010px; }
  .method-section { grid-template-columns: .75fr 1.35fr; gap: 32px; }
  .record-table { min-width: 620px; }
}
@media (max-width: 680px) {
  .topbar { height: 62px; padding: 0 17px; }
  .brand { gap: 8px; font-size: 9px; }
  .brand-mark { width: 29px; height: 29px; }
  .primary-nav { display: none; }
  .season-tag { padding: 7px 9px; font-size: 7px; }
  main { padding: 0 17px; }
  .hero { min-height: auto; flex-direction: column; align-items: stretch; gap: 23px; margin: 15px 0 14px; padding: 31px 23px 22px; border-radius: 14px; }
  .hero::after { right: -180px; bottom: 65px; width: 330px; height: 330px; }
  .hero .eyebrow { margin-bottom: 15px; font-size: 8px; }
  h1 { font-size: clamp(42px, 12vw, 55px); }
  .hero-description { max-width: 370px; margin-top: 13px; font-size: 11px; }
  .week-card { width: 100%; min-height: auto; padding: 14px 16px; }
  .week-card strong { margin: 8px 0; font-size: 16px; }
  .week-card-foot { padding-top: 8px; }
  .stats-strip { grid-template-columns: 1fr 1fr; border-radius: 10px; }
  .summary-stat { min-height: 88px; padding: 13px 14px; border-bottom: 1px solid #e9edf0; }
  .summary-stat:nth-child(2), .summary-stat:nth-child(4) { border-right: 0; }
  .summary-stat:nth-child(3) { border-right: 1px solid #e9edf0; }
  .summary-stat:nth-child(n+4) { border-bottom: 0; }
  .summary-stat:last-child { grid-column: 1 / -1; border-right: 0; }
  .summary-stat strong { font-size: 21px; }
  .summary-stat-edge strong { font-size: 16px; }
  .summary-stat-updated strong { font-size: 14px; }
  .summary-note { font-size: 9px; }
  .board-section { padding-top: 47px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 17px; }
  .search-box { width: 100%; }
  .board-toolbar { align-items: flex-start; gap: 9px; flex-direction: column; margin-top: 17px; }
  .filter-tabs { max-width: 100%; gap: 2px; }
  .filter-button { padding: 7px 9px; font-size: 10px; }
  .sort-control { align-self: flex-end; }
  .board-columns { display: none; }
  .game-list { gap: 8px; }
  .board-scroll { overflow: visible; }
  .game-primary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 8px; min-width: 0; min-height: 0; padding: 13px 13px 11px; }
  .matchup { grid-column: 1; grid-row: 1; }
  .predicted-spread { grid-column: 2; grid-row: 1; align-items: flex-end; padding: 0; }
  .market-cell { padding: 8px 0 0; border-top: 1px solid #f0f0ed; }
  .provider-fanduel { grid-column: 1; grid-row: 2; }
  .provider-draftkings { grid-column: 2; grid-row: 2; align-items: flex-end; }
  .provider-espn { grid-column: 1; grid-row: 3; }
  .provider-sportsline { grid-column: 2; grid-row: 3; align-items: flex-end; }
  .provider-vegasinsider { grid-column: 1; grid-row: 4; }
  .difference-cell { grid-column: 1 / -1; grid-row: 5; align-items: flex-start; padding: 8px 0 0; border-top: 1px solid #edf0f2; border-left: 0; }
  .team-math { grid-template-columns: 1fr; gap: 8px; padding: 3px 11px 11px; }
  .game-details summary { padding-right: 13px; padding-left: 13px; }
  .prediction-note { padding-right: 13px; padding-left: 13px; }
  .method-section { grid-template-columns: 1fr; gap: 22px; margin-top: 59px; padding: 36px 0; }
  .record-section { margin-top: 51px; padding: 33px 0 37px; }
  .record-heading { align-items: flex-start; flex-direction: column; gap: 13px; }
  .record-summary { font-size: 12px; }
  .record-table { min-width: 570px; }
  .formula-step { grid-template-columns: 26px 1fr 29px; gap: 8px; padding: 11px 13px; }
  .formula-step p { line-height: 1.5; }
  .method-footer { gap: 8px; padding: 12px 13px; }
  .edge-key { width: 100%; }
  .sources-row { align-items: flex-start; flex-direction: column; gap: 9px; padding: 20px 0; }
  .sources-row > p { margin: 3px 0 0; text-align: left; }
  .footer { align-items: flex-start; flex-direction: column; gap: 11px; padding: 17px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}