: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(4, 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-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(4, 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(4, 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; }
.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; }
.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%); }

@media (max-width: 900px) {
  main { padding: 0 24px; }
  .hero-stamp { right: 235px; opacity: .65; }
  .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 18px; }
  .brand { gap: 8px; font-size: 10px; }
  .brand-mark { width: 27px; height: 27px; }
  .season-tag { font-size: 8px; }
  main { padding: 0 17px; }
  .hero { min-height: auto; flex-direction: column; align-items: flex-start; gap: 24px; padding: 43px 0 28px; }
  .hero-stamp { top: 9px; right: -52px; width: 150px; height: 150px; opacity: .48; }
  .hero-stamp strong { font-size: 69px; }
  .hero-stamp i { font-size: 6px; }
  .hero-description { max-width: 330px; margin-top: 14px; font-size: 12px; }
  .week-card { width: 100%; min-height: auto; padding: 15px 17px; }
  .week-card strong { margin: 8px 0; font-size: 16px; }
  .week-card-foot { padding-top: 8px; }
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .summary-stat { min-height: 98px; padding: 15px 16px; border-bottom: 1px solid #ffffff18; }
  .summary-stat:nth-child(2) { border-right: 0; }
  .summary-stat:nth-child(n+3) { border-bottom: 0; }
  .summary-stat strong { font-size: 21px; }
  .summary-stat-edge strong { font-size: 18px; }
  .summary-stat-updated strong { font-size: 15px; }
  .summary-note { font-size: 9px; }
  .board-section { padding-top: 52px; }
  .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: 20px; }
  .filter-tabs { max-width: 100%; gap: 2px; }
  .filter-button { padding: 7px 6px; 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; }
  .difference-cell { grid-column: 1 / -1; grid-row: 4; align-items: flex-start; padding: 8px 0 0; border-top: 1px solid #f0f0ed; }
  .team-math { grid-template-columns: 1fr; gap: 8px; padding: 3px 11px 11px; }
  .game-details summary { 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; }
}