/* Find-the-right-food quiz — mobile-first, Bunnings-ish Placid green */
.sq-body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);min-height:100dvh;display:flex;flex-direction:column}
.sq-top{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;padding:10px 12px;background:var(--brand);color:#fff;position:sticky;top:0;z-index:40}
.sq-back{width:44px;height:44px;border:0;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;font-weight:700}
.sq-back[hidden]{visibility:hidden}
.sq-logo{justify-self:center;color:#fff;font-weight:900;letter-spacing:-.03em;text-decoration:none;font-size:1rem}
.sq-skip{color:#fff;font-size:12px;font-weight:800;opacity:.92;text-decoration:underline;padding:8px 4px}
.sq-progress{padding:10px 16px 0;background:#fff}
.sq-bar{height:6px;background:var(--line);border-radius:999px;overflow:hidden}
.sq-bar>span{display:block;height:100%;width:0;background:var(--brand);border-radius:999px;transition:width .25s ease}
.sq-step-label{margin:8px 0 0;font-size:12px;font-weight:800;color:var(--muted)}
.sq-main{flex:1;padding:18px 16px 28px;max-width:480px;width:100%;margin:0 auto;box-sizing:border-box}
.sq-q{font-size:clamp(1.35rem,5.2vw,1.75rem);line-height:1.2;font-weight:900;letter-spacing:-.02em;margin:4px 0 8px;color:var(--ink)}
.sq-help{margin:0 0 18px;color:var(--muted);font-size:14px;font-weight:600;line-height:1.4}
.sq-options{display:grid;gap:10px}
.sq-opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  min-height:56px;padding:14px 16px;border-radius:12px;cursor:pointer;
  border:2px solid var(--line);background:#fff;font:inherit;font-weight:800;font-size:16px;color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
.sq-opt:active,.sq-opt:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sq-opt.is-selected{border-color:var(--brand);background:var(--brand-soft)}
.sq-opt .sq-ico{font-size:1.35rem;width:1.6em;text-align:center;flex-shrink:0}
.sq-opt .sq-sub{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-top:2px}
.sq-field{display:grid;gap:10px}
.sq-field input[type=text],.sq-field input[type=search]{
  width:100%;box-sizing:border-box;min-height:56px;padding:14px 16px;border-radius:12px;
  border:2px solid var(--line);font:inherit;font-size:18px;font-weight:700;
}
.sq-field input:focus{border-color:var(--brand);outline:0}
.sq-next{
  margin-top:16px;width:100%;min-height:56px;border:0;border-radius:10px;
  background:var(--accent);color:#fff;font:inherit;font-weight:900;font-size:16px;cursor:pointer;
}
.sq-next:disabled{opacity:.45;cursor:not-allowed}
.sq-next.sec{background:#fff;color:var(--brand);border:2px solid var(--brand);margin-top:10px}
.sq-note{margin-top:12px;font-size:12px;font-weight:700;color:var(--muted);line-height:1.4}
.sq-result-head{margin:0 0 6px;font-size:clamp(1.25rem,4.8vw,1.55rem);font-weight:900}
.sq-result-sub{margin:0 0 14px;color:var(--muted);font-size:14px;font-weight:600;line-height:1.4}
.sq-deliv{
  background:var(--brand-soft);border:1px solid #b7e0d4;border-radius:12px;padding:12px 14px;margin-bottom:14px;
  font-size:14px;font-weight:700;line-height:1.4;color:var(--ink);
}
.sq-deliv.out{background:#FFF7ED;border-color:#FDBA74}
.sq-cards{display:grid;gap:12px}
.sq-card{display:grid;grid-template-columns:88px 1fr;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff}
.sq-card img{width:88px;height:88px;object-fit:contain;background:#fafafa;border-radius:8px}
.sq-card h3{margin:0 0 4px;font-size:15px;font-weight:900;line-height:1.25}
.sq-card .meta{font-size:12px;font-weight:700;color:var(--muted)}
.sq-card .price{margin-top:6px;font-size:15px;font-weight:900;color:var(--brand)}
.sq-card .why{margin-top:6px;font-size:12px;font-weight:700;color:var(--muted);line-height:1.35}
.sq-card .actions{display:grid;gap:8px;margin-top:10px;grid-column:1/-1}
.sq-card .actions .btn{width:100%;min-height:44px}
.sq-freq-box{background:#fff;border:1px dashed var(--brand);border-radius:12px;padding:12px 14px;margin:14px 0;font-size:13px;font-weight:700;line-height:1.45}
.sq-freq-box strong{display:block;font-size:14px;margin-bottom:4px}
.sq-footer-ctas{display:grid;gap:10px;margin-top:16px}
@media (min-width:720px){
  .sq-main{padding-top:28px}
  .sq-cards{grid-template-columns:1fr}
}