/* "Find your mattress" quiz (/mattress-finder/). Uses the site palette from site.css (:root vars). */
.mf{max-width:680px}
.mf-head{text-align:center;margin-bottom:18px}
.mf-badge{display:inline-block;margin:0 0 10px;padding:4px 14px;border:1px solid var(--gold);border-radius:999px;color:#7a5f33;background:#fff;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.mf-head h1{margin-bottom:.3em}
.mf-lead{color:var(--muted);margin:0 auto;max-width:520px}
.mf-progress{margin:6px 0 12px}
.mf-progress-top{display:flex;justify-content:space-between;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.mf-progress-top span:last-child{color:var(--ink);font-weight:600;text-transform:none;letter-spacing:0}
.mf-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.mf-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--navy),var(--gold));transition:width .3s ease}
.mf-card{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 18px 16px}
.mf-q{border:0;margin:0 0 22px;padding:0;min-width:0}
.mf-js .mf-q{margin:0}
.mf-q legend{font-family:var(--serif);font-size:1.3rem;font-weight:600;line-height:1.25;padding:0;margin:0 0 4px}
.mf-js .mf-qn{display:none}
.mf-hint{color:var(--muted);font-size:.92rem;margin:0 0 14px}
.mf-opts{display:grid;gap:10px}
.mf-opt{display:block;position:relative;cursor:pointer}
.mf-opt input{position:absolute;opacity:0;width:1px;height:1px}
.mf-opt span{display:block;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);transition:border-color .15s,background .15s}
.mf-opt strong{display:block;font-weight:600}
.mf-opt small{display:block;color:var(--muted);font-size:.84rem}
.mf-opt:hover span{border-color:#c9b48f}
.mf-opt input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.mf-opt input:checked+span{border-color:var(--navy);background:#fff;box-shadow:inset 0 0 0 1px var(--navy)}
.mf-q[data-multi] .mf-opt input:checked+span strong::after{content:" ✓";color:var(--ok)}
.mf-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.mf-back{font:inherit;background:none;border:0;color:var(--muted);cursor:pointer;padding:10px 4px}
.mf-next{font:inherit;font-weight:600;cursor:pointer;min-width:170px}
.mf-next:disabled{opacity:.4;cursor:default}
.mf-results{scroll-margin-top:168px}
.mf-res-head{text-align:center;margin:4px 0 14px}
.mf-res-head p{color:var(--muted);margin:0}
.mf-res{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin:0 0 16px;overflow:hidden}
.mf-res-best{border:2px solid var(--navy)}
.mf-tag{margin:0;padding:8px 16px;font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;background:var(--bg);color:var(--muted);border-bottom:1px solid var(--line)}
.mf-res-best .mf-tag{background:var(--navy);color:#fff;border-color:var(--navy)}
.mf-res-body{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:16px}
.mf-img img{width:110px;height:110px;object-fit:cover;border-radius:10px;background:var(--bg)}
.mf-res h3{font-size:1.05rem;margin:0 0 4px}
.mf-res h3 a{text-decoration:none;color:var(--ink)}
.mf-price{margin:0 0 8px;color:var(--muted);font-size:.9rem}
.mf-price strong{color:var(--ink);font-size:1.15rem}
.mf-why{margin:0 0 10px;padding-left:18px;font-size:.92rem}
.mf-why li{margin:2px 0}
.mf-extra{font-size:.85rem;color:var(--muted);background:var(--bg);border-radius:8px;padding:8px 10px;margin:0 0 10px}
.mf-shop{padding:10px 18px;font-size:.95rem}
.mf-split{padding:14px 16px}
.mf-split p{margin:0 0 8px}
.mf-after{text-align:center}
.mf-disclaimer{font-size:.88rem;color:var(--muted);max-width:560px;margin:8px auto 14px}
.mf-after .cta-row{justify-content:center}
.mf-after button{font:inherit;font-weight:600;cursor:pointer}
/* Peanut (family dog, chief comfort tester): welcome screen + results heading only, never on question screens */
.mf-peanut{margin:0 auto 12px;text-align:center}
.mf-peanut img{display:block;margin:0 auto;width:96px;height:96px;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.mf-peanut figcaption{margin-top:6px;font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--muted)}
.mf-asking .mf-peanut-intro,.mf-done .mf-peanut-intro{display:none}
.mf-res-head .mf-peanut img{width:80px;height:80px}
.mf-res-head .mf-peanut{margin-bottom:6px}
@media (min-width:700px){.mf-peanut img{width:112px;height:112px}.mf-res-head .mf-peanut img{width:96px;height:96px}}
.mf-note{text-align:center;color:var(--muted);font-size:.9rem;margin-top:18px}
@media (max-width:479px){
  .mf-res-body{grid-template-columns:84px 1fr;gap:12px;padding:14px}
  .mf-img img{width:84px;height:84px}
  .mf-shop{display:block;width:100%}
  .mf-next{min-width:0;flex:1}
}
@media (min-width:700px){.mf-card{padding:26px 28px 20px}.mf-opts{grid-template-columns:1fr 1fr}}
/* entry points */
.mf-cta-band{text-align:center}
@media (prefers-reduced-motion:reduce){.mf-bar i,.mf-opt span{transition:none}}
.mf [hidden]{display:none!important}