:root {
  color-scheme: dark;
  --bg: #0b0b0c;
  --surface: #111113;
  --surface-raised: #151517;
  --text: #f1eee7;
  --muted: #aaa69d;
  --quiet: #918d85;
  --champagne: #c9b58c;
  --champagne-soft: #a89878;
  --cream: #d8c7a7;
  --cream-ink: #111113;
  --line: rgba(241, 238, 231, 0.12);
  --line-strong: rgba(201, 181, 140, 0.3);
  --radius: 1.25rem;
  --max: 76rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-space: clamp(5.5rem, 10vw, 9rem);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 20rem;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main { overflow: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 100;
  left: 1rem;
  top: 1rem;
  padding: .65rem 1rem;
  background: var(--text);
  color: var(--bg);
  border-radius: .5rem;
  transform: translateY(-200%);
}

.skip-link:focus { transform: translateY(0); }

.shell { width: min(calc(100% - (var(--gutter) * 2)), var(--max)); margin-inline: auto; }

.site-header {
  position: relative;
  z-index: 20;
  height: 5.5rem;
  display: flex;
  align-items: center;
}

.nav { display: flex; align-items: center; justify-content: space-between; width: 100%; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 2.75rem;
  text-decoration: none;
}

.brand-mark { width: 2.4rem; height: 2.4rem; object-fit: contain; }

.brand-name {
  font-size: .83rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.nav-links,
.home-nav-links { display: flex; align-items: center; gap: clamp(1.1rem, 3vw, 2.25rem); }

.nav-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  text-decoration: none;
  font-size: .9rem;
  transition: color 160ms ease;
}

.nav-link:hover,
.nav-link:focus-visible { color: var(--text); }

.home-header {
  position: sticky;
  top: .75rem;
  width: 100%;
  height: 0;
  align-items: flex-start;
  pointer-events: none;
}

.nav-float {
  width: min(calc(100% - (var(--gutter) * 2)), var(--max));
  margin-inline: auto;
  min-height: 4.25rem;
  padding: .55rem 1.1rem;
  border: 1px solid rgba(241, 238, 231, .11);
  border-radius: 1.25rem;
  background: rgba(17, 17, 19, .68);
  box-shadow: 0 .85rem 2.5rem rgba(0, 0, 0, .13);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, backdrop-filter 180ms ease;
}

.home-header.is-scrolled .nav-float {
  border-color: rgba(201, 181, 140, .22);
  background: rgba(14, 14, 16, .92);
  box-shadow: 0 1rem 2.75rem rgba(0, 0, 0, .32);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.home-header .brand { flex: 0 1 auto; }
.home-nav-links { flex: 1; justify-content: center; }

.nav-download {
  flex: 0 0 auto;
  min-height: 2.75rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding-inline: .65rem;
  color: var(--text);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
}

.home-nav-links .nav-link[aria-current="location"] { color: var(--text); }
.home-nav-links .nav-link[aria-current="location"]::after { content: ""; width: .28rem; height: .28rem; margin-left: .42rem; border-radius: 50%; background: var(--champagne); }

h1, h2, h3, p, figure { margin-top: 0; }

.eyebrow {
  margin: 0 0 1.25rem;
  color: var(--champagne);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.home .eyebrow { font-size: .78rem; }

h1 {
  margin-bottom: 1.75rem;
  max-width: 12ch;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.6rem, 8.4vw, 7.5rem);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: .91;
  text-wrap: balance;
}

h2 {
  margin-bottom: 0;
  max-width: 16ch;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 5.4vw, 5.2rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.home-hero {
  min-height: calc(100svh - 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(24rem, .77fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
  padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(6rem, 11vw, 9rem);
}

.hero-copy-block { position: relative; z-index: 2; }
.home-hero h1 { max-width: 10ch; font-size: clamp(4.4rem, 8vw, 7.35rem); }

.hero-copy {
  max-width: 35rem;
  margin-bottom: 2.35rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.65;
}

.launch-state {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  margin: 0;
  padding: .65rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: .75rem;
  color: var(--text);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.hero-product {
  position: relative;
  min-height: clamp(42rem, 63vw, 51rem);
  display: grid;
  place-items: center end;
  isolation: isolate;
}

.hero-product::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: 21rem;
  height: 21rem;
  right: 4rem;
  top: 24%;
  border-radius: 50%;
  background: rgba(201, 181, 140, .09);
  filter: blur(42px);
}

.hero-orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(201, 181, 140, .16);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.hero-orbit--one { width: min(38rem, 100%); height: 16rem; right: 0; top: 25%; }
.hero-orbit--two { width: min(31rem, 88%); height: 11rem; right: 0; top: 43%; opacity: .5; }

.device {
  position: relative;
  margin: 0;
  padding: .48rem;
  overflow: hidden;
  background: #0f0f10;
  border: 1px solid rgba(241, 238, 231, .2);
  border-radius: 2.7rem;
  box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, .34);
}

.device img { width: 100%; height: auto; border-radius: 2.25rem; }

.device-speaker {
  position: absolute;
  z-index: 2;
  top: .85rem;
  left: 50%;
  width: 2.8rem;
  height: .22rem;
  border-radius: 1rem;
  background: rgba(11, 11, 12, .72);
  transform: translateX(-50%);
}

.device--hero { width: min(100%, 22.8rem); transform: rotate(2.5deg); }

.product-fragment {
  position: absolute;
  z-index: -1;
  left: -1.5rem;
  bottom: 6.5rem;
  width: 12rem;
  height: 18rem;
  margin: 0;
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: 1.35rem;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .32);
  transform: rotate(-5deg);
}

.product-fragment img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.hero-caption {
  position: absolute;
  right: 1rem;
  bottom: 0;
  margin: 0;
  color: var(--quiet);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-caption span { margin-right: .65rem; color: var(--champagne); }

.how-section {
  padding: var(--section-space) 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.editorial-head { max-width: 58rem; margin-bottom: clamp(4rem, 8vw, 7rem); }
.editorial-head h2 { max-width: 13ch; }

.flow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(17rem, .62fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: end;
}

.flow-visual {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1fr) minmax(0, .75fr);
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  align-items: center;
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
}

.flow-shot {
  position: relative;
  width: 100%;
  margin: 0;
  padding: .35rem;
  overflow: hidden;
  background: #0c0c0d;
  border: 1px solid var(--line);
  border-radius: 1.8rem;
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .28);
}

.flow-shot img { width: 100%; height: auto; border-radius: 1.5rem; }

.flow-shot figcaption {
  position: absolute;
  left: .9rem;
  bottom: .9rem;
  padding: .42rem .7rem;
  border: 1px solid rgba(241, 238, 231, .18);
  border-radius: 999px;
  background: rgba(11, 11, 12, .9);
  color: var(--champagne);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.flow-shot--spot { transform: rotate(-3deg); }
.flow-shot--identify { z-index: 2; }
.flow-shot--collect { transform: rotate(3deg); }

.flow-steps { margin: 0; padding: 0; list-style: none; }

.flow-steps li { padding: 0 0 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.flow-steps li:last-child { margin-bottom: 0; }

.flow-steps span {
  display: block;
  margin-bottom: .85rem;
  color: var(--champagne-soft);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.flow-steps h3 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.45; letter-spacing: -.025em; }

.flow-story-mobile { display: none; }

.collection-section {
  padding: var(--section-space) 0;
  background: var(--cream);
  color: var(--cream-ink);
}

.collection-section .eyebrow { color: #675a45; }

.collection-grid,
.sets-grid {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}

.collection-copy h2 { max-width: 10ch; }
.collection-copy > p:last-child,
.sets-copy > p:last-child { max-width: 30rem; margin: 1.8rem 0 0; color: #5e574d; font-size: 1.1rem; }

.device--garage { justify-self: end; width: min(100%, 28.5rem); border-color: rgba(17, 17, 19, .3); }
.device--sets { justify-self: end; width: min(100%, 27rem); border-color: rgba(17, 17, 19, .3); }

.sets-grid {
  grid-template-columns: minmax(22rem, .75fr) minmax(0, .8fr);
  margin-top: clamp(8rem, 16vw, 15rem);
  padding-top: clamp(7rem, 12vw, 10rem);
  border-top: 1px solid rgba(17, 17, 19, .18);
}

.device--sets { justify-self: start; }
.sets-copy h2 { max-width: 10ch; }

.download-section {
  position: relative;
  padding: clamp(6.5rem, 12vw, 10rem) 0;
  text-align: center;
  border-top: 1px solid var(--line);
}

.download-section::before {
  content: "";
  position: absolute;
  width: 20rem;
  height: 20rem;
  left: 50%;
  top: 48%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(201, 181, 140, .06);
  filter: blur(40px);
  transform: translate(-50%, -50%);
}

.download-inner { display: flex; flex-direction: column; align-items: center; }
.download-mark { width: 5rem; height: 5rem; margin-bottom: 2.5rem; }
.download-section h2 { max-width: 10ch; margin-inline: auto; }
.download-section > .shell > p:not(.eyebrow) { max-width: 31rem; margin: 1.6rem auto 2.5rem; color: var(--muted); font-size: 1.1rem; }
.launch-state--centered { margin-top: 2.5rem; }

.site-footer { padding: 2.2rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { min-height: 2.75rem; display: inline-flex; align-items: center; text-decoration: none; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--text); }
.footer-copy { text-align: right; }
.footer-contact { color: var(--quiet); }
.footer-brand p { margin: .65rem 0 0; color: var(--quiet); font-size: .78rem; }

.home-footer { padding: 3.5rem 0; }
.home-footer .footer-inner { align-items: start; }

.privacy-main { padding: clamp(4rem, 8vw, 8rem) 0 8rem; }
.privacy-hero { max-width: 52rem; padding-bottom: clamp(4rem, 8vw, 7rem); }
.privacy-hero h1 { max-width: none; font-size: clamp(3.4rem, 7vw, 6.5rem); }
.privacy-intro { max-width: 42rem; color: var(--muted); font-size: 1.1rem; }
.policy-dates { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-bottom: 2rem; color: var(--muted); font-size: .92rem; }
.policy-dates p { margin-bottom: 0; }
.policy-email { color: var(--text); text-decoration-color: var(--champagne-soft); text-underline-offset: .22em; }
.policy-email:hover, .policy-email:focus-visible { color: var(--champagne); }
.policy-layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(3rem, 8vw, 8rem); border-top: 1px solid var(--line); padding-top: 3rem; }
.policy-nav { position: sticky; top: 2rem; align-self: start; }
.policy-nav p { color: var(--champagne-soft); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; }
.policy-nav ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; counter-reset: policy; }
.policy-nav a { color: var(--quiet); text-decoration: none; font-size: .85rem; }
.policy-nav a:hover, .policy-nav a:focus-visible { color: var(--text); }
.policy-content { max-width: 46rem; }
.policy-section { scroll-margin-top: 2rem; padding: 0 0 3rem; margin-bottom: 3rem; border-bottom: 1px solid var(--line); }
.policy-section:last-child { margin-bottom: 0; }
.policy-section h2 { margin-bottom: 1rem; font-size: clamp(1.65rem, 3vw, 2.25rem); font-weight: 500; letter-spacing: -.035em; }
.policy-section h3 { margin: 1.6rem 0 .65rem; color: var(--text); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.policy-section p { margin-bottom: 0; color: var(--muted); }
.policy-section p + p { margin-top: 1rem; }
.policy-section ul { margin: 1rem 0 0; padding-left: 1.3rem; color: var(--muted); }
.policy-section .policy-steps { margin: 1rem 0 0; padding-left: 1.3rem; color: var(--muted); }
.policy-section li { padding-left: .3rem; }
.policy-section li + li { margin-top: .55rem; }
.policy-number { margin-bottom: .6rem !important; color: var(--champagne-soft) !important; font-size: .72rem; font-weight: 600; letter-spacing: .14em; }

:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; border-radius: .2rem; }

@media (max-width: 1100px) {
  .home-hero { grid-template-columns: minmax(0, 1fr) minmax(21rem, .72fr); gap: 3rem; }
  .home-hero h1 { font-size: clamp(4rem, 7.5vw, 6rem); }
  .flow-layout { grid-template-columns: minmax(0, 1fr) minmax(16rem, .7fr); gap: 3rem; }
  .collection-grid, .sets-grid { gap: 4rem; }
}

@media (max-width: 900px) {
  .flow-layout { grid-template-columns: 1fr; gap: 4rem; }
  .flow-visual {
    grid-template-columns: minmax(0, .75fr) minmax(0, 1fr) minmax(0, .75fr);
    gap: clamp(.6rem, 2vw, 1rem);
  }
  .flow-shot--spot,
  .flow-shot--collect { transform: none; }
  .flow-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2rem; }
}

@media (max-width: 800px) {
  :root { --gutter: clamp(1.125rem, 5vw, 2rem); }
  .site-header { height: 4.75rem; }
  .home-header { top: .6rem; height: 0; }
  .nav-float { min-height: 3.9rem; padding: .45rem .8rem; border-radius: 1rem; }
  .home-nav-links { display: none; }
  .nav-download { flex: 0 0 auto; }
  .home-hero { min-height: auto; grid-template-columns: 1fr; gap: 3rem; padding: 4rem 0 5.5rem; }
  .home-hero h1 { font-size: clamp(3.25rem, 13vw, 4rem); }
  .hero-product { min-height: 0; place-items: center; }
  .device--hero { width: min(60vw, 15.5rem); transform: none; }
  .product-fragment,
  .hero-caption,
  .hero-orbit { display: none; }
  .flow-layout { display: none; }
  .flow-story-mobile { display: grid; gap: 4.5rem; }
  .mobile-story-card { display: grid; gap: 1.75rem; justify-items: center; }
  .mobile-story-shot { width: min(58vw, 14rem); transform: none; }
  .mobile-story-steps { display: grid; grid-template-columns: 1fr; width: 100%; }
  .mobile-story-steps li:last-child { margin-bottom: 0; }
  .collection-grid, .sets-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .collection-copy { max-width: 35rem; }
  .device--garage, .device--sets { justify-self: center; width: min(66vw, 18rem); }
  .sets-grid { margin-top: 8rem; }
  .sets-copy { order: -1; }
  .footer-inner { grid-template-columns: 1fr; justify-items: start; }
  .footer-copy { text-align: left; }
  .policy-layout { grid-template-columns: 1fr; gap: 3rem; }
  .policy-nav { position: static; }
  .policy-nav ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .brand { gap: .55rem; }
  .brand-mark { width: 2rem; height: 2rem; }
  .brand-name { font-size: .74rem; letter-spacing: .14em; }
  .nav-download { font-size: .8rem; }
  .nav-links { gap: .85rem; }
  .nav-link { font-size: .84rem; }
  .home-hero { padding-top: 3.5rem; }
  .home-hero h1 { font-size: clamp(3.1rem, 13vw, 3.55rem); }
  .hero-copy { font-size: 1rem; }
  .launch-state { width: 100%; justify-content: center; text-align: center; }
  .device--hero { width: min(60vw, 14.5rem); border-radius: 2.2rem; }
  .device img { border-radius: 1.9rem; }
  .editorial-head { margin-bottom: 3.5rem; }
  .editorial-head h2 { max-width: 100%; font-size: clamp(2.65rem, 11.5vw, 3.5rem); }
  .editorial-head h2 span { display: block; }
  .flow-story-mobile { gap: 4rem; }
  .mobile-story-card { gap: 1.5rem; }
  .mobile-story-shot { width: min(58vw, 13.5rem); border-radius: 1.3rem; }
  .flow-shot img { border-radius: 1.1rem; }
  .flow-shot figcaption { left: .65rem; bottom: .65rem; padding: .35rem .55rem; font-size: .75rem; }
  .mobile-story-steps { width: calc(100% - .5rem); }
  .mobile-story-steps h3 { overflow-wrap: anywhere; }
  .mobile-story-steps li { padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
  .collection-section { padding: 5.5rem 0; }
  .collection-copy h2, .sets-copy h2 { font-size: clamp(2.8rem, 12vw, 3.5rem); }
  .device--garage, .device--sets { width: min(66vw, 17rem); }
  .sets-grid { margin-top: 5.5rem; padding-top: 5.5rem; }
  .download-section h2 { font-size: clamp(3.2rem, 14vw, 4.5rem); }
  .policy-nav ol { grid-template-columns: 1fr; }
  .footer-links { flex-wrap: wrap; gap: .4rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Visual composition stage — real Marque app captures */
.v2-hero,
.v2-story,
.v2-garage,
.v2-sets,
.v2-final { position: relative; overflow: clip; }

.v2-hero { min-height: calc(100svh - 5rem); border-bottom: 1px solid var(--line); }
.v2-hero-grid { min-height: calc(100svh - 5rem); display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; padding-block: clamp(4.5rem, 7vw, 7.5rem); }
.v2-hero-copy { position: relative; z-index: 2; max-width: 38rem; }
.v2-hero-copy h1 { max-width: 8.5ch; margin-bottom: 1.65rem; font-size: clamp(4.2rem, 7vw, 7.25rem); }
.v2-lede { max-width: 33rem; margin: 0 0 2.25rem; color: var(--muted); font-size: clamp(1.05rem, 1.3vw, 1.18rem); line-height: 1.65; }

.v2-hero-stage { position: relative; min-height: clamp(38rem, 52vw, 49rem); isolation: isolate; }
.v2-stage-glow { position: absolute; z-index: -2; right: 6%; top: 16%; width: min(31rem, 74%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(201,181,140,.14), rgba(201,181,140,0) 67%); filter: blur(10px); }
.v2-phone { position: relative; margin: 0; padding: .42rem; overflow: hidden; border: 1px solid rgba(241,238,231,.2); border-radius: 2.25rem; background: #111113; box-shadow: 0 2.2rem 4.5rem rgba(0,0,0,.38); }
.v2-phone img { width: 100%; height: auto; border-radius: 1.9rem; }
.v2-phone--hero-garage { position: absolute; z-index: 1; right: 5%; top: 0; width: min(68%, 25rem); transform: rotate(2.4deg); }
.v2-phone--hero-card { position: absolute; z-index: 2; left: 0; bottom: 6%; width: min(44%, 16.75rem); transform: rotate(-7deg); }
.v2-stage-note { position: absolute; right: 2%; bottom: 1.5%; margin: 0; color: var(--quiet); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.v2-stage-note span { color: var(--champagne); margin-right: .65rem; }

.v2-story { padding-block: var(--section-space); background: #101012; }
.v2-section-head { max-width: 51rem; margin-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.v2-section-head h2 { max-width: 10ch; }
.v2-story-grid { display: grid; grid-template-columns: minmax(17rem, .68fr) minmax(0, 1.32fr); gap: clamp(3rem, 8vw, 9rem); align-items: center; }
.v2-story-copy { display: grid; gap: 0; }
.v2-story-step { padding: 1.65rem 0; border-top: 1px solid var(--line); }
.v2-story-step:last-child { border-bottom: 1px solid var(--line); }
.v2-story-step span { display: block; margin-bottom: .75rem; color: var(--champagne); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.v2-story-step h3 { max-width: 22rem; margin: 0; font-size: clamp(1.15rem, 1.7vw, 1.42rem); font-weight: 500; line-height: 1.36; letter-spacing: -.025em; }
.v2-story-screens { position: relative; min-height: clamp(34rem, 53vw, 45rem); isolation: isolate; }
.v2-story-screens::before { content: ""; position: absolute; z-index: -1; left: 9%; right: 5%; bottom: 12%; height: 38%; border: 1px solid rgba(201,181,140,.18); border-radius: 50%; transform: rotate(-9deg); }
.v2-phone--spot { position: absolute; z-index: 1; left: 0; bottom: 7%; width: min(32%, 12rem); transform: rotate(-7deg); opacity: .93; }
.v2-phone--identify { position: absolute; z-index: 2; left: 18%; top: 0; width: min(39%, 14.5rem); transform: rotate(-2deg); }
.v2-phone--results { position: absolute; z-index: 3; right: 6%; top: 10%; width: min(39%, 14.5rem); transform: rotate(4deg); }
.v2-phone--collect { position: absolute; z-index: 4; right: 0; bottom: 1%; width: min(31%, 11.5rem); transform: rotate(8deg); }

.v2-garage { padding-block: clamp(6.5rem, 11vw, 11rem); background: #d8c7a7; color: var(--cream-ink); }
.v2-garage-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(19rem, 1.22fr); gap: clamp(3rem, 9vw, 10rem); align-items: center; }
.v2-garage .eyebrow { color: #675a45; }
.v2-garage-copy h2 { max-width: 8ch; }
.v2-garage-copy > p:not(.eyebrow):not(.v2-detail-line) { max-width: 30rem; margin: 1.8rem 0 0; color: #5e574d; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.65; }
.v2-detail-line { margin: 2.25rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(17,17,19,.22); color: #675a45; font-size: .77rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.v2-garage-screen { width: min(100%, 36rem); justify-self: end; margin: 0; padding: .55rem; overflow: hidden; border: 1px solid rgba(17,17,19,.35); border-radius: 2.7rem; background: #111113; box-shadow: 0 2.4rem 4.8rem rgba(29,24,17,.26); }
.v2-garage-screen img { width: 100%; height: auto; border-radius: 2.15rem; }

.v2-sets { padding-block: var(--section-space); background: #0d0d0f; }
.v2-sets-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(17rem, .85fr); gap: clamp(3rem, 8vw, 9rem); align-items: center; }
.v2-sets-screens { position: relative; min-height: clamp(35rem, 52vw, 46rem); }
.v2-phone--sets-overview { position: absolute; z-index: 1; left: 2%; top: 0; width: min(60%, 22.5rem); transform: rotate(-3deg); }
.v2-phone--set-detail { position: absolute; z-index: 2; right: 2%; bottom: 0; width: min(49%, 18.5rem); transform: rotate(5deg); }
.v2-sets-copy h2 { max-width: 8ch; }
.v2-sets-copy > p:last-child { max-width: 29rem; margin: 1.8rem 0 0; color: var(--muted); font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.65; }

.v2-final { padding-block: clamp(7rem, 12vw, 11rem); text-align: center; border-top: 1px solid var(--line); }
.v2-final::before { content: ""; position: absolute; left: 50%; top: 44%; width: min(34rem, 90vw); aspect-ratio: 1; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(201,181,140,.12), rgba(201,181,140,0) 68%); transform: translate(-50%, -50%); }
.v2-final-inner { display: flex; flex-direction: column; align-items: center; }
.v2-final h2 { max-width: 8ch; margin-inline: auto; }
.v2-final p:not(.eyebrow):not(.launch-state) { max-width: 30rem; margin: 1.5rem auto 0; color: var(--muted); font-size: 1.08rem; }

@media (min-width: 801px) and (max-width: 1100px) {
  .v2-hero-grid { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: clamp(2rem, 4vw, 3.5rem); padding-top: clamp(7rem, 11vw, 8rem); }
  .v2-hero-copy h1 { font-size: clamp(3.65rem, 6.8vw, 5rem); }
  .v2-hero-stage { min-height: 39rem; }
  .v2-phone--hero-garage { width: min(68%, 22rem); right: 0; }
  .v2-phone--hero-card { width: min(45%, 14rem); }
  .v2-story-grid { grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.28fr); gap: 3.5rem; }
  .v2-garage-grid { grid-template-columns: minmax(0, .75fr) minmax(18rem, 1.25fr); gap: 3.5rem; }
  .v2-sets-grid { gap: 3.5rem; }
}

@media (max-width: 800px) {
  .v2-hero { min-height: 0; }
  .v2-hero-grid { min-height: 0; grid-template-columns: 1fr; gap: 3rem; padding-block: 6.75rem 5.25rem; }
  .v2-hero-copy h1 { font-size: clamp(3.2rem, 13vw, 4.25rem); }
  .v2-hero-stage { min-height: clamp(31rem, 132vw, 39rem); width: min(100%, 29rem); justify-self: center; }
  .v2-phone--hero-garage { right: 3%; width: min(65%, 17rem); }
  .v2-phone--hero-card { left: 5%; bottom: 8%; width: min(42%, 11rem); }
  .v2-stage-note { display: none; }
  .v2-section-head { margin-bottom: 3.5rem; }
  .v2-section-head h2 { max-width: 11ch; }
  .v2-story-grid, .v2-garage-grid, .v2-sets-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .v2-story-copy { order: 2; }
  .v2-story-screens { order: 1; min-height: clamp(31rem, 130vw, 39rem); width: min(100%, 30rem); justify-self: center; }
  .v2-phone--identify, .v2-phone--collect { display: none; }
  .v2-phone--spot { left: 4%; bottom: 4%; width: min(52%, 15rem); transform: rotate(-5deg); }
  .v2-phone--results { right: 4%; top: 0; width: min(56%, 16.5rem); transform: rotate(4deg); }
  .v2-garage { padding-block: 5.5rem; }
  .v2-garage-screen { width: min(100%, 24rem); justify-self: center; }
  .v2-sets-screens { min-height: clamp(32rem, 126vw, 39rem); width: min(100%, 30rem); justify-self: center; }
  .v2-phone--sets-overview { width: min(59%, 18rem); }
  .v2-phone--set-detail { width: min(49%, 14.5rem); }
}

@media (max-width: 520px) {
  .v2-hero-grid { padding-block: 6.35rem 4.5rem; }
  .v2-lede { font-size: 1rem; }
  .v2-hero-stage { min-height: clamp(27rem, 133vw, 32rem); }
  .v2-phone { padding: .3rem; border-radius: 1.65rem; }
  .v2-phone img { border-radius: 1.35rem; }
  .v2-phone--hero-garage { width: min(67%, 15.5rem); }
  .v2-phone--hero-card { width: min(42%, 9.75rem); }
  .v2-story, .v2-sets { padding-block: 5.5rem; }
  .v2-section-head h2 { font-size: clamp(2.65rem, 11.5vw, 3.5rem); }
  .v2-story-grid { gap: 3rem; }
  .v2-story-screens { min-height: clamp(27rem, 130vw, 32rem); }
  .v2-phone--spot { width: min(54%, 12.5rem); }
  .v2-phone--results { width: min(58%, 13.5rem); }
  .v2-story-step { padding-block: 1.35rem; }
  .v2-garage-copy h2, .v2-sets-copy h2 { font-size: clamp(2.8rem, 12vw, 3.6rem); }
  .v2-sets-screens { min-height: clamp(27rem, 128vw, 32rem); }
  .v2-final { padding-block: 6.5rem; }
  .v2-final h2 { font-size: clamp(3rem, 13vw, 4rem); }
}

/* Motion and interaction polish — deliberately quiet and transform-based. */
@keyframes marque-enter {
  from { opacity: 0; transform: translate3d(0, .8rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes marque-hero-garage {
  from { opacity: 0; transform: translate3d(0, 1.15rem, 0) rotate(2.4deg) scale(.985); }
  to { opacity: 1; transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) rotate(2.4deg) scale(1); }
}

@keyframes marque-hero-card {
  from { opacity: 0; transform: translate3d(0, 1rem, 0) rotate(-7deg) scale(.985); }
  to { opacity: 1; transform: translate3d(var(--card-x, 0px), var(--card-y, 0px), 0) rotate(-7deg) scale(1); }
}

html.motion-ready .motion-hero-eyebrow { animation: marque-enter .42s cubic-bezier(.22, .8, .28, 1) both; }
html.motion-ready .motion-hero-title { animation: marque-enter .56s cubic-bezier(.22, .8, .28, 1) .08s both; }
html.motion-ready .motion-hero-copy { animation: marque-enter .48s cubic-bezier(.22, .8, .28, 1) .17s both; }
html.motion-ready .motion-hero-cta { animation: marque-enter .42s cubic-bezier(.22, .8, .28, 1) .25s both; }

.v2-phone--hero-garage {
  transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) rotate(2.4deg);
  transition: transform .26s ease-out;
}

.v2-phone--hero-card {
  transform: translate3d(var(--card-x, 0px), var(--card-y, 0px), 0) rotate(-7deg);
  transition: transform .26s ease-out;
}

html.motion-ready .v2-phone--hero-garage { animation: marque-hero-garage .7s cubic-bezier(.22, .8, .28, 1) .12s both; }
html.motion-ready .v2-phone--hero-card { animation: marque-hero-card .64s cubic-bezier(.22, .8, .28, 1) .25s both; }

html.motion-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  transition: opacity .48s cubic-bezier(.22, .8, .28, 1), transform .58s cubic-bezier(.22, .8, .28, 1);
  will-change: opacity, transform;
}

html.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

html.motion-ready .v2-phone--spot[data-reveal] { transform: translate3d(0, 1rem, 0) rotate(-7deg); }
html.motion-ready .v2-phone--spot[data-reveal].is-visible { transform: translate3d(0, 0, 0) rotate(-7deg); }
html.motion-ready .v2-phone--identify[data-reveal] { transform: translate3d(0, 1rem, 0) rotate(-2deg); }
html.motion-ready .v2-phone--identify[data-reveal].is-visible { transform: translate3d(0, 0, 0) rotate(-2deg); }
html.motion-ready .v2-phone--results[data-reveal] { transform: translate3d(0, 1rem, 0) rotate(4deg); }
html.motion-ready .v2-phone--results[data-reveal].is-visible { transform: translate3d(0, 0, 0) rotate(4deg); }
html.motion-ready .v2-phone--collect[data-reveal] { transform: translate3d(0, 1rem, 0) rotate(8deg); }
html.motion-ready .v2-phone--collect[data-reveal].is-visible { transform: translate3d(0, 0, 0) rotate(8deg); }
html.motion-ready .v2-phone--sets-overview[data-reveal] { transform: translate3d(0, 1rem, 0) rotate(-3deg); }
html.motion-ready .v2-phone--sets-overview[data-reveal].is-visible { transform: translate3d(0, 0, 0) rotate(-3deg); }
html.motion-ready .v2-phone--set-detail[data-reveal] { transform: translate3d(0, 1rem, 0) rotate(5deg); }
html.motion-ready .v2-phone--set-detail[data-reveal].is-visible { transform: translate3d(0, 0, 0) rotate(5deg); }

@media (hover: hover) and (pointer: fine) {
  .brand, .nav-link, .nav-download, .footer-links a {
    transition: color .2s ease, opacity .2s ease, transform .2s ease, border-color .2s ease, background-color .2s ease;
  }
  .brand:hover { opacity: .82; }
  .nav-link:hover { color: var(--champagne); transform: translateY(-1px); }
  .nav-download:hover { color: var(--champagne); border-color: rgba(201,181,140,.52); transform: translateY(-1px); }
  .footer-links a:hover { color: var(--champagne); transform: translateY(-1px); }
}

.nav-download:active, .nav-link:active, .footer-links a:active { transform: translateY(0) scale(.99); }

@media (max-width: 800px) {
  html.motion-ready .v2-phone--spot[data-reveal] { transform: translate3d(0, 1rem, 0) rotate(-5deg); }
  html.motion-ready .v2-phone--spot[data-reveal].is-visible { transform: translate3d(0, 0, 0) rotate(-5deg); }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready .motion-hero-eyebrow,
  html.motion-ready .motion-hero-title,
  html.motion-ready .motion-hero-copy,
  html.motion-ready .motion-hero-cta,
  html.motion-ready .v2-phone--hero-garage,
  html.motion-ready .v2-phone--hero-card { animation: none; }

  html.motion-ready [data-reveal],
  html.motion-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  html.motion-ready .v2-phone--spot[data-reveal],
  html.motion-ready .v2-phone--spot[data-reveal].is-visible { transform: rotate(-7deg); }
  html.motion-ready .v2-phone--identify[data-reveal],
  html.motion-ready .v2-phone--identify[data-reveal].is-visible { transform: rotate(-2deg); }
  html.motion-ready .v2-phone--results[data-reveal],
  html.motion-ready .v2-phone--results[data-reveal].is-visible { transform: rotate(4deg); }
  html.motion-ready .v2-phone--collect[data-reveal],
  html.motion-ready .v2-phone--collect[data-reveal].is-visible { transform: rotate(8deg); }
  html.motion-ready .v2-phone--sets-overview[data-reveal],
  html.motion-ready .v2-phone--sets-overview[data-reveal].is-visible { transform: rotate(-3deg); }
  html.motion-ready .v2-phone--set-detail[data-reveal],
  html.motion-ready .v2-phone--set-detail[data-reveal].is-visible { transform: rotate(5deg); }
}

@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  html.motion-ready .v2-phone--spot[data-reveal],
  html.motion-ready .v2-phone--spot[data-reveal].is-visible { transform: rotate(-5deg); }
}

/* First-party analytics consent */
.consent-banner {
  position: fixed;
  z-index: 30;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(27.5rem, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px solid rgba(241, 238, 231, .2);
  border-radius: 1rem;
  background: rgba(18, 18, 20, .92);
  box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, .34);
  color: var(--text);
  backdrop-filter: blur(14px);
}

.consent-banner p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
}

.consent-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .9rem;
}

.consent-actions a {
  margin-right: auto;
  color: var(--champagne);
  font-size: .84rem;
  text-decoration: none;
}

.consent-button {
  min-height: 2.7rem;
  padding: .55rem .9rem;
  border: 1px solid rgba(201, 181, 140, .52);
  border-radius: .7rem;
  background: var(--champagne);
  color: #121214;
  font: inherit;
  font-size: .84rem;
  font-weight: 650;
  cursor: pointer;
}

.consent-button--secondary {
  background: transparent;
  color: var(--text);
  border-color: rgba(241, 238, 231, .26);
}

@media (hover: hover) and (pointer: fine) {
  .consent-actions a, .consent-button { transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
  .consent-actions a:hover { color: var(--text); }
  .consent-button:hover { transform: translateY(-1px); }
  .consent-button--secondary:hover { border-color: rgba(201, 181, 140, .52); color: var(--champagne); }
}

.consent-button:active { transform: scale(.99); }

@media (max-width: 520px) {
  .consent-banner { left: 1rem; right: 1rem; width: auto; }
  .consent-actions { gap: .45rem; }
  .consent-button { padding-inline: .78rem; }
}
