/* Roof check (idea 4). Default styles = JS-off view: all questions listed, plain link to the form. */
#roof-check{background:var(--bg-alt,#f5f5f2)}
#roof-check .rc{display:grid;gap:clamp(24px,4vw,56px);align-items:start}
@media(min-width:900px){#roof-check .rc{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
#roof-check .rc__head h2{margin:0}
#roof-check .rc__lede{margin-top:14px;max-width:40ch}
#roof-check .rc__card{background:#fff;border:1px solid #e2e6ed;padding:clamp(20px,4vw,40px);position:relative}
#roof-check .rc__progress{display:none}
#roof-check .rc__step{border:0;margin:0 0 24px;padding:0;min-inline-size:0}
#roof-check .rc__step legend{padding:0;margin-bottom:14px;color:var(--ink,#1d2433);font-weight:800;font-size:clamp(1.15rem,1rem + .6vw,1.45rem);line-height:1.25}
#roof-check .rc__opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));gap:10px}
#roof-check .rc__opts label{position:relative;display:block;cursor:pointer}
#roof-check .rc__opts input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
#roof-check .rc__opts span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:56px;padding:12px 14px;border:2px solid #cdd0d4;background:#fff;color:var(--ink,#1d2433);font-weight:700;font-size:1rem;line-height:1.25;transition:border-color .15s,background-color .15s,color .15s}
#roof-check .rc__opts label:hover span{border-color:#101d38}
#roof-check .rc__opts input:checked+span{border-color:#101d38;background:#101d38;color:#fff}
#roof-check .rc__opts input:focus-visible+span{outline:3px solid var(--gold,#c9a84c);outline-offset:2px}
#roof-check .rc__nav{display:flex;justify-content:space-between;align-items:center;gap:12px}
#roof-check .rc__link{font:inherit;font-weight:700;color:#101d38;background:none;border:0;padding:10px 4px;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#roof-check .rc__nojs{margin-top:8px}
#roof-check .rc__note{margin-top:14px;font-size:.9rem;color:#4f5a6e}
#roof-check .rc__live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* JS on: one question at a time. */
#roof-check.rc--js .rc__progress{display:flex;align-items:center;gap:14px;margin-bottom:22px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#4f5a6e}
#roof-check.rc--js .rc__bar{flex:1;height:4px;background:#e2e6ed;position:relative;overflow:hidden}
#roof-check.rc--js .rc__bar i{position:absolute;inset:0 auto 0 0;width:33.33%;background:var(--gold,#c9a84c);transition:width .3s ease}
#roof-check.rc--js .rc__step{display:none;margin-bottom:18px}
#roof-check.rc--js .rc__step.is-current{display:block}
#roof-check.rc--js .rc__nojs,#roof-check.rc--js .rc__note{display:none}
#roof-check.rc--js .rc__nav{min-height:48px}
#roof-check.rc--js .rc__nav .rc__next{margin-left:auto}
#roof-check.rc--js.is-done .rc__progress,#roof-check.rc--js.is-done .rc__nav{display:none}
#roof-check .rc__result{outline:none}
#roof-check .rc__result-title{font-family:Display,'Arial Narrow',Impact,sans-serif;text-transform:uppercase;font-size:clamp(1.8rem,1.4rem + 1.8vw,2.6rem);line-height:1.05;color:var(--ink,#1d2433);letter-spacing:0}
#roof-check .rc__result-body{margin-top:12px;max-width:48ch}
#roof-check .rc__answers{margin-top:14px;font-size:.88rem;color:#4f5a6e}
#roof-check .rc__result-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:22px}
#roof-check .rc__step.is-entering,#roof-check .rc__result.is-entering{animation:rc-in .28s ease both}
@keyframes rc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  #roof-check .rc__step.is-entering,#roof-check .rc__result.is-entering{animation:none}
  #roof-check .rc__bar i,#roof-check .rc__opts span{transition:none}
}
#roof-check .rc__next:disabled{background:#e2e6ed;color:#4f5a6e;box-shadow:none;transform:none;cursor:not-allowed}