/* ══════════════════════════════════════════════════════════════════
   RönYen — Custom Saunas landing page
   Tokens come from brand.css (no :root here). Rules already defined in
   brand.css (.btn*, .badge, .faq-acc, .band, .kicker, .ph, .lead,
   .t-h1, .t-h2) are NOT redefined. Only genuinely new page components.
   ALL colours are CSS variables — zero hardcoded hex.
   ══════════════════════════════════════════════════════════════════ */

/* ── Warm lane remap ──────────────────────────────────────────────────
   This page is ad-traffic for the warm (sauna) lane. Remap the blue "ice"
   accent family to the warm "sauna" family so every accent reads timber,
   and warm the kicker number/rule (brand.css defaults kicker .num to
   --muted). Pure var remapping — no hardcoded hex. */
body.lane-sauna{
  --ice:var(--sauna); --ice-light:var(--sauna-light);
  --ice-text:var(--sauna-text); --ice-hover:var(--sauna-hover);
}
body.lane-sauna .kicker .num{color:var(--sauna)}
body.lane-sauna .section--dark .kicker .num{color:var(--sauna)}

/* ════════════════════════════════════════════════════════════════════
   STICKY PRICE BAR
   ════════════════════════════════════════════════════════════════════ */
.pricebar{
  position:fixed; top:0; left:0; right:0; z-index:90;
  background:color-mix(in srgb, var(--heading) 94%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid color-mix(in srgb, var(--inverse) 8%, transparent);
  color:var(--inverse);
  transform:translateY(-100%); transition:transform .28s ease;
}
.pricebar.is-shown{transform:translateY(0)}
.pricebar .wrap{display:flex; align-items:center; gap:24px; padding-top:13px; padding-bottom:13px}
.pricebar .pb-items{display:flex; align-items:center; gap:22px; font-size:.9rem; flex-wrap:wrap}
.pricebar .pb-items .from{color:var(--nav-muted)}
.pricebar .pb-items .from b{color:var(--inverse); font-weight:600}
.pricebar .pb-items .sep{width:4px; height:4px; border-radius:50%; background:color-mix(in srgb, var(--inverse) 30%, transparent)}
.pricebar .pb-items .it{display:inline-flex; align-items:center; gap:8px; color:var(--inverse)}
.pricebar .pb-items .it svg{width:15px; height:15px; stroke:var(--sauna); fill:none; stroke-width:1.7}
.pricebar .pb-cta{margin-left:auto; display:flex; align-items:center; gap:16px}
.pricebar .pb-cta .left{font-size:.8rem; color:var(--nav-muted)}
.pricebar .pb-cta .left b{color:var(--inverse); font-weight:600}
@media (max-width:900px){
  .pricebar .pb-items .it{display:none}
  .pricebar .pb-cta .left{display:none}
}

/* ════════════════════════════════════════════════════════════════════
   1 · HERO — image-led, ad-traffic
   ════════════════════════════════════════════════════════════════════ */
.po-hero{
  position:relative; min-height:88vh; display:flex; align-items:flex-end;
  background:var(--nav); color:var(--inverse); overflow:hidden; isolation:isolate;
}
.po-hero .po-hero-ph{position:absolute; inset:0; z-index:-2; border-radius:0}
/* Hero photo fills the band. This `.fill` cover rule ships in the sibling landing
   CSS files (harvia / diooist / inflatable-ice) but was missing here, so the hero
   image rendered at its natural size instead of full-bleed — looking small/cropped. */
.po-hero .po-hero-ph > img.fill{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.po-hero .po-hero-ph.has-img{background-image:none}
.po-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(95deg, color-mix(in srgb, var(--nav) 92%, transparent) 0%, color-mix(in srgb, var(--nav) 74%, transparent) 42%, color-mix(in srgb, var(--nav) 30%, transparent) 78%, color-mix(in srgb, var(--nav) 18%, transparent) 100%);
}
.po-hero .wrap{padding-top:96px; padding-bottom:72px; width:100%}
.po-hero h1{
  color:var(--inverse); font-weight:600; font-size:clamp(2.6rem,5.2vw,4.6rem);
  line-height:1.18; letter-spacing:-.03em; max-width:15ch;
}

/* Ad-traffic hero specifics */
.po-hero--ad .po-hero-lede{max-width:820px}
.po-hero--ad h1{max-width:16ch}
.po-hero--ad .subhook{max-width:50ch; margin-top:22px}
.subhook{
  font-weight:300; font-size:clamp(1.1rem,1.5vw,1.45rem); line-height:1.45;
  color:var(--inverse); margin-top:26px;
}
.po-hero--ad .subhook .hero-price{color:var(--inverse); font-weight:500; white-space:nowrap}
/* brand.css ships a DIFFERENT .trust-strip (product-page grid with top/bottom
   hairlines) under the same class name — scope to the hero and zero the
   borders/grid so the collision can't reintroduce the rules or the lines. */
.po-hero--ad .trust-strip{list-style:none; display:flex; flex-wrap:wrap; gap:14px 26px; margin-top:30px; padding:0;
  border-top:0; border-bottom:0; grid-template-columns:none}
.po-hero--ad .trust-strip li{display:inline-flex; align-items:center; gap:9px; font-weight:300; font-size:.95rem; color:var(--inverse)}
.po-hero--ad .trust-strip svg{width:18px; height:18px; flex:none; stroke:var(--sauna); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.po-hero--ad .po-hero-cta{display:flex; gap:24px; flex-wrap:wrap; margin-top:34px; align-items:center}
.compare-link{display:inline-flex; align-items:center; gap:6px; font-weight:400; font-size:.95rem; color:var(--inverse);
  border-bottom:1px solid color-mix(in srgb, var(--inverse) 34%, transparent); padding-bottom:2px; transition:color .15s, border-color .15s}
.compare-link:hover{color:var(--inverse); border-color:var(--inverse)}

/* ════════════════════════════════════════════════════════════════════
   2 · WHY CUSTOM
   ════════════════════════════════════════════════════════════════════ */
.why-intro{font-weight:300; font-size:clamp(1.1rem,1.5vw,1.32rem); line-height:1.55; color:var(--body); max-width:64ch; margin-top:22px}
.why-intro b{color:var(--heading); font-weight:500}
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:36px 60px; margin-top:52px}
.why-point{display:flex; flex-direction:column; gap:10px}
.why-point h3{font-weight:600; font-size:1.18rem; letter-spacing:-.01em; color:var(--sauna-text); line-height:1.25}
.why-point p{font-size:.96rem; line-height:1.62; color:var(--body); max-width:48ch}
.example-row{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px}
.example-cell{position:relative; aspect-ratio:4/3; border-radius:var(--r-xl); overflow:hidden; background:var(--surface)}
.example-cell img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.example-cell .lbl{position:absolute; left:14px; bottom:13px; z-index:2; color:var(--inverse); font-size:.82rem; font-weight:500;
  text-shadow:0 1px 6px color-mix(in srgb, var(--nav) 50%, transparent); letter-spacing:.01em}
.example-cell::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,color-mix(in srgb, var(--nav) 55%, transparent))}
@media (max-width:760px){
  .why-grid{grid-template-columns:1fr; gap:30px}
  .why-point p{max-width:none}
  .example-row{grid-template-columns:1fr 1fr; gap:12px}
}

/* ════════════════════════════════════════════════════════════════════
   3 · BUILDER EMBED
   ════════════════════════════════════════════════════════════════════ */
.builder-head{text-align:center; max-width:900px; margin:0 auto}
.builder-head h2{white-space:nowrap}
.builder-head .lead{margin:16px auto 0}
@media (max-width:680px){ .builder-head h2{white-space:normal} }
.builder-embed{position:relative; margin:48px auto 0; max-width:1320px; border:1px solid var(--border);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:0 30px 70px color-mix(in srgb, var(--nav) 16%, transparent); background:var(--nav)}
.builder-embed iframe{display:block; width:100%; height:880px; border:0}
.builder-loading{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--nav-muted);
  font-size:.9rem; letter-spacing:.04em; background:var(--nav); z-index:1; transition:opacity .4s; pointer-events:none}
.builder-embed.loaded .builder-loading{opacity:0}
.builder-cta{display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; justify-content:center; margin-top:34px}
.builder-softcta{display:inline-flex; align-items:center; gap:6px; font-size:.95rem; font-weight:500; color:var(--heading);
  border-bottom:1px solid var(--border); padding-bottom:2px; transition:border-color .15s}
.builder-softcta:hover{border-color:var(--heading)}
@media (max-width:760px){ .builder-embed iframe{height:640px} }

/* ════════════════════════════════════════════════════════════════════
   4 · CUSTOMISATION CARDS
   ════════════════════════════════════════════════════════════════════ */
.cust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px}
.cust-card{background:var(--bg); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; display:flex; flex-direction:column}
.cust-media{position:relative; aspect-ratio:4/3; background:var(--surface); overflow:hidden}
.cust-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cust-media.contain img{object-fit:contain; padding:14px}
.cust-swatches{position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr}
.cust-swatches img{position:static; width:100%; height:100%; object-fit:cover}
.cust-body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:7px; flex:1}
.cust-ey{font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--sauna-text)}
.cust-card h3{font-weight:600; font-size:1.12rem; color:var(--heading); letter-spacing:-.01em}
.cust-card p{font-size:.88rem; line-height:1.6; color:var(--body)}
.cust-list{list-style:none; display:flex; flex-direction:column; gap:7px; margin-top:4px}
.cust-list li{display:flex; justify-content:space-between; gap:12px; font-size:.84rem; color:var(--body);
  border-top:1px solid var(--hairline); padding-top:7px}
.cust-list li:first-child{border-top:0; padding-top:0}
.cust-list li b{color:var(--heading); font-weight:500; text-align:right; white-space:nowrap}
@media (max-width:980px){ .cust-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .cust-grid{grid-template-columns:1fr} }

/* ════════════════════════════════════════════════════════════════════
   5 · GALLERY
   ════════════════════════════════════════════════════════════════════ */
.gal-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:240px; gap:14px; margin-top:48px}
.gal-cell{position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--surface)}
.gal-cell img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s ease}
.gal-cell:hover img{transform:scale(1.04)}
.gal-cell::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,color-mix(in srgb, var(--nav) 50%, transparent))}
.gal-cell .name{position:absolute; left:16px; bottom:14px; z-index:2; color:var(--inverse); font-size:.86rem; font-weight:500; text-shadow:0 1px 6px color-mix(in srgb, var(--nav) 45%, transparent)}
.gal-cell.wide{grid-column:span 2}
.gal-cell.tall{grid-row:span 2}
@media (max-width:860px){
  .gal-grid{grid-template-columns:1fr 1fr; grid-auto-rows:200px}
  .gal-cell.wide{grid-column:span 2}
  .gal-cell.tall{grid-row:span 1}
}

/* ════════════════════════════════════════════════════════════════════
   6 · COMPARE (base + four-column)
   ════════════════════════════════════════════════════════════════════ */
.cmp{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(12,auto);
  margin-top:44px;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--inverse)}
.cmp-col{grid-row:span 12;display:grid;grid-template-rows:subgrid;border-left:1px solid var(--hairline)}
.cmp-col:first-child{border-left:0}
.cmp-col.is-rec{background:var(--sauna-light)}
.cmp-col > *{padding:13px 20px;border-bottom:1px solid var(--hairline)}
.cmp-tag{min-height:46px;display:flex;align-items:center}
.cmp-tag span{display:inline-flex;align-items:center;font-weight:600;font-size:.62rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--inverse);background:var(--sauna);padding:4px 11px;border-radius:999px;white-space:nowrap}
.cmp-name{font-weight:600;font-size:1.1rem;color:var(--heading);letter-spacing:-.01em;display:flex;align-items:center}
.cmp-cell{display:flex;flex-direction:column;gap:3px}
.cmp-cell .rl{font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cmp-cell .rv{font-size:.92rem;color:var(--heading);line-height:1.4}
.cmp-cell.is-key{background:color-mix(in srgb, var(--sauna) 6%, transparent)}
.cmp-col.is-rec .cmp-cell.is-key{background:color-mix(in srgb, var(--sauna) 12%, transparent)}
.cmp-cell.is-key .rv{font-weight:600}
.cmp-cell .tick{display:inline-flex;align-items:center;gap:7px}
.cmp-cell .tick svg{width:15px;height:15px;stroke:var(--sauna);fill:none;stroke-width:2.4;flex:none}
.cmp-cta{display:flex;flex-direction:column;gap:9px;border-bottom:0!important;padding-top:18px!important;padding-bottom:20px!important}
.cmp-cta .btn{width:100%}
.cmp-free{font-size:.72rem;color:var(--muted);text-align:center}
@media (max-width:760px){
  .cmp{grid-template-columns:1fr;grid-template-rows:none;border:0;background:transparent;gap:18px;margin-top:32px}
  .cmp-col{grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column;
    border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--inverse)}
  .cmp-col.is-rec{border-color:var(--sauna);box-shadow:0 0 0 1px var(--sauna)}
  .cmp-col .cmp-tag:empty{display:none}
  .cmp-name{font-size:1.18rem}
}

/* Four-column variant */
.cmp--four{grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(10,auto)}
.cmp--four .cmp-col{grid-row:span 10}
.cmp--four .cmp-col > *{padding-left:16px;padding-right:16px}
.cmp--four .cmp-name{font-size:1.02rem}
.cmp-cta .config-btn{cursor:pointer}
/* Swipe hint — only on mobile, where the table becomes a swiper */
.cmp-hint{display:none}
@media (max-width:860px){
  .cmp--four{
    display:flex; grid-template-columns:none; grid-template-rows:none;
    flex-wrap:nowrap; gap:14px; border:0; background:transparent; border-radius:0;
    overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin:32px -22px 0; padding:4px 22px 8px;
  }
  .cmp--four::-webkit-scrollbar{display:none}
  .cmp--four .cmp-col{
    grid-row:auto; grid-template-rows:none; display:flex; flex-direction:column;
    flex:0 0 80%; max-width:80%; scroll-snap-align:center;
    border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; background:var(--inverse);
  }
  .cmp--four .cmp-col.is-rec{border-color:var(--sauna); box-shadow:0 0 0 1px var(--sauna)}
  .cmp--four .cmp-col .cmp-tag:empty{display:none}
  .cmp--four .cmp-col > *{border-bottom:1px solid var(--hairline)}
  .cmp--four .cmp-name{font-size:1.18rem}
  .cmp-hint{display:flex; align-items:center; justify-content:center; gap:10px;
    margin-top:16px; font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
  .cmp-hint .dots{display:inline-flex; gap:6px}
  .cmp-hint .dots i{width:6px; height:6px; border-radius:50%; background:var(--border)}
  .cmp-hint .dots i:first-child{background:var(--sauna); width:18px; border-radius:3px}
  .cmp-hint .arrow{display:inline-flex; align-items:center; gap:5px; color:var(--sauna-text)}
  .cmp-hint .arrow svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
    animation:cmpNudge 1.4s ease-in-out infinite}
  @keyframes cmpNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
  @media (prefers-reduced-motion:reduce){ .cmp-hint .arrow svg{animation:none} }
}

/* ════════════════════════════════════════════════════════════════════
   7 · PROCESS STEPS (dark)
   ════════════════════════════════════════════════════════════════════ */
.proc-head{text-align:center; max-width:64ch; margin:0 auto}
.proc-sub{margin:16px auto 0}
.proc-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin:52px auto 0; max-width:1080px; text-align:left}
.proc-step{display:flex; flex-direction:column; gap:14px}
.proc-step .pnum{width:46px; height:46px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-size:1.05rem; color:var(--sauna); border:1.5px solid var(--sauna); background:color-mix(in srgb, var(--sauna) 12%, transparent); font-variant-numeric:tabular-nums}
.proc-step h3{font-weight:600; font-size:1.15rem; color:var(--inverse); letter-spacing:-.01em}
.proc-step p{font-size:.92rem; line-height:1.6; color:var(--nav-muted)}
@media (max-width:760px){ .proc-steps{grid-template-columns:1fr; gap:30px} }

/* ════════════════════════════════════════════════════════════════════
   9 · FINAL CTA + email capture
   ════════════════════════════════════════════════════════════════════ */
.final{text-align:center}
.final .price-anchor{font-size:1.3rem; color:var(--inverse); margin-top:24px; font-weight:300}
.final .price-anchor b{color:var(--inverse); font-weight:600}
.final-cta{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:30px}
.divider{margin:44px auto 0; max-width:540px; text-align:center; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--nav-muted); position:relative}
.divider::before,.divider::after{content:""; position:absolute; top:50%; width:34%; height:1px; background:color-mix(in srgb, var(--inverse) 14%, transparent)}
.divider::before{left:0}
.divider::after{right:0}
.notify{max-width:520px; margin:22px auto 0; text-align:center}
.notify .nlbl{font-size:.86rem; line-height:1.55; color:var(--nav-muted)}
.notify form{display:flex; gap:10px; margin-top:16px}
.notify input{flex:1; min-width:0; background:color-mix(in srgb, var(--inverse) 6%, transparent); border:1px solid color-mix(in srgb, var(--inverse) 18%, transparent); border-radius:var(--r-lg);
  padding:13px 16px; color:var(--inverse); font:inherit; font-size:.92rem}
.notify input::placeholder{color:var(--nav-muted)}
.notify input:focus{outline:none; border-color:var(--sauna)}
.notify .notify-msg{margin-top:14px; font-size:.86rem; color:var(--inverse); min-height:1.2em}
@media (max-width:520px){ .notify form{flex-direction:column} }

/* ════════════════════════════════════════════════════════════════════
   QUOTE MODAL
   ════════════════════════════════════════════════════════════════════ */
.qm-overlay{position:fixed; inset:0; z-index:120; background:color-mix(in srgb, var(--nav) 62%, transparent); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:24px}
.qm-overlay.open{display:flex}
.qm{background:var(--bg); border-radius:var(--r-xl); width:100%; max-width:560px; max-height:92vh; overflow:auto;
  box-shadow:0 40px 100px color-mix(in srgb, var(--nav) 40%, transparent); position:relative}
.qm-head{padding:30px 34px 0}
.qm-head .eyebrow-q{font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--sauna-text)}
.qm-head h3{font-weight:600; font-size:1.5rem; letter-spacing:-.02em; color:var(--heading); margin-top:8px}
.qm-head p{font-size:.92rem; line-height:1.6; color:var(--body); margin-top:8px; max-width:46ch}
.qm-close{position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%; border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center; background:var(--bg); transition:.15s}
.qm-close:hover{background:var(--surface); border-color:var(--heading)}
.qm-close svg{width:16px; height:16px; stroke:var(--heading); fill:none; stroke-width:2; stroke-linecap:round}
.qm-form{padding:24px 34px 34px; display:flex; flex-direction:column; gap:16px}
.qm-field{display:flex; flex-direction:column; gap:7px}
.qm-field label{font-size:.78rem; font-weight:600; letter-spacing:.04em; color:var(--heading)}
.qm-field input,.qm-field textarea{background:var(--inverse); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px;
  font:inherit; font-size:.92rem; color:var(--heading); width:100%}
.qm-field textarea{resize:vertical; min-height:88px}
.qm-field input:focus,.qm-field textarea:focus{outline:none; border-color:var(--sauna)}
.qm-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.qm-config{background:var(--sauna-light); border:1px solid color-mix(in srgb, var(--sauna) 28%, transparent); border-radius:var(--r-md); padding:13px 16px;
  font-size:.84rem; color:var(--sauna-text); display:flex; align-items:center; gap:10px}
.qm-config svg{width:17px; height:17px; stroke:var(--sauna-text); fill:none; stroke-width:1.8; flex:none}
.qm-form .btn-primary{width:100%; margin-top:4px}
.qm-fine{font-size:.76rem; color:var(--muted); text-align:center; line-height:1.5}
.qm-success{padding:48px 34px; text-align:center; display:none; flex-direction:column; align-items:center; gap:14px}
.qm-success.show{display:flex}
.qm-success .ok{width:62px; height:62px; border-radius:50%; background:var(--sauna-light); display:inline-flex; align-items:center; justify-content:center}
.qm-success .ok svg{width:30px; height:30px; stroke:var(--sauna-text); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.qm-success h3{font-weight:600; font-size:1.35rem; color:var(--heading); letter-spacing:-.01em}
.qm-success p{font-size:.92rem; color:var(--body); max-width:38ch; line-height:1.6}
body.qm-lock{overflow:hidden}
@media (max-width:520px){ .qm-row{grid-template-columns:1fr} }

/* ════════════════════════════════════════════════════════════════════
   CD HANDOVER — new sections (§06 timber, §07 heater, §08 install) +
   hero heat gauge. Reference hex/rgba mapped to brand tokens (zero hex).
   ════════════════════════════════════════════════════════════════════ */

/* ── cust-card note + span/value layout (§03) ───────────────────────── */
.cust-list li span{flex:1; min-width:0}
.cust-note{font-size:.76rem; line-height:1.5; color:var(--muted); margin-top:2px}

/* ── Timber deep-dive (§06) ─────────────────────────────────────────── */
.timber-deep-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:48px}
.timber-deep-card{display:flex; background:var(--inverse); border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--border)}
.td-swatch{width:110px; flex-shrink:0}
.td-swatch img{width:100%; height:100%; object-fit:cover; display:block}
.td-body{padding:22px 26px; display:flex; flex-direction:column; gap:9px}
.td-grade{font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sauna-text)}
.td-body h3{font-size:1.08rem; font-weight:600; color:var(--heading); letter-spacing:-.015em; line-height:1.25}
.td-body p{font-size:.88rem; line-height:1.6; color:var(--body); font-weight:300}
.td-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px}
.td-tag{font-size:.72rem; padding:3px 10px; border-radius:20px; background:var(--surface); color:var(--body)}
.td-tag--special{background:var(--sauna-light); color:var(--sauna-text); font-weight:500}
@media(max-width:760px){ .timber-deep-grid{grid-template-columns:1fr} .td-swatch{width:90px} }

/* ── Heater deep-dive (§07) ─────────────────────────────────────────── */
.heater-deep-layout{margin-top:44px}
.heater-size-guide{background:var(--surface); border-radius:var(--r-lg); padding:26px; max-width:480px}
.heater-size-guide h3{font-size:.82rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--sauna-text); margin-bottom:16px}
.sg-row{display:flex; align-items:center; gap:16px; padding:9px 0; border-bottom:1px solid var(--border); font-size:.9rem}
.sg-row:last-child{border-bottom:none}
.sg-vol{width:80px; color:var(--body)}
.sg-kw{font-weight:600; color:var(--heading); width:60px}
.sg-note{color:var(--muted); font-size:.82rem}
.heater-card-row{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px}
.heater-card-row--two{grid-template-columns:repeat(2,1fr)}
.heater-card-row--five{grid-template-columns:repeat(5,1fr); gap:14px}
.heater-deep-card{background:var(--inverse); border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--border); display:flex; flex-direction:column}
.hdc-img{height:170px; background:var(--surface); display:flex; align-items:center; justify-content:center; padding:18px}
.hdc-img img{max-height:130px; object-fit:contain}
.hdc-img--dark{background:var(--nav)}
.hdc-body{padding:18px; display:flex; flex-direction:column; gap:6px}
.hdc-brand{font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sauna-text)}
.hdc-name{font-size:1rem; font-weight:600; color:var(--heading); letter-spacing:-.01em}
.hdc-sub{font-size:.78rem; color:var(--muted)}
.hdc-specs{list-style:none; display:flex; flex-direction:column; gap:0; margin-top:8px}
.hdc-specs li{display:flex; justify-content:space-between; font-size:.82rem; padding:6px 0; border-bottom:1px solid var(--border); color:var(--body)}
.hdc-specs li:last-child{border-bottom:none}
.hdc-specs b{color:var(--heading); font-weight:500}
@media(max-width:1100px){ .heater-card-row--five{grid-template-columns:repeat(3,1fr)} }
@media(max-width:900px){ .heater-card-row{grid-template-columns:1fr 1fr} .heater-card-row--two{grid-template-columns:1fr 1fr} }
@media(max-width:760px){ .heater-card-row--five{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .heater-card-row,.heater-card-row--two{grid-template-columns:1fr} }
@media(max-width:520px){ .heater-card-row--five{grid-template-columns:1fr} }

/* ── Installation & Delivery (§08, dark band) ───────────────────────── */
.install-layout{display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:52px}
.install-col-head{font-size:1.15rem; font-weight:600; color:var(--inverse); letter-spacing:-.02em; margin-bottom:24px}
.install-col-head span{color:var(--sauna)}
.install-items{display:flex; flex-direction:column; gap:22px}
.install-item{display:flex; gap:14px; align-items:flex-start}
.ii-icon{width:18px; height:18px; flex-shrink:0; stroke:var(--sauna); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; margin-top:2px}
.install-item h4{font-size:.95rem; font-weight:500; color:var(--inverse); margin-bottom:5px}
.install-item p{font-size:.87rem; line-height:1.58; color:color-mix(in srgb, var(--inverse) 65%, transparent); font-weight:300}
.install-timeline{list-style:none; display:flex; flex-direction:column; gap:0}
.install-timeline li{display:flex; gap:16px; padding-bottom:26px; position:relative}
.install-timeline li:last-child{padding-bottom:0}
.itl-dot{width:34px; height:34px; border-radius:50%; background:var(--sauna); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; color:var(--inverse); flex-shrink:0; position:relative; z-index:1}
.install-timeline li:not(:last-child) .itl-dot::after{content:""; position:absolute; top:34px; left:50%; transform:translateX(-50%); width:2px; height:calc(100% + 10px); background:color-mix(in srgb, var(--sauna) 25%, transparent)}
.itl-body{padding-top:5px}
.itl-body h4{font-size:.95rem; font-weight:500; color:var(--inverse); margin-bottom:5px}
.itl-body p{font-size:.87rem; line-height:1.58; color:color-mix(in srgb, var(--inverse) 65%, transparent); font-weight:300}
.itl-time{font-size:.75rem; color:var(--sauna); font-weight:500; display:block; margin-top:5px}
@media(max-width:820px){ .install-layout{grid-template-columns:1fr; gap:44px} }

/* ── Hero heat gauge (top-right) ────────────────────────────────────── */
@property --p{syntax:'<number>'; inherits:false; initial-value:0}
.po-hero--ad .wrap{padding-right:300px}
.hero-gauge{position:absolute; top:50%; right:64px; transform:translateY(-50%); z-index:1; pointer-events:none}
.heat-dial{position:relative; width:216px; height:216px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--heading) 84%, transparent) 0 60%, transparent 60%),
    conic-gradient(from -90deg, var(--sauna) calc(var(--p,0)*1%), color-mix(in srgb, var(--inverse) 14%, transparent) 0);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--inverse) 8%, transparent), 0 18px 46px color-mix(in srgb, var(--nav) 42%, transparent), 0 0 38px color-mix(in srgb, var(--sauna) 20%, transparent);
  transition:--p .12s linear}
.heat-dial::before{content:""; position:absolute; inset:14px; border-radius:50%; border:1px dashed color-mix(in srgb, var(--inverse) 16%, transparent)}
.heat-read{position:relative; text-align:center; z-index:2}
.heat-read .num{font-size:3.4rem; font-weight:600; color:var(--inverse); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.heat-read .deg{font-size:1.2rem; color:var(--sauna); font-weight:400; vertical-align:top; margin-left:1px}
.heat-read .lbl{font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--nav-muted); margin-top:7px; font-weight:600}
.heat-cap{margin-top:16px; text-align:center; max-width:210px; margin-left:auto; margin-right:auto}
.heat-cap b{display:block; font-size:.96rem; font-weight:600; color:var(--inverse); letter-spacing:-.01em}
.heat-cap span{display:block; margin-top:4px; font-size:.78rem; line-height:1.45; color:var(--nav-muted); font-weight:300}
@media (max-width:980px){ .hero-gauge{right:36px} .heat-dial{width:178px; height:178px} .heat-read .num{font-size:2.8rem} .heat-cap{max-width:180px} .po-hero--ad .wrap{padding-right:240px} }
@media (max-width:620px){ .hero-gauge{display:none} .po-hero--ad .wrap{padding-right:40px} }

/* ── §08 What's included ────────────────────────────────────────── */
.incl-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px;align-items:start}
.incl-col-head{display:block;font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--sauna);margin-bottom:18px}
.incl-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0}
.incl-list li{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);font-size:.92rem;color:var(--body)}
.incl-list li svg{width:16px;height:16px;flex-shrink:0;stroke:var(--sauna);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.incl-card{background:var(--sauna-light);border:1px solid rgba(232,128,80,.32);border-radius:var(--r-xl);padding:30px;display:flex;flex-direction:column;gap:14px}
.free-tag{display:inline-flex;align-items:center;gap:8px;background:var(--sauna);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:5px 14px;border-radius:20px;align-self:flex-start}
.free-tag svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.incl-card h3{font-size:1.12rem;font-weight:600;color:var(--heading);letter-spacing:-.015em}
.ic-sub{font-size:.88rem;line-height:1.55;color:var(--body);font-weight:300}
.incl-kit{list-style:none;display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(232,128,80,.28);margin-top:4px}
.incl-kit li{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid rgba(232,128,80,.18)}
.incl-kit li:last-child{border-bottom:none}
.ik-ic{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid rgba(232,128,80,.35);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ik-ic svg{width:16px;height:16px;stroke:var(--sauna-text);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.incl-kit b{display:block;font-size:.88rem;font-weight:600;color:var(--heading);margin-bottom:2px}
.incl-kit span{font-size:.78rem;color:var(--muted);font-weight:300}
@media(max-width:860px){.incl-layout{grid-template-columns:1fr;gap:40px}}
@media(max-width:460px){.incl-list{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════════════
   PRICE QUIZ ("START HERE" questionnaire) — ported from the design
   handoff; colours remapped to brand tokens (zero hardcoded hex).
   ════════════════════════════════════════════════════════════════════ */
.quiz-band{scroll-margin-top:20px}
.quiz{position:relative; max-width:1040px; margin:0 auto; background:var(--inverse); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:34px 40px 40px; overflow:hidden}
.quiz-top{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:6px}
.quiz-kicker{display:inline-flex; align-items:center; gap:9px; font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sauna-text)}
.quiz-kicker .qk-dot{width:7px; height:7px; border-radius:50%; background:var(--sauna)}
.quiz-dots{display:inline-flex; gap:8px}
.quiz-dots i{width:8px; height:8px; border-radius:50%; background:var(--border); transition:.25s}
.quiz-dots i.done{background:var(--sauna)}
.quiz-dots i.now{background:var(--sauna); width:26px; border-radius:5px}
.quiz-stage{position:relative; min-height:340px; display:flex; flex-direction:column; justify-content:center}
.quiz-panel{display:none}
.quiz-panel.is-active{display:block; animation:qzfade .35s ease}
@keyframes qzfade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .quiz-panel.is-active{animation:none} }
.quiz-back{display:inline-flex; align-items:center; gap:7px; background:none; border:none; cursor:pointer;
  font:inherit; font-size:.86rem; font-weight:500; color:var(--muted); padding:0; margin-bottom:20px; transition:color .15s}
.quiz-back:hover{color:var(--heading)}
.quiz-back svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.quiz-q{font-weight:600; font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.02em; color:var(--heading); line-height:1.15}
.quiz-hint{font-size:.95rem; color:var(--body); margin-top:8px; font-weight:300}
.quiz-opts{margin-top:28px}
.quiz-imgopts{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.quiz-imgopt{position:relative; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
  aspect-ratio:16/10; background:var(--surface); padding:0; font:inherit; transition:border-color .15s, box-shadow .15s, transform .12s}
.quiz-imgopt img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.quiz-imgopt::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--nav) 5%, transparent) 30%, color-mix(in srgb, var(--nav) 72%, transparent))}
.quiz-imgopt .cap{position:absolute; left:18px; bottom:16px; z-index:2; color:var(--inverse); text-align:left}
.quiz-imgopt .cap b{display:block; font-size:1.18rem; font-weight:600; letter-spacing:-.01em}
.quiz-imgopt .cap span{display:block; font-size:.84rem; color:color-mix(in srgb, var(--inverse) 86%, transparent); font-weight:300; margin-top:2px}
.quiz-imgopt:hover{border-color:var(--sauna); transform:translateY(-2px); box-shadow:0 16px 34px color-mix(in srgb, var(--nav) 14%, transparent)}
.quiz-imgopt:hover img{transform:scale(1.04)}
.quiz-imgopt.is-sel{border-color:var(--sauna); box-shadow:0 0 0 2px var(--sauna)}
/* Step 1 (indoor/outdoor) restyle: centred CHOOSE ONE label, big centred card
   labels with no subtitle, drop-shadow cards instead of orange borders, and a
   gentle alternating bob (indoor first) to pull the eye. */
.quiz-choose{text-align:center; font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sauna-text); margin-top:26px}
.quiz-choose + .quiz-opts{margin-top:14px}
.quiz-place .quiz-imgopt{border-color:transparent; box-shadow:0 16px 36px color-mix(in srgb, var(--nav) 18%, transparent)}
.quiz-place .quiz-imgopt:hover{border-color:transparent; box-shadow:0 22px 48px color-mix(in srgb, var(--nav) 26%, transparent)}
.quiz-place .quiz-imgopt.is-sel{border-color:transparent; box-shadow:0 22px 48px color-mix(in srgb, var(--nav) 26%, transparent)}
.quiz-place .quiz-imgopt .cap{left:0; right:0; bottom:22px; text-align:center}
.quiz-place .quiz-imgopt .cap b{font-size:1.7rem}
@keyframes qzbob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
.quiz-panel.is-active .quiz-place .quiz-imgopt{animation:qzbob 2.6s ease-in-out infinite}
.quiz-panel.is-active .quiz-place .quiz-imgopt:nth-child(2){animation-delay:1.3s}
@media (prefers-reduced-motion:reduce){ .quiz-panel.is-active .quiz-place .quiz-imgopt{animation:none} }
.quiz-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.quiz-tiles--3{grid-template-columns:repeat(3,1fr)}
.quiz-tile{border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg); cursor:pointer; padding:26px 16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; min-height:120px;
  transition:border-color .15s, background .15s, box-shadow .15s, transform .12s; font:inherit}
.quiz-tile .big{font-size:2rem; font-weight:600; color:var(--heading); letter-spacing:-.02em; line-height:1}
.quiz-tile .sub{font-size:.82rem; color:var(--muted); font-weight:400}
.quiz-tile:hover{border-color:var(--sauna); background:var(--inverse); transform:translateY(-2px); box-shadow:0 12px 26px color-mix(in srgb, var(--nav) 10%, transparent)}
.quiz-tile.is-sel{border-color:var(--sauna); box-shadow:0 0 0 2px var(--sauna)}
.quiz-shapes{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.quiz-shape{border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; background:var(--inverse); padding:0;
  display:flex; flex-direction:column; transition:border-color .15s, box-shadow .15s, transform .12s; font:inherit; text-align:left}
.quiz-shape .thumb{aspect-ratio:4/3; background:var(--surface); position:relative; overflow:hidden; width:100%}
.quiz-shape .thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.quiz-shape .thumb.help{display:flex; align-items:center; justify-content:center; background:var(--sauna-light)}
.quiz-shape .thumb.help svg{width:38px; height:38px; stroke:var(--sauna-text); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.quiz-shape .lbl{padding:13px 14px; font-size:.95rem; font-weight:500; color:var(--heading)}
.quiz-shape:hover{border-color:var(--sauna); transform:translateY(-2px); box-shadow:0 12px 26px color-mix(in srgb, var(--nav) 10%, transparent)}
.quiz-shape:hover .thumb img{transform:scale(1.05)}
.quiz-shape.is-sel{border-color:var(--sauna); box-shadow:0 0 0 2px var(--sauna)}
.quiz-recap{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:22px}
.quiz-chip{display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:500; color:var(--sauna-text);
  background:var(--sauna-light); border:1px solid color-mix(in srgb, var(--sauna) 28%, transparent); padding:5px 12px; border-radius:999px}
.quiz-restart{background:none; border:none; cursor:pointer; font:inherit; font-size:.78rem; font-weight:500; color:var(--muted);
  display:inline-flex; align-items:center; gap:6px; padding:5px 4px; transition:color .15s}
.quiz-restart:hover{color:var(--sauna-text)}
.quiz-restart svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.quiz-payoff .quiz-q{margin-bottom:4px}
.quiz-price{font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.5; color:var(--heading); font-weight:300; max-width:44ch; margin-top:10px}
.quiz-price b{font-weight:600; color:var(--sauna-text); font-variant-numeric:tabular-nums; white-space:nowrap}
.quiz-payoff-cta{margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:16px}
.quiz-note{font-size:.82rem; color:var(--muted); margin-top:14px}
.quiz-payoff-grid{display:grid; grid-template-columns:1fr minmax(280px,340px); gap:36px; align-items:start; margin-top:2px}
.quiz-payoff-main{min-width:0}
.quiz-product{display:flex; flex-direction:column; margin-top:0; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg); overflow:hidden; transition:border-color .18s, box-shadow .18s, transform .18s}
.quiz-product:hover{border-color:var(--sauna); box-shadow:0 16px 36px color-mix(in srgb, var(--nav) 10%, transparent); transform:translateY(-2px)}
.quiz-product:empty{display:none}
.quiz-product .qp-link{display:flex; flex-direction:column; text-decoration:none; color:inherit; cursor:pointer; background:none; border:none; padding:0; font:inherit; text-align:left}
.quiz-product .qp-media{width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--surface)}
.quiz-product .qp-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.quiz-product:hover .qp-media img{transform:scale(1.04)}
.quiz-product .qp-body{display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; min-width:0}
.quiz-product .qp-ey{font-size:.7rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--sauna-text)}
.quiz-product .qp-name{font-weight:600; font-size:1.15rem; color:var(--heading); letter-spacing:-.01em; line-height:1.2}
.quiz-product .qp-specs{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px}
.quiz-product .qp-specs span{font-size:.74rem; font-weight:500; color:var(--body); background:var(--surface); border:1px solid var(--hairline); padding:4px 10px; border-radius:999px}
.quiz-product .qp-price{margin-top:auto; font-size:1.05rem; font-weight:600; color:var(--heading); font-variant-numeric:tabular-nums}
.quiz-product .qp-price span{font-size:.78rem; font-weight:400; color:var(--muted)}
.quiz-product .qp-more{display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-size:.82rem; font-weight:600; color:var(--sauna-text)}
.quiz-product .qp-more svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s}
.quiz-product:hover .qp-more svg{transform:translateX(3px)}
@media (max-width:820px){ .quiz-payoff-grid{grid-template-columns:1fr; gap:22px} }
.quiz-capture .field{display:flex; flex-direction:column; gap:7px; margin-top:18px}
.quiz-capture label{font-size:.78rem; font-weight:600; letter-spacing:.03em; color:var(--heading)}
.quiz-capture input{background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md); padding:13px 15px; font:inherit;
  font-size:.95rem; color:var(--heading); width:100%}
.quiz-capture input:focus{outline:none; border-color:var(--sauna); box-shadow:0 0 0 3px color-mix(in srgb, var(--sauna) 16%, transparent)}
.quiz-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.quiz-tab{display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px; border:1px solid var(--border);
  background:var(--bg); cursor:pointer; font:inherit; font-size:.86rem; font-weight:500; color:var(--body); transition:.15s}
.quiz-tab .tdot{width:8px; height:8px; border-radius:50%; background:var(--muted)}
.quiz-tab:hover{border-color:var(--sauna); color:var(--sauna-text)}
.quiz-tab.is-sel{background:var(--sauna-light); border-color:var(--sauna); color:var(--sauna-text); font-weight:600}
.quiz-tab.is-sel .tdot{background:var(--sauna)}
.quiz-send{margin-top:22px; width:100%}
.quiz-reassure{font-size:.8rem; color:var(--muted); text-align:center; margin-top:14px; line-height:1.5}
.quiz-error{font-size:.85rem; color:var(--sauna-text); text-align:center; margin-top:12px; display:none}
.quiz-error.is-shown{display:block}
/* Honeypot: visually removed, still in the accessibility-invisible DOM. */
.qz-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none}
/* NOTE: the handoff set display:flex unconditionally here, which out-ranks
   .quiz-panel{display:none} and left the success panel permanently visible —
   flex is applied only while the panel is active. */
.quiz-success{text-align:center; flex-direction:column; align-items:center; gap:14px; padding:14px 0}
.quiz-panel.quiz-success.is-active{display:flex}
.quiz-success .ok{width:64px; height:64px; border-radius:50%; background:var(--sauna-light); display:inline-flex; align-items:center; justify-content:center}
.quiz-success .ok svg{width:32px; height:32px; stroke:var(--sauna-text); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.quiz-success h3{font-weight:600; font-size:1.5rem; letter-spacing:-.02em; color:var(--heading)}
.quiz-success p{font-size:1rem; color:var(--body); max-width:38ch; line-height:1.55; font-weight:300}
@media (max-width:720px){
  .quiz{padding:26px 20px 30px}
  .quiz-tiles,.quiz-shapes{grid-template-columns:1fr 1fr}
  .quiz-imgopts{grid-template-columns:1fr}
  .quiz-stage{min-height:0}
}

/* ════════════════════════════════════════════════════════════════════
   TRUST BAND — consolidated single warm band
   ════════════════════════════════════════════════════════════════════ */
/* brand.css gives every <section> 120px vertical padding — zero it here; the
   band's height comes solely from the wrap's own 26px padding. */
section.trustband{background:var(--sauna); padding:0; border-top:0}
.trustband .wrap{display:grid; grid-template-columns:repeat(4,1fr); padding-top:26px; padding-bottom:26px}
.trust-it{display:flex; align-items:center; gap:12px; padding:4px 26px; border-left:1px solid color-mix(in srgb, var(--inverse) 28%, transparent); color:var(--inverse)}
.trust-it:first-child{border-left:0; padding-left:0}
.trust-it svg{width:24px; height:24px; flex:none; stroke:var(--inverse); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.trust-it b{font-size:.98rem; font-weight:600; line-height:1.25; letter-spacing:-.005em}
@media (max-width:820px){
  .trustband .wrap{grid-template-columns:1fr 1fr; gap:20px 0}
  .trust-it{padding:4px 20px}
  .trust-it:nth-child(odd){border-left:0; padding-left:0}
}
@media (max-width:460px){ .trustband .wrap{grid-template-columns:1fr} .trust-it,.trust-it:nth-child(odd){border-left:0; padding-left:0} }

/* ── Gallery "Configure →" overlays (product cells → builder) ─────── */
.gal-cell{position:relative}
.gal-config{position:absolute; top:12px; right:12px; z-index:3; display:inline-flex; align-items:center; gap:5px;
  background:color-mix(in srgb, var(--nav) 62%, transparent); backdrop-filter:blur(6px); color:var(--inverse);
  font-size:.74rem; font-weight:600; padding:6px 12px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--inverse) 22%, transparent); opacity:0; transform:translateY(-4px);
  transition:opacity .18s, transform .18s, background .15s}
.gal-cell:hover .gal-config{opacity:1; transform:none}
.gal-config:hover{background:var(--cta)}
@media (hover:none){ .gal-config{opacity:1; transform:none} }

/* ── Builder mobile toast ─────────────────────────────────────────── */
.builder-toast{
  display:none; /* JS shows only on narrow viewports */
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(16px);
  width:calc(100% - 32px); max-width:420px;
  background:var(--nav); color:var(--inverse);
  border:1px solid color-mix(in srgb, var(--inverse) 14%, transparent);
  border-radius:var(--r-xl); padding:14px 44px 14px 16px;
  box-shadow:0 8px 32px color-mix(in srgb, var(--nav) 38%, transparent);
  z-index:9000; opacity:0;
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.builder-toast.is-visible{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto}
.builder-toast p{font-size:.85rem; line-height:1.45; color:color-mix(in srgb, var(--inverse) 82%, transparent); margin:0}
.builder-toast strong{color:var(--inverse); font-weight:500}
.builder-toast-close{
  position:absolute; top:10px; right:10px;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--inverse) 8%, transparent); border:none; border-radius:50%;
  color:color-mix(in srgb, var(--inverse) 60%, transparent); cursor:pointer; transition:background .15s;
}
.builder-toast-close:hover{background:color-mix(in srgb, var(--inverse) 18%, transparent); color:var(--inverse)}

/* ── FAQ dividers ─────────────────────────────────────────────────────
   brand.css draws .faq-acc rules with --hairline, which is near-invisible
   on this section's surface background. Darken to --border on this page
   (this stylesheet only loads on the custom-saunas template; the extra
   .wrap-tight scope out-ranks brand.css regardless of load order). */
.wrap-tight .faq-acc{border-top-color:var(--border)}
.wrap-tight .faq-acc .faq{border-bottom-color:var(--border)}
/* +/− toggle circle: one step darker again so it reads as a control
   (hover → --heading and the open dark fill come from brand.css). */
.wrap-tight .faq-acc .faq > summary::after{border-color:var(--muted)}