/* builder-demo.html only: photo-based "Build your protection" PREVIEW (staging). Remove with the page if not adopted. */
.pb-page .mbar{display:none}
.pb-page body,body:has(.pb){padding-bottom:84px}
.pb-page .preview-tag{bottom:92px}
.pb{padding:clamp(16px,3vw,40px) var(--pad) 20px;color:var(--fg)}
.pb-head{max-width:820px;margin:0 0 clamp(16px,2.4vw,28px)}
.pb-head .serif{font-size:clamp(32px,4.4vw,60px)}
.pb-lede{margin:12px 0 0;color:var(--muted);max-width:62ch;font-size:clamp(14.5px,1.2vw,16.5px)}
.pb-preview{display:inline-block;margin-right:8px;padding:4px 8px;border-radius:999px;background:var(--bronze);color:var(--black);letter-spacing:.12em}
.pb-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr);gap:clamp(16px,2vw,28px);align-items:start}
.pb-stage{position:sticky;top:76px;background:#0d0d0c;border:1px solid var(--line);border-radius:var(--radius);padding:12px;color:var(--offwhite)}
.pb-stage-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.pb-tabs{display:inline-flex;gap:4px;background:rgba(244,241,236,.07);border-radius:999px;padding:4px}
.pb-tabs button,.pb-xray{appearance:none;border:0;background:none;color:var(--offwhite);font:600 13px/1 var(--sans);padding:10px 14px;border-radius:999px;cursor:pointer;min-height:40px}
.pb-tabs button[aria-selected="true"]{background:var(--offwhite);color:var(--black)}
.pb-tabs button:focus-visible,.pb-xray:focus-visible,.pb-pk:focus-visible,.pb-bar .btn:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.pb-xray{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(244,241,236,.25)}
.pb-xray-i{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;position:relative}
.pb-xray[aria-pressed="true"]{background:#e2c27a;color:#111;border-color:#e2c27a;box-shadow:0 0 18px rgba(226,194,122,.55)}
.pb-frame{position:relative;border-radius:calc(var(--radius) - 10px);overflow:hidden;aspect-ratio:15/13;background:#111;width:min(100%,calc((100svh - 250px) * 15 / 13));margin:0 auto}
.pb-view{position:absolute;inset:0;transform:scale(var(--s,1));transform-origin:var(--ox,50%) var(--oy,50%);perspective:1400px}
/* v3 studio photos are already framed (car large, wall logo above); per-car shadow position under the car */
.pb-view[data-car="ty"]{--s:1;--shx:50%;--shy:92%} .pb-view[data-car="m3"]{--s:1;--shx:49%;--shy:89%}
/* v4 cars */
.pb-view[data-car="rr"]{--s:1;--shx:47%;--shy:86%} .pb-view[data-car="f360"]{--s:1;--shx:49%;--shy:72%}
.pb-view[data-car="rx"]{--s:1;--shx:47%;--shy:81%} .pb-view[data-car="vk"]{--s:1;--shx:50%;--shy:75%}
/* vehicle switch */
.pb-cars button{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:7px 16px;line-height:1.1}
.pb-cars button b{font-size:13.5px}
.pb-cars button span{font-weight:500;font-size:11px;opacity:.72}
.pb-angles[hidden]{display:none}
/* v4: small secondary switch under 'Custom' (two hand-cut builds) */
.pb-stage-top{row-gap:8px}
.pb-sub{flex:1 0 100%;background:none;padding:0;gap:6px;align-items:center}
.pb-sub::before{content:'Build';font:600 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin:0 4px 0 6px}
.pb-sub[hidden]{display:none}
.pb-sub button{padding:7px 14px;min-height:32px;font-size:12px;border:1px solid rgba(244,241,236,.22)}
.pb-sub button[aria-selected="true"]{border-color:var(--offwhite)}
.pb-view[hidden]{display:none}
/* depth layers: background plate (car removed) < soft shadow < car layer (cut-out photo + panel SVG locked together) */
.pb-bgl,.pb-car{position:absolute;inset:0;will-change:transform}
.pb-bgl{transform:scale(1.03)}
.pb-car{transform-origin:50% 60%;transform-style:flat}
.pb-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .45s}
.pb-shadow{position:absolute;left:calc(var(--shx) - 34%);top:calc(var(--shy) - 5%);width:68%;height:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),rgba(0,0,0,0));filter:blur(6px);pointer-events:none;will-change:transform}
.pb-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;-webkit-tap-highlight-color:transparent}
.pz{cursor:pointer;outline:none}
.pz .hit{fill:transparent}
.pz .f,.pz .o,.pz .glc{pointer-events:none}
.pz .f{fill:rgba(255,255,255,0);transition:fill .35s}
.pz .o{fill:none;stroke:rgba(255,255,255,0);stroke-width:4;stroke-linejoin:round;stroke-linecap:round;shape-rendering:geometricPrecision;transition:stroke .3s,stroke-width .3s}
.pz .gl{opacity:0;transform-box:fill-box}
.pz:hover .o{stroke:rgba(255,255,255,.75)}
.pz:hover .f{fill:rgba(255,255,255,.08)}
/* INOZETEK film = light red shade + matching outline (also while it peels off) */
.pz.film .f,.pz.peel[data-ps="film"] .f{fill:rgba(255,78,78,.38)}
.pz.film .o,.pz.peel[data-ps="film"] .o{stroke:rgba(255,120,120,.95);stroke-width:4}
.pz.film:hover .f{fill:rgba(255,78,78,.48)}
.pz.coat .f,.pz.peel[data-ps="coat"] .f{fill:rgba(150,205,255,.13)}
.pz.coat .o,.pz.peel[data-ps="coat"] .o{stroke:rgba(150,205,255,.5);stroke-width:3}
/* v4b: per-car film look. On the red Supercar a tinted fill turns the paint pink, so its film is near-clear: a faint white veil, a crisp
   ice-white outline, an inner glow along each panel edge (.ig: wide stroke clipped to the panel) and a bright gloss sweep as it lays on.
   X-ray keeps the standard red. Every other car keeps light red. */
.pz .ig{fill:none;stroke:rgba(255,255,255,0);stroke-width:9;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:stroke .35s}
.pb-view[data-car="f360"] .pz.film .f,.pb-view[data-car="f360"] .pz.peel[data-ps="film"] .f{fill:rgba(255,255,255,.12)}
.pb-view[data-car="f360"] .pz.film .o,.pb-view[data-car="f360"] .pz.peel[data-ps="film"] .o{stroke:#f3fdff;stroke-width:5}
.pb-view[data-car="f360"] .pz.film .ig,.pb-view[data-car="f360"] .pz.peel[data-ps="film"] .ig{stroke:rgba(214,247,255,.34)}
.pb-view[data-car="f360"] .pz.film:hover .f{fill:rgba(255,255,255,.2)}
.pb-view[data-car="f360"] .pz-p.lay .o{animation-name:pbflashc}
.pb-view[data-car="f360"] .pz.lay .ig{animation:pbwipe .78s cubic-bezier(.22,.8,.25,1) var(--d,0ms) both}
.pb-view[data-car="f360"] .pz.peel .ig{animation:pbpeel .6s cubic-bezier(.5,0,.75,.4) var(--d,0ms) both}
.pb-view[data-car="f360"] .pz.lay .gl{animation-name:pbglossb;animation-duration:.95s}
.pb-stage[data-car="f360"]:not([data-xray="1"]) .lg-film::before{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px #f3fdff,0 0 6px rgba(214,247,255,.8)}
.pb-stage[data-xray="1"] .pz .ig{stroke:rgba(255,255,255,0)!important}
/* ceramic tint = smoky shade on the glass (darkness follows the NSW-legal slider) + light outline; never the windscreen */
.pz-g.tint .f,.pz-g.peel[data-ps="tint"] .f{fill:rgba(138,128,255,var(--to,.4))}
.pz-g[data-g="f"]{--to:var(--tf,.6)} .pz-g[data-g="r"]{--to:var(--tr,.6)}
.pz-g.tint .o,.pz-g.peel[data-ps="tint"] .o{stroke:rgba(214,208,255,.95);stroke-width:4}
/* lay on: wipe from the leading edge + gloss sweep riding the edge + edge flash when it lands. Peel: reverse wipe. */
.pz.lay .f{animation:pbwipe .78s cubic-bezier(.22,.8,.25,1) var(--d,0ms) both}
.pz.lay .gl{animation:pbgloss .78s cubic-bezier(.22,.8,.25,1) var(--d,0ms) both}
.pz.lay .o{animation:pbflash .6s ease-out calc(var(--d,0ms) + .62s) both}
.pz-g.lay .o{animation-name:pbflashg}
.pz.peel .f{animation:pbpeel .6s cubic-bezier(.5,0,.75,.4) var(--d,0ms) both}
.pz.peel .gl{animation:pbglossr .6s cubic-bezier(.5,0,.75,.4) var(--d,0ms) both}
.pz.peel .o{animation:pbfade .45s ease-in var(--d,0ms) both}
@keyframes pbwipe{from{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}
@keyframes pbpeel{from{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}to{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}}
@keyframes pbgloss{0%{opacity:0;transform:translateX(0)}12%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(var(--gt,400%))}}
@keyframes pbglossr{0%{opacity:0;transform:translateX(var(--gt,400%))}15%{opacity:.8}85%{opacity:.8}100%{opacity:0;transform:translateX(0)}}
@keyframes pbflash{0%{stroke:#fff;stroke-width:12;stroke-opacity:0}25%{stroke:#fff;stroke-width:10;stroke-opacity:1}100%{stroke:rgba(255,120,120,.95);stroke-width:4;stroke-opacity:1}}
@keyframes pbflashg{0%{stroke:#fff;stroke-width:10;stroke-opacity:0}25%{stroke:#fff;stroke-width:8;stroke-opacity:1}100%{stroke:rgba(214,208,255,.95);stroke-width:4;stroke-opacity:1}}
@keyframes pbfade{to{stroke-opacity:0}}
@keyframes pbflashc{0%{stroke:#fff;stroke-width:14;stroke-opacity:0}25%{stroke:#fff;stroke-width:12;stroke-opacity:1}100%{stroke:#f3fdff;stroke-width:5;stroke-opacity:1}}
@keyframes pbglossb{0%{opacity:0;transform:translateX(0)}10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(var(--gt,400%))}}
/* X-ray: photo dims, everything covered lights up (same red shading) */
.pb-stage[data-xray="1"] .pb-view img{filter:brightness(.32) saturate(.15) contrast(1.15)}
.pb-stage[data-xray="1"] .pz .o{stroke:rgba(255,255,255,.22);stroke-width:4}
.pb-stage[data-xray="1"] .pz.film .f{fill:rgba(255,90,90,.55)}
.pb-stage[data-xray="1"] .pz.film .o{stroke:#ff8f8f;stroke-width:6}
.pb-stage[data-xray="1"] .pz.coat .f{fill:rgba(110,200,255,.30)}
.pb-stage[data-xray="1"] .pz.coat .o{stroke:rgba(140,215,255,.9);stroke-width:5}
.pb-stage[data-xray="1"] .pz-g.tint .f{fill:rgba(150,135,255,.5)}
.pb-stage[data-xray="1"] .pz-g.tint .o{stroke:rgba(214,208,255,.95);stroke-width:5}
.pb-tip{position:absolute;z-index:3;transform:translate(-50%,-100%);pointer-events:none;background:rgba(11,11,11,.9);color:var(--offwhite);border:1px solid rgba(226,194,122,.5);border-radius:12px;padding:7px 10px;font:600 13px/1.25 var(--sans);white-space:nowrap;opacity:0;transition:opacity .2s}
.pb-tip small{display:block;font-weight:400;color:#cfc6b8;font-size:12px}
.pb-tip.show{opacity:1}
.pb-legend{display:flex;flex-wrap:wrap;gap:14px;list-style:none;margin:10px 4px 0;padding:0;font-size:12.5px;color:#cfc6b8}
.pb-legend li::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.lg-film::before{background:rgba(255,86,86,.6);box-shadow:inset 0 0 0 1.5px #ff8a8a}
.lg-coat::before{background:rgba(110,200,255,.55)}
.lg-tint::before{background:rgba(138,128,255,.55);box-shadow:inset 0 0 0 1.5px rgba(214,208,255,.95)}
.pb-info{margin:8px 4px 2px;font-size:14px;color:#e8e2d8;min-height:2.6em}
.pb-info b{color:#f0cf7f}
/* controls */
.pb-panel fieldset{border:0;margin:0 0 18px;padding:0}
.pb-panel legend{display:flex;align-items:center;gap:10px;font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bt);margin:0 0 10px;padding:0}
.pb-step{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--bronze);color:var(--black);font-size:12px;letter-spacing:0}
.pb-sizes{display:flex;flex-wrap:wrap;gap:6px}
.pb-sz input,.pb-matte input{position:absolute;opacity:0;width:1px;height:1px}
.pb-sz span{display:inline-block;padding:10px 13px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;cursor:pointer}
.pb-sz input:checked+span{background:var(--offwhite);color:var(--black);border-color:var(--offwhite)}
.pb-sz input:focus-visible+span,.pb-matte input:focus-visible+span,.pb-coat input:focus-visible+span{outline:2px solid var(--bronze);outline-offset:2px}
.pb-note{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.pb-pks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pb-pk{appearance:none;text-align:left;font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 13px;cursor:pointer;transition:border-color .25s,box-shadow .25s,background-color .25s}
.pb-pk-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px;flex-wrap:wrap}
.pb-pk b{font-size:14.5px}
.pb-tag{font:600 12px/1.2 var(--sans);color:var(--bronze)}
.pb-pk-d{display:block;margin-top:6px;font-size:12px;line-height:1.4;color:var(--muted)}
.pb-pk[aria-pressed="true"]{border-color:#e2c27a;box-shadow:0 0 0 1px #e2c27a,0 0 22px rgba(226,194,122,.25);background:#1d1a14}
.pb-coat{display:grid;gap:6px;margin-top:10px}
.pb-coat[hidden]{display:none}
.pb-coat label{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);cursor:pointer}
.pb-coat input{accent-color:var(--bronze);margin-top:3px}
.pb-coat b{color:var(--fg);font-weight:600;margin-right:4px}
.pb-cov{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.pb-cov b{color:#ff9a9a;font-weight:600}
.pb-cov[hidden]{display:none}
.pb-matte{display:flex;gap:10px;align-items:center;margin-top:12px;font-size:13px;cursor:pointer;position:relative}
.pb-matte span::before{content:"";display:inline-block;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--bronze);margin-right:9px;vertical-align:-4px}
.pb-matte input:checked+span::before{background:var(--bronze);box-shadow:inset 0 0 0 3px var(--card)}
.pb-tint input[type=range]{width:100%;accent-color:#e2c27a;height:32px;margin:0}
.pb-tint-ticks{display:flex;justify-content:space-between;list-style:none;margin:0;padding:0 2px;font-size:11.5px;color:var(--muted)}
.pb-tint-out{margin:8px 0 0;font-weight:600;font-size:14px}
.pb-legal{font-size:12px;color:var(--muted);margin:8px 0 0}
.pb-legal a{color:var(--bronze)}
.pb-disc{font-size:12.5px;color:var(--fg);margin:0 0 8px;padding:10px 12px;border-left:2px solid var(--bronze);background:rgba(176,141,87,.08);border-radius:0 10px 10px 0}
.pb-fine{font-size:11.5px;color:var(--muted);margin:0}
.pb-q{padding:10px var(--pad) 40px}
.pb-q .quote-card{max-width:720px;margin:0 auto}
.qf-build{margin:0 0 12px;padding:10px 12px;border-radius:14px;border:1px solid var(--bronze);font-size:13.5px}
.qf-build b{display:block;color:var(--bronze);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
/* sticky build bar */
.pb-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));background:rgba(11,11,11,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(226,194,122,.35);color:var(--offwhite)}
.pb-bar-txt{display:grid;grid-template-columns:auto auto;column-gap:12px;align-items:baseline;min-width:0}
.pb-bar-pk{grid-column:1/-1;font:600 11.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#e2c27a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-bar-price{font:800 clamp(20px,2.2vw,26px)/1.1 var(--display);letter-spacing:-.01em}
.pb-bar-price.q{font-size:17px}
.pb-bar-sub{font-size:12px;color:#bdb4a7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-bar-act{display:flex;gap:8px;flex:none}
.pb-bar .btn{padding:13px 18px;min-height:44px}
@media (max-width:1000px){
  .pb-grid{grid-template-columns:minmax(0,1fr)}
  .pb-grid>*{min-width:0}
  .pb-stage{top:62px;z-index:5;padding:8px;border-radius:20px}
  .pb-frame{border-radius:14px}
}
@media (max-width:760px){
  .pb-page body,body:has(.pb){padding-bottom:118px}
  .pb-page .preview-tag{bottom:124px}
  .pb-stage{position:relative;top:auto}
  .pb-stage-top{margin-bottom:8px}
  .pb-tabs button{padding:9px 11px;font-size:12.5px}
  .pb-cars button{padding:6px 12px}
  .pb-cars button span{font-size:10.5px}
  .pb-cars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:2px}   /* 3 Nov 2026: five car tabs fit a 390px phone (no clipped Custom tab) */
  .pb-cars button{padding:6px 4px;align-items:center;text-align:center;min-width:0}
  .pb-cars button b{font-size:12.5px}
  .pb-cars button span{font-size:9.5px;line-height:1.15}
  .pb-frame{width:100%}
  .pb-xray{padding:9px 11px}
  .pb-info{font-size:13px;min-height:3.2em}
  .pb-legend{gap:10px;font-size:11.5px}
  .pb-pks{grid-template-columns:1fr 1fr}
  .pb-pk-d{display:none}
  .pb-bar{flex-direction:column;align-items:stretch;gap:8px;padding-top:8px}
  .pb-bar-txt{grid-template-columns:auto 1fr}
  .pb-bar-act .btn{flex:1;justify-content:center}
  .pb-tel span{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.pz .f,.pz .o,.pb-view img{transition:none}.pz .f,.pz .o,.pz .gl,.pz .ig{animation:none!important}.pb-car,.pb-bgl,.pb-shadow{transform:none!important;will-change:auto}.pb-bgl{transform:none}}
@media (max-width:760px){.pb-pk[aria-pressed="true"] .pb-pk-d{display:block}}

/* HOMEPAGE (index.html #build, 2 Nov 2026): the build bar sticks to the bottom of the builder section only (not the whole page),
   the page keeps its own mobile call bar (.mbar), and the section is a dark card between the light sections. */
body:has(.pb-home){padding-bottom:0}
.pb-home{background:#0b0b0b;color:var(--offwhite);--fg:var(--offwhite);--muted:#bdb4a7;--line:rgba(244,241,236,.14);border-radius:var(--radius);margin:0 clamp(8px,1.4vw,18px);padding-bottom:0}
.pb-home .pb-bar{position:sticky;bottom:12px;margin:18px 0 18px;border:1px solid rgba(226,194,122,.35);border-radius:18px;z-index:20}
@media (max-width:760px){
  body:has(.pb-home){padding-bottom:74px}
  .pb-home{margin:0;border-radius:24px}
  .pb-home .pb-bar{bottom:calc(76px + env(safe-area-inset-bottom));margin:14px 0 14px}
}

/* 3 Nov 2026 (film lines): outlines are drawn in photo units (1500-wide canvas) instead of a fixed 1.75 screen px, and pb.js clips each
   outline to its own panel, so only the inside half shows. On a 390px phone the old 1.75px line was ~7 photo px wide and spilled
   ~3.5px onto flares, trim, tyres, glass and the background, and doubled up at seams. Now ~2 photo px, inside the film only, at any zoom. */