@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("fonts/karla-variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}
/* The supplied process artwork asks for Archivo by name. Without it every
   label in the graphic silently falls back to Arial, which is what made the
   inlined version look unlike the original. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --obsidian: #0d0f10;
  --black: #080909;
  --surface: #151819;
  --surface-2: #1d2121;
  --line: #343a38;
  --green: #00f287;
  --green-soft: #baffdd;
  --white: #f4f7f5;
  --titanium: #c7cfcb;
  --muted: #9ca8a3;
  --display: "Karla", "Segoe UI", system-ui, sans-serif;
  --body: "Karla", "Segoe UI", system-ui, sans-serif;
  --edge: max(20px, calc((100vw - 1200px) / 2));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--obsidian);
  color: var(--white);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
::selection { background: var(--green); color: var(--black); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .92;
  text-transform: uppercase;
}
h1 { font-size: clamp(3.25rem, 8vw, 7.6rem); }
h2 { font-size: clamp(2.65rem, 6vw, 5.7rem); }
h3 { font-size: clamp(1.45rem, 2.3vw, 2rem); letter-spacing: -.04em; }
h1 span, h2 span { color: var(--green); }

.wrap { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
.eyebrow {
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
}
.skip {
  position: absolute;
  top: -70px;
  left: 16px;
  z-index: 20;
  padding: 12px 18px;
  background: var(--green);
  color: var(--black);
  font-weight: 800;
  transition: top .18s ease;
}
.skip:focus { top: 16px; }

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 22px;
  border: 1px solid var(--green);
  border-radius: 2px;
  background: var(--green);
  color: var(--black);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-align: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.button:hover { background: var(--white); border-color: var(--white); transform: translateY(-2px); }
.button--small { min-height: 42px; padding: 11px 16px; font-size: 12px; }
.button--outline { background: transparent; color: var(--green); }
.button--outline:hover { background: var(--green); color: var(--black); }

.photo { position: relative; overflow: hidden; background: var(--surface-2); }
.photo img { filter: saturate(.72) contrast(1.08) brightness(.72); }
.photo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,242,135,.08), transparent 45%, rgba(0,0,0,.35));
  content: "";
  pointer-events: none;
}
.photo__note {
  position: absolute;
  bottom: 16px;
  left: 18px;
  z-index: 2;
  color: var(--titanium);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Header */
.masthead {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 25px;
  min-height: 80px;
  border-bottom: 1px solid var(--line);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--white);
  font-family: var(--display);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: 1;
}
.wordmark__mark {
  display: inline-grid;
  width: 24px;
  height: 24px;
  margin-right: 4px;
  place-items: center;
  border: 2px solid var(--green);
  border-radius: 50%;
  color: var(--green);
  font-size: 16px;
  letter-spacing: -.12em;
}
.wordmark b { color: var(--titanium); font-weight: 400; }
.wordmark i { color: var(--green); font-style: normal; }
.masthead nav { display: flex; justify-content: center; gap: clamp(14px, 2.3vw, 32px); }
.nav-toggle {
  display: none;
  width: 35px;
  height: 35px;
  padding: 7px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--white);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  margin: 4px 0;
  background: currentColor;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle:hover { border-color: var(--green); color: var(--green); }
.masthead.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.masthead.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.masthead.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.masthead nav a {
  color: var(--titanium);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.masthead nav a:hover { color: var(--green); }
.masthead__contact { position: relative; justify-self: end; }
.masthead__contact-trigger {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--green);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.masthead__contact-trigger:hover, .masthead__contact.is-open .masthead__contact-trigger {
  border-color: var(--green);
  background: var(--green);
  color: var(--black);
}
.masthead__contact-signal { display: grid; width: 15px; height: 15px; flex: 0 0 auto; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.masthead__contact-signal span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.masthead__contact-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1; }
.masthead__contact-copy b { font-size: 11px; letter-spacing: .1em; }
.masthead__contact-copy small { font-size: 7px; font-weight: 700; letter-spacing: .12em; opacity: .72; }
.masthead__contact-chevron { margin-left: 2px; font-size: 16px; line-height: .5; transform: translateY(-2px); transition: transform .18s ease; }
.masthead__contact.is-open .masthead__contact-chevron { transform: translateY(1px) rotate(180deg); }
.masthead__contact-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 10px);
  right: 0;
  width: 235px;
  padding: 6px;
  border: 1px solid var(--green);
  background: var(--black);
  box-shadow: 8px 8px 0 rgba(0,242,135,.13);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.masthead__contact.is-open .masthead__contact-menu { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; }
.masthead__contact-menu a { display: grid; grid-template-columns: 21px 1fr auto; align-items: center; gap: 10px; min-height: 56px; padding: 8px 9px; border-bottom: 1px solid var(--line); }
.masthead__contact-menu a:last-child { border-bottom: 0; }
.masthead__contact-menu a:hover, .masthead__contact-menu a:focus-visible { background: var(--surface); }
.masthead__contact-menu svg { width: 17px; height: 17px; fill: none; stroke: var(--green); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.masthead__contact-menu b, .masthead__contact-menu small { display: block; }
.masthead__contact-menu b { color: var(--white); font-size: 13px; }
.masthead__contact-menu small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.masthead__contact-menu strong { color: var(--green); font-size: 15px; }
.langswitch {
  padding: 8px 10px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.langswitch:hover { border-color: var(--green); color: var(--green); }

/* Simulated payout banner */
.payout-banner {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.payout-banner__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.payout-banner__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  white-space: nowrap;
}
.payout-banner__asterisk {
  position: relative;
  top: -.08em;
  color: var(--green);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.payout-banner__asterisk:hover {
  color: var(--white);
}
.footer__legal-note {
  scroll-margin-top: 24px;
}
.payout-banner__viewport { min-width: 0; overflow: hidden; }
.payout-banner__track {
  display: flex;
  width: max-content;
}
.payout-banner__group {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
}
.payout-card {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-height: 0;
  padding: 4px 0;
  border: 0;
  background: transparent;
  white-space: nowrap;
}
.payout-card b {
  color: var(--titanium);
  font-size: 12px;
  font-weight: 700;
}
.payout-card strong {
  color: var(--green);
  font-size: 15px;
  letter-spacing: -.04em;
}
.payout-card em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .04em;
}
/* Hero */
.hero {
  position: relative;
  padding: clamp(48px, 6vw, 88px) 0 0;
  background:
    radial-gradient(circle at 78% 30%, rgba(0,242,135,.11), transparent 27rem),
    linear-gradient(130deg, var(--obsidian) 0%, var(--obsidian) 65%, #111e18 100%);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
  gap: clamp(38px, 8vw, 125px);
  align-items: start;
}
.hero__intro { min-width: 0; }
.hero__intro h1 {
  max-width: 100%;
  margin-top: 0;
  /* ELECTRONICS is wider than the viewport-based heading scale at some
     desktop widths. Keep the word inside the intro column instead of letting
     it paint into the promise card's space. */
  font-size: clamp(3.25rem, 7.2vw, 7rem);
}
@supports (font-size: 1cqw) {
  .hero__intro { container-type: inline-size; }
  .hero__intro h1 { font-size: clamp(3.25rem, min(8vw, 15.5cqw), 7.6rem); }
}
.hero__intro h1 .hero__fast {
  color: var(--green);
  text-shadow: 0 0 18px rgba(0,242,135,.28);
}
.hero__intro h1 .hero__cash {
  display: inline-block;
  color: var(--white);
  text-shadow: 0 0 14px rgba(0,242,135,.26);
  transform-origin: 52% 74%;
  will-change: transform, color, text-shadow;
}
.hero__lede {
  max-width: 38em;
  margin-top: 31px;
  color: var(--titanium);
  font-size: 18px;
  line-height: 1.5;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__fine { margin-top: 18px; color: var(--muted); font-size: 13px; }
.hero__side { position: relative; min-height: 0; padding-top: 0; }
.hero__number {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  /* Matches .hero__poster so the rule under the number lines up with the card
     edge instead of running past it. */
  max-width: 470px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}
.hero__number span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.hero__number a { color: var(--green); font-size: clamp(1.65rem, 3.4vw, 2.65rem); font-weight: 800; letter-spacing: -.06em; }
.hero__number a:hover { color: var(--white); }
.hero__poster {
  position: relative;
  display: block;
  max-width: 470px;
  margin-top: 0;
  overflow: hidden;
  border: 1px solid rgba(0,242,135,.34);
  border-radius: 18px;
  background: var(--black);
  box-shadow: 12px 14px 0 rgba(0,242,135,.10), 0 26px 60px rgba(0,0,0,.34);
}
.hero__poster::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(186,255,221,.10);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}
/* The poster is inlined rather than loaded through <img> so it can reach the
   self-hosted typefaces and the brand tokens below. Inside an <img> the SVG is
   a separate document: every label fell back to Arial and the greens were
   hard-coded off-brand. */
.promise-poster {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--display);
}
.pp-bg { fill: #070a09; }
.pp-dot { fill: var(--green); opacity: .13; }
.pp-glow-in { stop-color: var(--green); stop-opacity: .13; }
.pp-glow-out { stop-color: var(--green); stop-opacity: 0; }
.pp-kicker { fill: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .22em; }
.pp-badge { fill: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.pp-h1 { fill: var(--white); font-size: 84px; font-weight: 800; letter-spacing: -.045em; }
.pp-h1--outline { fill: none; stroke: var(--green); stroke-width: 2.2; }
.pp-rule { fill: var(--green); }
.pp-tile-bg { fill: #101514; stroke: #21312b; stroke-width: 1.5; }
.pp-bracket { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; opacity: .8; }
.pp-ring-glow { fill: none; stroke: var(--green); stroke-width: 16; opacity: .05; }
.pp-ring-halo { fill: none; stroke: var(--green); stroke-width: 8; opacity: .2; }
.pp-ring { fill: none; stroke: var(--green); stroke-width: 2.6; }
/* Motion-only highlight that travels the ring; the solid ring above stays put. */
.pp-ring-arc { fill: none; stroke: var(--green-soft); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.pp-ico { fill: none; stroke: var(--green-soft); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pp-ico--green { stroke: var(--green); }
.pp-ico-fill { fill: var(--green-soft); }
.pp-glyph { fill: var(--green-soft); font-size: 13px; font-weight: 700; }
.pp-spark { fill: none; stroke: var(--green-soft); stroke-width: 1.6; stroke-linecap: round; opacity: .8; }
.pp-spark--dim { opacity: .3; }
.pp-pin-body { fill: #101514; stroke: var(--green); stroke-width: 2.6; }
.pp-shadow { fill: var(--green); opacity: .22; }
.pp-label-box { fill: none; stroke: var(--green); stroke-width: 2.4; }
.pp-bar { fill: var(--green-soft); opacity: .75; }
.pp-trend { fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
/* Motion-only: stays invisible unless the animation below drives it. */
.pp-scan { fill: var(--green); opacity: 0; }
.pp-num { fill: none; stroke: var(--green); stroke-width: 1.2; font-size: 30px; font-weight: 800; letter-spacing: .04em; }
.pp-label { fill: var(--white); font-size: 17px; font-weight: 800; letter-spacing: .09em; }
.pp-sub { fill: var(--muted); font-size: 11px; font-weight: 500; }
.pp-footline { stroke: var(--line); stroke-width: 1; }
.pp-foot { fill: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .13em; }
.pp-foot--green { fill: var(--green); }
/* French runs longer in every slot on this poster and SVG text does not wrap,
   so the longest strings are sized down rather than left to run past the tile
   edge. */
:lang(fr) .pp-h1 { font-size: 70px; }
:lang(fr) .pp-label { font-size: 14.5px; letter-spacing: .06em; }
:lang(fr) .pp-sub { font-size: 10px; }
:lang(fr) .pp-kicker, :lang(fr) .pp-badge { font-size: 11px; letter-spacing: .16em; }
:lang(fr) .pp-foot { font-size: 11px; letter-spacing: .1em; }
.hero__side-note {
  max-width: 21em;
  margin-top: auto;
  color: var(--muted);
  font-size: 14px;
}
.hero__ticker { margin-top: 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.hero__ticker-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 48px; color: var(--titanium); font-size: 10px; font-weight: 800; letter-spacing: .2em; white-space: nowrap; }
.hero__ticker-inner span:nth-child(odd) { color: var(--green); }

/* Shared sections */
.section-heading { max-width: 650px; }
.section-heading h2 { margin-top: 26px; }
.section-heading > p:last-child { max-width: 35em; margin-top: 28px; color: var(--muted); font-size: 17px; }
.section-heading--wide { max-width: 820px; }

/* Three-step path */
.steps-section { padding: clamp(84px, 11vw, 150px) 0; background: var(--surface); }
.steps-visual { width: min(1168px, 100%); margin: 56px auto 0; background: transparent; }
.steps-visual > svg { display: block; width: 100%; height: auto; }
/* The supplied artwork is authored fully transparent and is revealed by the
   rules below once it is inlined, so the flat <img> would be a blank black
   box. Show the written steps until the inline SVG is in place. */
.steps-visual img { display: none; }
.steps-visual__fallback { display: grid; gap: 14px; margin: 0; padding: 28px 24px; color: var(--white); font-size: 15px; line-height: 1.45; list-style: none; }
.steps-visual__fallback strong { color: var(--green); }
.steps-visual.is-enhanced .steps-visual__fallback { display: none; }
/* The artwork ships rigged for motion with its timeline stripped out: pivot
   groups wrap everything meant to move, the payout ring sits in its own spin
   rig, and a green scan bar waits at opacity 0 over the shipping barcode.
   These rules drive that rig from outside the file.

   Never set `transform` on a group that carries a transform attribute — the
   CSS property replaces the attribute and the piece jumps across the panel.
   Animate the untransformed group the rig provides, with `transform-origin: 0 0`
   so the rig's own translate supplies the pivot. */
.steps-visual > svg > g {
  opacity: 0;
  animation: hiw-panel-in 1.2s cubic-bezier(.22,.61,.36,1) both;
}
.steps-visual > svg > g:nth-of-type(2) { animation-delay: .32s; }
.steps-visual > svg > g:nth-of-type(3) { animation-delay: .64s; }
/* The thin outline draws once; its heavier duplicate stays as a slow
   travelling highlight rather than a second static border. */
.steps-visual > svg > g > g > rect:nth-of-type(2) {
  animation: hiw-border-draw 2.1s cubic-bezier(.33,1,.68,1) both;
}
.steps-visual > svg > g > g > g:nth-of-type(1) > rect {
  stroke-dasharray: 190 1730;
  animation: hiw-border-trace 11s linear both infinite;
}
.steps-visual > svg > g:nth-of-type(2) > g > rect:nth-of-type(2),
.steps-visual > svg > g:nth-of-type(2) > g > g:nth-of-type(1) > rect { animation-delay: .32s; }
.steps-visual > svg > g:nth-of-type(3) > g > rect:nth-of-type(2),
.steps-visual > svg > g:nth-of-type(3) > g > g:nth-of-type(1) > rect { animation-delay: .64s; }
.steps-visual > svg > g > g > g:nth-of-type(2) > text {
  animation: hiw-numeral-in 1.2s cubic-bezier(.22,.61,.36,1) both;
  transform-box: fill-box;
  transform-origin: center;
}
.steps-visual > svg > g:nth-of-type(1) > g > g:nth-of-type(2) > text { animation-delay: .26s; }
.steps-visual > svg > g:nth-of-type(2) > g > g:nth-of-type(2) > text { animation-delay: .58s; }
.steps-visual > svg > g:nth-of-type(3) > g > g:nth-of-type(2) > text { animation-delay: .9s; }
.steps-visual > svg > g > g > text {
  opacity: 0;
  animation: hiw-text-in 1s cubic-bezier(.22,.61,.36,1) both;
}
.steps-visual > svg > g:nth-of-type(1) > g > text:nth-of-type(1) { animation-delay: .44s; }
.steps-visual > svg > g:nth-of-type(1) > g > text:nth-of-type(n+2) { animation-delay: .62s; }
.steps-visual > svg > g:nth-of-type(2) > g > text:nth-of-type(1) { animation-delay: .76s; }
.steps-visual > svg > g:nth-of-type(2) > g > text:nth-of-type(n+2) { animation-delay: .94s; }
.steps-visual > svg > g:nth-of-type(3) > g > text:nth-of-type(1) { animation-delay: 1.08s; }
.steps-visual > svg > g:nth-of-type(3) > g > text:nth-of-type(n+2) { animation-delay: 1.26s; }
/* The pivot-rigged artwork block: scale about the author's own centre. */
.steps-visual > svg > g > g > g:nth-of-type(3) > g {
  opacity: 0;
  animation: hiw-art-in 1.4s cubic-bezier(.22,.61,.36,1) .82s both;
  transform-box: view-box;
  transform-origin: 0 0;
}
.steps-visual > svg > g:nth-of-type(2) > g > g:nth-of-type(3) > g { animation-delay: 1.14s; }
.steps-visual > svg > g:nth-of-type(3) > g > g:nth-of-type(3) > g { animation-delay: 1.46s; }
/* Step 01 — the phone breathes and the camera drifts over it. */
.steps-visual > svg > g:nth-of-type(1) > g > g:nth-of-type(3) > g > g > g:nth-of-type(1) {
  animation: hiw-phone-bob 7.5s ease-in-out 2.6s infinite;
  transform-box: fill-box;
  transform-origin: center bottom;
}
.steps-visual > svg > g:nth-of-type(1) > g > g:nth-of-type(3) > g > g > g:nth-of-type(2) {
  animation: hiw-camera-drift 7.5s ease-in-out 3.1s infinite;
  transform-box: fill-box;
  transform-origin: center;
}
/* The ground shadow is the one piece the artwork leaves unrigged, so it sat
   still while the object above it moved. Contract it in counter-phase. */
.steps-visual > svg > g:nth-of-type(1) > g > g:nth-of-type(3) > g > g > ellipse {
  animation: hiw-shadow-ease 7.5s ease-in-out 2.6s infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.steps-visual > svg > g:nth-of-type(3) > g > g:nth-of-type(3) > g > g > ellipse {
  animation: hiw-shadow-ease 8s ease-in-out 3s infinite;
  transform-box: fill-box;
  transform-origin: center;
}
/* Step 02 — speed lines, the two counter-rotating ring arcs, the payout
   figure, the bolt, and the confirmation check. */
.steps-visual > svg > g:nth-of-type(2) > g > g:nth-of-type(3) > g > g > g:nth-of-type(1) {
  animation: hiw-speed 6.5s ease-in-out 2.8s infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.steps-visual > svg > g:nth-of-type(2) > g > g:nth-of-type(3) > g > g > g:nth-of-type(2) > circle:nth-of-type(1) {
  animation: hiw-ring-spin 26s linear infinite;
  transform-origin: 0 0;
}
.steps-visual > svg > g:nth-of-type(2) > g > g:nth-of-type(3) > g > g > g:nth-of-type(2) > circle:nth-of-type(2) {
  animation: hiw-ring-spin-back 19s linear infinite;
  transform-origin: 0 0;
}
.steps-visual > svg > g:nth-of-type(2) > g > g:nth-of-type(3) > g > g > text {
  animation: hiw-money-pulse 6.5s ease-in-out 2.8s infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.steps-visual > svg > g:nth-of-type(2) > g > g:nth-of-type(3) > g > g > g:nth-of-type(3) {
  animation: hiw-flash 6.5s ease-in-out 3.1s infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.steps-visual > svg > g:nth-of-type(2) > g > g:nth-of-type(3) > g > g > g:nth-of-type(4) path {
  animation: hiw-check-draw 6.5s cubic-bezier(.33,1,.68,1) 3.3s infinite;
}
/* Step 03 — the parcel drifts and the label scans. */
.steps-visual > svg > g:nth-of-type(3) > g > g:nth-of-type(3) > g > g > g:nth-of-type(1) {
  animation: hiw-box-drift 8s ease-in-out 3s infinite;
  transform-box: fill-box;
  transform-origin: center bottom;
}
.steps-visual > svg > g:nth-of-type(3) > g > g:nth-of-type(3) > g > g > g:nth-of-type(1) > g:nth-of-type(1) > g:nth-of-type(1) > rect:nth-of-type(2) {
  animation: hiw-label-scan 8s ease-in-out 3.4s infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes hiw-panel-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hiw-border-draw { from { stroke-dashoffset: 1920; } to { stroke-dashoffset: 0; } }
@keyframes hiw-border-trace { from { stroke-dashoffset: 1920; } to { stroke-dashoffset: 0; } }
@keyframes hiw-numeral-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hiw-text-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hiw-art-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hiw-ring-spin { to { transform: rotate(360deg); } }
@keyframes hiw-ring-spin-back { to { transform: rotate(-360deg); } }
@keyframes hiw-phone-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes hiw-camera-drift { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(2px, -4px) rotate(.8deg); } }
@keyframes hiw-speed { 0%, 100% { opacity: .5; transform: translateX(0); } 50% { opacity: 1; transform: translateX(-4px); } }
@keyframes hiw-money-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes hiw-flash { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes hiw-check-draw { 0% { stroke-dashoffset: 60; } 22%, 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 60; } }
@keyframes hiw-box-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes hiw-shadow-ease { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.94, .88); opacity: .78; } }
@keyframes hiw-label-scan {
  0%, 8% { opacity: 0; transform: translateX(0); }
  14% { opacity: .9; }
  38% { opacity: .9; transform: translateX(94px); }
  46%, 100% { opacity: 0; transform: translateX(94px); }
}
/* Cancelling the animations alone would leave the artwork at its authored
   hidden state, so reduced motion jumps straight to the finished frame. */
@media (prefers-reduced-motion: reduce) {
  /* Cancel the animations only. A blanket `transform: none` would also
     override the artwork's own transform attributes and scatter it. */
  .steps-visual > svg * { animation: none !important; }
  .steps-visual > svg g,
  .steps-visual > svg text { opacity: 1 !important; }
  .steps-visual > svg rect,
  .steps-visual > svg path { stroke-dashoffset: 0 !important; }
  /* The travelling highlight is a dashed segment; without its animation it
     has to become a whole border again. */
  .steps-visual > svg > g > g > g:nth-of-type(1) > rect { stroke-dasharray: none !important; }
  /* The scan bar is authored hidden and only exists while it sweeps. */
  .steps-visual > svg > g > g > g:nth-of-type(3) > g > g > g > g > g > rect:nth-of-type(2) { opacity: 0 !important; }
}

/* Direct quote panel */
.quote-section { padding: clamp(84px, 11vw, 150px) 0; background: var(--green); color: var(--black); }
.quote-grid { display: grid; grid-template-columns: minmax(0, .91fr) minmax(330px, .85fr); gap: clamp(44px, 8vw, 115px); align-items: center; }
.quote-section .eyebrow { color: var(--black); }
.quote-copy h2 { max-width: 9ch; margin-top: 24px; }
.quote-copy > p:not(.eyebrow) { max-width: 31em; margin-top: 28px; font-size: 18px; line-height: 1.5; }
.quote-checklist { margin-top: 33px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,.3); }
.quote-checklist p { margin-top: 8px; font-size: 14px; font-weight: 700; }
.quote-checklist span { display: inline-block; width: 22px; color: var(--black); font-size: 18px; }
.contact-panel { padding: clamp(25px, 4vw, 42px); background: var(--black); color: var(--white); box-shadow: 14px 14px 0 rgba(0,0,0,.15); }
.panel-kicker { color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.contact-panel h3 { margin-top: 18px; text-transform: none; }
.contact-panel__intro { margin-top: 14px; color: var(--titanium); font-size: 14px; }
.contact-actions { display: grid; gap: 8px; margin-top: 27px; }
.contact-action {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  color: var(--white);
  transition: border-color .18s ease, background .18s ease;
}
.contact-action:hover { border-color: var(--green); background: var(--surface); }
.contact-action--primary { border-color: var(--green); background: var(--green); color: var(--black); }
.contact-action--primary:hover { border-color: var(--white); background: var(--white); }
.contact-action__icon { font-size: 20px; font-weight: 800; text-align: center; }
.contact-action b, .contact-action small { display: block; }
.contact-action b { font-size: 14px; }
.contact-action small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.contact-action--primary small { color: rgba(0,0,0,.65); }
.contact-action--unavailable { color: var(--muted); cursor: not-allowed; opacity: .75; }
.contact-action--unavailable:hover { border-color: var(--line); background: transparent; }
.contact-panel__note { margin-top: 23px; color: var(--muted); font-size: 12px; line-height: 1.45; }

/* Difference / trust */
.difference-section { padding: clamp(84px, 11vw, 150px) 0; background: var(--obsidian); }
.difference-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 70px; }
.difference-card { min-height: 230px; padding: 25px 24px; border: 1px solid var(--line); background: var(--surface); }
.difference-card:hover { border-color: var(--green); }
.difference-card__icon { color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.difference-card h3 { margin-top: 35px; text-transform: none; }
.difference-card p { margin-top: 15px; color: var(--muted); font-size: 14px; }
.feature-image { height: clamp(300px, 42vw, 505px); margin-top: 75px; }
.feature-image__caption { position: absolute; right: 5%; bottom: 10%; z-index: 2; color: var(--white); font-family: var(--display); font-size: clamp(2rem, 4.4vw, 4.5rem); font-weight: 800; letter-spacing: -.07em; line-height: .9; text-align: right; text-transform: uppercase; }

/* Reviews */
.reviews-section { padding: clamp(84px, 10vw, 136px) 0; background: var(--surface); border-block: 1px solid var(--line); }
.reviews-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(45px, 10vw, 150px); align-items: start; }
.empty-state { min-height: 245px; padding: 31px 34px; border: 1px dashed #53615b; background: var(--obsidian); }
.empty-state__mark { color: var(--green); font-size: 42px; font-weight: 300; line-height: .7; }
.empty-state h3 { margin-top: 24px; text-transform: none; }
.empty-state > p:not(.empty-state__mark):not(.empty-state__note) { max-width: 34em; margin-top: 15px; color: var(--muted); font-size: 15px; }
.empty-state__note { margin-top: 23px; color: var(--green); font-size: 13px; font-weight: 700; }

/* GTA service area */
.service-section { padding: clamp(84px, 11vw, 150px) 0; background: var(--black); }
.service-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(45px, 9vw, 130px); align-items: center; }
.map-card { position: relative; aspect-ratio: 680 / 476; overflow: hidden; border: 1px solid var(--line); background: #08110e; box-shadow: 13px 13px 0 rgba(0,0,0,.25); }
.map-card__grid { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.map-card__grid > svg { display: block; width: 100%; height: 100%; }
.map-card .mo { opacity: 0; }
.map-card .flow { stroke-dasharray: 1 15; }
.map-card .ants { stroke-dasharray: 5 4; }
.map-card .ping { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .map-card .mo { opacity: 1; }
  .map-card .flow { animation: gta-map-flow 1.5s linear infinite; }
  .map-card .ants { animation: gta-map-ants 4s linear infinite; }
  .map-card .ping { animation: gta-map-ping 2.8s cubic-bezier(0,0,.2,1) infinite; }
  .map-card .drift1 { animation: gta-map-drift 8s ease-in-out infinite alternate; }
  .map-card .drift2 { animation: gta-map-drift 11s ease-in-out infinite alternate-reverse; }
}
@media (prefers-reduced-motion: reduce) {
  .map-card .mo { opacity: 0; }
  .map-card .flow, .map-card .ants, .map-card .ping, .map-card .drift1, .map-card .drift2 { animation: none !important; }
}
@keyframes gta-map-flow { to { stroke-dashoffset: -16; } }
@keyframes gta-map-ants { to { stroke-dashoffset: -18; } }
@keyframes gta-map-ping {
  0% { transform: scale(.35); opacity: .8; }
  70% { opacity: .3; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes gta-map-drift { from { transform: translateX(-7px); } to { transform: translateX(7px); } }
.service-copy h2 { margin-top: 26px; }
.service-copy > p:not(.eyebrow):not(.service-note) { margin-top: 28px; color: var(--muted); font-size: 17px; }
.service-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 35px; padding-block: 19px; border-block: 1px solid var(--line); }
.service-contact > div { min-width: 0; }
.service-contact__label, .footer__label { display: block; margin-bottom: 6px; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.service-contact a { display: block; color: var(--white); font-size: 21px; font-weight: 800; letter-spacing: -.04em; }
.service-contact a:hover { color: var(--green); }
.service-contact div > span:last-child { display: block; color: var(--titanium); font-size: 14px; line-height: 1.3; }
.service-note { margin-top: 15px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.service-copy .button { margin-top: 28px; }

/* FAQ */
.faq-section { padding: clamp(84px, 11vw, 150px) 0; background: var(--surface); }
.faq-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(40px, 9vw, 125px); align-items: start; }
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 700; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { color: var(--green); content: "+"; font-size: 24px; font-weight: 300; line-height: 1; }
.qa details[open] summary::after { content: "–"; }
.qa summary:hover { color: var(--green); }
.qa details p { max-width: 48em; padding: 0 34px 22px 0; color: var(--muted); font-size: 15px; }

/* Closing / footer */
.closing { padding: clamp(84px, 11vw, 145px) 0; background: var(--green); color: var(--black); }
.closing__inner { position: relative; }
.closing .eyebrow { color: var(--black); }
.closing h2 { max-width: 10ch; margin-top: 25px; }
.closing h2 span { color: var(--white); }
.closing .button { margin-top: 35px; background: var(--black); border-color: var(--black); color: var(--green); }
.closing .button:hover { background: var(--white); border-color: var(--white); color: var(--black); }
.closing__phone { display: inline-block; margin: 0 0 0 18px; color: var(--black); font-size: 15px; font-weight: 800; vertical-align: middle; }
.closing__phone:hover { text-decoration: underline; }
footer { background: var(--black); }
/* The skyline is the backdrop of the footer, not a band under it: art and text
   share one grid cell, so the block is always at least as tall as the whole
   drawing — the CN Tower reaches the artwork's top edge — and the text sits on
   top of the city. A scrim between the two keeps the type readable. The fine
   print is deliberately outside this stack, below the waterline. */
.footer__city {
  position: relative;
  display: grid;
  isolation: isolate;
  overflow: hidden;
}
.footer__city > * { grid-area: 1 / 1; }
.footer__city::after {
  content: "";
  grid-area: 1 / 1;
  z-index: 1;
  background:
    radial-gradient(96% 62% at 50% 46%, rgba(8, 9, 9, .9) 0%, rgba(8, 9, 9, .55) 44%, rgba(8, 9, 9, 0) 78%),
    linear-gradient(to bottom, var(--black) 0%, rgba(8, 9, 9, 0) 20%);
  pointer-events: none;
}
.footer__inner {
  z-index: 2;
  align-self: center;
  padding: 76px 0 68px;
}
.footer__skyline {
  z-index: 0;
  align-self: end;
  display: block;
  width: 100%;
  opacity: .62;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
}
.footer__grid { display: grid; grid-template-columns: 1.1fr .75fr .9fr; gap: 45px; align-items: start; color: var(--titanium); font-size: 14px; }
.footer-line { max-width: 21em; margin-top: 14px; color: var(--muted); }
.footer__fine { padding: 22px 0 30px; }
.footer__legal-note {
  max-width: 920px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.footer__contact { display: grid; gap: 7px; }
.footer__contact > a { color: var(--white); font-size: 18px; font-weight: 800; }
.footer__contact > a:hover { color: var(--green); }
.footer__muted { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.footer__links { display: grid; gap: 8px; }
.footer__links a:hover { color: var(--green); }

/* First visit language offer */
/* The French offer has to stay legible and easy to act on, but it sits above
   the masthead, so it reads as one compact line rather than a panel. */
.language-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 22px; margin: 10px 0 0; padding: 9px 14px; border: 1px solid var(--line); border-left: 3px solid var(--green); background: var(--surface); color: var(--titanium); font-size: .82rem; line-height: 1.42; }
.language-offer[hidden] { display: none !important; }
.language-offer__text { flex: 1 1 30rem; min-width: 0; }
.language-offer p { max-width: 88ch; margin: 0; }
.language-offer__lead { display: inline; color: var(--white); font-size: .82rem; }
.language-offer__lead + p { display: inline; }
.language-offer__actions { display: flex; flex-wrap: wrap; align-items: center; flex: 0 0 auto; gap: 8px 10px; margin: 0; }
.language-offer__dismiss { min-height: 34px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--titanium); font: inherit; font-size: .82rem; cursor: pointer; }
.language-offer__dismiss:hover { border-color: var(--green); color: var(--green); }
.language-offer .button { min-height: 34px; padding: 8px 13px; font-size: 11px; }
/* Touch widths keep usable tap targets without turning the language offer into
   a full-width panel that pushes the page content down. */
@media (max-width: 720px) {
  .language-offer { align-items: center; gap: 6px 10px; margin-top: 6px; padding: 8px 10px; border-left-width: 2px; font-size: .72rem; line-height: 1.28; }
  .language-offer__text { flex-basis: 100%; }
  .language-offer__lead { font-size: .74rem; }
  .language-offer__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 6px; }
  .language-offer__dismiss, .language-offer .button { min-height: 38px; padding: 8px 6px; font-size: 10px; line-height: 1.15; }
}

@media (max-width: 1050px) {
  .masthead { grid-template-columns: auto 1fr auto auto; gap: 16px; }
  .masthead nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; padding-bottom: 16px; }
  .masthead__contact { grid-column: 3; grid-row: 1; }
  .masthead .button { grid-column: 4; grid-row: 1; }
  .langswitch { grid-column: 2; grid-row: 1; justify-self: end; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { width: min(1200px, calc(100% - 32px)); }
  .masthead { grid-template-columns: 1fr auto auto; min-height: 0; padding: 17px 0; }
  .nav-toggle { display: block; grid-column: 2; grid-row: 1; justify-self: end; }
  .masthead nav { display: none; grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; padding: 13px 0 0; border-top: 1px solid var(--line); }
  .masthead.nav-open nav { display: grid; }
  .masthead nav a { min-height: 42px; padding: 8px 1px; font-size: 10px; line-height: 1.2; text-align: center; }
  .masthead__contact { grid-column: 1; grid-row: 2; justify-self: start; margin-top: 10px; }
  .masthead__contact-menu { right: auto; left: 0; width: min(235px, calc(100vw - 48px)); }
  .masthead .button { grid-column: 2 / 4; grid-row: 2; justify-self: end; margin-top: 10px; }
  .langswitch { grid-column: 3; grid-row: 1; justify-self: end; }
  .hero { padding-top: 32px; }
  .hero__grid, .quote-grid, .service-grid, .reviews-grid, .faq-grid { grid-template-columns: 1fr; gap: 55px; }
  .hero__grid { min-height: 0; }
  .hero__intro h1 { font-size: clamp(3rem, 14vw, 5rem); }
  .hero__lede { font-size: 17px; }
  .hero__side { min-height: 0; }
  .hero__ticker-inner { justify-content: flex-start; overflow: hidden; }
  .hero__ticker-inner span:nth-child(n+6) { display: none; }
  .steps-visual { margin-top: 42px; }
  .difference-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 50px; }
  .difference-card { min-height: 0; padding: 22px; }
  .difference-card h3 { margin-top: 25px; }
  .feature-image { height: 330px; margin-top: 45px; }
  .feature-image__caption { right: 6%; bottom: 12%; font-size: clamp(1.9rem, 9vw, 3.5rem); }
  .map-card { min-height: 300px; }
  .service-contact { grid-template-columns: 1fr; }
  .closing__phone { display: block; margin: 18px 0 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 33px; }
}

@media (max-width: 430px) {
  .payout-banner__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; min-height: 44px; padding-top: 5px; padding-bottom: 5px; }
  .payout-banner__label { justify-content: center; align-self: center; }
  h2 { font-size: clamp(2.45rem, 13vw, 3.5rem); }
  .hero__actions { align-items: stretch; flex-direction: column; }
  .hero__actions .button { width: 100%; }
  .hero__number { display: block; }
  .hero__number a { display: block; margin-top: 6px; }
  .hero__poster {
    max-width: none;
    margin-top: 30px;
    border-radius: 13px;
  }
  /* The poster is narrower here than in the desktop column and SVG type
     shrinks with it, so the labels are sized back up to stay readable. */
  .pp-label { font-size: 21px; }
  .pp-sub { font-size: 13px; }
  .pp-num { font-size: 34px; }
  .pp-kicker, .pp-badge { font-size: 14px; }
  .pp-foot { font-size: 13px; }
  :lang(fr) .pp-label { font-size: 17px; }
  :lang(fr) .pp-sub { font-size: 12px; }
  :lang(fr) .pp-kicker, :lang(fr) .pp-badge { font-size: 12px; }
  :lang(fr) .pp-foot { font-size: 11.5px; }
  .hero__side-note { margin-top: 22px; }
  .contact-panel { padding: 22px 17px; }
  .contact-action { grid-template-columns: 27px 1fr auto; gap: 8px; padding-inline: 9px; }
  .empty-state { padding: 25px 21px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__intro > *, .hero__side > * { animation: rise .65s cubic-bezier(.2,.7,.25,1) both; }
  /* Poster rig. Every animated property is set here rather than on the
     artwork, so reduced motion leaves the finished poster on screen. */
  .pp-tile { animation: pp-tile-in .8s cubic-bezier(.22,.61,.36,1) both; }
  .pp-tile--1 { animation-delay: .24s; }
  .pp-tile--2 { animation-delay: .36s; }
  .pp-tile--3 { animation-delay: .48s; }
  .pp-tile--4 { animation-delay: .6s; }
  /* r=36, so the circumference is ~226: one 34-unit arc travels the ring. */
  .pp-ring-arc { opacity: .95; stroke-dasharray: 34 192; animation: pp-ring-trace 7s linear infinite; }
  .pp-tile--2 .pp-ring-arc { animation-delay: -1.75s; }
  .pp-tile--3 .pp-ring-arc { animation-delay: -3.5s; }
  .pp-tile--4 .pp-ring-arc { animation-delay: -5.25s; }
  .pp-ring-halo { animation: pp-halo 3.6s ease-in-out infinite; }
  .pp-tile--2 .pp-ring-halo { animation-delay: -.9s; }
  .pp-tile--3 .pp-ring-halo { animation-delay: -1.8s; }
  .pp-tile--4 .pp-ring-halo { animation-delay: -2.7s; }
  .pp-h1--outline { animation: pp-flicker 7s 1.4s ease-in-out infinite; }
  .pp-pin { animation: pp-bob 3.8s ease-in-out infinite; }
  .pp-shadow { animation: pp-shadow-ease 3.8s ease-in-out infinite; }
  .pp-scan { animation: pp-scan 4.6s ease-in-out infinite; }
  .hero__intro h1 { animation-delay: .08s; }
  .hero__intro h1 .hero__cash {
    animation:
      cash-flash 1.35s .42s cubic-bezier(.16,1.4,.32,1) both,
      cash-glow 3.6s 2.1s ease-in-out infinite;
  }
  .hero__lede { animation-delay: .15s; }
  .hero__actions { animation-delay: .22s; }
  .hero__side > *:nth-child(2) { animation-delay: .18s; }
  .payout-banner__track { animation: payouts-slide 42s linear infinite; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes payouts-slide { to { transform: translateX(-50%); } }
@keyframes pp-tile-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pp-ring-trace { to { stroke-dashoffset: -226; } }
@keyframes pp-halo { 0%, 100% { opacity: .14; } 50% { opacity: .4; } }
@keyframes pp-flicker {
  0%, 90%, 100% { opacity: 1; }
  92% { opacity: .34; }
  94% { opacity: 1; }
  96% { opacity: .55; }
}
@keyframes pp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes pp-shadow-ease { 0%, 100% { opacity: .22; transform: scaleX(1); } 50% { opacity: .12; transform: scaleX(.86); } }
@keyframes pp-scan {
  0%, 8% { opacity: 0; transform: translateX(0); }
  16% { opacity: .9; }
  52% { opacity: .9; transform: translateX(40px); }
  60%, 100% { opacity: 0; transform: translateX(40px); }
}
@keyframes cash-flash {
  0% {
    opacity: 0;
    color: var(--green);
    filter: blur(10px);
    transform: translate(-.12em, .08em) scale(.52) rotate(-10deg);
    text-shadow: 0 0 0 rgba(0,242,135,0);
  }
  28% {
    opacity: 1;
    color: var(--green);
    filter: blur(0);
    transform: translate(.06em, -.04em) scale(1.22) rotate(4deg);
    text-shadow: 0 0 22px rgba(0,242,135,.9), 9px 7px 0 rgba(0,242,135,.18);
  }
  48% {
    color: var(--white);
    transform: translate(-.025em, .02em) scale(.91) rotate(-2deg);
    text-shadow: 0 0 12px rgba(244,247,245,.55);
  }
  68% {
    color: var(--green);
    transform: translate(.015em, 0) scale(1.08) rotate(1deg);
    text-shadow: 0 0 16px rgba(0,242,135,.7);
  }
  100% {
    opacity: 1;
    color: var(--white);
    filter: blur(0);
    transform: none;
    text-shadow: none;
  }
}
@keyframes cash-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(0,242,135,.18), 0 0 0 rgba(0,242,135,0); }
  50% { text-shadow: 0 0 22px rgba(0,242,135,.7), 0 0 42px rgba(0,242,135,.18); }
}