@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --paper:#f3f5ef; --surface:#fff; --ink:#14201a; --muted:#68746d; --line:#d8ded7; --green:#16804e; --green-dark:#0c5b38; --soft-green:#dcecdf; --mono:'DM Mono', monospace; --sans:'DM Sans', sans-serif; --display:'Space Grotesk', sans-serif; color-scheme:light; }
:root.dark { --paper:#111714; --surface:#19221c; --ink:#eef4ed; --muted:#9ca9a0; --line:#334139; --green:#6bd19a; --green-dark:#90e0ad; --soft-green:#213c2b; color-scheme:dark; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); transition:background .25s,color .25s; } a { color:inherit; text-decoration:none; } button { color:inherit; font:inherit; }
.site-header { height:80px; max-width:1280px; margin:auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:5; } .brand { display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:17px; font-weight:700; letter-spacing:-.5px; } .brand-accent { color:var(--green); } .brand-mark { display:block; flex:0 0 24px; width:24px; height:24px; background:url('assets/logo-mark.svg') center/contain no-repeat; } .brand-mark span { display:none; } :root.dark .brand-mark { background-image:url('assets/logo-mark-dark.svg'); }
.main-nav { display:flex; align-items:center; gap:31px; margin-left:auto; margin-right:30px; font-size:13px; font-weight:600; } .main-nav-link { display:inline-block; padding:28px 0; } .nav-menu { position:relative; } .nav-menu-button { border:0; background:none; padding:28px 0; cursor:pointer; font-weight:600; } .nav-menu-button span { color:var(--green); font-size:16px; margin-left:4px; } .dropdown { display:none; position:absolute; top:65px; right:-18px; width:225px; padding:18px; background:var(--surface); border:1px solid var(--line); box-shadow:0 14px 30px #1723191a; } .dropdown.open { display:block; } .dropdown-kicker,.chart-overline,.visual-label,.coming-soon,.season-note,.eyebrow,.footer-meta { font-family:var(--mono); text-transform:uppercase; letter-spacing:1.1px; font-size:10px; } .dropdown-kicker { margin:0 0 12px; color:var(--green); } .dropdown-title { font-family:var(--display); font-size:15px; margin:0 0 16px; line-height:1.25; } .coming-soon { display:inline-block; background:var(--soft-green); color:var(--green-dark); padding:6px 8px; font-size:9px; } .dropdown .coming-soon { display:block; width:max-content; margin-top:8px; }
.header-actions { display:flex; align-items:center; gap:10px; } .espn-status { color:var(--muted); max-width:260px; font:500 9px/1.35 var(--mono); letter-spacing:0; } .espn-dialog { width:min(430px,calc(100vw - 40px)); padding:0; border:1px solid var(--line); background:var(--surface); color:var(--ink); box-shadow:10px 10px 0 var(--green); } .espn-dialog::backdrop { background:#14201a80; } .espn-dialog-content { padding:28px; } .espn-dialog .eyebrow { margin-bottom:14px; } .espn-dialog h2 { font-size:32px; letter-spacing:-1.5px; } .espn-dialog-copy { color:var(--muted); font-size:14px; line-height:1.5; margin:16px 0 8px; } .espn-dialog-note { min-height:14px; color:var(--green-dark); font:10px/1.4 var(--mono); margin:0 0 18px; } .espn-dialog-actions { display:flex; justify-content:flex-end; align-items:center; gap:8px; flex-wrap:wrap; } .espn-dialog-actions button { cursor:pointer; } .espn-dialog-cancel,.espn-dialog .button-secondary { border:1px solid var(--line); background:transparent; color:var(--ink); padding:13px 17px; font-size:13px; font-weight:700; } .espn-dialog-cancel:hover,.espn-dialog .button-secondary:hover { border-color:var(--green); color:var(--green-dark); } .espn-dialog .button-primary { border:0; cursor:pointer; } .auth-button,.espn-sync-button,.espn-disconnect-button { border:1px solid var(--green); background:var(--surface); color:var(--green-dark); padding:9px 12px; cursor:pointer; font:500 10px var(--mono); letter-spacing:.7px; text-transform:uppercase; white-space:nowrap; transition:background .2s,color .2s,border-color .2s; } .auth-button:hover,.espn-sync-button:hover:not(:disabled),.espn-disconnect-button:hover:not(:disabled) { background:var(--green); color:#fff; border-color:var(--green); } .espn-sync-button:disabled,.espn-disconnect-button:disabled { cursor:not-allowed; opacity:.55; } .theme-toggle,.menu-toggle { background:none; border:1px solid var(--line); width:34px; height:34px; display:grid; place-items:center; cursor:pointer; } .theme-toggle { font-size:17px; } .theme-toggle .moon { display:none; } .dark .theme-toggle .sun { display:none; } .dark .theme-toggle .moon { display:block; } .menu-toggle { display:none; font-size:19px; }
.section-wrap { max-width:1280px; margin:auto; padding-left:64px; padding-right:64px; } .hero { min-height:600px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px; padding-top:64px; padding-bottom:72px; } .eyebrow { display:flex; align-items:center; gap:9px; color:var(--green); margin:0 0 23px; } .eyebrow-dot { width:7px; height:7px; background:var(--green); border-radius:50%; box-shadow:0 0 0 4px var(--soft-green); } h1,h2 { font-family:var(--display); font-size:clamp(52px,6vw,82px); line-height:.99; letter-spacing:-4px; margin:0; } h1 em,h2 em { color:var(--green); font-style:normal; } .hero-description { color:var(--muted); max-width:420px; font-size:17px; line-height:1.6; margin:27px 0 28px; } .hero-actions { display:flex; align-items:center; gap:25px; } .button { display:inline-flex; gap:17px; align-items:center; padding:13px 17px; font-size:13px; font-weight:700; } .button-primary { background:var(--green); color:#fff; } .button-primary:hover { background:var(--green-dark); } .text-link { font-size:13px; font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:4px; } .text-link span { color:var(--green); margin-left:7px; } .season-note { color:var(--muted); margin-top:42px; } .season-note span { color:var(--ink); } .season-note i { display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--green); margin:0 10px 2px; }
.hero-visual { position:relative; min-height:430px; display:flex; align-items:center; justify-content:center; } .hero-visual:before { content:''; position:absolute; inset:24px 0 0 45px; background:var(--soft-green); border:1px solid var(--line); } .visual-label { position:absolute; left:0; top:0; color:var(--green); } .visual-label span { color:var(--muted); margin-left:12px; } .chart-card { z-index:1; width:min(100%,480px); padding:24px 25px 17px; background:var(--surface); border:1px solid var(--line); box-shadow:10px 10px 0 var(--green); } .chart-heading { display:flex; align-items:flex-start; justify-content:space-between; } .chart-overline { color:var(--muted); display:block; margin-bottom:7px; } .chart-heading strong { font-family:var(--display); font-size:19px; } .chart-badge { font-family:var(--mono); font-size:11px; color:var(--green); background:var(--soft-green); padding:5px 7px; } .trend-chart { width:100%; height:auto; margin:24px 0 0; overflow:visible; } .grid-lines path { stroke:var(--line); stroke-width:1; stroke-dasharray:3 4; } .chart-area { fill:url(#areaFill); } .chart-line { fill:none; stroke:var(--green); stroke-width:4; stroke-linecap:round; } .chart-point { fill:var(--surface); stroke:var(--green); stroke-width:4; } .chart-labels text { fill:var(--muted); font:10px var(--mono); } .chart-footer { border-top:1px solid var(--line); padding-top:12px; display:flex; justify-content:space-between; color:var(--muted); font:10px var(--mono); } .legend-dot { display:inline-block; width:6px; height:6px; background:var(--green); border-radius:50%; margin-right:5px; } .floating-note { position:absolute; right:-1px; bottom:27px; z-index:2; background:var(--ink); color:var(--paper); padding:12px 14px; display:flex; gap:10px; align-items:center; box-shadow:5px 5px 0 var(--green); } .note-icon { color:var(--green); font-size:20px; } .floating-note small { display:block; color:var(--green); font:9px var(--mono); letter-spacing:1px; margin-bottom:3px; } .floating-note strong { font-family:var(--display); font-size:13px; } .visual-stamp { position:absolute; left:42px; bottom:21px; z-index:2; color:var(--green); font:700 24px var(--display); line-height:.8; transform:rotate(-10deg); } .visual-stamp span { font:8px var(--mono); letter-spacing:1px; }
.signal-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); min-height:76px; display:flex; align-items:center; gap:23px; font-family:var(--display); font-size:15px; } .signal-strip p { color:var(--muted); font:10px var(--mono); text-transform:uppercase; letter-spacing:1px; margin-right:auto; } .signal-strip span { white-space:nowrap; } .signal-strip b { color:var(--green); font-weight:400; } .visual-stamp { left:20px; bottom:10px; display:flex; flex-direction:column; align-items:center; gap:2px; } .visual-stamp-logo { display:block; width:18px; height:18px; background:url('assets/logo-mark.svg') center/contain no-repeat; } :root.dark .visual-stamp-logo { background-image:url('assets/logo-mark-dark.svg'); } 
.why { display:grid; grid-template-columns:35% 65%; padding-top:128px; padding-bottom:128px; } h2 { font-size:clamp(44px,5vw,66px); } .why-content { padding-top:3px; } .large-copy { max-width:585px; font-family:var(--display); font-size:22px; line-height:1.35; margin:0 0 58px; } .principles { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .principles article { border-top:2px solid var(--green); padding-top:14px; } .principles article span { font:10px var(--mono); color:var(--green); } h3 { font-family:var(--display); font-size:18px; margin:19px 0 10px; } .principles p { color:var(--muted); font-size:13px; line-height:1.55; margin:0; max-width:180px; }
.closing { background:var(--green); color:#fff; min-height:310px; padding-top:54px; padding-bottom:54px; display:flex; justify-content:space-between; align-items:flex-end; } .closing .eyebrow { color:#d7f4df; } .closing .eyebrow-dot { background:#d7f4df; box-shadow:0 0 0 4px #ffffff20; } .closing h2 em { color:#b7eac6; } .round-arrow { border:1px solid #ffffff70; width:56px; height:56px; display:grid; place-items:center; font-size:25px; } .site-footer { display:flex; align-items:center; justify-content:space-between; min-height:100px; } .site-footer p { color:var(--muted); font-family:var(--display); font-size:14px; } .footer-disclaimer { max-width:390px; color:var(--muted); font:9px/1.5 var(--mono); letter-spacing:.35px; } .footer-meta { color:var(--muted); }
@media (max-width:800px) { .site-header { height:68px; padding:0 20px; } .main-nav { display:none; position:absolute; top:68px; left:0; right:0; margin:0; padding:10px 20px 20px; background:var(--surface); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:0; } .main-nav.open { display:flex; } .main-nav-link { padding:14px 0; } .nav-menu-button { padding:14px 0; text-align:left; width:100%; } .dropdown { position:static; width:100%; box-shadow:none; margin-bottom:4px; } .menu-toggle { display:grid; margin-left:0; flex:0 0 34px; } .header-actions { margin-left:auto; gap:6px; } .espn-status { position:absolute; top:calc(100% + 8px); right:64px; max-width:calc(100vw - 84px); padding:8px 10px; background:var(--surface); border:1px solid var(--line); } .espn-dialog { width:calc(100vw - 24px); box-shadow:6px 6px 0 var(--green); } .espn-dialog-content { padding:22px; } .espn-dialog h2 { font-size:28px; } .espn-dialog-actions { justify-content:stretch; } .espn-dialog-actions button { flex:1 1 auto; } .auth-button,.espn-sync-button,.espn-disconnect-button { padding:7px 7px; font-size:8px; } .hero { grid-template-columns:1fr; gap:50px; padding:72px 20px 68px; } h1 { font-size:clamp(48px,14vw,72px); } .hero-visual { min-height:350px; } .hero-visual:before { inset:15px 0 0 20px; } .chart-card { width:calc(100% - 20px); box-shadow:7px 7px 0 var(--green); padding:18px 16px 13px; } .floating-note { right:-4px; bottom:19px; } .visual-stamp { left:12px; bottom:15px; } .signal-strip { padding:20px; flex-wrap:wrap; gap:13px; } .signal-strip p { width:100%; margin-bottom:4px; } .why { grid-template-columns:1fr; padding:82px 20px; gap:38px; } .principles { gap:22px; } .closing { padding:44px 20px; } .site-footer { padding:28px 20px; flex-wrap:wrap; gap:16px; } .site-footer p { order:3; width:100%; } }
@media (max-width:480px) { .hero-actions { align-items:flex-start; flex-direction:column; gap:18px; } .hero-description { font-size:16px; } .principles { grid-template-columns:1fr; } .principles p { max-width:none; } .closing h2 { font-size:46px; } .footer-meta { font-size:9px; } }
@media (max-width:480px) { .site-header { padding-left:12px; padding-right:12px; } .brand { gap:0; } .brand > span:last-child { display:none; } .header-actions { gap:4px; } .auth-button,.espn-sync-button,.espn-disconnect-button { padding:7px 4px; font-size:7px; letter-spacing:0; } }
@media (max-width:800px) { .visual-stamp { left:8px; bottom:8px; } }
.ranker-preview { z-index:1; display:block; width:min(100%,480px); border:1px solid var(--line); box-shadow:10px 10px 0 var(--green); overflow:hidden; background:var(--surface); }
.ranker-preview img { display:block; width:100%; height:auto; }
.ranker-preview-dark-new { display:none !important; }
:root.dark .ranker-preview-light-new { display:none; }
:root.dark .ranker-preview-dark-new { display:block !important; }
.settings-dropdown { width:280px; right:0; }
.account-email { margin:0 0 14px; padding:0 0 12px; border-bottom:1px solid var(--line); color:var(--muted); font:10px/1.45 var(--mono); overflow-wrap:anywhere; }
.settings-controls { display:grid; gap:0; }
.settings-section { display:grid; gap:8px; }
.settings-section + .settings-section { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.settings-section-label { margin:0; color:var(--muted); font:500 9px var(--mono); letter-spacing:1.1px; text-transform:uppercase; }
.settings-provider .settings-section-label { color:var(--green); }
.settings-account-section .account-email { margin:0 0 2px; padding:0; border:0; }
.settings-controls .header-actions,.settings-section-actions { display:grid; gap:8px; margin:0; }
.settings-controls .auth-button,.settings-controls .switch-account-button,.settings-controls .espn-sync-button,.settings-controls .espn-disconnect-button { width:100%; text-align:left; }
.settings-controls .espn-status { max-width:none; padding:7px 0 0; border-top:0; }
.espn-extension-note { margin:18px 0 8px; padding:10px 12px; border-left:3px solid var(--green); background:var(--soft-green); color:var(--green-dark); font:10px/1.45 var(--mono); }
.espn-extension-note strong { font-weight:500; text-transform:uppercase; letter-spacing:.6px; }
.espn-extension-link { color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.espn-extension-link:hover,.espn-extension-link:focus-visible { color:var(--ink); }
.espn-setup-steps { display:grid; gap:8px; margin:14px 0 18px; padding-left:22px; color:var(--muted); font-size:12px; line-height:1.45; }
.espn-setup-steps strong { color:var(--ink); font-weight:600; }
.espn-dialog-actions button:disabled { cursor:not-allowed; opacity:.45; }
@media (max-width:800px) {
	.site-header { justify-content:flex-start; }
	.theme-toggle { margin-left:auto; flex:0 0 34px; }
	.menu-toggle { margin-left:8px; flex:0 0 34px; }
	.settings-dropdown { width:100%; }
	.settings-controls .auth-button,.settings-controls .switch-account-button,.settings-controls .espn-sync-button,.settings-controls .espn-disconnect-button { padding:9px 12px; font-size:10px; letter-spacing:.7px; }
	.settings-controls .espn-status { position:static; max-width:none; padding:9px 0 2px; background:transparent; border-left:0; border-right:0; border-bottom:0; }
}
.week-feature { display:grid; grid-template-columns:minmax(300px, .82fr) minmax(0, 1.18fr); align-items:center; gap:72px; border-bottom:1px solid var(--line); padding-top:48px; padding-bottom:58px; }
.week-feature-copy .eyebrow { margin-bottom:20px; }
.week-feature-copy h2 { font-size:clamp(42px, 4.7vw, 66px); }
.week-feature-description { max-width:390px; margin:22px 0 25px; color:var(--muted); font-size:16px; line-height:1.55; }
.week-feature-preview { display:block; border:1px solid var(--green); padding:23px 25px 18px; background:var(--surface); color:var(--ink); box-shadow:10px 10px 0 var(--green); }
.week-feature-preview-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:17px; border-bottom:1px solid color-mix(in srgb, var(--ink) 22%, transparent); color:var(--green); font:10px var(--mono); letter-spacing:1px; }
.week-feature-preview-head span:last-child { color:var(--muted); }
.week-feature-preview-head b { color:var(--green); font-size:14px; font-weight:400; margin-left:7px; }
.week-feature-preview-title { padding:24px 0 21px; }
.week-feature-preview-title .chart-overline { color:var(--green); margin-bottom:8px; }
.week-feature-preview-title strong { display:block; max-width:410px; font:600 clamp(21px, 2.5vw, 31px)/1.08 var(--display); letter-spacing:-1px; }
.week-feature-list { border-top:1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.week-feature-row { display:grid; grid-template-columns:28px minmax(0,1fr) 20px; align-items:center; gap:13px; min-height:66px; border-bottom:1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.week-feature-row:last-child { border-bottom:0; }
.week-feature-index { color:var(--green); font:10px var(--mono); }
.week-feature-row-copy { display:grid; gap:5px; min-width:0; }
.week-feature-row-copy small { color:color-mix(in srgb, var(--ink) 62%, transparent); font:9px var(--mono); letter-spacing:1px; }
.week-feature-row-copy strong { font:500 15px var(--display); }
.week-feature-metric { color:var(--green); font:500 10px var(--mono); letter-spacing:.3px; text-align:right; white-space:nowrap; }
@media (max-width:800px) {
	.week-feature { grid-template-columns:1fr; gap:38px; padding-top:52px; padding-bottom:52px; }
	.week-feature-preview { box-shadow:7px 7px 0 var(--green); }
}
@media (max-width:480px) {
	.week-feature { gap:30px; }
	.week-feature-preview { padding:18px 16px 12px; }
	.week-feature-preview-head { gap:10px; font-size:8px; }
	.week-feature-preview-head b { font-size:12px; margin-left:4px; }
	.week-feature-preview-title { padding:20px 0 18px; }
	.week-feature-preview-title strong { font-size:23px; }
	.week-feature-row { grid-template-columns:24px minmax(0,1fr) auto; gap:9px; min-height:62px; }
	.week-feature-row-copy strong { font-size:14px; }
	.week-feature-metric { font-size:9px; }
}
.site-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.8fr); align-items:end; gap:60px; border-bottom:1px solid var(--line); padding-top:30px; padding-bottom:32px; }
.site-intro .eyebrow { margin-bottom:14px; }
.site-intro h1 { font-size:clamp(34px,4vw,56px); letter-spacing:-2.5px; }
.site-intro-description { max-width:470px; margin:0 0 5px; color:var(--muted); font-size:15px; line-height:1.55; }
.hero-copy h2 { font-size:clamp(52px,6vw,82px); }
@media (max-width:800px) {
	.site-intro { grid-template-columns:1fr; gap:18px; padding:34px 20px 36px; }
	.site-intro-description { max-width:520px; margin-bottom:0; }
}
@media (max-width:480px) {
	.site-intro { padding-top:32px; padding-bottom:34px; }
	.site-intro h1 { font-size:clamp(38px,12vw,54px); }
}
.settings-controls .sleeper-sync-button,.settings-controls .sleeper-disconnect-button { width:100%; text-align:left; }
.sleeper-sync-button,.sleeper-disconnect-button { border:1px solid var(--green); background:var(--surface); color:var(--green-dark); padding:9px 12px; cursor:pointer; font:500 10px var(--mono); letter-spacing:.7px; text-transform:uppercase; white-space:nowrap; transition:background .2s,color .2s,border-color .2s; }
.sleeper-sync-button:hover:not(:disabled),.sleeper-disconnect-button:hover:not(:disabled) { background:var(--green); color:#fff; border-color:var(--green); }
.sleeper-sync-button:disabled,.sleeper-disconnect-button:disabled { cursor:not-allowed; opacity:.55; }
.settings-controls .sleeper-status { max-width:none; padding:7px 0 0; border-top:0; }
.sleeper-field-label { display:block; margin:18px 0 7px; color:var(--muted); font:10px var(--mono); letter-spacing:.7px; text-transform:uppercase; }
.sleeper-username { width:100%; border:1px solid var(--line); background:var(--paper); color:var(--ink); padding:11px 12px; font:14px var(--sans); }
.sleeper-username:focus { outline:2px solid var(--green); outline-offset:2px; border-color:var(--green); }
.sleeper-league-list { display:grid; gap:7px; max-height:180px; overflow:auto; margin:0 0 18px; padding:10px 12px 10px 28px; border:1px solid var(--line); color:var(--muted); font:11px/1.4 var(--mono); }
.sleeper-league-list li::marker { color:var(--green); }
@media (max-width:800px) {
	.settings-controls .sleeper-sync-button,.settings-controls .sleeper-disconnect-button { padding:9px 12px; font-size:10px; letter-spacing:.7px; }
	.sleeper-sync-button,.sleeper-disconnect-button { padding:7px 7px; font-size:8px; }
	.settings-controls .sleeper-status { position:static; max-width:none; padding:9px 0 2px; background:transparent; border-left:0; border-right:0; border-bottom:0; }
}