/* ==========================================================================
   Big Pig Smart Lighting — sales presenter (brite bird presenter base)
   Night-demo aesthetic: deep plum darkness, glowing install photography,
   Pacaembu display type, pill buttons, signature pop-shadow CTAs.
   ========================================================================== */

@font-face { font-family:"Pacaembu"; src:url("../assets/fonts/Pacaembu-Thin.woff2") format("woff2"); font-weight:100; font-display:swap; }
@font-face { font-family:"Pacaembu"; src:url("../assets/fonts/Pacaembu-Light.woff2") format("woff2"); font-weight:300; font-display:swap; }
@font-face { font-family:"Pacaembu"; src:url("../assets/fonts/Pacaembu-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Pacaembu"; src:url("../assets/fonts/Pacaembu-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Pacaembu"; src:url("../assets/fonts/Pacaembu-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Pacaembu"; src:url("../assets/fonts/Pacaembu-Black.woff2") format("woff2"); font-weight:800; font-display:swap; }

:root {
  --bb-pink:#EF2AC1; --bb-orange:#F26924; --bb-plum:#340E30;
  --bb-magenta:#CC27B0; --bb-tangerine:#F7901E; --bb-bubblegum:#F76ADA; --bb-yellow:#FDB71A;
  --bb-white:#FFFFFF; --bb-cream:#FFF8EC;
  --bb-night:#1C0719;                       /* deeper than plum, for photo slides */
  --ink-60:color-mix(in srgb, var(--bb-plum) 60%, white);
  --ink-40:color-mix(in srgb, var(--bb-plum) 40%, white);
  --ink-10:color-mix(in srgb, var(--bb-plum) 10%, white);
  --glow-60:color-mix(in srgb, var(--bb-white) 60%, transparent);
  --grad-sunrise:linear-gradient(90deg, var(--bb-orange) 0%, var(--bb-pink) 100%);
  --grad-dusk:linear-gradient(90deg, var(--bb-orange) 0%, var(--bb-pink) 55%, var(--bb-plum) 100%);
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-xl:32px; --radius-pill:999px;
  --shadow-lg:0 20px 40px -12px rgba(52,14,48,.22);
  --shadow-pop:0 8px 0 0 var(--bb-plum);
  --ease-out:cubic-bezier(.22,1,.36,1);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
html, body { height:100%; overscroll-behavior:none; }
body {
  font-family:"Pacaembu","Helvetica Neue",Arial,sans-serif;
  font-weight:300; color:var(--bb-white); background:var(--bb-night);
  -webkit-font-smoothing:antialiased; user-select:none; -webkit-user-select:none;
}
img { -webkit-user-drag:none; }

/* ---------- home ---------- */
.home { position:fixed; inset:0; display:flex; flex-direction:column; overflow:hidden; background:var(--bb-night); }
.home-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.home-bg-b { opacity:0; transition:opacity 2.2s ease; }
.home-bg-b.is-on { opacity:1; }
.home-scrim {
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(28,7,25,.93) 0%, rgba(28,7,25,.82) 44%, rgba(28,7,25,.45) 100%),
             linear-gradient(0deg, rgba(28,7,25,.5), rgba(28,7,25,0) 35%);
}
.home-head {
  position:relative; display:flex; align-items:center; justify-content:space-between;
  padding:max(18px, env(safe-area-inset-top)) clamp(24px,4.5vw,56px) 0;
}
.home-logo { height:clamp(30px,4.8vh,46px); }
.home-dealer { font-weight:500; font-size:clamp(.8rem,1.8vh,1rem); letter-spacing:.08em; opacity:.8; }
.home-main {
  position:relative; flex:1; min-height:0;
  display:flex; align-items:stretch; gap:clamp(24px,4vw,72px);
  padding:clamp(8px,2vh,24px) clamp(24px,4.5vw,56px) max(18px, env(safe-area-inset-bottom));
}
.home-left {
  flex:1.15; min-width:0; display:flex; flex-direction:column;
  justify-content:center; gap:clamp(8px,1.8vh,18px);
}
.home-left .display { font-size:clamp(2.6rem,7.5vh,4.8rem); }
.home-left .display-fit { font-size:clamp(2rem,5.8vh,3.7rem); }
.menu-list { display:flex; flex-direction:column; margin-top:clamp(6px,1.6vh,16px); }
.menu-item {
  display:flex; align-items:center; gap:clamp(14px,1.8vw,24px);
  border:0; border-top:1px solid rgba(255,255,255,.16); background:none; cursor:pointer;
  padding:clamp(8px,1.55vh,15px) 4px; text-align:left; color:var(--bb-white); font-family:inherit;
  transition:background .15s, padding-left .2s var(--ease-out);
}
.menu-item:last-child { border-bottom:1px solid rgba(255,255,255,.16); }
.menu-item:active { background:rgba(255,255,255,.07); padding-left:14px; }
.menu-num {
  font-weight:700; font-size:clamp(.7rem,1.5vh,.85rem); letter-spacing:.14em;
  color:var(--bb-orange); flex:0 0 2.2em;
}
.menu-text { flex:1; min-width:0; display:flex; align-items:baseline; gap:1em; }
.menu-text strong { font-weight:700; font-size:clamp(1.15rem,2.9vh,1.7rem); line-height:1.05; white-space:nowrap; }
.menu-text em {
  font-style:normal; font-weight:300; font-size:clamp(.78rem,1.8vh,1rem); opacity:.6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.menu-arrow { font-weight:300; font-size:clamp(1.3rem,3vh,1.8rem); opacity:.45; }
.home-right {
  flex:.85; min-width:0; display:flex; flex-direction:column;
  justify-content:center; gap:clamp(8px,1.6vh,14px);
}
.home-strip-label {
  font-weight:700; font-size:clamp(.7rem,1.5vh,.88rem); letter-spacing:.18em; text-transform:uppercase;
  color:var(--bb-bubblegum);
}
.home-houses {
  display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr;
  gap:clamp(8px,1.2vw,14px); min-height:0; flex:0 1 72vh;
}
.house-card {
  position:relative; border:0; padding:0; cursor:pointer; min-height:0;
  border-radius:var(--radius-md); overflow:hidden; background:var(--bb-plum);
  box-shadow:0 10px 28px -10px rgba(0,0,0,.55);
  transition:transform .18s var(--ease-out);
}
.house-card:active { transform:scale(.95); }
.house-card > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.house-card::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,7,25,0) 40%, rgba(28,7,25,.85) 100%);
}
.tile-label {
  position:absolute; left:12px; right:12px; bottom:10px; z-index:2;
  display:flex; flex-direction:column; gap:1px; text-align:left;
  font-family:inherit; color:var(--bb-white);
}
.tile-label strong { font-weight:700; font-size:clamp(.85rem,2vh,1.15rem); line-height:1.12; }
.tile-label em { font-style:normal; font-weight:300; font-size:clamp(.68rem,1.5vh,.85rem); opacity:.8; }

/* ---------- pages ---------- */
.slide {
  position:fixed; inset:0; height:100dvh; overflow:hidden; z-index:20;
  opacity:0; visibility:hidden; transform:translateY(26px) scale(.985);
  transition:opacity .38s var(--ease-out), transform .38s var(--ease-out), visibility 0s linear .38s;
}
.slide.open {
  opacity:1; visibility:visible; transform:none;
  transition:opacity .42s var(--ease-out), transform .42s var(--ease-out);
}
.slide-inner {
  height:100%; max-width:1180px; margin:0 auto;
  padding:clamp(24px,5vh,64px) clamp(24px,5vw,64px);
  display:flex; flex-direction:column; justify-content:center; gap:clamp(14px,2.6vh,28px);
}

/* ---------- type ---------- */
.kicker {
  font-weight:700; font-size:clamp(.72rem,1.4vw,.95rem);
  letter-spacing:.18em; text-transform:uppercase; color:var(--bb-yellow);
}
.kicker-pink { color:var(--bb-bubblegum); }
.kicker-orange { color:var(--bb-orange); }
.display {
  font-weight:800; font-size:clamp(3rem,8.2vh,5.6rem);
  line-height:1.02; letter-spacing:0;
}
.display-sm { font-weight:800; font-size:clamp(2.1rem,5.6vh,3.6rem); line-height:1.05; }
.display em { font-style:normal; background:var(--grad-sunrise); -webkit-background-clip:text; background-clip:text; color:transparent; }
.display-sm em { font-style:normal; background:var(--grad-sunrise); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lede { font-weight:300; font-size:clamp(1.05rem,2.4vh,1.4rem); line-height:1.45; max-width:34em; opacity:.92; }

/* ---------- reveal choreography ---------- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.slide.in .reveal { opacity:1; transform:none; }
.slide.in .reveal:nth-child(1), .slide.in .why-card:nth-child(1), .slide.in .how-card:nth-child(1), .slide.in .stat:nth-child(1) { transition-delay:.05s; }
.slide.in .reveal:nth-child(2), .slide.in .why-card:nth-child(2), .slide.in .how-card:nth-child(2), .slide.in .stat:nth-child(2) { transition-delay:.15s; }
.slide.in .reveal:nth-child(3), .slide.in .why-card:nth-child(3), .slide.in .how-card:nth-child(3), .slide.in .stat:nth-child(3) { transition-delay:.25s; }
.slide.in .reveal:nth-child(4) { transition-delay:.35s; }

/* ---------- buttons & chips ---------- */
.btn {
  font:inherit; font-weight:700; font-size:clamp(1rem,2.2vh,1.2rem);
  color:var(--bb-white); background:var(--grad-sunrise);
  border:0; border-radius:var(--radius-pill);
  padding:1em 2.1em; cursor:pointer; align-self:flex-start;
  transition:transform .15s var(--ease-out);
}
.btn:active { transform:translateY(4px); }
.btn-pop { box-shadow:var(--shadow-pop); }
.chip {
  font:inherit; font-weight:500; font-size:clamp(.85rem,1.9vh,1.05rem);
  color:var(--bb-white); background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.22); border-radius:var(--radius-pill);
  padding:.65em 1.3em; cursor:pointer; white-space:nowrap;
  transition:background .2s, border-color .2s, color .2s;
}
.chip.is-active {
  background:var(--bb-white); border-color:var(--bb-white); color:var(--bb-plum); font-weight:700;
}

/* ---------- app page ---------- */
.slide-app { background:radial-gradient(120% 130% at 85% -10%, #4A1545 0%, var(--bb-plum) 55%, var(--bb-night) 100%); }
.app-wrap {
  height:100%; max-width:1180px; margin:0 auto;
  padding:clamp(24px,5vh,64px) clamp(24px,5vw,64px);
  display:flex; align-items:center; gap:clamp(24px,5vw,72px);
}
.app-copy { flex:1; display:flex; flex-direction:column; gap:clamp(14px,2.6vh,26px); }
.app-chips { display:flex; gap:10px; flex-wrap:wrap; }
.app-desc { font-weight:300; font-size:clamp(1.05rem,2.4vh,1.35rem); line-height:1.5; min-height:4.5em; max-width:30em; opacity:.92; }
.phone {
  flex:0 0 auto; width:clamp(220px,24vw,290px); position:relative;
  border-radius:clamp(38px,4.2vw,50px); background:#0A0309;
  border:2px solid #3A2A38;
  box-shadow:inset 0 0 4px 2px rgba(255,255,255,.12), inset 0 0 0 6px #241022, 0 30px 60px -20px rgba(0,0,0,.65);
  padding:clamp(11px,1.2vw,14px);
}
/* side buttons */
.phone::before, .phone::after {
  content:""; position:absolute; width:3px; border-radius:2px; background:#3A2A38;
}
.phone::before { right:-5px; top:26%; height:11%; }                /* power */
.phone::after  { left:-5px;  top:20%; height:7%; box-shadow:0 calc(100% + 14px) 0 #3A2A38; } /* volumes */
.phone-screen {
  width:100%; aspect-ratio:1206/2622; border-radius:clamp(26px,3vw,36px); overflow:hidden;
  background:#160513;
}
.ph-shot { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- install page ---------- */
.slide-scroll { overflow-y:auto; -webkit-overflow-scrolling:touch; }
.slide-install { background:var(--bb-cream); color:var(--bb-plum); }
.slide-install .display, .slide-install .display-sm { color:var(--bb-plum); }
.scroll-inner {
  max-width:1180px; margin:0 auto;
  padding:clamp(70px,10vh,110px) clamp(24px,5vw,64px) clamp(40px,7vh,80px);
  display:flex; flex-direction:column; gap:clamp(18px,3.4vh,36px);
}
.proc-head { display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(20px,4vw,60px); }
.proc-lede {
  font-weight:300; font-size:clamp(.95rem,2.2vh,1.25rem); line-height:1.5;
  color:var(--ink-60); max-width:24em; padding-bottom:.5em;
}
.proc { display:flex; gap:clamp(18px,3vw,44px); align-items:stretch; }
.proc-rail { flex:1; display:flex; flex-direction:column; min-width:0; }
.proc-step {
  position:relative; display:flex; gap:clamp(14px,1.6vw,20px); align-items:flex-start;
  border:0; background:none; cursor:pointer; text-align:left; font-family:inherit; color:var(--bb-plum);
  padding:clamp(10px,1.8vh,16px) 0 clamp(10px,1.8vh,16px) 4px;
}
/* connecting line */
.proc-step::before {
  content:""; position:absolute; left:calc(4px + clamp(17px,2.1vh,21px)); top:0; bottom:0;
  width:2px; background:var(--ink-10);
}
.proc-step:first-child::before { top:clamp(14px,2.4vh,20px); }
.proc-step:last-child::before { bottom:auto; height:clamp(14px,2.4vh,20px); }
.proc-dot {
  position:relative; z-index:1; flex:0 0 auto;
  width:clamp(34px,4.2vh,42px); height:clamp(34px,4.2vh,42px); border-radius:50%;
  background:var(--bb-white); border:2px solid var(--ink-10);
  display:grid; place-items:center;
  transition:background .25s, border-color .25s, transform .25s var(--ease-out);
}
.proc-dot i { font-style:normal; font-weight:800; font-size:clamp(.85rem,1.8vh,1rem); color:var(--ink-40); transition:color .25s; }
.proc-step-body { display:flex; flex-direction:column; gap:.35em; min-width:0; padding-top:.35em; }
.proc-step-body strong { font-weight:700; font-size:clamp(1.05rem,2.5vh,1.45rem); line-height:1.1; transition:color .2s; }
.proc-copy {
  font-weight:300; font-size:clamp(.86rem,1.95vh,1.05rem); line-height:1.5; color:var(--ink-60);
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s var(--ease-out), opacity .35s ease;
}
.proc-step.is-active .proc-dot { background:var(--grad-sunrise); border-color:transparent; transform:scale(1.08); }
.proc-step.is-active .proc-dot i { color:#fff; }
.proc-step.is-active .proc-step-body strong { color:var(--bb-pink); }
.proc-step.is-active .proc-copy { max-height:8em; opacity:1; }
.proc-stage {
  flex:1.1; position:relative; min-height:clamp(340px,52vh,560px);
  border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg);
  background:var(--bb-plum);
}
.proc-img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s ease;
}
.proc-img.is-on { opacity:1; }
.proc-chip {
  position:absolute; top:16px; left:16px;
  font-weight:700; font-size:clamp(.78rem,1.7vh,.95rem); letter-spacing:.04em; color:#fff;
  background:rgba(28,7,25,.62); backdrop-filter:blur(8px);
  border-radius:var(--radius-pill); padding:.6em 1.3em;
}
.proc-expect {
  position:absolute; left:16px; right:16px; bottom:16px; list-style:none;
  display:flex; gap:10px; flex-wrap:wrap;
}
.proc-expect li {
  font-weight:700; font-size:clamp(.72rem,1.6vh,.9rem); color:#fff;
  background:rgba(28,7,25,.62); backdrop-filter:blur(8px);
  border-radius:var(--radius-pill); padding:.55em 1.1em;
}
.proc-expect li::before { content:"✓ "; color:var(--bb-yellow); }
.install-sub { margin-top:clamp(16px,3.4vh,40px); }
.part-copy { font-weight:300; font-size:clamp(.92rem,2.1vh,1.15rem); line-height:1.5; color:var(--ink-60); max-width:52em; }
.type-picker { display:flex; gap:8px; flex-wrap:wrap; margin:.7em 0 .3em; }
.type-picker .chip { color:var(--bb-plum); border-color:var(--ink-10); background:var(--bb-white); box-shadow:var(--shadow-md); }
.type-picker .chip.is-active { background:var(--bb-plum); border-color:var(--bb-plum); color:#fff; }
.part-rest-label {
  margin-top:clamp(14px,2.6vh,28px);
  font-weight:700; font-size:clamp(.72rem,1.6vh,.86rem); letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-60);
}
.part-strip-rest { height:clamp(160px,22vh,240px); }
.part-strip {
  display:flex; gap:12px; overflow-x:auto; scrollbar-width:none;
  height:clamp(220px,32vh,340px); padding:4px 2px 10px;
  scroll-snap-type:x proximity;
}
.part-strip::-webkit-scrollbar { display:none; }
.det-item {
  position:relative; flex:0 0 auto; height:100%; border:0; padding:0; cursor:pointer;
  border-radius:var(--radius-lg); overflow:hidden; background:var(--bb-white);
  box-shadow:var(--shadow-md); scroll-snap-align:start;
}
.det-item img { height:100%; width:auto; display:block; }
.det-tag {
  position:absolute; left:10px; bottom:10px;
  font-weight:700; font-size:clamp(.68rem,1.5vh,.82rem); letter-spacing:.04em; color:#fff;
  background:rgba(28,7,25,.68); backdrop-filter:blur(6px);
  border-radius:var(--radius-pill); padding:.45em 1em; white-space:nowrap;
}
.install-sub em { font-style:normal; background:var(--grad-sunrise); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dn-caption { font-weight:500; color:var(--ink-60); font-size:.95rem; }

/* ---------- specs page ---------- */
.slide-specs { background:radial-gradient(120% 130% at 15% -10%, #4A1545 0%, var(--bb-plum) 55%, var(--bb-night) 100%); }
.spec-wrap {
  height:100%; max-width:1180px; margin:0 auto;
  padding:clamp(24px,5vh,64px) clamp(24px,5vw,64px);
  display:flex; align-items:center; gap:clamp(24px,4.5vw,72px);
}
.spec-left { flex:1; min-width:0; display:flex; flex-direction:column; gap:clamp(12px,2.2vh,22px); }
.spec-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.spec-list { list-style:none; display:flex; flex-direction:column; gap:clamp(8px,1.6vh,14px); }
.spec-list li {
  font-weight:300; font-size:clamp(.98rem,2.3vh,1.25rem); line-height:1.4;
  padding-left:1.3em; position:relative; opacity:.92;
}
.spec-list li::before { content:"●"; position:absolute; left:0; top:.18em; font-size:.55em; color:var(--bb-orange); }
.spec-actions { display:flex; }
.spec-stage {
  flex:.9; align-self:center; aspect-ratio:1/1; max-height:62vh; width:100%;
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  overflow:hidden; position:relative; background:var(--bb-night);
}
.spec-stage img { width:100%; height:100%; object-fit:cover; }
.spec-stage.is-float {
  background:radial-gradient(80% 80% at 50% 45%, #4A1545 0%, var(--bb-night) 100%);
  display:grid; place-items:center; padding:clamp(20px,3.5vw,48px);
}
.spec-stage.is-float img {
  width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain;
  filter:drop-shadow(0 24px 36px rgba(0,0,0,.55));
}
/* white studio renders sit on a clean product card */
.spec-stage.is-card {
  background:#fff;
  display:grid; place-items:center; padding:clamp(20px,3.5vw,48px);
}
.spec-stage.is-card img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.spec-foot { font-weight:500; font-size:clamp(.82rem,1.9vh,1rem); color:var(--bb-yellow); }

/* ---------- credibility page ---------- */
.slide-cred { background:radial-gradient(120% 130% at 85% -10%, #4A1545 0%, var(--bb-plum) 55%, var(--bb-night) 100%); }
.cred-stats { display:flex; gap:clamp(28px,6vw,90px); }
.stat { display:flex; flex-direction:column; }
.stat-num {
  font-weight:800; font-size:clamp(2.2rem,6vh,4rem); line-height:1;
  background:var(--grad-sunrise); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-num i { font-style:normal; font-size:.55em; vertical-align:.28em; }
.stat-label { font-weight:500; font-size:clamp(.75rem,1.6vh,.92rem); letter-spacing:.14em; text-transform:uppercase; opacity:.7; margin-top:.45em; }
.cred-license {
  align-self:flex-start; display:inline-flex; align-items:center; gap:.5em;
  font-weight:700; font-size:clamp(.78rem,1.7vh,.95rem); letter-spacing:.06em;
  color:var(--bb-yellow); background:rgba(253,183,26,.12);
  border:1.5px solid rgba(253,183,26,.4); border-radius:var(--radius-pill);
  padding:.5em 1.2em;
}
.cred-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,24px); }
.cred-sub { font-weight:700; font-size:clamp(1.2rem,3vh,1.7rem); margin-top:clamp(8px,1.6vh,16px); }
.cred-strip { height:clamp(180px,26vh,280px); }
.cred-card {
  border:1.5px solid rgba(255,255,255,.14); border-radius:var(--radius-lg);
  background:rgba(255,255,255,.05); padding:clamp(16px,3vh,30px);
  display:flex; flex-direction:column; gap:.8em;
}
.cred-stars { color:var(--bb-yellow); font-size:clamp(1.1rem,2.4vh,1.4rem); letter-spacing:.18em; }
.cred-card blockquote { font-weight:300; font-size:clamp(.92rem,2.1vh,1.12rem); line-height:1.55; opacity:.92; }
.cred-card figcaption { font-weight:700; font-size:clamp(.85rem,1.9vh,1rem); opacity:.8; }
.trust-row { display:flex; gap:12px; flex-wrap:wrap; }
.trust {
  font-weight:700; font-size:clamp(.8rem,1.8vh,.95rem); letter-spacing:.06em;
  border:1.5px solid rgba(255,255,255,.25); border-radius:var(--radius-pill);
  padding:.6em 1.4em; background:rgba(255,255,255,.06);
}

/* ---------- team page ---------- */
.slide-team { background:radial-gradient(130% 120% at 50% 115%, #5A1A53 0%, var(--bb-plum) 52%, var(--bb-night) 100%); }
.slide-team .scroll-inner { gap:clamp(24px,5vh,56px); }
.tm-row { display:flex; align-items:center; gap:clamp(20px,4vw,56px); }
.tm-row:nth-child(even) { flex-direction:row-reverse; }
.tm-photo {
  position:relative; flex:0 0 44%; aspect-ratio:4/4.6; max-height:58vh;
  border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg);
  background:var(--bb-plum);
}
.tm-photo-wide { flex:0 0 54%; aspect-ratio:4/3; }
.tm-photo img { width:100%; height:100%; object-fit:cover; }
.tm-photo-placeholder {
  background:radial-gradient(100% 100% at 50% 30%, #5A1A53 0%, var(--bb-plum) 75%);
  display:grid; place-items:center; align-content:center; gap:6px;
}
.tm-initial {
  font-weight:800; font-size:clamp(5rem,16vh,9rem); line-height:1;
  background:var(--grad-sunrise); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tm-coming { font-weight:700; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; opacity:.55; }
.tm-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:clamp(6px,1.2vh,12px); }
.tm-num { font-weight:800; font-size:.85rem; letter-spacing:.18em; color:var(--bb-orange); }
.tm-heading { font-weight:800; font-size:clamp(2.2rem,6vh,3.8rem); line-height:1; }
.tm-role-tag {
  font-weight:700; font-size:clamp(.7rem,1.6vh,.88rem); letter-spacing:.18em;
  text-transform:uppercase; color:var(--bb-yellow);
}
.tm-bio { font-weight:300; font-size:clamp(1rem,2.3vh,1.3rem); line-height:1.55; opacity:.9; max-width:30em; }
.team-foot { display:flex; align-items:center; gap:clamp(20px,4vw,48px); flex-wrap:wrap; }

/* ---------- 3 · visualizer ---------- */
.slide-viz { display:flex; flex-direction:column; background:var(--bb-night); }
.viz-stage { position:relative; flex:1; min-height:0; }
.viz-img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .55s ease;
}
.viz-img.is-on { opacity:1; }
.viz-head {
  position:absolute; top:clamp(18px,4vh,40px); left:clamp(24px,4vw,48px);
  display:flex; flex-direction:column; gap:.5em;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.viz-note {
  position:absolute; right:clamp(20px,3vw,40px); bottom:16px;
  font-weight:500; font-size:.82rem; letter-spacing:.06em; opacity:.85;
  text-shadow:0 1px 12px rgba(0,0,0,.7);
}
.viz-controls {
  flex:0 0 auto; display:flex; flex-direction:column; gap:12px;
  padding:16px clamp(20px,3vw,40px) max(18px, env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(28,7,25,0), rgba(28,7,25,.4) 30%), var(--bb-night);
}
.viz-houses { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; }
.viz-houses::-webkit-scrollbar { display:none; }
.viz-scenes { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
.viz-scenes::-webkit-scrollbar { display:none; }
.scene-chip { display:inline-flex; align-items:center; gap:.55em; }
.scene-dots { display:inline-flex; gap:3px; }
.scene-dots i { width:.62em; height:.62em; border-radius:50%; display:inline-block; box-shadow:0 0 6px currentColor; }

/* ---------- day/night slider (embedded in install) ---------- */
.dn-stage { position:relative; overflow:hidden; touch-action:none; }
.dn-embedded {
  height:clamp(320px,56vh,600px); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
}
.dn-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dn-day { position:absolute; inset:0; overflow:hidden; width:60%; }
.dn-day .dn-img { width:100vw; max-width:none; }
.dn-handle {
  position:absolute; top:0; bottom:0; left:60%; width:4px; margin-left:-2px;
  background:var(--bb-white); box-shadow:0 0 18px rgba(0,0,0,.5); cursor:ew-resize;
}
.dn-grip {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%;
  background:var(--grad-sunrise); box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.dn-grip::before { content:"◂ ▸"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:1rem; font-weight:700; letter-spacing:.1em; }
.dn-tag {
  position:absolute; top:18px; font-weight:700; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.5em 1.1em; border-radius:var(--radius-pill); background:rgba(28,7,25,.55); backdrop-filter:blur(6px);
}
.dn-tag-day { left:18px; }
.dn-tag-night { right:18px; }

/* ---------- how cards (install page) ---------- */
.how-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,24px); }
.how-card {
  background:var(--bb-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:clamp(14px,2.6vh,26px); display:flex; flex-direction:column; gap:.6em;
}
.how-img {
  height:clamp(90px,16vh,150px); border-radius:var(--radius-md);
  background:var(--bb-white); border:1px solid var(--ink-10);
  display:grid; place-items:center; overflow:hidden;
}
.how-img img { max-width:82%; max-height:84%; object-fit:contain; }
.how-card h3 { font-weight:700; font-size:clamp(1.05rem,2.5vh,1.4rem); line-height:1.15; }
.how-card p { font-weight:300; font-size:clamp(.88rem,1.9vh,1.04rem); line-height:1.5; color:var(--ink-60); }

/* ---------- gallery ---------- */
.slide-gallery { display:flex; flex-direction:column; background:var(--bb-night); }
.gal-head { padding:clamp(20px,4.5vh,44px) clamp(24px,4vw,48px) clamp(8px,1.6vh,16px); display:flex; flex-direction:column; gap:.55em; }
.gal-filters { display:flex; gap:10px; flex-wrap:wrap; margin-top:.4em; }
.gal-wall {
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows:110px; gap:8px;
  padding:6px clamp(24px,4vw,48px) max(22px, env(safe-area-inset-bottom));
  scrollbar-width:none;
}
.gal-wall::-webkit-scrollbar { display:none; }
.wall-item {
  border:0; padding:0; cursor:pointer; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--bb-plum);
}
.wall-item img { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- pricing / bid builder ---------- */
.slide-pricing { background:radial-gradient(120% 130% at 10% -10%, #4A1545 0%, var(--bb-plum) 55%, var(--bb-night) 100%); }
.bid-wrap {
  height:100%; max-width:1180px; margin:0 auto;
  padding:clamp(20px,4vh,52px) clamp(24px,5vw,64px);
  display:flex; gap:clamp(24px,4vw,64px); align-items:center;
}
.bid-left { flex:1.15; min-width:0; display:flex; flex-direction:column; gap:clamp(10px,2vh,20px); }
.preset-tabs { align-self:flex-start; }
input[type="range"] {
  flex:1; appearance:none; -webkit-appearance:none; height:8px; border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--bb-orange), var(--bb-pink)); outline:none; min-width:0;
}
input[type="range"]::-webkit-slider-thumb {
  appearance:none; -webkit-appearance:none; width:32px; height:32px; border-radius:50%;
  background:var(--bb-white); border:4px solid var(--bb-pink); box-shadow:0 4px 14px rgba(0,0,0,.4); cursor:pointer;
}
.bid-sides { display:flex; flex-direction:column; gap:clamp(8px,1.5vh,14px); }
.bid-side { display:flex; align-items:center; gap:clamp(10px,1.4vw,16px); }
.bid-side-label {
  flex:0 0 4.6em; font-weight:700; font-size:clamp(.9rem,2.1vh,1.1rem);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.side-label-edit {
  flex:0 0 5.5em; width:5.5em; font-weight:700; font-size:clamp(.9rem,2vh,1.05rem);
  text-align:left; white-space:nowrap; overflow:hidden;
}
.side-rm { margin-right:-4px; }
.runs-row { border-top:0; padding-top:0; }
.bid-btn {
  flex:0 0 auto; width:clamp(38px,5vh,46px); height:clamp(38px,5vh,46px); border-radius:50%;
  border:1.5px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);
  color:#fff; font-size:1.4rem; font-weight:500; line-height:1; cursor:pointer;
  transition:background .15s;
}
.bid-btn:active { background:rgba(255,255,255,.22); }
.bid-side-val { flex:0 0 4.6em; text-align:right; font-weight:300; font-size:clamp(.9rem,2vh,1.05rem); opacity:.85; }
.bid-side-val b { font-weight:800; font-size:1.25em; }
/* financing deposit field */
.bid-deposit { display:flex; align-items:center; gap:clamp(10px,1.4vw,16px); }
.bid-deposit-label { font-weight:700; font-size:clamp(.72rem,1.6vh,.88rem); letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.bid-deposit-field {
  display:inline-flex; align-items:baseline; font-weight:700; font-size:clamp(1rem,2.3vh,1.2rem);
  border-bottom:1.5px dashed rgba(255,255,255,.3);
}
.bid-deposit-field input {
  width:5em; border:0; background:none; color:#fff; font:inherit; font-weight:700; outline:none; padding:0 0 1px .1em;
  appearance:textfield; -moz-appearance:textfield; caret-color:var(--bb-pink);
}
.bid-deposit-field input::-webkit-outer-spin-button, .bid-deposit-field input::-webkit-inner-spin-button { -webkit-appearance:none; }
.bid-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bid-editbtn {
  font-family:inherit; font-weight:700; font-size:clamp(.78rem,1.8vh,.95rem);
  color:rgba(255,255,255,.75); background:none; cursor:pointer;
  border:1.5px solid rgba(255,255,255,.3); border-radius:var(--radius-pill);
  padding:.45em 1.2em; transition:background .2s, color .2s, border-color .2s;
}
.bid-editbtn.is-on { background:var(--bb-yellow); border-color:var(--bb-yellow); color:var(--bb-plum); }
.bid-row-extra span { opacity:.95; }
.bid-neg { color:var(--bb-bubblegum); }
.bid-rm {
  flex:0 0 auto; width:1.7em; height:1.7em; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,77,77,.25); color:#FFB3B3; font-size:.78em; line-height:1;
  margin-right:.3em;
}
.bid-add-row {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:.4em;
  padding-top:.6em; border-top:1px dashed rgba(255,255,255,.2);
}
.bid-add-row > span { font-weight:700; font-size:.78em; letter-spacing:.12em; text-transform:uppercase; opacity:.6; }
.bid-add {
  font-family:inherit; font-weight:500; font-size:clamp(.72rem,1.7vh,.88rem);
  color:var(--bb-yellow); background:none; cursor:pointer;
  border:1.5px dashed rgba(253,183,26,.5); border-radius:var(--radius-pill);
  padding:.4em 1em;
}
.bid-add:active { background:rgba(253,183,26,.15); }
/* inline-editable text — custom run names on the sliders */
.bid-edit {
  width:3.4em; border:0; background:none; color:inherit; font:inherit; font-weight:700;
  outline:none; padding:0 0 1px; caret-color:var(--bb-pink);
  border-bottom:1px dashed rgba(255,255,255,.3);
  appearance:textfield; -moz-appearance:textfield;
}
.bid-edit::-webkit-outer-spin-button, .bid-edit::-webkit-inner-spin-button { -webkit-appearance:none; }
.bid-card {
  flex:.85; min-width:0; display:flex; flex-direction:column; gap:clamp(10px,2vh,18px);
  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.16);
  border-radius:var(--radius-xl); padding:clamp(18px,3.4vh,34px);
}
.bid-tabs {
  display:flex; gap:4px; padding:4px; border-radius:var(--radius-pill);
  background:rgba(0,0,0,.28); align-self:flex-start;
}
.bid-tab {
  border:0; background:none; cursor:pointer; font-family:inherit; color:rgba(255,255,255,.65);
  font-weight:700; font-size:clamp(.82rem,1.9vh,1rem);
  padding:.55em 1.5em; border-radius:var(--radius-pill);
  transition:background .2s, color .2s;
}
.bid-tab.is-active { background:var(--grad-sunrise); color:#fff; }
.preset-wrap { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bid-terms { display:flex; gap:8px; flex-wrap:wrap; }
.bid-rows { display:flex; flex-direction:column; gap:.55em; }
.bid-row {
  display:flex; justify-content:space-between; gap:1em;
  font-weight:300; font-size:clamp(.88rem,2vh,1.05rem); opacity:.9;
}
.bid-row b { font-weight:700; }
.bid-row-main { display:inline-flex; align-items:center; gap:.4em; min-width:0; }
.bid-qty { display:inline-flex; align-items:center; gap:.4em; margin-left:.2em; }
.bid-qbtn {
  flex:0 0 auto; width:1.5em; height:1.5em; border-radius:7px; cursor:pointer;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06);
  color:#fff; font:inherit; font-weight:700; line-height:1;
}
.bid-qbtn:active { background:rgba(255,255,255,.22); }
.bid-qty-n { min-width:1.3em; text-align:center; font-weight:800; }
/* comp-able rows carry a hidden long-press gesture; suppress text selection
   and the iOS press-and-hold callout so the rep's hold feels intentional. */
.bid-comprow { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.bid-row.is-comped .bid-row-main { opacity:.6; }
.bid-row s { opacity:.5; font-weight:400; }
.bid-free { font-style:normal; font-weight:800; color:var(--bb-yellow); letter-spacing:.04em; }
.bid-total { display:flex; flex-direction:column; gap:.15em; border-top:1.5px solid rgba(255,255,255,.16); padding-top:clamp(10px,2vh,18px); }
.bid-total-label { font-weight:500; font-size:clamp(.72rem,1.6vh,.88rem); letter-spacing:.16em; text-transform:uppercase; opacity:.7; }
.bid-total-num {
  font-weight:800; font-size:clamp(2.6rem,7vh,4.6rem); line-height:1; font-variant-numeric:tabular-nums;
  background:var(--grad-sunrise); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bid-split { display:flex; gap:clamp(20px,3vw,44px); }
.bid-split-item { display:flex; flex-direction:column; }
.bid-split-num { font-weight:800; font-size:clamp(1.3rem,3.2vh,1.9rem); line-height:1.1; }
.bid-split-label { font-weight:500; font-size:clamp(.68rem,1.5vh,.82rem); letter-spacing:.14em; text-transform:uppercase; opacity:.65; margin-top:.2em; }
.bid-note { font-weight:300; font-size:clamp(.76rem,1.7vh,.92rem); line-height:1.45; opacity:.6; }

/* ---------- rep panel ---------- */
/* Every rep-only control in one place. Slides over the controls column so the
   bid card stays live beside it. Opaque on purpose: the per-foot rate must
   never bleed through to the homeowner. */
.rep-panel {
  position:absolute; top:0; left:0; bottom:0; z-index:5;
  width:min(100%, clamp(420px, 52vw, 660px));
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, #2C0C29 0%, var(--bb-night) 100%);
  border-right:1.5px solid rgba(255,255,255,.14);
  box-shadow:32px 0 80px -24px rgba(0,0,0,.75);
  transform:translateX(-104%); visibility:hidden; pointer-events:none;
  transition:transform .48s var(--ease-out), visibility 0s linear .48s;
}
.rep-panel.is-open { transform:none; visibility:visible; pointer-events:auto; transition:transform .48s var(--ease-out); }
.rp-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:max(20px, env(safe-area-inset-top)) clamp(22px,3vw,40px) 16px;
  border-bottom:1.5px solid rgba(255,255,255,.12);
}
.rp-head .kicker { color:var(--bb-yellow); }
.rp-sub { margin-top:.35em; font-weight:300; font-size:clamp(.82rem,1.8vh,.98rem); opacity:.7; line-height:1.4; max-width:30em; }
.rp-body {
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:6px clamp(22px,3vw,40px) max(24px, env(safe-area-inset-bottom));
}
.rp-sec { padding:clamp(14px,2.4vh,22px) 0; border-bottom:1px solid rgba(255,255,255,.1); }
.rp-sec:last-of-type { border-bottom:0; }
.rp-h {
  display:flex; align-items:baseline; gap:.8em; flex-wrap:wrap;
  font-weight:700; font-size:clamp(.78rem,1.7vh,.92rem); letter-spacing:.16em; text-transform:uppercase;
  color:var(--bb-yellow); margin-bottom:.6em;
}
.rp-h small { font-weight:300; font-size:.86em; letter-spacing:0; text-transform:none; opacity:.6; }
.rp-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:.7em 0; border-top:1px solid rgba(255,255,255,.08); }
.rp-row:first-child { border-top:0; }
.rp-lbl { flex:1; min-width:0; display:flex; flex-direction:column; font-weight:500; font-size:clamp(.92rem,2.1vh,1.1rem); }
.rp-lbl small { font-weight:300; font-size:.78em; opacity:.6; margin-top:.1em; }
.rp-ctrls { display:inline-flex; align-items:center; gap:12px; flex:0 0 auto; }
/* ± stepper around a typeable number — thumb-sized on purpose */
.rp-step { display:inline-flex; align-items:center; gap:4px; background:rgba(0,0,0,.3); border-radius:var(--radius-pill); padding:4px; }
.rp-stepbtn {
  width:clamp(38px,5vh,44px); height:clamp(38px,5vh,44px); border-radius:50%;
  border:1.5px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08);
  color:#fff; font-size:1.35rem; font-weight:500; line-height:1; cursor:pointer; transition:background .15s;
}
.rp-stepbtn:active { background:rgba(255,255,255,.24); }
.rp-num-wrap { display:inline-flex; align-items:baseline; justify-content:center; min-width:4.8em; padding:0 .3em; font-weight:800; font-size:clamp(1rem,2.3vh,1.2rem); }
.rp-num-wrap i { font-style:normal; font-weight:400; font-size:.8em; opacity:.6; margin-left:.1em; }
.rp-num {
  width:3.4em; border:0; border-bottom:2px solid transparent; background:none; color:#fff;
  font:inherit; font-weight:800; text-align:center; outline:none; padding:0; caret-color:var(--bb-pink);
  appearance:textfield; -moz-appearance:textfield; font-variant-numeric:tabular-nums;
}
.rp-num::-webkit-outer-spin-button, .rp-num::-webkit-inner-spin-button { -webkit-appearance:none; }
.rp-num:focus { border-bottom-color:var(--bb-pink); }
/* tap-to-type dollar amount — reads as a pill, the ✎ says it's editable */
.rp-price {
  display:inline-flex; align-items:baseline; justify-content:flex-start; gap:1px; min-width:6.2em;
  background:rgba(0,0,0,.3); border:1.5px solid transparent; border-radius:var(--radius-pill);
  padding:8px 14px 8px 16px; font-weight:800; font-size:clamp(1rem,2.3vh,1.2rem); cursor:text;
  transition:border-color .15s;
}
.rp-price:focus-within { border-color:var(--bb-pink); }
.rp-price .rp-num { width:3.3em; text-align:left; border-bottom:0; }
.rp-price i { font-style:normal; font-size:.7em; opacity:.45; margin-left:.45em; align-self:center; }
.rp-price:focus-within i { opacity:0; }
/* compact stepper — line quantities, mirroring the card's × n control */
.rp-step-sm .rp-stepbtn { width:30px; height:30px; font-size:1.05rem; }
.rp-step-sm .rp-num-wrap { min-width:3.2em; font-size:clamp(.92rem,2.1vh,1.08rem); }
.rp-step-sm .rp-num { width:1.6em; }
/* the one line that can't be removed keeps the ✕ column so names line up */
.rp-rm-space { flex:0 0 auto; width:2em; margin-right:.3em; }
.rp-name { display:inline-flex; align-items:center; gap:.4em; flex:1; min-width:0; border-bottom:1.5px dashed rgba(255,255,255,.3); padding-bottom:2px; }
.rp-name input { flex:1; min-width:0; border:0; background:none; color:#fff; font:inherit; font-weight:700; font-size:clamp(.95rem,2.2vh,1.15rem); outline:none; padding:0; caret-color:var(--bb-pink); }
.rp-name i { font-style:normal; font-size:.9em; opacity:.5; }
.rp-name:focus-within { border-bottom-color:var(--bb-pink); }
.rp-name:focus-within i { opacity:0; }
.rp-ft { display:flex; flex-direction:column; align-items:flex-end; flex:0 0 auto; font-variant-numeric:tabular-nums; }
.rp-ft b { font-weight:800; font-size:clamp(.92rem,2.1vh,1.1rem); letter-spacing:.02em; }
.rp-ft small { font-weight:300; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; opacity:.5; }
.rp-mini {
  flex:0 0 auto; min-width:5.4em; font:inherit; font-weight:700; font-size:clamp(.74rem,1.7vh,.88rem);
  color:var(--bb-white); background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.25);
  border-radius:var(--radius-pill); padding:.5em 1.1em; cursor:pointer;
}
.rp-mini.is-on { background:var(--bb-white); border-color:var(--bb-white); color:var(--bb-plum); }
.rp-add { margin-top:.6em; }
.rp-add .bid-add { font-size:clamp(.8rem,1.9vh,.95rem); padding:.55em 1.1em; }
.rp-empty { font-weight:300; font-size:.95em; opacity:.55; padding:.4em 0; }
.rp-foot { margin-top:clamp(14px,2.4vh,22px); font-weight:300; font-size:clamp(.82rem,1.8vh,.95rem); opacity:.65; line-height:1.45; }
.rp-foot b { font-weight:800; color:var(--bb-yellow); }
.rep-panel .bid-rm { width:2em; height:2em; font-size:.85em; }
@media (orientation:portrait) {
  /* stacked layout: drop in from the top and leave the card's total showing below */
  .rep-panel {
    width:100%; bottom:auto; max-height:72%;
    border-right:0; border-bottom:1.5px solid rgba(255,255,255,.14);
    border-radius:0 0 var(--radius-xl) var(--radius-xl);
    box-shadow:0 32px 80px -24px rgba(0,0,0,.75);
    transform:translateY(-104%);
  }
  .rep-panel.is-open { transform:none; }
  .rp-head { padding-right:clamp(130px, 20vw, 170px); } /* clear the fixed Menu button */
}

/* ---------- dealer card + powered-by ---------- */
.dealer-card {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.16);
  border-radius:var(--radius-xl); padding:clamp(18px,3.4vh,34px) clamp(28px,5vw,56px);
}
.dealer-name { font-weight:700; font-size:clamp(1.3rem,3vh,1.8rem); }
.dealer-city { font-weight:300; opacity:.75; margin-top:-6px; }
.dealer-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.dealer-actions a {
  font-weight:700; font-size:clamp(.95rem,2.1vh,1.15rem); text-decoration:none; color:var(--bb-white);
  background:var(--grad-sunrise); border-radius:var(--radius-pill); padding:.8em 1.7em; box-shadow:var(--shadow-pop);
}
.dealer-actions a.ghost { background:transparent; border:1.5px solid rgba(255,255,255,.4); box-shadow:none; }
.close-foot { display:flex; align-items:center; gap:10px; opacity:.65; font-size:.85rem; font-weight:500; letter-spacing:.08em; }
.close-foot img { height:20px; }

/* ---------- chrome: back button, lightbox ---------- */
.back-btn {
  position:fixed; top:max(14px, env(safe-area-inset-top)); right:18px; z-index:40;
  display:flex; align-items:center; gap:6px;
  font:inherit; font-weight:700; font-size:.95rem; color:var(--bb-white);
  background:rgba(28,7,25,.55); backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.25); border-radius:var(--radius-pill);
  padding:.62em 1.25em .62em 1em; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
}
body.paged .back-btn {
  opacity:1; visibility:visible; transform:none;
  transition:opacity .3s var(--ease-out) .25s, transform .3s var(--ease-out) .25s;
}
.back-btn:active { transform:scale(.94); }
.slide-how ~ .back-btn { color:var(--bb-white); } /* stays light on cream via dark pill */
.lightbox {
  position:fixed; inset:0; z-index:50; background:rgba(10,2,9,.96);
  display:grid; place-items:center;
}
.lightbox[hidden] { display:none; }
.lightbox img { max-width:100vw; max-height:100dvh; object-fit:contain; }
.lightbox-x {
  position:absolute; top:max(14px, env(safe-area-inset-top)); right:18px;
  width:52px; height:52px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; font-size:1.3rem;
}

/* ---------- G Track spotlight band (install page lead) ---------- */
/* Dark band on the cream page: the cream part pops, and the transparent PNG
   sits directly on the band so there is no card edge to notice. */
.gtrack-band {
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:0.88fr 1.35fr; align-items:center;
  gap:clamp(20px,3vw,56px);
  /* warm plum that lifts toward the product, so the card reads lit from the right */
  background:
    radial-gradient(150% 120% at 72% 42%, rgba(239,42,193,.10) 0%, rgba(239,42,193,0) 70%),
    linear-gradient(135deg, #3A1435 0%, #2A0F26 46%, var(--bb-night) 100%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-xl); overflow:hidden;
  padding:clamp(24px,3.4vw,52px);
  margin-bottom:clamp(28px,4vh,52px);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.07);
}
.gtrack-copy { position:relative; z-index:2; }
.gtrack-copy .kicker {
  color:var(--bb-bubblegum); margin-bottom:.5em; letter-spacing:.14em;
}
.gtrack-copy .display-sm { color:var(--bb-white); margin-bottom:.4em; }
.gtrack-lede {
  color:var(--glow-60); font-size:clamp(.88rem,1.8vh,1.05rem); line-height:1.55;
  max-width:42ch;
}
/* three standalone claims — the labels carry the pitch, so they lead */
.gtrack-notes {
  display:flex; flex-direction:column; gap:clamp(12px,1.9vh,20px);
  margin-top:clamp(20px,3vh,32px);
}
.gtrack-notes p {
  display:flex; flex-direction:column; gap:.15em;
  padding-left:clamp(14px,1.3vw,20px);
  border-left:2px solid color-mix(in srgb, var(--bb-bubblegum) 55%, transparent);
  font-size:clamp(.78rem,1.5vh,.92rem); line-height:1.45;
  color:color-mix(in srgb, var(--bb-white) 55%, transparent);
}
.gtrack-notes strong {
  font-weight:700; color:var(--bb-white); letter-spacing:.005em;
  font-size:clamp(1.02rem,2.1vh,1.28rem); line-height:1.25;
}
/* soft pool of light under the part so it sits in the card instead of on it */
.gtrack-hero { margin:0; position:relative; }
.gtrack-hero::before {
  content:""; position:absolute; inset:-30% -22%; z-index:0; pointer-events:none;
  background:
    radial-gradient(48% 42% at 52% 50%, rgba(255,214,245,.13) 0%, rgba(255,214,245,0) 68%),
    radial-gradient(80% 70% at 50% 52%, rgba(239,42,193,.11) 0%, rgba(239,42,193,0) 72%);
}
.gtrack-hero img {
  display:block; position:relative; z-index:1;
  width:106%; max-width:none; height:auto; margin-left:-3%;
  /* the track runs out of the source frame — dissolve that blunt cut into the band */
  -webkit-mask-image:linear-gradient(95deg, transparent 0, #000 9%, #000 100%);
  mask-image:linear-gradient(95deg, transparent 0, #000 9%, #000 100%);
}
@media (prefers-reduced-transparency:reduce) {
  .gtrack-hero::before { display:none; }
}
@media (orientation:portrait) {
  .gtrack-band { grid-template-columns:1fr; }
  .gtrack-lede { max-width:none; }
}

/* ---------- Ray (brite bird mark on photo surfaces) ---------- */
/* Decorative only. One Ray per surface, never over the subject of the photo. */
.ray-mark {
  position:absolute; z-index:3; pointer-events:none;
  width:clamp(64px,8vw,124px); aspect-ratio:1;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.5));
}
.ray-mark svg { display:block; }
.ray-viz      { bottom:clamp(10px,2.2vh,22px); left:clamp(18px,3vw,40px); }
.ray-lightbox { bottom:clamp(18px,4vh,40px); right:clamp(18px,3vw,40px); }

/* ---------- portrait tweaks ---------- */
@media (orientation:portrait) {
  .home-main { flex-direction:column; gap:clamp(12px,2vh,20px); }
  .home-left { flex:0 0 auto; justify-content:flex-start; }
  .home-left .display { font-size:clamp(2.2rem,5vh,3.4rem); }
  .menu-item { padding:clamp(7px,1.2vh,12px) 4px; }
  .menu-text em { display:none; }
  .home-right { flex:1; justify-content:flex-start; }
  .home-houses { grid-template-columns:repeat(3,1fr); flex:1; }
  .how-cards, .cred-cards { grid-template-columns:1fr; }
  .spec-wrap { flex-direction:column; justify-content:center; }
  .spec-left { flex:0 0 auto; }
  .spec-stage { flex:0 1 auto; width:min(70vw, 46vh); }
  .tm-row, .tm-row:nth-child(even) { flex-direction:column; align-items:stretch; }
  .tm-photo, .tm-photo-wide { flex:0 0 auto; width:100%; aspect-ratio:4/3.4; max-height:40vh; }
  .proc { flex-direction:column; }
  .proc-head { flex-direction:column; align-items:flex-start; gap:10px; }
  .proc-stage { min-height:clamp(280px,36vh,420px); }
  .bid-wrap { flex-direction:column; align-items:stretch; justify-content:center; gap:clamp(14px,2.4vh,24px); }
  .bid-left, .bid-card { flex:0 0 auto; }
  .how-img { height:clamp(70px,10vh,110px); }
  .cred-stats { gap:clamp(18px,5vw,36px); }
  .app-wrap { flex-direction:column; justify-content:center; gap:18px; }
  .app-copy { flex:0 0 auto; }
  .app-desc { min-height:3em; }
  .phone { width:fit-content; align-self:center; }
  .phone-screen { width:auto; height:clamp(260px,38vh,520px); }
}