/* PPF studio on /ppf: the Tint Pros widget (~/Desktop/ppf-web/section.html, markup and script unchanged) in this site's own dress -- Bebas Neue over Saira, the pink-to-coral gradient on what is chosen, coral checks, and the hairlines, tab states and panel ground of the P1 coverage block it replaces (ppf-coverage.css, 2026-10-05). Built into ppf.html by tools/build_ppf_studio.py; everything is scoped under #tp-ppfstudio. */ #tp-ppfstudio{ --ps-red:#ea138f; --ps-grad:var(--brand-gradient,linear-gradient(405deg,#ea138f 0%,#f59154 100%)); --ps-coral:var(--brand-coral,#f59154); --ps-ink:var(--paper,#eeeae2); --ps-card:#151412; --ps-card2:#1b1b18; --ps-pick:#291722; --ps-line:var(--line,#ffffff26); --ps-line2:#ffffff14; --ps-mut:#d8d1c8; --ps-sub:var(--text-soft,#bcb9b0); --ps-display:'Bebas Neue',Saira,sans-serif; --ps-body:Saira,Arial,sans-serif; --ps-ease:cubic-bezier(.16,1,.3,1); display:block;width:100%;max-width:100%;min-width:0;font-family:var(--ps-body);color:var(--ps-ink); -webkit-font-smoothing:antialiased; } #tp-ppfstudio *,#tp-ppfstudio *::before,#tp-ppfstudio *::after{box-sizing:border-box;} #tp-ppfstudio button{font:inherit;} #tp-ppfstudio button:focus-visible,#tp-ppfstudio a:focus-visible{outline:2px solid #f5add1;outline-offset:3px;} /* ---------- the card: one per section ---------- */ #tp-ppfstudio .ps__card{background:var(--ps-card);color:var(--ps-ink);border:1px solid var(--ps-line);} #tp-ppfstudio .ps__cardhead{padding:30px 32px 22px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;} #tp-ppfstudio .ps__title{ margin:0;font-family:var(--ps-display);font-weight:400;font-size:clamp(22px,1.9vw,28px);line-height:1;letter-spacing:.01em;color:var(--ps-ink); } #tp-ppfstudio .ps__title em{font-style:normal;font-family:inherit;letter-spacing:inherit;color:var(--ps-coral);} #tp-ppfstudio .ps__lede{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--ps-mut);max-width:52ch;} /* ---------- vehicle rail ---------- */ #tp-ppfstudio .ps__cars{display:grid;grid-template-columns:repeat(var(--ps-n,4),minmax(0,1fr));gap:6px;padding:0 32px 22px;max-width:640px;} #tp-ppfstudio .ps__cars[hidden]{display:none;} #tp-ppfstudio .ps__car{ appearance:none;border:1px solid var(--ps-line);border-radius:3px;background:var(--ps-card2);color:var(--ps-sub);cursor:pointer; font-family:var(--ps-body);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase; padding:13px 8px 12px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:background .25s var(--ps-ease),color .2s,border-color .2s; } #tp-ppfstudio .ps__car:hover{background:#24201c;color:#fff;} #tp-ppfstudio .ps__car[aria-pressed="true"]{background:var(--ps-grad);border-color:#ffffff35;color:#fff;} /* ---------- stage ---------- */ #tp-ppfstudio .ps__stage{position:relative;width:100%;aspect-ratio:16/9;background:#100c09;overflow:hidden;touch-action:pan-y;cursor:grab; border-top:1px solid var(--ps-line2);border-bottom:1px solid var(--ps-line2);} #tp-ppfstudio .ps__stage.is-drag{cursor:grabbing;} /* a desktop stage no taller than the screen under the header, so a swatch or package change is seen without scrolling back (judge, 2026-10-06); the widget lays the plate and the car out for any stage shape */ @media (min-width:801px){#tp-ppfstudio .ps__stage{max-height:calc(100svh - 230px);min-height:420px;}} #tp-ppfstudio .ps__stage:focus-visible{outline:2px solid #f5add1;outline-offset:-2px;} #tp-ppfstudio .ps__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;} #tp-ppfstudio .ps__stage::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:32%;z-index:1;pointer-events:none; background:linear-gradient(to top,rgba(8,6,5,.7),rgba(8,6,5,.3) 45%,rgba(8,6,5,0)); } /* the site sizes every