.page-header{color:var(--cc-ink);gap:14px;padding:22px 2px 0;display:grid}.page-header-copy{max-width:40rem}.page-header h1{font:900 46px/.9 var(--cc-font-display);font-variation-settings:"opsz" 72;letter-spacing:0;text-transform:uppercase;text-wrap:balance;color:var(--cc-ink);margin:0}.page-header-body{font:500 14px/1.5 var(--cc-font-body);color:var(--cc-faint);max-width:56ch;margin-top:8px}.page-header-body p{margin:0}.page-header-body p+p{margin-top:6px}.page-header-body :is(p,span,div){color:inherit}.page-header-body .page-sub{max-width:none;margin-top:0}.page-header-card{isolation:isolate;color:var(--cc-night-text);background:radial-gradient(120% 80% at 50% 0%, var(--cc-night-hi), var(--cc-navy) 72%);border-radius:22px;gap:14px;padding:18px 18px 16px;display:grid;position:relative;overflow:hidden;box-shadow:0 16px 28px -20px #0c1a2ee6}.page-header-card[data-surface=hard]{background:linear-gradient(150deg, var(--cc-hard-hi), var(--cc-hard-lo))}.page-header-card[data-surface=clay]{background:linear-gradient(150deg, var(--cc-clay-hi), var(--cc-clay-lo))}.page-header-card[data-surface=grass]{background:linear-gradient(150deg, var(--cc-grass-hi), var(--cc-grass-lo))}.page-header-court{z-index:-1;color:#ffffff1f;width:calc(100% - 24px);height:calc(100% - 24px);position:absolute;inset:12px}.page-header-court .court-net{color:#fff3}.page-header-stats{z-index:2;flex-wrap:wrap;gap:12px 28px;margin:0;display:flex;position:relative}.page-header-stats>div{gap:4px;display:grid}.page-header-stats dd{font:900 34px/1 var(--cc-font-display);font-variation-settings:"opsz" 72;font-variant-numeric:tabular-nums;margin:0}.page-header-stats dt{font:700 11px var(--cc-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cc-night-dim-3)}.page-header-card[data-surface] .page-header-stats dt{color:#fffffff2}.page-header-lineup{--slot:74px;z-index:1;grid-auto-flow:column;grid-auto-columns:var(--slot);pointer-events:none;align-items:end;gap:6px;display:grid;position:absolute;bottom:0;right:14px}.page-header-lineup img{width:var(--slot);height:var(--slot);-o-object-fit:contain;object-fit:contain;-o-object-position:50% 100%;object-position:50% 100%;filter:drop-shadow(0 6px 10px #00000047);-webkit-user-select:none;user-select:none;display:block;-webkit-mask-image:linear-gradient(#000 70%,#0000 98%);mask-image:linear-gradient(#000 70%,#0000 98%)}.page-header-card[data-lineup=true]{padding-bottom:90px}.page-header .slate-links{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.page-header .slate-links a{min-height:44px;font:700 13px var(--cc-font-body);color:var(--cc-ink);background:var(--cc-panel);box-shadow:inset 0 0 0 1px var(--cc-line-soft);border-radius:999px;align-items:center;gap:6px;padding:0 16px;text-decoration:none;display:inline-flex}.page-header .slate-links a:hover{background:var(--cc-sunken)}.page-header a:focus-visible{outline:2px solid var(--cc-steel);outline-offset:3px}@media (min-width:720px){.page-header h1{font-size:56px}.page-header-card{grid-template-columns:minmax(0,1fr) auto;align-items:end;padding:24px 24px 22px}.page-header-card[data-lineup=true]{padding-bottom:22px}.page-header-lineup{--slot:clamp(96px, 9vw, 120px);grid-column:2;align-self:end;gap:8px;margin-bottom:-22px;position:relative;bottom:auto;right:auto}}@media (max-width:380px){.page-header-lineup{--slot:62px;right:10px}.page-header-card[data-lineup=true]{padding-bottom:78px}}.page-header.compare-header{isolation:isolate;color:var(--cc-night-text);background:radial-gradient(120% 80% at 50% 0%, var(--cc-night-hi), var(--cc-navy) 72%);border-radius:22px;margin-top:14px;padding:20px 18px 18px;position:relative;overflow:hidden;box-shadow:0 16px 28px -20px #0c1a2ee6}.page-header.compare-header h1{color:#fff;font-size:40px}.page-header.compare-header .page-header-body{color:var(--cc-night-dim-3)}.page-header.compare-header .btn:disabled{opacity:1;color:var(--cc-night-dim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff14;box-shadow:inset 0 0 0 1px #ffffff1f}@media (min-width:720px){.page-header.compare-header{padding:28px 28px 24px}.page-header.compare-header h1{font-size:52px}}@media (max-width:639px){.chip-scroll{padding-right:24px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),#0000)}}
