/* ==========================================================================
   upsell-promo-v1

   There is deliberately NO :root token block in this file. Tokens are injected
   per page by the build, derived from one brand hex plus a light/dark flag.
   Consequences, both enforced by `lintStylesheet`:
     - no hex literals in here, ever
     - no raw rgba(); alpha comes from token triplets, rgb(var(--x-rgb) / .18)
   That is the exact gap that made the donor page un-rebrandable (59 brand-tinted
   rgba() calls living outside its token block).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--accent); text-underline-offset: 2px; }

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-weight: 700;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }
p  { margin: 0; text-wrap: pretty; }

:where(a, button, summary, input):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--text);
  padding: 0.75rem 1rem;
  z-index: 50;
}
.skip:focus { left: 0; }

/* ---------- type scale ---------- */

:where(body) {
  --fs-base: clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --fs-sm:   clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --fs-h3:   clamp(1.1rem, 1.04rem + 0.28vw, 1.28rem);
  --fs-h2:   clamp(1.7rem, 1.4rem + 1.3vw, 2.6rem);
  --fs-h1:   clamp(2.2rem, 1.65rem + 2.7vw, 3.7rem);
}

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: 86rem;
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 3rem);
}
.wrap.narrow { max-width: 52rem; }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

.band {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.band-accent {
  position: relative;
  overflow: hidden;
  background: rgb(var(--accent-tint-rgb) / 0.5);
  border-block-color: rgb(var(--accent-fill-rgb) / 0.16);
}

/*
 * Data-network backdrop. The asset is an alpha MASK rather than an image, so the
 * fill is the brand accent and it recolours per white label — a literal dark-navy
 * render would have clashed with both the light ground and any non-blue brand.
 * Faded out toward the bottom so the stat tiles sit on clean ground.
 */
.data-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--accent-fill);
  opacity: 0.16;
  -webkit-mask-image: var(--mask), linear-gradient(to bottom, black 45%, transparent 92%);
  mask-image: var(--mask), linear-gradient(to bottom, black 45%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  mask-position: center top;
  -webkit-mask-size: cover, 100% 100%;
  mask-size: cover, 100% 100%;
}

.band-accent > .wrap { position: relative; }

/* Deep band: a derived guaranteed-dark surface in the brand's hue (--deep),
   never a raw brand color — a brand whose alt color is light would wash it out. */
.band-dark {
  background:
    radial-gradient(60rem 26rem at 85% -20%, rgb(var(--accent-fill-rgb) / 0.3), transparent 60%),
    var(--deep);
  border-block: none;
  color: var(--on-deep);
}

.section > .wrap > h2,
.band > .wrap > h2 { margin-bottom: 0.6rem; }

.section-lead {
  color: var(--text-dim);
  max-width: 46rem;
  margin-bottom: clamp(1.9rem, 4vw, 3rem);
}
/* Heading block sits in .wrap while the marquee runs full-bleed beneath it */
.section-lead-flush { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.eyebrow {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.ico { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- reveal (JS adds data-js on <html>; no JS = no hidden content) ---------- */

html[data-js] .reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 600ms ease, translate 600ms ease;
  transition-delay: calc(var(--d, 0) * 70ms);
}
html[data-js] .reveal.in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html[data-js] .reveal { opacity: 1; translate: none; transition: none; }
}

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(var(--bg-rgb) / 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}

.brand-logo { width: auto; max-height: 2.25rem; object-fit: contain; object-position: left center; }

.topbar-deadline {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  color: var(--accent);
  background: rgb(var(--accent-fill-rgb) / 0.1);
  border: 1px solid rgb(var(--accent-fill-rgb) / 0.28);
  white-space: nowrap;
}

/* ---------- hero ---------- */

.hero {
  padding-block: clamp(3rem, 7vw, 6rem);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58rem 30rem at 10% -12%, rgb(var(--accent-fill-rgb) / 0.12), transparent 62%),
    radial-gradient(42rem 26rem at 98% 15%, rgb(var(--accent-fill-alt-rgb) / 0.1), transparent 60%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-copy > * + * { margin-top: 1.35rem; }

.lead {
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.28rem);
  color: var(--text-dim);
  max-width: 30rem;
}

/* Compact one-line price under the CTA — the full treatment lives in the offer card */
.price-line {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.price-now {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.price-was { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.hero-media { position: relative; }

/* The frame is the positioning context for the investor pins, and it owns the
   aspect ratio so a taller crop fills the column without distorting the art. */
.hero-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 34px 74px -30px rgb(var(--text-rgb) / 0.4);
  background: var(--surface-2);
  aspect-ratio: 108 / 124;
}

.hero-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- hero entrance ---------- */

/*
 * Runs on load from CSS alone — no JS, so it cannot leave content stranded if a
 * script fails. The global prefers-reduced-motion rule collapses the duration,
 * and `both` fill means the end state (visible) is what survives.
 *
 * The copy fades and rises; the frame moves WITHOUT an opacity ramp on purpose.
 * It holds the LCP image, and starting it transparent would delay the largest
 * paint for the sake of a flourish. Transform-only keeps it painted from frame one.
 */
@keyframes hero-rise {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes hero-frame-in {
  from { translate: 0 26px; }
  to   { translate: 0 0; }
}

.hero-copy > * {
  animation: hero-rise 640ms cubic-bezier(0.2, 0.75, 0.3, 1) both;
  animation-delay: calc(80ms + var(--seq, 0) * 90ms);
}
.hero-copy > :nth-child(1) { --seq: 0; }
.hero-copy > :nth-child(2) { --seq: 1; }
.hero-copy > :nth-child(3) { --seq: 2; }
.hero-copy > :nth-child(4) { --seq: 3; }
.hero-copy > :nth-child(5) { --seq: 4; }
.hero-copy > :nth-child(6) { --seq: 5; }

.hero-frame { animation: hero-frame-in 820ms cubic-bezier(0.2, 0.75, 0.3, 1) both; }

/* Lands after the frame has settled, so it reads as arriving onto the image */
.hero-float { animation: hero-rise 620ms cubic-bezier(0.2, 0.75, 0.3, 1) 620ms both; }

/* ---------- investor pins ---------- */

.hero-pins { position: absolute; inset: 0; pointer-events: none; }

.hero-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 999px;
  color: var(--accent);
  /* Softer than a solid chip so the rooftop still reads through it */
  background: rgb(var(--surface-rgb) / 0.68);
  backdrop-filter: blur(3px);
  box-shadow: 0 8px 22px -6px rgb(var(--scrim-rgb) / 0.5);
}
.hero-pin .ico { width: 1.7rem; height: 1.7rem; }

/* Pulse ring reads as a live signal on the map */
.hero-pin::before {
  content: "";
  position: absolute;
  inset: -0.55rem;
  border-radius: 999px;
  border: 2.5px solid rgb(var(--accent-fill-rgb) / 0.5);
}

html[data-js] .hero-pin {
  opacity: 0;
  scale: 0.4;
  transition: opacity 420ms cubic-bezier(0.2, 1.3, 0.4, 1), scale 420ms cubic-bezier(0.2, 1.3, 0.4, 1);
  transition-delay: calc(900ms + var(--i) * 150ms);
}
html[data-js] .hero-frame.in .hero-pin { opacity: 1; scale: 1; }

html[data-js] .hero-frame.in .hero-pin::before {
  animation: pin-pulse 2.6s ease-out infinite;
  animation-delay: calc(1500ms + var(--i) * 150ms);
}

@keyframes pin-pulse {
  0%   { scale: 0.7; opacity: 0.9; }
  70%  { scale: 2.15; opacity: 0; }
  100% { scale: 2.15; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-js] .hero-pin { opacity: 1; scale: 1; transition: none; }
  html[data-js] .hero-frame.in .hero-pin::before { animation: none; }
}

/* Floating demand-proof chip anchored to the hero image */
.hero-float {
  position: absolute;
  left: clamp(-1.25rem, -2vw, -2rem);
  bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-sm);
  color: var(--text);
  background: rgb(var(--surface-rgb) / 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 0.7rem 1rem;
  box-shadow: 0 16px 40px -18px rgb(var(--text-rgb) / 0.35);
  max-width: min(88%, 20rem);
}
.hero-float .ico { color: var(--accent); }
.hero-float strong { font-variant-numeric: tabular-nums; }

.hero-expired .hero-inner { grid-template-columns: minmax(0, 1fr); }
.hero-expired::before { opacity: 0.35; }

/* ---------- video band ---------- */

.video-shell {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 90px -35px rgb(var(--scrim-rgb) / 0.9);
  aspect-ratio: 16 / 9;
  background: var(--deep);
}

.video-facade {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: none;
  font-family: inherit;
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; }

.video-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(var(--scrim-rgb) / 0.66), rgb(var(--scrim-rgb) / 0.04) 55%);
  transition: background 200ms ease;
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: clamp(4rem, 8vw, 5.25rem);
  height: clamp(4rem, 8vw, 5.25rem);
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: 0 0 0 10px rgb(var(--accent-fill-rgb) / 0.25), 0 18px 40px -12px rgb(var(--accent-fill-rgb) / 0.7);
  transition: scale 180ms ease;
}
.video-play .ico { width: 40%; height: 40%; margin-left: 6%; }
.video-facade:hover .video-play { scale: 1.07; }
.video-facade:hover .video-scrim { background: linear-gradient(to top, rgb(var(--scrim-rgb) / 0.55), transparent 55%); }

.video-title {
  position: absolute;
  left: 1.4rem;
  bottom: 1.2rem;
  color: var(--on-scrim);
  font-weight: 700;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
  letter-spacing: -0.01em;
  text-align: left;
}

.video-frame { width: 100%; height: 100%; border: 0; }

/* ---------- feature row (in the dark band) ---------- */

.feature-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.feature h3 { margin-bottom: 0.35rem; color: var(--on-deep); }
.feature p { font-size: var(--fs-sm); color: rgb(var(--on-deep-rgb) / 0.72); }

.feature-ico {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.9rem;
  border-radius: 12px;
  background: rgb(var(--on-deep-rgb) / 0.1);
  border: 1px solid rgb(var(--on-deep-rgb) / 0.16);
  color: var(--on-deep);
}
.feature-ico .ico { width: 1.4rem; height: 1.4rem; }

/* ---------- lead type cards ---------- */

/* Four across, with the featured card spanning the whole row beneath them —
   a fifth card on a line of its own is what this replaces. */
.lead-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
}

@media (max-width: 74rem) { .lead-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .lead-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- matched-investor circles ---------- */

/*
 * Illustrates the feature literally: portraits surfacing on a property the way
 * matches would. Decorative, so the container is aria-hidden and the copy beside
 * it carries the meaning. Positioned in % of the media box.
 */
.match-pins { position: absolute; inset: 0; pointer-events: none; }

.match-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 999px;
  overflow: hidden;
  border: 3px solid var(--surface);
  box-shadow: 0 10px 24px -5px rgb(var(--scrim-rgb) / 0.6);
}
.match-pin img { width: 100%; height: 100%; object-fit: cover; }

/* Accent halo, so they read as system-surfaced matches rather than stray photos */
.match-pin::after {
  content: "";
  position: absolute;
  inset: -0.5rem;
  border-radius: 999px;
  border: 2px solid rgb(var(--accent-fill-rgb) / 0.55);
}

/* Pops in when the block scrolls into view — .in already comes from the reveal
   observer, so this needs no extra JS. */
html[data-js] .match-pin {
  opacity: 0;
  scale: 0.35;
  transition: opacity 460ms cubic-bezier(0.2, 1.3, 0.4, 1), scale 460ms cubic-bezier(0.2, 1.3, 0.4, 1);
  transition-delay: calc(260ms + var(--i) * 150ms);
}

@media (prefers-reduced-motion: reduce) {
  html[data-js] .match-pin { opacity: 1; scale: 1; transition: none; }
}

@media (max-width: 40rem) {
  .match-pin { width: 3.7rem; height: 3.7rem; border-width: 2.5px; }
  .match-pin::after { inset: -0.38rem; }
}

.lead-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: translate 200ms ease, box-shadow 200ms ease;
}
.lead-card:hover {
  translate: 0 -4px;
  box-shadow: 0 24px 50px -24px rgb(var(--text-rgb) / 0.3);
}

.lead-media {
  position: relative;
  aspect-ratio: 11 / 7;
  overflow: hidden;
}
.lead-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 400ms ease;
}
.lead-card:hover .lead-media img { scale: 1.05; }

/* Text sits ON the image, so the overlay is a fixed dark scrim independent of
   theme — white type on it is a constant, not a token pairing. */
.lead-media-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgb(var(--scrim-rgb) / 0.82), rgb(var(--scrim-rgb) / 0.18) 55%, rgb(var(--scrim-rgb) / 0.05)),
    linear-gradient(to right, rgb(var(--accent-fill-rgb) / 0.28), transparent 60%);
}

.lead-num {
  position: absolute;
  top: 0.9rem;
  left: 1rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--on-scrim);
  background: rgb(var(--scrim-rgb) / 0.45);
  backdrop-filter: blur(6px);
  border: 1px solid rgb(var(--on-scrim-rgb) / 0.28);
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
  font-variant-numeric: tabular-nums;
}

.lead-title {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.85rem;
  color: var(--on-scrim);
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
  text-shadow: 0 2px 12px rgb(var(--scrim-rgb) / 0.6);
}

.lead-body {
  padding: 1.25rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1;
}

.lead-desc { color: var(--text-dim); font-size: var(--fs-sm); }

.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.ticks li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: var(--fs-sm); }
.ticks .ico { color: var(--accent); margin-top: 0.28em; }

.lead-for {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* ---------- data stats ---------- */

.data-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.9rem, 4vw, 3rem);
}
.data-head h2 { margin: 0; }
.data-lead { color: var(--text-dim); max-width: 30rem; font-size: var(--fs-sm); }

.stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
}

.stat {
  background: var(--surface);
  border: 1px solid rgb(var(--accent-fill-rgb) / 0.18);
  border-radius: 14px;
  padding: 1.3rem 1.35rem 1.15rem;
}

.stat dd {
  margin: 0 0 0.15rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1.1;
}

.stat dt {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

/* ---------- day-to-day split ---------- */

.day-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

/* Offset pair with a dot matrix bleeding between them. The grid is two columns
   and three rows; each shot spans two rows, staggered by one, which produces the
   overlap without any absolute positioning. */
.day-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  gap: 0 clamp(0.75rem, 2vw, 1.35rem);
  position: relative;
}

.day-shot { position: relative; z-index: 1; margin: 0; border-radius: 18px; overflow: hidden; }

.day-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 28px 64px -30px rgb(var(--text-rgb) / 0.4);
}

.day-shot-1 { grid-column: 1; grid-row: 1 / span 2; }
.day-shot-2 { grid-column: 2; grid-row: 2 / span 2; }

/* Row 3 begins exactly at the first shot's bottom edge, so a negative offset
   slides the matrix up behind it — the top rows read as tucked under the photo
   while the rest fills the empty bottom-left quadrant. */
.day-dots {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  justify-self: start;
  z-index: 0;
  margin-top: -2.75rem;
  width: min(13.5rem, 82%);
  aspect-ratio: 6 / 5;
  background-image: radial-gradient(circle, var(--accent-fill) 30%, transparent 32%);
  background-size: 1.45rem 1.45rem;
  opacity: 0.9;
}

.day-copy h2 { margin-bottom: 1.5rem; }

.benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.benefits li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-block: 0.95rem;
}
.benefits li + li { border-top: 1px solid var(--border); }

.benefit-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 10px;
  background: rgb(var(--accent-fill-rgb) / 0.1);
  color: var(--accent);
  margin-top: 0.1rem;
}
.benefit-ico .ico { width: 1.2rem; height: 1.2rem; }

.benefits div { display: flex; flex-direction: column; gap: 0.12rem; }
.benefits span { color: var(--text-dim); font-size: var(--fs-sm); }

/* ---------- testimonials: infinite marquee ---------- */

.marquee {
  /* Sits outside .wrap so it is full-bleed structurally — no 100vw/negative
     margin hack, which also keeps it correct wherever vw is unreliable. */
  overflow: hidden;
  /* Fade the ends so cards enter and leave instead of popping */
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  /* No column-gap: each card carries its own trailing margin so the two halves
     tile identically and the -50% loop is seamless. */
  animation: marquee-scroll 68s linear infinite;
}

@keyframes marquee-scroll {
  from { translate: 0 0; }
  to   { translate: -50% 0; }
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

/* Fixed rem width: the track is sized by max-content, so a viewport-relative
   width here would be both circular-ish and needless. */
.marquee .quote {
  flex: none;
  width: 23rem;
  margin: 0 1.25rem 0 0;
}

@media (max-width: 34rem) { .marquee .quote { width: 17.5rem; } }

.quote {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.6rem 1.5rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.quote::before {
  content: "\201C";
  position: absolute;
  top: 0.4rem;
  right: 1rem;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: rgb(var(--accent-fill-rgb) / 0.18);
  pointer-events: none;
}

.quote p { font-size: var(--fs-sm); position: relative; }

.quote cite {
  margin-top: auto;
  font-style: normal;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-dim);
}
.quote cite::before {
  content: "";
  display: block;
  width: 1.75rem;
  border-top: 2px solid rgb(var(--accent-fill-rgb) / 0.5);
  margin-bottom: 0.6rem;
}

/* No animation: become a normal swipeable row and drop the duplicate set. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; mask-image: none; }
  .marquee-track { animation: none; }
  .marquee .quote[aria-hidden="true"] { display: none; }
}

/* ---------- offer: two-panel checkout ---------- */

.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 36px 90px -46px rgb(var(--text-rgb) / 0.4);
}

.checkout-main {
  position: relative;
  padding: clamp(1.75rem, 4vw, 3rem);
}

/* The offer glyph as a watermark, bleeding off the panel's left edge — the
   crop comes from .checkout's existing overflow:hidden, so nothing here needs
   to know the box's size. Sized by height (75%) with width:auto, then pulled
   left by 58% of its OWN width, which keeps the visible slice consistent
   whatever the glyph's aspect ratio turns out to be for a future offer. */
.checkout-watermark {
  position: absolute;
  top: 50%;
  left: 0;
  translate: -48% -50%;
  height: 75%;
  width: auto;
  z-index: 0;
  color: rgb(var(--watermark-rgb) / var(--watermark-alpha));
  pointer-events: none;
}

/* Absolutely positioned siblings paint above in-flow content by default, so the
   copy has to be lifted explicitly rather than relying on document order. */
.checkout-main > :not(.checkout-watermark) { position: relative; z-index: 1; }
.checkout-main h2 { margin-bottom: 0.75rem; }
.checkout-lead { color: var(--text-dim); max-width: 34rem; margin-bottom: 1.6rem; }

.includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.65rem 1.5rem;
}
.includes li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: var(--fs-sm); font-weight: 600; }
.includes .ico { color: var(--accent); margin-top: 0.26em; }

.checkout-panel {
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: rgb(var(--accent-tint-rgb) / 0.6);
  border-left: 1px solid rgb(var(--accent-fill-rgb) / 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.panel-label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}





/* ---------- plan options ---------- */

/*
 * Two options on one ordered dimension — residential, then the same thing
 * extended to commercial — with a clear recommendation. That is the shape the
 * research says is safe; what predicts choice overload is illegible options,
 * not how many there are.
 */
.plans { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }

.plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.plan-pick {
  border-color: rgb(var(--accent-fill-rgb) / 0.55);
  box-shadow: 0 0 0 1px rgb(var(--accent-fill-rgb) / 0.35);
}

.plan-flag {
  position: absolute;
  top: 0;
  right: 1rem;
  translate: 0 -50%;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent-fill);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  white-space: nowrap;
}

.plan-name { font-size: var(--fs-sm); font-weight: 700; }

.plan-price { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; font-family: var(--font-display); }
.plan-now {
  font-size: clamp(1.9rem, 1.6rem + 1.1vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan-was { font-size: 1.05rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.plan-blurb { font-size: var(--fs-sm); color: var(--text-dim); margin-bottom: 0.35rem; }

/* Quiet button for the non-recommended plan: still obviously clickable, but it
   does not compete with the one most people should take. */
.btn-quiet {
  background: transparent;
  color: var(--accent);
  border-color: rgb(var(--accent-fill-rgb) / 0.45);
}
.btn-quiet:hover { background: rgb(var(--accent-fill-rgb) / 0.08); translate: 0 -1px; }

.includes-star { color: var(--text); }
.includes-star .ico { color: var(--accent); }

.panel-trust { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.panel-trust li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-dim); }
.panel-trust .ico { color: var(--ok); margin-top: 0.24em; }
.panel-trust strong { color: var(--text); }

.panel-deadline {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding-top: 0.85rem;
  border-top: 1px solid rgb(var(--accent-fill-rgb) / 0.2);
}

@media (max-width: 56rem) {
  .checkout { grid-template-columns: minmax(0, 1fr); }
  .checkout-panel { border-left: none; border-top: 1px solid rgb(var(--accent-fill-rgb) / 0.2); }
  /* 75% of a narrow stacked panel is proportionally far bigger than 75% of a
     wide column, so the watermark has to shrink and crop harder or it competes
     with the copy instead of sitting behind it. */
  .checkout-watermark {
    height: 56%;
    translate: -62% -50%;
    /* Proportionally larger in a narrow column, so ease it back further */
    color: rgb(var(--watermark-rgb) / calc(var(--watermark-alpha) * 0.62));
  }
}

/* Price treatment retained for the expired state's copy */
.price { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; font-family: var(--font-display); }
.price-amount {
  font-size: clamp(2.2rem, 1.8rem + 1.8vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.price-anchor { font-size: 1.2rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.price-terms { font-size: var(--fs-sm); color: var(--text-muted); font-family: var(--font-body); }
.price-saving { font-size: var(--fs-sm); color: var(--accent); font-weight: 600; }

/* ---------- buttons ---------- */

.cta-group { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 12px;
  /* 48px minimum target with 8px+ separation from siblings */
  min-height: 3rem;
  padding: 0.85rem 1.5rem;
  transition: background-color 160ms ease, translate 160ms ease, box-shadow 160ms ease;
}

.btn-primary {
  background: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: 0 14px 30px -14px rgb(var(--accent-fill-rgb) / 0.65);
}
.btn-primary:hover { background: var(--accent-fill-hover); translate: 0 -1px; }
.btn-primary:active { translate: 0 1px; }

/* Inverted button for the accent-filled final banner */
.btn-invert { background: var(--surface); color: var(--accent); }
.btn-invert:hover { translate: 0 -1px; box-shadow: 0 14px 30px -14px rgb(var(--scrim-rgb) / 0.6); }

.btn-lg { font-size: clamp(1rem, 0.96rem + 0.2vw, 1.12rem); padding: 1.05rem 1.9rem; min-height: 3.5rem; }
.btn-block { width: 100%; }

.btn .ico { width: 1.05em; height: 1.05em; }

.cta-reassure {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  text-wrap: pretty;
}
.cta-reassure .ico {
  color: var(--ok);
  flex: 0 0 auto;
  margin-top: 0.12em;
}

/* ---------- faq ---------- */

.faq { display: flex; flex-direction: column; }

.faq details { border-bottom: 1px solid var(--border); padding: 0.35rem 0; }

.faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 1rem 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent);
  flex: none;
  transition: rotate 200ms ease;
}
.faq details[open] summary::after { rotate: 45deg; }

.faq-body { padding-bottom: 1.1rem; color: var(--text-dim); font-size: var(--fs-sm); max-width: 42rem; }

/* ---------- final banner ---------- */

.final {
  padding-block: clamp(3.75rem, 9vw, 7rem);
  background:
    radial-gradient(50rem 24rem at 15% 0%, rgb(var(--on-accent-rgb) / 0.12), transparent 55%),
    linear-gradient(135deg, var(--accent-fill), var(--accent-fill-hover));
  color: var(--on-accent);
}

.final-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.final h2 { max-width: 24ch; }
.final-sub { font-size: var(--fs-sm); color: rgb(var(--on-accent-rgb) / 0.82); }
.final .cta-group { align-items: center; margin-top: 0.5rem; }
.final .cta-reassure { color: rgb(var(--on-accent-rgb) / 0.82); }
.final .cta-reassure .ico { color: var(--on-accent); }

/* ---------- notify / waitlist form ---------- */

.notify { display: flex; flex-direction: column; gap: 0.5rem; max-width: 28rem; }

.notify-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-dim); }

.notify-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.notify input {
  flex: 1 1 12rem;
  /* 16px minimum, or iOS Safari zooms the viewport on focus */
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  min-height: 3rem;
}
.notify input::placeholder { color: var(--text-muted); }

/* ---------- footer ---------- */

.foot { padding-block: 2.5rem; border-top: 1px solid var(--border); }

.foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.foot-legal { font-size: var(--fs-sm); color: var(--text-muted); }

.foot-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.foot-links a { font-size: var(--fs-sm); color: var(--text-dim); text-decoration: none; }
.foot-links a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- responsive ---------- */

@media (max-width: 56rem) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  /* Image leads on mobile, copy beneath it. Kept to a shallow crop so the
     headline still lands close to the fold rather than being pushed off it. */
  .hero-media { order: -1; }
  .hero-frame { aspect-ratio: 16 / 10; }
  /* Coordinates were placed on the uncropped frame; a cropped one moves them off the rooftops. */
  .hero-pins { display: none; }

  /* Four stacked icon rows was a tall, repetitive list. A 2x2 of tinted tiles
     halves the height and reads as a composed block — and keeps all four
     visible, which a swipeable row would not. */
  .feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
  .feature {
    background: rgb(var(--on-deep-rgb) / 0.06);
    border: 1px solid rgb(var(--on-deep-rgb) / 0.14);
    border-radius: 14px;
    padding: 1.05rem 0.95rem 1.15rem;
  }
  .feature-ico {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 10px;
    margin-bottom: 0.7rem;
  }
  .feature-ico .ico { width: 1.15rem; height: 1.15rem; }
  .feature h3 { font-size: 0.97rem; line-height: 1.25; }
  .feature p { font-size: 0.8rem; line-height: 1.45; }
  .hero-float { left: 0.9rem; bottom: 0.9rem; }
  .day-split { grid-template-columns: minmax(0, 1fr); }
  .day-media { max-width: 34rem; }
}

@media (max-width: 40rem) {
  /* The poster is a branded graphic carrying the product name, and at this size
     the overlay caption lands on top of its wordmark. The play button already
     says "video", so the caption is the redundant half. */
  .video-title { display: none; }
}

@media (max-width: 34rem) {
  .btn { width: 100%; }
  .cta-group { align-self: stretch; width: 100%; }
  .topbar-deadline { font-size: 0.78rem; padding: 0.3rem 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .topbar, .final, .video-shell { display: none; }
}

/* ---------- buyer match spotlight ----------
   The expanded Buyer Match Ai section. The demo is a tablist over pre-rendered
   panels; with JS off the first panel shows and reads fine on its own.
   Score bars are driven by --v (the score itself), so a bar can never disagree
   with the number printed beside it. */

.bmx { position: relative; }

.bmx-h { max-width: 20ch; text-wrap: balance; }

.bmx-steps {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.bmx-steps li {
  display: grid;
  gap: 0.3rem;
  padding-top: 1rem;
  border-top: 2px solid rgb(var(--accent-rgb) / 0.28);
}

.bmx-step-n {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.bmx-step-t { font-weight: 700; }
.bmx-step-b { color: var(--text-dim); font-size: var(--fs-sm); text-wrap: balance; }

/* --- lede: copy beside the house, with the matched investors pinned on it --- */

.bmx-lede { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }

@media (min-width: 56rem) {
  .bmx-lede { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.bmx-lede-copy > h2 { margin-bottom: 0.6rem; }
.bmx-lede-copy .section-lead { margin-bottom: 0; }

/* Matches the source crop so the pin coordinates land where they were authored;
   they are percentages of this box, not of the image. */
.bmx-media {
  position: relative;
  margin: 0;
  aspect-ratio: 880 / 560;
  border-radius: 1.1rem;
  overflow: hidden;
  border: 1px solid rgb(var(--accent-fill-rgb) / 0.35);
  box-shadow: 0 26px 64px -34px rgb(var(--accent-fill-rgb) / 0.5);
}

.bmx-media > img { width: 100%; height: 100%; object-fit: cover; }

/* Fixed dark scrim rather than a themed surface — the circles sit on a photo. */
.bmx-media-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgb(var(--scrim-rgb) / 0.5), rgb(var(--scrim-rgb) / 0.06) 60%),
    linear-gradient(to right, rgb(var(--accent-fill-rgb) / 0.2), transparent 65%);
}

/* Same pop-in the compact block uses; .in comes from the reveal observer. */
html[data-js] .bmx-media.in .match-pin { opacity: 1; scale: 1; }

/* --- the demo shell --- */

.bmx-demo {
  margin-top: clamp(2rem, 5vw, 3.25rem);
  border: 1px solid var(--border);
  border-radius: 1.15rem;
  background: var(--surface-raised);
  padding: clamp(1rem, 2.5vw, 1.6rem);
  box-shadow: 0 1px 2px rgb(var(--text-rgb) / 0.05), 0 18px 40px -28px rgb(var(--text-rgb) / 0.35);
}

.bmx-demo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.7rem;
  margin-bottom: 0.9rem;
}

.bmx-demo-label {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.bmx-demo-hint { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

.bmx-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.bmx-tab {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 0.95rem;
  border-radius: 2rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-dim);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.bmx-tab:hover { border-color: var(--accent); color: var(--text); }

.bmx-tab[aria-selected="true"] {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-accent);
}

.bmx-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bmx-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 0.9rem; }

/* --- stage: property on the left, ranked results on the right --- */

.bmx-stage {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 56rem) {
  .bmx-stage { grid-template-columns: 17rem minmax(0, 1fr); gap: 1.4rem; }
}

.bmx-prop {
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--surface-2);
  padding: 1.1rem;
  align-self: start;
}

.bmx-prop p { margin: 0; }

.bmx-prop-kind {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.55rem !important;
}

.bmx-prop-addr { font-weight: 700; font-size: var(--fs-h3); font-family: var(--font-display); }
.bmx-prop-city { color: var(--text-dim); font-size: var(--fs-sm); }

.bmx-prop-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  margin-top: 0.7rem !important;
}

.bmx-prop-spec { color: var(--text-muted); font-size: var(--fs-sm); }

.bmx-sig-head {
  margin-top: 1rem !important;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}

.bmx-sig { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.4rem; }

.bmx-sig li {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.bmx-sig .ico { color: var(--ok); flex: 0 0 auto; margin-top: 0.15em; width: 1em; height: 1em; }

/* --- results --- */

.bmx-readout {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.7rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-dim);
}

.bmx-readout .ico { color: var(--accent); width: 1em; height: 1em; }

.bmx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; counter-reset: none; }

.bmx-row {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--surface);
}

.bmx-row:first-child {
  border-color: rgb(var(--accent-rgb) / 0.45);
  background: rgb(var(--accent-tint-rgb) / 0.55);
}

.bmx-rank {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text-muted);
  text-align: center;
}

.bmx-row:first-child .bmx-rank { color: var(--accent); }

.bmx-who { display: grid; gap: 0.15rem; min-width: 0; }

.bmx-name { font-weight: 700; }

.bmx-focus { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.bmx-tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.08rem 0.45rem;
  border-radius: 1rem;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
}

.bmx-why { font-size: var(--fs-sm); color: var(--text-muted); text-wrap: pretty; }

.bmx-score { display: grid; gap: 0.3rem; justify-items: end; width: 6.5rem; }

.bmx-score-num { display: flex; align-items: baseline; gap: 0.25rem; }

.bmx-score-num b {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}

.bmx-score-num i {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.bmx-row:first-child .bmx-score-num b { color: var(--accent); }

.bmx-bar {
  display: block;
  width: 100%;
  height: 0.3rem;
  border-radius: 1rem;
  background: rgb(var(--text-rgb) / 0.1);
  overflow: hidden;
}

.bmx-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  width: calc(var(--v, 0) * 1%);
  background: var(--accent-fill);
}

.bmx-row:not(:first-child) .bmx-bar-fill { background: rgb(var(--accent-rgb) / 0.55); }

.bmx-note {
  margin: 1rem 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* --- next steps --- */

.bmx-next { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

.bmx-next-h { font-size: var(--fs-h3); margin-bottom: 0.75rem; }

.bmx-next ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.bmx-next li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.bmx-next li > span:last-child { text-wrap: balance; }

.bmx-next-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.6rem;
  background: rgb(var(--accent-tint-rgb) / 0.9);
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
}

.bmx-next-ico .ico { color: var(--accent); width: 1.05rem; height: 1.05rem; }
.bmx-next strong { color: var(--text); display: block; }

/* --- the run animation ---
   Switching property replays the ranking: rows stagger in and each bar grows
   from zero to its score. Purely additive — the panel is already correct
   before it runs, so a failed script or reduced motion loses nothing. */

[data-js] .bmx-panel[data-run] .bmx-row {
  animation: bmx-in 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--d) * 60ms);
}

[data-js] .bmx-panel[data-run] .bmx-bar-fill {
  animation: bmx-fill 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--d) * 60ms);
}

@keyframes bmx-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

@keyframes bmx-fill {
  from { width: 0; }
  to { width: calc(var(--v, 0) * 1%); }
}

.bmx-demo[data-scoring] .bmx-results { position: relative; }

.bmx-demo[data-scoring] .bmx-results::after {
  content: attr(data-scoring-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 0.7rem;
  background: rgb(var(--surface-rgb) / 0.72);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  [data-js] .bmx-panel[data-run] .bmx-row,
  [data-js] .bmx-panel[data-run] .bmx-bar-fill { animation: none; }
  .bmx-demo[data-scoring] .bmx-results::after { content: none; }
}

@media (max-width: 34rem) {
  .bmx-row { grid-template-columns: 1.4rem minmax(0, 1fr); }
  .bmx-score { grid-column: 2; justify-items: start; width: 100%; }
  .bmx-score-num { order: -1; }
}