:root { --pine:#14261c; --pine-soft:#203d2d; --sand:#e8dfcf; --paper:#fbfaf6; --cream:#fffdf8; --gold:#dfbb62; --muted:#6e776f; --line:rgba(20,38,28,.14); --radius:24px; }
* { box-sizing:border-box; }
html { background:var(--sand); }
body { min-width:320px; margin:0; color:var(--pine); background:var(--sand); font-family:"DM Sans",sans-serif; }
button,input { font:inherit; }
.page-shell { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(440px,1.1fr); min-height:100vh; }
.intro { display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,8vw,110px); color:var(--cream); background:linear-gradient(150deg,var(--pine),#0d1a12); }
.home-link { align-self:flex-start; display:inline-flex; gap:9px; align-items:center; padding:9px 13px; border:1px solid rgba(255,255,255,.26); border-radius:999px; color:inherit; font-family:"Space Grotesk",sans-serif; font-size:.82rem; font-weight:700; letter-spacing:.04em; text-decoration:none; }
.home-link span { color:var(--gold); }
.eyebrow { margin:0 0 14px; color:var(--gold); font-family:"Space Grotesk",sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.intro .eyebrow { margin-top:auto; }
h1,h2 { font-family:"Space Grotesk",sans-serif; letter-spacing:-.055em; }
h1 { max-width:610px; margin:0; font-size:clamp(3.05rem,6vw,5.8rem); line-height:.94; }
h2 { margin:0; font-size:clamp(1.7rem,3vw,2.35rem); line-height:1; }
.intro-copy { max-width:540px; margin:28px 0 0; color:#d4ddd5; font-size:1.12rem; line-height:1.6; }
.course-note { display:flex; gap:10px; align-items:center; margin-top:36px; color:#bfcbbf; font-size:.88rem; }
.course-note span { color:var(--gold); font-size:1rem; }
.caddie-card { align-self:center; width:min(100%,650px); margin:clamp(22px,5vw,76px) auto; padding:clamp(26px,5vw,52px); border:1px solid var(--line); border-radius:var(--radius); background:var(--cream); box-shadow:0 24px 70px rgba(46,48,39,.16); }
.card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:32px; }
.card-heading .eyebrow { margin-bottom:8px; color:var(--muted); }
.step { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border-radius:50%; color:var(--pine); background:var(--gold); font-family:"Space Grotesk",sans-serif; font-size:.85rem; font-weight:700; }
.field { display:grid; gap:8px; margin-top:20px; color:var(--pine); font-size:.9rem; font-weight:700; }
.unit-input { position:relative; display:block; }
input { width:100%; min-height:56px; padding:0 74px 0 15px; border:1px solid var(--line); border-radius:13px; outline:0; color:var(--pine); background:#fff; font-size:1rem; transition:border-color .2s ease,box-shadow .2s ease; }
input::placeholder { color:#97a19a; }
input:focus { border-color:var(--pine); box-shadow:0 0 0 3px rgba(223,187,98,.52); }
.unit-input > span { position:absolute; top:50%; right:15px; color:var(--muted); font-size:.82rem; font-weight:700; pointer-events:none; transform:translateY(-50%); }
.fieldset { margin:28px 0 0; padding:0; border:0; }
.fieldset legend { margin-bottom:10px; color:var(--pine); font-size:.9rem; font-weight:700; }
.lie-options { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.lie-options label { position:relative; }
.lie-options input { position:absolute; width:1px; height:1px; opacity:0; }
.lie-options span { display:block; padding:13px 8px; border:1px solid var(--line); border-radius:12px; cursor:pointer; text-align:center; color:var(--muted); background:#fff; font-size:.82rem; font-weight:700; transition:background .2s ease,border-color .2s ease,color .2s ease; }
.lie-options input:checked + span { border-color:var(--pine); color:var(--cream); background:var(--pine); }
.lie-options input:focus-visible + span { outline:3px solid var(--gold); outline-offset:2px; }
.recommend-button { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:30px; padding:17px 20px; border:0; border-radius:14px; cursor:pointer; color:var(--cream); background:var(--pine); font-family:"Space Grotesk",sans-serif; font-size:1rem; font-weight:700; text-decoration:none; transition:background .2s ease,transform .2s ease; }
.recommend-button:hover { background:var(--pine-soft); transform:translateY(-1px); }
.recommend-button:focus-visible,.home-link:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.fine-print { margin:18px 0 0; color:var(--muted); font-size:.82rem; line-height:1.5; text-align:center; }
.form-error { margin:0 0 22px; padding:12px 14px; border-radius:12px; color:#852b22; background:#f9e3df; font-size:.9rem; font-weight:600; }
.inline-result { margin-top:30px; padding:24px; border-radius:18px; color:var(--cream); background:var(--pine); }
.inline-result .eyebrow { margin-bottom:12px; }
.inline-result .shot-context { margin:0; color:#d4ddd5; font-size:.85rem; font-weight:700; text-transform:capitalize; }
.inline-result h2 { margin-top:10px; color:var(--gold); font-size:clamp(2rem,5vw,3.2rem); }
.inline-result > p:last-child { margin:15px 0 0; color:#d4ddd5; line-height:1.55; }
.result-page { background:linear-gradient(145deg,var(--pine),#0d1a12); }
.result-shell { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:32px; }
.result-shell .home-link { align-self:flex-start; position:absolute; top:32px; left:32px; }
.result-card { width:min(100%,700px); padding:clamp(34px,7vw,82px); border:1px solid rgba(255,255,255,.15); border-radius:30px; color:var(--cream); background:rgba(255,255,255,.06); box-shadow:0 26px 80px rgba(0,0,0,.22); text-align:center; }
.result-card .eyebrow { margin-bottom:18px; }
.shot-context { margin:0; color:#d4ddd5; font-size:.9rem; font-weight:700; }
.result-card h1 { max-width:none; margin:18px 0 0; color:var(--gold); font-size:clamp(3.2rem,9vw,7rem); }
.result-copy { max-width:430px; margin:25px auto 0; color:#d4ddd5; font-size:1.06rem; line-height:1.6; }
.result-card .recommend-button { max-width:330px; margin:34px auto 0; color:var(--pine); background:var(--gold); }
.result-card .recommend-button:hover { background:#f2cf77; }
@media (max-width:900px) { .page-shell { grid-template-columns:1fr; } .intro { min-height:460px; } .intro .eyebrow { margin-top:90px; } .caddie-card { margin:0 auto 48px; } }
@media (max-width:560px) { .intro { min-height:410px; padding:32px 24px; } h1 { font-size:3.25rem; } .intro-copy { font-size:1rem; } .caddie-card { margin:0 14px 32px; padding:26px 20px; } .lie-options { grid-template-columns:repeat(2,1fr); } .result-shell { padding:20px; } .result-shell .home-link { top:20px; left:20px; } .result-card { padding:36px 22px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms!important; } }