:root{--accent:#BE185D}
@media (prefers-color-scheme:dark){:root{--accent:#F472B6;--accent-ink:#2a0a18}}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;padding:12px 0 8px}
@media (max-width:820px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero h1{font-size:clamp(32px,5vw,52px);line-height:1.15}
.hero .lead{font-size:18px;margin:12px 0 24px}
.hero .meta{color:var(--muted);font-size:14px;margin-top:12px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:480px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{aspect-ratio:1/1;border-radius:var(--r-panel);padding:12px;display:flex;align-items:flex-end;color:#fff;font-weight:700;font-size:15px;line-height:1.3;text-decoration:none;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.tile:hover{transform:translateY(-2px)}
#quiz{max-width:640px;margin:0 auto;padding:8px 0 24px}
.progress{height:8px;border-radius:999px;background:color-mix(in oklab,var(--text) 12%,transparent);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);transition:width .35s cubic-bezier(.16,1,.3,1)}
.qn{color:var(--muted);font-weight:600;margin:18px 0 4px}
.qt{font-size:clamp(22px,3.6vw,28px);margin:0 0 20px}
.answers{display:grid;gap:10px}
.ans{font:inherit;text-align:left;padding:16px 18px;border-radius:var(--r-panel);border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;font-weight:600;font-size:17px;transition:border-color .15s,background .15s,transform .15s}
.ans:hover{border-color:var(--accent);background:var(--accent-soft)}
.ans:active{transform:scale(.99)}
.back{margin-top:16px;background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;text-decoration:underline}
.res-head{border-radius:var(--r-panel);padding:28px 24px;color:#fff;margin-bottom:20px}
.res-head p{margin:0;opacity:.9}
.res-head h1{color:#fff;margin:6px 0;font-size:clamp(30px,5vw,44px)}
.res-head .tag{font-size:18px;font-weight:600}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media (max-width:640px){.cols{grid-template-columns:1fr}}
.cols h3{margin-top:0}
.cols ul{margin:0;padding-left:20px}
.sharebar{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.matches{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.matches a{display:block;text-decoration:none;color:#fff;border-radius:var(--r-panel);padding:14px 16px;font-weight:700}
.matches a span{display:block;font-weight:500;font-size:13px;opacity:.9}
/* SEO pass 2026-10: a11y. Full-opacity white text on the colored result header and match cards (was 4.38-4.48:1); result panel headings are h2 now. */
.res-head p{opacity:1}
.matches a span{opacity:1}
.cols h2{margin-top:0;font-size:1.15rem}

/* ===== UI v2 (2026-10-15) ===== */
.hero .tool-cta .btn{min-width:200px}
/* question screen: readable progress, big full-width answers */
.qn{font-size:18px;font-weight:800;color:var(--text-2);margin:18px 0 6px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.answers{gap:12px}
.ans{display:flex;align-items:center;width:100%;min-height:56px;padding:14px 18px;border-width:1.5px;line-height:1.4}
.back{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--text-2);font-weight:600}
/* result: the type name is the hero (same scale as .big) */
.res-head h1{font-size:clamp(34px,11vw,72px);font-weight:850;letter-spacing:-.04em;line-height:1.05;margin:8px 0 10px}
@media (max-width:600px){.res-head{padding:22px 18px}}
.res-head .tag{font-size:var(--fs-lead)}

/* ===== Golfer type test (2026-10-15). dist/assets/golf.css = assets/app.css + this file; loaded only on /golf-type pages. ===== */
:root{--accent:#15803d}
@media (prefers-color-scheme:dark){:root{--accent:#4ade80;--accent-ink:#052e16}}
.hero .recent{margin-top:14px;font-size:var(--fs-sm);color:var(--text-2);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hero .recent .btn{min-height:44px}
/* quiz: the hero shrinks to its H1 so the page keeps one visible heading */
.hero.quizzing{display:block;padding:0}
.hero.quizzing>div>:not(h1),.hero.quizzing .tiles{display:none}
.hero.quizzing h1{font-size:var(--fs-h3);line-height:1.3;margin:0;color:var(--text-2)}
/* quiz: number badge, previous choice, footer */
.ans-k{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;margin-right:12px;border-radius:999px;border:1.5px solid var(--line);font-size:14px;font-weight:800;color:var(--text-2)}
.ans[aria-pressed=true]{border-color:var(--accent);border-width:2px;background:var(--accent-soft)}
.ans[aria-pressed=true] .ans-k{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.qt:focus{outline:none}
.qt:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.q-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.q-foot .back{margin-top:0}
.keyhint{margin:0;font-size:var(--fs-xs);color:var(--text-2)}
@media (pointer:coarse){.keyhint{display:none}}
/* result */
.g-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px!important}
.g-tags .rtag{display:inline-block;padding:4px 12px;border-radius:999px;border:1.5px solid rgba(255,255,255,.9);color:#fff;font-weight:700;font-size:var(--fs-sm)}
#g-bars{margin-top:16px}
#g-bars h2{margin-top:0;font-size:1.15rem}
.g-bar-row+.g-bar-row{margin-top:14px}
.g-bar-name{margin:0;font-weight:700}
.g-bar-labels{display:flex;justify-content:space-between;gap:12px;margin:2px 0 6px;font-size:var(--fs-sm);color:var(--text-2)}
.g-bar-labels .on{color:var(--text);font-weight:800}
.g-bar{height:10px;border-radius:999px;background:color-mix(in oklab,var(--text) 12%,transparent);overflow:hidden}
.g-bar i{display:block;height:100%;background:var(--accent)}
.g-drills{padding-left:20px}
.g-drills li+li{margin-top:6px}
.g-mental h3{margin:0 0 6px}
.g-mental p{margin:0}
.g-mental .hint{margin-top:8px}
.g-mental.on{box-shadow:inset 0 0 0 2px var(--accent)}
.g-yours{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;border:1.5px solid currentColor;color:var(--accent-fg);font-size:13px;font-weight:700;vertical-align:middle}
.matches.g-partner{grid-template-columns:1fr;max-width:420px}