:root { --ink:#263026; --muted:#697168; --paper:#f5f0e7; --card:#fffdf8; --green:#244f3b; --green-dark:#183c2b; --green-soft:#e3ece4; --orange:#d76b3f; --orange-soft:#f7e3d9; --line:#ddd7cc; --shadow:0 22px 60px rgba(46,53,42,.1); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.2; background-image:radial-gradient(#72806e .6px,transparent .6px); background-size:11px 11px; }
.topbar { position:relative; min-height:72px; padding:0 max(28px,calc((100vw - 1040px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(55,65,52,.13); }
.brand { color:var(--ink); text-decoration:none; font-family:Georgia,serif; font-size:25px; font-weight:700; letter-spacing:-.03em; }
.brand span { display:inline-grid; place-items:center; width:35px; height:35px; margin-right:8px; color:white; background:var(--green); border-radius:50% 50% 46% 54%; font:700 19px/1 Georgia,serif; transform:rotate(-4deg); }
.topbar p { color:var(--muted); font-size:13px; }
.topbar i { display:inline-block; width:7px; height:7px; margin-right:5px; background:#5f9b69; border-radius:50%; }
main { position:relative; max-width:1040px; margin:auto; padding:58px 28px 80px; }
.intro { max-width:800px; margin:0 auto 42px; text-align:center; }
.eyebrow,.step-label,.step-kicker { margin:0 0 12px; color:var(--orange); font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
h1 { margin:0; font:500 clamp(48px,7vw,74px)/.98 Georgia,serif; letter-spacing:-.045em; }
h1 em { color:var(--green); font-weight:400; }
.lead { max-width:650px; margin:22px auto; color:#555f54; font-size:17px; line-height:1.65; }
.trust-row { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; }
.trust-row span { padding:7px 11px; color:var(--green); background:rgba(227,236,228,.72); border-radius:99px; font-size:11px; font-weight:750; }
.workspace { max-width:860px; margin:auto; }
.card { background:var(--card); border:1px solid rgba(71,78,66,.14); border-radius:22px; box-shadow:var(--shadow); }
.form-card { padding:clamp(24px,5vw,48px); }
.progress-head,.result-top,.form-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.progress-head .step-label { margin-bottom:5px; }
.step-count { margin:0; color:var(--muted); font-size:13px; font-weight:700; }
.time { flex:none; padding:7px 11px; color:var(--green); background:var(--green-soft); border-radius:99px; font-size:12px; font-weight:700; }
.progress-track { height:5px; margin:17px 0 38px; overflow:hidden; background:#e7e2d9; border-radius:99px; }
.progress-track span { display:block; width:20%; height:100%; background:var(--orange); border-radius:inherit; transition:width .25s ease; }
.form-step { min-height:430px; }
.step-copy { max-width:620px; margin-bottom:28px; }
.step-copy h2,.result-hero h2 { margin:0; font:500 clamp(30px,4vw,42px)/1.08 Georgia,serif; letter-spacing:-.03em; }
.step-copy>p:last-child { margin:12px 0 0; color:var(--muted); font-size:14px; line-height:1.55; }
.choice-group,.toggle-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 26px; padding:0; border:0; }
.choice-group legend,.toggle-group legend { grid-column:1/-1; margin-bottom:2px; font-size:13px; font-weight:800; }
.choice-card,.toggle-card { cursor:pointer; }
.choice-card input,.toggle-card input { position:absolute; opacity:0; pointer-events:none; }
.choice-card>span,.toggle-card>span { position:relative; display:flex; flex-direction:column; min-height:77px; padding:15px 46px 15px 16px; background:#fbfaf6; border:1px solid var(--line); border-radius:12px; transition:border-color .15s ease,background-color .15s ease,transform .15s ease; }
.choice-card>span::after { content:""; position:absolute; top:50%; right:17px; width:17px; height:17px; border:1.5px solid #9ca197; border-radius:50%; transform:translateY(-50%); }
.choice-card strong,.toggle-card strong { font-size:14px; line-height:1.3; }
.choice-card small,.toggle-card small { margin-top:5px; color:var(--muted); font-size:12px; line-height:1.35; }
.choice-card input:checked+span,.toggle-card input:checked+span { color:var(--green); background:var(--green-soft); border-color:#87a28d; box-shadow:0 0 0 2px rgba(36,79,59,.08); }
.choice-card input:checked+span::after { border:5px solid var(--green); }
.choice-card input:focus-visible+span,.toggle-card input:focus-visible+span,button:focus-visible { outline:3px solid rgba(215,107,63,.23); outline-offset:2px; }
.choice-card:hover>span,.toggle-card:hover>span { border-color:#a9b2a7; transform:translateY(-1px); }
.toggle-card b { position:absolute; top:50%; right:17px; display:grid; place-items:center; width:21px; height:21px; color:transparent; border:1px solid #a9afa6; border-radius:6px; transform:translateY(-50%); }
.toggle-card input:checked+span b { color:white; background:var(--green); border-color:var(--green); }
.loading-copy { grid-column:1/-1; color:var(--muted); }
.privacy-note { display:flex; gap:12px; margin-top:30px; padding:15px 17px; background:rgba(227,236,228,.6); border-radius:12px; }
.privacy-note span { display:grid; place-items:center; flex:0 0 23px; height:23px; color:white; background:var(--green); border-radius:50%; font-size:12px; font-weight:900; }
.privacy-note p { margin:1px 0; color:var(--muted); font-size:12px; line-height:1.5; }
.privacy-note strong { color:var(--ink); }
.form-actions { min-height:60px; margin-top:12px; padding-top:24px; border-top:1px solid var(--line); }
.button-primary,.button-secondary { min-height:46px; padding:0 19px; border:0; border-radius:10px; cursor:pointer; font:inherit; font-size:14px; font-weight:750; }
.button-primary { margin-left:auto; color:white; background:var(--green); box-shadow:0 8px 18px rgba(36,79,59,.18); }
.button-primary:hover { background:var(--green-dark); transform:translateY(-1px); }
.button-primary:disabled { cursor:wait; opacity:.65; }
.button-secondary { color:var(--green); background:var(--green-soft); }
.button-secondary:hover { background:#d6e4d8; }
.error { margin:15px 0 0; color:#a23d30; font-size:13px; font-weight:650; }
.choice-group.has-error { padding:10px; border:1px solid #bd5a45; border-radius:14px; }
.result-card { padding:clamp(26px,5vw,50px); border-top:5px solid var(--green); }
.result-top { align-items:flex-start; padding-bottom:28px; border-bottom:1px solid var(--line); }
.result-top .step-label { margin-bottom:6px; }
.result-breed { margin:0; color:var(--muted); font-size:14px; }
.result-hero { max-width:660px; padding:34px 0 30px; }
.verdict-badge { display:inline-block; margin-bottom:13px; padding:6px 10px; color:var(--green); background:var(--green-soft); border-radius:99px; font-size:11px; font-weight:800; text-transform:uppercase; }
.result-summary { margin:14px 0 0; color:var(--muted); font-size:15px; line-height:1.6; }
.result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.report-section { padding:20px; background:#fbfaf6; border:1px solid var(--line); border-radius:14px; }
.report-section h3 { margin:0 0 15px; font:600 18px/1.2 Georgia,serif; }
.report-item { display:grid; grid-template-columns:23px 1fr; gap:9px; margin-top:12px; }
.report-item .mark { display:grid; place-items:center; width:20px; height:20px; color:var(--green); background:var(--green-soft); border-radius:50%; font-size:11px; font-weight:900; }
.report-item.concern .mark { color:#9d432f; background:var(--orange-soft); }
.report-item p { margin:0; font-size:13px; line-height:1.55; }
.report-item strong { display:block; margin-bottom:2px; }
.sources { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.sources h3 { margin:0 0 9px; font:600 16px Georgia,serif; }
.sources a { display:block; margin:7px 0; color:var(--green); font-size:12px; line-height:1.4; }
.disclaimer { margin:24px 0 0; color:#7b8179; font-size:11px; line-height:1.5; }
footer { position:relative; max-width:1040px; margin:auto; padding:22px 28px 38px; display:flex; justify-content:space-between; color:var(--muted); border-top:1px solid rgba(55,65,52,.13); font-size:12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:700px) { .topbar{min-height:62px;padding:0 18px}.topbar p{display:none}main{padding:42px 16px 56px}.intro{margin-bottom:30px}h1{font-size:47px}.lead{font-size:15px}.form-card,.result-card{border-radius:17px}.form-step{min-height:500px}.choice-group,.toggle-group,.result-grid{grid-template-columns:1fr}.compact{grid-template-columns:1fr 1fr}.choice-card>span{min-height:88px}.result-top{flex-direction:column}footer{padding-inline:18px;flex-direction:column} }
@media (max-width:460px) { .compact{grid-template-columns:1fr}.form-step{min-height:560px}.form-actions{position:sticky;bottom:0;margin-inline:-10px;padding:16px 10px 4px;background:var(--card)} }
@media (prefers-reduced-motion:no-preference) { button{transition:transform .16s ease,background-color .16s ease}.form-step:not([hidden]),.result-card:not([hidden]){animation:reveal .28s ease both}@keyframes reveal{from{opacity:0;transform:translateY(7px)}} }