/* Shared foundation, homepage, forms, plans and member research screens. */

:root { --ink:#171b20;--muted:#697079;--paper:#f4f5f3;--gold:#e8bd60;--line:#dfe2df;--green:#28794e;--red:#ad4343;--sidebar:250px }
* { box-sizing:border-box }
[hidden] { display:none!important }
body { margin:0;font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--paper) }
h1, h2, h3, p { margin:0 }
h1, h2, h3 { font-weight:750;letter-spacing:-.045em;line-height:1.08 }
h1 { font-size:clamp(34px,4vw,58px) }
h2 { font-size:38px }
h3 { font-size:27px }
a { color:inherit }
button, input, select { font:inherit }
button, a, input, select { touch-action:manipulation }
button { cursor:pointer }
button:disabled { cursor:default;opacity:.65 }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid #ad7e1f;outline-offset:4px }
input, select { min-width:0;max-width:100% }
button { color:inherit }
.sr-only { position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.button { display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:15px 22px;border:1px solid transparent;border-radius:6px;text-decoration:none;font-weight:700;font-size:14px;line-height:1.4;transition:background .15s,transform .15s }
.button:hover:not(:disabled) { transform:translateY(-1px) }
.button.dark { background:var(--ink);color:white }
.button.gold { background:var(--gold);color:var(--ink) }
.button.quiet { border-color:#c3c8c5;background:transparent;color:inherit }
.button.small { padding:10px 15px;font-size:13px }
.button.wide { width:100% }
.eyebrow { font-size:10px;font-weight:800;letter-spacing:.15em;line-height:1.5 }
.hero { max-width:1440px;margin:auto;display:grid;grid-template-columns:1.2fr 1fr;gap:70px;padding:90px max(5vw,24px) 85px;align-items:center }
.hero .eyebrow { display:flex;gap:9px;align-items:center;margin-bottom:28px }
.live-dot { width:7px;height:7px;border-radius:50%;background:var(--green) }
.hero h1 { font-size:clamp(38px,4.2vw,66px);line-height:1.04;letter-spacing:-.055em }
.hero h1 em, .center-heading em { font-style:normal;color:#677168 }
.hero-copy>p { max-width:490px;font-size:16px;color:var(--muted);line-height:1.7;margin-top:25px }
.hero-actions { display:flex;gap:22px;align-items:center;margin-top:32px;flex-wrap:wrap }
.text-link { font-size:13px;font-weight:700;text-decoration:none }
.hero-note { font-size:12px;color:var(--muted);margin-top:14px }
.research-art { background:#1e2424;color:white;border-radius:10px;padding:27px 30px 25px;box-shadow:16px 16px 0 #e4e8e1;transform:rotate(-1deg);min-width:0 }
.art-top, .art-bottom { display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:8px;font-weight:700;letter-spacing:.16em;color:#b5c1b8 }
.art-top { border-bottom:1px solid #4e5650;padding-bottom:18px }
.art-title { font-size:32px;letter-spacing:-.035em;line-height:1.2;margin:28px 0 }
.art-title>span { color:var(--gold) }
.art-row { display:flex;align-items:center;gap:17px;border-top:1px solid #414942;padding:19px 0 }
.art-index { font:20px Georgia,serif;color:#8c9a8e }
.art-row strong { display:block;font-size:16px;letter-spacing:-.02em }
.art-row small { color:#a8b4aa;display:block;font-size:11px;margin-top:2px }
.art-check { margin-left:auto;color:var(--gold);font-size:22px }
.art-bottom { border-top:1px solid #414942;padding-top:22px }
.mini-bars { display:flex;align-items:flex-end;gap:5px;height:34px }
.mini-bars i { display:block;width:9px;background:#708170;height:11px }
.mini-bars i:nth-child(2) { height:17px }
.mini-bars i:nth-child(3) { height:14px }
.mini-bars i:nth-child(4) { height:23px }
.mini-bars i:nth-child(5) { height:19px }
.mini-bars i:nth-child(6) { height:28px }
.mini-bars i:last-child { height:34px;background:var(--gold) }
.topic-strip { display:flex;justify-content:space-evenly;align-items:center;padding:23px 5vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.15em;font-weight:700;gap:18px }
.topic-strip b { color:#b2965c }
.section { max-width:1320px;margin:auto;padding:70px max(5vw,24px) }
.intro-section { display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;padding-bottom:35px }
.intro-section .eyebrow { margin-bottom:16px }
.intro-section>p { color:var(--muted);font-size:16px }
.feature-grid { padding-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px }
.feature-grid article { padding:30px;background:#fff;border:1px solid var(--line);border-radius:7px;display:flex;flex-direction:column }
.feature-number { font-size:10px;letter-spacing:.12em;font-weight:800;color:var(--muted) }
.feature-grid h3 { margin:40px 0 18px }
.feature-grid p { font-size:14px;color:var(--muted);flex:1 }
.feature-grid a { font-size:12px;font-weight:700;margin-top:35px;text-decoration:none }
.feature-grid .premium-feature { background:#e9eddc;border-color:#d3dbc4 }
.bottom-cta { max-width:none;background:#1e2424;color:white;text-align:center;padding:75px 25px }
.bottom-cta h2 { margin:17px 0 25px }
.bottom-cta p { font-size:11px;color:#b6bfb6;margin-top:22px }
.auth-layout { display:grid;grid-template-columns:1fr 1fr;min-height:650px }
.auth-story { background:#202725;color:white;padding:90px 10vw 60px 7vw;display:flex;flex-direction:column }
.auth-story h1 { font-size:clamp(38px,4.7vw,66px);margin:35px 0 25px }
.auth-story h1 em { font-style:normal;color:var(--gold) }
.auth-story>p { font-size:15px;color:#b8c5bb;max-width:370px }
.story-bottom { margin-top:auto;padding-top:60px;display:flex;gap:20px;font-size:9px;letter-spacing:.08em;color:#aeb8af }
.auth-panel { display:grid;place-items:center;padding:60px 35px;background:white }
.auth-form { max-width:380px;width:100% }
.auth-form h2 { margin-top:14px;margin-bottom:14px }
.muted { color:var(--muted) }
.auth-form form { margin-top:28px }
.auth-form label { display:block;font-size:12px;font-weight:700;margin-bottom:17px }
.auth-form input { display:block;width:100%;padding:12px;border:1px solid #cbd0cb;border-radius:5px;background:#fbfcf9;margin-top:6px }
.auth-form label small { font-weight:400;color:var(--muted) }
.form-link { display:block;font-size:12px;margin:14px 0 20px }
.auth-switch { font-size:12px;margin-top:22px;text-align:center;color:var(--muted) }
.auth-switch a { color:var(--ink);font-weight:700 }
.notice { padding:15px 18px;margin:16px 0;border-radius:5px;background:#f7efd8;border-left:3px solid #b9923a;font-size:13px }
.notice.error { background:#fce9e5;border-color:var(--red) }
.global-notice { max-width:1000px;margin:20px auto }
.center-heading { text-align:center;max-width:800px;margin:auto }
.center-heading h1 { margin:18px 0 20px }
.center-heading>p { color:var(--muted) }
.plans-grid { display:grid;grid-template-columns:1fr 1fr;max-width:900px;gap:28px;margin:50px auto 0 }
.plan-card { border:1px solid var(--line);background:white;padding:38px;border-radius:10px }
.plan-card h2 { margin:20px 0;font-size:40px }
.plan-price { font-size:27px;font-weight:800;letter-spacing:-.03em }
.plan-price small { font-size:11px;font-weight:400;color:var(--muted);letter-spacing:0 }
.plan-card>p { margin:15px 0;color:var(--muted);font-size:14px }
.check-list { list-style:none;padding:20px 0;margin:0 0 20px;border-top:1px solid var(--line) }
.check-list li { padding:8px 0 8px 23px;position:relative;font-size:14px }
.check-list li:before { content:'✓';position:absolute;left:0;color:var(--green) }
.plan-card.featured { border:2px solid #d6b56e;background:#fcfaf3 }
.billing-note { display:block;margin-top:16px;font-size:11px;color:var(--muted) }
.plan-footnote { max-width:650px;text-align:center;margin:50px auto 0;color:var(--muted);font-size:13px }
.plan-footnote strong { color:var(--ink);display:block;margin-bottom:8px }
.account-page { max-width:1100px;min-height:650px }
.back-link { display:block;margin-bottom:34px;text-decoration:none;font-size:13px }
.account-page h1 { margin:13px 0 35px }
.account-grid { display:grid;grid-template-columns:1fr 1fr;gap:24px }
.panel { padding:30px;border:1px solid var(--line);border-radius:8px;background:white }
.panel h2 { font-size:27px;margin-bottom:25px }
.panel dl { display:grid;grid-template-columns:100px 1fr;font-size:13px;gap:13px }
.panel dd { margin:0;overflow-wrap:anywhere }
.panel dt { color:var(--muted) }
.membership-panel { background:#e9eddc }
.membership-panel h2 { margin-top:12px }
.membership-panel p { margin-bottom:22px;font-size:14px }
.account-actions { display:grid;gap:12px;margin-top:25px }
.text-button { padding:0;background:transparent;border:0;font-weight:700;font-size:13px }
.logout-form { margin-top:35px }
.workspace { margin-left:var(--sidebar);min-height:100vh }
.workspace-header { padding:19px 38px;border-bottom:1px solid var(--line);background:#fbfcf9;display:flex;align-items:center;justify-content:space-between;gap:20px }
.workspace-header>span { font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--muted) }
.workspace-header>a { display:flex;align-items:center;gap:12px;font-size:12px;text-decoration:none }
.avatar { width:29px;height:29px;display:grid;place-items:center;background:#e6eadf;border-radius:50%;font-weight:800;font-size:11px }
#member-app { padding:38px;max-width:1600px;margin:auto }
.page-heading { display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px }
.page-heading h1 { font-size:40px;margin:10px 0 }
.page-heading p { font-size:13px;color:var(--muted) }
.period-selectors { display:flex;gap:10px }
.period-selectors label { font-size:9px;color:var(--muted);text-transform:uppercase;font-weight:800;letter-spacing:.07em }
.period-selectors select { display:block;margin-top:6px;min-width:100px;padding:9px 12px;border:1px solid #cbd2ca;border-radius:5px;background:#fff;font-size:12px;font-weight:700 }
.stat-strip { display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--line);border-radius:7px;margin-bottom:30px }
.stat-strip>div { padding:18px 22px;border-right:1px solid var(--line) }
.stat-strip>div:last-child { border:0 }
.stat-strip span { display:block;font-size:8px;letter-spacing:.1em;color:var(--muted);font-weight:700 }
.stat-strip strong { display:block;font-size:12px;font-weight:600;margin-top:4px }
.research-toolbar { display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px }
.position-tabs { display:flex;gap:5px;flex-wrap:wrap }
.position-tabs button { border:1px solid transparent;padding:8px 12px;border-radius:5px;background:transparent;font-size:11px;font-weight:700;color:var(--muted) }
.position-tabs button[aria-pressed=true] { background:#1d2424;color:white }
.search-box { position:relative }
.search-box input { padding:9px 30px 9px 12px;width:210px;border:1px solid var(--line);border-radius:5px;background:white;font-size:11px }
.search-box>span:last-child { position:absolute;right:11px;top:2px;font-size:24px;color:var(--muted) }
.table-panel { border:1px solid var(--line);border-radius:8px;background:white;overflow:hidden }
.table-meta { padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);font-size:12px;font-weight:700 }
.table-meta small { font-size:10px;font-weight:400;color:var(--muted) }
.table-scroll { overflow-x:auto }
table { width:100%;border-collapse:collapse;text-align:right;font-variant-numeric:tabular-nums }
th { font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:#f7f8f5;padding:12px 16px;white-space:nowrap }
td { padding:13px 16px;border-top:1px solid #edf0eb;font-size:12px;white-space:nowrap }
th:first-child, td:first-child { text-align:left }
.player-cell { display:flex;align-items:center;gap:11px;min-width:200px;text-align:left;border:0;background:transparent;padding:0 }
.player-cell img { width:35px;height:38px;object-fit:contain;background:#edf0e8;border-radius:5px }
.player-cell strong { font-weight:700;font-size:12px;display:block }
.player-cell small { display:block;color:var(--muted);font-size:9px;margin-top:3px }
.player-cell:hover strong { text-decoration:underline }
.team-inline { display:inline-flex;align-items:center;gap:8px;font-size:12px }
.team-inline img { width:25px;height:25px;object-fit:contain }
.points { font-size:15px;font-weight:800 }
.position-pill { font-size:8px;padding:3px 5px;border:1px solid #dce1d9;border-radius:3px;color:#566356;background:#f5f7f1 }
.pager { display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-top:1px solid var(--line);font-size:10px;color:var(--muted) }
.pager button { background:white;border:1px solid var(--line);padding:6px 11px;border-radius:4px;font-size:11px }
.data-note { font-size:10px;color:var(--muted);margin-top:20px }
.empty-state { text-align:center;padding:70px 25px;background:#fff;border:1px solid var(--line);border-radius:8px }
.empty-state h2 { font-size:27px;margin-bottom:13px }
.empty-state p { color:var(--muted);font-size:13px;max-width:500px;margin:0 auto 20px }
.loading-mark { display:inline-block;color:#89947e;letter-spacing:-1px;font-size:30px;font-weight:900;margin-bottom:20px }
.upgrade-wall { padding:45px;display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center;background:#e9eddc;border:1px solid #d8dfcb;border-radius:8px }
.upgrade-wall h2 { margin:16px 0;font-size:36px }
.upgrade-wall p { color:#5b685b;font-size:14px;margin-bottom:25px }
.upgrade-list { border-left:1px solid #c8d2b8;padding-left:35px }
.upgrade-list div { padding:15px 0;border-bottom:1px solid #d1dac1;font-size:13px;font-weight:600 }
.upgrade-list div:last-child { border:0 }
.team-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px }
.team-card { padding:22px;background:white;border:1px solid var(--line);border-radius:7px;text-align:left;min-width:0 }
.team-card:hover { border-color:#8e9c82 }
.team-card .team-inline { font-size:20px;font-weight:800 }
.team-card .team-inline img { width:36px;height:36px }
.team-card dl { display:grid;grid-template-columns:1fr auto;gap:7px;font-size:11px;margin:20px 0 0 }
.team-card dt { color:var(--muted) }
.team-card dd { margin:0;font-weight:700 }
.positive { color:var(--green) }
.negative { color:var(--red) }
.neutral { color:var(--muted) }
.compare-selects { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px }
.compare-selects label { font-size:10px;font-weight:700;color:var(--muted) }
.compare-selects select { display:block;width:100%;font-size:12px;background:white;border:1px solid var(--line);border-radius:5px;padding:11px 8px;margin-top:7px }
.compare-action { margin-bottom:25px }
.compare-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px }
.compare-card { padding:25px;background:white;border:1px solid var(--line);border-radius:8px }
.compare-card>h3 { font-size:24px;margin:8px 0 15px }
.compare-card .big-value { font-size:39px;font-weight:800;letter-spacing:-.04em }
.compare-card dl { display:grid;grid-template-columns:1fr auto;gap:8px;font-size:12px }
.compare-card dd { margin:0;font-weight:700 }
.compare-card dt { color:var(--muted) }
.sparkline { width:100%;height:70px;margin-top:20px;overflow:visible }
.sparkline polyline { stroke:#597353;stroke-width:2.5;fill:none }
.chart-caption { font-size:10px;color:var(--muted);margin-top:8px }
.trend-tag { display:inline-block;padding:4px 7px;border-radius:4px;background:#eef4ea;font-size:11px;font-weight:700 }
.trend-tag.negative { background:#f9ece8 }
.sample { display:block;color:var(--muted);font-size:9px }
.matchup-name { font-weight:700 }
.def-rank { display:inline-block;background:#eef1e9;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:800 }
.toolbar-back { margin-bottom:15px }
.dialog-close { position:absolute;right:15px;top:9px;font-size:27px;background:transparent;border:0;color:var(--muted) }
dialog { border:1px solid var(--line);border-radius:12px;padding:35px;max-width:min(650px,92vw);width:650px;color:var(--ink);background:#fafbf7 }
dialog::backdrop { background:#141b1bc4 }
.dialog-player { display:flex;align-items:center;gap:18px;margin-bottom:25px }
.dialog-player img { width:75px;height:85px;object-fit:contain;background:#e9eee2;border-radius:6px }
.dialog-player h2 { font-size:31px;margin:5px 0 }
.detail-metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:12px }
.detail-metrics>div { padding:18px;background:white;border:1px solid var(--line);border-radius:6px }
.detail-metrics small { display:block;color:var(--muted);font-size:10px }
.detail-metrics strong { font-size:25px;display:block;margin-top:5px }
.dialog-premium { margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:12px }
.app-page>.global-notice { margin-left:calc(var(--sidebar) + 38px);margin-right:38px }
.error-retry { margin-top:10px }
@media(min-width:1550px) {
  :root { --sidebar:270px }
  #member-app { padding:45px 55px }
  .hero { padding-top:110px;padding-bottom:110px }
}
@media(max-width:1100px) {
  :root { --sidebar:215px }
  .hero { gap:35px;padding-top:60px;padding-bottom:60px }
  .hero h1 { font-size:46px }
  .art-title { font-size:28px }
  .workspace-header { padding:17px 24px }
  #member-app { padding:28px 24px }
  .page-heading { align-items:flex-start }
  .page-heading h1 { font-size:34px }
  .period-selectors select { min-width:85px }
  .stat-strip>div { padding:14px }
  .team-grid { grid-template-columns:repeat(2,1fr) }
  .upgrade-wall { padding:30px;grid-template-columns:1fr }
  .upgrade-list { border-left:0;border-top:1px solid #c8d2b8;padding:10px 0 0 }
  .intro-section { gap:35px }
  .feature-grid article { padding:23px }
  .feature-grid h3 { font-size:25px }
}
@media(max-width:760px) {
  .hero { grid-template-columns:1fr;padding:50px 24px;gap:45px }
  .hero h1 { font-size:49px }
  .hero-copy>p { font-size:15px }
  .research-art { max-width:520px;transform:none;box-shadow:9px 9px 0 #e4e8e1 }
  .hero-actions { gap:20px }
  .topic-strip { flex-wrap:wrap;justify-content:center;font-size:9px;padding:20px 15px;gap:12px }
  .topic-strip b:nth-of-type(2) { display:none }
  .section { padding:45px 24px }
  .intro-section { grid-template-columns:1fr;gap:25px }
  .intro-section h2 { font-size:34px }
  .feature-grid { grid-template-columns:1fr;gap:16px;padding-top:0 }
  .feature-grid h3 { margin-top:22px }
  .feature-grid a { margin-top:22px }
  .auth-layout { display:block;min-height:0 }
  .auth-story { display:none }
  .auth-panel { padding:55px 24px 65px;min-height:580px }
  .plans-grid { grid-template-columns:1fr;gap:20px }
  .plan-card { padding:28px }
  .center-heading h1 { font-size:38px }
  .account-grid { grid-template-columns:1fr }
  .account-page h1 { font-size:35px }
  .workspace { margin-left:0 }
  .workspace-header { padding:12px 20px }
  .workspace-header>span { font-size:8px }
  .workspace-header>a { font-size:10px }
  .workspace-header .avatar { width:25px;height:25px }
  #member-app { padding:28px 20px }
  .page-heading { display:block;margin-bottom:22px }
  .page-heading h1 { font-size:34px }
  .period-selectors { margin-top:22px }
  .period-selectors label { flex:1 }
  .period-selectors select { width:100% }
  .stat-strip { grid-template-columns:1fr 1fr;margin-bottom:22px }
  .stat-strip>div:nth-child(2) { display:none }
  .stat-strip>div { padding:14px 12px }
  .stat-strip strong { font-size:10px }
  .stat-strip span { font-size:7px }
  .research-toolbar { flex-wrap:wrap;gap:14px }
  .search-box { width:100% }
  .search-box input { width:100%;padding-top:11px;padding-bottom:11px;font-size:12px }
  .position-tabs { gap:2px }
  .position-tabs button { padding:8px 12px }
  .team-grid { grid-template-columns:1fr 1fr;gap:10px }
  .team-card { padding:16px }
  .team-card .team-inline { font-size:17px }
  .team-card .team-inline img { width:28px;height:28px }
  .team-card dl { font-size:10px }
  .table-meta { padding:15px }
  .table-meta small { font-size:9px }
  .player-cell { min-width:160px }
  .player-cell strong { font-size:11px }
  td, th { padding:12px }
  .upgrade-wall { padding:26px }
  .upgrade-wall h2 { font-size:31px }
  .compare-selects { grid-template-columns:1fr 1fr }
  .compare-grid { grid-template-columns:1fr }
  .compare-card { padding:25px }
  .detail-metrics { grid-template-columns:1fr 1fr }
  .dialog-player h2 { font-size:25px }
  dialog { padding:30px 24px }
  .app-page>.global-notice { margin:15px 20px }
  .data-note { font-size:9px }
}
@media(prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto!important;transition:none!important }
}
