/* Drill Vault shop – shared styles. Fonts are self-hosted (no third-party requests). */
@font-face { font-family:Anton; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/anton-latin-400-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:Anton; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/anton-latin-ext-400-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:Inter; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/inter-latin-400-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:Inter; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/inter-latin-ext-400-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:Inter; font-style:normal; font-weight:600; font-display:swap; src:url(/assets/fonts/inter-latin-600-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:Inter; font-style:normal; font-weight:600; font-display:swap; src:url(/assets/fonts/inter-latin-ext-600-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:Inter; font-style:normal; font-weight:700; font-display:swap; src:url(/assets/fonts/inter-latin-700-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:Inter; font-style:normal; font-weight:700; font-display:swap; src:url(/assets/fonts/inter-latin-ext-700-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Palette taken from the Drill Vault videos: near-black court, orange player/label, teal "right" tag. */
:root { --bg:#0f1115; --bg2:#0b0d10; --surface:#171a20; --line:#2a2f38; --text:#f2f3f5; --soft:#c9cdd3; --muted:#9aa1ab; --accent:#e0561c; --accent2:#ff7a3d; --teal:#2ec4a0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--accent2); }
img, video { display:block; max-width:100%; height:auto; }
.wrap { max-width:1120px; margin:0 auto; padding:0 20px; }
.display { font-family:Anton,Impact,sans-serif; font-weight:400; letter-spacing:.01em; text-transform:uppercase; line-height:1.02; }
.eyebrow { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin:0 0 12px; }
.tag { display:inline-block; background:var(--teal); color:#0b0d10; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:999px; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:12px; top:12px; background:var(--accent); color:#fff; padding:8px 12px; border-radius:8px; z-index:10; }

header.top { border-bottom:1px solid var(--line); }
header.top .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo { font-family:Anton,Impact,sans-serif; font-size:24px; letter-spacing:.03em; color:var(--text); text-decoration:none; }
.logo span { color:var(--accent); }
.nav a { color:var(--muted); text-decoration:none; font-size:14px; margin-left:20px; }
.nav a:hover { color:var(--text); }
.nav a.pill { color:#fff; background:var(--accent); padding:8px 14px; border-radius:999px; font-weight:600; }

.hero { padding:56px 0 40px; }
.hero .wrap { display:grid; grid-template-columns:1.25fr .75fr; gap:48px; align-items:center; }
.hero h1 { font-size:clamp(44px,7vw,84px); margin:0 0 20px; }
.hero h1 em { font-style:normal; color:var(--accent); }
.lead { font-size:18px; color:var(--soft); max-width:560px; margin:0 0 28px; }
.stats { display:flex; gap:28px; flex-wrap:wrap; margin:0 0 32px; padding:0; list-style:none; }
.stats li { font-size:14px; color:var(--muted); }
.stats b { display:block; font-family:Anton,Impact,sans-serif; font-weight:400; font-size:30px; color:var(--text); line-height:1.1; }
.phone { justify-self:center; width:100%; max-width:300px; aspect-ratio:9/16; border-radius:28px; overflow:hidden; border:8px solid #22262e; background:#000; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.phone video { width:100%; height:100%; object-fit:cover; }
.phone-cap { text-align:center; color:var(--muted); font-size:13px; margin-top:12px; }

.card { background:var(--surface); border:1px solid var(--line); border-radius:14px; }
form.waitlist { padding:20px; max-width:600px; }
form.waitlist .row { display:flex; gap:10px; flex-wrap:wrap; }
form.waitlist .row + .row { margin-top:10px; }
form.waitlist input[type=email], form.waitlist select { flex:1 1 200px; min-width:0; height:48px; padding:0 14px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; }
form.waitlist select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px; background-size:5px 5px; background-repeat:no-repeat; padding-right:36px; }
form.waitlist input:focus, form.waitlist select:focus, button:focus-visible, .btn:focus-visible { outline:2px solid var(--accent2); outline-offset:2px; }
button, .btn { display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 22px; border:0; border-radius:10px; background:var(--accent); color:#fff; font:600 16px Inter,sans-serif; cursor:pointer; text-decoration:none; }
button:hover, .btn:hover { background:var(--accent2); }
.btn.ghost { background:transparent; border:1px solid var(--line); color:var(--text); height:40px; font-size:14px; padding:0 14px; }
.btn.ghost:hover { border-color:var(--accent); background:transparent; }
.consent { display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-size:13px; color:var(--muted); }
.consent input { margin-top:3px; width:16px; height:16px; accent-color:var(--accent); flex:none; }
.hidden { position:absolute; left:-9999px; }
.form-note { font-size:13px; color:var(--muted); margin:10px 0 0; }

section { padding:64px 0; }
section.alt { background:var(--bg2); }
section h2 { font-size:clamp(34px,5vw,52px); margin:0 0 12px; }
.sub { color:var(--muted); max-width:640px; margin:0 0 36px; }

.books { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.book { padding:16px; display:flex; flex-direction:column; }
.book img { border-radius:8px; border:1px solid var(--line); aspect-ratio:600/776; object-fit:cover; width:100%; background:#fff; }
.book h3 { font-family:Anton,Impact,sans-serif; font-weight:400; font-size:24px; text-transform:uppercase; margin:16px 0 4px; letter-spacing:.02em; }
.book p { color:var(--muted); font-size:14px; margin:0 0 14px; flex:1; }
.book .meta { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:12px; font-size:14px; color:var(--muted); gap:10px; }
.book .buy { display:flex; justify-content:space-between; align-items:center; margin-top:12px; gap:10px; }
.price { font-weight:700; color:var(--text); font-size:20px; }
.bundle { margin-top:20px; padding:28px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; border-color:var(--accent); background:linear-gradient(0deg,rgba(224,86,28,.08),rgba(224,86,28,.08)),var(--surface); }
.bundle h3 { font-family:Anton,Impact,sans-serif; font-weight:400; font-size:30px; text-transform:uppercase; margin:8px 0 6px; }
.bundle p { margin:0; color:var(--soft); }
.bundle .side { text-align:right; }
.bundle .price { font-size:34px; display:block; }
.bundle .was { color:var(--muted); font-size:14px; }
.bundle .was s { margin-right:6px; }
.bundle .btn { margin-top:12px; }

.inside { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.pages { position:relative; }
.pages img { border-radius:10px; box-shadow:0 20px 50px rgba(0,0,0,.45); background:#fff; }
.pages img + img { position:absolute; width:46%; right:-16px; bottom:-24px; border:1px solid var(--line); }
.checks { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.checks li { padding-left:30px; position:relative; }
.checks li::before { content:""; position:absolute; left:0; top:7px; width:14px; height:14px; border-radius:4px; background:var(--accent); }
.checks b { color:var(--text); }
.checks span { color:var(--muted); }

.ages { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.age { padding:18px 16px; }
.age b { font-family:Anton,Impact,sans-serif; font-weight:400; font-size:34px; color:var(--accent); display:block; line-height:1; }
.age span { display:block; font-size:13px; color:var(--muted); margin-top:6px; }
.age p { font-size:14px; margin:10px 0 0; color:var(--soft); }

.faq { display:grid; gap:12px; max-width:800px; }
details { padding:18px 20px; }
summary { cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:16px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; color:var(--accent); font-weight:700; }
details[open] summary::after { content:"–"; }
details p { color:var(--soft); margin:12px 0 0; }

.cta { text-align:center; }
.cta .sub { margin:0 auto 28px; }
.cta form.waitlist { margin:0 auto; text-align:left; }

footer { border-top:1px solid var(--line); padding:32px 0 48px; color:var(--muted); font-size:13px; }
footer .wrap { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
footer a { color:var(--muted); margin-right:16px; }
footer a:hover { color:var(--text); }
footer .legal { max-width:640px; }

/* Legal and utility pages */
.doc { max-width:760px; padding-top:32px; padding-bottom:56px; }
.doc h1 { font-size:clamp(36px,6vw,52px); margin:0 0 6px; }
.doc h2 { font-size:20px; margin:36px 0 8px; }
.doc h3 { font-size:16px; margin:20px 0 6px; }
.doc p, .doc li { color:var(--soft); margin:0 0 10px; }
.doc ul { padding-left:22px; }
.doc .meta { color:var(--muted); margin-bottom:24px; }
.doc .box { border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--surface); margin:0 0 12px; }
.doc .box p:last-child { margin:0; }
.doc table { width:100%; border-collapse:collapse; margin:0 0 12px; font-size:14px; }
.doc th, .doc td { text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line); color:var(--soft); }
.doc th { color:var(--text); font-weight:600; }
.doc .toc { columns:2; font-size:14px; padding-left:18px; }
.center { min-height:70vh; display:grid; place-items:center; text-align:center; padding:48px 20px; }
.center h1 { font-size:clamp(40px,8vw,64px); margin:0 0 16px; }
.center h1 span { color:var(--accent); }
.center p { color:var(--soft); max-width:520px; margin:0 auto 24px; }

@media (max-width:900px) {
  .hero .wrap, .inside { grid-template-columns:1fr; }
  .phone { max-width:240px; }
  .books { grid-template-columns:repeat(2,1fr); }
  .ages { grid-template-columns:repeat(2,1fr); }
  .bundle { grid-template-columns:1fr; }
  .bundle .side { text-align:left; }
  .nav a:not(.pill) { display:none; }
  .pages img + img { right:8px; }
}
@media (max-width:560px) {
  .books { grid-template-columns:1fr; }
  section { padding:48px 0; }
  .doc .toc { columns:1; }
  .doc table, .doc tbody, .doc tr, .doc th, .doc td { display:block; }
  .doc th { border-bottom:0; padding-bottom:0; }
}
.note-top { margin-top:16px; }
.grow { flex:1; }
.doc h2.part { font-size:28px; margin-top:44px; color:var(--accent); }
.gap-top { margin-top:14px; }