/* Find Your Dog's Plan quiz — colourful edition */
.pq{--pq-ink:#2c2622;--pq-muted:#6f665b;--pq-line:#eadfcf;--pq-card:#fffdf9;--pq-accent:#b8875a;--pq-accent-dk:#9a6d43;--pq-dark:#2c2622;
  --terra:#d9714e;--mustard:#e8b34a;--sage:#8fae8b;--rose:#e9a0a6;--sky:#8fb8d8;--plum:#7b5e8c;--peach:#f7c59f;
  font-family:Georgia,'Times New Roman',serif;color:var(--pq-ink);position:relative;overflow:hidden;
  background:linear-gradient(160deg,#fff6e8 0%,#fbeee0 45%,#f3ecdd 100%);border:1px solid var(--pq-line);border-radius:28px;padding:24px 20px 28px;margin:28px 0 40px;
  box-shadow:0 20px 50px rgba(120,80,40,.10)}
.pq::before,.pq::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(1px)}
.pq::before{width:260px;height:260px;right:-90px;top:-110px;background:radial-gradient(circle at 30% 30%,#ffd88a,#f7c59f 70%,transparent 72%);opacity:.7}
.pq::after{width:220px;height:220px;left:-80px;bottom:-100px;background:radial-gradient(circle at 60% 40%,#cfe0ec,#d9d0e6 70%,transparent 72%);opacity:.75}
.pq>*{position:relative;z-index:1}
.pq *{box-sizing:border-box}
.pq-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-family:system-ui,-apple-system,sans-serif;font-size:13px;color:var(--pq-muted)}
.pq-count{background:#fff;border:1px solid var(--pq-line);border-radius:999px;padding:4px 12px;font-weight:700;color:var(--pq-accent-dk);letter-spacing:.04em}
.pq-count:empty{display:none}
.pq-back{background:#fff;border:1px solid var(--pq-line);border-radius:999px;color:var(--pq-ink);cursor:pointer;font:inherit;font-weight:600;padding:6px 14px;visibility:hidden;transition:transform .12s,border-color .2s}
.pq-back:hover{transform:translateX(-2px);border-color:var(--pq-accent)}
.pq-back.show{visibility:visible}
.pq-bar{height:10px;background:#fff;border:1px solid var(--pq-line);border-radius:999px;overflow:visible;margin:0 0 24px;position:relative}
.pq-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--terra),var(--mustard) 40%,var(--sage) 75%,var(--sky));transition:width .5s cubic-bezier(.2,.8,.2,1);position:relative}
.pq-bar i::after{content:"🐾";position:absolute;right:-10px;top:50%;transform:translateY(-52%);font-size:16px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.pq-screen{animation:pqin .4s cubic-bezier(.2,.8,.2,1)}
@keyframes pqin{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
.pq-kicker{font-family:system-ui,-apple-system,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin:0 0 8px;display:inline-flex;align-items:center;gap:8px;color:#fff;background:linear-gradient(90deg,var(--terra),#e8935b);border-radius:999px;padding:5px 12px}
.pq h2,.pq h3{margin:0 0 8px;line-height:1.15}
.pq h2{font-size:clamp(28px,4vw,36px)} .pq h3{font-size:clamp(22px,3vw,26px)}
.pq h2 .hl,.pq h3 .hl{position:relative;display:inline-block;isolation:isolate}
.pq h2 .hl::after{content:"";position:absolute;left:-2%;right:-2%;bottom:8%;height:.36em;background:var(--mustard);opacity:.5;z-index:-1;border-radius:6px}
.pq p{margin:0 0 16px;font-size:17px;line-height:1.55}
.pq .pq-sub{color:var(--pq-muted);font-size:15px;font-family:system-ui,-apple-system,sans-serif}
/* options */
.pq-opts{display:grid;gap:10px;margin:18px 0 6px}
@media(min-width:680px){.pq-opts{grid-template-columns:1fr 1fr}.pq-opts.one{grid-template-columns:1fr}}
.pq-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--pq-card);border:2px solid #f0e6d6;border-radius:18px;padding:12px 14px;font:inherit;font-size:16.5px;color:var(--pq-ink);cursor:pointer;transition:transform .15s,border-color .2s,box-shadow .2s,background .2s;position:relative;overflow:hidden}
.pq-opt::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c,var(--terra));opacity:0;transition:opacity .2s}
.pq-opt:hover{border-color:var(--c,var(--pq-accent));transform:translateY(-2px);box-shadow:0 10px 24px rgba(120,80,40,.12)}
.pq-opt:hover::before,.pq-opt.sel::before{opacity:1}
.pq-opt:focus-visible{outline:3px solid var(--c,var(--pq-accent));outline-offset:2px}
.pq-opt.sel{border-color:var(--c,var(--terra));background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--c,var(--terra)) 22%,transparent)}
.pq-opt:nth-child(6n+1){--c:var(--terra)}.pq-opt:nth-child(6n+2){--c:var(--sky)}.pq-opt:nth-child(6n+3){--c:var(--sage)}.pq-opt:nth-child(6n+4){--c:var(--mustard)}.pq-opt:nth-child(6n+5){--c:var(--plum)}.pq-opt:nth-child(6n+6){--c:var(--rose)}
.pq-ico{flex:0 0 46px;width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--c,var(--terra)) 22%,#fff);display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;transition:transform .2s}
.pq-opt:hover .pq-ico,.pq-opt.sel .pq-ico{transform:rotate(-8deg) scale(1.08)}
.pq-opt small{display:block;color:var(--pq-muted);font-family:system-ui,-apple-system,sans-serif;font-size:13px;margin-top:2px}
.pq-chk{margin-left:auto;width:24px;height:24px;border-radius:8px;border:2px solid var(--pq-line);flex:0 0 24px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;background:#fff;transition:background .2s,border-color .2s,transform .2s}
.pq-opt.sel .pq-chk{background:var(--c,var(--terra));border-color:var(--c,var(--terra));transform:scale(1.1)}
.pq-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
.pq-btn{font-family:system-ui,-apple-system,sans-serif;font-weight:700;font-size:16px;background:linear-gradient(90deg,var(--terra),#e8935b);color:#fff;border:none;border-radius:999px;padding:15px 28px;cursor:pointer;text-decoration:none;display:inline-block;transition:transform .15s,box-shadow .2s,filter .2s;box-shadow:0 10px 24px rgba(217,113,78,.35)}
.pq-btn:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 14px 30px rgba(217,113,78,.4)}
.pq-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.pq-btn.alt{background:var(--pq-dark);box-shadow:0 10px 24px rgba(44,38,34,.25)}
.pq-link{background:none;border:none;color:var(--pq-muted);font-family:system-ui,-apple-system,sans-serif;font-size:14px;cursor:pointer;text-decoration:underline;padding:8px 0}
.pq-hint{font-family:system-ui,-apple-system,sans-serif;font-size:13px;color:var(--pq-muted);margin:8px 0 0}
/* intro extras */
.pq-intro-dogs{font-size:38px;line-height:1;margin:0 0 6px;letter-spacing:-6px}
.pq-intro-dogs span{display:inline-block;animation:pqbob 2.4s ease-in-out infinite}
.pq-intro-dogs span:nth-child(2){animation-delay:.3s}.pq-intro-dogs span:nth-child(3){animation-delay:.6s}.pq-intro-dogs span:nth-child(4){animation-delay:.9s}
@keyframes pqbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* analyzing */
.pq-load{list-style:none;padding:0;margin:18px 0 6px;font-family:system-ui,-apple-system,sans-serif;font-size:15px}
.pq-load li{display:flex;align-items:center;gap:12px;padding:10px 0;color:var(--pq-muted);opacity:.45;transition:opacity .3s,transform .3s;transform:translateX(-4px)}
.pq-load li.on{opacity:1;color:var(--pq-ink);transform:none}
.pq-load li b{width:26px;height:26px;border-radius:50%;border:2px solid var(--pq-line);display:inline-flex;align-items:center;justify-content:center;font-size:13px;background:#fff;color:var(--pq-accent-dk)}
.pq-load li.on b{background:var(--sage);border-color:var(--sage);color:#fff}
.pq-ring{height:12px;background:#fff;border:1px solid var(--pq-line);border-radius:999px;overflow:hidden;margin:6px 0 14px}
.pq-ring i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--terra),var(--mustard),var(--sage),var(--sky));transition:width .5s linear}
/* email */
.pq-form{display:grid;gap:10px;margin-top:14px}
.pq-form input{font:inherit;font-size:17px;padding:14px 16px;border:2px solid var(--pq-line);border-radius:16px;background:#fff;width:100%;transition:border-color .2s,box-shadow .2s}
.pq-form input:focus{outline:none;border-color:var(--terra);box-shadow:0 0 0 4px rgba(217,113,78,.18)}
.pq-err{color:#a33;font-family:system-ui,-apple-system,sans-serif;font-size:14px;min-height:18px;margin:0}
/* result */
.pq-res{display:grid;gap:16px;margin-top:14px}
.pq-card{background:var(--pq-card);border:1px solid var(--pq-line);border-radius:22px;padding:18px 18px 16px}
.pq-card.main{border:none;padding:0;overflow:hidden;box-shadow:0 18px 44px rgba(120,80,40,.16)}
.pq-card.main .pq-kicker{margin:0;border-radius:0;display:block;padding:10px 20px;background:linear-gradient(90deg,var(--terra),var(--mustard));font-size:12px}
.pq-card.main>.pq-cover,.pq-card.main>ul,.pq-card.main>.pq-actions{margin-left:20px;margin-right:20px}
.pq-card.main>.pq-cover{margin-top:18px}
.pq-card.main>.pq-actions{margin-bottom:20px}
.pq-cover{display:flex;gap:14px;align-items:flex-start}
.pq-cover .pq-ico{width:64px;height:64px;flex-basis:64px;font-size:34px;border-radius:20px;background:linear-gradient(135deg,#ffe4b8,#f7c59f)}
.pq-card h3{font-size:24px;margin:2px 0 4px} .pq-card p{font-size:15.5px;margin:0 0 10px;color:var(--pq-muted);font-family:system-ui,-apple-system,sans-serif}
.pq-card ul{margin:0 0 12px;padding-left:0;list-style:none;font-size:15.5px;line-height:1.5}
.pq-card ul li{position:relative;padding-left:26px;margin:0 0 6px}
.pq-card ul li::before{content:"✓";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--sage);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;font-family:system-ui,sans-serif;font-weight:700;margin-top:3px}
.pq-price{font-family:system-ui,-apple-system,sans-serif;font-size:14px;font-weight:700;color:var(--pq-ink);background:#fff3d6;border:1px solid #f3dfa8;border-radius:999px;padding:6px 12px;margin-left:4px}
.pq-insight{background:#fff;border:1px solid var(--pq-line);border-left:6px solid var(--mustard);border-radius:16px;padding:14px 16px;font-size:15.5px}
.pq-insight p{margin:0 0 8px;font-size:15.5px} .pq-insight p:last-child{margin:0}
.pq-mini{display:grid;gap:8px}
@media(min-width:680px){.pq-mini{grid-template-columns:1fr 1fr}}
.pq-mini a{display:flex;align-items:center;gap:12px;background:var(--pq-card);border:2px solid #f0e6d6;border-radius:16px;padding:10px 12px;text-decoration:none;color:var(--pq-ink);font-size:15.5px;transition:transform .15s,border-color .2s,box-shadow .2s}
.pq-mini a:hover{border-color:var(--c,var(--pq-accent));transform:translateY(-2px);box-shadow:0 10px 22px rgba(120,80,40,.12)}
.pq-mini a:nth-child(4n+1){--c:var(--sky)}.pq-mini a:nth-child(4n+2){--c:var(--sage)}.pq-mini a:nth-child(4n+3){--c:var(--plum)}.pq-mini a:nth-child(4n+4){--c:var(--rose)}
.pq-mini a span.pq-ico{width:40px;height:40px;flex-basis:40px;font-size:22px;border-radius:12px;background:color-mix(in srgb,var(--c,var(--sky)) 22%,#fff)}
.pq-mini a em{font-style:normal;color:var(--pq-muted);font-family:system-ui,-apple-system,sans-serif;font-size:12.5px;display:block}
.pq-mini a[href*="complete-set"]{grid-column:1/-1;background:linear-gradient(90deg,#fff3d6,#ffe4d6);border-color:#f3dfa8}
.pq-mini a[href*="complete-set"] span.pq-ico{background:#fff}
.pq-res>div>.pq-kicker{background:var(--pq-dark);margin-bottom:10px}
.pq-foot{font-family:system-ui,-apple-system,sans-serif;font-size:13px;color:var(--pq-muted);margin-top:6px}
@media(min-width:640px){.pq{padding:32px 36px 36px}}
@media(prefers-reduced-motion:reduce){.pq-screen{animation:none}.pq-bar i,.pq-ring i{transition:none}.pq-intro-dogs span{animation:none}}
.pq h2:focus,.pq h3:focus{outline:none}
