/* DESIGN.md → Verified hero reference (2026-10-24).
   All em measurements below use the documented 16px reference unit and source
   artwork geometry. Paint, outlines, control radii and UI tracking use the
   original DESIGN tokens. This module replaces the earlier approximate hero. */
body { background:var(--color-carbon); } /* Carbon outer frame. */
html { scrollbar-width:none; }
body::-webkit-scrollbar { display:none; } /* Source geometry: keep full viewport width; native scrolling remains enabled. */
.hero,.site-header { font-size:var(--reference-unit); }
.hero {
  margin:calc(var(--reference-unit) * .75);
  margin-bottom:calc(var(--reference-unit) * .375); /* Source adjoining panels share two half-gutters. */
  padding-inline:3em; /* Scaled spacing12 outer / spacing48 inner. */
  border-radius:var(--radius-cards-elevated); /* DO 4: card40. */
}
.marquee {
  display:flex;
  align-items:center;
  height:calc(var(--reference-unit) * 2);
  background:var(--color-lavender);
  color:var(--color-carbon);
  font-size:calc(var(--reference-unit) * .8); /* Verified announcement caption. */
  line-height:var(--leading-heading);
  border:var(--border-standard); /* DO 3: interactive announcement outline. */
}
.marquee-group { display:flex; }
.marquee-unit { padding-inline:calc(var(--reference-unit) * .75);white-space:nowrap; }
.site-header {
  top:calc(var(--reference-unit) * 4.5);
  left:calc(var(--reference-unit) * 2.5);
  right:calc(var(--reference-unit) * 2.5);
  align-items:center;
  /* DO 3/6 unchanged: isolate fixed controls from WebKit's animated 3D content layers. */
  isolation:isolate;
  transform:translateZ(0);
  transition:top .6s cubic-bezier(.16,1,.3,1);
}
.site-header[data-scrolled] { top:calc(var(--reference-unit) * 1.5); }
.header-cluster { flex-direction:row;align-items:center;gap:.25em; }
.header-actions { order:2;align-items:center;gap:.25em; }
.desktop-nav { display:flex;gap:.25em; }
.site-header .pill-button,
.hero-copy .pill-button {
  font-size:calc(var(--reference-unit) * .9375); /* body-lg15 scaled. */
  font-weight:var(--font-weight-bold);
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-button); /* DO 6: Aeonik700/.030. */
  padding:1em 2em; /* Verified control padding relative to body-lg. */
}
.site-header .logo,.site-header .plus-button {
  width:calc(var(--reference-unit) * 3.125);
  height:calc(var(--reference-unit) * 3.125);
  padding:0; /* Verified circular control artwork bounds. */
}
.site-header .brand-symbol { width:calc(var(--reference-unit) * 1.25);height:auto; }
.plus-button { position:relative; }
.plus-button::before,.plus-button::after {
  content:"";
  position:absolute;
  background:var(--color-carbon);
  width:calc(var(--reference-unit) * 1.625);
  height:var(--border-width); /* DO 3: same 1px black cross outline. */
}
.plus-button::after { rotate:90deg; }
.hero-intro {
  min-height:calc(100svh - var(--reference-unit) * 1.5);
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2.5em; /* Scaled spacing40. */
  z-index:1;
}
.hero-visual {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1em; /* Scaled spacing16. */
}
.hero-wordmark { width:auto;padding:0;z-index:auto; }
.hero-accessible-title {
  position:absolute;
  width:var(--border-width);
  height:var(--border-width);
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap; /* Accessible H1 accompanies the original SVG brand artwork. */
}
.home-logo-wrap { display:flex;align-items:center;justify-content:center;font-size:.9em; }
.home-logo-letter-list {
  display:flex;align-items:center;flex-direction:column;
  height:35em;margin-block:-3em;position:relative;overflow:clip;
}
.home-logo-letter-el { display:flex;position:relative;flex:none;height:100%; }
.home-logo-letter-el.is--s { width:10.9em; }
.home-logo-letter-el.is--l { width:8.5em; }
.home-logo-letter-el.is--u { width:10.85em;padding-top:.1em; }
.home-logo-letter-el.is--h { width:10.95em; }
.home-logo-letter { position:absolute;width:100%;height:100%;padding:.3em; }
.home-logo-letter svg { width:100%;height:100%;max-width:none; }
/* The five letter cell dimensions above are SVG artwork geometry in DESIGN.md,
   not new font settings. All remaining display titles keep Lateral800/.75–.80. */
.hero .tagline {
  font-size:4em; /* Scaled heading64, Aeonik500/1. */
  line-height:var(--leading-heading);
  letter-spacing:-.01em; /* Typography → Aeonik body tracking. */
  white-space:nowrap;
}
.hero-copy { padding:0; }
.hero-copy .button-row { margin:0;gap:.75em;align-items:center; }
.hero-copy .pill-button { min-height:calc(var(--reference-unit) * 4.2); }
.hero-copy .chrome-download { padding-block:0;padding-left:.6em;gap:.6em; }
.hero-copy .chrome-icon { width:3em;height:3em; }
.hero-ribbon-wrap {
  position:absolute;
  z-index:0;
  top:-8%;left:0;right:-.5%;
  display:flex;justify-content:center;
  pointer-events:none;
}
.hero-ribbon-wrap .hero-ribbon {
  position:absolute;
  width:135em;max-width:98%;height:auto;
  top:0;left:auto;
  transform:rotate(-10deg);
  z-index:auto;
}
.hero-visual > .sticker-art { position:absolute;z-index:3;aspect-ratio:1;height:auto; }
.hero-visual .hero-rocket { width:12em;top:-2em;left:0;transform:translateX(-70%); }
.hero-visual .hero-coin { width:7.5em;top:4em;left:52%;right:auto;transform:none; }
.hero-visual .hero-wallet { width:16em;right:0;bottom:auto;transform:translateX(60%); }
.hero-visual .hero-check { width:15em;left:-18%;bottom:5%;transform:none; }
/* DO 2/5: original rocket, smiley, wallet and mint coin; blue ribbon behind them. */
.hero .device-showcase {
  max-width:80em;padding:8em 0 15em;margin-inline:auto;
} /* Verified media geometry: spacing128 top, source15 units bottom. */
.hero .phone-video { width:100%;margin-left:0; }
.device-caption {
  position:absolute;bottom:8em;left:0;right:0;
  justify-content:center;margin:0;
} /* Pause remains available without changing source video/QR flow. */
.device-caption .eyebrow { display:none; }
@media (hover:hover) {
  .device-caption { opacity:0;pointer-events:none; }
  .device-showcase:is(:hover,:focus-within) .device-caption { opacity:1;pointer-events:auto; }
} /* Keep a keyboard/hover pause control while preserving the source's resting frame. */
@media (max-width:991px) {
  .site-header { align-items:flex-start; }
  .header-cluster { flex-direction:column;align-items:flex-end;max-width:15em; }
  .header-actions { order:0; }
  .desktop-nav { display:grid;grid-template-columns:repeat(2,1fr); }
  .site-header .pill-button { min-height:calc(var(--reference-unit) * 3); }
  .hero-ribbon-wrap { top:8%; }
  .hero .phone-video { width:140%;margin-left:-20%; }
}
@media (max-width:767px) {
  .hero { padding-inline:1.25em;border-radius:var(--radius-cards); } /* spacing20/card20. */
  .site-header { left:calc(var(--reference-unit) * 1.25);right:calc(var(--reference-unit) * 1.25); }
  .home-logo-wrap { font-size:.575em; }
  .hero .tagline { font-size:1.875em; } /* Scaled heading-sm30. */
  .hero-copy .button-row { flex-direction:column;gap:1em; }
  .hero-copy .pill-button { min-height:calc(var(--reference-unit) * 3.75); }
  .hero-copy .chrome-icon { width:2.5em;height:2.5em; }
  .hero-visual .hero-rocket { width:9em;top:0;transform:translateY(-70%); }
  .hero-visual .hero-coin { width:6em;top:0;left:auto;right:1em;transform:translateY(-90%); }
  .hero-visual .hero-wallet { width:12em;right:-2em;bottom:-25em;transform:none; }
  .hero-visual .hero-check { width:10em;left:-2em;bottom:-20em; }
  .hero .device-showcase { padding-bottom:8em; }
  .device-caption { bottom:3em; }
}
@media (max-width:479px) {
  .site-header { top:calc(var(--reference-unit) * 4); }
  .site-header[data-scrolled] { top:calc(var(--reference-unit) * .75); }
  .hero-intro { padding-top:4em;gap:2em; } /* Scaled spacing64/32. */
  .home-logo-wrap { font-size:.4em; }
  .hero-copy .chrome-download { padding-left:1em; }
  .hero-ribbon-wrap { top:3%; }
  .hero-ribbon-wrap .hero-ribbon { width:35em;max-width:none; }
  .hero-visual .hero-coin { transform:translateY(-80%); }
  .hero-visual .hero-wallet { width:14em;right:0;bottom:-26em; }
  .hero-visual .hero-check { width:12em;left:0;bottom:-22em; }
  .hero .phone-video { width:180%;margin-left:-40%; }
}
@media (prefers-reduced-motion:reduce) { .site-header { transition:none; } }