/* Sporty Sports website. Fonts are served from this site, so visitors never contact Google. */
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; font-display: swap; src: url('/fonts/BricolageGrotesque-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 700; font-display: swap; src: url('/fonts/BricolageGrotesque-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 400 700; font-display: swap; src: url('/fonts/InstrumentSans.ttf') format('truetype'); }

:root { --hivis:#FF5B14; --ink:#121210; --chalk:#FAFAF7; --turf:#1E4D3A; --peach:#FFE3D6; --muted:#5B5B55; --line:#DAD9D2; --card:#FFFFFF; --body:#3F3F3A; }
@media (prefers-color-scheme: dark) {
  :root { --ink:#FAFAF7; --chalk:#121210; --muted:#B4B4AC; --line:#3A3A36; --card:#1F1F1C; --body:#D6D6CF; --peach:#4A2B1D; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--chalk); color:var(--ink); font:17px/1.55 'Instrument Sans', system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--ink); text-decoration-color:var(--hivis); text-decoration-thickness:2px; text-underline-offset:3px; }
:focus-visible { outline:3px solid var(--hivis); outline-offset:3px; border-radius:6px; }

header.site { padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1120px; margin:0 auto; }
header.site .brand { display:flex; align-items:center; gap:10px; text-decoration:none; font:800 22px 'Bricolage Grotesque', sans-serif; letter-spacing:-0.03em; }
header.site .brand span { white-space:nowrap; }
header.site nav { display:flex; gap:20px; font-weight:600; font-size:15px; }
@media (max-width:420px) { header.site { padding:14px 16px; } header.site nav { gap:14px; font-size:14px; } header.site .brand { font-size:20px; } }
header.site nav a { text-decoration:none; }
header.site nav a:hover { text-decoration:underline; text-decoration-color:var(--hivis); text-decoration-thickness:2px; }
@media (max-width:620px) { header.site nav a.hide-sm { display:none; } }

h1, h2, h3 { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; letter-spacing:-0.035em; margin:0; }
h1 { font-size:clamp(42px, 8vw, 84px); line-height:0.96; letter-spacing:-0.045em; }
h2 { font-size:clamp(30px, 5vw, 48px); line-height:1.02; }
h3 { font-size:22px; line-height:1.15; letter-spacing:-0.02em; }
p, li { margin:0 0 12px; }

.wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
.label { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* Hero */
.hero { background:var(--hivis); color:#121210; border-top:2px solid #121210; border-bottom:2px solid #121210; overflow:hidden; }
.hero .wrap { display:grid; grid-template-columns:1.1fr 0.9fr; gap:32px; align-items:center; padding-top:56px; padding-bottom:56px; }
.hero p.lede { font-size:clamp(18px, 2.4vw, 22px); font-weight:500; max-width:30ch; margin:20px 0 28px; }
.hero .laces { width:min(100%, 380px); margin:0 auto; transform:rotate(-8deg); }
@media (max-width:820px) { .hero .wrap { grid-template-columns:1fr; padding-top:36px; padding-bottom:40px; } .hero .laces { width:220px; order:-1; margin:0 0 4px; } }
.hero a { color:#121210; }

.btn { display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 28px; border:2px solid #121210; border-radius:999px; background:#121210; color:#FAFAF7 !important; font:800 19px 'Bricolage Grotesque', sans-serif; text-decoration:none; }
.btn.light { background:#FAFAF7; color:#121210 !important; box-shadow:4px 4px 0 #121210; }
.soon { display:inline-block; margin-left:12px; font-weight:600; font-size:15px; }

/* Sections */
section.block { padding:72px 0; }
section.block + section.block { border-top:2px solid var(--ink); }
.cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px; margin-top:32px; }
.card { background:var(--card); border:2px solid var(--ink); border-radius:20px; padding:20px 22px; box-shadow:4px 4px 0 var(--ink); margin:0 4px 4px 0; }
.card p { color:var(--body); margin-bottom:0; }
.card .num { display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:50%; background:var(--hivis); border:2px solid var(--ink); font:800 16px 'Bricolage Grotesque', sans-serif; margin-bottom:12px; color:#121210; }

/* Feature rows with a phone */
.feature { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:56px 0; }
.feature.flip .shot { order:-1; }
.feature p { color:var(--body); max-width:44ch; }
.feature .tag { display:inline-block; background:var(--peach); border:1.5px solid var(--ink); border-radius:999px; padding:3px 12px; font-size:12px; font-weight:700; letter-spacing:.06em; margin-bottom:14px; }
@media (max-width:820px) { .feature { grid-template-columns:1fr; gap:24px; padding:36px 0; } .feature.flip .shot { order:0; } }
.phone { width:min(300px, 72vw); margin:0 auto; border:3px solid var(--ink); border-radius:44px; overflow:hidden; background:var(--card); box-shadow:8px 8px 0 var(--ink); }
.phone img { width:100%; }

/* Example play */
.play { background:#121210; color:#FAFAF7; border:2px solid var(--ink); border-radius:24px; padding:26px; max-width:560px; margin-top:24px; box-shadow:4px 4px 0 var(--ink); }
.play .label { color:#9A9A92; }
.play .say { font:800 28px/1.12 'Bricolage Grotesque', sans-serif; letter-spacing:-0.02em; margin:6px 0 18px; }
.play .ask { font:700 21px/1.2 'Bricolage Grotesque', sans-serif; color:#FF7A3D; margin:6px 0 0; }

/* Pricing */
.price { background:var(--turf); color:#FAFAF7; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); padding:64px 0; }
.price .wrap { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.price .big { font:800 clamp(56px, 10vw, 96px)/1 'Bricolage Grotesque', sans-serif; letter-spacing:-0.05em; }
.price ul { list-style:none; padding:0; margin:0; }
.price li { padding-left:34px; position:relative; margin-bottom:10px; font-weight:500; }
.price li::before { content:""; position:absolute; left:0; top:3px; width:22px; height:22px; border-radius:50%; background:var(--hivis); border:2px solid #121210; }
.price li::after { content:""; position:absolute; left:7px; top:8px; width:6px; height:10px; border:solid #121210; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.price a { color:#FAFAF7; }
@media (max-width:820px) { .price .wrap { grid-template-columns:1fr; } }

/* FAQ */
details { border:2px solid var(--ink); border-radius:16px; background:var(--card); padding:4px 20px; margin:0 4px 12px 0; }
summary { cursor:pointer; font-weight:700; padding:14px 0; list-style:none; display:flex; justify-content:space-between; gap:12px; min-height:44px; align-items:center; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; font:800 24px 'Bricolage Grotesque', sans-serif; color:var(--hivis); }
details[open] summary::after { content:"\2212"; }
details p { color:var(--body); padding-bottom:6px; }

/* Plain pages (privacy, terms, support) */
main { max-width:680px; margin:0 auto; padding:32px 24px 72px; }
main h1 { font-size:40px; line-height:1.05; margin-bottom:8px; }
main h2 { font-size:22px; margin:36px 0 8px; letter-spacing:-0.02em; }
main ul { padding-left:20px; }
.muted { color:var(--muted); font-size:15px; }
main .card { margin:24px 4px 24px 0; }

footer.site { border-top:2px solid var(--ink); padding:32px 24px 48px; }
footer.site .wrap { padding:0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; color:var(--muted); font-size:14px; }
footer.site a { color:var(--muted); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }