/* Structural styles. All brand personality comes from CSS vars set by app.js from brands.js:
   --accent, --accent-text, --header-bg, --header-text, --page-bg, --panel-bg, --panel-text,
   --muted, --line, --heading-font, --body-font, --radius (buttons/cards), --chip-radius,
   --nav-transform (uppercase brands), --stage-day, --stage-night */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body {
  font-family: var(--body-font, Arial, sans-serif);
  background: var(--page-bg, #f4f4f2);
  color: var(--panel-text, #333);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .heading { font-family: var(--heading-font, inherit); }

/* ---------- header ---------- */
header {
  background: var(--header-bg, #fff);
  color: var(--header-text, #333);
  border-bottom: 3px solid var(--accent, #888);
  padding: 14px 22px;
  display: flex; align-items: center; gap: 16px;
}
header img.logo { height: 34px; width: auto; display: block; }
header .logo-text {
  font-family: var(--heading-font); font-size: 24px; font-weight: 700;
  color: var(--logo-color, var(--header-text)); letter-spacing: .02em;
}
header .page-title {
  margin-left: auto; font-family: var(--display-font, var(--heading-font)); font-size: 15px;
  letter-spacing: .18em; text-transform: var(--nav-transform, none); opacity: .85;
}

@media (max-width: 520px) { header .page-title { display: none; } }

/* ---------- hero ---------- */
.hero { background: var(--hero-bg, var(--page-bg)); border-bottom: 1px solid var(--line, transparent); }
.hero-inner { max-width: 1380px; margin: 0 auto; padding: 44px 22px 38px; }
.eyebrow {
  font-family: var(--heading-font); font-size: 12px; font-weight: 700;
  letter-spacing: .34em; text-transform: uppercase; color: var(--eyebrow, var(--accent));
  margin-bottom: 12px;
}
.hero h1 {
  font-family: var(--display-font, var(--heading-font));
  font-size: clamp(32px, 4.6vw, 54px); line-height: 1.08;
  color: var(--hero-text, var(--panel-text)); font-weight: 700;
  text-transform: var(--nav-transform, none); letter-spacing: .01em;
}
.hero-sub { font-size: 15px; color: var(--hero-sub, var(--muted)); margin-top: 14px; max-width: 640px; line-height: 1.6; }

/* ---------- layout ---------- */
main {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(330px, 1fr);
  gap: 20px; padding: 24px 22px; max-width: 1380px; margin: 0 auto;
}
main > * { min-width: 0; } /* canvas intrinsic size must not blow out the grid column */
@media (max-width: 940px) { main { grid-template-columns: minmax(0, 1fr); } }

/* ---------- stage ---------- */
.stage-wrap {
  background: var(--panel-bg, #fff); border-radius: var(--radius, 10px);
  padding: 14px; box-shadow: var(--card-shadow, 0 2px 14px rgba(0,0,0,.08));
  border: 1px solid var(--card-border, transparent);
  position: sticky; top: 16px; align-self: start;
}
@media (max-width: 940px) { .stage-wrap { position: static; } }
.stage {
  border-radius: calc(var(--radius, 10px) - 4px);
  background: var(--stage-day, radial-gradient(ellipse 120% 90% at 50% 18%, #ffffff 0%, #e4e8eb 48%, #b9bfc5 100%));
  position: relative; overflow: hidden; transition: background .4s;
}
.stage.night {
  background: var(--stage-night, radial-gradient(ellipse 120% 90% at 50% 18%, #1d2733 0%, #0d141c 55%, #05080c 100%));
}
.stage svg.vehicle { display: block; width: 100%; height: auto; }
.stage svg .cabin-night { display: none; }
.stage.night svg .cabin-day { display: none; }
.stage.night svg .cabin-night { display: block; }
.stage svg .ws-glass { fill: #b9c9d3; stroke: rgba(10,16,20,.4); stroke-width: 2; }
.stage.night svg .ws-glass { fill: #1b232c; }
.stage svg .lights { display: none; }
.stage.night svg .lights { display: block; }
.stage.night svg .reflections { opacity: .55; }

#viewer3d { width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
#viewer3d canvas { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; }
#photoviz { width: 100%; aspect-ratio: 4 / 3; position: relative; overflow: hidden; }
.viewer-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: #f2f3f5; z-index: 4; transition: opacity .4s;
}
.viewer-loading.done { opacity: 0; pointer-events: none; }
.viewer-loading .spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(0,0,0,.12); border-top-color: var(--accent, #888);
  animation: vspin .9s linear infinite;
}
.viewer-loading .pct { font-family: var(--heading-font); font-size: 13px; letter-spacing: .12em; color: #6b7076; }
@keyframes vspin { to { transform: rotate(360deg); } }
/* cinematic reveal: dark loading variant, dismissed instantly (no fade over the headlight shot) */
.viewer-loading.cine { background: #0a0a0b; }
.viewer-loading.cine.done { transition: none; }
.viewer-loading.cine .spin { border-color: rgba(255,255,255,.1); border-top-color: rgba(255,255,255,.34); }
.viewer-loading.cine .pct { color: #4a4f56; }
/* stage chrome (VLT badge, hint, credit) sits out the cinematic and eases back in */
.badge-vlt, .stage-hint, .photo-credit { transition: opacity .5s ease; }
.stage.cine .badge-vlt, .stage.cine .stage-hint, .stage.cine .photo-credit { opacity: 0; pointer-events: none; }
.stage-hint {
  position: absolute; bottom: 10px; left: 14px; font-size: 11px;
  color: rgba(20,26,32,.55); background: rgba(255,255,255,.6);
  padding: 4px 10px; border-radius: 999px; pointer-events: none;
  max-width: calc(100% - 260px); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 560px) { .stage-hint { display: none; } }

.photo-stage { padding: 4% 3% 2%; }
.photo-frame { position: relative; }
.photo-frame img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 22px 18px rgba(0,0,0,.42));
}
.photo-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo-credit {
  position: absolute; bottom: 8px; right: 12px; font-size: 10px;
  color: rgba(255,255,255,.55); background: rgba(0,0,0,.35);
  padding: 3px 8px; border-radius: 999px;
}
.photo-credit a { color: inherit; text-decoration: none; }
.photo-credit a:hover, .photo-credit a:focus-visible { text-decoration: underline; color: rgba(255,255,255,.8); }

.stage .badge-vlt {
  position: absolute; top: 12px; left: 14px; z-index: 3; font-family: var(--heading-font);
  font-size: 13px; letter-spacing: .06em; background: rgba(0,0,0,.55); color: #fff;
  padding: 6px 12px; border-radius: 999px; pointer-events: none;
}

/* stage toolbar */
.stage-tools { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 14px; }
.stage-tools .group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.stage-tools .group-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #888); margin-right: 2px; }

.veh-btn, .toggle-btn {
  font-family: var(--body-font); font-size: 13px; padding: 7px 14px; cursor: pointer;
  border: 1.5px solid var(--line, #ddd); background: transparent; color: var(--panel-text);
  border-radius: var(--chip-radius, 8px); transition: all .15s;
}
.veh-btn:hover, .toggle-btn:hover { border-color: var(--accent); }
.veh-btn.active, .toggle-btn.active { background: var(--accent); color: var(--accent-text, #fff); border-color: var(--accent); }
.env-btn { display: inline-flex; align-items: center; gap: 7px; }
.env-dot { width: 12px; height: 12px; border-radius: 50%; flex: none;
  border: 1px solid rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }

.swatch {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid rgba(0,0,0,.18); transition: transform .12s; appearance: none;
}
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatch:hover { transform: scale(1.12); }
.swatch.active { outline: 3px solid var(--accent); outline-offset: 2px; }

#holdCompare { user-select: none; }

/* ---------- control panel ---------- */
.panel { display: flex; flex-direction: column; gap: 16px; }
.card {
  background: var(--panel-bg, #fff); border-radius: var(--radius, 10px);
  padding: 20px; box-shadow: var(--card-shadow, 0 2px 14px rgba(0,0,0,.08));
  border: 1px solid var(--card-border, transparent);
}
.card h2 {
  font-family: var(--heading-font);
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px; font-weight: 700;
}

/* product lines */
.series-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.series-tab {
  font-family: var(--heading-font); font-size: 13px; padding: 9px 14px; cursor: pointer;
  border: 1.5px solid var(--line, #ddd); background: transparent; color: var(--panel-text);
  border-radius: var(--chip-radius, 8px); transition: all .15s; text-transform: var(--nav-transform, none);
  letter-spacing: .04em;
}
.series-tab:hover { border-color: var(--accent); }
.series-tab.active { background: var(--accent); color: var(--accent-text, #fff); border-color: var(--accent); }
.series-desc { font-size: 12.5px; color: var(--muted, #777); margin-top: 10px; line-height: 1.5; }
.series-tech {
  display: inline-block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--accent); color: var(--accent); border-radius: 999px;
  padding: 2px 9px; margin-top: 10px;
}

/* zones */
.zone-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 10px; }
.zone-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-align: center; font-size: 11.5px; padding: 8px 4px 7px; cursor: pointer;
  border: 1.5px solid var(--line, #ddd); background: transparent; color: var(--panel-text);
  border-radius: var(--chip-radius, 8px); transition: all .15s; line-height: 1.15;
}
.zone-tab:hover { border-color: var(--accent); }
.zone-tab.active { background: var(--accent); color: var(--accent-text, #fff); border-color: var(--accent); }
.zone-mini {
  font-family: var(--heading-font); font-size: 11px; font-weight: 700; opacity: .85;
}
.zone-tab.active .zone-mini { opacity: 1; }
.zone-note { font-size: 11.5px; color: var(--muted, #888); line-height: 1.5; margin-bottom: 12px; min-height: 2.4em; }
@media (max-width: 560px) { .zone-bar { grid-template-columns: repeat(3, 1fr); } }

.shade-chip.factory .dot { border-style: dashed; background: var(--dot); }

/* shades */
.shade-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.shade-chip {
  width: 62px; padding: 8px 0 7px; text-align: center; cursor: pointer;
  border: 1.5px solid var(--line, #ddd); border-radius: var(--chip-radius, 8px);
  background: transparent; transition: all .15s; color: var(--panel-text);
}
.shade-chip:hover { border-color: var(--accent); }
.shade-chip.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.shade-chip .dot {
  width: 30px; height: 30px; border-radius: 50%; margin: 0 auto 5px;
  border: 1px solid rgba(0,0,0,.25);
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.5), rgba(255,255,255,0) 45%),
              var(--dot, #333);
}
.shade-chip .pct { font-size: 13px; font-weight: 700; font-family: var(--heading-font); }
.shade-chip .sub { font-size: 9.5px; letter-spacing: .06em; color: var(--muted, #999); text-transform: uppercase; }

/* specs */
.specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.spec { text-align: center; padding: 10px 4px; border: 1px solid var(--line, #eee); border-radius: var(--chip-radius, 8px); }
.spec .val { font-family: var(--heading-font); font-size: 19px; font-weight: 700; color: var(--accent); }
.spec .lbl { font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted, #999); margin-top: 3px; }
.specs-note { font-size: 11px; color: var(--muted, #999); margin-top: 10px; }

/* fuel & energy savings */
.sv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sv-head h2 { margin: 0; }
.sv-switch {
  flex: 0 0 auto; width: 44px; height: 24px; border-radius: 999px; border: 1.5px solid var(--line, #ddd);
  background: var(--panel-bg, #fff); cursor: pointer; position: relative; padding: 0; transition: background .2s, border-color .2s;
}
.sv-switch .sv-knob {
  position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--muted, #999); transition: transform .2s, background .2s;
}
.sv-switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.sv-switch[aria-checked="true"] .sv-knob { transform: translateX(20px); background: var(--accent-text, #fff); }
#svBody { margin-top: 12px; }
.sv-inputs { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.sv-seg { display: flex; border: 1.5px solid var(--line, #ddd); border-radius: var(--chip-radius, 8px); overflow: hidden; }
.sv-seg button {
  padding: 7px 12px; font-family: var(--body-font); font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: var(--panel-bg, #fff); color: var(--panel-text, #333); border: 0; border-right: 1px solid var(--line, #ddd);
}
.sv-seg button:last-child { border-right: 0; }
.sv-seg button.on { background: var(--accent); color: var(--accent-text, #fff); }
.sv-field { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, #999); }
.sv-field input {
  width: 96px; padding: 7px 9px; font-family: var(--body-font); font-size: 13.5px;
  border: 1.5px solid var(--line, #ddd); border-radius: var(--chip-radius, 8px);
  background: var(--panel-bg, #fff); color: var(--panel-text, #333);
}
.sv-veh { margin: 2px 0 12px; }
.sv-veh input { width: 100%; box-sizing: border-box; }
.sv-veh .sv-opt { text-transform: none; letter-spacing: 0; }
.sv-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sv-results .spec .val { font-size: 17px; }
.sv-note { font-size: 10.5px; color: var(--muted, #999); margin-top: 10px; line-height: 1.5; }
.sv-note .sv-how { color: inherit; text-decoration: underline; cursor: pointer; background: none; border: 0; font: inherit; padding: 0; }

/* "Show the math" transparency breakdown */
.sv-math { margin-top: 10px; }
.sv-math > summary {
  cursor: pointer; font-weight: 700; color: var(--panel-text, #333); font-size: 11.5px;
  padding: 6px 0; list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.sv-math > summary::-webkit-details-marker { display: none; }
.sv-math > summary::before { content: "▸"; font-size: 9px; transition: transform .15s; }
.sv-math[open] > summary::before { transform: rotate(90deg); }
.sv-math .mhead { font-size: 10.5px; color: var(--muted, #999); margin: 4px 0 8px; line-height: 1.5; }
.mtable { display: flex; flex-direction: column; gap: 1px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line, #e5e5e5); }
.mrow { display: grid; grid-template-columns: 1.1fr 1.5fr auto; gap: 8px; align-items: baseline;
  padding: 7px 10px; background: var(--panel-bg, #fff); font-size: 11px; }
.mrow .mlab { font-weight: 600; color: var(--panel-text, #333); }
.mrow .mval { color: var(--muted, #777); font-variant-numeric: tabular-nums; }
.mrow.tot { background: color-mix(in srgb, var(--accent, #4a8) 8%, var(--panel-bg, #fff)); }
.mrow.tot .mlab, .mrow.tot .mval { font-weight: 700; color: var(--panel-text, #222); }
.msrc { font-size: 9px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; align-self: center;
  padding: 2px 6px; border-radius: 999px; color: var(--muted, #999); }
.msrc.kind-you { background: #eaf3ff; color: #2b6cb0; }
.msrc.kind-src { background: #eafaf0; color: #2f855a; }
.msrc.kind-est { background: #fff4e5; color: #b7791f; }
.msrc.kind-calc { background: #f0f0f0; color: #888; }
:root[data-theme="dark"] .msrc.kind-you, .dark .msrc.kind-you { background: #16304a; color: #90cdf4; }
:root[data-theme="dark"] .msrc.kind-src, .dark .msrc.kind-src { background: #16321f; color: #9ae6b4; }
:root[data-theme="dark"] .msrc.kind-est, .dark .msrc.kind-est { background: #3a2c12; color: #f6c76b; }
.msrclist { margin: 10px 0 0; padding-left: 16px; font-size: 9.5px; color: var(--muted, #999); line-height: 1.55; }
.msrclist li { margin-bottom: 3px; }
@media (max-width: 560px) {
  .mrow { grid-template-columns: 1fr auto; }
  .mrow .mval { grid-column: 1 / -1; }
}

/* law */
.law-select {
  width: 100%; padding: 10px 12px; font-family: var(--body-font); font-size: 14px;
  border: 1.5px solid var(--line, #ddd); border-radius: var(--chip-radius, 8px);
  background: var(--panel-bg, #fff); color: var(--panel-text); margin-bottom: 12px;
}
.law-rows { display: flex; flex-direction: column; gap: 8px; }
.law-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; padding: 9px 12px; border: 1px solid var(--line, #eee);
  border-radius: var(--chip-radius, 8px);
}
.law-row .pos { font-weight: 600; }
.law-row .rule { color: var(--muted, #888); font-size: 12px; margin-left: auto; }
.law-badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.law-badge.ok { background: #e2f4e4; color: #1e7a2e; }
.law-badge.bad { background: #fbe3e3; color: #b3261e; }
.law-badge.info { background: #e8edf4; color: #40536b; }
.law-note { font-size: 11.5px; color: var(--muted, #888); margin-top: 10px; line-height: 1.5; }

/* CTA */
.cta-btn {
  display: block; width: 100%; text-align: center; text-decoration: none; cursor: pointer;
  font-family: var(--heading-font); font-size: 14px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: 15px 18px; border: none;
  border-radius: var(--btn-radius, var(--chip-radius, 8px));
  background: var(--accent); color: var(--accent-text, #fff); transition: filter .15s;
}
.cta-btn:hover { filter: brightness(1.12); }
.cta-btn.secondary {
  background: transparent; color: var(--panel-text);
  border: 1.5px solid var(--line, #ccc); margin-top: 10px;
}
.cta-btn.secondary:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.cta-tagline { font-size: 12.5px; color: var(--muted, #888); text-align: center; margin-bottom: 12px; line-height: 1.5; }

/* footer */
footer {
  max-width: 1380px; margin: 0 auto; padding: 6px 22px 26px;
  font-size: 11px; color: var(--muted, #999); line-height: 1.6;
}

/* ---------- architectural (building) mode ---------- */
.bstage {
  position: relative; width: 100%; aspect-ratio: 1000 / 667;
  border-radius: var(--radius, 10px); overflow: hidden; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.bstage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bstage svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bdivider {
  position: absolute; top: 0; bottom: 0; width: 0; z-index: 3; cursor: ew-resize;
}
.bdivider::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
  background: rgba(255,255,255,.92); box-shadow: 0 0 6px rgba(0,0,0,.45);
}
.bhandle {
  position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.95);
  color: #1a1c1f; font-size: 15px; font-weight: 700; letter-spacing: -1px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.35); cursor: ew-resize;
}
.bhandle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bside-label {
  position: absolute; top: 12px; z-index: 2; font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; color: #fff; background: rgba(0,0,0,.45);
  padding: 4px 9px; border-radius: 999px; pointer-events: none;
}

/* ---------- entrance: the app arrives as the intro's pane is pulled away ----------
   intro.js adds html.zt-enter at dismiss and drops it once the stagger has run.
   Pieces rise in reading order, so the reveal edge uncovers them already moving. */
@keyframes ztRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ztStage {
  from { opacity: 0; transform: scale(.985); filter: saturate(.6) brightness(1.08); }
  to   { opacity: 1; transform: none; filter: none; }
}
html.zt-enter header            { animation: ztRise .6s cubic-bezier(.2,.7,.2,1) both; }
html.zt-enter .hero-inner > *   { animation: ztRise .65s cubic-bezier(.2,.7,.2,1) both; }
html.zt-enter .hero-inner > :nth-child(1) { animation-delay: .06s; }
html.zt-enter .hero-inner > :nth-child(2) { animation-delay: .12s; }
html.zt-enter .hero-inner > :nth-child(3) { animation-delay: .18s; }
html.zt-enter .stage-wrap       { animation: ztStage .8s cubic-bezier(.2,.7,.2,1) .16s both; }
html.zt-enter .panel .card      { animation: ztRise .6s cubic-bezier(.2,.7,.2,1) both; }
html.zt-enter .panel .card:nth-child(1) { animation-delay: .22s; }
html.zt-enter .panel .card:nth-child(2) { animation-delay: .29s; }
html.zt-enter .panel .card:nth-child(3) { animation-delay: .36s; }
html.zt-enter .panel .card:nth-child(4) { animation-delay: .43s; }
html.zt-enter .panel .card:nth-child(n+5) { animation-delay: .5s; }

/* tactile controls: a press reads as a press */
.veh-btn:active, .series-tabs button:active, .toggle-btn:active, .shade-chips button:active {
  transform: scale(.97);
}

@media (prefers-reduced-motion: reduce) {
  html.zt-enter * { animation: none !important; }
  .veh-btn:active, .series-tabs button:active, .toggle-btn:active, .shade-chips button:active { transform: none; }
}

/* ---------- Tint | Paint Protection mode ---------- */
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 14px;
  border: 1.5px solid var(--accent); border-radius: var(--chip-radius, 8px); overflow: hidden; background: var(--panel-bg); }
.mode-switch[hidden] { display: none; }
.mode-switch button { font-family: var(--heading-font); font-size: 13px; letter-spacing: .06em; padding: 12px 10px; cursor: pointer;
  border: 0; background: transparent; color: var(--panel-text); text-transform: var(--nav-transform, none); transition: background .18s, color .18s; }
.mode-switch button.active { background: var(--accent); color: var(--accent-text, #fff); }
.mode-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
body:not(.mode-ppf) .ppf-only { display: none; }
body.mode-ppf .tint-only { display: none !important; }
.ppf-cover { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ppf-cover button { text-align: left; padding: 11px 12px; cursor: pointer; border: 1.5px solid var(--line, #ddd); background: transparent;
  color: var(--panel-text); border-radius: var(--chip-radius, 8px); transition: border-color .15s, background .15s, color .15s; }
.ppf-cover button b { display: block; font-family: var(--heading-font); font-size: 13px; letter-spacing: .04em; font-weight: 600;
  text-transform: var(--nav-transform, none); }
.ppf-cover button span { display: block; font-size: 11px; line-height: 1.4; color: var(--muted, #888); margin-top: 3px; }
.ppf-cover button:hover { border-color: var(--accent); }
.ppf-cover button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text, #fff); }
.ppf-cover button.active span { color: var(--accent-text, #fff); opacity: .8; }
.ppf-cover button:active { transform: scale(.98); }
#ppfSpecs .spec .val { font-size: 14.5px; line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
@media (max-width: 560px) { .ppf-cover { grid-template-columns: 1fr; } #ppfSpecs { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ppf-cover button:active { transform: none; } }

/* ---------- embedded (iframed on a brand site) ----------
   The host page already carries the brand and the introduction, and the frame
   has a fixed height. So: no header or hero, and the tool fits the frame like
   an app — the car stays in view and only the control column scrolls. */
html.embed, html.embed body { height: 100%; overflow: hidden; }
html.embed header, html.embed .hero { display: none; }
html.embed main {
  height: 100%; max-width: none; padding: 12px; gap: 12px;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
}
html.embed .stage-wrap {
  position: static; height: 100%; min-height: 0; padding: 12px;
  display: flex; flex-direction: column;
}
html.embed .stage-frame { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
html.embed .stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
html.embed #viewer3d, html.embed #photoviz, html.embed .bstage { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
html.embed .stage-tools { flex: none; margin-top: 10px; gap: 10px 14px; }
html.embed .panel {
  height: 100%; min-height: 0; overflow-y: auto; gap: 12px; padding-right: 2px;
  scrollbar-width: thin; scrollbar-color: var(--line, #ccc) transparent;
}
html.embed .panel .card { padding: 16px 18px; }
/* the Tint | Paint Protection switch stays on top while the cards scroll under it */
html.embed .mode-switch { position: sticky; top: 0; z-index: 3; margin-bottom: 0; flex: none;
  box-shadow: 0 10px 16px -10px rgba(0, 0, 0, .45); }
html.embed .panel footer { max-width: none; padding: 2px 2px 6px; }
/* a narrow stage has no room for the hint beside the model credit, and a
   narrow control column has no room for four spec tiles in a row */
@media (max-width: 999px) { html.embed .stage-hint { display: none; } }
@media (min-width: 760px) and (max-width: 1099px) { html.embed:not(.embed-stack) .specs { grid-template-columns: repeat(2, 1fr); } }

/* stacked frames — phones, or a frame taller than it is wide (a brand page
   that sizes the iframe for the whole tool, e.g. height=1650): the car on top,
   its tools under it, then the cards in a grid of 1-3 columns with the two
   that matter most (film + shade, or film + coverage) side by side first.
   app.js fitEmbed() sizes the stage to fill the frame's spare height and pins
   it when the content has to scroll. */
html.embed.embed-stack main { display: block; overflow-y: auto; padding: 10px; }
html.embed.embed-stack .stage-wrap { display: contents; }
html.embed.embed-stack .stage-frame { height: var(--stage-h, 56.25vw); }
html.embed.embed-stack .stage { border-radius: var(--radius, 10px); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); }
html.embed.embed-stack .stage-frame.pin { position: sticky; top: 0; z-index: 6; }
html.embed.embed-stack .stage-tools {
  margin: 10px 0 12px; padding: 12px 14px; background: var(--panel-bg, #fff);
  border-radius: var(--radius, 10px); border: 1px solid var(--card-border, transparent);
  box-shadow: var(--card-shadow, 0 2px 14px rgba(0,0,0,.08));
}
html.embed.embed-stack .panel {
  display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  align-items: stretch; gap: 12px; height: auto; overflow: visible; padding-right: 0;
}
html.embed.embed-stack .panel > .mode-switch,
html.embed.embed-stack .panel > footer { grid-column: 1 / -1; }
html.embed.embed-stack .mode-switch { position: static; box-shadow: none; margin: 0; }
html.embed.embed-stack .specs { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 560px) { html.embed.embed-stack .specs { grid-template-columns: repeat(2, 1fr); } }

/* ---------- on-render controls (HUD) ----------
   When the stage is wide enough, the controls you use while watching the car
   (vehicle, paint, studio, Tint|PPF, windows + shades / coverage, compare)
   float on the render as glass panels in the brand's own panel colours
   (app.js sets --hud-*); the side column keeps the reading: film details,
   performance, legal, savings, dealer. */
.stage-frame { position: relative; }
.hud {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  font-family: var(--body-font);
}
.hud[hidden] { display: none; }
.hud > * { pointer-events: auto; }
.hud .glass {
  background: var(--hud-bg, rgba(16, 17, 19, .66)); color: var(--hud-text, #f2f3f5);
  border: 1px solid var(--hud-line, rgba(255, 255, 255, .14));
  -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .55);
}
.hud-top { position: absolute; top: 12px; left: 12px; border-radius: 999px; padding: 4px; }
.hud-top:empty { display: none; }
.hud-mode { position: absolute; top: 12px; right: 12px; }
.hud-rail {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 10px 7px; border-radius: 999px;
}
.hud-dock {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 140px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 12px 9px; border-radius: 16px;
}
.hud-dock-row, .hud-dock-foot { max-width: 100%; }
.hud-dock-row:empty, .hud-dock-foot:empty { display: none; }

/* controls restyled for the glass */
#hud .veh-btn, #hud .zone-tab, #hud .shade-chip, #hud .ppf-cover button, #hud .toggle-btn {
  color: var(--hud-text, #f2f3f5); border-color: transparent; background: transparent;
}
#hud #vehTabs { display: flex; gap: 2px; }
#hud #vehTabs .veh-btn { border: 0; padding: 6px 15px; font-size: 12px; border-radius: 999px; }
#hud #vehTabs .veh-btn.active, #hud .zone-tab.active, #hud .ppf-cover button.active {
  background: var(--accent); color: var(--accent-text, #fff); border-color: var(--accent);
}
#hud .mode-switch {
  position: static; margin: 0; box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .55);
  border-radius: 999px; background: var(--hud-bg, rgba(16, 17, 19, .66));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
#hud .mode-switch button { padding: 7px 14px; font-size: 11px; color: var(--hud-text, #f2f3f5); }
#hud .mode-switch button.active { color: var(--accent-text, #fff); }
#hud #paints { display: flex; flex-direction: column; gap: 8px; }
#hud .swatch { width: 22px; height: 22px; border-color: rgba(255, 255, 255, .35); }
#hud .swatch.active { outline-width: 2px; }
.hud-studio { position: relative; }
.hud-studio-btn {
  width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center;
  border: 1.5px solid var(--hud-line, rgba(255, 255, 255, .3)); background: transparent;
}
.hud-studio-btn .env-dot { width: 14px; height: 14px; }
.hud-studio-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hud-studio-menu {
  position: absolute; right: calc(100% + 14px); bottom: -10px;
  padding: 10px; border-radius: 12px; min-width: 190px;
}
.hud-studio-menu[hidden] { display: none; }
.hud-menu-title { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--hud-muted, rgba(242, 243, 245, .6)); margin: 0 4px 6px; }
#hud #envTabs { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
#hud #envTabs .veh-btn { border: 0; text-align: left; padding: 7px 10px; font-size: 12.5px; border-radius: 8px; }
#hud #envTabs .veh-btn:hover { background: rgba(127, 127, 127, .16); }
#hud #envTabs .veh-btn.active { background: var(--accent); color: var(--accent-text, #fff); }

#hud .zone-bar { display: flex; gap: 3px; margin: 0; }
#hud .zone-tab {
  flex-direction: row; align-items: baseline; gap: 6px; padding: 5px 11px; font-size: 11.5px;
  border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
#hud .zone-tab:hover { border-color: var(--hud-line, rgba(255, 255, 255, .25)); }
#hud .zone-mini { font-size: 11px; }
#hud .shade-chips { flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; }
#hud .shade-chip { width: 46px; padding: 4px 0 3px; border-radius: 10px; border: 1px solid transparent; }
#hud .shade-chip .dot { width: 24px; height: 24px; margin-bottom: 3px; border-color: rgba(255, 255, 255, .3); }
#hud .shade-chip .pct { font-size: 11.5px; }
#hud .shade-chip .sub { display: none; }
#hud .shade-chip:hover { border-color: var(--hud-line, rgba(255, 255, 255, .25)); }
#hud .shade-chip.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: rgba(127, 127, 127, .14); }
#hud .ppf-cover { display: flex; gap: 3px; margin: 0; grid-template-columns: none; }
#hud .ppf-cover button { padding: 7px 13px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
#hud .ppf-cover button span { display: none; }
#hud .ppf-cover button b { font-size: 11.5px; font-weight: 600; }
#hud #holdCompare {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px;
  border: 0; color: var(--hud-muted, rgba(242, 243, 245, .6)); background: transparent;
}
#hud #holdCompare:hover, #hud #holdCompare:active { color: var(--hud-text, #f2f3f5); }
/* the stage's own chrome makes room: the model credit drops below the dock,
   the drag hint goes (the zone buttons do its job) */
body.hud-on .stage .stage-hint, body.hud-on .stage .badge-vlt { display: none; }
/* outside a fitted frame the stage is a fixed shape: with the controls on it,
   give the car the room the dock takes */
html:not(.embed) body.hud-on #viewer3d { aspect-ratio: 16 / 11; }
/* the dock shows what the side column's mode is about */
body:not(.mode-ppf) #hud [data-slot="cover"],
body.mode-ppf #hud [data-slot="zones"], body.mode-ppf #hud [data-slot="shades"] { display: none; }
body.hud-on .stage .photo-credit { left: 50%; right: auto; bottom: 5px; transform: translateX(-50%); background: none; padding: 0; white-space: nowrap; }
body.hud-on .stage.cine ~ .hud { opacity: 0; pointer-events: none; }
.hud { transition: opacity .5s ease; }
.hud-emptied { display: none !important; }
.hud-note { margin: 10px 0 0; min-height: 0; }