/* Lowlight Tint & Detail. One idea: control the light.
   Palette: studio black + graphite (neutrals), amber (the one accent).
   Shapes: panels and images 20px, buttons and chips full pill. Spacing steps 8/16/24/40/64/104. */

@font-face {
  font-family: "Unbounded";
  src: url("/concepts/lowlight-tint-detail/fonts/unbounded-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/concepts/lowlight-tint-detail/fonts/geist-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --bg: #0b0c0e;
  --g1: #141619;
  --g2: #24272c;
  --fg: #ecebe6;
  --mut: #9b9ea4;
  --amber: #f0a43a;
  --on-amber: #17120a;
  --r: 20px;
  --pad: clamp(20px, 4.2vw, 56px);
  --max: 1320px;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --text: "Geist", "Segoe UI", system-ui, sans-serif;

  --cx-ink: #111214;
  --cx-paper: #f3f2ee;
  --cx-accent: #2a2d32;
  --cx-on-accent: #f3f2ee;
  --cx-phone: #050607;
  --cx-in: #e2e0da;
  --cx-in-ink: #111214;
  --cx-font: var(--text);
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(30px, 4.2vw, 56px); line-height: 1.04; max-width: 20ch; }
h3 { font-size: 18px; line-height: 1.25; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.lede { color: var(--mut); max-width: 52ch; margin-top: 20px; font-size: 18px; }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* Buttons: full pill, amber. The trailing arrow sits in its own circle. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 6px 6px 6px 24px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--on-amber);
  font: 600 16px/1 var(--text);
  text-decoration: none;
  transition: transform .5s var(--ease), background .3s var(--ease);
}
.btn i {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(23, 18, 10, .12);
  font-style: normal;
  transition: transform .5s var(--ease);
}
.btn:hover { background: #f5b457; }
.btn:hover i { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn-line {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1px rgba(236, 235, 230, .28);
  padding: 6px 24px;
}
.btn-line:hover { background: rgba(236, 235, 230, .07); }
.demo-note { font-size: 13px; color: var(--mut); margin-top: 10px; }

.tag {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(240, 164, 58, .45);
  color: var(--amber);
  font: 600 11px/1 var(--text);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Header: sticky, transparent over the hero, solid once scrolled. */
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  margin-bottom: -72px;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.top.scrolled { background: rgba(11, 12, 14, .86); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.top-in { height: 72px; display: flex; align-items: center; gap: 32px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 17px/1 var(--display); letter-spacing: .06em; }
.logo svg { width: 26px; height: 26px; }
.top nav { display: flex; gap: 28px; margin-left: auto; font-size: 15px; }
.top nav a { text-decoration: none; color: #c9c9c4; transition: color .3s; }
.top nav a:hover { color: var(--fg); }
.top .btn { min-height: 44px; font-size: 15px; padding: 4px 4px 4px 20px; }
.top .btn i { width: 34px; height: 34px; }

/* Hero. The stage keeps the photo's aspect on desktop so the copy sits on the light wall
   and the controls sit on the studio floor at the same spots at every width. */
.hero { position: relative; overflow: hidden; background: var(--bg); padding: 0; }
.hero-in {
  position: relative;
  container-type: inline-size;
  width: min(100%, calc((100svh - 34px) * 1.7917));
  min-width: min(100%, 1180px);
  margin: 0 auto;
}
.stage { position: relative; aspect-ratio: 1376 / 768; }
.stage > img, .stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage > img { object-fit: cover; }
.stage::after {
  /* dims the ceiling light bar so the header reads over it */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 20%;
  background: linear-gradient(#0b0c0e 0%, #0b0c0e 30%, rgba(11, 12, 14, .9) 62%, rgba(11, 12, 14, 0));
  pointer-events: none;
}
.stage::before {
  /* lets the studio floor run into the page */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 26%;
  z-index: 1;
  background: linear-gradient(rgba(11, 12, 14, 0), rgba(11, 12, 14, .7) 55%, #0b0c0e);
  pointer-events: none;
}
.glass polygon {
  fill: #07080a;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.sweep { mix-blend-mode: screen; }
.hero-copy { position: absolute; left: 15.6cqw; top: 22.5%; z-index: 2; color: #121315; }
.hero h1 { font-size: 4.6cqw; line-height: 1; font-weight: 700; letter-spacing: -.035em; }
.hero-sub { margin-top: 1.4cqw; font-size: max(16px, 1.25cqw); line-height: 1.45; max-width: 27ch; color: #2b2e33; }
.hero-foot {
  position: absolute;
  left: 4.5cqw; right: 4.5cqw; bottom: 2.6cqw;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.hero-foot .demo-note { margin-top: 8px; }

/* Shade selector */
.shade-pick { text-align: right; }
.shade-label { font-size: 13px; color: #c9c9c4; margin-bottom: 10px; }
.shade-row { display: inline-flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(20, 22, 25, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); backdrop-filter: blur(10px); }
.shade-row button {
  min-width: 64px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #c9c9c4;
  font: 600 14px/1 var(--display);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.shade-row button i { width: 12px; height: 12px; border-radius: 50%; background: #e9eef2; box-shadow: inset 0 0 0 20px rgba(7, 8, 10, var(--o)); outline: 1px solid rgba(255, 255, 255, .25); }
.shade-row button[aria-pressed="true"] { background: var(--amber); color: var(--on-amber); }
.shade-row button[aria-pressed="true"] i { outline-color: rgba(0, 0, 0, .3); }
.shade-row button:hover:not([aria-pressed="true"]) { background: rgba(255, 255, 255, .07); }
.shade-read { margin-top: 10px; font-size: 13px; color: var(--mut); min-height: 20px; }
.shade-read b { color: var(--fg); font-weight: 600; }

.cx-gen-hero { position: absolute; right: 14.6cqw; top: 21%; z-index: 2; margin: 0; color: #4a4d52; }

section { padding: clamp(72px, 9vw, 128px) 0; }

/* Before and after */
.ba-grid h2 { font-size: clamp(28px, 3.1vw, 44px); }
.ba-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.ba-hint { margin-top: 28px; font-size: 14px; color: var(--mut); display: flex; align-items: center; gap: 10px; }
.ba-hint svg { width: 34px; height: 14px; }
.ba {
  position: relative;
  aspect-ratio: 2 / 1;
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  --pos: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 80px -40px rgba(0, 0, 0, .9);
}
.ba svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba .after { clip-path: inset(0 0 0 var(--pos)); }
.ba .after polygon { fill: #07080a; }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--amber); pointer-events: none; }
.ba-knob {
  position: absolute; top: 50%; left: var(--pos);
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--on-amber);
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.ba-knob svg { position: static; width: 22px; height: 22px; }
.ba:focus-visible { outline-offset: 4px; }
.ba-caps { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: 14px; color: var(--mut); }
.ba-caps b { color: var(--fg); font-weight: 600; }

/* Five shades */
.shades { background: var(--g1); }
.shade-list { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.shade-card { display: flex; flex-direction: column; }
.pane {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r);
  overflow: hidden;
  background: #d9e1e6 url("/concepts/lowlight-tint-detail/img/hero-sedan-800.webp") 46% 46% / 330% auto no-repeat;
}
.pane::before {
  content: "";
  position: absolute; inset: 0;
  background: #07080a;
  opacity: calc(var(--o) * var(--on, 1));
}
.pane::after {
  /* the film edge highlight */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.pane .num { position: absolute; left: 18px; bottom: 14px; z-index: 1; font-size: clamp(30px, 3.2vw, 46px); font-weight: 700; letter-spacing: -.04em; color: var(--fg); text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.shade-card h3 { margin-top: 18px; }
.shade-card p { margin-top: 6px; font-size: 15px; color: var(--mut); line-height: 1.5; }
.law {
  margin-top: 48px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px 28px;
  border-radius: var(--r);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(240, 164, 58, .3);
  max-width: 820px;
}
.law .num { font-size: 34px; font-weight: 700; color: var(--amber); line-height: 1; }
.law p { font-size: 16px; color: #cfcfca; }
.law b { color: var(--fg); }

/* Prices */
.tint-table { margin-top: 48px; width: 100%; border-collapse: collapse; }
.tint-table th, .tint-table td { text-align: left; padding: 22px 16px 22px 0; vertical-align: baseline; }
.tint-table thead th { font: 500 14px/1.2 var(--text); color: var(--mut); padding-bottom: 14px; border-bottom: 1px solid var(--g2); }
.tint-table tbody th { font: 600 18px/1.3 var(--display); letter-spacing: -.01em; width: 34%; }
.tint-table tbody th small { display: block; margin-top: 6px; font: 400 14px/1.4 var(--text); color: var(--mut); letter-spacing: 0; }
.tint-table td { font: 600 clamp(24px, 2.6vw, 36px)/1 var(--display); letter-spacing: -.03em; }
.tint-table tbody tr + tr > * { border-top: 1px solid var(--g2); }
.tint-extra { margin-top: 18px; font-size: 15px; color: var(--mut); }

.bento { margin-top: 72px; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(220px, auto); gap: 16px; }
.bento figure { margin: 0; grid-column: span 6; grid-row: span 2; display: flex; flex-direction: column; }
.bento figure .ph { flex: 1; border-radius: var(--r); overflow: hidden; min-height: 300px; }
.bento figure img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.bento figure figcaption { margin-top: 10px; }
.cell {
  grid-column: span 3;
  border-radius: var(--r);
  background: var(--g1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  padding: 26px 24px;
  display: flex; flex-direction: column;
}
.cell p { margin-top: 10px; font-size: 15px; color: var(--mut); line-height: 1.5; }
.cell .price { margin-top: auto; padding-top: 22px; font: 600 26px/1 var(--display); letter-spacing: -.03em; color: var(--fg); }
.cell .price small { display: block; margin-top: 8px; font: 400 13px/1.3 var(--text); color: var(--mut); letter-spacing: 0; }
.cell.hot { background: linear-gradient(160deg, rgba(240, 164, 58, .16), rgba(240, 164, 58, .02) 60%), var(--g1); box-shadow: inset 0 0 0 1px rgba(240, 164, 58, .32); }

/* A tint day: scroll fills the line */
.day { background: var(--g1); }
.day-track { position: relative; margin-top: 64px; }
.day-rail { position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--g2); }
.day-rail span { position: absolute; inset: 0; background: var(--amber); transform-origin: 0 50%; transform: scaleX(var(--fill, 0)); }
.day-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; position: relative; }
.day-list li { padding-top: 36px; position: relative; }
.day-list li::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--g2);
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
.day-list li.lit::before { background: var(--amber); box-shadow: inset 0 0 0 2px var(--amber); }
.day-list time { font: 600 22px/1 var(--display); letter-spacing: -.02em; }
.day-list h3 { margin-top: 14px; font: 600 16px/1.3 var(--text); }
.day-list p { margin-top: 6px; font-size: 15px; color: var(--mut); line-height: 1.5; }
.day-photo { margin: 64px 0 0; }
.day-photo img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r); }
.day-photo figcaption { margin-top: 10px; }
.day-after { margin-top: 48px; font-size: 16px; color: #cfcfca; }

/* FlowWays features */
.feat-grid { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 40px; align-items: start; }
.feat h3 { margin: 16px 0 20px; }
.feat .how { margin-top: 18px; font-size: 15px; color: var(--mut); line-height: 1.5; max-width: 34ch; }
.cx-screen-head b { font-family: var(--text); }
.ask { border-radius: var(--r); background: var(--g1); padding: 28px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.ask ul { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; gap: 10px; }
.ask li button {
  width: 100%;
  min-height: 48px;
  text-align: left;
  padding: 12px 18px;
  border: 0;
  border-radius: 16px;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.4 var(--text);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: box-shadow .3s var(--ease);
}
.ask li button:hover { box-shadow: inset 0 0 0 1px rgba(240, 164, 58, .5); }
.ask .btn { cursor: pointer; border: 0; }

/* Reviews */
.rev-grid { margin-top: 56px; display: grid; grid-template-columns: 7fr 5fr; gap: 16px; }
.rev { margin: 0; border-radius: var(--r); background: var(--g1); padding: 32px; display: flex; flex-direction: column; gap: 22px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.rev blockquote { margin: 0; font-size: 18px; line-height: 1.5; }
.rev.big { grid-row: span 2; justify-content: space-between; }
.rev.big blockquote { font: 500 clamp(22px, 2.3vw, 30px)/1.3 var(--display); letter-spacing: -.02em; }
.rev figcaption { font-size: 14px; color: var(--mut); }
.rev figcaption b { display: block; color: var(--fg); font-weight: 600; margin-bottom: 2px; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); }
.faq-grid h2 { position: sticky; top: 104px; align-self: start; }
.faq details { border-bottom: 1px solid var(--g2); }
.faq summary {
  list-style: none;
  cursor: pointer;
  min-height: 64px;
  padding: 20px 48px 20px 0;
  position: relative;
  font: 600 18px/1.35 var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 8px; top: 50%;
  width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--amber), var(--amber)) center / 14px 2px no-repeat, linear-gradient(var(--amber), var(--amber)) center / 2px 14px no-repeat;
  transition: transform .4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 48px 24px 0; color: #c9c9c4; }

/* Visit */
.visit { background: var(--g1); }
.visit-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 72px); }
.map-col { display: flex; flex-direction: column; }
.map { flex: 1; min-height: 360px; position: relative; border-radius: var(--r); overflow: hidden; background: #0e1012; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-cap { margin-top: 10px; font-size: 13px; color: var(--mut); }
.addr { font: 600 20px/1.35 var(--display); letter-spacing: -.01em; margin-top: 20px; }
.addr small { display: block; margin-top: 6px; font: 400 14px/1.4 var(--text); color: var(--mut); letter-spacing: 0; }
.hours { list-style: none; margin: 28px 0 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 16px; }
.hours li + li { border-top: 1px solid var(--g2); }
.hours li span:last-child { color: #cfcfca; font-variant-numeric: tabular-nums; }
.phone-link { display: inline-block; margin-top: 24px; font: 600 26px/1 var(--display); letter-spacing: -.02em; text-decoration: none; min-height: 44px; padding-top: 8px; }
.slots { margin-top: 36px; padding: 24px; border-radius: var(--r); background: var(--bg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.slots h3 { margin: 14px 0 16px; font: 600 16px/1.3 var(--text); }
.slot-row { display: flex; flex-wrap: wrap; gap: 8px; }
.slot-row a {
  min-height: 44px; min-width: 84px;
  display: inline-grid; place-items: center;
  padding: 0 16px;
  border-radius: 999px;
  text-decoration: none;
  font: 600 14px/1 var(--display);
  box-shadow: inset 0 0 0 1px rgba(236, 235, 230, .22);
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.slot-row a:hover { background: var(--amber); color: var(--on-amber); box-shadow: none; }
.slots .demo-note { margin-top: 14px; }

/* Closing band: the same car with the studio lights going down. */
.close { position: relative; padding: 0; overflow: hidden; }
.close-stage { position: relative; aspect-ratio: 1376 / 768; max-height: 92svh; width: 100%; }
.close-stage img, .close-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.close-stage img { object-fit: cover; }
.close-stage .glass polygon { opacity: .93; }
.close-dim { position: absolute; inset: 0; background: #0b0c0e; opacity: .55; }
.close-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(#0b0c0e, rgba(11, 12, 14, 0) 22%, rgba(11, 12, 14, 0) 55%, #0b0c0e 96%);
}
.close-copy { position: absolute; left: 0; right: 0; bottom: clamp(32px, 5vw, 72px); z-index: 2; }
.close h2 { font-size: clamp(36px, 5.6vw, 84px); max-width: 14ch; line-height: 1; }
.close-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.close .cx-gen { position: absolute; right: var(--pad); top: 24%; z-index: 2; margin: 0; }

footer { border-top: 1px solid var(--g2); padding: 40px 0 120px; font-size: 14px; color: var(--mut); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 40px; }
footer b { color: var(--fg); font-family: var(--display); font-weight: 600; letter-spacing: .04em; }
footer p + p { margin-top: 6px; }
footer a { color: var(--fg); }

/* Reveal: heavier entry than the shared default */
.cx-js [data-reveal] { transform: translateY(40px); transition-duration: 1.1s; transition-timing-function: var(--ease); }
.cx-js [data-reveal].in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .glass polygon { transition-duration: 2.6s; }
  .btn, .btn i { transition-duration: 1.2s; }
  .cx-js [data-reveal] { transform: none; transition: opacity 1.8s ease; }
}

/* Tablet */
@media (max-width: 1080px) {
  .top nav { display: none; }
  .top .btn { margin-left: auto; }
  .shade-list { grid-template-columns: repeat(3, 1fr); }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .feat-grid .ask { grid-column: 1 / -1; }
  .bento figure { grid-column: span 12; grid-row: auto; }
  .bento figure .ph { aspect-ratio: 16 / 9; }
  .cell { grid-column: span 6; }
}

/* Phone: copy above the car, controls under it. */
@media (max-width: 760px) {
  .day-photo img { aspect-ratio: 16 / 9; }
  body { font-size: 16px; }
  .top { margin-bottom: -64px; }
  .top-in { height: 64px; }
  .logo { font-size: 15px; }
  .top .btn { font-size: 14px; }
  .hero { padding-top: 88px; }
  .hero-in { width: 100%; min-width: 0; container-type: normal; }
  .hero-copy { position: static; padding: 0 var(--pad); color: var(--fg); }
  .hero h1 { font-size: clamp(38px, 11.5vw, 48px); line-height: 1.02; }
  .hero-sub { font-size: 16px; color: var(--mut); margin-top: 14px; }
  .stage { aspect-ratio: 390 / 270; margin-top: 8px; }
  .stage::after { height: 21%; background: linear-gradient(#0b0c0e 78%, rgba(11, 12, 14, 0)); }
  .stage::before { height: 18%; }
  .cx-gen-hero { top: auto; bottom: 8px; right: var(--pad); color: #8d9096; }
  .hero-foot { position: static; flex-direction: column-reverse; align-items: stretch; gap: 22px; padding: 6px var(--pad) 40px; }
  .shade-pick { text-align: left; }
  .shade-row { display: flex; width: 100%; }
  .shade-row button { flex: 1; min-width: 0; padding: 0 4px; font-size: 13px; }
  .shade-row button i { display: none; }

  .ba-grid, .faq-grid, .visit-grid, .rev-grid { grid-template-columns: 1fr; }
  .faq-grid h2 { position: static; }
  .shade-list { grid-template-columns: 1fr 1fr; gap: 12px; }
  .shade-card:last-child { grid-column: 1 / -1; }
  .shade-card:last-child .pane { aspect-ratio: 2 / 1; }
  .law { grid-template-columns: 1fr; padding: 20px; }
  .tint-table thead th:first-child { width: 0; }
  .tint-table th, .tint-table td { padding: 16px 10px 16px 0; }
  .tint-table tbody th { font-size: 15px; width: auto; }
  .tint-table td { font-size: 20px; }
  .tint-table tbody th small { display: none; }
  .bento { grid-auto-rows: auto; }
  .cell { grid-column: span 12; }
  .day-rail { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .day-rail span { transform-origin: 50% 0; transform: scaleY(var(--fill, 0)); }
  .day-list { grid-template-columns: 1fr; gap: 32px; }
  .day-list li { padding: 0 0 0 40px; }
  .feat-grid { grid-template-columns: 1fr; gap: 64px; }
  .rev.big { grid-row: auto; }
  .faq summary { font-size: 16px; }
  .close-stage { aspect-ratio: 390 / 330; }
  .close-copy { position: relative; bottom: auto; margin-top: -40px; padding-bottom: 72px; }
  .close .cx-gen { top: 30%; }
  .map { min-height: 300px; }
}