/* Act 1, the hero. One lit object per side, floating on a studio light with
   a reflection; the same payment route drawn across both sides and the
   divider. Copy on top, object below. Owner: builder H.
   Planes, back to front (data-sc-parallax rate, px per act):
     light   0.6   soft radial back light
     obj     0.3   the object, its route and the token
     fore   -0.4   near specks                                              */
#act-hero {
  /* hero progress: 0 at load, 1 as the hero leaves (flow p runs 0.5 to 1) */
  --hp: clamp(0, calc((var(--sc-p, 0.5) - 0.5) * 2), 1);
  --hero-top: clamp(6rem, 13vh, 8rem);
}
/* Desktop: both sides share two subgrid rows (copy, stage) so the two
   objects sit at one height and the payment route runs straight across
   the divider. Headlines align at the top; the stage row takes the rest. */
@media (min-width: 900px) {
  .hero__split { grid-template-rows: auto minmax(0, 1fr); }
  #act-hero .hero__side {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    align-content: start;
    min-height: 100svh;
    padding-top: var(--hero-top);
    padding-bottom: clamp(2rem, 5vh, 3.5rem);
  }
  /* The hero's own era marker sits above the copy, so no road clearance;
     the headline may run 1rem past the gutter (the road's amplitude in the
     hero is 25px, so it still clears the trail). */
  .hero-copy :is(.display, .sub) { margin-right: 0; }
  .hero-copy .hero-head { margin-right: -1rem; max-width: none; }
}

/* ---------------------------------------------------------- the copy -- */
.hero-copy { position: relative; z-index: 2; align-self: start; }
/* As large as two lines allow in a half column: "Disputable later." is 7.04em
   wide, so 5.9vw (85px at 1440, 75px at 1280) is the two-line ceiling; both
   sides share the size. display: flow-root keeps the kinetic line padding
   (.14em pad, -.14em margin) inside the h1 box, so the visual gap to the
   subtext is the same 24px on both sides. */
.hero-head { font-size: min(var(--t-hero), 5.9vw); display: flow-root; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 2rem;
}
/* The hero's primary is the biggest pill on the page: 56px, 18px w600. The
   quiet "Log in" beside it is the same height. */
.btn--hero {
  min-height: 3.5rem;
  padding-inline: 2rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.hero-actions__login { padding-inline: 1.5rem; }

/* ------------------------------------------------------- brand row -- */
/* The account links live in the fixed bar (chrome.html); the hero keeps
   only the brand row, and only on phones. The divider cap carries the mark
   on desktop. */
.hero-top { display: none; }
.hero-brand {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;
  min-height: 2.5rem;
  color: var(--sc-ink);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.hero-brand__mark { width: 1.4rem; height: 1.4rem; fill: var(--vp-blue); flex: none; }
.hero-brand__facet { opacity: 0.45; }
@media (pointer: coarse) {
  .hero-brand { min-height: 2.75rem; }
}

/* ---------------------------------------------------------- the stage -- */
.hero-stage {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(16rem, 36vh, 26rem);
  margin: 4rem calc(-1 * var(--vp-gutter)) 0;
  align-self: start;
  box-sizing: content-box;
  clip-path: inset(-40% 0);
}
.hero-plane {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.hero-plane--light { z-index: 0; }
.hero-plane--obj   { z-index: 1; }
.hero-plane--fore  { z-index: 2; }
.hero-light {
  width: 70%;
  aspect-ratio: 1;
  max-height: 110%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--studio-light, rgba(255, 255, 255, 0.05)), transparent 68%);
}
.hero-plane--obj { align-items: flex-start; }
.hero-obj {
  height: 82%;
  max-width: 100%;
  aspect-ratio: 720 / 420;
  will-change: transform;
}
.hero-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero-svg.obj__reflect { height: auto; aspect-ratio: 720 / 420; margin-top: calc(0.5rem - 11.7%); }
.hero-plane--fore .hero-svg { height: 100%; max-width: 100%; aspect-ratio: 720 / 420; }

/* ---------------------------------------------------------- the route -- */
.hero-route { fill: none; stroke-linecap: round; }
.hero-route--past { stroke: var(--sc-ink-soft); stroke-width: 1.5px; opacity: 0.35; }
/* The floor: a soft contact shadow under each standing object, both at y=378
   in the same viewBox, so the two objects stand on one line. */
.hero-floor { fill: #000000; opacity: 0.55; }
.hero-route--light { stroke: var(--vp-blue); stroke-width: 1.5px; opacity: 0.6; }
.hero-route--halo { stroke: var(--vp-blue); stroke-width: 7px; opacity: 0.14; }

/* ---------------------------------------------------------- the past -- */
.hero-matte { fill: url(#g-matte); }
.hero-matte--card { fill: url(#g-matte); }
.hero-screen { fill: var(--sc-canvas); opacity: 0.85; }
.hero-screen__line { fill: var(--sc-ink-soft); opacity: 0.7; }
.hero-screen__line--soft { opacity: 0.35; }
.hero-keys rect { fill: var(--sc-ink); opacity: 0.1; }
.hero-chip { fill: var(--sc-ink-soft); opacity: 0.55; }
.hero-emboss { fill: none; stroke: var(--sc-ink); stroke-width: 3px; stroke-linecap: round; opacity: 0.14; }
.hero-slot, .hero-slit { fill: var(--sc-canvas); opacity: 0.9; }
.hero-screen__on { fill: #86868B; }
.hero-ring__track, .hero-ring__arc { fill: none; stroke-width: 2.5px; }
.hero-ring__track { stroke: #86868B; opacity: 0.18; }
.hero-ring__arc { stroke: #A1A1A6; stroke-linecap: round; }
.hero-receipt { fill: #A1A1A6; }
.hero-receipt__line { fill: #4A4A4F; opacity: 0.55; }

/* -------------------------------------------------------- the future -- */
.hero-coin__body { fill: url(#g-coin); }
.hero-coin__inner { fill: none; stroke: #FFFFFF; stroke-width: 1px; opacity: 0.25; }
.hero-coin__mark { fill: #FFFFFF; opacity: 0.92; }
.hero-coin__mark--facet { opacity: 0.5; }
/* The device: a gradient-lit body with an inner shadow (#f-inset) under the
   rim gradient, a top sheen; no outline anywhere. */
.hero-wallet__body { fill: url(#g-device); }
.hero-wallet__sheen { fill: url(#g-sheen); }
.hero-wallet__screen { fill: var(--sc-canvas); opacity: 0.92; }
/* The slot the coin enters by: a dark mouth on the left face, its lip lit
   by hero.js while the coin passes through. */
.hero-wallet__slot { fill: var(--sc-canvas); opacity: 0.95; }
.hero-wallet__slotlit { fill: #9DB8FF; }
.hero-wallet__lit { fill: var(--vp-blue); }
.hero-wallet__track { fill: var(--sc-ink-soft); opacity: 0.18; }
.hero-wallet__bar { fill: #FFFFFF; }
.hero-wallet__bar--soft { fill: var(--sc-ink-soft); opacity: 0.35; }
.hero-ok__ring { fill: var(--vp-blue); }
.hero-ok__tick { fill: none; stroke: #FFFFFF; stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; }
/* The light trail: the one permitted glow, an object behind the coin. */
.hero-trail { fill: url(#hero-g-trail); }
.hero-trail--soft { opacity: 0.35; }
.hero-trail-a { stop-color: var(--vp-blue); stop-opacity: 0; }
.hero-trail-b { stop-color: #9DB8FF; stop-opacity: 0.9; }

/* Specks drift a little as the hero scrolls out. */
.hero-dust circle { fill: var(--sc-ink-soft); opacity: 0.5; }
.hero-dust--lit circle { fill: #FFFFFF; opacity: 0.45; }
.hero-dust { transform: translate3d(calc(var(--hp) * 24px), calc(var(--hp) * -10px), 0); }

/* ------------------------------------------------------- short screens -- */
@media (min-width: 900px) and (max-height: 820px) {
  #act-hero { --hero-top: clamp(5rem, 11vh, 6rem); }
  .hero-stage { height: 15rem; }
  .hero-actions { margin-top: 1.5rem; }
}

/* ------------------------------------------------------------ phones -- */
/* Stacked (below 900): the sides keep their DOM order, so the page reads
   past copy, past object, future copy with the CTA, future object, each
   side one block on its own ground with the shared band (label + era) from
   base.css. The brand row stays on top. Rhythm: 96 top and bottom, head to
   sub 24, sub to object 64. */
@media (max-width: 899.98px) {
  .hero-top {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    padding: 0.5rem var(--vp-gutter);
    background: var(--card-canvas);
  }
  .hero-brand { display: inline-flex; }
  /* Never below the 48px floor; "Disputable later." may wrap on narrow phones. */
  .hero-head { font-size: max(3rem, min(var(--t-hero), 12.2vw)); text-wrap: pretty; }
  .hero-copy { position: relative; padding: 0; }
  .hero-actions { margin-top: 1.5rem; }
  .hero-actions .btn--hero { width: 100%; }
  .hero-stage {
    height: auto;
    aspect-ratio: 720 / 420;
    margin: 4rem calc(-1 * var(--vp-gutter)) 0;
    padding: 0 0 2rem;
  }
  .hero-obj { width: 100%; height: 100%; }
  /* At phone scale the planes hold still; depth comes from overlap. */
  .hero-plane { transform: none !important; }
  .hero-plane--fore { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #act-hero { --hp: 0; }
}

/* Load intro, once, at most 1.4s: the objects rise in and the route draws
   from the terminal across the divider into the coin and on into the wallet.
   The intro only touches the object wrapper, the light and the route's dash;
   everything hero.js scrubs (card, screens, coin, wallet) is never animated
   here, so the intro hands over to the scroll state without a jump. */
@media (prefers-reduced-motion: no-preference) {
  .hero-obj { animation: hero-obj-in 1100ms var(--ease-stage) backwards; }
  .hero-light { animation: hero-fade-in 1200ms var(--ease-fade) backwards; }
  .hero-route { stroke-dasharray: 1; animation: hero-draw 600ms var(--ease-stage) backwards; }
  .hero-route--past { animation-delay: 300ms; }
  [data-hero="r1"], [data-hero="r1h"] { animation-delay: 600ms; }
  [data-hero="r2"], [data-hero="r2h"] { animation-delay: 800ms; }
  #act-hero h1 .sc-split__i { animation: hero-line-in 900ms var(--ease-stage) 80ms backwards; }
  #act-hero h1 .sc-split--line + .sc-split--line .sc-split__i { animation-delay: 200ms; }
  #act-hero .sub, #act-hero .hero-actions, .hero-copy--card .hero-head { animation: hero-rise 900ms var(--ease-fade) backwards; }
  #act-hero .sub { animation-delay: 320ms; }
  #act-hero .hero-actions { animation-delay: 440ms; }
}
@keyframes hero-obj-in {
  from { opacity: 0; transform: translateY(28px) scale(0.94); }
}
@keyframes hero-fade-in { from { opacity: 0; } }
@keyframes hero-rise {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
}
@keyframes hero-line-in {
  from { transform: translateY(104%); opacity: 0; }
}
/* Routes carry pathLength="1": the stroke draws from its start (the terminal
   edge, or the divider on the VanPay side). */
@keyframes hero-draw { from { stroke-dashoffset: 1; } }