/* ==========================================================================
   DNA Tint Windows: the tint configurator (public/configurator/).
   The stylesheet of the approved prototype, moved as it is. A host page loads
   style.css first and this file after it; what the two would disagree on is
   settled here:
   - every token and reset is scoped to the mount (.cfg), so the rest of a page
     keeps its own (--line-strong and --text-dim have other values there);
   - the primary button is .btn-main: style.css owns .btn-primary;
   - headings start from the browser's own cut (style.css widens every h1, h2).
   State that every car on the page follows stays on <html>, as custom
   properties and attributes: --tint-alpha, --tint-on, --top-h, data-route,
   data-shade, .is-dragging.
   ========================================================================== */
:root{--top-h:104px;--tint-alpha:0;--tint-on:0;}
html[data-route]{background:#07080a;color-scheme:dark;-webkit-text-size-adjust:100%;scroll-behavior:auto;}

.cfg{
  --black:#07080a;
  --charcoal:#121317;
  --charcoal-2:#191b20;
  --line:rgba(244,243,240,.10);
  --line-strong:rgba(244,243,240,.2);
  --off-white:#f4f3f0;
  --text-dim:#a9acb3;
  --text-mute:#8f929a;
  --gold:#b89550;
  --gold-soft:#d4b876;
  --gold-ink:#17120a;
  --gold-wash:rgba(184,149,80,.13);
  --danger:#f0a08c;
  --whatsapp:#25d366;
  --whatsapp-ink:#062b13;
  --film:#06080a;

  --font:"Archivo","Archivo Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wide:122%;

  --fs-small:.875rem;
  --fs-body:1rem;
  --fs-lead:clamp(1rem,.95rem + .3vw,1.125rem);
  --fs-h3:clamp(1.125rem,1.05rem + .35vw,1.3125rem);
  --fs-h2:clamp(1.5rem,1.25rem + 1.1vw,2.125rem);
  --fs-h1:clamp(1.875rem,1.1rem + 3.3vw,4rem);

  --s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --pad:clamp(16px,4vw,48px);
  --radius:14px;
  --radius-sm:10px;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-quart:cubic-bezier(.25,1,.5,1);
  --d1:140ms;--d2:240ms;--d3:420ms;--d4:680ms;
  /* The script waits on these three: tokens.js states each under the same name (MS.reelFade, MS.film,
     MS.reducedFade), and tests/configurator-tokens.test.mjs fails when the two disagree. */
  --ms-reel-fade:1500ms;--ms-film:320ms;--ms-reduced-fade:150ms;
  /* How much cooler the light through the glass rests with Nano Ceramic; car-effects.js ends its effect on it. */
  --fx-cool:.22;

  --z-raised:2;--z-panel:40;--z-top:50;--z-bar:60;--z-toast:120;--z-ghost:130;

  --focus:0 0 0 2px var(--black),0 0 0 4px var(--gold-soft);

  min-height:100dvh;font-family:var(--font);font-size:var(--fs-body);line-height:1.55;color:var(--off-white);background:var(--black);-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

:where(.cfg) *,:where(.cfg) *::before,:where(.cfg) *::after{box-sizing:border-box;}
:where(.cfg) :is(img,video,svg){display:block;max-width:100%;}
:where(.cfg) :is(button,input){font:inherit;color:inherit;}
:where(.cfg) button{-webkit-tap-highlight-color:transparent;}
:where(.cfg) :is(h1,h2,h3,p,ol,ul,dl,dd,figure){margin:0;}
:where(.cfg) :is(h1,h2){font-stretch:100%;font-weight:bold;letter-spacing:normal;text-wrap:wrap;}
:where(.cfg) :is(ol,ul){padding:0;list-style:none;}
:where(.cfg) a{color:inherit;}
:where(.cfg) :focus{outline:none;}
:where(.cfg) :focus-visible{box-shadow:var(--focus);border-radius:8px;}
.cfg .skip-link{color:var(--gold-ink);font-weight:650;}
.display{font-stretch:var(--wide);font-weight:650;letter-spacing:-.012em;line-height:1.08;text-wrap:balance;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:3.5rem;padding:0 1.375rem;
  border:1px solid transparent;border-radius:12px;background:none;cursor:pointer;text-decoration:none;
  font-weight:650;font-size:1rem;line-height:1.2;white-space:nowrap;
  transition:transform var(--d1) var(--ease-quart),background-color var(--d2) var(--ease-quart),border-color var(--d2) var(--ease-quart),color var(--d2) var(--ease-quart);
}
.btn:active{transform:scale(.975);}
.btn .icon{transition:transform var(--d2) var(--ease);}
.btn-main{background:var(--gold);color:var(--gold-ink);}
.btn-main[aria-disabled="true"]{background:var(--charcoal-2);color:var(--text-dim);border-color:var(--line);cursor:default;font-weight:500;font-size:.9375rem;white-space:normal;text-align:center;}
.btn-main[aria-disabled="true"] .icon{display:none;}
.btn-quiet{border-color:var(--line-strong);color:var(--off-white);}
.btn-ghost{min-height:48px;padding:0 14px;color:var(--text-dim);font-weight:500;}
.btn-wa{background:var(--whatsapp);color:var(--whatsapp-ink);}
.btn-xl{min-height:64px;padding:0 30px;font-size:1.0625rem;}
.btn.is-busy{pointer-events:none;}
.btn.is-busy::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (hover:hover){
  .btn-main:not([aria-disabled="true"]):hover{background:var(--gold-soft);}
  .btn-main:not([aria-disabled="true"]):hover .icon-fwd{transform:translateX(4px);}
  .btn-quiet:hover{border-color:var(--gold);}
  .btn-quiet:hover .icon-back{transform:translateX(-3px);}
  .btn-ghost:hover{color:var(--off-white);}
  .btn-wa:hover{background:#3fe07a;}
}

/* ---------- Top bar: brand, stage rail, language, menu ---------- */
.top{
  position:sticky;top:0;z-index:var(--z-top);background:var(--black);
  display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"brand . ctl" "rail rail rail";align-items:center;
  padding:6px var(--pad) 0;border-bottom:1px solid var(--line);
}
.brand{grid-area:brand;display:block;border-radius:6px;}
.brand img{height:40px;width:auto;}
.top-ctl{grid-area:ctl;display:flex;gap:8px;}
.ctl{min-width:44px;height:44px;padding:0 12px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:rgba(244,243,240,.05);cursor:pointer;font-size:.8125rem;font-weight:650;letter-spacing:.04em;transition:border-color var(--d2) var(--ease-quart),color var(--d2) var(--ease-quart),transform var(--d1) var(--ease-quart);}
.ctl:active{transform:scale(.95);}
.ctl-account{text-decoration:none;white-space:nowrap;color:inherit;}
.ctl .icon{width:20px;height:20px;}
@media (hover:hover){.ctl:hover{border-color:var(--gold);color:var(--gold-soft);}}

[data-route="home"] .top{position:absolute;inset:0 0 auto 0;background:linear-gradient(rgba(7,8,10,.72),rgba(7,8,10,0));border-bottom:0;padding-bottom:28px;grid-template-areas:"brand . ctl";}
[data-route="home"] .rail{display:none;}
[data-route="home"] .brand img{height:48px;}
[data-route="home"] .ctl{background:rgba(7,8,10,.55);}

/* Stage rail. Phone: node above its name, seven equal cells. */
.rail{grid-area:rail;min-width:0;}
.rail-list{display:flex;padding:6px 0 8px;}
.rail-item{position:relative;flex:1 1 0;min-width:0;display:flex;justify-content:center;}
.rail-link{position:absolute;top:11px;left:calc(-50% + 15px);right:calc(50% + 15px);height:1px;
  background:linear-gradient(90deg,var(--gold) 50%,var(--line-strong) 50%) 100% 0/200% 100%;transition:background-position var(--d4) var(--ease);}
.rail-item.is-linked .rail-link{background-position:0 0;}
.rail-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:44px;padding:0 1px;border:0;background:none;cursor:pointer;
  color:var(--text-mute);font-size:.6875rem;font-weight:600;line-height:1.1;white-space:nowrap;transition:color var(--d2) var(--ease-quart);}
.rail-node{position:relative;width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-strong);background:var(--black);
  font-size:.6875rem;font-weight:650;font-variant-numeric:tabular-nums;color:var(--text-dim);
  transition:background-color var(--d3) var(--ease),border-color var(--d3) var(--ease),color var(--d3) var(--ease),box-shadow var(--d3) var(--ease);}
.rail-node > *{grid-area:1/1;transition:opacity var(--d2) var(--ease-quart),transform var(--d3) var(--ease);}
.rail-node .icon{width:13px;height:13px;opacity:0;transform:scale(.6);}
.rail-node .i-check path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset var(--d3) var(--ease) 80ms;}
.l-full{display:none;}

.rail-item[data-state="done"] .rail-btn{color:var(--off-white);}
.rail-item[data-state="done"] .rail-node{border-color:var(--gold);color:var(--gold-soft);}
.rail-item[data-state="done"] .rail-num{opacity:0;transform:scale(.6);}
.rail-item[data-state="done"] .i-check{opacity:1;transform:none;}
.rail-item[data-state="done"] .i-check path{stroke-dashoffset:0;}
.rail-item[data-state="current"] .rail-btn{color:var(--off-white);}
.rail-item[data-state="current"] .rail-node{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);box-shadow:0 0 0 4px rgba(184,149,80,.2);}
.rail-item[data-state="open"] .rail-btn{color:var(--text-dim);}
.rail-item[data-state="open"] .rail-node{border-color:rgba(244,243,240,.5);color:var(--off-white);}
.rail-item[data-state="locked"] .rail-btn,.rail-btn[aria-disabled="true"]{cursor:not-allowed;}
.rail-item[data-state="locked"] .rail-num{opacity:0;transform:scale(.6);}
.rail-item[data-state="locked"] .i-lock{opacity:.85;transform:none;}
@media (hover:hover){
  .rail-item:not([data-state="locked"]) .rail-btn:not([aria-disabled="true"]):hover{color:var(--gold-soft);}
  .rail-item:not([data-state="locked"]):not([data-state="current"]) .rail-btn:not([aria-disabled="true"]):hover .rail-node{border-color:var(--gold-soft);}
}
.rail-btn:focus-visible{box-shadow:none;}
.rail-btn:focus-visible .rail-node{box-shadow:var(--focus);}

.rail-tip{position:fixed;left:0;top:0;z-index:var(--z-toast);display:flex;align-items:center;gap:8px;max-width:min(300px,calc(100vw - 24px));
  padding:9px 12px;border-radius:10px;background:var(--off-white);color:#14151a;font-size:.8125rem;font-weight:600;line-height:1.3;
  pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--d2) var(--ease-quart),visibility 0s var(--d2);}
.rail-tip.is-on{opacity:1;visibility:visible;transition-delay:0s;}
.rail-tip .icon{width:15px;height:15px;}

@media (min-width:600px){
  .rail-btn{font-size:.8125rem;}
  .brand img{height:44px;}
}
@media (min-width:1100px){
  .top{grid-template-areas:"brand rail ctl";grid-template-columns:auto minmax(0,1fr) auto;column-gap:clamp(20px,3vw,48px);height:72px;padding-top:0;}
  .brand img{height:48px;}
  .rail-list{padding:0;align-items:center;}
  .rail-item{flex:1 1 auto;justify-content:flex-start;align-items:center;gap:10px;}
  .rail-item:first-child{flex:0 0 auto;}
  .rail-link{position:static;flex:1 1 12px;min-width:12px;}
  .rail-btn{flex-direction:row;gap:9px;font-size:.875rem;padding:0 2px;}
  .rail-node{width:26px;height:26px;font-size:.75rem;}
  .rail-node .icon{width:15px;height:15px;}
}
@media (min-width:1280px){
  .l-full{display:inline;}
  .l-short{display:none;}
}

/* ---------- The car ---------- */
.car{position:relative;}
.car-frame{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--radius);background:#050506;isolation:isolate;}
.car-layers,.car-view{position:absolute;inset:0;}
.car-view{opacity:0;transition:opacity var(--d3) var(--ease-quart);transform-origin:0 0;}
.car-view.is-on{opacity:1;}
/* The interior is framed on its side glass once the traced glass is read; until then it is held back, so it is
   never shown whole and then moved. */
.car-view:not([data-framed]){visibility:hidden;}
.car-view img,.car-view svg{position:absolute;inset:0;width:100%;height:100%;}
.car-view img{object-fit:cover;}
.car-film{fill:var(--film);opacity:var(--tint-alpha);}
.car-sheen{opacity:calc(var(--tint-on) * (.1 + var(--tint-alpha) * .22));}
.car-film,.car-sheen{transition:opacity var(--ms-film) var(--ease-quart);}
.is-dragging .car-film,.is-dragging .car-sheen{transition:none;}
/* The windshield is never tinted. A soft falloff on the cabin side keeps the eye on the side glass. */
.car[data-view="interior"] .car-frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(5,6,8,.55),rgba(5,6,8,0) 24%);}
.car-note{position:absolute;left:10px;bottom:10px;z-index:var(--z-raised);max-width:calc(100% - 178px);padding:3px 8px;border-radius:6px;background:rgba(7,8,10,.72);color:var(--off-white);font-size:.75rem;line-height:1.35;}
.car-note b{font-weight:500;color:var(--text-dim);}
/* The traced glass could not be read: the photograph shows and the film cannot. Said on the car, the way the note is. */
.car-alert{position:absolute;left:10px;top:10px;z-index:var(--z-raised);max-width:calc(100% - 20px);padding:3px 8px;border-radius:6px;background:rgba(7,8,10,.72);color:var(--off-white);font-size:.75rem;line-height:1.35;}
.car-toggle{position:absolute;right:10px;bottom:10px;z-index:var(--z-raised);display:flex;padding:3px;border-radius:10px;background:rgba(7,8,10,.72);}
.car-toggle button{min-height:38px;padding:0 12px;border:0;border-radius:7px;background:none;color:var(--text-dim);font-size:.8125rem;font-weight:600;cursor:pointer;transition:background-color var(--d2) var(--ease-quart),color var(--d2) var(--ease-quart);}
.car-toggle button[aria-pressed="true"]{background:var(--off-white);color:#111216;}
.car-sweep{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);}

/* ---------- Home ---------- */
.home{position:relative;min-height:100dvh;display:flex;flex-direction:column;}
.home-media{position:relative;height:min(133.34vw,62dvh);flex:none;}
.reel{position:absolute;inset:0;overflow:hidden;background:#0b0c0f;}
.reel-slide{position:absolute;inset:0;opacity:0;transition:opacity var(--ms-reel-fade) cubic-bezier(.4,0,.2,1);}
.reel-slide.is-on{opacity:1;}
.reel-slide img,.reel-slide video{width:100%;height:100%;object-fit:cover;object-position:var(--at,50% 50%);}
.reel-slide[data-fit="contain"] img,.reel-slide[data-fit="contain"] video{object-fit:contain;}
.reel-slide.is-on img,.reel-slide.is-on video,.reel-slide.is-leaving img,.reel-slide.is-leaving video{animation:drift 9s linear both;}
@keyframes drift{from{transform:scale(1.07);}to{transform:scale(1);}}
/* Media shown whole does not drift: scaled past its frame, its edges would be cut. */
.reel-slide[data-fit="contain"] img,.reel-slide[data-fit="contain"] video{animation:none;}
.reel-side{display:none;}
.home-media::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;background:linear-gradient(to top,var(--black) 4%,rgba(7,8,10,0));}
.reel-cap{display:none;}

.home-copy{position:relative;z-index:var(--z-raised);flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s4);margin-top:-64px;padding:0 var(--pad) max(20px,env(safe-area-inset-bottom));}
.home-lead{font-size:var(--fs-small);font-weight:600;color:var(--gold-soft);}
.home-h{font-size:var(--fs-h1);}
.home-sub{max-width:34ch;font-size:var(--fs-lead);color:var(--text-dim);text-wrap:pretty;}
.home-cta{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2);}
.home-cta .btn-main{width:100%;}
.home-facts{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:.8125rem;color:var(--text-mute);}
.home-facts span{display:inline-flex;align-items:center;gap:6px;}
.home-facts .icon{width:14px;height:14px;}

/* Returning visitor: their build is the hero. */
.home-build{padding:calc(var(--top-h-home,72px) + 4px) 0 0;}
.home-build .car-frame{border-radius:0;}
.home[data-state="resume"] .home-copy,.home[data-state="sent"] .home-copy{margin-top:0;padding-top:var(--s5);justify-content:flex-start;gap:var(--s4);}
.home[data-state="resume"] .home-h,.home[data-state="sent"] .home-h{font-size:clamp(1.625rem,1.1rem + 2.3vw,3.125rem);}
.resume-list{display:grid;gap:0;border-top:1px solid var(--line);}
.resume-list li{display:flex;justify-content:space-between;gap:var(--s4);padding:9px 0;border-bottom:1px solid var(--line);font-size:.9375rem;}
.resume-list .k{color:var(--text-dim);flex:none;}
.resume-list .v{font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere;}
.resume-progress{display:grid;gap:8px;}
.resume-steps{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.resume-steps i{height:4px;border-radius:2px;background:var(--line-strong);}
.resume-steps i.is-done{background:var(--gold);}
.resume-steps i.is-next{background:var(--off-white);}
.resume-progress p{font-size:var(--fs-small);color:var(--text-dim);}
.resume-progress b{color:var(--off-white);font-weight:600;}

@media (min-width:600px) and (max-width:1023px){
  .home-media{--mh:min(54dvh,600px);height:var(--mh);margin:92px var(--pad) 0;}
  .home-media::after{display:none;}
  .reel{border-radius:6px;}
  .reel-main{inset:0 0 0 auto;aspect-ratio:3 / 4;}
  .reel-side{display:block;inset:auto calc(var(--mh) * .75 - 44px) 9% auto;width:min(34%,230px);aspect-ratio:3 / 4;box-shadow:0 0 0 8px var(--black),0 40px 80px rgba(0,0,0,.6);}
  .reel-cap{display:block;position:absolute;font-size:.8125rem;color:var(--text-dim);white-space:nowrap;}
  .reel-cap--main{right:0;top:calc(100% + 10px);}
  .reel-cap--side{right:calc(var(--mh) * .75 + 10px);bottom:calc(9% - 30px);}
  .home-copy{margin-top:0;padding-top:48px;width:100%;align-items:flex-start;padding-bottom:40px;justify-content:flex-start;}
  .home-sub{max-width:44ch;}
  .tiles{grid-template-columns:repeat(3,1fr);}

  .sample{max-height:124px;}
  .home-cta{flex-direction:row;align-items:center;}
  .home-cta .btn-main{width:auto;min-width:280px;}
  .home-build{max-width:720px;margin-inline:auto;width:100%;padding-inline:var(--pad);}
  .home-build .car-frame{border-radius:var(--radius);}
  .resume-list,.resume-progress{width:100%;}
}
@media (min-width:1024px){
  .home{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;column-gap:clamp(32px,4vw,72px);
    max-width:1560px;margin-inline:auto;padding:96px var(--pad) 40px;}
  .home-copy{order:1;margin:0;padding:0;justify-content:center;gap:var(--s5);}
  .home-media{order:2;height:min(calc(100dvh - 176px),820px);}
  .home-media::after{display:none;}
  .reel{border-radius:6px;}
  .reel-main{inset:0 0 0 auto;aspect-ratio:3 / 4;}
  .reel-side{display:block;inset:auto auto 9% 0;width:min(36%,270px);aspect-ratio:3 / 4;box-shadow:0 0 0 8px var(--black),0 40px 80px rgba(0,0,0,.6);}
  .reel-cap{display:block;position:absolute;font-size:.8125rem;color:var(--text-dim);white-space:nowrap;}
  .reel-cap--main{right:0;top:calc(100% + 12px);}
  .reel-cap--side{left:0;bottom:calc(9% - 34px);}
  .home-sub{max-width:38ch;}
  .home-cta{flex-direction:row;align-items:center;gap:var(--s3);margin-top:var(--s3);}
  .home-cta .btn-main{width:auto;min-width:280px;}
  .home-facts{margin-top:var(--s4);}
  .home-build{order:2;padding:0;}
  .home-build .car-frame{border-radius:var(--radius);}
  .home[data-state="resume"] .home-copy,.home[data-state="sent"] .home-copy{padding-top:0;justify-content:center;gap:var(--s5);}
}

/* ---------- Flow shell ---------- */
.flow{display:flex;flex-direction:column;min-height:calc(100dvh - var(--top-h));}
.selector{min-width:0;padding:var(--s5) var(--pad) calc(104px + env(safe-area-inset-bottom));}
.stage-host{display:grid;grid-template-columns:minmax(0,1fr);}
.stage{grid-area:1 / 1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);align-content:start;}
.stage-head{display:grid;gap:6px;}
.stage-h{font-size:var(--fs-h2);}
.stage-h:focus-visible{box-shadow:none;}
.stage-sub{max-width:52ch;color:var(--text-dim);text-wrap:pretty;}
.stage-note{display:flex;gap:8px;align-items:flex-start;max-width:60ch;font-size:var(--fs-small);color:var(--text-dim);}
.stage-note .icon{width:16px;height:16px;margin-top:3px;}

.actions{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);display:flex;gap:10px;align-items:stretch;
  padding:28px var(--pad) calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--black) 68%,rgba(7,8,10,0));}
.actions .btn-main,.actions .btn-wa{flex:1;min-width:0;padding-inline:14px;white-space:normal;text-align:center;}
.actions .btn-back{flex:none;width:56px;padding:0;}
.actions .btn-back span{display:none;}

/* ---------- Panel: the car and the growing list ---------- */
.panel{position:sticky;top:var(--top-h);z-index:var(--z-panel);background:var(--black);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:var(--s3);align-items:center;padding:10px var(--pad);}
.panel-car{min-width:0;}
.panel .car-frame{border-radius:var(--radius-sm);}
.panel .car-toggle{display:none;}
.panel .car-note{left:6px;bottom:6px;max-width:calc(100% - 12px);padding:2px 6px;font-size:.6875rem;}
.panel .car-note b{display:none;}
.panel .car-alert{left:6px;top:6px;max-width:calc(100% - 12px);padding:2px 6px;font-size:.6875rem;}
.bay{aspect-ratio:16 / 9;border-radius:var(--radius-sm);border:1px dashed var(--line-strong);display:grid;place-items:center;
  background:radial-gradient(120% 90% at 78% 62%,rgba(184,149,80,.11),rgba(184,149,80,0) 60%),linear-gradient(#08090b,#0d0e11);}
.bay svg{width:44%;height:auto;color:rgba(244,243,240,.3);}
.bay-text{display:none;}

.panel-body{position:relative;min-width:0;display:grid;gap:4px;align-content:center;}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.panel-title{font-size:.875rem;font-stretch:var(--wide);font-weight:650;letter-spacing:-.005em;}
.panel-count{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:10px;background:var(--gold-wash);color:var(--gold-soft);font-size:.75rem;font-stretch:100%;font-weight:650;font-variant-numeric:tabular-nums;vertical-align:1px;}
.panel-all{display:inline-flex;align-items:center;gap:2px;font-size:.75rem;font-weight:600;color:var(--text-dim);}
.panel-all .icon{width:14px;height:14px;}
.panel-empty{font-size:.8125rem;line-height:1.4;color:var(--text-dim);}
.panel-open{position:absolute;inset:0;z-index:3;border:0;background:none;cursor:pointer;border-radius:8px;}
.panel-open:focus-visible{box-shadow:inset 0 0 0 2px var(--gold-soft);}

.rows{display:grid;}
.row{display:grid;grid-template-rows:1fr;}
.row-btn{min-height:0;overflow:hidden;display:flex;align-items:baseline;gap:10px;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;}
.row-label{flex:none;color:var(--text-dim);}
.row-value{min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row-value.is-new{animation:settle 1100ms var(--ease);}
@keyframes settle{from{color:var(--gold-soft);}}
.row-swatch{display:inline-block;width:11px;height:14px;margin-right:7px;border-radius:2px;vertical-align:-2px;background:#c9c6bf;position:relative;overflow:hidden;}
.row-swatch::after{content:"";position:absolute;inset:0;background:var(--film);opacity:var(--a);}
.row-edit{display:none;}
/* Once the request is sent a line opens nothing: it offers no "Edit" and says why when pressed (the rail's own bubble). */
.row-btn[aria-disabled="true"]{cursor:default;}
.rows .row-btn[aria-disabled="true"] .row-edit{display:none;}

/* Phone, compact: values only, the last three. The whole panel opens the sheet. */
.panel .row-label{display:none;}
.panel .row-btn{font-size:.8125rem;line-height:1.5;pointer-events:none;}
.panel .row:nth-last-child(n+4){display:none;}

/* Phone, focus (shade and confirmation): the car takes the full width. */
.panel[data-mode="focus"]{grid-template-columns:1fr;gap:0;padding:0;}
.panel[data-mode="focus"] .car-frame{border-radius:0;width:min(100%,calc(38dvh * 16 / 9));margin-inline:auto;}
.panel[data-mode="focus"] .car-toggle{display:flex;}
.panel[data-mode="focus"] .car-note{left:10px;bottom:10px;max-width:calc(100% - 178px);padding:3px 8px;font-size:.75rem;}
.panel[data-mode="focus"] .car-note b{display:inline;}
.panel[data-mode="focus"] .car-alert{left:10px;top:10px;max-width:calc(100% - 20px);padding:3px 8px;font-size:.75rem;}
.panel[data-mode="focus"] .panel-body{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:9px var(--pad);}
.panel[data-mode="focus"] .rows{justify-items:end;}
.panel[data-mode="focus"] .row:nth-last-child(n+2){display:none;}
.panel[data-mode="focus"] .panel-all span{display:none;}
.panel[data-mode="focus"] .panel-head{gap:4px;}
.panel[data-mode="focus"] .panel-empty{text-align:right;}

@media (min-width:600px) and (max-width:1023px){
  .panel{grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:var(--s5);padding-block:14px;}
  .panel .row-label{display:inline;min-width:9.5em;}
  .panel .row-btn{font-size:.875rem;line-height:1.7;pointer-events:auto;}
  .panel .row:nth-last-child(n+4){display:grid;}
  .panel-open,.panel-all{display:none;}
  .panel-title{font-size:1rem;}
  .panel[data-mode="focus"] .row:nth-last-child(n+2){display:grid;}
  .panel[data-mode="focus"] .panel-body{grid-template-columns:1fr;gap:4px;padding-block:12px;}
  .panel[data-mode="focus"] .rows{justify-items:stretch;grid-template-columns:1fr 1fr;column-gap:var(--s5);}
  .panel[data-mode="focus"] .panel-empty{text-align:left;}
  .panel[data-mode="focus"] .car-frame{border-radius:var(--radius);margin-top:12px;width:min(100%,calc(30dvh * 16 / 9));}
  .actions .btn-back{width:auto;padding:0 20px;}
  .actions .btn-back span{display:inline;}
  .actions{justify-content:space-between;}
  .actions .btn-main,.actions .btn-wa{flex:0 1 auto;min-width:280px;}
}

/* ---------- Desktop: selector left, sticky panel right ---------- */
@media (min-width:1024px){
  .flow{display:grid;grid-template-columns:minmax(0,1fr) min(54%,max(430px,calc((100dvh - 430px) * 1.7778)));align-items:start;
    --flow-pt:clamp(20px,max(4.5vh,calc(50dvh - 460px)),96px);
    column-gap:clamp(32px,4.5vw,84px);max-width:1560px;margin-inline:auto;padding:var(--flow-pt) var(--pad) 0;}
  .selector{order:1;padding:0;display:flex;flex-direction:column;min-height:calc(100dvh - var(--top-h) - var(--flow-pt));}
  .stage-host{margin-bottom:var(--s5);}
  .panel{order:2;top:calc(var(--top-h) + var(--flow-pt));display:block;padding:0 0 var(--s5);border:0;background:none;}
  .panel .car-frame{border-radius:var(--radius);}
  .panel .car-toggle{display:flex;}
  .panel .car-note{left:12px;bottom:12px;max-width:calc(100% - 190px);padding:3px 8px;font-size:.75rem;}
  .panel .car-note b{display:inline;}
  .panel .car-alert,.panel[data-mode="focus"] .car-alert{left:12px;top:12px;max-width:calc(100% - 24px);padding:3px 8px;font-size:.75rem;}
  .panel[data-mode="focus"] .car-frame{width:auto;border-radius:var(--radius);}
  .bay{border-radius:var(--radius);align-content:center;gap:var(--s3);padding:var(--s5);text-align:center;}
  .bay svg{width:min(42%,260px);}
  .bay-text{display:grid;gap:2px;}
  .bay-text b{font-size:var(--fs-h3);font-stretch:var(--wide);font-weight:650;}
  .bay-text span{color:var(--text-dim);font-size:var(--fs-small);}

  .panel-body,.panel[data-mode="focus"] .panel-body{display:block;padding:var(--s4) 0 0;}
  .panel-head{padding-bottom:var(--s2);}
  .panel-title{font-size:1.0625rem;}
  .panel-all,.panel-open{display:none;}
  .panel-empty,.panel[data-mode="focus"] .panel-empty{font-size:var(--fs-small);text-align:left;padding-top:2px;}
  .rows,.panel[data-mode="focus"] .rows{border-top:1px solid var(--line);justify-items:stretch;}
  .panel .row,.panel[data-mode="focus"] .row,.panel .row:nth-last-child(n+4),.panel[data-mode="focus"] .row:nth-last-child(n+2){display:grid;border-bottom:1px solid var(--line);}
  .panel .row-btn{pointer-events:auto;align-items:center;font-size:.9375rem;line-height:1.4;padding:0 4px;border-radius:0;transition:background-color var(--d2) var(--ease-quart);}
  .panel .row-btn > span{padding-block:10px;}
  .panel .row-label{display:inline;width:8.5em;}
  .panel .row-value{flex:1;}
  .panel .row-edit{display:inline-flex;align-items:center;gap:5px;font-size:.8125rem;font-weight:600;color:var(--text-mute);transition:color var(--d2) var(--ease-quart);}
  .panel .row-edit .icon{width:14px;height:14px;}
  .panel .row-btn:hover{background:rgba(244,243,240,.04);}
  .panel .row-btn:hover .row-edit,.panel .row-btn:focus-visible .row-edit{color:var(--gold-soft);}
  .panel .row-btn:focus-visible{box-shadow:inset 0 0 0 2px var(--gold-soft);}

  .actions{position:sticky;bottom:0;margin-top:auto;padding:var(--s4) 0 var(--s5);background:var(--black);border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:var(--s4);}
  .actions .btn-back{width:auto;padding:0 20px;}
  .actions .btn-back span{display:inline;}
  .actions .btn-main,.actions .btn-wa{flex:0 1 auto;min-width:min(300px,60%);white-space:nowrap;}
  .stage{gap:var(--s6);}
  .stage-head{gap:8px;}
}
@media (min-width:1024px) and (max-height:800px){
  .tile{aspect-ratio:2.3 / 1;}
  .panel .row-btn > span{padding-block:7px;}
  .stage{gap:var(--s5);}
  .actions{padding:var(--s3) 0 var(--s4);}
  .stage-host{margin-bottom:var(--s4);}
}

/* ---------- Stage: body style ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tile{position:relative;display:block;aspect-ratio:2 / 1;padding:0;border:0;border-radius:12px;overflow:hidden;background:#050506;cursor:pointer;isolation:isolate;
  transition:transform var(--d1) var(--ease-quart),opacity var(--d2) var(--ease-quart),box-shadow var(--d2) var(--ease-quart);}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform var(--d4) var(--ease);}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none;}
.tile-name{position:absolute;left:12px;top:9px;z-index:1;font-size:.9375rem;font-stretch:var(--wide);font-weight:650;letter-spacing:-.005em;line-height:1.2;}
.tile-check{position:absolute;right:9px;top:9px;z-index:1;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--gold);color:var(--gold-ink);opacity:0;transform:scale(.7);transition:opacity var(--d2) var(--ease-quart),transform var(--d3) var(--ease);}
.tile-check .icon{width:15px;height:15px;}
.tile:active{transform:scale(.98);}
.tile[aria-checked="true"]{box-shadow:0 0 0 2px var(--black),0 0 0 3.5px var(--gold);}
.tile[aria-checked="true"] .tile-check{opacity:1;transform:none;}
.tiles.has-choice .tile[aria-checked="false"]{opacity:.62;}
.tile:focus-visible{box-shadow:var(--focus);border-radius:12px;}
@media (hover:hover){
  .tile:hover img{transform:scale(1.045);}
  .tiles.has-choice .tile[aria-checked="false"]:hover{opacity:1;}
}
@media (min-width:1024px){.tiles{gap:14px;}.tile-name{left:16px;top:13px;font-size:1.125rem;}}

/* ---------- Stage: shade ---------- */
.readout{display:grid;gap:6px;}
.readout-main{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;}
.readout-name{font-size:clamp(2.125rem,1.6rem + 2.4vw,3.5rem);}
.readout-num{display:inline-flex;align-items:baseline;gap:2px;font-size:clamp(1.625rem,1.3rem + 1.5vw,2.5rem);font-weight:600;line-height:1;color:var(--gold-soft);font-variant-numeric:tabular-nums;}
.readout-num small{margin-left:8px;font-size:.8125rem;font-weight:500;color:var(--text-dim);}
.readout-line{color:var(--text-dim);min-height:1.55em;}
.readout.is-empty .readout-name{color:var(--text-dim);}
.readout.is-empty .readout-num{display:none;}

.strip{position:relative;container-type:inline-size;padding-top:22px;--col:20%;}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);}
.swatches li{display:flex;flex-direction:column;align-items:center;padding:0 4px;color:var(--text-dim);font-size:.8125rem;line-height:1.35;transition:color var(--d2) var(--ease-quart);}
.swatches b{margin-top:10px;color:var(--off-white);font-size:1.25rem;font-stretch:var(--wide);font-weight:650;line-height:1.1;font-variant-numeric:tabular-nums;}
.sample{position:relative;width:100%;aspect-ratio:4 / 5;max-height:150px;border-radius:7px;overflow:hidden;background:#c9c6bf;
  transition:transform var(--d3) var(--ease),box-shadow var(--d3) var(--ease);}
.sample::before{content:"";position:absolute;inset:0;background:var(--film);opacity:var(--a);}
.sample::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.22) 0 18%,rgba(255,255,255,0) 42%);}
.swatches li.is-active{color:var(--off-white);}
.swatches li.is-active .sample{transform:translateY(-8px);box-shadow:0 0 0 1.5px var(--gold),0 16px 28px rgba(0,0,0,.55);}
.strip-pointer{position:absolute;top:0;width:2px;height:14px;margin-left:-1px;border-radius:1px;background:var(--gold);
  left:calc(var(--col) / 2 + var(--pos,2) / 4 * (100% - var(--col)));transition:opacity var(--d2) var(--ease-quart);}
.strip-pointer::before{content:"";position:absolute;top:-5px;left:-3.5px;width:9px;height:9px;border-radius:50%;background:var(--gold);}
.strip.is-settling .strip-pointer{transition:left var(--d3) var(--ease),opacity var(--d2) var(--ease-quart);}
.strip.is-empty .strip-pointer{opacity:0;}
.strip-range{position:absolute;inset:0;width:100%;height:100%;margin:0;overflow:hidden;opacity:0;cursor:grab;touch-action:pan-y;-webkit-appearance:none;appearance:none;background:none;}
.strip-range:active{cursor:grabbing;}
.strip-range::-webkit-slider-runnable-track{height:100%;}
.strip-range::-webkit-slider-thumb{-webkit-appearance:none;width:20cqi;height:100%;}
.strip-range::-moz-range-thumb{width:20cqi;height:100%;border:0;}
.strip:has(.strip-range:focus-visible) .is-active .sample{box-shadow:var(--focus),0 16px 28px rgba(0,0,0,.55);}
.strip.is-empty:has(.strip-range:focus-visible){box-shadow:var(--focus);border-radius:10px;}
@media (hover:hover){.strip:hover li:not(.is-active) .sample{box-shadow:0 0 0 1px var(--line-strong);}}
@media (max-width:599px){
  .stage--shade{gap:var(--s4);}
  .sample{aspect-ratio:5 / 6;}
  .swatches b{margin-top:8px;font-size:1.125rem;}
  .stage--shade .stage-note{display:none;}
}

/* ---------- Stage: material (class names keep the stage's id, "service") ---------- */
.services{display:grid;gap:10px;}
.svc{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s4);width:100%;padding:14px var(--s4) 14px 14px;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--charcoal);
  transition:border-color var(--d2) var(--ease-quart),background-color var(--d2) var(--ease-quart),transform var(--d1) var(--ease-quart);}
.svc:active{transform:scale(.99);}
.svc-art{position:relative;width:64px;height:64px;border-radius:9px;overflow:hidden;background:#c9c6bf;flex:none;}
.svc-art::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.3) 0 14%,rgba(255,255,255,0) 40%);}
.svc-art--nano{background:radial-gradient(rgba(6,8,10,.55) 1px,transparent 1.4px) 0 0/6px 6px,linear-gradient(135deg,#8f9299,#3a3d44);}
.svc-art--security{background:linear-gradient(135deg,#d6d3cc,#aeb0b4);}
.svc-art--security::before{content:"";position:absolute;inset:9px;border-radius:5px;border:1.5px solid rgba(6,8,10,.5);box-shadow:5px 5px 0 -1.5px rgba(6,8,10,.16),5px 5px 0 0 rgba(6,8,10,.42);}
.svc-art--level{background:linear-gradient(90deg,rgba(6,8,10,.28) 0 20%,rgba(6,8,10,.45) 20% 40%,rgba(6,8,10,.6) 40% 60%,rgba(6,8,10,.74) 60% 80%,rgba(6,8,10,.88) 80%),#c9c6bf;}
.svc-name{display:block;font-size:var(--fs-h3);font-stretch:var(--wide);font-weight:650;letter-spacing:-.005em;line-height:1.2;}
.svc-line{display:block;margin-top:3px;color:var(--text-dim);font-size:.9375rem;line-height:1.4;}
.svc-mark{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--line-strong);color:var(--gold-ink);transition:background-color var(--d2) var(--ease-quart),border-color var(--d2) var(--ease-quart);}
.svc-mark .icon{width:14px;height:14px;opacity:0;transform:scale(.6);transition:opacity var(--d2) var(--ease-quart),transform var(--d3) var(--ease);}
.svc[aria-checked="true"]{border-color:var(--gold);background:linear-gradient(var(--gold-wash),var(--gold-wash)),var(--charcoal);}
.svc[aria-checked="true"] .svc-mark{background:var(--gold);border-color:var(--gold);}
.svc[aria-checked="true"] .svc-mark .icon{opacity:1;transform:none;}
.svc:focus-visible{box-shadow:var(--focus);border-radius:var(--radius);}
@media (hover:hover){.svc:hover{border-color:var(--line-strong);background:var(--charcoal-2);}.svc[aria-checked="true"]:hover{border-color:var(--gold-soft);background:linear-gradient(var(--gold-wash),var(--gold-wash)),var(--charcoal);}}
@media (min-width:1024px){.svc{padding:1.25rem 1.5rem 1.25rem 1.25rem;gap:var(--s5);}.svc-art{width:5rem;height:5rem;}.services{gap:12px;}}
/* What the prototype never drew, on the shop's own data: the price the shop set for a material on this body style,
   or the note that it is to be confirmed. */
.svc-price{display:block;margin-top:4px;font-weight:650;color:var(--gold-soft);font-variant-numeric:tabular-nums;}
.svc-price--pending{font-size:var(--fs-small);font-weight:400;color:var(--text-mute);}

/* ---------- Stage: vehicle (year, make, model) ---------- */
.ymm{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:8px;}
.ymm-slot{display:grid;gap:1px;min-width:0;padding:9px 12px 10px;text-align:left;cursor:pointer;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--charcoal);
  transition:border-color var(--d2) var(--ease-quart),background-color var(--d2) var(--ease-quart);}
.ymm-k{font-size:.75rem;color:var(--text-dim);}
.ymm-v{font-size:var(--fs-h3);font-stretch:var(--wide);font-weight:650;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ymm-slot.is-empty .ymm-v{color:var(--text-mute);font-weight:500;}
.ymm-slot[aria-current="true"]{border-color:var(--gold);background:linear-gradient(var(--gold-wash),var(--gold-wash)),var(--charcoal);}
.ymm-slot:disabled{cursor:default;opacity:.55;}
.ymm-slot:focus-visible{box-shadow:var(--focus);border-radius:var(--radius-sm);}
.pick-host{display:grid;gap:var(--s4);}
.pick{display:grid;gap:var(--s3);}
.pick--done:empty{display:none;}
.pick-groups{display:grid;gap:var(--s4);}
.pick-group{display:grid;gap:8px;}
.opt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.opt-grid--3{grid-template-columns:repeat(3,1fr);}
.opt-grid--2{grid-template-columns:repeat(2,1fr);}
.opt{min-height:3rem;padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius-sm);background:none;cursor:pointer;font-weight:600;font-size:.9375rem;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
  transition:border-color var(--d2) var(--ease-quart),background-color var(--d2) var(--ease-quart),color var(--d2) var(--ease-quart),transform var(--d1) var(--ease-quart);}
.opt small{display:block;margin-top:1px;font-size:.75rem;font-weight:500;color:var(--text-dim);}
.opt:active{transform:scale(.97);}
.opt[aria-pressed="true"]{background:var(--off-white);border-color:var(--off-white);color:#111216;}
.opt[aria-pressed="true"] small{color:#44474e;}
.opt--use{border-style:dashed;color:var(--gold-soft);}
@media (hover:hover){.opt:hover{border-color:var(--gold);}}
.field{display:grid;gap:6px;}
.field-l{font-size:var(--fs-small);font-weight:600;color:var(--text-dim);}
.input{width:100%;min-height:3.25rem;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--charcoal);font-size:1rem;color:var(--off-white);
  transition:border-color var(--d2) var(--ease-quart),box-shadow var(--d2) var(--ease-quart);}
.input::placeholder{color:var(--text-mute);opacity:1;}
.input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,149,80,.22);}
.input[aria-invalid="true"]{border-color:var(--danger);}
.field-err{font-size:var(--fs-small);color:var(--danger);}
/* BOOK-3: the account note under the contact fields. */
.details-account p{margin:0;font-size:var(--fs-small);color:var(--text-mute);}
.details-account a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.input-wrap{position:relative;}
.input-wrap .icon{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--text-mute);pointer-events:none;}
.input-wrap .input{padding-left:42px;}
.pick-h{font-size:var(--fs-small);font-weight:600;color:var(--text-dim);}
.pick-none{font-size:var(--fs-small);color:var(--text-dim);}
.mismatch{display:grid;gap:var(--s3);padding:var(--s4);border:1px solid var(--gold);border-radius:var(--radius);background:var(--gold-wash);}
.mismatch p{font-weight:500;}
.mismatch div{display:flex;flex-wrap:wrap;gap:8px;}
.mismatch .btn{min-height:46px;padding:0 16px;font-size:.9375rem;}
.ymm-done{display:flex;gap:8px;align-items:center;color:var(--text-dim);font-size:var(--fs-small);}
.ymm-done .icon{color:var(--gold-soft);width:18px;height:18px;}
@media (min-width:1024px){.opt-grid{gap:10px;}.opt{min-height:3.125rem;}.ymm{gap:10px;}.ymm-slot{padding:12px 16px 13px;}}

/* ---------- Stage: day and time ---------- */
.when{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);}
.when-h{margin-bottom:10px;font-size:var(--fs-small);font-weight:600;color:var(--text-dim);}
.days{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:calc(var(--pad) * -1);padding:3px var(--pad) 6px;scrollbar-width:none;}
.days::-webkit-scrollbar{display:none;}
.day{flex:none;width:62px;min-height:74px;display:grid;justify-items:center;align-content:center;gap:1px;scroll-snap-align:start;scroll-margin-left:var(--pad);
  border:1px solid var(--line);border-radius:var(--radius-sm);background:none;cursor:pointer;
  transition:border-color var(--d2) var(--ease-quart),background-color var(--d2) var(--ease-quart),color var(--d2) var(--ease-quart),transform var(--d1) var(--ease-quart);}
.day:active{transform:scale(.96);}
.day-wd{font-size:.75rem;color:var(--text-dim);}
.day-num{font-size:1.3125rem;font-stretch:var(--wide);font-weight:650;line-height:1.1;font-variant-numeric:tabular-nums;}
.day-mo{font-size:.75rem;color:var(--text-dim);}
.day.is-view{border-color:rgba(244,243,240,.62);}
.day[aria-checked="true"]{background:var(--off-white);border-color:var(--off-white);color:#111216;}
.day[aria-checked="true"] .day-wd,.day[aria-checked="true"] .day-mo{color:#44474e;}
.times{display:grid;gap:var(--s3);}
.time-group{display:grid;grid-template-columns:1fr;gap:6px;}
.time-h{font-size:.8125rem;color:var(--text-dim);}
.time-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.time{position:relative;min-height:3rem;padding:0 4px;border:1px solid var(--line);border-radius:var(--radius-sm);background:none;cursor:pointer;font-size:.9375rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:border-color var(--d2) var(--ease-quart),background-color var(--d2) var(--ease-quart),color var(--d2) var(--ease-quart),transform var(--d1) var(--ease-quart);}
.time:active{transform:scale(.96);}
.time.is-suggested{border-color:var(--gold);border-style:dashed;color:var(--gold-soft);}
.time[aria-checked="true"]{background:var(--gold);border-color:var(--gold);border-style:solid;color:var(--gold-ink);}
@media (hover:hover){.day:not([aria-checked="true"]):hover,.time:not([aria-checked="true"]):hover{border-color:var(--gold);}}
.when-first{display:flex;gap:8px;align-items:flex-start;margin:-2px 0 12px;font-size:var(--fs-small);color:var(--text-dim);}
.when-first .icon{width:16px;height:16px;margin-top:3px;color:var(--gold-soft);}
@media (min-width:1024px){
  .days{display:grid;grid-template-columns:repeat(7,1fr);overflow:visible;margin:0;padding:0;gap:8px;}
  .day{width:auto;min-height:4.5rem;}
  .time-group{grid-template-columns:7.5em minmax(0,1fr);align-items:center;}
  .time-h{font-size:var(--fs-small);}
}
@media (min-width:600px) and (max-width:1023px){
  .days{display:grid;grid-template-columns:repeat(7,1fr);overflow:visible;margin:0;padding:0;}
  .day{width:auto;}
  .time-group{grid-template-columns:7.5em minmax(0,1fr);align-items:center;}
}

/* ---------- Stage: details ---------- */
.details{display:grid;gap:var(--s4);max-width:520px;}
.steps-next{display:grid;gap:10px;max-width:520px;padding-top:var(--s4);border-top:1px solid var(--line);}
.steps-next h2{font-size:var(--fs-small);font-weight:600;color:var(--text-dim);}
.steps-next ol{display:grid;gap:8px;counter-reset:n;}
.steps-next li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:baseline;counter-increment:n;}
.steps-next li::before{content:counter(n);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);font-size:.75rem;font-weight:650;color:var(--text-dim);}

/* ---------- Stage: confirmation ---------- */
.stage--confirm{gap:var(--s5);}
.done-mark{width:56px;height:56px;color:var(--gold-soft);}
.done-mark svg{width:100%;height:100%;overflow:visible;}
.done-mark circle,.done-mark path{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.conf-meta{display:grid;border-top:1px solid var(--line);max-width:560px;}
.conf-meta div{display:flex;justify-content:space-between;gap:var(--s4);padding:11px 0;border-bottom:1px solid var(--line);font-size:.9375rem;}
.conf-meta dt{color:var(--text-dim);flex:none;}
.conf-meta dd{font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere;}
.conf-meta .mono{font-stretch:var(--wide);letter-spacing:.04em;}
.conf-shop{display:grid;gap:2px;font-style:normal;font-size:var(--fs-small);color:var(--text-dim);}
.conf-shop b{color:var(--off-white);font-weight:600;}
.conf-done{justify-self:start;min-height:2.75rem;padding:0 1.125rem;border-color:var(--line-strong);color:var(--off-white);font-weight:600;}
/* Where the referral card arrives (referral-card.js, style.css): the last thing of the stage, and nothing while it is empty. */
.conf-referral:empty{display:none;}
@media (min-width:600px){.conf-only-phone{display:none !important;}}
@media (min-width:1024px){.done-mark{width:68px;height:68px;}}

/* ---------- Stages on the shop's own data: the wait, the failure with "Retry", a choice that was dropped ----------
   The note and the error colour are the prototype's (.stage-note, the colour of a field error). */
.stage-live{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);}
.stage-fail{display:grid;gap:var(--s3);justify-items:start;}
.stage-fail .btn{min-height:46px;padding:0 16px;font-size:.9375rem;}
.stage-note--err{color:var(--danger);}
.stage-notice{display:flex;gap:8px;align-items:flex-start;max-width:60ch;padding:var(--s3) var(--s4);border:1px solid var(--gold);border-radius:var(--radius);background:var(--gold-wash);font-weight:500;}
.stage-notice .icon{width:16px;height:16px;margin-top:4px;color:var(--gold-soft);}

/* ---------- Sheet (phone: the full "Your tint") and menu drawer ---------- */
:where(.cfg) dialog{border:0;padding:0;color:inherit;background:var(--charcoal);max-width:none;max-height:none;}
:where(.cfg) dialog::backdrop{background:rgba(3,4,5,.72);opacity:1;transition:opacity 420ms cubic-bezier(.25,1,.5,1);}
@starting-style{:where(.cfg) dialog[open]::backdrop{opacity:0;}}
:where(.cfg) dialog.is-closing::backdrop{opacity:0;}
.sheet{position:fixed;inset:auto 0 0 0;width:100%;margin:0;border-radius:20px 20px 0 0;max-height:88dvh;overflow:auto;padding:0 0 max(18px,env(safe-area-inset-bottom));}
.sheet-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px var(--pad) 10px;background:var(--charcoal);}
.sheet-title{font-size:1.25rem;}
.sheet .car{margin:0 var(--pad);}
.sheet .rows{margin:var(--s3) var(--pad) 0;border-top:1px solid var(--line);}
.sheet .row{border-bottom:1px solid var(--line);}
.sheet .row-btn,.conf-rows .row-btn{align-items:center;min-height:52px;font-size:.9375rem;}
.sheet .row-label,.conf-rows .row-label{width:7.2em;}
.sheet .row-value,.conf-rows .row-value{flex:1;white-space:normal;}
.sheet .row-edit{display:inline-flex;align-items:center;gap:5px;font-size:.8125rem;font-weight:600;color:var(--gold-soft);}
.sheet .row-edit .icon{width:14px;height:14px;}
.sheet-hint{margin:var(--s3) var(--pad) 0;font-size:var(--fs-small);color:var(--text-dim);}
.conf-rows{border-top:1px solid var(--line);}
.conf-rows .row{border-bottom:1px solid var(--line);}
.conf-rows .row-btn{pointer-events:none;}

.drawer{position:fixed;inset:0 0 0 auto;width:min(440px,100%);height:100dvh;margin:0;overflow:auto;padding:0 0 32px;border-left:1px solid var(--line);}
.drawer-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--charcoal);}
.drawer-title{font-size:1.25rem;}
.drawer-act{display:flex;align-items:center;gap:10px;margin:0 20px 6px;padding:12px 0;font-weight:600;text-decoration:none;border:0;background:none;cursor:pointer;color:var(--text-dim);}
.drawer-foot{margin-top:6px;padding-top:6px;border-top:1px solid var(--line);}
@media (hover:hover){.drawer-act:hover{color:var(--off-white);}}

/* The site's own sections inside the menu (menu.js): one open at a time. Their content is the host page's, moved as it
   is, so style.css still draws it; that stylesheet lays it out for a whole page, by the width of the viewport, and
   what follows fits it to a column 440px wide at most. The name of a section is its summary, so its own heading is
   not shown a second time. */
.acc{border-top:1px solid var(--line);}
.acc + .drawer-foot{margin-top:0;}
.acc > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:0 20px;cursor:pointer;list-style:none;font-size:1.125rem;font-stretch:var(--wide);font-weight:650;}
.acc > summary::-webkit-details-marker{display:none;}
.acc > summary .icon{color:var(--text-dim);transition:transform var(--d3) var(--ease);}
.acc[open] > summary .icon{transform:rotate(180deg);}
.acc > summary:focus-visible{box-shadow:inset 0 0 0 2px var(--gold-soft);border-radius:0;}
.acc-body{padding:0 20px 20px;color:var(--text-dim);font-size:.9375rem;}
.acc-body :is(b,strong){color:var(--off-white);}
.acc-body :is(.section,footer){padding:0;border:0;background:none;}
.acc-body .section + .section{margin-top:var(--s5);}
.acc-body .container{max-width:none;padding:0;}
.acc-body .section h2{display:none;}
.acc-body .section .lead,.acc-body .gallery-note{max-width:none;margin:0 0 var(--s4);text-align:left;}
.acc-body :is(.grid3,.process,.zone,.contact-grid,.foot-grid){grid-template-columns:1fr;gap:var(--s3);}
.acc-body .contact-grid{max-width:none;}
.acc-body :is(.service-card,.step,.zone-card,.contact-card,.scale-wrap){padding:var(--s4);}
.acc-body .service-card p{margin:4px 0 0;}
.acc-body .scale-wrap{margin-top:var(--s4);}
.acc-body .gallery{grid-template-columns:repeat(2,1fr);gap:8px;}
.acc-body .gallery :is(img,video){height:150px;}
.acc-body .map-frame,.acc-body .map-frame iframe{min-height:240px;}
.acc-body .faq-q{padding:14px 0;}
.acc-body .faq-a{padding:0 0 14px;}
.acc-body footer{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);}
.acc-body .foot-grid > div{display:grid;gap:4px;}
.acc-body .foot-bottom{margin-top:var(--s4);padding-top:var(--s3);text-align:left;}
.acc-body .icon{display:inline-block;}

/* ---------- The page that hosts the configurator (index.html) ----------
   Until the configurator has mounted the page is held back, and for 2.5 s at most (the script in its head): after
   that the plain page shows. Once it has mounted, the plain page gives way to it. */
html.cfg-on:not(.cfg-ready) body{visibility:hidden;}
html.cfg-ready body > :is(.skip-link,header.nav,main,footer){display:none;}
/* The announcement bar of the referral program (#refBar, style.css) stands above the configurator while it shows
   (html[data-ref-bar], with its height in --ref-bar-h: referral-bar.js). The home's header is laid over the top of
   the configurator, not of the page, and the home screen gives up exactly the bar's height, so its primary action
   stays where it was. While a stage is on screen the bar is out of the way: no stage loses room to it. */
html[data-ref-bar] #configurator{position:relative;}
html[data-ref-bar][data-route="home"] :is(#configurator,.home){min-height:calc(100dvh - var(--ref-bar-h,0px));}
html[data-route="flow"] .ref-bar{display:none;}
/* The home's media is what gives: on a phone and on a desktop its height is measured against the window, and the
   window is shorter by the bar. */
@media (max-width:599px){
  html[data-ref-bar][data-route="home"] .home-media{height:min(133.34vw,calc(62dvh - var(--ref-bar-h,0px)));}
}
@media (min-width:1024px){
  html[data-ref-bar][data-route="home"] .home-media{height:min(calc(100dvh - 176px - var(--ref-bar-h,0px)),820px);}
}

.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:var(--z-toast);translate:-50% 0;max-width:calc(100vw - 32px);padding:11px 16px;border-radius:10px;
  background:var(--off-white);color:#14151a;font-size:.875rem;font-weight:600;text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--d2) var(--ease-quart),visibility 0s var(--d2);}
.toast.is-on{opacity:1;visibility:visible;transition-delay:0s;}

/* ---------- Travelling selections ---------- */
.ghost-photo{position:fixed;left:0;top:0;z-index:var(--z-ghost);margin:0;max-width:none;object-fit:cover;pointer-events:none;transform-origin:0 0;will-change:transform,clip-path;}
.ghost-label{position:fixed;left:0;top:0;z-index:var(--z-ghost);padding:5px 10px;border-radius:8px;border:1px solid var(--gold);background:#16140f;color:var(--gold-soft);
  font-size:.875rem;font-weight:650;line-height:1.3;white-space:nowrap;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.5);will-change:transform;}

/* ---------- Reduced motion ----------
   Nothing moves, scales, clips or blurs. The one transition left is the home media's crossfade: opacity only, 150 ms. */
@media (prefers-reduced-motion:reduce){
  :where(.cfg) *,:where(.cfg) *::before,:where(.cfg) *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;transition-delay:0s !important;scroll-behavior:auto !important;}
  :where(.cfg) dialog::backdrop{transition:none !important;}
  .reel-slide{transition:opacity var(--ms-reduced-fade) linear !important;}
  .reel-slide img,.reel-slide video{animation:none !important;}
}

/* ---------- Additions ---------- */
@media (max-width:599px){
  .home[data-state="resume"] .home-cta,.home[data-state="sent"] .home-cta{position:sticky;bottom:0;z-index:var(--z-raised);margin:auto calc(var(--pad) * -1) 0;padding:24px var(--pad) 4px;background:linear-gradient(to top,var(--black) 72%,rgba(7,8,10,0));}
  .home[data-state="resume"] .home-copy,.home[data-state="sent"] .home-copy{padding-bottom:max(10px,env(safe-area-inset-bottom));}
}
.stage-attn{animation:attn 700ms var(--ease);}
@keyframes attn{0%{box-shadow:0 0 0 0 rgba(212,184,118,.0);}30%{box-shadow:0 0 0 3px rgba(212,184,118,.55);}100%{box-shadow:0 0 0 10px rgba(212,184,118,0);}}

/* Large desktops: scale the type and controls up instead of leaving the canvas empty. */
@media (min-width:1700px) and (min-height:960px){
  html[data-route]{font-size:112.5%;}
  .flow,.home{max-width:1760px;}
  .top{height:80px;}
  .brand img{height:54px;}
}

@media (min-width:1024px) and (min-height:960px){
  .sample{aspect-ratio:2 / 3;max-height:none;}
  .svc{padding-block:1.75rem;}
  .services{gap:16px;}
  .tiles{gap:18px;}
}

/* Desktop: captions and labels never drop below 13px, running text stays at 14px or more. */
@media (min-width:1024px){
  .car-note,.panel .car-note,.car-alert,.panel .car-alert,.panel[data-mode="focus"] .car-alert{font-size:.8125rem;}
  .ymm-k,.day-wd,.day-mo,.opt small,.panel-count{font-size:.8125rem;}
  .row-edit,.panel .row-edit,.home-facts,.reel-cap,.time-h{font-size:.875rem;}
}
@media (min-width:600px) and (max-width:1023px){.sample{max-height:128px;aspect-ratio:1 / 1;}}
@media (min-width:600px) and (max-width:1023px){
  .tiles{grid-template-columns:repeat(3,1fr);}
  .stage--shade .stage-note{display:none;}
}
@media (min-width:600px) and (max-width:1023px){.tile{aspect-ratio:16 / 10;}}

/* ---------- Material effects on the glass (markup and motion: car-effects.js) ----------
   <html data-fx> names the effect of the material whose mark rests on every car (effects.js, FX). Drawn with the traced window paths only; the
   windshield and the chosen darkness are never touched. */
.car-fx{pointer-events:none;}
.car-fx--cool{mix-blend-mode:color;opacity:0;transition:opacity 700ms var(--ease-quart);}
.car-fx--warm{mix-blend-mode:screen;opacity:0;}
.fx-band{opacity:0;transform-box:fill-box;transform-origin:0 0;}
.fx-glint{transform-box:fill-box;transform-origin:0 0;transform:skewX(-20deg);}
.fx-gloss,.fx-edge,.fx-ladder{opacity:0;transition:opacity 600ms var(--ease-quart);}
.fx-line path{fill:none;stroke:rgba(255,255,255,.66);stroke-width:1.3px;vector-effect:non-scaling-stroke;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;}
.fx-bevel path{fill:none;stroke:rgba(255,255,255,.17);stroke-width:7px;stroke-linejoin:round;}
.fx-ladder rect{fill:var(--off-white);opacity:.38;}
/* Nano Ceramic: the light through the side glass reads a touch cooler (interior), a clean glint (exterior). */
[data-fx="nano"] .car-fx--cool{opacity:var(--fx-cool);}
[data-fx="nano"] .fx-gloss{opacity:1;}
/* 'security' (Conform): a crisp, slightly thicker edge around each pane. */
[data-fx="security"] .fx-edge{opacity:1;}
/* 'level' (Standard): the five-step mark, the chosen step in gold. */
[data-fx="level"] .fx-ladder[data-placed]{opacity:.92;}
[data-shade="50"] .fx-ladder rect:nth-child(1),[data-shade="35"] .fx-ladder rect:nth-child(2),[data-shade="20"] .fx-ladder rect:nth-child(3),
[data-shade="15"] .fx-ladder rect:nth-child(4),[data-shade="5"] .fx-ladder rect:nth-child(5){fill:var(--gold-soft);opacity:1;}

/* The matching cue on each material option. */
.svc{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
.svc.is-previewing{border-color:var(--gold);border-style:dashed;}
.svc-art--nano{background:radial-gradient(95% 95% at 10% 8%,rgba(255,178,88,.96),rgba(255,160,70,0) 60%),linear-gradient(135deg,#5a6a82,#222a36);}
.svc-art--nano::after{background:linear-gradient(120deg,rgba(255,255,255,0) 45%,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 55%);}
.svc-art--security{background:linear-gradient(135deg,#5d6169,#282b31);}
.svc-art--security::before{inset:10px;border:1.5px solid rgba(255,255,255,.86);box-shadow:0 0 0 3.5px rgba(255,255,255,.15);}
.svc-art--security::after{background:linear-gradient(120deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.2) 44%,rgba(255,255,255,0) 54%);}