/* ---------------------------------------------------------------------------
   Geist Sans, self-hosted, one variable file.
   
   This replaced Inter Tight (3 weights) and Plus Jakarta Sans (4 weights),
   both pulled from Google Fonts -- seven static files across two families
   behind one render-blocking stylesheet. One 68KB file covers 100-900 now,
   and no request leaves our origin, which also takes fonts.googleapis.com
   and fonts.gstatic.com off the list of third parties the Privacy Policy
   would otherwise have to disclose.

   font-display is split the way stripe.com splits it: block on desktop,
   where a flash of fallback text is the worse artefact, and swap on
   narrow screens, where a slow connection is likelier and invisible text
   costs more than a reflow.

   Geist carries no CJK. Japanese, Korean and Chinese fall through to
   system-ui, exactly as they did under the previous two families.
   --------------------------------------------------------------------------- */
@media (min-width: 600px) {
  @font-face {
    font-family: Geist;
    src: url("/assets/fonts/Geist-Variable.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: block;
  }
}

@media (max-width: 599px) {
  @font-face {
    font-family: Geist;
    src: url("/assets/fonts/Geist-Variable.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
}

/* ==========================================================================
   NOTE ON THIS FILE

   Until now styles.css was literally itself twice: lines 1-7826 and 7827-15652
   were byte-identical, followed by everything added since. 18,015 lines where
   9,000 would do, and 623 of 754 class selectors defined twice.

   That was not harmless. Every edit had to be applied to both copies or it
   silently did nothing (the later copy won), and reading the file gave no clue
   which copy you were looking at. The duplicate half is removed here.

   Safe by construction rather than by inspection: the file was X + X + tail,
   the two X blocks adjacent and identical, so for any pair of rules their
   relative order — and therefore which one wins — is unchanged by dropping the
   first. Verified against a before/after snapshot of geometry and 30 computed
   properties for every classed element, across six page/width combinations.
   ========================================================================== */

/* ==========================================================================
   SmashPay — rebuilt on the Soltio template's design system
   Palette, type scale, radii and rhythm extracted from soltio.webflow.io
   Content from smashpay.io
   ========================================================================== */

:root {
  /* Soltio palette */
  --bg: #efefef;
  --surface: #ffffff;
  --cream: #ece7e4;
  --ink: #0d070a;
  --ink-2: #222222;
  --text: #565656;
  --line: #dbdbdb;
  --line-soft: #e6e6e6;
  --accent: #5462e6;
  --accent-soft: rgba(84, 98, 230, 0.1);
  --positive: #7ec9a2;

  /* Primary text. Split out of --ink, which was doing two jobs: it is the
     brand's near-black AND it was the text colour, and those two have to move
     in opposite directions when the theme flips. --ink stays a dark surface in
     both themes (an .on-dark band is dark by design, not by theme); --fg is
     the one that inverts. */
  --fg: #0d070a;

  /* The two greys that were written out literally in ~40 places. Kept as two
     rather than merged, so light mode renders exactly as it did. */
  --muted: #8b8b8b;
  --muted-2: #9a9a9a;

  /* Ink for surfaces that do NOT follow the theme.

     Some backgrounds are fixed by the brand rather than by the palette — the
     lime card, the always-white CTA pill. Text on those has to stay dark in
     both themes; using --fg flipped it light and left it sitting on lime at a
     contrast ratio of 1.65.

     --on-accent is the other half of the same problem: the accent lightens in
     dark mode so it stays legible as a link colour, which means white text on
     an accent-filled badge drops to 2.91. */
  --on-fixed-light: #0d070a;
  --on-accent: #ffffff;
  --on-accent-soft: rgba(255, 255, 255, 0.82);

  /* Tells the browser which way round the page is, so form controls, scrollbars
     and the like follow instead of staying light on a dark page. */
  color-scheme: light;
  /* SmashPay's own product colour — used only inside the app screen */
  --smash-lime: #ceff1c;

  /* Shape */
  --r-card: 20px;
  --r-pill: 50px;
  --r-sm: 8px;

  /* Type */
  --font-display: Geist, system-ui, sans-serif;
  --font-body: Geist, system-ui, sans-serif;

  /* Layout */
  --container: 1630px;
  --content: 1440px;
  --gutter: clamp(20px, 4.7vw, 68px);
  --section-y: 130px;

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 200ms;
  /* Soltio's scroll-reveal signature, measured from the live template:
     opacity 0→1, translateY 50px→0, blur 5px→0 */
  --reveal-dur: 400ms;
  --reveal-ease: var(--ease); /* alias — one house curve, see --ease */
  /* how far a revealing element travels; shortened on phones */
  --reveal-lift: 50px;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-lift, 50px), 0);
  /* transform + opacity only — the two properties that stay on the GPU.
     The blur(5px) that used to be here cost an off-GPU pass on every
     revealing element, and filter flattens any 3D context it touches. */
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

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

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-in {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

/* ==========================================================================
   Primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.inner {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
}

/* Soltio's rhythm is top-only spacing (measured: padding-top 130px,
   padding-bottom 0). Padding both sides doubles every seam. */
.section {
  padding-top: var(--section-y);
  padding-bottom: 0;
}

/* Sections carry padding-top and no padding-bottom, so the gap between two of
   them is entirely the next one's padding. That means a trailing paragraph's
   own bottom margin collapses out through the section's bottom edge and is
   added to the gap: a section ending in a bare <p> sits 14px further from the
   one below it than its neighbours do, and a section with a background of its
   own ends 14px past its last line.

   Fixed three times on single elements before it was worth stating once. The
   chain follows :last-child down from each top-level block in <main>, which
   is exactly the path a collapsing bottom margin takes -- nothing that is not
   the final thing in its section is touched. Four levels covers
   section > container > inner > p, which is how the pages here are built. */
main > * > :last-child,
main > * > :last-child > :last-child,
main > * > :last-child > :last-child > :last-child,
main > * > :last-child > :last-child > :last-child > :last-child {
  margin-bottom: 0;
}

.section--tight {
  padding-top: 90px;
  padding-bottom: 0;
}

/* the last section still needs air before the dark closer */
.section:last-of-type {
  padding-bottom: var(--section-y);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--fg);
  margin: 0;
}

/* Type scale sits one step above Soltio's (its h1 is 60px, h2 40px) —
   headings read larger per request while keeping the template's 500 weight
   and tight tracking. */
.h1 {
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.h2 {
  font-size: clamp(32px, 3.61vw, 52px);
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.h3 {
  font-size: clamp(21px, 1.94vw, 28px);
  line-height: 1.28;
  letter-spacing: -0.02em;
}

/* centred headings break more evenly at the larger size */
.trio__title,
.darkfeature__title,
.segs__title,
.faq .h2,
.closer__top .h1 {
  text-wrap: balance;
}

.lede {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--text);
  max-width: 52ch;
}

.eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.on-dark h1,
.on-dark h2,
.on-dark h3 {
  color: #fff;
}

.on-dark .lede {
  color: rgba(255, 255, 255, 0.68);
}

/* Buttons — Soltio pill with circular arrow badge */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 26px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn__badge {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: transform var(--dur) var(--ease);
}

.btn:hover .btn__badge {
  transform: rotate(45deg);
}

.btn__badge svg {
  width: 15px;
  height: 15px;
}

.btn--dark {
  background: var(--ink);
  color: #fff;
}

.btn--dark .btn__badge {
  background: var(--surface);
  color: var(--fg);
}

.btn--dark:hover {
  background: #000;
}

.btn--light {
  background: var(--surface);
  color: var(--fg);
}

.btn--light .btn__badge {
  background: var(--ink);
  color: #fff;
}

.btn--accent {
  background: var(--accent);
  color: #fff;
}

.btn--accent .btn__badge {
  background: var(--surface);
  color: var(--accent);
}

/* An inset shadow, not a border. A 1px border adds to the outer height of a
   content-sized button, so the ghost came out 56px against everyone else's 54
   — and because .closer__actions is a flex row that stretches, it dragged the
   solid button beside it to 56 as well. It also pushed the arrow 1px further
   from the edge than every other button on the site. */
.btn--ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* The arrow reads as an outline on a transparent button; a filled white disc
   would out-weigh the button it sits in and stop it being the secondary of the
   pair. */
.btn--ghost .btn__badge {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

.btn--sm {
  font-size: 15px;
  padding: 6px 6px 6px 20px;
}

.btn--sm .btn__badge {
  width: 32px;
  height: 32px;
}

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: absolute;
  inset: 0 0 auto;
  z-index: 60;
  padding-top: 26px;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav__logo {
  width: 148px;
  height: auto;
  flex: none;
}

.nav__links {
  display: flex;
  align-items: center;
  /* Was a flat 36px. Eight items need 7 gaps, and at 1280 that came to 252px
     against roughly 750px of space for ~500px of text — two pixels over, so
     the bar wrapped to a second row. The clamp gives back the difference
     where it is tight and keeps the original spacing once there is room. */
  gap: clamp(18px, 1.9vw, 36px);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
}

/* "How it works" and "SmashX Card" are the only two-word labels; without this
   they break mid-label before the row wraps, which looks like a typo. */
.nav__links li {
  white-space: nowrap;
}

.nav__links a {
  transition: color var(--dur) var(--ease);
}

.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: #fff;
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
}

.nav__login {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  transition: color var(--dur) var(--ease);
}

.nav__login:hover {
  color: #fff;
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: var(--r-sm);
}

.nav__toggle span {
  display: block;
  height: 2px;
  background: var(--surface);
  border-radius: 2px;
}

.nav__toggle span + span {
  margin-top: 5px;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0 0 var(--r-card) var(--r-card);
  padding: 150px 0 70px;
  min-height: 900px;
  display: flex;
  align-items: center;
  /* Soltio home-three: deep navy base lit by an off-centre indigo/violet field */
  background:
    radial-gradient(
      1100px 760px at 58% 38%,
      rgba(74, 46, 168, 0.55) 0%,
      rgba(10, 8, 30, 0) 62%
    ),
    radial-gradient(
      900px 680px at 88% 78%,
      rgba(31, 48, 148, 0.5) 0%,
      rgba(8, 8, 24, 0) 66%
    ),
    linear-gradient(160deg, #0a0918 0%, #0d0b22 55%, #10102c 100%);
}

/* --- decorative field --- */

.hero__ray {
  position: absolute;
  z-index: 0;
  left: 34%;
  top: -14%;
  width: 566px;
  height: 714px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(150, 96, 255, 0.5),
    rgba(120, 70, 240, 0.16) 55%,
    transparent 78%
  );
  filter: blur(28px);
  pointer-events: none;
}

.hero__icons {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__icon {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  box-shadow:
    0 16px 38px rgba(6, 4, 24, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  animation: float 10s ease-in-out infinite;
}

/* official coin artwork — already circular, so it sits inside the white ring */
.hero__icon img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  border-radius: 50%;
}

/* Scatter — all tops sit below the 122px nav so nothing collides with it,
   and none cross into the card column on the right. */
/* top 14% / left 37% keep these two clear of the enlarged copy block */
.hero__icon--1 {
  width: 74px;
  height: 74px;
  left: 3%;
  top: 14%;
  animation-delay: 0s;
}
.hero__icon--2 {
  width: 62px;
  height: 62px;
  left: 21%;
  top: 15%;
  animation-delay: -1.4s;
}
.hero__icon--3 {
  width: 58px;
  height: 58px;
  left: 3%;
  bottom: 5%;
  animation-delay: -2.6s;
}
.hero__icon--4 {
  width: 72px;
  height: 72px;
  left: 21%;
  bottom: 4%;
  animation-delay: -3.8s;
}
.hero__icon--5 {
  width: 64px;
  height: 64px;
  left: 32%;
  bottom: 5%;
  animation-delay: -5s;
}
.hero__icon--6 {
  width: 60px;
  height: 60px;
  left: 37%;
  top: 17%;
  animation-delay: -6.2s;
}
.hero__icon--7 {
  width: 66px;
  height: 66px;
  right: 33%;
  top: 22%;
  animation-delay: -7.4s;
}
.hero__icon--8 {
  width: 70px;
  height: 70px;
  left: 46%;
  top: 13%;
  animation-delay: -8.6s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-18px) rotate(4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__icon {
    animation: none;
  }
}

/* --- layout --- */

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  /* Outer columns share the remainder equally, so the phone's centre is the
     page's centre. Unequal columns put it 71px right of true centre. */
  grid-template-columns: minmax(0, 1fr) 523px minmax(0, 1fr);
  align-items: center;
  gap: 30px;
}

.hero__copy {
  position: relative;
  /* above the device column, whose hand image overhangs its track */
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* The lede is written as two deliberate lines. Its first sentence needs 470px
   but the copy column is 429px, so let this one element run to its natural
   width — there is ~548px of clear space before the phone. The vw bound keeps
   it wrapping normally on small screens. */
.hero__copy .lede {
  width: max-content;
  max-width: min(480px, 92vw);
}

/* widened with the larger type so the headline holds 3 lines, not 4 */
.hero__title {
  max-width: 15ch;
}

/* --- hand + phone --- */

.hero__device {
  position: relative;
  height: 700px;
  display: grid;
  place-items: center;
}

/* Grounding the phone takes TWO layers, both outside .hero__shots — anything
   inside that element inherits the rotateX and tilts with the phone, which
   never reads as falling onto a surface.

   ::before is the floor itself: a lit patch. The hero is near-black, so a
   black shadow alone darkens nothing and the phone just floats. This gives
   the shadow something to actually fall on.
   ::after is the contact shadow, tighter and darker, painted on top. */
.hero__device::before,
.hero__device::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
}

.hero__device::before {
  /* 440 * the 1.3 it scales to is 572px. It only stayed inside the viewport
     before because --p was never written and it sat at 0.6; driving the
     lay-back exposed it as horizontal overflow. Three caps, because the
     failure differs by width: vw catches phones, and the percentage catches
     desktops where the device column sits off-centre to the right and the
     patch runs past the edge even though the viewport is wide (1024 was the
     worst, overshooting by 68px). */
  width: min(440px, 92%, 70vw);
  height: 132px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(150, 132, 255, 0.26) 0%,
    rgba(112, 96, 220, 0.12) 45%,
    rgba(90, 76, 190, 0) 72%
  );
  transform: translate(-50%, calc(-50% + 296px + var(--p, 0) * 30px))
    scale(calc(0.6 + var(--p, 0) * 0.7));
  opacity: calc(var(--p, 0) * 0.9);
  filter: blur(22px);
}

.hero__device::after {
  /* same again — this one scales to 1.4 */
  width: min(250px, 56%, 44vw);
  height: 58px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.45) 46%,
    rgba(0, 0, 0, 0) 73%
  );
  transform: translate(-50%, calc(-50% + 302px + var(--p, 0) * 32px))
    scale(calc(0.6 + var(--p, 0) * 0.8));
  opacity: calc(var(--p, 0) * 0.95);
  filter: blur(11px);
}

/* Three screens stacked in one box; only the active one is opaque. The stack
   is out of flow because the grid row would otherwise size itself from the
   image's 1:2 aspect rather than the fixed 700px stage. */
.hero__shots {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 100%;
  width: auto;
  aspect-ratio: 952 / 1941;
  z-index: 1;
  /* Scroll writes both vars. perspective() must come first in the list, then
     the tilt, then the scale — reverse that and the phone shears instead of
     laying back. 2400px, not the usual ~1000: a short perspective flares the
     near edge and the projected box grew 343 -> 538px, overlapping the lede.
     Children carry a drop-shadow filter, which forces flat rendering, but they
     only need to ride this plane, not build their own. */
  transform: perspective(2400px) rotateX(var(--tilt, 0deg))
    scale(var(--zoom, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Centred on the palm, not the container — the hand image's palm sits well
   below its own midpoint. */
.phone {
  position: absolute;
  z-index: 3;
  top: 62%;
  left: calc(50% + 18px);
  transform: translate(-50%, -50%) rotate(-3deg);
  width: 272px;
  aspect-ratio: 288 / 597;
  border-radius: 42px;
  background: #000;
  border: 6px solid #1b1b22;
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  container-type: inline-size;
}

.phone::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 22px;
  border-radius: 12px;
  background: #08080c;
}

/* ---- SmashPay app screen, rebuilt as DOM ---- */

.app {
  position: absolute;
  inset: 0;
  background: #000;
  color: #fff;
  font-family: var(--font-body);
  font-size: 3.3cqw;
  line-height: 1.35;
  padding: 3.5cqw;
  display: flex;
  flex-direction: column;
  gap: 2.6cqw;
  overflow: hidden;
}

.app__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 3.4cqw;
  font-weight: 600;
  padding: 0.5cqw 1cqw 0;
}

.app__status-icons {
  display: flex;
  gap: 1.2cqw;
  align-items: center;
}

.app__status-icons i {
  width: 3.4cqw;
  height: 2.6cqw;
  background: var(--surface);
  border-radius: 0.6cqw;
  opacity: 0.9;
}

.app__status-icons .batt {
  width: 5cqw;
  opacity: 0.6;
}

.app__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1cqw;
}

.app__burger {
  width: 5cqw;
  height: 3.6cqw;
  border-top: 0.7cqw solid #fff;
  border-bottom: 0.7cqw solid #fff;
  position: relative;
}

.app__burger::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.7cqw;
  background: var(--surface);
  transform: translateY(-50%);
}

.app__brand {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  font-weight: 700;
  font-size: 4.2cqw;
  letter-spacing: 0.16em;
}

.app__mark {
  width: 6cqw;
  height: 6cqw;
  border-radius: 50%;
  background: var(--smash-lime, #ceff1c);
  box-shadow: inset 0 0 0 0.7cqw #000;
}

.app__bar-icons {
  display: flex;
  gap: 1.6cqw;
}

.app__bar-icons i {
  width: 6.4cqw;
  height: 6.4cqw;
  border-radius: 50%;
  border: 0.5cqw solid #3a3a3a;
}

.app__card {
  background: #111;
  border: 0.4cqw solid #222;
  border-radius: 3.4cqw;
  padding: 3.4cqw;
}

.app__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
}

.app__muted {
  color: var(--muted-2);
}

.app__tiny {
  font-size: 2.8cqw;
}

.app__pill {
  padding: 0.8cqw 2cqw;
  border-radius: 4cqw;
  font-size: 2.8cqw;
  font-weight: 600;
}

.app__pill--up {
  background: rgba(37, 194, 110, 0.16);
  color: #25c26e;
}

.app__amount {
  margin: 1.4cqw 0 1cqw;
  font-size: 7.6cqw;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.app__live {
  color: #25c26e;
  font-size: 2.8cqw;
}

.app__actions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.6cqw;
  text-align: center;
  font-size: 2.7cqw;
  color: #cfcfcf;
}

.app__actions span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2cqw;
}

.app__actions i {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 2.6cqw;
  background: #141414;
  border: 0.4cqw solid #262626;
  box-shadow: inset 0 0 0 1.6cqw #0e0e0e;
}

.app__h {
  margin: 0 0 1.4cqw;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 4.4cqw;
  color: #fff;
}

.app__h--sm {
  font-size: 3.8cqw;
}

.app__sub {
  margin: 0;
  color: #8f8f8f;
  font-size: 3cqw;
}

.app__cta {
  display: block;
  margin: 3cqw 0 2cqw;
  padding: 3.4cqw;
  border-radius: 3cqw;
  background: var(--smash-lime, #ceff1c);
  color: #000;
  font-weight: 700;
  font-size: 4cqw;
  text-align: center;
}

.app__foot {
  margin: 0;
  text-align: center;
  color: #7c7c7c;
  font-size: 2.7cqw;
}

.app__earn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding: 3.4cqw;
  border-radius: 3.4cqw;
  background: linear-gradient(100deg, #6d3ff0, #8f5bf5 70%, #a06bf7);
  overflow: hidden;
}

.app__earn-top {
  margin: 0;
  font-size: 3.4cqw;
}

.app__earn-top strong {
  font-size: 4.6cqw;
}

.app__earn-sub {
  margin: 0;
  font-size: 3cqw;
  opacity: 0.9;
}

.app__earn-link {
  margin: 1.4cqw 0 0;
  font-size: 3cqw;
  font-weight: 600;
}

.app__coin {
  width: 14cqw;
  height: 14cqw;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #4fd7c0, #1b9c8a);
  box-shadow: 0 0 0 1.4cqw rgba(255, 255, 255, 0.12);
}

.app__local {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
}

.app__flags {
  display: flex;
  flex: none;
}

.app__flags i {
  width: 5.4cqw;
  height: 5.4cqw;
  border-radius: 50%;
  border: 0.5cqw solid #111;
  background: #444;
}

.app__flags i + i {
  margin-left: -1.6cqw;
}

.app__flags i:nth-child(1) {
  background: linear-gradient(#b22234 33%, #fff 33% 66%, #3c3b6e 66%);
}
.app__flags i:nth-child(2) {
  background: #0a3161;
}
.app__flags i:nth-child(3) {
  background: linear-gradient(#cf142b 40%, #fff 40% 60%, #00247d 60%);
}
.app__flags i:nth-child(4) {
  background: radial-gradient(circle, #bc002d 38%, #fff 38%);
}
.app__flags i:nth-child(5) {
  background: linear-gradient(#0038a8 50%, #ce1126 50%);
}

.app__market {
  display: flex;
  align-items: center;
  gap: 2cqw;
  margin-top: 2.4cqw;
}

.app__btc {
  width: 7cqw;
  height: 7cqw;
  flex: none;
  border-radius: 50%;
  background: #f7931a;
}

.app__market-name,
.app__market-px {
  display: flex;
  flex-direction: column;
  font-size: 3.2cqw;
  font-weight: 600;
}

.app__market-name em,
.app__market-px em {
  font-style: normal;
  font-size: 2.7cqw;
  font-weight: 400;
  color: #8f8f8f;
}

.app__market-px {
  margin-left: auto;
  text-align: right;
}

.app__market-px em {
  color: #25c26e;
}

.app__spark {
  width: 16cqw;
  height: 7cqw;
  flex: none;
}

.app__tabs {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1cqw;
  text-align: center;
  font-size: 2.7cqw;
  color: #8f8f8f;
  background: #0d0d0d;
  border-radius: 5cqw;
  padding: 2.4cqw 1.6cqw;
}

.app__tabs span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqw;
}

.app__tabs i {
  width: 4.4cqw;
  height: 4.4cqw;
  border-radius: 1.2cqw;
  background: #3a3a3a;
}

.app__tabs .is-active {
  color: var(--smash-lime, #ceff1c);
}

.app__tabs .is-active i {
  background: var(--smash-lime, #ceff1c);
}

/* --- accordion cards --- */

.hero__cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* the column is wider than the cards now — hold them to the right edge.
     max-width matters at the breakpoint where the column drops to 340px. */
  width: 358px;
  max-width: 100%;
  justify-self: end;
}

.pcard {
  border-radius: var(--r-card);
  overflow: hidden;
  color: #fff;
  transition: box-shadow var(--dur) var(--ease);
}

.pcard--indigo {
  background: #5462e6;
}

.pcard--lime {
  background: #adcc00;
  /* lime does not flip, so neither does its ink */
  color: var(--on-fixed-light);
}

.pcard--sunset {
  background: linear-gradient(30deg, #f05e5e 51%, #2531de);
}

.pcard__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px;
  text-align: left;
  color: inherit;
}

.pcard__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.pcard__icon {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: transform var(--dur) var(--ease);
}

.pcard--lime .pcard__icon {
  background: rgba(0, 0, 0, 0.14);
}

.pcard__icon svg {
  width: 15px;
  height: 15px;
}

.pcard.is-open .pcard__icon {
  transform: rotate(45deg);
}

/* 0fr → 1fr gives a height transition without hard-coding a pixel height */
.pcard__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--reveal-dur) var(--reveal-ease);
}

.pcard.is-open .pcard__body {
  grid-template-rows: 1fr;
}

.pcard__inner {
  overflow: hidden;
}

.pcard__title {
  margin: 0 26px 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.pcard__text {
  margin: 0 26px;
  font-size: 15px;
  line-height: 24px;
  opacity: 0.85;
}

.pcard__cta {
  display: inline-block;
  margin: 18px 26px 26px;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  /* an always-white pill needs always-dark text */
  color: var(--on-fixed-light);
  font-size: 15px;
  font-weight: 500;
  transition: background-color var(--dur) var(--ease);
}

.pcard__cta:hover {
  background: var(--surface);
}

/* social proof row */
.proof {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}

.proof__avatars {
  display: flex;
}

.proof__avatars span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: linear-gradient(135deg, #4b5bd6, #8f7ae6);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.proof__avatars span + span {
  margin-left: -12px;
}

.proof__text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.72);
}

.proof__text strong {
  display: block;
  color: #fff;
  font-weight: 600;
}

/* ==========================================================================
   Partner marquee
   ========================================================================== */

.partners {
  padding-top: 72px;
  padding-bottom: 0;
}

.partners__head {
  text-align: center;
  margin-bottom: 34px;
}

.partners__head .lede {
  margin-inline: auto;
  margin-top: 10px;
}

.marquee {
  position: relative;
  min-height: 120px;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 56px;
  flex: none;
  animation: marquee 46s linear infinite;
}

.marquee__track img {
  width: 190px;
  height: 106px;
  object-fit: contain;
  flex: none;
  /* logos are white-on-transparent; invert for the light canvas */
  filter: invert(1) brightness(0.35);
  opacity: 0.75;
}

/* Polygon's official lockup is already purple mark + black wordmark, so it
   needs no inversion — it sits in the same 190×106 box as the others. */
.marquee__track img.marquee__logo--colour {
  filter: none;
  opacity: 0.9;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
  .marquee {
    overflow-x: auto;
  }
}

/* ==========================================================================
   Split feature (image card + copy) — Soltio rt-feature-v1
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 90px;
}

.split--flip .split__media {
  order: 2;
}

.split__media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 4 / 5;
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The card fan arrives as its own panel: black ground, rounded corners, and
   the margin around the cards already composed into it. So this variant
   stops being a lit panel with a cut-out floating on it and becomes the
   artwork itself -- no padding, black rather than --ink, and the panel's
   aspect set to the file's so the two sets of rounded corners coincide and
   there is no band of the old background along any edge.

   Still `contain`, not `cover`. The outer cards clear the frame by 3.4% on
   the left and 2.4% on the right, and squaring 0.88 off into 4:5 would have
   taken 4.6% from each -- it would have sliced both of them, which is what
   the previous note here warned about for the old file. */
.split__media--cards {
  display: grid;
  place-items: center;
  padding: 0;
  background: #000000;
  aspect-ratio: 1761 / 2000;
}

.split__media--cards img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.split__media--contain {
  background: linear-gradient(160deg, #17171c, #0d070a);
  display: grid;
  place-items: center;
  padding: 40px;
}

.split__media--contain img {
  object-fit: contain;
  height: auto;
  max-height: 100%;
}

.split__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

/* numbered points */
.points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.point {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.point__num {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
}

.point__title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.point__body {
  margin: 0;
  font-size: 15px;
  line-height: 25px;
}

/* rule-divided stat row */
.statrow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  width: 100%;
  margin-top: 8px;
}

.statrow > div {
  padding: 28px 30px 0 0;
}

.statrow > div + div {
  border-left: 1px solid var(--line);
  padding-left: 30px;
}

/* .statrow is two columns because every other page passes it exactly two
   stats. The corridor pages pass three, which wrapped 2+1 and left the third
   carrying a divider into empty space. Opt in rather than changing the base,
   so the two-stat pages are untouched. The mobile rule already collapses
   .statrow to one column and that selector still matches. */
.statrow--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1020px) and (min-width: 861px) {
  .statrow--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .statrow--3 > div:nth-child(3) {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
  }
}

.statrow__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--fg);
}

.statrow__label {
  margin: 6px 0 0;
  font-weight: 600;
  font-size: 15px;
  color: var(--fg);
}

.statrow__note {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 22px;
}


/* ==========================================================================
   Staking simulation — the chart and the comparison figure. Everything else
   in this widget reuses .sim, because it is the same kind of object as the
   year-one estimator and should not look like a different one.
   ========================================================================== */

/* The delta against the free tier. Coloured, because its sign is the answer:
   a paid tier can genuinely cost more than it returns and the widget has to
   be able to say so. Never colour alone — the number carries its own + or −,
   so the sign survives for anyone who cannot separate the two hues. */
.sim__delta { font-weight: 600; }
.sim__delta.is-up { color: var(--accent); }
.sim__delta.is-down { color: #d2544b; }
:root[data-theme="dark"] .sim__delta.is-down { color: #ff8b82; }

.stakechart { margin: 22px 0 4px; }
.stakechart svg {
  display: block;
  width: 100%;
  /* Fixed height with a non-uniform viewBox: the shape of the curve matters
     more than its aspect, and letting it scale with the column made a ten-year
     run look flat on a wide screen and vertical on a narrow one. */
  height: 168px;
  overflow: visible;
}
.stakechart__mine,
.stakechart__free {
  /* Drawn in the viewBox's own units and then stretched by preserveAspectRatio
     none, so the stroke would stretch with it. vector-effect keeps it even. */
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.stakechart__mine { stroke: var(--accent); stroke-width: 2.5; }
.stakechart__free { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .8; }

.stakechart__axis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}
.stakechart__key { display: inline-flex; align-items: center; gap: 6px; }
.stakechart__sw {
  display: inline-block;
  width: 14px;
  height: 0;
  border-top: 2.5px solid var(--accent);
}
.stakechart__sw--free { border-top: 1.5px dashed var(--muted); }
.stakechart__sw + .stakechart__sw { margin-left: 10px; }

@media (max-width: 620px) {
  .stakechart svg { height: 132px; }
  .stakechart__axis { flex-wrap: wrap; }
}


/* ==========================================================================
   /markets — the send-to list, the account list, and the country lookup
   ========================================================================== */

/* Copy first, photograph under it, whole and uncropped. It was white type
   over the picture with a scrim; at phone width the box could not be both
   the picture's shape and tall enough for the words, so the heading was
   being clipped. Stacking them means the picture is never cropped and the
   type never sits on it. */
.mkhero {
  /* clears the fixed nav. The heading used to sit inside the photo panel's
     own padding, which hid the fact that .section's 72px top is not enough
     on its own -- the nav's bottom edge is at 90. */
  padding-top: clamp(112px, 9vw, 136px);
  /* Nothing: the hero photograph, the "Check a country" panel and the dark
     send-to band are three inset cards in a row, and the 44px the sections
     below carry is the gap between all of them. 8px here made the first of
     the three gaps 52. */
  padding-bottom: 0;
}

/* The copy sits on the photograph, centred, over a scrim.

   The height comes from the copy plus its own padding, with a floor that
   holds the photograph's proportions once there is room for them. Deliberately
   NOT aspect-ratio: on a box with overflow:hidden that zeroes the automatic
   minimum size and beats the content, which is exactly how the heading got
   clipped to a 170px strip on a phone last time. min-height can only ever
   make the card taller than its copy, never shorter. */
.mkhero__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  min-height: min(52vw, 620px);
  padding: clamp(64px, 9vw, 150px) clamp(20px, 5vw, 72px);
}

.mkhero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Marina Bay at midday is a bright, busy photograph and white text alone does
   not survive it. */
.mkhero__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
}

.mkhero__copy {
  position: relative;
  z-index: 1;
  text-align: center;
  /* Wide enough to hold "Where SmashPay works" on one line, as the design
     draws it; the lede is reined back in below so it does not run the full
     width of the card. */
  max-width: min(880px, 100%);
}

.mkhero__copy .h1 { color: #ffffff; }

.mkhero__lede {
  margin: clamp(18px, 2.2vw, 32px) auto 0;
  max-width: min(700px, 100%);
  color: rgba(255, 255, 255, 0.92);
}

/* The direction warning. Bordered rather than tinted: it is the one thing on
   the page that must not read as decoration, and a tinted panel on a page of
   tinted panels disappears. */
.mknote {
  margin-top: 26px;
  padding: 18px 22px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 14px 14px 0;
  max-width: 68ch;
}
.mknote p { margin: 0; font-size: 15px; line-height: 24px; color: var(--fg); }

.mksec { padding-top: 44px; }

/* .lede has margin:0 site-wide and .h2 has none either, so every heading on
   this page sat straight on top of its lede with only the line-height's own
   slack between them -- about 8px under a 32px heading. The layouts put a
   clear gap there. */
.mksec .h2 + .lede { margin-top: clamp(14px, 1.6vw, 22px); }

/* Two of these sections go dark in the design. "Check a country" becomes a
   panel with the control centred in it; "Where you can send money to"
   becomes a full dark band with lime column headings. The remaining two --
   the account markets and Coming in Q4 -- stay light, which is what makes
   the dark ones read as the answer to the question above them. */
/* Sections on this page only ever had padding-top, which was invisible while
   they all shared the page background. Two of them are dark now and they met
   flush -- one slab with a heading in the middle of it. Both need a gap under
   them so the rounded corners land on the page rather than on each other. */
.mksec--panel {
  padding-bottom: 44px;
}

.mksec--dark {
  margin-block-end: 44px;
}

.mksec--panel .inner {
  background: #0d0d0f;
  border-radius: var(--r-lg);
  padding: clamp(30px, 4vw, 54px);
  text-align: center;
}

.mksec--panel .h2 {
  color: #ffffff;
}

.mksec--panel .lede {
  margin-inline: auto;
  max-width: 54ch;
  color: rgba(255, 255, 255, 0.62);
}

/* one control, so it sits on its own rather than in the two-column split the
   light version used */
.mksec--panel .mklook {
  grid-template-columns: minmax(0, 320px);
  justify-content: center;
  text-align: left;
}

.mksec--dark {
  background: #0a0a0a;
  border-radius: var(--r-lg);
  margin-inline: var(--gutter);
  padding: clamp(40px, 5vw, 72px) 0;
  text-align: center;
}

.mksec--dark .h2 {
  color: #ffffff;
}

.mksec--dark .lede {
  margin-inline: auto;
  max-width: 72ch;
  color: rgba(255, 255, 255, 0.6);
}

.mksec--dark .mktable {
  text-align: left;
}

/* lime, as the design has them: the only colour in the table, and they are
   what you read first to find the column you came for */
.mksec--dark .mktable thead th {
  color: #ceff1c;
}

.mksec--dark .mktable th,
.mksec--dark .mktable td {
  color: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.mksec--dark .mktable tbody th {
  color: #ffffff;
  font-size: 17px;
}

/* The design gives the table a lot more room than the light version had:
   rows about 95px against 59, and type a size up. At 13px against a black
   field the column headings were a caption; the point of putting them in
   lime is that they are the thing you scan for. */
.mksec--dark .mktable th,
.mksec--dark .mktable td {
  padding: 30px 20px 30px 0;
  font-size: 16px;
}

.mksec--dark .mktable thead th {
  font-size: 16px;
  letter-spacing: 0.08em;
  padding-bottom: 18px;
}

.mksec--dark .mktable tbody tr:first-child th,
.mksec--dark .mktable tbody tr:first-child td {
  padding-top: 26px;
}

/* the rules carry the row rhythm on a black field, where 12% white reads as
   almost nothing */
.mksec--dark .mktable th,
.mksec--dark .mktable td {
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

/* Emoji stand in for the circular flag images the design uses, so they are
   sized to hold the same weight in the row. Thirty-two flag assets would be
   needed to do it properly; four exist. */
.mksec--dark .mk__flag {
  font-size: 30px;
  margin-right: 14px;
}

.mksec--dark .mksec__note {
  color: rgba(255, 255, 255, 0.45);
}
/* The one light band on the page. .section gives every section top padding
   and no bottom, which is invisible while they all share the page colour --
   but this one has a background of its own, so the band was ending flush
   against the last row of flags. Same air top and bottom as the dark band
   above it. */
.mksec--alt {
  background: var(--surface-2, var(--surface));
  /* Inset and rounded like the two dark bands above it, so all four sections
     on this page read as cards on the page rather than three cards and one
     full-bleed stripe. Same gutter, radius and internal air as .mksec--dark;
     the .container inside adds its own gutter, exactly as it does there. */
  margin-inline: var(--gutter);
  border-radius: var(--r-lg);
  padding: clamp(40px, 5vw, 72px) 0;
}

/* Heading and lede centred over the band, like the two sections above it.
   The regions below stay left-aligned -- only the direct children of .inner
   are centred, so nothing inside .mk__regions is caught by this. */
.mksec--alt > .container > .inner > .h2,
.mksec--alt > .container > .inner > .lede {
  text-align: center;
}
.mksec--alt > .container > .inner > .lede {
  margin-inline: auto;
  max-width: 56ch;
}
.mksec__note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 21px;
  color: var(--muted);
}

.mk__flag {
  /* Emoji flags carry their own colour, so they must not inherit the ink. */
  font-size: 1.15em;
  line-height: 1;
  margin-right: 9px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* ---- the send-to table ---------------------------------------------------
   Scrolls inside its own box rather than pushing the page sideways: five
   columns of rail names do not fit a phone and never will. */
.mktable__wrap { overflow-x: auto; margin-top: 22px; }

/* On a phone the five columns do not fit and the table scrolls sideways
   inside this box. The box was the .container's content width, so the cut
   landed a gutter short of the dark card's edge, with a strip of flat black
   beyond it -- which reads as a rendering fault rather than as "there is more
   this way". Pulling the scroll region out to the card's inner edges and
   putting the gutter back as padding leaves the first column where it was and
   runs the cut, and the scrollbar under it, to the edge.

   Unconditional rather than behind a breakpoint: the content box is identical
   either way, so on a screen wide enough for the table nothing moves. */
.mksec--dark .mktable__wrap {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.mktable {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 15px;
}
.mktable th, .mktable td {
  text-align: left;
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.mktable thead th {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom-width: 1px;
}
.mktable tbody th { font-weight: 600; color: var(--fg); white-space: nowrap; }
.mktable tbody tr:last-child th,
.mktable tbody tr:last-child td { border-bottom: 0; }

/* "also pay-in" / "also pay-out". Quiet: it is a cross-reference, not a
   feature, and at full weight it competes with the country name. */
/* The liveness marker. Warmer than the neutral cross-reference chip beside it
   because it is a requirement rather than a fact about coverage. */
.mk__both--live {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--fg);
}
/* The liveness note is a callout, not a footnote: it qualifies every chip in
   the grid below, so it gets a box and a rule down its left edge. */
.mksec__note--lede {
  max-width: 68ch;
  margin: 22px auto 0;
  padding: 18px 24px;
  border-radius: 16px;
  border-left: 4px solid var(--accent);
  background: rgba(128, 128, 128, 0.09);
  font-size: 15px;
  line-height: 24px;
  text-align: left;
}
/* In the grid "liveness check" is a chip. Here it is the subject of the
   sentence, so it reads as emphasis rather than as a pill dropped into prose. */
.mksec__note--lede .mk__both--live {
  margin-left: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: inherit;
  font-weight: 600;
  vertical-align: baseline;
}

.mk__both {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted);
  white-space: nowrap;
  vertical-align: 1px;
}

/* ---- the account list ----------------------------------------------------
   Each region is a full-width band, not a column: a four-across grid of
   markets under its own heading. The regions used to be the columns of one
   auto-fit grid, which made Asia Pacific's seven markets and the Americas'
   eighteen the same width and left three quarters of the band empty. */
.mk__regions { margin-top: 30px; }
.mk__region + .mk__region { margin-top: 46px; }

.mk__rh {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 4px put the region heading 19px off the first flag, counting the row's
     own padding. The layout sets it roughly twice that. */
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.mk__rh i {
  font-style: normal;
  min-width: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  /* Grey rather than --accent-soft: it is a count, not a status, and a
     neutral that reads on both themes beats a tinted one that reads on
     neither. */
  background: rgba(128, 128, 128, 0.16);
  color: var(--fg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
}

.mk__list { list-style: none; margin: 0; padding: 0; }
.mk__name { flex: 1 1 auto; }

.mk__region .mk__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* No column gap on purpose: the divider runs the full width of the band,
     and a gap would break it into four. The cells are spaced by their own
     right padding instead. */
}
.mk__region .mk__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 24px 15px 0;
  font-size: 17px;
  color: var(--fg);
  position: relative;
}

/* The rule between rows is drawn once, by the cell that starts the row, and
   stretched across the columns beside it. A border on each cell instead would
   stop short wherever the last row is a partial one -- the Americas end on two
   markets, and the line ended with them. 400% is exact because the columns are
   equal and there is no gap between them. The column count is restated at each
   breakpoint below, so the multiplier has to be too. */
.mk__region .mk__list li::before {
  content: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  background: var(--line);
}

/* Name above, chips below. The flag centres against the pair, so a market
   with no chips still lines up with the ones beside it. */
.mk__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}
.mk__cell .mk__name { flex: 0 1 auto; }
.mk__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mk__tags .mk__both {
  margin-left: 0;
  padding: 4px 10px;
  font-size: 12px;
  vertical-align: baseline;
}

/* Circular flags. The emoji is wider than it is tall, so it is scaled to fill
   the circle's height and the overflow is clipped -- which is the crop the
   design draws. */
.mk__region .mk__flag,
.mk__list--soon .mk__flag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-right: 0;
  border-radius: 50%;
  overflow: hidden;
  /* The glyph box is square but the flag drawn inside it fills only about
     seven tenths of the height, so the type has to be about half as big
     again as the circle for the artwork to reach the edges. */
  font-size: 66px;
}

/* One exclusive range per column count. Ranges rather than a default plus
   max-width overrides: the :nth-child(:not()) selector is specific enough that
   a plain reset inside a media query loses to it, so the four-column rule went
   on drawing 400%-wide lines in a three-column grid and pushed the page
   sideways. Non-overlapping queries cannot do that. */
@media (min-width: 1181px) {
  .mk__region .mk__list li:nth-child(4n + 1):not(:first-child)::before {
    content: "";
    width: 400%;
  }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .mk__region .mk__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk__region .mk__list li:nth-child(3n + 1):not(:first-child)::before {
    content: "";
    width: 300%;
  }
}
@media (min-width: 561px) and (max-width: 860px) {
  .mk__region .mk__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk__region .mk__list li:nth-child(odd):not(:first-child)::before {
    content: "";
    width: 200%;
  }
}
@media (max-width: 560px) {
  .mk__region .mk__list { grid-template-columns: minmax(0, 1fr); }
  .mk__region .mk__list li:not(:first-child)::before {
    content: "";
    width: 100%;
  }
}

/* ---- Coming in Q4 --------------------------------------------------------
   Country on the left, where it stands on the right, a rule between. */
.mk__soon { text-align: center; }
.mk__list--soon {
  max-width: 760px;
  margin: 28px auto 0;
  text-align: left;
}
.mk__list--soon li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 17px 0;
  font-size: 17px;
  color: var(--fg);
}
.mk__list--soon li + li { border-top: 1px solid var(--line); }
.mk__list--soon .mk__name { flex: 0 0 auto; font-weight: 700; }
.mk__when {
  margin-left: auto;
  padding-left: 20px;
  font-size: 16px;
  color: var(--muted);
  text-align: right;
}

/* ---- the lookup ---------------------------------------------------------- */
.mklook {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.mklook__field { display: block; }
.mklook__label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.mklook__select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
}
.mklook__out {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  background: var(--surface);
}
.mklook__head { display: flex; align-items: center; gap: 2px; }
.mklook__name { margin: 0; font-size: 22px; font-weight: 600; color: var(--fg); }
.mklook__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Both states carry their own word, so the colour is reinforcement rather
   than the whole message. */
.mkchip {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--line);
}
.mkchip.is-yes { background: var(--accent-soft); color: var(--fg); border-color: transparent; }
.mkchip.is-no { color: var(--muted); }

.mklook__rows { margin-top: 18px; }
.mklook__row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.mklook__row:last-child { border-bottom: 0; }
.mklook__k { color: var(--muted); }
.mklook__v { color: var(--fg); font-weight: 500; text-align: right; }
.mklook__note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 21px;
  color: var(--muted);
}
.mklook__note--warn {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 12px 12px 0;
  color: var(--fg);
  font-size: 14px;
  line-height: 22px;
}

@media (max-width: 860px) {
  .mklook { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 620px) {
  .mk__regions { gap: 26px; }
  .mklook__out { padding: 18px; }
  .mklook__row { flex-direction: column; gap: 2px; }
  .mklook__v { text-align: left; }
}

/* ==========================================================================
   Product cards
   ========================================================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.card--cream {
  background: var(--cream);
}

.card--dark {
  background: var(--ink);
}

.card__art {
  border-radius: 14px;
  overflow: hidden;
  background: #17171c;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  padding: 22px;
}

.card__art img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

/* light app screenshot — sits on a pale panel, cropped from the top */
.card__art--light {
  background: #e9e9ee;
  padding: 0;
  align-items: start;
}

.card__art--light img {
  width: 78%;
  height: auto;
  max-height: none;
  margin-top: 26px;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 18px 40px rgba(13, 7, 10, 0.18);
}

/* full-bleed dark render */
.card__art--bleed {
  position: relative;
  padding: 0;
}

.card__art--bleed img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 15px;
  margin-top: auto;
  padding-top: 6px;
}

.card__links a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Rails
   ========================================================================== */

.rails {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.rail {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rail__amount {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--fg);
}

.rail__name {
  margin: 0;
  font-weight: 600;
  color: var(--fg);
  font-size: 15px;
}

.rail__meta {
  margin: 0;
  font-size: 14px;
}

.rail__tag {
  align-self: flex-start;
  margin-top: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

/* ==========================================================================
   Tools grid — Soltio rt-management-tools pattern
   ========================================================================== */

.tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.tool {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tool--cream {
  background: var(--cream);
}

.tool__media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #14141a;
}

/* Absolute against the aspect-ratio box — a grid/flow child sized with
   height:100% would resolve against an auto row and overflow instead. */
.tool__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tool__media--contain {
  background: radial-gradient(circle at 50% 40%, #1d1a3a, #0d070a 70%);
}

/* pale panel for cut-out illustrations */
.tool__media--soft {
  background: linear-gradient(150deg, #f4f2f7, #e6e2ee);
}

/* Cut-out artwork letterboxes inside the tile. Percentage heights resolve
   against an auto-sized grid row here, so constrain with object-fit instead. */
.tool__media--contain img,
.tool__media--soft img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 9%;
}

.tool__caption {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* ==========================================================================
   Compliance
   ========================================================================== */

.badges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.badge {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 28px;
}

.badge__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--accent);
  margin-bottom: 10px;
}

.badge__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.badge__body {
  margin: 0;
  font-size: 14px;
  line-height: 23px;
}

.note {
  margin-top: 26px;
  padding: 20px 24px;
  border-radius: var(--r-card);
  background: var(--cream);
  font-size: 14px;
  line-height: 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.note a {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  max-width: 900px;
  margin-inline: auto;
}

.faq__list {
  margin-top: 36px;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235462e6' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")
    center / 14px no-repeat;
  transition: transform var(--dur) var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq__answer {
  margin: 0;
  padding: 0 0 24px;
  max-width: 68ch;
}

/* ==========================================================================
   Closing CTA + footer
   ========================================================================== */

.closer {
  background: var(--ink);
  border-radius: var(--r-card) var(--r-card) 0 0;
  padding-top: 110px;
  color: rgba(255, 255, 255, 0.68);
}

.closer__top {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding-bottom: 90px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.closer__top .lede {
  margin-inline: auto;
}

.closer__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
  gap: 40px;
  padding-block: 70px;
}

.footer__brand img {
  width: 148px;
  margin-bottom: 18px;
}

.footer__blurb {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 34ch;
}

.footer__social {
  display: flex;
  gap: 10px;
}

.footer__social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  transition: background-color var(--dur) var(--ease);
}

.footer__social a:hover {
  background: var(--accent);
}

.footer__col,
.footer__brand {
  /* grid items default to min-width:auto; long link labels would otherwise
     force the track wider than the viewport */
  min-width: 0;
}

.footer__col h4 {
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 600;
}

.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 15px;
}

.footer__col a {
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--dur) var(--ease);
}

.footer__col a:hover {
  color: #fff;
}

.footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 30px 40px;
  font-size: 13px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.45);
}

.footer__legal p {
  margin: 0 0 10px;
  max-width: 100ch;
}

/* ==========================================================================
   Footer + CTA (Figma homepage — .closer--figma)
   Scoped so legacy footers on other pages stay untouched until migrated.
   ========================================================================== */

.closer.closer--figma {
  --footer-bg: #000000;
  --footer-radius: 50px;
  --footer-ink: #ffffff;
  --footer-muted: #929292;
  --footer-link: #dbdbdb;
  --footer-divider: rgba(255, 255, 255, 0.25);
  --footer-gradient-h: clamp(480px, 50vw, 724px);
  --footer-overlay: rgba(0, 0, 0, 0.2);
  --footer-radial: radial-gradient(
    ellipse 140% 80% at 50% 100%,
    #6232ff 0%,
    #6232ff 10%,
    #140a36 42%,
    #140a36 62%,
    rgba(20, 10, 54, 0.75) 78%,
    transparent 95%
  );
  --footer-cta-heading-max: 412px;
  --footer-logo-max: 230px;
  --footer-nav-gap: 60px;
  --footer-social-gap: 50px;
  --footer-social-gap-mobile: 20px;
  --footer-cta-icon: 45px;
  --footer-flag-size: 17px;
  --footer-link-gap: 25px;

  position: relative;
  overflow: hidden;
  background: var(--footer-bg);
  border-radius: var(--footer-radius) var(--footer-radius) 0 0;
  padding-top: 0;
  color: var(--footer-link);
}

.closer--figma > .container {
  position: relative;
  z-index: 1;
  background: var(--footer-bg);
}

.closer--figma .footer__body {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--footer-bg);
}

.closer--figma > .footer__body {
  position: relative;
  z-index: 1;
}

.closer--figma .footer__body::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: var(--footer-gradient-h);
  background: var(--footer-radial);
  pointer-events: none;
  z-index: 0;
}

.closer--figma .footer__body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--footer-overlay);
  pointer-events: none;
  z-index: 0;
}

.closer--figma .footer__body > .container {
  position: relative;
  z-index: 1;
}

.closer--figma .closer__top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  padding-top: 61px;
  padding-bottom: 31px;
  text-align: left;
  border-bottom: none;
}

.closer--figma .closer__copy {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--footer-cta-heading-max);
}

.closer--figma .closer__title {
  margin: 0 0 15px;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 2.5vw + 18px, 40px);
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--footer-ink);
  text-wrap: balance;
}

.closer--figma .closer__subtitle {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--footer-muted);
}

.closer--figma .closer__actions {
  flex: none;
  display: flex;
  justify-content: flex-end;
}

.closer--figma .closer__cta.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7.5px 6px 7.5px 25px;
  gap: 20px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  background: var(--footer-ink);
  color: var(--footer-bg);
  border-radius: var(--r-pill);
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.closer--figma .closer__cta.btn:hover {
  transform: none;
  background: var(--footer-ink);
}

.closer--figma .closer__cta .btn__badge {
  width: var(--footer-cta-icon);
  height: var(--footer-cta-icon);
  background: var(--footer-bg);
  color: var(--footer-bg);
  transition: none;
}

.closer--figma .closer__cta .btn__badge img {
  display: block;
  width: 17px;
  height: auto;
  transform-origin: center center;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .closer--figma .closer__cta.btn:hover .btn__badge {
    transform: none;
  }

  .closer--figma .closer__cta.btn:hover .btn__badge img {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .closer--figma .closer__cta .btn__badge img {
    transition: none;
  }
}

.closer--figma .footer__divider {
  margin: 0;
  border: 0;
  height: 1px;
  width: 100%;
  background: var(--footer-divider);
}

.closer--figma .footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(32px, 5vw, 70px);
  align-items: stretch;
}

.closer--figma .footer__brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  padding-right: clamp(24px, 5vw, 70px);
}

.closer--figma .footer__brand::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: var(--footer-divider);
}

.closer--figma .footer__logo {
  display: block;
  max-width: var(--footer-logo-max);
}

.closer--figma .footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.closer--figma .footer__blurb {
  margin: 25px 0;
  max-width: 36ch;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--footer-link);
}

.closer--figma .footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--footer-social-gap);
}

.closer--figma .footer__social a {
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  padding: 4px;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  transition: opacity var(--dur) var(--ease);
}

.closer--figma .footer__social a:hover {
  background: transparent;
  opacity: 0.72;
}

.closer--figma .footer__social img {
  display: block;
  width: 24px;
  height: 24px;
}

.closer--figma .footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--footer-nav-gap);
  padding-top: 40px;
  padding-bottom: 50px;
}

.closer--figma .footer__col {
  min-width: 0;
}

.closer--figma .footer__heading {
  margin: 0 0 35px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--footer-ink);
  text-transform: none;
}

.closer--figma .footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--footer-link-gap);
  font-family: var(--font-body);
  font-size: 16px;
}

.closer--figma .footer__col a {
  color: var(--footer-link);
  transition: color var(--dur) var(--ease);
}

.closer--figma .footer__col a:hover {
  color: var(--footer-ink);
}

.closer--figma .footer__flag {
  flex: none;
  width: var(--footer-flag-size);
  height: var(--footer-flag-size);
  border-radius: 50%;
  object-fit: cover;
}

/* The standing disclosure, on every page rather than only on /legal. It is
   what SmashPay is and is not -- not a bank, FinCEN-registered, transmission
   by licensed partners, USDC in the customer's own wallet, not deposits, not
   FDIC-insured, fees apply -- and it is set quieter than the footer links
   because it is there to be found and read, not to be the loudest thing on
   the page. Word for word what www.smashpay.io carries. */
.closer--figma .footer__disclaimer {
  /* Full footer column rather than a 78ch measure. 78ch put it on four
     lines, which read as a wall; across the footer's own width it lands on
     two. English needs 1242px for two lines and the column is 1440px, so
     there is room to spare. Spanish, Portuguese and Filipino run 15-20%
     longer than the English and take three lines -- fitting those into two
     would mean type below 11px, which is not a trade worth making on a
     disclosure someone is meant to read.

     text-wrap: balance evens the two lines instead of leaving a full first
     line and a short second one. Browsers that do not support it just wrap
     normally. */
  margin: 34px auto 0;
  max-width: 100%;
  text-wrap: balance;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 21px;
  color: var(--footer-link);
  opacity: 0.72;
}

.closer--figma .footer__bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 50px;
  padding-bottom: clamp(40px, 5vw, 60px);
}

.closer--figma .footer__copy {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--footer-link);
}

.closer--figma .footer__col a:focus-visible,
.closer--figma .footer__social a:focus-visible,
.closer--figma .footer__logo:focus-visible,
.closer--figma .closer__cta:focus-visible {
  outline: 2px solid var(--footer-ink);
  outline-offset: 3px;
}

@media (max-width: 1023px) {
  .closer--figma .closer__top {
    align-items: flex-start;
  }

  .closer--figma .footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 40px);
  }
}

@media (max-width: 767px) {
  .brandstrip {
    padding-top: 80px !important;
    padding-bottom: 0px !important;
  }
  .closer--figma .closer__top {
    flex-direction: column;
    align-items: stretch;
    padding-top: clamp(40px, 10vw, 61px);
    padding-bottom: clamp(24px, 6vw, 31px);
  }

  .closer--figma .footer__divider {
    margin-bottom: 20px;
  }

  .closer--figma .closer__copy {
    max-width: none;
  }

  .closer--figma .closer__actions {
    justify-content: flex-start;
  }

  .closer--figma .footer__main {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .closer--figma .footer__brand {
    padding-right: 0;
    padding-bottom: 32px;
  }

  .closer--figma .footer__brand::after {
    display: none;
  }

  .closer--figma .footer__blurb {
    max-width: none;
  }

  .closer--figma .footer__social {
    gap: var(--footer-social-gap-mobile);
  }

  .closer--figma .footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 6vw, 32px);
    padding-top: 0;
    padding-bottom: 40px;
  }

  .closer--figma .footer__bottom {
    /* the disclaimer sits above this and needs the room back */
    flex-direction: column;
    align-items: center;
    margin-top: clamp(32px, 8vw, 50px);
  }
}

@media (max-width: 479px) {
  .closer--figma .footer__nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .closer--figma .closer__cta.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    text-align: left;
    gap: clamp(12px, 3vw, 20px);
    padding: 8px 8px 8px clamp(16px, 4vw, 25px);
    font-size: clamp(14px, 3.8vw, 16px);
  }

  .closer--figma .closer__cta.btn > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .closer--figma .closer__cta .btn__badge {
    flex: none;
  }
}

@media (max-width: 425px) {
  .closer--figma .closer__title {
    font-size: clamp(24px, 6.5vw, 28px);
    line-height: 1.22;
    letter-spacing: -0.02em;
  }

  .closer--figma .footer__heading {
    font-size: clamp(20px, 5.5vw, 24px);
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  .closer--figma .closer__cta.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    text-align: left;
    padding: 8px 8px 8px 16px;
    gap: 10px;
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.2;
  }

  .closer--figma .closer__cta.btn > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .closer--figma .closer__cta .btn__badge {
    width: 32px;
    height: 32px;
    flex: none;
    margin: 0;
    transform: none;
  }
}

/* ==========================================================================
   home-three sections
   ========================================================================== */

:root {
  --r-lg: 30px;
}

/* 2 · brand strip (rt-brand-logo) — scoped to .brandstrip; global .marquee untouched */
.brandstrip {
  padding-top: 100px;
  padding-bottom: 100px;
  overflow: hidden;
}

.brandstrip__head {
  text-align: center;
  margin-bottom: 15px;
}

.brandstrip__head .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #000000;
  margin: 0 0 15px;
  text-align: center;
}

.brandstrip__head .lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #40424d;
  margin: 0 auto;
  text-align: center;
  max-width: 52ch;
}

.brandstrip .marquee {
  min-height: 100px;
  -webkit-mask-image: none;
  mask-image: none;
}

.brandstrip .marquee__track {
  gap: 5px;
  width: max-content;
  animation: brandstrip-marquee var(--brandstrip-dur, 58s) linear infinite;
}

.brandstrip .marquee__track img {
  width: 150px;
  height: 100px;
  object-fit: contain;
  flex: none;
  /* p1–p9 are gray marks on transparent; darken for the light canvas */
  filter: brightness(0) opacity(0.7);
}

.brandstrip .marquee:hover .marquee__track {
  animation-play-state: running;
}

@keyframes brandstrip-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--brandstrip-loop, 1395px)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .brandstrip .marquee__track {
    animation: none;
  }
}

@media (max-width: 640px) {
  .brandstrip .marquee__track {
    gap: 5px;
  }

  .brandstrip .marquee__track img {
    width: clamp(96px, 28vw, 150px);
    height: clamp(64px, 19vw, 100px);
  }
}

/* 3 · accordion */
.acc__wrap {
  display: grid;
  grid-template-columns: 630fr 540fr;
  gap: 120px;
  align-items: center;
}

.acc__panel {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 51px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Currency rows — rebuilt in markup to the template's proportions.
   Reference: Soltio's card art is 528×120 with a ~66px flag, ~22px primary
   text and ~14px secondary text. Vector, so it stays crisp at any size. */
.crow {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 120px;
  padding: 0 8px;
  border-radius: var(--r-card);
  transition:
    transform var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.crow:hover {
  transform: translateX(4px);
  background: var(--bg);
}

.crow__flag {
  width: 66px;
  height: 66px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  /* keeps flags with white areas (ID, TH, US) reading as a circle on the
     white card rather than a half-dome */
  box-shadow: inset 0 0 0 1px rgba(13, 7, 10, 0.16);
}

/* 3:2 flag centre-cropped into the circle. max-width:none overrides the
   global svg reset, which would otherwise letterbox it. */
.crow__flag svg {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
}

.crow__id,
.crow__bal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.crow__bal {
  margin-left: auto;
  text-align: right;
}

.crow__id strong,
.crow__bal strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg);
  white-space: nowrap;
}

.crow__id em,
.crow__bal em {
  font-style: normal;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text);
  white-space: nowrap;
}

/* kept for reference — the template's original row artwork */
.acc__ui {
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}

.railcard {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border-radius: var(--r-card);
  background: var(--bg);
  transition:
    transform var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.railcard:hover {
  transform: translateX(4px);
}

.railcard--total {
  background: var(--ink);
  color: #fff;
}

.railcard__icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  position: relative;
}

.railcard--total .railcard__icon {
  background: rgba(255, 255, 255, 0.14);
}

.railcard__icon::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 4px;
  background: var(--accent);
}

.railcard--total .railcard__icon::after {
  background: var(--surface);
}

.railcard__icon--coin::after,
.railcard__icon--user::after {
  border-radius: 50%;
}

.railcard__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.railcard__body strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  color: inherit;
}

.railcard--total .railcard__body strong {
  color: #fff;
}

.railcard__body em {
  font-style: normal;
  font-size: 13px;
  color: var(--text);
}

.railcard--total .railcard__body em {
  color: rgba(255, 255, 255, 0.6);
}

.railcard__amt {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.railcard--total .railcard__amt {
  color: var(--accent);
}

.acc__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.acc__list {
  width: 100%;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.accitem {
  border-bottom: 1px solid var(--line);
}

.accitem__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  text-align: left;
}

.accitem__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
  flex: none;
}

.accitem__icon {
  width: 32px;
  height: 32px;
  flex: none;
}

.accitem__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.accitem__plus {
  margin-left: auto;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  position: relative;
  transition: transform var(--dur) var(--ease);
}

.accitem__plus::before,
.accitem__plus::after {
  content: "";
  position: absolute;
  inset: 50% 8px;
  height: 2px;
  margin-top: -1px;
  background: var(--accent);
  border-radius: 2px;
}

.accitem__plus::after {
  transform: rotate(90deg);
  transition: opacity var(--dur) var(--ease);
}

.accitem.is-open .accitem__plus {
  transform: rotate(45deg);
}

.accitem__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--reveal-dur) var(--reveal-ease);
}

.accitem.is-open .accitem__body {
  grid-template-rows: 1fr;
}

.accitem__inner {
  overflow: hidden;
}

.accitem__inner p {
  margin: 0 0 22px;
  padding-left: 48px;
  max-width: 52ch;
}

/* 3 · accordion — Figma / old-v3 homepage (scoped to .section.acc)
   Opaque --bg under the purple wash is required: .hero is overflow:visible
   with a 100vh sticky hold, and a transparent-only gradient lets the pinned
   sphere, coins, and product cards read through this section. */
.section.acc {
  --acc-purple: #6232ff;
  --acc-border: #e2e2e2;
  --acc-muted: #40424d;
  --acc-ink: var(--fg);
  --acc-shadow-flag: 0 4px 4px rgba(0, 0, 0, 0.25);
  --acc-toggle-bg: rgba(0, 0, 0, 0.15);
  --acc-toggle-hover: #000;
  --acc-ghost: rgba(0, 0, 0, 0.45);
  --acc-dur: 300ms;
  --acc-icon-dur: 520ms;
  --acc-ease: cubic-bezier(0, 0, 0.2, 1);
  --acc-icon-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --flap-dur: 320ms;
  --flap-ease: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: var(--bg);
  background-image: linear-gradient(
    180deg,
    rgba(59, 30, 153, 0) 0%,
    rgba(98, 50, 255, 0.5) 51.92%,
    rgba(78, 40, 204, 0) 100%
  );
}

.section.acc .acc__wrap {
  display: grid;
  grid-template-columns: 680fr 567fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.section.acc .acc__panel {
  background: var(--surface);
  border: 1px solid var(--acc-border);
  border-radius: var(--r-card);
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  min-width: 0;
  width: 100%;
  height: fit-content;
  overflow-x: clip;
}

.section.acc .crow {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
}

.section.acc .crow:hover {
  transform: none;
  background: transparent;
}

.section.acc .crow__flag {
  width: clamp(56px, 10vw, 80px);
  height: clamp(56px, 10vw, 80px);
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: var(--acc-shadow-flag);
}

.section.acc .crow__flag svg {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
}

.section.acc .crow__id,
.section.acc .crow__bal {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.section.acc .crow__bal {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
}

.section.acc .crow__id strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.2;
  color: var(--acc-ink);
  margin-bottom: 5px;
  white-space: nowrap;
}

.section.acc .crow__id em {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(12px, 1.6vw, 14px);
  line-height: 1.3;
  color: var(--acc-muted);
  white-space: nowrap;
}

.section.acc .crow__bal strong.ticker,
.section.acc .crow__bal em.ticker {
  font-variant-numeric: tabular-nums;
  min-height: 1.2em;
}

.section.acc .crow__bal strong.ticker {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.2;
  color: var(--acc-ink);
  margin-bottom: 5px;
  display: inline-flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  max-width: 100%;
  position: relative;
  white-space: nowrap;
}

.section.acc .crow__bal em.ticker,
.section.acc .crow__bal em:not(.ticker) {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(12px, 1.6vw, 14px);
  line-height: 1.3;
  color: var(--acc-muted);
  white-space: nowrap;
}

.section.acc .crow__bal em.ticker {
  display: inline-flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  max-width: 100%;
  position: relative;
}

.section.acc .ticker__sizer {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  height: 0;
  overflow: hidden;
}

.section.acc .ticker__track {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  max-width: 100%;
  line-height: 1.2;
  color: inherit;
}

.section.acc .ticker__sep {
  flex: none;
  white-space: pre;
}

.section.acc .flap {
  --flap-h: 1.2em;
  display: inline-block;
  position: relative;
  width: 0.65em;
  height: var(--flap-h);
  overflow: hidden;
  vertical-align: top;
  flex: none;
  color: inherit;
}

.section.acc .flap--punct {
  width: 0.32em;
}

.section.acc .flap__stage {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.section.acc .flap__face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--flap-h);
  line-height: 1;
  text-align: center;
  color: inherit;
  background: var(--surface);
}

.section.acc .flap__face--resting {
  position: relative;
}

.section.acc .flap.is-roll-up .flap__stage {
  height: calc(var(--flap-h) * 2);
  animation: accWatchRollUp var(--flap-dur) var(--flap-ease) forwards;
}

.section.acc .flap.is-roll-down .flap__stage {
  height: calc(var(--flap-h) * 2);
  animation: accWatchRollDown var(--flap-dur) var(--flap-ease) forwards;
}

.section.acc .flap.is-roll-up.is-roll-triple .flap__stage {
  height: calc(var(--flap-h) * 3);
  animation: accWatchRollUpTriple var(--flap-dur) var(--flap-ease) forwards;
}

.section.acc .flap.is-roll-down.is-roll-triple .flap__stage {
  height: calc(var(--flap-h) * 3);
  animation: accWatchRollDownTriple var(--flap-dur) var(--flap-ease) forwards;
}

.section.acc .flap__face--ghost {
  color: var(--acc-ghost);
}

@keyframes accWatchRollUp {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -50%, 0);
  }
}

@keyframes accWatchRollDown {
  0% {
    transform: translate3d(0, -50%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes accWatchRollUpTriple {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -66.666%, 0);
  }
}

@keyframes accWatchRollDownTriple {
  0% {
    transform: translate3d(0, -66.666%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.section.acc .acc__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  padding-block: 0;
  min-width: 0;
}

.section.acc .acc__badge {
  margin: 0;
  padding: 10px;
  background: var(--acc-purple);
  border-radius: 25px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1;
  color: #fff;
}

.section.acc .acc__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.22;
  color: var(--acc-ink);
  max-width: 13.6em;
}

.section.acc .acc__list {
  width: 100%;
  margin-top: 0;
  border-top: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section.acc .accitem {
  background: var(--surface);
  border-radius: var(--r-card);
  border-bottom: 0;
  overflow: hidden;
}

.section.acc .accitem__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6.5px;
  padding: 15px;
  text-align: left;
}

.section.acc .accitem__iconbox {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--acc-purple);
  border-radius: 10px;
}

.section.acc .accitem__icon {
  display: block;
  width: auto;
  height: auto;
  max-width: 24px;
  max-height: 24px;
  flex: none;
}

.section.acc .accitem__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.2;
  color: var(--acc-ink);
}

.section.acc .accitem__toggle {
  margin-left: auto;
  width: 35px;
  height: 35px;
  padding: 3px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 25px;
  background: var(--acc-toggle-bg);
  position: relative;
  transition: background-color var(--acc-dur) var(--acc-ease);
}

.section.acc .accitem__toggle-icon {
  display: block;
  width: 18px;
  height: 18px;
  transform-origin: center;
  will-change: transform, opacity;
}

.section.acc
  .accitem:not(.is-open)
  .accitem__toggle:not(.is-icon-animating)
  .accitem__toggle-icon--open {
  transform: rotate(0deg);
  opacity: 1;
}

.section.acc
  .accitem:not(.is-open)
  .accitem__toggle:not(.is-icon-animating)
  .accitem__toggle-icon--close {
  transform: rotate(45deg);
  opacity: 0;
}

.section.acc
  .accitem.is-open
  .accitem__toggle:not(.is-icon-animating)
  .accitem__toggle-icon--open {
  transform: rotate(45deg);
  opacity: 0;
}

.section.acc
  .accitem.is-open
  .accitem__toggle:not(.is-icon-animating)
  .accitem__toggle-icon--close {
  transform: rotate(0deg);
  opacity: 1;
}

.section.acc .accitem__toggle.is-icon-animating .accitem__toggle-icon--open,
.section.acc .accitem__toggle.is-icon-animating .accitem__toggle-icon--close {
  animation-duration: var(--acc-icon-dur);
  animation-timing-function: var(--acc-icon-ease);
  animation-fill-mode: forwards;
}

.section.acc
  .accitem__toggle.is-icon-animating.is-icon-opening
  .accitem__toggle-icon--open {
  animation-name: accPlusOpen;
}

.section.acc
  .accitem__toggle.is-icon-animating.is-icon-opening
  .accitem__toggle-icon--close {
  position: absolute;
  animation-name: accCloseOpen;
}

.section.acc
  .accitem__toggle.is-icon-animating.is-icon-closing
  .accitem__toggle-icon--close {
  position: absolute;
  animation-name: accCloseClose;
}

.section.acc
  .accitem__toggle.is-icon-animating.is-icon-closing
  .accitem__toggle-icon--open {
  animation-name: accPlusClose;
}

.section.acc .accitem__toggle-icon--close {
  position: absolute;
}

@keyframes accPlusOpen {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  28% {
    transform: rotate(45deg);
    opacity: 1;
  }
  52% {
    transform: rotate(45deg);
    opacity: 1;
  }
  72% {
    transform: rotate(45deg);
    opacity: 0;
  }
  100% {
    transform: rotate(45deg);
    opacity: 0;
  }
}

@keyframes accCloseOpen {
  0% {
    transform: rotate(45deg);
    opacity: 0;
  }
  48% {
    transform: rotate(45deg);
    opacity: 0;
  }
  58% {
    transform: rotate(45deg);
    opacity: 1;
  }
  78% {
    transform: rotate(22deg);
    opacity: 1;
  }
  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}

@keyframes accCloseClose {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  28% {
    transform: rotate(45deg);
    opacity: 1;
  }
  52% {
    transform: rotate(45deg);
    opacity: 1;
  }
  72% {
    transform: rotate(45deg);
    opacity: 0;
  }
  100% {
    transform: rotate(45deg);
    opacity: 0;
  }
}

@keyframes accPlusClose {
  0% {
    transform: rotate(45deg);
    opacity: 0;
  }
  48% {
    transform: rotate(45deg);
    opacity: 0;
  }
  58% {
    transform: rotate(45deg);
    opacity: 1;
  }
  78% {
    transform: rotate(22deg);
    opacity: 1;
  }
  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}

@media (hover: hover) and (pointer: fine) {
  .section.acc .accitem__head:hover .accitem__toggle,
  .section.acc .accitem__head:focus-visible .accitem__toggle {
    background: var(--acc-toggle-hover);
  }

  .section.acc .accitem__head:hover .accitem__toggle-icon,
  .section.acc .accitem__head:focus-visible .accitem__toggle-icon {
    filter: brightness(0) invert(1);
  }
}

.section.acc .accitem__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-dur) var(--acc-ease);
}

.section.acc .accitem.is-open .accitem__body {
  grid-template-rows: 1fr;
}

.section.acc .accitem__inner {
  overflow: hidden;
}

.section.acc .accitem__inner p {
  margin: 5px 15px 15px;
  padding-left: calc(42px + 6.5px);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 19px;
  color: var(--acc-ink);
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .section.acc {
    --acc-dur: 0ms;
    --acc-icon-dur: 0ms;
    --flap-dur: 0ms;
  }

  .section.acc .accitem__toggle.is-icon-animating .accitem__toggle-icon--open,
  .section.acc .accitem__toggle.is-icon-animating .accitem__toggle-icon--close {
    animation: none;
  }

  .section.acc .flap.is-roll-down .flap__stage,
  .section.acc .flap.is-roll-up .flap__stage {
    animation: none;
  }
}

@media (max-width: 1180px) {
  .section.acc .acc__wrap {
    gap: clamp(40px, 6vw, 56px);
  }

  .section.acc .acc__panel {
    padding: clamp(20px, 4vw, 32px);
  }
}

@media (max-width: 980px) {
  .section.acc .acc__wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .section.acc .acc__panel {
    order: 2;
  }

  .section.acc .acc__right {
    order: 1;
    padding-block: 0;
  }

  .section.acc .acc__title {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .section.acc .acc__panel {
    padding: clamp(18px, 5vw, 24px);
    gap: clamp(16px, 4vw, 22px);
  }

  .section.acc .crow {
    gap: clamp(12px, 3vw, 16px);
  }

  .section.acc .acc__title {
    max-width: none;
  }

  .section.acc .accitem__title {
    font-size: clamp(17px, 4.5vw, 20px);
  }

  .section.acc .accitem__inner p {
    padding-left: 0;
    margin-inline: 15px;
  }
}

@media (max-width: 425px) {
  .section.acc {
    padding-top: clamp(48px, 12vw, 72px);
    padding-bottom: clamp(48px, 12vw, 72px);
  }

  .section.acc .acc__panel {
    padding: clamp(16px, 4vw, 22px);
    gap: clamp(16px, 4vw, 22px);
  }

  .section.acc .crow {
    gap: clamp(10px, 2.8vw, 16px);
  }

  .section.acc .crow__flag {
    width: clamp(44px, 12vw, 56px);
    height: clamp(44px, 12vw, 56px);
  }

  .section.acc .accitem__head {
    padding: 12px;
    gap: 8px;
  }

  .section.acc .accitem__iconbox {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .section.acc .accitem__icon {
    max-width: 18px;
    max-height: 18px;
  }

  .section.acc .accitem__title {
    font-size: clamp(16px, 4.2vw, 18px);
    line-height: 1.3;
  }

  .section.acc .accitem__toggle {
    width: 30px;
    height: 30px;
  }

  .section.acc .accitem__toggle-icon {
    width: 16px;
    height: 16px;
  }

  .section.acc .accitem__inner p {
    margin: 5px 12px 12px;
    padding-left: calc(34px + 8px);
  }
}

/* 4 · overview */
.overview__wrap {
  display: grid;
  grid-template-columns: 500fr 630fr;
  gap: 160px;
  align-items: center;
}

.overview__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.counters {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.counters__n {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.03em;
  color: var(--fg);
}

.counters__l {
  margin: 4px 0 0;
  font-size: 14px;
}

.overview__panel {
  position: relative;
  background: #000;
  border-radius: var(--r-lg);
  min-height: 500px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 40px;
}

.overview__shot {
  width: 323px;
  max-width: 70%;
  height: auto;
  border-radius: 18px;
}

/* Stacked credit cards (Soltio rt-card-wrap-v1).
   Measured on the live template: the back card interpolates between
   translateY -15% / scale 0.93 and -12.922% / 0.9397 as the section scrolls. */
.vcards {
  position: absolute;
  right: 5%;
  bottom: 12%;
  width: 410px;
  max-width: 62%;
  z-index: 3;
  transform-style: preserve-3d;
  pointer-events: none;
}

.vcard {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
  transform-style: preserve-3d;
}

.vcard--back {
  position: relative;
  z-index: 1;
  /* default state; JS refines it while the section is on screen */
  transform: translate3d(0, -15%, 0) scale3d(0.93, 0.93, 1);
}

.vcard--front {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
  .vcard--back {
    transform: translate3d(0, -14%, 0) scale3d(0.935, 0.935, 1);
  }
}

.overview__float {
  position: absolute;
  z-index: 4;
  left: 6%;
  top: 7%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
}

.overview__float strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
}

.overview__float em {
  font-style: normal;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

.overview__float-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--positive);
  flex: none;
}

/* 5 · trio cards */
.trio__title {
  max-width: 18ch;
  margin-inline: auto;
  text-align: center;
}

.trio__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: 60px;
}

.tcard {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tcard--cream {
  background: var(--cream);
}

.tcard__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
}

.tcard__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.tcard__p {
  margin: 0;
  font-size: 15px;
  line-height: 25px;
}

.tcard__art {
  position: relative;
  margin-top: auto;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: #17171c;
}

.tcard__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tcard__cta {
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
}

/* ── SmashX Rewards ────────────────────────────────────────────────────────
   Referral programme: the reward ladder, the in-app tracker, and the steps. */
.rw__title {
  margin-top: 16px;
  max-width: 20ch;
}

.rw__lede {
  margin-top: 14px;
  max-width: 56ch;
}

/* the terms card beside the tracker */
.rw__rate {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.rw__rate li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--text);
}

.rw__rate li:first-child {
  border-top: 1px solid var(--line);
}

.rw__rate b {
  font-weight: 600;
  color: var(--fg);
  text-align: right;
}

/* ── The reward ladder ──
   Four rungs, rising left to right. The step in padding-top is what makes it
   read as a ladder rather than four equal cards — each rung sits a little
   higher than the last, so the row has a direction. */
.lad {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: end;
}

.lad__rung {
  position: relative;
  padding: 30px 26px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.lad__rung:nth-child(2) {
  margin-bottom: 18px;
}
.lad__rung:nth-child(3) {
  margin-bottom: 36px;
}
.lad__rung:nth-child(4) {
  margin-bottom: 54px;
}

.lad__rung--top {
  background: var(--ink);
  border-color: var(--fg);
}

.lad__at {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

.lad__rung--top .lad__at {
  background: rgba(255, 255, 255, 0.14);
  color: var(--smash-lime);
}

.lad__pay {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
}

.lad__pay b {
  display: block;
  font-size: clamp(36px, 3.2vw, 48px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--fg);
}

.lad__rung--top .lad__pay {
  color: rgba(255, 255, 255, 0.6);
}

.lad__rung--top .lad__pay b {
  color: var(--smash-lime);
}

.lad__usd {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}

.lad__rung--top .lad__usd {
  color: #fff;
}

.lad__note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

.lad__rung--top .lad__note {
  border-top-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.64);
}

/* ── Programme terms ── */
.ladterms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}

.ladterm h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.ladterm p {
  margin-top: 9px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}

.ladterm--both h3 {
  color: var(--accent);
}

/* ── In-app friend tracker ── */
/* The section is a black band with a green glow in its lower left, and the
   panel inside it is the inverse of the band: a purple gradient frame around
   a white screen. The screen used to be the black thing on a light page,
   which read as the same object as the dark cards elsewhere rather than as a
   phone screen. */
.ftrk-sec {
  position: relative;
  overflow: hidden;
  margin-inline: var(--gutter);
  /* The page separates sections with the next one's padding-top. Once this
     section has a background of its own that padding is inside the band, so
     the gap has to come back as a margin. */
  margin-top: var(--section-y);
  padding: clamp(48px, 6vw, 92px) 0;
  border-radius: var(--r-lg);
  background: #000000;
}

.ftrk-sec::before {
  content: "";
  position: absolute;
  left: -12%;
  bottom: -34%;
  width: 72%;
  height: 92%;
  background: radial-gradient(
    closest-side,
    rgba(206, 255, 28, 0.34),
    rgba(206, 255, 28, 0) 100%
  );
  pointer-events: none;
}

/* .container has no stacking context of its own, so the glow would paint over
   the copy without this.

   The inset is trimmed because the band already carries the page gutter: at
   the full gutter the content sat two gutters in from the page edge, the
   columns came out at 540px, and "Watch every friend climb" -- which needs
   566 on one line -- broke in two. The layout runs it on one. */
.ftrk-sec > .container {
  position: relative;
  z-index: 1;
  padding-inline: clamp(20px, 4vw, 56px);
}

.ftrk-sec .split {
  gap: clamp(36px, 3.6vw, 52px);
}

.ftrk-sec .h2 { color: #ffffff; }
.ftrk-sec .lede { color: rgba(255, 255, 255, 0.66); }

.ftrk-sec .rw__rate li {
  border-bottom-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.66);
}
/* The layout rules the gaps between the four facts, not the block as a whole:
   no line above the first or below the last. */
.ftrk-sec .rw__rate li:first-child { border-top: 0; }
.ftrk-sec .rw__rate li:last-child { border-bottom: 0; }
.ftrk-sec .rw__rate b { color: #ffffff; }

.ftrk-frame {
  align-self: center;
  padding: clamp(14px, 1.6vw, 26px);
  border-radius: calc(var(--r-card) + 16px);
  background: linear-gradient(
    135deg,
    #4f46e5 0%,
    #7c3aed 34%,
    #c026d3 70%,
    #e879f9 100%
  );
}

.ftrk {
  padding: 28px 26px 22px;
  background: #ffffff;
  border-radius: var(--r-card);
  color: var(--ink);
}

.ftrk__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.ftrk__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ftrk__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.ftrk__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Two columns of a fixed rhythm: who + spend on the left, rungs + earnings on
   the right. A four-column grid put the names on their own line as soon as a
   figure grew a digit. */
.ftrk__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.ftrk__row:last-child {
  border-bottom: 0;
}

.ftrk__who {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}

.ftrk__who i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: rgba(84, 98, 230, 0.1);
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.ftrk__earn {
  text-align: right;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ftrk__earn--ready {
  color: var(--accent);
}

.ftrk__spend {
  padding-left: 38px;
  font-size: 13px;
  color: var(--muted);
}

.ftrk__state {
  text-align: right;
  font-size: 13px;
  color: var(--muted);
}

/* The four rungs as pips. Sits on the spend row rather than getting a line of
   its own — it is the same fact as the spend figure, said visually. */
.ftrk__pips {
  grid-column: 1 / -1;
  display: flex;
  gap: 5px;
  margin: 8px 0 0 38px;
}

.ftrk__pips i {
  flex: 1 1 0;
  height: 5px;
  border-radius: 3px;
  background: rgba(84, 98, 230, 0.14);
}

.ftrk__pips i.is-on {
  background: var(--accent);
}

.ftrk__row--idle .ftrk__who,
.ftrk__row--idle .ftrk__earn {
  color: var(--muted);
}

.ftrk__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--text);
}

.ftrk__foot b {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.ftrk__note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
}

/* ── Step list ── */
.rwsteps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.rwstep {
  padding: 30px 28px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.rwstep--claim {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.rwstep__num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.rwstep--claim .rwstep__num {
  background: rgba(255, 255, 255, 0.18);
  color: var(--on-accent);
}

.rwstep__h {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.rwstep--claim .rwstep__h {
  color: var(--on-accent);
}

.rwstep__p {
  margin-top: 9px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}

.rwstep--claim .rwstep__p {
  color: var(--on-accent-soft);
}

.rwstep__p b {
  font-weight: 600;
  color: var(--fg);
}

.rwstep--claim .rwstep__p b {
  color: var(--on-accent);
}

@media (max-width: 1080px) {
  .lad,
  .ladterms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The rising step only reads across a single row. Wrapped to two, the
     offsets just look like misalignment. */
  .lad__rung:nth-child(2),
  .lad__rung:nth-child(3),
  .lad__rung:nth-child(4) {
    margin-bottom: 0;
  }

  .rwsteps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .lad,
  .ladterms,
  .rwsteps {
    grid-template-columns: 1fr;
  }

  .lad__rung {
    padding: 26px 22px 24px;
  }

  .rwstep {
    padding: 26px 22px 24px;
  }

  .ftrk {
    padding: 24px 20px 20px;
  }

  /* Stacked, the right-hand column has nowhere to sit opposite the name. */
  .ftrk__row {
    grid-template-columns: 1fr;
  }

  .ftrk__earn,
  .ftrk__state {
    text-align: left;
    padding-left: 38px;
  }
}

/* ── Rewards disclaimer, directly under the hero ───────────────────────────
   Deliberately not footer-sized. It qualifies every dollar figure on the page,
   so it is set at body scale with an accent rule rather than shrunk to the
   12px legal grey that readers have learned to skip. */
.rwdisc {
  padding-top: 38px;
}

.rwdisc p {
  max-width: 74ch;
  padding-left: 20px;
  border-left: 2px solid var(--accent);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}

@media (max-width: 700px) {
  .rwdisc {
    padding-top: 30px;
  }

  .rwdisc p {
    padding-left: 16px;
    font-size: 14px;
  }
}

/* ── Token lifecycle strip ─────────────────────────────────────────────────
   Earn → Hold → Claim. Three equal columns with a chevron drawn between
   them, so the row reads as one movement rather than three separate points. */
.tflow {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* ── "What a SmashX Points actually is" ──
   Heading, lede and closing line centred, and the three steps gathered into
   a black band. Scoped to .tok, which only this page has: /earn shares
   .tflow and .rw__title and is not part of this pass. */
.tok .rw__title,
.tok .rw__lede,
.tok__foot {
  margin-inline: auto;
  text-align: center;
}
.tok .rw__title { max-width: none; }
.tok .rw__lede { max-width: 66ch; }
.tok__foot { max-width: 68ch; }

.tok .tflow {
  margin-top: clamp(30px, 3.4vw, 46px);
  padding: clamp(22px, 2.6vw, 38px);
  border-radius: var(--r-lg);
  background: #000000;
}

.tok .tflow__step {
  background: #1c1c1e;
}
.tok .tflow__k {
  color: var(--smash-lime);
}
.tok .tflow__step p {
  color: rgba(255, 255, 255, 0.68);
}
/* The chevron sits in the gap between cards, which is inside the band now,
   so it is drawn against black rather than against the page. */
.tok .tflow__step + .tflow__step::before {
  border-top-color: rgba(255, 255, 255, 0.55);
  border-right-color: rgba(255, 255, 255, 0.55);
}

.tflow__step {
  position: relative;
  padding: 26px 28px 24px;
  background: var(--cream);
  border-radius: var(--r-card);
}

/* The chevron sits in the gutter, not inside a card, so it stays centred on
   the seam however tall the cards grow. */
.tflow__step + .tflow__step::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--line);
  border-right: 2px solid var(--line);
  transform: translateY(-50%) rotate(45deg);
}

.tflow__k {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.tflow__step p {
  margin-top: 9px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}

.tok__foot {
  margin-top: 34px;
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}

@media (max-width: 1080px) {
  .tok .badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .tflow {
    grid-template-columns: 1fr;
  }

  /* Stacked, the chevron has to turn the corner with the flow — pointing
     right between two cards that now sit one above the other reads as an
     arrow into the margin. */
  .tflow__step + .tflow__step::before {
    left: 50%;
    top: -14px;
    transform: translateX(-50%) rotate(135deg);
  }

  .tok .badges {
    grid-template-columns: 1fr;
  }
}

/* ── Token simulation widget ───────────────────────────────────────────────
   Controls on the left, the running balance on the right. */
/* The Rewards page centres this section's heading and lede over the two
   cards and lets the control card stop at its own content. /earn uses .simsec
   too and is not part of this pass, hence the modifier rather than a change
   to .simsec itself. */
.simsec--centred .rw__title,
.simsec--centred .rw__lede {
  margin-inline: auto;
  text-align: center;
}
.simsec--centred .rw__title { max-width: none; }
.simsec--centred .rw__lede { max-width: 62ch; }

.simsec--centred .sim {
  gap: clamp(20px, 2.6vw, 40px);
  /* Top, not stretch: stretching left the controls card as tall as the
     result card beside it, with the button marooned 150px below the last
     slider at the bottom of an empty box. */
  align-items: start;
}

/* Guarded by the same breakpoint that collapses .sim to one column, because
   this selector outruns that rule: left unguarded it held two 157px columns
   on a 375px screen, one word per line. */
@media (min-width: 941px) {
  .simsec--centred .sim {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.simsec--centred .sim__controls {
  /* A neutral wash rather than --surface over --line: the layout draws a
     grey block, and a grey that is a tint of the page works on both themes
     where a fixed hex would only work on one. */
  background: rgba(128, 128, 128, 0.08);
  border-color: transparent;
}

/* The result card is black whichever theme the page is in, so its button is
   stated outright rather than taken from a theme token. */
.simsec--centred .sim__claim {
  background: #ffffff;
  color: var(--ink);
}
.simsec--centred .sim__claim .btn__badge {
  background: var(--ink);
  color: #ffffff;
}

.sim {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 24px;
  margin-top: 42px;
  align-items: stretch;
}

.sim__controls {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 36px 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.sim__ctl {
  display: block;
}

.sim__ctlhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  color: var(--text);
}

.sim__ctlhead b {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* Range inputs are styled from scratch — the native control is a different
   shape in every browser, and next to this typography the default chrome
   reads as an unstyled form. */
.sim__ctl input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin-top: 14px;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  cursor: pointer;
}

.sim__ctl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 4px solid var(--surface);
  box-shadow: 0 2px 8px rgba(13, 7, 10, 0.28);
  cursor: grab;
}

.sim__ctl input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 8px rgba(13, 7, 10, 0.28);
  cursor: grab;
}

.sim__ctl input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Full-width, so the arrow goes to the right edge like every other full-width
   button rather than travelling with the label — it was sitting 133px in. */
.sim__play {
  margin-top: auto;
  justify-content: space-between;
  padding-left: 22px;
}

.sim__stage {
  display: flex;
  flex-direction: column;
  padding: 34px 32px 28px;
  background: var(--ink);
  border-radius: var(--r-card);
  color: #fff;
}

.sim__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.sim__badge {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-weight: 600;
  color: var(--smash-lime);
}

.sim__month {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
}

.sim__total {
  margin-top: 24px;
  font-family: var(--font-display);
  line-height: 1;
  /* tabular figures, or the counter jitters sideways as it climbs through
     each new digit width during the run */
  font-variant-numeric: tabular-nums;
}

.sim__total b {
  font-size: clamp(44px, 4.6vw, 68px);
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--smash-lime);
}

.sim__total i {
  font-style: normal;
  font-size: 20px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.sim__usd {
  margin-top: 8px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
}

.sim__usd b {
  font-weight: 600;
  color: #fff;
}

/* The four rungs inside the simulation stage. A bar plus its threshold, lit
   as the climbing spend passes it — the same four pips as the tracker, but
   labelled, because here you are watching them being earned rather than
   reading a summary. */
.simlad {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
}

.simlad li {
  display: grid;
  gap: 8px;
}

.simlad__bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
  transition: background-color 220ms var(--ease);
}

.simlad b {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  transition: color 220ms var(--ease);
}

.simlad li.is-on .simlad__bar {
  background: var(--smash-lime);
}

.simlad li.is-on b {
  color: #fff;
}

.sim__hint {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

.sim__rows {
  margin: 22px 0 0;
}

.sim__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
}

.sim__row dt {
  color: rgba(255, 255, 255, 0.6);
}

.sim__row dd {
  margin: 0;
  font-weight: 600;
  color: #fff;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sim__row--total {
  border-bottom: 0;
}

.sim__row--total dd {
  color: var(--smash-lime);
}

.sim__claim {
  margin-top: 18px;
  justify-content: space-between;
  padding-left: 22px;
}

.sim__claim:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.sim__claim.is-claimed {
  background: var(--smash-lime);
  color: var(--fg);
}

.sim__claim.is-claimed .btn__badge {
  background: var(--ink);
  color: var(--smash-lime);
}

.sim__note {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.42);
}

@media (max-width: 940px) {
  .sim {
    grid-template-columns: 1fr;
  }

  .sim__play {
    margin-top: 6px;
  }
}

@media (max-width: 700px) {
  .sim__controls {
    padding: 28px 22px;
    gap: 24px;
  }

  .sim__stage {
    padding: 28px 22px 24px;
  }

  .simlad {
    gap: 6px;
  }

  .simlad b {
    font-size: 11px;
  }
}
/* Safari and Firefox with backdrop-filter disabled would render the fill flat
   at 0.78, which is see-through with nothing blurring behind it — unreadable
   over a busy hero. Fall back to near-opaque there. */
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
}
@keyframes megaIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ── Membership tiers ──────────────────────────────────────────────────────
   Three cards, then the same facts again as a comparison table. Both, because
   they answer different questions: the cards sell a tier, the table settles an
   argument between two of them. */
.mem__lede {
  margin: 16px auto 0;
  max-width: 62ch;
  text-align: center;
}

.memgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-top: 46px;
}

.mem {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 34px 32px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.mem--feature {
  background: var(--ink);
  color: #fff;
  border-color: var(--fg);
  box-shadow: 0 30px 60px rgba(13, 7, 10, 0.18);
}

.mem__flag {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
}

.mem__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.mem--feature .mem__name {
  color: #fff;
}

.mem__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--font-display);
  color: var(--fg);
}

.mem--feature .mem__price {
  color: #fff;
}

.mem__price b {
  font-size: clamp(36px, 3.2vw, 48px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.mem__price i {
  font-style: normal;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}

.mem--feature .mem__price i {
  color: rgba(255, 255, 255, 0.6);
}

.mem__note {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text);
}

.mem--feature .mem__note {
  color: rgba(255, 255, 255, 0.55);
}

.mem__card {
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}

.mem--feature .mem__card {
  background: rgba(255, 255, 255, 0.12);
  color: var(--smash-lime);
}

.mem__feats {
  list-style: none;
  margin: 24px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.mem--feature .mem__feats {
  border-top-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.82);
}

.mem__feats b {
  font-weight: 600;
  color: var(--accent);
}

.mem--feature .mem__feats b {
  color: var(--smash-lime);
}

/* space-between, not center. Centring lays out the label and the arrow as one
   group, so the arrow's position moves with the length of the label — measured
   154px from the left on "Start free" against 176px on "Join the waitlist",
   which read as four cards whose buttons did not line up. Pinned apart, the
   label starts at the padding and the arrow sits at the right edge, so every
   card agrees whatever the label says. */
.mem__cta,
.plan__cta {
  justify-content: space-between;
  padding-left: 22px;
}

/* padding-top: 0 used to be here, which made these 46px tall against the 54px
   every other button on the site is — an eight-pixel difference that showed up
   wherever a card button sat near a section button. */
.mem__cta {
  margin-top: auto;
}

/* The gap lives on the list's bottom margin, not the button's top. As
   "margin-top: 26px" on the button it beat the "margin-top: auto" meant to
   push the button to the foot of the card — the adjacent-sibling selector is
   more specific — so the button simply followed the feature list and landed 82px
   from the bottom on two tiers and 33px on the others. */
.mem__feats {
  margin-bottom: 26px;
}

/* ── Comparison table ── */
.memtab-wrap {
  margin-top: 46px;
  /* the table scrolls, never the page */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── The business table's per-plan view ────────────────────────────────────
   memplan.js reads one plan's column out of the comparison table and lays it
   out two-up under collapsible headings. The cells never move and are never
   copied -- the table is still the only place the numbers are written down,
   and with the script off the page is the comparison table it has always
   been. */
/* Folder tabs: a row sitting on a single rule, the selected one filled and
   covering the rule so it reads as the front of the stack rather than as a
   button that happens to be on.

   46 above is the rhythm everything else in this region runs on. Nothing
   below, because the rule is the join -- what follows starts against it. */
.memplanbar {
  display: flex;
  gap: 2px;
  margin: 46px 0 0;
  border-bottom: 1px solid var(--line);
}
.memplanbar__btn {
  flex: 1 1 0;
  min-width: 0;
  /* The extra pixel below is the one that laps over the rule. */
  margin-bottom: -1px;
  padding: 14px 18px 15px;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.memplanbar__btn:hover {
  color: var(--fg);
  background: rgba(128, 128, 128, 0.07);
}
.memplanbar__btn.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
/* The comparison's tab. Narrower than a plan's -- it is one word against
   four names -- and set off by the gap so the four plans still read as a
   set with the comparison beside them rather than as five peers. */
.memplanbar__btn--all {
  flex: 0 0 auto;
  margin-left: 10px;
}
/* .memplanbar sets display:flex, which beats the UA sheet's [hidden]
   display:none. The bar is hidden by the attribute before the page opens
   the region, and has only ever stayed down because its parent is hidden
   too. */
.memplanbar[hidden] {
  display: none;
}

/* "and more..." closes the feature list: the card shows the handful that
   distinguish the plan, and this opens the full set -- that plan's own view
   on the business side, the comparison table on the personal one, which has
   no per-plan view. */
.plan__more {
  margin: 14px 0 18px;
}
.plan__more a {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.plan--feature .plan__more a,
.mem--feature .plan__more a {
  color: #ffffff;
}

/* The selected plan's own header: its name, price, corridors and features,
   cloned out of its card by memplan.js. */
.memplanhead {
  padding: clamp(24px, 2.6vw, 38px);
  margin: 0 0 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  /* After the shorthand, not before it, or it resets them: square at the top
     so the card joins the tab rule above as one object. */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top-color: transparent;
}
.memplanhead__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 40px;
  align-items: start;
}
/* Thin rules between the three, as drawn -- on the columns themselves so
   they vanish with the grid when it stacks. */
.memplanhead__price,
.memplanhead .mem__corr {
  padding-left: 40px;
  border-left: 1px solid var(--line);
}
/* In the card the badge is pinned to a corner; here it sits in the flow
   beside the name. */
.memplanhead__id .plan__flag {
  position: static;
  display: inline-block;
  margin: 0 0 10px;
}
.memplanhead__id .plan__name { margin: 0; }
.memplanhead__id .plan__desc { margin: 6px 0 0; }
.memplanhead__price .plan__price { margin: 0; }
.memplanhead__price .plan__note { margin: 8px 0 0; }
.memplanhead .mem__corr { margin: 0; }

/* The features move from one column in the card to three across the header. */
.memplanhead__feats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 34px;
  margin-top: clamp(20px, 2.2vw, 30px);
  padding-top: clamp(20px, 2.2vw, 30px);
  border-top: 1px solid var(--line);
}

/* The comparison's row of four, gone on a plan's page -- it carries its own
   band inside the card. display rather than the hidden attribute, which
   .ladterms' own display:grid would have beaten. */
.memmore.is-planview > .ladterms {
  display: none;
}

/* The plan's band, inside its card. In the comparison view the four of them
   are a set read across under a rule; here there is one answer, tinted and
   centred, and the row of four is hidden entirely rather than filtered. */
.memplanhead__band {
  max-width: 660px;
  margin: clamp(26px, 3vw, 42px) auto 0;
  padding: 22px 28px;
  border-radius: var(--r-card);
  background: var(--accent-soft);
  text-align: center;
}
.memplanhead__band h3 {
  margin: 0;
  font-size: 19px;
}
.memplanhead__band p {
  margin: 8px 0 0;
}

.memplanhead__acts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: clamp(26px, 3vw, 40px) 0 0;
}

@media (max-width: 860px) {
  .memplanhead__top { grid-template-columns: minmax(0, 1fr); }
  .memplanhead__feats { grid-template-columns: minmax(0, 1fr); }
  .memplanhead__price,
  .memplanhead .mem__corr {
    padding-left: 0;
    border-left: 0;
  }
}

/* A collapsed group's rows. Specific enough to beat .memtab.is-plan tr's
   display:grid, which is why this is a class and not the hidden attribute. */
.memtab tr.is-shut,
.memtab.is-plan tr.is-shut {
  display: none;
}

/* The group heading becomes the dropdown's control. It is a button inside the
   existing <th>, so the table keeps its row-group semantics. */
.memtab__gtoggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* Points down when the section is shut -- "there is more below" -- and turns
   up once it is open. It was the other way round, which with everything
   starting closed meant every chevron claimed to be open. */
.memtab__chev {
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-135deg);
  transform-origin: 60% 60%;
  transition: transform 0.18s;
}
.memtab__gtoggle[aria-expanded="false"] .memtab__chev {
  transform: rotate(45deg);
}

/* The last group's own line, moved in beside its heading. */
.memtab__gdesc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--muted);
  /* The group heading is uppercase and tracked out; a sentence is not. */
  text-transform: none;
  letter-spacing: normal;
}
.memtab.is-plan .memtab__gdesc {
  margin: 10px 0 0 52px;
}

/* Two-up pairs, a card per group. The table is taken out of table layout
   entirely: each group's tbody is a card and a two-column grid, each row is
   one label/value pair, and the group heading spans both. */
.memtab.is-plan { display: block; min-width: 0; }
.memtab.is-plan thead { display: none; }
.memtab.is-plan .memgrp {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 3.6vw, 54px);
  margin-bottom: 20px;
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px)
    clamp(8px, 1vw, 14px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.memtab.is-plan .memgrp:last-child { margin-bottom: 0; }
.memtab.is-plan tr {
  display: grid;
  /* fit-content, not auto. Most values are a figure and should hug the right
     edge, but a few are whole sentences -- "On every plan" carries a
     paragraph about multi-currency accounts -- and an auto track sizes to
     max-content, which let that one take the row and left the label
     overlapping it. The cap keeps the label at least 58%. */
  grid-template-columns: minmax(0, 1fr) fit-content(42%);
  align-items: baseline;
  gap: 10px 20px;
  padding: 15px 0;
  border-bottom: 0;
}

/* Rules between the pairs, not under the last one. Inside a card the
   children are the heading and then the rows two to a line, so the first
   pair is children 2 and 3 and everything from the fourth starts a new
   line that wants a rule above it. */
.memtab.is-plan .memgrp tr:nth-child(n + 4) {
  border-top: 1px solid var(--line);
}
.memtab.is-plan tr.memtab__group {
  display: block;
  grid-column: 1 / -1;
  padding: 0 0 6px;
  border-bottom: 0;
}

/* The heading's own icon, boxed. In the comparison view it is a small mark
   beside the label; on a card it is the card's badge. */
.memtab.is-plan .memtab__gtoggle {
  gap: 14px;
  font-size: 19px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg);
}
.memtab.is-plan .memtab__ico {
  flex: none;
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 9px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
}
.memtab.is-plan tr.memtab__group th { display: block; }
/* .memtab tbody th is 30% wide, which is right for five columns and wrong
   here: out of table layout it left the label 155px and wrapped every other
   one, and squeezed the group headings to 391 of the 1305 they span. */
.memtab.is-plan th,
.memtab.is-plan td {
  width: auto;
}
.memtab.is-plan th[scope="row"] {
  display: block;
  padding: 0;
  border: 0;
}
/* Only the chosen plan's cell. nth-of-type counts <td> only, so the row
   heading does not shift the index. */
.memtab.is-plan td { display: none; padding: 0; border: 0; text-align: right; }
.memtab.is-plan.plan-1 td:nth-of-type(1),
.memtab.is-plan.plan-2 td:nth-of-type(2),
.memtab.is-plan.plan-3 td:nth-of-type(3),
.memtab.is-plan.plan-4 td:nth-of-type(4) {
  display: block;
  font-weight: 600;
}
/* A row that is the same on every tier says so once, in a single cell
   spanning them all -- so there is no nth-of-type to pick it out by, and it
   was being hidden on every plan but the first. Three rows, including the
   paragraph about what comes with every plan, were missing from Grow, Scale
   and Enterprise entirely. */
.memtab.is-plan td.is-span {
  display: block;
  background: none;
  font-weight: 400;
  text-align: left;
}
.memtab.is-plan tr:has(> td.is-span) {
  grid-template-columns: minmax(0, 1fr);
}

/* The feature column and the all-tiers rows are tinted in the comparison
   view so the eye can follow one tier across; in a single-plan view there is
   nothing to follow and nothing to compare it against. */
.memtab.is-plan td.is-feature,
.memtab.is-plan tr.is-feature th,
.memtab.is-plan tr.is-feature td {
  background: none;
}

/* A row whose value is a sentence: the label above, the sentence across the
   full width and ranged left. */
.memtab.is-plan tr.is-prose {
  grid-template-columns: minmax(0, 1fr);
}
.memtab.is-plan tr.is-prose td {
  text-align: left;
  font-weight: 400;
}

@media (max-width: 860px) {
  /* Two to a row. The bar is flex now, so the old grid-template-columns was
     doing nothing and four tabs were sharing 375px -- 82px each, which cuts
     "Enterprise" in half. The upper pair keeps its own rule so both rows
     read as folder tabs rather than one row and some strays. */
  .memplanbar {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .memplanbar__btn {
    flex: 1 1 calc(50% - 2px);
    padding: 12px 10px 13px;
    font-size: 14px;
  }
  /* A row of its own under the two pairs, rather than a half-width tab
     beside an empty half. */
  .memplanbar__btn--all {
    flex: 1 1 100%;
    margin-left: 0;
  }
  .memtab.is-plan .memgrp { grid-template-columns: minmax(0, 1fr); }
  /* One per line now, so every row after the first starts one -- the
     two-column rule would have skipped the second. */
  .memtab.is-plan .memgrp tr:nth-child(n + 4) { border-top: 0; }
  .memtab.is-plan .memgrp tr:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

.pgrid__compare {
  margin: 46px 0 0;
  text-align: center;
}

.memtab {
  width: 100%;
  /* 640 fitted four columns; the business table has five */
  min-width: 760px;
  border-collapse: collapse;
  font-size: 15px;
}

/* The two comparison tables only. The extras tables share the class and are
   three columns of prose, which want auto layout and get it. */
.memtab--cmp {
  /* Auto layout sized each column to its own longest value, so the four
     plans came out 211, 254, 259 and 285 wide on the business table and
     233-285 on the personal one. In a comparison that is the one thing the
     columns must not do: the highlighted plan was visibly narrower than its
     neighbours, and no two figures lined up down the page. */
  table-layout: fixed;
  /* Where the tinted column starts and how wide it is, as shares of the
     table. --feat is which plan carries the tint, counting from the first
     plan column; the class on the table sets it. */
  --feat-x: calc(var(--label-w) + (var(--feat) - 1) * var(--plan-w));
  --label-w: 30%;
  --plan-w: 17.5%;
}
.memtab--feat-2 { --feat: 2; }
.memtab--feat-3 { --feat: 3; }

/* 30 + 4x17.5. The label column carries a name and a sentence under it and
   needs the room; the plans carry a figure each and need to match. */
.memtab--cmp thead th {
  width: 17.5%;
}
.memtab--cmp thead th:first-child {
  width: 30%;
}
/* A plan view is a grid, not a table -- the widths above are the
   comparison's and would fight it. */
.memtab--cmp.is-plan {
  table-layout: auto;
}

/* A group heading spans the table, so it has no cell in the tinted column
   and the tint stopped dead at each of the five headings -- the highlighted
   plan read as five separate blocks rather than as one column. The heading
   carries the band itself, at the column's own position, which the fixed
   layout above makes exact. */
.memtab--cmp tr.memtab__group > th {
  background-image: linear-gradient(
    to right,
    transparent var(--feat-x),
    var(--accent-soft) var(--feat-x),
    var(--accent-soft) calc(var(--feat-x) + var(--plan-w)),
    transparent calc(var(--feat-x) + var(--plan-w))
  );
}
/* Not in a plan view: there is one plan on show and nothing to highlight. */
.memtab--cmp.is-plan tr.memtab__group > th {
  background-image: none;
}

.memtab th,
.memtab td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.memtab thead th {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  border-bottom-color: var(--fg);
}

.memtab tbody th {
  font-weight: 500;
  color: var(--text);
  width: 30%;
}

.memtab td {
  color: var(--ink-2);
  font-weight: 600;
}

/* The middle column is tinted down its whole height so the eye can follow one
   tier without counting across. */
.memtab .is-feature {
  background: var(--accent-soft);
}

.memtab thead .is-feature {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Rows that are the same on every tier say so once, across the three columns,
   rather than repeating one value three times. */
.memtab .is-span {
  font-weight: 400;
  color: var(--text);
  background: var(--cream);
}

.memtab .is-span a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.memtab tbody tr:last-child th,
.memtab tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 1080px) {
  .memgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mem--feature {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (max-width: 700px) {
  .memgrid {
    grid-template-columns: 1fr;
  }

  .mem {
    padding: 28px 24px 26px;
  }

  .memtab th,
  .memtab td {
    padding: 14px 14px;
  }
}

/* ── Pricing plans ─────────────────────────────────────────────────────────
   Soltio's pricing-three layout: centred title, a monthly/yearly pill, then
   three cards with the middle one raised. */
.prices__title {
  text-align: center;
  max-width: 20ch;
  margin-inline: auto;
}

.ptoggle {
  display: flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  margin: 30px auto 0;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

.ptoggle__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 10px 24px;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.ptoggle__btn.is-on {
  background: var(--ink);
  color: #fff;
}

.ptoggle__save {
  padding-inline: 12px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.pgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  /* stretch, not start: the three feature lists are different lengths, and
     letting each card size to its own content leaves the row with a ragged
     bottom edge that reads as a layout fault rather than a difference in
     what you get. */
  align-items: stretch;
  margin-top: 46px;
}

/* Four tiers rather than three, so the columns are narrower and the feature
   lists run longer. A modifier rather than a change to .pgrid, which the
   personal membership grid still uses at three.

   minmax(0, 1fr), not 1fr: a grid track's default minimum is its content, so a
   long unbreakable line — "$250,000 a month converted at 0.75%" — would push
   the track wider than its share and overflow the row. */
.pgrid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1240px) {
  .pgrid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* At three columns the feature card spans the row; at two it is one of a
     pair, so the span has to come off or it takes the full width. */
  .pgrid--four .plan--feature {
    grid-column: auto;
    order: 0;
  }
}

@media (max-width: 700px) {
  .pgrid--four {
    grid-template-columns: 1fr;
  }
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 36px 32px 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

/* The middle card is raised rather than recoloured: on a page this light a
   third accent block would fight the CTA it is meant to be pointing at. */
.plan--feature {
  position: relative;
  background: var(--ink);
  color: #fff;
  border-color: var(--fg);
  box-shadow: 0 30px 60px rgba(13, 7, 10, 0.18);
}

.plan__flag {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.plan__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.plan--feature .plan__name {
  color: #fff;
}

.plan__desc {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  min-height: 3.1em;
}

.plan--feature .plan__desc {
  color: rgba(255, 255, 255, 0.68);
}

/* The personal dark card never got the same treatment, so its description
   was still --ink-2: #222 on #0d070a, which measures 1.25:1 and is not
   there at all. Same value as the business card beside it, which measures
   6.3 against the same background. */
.mem--feature .mem__desc {
  color: rgba(255, 255, 255, 0.68);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 22px;
  font-family: var(--font-display);
  color: var(--fg);
}

.plan--feature .plan__price {
  color: #fff;
}

.plan__now {
  font-size: clamp(38px, 3.4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* "Let's talk" is a sentence, not a figure — at the numeral size it wraps and
   drags the card taller than the two beside it. */
.plan__now--talk {
  font-size: clamp(28px, 2.4vw, 38px);
}

.plan__per {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}

.plan--feature .plan__per {
  color: rgba(255, 255, 255, 0.6);
}

.plan__note {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text);
}

.plan--feature .plan__note {
  color: rgba(255, 255, 255, 0.55);
}

.plan__cta {
  margin-top: 24px;
  width: 100%;
}

.plan__feats {
  list-style: none;
  margin: 26px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 13px;
}

.plan--feature .plan__feats {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.plan__feats li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.plan--feature .plan__feats li {
  color: rgba(255, 255, 255, 0.82);
}

/* The tick that used to sit before each line is gone. It predates the
   filled icon discs: every row now carries its own glyph, and a tick in
   front of that was two marks saying the same thing. The layout draws one.
   The padding-left it needed goes with it -- the row is a grid now and the
   30px track holds the disc. */

.prices__foot {
  margin-top: 30px;
  text-align: center;
  font-size: 14px;
  color: var(--text);
}

/* Two-up first — three 1fr columns at tablet width leave the feature list
   wrapping every other line. The feature card leads on its own row. */
@media (max-width: 1080px) {
  .pgrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plan--feature {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (max-width: 700px) {
  .pgrid {
    grid-template-columns: 1fr;
  }

  .plan {
    padding: 30px 24px 28px;
  }

  .plan__desc {
    min-height: 0;
  }

  .ptoggle {
    width: 100%;
    justify-content: center;
  }

  .ptoggle__btn {
    padding-inline: 18px;
  }

  .ptoggle__save {
    display: none;
  }
}

/* 5b · panel band ─────────────────────────────────────────────────────────
   Four tall panels, one word each, edge to edge. Three motions, deliberately
   on different clocks so the band never pulses in unison:
     1. each panel wipes up from its own bottom edge, 120ms apart
     2. its word rises and fades in behind the wipe
     3. the colour field drifts and scales on a long loop, negative-delayed
        per panel so no two are ever at the same point in the cycle
   Motion 3 is what sells it as footage. Without it four still fields read as
   flat blocks no matter how they arrive. */
.panels {
  background: var(--ink);
  overflow: hidden;
}

.panels__row {
  display: flex;
  /* the hairline seam between clips — the ink background showing through */
  gap: 2px;
  height: clamp(430px, 64vh, 780px);
}

/* The band supplies all of its own motion, so it opts out of the house
   translate/fade. Left on, the whole row would lift 50px as one slab and the
   per-panel wipe underneath it would be invisible. */
.panels__row[data-reveal],
.panels__row[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.panels__panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  /* contains the field's drift and puts the word above the scrim */
  isolation: isolate;
  /* Only clip-path is staggered. flex-grow carries no delay of its own, so
     the hover expansion stays immediate rather than inheriting the queue. */
  transition:
    clip-path 900ms var(--ease) calc(var(--i, 0) * 120ms),
    flex-grow 620ms var(--ease);
}

/* The wipe is an enhancement, not a precondition.

   These panels used to start at inset(100% 0 0 0) and open only once
   reveal.js added .is-in — so anything that stopped that script from running
   left the band as a tall black rectangle with no way to recover. Now the
   closed state is applied only after reveal.js has tagged the row, which it
   does synchronously and only when it is actually going to observe it. No
   script, no data-reveal, no clip: the panels are simply visible. */
.panels__row[data-reveal] .panels__panel {
  clip-path: inset(100% 0 0 0);
}

.panels__row[data-reveal].is-in .panels__panel {
  clip-path: inset(0 0 0 0);
}

/* Inset past every edge so the drift never exposes a corner. */
.panels__media {
  position: absolute;
  inset: -8%;
  z-index: 0;
  background-size: cover;
  background-position: 50% 50%;
  animation: panelDrift 19s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  /* negative delay starts each panel mid-cycle — the loop is already running
     at load, so they never line up */
  animation-delay: calc(var(--i, 0) * -4.75s);
}

/* Real footage or a still drops straight into .panels__media and takes the
   field's place, inheriting the same drift. */
.panels__img,
.panels__vid {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes panelDrift {
  from {
    transform: scale(1.02) translate3d(0, 1.2%, 0);
  }
  to {
    transform: scale(1.11) translate3d(0, -1.8%, 0);
  }
}

/* The colour fields. Two radial highlights over a linear base: a single
   gradient reads as a CSS swatch, the offset highlights give it a light
   source and somewhere for the drift to travel. Sky above, warm ground
   light below — the cast of the reference footage. */
.panels__media--a {
  background-image:
    radial-gradient(
      120% 80% at 22% 12%,
      rgba(255, 255, 255, 0.5),
      transparent 58%
    ),
    radial-gradient(
      90% 60% at 78% 96%,
      rgba(255, 186, 128, 0.55),
      transparent 62%
    ),
    linear-gradient(198deg, #7fb6e6 0%, #4d7fc4 46%, #2b3f77 100%);
}

.panels__media--b {
  background-image:
    radial-gradient(
      110% 70% at 76% 16%,
      rgba(255, 255, 255, 0.58),
      transparent 56%
    ),
    radial-gradient(
      90% 62% at 18% 92%,
      rgba(84, 98, 230, 0.5),
      transparent 64%
    ),
    linear-gradient(184deg, #59a8ee 0%, #2f6fd0 52%, #1d2f66 100%);
}

.panels__media--c {
  background-image:
    radial-gradient(
      120% 76% at 30% 88%,
      rgba(84, 98, 230, 0.62),
      transparent 60%
    ),
    radial-gradient(
      86% 58% at 82% 10%,
      rgba(255, 214, 236, 0.42),
      transparent 58%
    ),
    linear-gradient(206deg, #6f6ce8 0%, #4a45b6 48%, #1b1740 100%);
}

.panels__media--d {
  background-image:
    radial-gradient(
      120% 78% at 70% 14%,
      rgba(255, 255, 255, 0.55),
      transparent 56%
    ),
    radial-gradient(
      96% 64% at 22% 94%,
      rgba(226, 138, 84, 0.55),
      transparent 62%
    ),
    linear-gradient(192deg, #e9c9a8 0%, #b98a68 48%, #4a2f2c 100%);
}

/* Legibility scrim. Weighted to the bottom because the fields are brightest
   there and white type on the warm panel loses its edges without it. */
.panels__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(13, 7, 10, 0.3) 0%,
    rgba(13, 7, 10, 0.05) 40%,
    rgba(13, 7, 10, 0.46) 100%
  );
}

.panels__word {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding-inline: 10px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
  text-wrap: balance;
  /* behind its own panel's wipe, not in front of it */
  transition:
    opacity 760ms var(--ease) calc(var(--i, 0) * 120ms + 300ms),
    transform 760ms var(--ease) calc(var(--i, 0) * 120ms + 300ms);
}

/* same reasoning as the panel wipe: hidden only once JS can un-hide it */
.panels__row[data-reveal] .panels__word {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}

.panels__row[data-reveal].is-in .panels__word {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Pointer-only: on a touch screen :hover sticks after a tap and leaves one
   panel jammed open. */
@media (hover: hover) and (pointer: fine) {
  .panels__row:hover .panels__panel {
    flex-grow: 0.86;
  }

  .panels__row .panels__panel:hover {
    flex-grow: 1.62;
  }
}

/* Two-up rather than four slivers: at 390px a quarter of the screen is 96px,
   which is narrower than the word standing in it. */
@media (max-width: 760px) {
  .panels__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: auto;
  }

  .panels__panel {
    aspect-ratio: 3 / 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panels__panel {
    clip-path: none;
    transition: none;
  }

  .panels__media {
    animation: none;
    inset: 0;
  }

  .panels__word {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 6 · big text marquee */
.bigmarquee {
  padding: 100px 0 90px;
}

.bigmarquee__inner {
  background: var(--ink);
  border-radius: var(--r-lg);
  margin-inline: var(--gutter);
  padding: 44px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bigmarquee__row {
  overflow: hidden;
}

.bigmarquee__train {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: bigslide 26s linear infinite;
}

.bigmarquee__row--rev .bigmarquee__train {
  animation-direction: reverse;
}

.bigmarquee__train span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 5.5vw, 78px);
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: #fff;
  white-space: nowrap;
}

.bigmarquee__row--rev .bigmarquee__train span {
  color: rgba(255, 255, 255, 0.35);
}

@keyframes bigslide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bigmarquee__train {
    animation: none;
  }
}

/* 7 · dark feature */
.darkfeature {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  padding: 120px 0;
  margin-inline: var(--gutter);
  border-radius: var(--r-lg);
}

.darkfeature .h2,
.darkfeature h3 {
  color: #fff;
}

.darkfeature__title {
  text-align: center;
  max-width: 20ch;
  margin-inline: auto;
}

.darkfeature__lede {
  text-align: center;
  margin-inline: auto;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.65);
}

.dbox {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--r-card);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.dbox__k {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.dbox__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.dbox__p {
  margin: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
}

.dbox__art {
  margin-top: 18px;
  height: 190px;
  display: grid;
  place-items: center;
}

.dbox__art img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

/* Third panel — Soltio rt-feature-v8-box: 1290×601, copy left at 80,100
   (505 wide), content right at 706,100 (504 wide), glow bleeding from y339. */
.wbox {
  position: relative;
  margin-top: 30px;
  padding: 100px 80px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--r-card);
  display: grid;
  grid-template-columns: 505fr 504fr;
  gap: 121px;
  overflow: hidden;
  isolation: isolate;
}

.wbox__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.wbox__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #fff;
}

.wbox__p {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 42ch;
}

.wbox__right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: center;
}

/* grid items default to min-width:auto, so long words widen the track and
   overflow the clipped panel */
.wbox__right > * {
  min-width: 0;
}

.wbox__glow {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 56%;
  width: 100%;
  height: 694px;
  background: radial-gradient(
    60% 60% at 50% 40%,
    rgba(120, 86, 255, 0.5),
    rgba(84, 98, 230, 0.16) 55%,
    transparent 78%
  );
  filter: blur(20px);
  pointer-events: none;
}

/* rt-full-icon-wrap — measured on the live template: a 1410×397 field with
   eight individually-sized icons at fixed positions. They are STATIC on
   Soltio (animation-name: none, no inline transform, sizes constant at every
   scroll offset), so there is deliberately no motion here. Sizes and offsets
   are percentages of the 1410×397 box so the cluster scales as one. */
/* Chips fall in and settle into an even, evenly-spaced row — a flex line
   rather than the template's scattered arc, so the spacing is exact. */
.iconfield {
  --chip: clamp(66px, 9.2vw, 132px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 30px);
  max-width: 1410px;
  min-height: calc(var(--chip) + 80px);
  margin: 0 auto;
  pointer-events: none;
}

/* White chip with the coin inset, matching the template's chip arrangement.
   The chip is a wrapper so its diameter (the measured Soltio size) and the
   coin's inset scale independently — percentage padding on the <img> would
   resolve against the field width, not the chip. */
.iconfield__i {
  position: relative;
  flex: none;
  /* sized to the reference: chip ≈10% of the field width */
  width: var(--chip);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

.iconfield__i img {
  width: 58%;
  height: 58%;
  max-width: none;
  object-fit: contain;
}

/* --- falling-in animation ---------------------------------------------
   Chips drop from above and settle with two decaying bounces. The fall
   uses an ease-in curve so it accelerates like gravity; the settle eases
   out. Held hidden until the field scrolls into view. */
.iconfield__i {
  opacity: 0;
}

@keyframes coinDrop {
  0% {
    transform: translate3d(0, -340px, 0) scale3d(0.9, 0.9, 1);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  }
  12% {
    opacity: 1;
  }
  55% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
  }
  /* first bounce */
  70% {
    transform: translate3d(0, -20px, 0) scale3d(1, 1, 1);
  }
  84% {
    transform: translate3d(0, 0, 0) scale3d(1.02, 0.98, 1);
  }
  /* second, smaller bounce */
  92% {
    transform: translate3d(0, -6px, 0) scale3d(1, 1, 1);
  }
  100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    opacity: 1;
  }
}

.iconfield.is-dropped .iconfield__i {
  animation: coinDrop 1150ms both;
}

/* staggered left-to-right so they land in reading order */
.iconfield.is-dropped .i1 {
  animation-delay: 0ms;
}
.iconfield.is-dropped .i2 {
  animation-delay: 90ms;
}
.iconfield.is-dropped .i3 {
  animation-delay: 180ms;
}
.iconfield.is-dropped .i4 {
  animation-delay: 270ms;
}
.iconfield.is-dropped .i5 {
  animation-delay: 360ms;
}
.iconfield.is-dropped .i6 {
  animation-delay: 450ms;
}
.iconfield.is-dropped .i7 {
  animation-delay: 540ms;
}
.iconfield.is-dropped .i8 {
  animation-delay: 630ms;
}

/* Safety net. CSS animations can be throttled or paused while a document is
   hidden, and fill-mode:both would then hold the opening keyframe — leaving
   the chips invisible. This class wins over the animation and guarantees the
   settled state. */
.iconfield.is-settled .iconfield__i {
  animation: none !important;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .iconfield__i {
    opacity: 1;
  }
  .iconfield.is-dropped .iconfield__i {
    animation: none;
  }
}

/* Landing layout: a single flat row, evenly spaced. The .i1–.i8 hooks now
   only carry the fall stagger (see animation-delay below). */

.darkfeature__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.dbadge {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--r-card);
  padding: 26px;
}

.dbadge span {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  margin-bottom: 10px;
}

.dbadge p {
  margin: 0;
  font-size: 14px;
  line-height: 23px;
  color: rgba(255, 255, 255, 0.6);
}

.darkfeature__cta {
  margin: 44px auto 0;
  display: inline-flex;
}

.darkfeature .inner {
  display: flex;
  flex-direction: column;
}

.darkfeature .inner > .darkfeature__cta {
  align-self: center;
}

/* 9 · segments */
.segs__title {
  text-align: center;
  max-width: 20ch;
  margin-inline: auto;
}

.segs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: 60px;
  align-items: start;
}

.seg {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.seg--featured {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
}

.seg--featured .seg__h {
  color: #fff;
}

.seg__k {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.seg__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.seg__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
}

.seg__list li {
  position: relative;
  padding-left: 26px;
}

.seg__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.seg__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* 9 · segments — homepage panel (scoped; corridors keep legacy rules above)
   Geometry from old-v3 rt-pricing-v1. Black panel + white cards stay fixed
   in both themes — this is an on-dark band, not a token-inverting surface. */
.section.segs {
  --segs-panel-bg: #000;
  --segs-panel-radius: 50px;
  --segs-panel-pad: clamp(24px, 3.5vw, 50px);
  --segs-gap: 20px;
  --segs-card-bg: #fff;
  --segs-card-ink: #000;
  --segs-card-radius: 15px;
  --segs-card-border: #c8c8c8;
  --segs-purple: #6232ff;
  --segs-title: #fff;
  --segs-text-muted: #5c5c5c;
  --segs-list-gap: 12.5px;
  --segs-cta-gap: 25px;
  --segs-y: 50px;
  --segs-cta-dur: 420ms;
  --segs-cta-ease: cubic-bezier(0.22, 1, 0.36, 1);
  padding-top: var(--segs-y);
  padding-bottom: var(--segs-y);
}

.section.segs .segs__panel {
  width: 100%;
  margin-inline: auto;
  padding: var(--segs-panel-pad);
  background: var(--segs-panel-bg);
  border-radius: var(--segs-panel-radius);
}

.section.segs .segs__title {
  max-width: 520px;
  margin-inline: auto;
  margin-bottom: 25px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 2.5vw, 36px);
  line-height: clamp(34px, 2.5vw + 8px, 44px);
  text-align: center;
  color: var(--segs-title);
  letter-spacing: 0;
}

.section.segs .segs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--segs-gap);
  margin-top: 0;
  align-items: stretch;
}

.section.segs .seg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 20px;
  background: var(--segs-card-bg);
  border: 1px solid var(--segs-card-border);
  border-radius: var(--segs-card-radius);
  color: inherit;
}

.section.segs .seg__k {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 10px;
  background: var(--segs-purple);
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--segs-title);
}

.section.segs .seg__h {
  max-width: 358px;
  margin: 15px 0 25px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: clamp(30px, 2.5vw + 6px, 39px);
  letter-spacing: 0;
  color: var(--segs-card-ink);
}

.section.segs .seg__list {
  list-style: none;
  flex: 1 1 auto;
  margin: 0;
  padding: 0 0 var(--segs-cta-gap);
  display: flex;
  flex-direction: column;
  gap: var(--segs-list-gap);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 19px;
}

.section.segs .seg__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 0;
  position: static;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  color: var(--segs-text-muted);
}

.section.segs .seg__list li::before {
  content: none;
}

.section.segs .seg__check {
  flex: none;
  width: 17px;
  height: 13px;
}

.section.segs .seg__cta.btn {
  align-self: flex-start;
  margin-top: 0;
  padding: 8px 15px;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  background: var(--segs-panel-bg);
  color: var(--segs-title);
  border-radius: 25px;
  transition:
    background-color var(--segs-cta-dur) var(--segs-cta-ease),
    color var(--segs-cta-dur) var(--segs-cta-ease);
}

.section.segs .seg__cta .btn__badge {
  width: 35px;
  height: 35px;
  background: var(--segs-card-bg);
  color: var(--segs-panel-bg);
  transition: none;
}

.section.segs .seg__cta .btn__badge svg {
  width: 15px;
  height: 15px;
  transform-origin: center center;
  transition: transform var(--segs-cta-dur) var(--segs-cta-ease);
}

@media (hover: hover) and (pointer: fine) {
  .section.segs .seg__cta.btn:hover {
    transform: none;
    background: var(--segs-panel-bg);
  }

  .section.segs .seg__cta.btn:hover .btn__badge {
    transform: none;
  }

  .section.segs .seg__cta.btn:hover .btn__badge svg {
    transform: rotate(45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section.segs .seg__cta .btn__badge svg {
    transition: none;
  }
}

@media (max-width: 1023px) {
  .section.segs .segs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .section.segs .segs__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 360px) {
  .section.segs .seg__cta.btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    white-space: normal;
  }
}

:root[data-theme="dark"] .section.segs {
  --segs-panel-bg: #000;
  --segs-card-bg: #fff;
  --segs-card-ink: #000;
  --segs-title: #fff;
  --segs-text-muted: #5c5c5c;
  --segs-card-border: #c8c8c8;
  --segs-purple: #6232ff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  :root {
    --section-y: 96px;
  }

  /* the hand + phone needs real width; drop it before it gets cramped */
  .hero__device {
    display: none;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
  }

  .hero {
    min-height: 0;
  }

  .split {
    gap: 48px;
  }

  .acc__wrap {
    gap: 56px;
  }

  .acc__panel {
    padding: 32px;
  }

  .overview__wrap {
    gap: 64px;
  }

  .badges,
  .darkfeature__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trio__grid,
  .segs__grid {
    gap: 20px;
  }

  .tcard,
  .seg {
    padding: 30px;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 980px) {
  .nav__links,
  .nav__login {
    display: none;
  }

  .nav__toggle {
    display: block;
  }

  .hero {
    padding-top: 150px;
  }

  .hero__grid,
.split,
.cards,
.rails,
.acc__wrap,
.overview__wrap,
.trio__grid,
.segs__grid
{
    grid-template-columns: minmax(0, 1fr);
  }

  .acc__panel {
    order: 2;
  }

  .darkfeature {
    padding-block: 80px;
  }

  .wbox {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding: 40px 28px;
  }

  /* Soltio tags this wrap rt-tab-display-none — the cluster is hidden from
     tablet down rather than rescaled. */
  .iconfield {
    display: none;
  }

  .hero__ray,
  .hero__icons {
    display: none;
  }

  .split--flip .split__media {
    order: 0;
  }

  .split__media {
    aspect-ratio: 16 / 11;
  }

  /* Except the card panel, which is the artwork rather than a photo cropped
     to taste: 16/11 cut 75px off the top and bottom of it, and the only
     reason the cards themselves survived is that the file happens to carry
     24% and 27% of black above and below them. It keeps the file's shape at
     every width. */
  .split__media--cards {
    aspect-ratio: 1761 / 2000;
  }
}

@media (max-width: 640px) {
  :root {
    --section-y: 72px;
  }

  .hero {
    padding-top: 132px;
    padding-bottom: 64px;
  }

  .hero__copy > .btn {
    width: 100%;
    justify-content: space-between;
  }

  .pcard__head {
    padding: 20px;
  }

  .pcard__title,
  .pcard__text {
    margin-inline: 20px;
  }

  .pcard__cta {
    margin: 16px 20px 20px;
  }

  .nav__right .btn {
    font-size: 14px;
    padding: 5px 5px 5px 16px;
    gap: 10px;
  }

  .nav__right .btn__badge {
    width: 28px;
    height: 28px;
  }

  .card,
  .badge,
  .rail {
    padding: 24px;
  }

  .badges,
  .tools,
  .darkfeature__grid {
    grid-template-columns: 1fr 1fr;
  }

  .wbox__right {
    grid-template-columns: 1fr;
  }

  .acc__panel,
  .tcard,
  .seg,
  .dbox {
    padding: 24px;
  }

  .crow {
    min-height: 92px;
    gap: 14px;
    padding: 0;
  }

  .crow__flag {
    width: 48px;
    height: 48px;
  }

  .crow__id strong,
  .crow__bal strong {
    font-size: 17px;
  }

  .crow__id em,
  .crow__bal em {
    font-size: 12px;
  }

  .bigmarquee {
    padding-block: 60px 54px;
  }

  .overview__panel {
    min-height: 380px;
    padding: 24px;
  }

  .counters {
    gap: 22px;
  }

  .tool {
    padding: 16px;
  }

  .tool__caption {
    font-size: 15px;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  .footer__col ul {
    font-size: 14px;
  }

  .statrow {
    grid-template-columns: 1fr;
  }

  .statrow > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
  }

  .marquee__track {
    gap: 34px;
  }

  .marquee__track img {
    width: 132px;
    height: 74px;
  }

  .faq summary {
    font-size: 17px;
  }
}

/* ==========================================================================
   home-two page layout (Personal / Business)
   Structure measured from soltio.webflow.io/home-two
   ========================================================================== */

.p2-wrap {
  padding-inline: var(--gutter);
}

/* --- hero: black rounded panel, radius 30 --- */
.p2-hero {
  position: relative;
  background: #000;
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 150px 0 90px;
  isolation: isolate;
}

.p2-hero__ray {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -12%;
  width: 566px;
  height: 714px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(150, 96, 255, 0.42),
    transparent 76%
  );
  filter: blur(30px);
  pointer-events: none;
}

.p2-hero__box {
  position: absolute;
  z-index: 0;
  border-radius: 16px;
  pointer-events: none;
}

/* kept to the right of the copy column so they never sit behind the headline */
.p2-hero__box--a {
  width: 90px;
  height: 90px;
  right: 24%;
  top: 9%;
  background: linear-gradient(150deg, #6f5bff, #2f2a8f);
}

.p2-hero__box--b {
  width: 64px;
  height: 64px;
  right: 11%;
  top: 20%;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.03)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.p2-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1290px;
  margin-inline: auto;
  padding-inline: 40px;
}

.p2-hero__copy {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.p2-hero .h1,
.p2-hero .h2 {
  color: #fff;
}

.p2-hero__copy .lede {
  color: rgba(255, 255, 255, 0.68);
}

/* --- sticky card stack --- */
.p2-stack {
  margin-top: 70px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.p2-card {
  position: sticky;
  top: 120px;
  border-radius: var(--r-lg);
  padding: 44px;
  min-height: 300px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
}

.p2-card--1 {
  background: var(--surface);
}
.p2-card--2 {
  background: var(--cream);
}
.p2-card--3 {
  background: #dfe3ff;
}

.p2-card__k {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.p2-card__h {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.p2-card__p {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  max-width: 46ch;
}

.p2-card__art {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: #17171c;
}

.p2-card__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- two-column blocks --- */
.p2-split {
  display: grid;
  grid-template-columns: 572fr 570fr;
  gap: 148px;
  align-items: center;
}

.p2-split--flip .p2-split__media {
  order: 2;
}

.p2-split__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(160deg, #17171c, #0d070a);
  aspect-ratio: 572 / 717;
  display: grid;
  place-items: center;
  padding: 40px;
}

/* Light, as the design has it. The near-black is now the converter's alone,
   and that one is violet. */
.p2-split:not(.p2-split--flip) .p2-split__media {
  background: #ececec;
}

/* The converter is framed in violet, not the near-black the phone panel uses.
   On that panel the dark is a backdrop for a device render; here the card is
   the subject and the frame only has to separate it from the page. */
.p2-split--flip .p2-split__media {
  background: var(--accent);
  padding: 18px;
}

.p2-split__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 14px;
}

.p2-split__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.p2-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.p2-list li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 26px;
}

.p2-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 15px;
  height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* --- centred feature with panel --- */
.p2-feature__head {
  max-width: 684px;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}

.p2-feature__grid {
  display: grid;
  grid-template-columns: 580fr 680fr;
  gap: 30px;
  margin-top: 56px;
  align-items: stretch;
}

.p2-panel {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.p2-panel--dark {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
}

.p2-panel--dark .p2-amount,
.p2-panel--dark .p2-panel__h {
  color: #fff;
}

.p2-panel__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.p2-amount {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 3.3vw, 48px);
  letter-spacing: -0.03em;
  color: var(--fg);
  line-height: 1.1;
}

.p2-meta {
  margin: 0;
  font-size: 14px;
}

.p2-rows {
  margin-top: auto;
  border-top: 1px solid var(--line);
}

.p2-panel--dark .p2-rows {
  border-color: rgba(255, 255, 255, 0.14);
}

.p2-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.p2-panel--dark .p2-row {
  border-color: rgba(255, 255, 255, 0.14);
}

.p2-row strong {
  font-family: var(--font-display);
  font-weight: 500;
}

/* --- concentric rotating rings --- */
.p2-rings {
  position: relative;
  width: min(1266px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  /* the rotating square spokes have a bounding box up to their diagonal
     (975 → ~1379px), which would otherwise push the page sideways */
  overflow: hidden;
}

.p2-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--line);
  animation: p2spin 44s linear infinite;
}

/* 975 / 675 / 364 within the 1266 field, per the template */
.p2-ring--outer {
  inset: 11.5%;
}
.p2-ring--mid {
  inset: 23.3%;
  animation-duration: 34s;
  animation-direction: reverse;
}
.p2-ring--inner {
  inset: 35.6%;
  animation-duration: 26s;
}

/* A spoke spans the whole ring; rotating it walks its top point around the
   circumference. This avoids needing the radius in a length unit — a
   percentage translate would resolve against the tile, not the ring. */
.p2-spoke {
  position: absolute;
  inset: 0;
  transform: rotate(var(--a));
  pointer-events: none;
}

.p2-ring__i {
  position: absolute;
  top: 0;
  left: 50%;
  /* driven from .p2-rings so the tiles can scale with the field; a fixed 70px
     is what made the orbit unusable once the field shrank */
  width: var(--tile, 70px);
  height: var(--tile, 70px);
  margin: calc(var(--tile, 70px) / -2) 0 0 calc(var(--tile, 70px) / -2);
  border-radius: calc(var(--tile, 70px) * 0.28);
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(13, 7, 10, 0.12);
  display: grid;
  place-items: center;
  /* cancel the spoke's rotation so the tile stays upright */
  transform: rotate(calc(var(--a) * -1));
  animation: p2spin 44s linear infinite reverse;
}

.p2-ring--mid .p2-ring__i {
  animation-duration: 34s;
  animation-direction: normal;
}
.p2-ring--inner .p2-ring__i {
  animation-duration: 26s;
}

.p2-ring__i img {
  width: 52%;
  height: 52%;
  object-fit: contain;
}

@keyframes p2spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p2-ring,
  .p2-ring__i {
    animation: none;
  }
}

.p2-rings__centre {
  position: relative;
  z-index: 3;
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* --- closing dark card --- */
.p2-dark {
  background: #121212;
  border-radius: var(--r-lg);
  padding: 70px;
  color: rgba(255, 255, 255, 0.7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.p2-dark .h2 {
  color: #fff;
}

/* .lede carries its own dark grey; on the near-black card that is unreadable */
.p2-dark .lede {
  color: rgba(255, 255, 255, 0.65);
}

.p2-dark__art {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 540 / 364;
  background: #17171c;
}

/* The sign-up chart, as markup. Seven bars against a 0-150k axis with the
   third as the peak, carrying the lime-to-violet gradient the design puts
   there. Absolutely placed so it fills .p2-dark__art's 540:364 the way the
   image it replaced did. */
.pchart {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: clamp(18px, 2.4vw, 28px);
  background: #1b1b20;
}

.pchart__axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: clamp(11px, 1vw, 13px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.45);
}

.pchart__bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(8px, 1.1vw, 14px);
  align-items: end;
}

.pchart__bars i {
  display: block;
  height: var(--h);
  border-radius: 7px;
  background: #f4f4f7;
}

/* The bars animate, as the card page's chart does. Same loop and the same
   70ms stagger, reusing bchartGrow rather than writing a second set of
   frames that would drift from it. */
.pchart__bars i {
  height: 0;
  animation: bchartGrow 5s var(--reveal-ease) infinite;
}
.pchart__bars i:nth-child(1) { animation-delay: 0ms; }
.pchart__bars i:nth-child(2) { animation-delay: 70ms; }
.pchart__bars i:nth-child(3) { animation-delay: 140ms; }
.pchart__bars i:nth-child(4) { animation-delay: 210ms; }
.pchart__bars i:nth-child(5) { animation-delay: 280ms; }
.pchart__bars i:nth-child(6) { animation-delay: 350ms; }
.pchart__bars i:nth-child(7) { animation-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .pchart__bars i {
    animation: none;
    height: var(--h);
  }
}

.pchart__bars i.is-peak {
  background: linear-gradient(180deg, #ceff1c 0%, #8b7cf0 46%, #5b2bef 100%);
}

.p2-dark__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1180px) {
  .p2-split {
    gap: 60px;
  }
  .p2-hero__inner {
    padding-inline: 24px;
  }
}

@media (max-width: 980px) {
  .p2-hero {
    padding-top: 120px;
  }
  .p2-split,
  .p2-feature__grid,
  .p2-dark,
  .p2-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .p2-split--flip .p2-split__media {
    order: 0;
  }
  .p2-card {
    position: static;
    padding: 30px;
  }
  .p2-dark {
    padding: 40px;
  }
  .p2-hero__box {
    display: none;
  }

  /* the rings compress until the tiles sit on top of their own centre copy,
     so the orbits drop out below desktop and only the message remains */
  .p2-ring {
    display: none;
  }

  .p2-rings {
    aspect-ratio: auto;
    padding-block: 20px;
  }
}

@media (max-width: 640px) {
  .p2-hero {
    padding: 104px 0 60px;
  }
  .p2-panel {
    padding: 26px;
  }
}

/* ==========================================================================
   home-two hero collage + rings caption (matching the template layout)
   ========================================================================== */

/* hero copy is centred on home-two, not left-aligned */
.p2-hero__copy--centre {
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

/* overlapping card collage beneath the hero copy */
.p2-collage {
  position: relative;
  aspect-ratio: 1290 / 620;
  margin-top: 64px;
}

.p2-collage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6%;
  width: 46%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(120, 86, 255, 0.5),
    transparent 72%
  );
  filter: blur(40px);
}

.p2-col {
  position: absolute;
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
}

/* centre: the tall reward card sits in front */
.p2-col--mid {
  left: 50%;
  top: 0;
  width: 24%;
  transform: translateX(-50%);
  z-index: 3;
  border-radius: 20px;
}

.p2-col--tl {
  left: 8%;
  top: 30%;
  width: 18%;
  z-index: 2;
}
.p2-col--tr {
  left: 27%;
  top: 22%;
  width: 15%;
  z-index: 2;
}
.p2-col--bl {
  left: 5%;
  top: 62%;
  width: 23%;
  z-index: 2;
}
.p2-col--r1 {
  right: 13%;
  top: 21%;
  width: 23%;
  z-index: 2;
}
.p2-col--r2 {
  right: 5%;
  top: 50%;
  width: 25%;
  z-index: 2;
}

/* caption sits beneath the rings on home-two, not inside them */
.p2-rings__below {
  max-width: 620px;
  margin: -60px auto 0;
  text-align: center;
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 4;
}

@media (max-width: 980px) {
  .p2-collage {
    aspect-ratio: 1;
    margin-top: 44px;
  }
  /* the side cards become unreadable at this width — keep the hero card
     plus one supporting card either side */
  .p2-col--tr,
  .p2-col--bl {
    display: none;
  }
  .p2-col--mid {
    width: 44%;
  }
  .p2-col--tl {
    left: 2%;
    top: 40%;
    width: 30%;
  }
  .p2-col--r1 {
    right: 2%;
    top: 26%;
    width: 34%;
  }
  .p2-col--r2 {
    right: 4%;
    top: 62%;
    width: 36%;
  }
  .p2-rings__below {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .p2-col--tl,
  .p2-col--r2 {
    display: none;
  }
  .p2-col--mid {
    width: 52%;
  }
  .p2-col--r1 {
    right: 0;
    top: 62%;
    width: 44%;
  }
}

/* ==========================================================================
   Mobile navigation panel (built by menu.js)
   ========================================================================== */

.navmenu {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* the drawer covers the whole viewport, so it gets the same glass but far
     more opaque — there is no "behind" worth showing, only the page it hides */
  background: rgba(13, 7, 10, 0.92);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  padding: 104px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  overflow-y: auto;
}

.navmenu[hidden] {
  display: none;
}

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

.navmenu__list a {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: #fff;
}

.navmenu__list a[aria-current="page"] {
  color: var(--accent);
}

.navmenu__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;

  /* The theme switch, once menu.js has moved it in here on a phone: its own
     row at the foot of the drawer, left-aligned with the links above rather
     than stretched like the CTA. */
  /* No margin-top:auto. Pinning the actions to the bottom of the column left a
     103px void between the last link and Login on a 375x812 screen; they read
     as stranded rather than grouped with the nav. */
}

/* The theme and language switches, once menu.js has moved them in here on a
   phone: one row at the foot of the drawer, left-aligned with the links above
   rather than stretched like the CTA. */
.navmenu__utils {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

/* Beside the hamburger there was no room for a language name, so the phone
   rules hide it. At the foot of the drawer there is a whole row, so it comes
   back -- a bare flag is a guess, "English" is not. */
.navmenu__utils .langsw__label {
  display: inline;
}
.navmenu__utils .langsw__btn {
  padding: 0 14px;
  gap: 10px;
}

/* In the bar the menu drops below the button and is pinned to the right edge
   of the screen. At the foot of the drawer there is nothing below it and it
   sits on the left, so it opens upward from the left instead. */
.navmenu__utils .langsw__menu {
  top: auto;
  bottom: calc(100% + 8px);
  left: 0;
  right: auto;
}

.navmenu__login {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75);
}

.navmenu__actions .btn {
  justify-content: space-between;
}

/* the toggle sits above the panel and becomes a close (X) */
.nav__toggle {
  position: relative;
  z-index: 210;
}

.nav__toggle span {
  transition:
    transform var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}
.nav__toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav__toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* keep the logo visible and tappable above the open panel */
.nav--menu-open .nav__logo {
  position: relative;
  z-index: 210;
}

@media (min-width: 981px) {
  .navmenu {
    display: none;
  }
}

/* ==========================================================================
   SmashX Card page — real card render + video block
   ========================================================================== */

.cardhero {
  margin-top: 56px;
  display: grid;
  place-items: center;
  position: relative;
}

.cardhero::before {
  content: "";
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(120, 86, 255, 0.35),
    transparent 72%
  );
  filter: blur(50px);
}

.cardhero__img {
  position: relative;
  width: min(720px, 86%);
  height: auto;
  border-radius: 18px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}


@media (max-width: 640px) {
  .cardhero {
    margin-top: 36px;
  }
  .cardhero__img {
    width: 94%;
  }

}

/* ==========================================================================
   home-one patterns: payment split + dark three-card row
   ========================================================================== */

.pay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.pay__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.pay__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.pay__row {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
}

.pay__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent-soft);
  position: relative;
}

.pay__icon::after {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: 3px;
  background: var(--accent);
}

.pay__h {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.pay__p {
  margin: 0;
  font-size: 15px;
  line-height: 25px;
}

.pay__card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(150deg, #7b6cf0, #b98ad6);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 40px;
}

.pay__card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  border-radius: 14px;
}

/* dark three-card row */
.dark3__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 56px;
}

.dark3 {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--r-card);
  padding: 34px;
  min-width: 0;
}

.dark3__k {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.dark3__h {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
}

.dark3__p {
  margin: 0;
  font-size: 15px;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 980px) {
  .pay {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .dark3__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .dark3,
  .pay__card {
    padding: 24px;
  }
}

/* ==========================================================================
   home-one hero (rt-hero-v1): copy left, card right, blue-shape backdrop
   Measured: hero 1410×975, h1 60px left-aligned at 530 wide, inner 1290×575.
   ========================================================================== */

.h1hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #05040e;
  min-height: 760px;
  display: flex;
  align-items: center;
  padding: 150px 0 80px;
}

.h1hero__bg {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.h1hero__orb,
.h1hero__box {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.h1hero__orb--a {
  width: 92px;
  right: 34%;
  top: 16%;
}
.h1hero__orb--b {
  width: 128px;
  right: 8%;
  bottom: 12%;
}
.h1hero__box--1 {
  width: 107px;
  left: 18%;
  top: 8%;
}
.h1hero__box--2 {
  width: 90px;
  left: 52%;
  top: 38%;
}
.h1hero__box--3 {
  width: 42px;
  right: 4%;
  top: 72%;
}

.h1hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1290px;
  margin-inline: auto;
  padding-inline: 40px;
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 60px;
  align-items: center;
}

.h1hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.h1hero .h1 {
  color: #fff;
  max-width: 14ch;
}
.h1hero__copy .lede {
  color: rgba(255, 255, 255, 0.7);
  max-width: 46ch;
}
.h1hero .proof__text {
  color: rgba(255, 255, 255, 0.72);
}
.h1hero .proof__avatars span {
  border-color: #05040e;
}

.h1hero__card img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  transform: rotate(-6deg);
  box-shadow: 0 44px 90px rgba(0, 0, 0, 0.6);
}

@media (max-width: 980px) {
  .h1hero {
    min-height: 0;
    padding: 120px 0 60px;
  }
  .h1hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    padding-inline: 24px;
  }
  .h1hero__box,
  .h1hero__orb {
    display: none;
  }
  .h1hero__card img {
    transform: none;
  }
}

@media (max-width: 640px) {
  .h1hero {
    padding: 104px 0 48px;
  }
}

/* ==========================================================================
   home-one hero card stack: three rotated cards, each cross-fading between a
   base render and a colour variant. Rotations measured from the template:
   +6.06°, +17.86°, -8.92°.
   ========================================================================== */

.h1cards {
  position: relative;
  aspect-ratio: 1 / 1;
}

.h1card {
  position: absolute;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.55);
}

.h1card img {
  display: block;
  width: 100%;
  height: auto;
}

/* the colour variant sits over the base and cross-fades */
.h1card__tint {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  animation: h1tint 7s ease-in-out infinite;
}

@keyframes h1tint {
  0%,
  40% {
    opacity: 0;
  }
  55%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.h1card--1 {
  width: 62%;
  left: 4%;
  top: 12%;
  transform: rotate(6.06deg);
  z-index: 3;
}
.h1card--2 {
  width: 54%;
  right: 2%;
  top: 2%;
  transform: rotate(17.86deg);
  z-index: 2;
}
.h1card--3 {
  width: 58%;
  left: 22%;
  bottom: 2%;
  transform: rotate(-8.92deg);
  z-index: 1;
}

.h1card--2 .h1card__tint {
  animation-delay: -2.3s;
}
.h1card--3 .h1card__tint {
  animation-delay: -4.6s;
}

@media (prefers-reduced-motion: reduce) {
  .h1card__tint {
    animation: none;
    opacity: 1;
  }
}

@media (max-width: 980px) {
  .h1cards {
    aspect-ratio: 4 / 3;
  }
  .h1card--1 {
    width: 52%;
    left: 2%;
    top: 14%;
  }
  .h1card--2 {
    width: 46%;
    right: 2%;
    top: 4%;
  }
  .h1card--3 {
    width: 48%;
    left: 26%;
    bottom: 4%;
  }
}

/* --- SmashX hero corrections: match home-one's measured metrics ----------
   Template: hero 1410×975, h1 60px at 530px wide, card stack fully inside
   the panel. My earlier build was 760px tall with a 72px h1 and the rotated
   cards cropping at the right edge. */
.h1hero {
  min-height: 975px;
  padding-top: 190px;
  padding-bottom: 120px;
}

/* the template's hero h1 is 60px, not the 72px site scale */
.h1hero .h1 {
  font-size: clamp(38px, 4.17vw, 60px);
  line-height: 1.167;
  max-width: 530px;
}

.h1hero__inner {
  grid-template-columns: 1fr 0.95fr;
  gap: 40px;
  align-items: center;
}

/* keep the rotated cards clear of the panel edge — a card rotated 17.9°
   extends well past its own box */
.h1cards {
  aspect-ratio: 1 / 1;
  padding: 6% 8%;
}

.h1card--1 {
  width: 54%;
  left: 0;
  top: 16%;
}
.h1card--2 {
  width: 47%;
  right: 0;
  top: 6%;
}
.h1card--3 {
  width: 50%;
  left: 24%;
  bottom: 4%;
}

@media (max-width: 980px) {
  .h1hero {
    min-height: 0;
    padding-top: 130px;
    padding-bottom: 60px;
  }
  .h1cards {
    padding: 0;
  }
}

/* card--2 sits 8px past the panel's right edge once its 17.9° rotation is
   accounted for; pull it in and shrink slightly so nothing clips */
.h1card--2 {
  width: 44%;
  right: 4%;
}

/* --- hero background: blue shape removed ---------------------------------
   The template's Blue Shape backdrop is gone; the panel keeps a deep
   near-black base with a restrained violet lift so it is not flat. */
.h1hero {
  background:
    radial-gradient(
      900px 620px at 74% 34%,
      rgba(84, 62, 190, 0.34) 0%,
      rgba(5, 4, 14, 0) 66%
    ),
    radial-gradient(
      700px 520px at 18% 78%,
      rgba(60, 52, 150, 0.22) 0%,
      rgba(5, 4, 14, 0) 70%
    ),
    linear-gradient(160deg, #080714 0%, #05040e 60%, #07061a 100%);
}

.h1hero__bg {
  display: none;
}

/* --- hero background restored to home-one's exact composition -------------
   Template: .rt-hero-v1-main is pure black, radius 30, overflow hidden, with
   Blue Shape.webp absolutely placed at +197px / +325px (14% / 33.4% of the
   1410×975 panel) at 1410×844 (100% × 86.6%), object-fit cover, and clipped
   by the panel. Content sits above it. */
.h1hero {
  background: #000;
}

.h1hero__bg {
  display: block;
  position: absolute;
  z-index: 1;
  left: 14%;
  top: 33.4%;
  width: 100%;
  height: 86.6%;
  object-fit: cover;
  opacity: 1;
  pointer-events: none;
}

/* keep the floating shapes and the copy above the blue backdrop */
.h1hero__orb,
.h1hero__box {
  z-index: 2;
}
.h1hero__inner {
  z-index: 3;
}

/* --- page width parity ----------------------------------------------------
   The homepage constrains content with .container (--container) + .inner
   (--content, 1440px). The Personal / Business / SmashX heroes were capped at
   1290px with their own 40px inset, so their content sat ~94px narrower than
   every other section. Align them to the site measure. */
.p2-hero__inner,
.h1hero__inner {
  max-width: var(--content);
  padding-inline: 0;
}

/* the hero panels are inset by the page gutter via .p2-wrap, so their inner
   content needs the same gutter the .container provides elsewhere */
.p2-hero__inner,
.h1hero__inner {
  width: 100%;
  margin-inline: auto;
}

@media (max-width: 1180px) {
  .p2-hero__inner,
  .h1hero__inner {
    padding-inline: 24px;
  }
}

/* the hero panel itself is full-bleed inside .p2-wrap; give its content the
   same breathing room the .container gutter provides on normal sections */
.p2-hero,
.h1hero {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* --- content-width parity across all pages --------------------------------
   Rounded panels (dark feature, big marquee, page heroes) were inset by a
   margin AND contained a gutter-padded container, so their content sat 136px
   from the edge while ordinary sections sat at 68px — headings did not line
   up down the page. The panels now span the full measure and carry the gutter
   themselves, so every section's content starts at the same x. */
.darkfeature {
  margin-inline: 0;
}

.darkfeature > .container {
  padding-inline: var(--gutter);
}

.bigmarquee__inner {
  margin-inline: 0;
}

.p2-wrap {
  padding-inline: 0;
}

/* heroes keep the gutter internally, matching .container */
.p2-hero,
.h1hero {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ==========================================================================
   home-one rt-feature-v3 inner UI: balances / spending / categories
   ========================================================================== */

.dark3sec {
  position: relative;
  overflow: hidden;
}

/* the violet arc glow across the top of the section */
.dark3sec__arc {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -62%;
  width: 150%;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(126, 92, 255, 0.55),
    rgba(70, 52, 170, 0.18) 62%,
    transparent 76%
  );
  filter: blur(30px);
  pointer-events: none;
}

.dark3sec > .container {
  position: relative;
  z-index: 2;
}

.dark3 {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.dark3 .dark3__h {
  text-align: center;
}
.dark3 .dark3__p {
  text-align: center;
  margin-bottom: 26px;
}

/* pale inner panel (balances, categories) */
.d3panel {
  margin-top: auto;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.d3row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.d3row__flag {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.d3row__flag svg {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
}

.d3row__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.d3row__body em {
  font-style: normal;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}

.d3bar {
  display: block;
  height: 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
}
.d3bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
}

.d3row__amt {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

/* two stat cards (spending) */
.d3stats {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.d3stat {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
}

.d3stat__icon {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  position: relative;
}
.d3stat__icon::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
}
.d3stat__icon--pie::after {
  border-right-color: transparent;
}
.d3stat__icon--pen::after {
  border-radius: 3px;
}

.d3stat__v {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  color: #fff;
}
.d3stat__l {
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.d3stat__delta {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(37, 194, 110, 0.18);
  color: #4fd98a;
  vertical-align: middle;
}

.d3stat__period {
  margin-left: auto;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  align-self: flex-end;
}

/* category rows */
.d3cat {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}
.d3cat em {
  margin-left: auto;
  font-style: normal;
  font-weight: 600;
  color: #fff;
}

.d3cat__icon {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  position: relative;
}
.d3cat__icon::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid #fff;
}
.d3cat__icon--bag::after {
  border-radius: 2px 2px 4px 4px;
  border-top-color: transparent;
}
.d3cat__icon--cup::after {
  border-radius: 0 0 6px 6px;
  border-top-color: transparent;
}
.d3cat__icon--pin::after {
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

@media (max-width: 640px) {
  .d3panel,
  .d3stat {
    padding: 14px;
  }
}

/* ── real-time tracking (home-one rt-real-time-tracking) ─────────────────
   Left: a receipt panel with a card render overhanging its top edge and the
   two latest transactions sitting in the perforated stub. Right: copy, CTA,
   hairline and two feature chips. Template geometry: 520 / 200 / 570. */
.trk__grid {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 570px);
  justify-content: space-between;
  align-items: start;
  gap: 60px;
}

.trk__media {
  position: relative;
  width: 100%;
  aspect-ratio: 520 / 684;
}
.trk__panel {
  display: block;
  width: 100%;
  height: 100%;
}
/* The card breaks out above the panel; the section's top padding absorbs it. */
.trk__card {
  position: absolute;
  left: 12.7%;
  top: -13.2%;
  width: 74.6%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(13, 7, 10, 0.18);
}
.trk__stub {
  position: absolute;
  left: 16.1%;
  right: 16.1%;
  top: 80.4%;
  display: grid;
  gap: 16px;
}
.trk__row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 12px;
}
.trk__mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--positive);
}
.trk__mark--b {
  background: var(--ink);
}
.trk__who {
  display: grid;
  min-width: 0;
}
.trk__who b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.trk__who i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted-2);
}
.trk__amt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: #f0453a;
  white-space: nowrap;
}

.trk__copy {
  padding-top: 10px;
}
.trk__copy .h2 {
  margin-bottom: 60px;
}
.trk__link {
  display: grid;
  gap: 14px;
  max-width: 507px;
  color: inherit;
  text-decoration: none;
}
.trk__linkhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.trk__linkhead .h3 {
  margin: 0;
}
.trk__linkhead svg {
  flex: none;
  transition: transform var(--reveal-dur) var(--ease);
}
.trk__link:hover .trk__linkhead svg {
  transform: translateX(4px);
}
.trk__copy .btn {
  margin-top: 34px;
}
.trk__rule {
  border: 0;
  border-top: 1px solid rgba(13, 7, 10, 0.2);
  margin: 44px 0;
}
.trk__chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.trk__chip {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.trk__chipicon {
  flex: none;
  display: grid;
  place-items: center;
  width: 65px;
  height: 65px;
  border-radius: 15px;
  background: rgba(84, 98, 230, 0.1);
  color: var(--accent);
}
.trk__chip p {
  margin: 0;
  max-width: 11ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--fg);
}

@media (max-width: 1100px) {
  .trk__grid {
    grid-template-columns: 1fr;
    gap: 90px;
    justify-content: stretch;
  }
  .trk__media {
    max-width: 520px;
    margin-inline: auto;
  }
  .trk__copy .h2 {
    margin-bottom: 40px;
  }
  .trk__chips {
    gap: 32px;
  }
  .trk__chip p {
    max-width: none;
  }
}
@media (max-width: 640px) {
  .trk__chips {
    grid-template-columns: 1fr;
  }
  .trk__chipicon {
    width: 54px;
    height: 54px;
    border-radius: 13px;
  }
  .trk__chipicon svg {
    width: 26px;
    height: auto;
  }
  .trk__rule {
    margin: 32px 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   SmashX hero — rebuilt to home-one's measured composition
   Panel reference: 1410 × 975. Everything below is expressed as a share of
   the panel so it holds at any width.

     base        #000 + Vector 1018.svg, cover, radius 30
     uv ray      566×714 at 0,0                      → 40.14% × 73.23%
     Box 5 107   at 257,80                           → 18.23% / 8.21%
     Box 6  90   centred on 731,374                  → 51.84% / 38.36%
     Box 7  42   at 1318,699                         → 93.48% / 71.69%
     Box 2  63   centred-x on 674, top 791           → 47.80% / 81.13%
     Blue Shape  1410×844 at 197,325, z1             → 13.97% / 33.35%
     purple 128  centred 829,603, behind cards       → 58.79% / 61.85%
     purple  92  centred 1179,357, above cards, z3   → 83.62% / 36.62%
     cards       376×568 each (art is 500×755), fanned:
                   back  +6.9°  centre 77.6% / 49.3%
                   mid   −7.9°  centre 71.6% / 48.4%
                   front +16.0° centre 82.4% / 51.9%
   ══════════════════════════════════════════════════════════════════════════ */

.h1hero {
  background-color: #000;
  background-image: url("/assets/h1-herobg.svg");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* The soft diagonal light sweep out of the top-left corner. */
.h1hero__ray {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 40.14%;
  height: 73.23%;
  pointer-events: none;
}

/* Blue Shape removed by request — the panel keeps the black base, the SVG
   texture and the UV ray, so the cards read against dark rather than glow. */
.h1hero__bg {
  display: none;
}

.h1hero__box {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.h1hero__box--1 {
  width: 7.59%;
  left: 18.23%;
  top: 8.21%;
}
.h1hero__box--2 {
  width: 6.38%;
  left: 51.84%;
  top: 38.36%;
  transform: translate(-50%, -50%);
}
.h1hero__box--3 {
  width: 2.98%;
  left: 93.48%;
  top: 71.69%;
}
.h1hero__box--4 {
  width: 4.47%;
  left: 47.8%;
  top: 81.13%;
  transform: translateX(-50%);
}

.h1hero__orb {
  position: absolute;
  pointer-events: none;
}
/* the large sphere sits behind the fan, the small one glints on top of it */
.h1hero__orb--b {
  z-index: 3;
  width: 9.08%;
  left: 58.79%;
  top: 61.85%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}
.h1hero__orb--a {
  z-index: 6;
  width: 6.52%;
  left: 83.62%;
  top: 36.62%;
  right: auto;
  transform: translate(-50%, -50%);
}

/* copy column: the template gives it 530 of the 1290 content measure */
.h1hero__inner {
  grid-template-columns: minmax(0, 1fr);
}
.h1hero__copy {
  max-width: 530px;
}

/* ── card fan ─────────────────────────────────────────────────────────── */
/* The template gives the fan its own perspective and stacks the cards in real
   3D — depth ordering comes from translateZ, not z-index. */
.h1cards {
  position: absolute;
  z-index: 4;
  inset: 0;
  aspect-ratio: auto;
  padding: 0;
  pointer-events: none;
  perspective: 1500px;
  perspective-origin: 72% 53%;
  transform-style: preserve-3d;
}

/* The reveal's blur() would flatten that 3D context and collapse the depth
   ordering the shuffle depends on, so this one reveals without the blur. */
.h1cards[data-reveal],
.h1cards[data-reveal].is-in {
  filter: none;
  will-change: opacity, transform;
}

/* All three cards share one base box; the slot animation supplies every
   offset and rotation, exactly as the template's inline transforms do. */
.h1card {
  position: absolute;
  left: 58.78%;
  top: 24.31%;
  width: 26.67%;
  height: auto;
  right: auto;
  bottom: auto;
  border-radius: 20px;
  overflow: visible;
  box-shadow: none;
  transform-style: preserve-3d;
  animation: h1fan var(--h1fan-dur) ease-in-out infinite;
}

.h1card__base {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

/* The colour plate goes BEHIND the glass art — over the top it just paints
   the card out, which is what made one card read as a solid black slab. */
.h1card__tint {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  animation: h1tint var(--h1fan-dur) ease-in-out infinite;
}

/* ── the shuffle ───────────────────────────────────────────────────────────
   Measured off the template's inline transforms. Three slots, back to front:

     back   translate3d(173px,  7px, -10px) rotateZ( 18deg)
     mid    translate3d( 85px, -23px, -5px) rotateZ(  6deg)
     front  translate3d(  0px, -30px,  0px) rotateZ( -9deg)

   Each card walks back → mid → front and then returns to the back, and the
   tint plate is tied to the slot rather than the card: whichever card is at
   the front is the one showing colour. The px offsets are re-expressed as a
   share of the card's own 376×568 box so the fan scales with the panel.
   ────────────────────────────────────────────────────────────────────────── */
.h1cards {
  --h1fan-dur: 9s;
}

@keyframes h1fan {
  0%,
  100% {
    transform: translate3d(46.011%, 1.232%, -10px) rotate(18deg);
  }
  33.333% {
    transform: translate3d(22.606%, -4.049%, -5px) rotate(6deg);
  }
  66.666% {
    transform: translate3d(0%, -5.282%, 0px) rotate(-9deg);
  }
}

@keyframes h1tint {
  0%,
  50% {
    opacity: 0;
  }
  66.666% {
    opacity: 1;
  }
  85%,
  100% {
    opacity: 0;
  }
}

/* offset by a third of the cycle each, so the three slots are always filled */
.h1card--1,
.h1card--1 .h1card__tint {
  animation-delay: 0s;
}
.h1card--3,
.h1card--3 .h1card__tint {
  animation-delay: -3s;
}
.h1card--2,
.h1card--2 .h1card__tint {
  animation-delay: -6s;
}

@media (prefers-reduced-motion: reduce) {
  .h1card {
    animation: none;
    transform: translate3d(22.606%, -4.049%, -5px) rotate(6deg);
  }
  .h1card--1 {
    transform: translate3d(46.011%, 1.232%, -10px) rotate(18deg);
  }
  .h1card--2 {
    transform: translate3d(0%, -5.282%, 0px) rotate(-9deg);
  }
  .h1card__tint {
    animation: none;
    opacity: 0;
  }
  .h1card--2 .h1card__tint {
    opacity: 1;
  }
}

/* ── below the two-column threshold the fan drops under the copy ───────── */
@media (max-width: 1100px) {
  /* .h1hero is a centring flex row on desktop; once the fan rejoins the flow
     it would sit *beside* the copy as a second flex item, so stack instead. */
  .h1hero {
    display: block;
    min-height: 0;
    padding-bottom: 40px;
  }
  .h1hero__inner {
    padding-bottom: 40px;
  }
  .h1cards {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
  }
  /* one shared base box — the slot animation still supplies the fan */
  .h1card {
    width: 43%;
    left: 19%;
    top: 18%;
  }
  .h1hero__ray {
    width: 62%;
    height: 50%;
  }
  .h1hero__orb--b {
    left: 30%;
    top: 62%;
    width: 16%;
  }
  .h1hero__orb--a {
    left: 76%;
    top: 40%;
    width: 11%;
  }
  .h1hero__box {
    display: none;
  }
}

@media (max-width: 640px) {
  .h1cards {
    max-width: 380px;
  }
  .h1card {
    width: 52%;
  }
}

/* A revealed .btn declares its own `transition` shorthand, which wipes out the
   reveal's opacity/filter timing — the button snapped in while everything
   around it faded. Restore the reveal channels without slowing its hover. */
.btn[data-reveal] {
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    filter var(--reveal-dur) var(--reveal-ease),
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  transition-delay:
    var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0s, 0s, 0s;
}

/* ── SmashX page: live-content additions ──────────────────────────────────── */

/* hero kicker — the BIN-sponsor line that sits under the h1 */
.h1hero__kicker {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* the 2×2 tools grid re-cast as text pillars (no imagery) */
.tools--pillars {
  margin-top: 60px;
}
.tools--pillars .tool {
  gap: 12px;
  padding: 34px;
}
.tool__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.tools--pillars .tool__caption {
  text-align: left;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.tool__body {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--text);
}

/* ── Founders 500 ─────────────────────────────────────────────────────────── */
.founders {
  /* Dark in the design, and the only block on this page that is.
     .on-dark on the element carries the heading and lede colours;
     the rules below re-tone the rest, which was all light-surface. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 70px;
}

.founders__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.founders__copy .h2 {
  margin: 0;
}
.founders__copy .lede {
  margin: 0;
  max-width: 42ch;
}

.founders__meter {
  width: 100%;
  display: grid;
  gap: 12px;
}
.founders__bar {
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.founders__bar i {
  display: block;
  width: var(--claimed);
  height: 100%;
  border-radius: 99px;
  background: #ffffff;
}
.founders__count {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.7);
}
.founders__count strong {
  font-weight: 500;
  font-size: 22px;
  color: #ffffff;
}
.founders__count span {
  color: rgba(255, 255, 255, 0.5);
}

.founders__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.founders__list li {
  position: relative;
  padding: 22px 0 22px 42px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.founders__list li:first-child {
  padding-top: 0;
}
.founders__list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
/* tick mark */
.founders__list li::before {
  /* lime rather than the indigo --accent: the ticks are the only
     coloured thing in the panel and the design puts the brand green there. */
  content: "";
  position: absolute;
  left: 4px;
  top: 27px;
  width: 16px;
  height: 9px;
  border-left: 2px solid #ceff1c;
  border-bottom: 2px solid #ceff1c;
  transform: rotate(-45deg);
}
.founders__list li:first-child::before {
  top: 5px;
}

.closer__fine {
  margin: 22px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 980px) {
  .founders {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    padding: 44px 30px;
  }
  .tools--pillars {
    grid-template-columns: minmax(0, 1fr);
  }
  .tools--pillars .tool {
    padding: 28px;
  }
}

/* ── home-one rt-insights bento ────────────────────────────────────────────
   Measured: content 1290 wide, two rows of 440 / 451, 30px gaps, cell widths
   alternating 410 / 850. Row A puts the small cell first, row B last. */
.bento {
  display: grid;
  gap: 30px;
  margin-top: 60px;
}
.bento__row {
  display: grid;
  gap: 30px;
}
.bento__row--a {
  grid-template-columns: 410fr 850fr;
}
.bento__row--b {
  grid-template-columns: 850fr 410fr;
}

.bcard {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--surface);
  padding: 40px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
}
.bento__row--b .bcard {
  min-height: 451px;
}

.bcard__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.24;
  letter-spacing: -0.03em;
  color: var(--fg);
  max-width: 18ch;
}
.bcard__p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--text);
  max-width: 30ch;
}
.bcard__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
}
.bcard__link i {
  width: 10px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.bcard__link:hover i {
  transform: rotate(45deg) translate(2px, -2px);
}

/* 410 · gradient promo cell */
.bcard--grad {
  background: linear-gradient(
    123deg,
    #4730b8 0%,
    rgba(119, 42, 226, 0.5) 51%,
    #2c1b72 100%
  );
  justify-content: flex-start;
}
.bcard--grad .bcard__h {
  color: #fff;
  max-width: 14ch;
}
.bcard__tag {
  margin: 0 0 18px;
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bcard__more {
  margin-top: 26px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 22px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--fg);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.bcard__more span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  transition: transform var(--dur) var(--ease);
}
.bcard__more span svg {
  width: 13px;
  height: 13px;
}
.bcard__more:hover span {
  transform: rotate(45deg);
}
.bcard__glyph {
  position: absolute;
  right: -24px;
  bottom: -60px;
  font-size: 240px;
  line-height: 1;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

/* 850 · copy left, widget right */
.bcard--wide {
  flex-direction: row;
  align-items: stretch;
  gap: 40px;
}
.bcard__copy {
  display: flex;
  flex-direction: column;
  flex: 0 0 300px;
}
.bcard--wide > :last-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* bar chart widget */
.bchart {
  position: relative;
  background: var(--bg);
  border-radius: 16px;
  padding: 30px 24px 18px;
  display: flex;
  flex-direction: column;
}
.bchart__bars {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  min-height: 190px;
}
.bchart__bars i {
  height: var(--h);
  border-radius: 6px;
  background: #d9d9d9;
}
.bchart__bars i.is-on {
  background: var(--accent);
}
.bchart__axis {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--muted-2);
  text-align: center;
}
.bchart__tip {
  position: absolute;
  left: calc(50% - 6px);
  top: 6px;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

/* stacked widgets */
.bstack {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
}
.bstack__row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 14px;
  background: var(--bg);
  border-radius: 16px;
  padding: 18px 20px;
}
.bstack__mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--positive);
}
.bstack__who {
  display: grid;
  min-width: 0;
}
.bstack__who b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.bstack__who i {
  font-style: normal;
  font-size: 12px;
  color: var(--muted-2);
}
.bstack__amt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--fg);
  white-space: nowrap;
}
.bstack__panel {
  background: var(--bg);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.bstack__label {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.bstack__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: -0.04em;
  color: var(--fg);
}
.bstack__track {
  height: 8px;
  border-radius: 99px;
  background: rgba(13, 7, 10, 0.1);
  overflow: hidden;
}
.bstack__track i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
}
.bstack__legend {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
}

/* 410 · dark cell */
.bcard--dark {
  background: var(--ink);
}
.bcard--dark .bcard__h {
  color: #fff;
  max-width: 14ch;
}
.bcard--dark .bcard__p {
  color: rgba(255, 255, 255, 0.62);
}
.bspark {
  margin-top: auto;
  color: var(--positive);
}
.bspark svg {
  display: block;
  width: 100%;
  height: 80px;
}
.bspark__foot {
  margin: 18px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}
.bspark__foot strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: #fff;
}

@media (max-width: 1100px) {
  .bento__row--a,
  .bento__row--b {
    grid-template-columns: minmax(0, 1fr);
  }
  .bcard,
  .bento__row--b .bcard {
    min-height: 0;
  }
  .bcard--wide {
    flex-direction: column;
    gap: 28px;
  }
  .bcard__copy {
    flex: 0 0 auto;
  }
  .bcard__link {
    margin-top: 20px;
  }
}
@media (max-width: 640px) {
  .bcard {
    padding: 28px;
  }
  .bcard__h {
    font-size: 24px;
  }
  .bcard__glyph {
    font-size: 160px;
    bottom: -40px;
  }
  .bstack__value {
    font-size: 32px;
  }
}

/* ── pillar widgets (home-one rt-management-tools treatment) ──────────────── */
.tools--pillars .tool {
  gap: 16px;
}
.twidget {
  position: relative;
  height: 210px;
  border-radius: 16px;
  background: var(--bg);
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.tool--cream .twidget {
  background: rgba(255, 255, 255, 0.55);
}

/* 01 · coin ring around a core */
.twidget__core {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  z-index: 2;
}
.twidget--ring::before {
  content: "";
  position: absolute;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  border: 1px dashed rgba(13, 7, 10, 0.18);
}
.twidget__orb {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 6px 16px rgba(13, 7, 10, 0.12);
  object-fit: contain;
  padding: 5px;
}
.twidget__orb.o1 {
  top: 21px;
  left: 50%;
  transform: translateX(-50%);
}
.twidget__orb.o2 {
  bottom: 21px;
  left: 50%;
  transform: translateX(-50%);
}
.twidget__orb.o3 {
  left: calc(50% - 84px - 19px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--accent-soft);
}
.twidget__orb.o4 {
  left: calc(50% + 84px - 19px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--positive);
}

/* 02 · card + NFC waves + cash back */
.twidget--pay {
  grid-template-rows: 1fr auto;
  place-items: center stretch;
  padding: 26px;
}
.twidget__card {
  position: relative;
  width: 150px;
  height: 95px;
  margin: 0 auto;
  border-radius: 12px;
  background: linear-gradient(135deg, #2a2340, var(--ink));
}
.twidget__chip {
  position: absolute;
  left: 14px;
  top: 16px;
  width: 26px;
  height: 19px;
  border-radius: 4px;
  background: linear-gradient(135deg, #e9c97a, #b98f3c);
}
.twidget__nfc {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
.twidget__nfc i {
  width: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.75);
}
.twidget__nfc i:nth-child(1) {
  height: 8px;
}
.twidget__nfc i:nth-child(2) {
  height: 13px;
}
.twidget__nfc i:nth-child(3) {
  height: 18px;
}
.twidget__amt {
  margin: 16px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.twidget__amt span {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

/* 03 · virtual + physical chips */
.twidget--dual {
  grid-auto-flow: column;
  gap: 16px;
}
.twidget__mini {
  width: 116px;
  height: 74px;
  border-radius: 11px;
  display: grid;
  place-items: end start;
  padding: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.twidget__mini.is-virtual {
  border: 1px dashed rgba(84, 98, 230, 0.55);
  background: var(--accent-soft);
  color: var(--accent);
  transform: rotate(-6deg);
}
.twidget__mini.is-physical {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.8);
  transform: rotate(6deg);
}

/* 04 · verification dial */
.twidget__dial {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    var(--accent) 0 72%,
    rgba(13, 7, 10, 0.1) 72% 100%
  );
}
.twidget__dial::before {
  content: "";
  position: absolute;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--surface);
}
.tool--cream .twidget__dial::before {
  background: var(--cream);
}
.twidget__dial i {
  position: relative;
  width: 30px;
  height: 16px;
  border-left: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  transform: rotate(-45deg) translate(2px, -3px);
}

@media (max-width: 640px) {
  .twidget {
    height: 180px;
  }
}

/* ── home-one rt-payment-v1 dashboard card ─────────────────────────────────
   Template renders the source art at 524×602, radius 30. Rebuilt as markup so
   the figures are real text. The bars are the distinctive part: each is a
   stack of rounded segments, done with repeating-linear-gradient. */
.paydash {
  background: var(--surface);
  border-radius: 30px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.paydash__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.paydash__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.paydash__kebab {
  display: grid;
  gap: 4px;
  padding-top: 4px;
}
.paydash__kebab i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
}

.paydash__figure {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 3.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--fg);
}
.paydash__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.paydash__legend span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--muted);
}
.paydash__legend span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.paydash__legend .is-accent::before {
  background: var(--accent);
}
.paydash__legend .is-ink::before {
  background: var(--ink);
}

.paydash__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 6px;
}
.pdcard {
  border: 1px solid rgba(13, 7, 10, 0.1);
  border-radius: 16px;
  padding: 16px;
  display: grid;
  gap: 20px;
}
.pdcard__top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pdcard__icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ink);
  position: relative;
}
.pdcard__icon::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px solid #fff;
  border-radius: 3px;
}
.pdcard__icon.is-physical::after {
  border-radius: 50%;
  border-style: solid;
}
.pdcard__icon.is-virtual::after {
  border-style: dashed;
}
.pdcard__top b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.pdcard__top i {
  font-style: normal;
  font-size: 12px;
  color: var(--muted-2);
}
.pdcard__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.pdcard__amt {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.pdcard__amt span {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--muted-2);
}
/* the stacked ✕ / ✓ pill from the template */
.pdtoggle {
  flex: none;
  display: grid;
  gap: 2px;
  padding: 3px;
  border-radius: 99px;
  background: rgba(13, 7, 10, 0.05);
}
.pdtoggle i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-style: normal;
  color: #7a7a7a;
}
.pdtoggle i.on {
  color: #fff;
}
.pdtoggle i.on.is-accent {
  background: var(--accent);
}
.pdtoggle i.on.is-ink {
  background: var(--ink);
}

/* 12-month segmented bar chart */
.pdchart {
  margin-top: 10px;
}
.pdchart__bars {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  height: 176px;
  /* the three dashed gridlines behind the bars */
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(13, 7, 10, 0.16) 0 1px,
    transparent 1px 6px
  );
  background-size: 100% 1px;
  background-position:
    0 0,
    0 50%,
    0 100%;
  background-repeat: repeat-x;
}
.pdchart__bars i {
  height: var(--h);
  min-height: 10px;
  border-radius: 3px;
  /* each bar is a stack of rounded segments */
  background-image: repeating-linear-gradient(
    to bottom,
    #dedede 0 7px,
    transparent 7px 10px
  );
}
.pdchart__bars i.is-ink {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--ink) 0 7px,
    transparent 7px 10px
  );
}
.pdchart__bars i.is-accent {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--accent) 0 7px,
    transparent 7px 10px
  );
}
.pdchart__axis {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 640px) {
  .paydash {
    padding: 24px;
    border-radius: 20px;
  }
  .paydash__cards {
    grid-template-columns: 1fr;
  }
  .pdchart__bars {
    height: 140px;
    gap: 5px;
  }
  .pdchart__axis {
    gap: 5px;
    font-size: 9px;
  }
}

/* The purple panel was sized 4:3 for the old flat chart image. The rebuilt
   dashboard is taller than that, so it was being clipped mid-chart — let the
   panel take its height from the card, matching the template's 580×658. */
.pay__card:has(.paydash) {
  aspect-ratio: auto;
  place-items: stretch;
  padding: 28px;
}

/* ── home-one rt-management-tools ──────────────────────────────────────────
   Two rows of 1290×492 with cells alternating 740 / 520. The dashed grid box
   (474×415) is an absolute decorative backdrop bled off the card's top-left. */
.mtools {
  display: grid;
  gap: 30px;
  margin-top: 60px;
}
.mtools__row {
  display: grid;
  gap: 30px;
}
.mtools__row--a {
  grid-template-columns: 740fr 520fr;
}
.mtools__row--b {
  grid-template-columns: 520fr 740fr;
}

.mcard {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface);
  min-height: 492px;
  padding: 40px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 28px;
}
.mcard--cream {
  background: var(--cream);
}

.mcard__grid {
  position: absolute;
  left: -67px;
  top: -207px;
  width: 474px;
  height: 415px;
  pointer-events: none;
}
.mcard__grid--flip {
  left: auto;
  right: -67px;
  top: auto;
  bottom: -207px;
}

.mcard__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}
.mcard__stage--flush {
  align-items: end;
}
.mcard__widget {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 20px;
  background: var(--surface);
}

.mcard__copy {
  position: relative;
}
.mcard__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: 10px;
}
.mcard__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.mcard__p {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--text);
  max-width: 46ch;
}

/* 01 · gateway cluster — real core glyph, coins on the ring */
.gateways {
  position: relative;
  display: grid;
  place-items: center;
  width: 260px;
  height: 260px;
}
.gateways::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px dashed rgba(13, 7, 10, 0.16);
}
.gateways__core {
  width: 97px;
  height: 97px;
  z-index: 2;
}
.gateways__orb {
  position: absolute;
  width: 54px;
  height: 54px;
  padding: 8px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(13, 7, 10, 0.12);
  object-fit: contain;
}
.gateways__orb.g1 {
  top: -27px;
  left: 50%;
  transform: translateX(-50%);
}
.gateways__orb.g2 {
  bottom: -27px;
  left: 50%;
  transform: translateX(-50%);
}
.gateways__orb.g3 {
  left: -27px;
  top: 50%;
  transform: translateY(-50%);
}
.gateways__orb.g4 {
  right: -27px;
  top: 50%;
  transform: translateY(-50%);
}

/* 02 · rewards progress rows */
.rewards {
  width: 100%;
  max-width: 320px;
}
.rewards__label {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.rewards__value {
  margin: 4px 0 26px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 42px;
  letter-spacing: -0.04em;
  color: var(--fg);
}
.rewards__rows {
  display: grid;
  gap: 16px;
}
.rewards__rows > div {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
}
.rewards__rows i {
  height: 10px;
  border-radius: 99px;
  background: rgba(13, 7, 10, 0.1);
  position: relative;
}
.rewards__rows i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: 99px;
  background: var(--accent);
}
.rewards__rows span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--fg);
  min-width: 34px;
  text-align: right;
}
.rewards__rows b {
  font-weight: 400;
  font-size: 12px;
  color: var(--muted-2);
  min-width: 30px;
}

/* 04 · verification dial */
.verify {
  display: grid;
  justify-items: center;
  gap: 20px;
}
.verify__dial {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    var(--accent) 0 72%,
    rgba(13, 7, 10, 0.1) 72% 100%
  );
}
.verify__dial::before {
  content: "";
  position: absolute;
  width: 134px;
  height: 134px;
  border-radius: 50%;
  background: var(--surface);
}
.verify__dial i {
  position: relative;
  width: 38px;
  height: 20px;
  border-left: 3.5px solid var(--accent);
  border-bottom: 3.5px solid var(--accent);
  transform: rotate(-45deg) translate(3px, -4px);
}
.verify__cap {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--fg);
}

@media (max-width: 1100px) {
  .mtools__row--a,
  .mtools__row--b {
    grid-template-columns: minmax(0, 1fr);
  }
  .mcard {
    min-height: 0;
    padding: 32px;
    gap: 32px;
  }
  .mcard__stage {
    padding: 20px 0;
  }
}
@media (max-width: 640px) {
  .mcard {
    padding: 26px;
  }
  .gateways {
    width: 200px;
    height: 200px;
  }
  .gateways__core {
    width: 76px;
    height: 76px;
  }
  .gateways__orb {
    width: 44px;
    height: 44px;
  }
  .gateways__orb.g1 {
    top: -22px;
  }
  .gateways__orb.g2 {
    bottom: -22px;
  }
  .gateways__orb.g3 {
    left: -22px;
  }
  .gateways__orb.g4 {
    right: -22px;
  }
  .rewards__value {
    font-size: 34px;
  }
  .verify__dial {
    width: 136px;
    height: 136px;
  }
  .verify__dial::before {
    width: 108px;
    height: 108px;
  }
}

/* ══ rt-management-tools animation ═════════════════════════════════════════
   Measured off the template: the biometric cell is three concentric circles
   (387 / 307 / 226) where the outer two pulse — scale 0.85→1 while fading
   from ~0.15 to 0 — and the reward cell is three vertical bars whose fill
   grows with a % chip riding the top. Both start when the section reveals. */

/* ── reward columns ──────────────────────────────────────────────────────── */
.rewards__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
  height: 150px;
  margin-top: 24px;
}
.rcol {
  position: relative;
  height: 100%;
  border-radius: 10px;
  background: rgba(13, 7, 10, 0.06);
  overflow: hidden;
}
.rcol i {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  height: 0;
  border-radius: 10px;
  background: var(--accent);
  animation: rcolGrow 1s var(--reveal-ease) forwards paused;
}
.rcol i span {
  position: absolute;
  left: 8px;
  top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  animation: rcolTag 0.4s ease forwards paused;
  animation-delay: 0.55s;
}
.rcol:nth-child(2) i {
  animation-delay: 0.12s;
}
.rcol:nth-child(3) i {
  animation-delay: 0.24s;
}
.rcol:nth-child(2) i span {
  animation-delay: 0.67s;
}
.rcol:nth-child(3) i span {
  animation-delay: 0.79s;
}

/* the reveal system adds .is-in to .mtools — that releases both animations */
.mtools.is-in .rcol i,
.mtools.is-in .rcol i span {
  animation-play-state: running;
}

@keyframes rcolGrow {
  from {
    height: 0;
  }
  to {
    height: var(--p);
  }
}
@keyframes rcolTag {
  to {
    opacity: 1;
  }
}

.rewards__axis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.rewards__axis b {
  font-weight: 400;
  font-size: 12px;
  color: var(--muted-2);
  text-align: center;
}

/* ── pulsing verification rings ──────────────────────────────────────────── */
.verify__rings {
  position: relative;
  width: 226px;
  height: 226px;
  display: grid;
  place-items: center;
}
.verify__rings i {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
}
/* 307 / 226 and 387 / 226 from the template's measured diameters */
.verify__rings .r2 {
  width: 135.8%;
  height: 135.8%;
  background: rgba(84, 98, 230, 0.15);
}
.verify__rings .r1 {
  width: 171.2%;
  height: 171.2%;
  background: rgba(84, 98, 230, 0.05);
}

.mtools.is-in .verify__rings i {
  animation: verifyPulse 3.2s var(--reveal-ease) infinite;
}
.mtools.is-in .verify__rings .r2 {
  animation-delay: -1.6s;
}

@keyframes verifyPulse {
  0% {
    transform: scale(0.82);
    opacity: 0;
  }
  35% {
    opacity: 0.55;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.verify__rings .core {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 20px 50px rgba(84, 98, 230, 0.35);
}
.verify__rings .core svg {
  width: 64px;
  height: 64px;
}

@media (prefers-reduced-motion: reduce) {
  .rcol i {
    animation: none;
    height: var(--p);
  }
  .rcol i span {
    animation: none;
    opacity: 1;
  }
  .mtools.is-in .verify__rings i {
    animation: none;
    opacity: 0.35;
    transform: scale(1);
  }
}

@media (max-width: 640px) {
  .rewards__cols {
    height: 118px;
  }
  .verify__rings {
    width: 168px;
    height: 168px;
  }
  .verify__rings .core svg {
    width: 48px;
    height: 48px;
  }
}

/* The site rhythm is top-only (.section has padding-bottom: 0), but
   .darkfeature isn't a .section — so it contributed no leading space and its
   dark panel butted straight against the preceding section's content, with a
   measured gap of 0. Give it the section rhythm when one directly precedes. */
.section + .darkfeature {
  margin-top: var(--section-y);
}

/* Three copies of the same card art means the printed number and name stack on
   top of each other and turn to mush. Fade the two cards behind the front slot
   so only one set of digits reads at a time — tied to the slot, not the card,
   so the fade travels with the shuffle. Also widens the slot spread a little
   so the number bands don't sit directly on one another. */
@keyframes h1fan {
  0%,
  100% {
    transform: translate3d(58%, 3.6%, -10px) rotate(18deg);
    opacity: 0.32;
  }
  33.333% {
    transform: translate3d(28%, -3.4%, -5px) rotate(6deg);
    opacity: 0.55;
  }
  66.666% {
    transform: translate3d(0%, -5.282%, 0px) rotate(-9deg);
    opacity: 1;
  }
}

/* the back cards are dimmed, so their drop shadow would show through as a
   grey haze — keep the shadow on the front card only */
.h1card {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .h1card {
    opacity: 0.4;
  }
  .h1card--2 {
    opacity: 1;
  }
}

/* .32 / .55 still left the printed digits legible on the back cards, so the
   number band read as doubled. Drop them to silhouettes — the card shape and
   the fan still read, the text does not resolve. */
@keyframes h1fan {
  0%,
  100% {
    transform: translate3d(58%, 3.6%, -10px) rotate(18deg);
    opacity: 0.1;
  }
  33.333% {
    transform: translate3d(28%, -3.4%, -5px) rotate(6deg);
    opacity: 0.24;
  }
  66.666% {
    transform: translate3d(0%, -5.282%, 0px) rotate(-9deg);
    opacity: 1;
  }
}

/* Fading opacity in step with the position still doubled the digits: a card
   travelling from mid to front passes through ~0.5 while still offset, so two
   number bands read at once. Animate opacity on its own schedule instead —
   held faint for most of the cycle, snapped to full only across the front
   slot. Keyframes that list one property don't pin the other, so transform
   keeps its 0 / 33.3 / 66.6 slot timing while opacity switches sharply. */
@keyframes h1fan {
  0%,
  100% {
    transform: translate3d(58%, 3.6%, -10px) rotate(18deg);
  }
  33.333% {
    transform: translate3d(28%, -3.4%, -5px) rotate(6deg);
  }
  66.666% {
    transform: translate3d(0%, -5.282%, 0px) rotate(-9deg);
  }

  0%,
  56% {
    opacity: 0.08;
  }
  63%,
  71% {
    opacity: 1;
  }
  78%,
  100% {
    opacity: 0.08;
  }
}

/* ── hero fan, final ──────────────────────────────────────────────────────
   The card art carries a printed number and name, so three overlapping copies
   of it will always double the digits — no amount of opacity tuning fixes
   that, it only trades legibility for a washed-out fan. So only the front card
   shows the art; the two behind it become empty glass panes, which is what
   reads in the template anyway (its back cards are near-transparent outlines).
   The shuffle stops with it — a card cycling into the front slot would carry
   the numbers with it. */
.h1card {
  animation: none;
  opacity: 1;
}
.h1card--1 {
  transform: translate3d(58%, 3.6%, -10px) rotate(18deg);
}
.h1card--3 {
  transform: translate3d(28%, -3.4%, -5px) rotate(6deg);
}
.h1card--2 {
  transform: translate3d(0%, -5.282%, 0px) rotate(-9deg);
}

/* back panes: drop the printed art, keep the glass */
.h1card--1 .h1card__base,
.h1card--3 .h1card__base {
  visibility: hidden;
}
.h1card--1 .h1card__tint,
.h1card--3 .h1card__tint {
  display: none;
}
.h1card--1,
.h1card--3 {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(2px);
}

/* front card keeps its colour plate cross-fade, now the only animated part */
.h1card--2 .h1card__tint {
  animation: h1tint var(--h1fan-dur) ease-in-out infinite;
}
@keyframes h1tint {
  0%,
  100% {
    opacity: 0.18;
  }
  50% {
    opacity: 0.85;
  }
}
.h1card--2 {
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .h1card--2 .h1card__tint {
    animation: none;
    opacity: 0.5;
  }
}

/* Larger wordmark across the site (was 148px). */
.nav__logo {
  width: 200px;
}
.footer__brand img {
  width: 220px;
}

@media (max-width: 640px) {
  .nav__logo {
    width: 158px;
  }
  .footer__brand img {
    width: 180px;
  }
}

/* The reward bars ran once and stopped. Loop them: grow, hold, drain, repeat —
   4s cycle (1s up, 2s hold, 1s down) with the % chip fading in step, so it
   never sits on a bar that isn't there. Still released by .mtools.is-in. */
.rcol i {
  animation: rcolGrow 4s var(--reveal-ease) infinite paused;
}
.rcol i span {
  animation: rcolTag 4s var(--reveal-ease) infinite paused;
  animation-delay: 0s;
}
.rcol:nth-child(2) i,
.rcol:nth-child(2) i span {
  animation-delay: 0.18s;
}
.rcol:nth-child(3) i,
.rcol:nth-child(3) i span {
  animation-delay: 0.36s;
}

@keyframes rcolGrow {
  0% {
    height: 0;
  }
  25%,
  75% {
    height: var(--p);
  }
  100% {
    height: 0;
  }
}
@keyframes rcolTag {
  0%,
  8% {
    opacity: 0;
  }
  25%,
  72% {
    opacity: 1;
  }
  88%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rcol i,
  .rcol i span {
    animation: none;
  }
  .rcol i {
    height: var(--p);
  }
  .rcol i span {
    opacity: 1;
  }
}

/* ── gateway cluster: coins circulate the core ─────────────────────────────
   Each orb rides the ring with the classic orbit trick — rotate out to the
   radius, then counter-rotate by the same angle so the logo never tips. All
   four share one keyframe and are spaced by negative delays: a quarter of the
   cycle apart keeps them 90° apart, matching their original static positions.
   Released by .mtools.is-in like the rest of the section. */
.gateways {
  --r: 130px;
}

.gateways__orb {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  margin: -27px 0 0 -27px;
  animation: gwOrbit 18s linear infinite paused;
}
.mtools.is-in .gateways__orb {
  animation-play-state: running;
}

@keyframes gwOrbit {
  from {
    transform: rotate(0deg) translateY(calc(-1 * var(--r))) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateY(calc(-1 * var(--r))) rotate(-360deg);
  }
}

/* start angles: top, right, bottom, left — 18s / 4 = 4.5s per quarter */
.gateways__orb.g1 {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  animation-delay: 0s;
}
.gateways__orb.g4 {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  animation-delay: -4.5s;
}
.gateways__orb.g2 {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  animation-delay: -9s;
}
.gateways__orb.g3 {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  animation-delay: -13.5s;
}

/* the dashed orbit path drifts the other way, slowly */
.mtools.is-in .gateways::before {
  animation: gwSpin 40s linear infinite reverse;
}
@keyframes gwSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 640px) {
  .gateways {
    --r: 100px;
  }
  .gateways__orb {
    margin: -22px 0 0 -22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gateways__orb,
  .mtools.is-in .gateways__orb,
  .mtools.is-in .gateways::before {
    animation: none;
  }
  .gateways__orb.g1 {
    transform: translateY(calc(-1 * var(--r)));
  }
  .gateways__orb.g4 {
    transform: rotate(90deg) translateY(calc(-1 * var(--r))) rotate(-90deg);
  }
  .gateways__orb.g2 {
    transform: rotate(180deg) translateY(calc(-1 * var(--r))) rotate(-180deg);
  }
  .gateways__orb.g3 {
    transform: rotate(270deg) translateY(calc(-1 * var(--r))) rotate(-270deg);
  }
}

/* Eight coins on the ring instead of four — 18s / 8 = 2.25s between start
   angles, which spaces them 45° apart. Orbs shrink a little so eight fit the
   circumference without touching. */
.gateways__orb {
  width: 46px;
  height: 46px;
  padding: 7px;
  margin: -23px 0 0 -23px;
}
.gateways__orb.g1 {
  animation-delay: 0s;
}
.gateways__orb.g2 {
  animation-delay: -2.25s;
}
.gateways__orb.g3 {
  animation-delay: -4.5s;
}
.gateways__orb.g4 {
  animation-delay: -6.75s;
}
.gateways__orb.g5 {
  animation-delay: -9s;
}
.gateways__orb.g6 {
  animation-delay: -11.25s;
}
.gateways__orb.g7 {
  animation-delay: -13.5s;
}
.gateways__orb.g8 {
  animation-delay: -15.75s;
}
.gateways__orb.g5,
.gateways__orb.g6,
.gateways__orb.g7,
.gateways__orb.g8 {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
}

@media (max-width: 640px) {
  .gateways__orb {
    width: 38px;
    height: 38px;
    padding: 6px;
    margin: -19px 0 0 -19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gateways__orb.g5 {
    transform: rotate(180deg) translateY(calc(-1 * var(--r))) rotate(-180deg);
  }
  .gateways__orb.g6 {
    transform: rotate(225deg) translateY(calc(-1 * var(--r))) rotate(-225deg);
  }
  .gateways__orb.g7 {
    transform: rotate(270deg) translateY(calc(-1 * var(--r))) rotate(-270deg);
  }
  .gateways__orb.g8 {
    transform: rotate(315deg) translateY(calc(-1 * var(--r))) rotate(-315deg);
  }
  .gateways__orb.g2 {
    transform: rotate(45deg) translateY(calc(-1 * var(--r))) rotate(-45deg);
  }
  .gateways__orb.g3 {
    transform: rotate(90deg) translateY(calc(-1 * var(--r))) rotate(-90deg);
  }
  .gateways__orb.g4 {
    transform: rotate(135deg) translateY(calc(-1 * var(--r))) rotate(-135deg);
  }
}

/* FAQ questions were 19px (17px on small screens) — sitting below the .h3
   step and reading as body copy. Lift them to the .h3 scale so each question
   carries the weight of a heading, with a little more room per row. */
.faq summary {
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.03em;
  padding: 30px 0;
}

@media (max-width: 720px) {
  .faq summary {
    font-size: 19px;
    padding: 24px 0;
  }
}

/* ── feature-one / feature-three compact hero (rt-hero-v1.rt-padding-top-zero)
   Panel 1410×658, black, radius 30, zero padding. Copy is centred on the
   panel; four gradient boxes float around it. Positions as a share of the
   panel: 90px boxes at 65.82%/19.30% and 21.99%/67.33%, 63px boxes at
   17.16%/26.29% and 80.07%/65.50%. Shared by Personal and Business. */
.fhero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: #000;
  background-image: url("/assets/h1-herobg.svg");
  background-size: cover;
  background-position: 50% 50%;
  min-height: 658px;
  display: grid;
  place-items: center;
  padding: 130px var(--gutter) 60px;
  margin-inline: var(--gutter);
}

.fhero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--content);
  text-align: center;
}
.fhero__eyebrow {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.fhero__h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(36px, 4.17vw, 60px);
  line-height: 1.167;
  text-wrap: balance;
}

@media (max-width: 980px) {
  .fhero {
    min-height: 0;
    padding: 110px 24px 70px;
  }
}

/* The template's compact hero is eyebrow + h1 only, but Personal/Business
   carry a lede and a waitlist CTA that shouldn't be lost to the layout swap.
   Both centre under the h1 and the panel grows to fit them. */
.fhero__lede {
  margin: 22px auto 0;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.7);
}
.fhero__cta {
  margin-top: 34px;
}
.fhero__inner .btn {
  display: inline-flex;
}

/* ── feature-one rt-overview-v1 ────────────────────────────────────────────
   Intro line over two stat cards: 630 of the 1290 measure each, 30px gap,
   white, radius 30, 50px inset. Label at 50 from the card top, figure at 124,
   body at 314 — reproduced with flow spacing rather than fixed offsets. */
.ov1__top {
  max-width: 763px;
}
.ov1__top .h2 {
  margin: 0;
}

.ov1__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 58px;
}
.ov1__card {
  background: var(--surface);
  border-radius: 30px;
  padding: 50px;
  display: flex;
  flex-direction: column;
}
.ov1__label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.ov1__figure {
  margin: 40px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(54px, 5.6vw, 84px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--fg);
}
.ov1__figure span {
  color: var(--accent);
}
.ov1__body {
  margin: auto 0 0;
  padding-top: 44px;
  max-width: 40ch;
  font-size: 16px;
  line-height: 26px;
  color: var(--text);
}

@media (max-width: 900px) {
  .ov1__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .ov1__card {
    padding: 34px;
  }
  .ov1__body {
    padding-top: 28px;
  }
}

/* ── feature-one rt-service-v4 ─────────────────────────────────────────────
   Media column left (image + caption), feature list right. Rows are dimmed
   except the active one, which goes full-contrast and swaps its corner arrow
   for a straight one. Hovering a row promotes it. */
.sv4__grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 90px;
  align-items: start;
}
.sv4__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}
.sv4__cap {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 23px;
  color: var(--text);
}
.sv4__cap span {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
}

.sv4__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sv4__row + .sv4__row {
  border-top: 1px solid rgba(13, 7, 10, 0.12);
}
.sv4__row a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 26px 0;
  text-decoration: none;
  color: rgba(13, 7, 10, 0.28);
  transition: color var(--dur) var(--ease);
}
.sv4__t {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.sv4__n {
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
}
.sv4__row svg {
  width: 22px;
  height: 22px;
  margin-left: auto;
  align-self: center;
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.sv4__row.is-active a,
.sv4__row a:hover {
  color: var(--fg);
}
.sv4__row a:hover svg {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .sv4__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .sv4__media img {
    max-width: 240px;
  }
  .sv4__row a {
    padding: 20px 0;
  }
}

/* ── feature-one rt-feature-v9 ─────────────────────────────────────────────
   Black panel with a centred heading, one wide card over two half cards, and
   a violet arc bleeding up from the bottom edge (same treatment as the SmashX
   dark section, mirrored). */
.fv9 {
  position: relative;
  overflow: hidden;
}
.fv9__arc {
  position: absolute;
  left: 50%;
  bottom: -62%;
  width: 150%;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(126, 92, 255, 0.55),
    rgba(70, 52, 170, 0.18) 62%,
    transparent 76%
  );
  filter: blur(30px);
  pointer-events: none;
}
.fv9 .container {
  position: relative;
  z-index: 1;
}

.fv9__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 56px;
}
.fv9__card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 34px;
  color: var(--fg);
}
.fv9__card--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 40px;
  align-items: center;
}
.fv9__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--fg);
  max-width: 26ch;
}
.fv9__p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--text);
  max-width: 46ch;
}

.fv9__widget {
  position: relative;
}
.fv9__bal {
  background: var(--bg);
  border-radius: 16px;
  padding: 24px;
}
.fv9__ballabel {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.fv9__balvalue {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: -0.04em;
  color: var(--fg);
}
.fv9__balsub {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.fv9__pill {
  position: absolute;
  left: -14px;
  top: -16px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

.fv9__mini {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg);
  border-radius: 16px;
  padding: 18px 20px;
}
.fv9__dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--positive);
  flex: none;
}
.fv9__mini b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.fv9__mini i {
  font-style: normal;
  font-size: 13px;
  color: var(--muted);
}

.fv9__bars {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 10px;
  height: 108px;
}
.fv9__bars i {
  height: var(--h);
  border-radius: 6px;
  background: #dedede;
}
.fv9__bars i.is-on {
  background: var(--accent);
}

@media (max-width: 900px) {
  .fv9__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .fv9__card--wide {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .fv9__pill {
    position: static;
    display: inline-block;
    margin-bottom: 12px;
  }
}

/* .darkfeature colours its headings white for the dark panel, which wins on
   specificity over .fv9__h — so the card titles were white on white cards. */
.fv9 .fv9__h {
  color: var(--fg);
}
.fv9 .fv9__p {
  color: var(--text);
}

/* ── rt-service-v4, corrected to the template's proportions ────────────────
   Measured off the reference: media 408 and list 662 of the 1290 measure with
   a 221 gap; image ~408×335; rows ~163 tall with ~64px type, a raised
   superscript index and the rule sitting under every row. */
.sv4__grid {
  grid-template-columns: 31.63% 51.32%;
  justify-content: space-between;
  gap: 0;
  align-items: start;
}
.sv4__media img {
  aspect-ratio: 408 / 335;
  object-fit: cover;
  border-radius: 20px;
}
.sv4__cap {
  margin-top: 30px;
  font-size: 17px;
  line-height: 30px;
  color: #7c7c7c;
  max-width: 34ch;
}
.sv4__cap span {
  margin-bottom: 14px;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #6f6f6f;
}
.sv4__cap b {
  font-weight: 500;
  color: var(--fg);
}

/* Rows, as the design has them: a stack of white cards, each with a square
   mark on the left and the label at reading size. They replace the full-bleed
   64px list that sat here, where every row but one was dimmed to #b3b3b3 and
   the active row carried a heavy rule. Each row is still a link, so the corner
   arrow stays -- it says "this goes somewhere", which a plus would not. */
.sv4__list {
  display: grid;
  gap: 12px;
}
.sv4__row + .sv4__row {
  border-top: 0;
}
.sv4__row {
  border-bottom: 0;
  background: var(--surface);
  border-radius: 14px;
}
.sv4__row a {
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  color: var(--fg);
}
/* the square mark */
.sv4__row a::before {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent);
}
.sv4__t {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
/* the design drops the two-digit index; kept in the markup for the template
   and for anyone reading the source in order */
.sv4__n {
  display: none;
}
.sv4__row svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
  color: rgba(13, 7, 10, 0.4);
}
/* no dimmed rows and no singled-out active row: the design gives all five the
   same weight */
.sv4__row.is-active a {
  color: var(--fg);
}

@media (max-width: 900px) {
  .sv4__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .sv4__media img {
    max-width: 320px;
  }
  /* the cards keep their inset on narrow screens, and the label its reading
     size -- this block used to carry the 34px type the rows had before */
  .sv4__row a {
    padding: 16px 18px;
  }
}

/* Real assets in place of the hand-built approximations: the arc is a black
   dome with the violet halo baked in, so it sits flush to the section's
   bottom edge with the dome bleeding below the fold. */
.fv9__arc {
  position: absolute;
  left: 50%;
  bottom: -30%;
  width: 118%;
  height: auto;
  transform: translateX(-50%);
  border-radius: 0;
  background: none;
  filter: none;
  aspect-ratio: auto;
  pointer-events: none;
  z-index: 0;
}
.fv9__goals {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-top: 24px;
  border-radius: 14px;
}

/* Real arc asset on the SmashX dark section too. Its halo sits above the dome,
   so for a glow that reads at the TOP of the panel the image is flipped
   vertically — dome above the fold, halo spilling down into the section. */
.dark3sec__arc {
  position: absolute;
  left: 50%;
  top: -74%;
  width: 118%;
  height: auto;
  transform: translateX(-50%) scaleY(-1);
  border-radius: 0;
  background: none;
  filter: none;
  aspect-ratio: auto;
  pointer-events: none;
  z-index: 0;
}

/* rt-feature-v9 wide card: three-column flow — copy, connector diagram,
   balance panel — plus a reserve-proof line and a tooltip on the spend bars. */
.fv9__card--wide {
  grid-template-columns: minmax(0, 1fr) 150px minmax(0, 360px);
}

.fv9__proof {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}
.fv9__avatars {
  display: flex;
}
.fv9__avatars i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: linear-gradient(135deg, #b9b4f6, var(--accent));
}
.fv9__avatars i + i {
  margin-left: -10px;
}
.fv9__proof p {
  margin: 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--muted);
}
.fv9__proof b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.fv9__flow {
  position: relative;
  height: 150px;
  align-self: center;
}
.fv9__line {
  position: absolute;
  left: 50%;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: rgba(13, 7, 10, 0.16);
}
.fv9__node {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
}
.fv9__node--top {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.fv9__node--l {
  left: 6px;
  bottom: 0;
  background: var(--accent);
}
.fv9__node--r {
  right: 6px;
  bottom: 0;
  background: var(--positive);
}
.fv9__pill {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid rgba(13, 7, 10, 0.12);
  color: var(--fg);
  font-size: 12px;
  font-weight: 500;
}

.fv9__bars {
  position: relative;
}
.fv9__tip {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .fv9__card--wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .fv9__flow {
    display: none;
  }
}

/* ── rt-feature-v9 sized to the template ───────────────────────────────────
   Section 1528 tall: 140 top pad, h2 at 40px, cards starting at 288.
   Wide card 1290×500 with 53/60/60 padding; the two below 630×510 each with
   33/60 padding, 30px gaps, radius 30. Heights become min-heights so longer
   copy can still grow them. */
.fv9 {
  padding-top: 140px;
  padding-bottom: 200px;
}
.fv9 .darkfeature__title {
  font-size: clamp(30px, 3.1vw, 40px);
  max-width: 717px;
}

.fv9__grid {
  gap: 30px;
  margin-top: 48px;
}
.fv9__card {
  border-radius: 30px;
}
.fv9__card--wide {
  min-height: 500px;
  padding: 53px 60px 60px;
  align-items: center;
}
.fv9__grid > .fv9__card:not(.fv9__card--wide) {
  min-height: 510px;
  padding: 33px 60px;
  display: flex;
  flex-direction: column;
}
.fv9__grid > .fv9__card:not(.fv9__card--wide) .fv9__goals,
.fv9__grid > .fv9__card:not(.fv9__card--wide) .fv9__bars {
  margin-top: auto;
}
.fv9__h {
  font-size: 28px;
}
.fv9__goals {
  max-width: 100%;
}
.fv9__bars {
  height: 150px;
}

@media (max-width: 900px) {
  .fv9 {
    padding-top: 90px;
    padding-bottom: 120px;
  }
  .fv9__card--wide {
    min-height: 0;
    padding: 34px;
  }
  .fv9__grid > .fv9__card:not(.fv9__card--wide) {
    min-height: 0;
    padding: 34px;
  }
}

/* ── "See what you actually keep" chart ────────────────────────────────────
   Bars grow, hold, drain and repeat on a 4.4s loop, staggered left to right,
   with the $649.00 callout fading in once its bar is up.
   Gated on .fv9__card.is-in — .fv9__grid is a reveal GROUP, so it tags its
   children rather than itself, and the cards are what receive .is-in. */
.fv9__bars i {
  height: 0;
  animation: fv9Bar 4.4s var(--reveal-ease) infinite paused;
}
.fv9__bars i:nth-child(2) {
  animation-delay: 0.08s;
}
.fv9__bars i:nth-child(3) {
  animation-delay: 0.16s;
}
.fv9__bars i:nth-child(4) {
  animation-delay: 0.24s;
}
.fv9__bars i:nth-child(5) {
  animation-delay: 0.32s;
}
.fv9__bars i:nth-child(6) {
  animation-delay: 0.4s;
}
.fv9__bars i:nth-child(7) {
  animation-delay: 0.48s;
}

.fv9__tip {
  opacity: 0;
  animation: fv9Tip 4.4s var(--reveal-ease) infinite paused;
  animation-delay: 0.24s;
}

.fv9__card.is-in .fv9__bars i,
.fv9__card.is-in .fv9__tip {
  animation-play-state: running;
}

@keyframes fv9Bar {
  0% {
    height: 0;
  }
  27%,
  73% {
    height: var(--h);
  }
  100% {
    height: 0;
  }
}
@keyframes fv9Tip {
  0%,
  10% {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }
  27%,
  70% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  86%,
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv9__bars i {
    animation: none;
    height: var(--h);
  }
  .fv9__tip {
    animation: none;
    opacity: 1;
  }
}

/* Taller chart: the card has the room, so give the bars more of it and widen
   them slightly so the fuller heights don't read as spindly. */
.fv9__bars {
  height: 232px;
  gap: 14px;
}
.fv9__bars i {
  border-radius: 8px;
}
.fv9__tip {
  top: -34px;
}

@media (max-width: 900px) {
  .fv9__bars {
    height: 170px;
  }
}

/* ── goals widget (rebuilt from Card (2) so the figure can count up) ─────── */
.goals {
  margin-top: auto;
}
.goals__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.goals__disc {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #14c05f;
  color: #fff;
}
.goals__disc svg {
  width: 34px;
  height: 34px;
}
.goals__add {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(13, 7, 10, 0.12);
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
}
.goals__add i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
}
.goals__value {
  margin: 34px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 4vw, 54px);
  letter-spacing: -0.04em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.goals__sub {
  margin: 10px 0 0;
  font-size: 16px;
  color: var(--text);
}

/* ── wallet layout (from Card two) ─────────────────────────────────────────
   Available-balance figure over two sub-cards. The figure keeps the count-up,
   so it stays as markup rather than the flat asset. */
.wallet {
  margin-top: auto;
}
.wallet__label {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}
.wallet__value {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(42px, 4.2vw, 58px);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.wallet__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 30px;
}
.wcell {
  background: var(--bg);
  border-radius: 16px;
  padding: 18px 20px 20px;
}
.wcell__top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--fg);
}
.wcell__disc {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
}
.wcell__disc svg {
  width: 15px;
  height: 15px;
}
.wcell__amt {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.03em;
  color: var(--fg);
}

@media (max-width: 640px) {
  .wallet__split {
    grid-template-columns: 1fr;
  }
}

/* ── fiat → stablecoin exchange widget ─────────────────────────────────────
   Rebuilt from h2-banktransfer.webp: send field, rate/fee meta, swap glyph,
   receive field, then the CTA. Markup rather than the flat asset so the
   currencies, the rate and the all-in cost are real text. */
.fx {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 34px;
  display: grid;
  gap: 14px;
}
.fx__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.fx__field {
  background: var(--bg);
  border-radius: 16px;
  padding: 18px 20px;
}
.fx__label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.fx__row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.fx__amt {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 30px);
  letter-spacing: -0.03em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.fx__amt:focus {
  outline: none;
}
.fx__cur {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
}
.fx__cur img {
  width: 20px;
  height: 20px;
  max-width: none;
}
.fx__flag {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.fx__flag--vn {
  background: #da251d;
  position: relative;
}
.fx__flag--vn::after {
  content: "★";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffcd00;
  font-size: 12px;
  line-height: 1;
}

.fx__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 0 4px;
}
.fx__meta div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.fx__meta span {
  font-size: 13px;
  color: var(--muted);
}
.fx__meta b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.fx__swap {
  justify-self: center;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  margin: -4px 0;
}
.fx__swap svg {
  width: 18px;
  height: 18px;
}

.fx__note {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.fx__cta {
  justify-self: start;
  margin-top: 6px;
}

@media (max-width: 640px) {
  .fx {
    padding: 24px;
  }
}

/* widget cycling: fields dip while the corridor swaps, swap glyph nudges */
.fx__field,
.fx__meta {
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.fx.is-swapping .fx__field,
.fx.is-swapping .fx__meta {
  opacity: 0.25;
  transform: translateY(4px);
}
.fx__flag {
  transition: background-color var(--reveal-dur) var(--ease);
}
.fx__swap svg {
  animation: fxNudge 4.2s var(--ease) infinite;
}
@keyframes fxNudge {
  0%,
  88%,
  100% {
    transform: translateY(0);
  }
  92% {
    transform: translateY(3px);
  }
  96% {
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fx__swap svg {
    animation: none;
  }
  .fx.is-swapping .fx__field,
  .fx.is-swapping .fx__meta {
    opacity: 1;
    transform: none;
  }
}

/* "Built on rails that already move trillions" ran 1601px tall on a 1266px
   ring — far more room than the content needs. Scale the whole rings block
   down to ~70% and bring the heading back to the section step. */
.p2-rings {
  width: 880px;
  height: 880px;
  max-width: 100%;
}
.p2-rings__below .h2 {
  font-size: clamp(28px, 2.9vw, 38px);
  max-width: 20ch;
}
.p2-rings__below .lede {
  max-width: 52ch;
}
.p2-rings__below {
  gap: 16px;
}

@media (max-width: 980px) {
  .p2-rings {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .p2-rings__below .h2 {
    font-size: clamp(24px, 5vw, 30px);
  }
}

/* ── rt-service-v4 media: card floats, catches a slow highlight ────────────
   Gated on the reveal so it doesn't drift before the section is on screen.
   The sweep sits in a wrapper pseudo-element so it rides above the image
   without needing extra markup. */
.sv4__media {
  position: relative;
  perspective: 1200px;
}
.sv4__media img {
  position: relative;
  z-index: 1;
  transform-origin: 50% 60%;
  transition:
    transform var(--reveal-dur) var(--ease),
    box-shadow var(--reveal-dur) var(--ease);
  box-shadow: 0 18px 44px rgba(13, 7, 10, 0.12);
}
.sv4__list.is-in ~ .sv4__media img,
.sv4__media img {
  animation: sv4Float 7s ease-in-out infinite;
}

@keyframes sv4Float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-14px) rotate(-0.6deg);
  }
}

/* highlight sweep across the card */
.sv4__media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto 0;
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.55) 48%,
    transparent 58%
  );
  transform: translateX(-120%);
  animation: sv4Sweep 7s ease-in-out infinite;
  pointer-events: none;
  aspect-ratio: 408 / 335;
}

@keyframes sv4Sweep {
  0%,
  62% {
    transform: translateX(-120%);
  }
  86%,
  100% {
    transform: translateX(120%);
  }
}

/* lift on hover, pausing the drift so it settles under the cursor */
.sv4__media:hover img {
  animation-play-state: paused;
  transform: translateY(-18px) rotateX(4deg) rotateY(-4deg) scale(1.02);
  box-shadow: 0 34px 70px rgba(13, 7, 10, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .sv4__media img,
  .sv4__media::after {
    animation: none;
  }
  .sv4__media::after {
    opacity: 0;
  }
}

/* ── feature-three rt-feature-v11 ──────────────────────────────────────────
   Media left on a gradient stage with a floating payout toast; copy, CTA and
   a two-up icon feature row on the right. */
.fv11__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 90px;
  align-items: center;
}
.fv11__media {
  position: relative;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, #8c7bf3 0%, #6b5ae0 55%, #c9bef8 100%);
  padding: 40px;
  overflow: hidden;
}
.fv11__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.fv11__toast {
  position: absolute;
  right: 24px;
  top: 26%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 14px;
  background: var(--ink);
  box-shadow: 0 18px 40px rgba(13, 7, 10, 0.3);
  animation: fv11Toast 5s ease-in-out infinite;
}
.fv11__toast i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--positive);
  flex: none;
}
.fv11__toast span {
  display: grid;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}
.fv11__toast b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: #fff;
}
@keyframes fv11Toast {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.fv11__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.fv11__copy .h2 {
  margin: 0;
  max-width: 18ch;
}
.fv11__copy .lede {
  margin: 0;
  max-width: 46ch;
}

.fv11__feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 24px;
  width: 100%;
}
.fv11__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
}
.fv11__icon svg {
  width: 24px;
  height: 24px;
}
.fv11__feat h3 {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.fv11__feat p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 25px;
  color: var(--text);
}

@media (max-width: 980px) {
  .fv11__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .fv11__feats {
    gap: 26px;
  }
}
@media (max-width: 600px) {
  .fv11__feats {
    grid-template-columns: 1fr;
  }
}

/* ── feature-three rt-global-reach ─────────────────────────────────────────
   Centred copy over the dotted globe (1080×410), with corridor pills pinned
   as a share of the map so they hold position at any width. */
.greach__copy {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.greach__copy .h2 {
  margin: 0;
  text-wrap: balance;
}
.greach__copy .lede {
  margin: 18px auto 26px;
  max-width: 52ch;
}

.greach__map {
  position: relative;
  margin-top: 40px;
}
.greach__map img {
  display: block;
  width: 100%;
  height: auto;
}


.gpin {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(13, 7, 10, 0.14);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: gpinFloat 6s ease-in-out infinite;
}
.gpin i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.gpin--vn {
  left: 74%;
  top: 46%;
}
.gpin--ph {
  left: 82%;
  top: 58%;
  animation-delay: -1.2s;
}
.gpin--id {
  left: 78%;
  top: 74%;
  animation-delay: -2.4s;
}
.gpin--th {
  left: 69%;
  top: 60%;
  animation-delay: -3.6s;
}
.gpin--us {
  left: 18%;
  top: 44%;
  animation-delay: -4.8s;
}
.gpin--vn i {
  background: #da251d;
}
.gpin--ph i {
  background: #0038a8;
}
.gpin--id i {
  background: #ce1126;
}
.gpin--th i {
  background: #2d2a4a;
}
.gpin--us i {
  background: #3c3b6e;
}

@keyframes gpinFloat {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, calc(-50% - 7px));
  }
}

@media (max-width: 780px) {
  .gpin {
    font-size: 11px;
    padding: 5px 10px 5px 6px;
    gap: 6px;
  }
  .gpin i {
    width: 14px;
    height: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gpin {
    animation: none;
  }
}

/* ── USDC in flight across the corridors ──────────────────────────────────
   Arcs are drawn once, then a token rides each in turn on a 4s cycle
   staggered a second apart, so one payment is always landing. */
.gsend {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.groute {
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-dasharray: 5 7;
  opacity: 0.35;
  animation: gDash 1.4s linear infinite;
}
@keyframes gDash {
  to {
    stroke-dashoffset: -24;
  }
}

.gtoken {
  filter: drop-shadow(0 3px 8px rgba(39, 117, 202, 0.5));
}

/* each pin flares as its payment lands */
.gpin::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: gLand 4s ease-out infinite;
}
.gpin--vn::after {
  animation-delay: 2.2s;
}
.gpin--ph::after {
  animation-delay: 3.2s;
}
.gpin--th::after {
  animation-delay: 0.2s;
}
.gpin--id::after {
  animation-delay: 1.2s;
}
.gpin--us::after {
  display: none;
}

@keyframes gLand {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  40%,
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .groute {
    animation: none;
  }
  .gsend circle {
    display: none;
  }
  .gpin::after {
    animation: none;
    opacity: 0;
  }
}

/* Two more corridors: Mexico and Nigeria. Six routes now share a 6s cycle,
   one second apart, so the fan-out still reads one payment at a time. */
.gpin--mx {
  left: 15%;
  top: 58%;
}
.gpin--ng {
  left: 48%;
  top: 63%;
}
.gpin--mx i {
  background: #006341;
}
.gpin--ng i {
  background: #008751;
}

.gpin::after {
  animation-duration: 6s;
}
.gpin--vn::after {
  animation-delay: 2.2s;
}
.gpin--ph::after {
  animation-delay: 3.2s;
}
.gpin--th::after {
  animation-delay: 4.2s;
}
.gpin--id::after {
  animation-delay: 5.2s;
}
.gpin--mx::after {
  animation-delay: 0.2s;
}
.gpin--ng::after {
  animation-delay: 1.2s;
}

/* ── corridor pin flags ────────────────────────────────────────────────────
   Drawn with gradients rather than image assets: at 20px a circular crop
   reads as the flag's colour signature, and it stays sharp at any density. */
.gpin i {
  position: relative;
  overflow: hidden;
  background: #ddd;
  box-shadow: inset 0 0 0 1px rgba(13, 7, 10, 0.12);
}

/* Indonesia — red over white */
.gpin--id i {
  background: linear-gradient(#ce1126 50%, #fff 50%);
}

/* Mexico — green / white / red */
.gpin--mx i {
  background: linear-gradient(
    90deg,
    #006847 33.33%,
    #fff 33.33% 66.66%,
    #ce1126 66.66%
  );
}

/* Nigeria — green / white / green */
.gpin--ng i {
  background: linear-gradient(
    90deg,
    #008751 33.33%,
    #fff 33.33% 66.66%,
    #008751 66.66%
  );
}

/* Thailand — red, white, double-height blue, white, red */
.gpin--th i {
  background: linear-gradient(
    #a51931 16.66%,
    #fff 16.66% 33.33%,
    #2d2a4a 33.33% 66.66%,
    #fff 66.66% 83.33%,
    #a51931 83.33%
  );
}

/* Vietnam — yellow star on red */
.gpin--vn i {
  background: #da251d;
}
.gpin--vn i::after {
  content: "★";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffcd00;
  font-size: 11px;
  line-height: 1;
}

/* Philippines — blue over red with the white hoist triangle */
.gpin--ph i {
  background: linear-gradient(#0038a8 50%, #ce1126 50%);
}
.gpin--ph i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 55%;
  background: var(--surface);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* United States — stripes with the canton */
.gpin--us i {
  background: repeating-linear-gradient(#b22234 0 2px, #fff 2px 4px);
}
.gpin--us i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 55%;
  height: 54%;
  background: #3c3b6e;
}

@media (max-width: 780px) {
  .gpin--vn i::after {
    font-size: 8px;
  }
  .gpin--us i {
    background: repeating-linear-gradient(#b22234 0 1.5px, #fff 1.5px 3px);
  }
}

/* Japan and Korea — eight corridors now, 8s cycle, one second apart. */
.gpin--kr {
  left: 80%;
  top: 34%;
}
.gpin--jp {
  left: 87%;
  top: 30%;
}

/* Japan — red disc on white */
.gpin--jp i {
  background: var(--surface);
}
.gpin--jp i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52%;
  height: 52%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #bc002d;
}
/* Korea — red over blue taegeuk on white */
.gpin--kr i {
  background: var(--surface);
}
.gpin--kr i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54%;
  height: 54%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(#cd2e3a 50%, #0047a0 50%);
}

.gpin::after {
  animation-duration: 8s;
}
.gpin--vn::after {
  animation-delay: 2.2s;
}
.gpin--ph::after {
  animation-delay: 3.2s;
}
.gpin--th::after {
  animation-delay: 4.2s;
}
.gpin--id::after {
  animation-delay: 5.2s;
}
.gpin--mx::after {
  animation-delay: 6.2s;
}
.gpin--ng::after {
  animation-delay: 7.2s;
}
.gpin--kr::after {
  animation-delay: 0.2s;
}
.gpin--jp::after {
  animation-delay: 1.2s;
}

/* ── feature-three rt-service-v6 ───────────────────────────────────────────
   Heading over three equal cards, each with a widget stage above the caption. */
.sv6__title {
  max-width: 20ch;
  margin: 0;
}
.sv6__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 50px;
}
.sv6__card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 26px;
  text-align: center;
}
.sv6__stage {
  background: var(--bg);
  border-radius: 16px;
  padding: 26px 22px;
  min-height: 168px;
  display: grid;
  place-items: center;
}
.sv6__h {
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.sv6__p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 25px;
  color: var(--text);
}

/* Dark, as the design has it, with a green glow rising behind the cards.
   .sv6 is only on /business so it carries this itself rather than through a
   modifier. Everything below is the light-surface tokens this section was
   built on, re-pointed. */
.sv6 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0a0a0a;
  border-radius: var(--r-lg);
  margin-inline: var(--gutter);
  /* The section rhythm on this page is 130px of padding at the top of each
     section, against a padding-bottom of 0 -- so a section is separated from
     the one above by its own padding. This one replaces that padding with
     its own, inside a visible dark panel, where it reads as the panel's
     inner margin rather than as a gap between sections. The result was the
     panel's top edge sitting flush against the last line of the block above
     it: 0px, where every other pair on the page has 130.

     The inset cards on /markets get this gap from the padding-bottom of the
     section above them. Nothing above this one carries any, so it takes the
     rhythm as an outer margin instead. */
  margin-block-start: var(--section-y);
  padding-block: clamp(48px, 6vw, 90px);
}

.sv6::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -40%;
  width: min(1080px, 94%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(163, 230, 53, 0.4),
    rgba(163, 230, 53, 0) 70%
  );
  pointer-events: none;
}

.sv6 .sv6__title {
  max-width: 24ch;
  margin-inline: auto;
  text-align: center;
  color: #ffffff;
}

.sv6 .sv6__card {
  background: #17171b;
}

.sv6 .sv6__stage {
  background: #212127;
}

.sv6 .sv6__h {
  color: #ffffff;
}

.sv6 .sv6__p {
  color: rgba(255, 255, 255, 0.6);
}

.sv6 .budget__row i,
.sv6 .gauge__label {
  color: rgba(255, 255, 255, 0.5);
}

.sv6 .budget__row b,
.sv6 .gauge__value {
  color: #ffffff;
}

.sv6 .budget__track {
  background: rgba(255, 255, 255, 0.14);
}

/* solid violet: the red-to-violet gradient read as a warning on the light
   card and the design drops it */
.sv6 .budget__track i {
  background: var(--accent);
}

.sv6 .gauge__bg {
  stroke: rgba(255, 255, 255, 0.16);
}

/* budget widget */
.budget {
  width: 100%;
}
.budget__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
}
.budget__row .is-right {
  text-align: right;
}
.budget__row span {
  display: grid;
  gap: 4px;
}
.budget__row i {
  font-style: normal;
  font-size: 12px;
  color: var(--muted-2);
}
.budget__row b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.budget__track {
  height: 10px;
  border-radius: 99px;
  margin-top: 20px;
  background: rgba(13, 7, 10, 0.1);
  overflow: hidden;
}
.budget__track i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 99px;
  background: linear-gradient(90deg, #f0453a, var(--accent));
}

/* gauge */
.gauge {
  position: relative;
  width: 100%;
  max-width: 190px;
  text-align: center;
}
.gauge svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.gauge__bg,
.gauge__fg {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
}
.gauge__bg {
  stroke: rgba(13, 7, 10, 0.1);
}
.gauge__fg {
  stroke: var(--accent);
  stroke-dasharray: 158;
  stroke-dashoffset: 52;
}
.gauge__label {
  margin: -34px 0 0;
  font-size: 12px;
  color: var(--muted-2);
}
.gauge__value {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.03em;
  color: var(--fg);
}

/* itemised rows */
.rows {
  width: 100%;
  display: grid;
  gap: 12px;
}
.rows__r {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--surface);
  border-radius: 12px;
  padding: 12px 14px;
}
.rows__r span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--fg);
}
.rows__d {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--accent);
}
.rows__d--2 {
  background: var(--positive);
}
.rows__d--3 {
  background: var(--ink);
}
.rows__r b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--fg);
}

@media (max-width: 900px) {
  .sv6__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── home-two hero collage, matched to the template ────────────────────────
   Measured on the live page (panel 1410, content 1290): left column is two
   195s side by side over a 410, centre card is 410 wide and rides ~214px
   higher than the rest, right column is a short 410 over a tall one.
   h1 is 60px at 560 wide, sitting 190 from the panel top. */
.p2-hero__copy--centre .h1 {
  font-size: clamp(36px, 4.17vw, 60px);
  max-width: 560px;
  margin-inline: auto;
}

.p2-collage {
  display: grid;
  grid-template-columns: 195fr 195fr 410fr 410fr;
  grid-template-rows: auto auto;
  gap: 24px;
  align-items: start;
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  margin-top: 70px;
}
.p2-col {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  transform: none;
  border-radius: 18px;
}
.p2-col--tl {
  grid-column: 1;
  grid-row: 1;
}
.p2-col--tr {
  grid-column: 2;
  grid-row: 1;
}
.p2-col--bl {
  grid-column: 1 / span 2;
  grid-row: 2;
}
/* the hero card breaks upward out of the grid, as in the template */
.p2-col--mid {
  grid-column: 3;
  grid-row: 1 / span 2;
  margin-top: -214px;
  align-self: start;
}
.p2-col--r1 {
  grid-column: 4;
  grid-row: 1;
}
.p2-col--r2 {
  grid-column: 4;
  grid-row: 2;
}

@media (max-width: 980px) {
  .p2-collage {
    grid-template-columns: 1fr 1fr;
    margin-top: 44px;
  }
  .p2-col--tl {
    grid-column: 1;
  }
  .p2-col--tr {
    grid-column: 2;
  }
  .p2-col--bl {
    grid-column: 1 / span 2;
    grid-row: auto;
  }
  .p2-col--mid {
    grid-column: 1 / span 2;
    grid-row: auto;
    margin-top: 0;
  }
  .p2-col--r1,
  .p2-col--r2 {
    grid-column: 1 / span 2;
    grid-row: auto;
  }
}

/* The centre card breaks 214px upward, so the collage needs that much
   clearance plus a gap or it rides over the headline. Template leaves ~309px
   between the copy block and the left column, which puts the hero card ~95px
   clear of the copy — match that. */
.p2-collage {
  margin-top: 300px;
}

@media (max-width: 1200px) {
  .p2-collage {
    margin-top: 240px;
  }
}
@media (max-width: 980px) {
  .p2-collage {
    margin-top: 44px;
  }
}

/* ── collage columns pack independently ───────────────────────────────────
   A shared grid forced every column onto the same row lines, so the short
   left pair left a ~140px hole above the card beneath it. The template's
   columns each pack tight with ~20px between cards, so make them real
   columns instead of grid rows. */
.p2-collage {
  grid-template-columns: 410fr 410fr 410fr;
  grid-template-rows: auto;
  gap: 30px;
  align-items: start;
}
.p2-colstack {
  display: grid;
  gap: 20px;
  align-content: start;
}
.p2-colpair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.p2-colstack--l {
  grid-column: 1;
}
.p2-col--mid {
  grid-column: 2;
  grid-row: 1;
  margin-top: -214px;
}
.p2-colstack--r {
  grid-column: 3;
}

/* the stack children are plain images again */
.p2-col--tl,
.p2-col--tr,
.p2-col--bl,
.p2-col--r1,
.p2-col--r2 {
  grid-column: auto;
  grid-row: auto;
}

@media (max-width: 980px) {
  .p2-collage {
    grid-template-columns: minmax(0, 1fr);
  }
  .p2-colstack--l,
  .p2-col--mid,
  .p2-colstack--r {
    grid-column: 1;
  }
  .p2-col--mid {
    grid-row: auto;
    margin-top: 0;
  }
}

/* Soltio's three columns all bottom out on the same line (1184 in its panel):
   left 142+19+244 from y779, centre 619 from y565, right 101+20+294 from y769.
   So they're bottom-aligned and the tall centre card rises out of the row on
   its own — no negative margin needed to fake the break. */
.p2-collage {
  align-items: end;
}
.p2-colstack {
  align-content: end;
}
.p2-col--mid {
  margin-top: 0;
  align-self: end;
}

/* 300px below the copy was sized around the old negative-margin trick. With
   the columns bottom-aligned that gap stands on its own — pull it in. */
.p2-collage {
  margin-top: 150px;
}

@media (max-width: 1200px) {
  .p2-collage {
    margin-top: 110px;
  }
}
@media (max-width: 980px) {
  .p2-collage {
    margin-top: 44px;
  }
}

/* ── collage cards drift ───────────────────────────────────────────────────
   Weekly Revenue, Income and Available Balance each float on their own
   offset, so the group breathes instead of moving as one block. Gated on the
   hero reveal; the centre card and the small pair stay put as the anchor. */
.p2-col--bl,
.p2-col--r1,
.p2-col--r2 {
  animation: p2Drift 8s ease-in-out infinite;
  transition:
    transform var(--reveal-dur) var(--ease),
    box-shadow var(--reveal-dur) var(--ease);
  will-change: transform;
}
.p2-col--bl {
  animation-delay: 0s;
}
.p2-col--r1 {
  animation-delay: -2.6s;
}
.p2-col--r2 {
  animation-delay: -5.2s;
}

@keyframes p2Drift {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-14px) rotate(-0.5deg);
  }
}

/* a soft glow rises with each card as it lifts */
.p2-col--bl,
.p2-col--r1,
.p2-col--r2 {
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.p2-col--bl:hover,
.p2-col--r1:hover,
.p2-col--r2:hover {
  animation-play-state: paused;
  transform: translateY(-20px) scale(1.02);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  .p2-col--bl,
  .p2-col--r1,
  .p2-col--r2 {
    animation: none;
  }
}

/* ── collage counter cards ─────────────────────────────────────────────────
   Weekly revenue / Income / Available balance rebuilt as markup so the
   figures can count up — they were baked into the webps before. */
.ccard {
  background: var(--surface);
  border-radius: 18px;
  padding: 22px 24px;
  display: grid;
  align-content: start;
  gap: 10px;
}
.ccard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ccard__head span {
  font-size: 13px;
  color: var(--muted);
}
.ccard__chip {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(37, 194, 110, 0.16);
  color: #14a85a;
  font-size: 12px;
  font-weight: 600;
}
.ccard__v {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.ccard__v--lg {
  font-size: 32px;
}
.ccard__v--xl {
  font-size: 40px;
}
.ccard__delta {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: #14a85a;
}

.ccard__bar {
  height: 40px;
  border-radius: 10px;
  margin-top: 4px;
  background: var(--bg);
  overflow: hidden;
}
.ccard__bar i {
  display: grid;
  place-items: center;
  width: var(--w);
  height: 100%;
  border-radius: 10px;
  background: repeating-linear-gradient(
    115deg,
    var(--ink) 0 7px,
    #2b2430 7px 12px
  );
  animation: ccardFill 1.5s var(--reveal-ease) both;
}
.ccard__bar em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
@keyframes ccardFill {
  from {
    width: 0;
  }
  to {
    width: var(--w);
  }
}

.ccard__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}
.ccard__split > div {
  background: var(--bg);
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}
.ccard__split span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.ccard__d {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
}
.ccard__d--2 {
  background: #6e63e8;
}
.ccard__split b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .ccard__bar i {
    animation: none;
  }
}

/* The 59% fill fired on load, before the hero had revealed, and the figure
   inside it was static. Hold the bar at zero until the card reveals, then
   fill it in step with the counters. */
.ccard__bar i {
  width: 0;
  animation: none;
}
.p2-hero .is-in .ccard__bar i,
[data-reveal].is-in .ccard__bar i,
.p2-collage .ccard__bar i {
  animation: ccardFill 1.5s var(--reveal-ease) 0.15s both;
}

/* the right stack lost 11px of height against the others once the cards
   became markup — let the last card absorb it so the bottoms stay level */
.p2-colstack--r {
  height: 100%;
}
.p2-colstack--r .p2-col--r2 {
  align-self: stretch;
}

/* ── "Transfer successful" card ───────────────────────────────────────────
   Rebuilt from h2-card-v7.webp so the tick can draw itself and the badge can
   pulse — the flat webp could only sit there. */
.tsucc {
  background: linear-gradient(150deg, #7c6bf0 0%, #6354dc 55%, #b9aef6 100%);
  border-radius: 18px;
  padding: 22px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.tsucc__badge {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: #5a49d6;
}
.tsucc__badge svg {
  width: 24px;
  height: 24px;
}

/* the tick draws itself, then the ring pings outward */
.tsucc__tick {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: tsuccDraw 5s var(--reveal-ease) infinite;
}
@keyframes tsuccDraw {
  0%,
  8% {
    stroke-dashoffset: 26;
  }
  26%,
  78% {
    stroke-dashoffset: 0;
  }
  92%,
  100% {
    stroke-dashoffset: 26;
  }
}

.tsucc__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  opacity: 0;
  animation: tsuccPing 5s ease-out infinite;
}
@keyframes tsuccPing {
  0%,
  20% {
    opacity: 0;
    transform: scale(1);
  }
  30% {
    opacity: 0.85;
    transform: scale(1);
  }
  55%,
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

.tsucc__label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: #fff;
}

/* left stack lost 9px against the others when its cards became markup */
.p2-colstack--l {
  height: 100%;
}
.p2-colstack--l .p2-col--bl {
  align-self: stretch;
}

@media (prefers-reduced-motion: reduce) {
  .tsucc__tick {
    animation: none;
    stroke-dashoffset: 0;
  }
  .tsucc__ring {
    animation: none;
    opacity: 0;
  }
}

/* ── celebration burst ─────────────────────────────────────────────────────
   Confetti fires from the badge as the tick completes, on the same 5s loop.
   Each piece carries its own vector, spin and delay so the burst scatters
   instead of moving as a ring. */
.tsucc {
  position: relative;
  overflow: hidden;
}
.tsucc__confetti {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.tsucc__confetti i {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 9px;
  margin: -4px 0 0 -3px;
  border-radius: 2px;
  background: var(--surface);
  opacity: 0;
  animation: tsuccPop 5s var(--reveal-ease) infinite;
  animation-delay: var(--d);
}
/* a few pieces pick up accent colours so it isn't a wall of white */
.tsucc__confetti i:nth-child(3n) {
  background: #ceff1c;
}
.tsucc__confetti i:nth-child(4n) {
  background: #7ec9a2;
  border-radius: 50%;
}
.tsucc__confetti i:nth-child(5n + 1) {
  background: #ffd166;
}

@keyframes tsuccPop {
  0%,
  22% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg) scale(0.4);
  }
  30% {
    opacity: 1;
    transform: translate(calc(var(--x) * 0.45), calc(var(--y) * 0.45))
      rotate(calc(var(--r) * 0.4)) scale(1);
  }
  62% {
    opacity: 1;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1);
  }
  80%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--x) * 1.15), calc(var(--y) + 26px))
      rotate(var(--r)) scale(0.85);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tsucc__confetti {
    display: none;
  }
}

/* ── centre collage card: business card ────────────────────────────────────
   Was h2-rewardcard.webp — a personal "Reward Card" with a cardholder name.
   Rebuilt as markup so it reads as a company card on the Business page. */
/* The hero's centre card is the SmashX render now, not the blue gradient this
   built. .p2-col gives every card in the stack a box-shadow, which only works
   on an opaque rectangle -- the render has transparent corners, so the shadow
   moves onto the artwork itself, where drop-shadow follows its silhouette. */
.bizcard {
  background: none;
  border-radius: 20px;
  padding: 0;
  box-shadow: none;
}

.bizcard__art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  filter: drop-shadow(0 26px 60px rgba(0, 0, 0, 0.5));
}
.bizcard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.bizcard__brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.bizcard__nfc svg {
  width: 26px;
  height: 26px;
  opacity: 0.9;
}
.bizcard__chip {
  width: 46px;
  height: 34px;
  margin-top: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, #f1d48a 0%, #c9a24e 45%, #f6e3ae 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.bizcard__num {
  margin: auto 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 1.9vw, 25px);
  letter-spacing: 0.02em;
}
.bizcard__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}
.bizcard__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(17px, 1.6vw, 21px);
  letter-spacing: -0.02em;
}
.bizcard__exp {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

/* The rebuilt card was sizing to its content (460×440, near-square). The
   collage's centre slot is a tall card — Soltio's is 410×619 — so pin that
   aspect back and let the content space out inside it. */
.bizcard {
  aspect-ratio: 410 / 619;
  padding: 36px 34px;
  justify-content: space-between;
}
.bizcard__chip {
  margin-top: 0;
  width: 54px;
  height: 40px;
}
.bizcard__num {
  margin: 0;
}
.bizcard__foot {
  margin-top: 0;
}

@media (max-width: 980px) {
  .bizcard {
    aspect-ratio: 1.586 / 1;
    padding: 28px;
  }
}

/* SmashPay mark on the business card. logo.png is the dark/lime wordmark, so
   it's knocked out to white for the blue face. */
.bizcard__brandwrap {
  display: grid;
  gap: 10px;
}
.bizcard__logo {
  width: 132px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.96;
}
.bizcard__brand {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 980px) {
  .bizcard__logo {
    width: 112px;
  }
}

/* ── hero "rails" backdrop ─────────────────────────────────────────────────
   Light runs streaming left to right behind the copy — the rails the section
   below talks about. Each line has its own lane, speed and offset so they
   never march in step. Sits under the collage and copy. */
.rails {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 18%,
    #000 82%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 18%,
    #000 82%,
    transparent
  );
}
/* the lane each run travels along */
.rails i {
  position: absolute;
  left: -30%;
  top: var(--t);
  width: 26%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(120, 140, 255, 0.15) 25%,
    rgba(160, 175, 255, 0.85) 60%,
    rgba(255, 255, 255, 0.95) 82%,
    transparent
  );
  filter: blur(0.2px);
  animation: railRun var(--s) linear var(--d) infinite;
}
/* the faint track the run rides on */
.rails::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(14% - 1px),
    rgba(255, 255, 255, 0.05) calc(14% - 1px) 14%
  );
}

@keyframes railRun {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    transform: translateX(500%);
    opacity: 0;
  }
}

/* keep copy and cards above the backdrop */
.p2-hero__inner {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .rails i {
    animation: none;
    opacity: 0.3;
    transform: translateX(200%);
  }
}

/* ── hero: stablecoins in circulation ─────────────────────────────────────
   Two rings of coins orbit slowly behind the copy — the rails the section
   below names, shown moving. Counter-rotated so the marks stay upright, and
   held well back in opacity so they never compete with the headline. */
.hcoins {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0;
  height: 0;
  z-index: 0;
  pointer-events: none;
}
.hcoins img {
  position: absolute;
  left: 0;
  top: 0;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  padding: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  opacity: var(--o);
  animation: hcoinOrbit var(--s) linear var(--d) infinite;
  max-width: none;
}
@keyframes hcoinOrbit {
  from {
    transform: rotate(0deg) translateY(calc(-1 * var(--r))) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateY(calc(-1 * var(--r))) rotate(-360deg);
  }
}

/* the orbit paths, barely there */
.hcoins::before,
.hcoins::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.07);
  transform: translate(-50%, -50%);
}
.hcoins::before {
  width: 680px;
  height: 680px;
}
.hcoins::after {
  width: 1060px;
  height: 1060px;
}

@media (max-width: 980px) {
  .hcoins img {
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    padding: 7px;
  }
  .hcoins::before {
    width: 420px;
    height: 420px;
  }
  .hcoins::after {
    width: 640px;
    height: 640px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hcoins {
    display: none;
  }
}

/* Coins were 62px and reading as texture — scale up so they register as
   recognisable marks, and lift the opacity a little to match. */
.hcoins img {
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  padding: 13px;
  opacity: calc(var(--o) + 0.14);
}

@media (max-width: 980px) {
  .hcoins img {
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
    padding: 9px;
  }
}

/* Orbit paths were at 7% white and effectively invisible once the coins grew.
   Lift them, widen the dashes so the ring reads as a track rather than a
   hairline, and give the inner ring a touch more presence than the outer. */
.hcoins::before,
.hcoins::after {
  border-style: dashed;
  border-width: 1.5px;
}
.hcoins::before {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 40px rgba(120, 140, 255, 0.12) inset;
}
.hcoins::after {
  border-color: rgba(255, 255, 255, 0.18);
}

/* slow counter-drift so the tracks read as moving with the coins */
.hcoins::before {
  animation: hringSpin 90s linear infinite;
}
.hcoins::after {
  animation: hringSpin 120s linear infinite reverse;
}

@keyframes hringSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hcoins::before,
  .hcoins::after {
    animation: none;
  }
}

/* ── neon pass on the hero orbits ─────────────────────────────────────────
   Rings glow in the accent violet with a bloom either side of the stroke;
   coins get a matching halo and a slow pulse so the ring reads as charged. */
.hcoins::before,
.hcoins::after {
  border-style: solid;
  border-width: 1.5px;
}
.hcoins::before {
  border-color: rgba(140, 120, 255, 0.75);
  box-shadow:
    0 0 18px rgba(120, 100, 255, 0.55),
    0 0 46px rgba(120, 100, 255, 0.28),
    inset 0 0 26px rgba(120, 100, 255, 0.22);
}
.hcoins::after {
  border-color: rgba(120, 150, 255, 0.45);
  box-shadow:
    0 0 16px rgba(90, 130, 255, 0.38),
    0 0 52px rgba(90, 130, 255, 0.18),
    inset 0 0 30px rgba(90, 130, 255, 0.12);
}

.hcoins img {
  background: rgba(18, 14, 38, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(160, 150, 255, 0.45),
    0 0 16px rgba(120, 100, 255, 0.45),
    0 0 38px rgba(120, 100, 255, 0.22);
  animation:
    hcoinOrbit var(--s) linear var(--d) infinite,
    hcoinGlow 4.5s ease-in-out var(--d) infinite;
}

@keyframes hcoinGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 6px rgba(130, 110, 255, 0.45)) saturate(1.15);
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(150, 130, 255, 0.9)) saturate(1.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hcoins img {
    animation: none;
  }
}

/* Both rings drifted the same way once the outer's `reverse` was overridden.
   Send the inner one anticlockwise so the two counter-rotate against each
   other, and flip the inner coin ring with it so coins track their own path. */
.hcoins::before {
  animation: hringSpin 90s linear infinite reverse;
}
.hcoins::after {
  animation: hringSpin 120s linear infinite;
}

/* inner-orbit coins (radius 340) run anticlockwise with their ring */
.hcoins img[style*="--r:340px"] {
  animation:
    hcoinOrbitRev var(--s) linear var(--d) infinite,
    hcoinGlow 4.5s ease-in-out var(--d) infinite;
}

@keyframes hcoinOrbitRev {
  from {
    transform: rotate(360deg) translateY(calc(-1 * var(--r))) rotate(-360deg);
  }
  to {
    transform: rotate(0deg) translateY(calc(-1 * var(--r))) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hcoins img[style*="--r:340px"] {
    animation: none;
  }
}

/* ── stablecoins: full glow treatment ─────────────────────────────────────
   Each coin sits in its own lit capsule — a coloured aura behind the mark, a
   bright rim, and a bloom that breathes. Colour is taken per coin so USDC
   glows blue, USDT green and so on, rather than everything washing violet. */
.hcoins img {
  --glow: 120, 100, 255;
  background: radial-gradient(
    circle at 50% 42%,
    rgba(var(--glow), 0.38),
    rgba(12, 10, 28, 0.82) 68%
  );
  box-shadow:
    inset 0 0 0 1.5px rgba(var(--glow), 0.75),
    inset 0 0 18px rgba(var(--glow), 0.35),
    0 0 22px rgba(var(--glow), 0.55),
    0 0 60px rgba(var(--glow), 0.28);
  opacity: calc(var(--o) + 0.3);
}

/* per-coin glow colours, matched to each mark */
.hcoins img[src*="usdc"] {
  --glow: 39, 117, 202;
}
.hcoins img[src*="usdt"] {
  --glow: 38, 161, 123;
}
.hcoins img[src*="jpyc"] {
  --glow: 214, 170, 60;
}
.hcoins img[src*="pyusd"] {
  --glow: 66, 110, 240;
}
.hcoins img[src*="eurc"] {
  --glow: 60, 130, 246;
}
.hcoins img[src*="usdp"] {
  --glow: 46, 190, 160;
}
.hcoins img[src*="fdusd"] {
  --glow: 224, 178, 64;
}
.hcoins img[src*="gusd"] {
  --glow: 0, 200, 232;
}

/* the bloom breathes rather than sitting flat */
@keyframes hcoinGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(var(--glow), 0.55)) saturate(1.2)
      brightness(1.05);
  }
  50% {
    filter: drop-shadow(0 0 22px rgba(var(--glow), 0.95)) saturate(1.6)
      brightness(1.18);
  }
}

/* ── hero zoom on scroll ──────────────────────────────────────────────────
   The panel's contents scale up and fade back as the hero leaves the
   viewport, so scrolling reads as pushing into it. --zoom/--zfade are driven
   from the scroll position; both default to a no-op so the hero is correct
   before the script runs and if it never does. */
.p2-hero {
  --zoom: 1;
  --zfade: 1;
}

.p2-hero__inner,
.p2-hero .hcoins {
  transform: scale(var(--zoom));
  transform-origin: 50% 42%;
  opacity: var(--zfade);
  will-change: transform, opacity;
}
/* the coin field pushes a little harder than the copy for depth */
.p2-hero .hcoins {
  transform: translate(0, 0) scale(calc(1 + (var(--zoom) - 1) * 1.6));
}

/* the ray behind everything drifts the other way, so the layers separate */
.p2-hero__ray {
  transform: scale(calc(1 + (var(--zoom) - 1) * 0.4));
}

/* Japan is a second hub, sending on to the SE-Asia corridors. Its routes and
   tokens are tinted so the two origins read apart; 12 routes now share a 12s
   cycle, still one second between departures. */
.gtoken {
  fill: #2775ca;
}
.gtoken.is-jp {
  fill: #bc002d;
  filter: drop-shadow(0 3px 8px rgba(188, 0, 45, 0.5));
}
.groute.is-jp {
  stroke: #bc002d;
  opacity: 0.3;
}

/* pins now flare on both the US and the Japan pass */
.gpin::after {
  animation-duration: 12s;
}
.gpin--vn::after {
  animation-delay: 2.2s;
}
.gpin--ph::after {
  animation-delay: 3.2s;
}
.gpin--th::after {
  animation-delay: 4.2s;
}
.gpin--id::after {
  animation-delay: 5.2s;
}
.gpin--mx::after {
  animation-delay: 6.2s;
}
.gpin--ng::after {
  animation-delay: 7.2s;
}
.gpin--kr::after {
  animation-delay: 8.2s;
}
.gpin--jp::after {
  display: block;
  animation-delay: 9.2s;
}

/* ── volume dashboard (was h2-dashboard.webp) ─────────────────────────────
   Rebuilt as markup so the bars can grow. Each bar rises in turn on a 60ms
   stagger, holds, then drains — a 6s loop keyed off the section reveal. */
.vdash {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-card);
  padding: 26px;
  backdrop-filter: blur(6px);
}
.vdash__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.vdash__label {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.vdash__value {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.vdash__chip {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(37, 194, 110, 0.18);
  color: #57da97;
  font-size: 12px;
  font-weight: 600;
}

.vdash__bars {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  height: 190px;
  margin-top: 26px;
}
.vdash__bars i {
  position: relative;
  height: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.22);
  animation: vdashGrow 6s var(--reveal-ease) infinite;
  animation-delay: calc(var(--i) * 60ms);
}
/* Lime at the top running down into violet, the same ramp the personal
   page's peak bar uses. It was purple into indigo, which read as a darker
   version of the bars beside it rather than the one that stands out. The
   vdashGrow animation is untouched -- only the fill changes. */
.vdash__bars i.is-on {
  background: linear-gradient(180deg, #ceff1c 0%, #8b7cf0 46%, #5b2bef 100%);
  box-shadow: 0 0 18px rgba(120, 100, 255, 0.45);
}
.vdash__bars em {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  font-style: normal;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

@keyframes vdashGrow {
  0% {
    height: 0;
  }
  22%,
  72% {
    height: var(--h);
  }
  100% {
    height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vdash__bars i {
    animation: none;
    height: var(--h);
  }
}

/* Chart frame was short against the copy beside it — give the bars more room
   so the panel reads as a proper chart rather than a strip. */
.vdash {
  padding: 32px 30px 40px;
}
.vdash__bars {
  height: 300px;
  margin-top: 34px;
}
.vdash__bars em {
  bottom: -24px;
  font-size: 11px;
}

@media (max-width: 1100px) {
  .vdash__bars {
    height: 240px;
  }
}
@media (max-width: 640px) {
  .vdash__bars {
    height: 190px;
    gap: 5px;
  }
}

/* the growth chip climbs with the chart, so give it stable digit widths */
.vdash__chip {
  font-variant-numeric: tabular-nums;
}
.vdash__pct {
  display: inline-block;
  min-width: 2.4ch;
  text-align: right;
}

/* ── rt-service-v6: widgets animate in with their numbers ─────────────────
   Released by .sv6__grid.is-in — the grid is a reveal group, so its children
   carry .is-in and the widgets hang off those. */
.budget__track i {
  width: 0;
  transition: width 1.4s var(--reveal-ease) 0.1s;
}
.sv6__card.is-in .budget__track i {
  width: var(--w);
}

/* the gauge sweeps round to its reading */
.gauge__fg {
  stroke-dashoffset: 158;
  transition: stroke-dashoffset 1.5s var(--reveal-ease) 0.1s;
}
.sv6__card.is-in .gauge__fg {
  stroke-dashoffset: 52;
}

/* the itemised rows slide up in sequence */
.rows__r {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease);
}
.sv6__card.is-in .rows__r {
  opacity: 1;
  transform: none;
}
.sv6__card.is-in .rows__r:nth-child(2) {
  transition-delay: 0.12s;
}
.sv6__card.is-in .rows__r:nth-child(3) {
  transition-delay: 0.24s;
}

.budget__row b,
.gauge__value,
.rows__r b {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .budget__track i {
    width: var(--w);
    transition: none;
  }
  .gauge__fg {
    stroke-dashoffset: 52;
    transition: none;
  }
  .rows__r {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* The bento chart's bars use `height: var(--h)` as a percentage, but the
   container only had `min-height` — an indefinite height. A percentage
   against an indefinite parent is circular, so the bars resolved to ~394px
   each and blew the card out to 1436px tall. Give the track a definite
   height (as the other charts already have) and the percentages resolve. */
.bchart__bars {
  height: 230px;
  min-height: 0;
  flex: 0 0 auto;
}
.bchart {
  justify-content: space-between;
}

/* `animation-delay: calc(var(--i) * 55ms)` resolved to 0s for every bar —
   the delay is read before the nth-child rules set --i. Declare each
   delay outright so the chart actually fills left to right. */
.pdchart__bars i:nth-child(1) {
  animation-delay: 0ms;
}
.pdchart__bars i:nth-child(2) {
  animation-delay: 55ms;
}
.pdchart__bars i:nth-child(3) {
  animation-delay: 110ms;
}
.pdchart__bars i:nth-child(4) {
  animation-delay: 165ms;
}
.pdchart__bars i:nth-child(5) {
  animation-delay: 220ms;
}
.pdchart__bars i:nth-child(6) {
  animation-delay: 275ms;
}
.pdchart__bars i:nth-child(7) {
  animation-delay: 330ms;
}
.pdchart__bars i:nth-child(8) {
  animation-delay: 385ms;
}
.pdchart__bars i:nth-child(9) {
  animation-delay: 440ms;
}
.pdchart__bars i:nth-child(10) {
  animation-delay: 495ms;
}
.pdchart__bars i:nth-child(11) {
  animation-delay: 550ms;
}
.pdchart__bars i:nth-child(12) {
  animation-delay: 605ms;
}

/* The pay-list items sat below the body scale — lift the headings to the .h3
   step and the copy to the standard 16/26 so they read as feature points
   rather than captions. */
.pay__h {
  margin: 0 0 8px;
  font-size: clamp(21px, 1.7vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.pay__p {
  font-size: 17px;
  line-height: 28px;
}
.pay__row {
  gap: 18px;
}
.pay__list {
  gap: 30px;
}

@media (max-width: 640px) {
  .pay__h {
    font-size: 20px;
  }
  .pay__p {
    font-size: 16px;
    line-height: 26px;
  }
}

/* Icons were sized 24px inside a 52px tile — a lot of empty tint around a
   thin glyph, so they read as blocks rather than icons. Fill more of the
   tile and thicken the stroke so the shapes are legible. */

/* ── wallet-view cards: bars fill, figures count ──────────────────────────
   Released per card by .d3card.is-in — .dark3__grid is the reveal group, so
   its children carry the class. */
.d3bar i {
  width: 0 !important;
  transition: width 1.3s var(--reveal-ease) 0.15s;
}
.dark3.is-in .d3bar i,
.dark3__grid.is-in .d3bar i {
  width: var(--w, 0) !important;
}
.d3row:nth-child(1) .d3bar i {
  --w: 82%;
}
.d3row:nth-child(2) .d3bar i {
  --w: 38%;
}
.d3row:nth-child(3) .d3bar i {
  --w: 21%;
}

.d3row__amt,
.d3stat__v,
.d3cat__amt {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .d3bar i {
    transition: none;
  }
}

/* ── card-management widget (was h1-cardmgmt.avif) ────────────────────────
   Rebuilt as markup so the balance can count up — the flat asset couldn't.
   Composition follows the original: currency pill and face stack, balance,
   then account number and expiry. */
.cmgmt {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: 20px;
  padding: 26px 28px 28px;
  box-shadow: 0 18px 44px rgba(13, 7, 10, 0.1);
}
.cmgmt__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cmgmt__cur {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}
.cmgmt__flag {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: repeating-linear-gradient(#b22234 0 2px, #fff 2px 4px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  position: relative;
  overflow: hidden;
}
.cmgmt__flag::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 55%;
  height: 54%;
  background: #3c3b6e;
}
.cmgmt__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--positive);
}

.cmgmt__faces {
  display: flex;
  align-items: center;
}
.cmgmt__faces i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: linear-gradient(135deg, #cfc9f8, var(--accent));
}
.cmgmt__faces i + i,
.cmgmt__faces em {
  margin-left: -9px;
}
.cmgmt__faces em {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--accent-soft);
  color: var(--accent);
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
}

.cmgmt__label {
  margin: 30px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.cmgmt__value {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3vw, 40px);
  letter-spacing: -0.04em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.cmgmt__foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(13, 7, 10, 0.1);
}
.cmgmt__foot span {
  display: grid;
  gap: 5px;
}
.cmgmt__foot .is-right {
  text-align: right;
}
.cmgmt__foot i {
  font-style: normal;
  font-size: 12px;
  color: var(--muted-2);
}
.cmgmt__foot b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* currency flags on the balance card — the corridors this balance can reach */
.cmgmt__flags {
  display: flex;
  align-items: center;
}
.cmgmt__flags .cf {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  overflow: hidden;
  position: relative;
  flex: none;
}
.cmgmt__flags .cf + .cf,
.cmgmt__flags em {
  margin-left: -8px;
}
.cmgmt__flags em {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--accent-soft);
  color: var(--accent);
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  flex: none;
}

/* Philippines — blue over red with the white hoist triangle */
.cf--ph {
  background: linear-gradient(#0038a8 50%, #ce1126 50%);
}
.cf--ph::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 55%;
  background: var(--surface);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* Vietnam — yellow star on red */
.cf--vn {
  background: #da251d;
}
.cf--vn::after {
  content: "★";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffcd00;
  font-size: 13px;
  line-height: 1;
}
/* Thailand — five bands, double-height blue */
.cf--th {
  background: linear-gradient(
    #a51931 16.66%,
    #fff 16.66% 33.33%,
    #2d2a4a 33.33% 66.66%,
    #fff 66.66% 83.33%,
    #a51931 83.33%
  );
}
/* Indonesia — red over white */
.cf--id {
  background: linear-gradient(#ce1126 50%, #fff 50%);
}

/* ── bento widgets: chart, track and sparkline animate ────────────────────
   Released per card by .bcard.is-in — .bento is the reveal group, so its
   children carry the class. */
.bchart__bars i {
  height: 0;
  animation: bchartGrow 5s var(--reveal-ease) infinite;
}
.bchart__bars i:nth-child(1) {
  animation-delay: 0ms;
}
.bchart__bars i:nth-child(2) {
  animation-delay: 70ms;
}
.bchart__bars i:nth-child(3) {
  animation-delay: 140ms;
}
.bchart__bars i:nth-child(4) {
  animation-delay: 210ms;
}
.bchart__bars i:nth-child(5) {
  animation-delay: 280ms;
}
.bchart__bars i:nth-child(6) {
  animation-delay: 350ms;
}
.bchart__bars i:nth-child(7) {
  animation-delay: 420ms;
}

@keyframes bchartGrow {
  0% {
    height: 0;
  }
  26%,
  76% {
    height: var(--h);
  }
  100% {
    height: 0;
  }
}

.bchart__tip {
  opacity: 0;
  animation: bchartTip 5s var(--reveal-ease) infinite;
  animation-delay: 210ms;
}
@keyframes bchartTip {
  0%,
  12% {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }
  26%,
  72% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  86%,
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }
}

/* the conversion track fills once, with the figures */
.bstack__track i {
  width: 0;
  transition: width 1.4s var(--reveal-ease) 0.2s;
}
.bento__row.is-in .bstack__track i,
.bcard.is-in .bstack__track i {
  width: var(--w);
}

/* the rewards sparkline draws itself */
.bspark path {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  transition: stroke-dashoffset 1.8s var(--reveal-ease) 0.2s;
}
.bento__row.is-in .bspark path,
.bcard.is-in .bspark path {
  stroke-dashoffset: 0;
}

.bstack__amt,
.bstack__value,
.bspark__foot strong,
.bstack__legend b {
  font-variant-numeric: tabular-nums;
}
.bstack__legend b {
  font-weight: 500;
  color: var(--fg);
}

@media (prefers-reduced-motion: reduce) {
  .bchart__bars i {
    animation: none;
    height: var(--h);
  }
  .bchart__tip {
    animation: none;
    opacity: 1;
  }
  .bstack__track i {
    transition: none;
    width: var(--w);
  }
  .bspark path {
    transition: none;
    stroke-dashoffset: 0;
  }
}

/* All-in conversion cost bar: loop it on the same 5s cycle as the chart
   beside it, so both read as live rather than settling once and stopping. */
.bstack__track i {
  width: 0;
  transition: none;
  animation: bstackFill 5s var(--reveal-ease) infinite;
  animation-delay: 0.2s;
}
.bento__row.is-in .bstack__track i,
.bcard.is-in .bstack__track i {
  width: 0;
}

@keyframes bstackFill {
  0% {
    width: 0;
  }
  26%,
  76% {
    width: var(--w);
  }
  100% {
    width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bstack__track i {
    animation: none;
    width: var(--w);
  }
}

/* ── hero background zooms with the scroll ────────────────────────────────
   The panel itself can't scale (it would take the rounded corners and the
   clip with it), so the backdrop moves to its own layer behind everything.
   It pushes harder than the copy — 2.2× the base rate — so the background
   opens up as the content recedes, which is what reads as "zooming in". */
.p2-hero::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  background:
    radial-gradient(
      circle at 70% 18%,
      rgba(84, 62, 190, 0.42) 0%,
      transparent 58%
    ),
    radial-gradient(
      circle at 22% 76%,
      rgba(60, 52, 150, 0.3) 0%,
      transparent 62%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(120, 100, 255, 0.1) 0%,
      transparent 70%
    ),
    linear-gradient(160deg, #0a0818 0%, #05040e 55%, #0b0722 100%);
  transform: scale(calc(1 + (var(--zoom) - 1) * 2.2));
  transform-origin: 50% 38%;
  will-change: transform;
  pointer-events: none;
}

/* the ray drifts slowest of all, so the layers separate as you scroll */
.p2-hero__ray {
  transform: scale(calc(1 + (var(--zoom) - 1) * 0.3));
}

@media (prefers-reduced-motion: reduce) {
  .p2-hero::before,
  .p2-hero__ray {
    transform: none;
  }
}

/* ── hero copy pulls back as the background pushes in ─────────────────────
   The background opens up (2.2×) while the headline block scales *down* and
   fades, so scrolling reads as the camera dollying past the text into the
   scene rather than everything growing together. Inner is reset to 1 so the
   two children can move independently. */
.p2-hero__inner {
  transform: none;
  opacity: 1;
}

.p2-hero__copy {
  display: block;
  transform: scale(calc(1 - (var(--zoom) - 1) * 0.85));
  transform-origin: 50% 40%;
  opacity: var(--zfade);
  will-change: transform, opacity;
}

/* the collage recedes too, but less, so it trails the copy */
.p2-collage {
  transform: scale(calc(1 - (var(--zoom) - 1) * 0.35));
  transform-origin: 50% 30%;
  opacity: var(--zfade);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .p2-hero__copy,
  .p2-collage {
    transform: none;
    opacity: 1;
  }
}

/* ── background now zooms OUT on scroll ───────────────────────────────────
   Reverses the earlier push-in: the backdrop starts oversized and settles
   back as you scroll, so the scene pulls away while the copy recedes with
   it. The layer is bled 20% past the panel and never scales below 1, so no
   edge can appear at the corners as it shrinks. */
.p2-hero::before {
  inset: -20%;
  transform: scale(calc(1.25 - (var(--zoom) - 1) * 1.4));
  transform-origin: 50% 42%;
}

/* the orbits ease back with it rather than pushing the other way */
.p2-hero .hcoins {
  transform: scale(calc(1.06 - (var(--zoom) - 1) * 0.5));
}

@media (prefers-reduced-motion: reduce) {
  .p2-hero::before {
    transform: scale(1.25);
  }
  .p2-hero .hcoins {
    transform: none;
  }
}

/* Hero CTA sat tight under the lede — drop it down and keep it centred in
   the copy column regardless of the column's own alignment. */
.p2-hero__copy .btn {
  margin-top: 34px;
  align-self: center;
  margin-inline: auto;
}

@media (max-width: 640px) {
  .p2-hero__copy .btn {
    margin-top: 26px;
  }
}

/* The hero lede had `text-align: center` but its box was flush left in the
   720px copy column — 609px wide with zero side margins, so the whole
   paragraph sat 55px left of centre. Centre the box, not just the text. */
.p2-hero__copy .lede {
  margin-inline: auto;
  text-align: center;
}

/* Match Soltio's phone media: 572×717 portrait (0.798). The mockup source is
   landscape 4:3 with wide empty margins, so crop to that frame rather than
   letterboxing — the device fills the panel as the reference does. */
.fv11__media img {
  width: 100%;
  max-width: 572px;
  aspect-ratio: 572 / 717;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
  margin-inline: auto;
  display: block;
}
.fv11__media {
  display: grid;
  place-items: center;
}

/* ── floating action chips around the phone ───────────────────────────────
   Deposit / Send / Spend orbit the device on their own drifts, echoing the
   action row inside the app screen. Positioned as a share of the stage so
   they hold their spots as it scales. */
.fchip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px 10px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(13, 7, 10, 0.22);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--fg);
  white-space: nowrap;
  animation: fchipFloat 6s ease-in-out infinite;
}
.fchip i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.fchip i svg {
  width: 16px;
  height: 16px;
}

.fchip--deposit {
  left: 4%;
  top: 18%;
  animation-delay: 0s;
}
.fchip--send {
  right: 3%;
  top: 46%;
  animation-delay: -2s;
}
.fchip--spend {
  left: 8%;
  bottom: 14%;
  animation-delay: -4s;
}

/* the send chip reads as the outbound one */
.fchip--send i {
  background: rgba(37, 194, 110, 0.14);
  color: #14a85a;
}

@keyframes fchipFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@media (max-width: 980px) {
  .fchip {
    font-size: 12px;
    padding: 8px 13px 8px 8px;
    gap: 7px;
  }
  .fchip i {
    width: 25px;
    height: 25px;
  }
  .fchip i svg {
    width: 13px;
    height: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fchip {
    animation: none;
  }
}

/* Fourth chip — Earn. Slots into the right side above Send so the four
   spread evenly around the device rather than bunching on the left. */
.fchip--earn {
  right: 6%;
  top: 20%;
  animation-delay: -3s;
}
.fchip--earn i {
  background: rgba(214, 170, 60, 0.16);
  color: #b98f3c;
}

/* rebalance the other three now there are four */
.fchip--deposit {
  left: 3%;
  top: 16%;
}
.fchip--send {
  right: 2%;
  top: 50%;
}
.fchip--spend {
  left: 7%;
  bottom: 13%;
}

/* Chip icons were 30px discs with 16px glyphs — too small to read against
   the phone. Scale the discs and glyphs up, and grow the chip around them. */
.fchip {
  gap: 12px;
  padding: 12px 22px 12px 12px;
  font-size: 16px;
}
.fchip i {
  width: 42px;
  height: 42px;
}
.fchip i svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 980px) {
  .fchip {
    font-size: 14px;
    padding: 9px 16px 9px 9px;
    gap: 9px;
  }
  .fchip i {
    width: 34px;
    height: 34px;
  }
  .fchip i svg {
    width: 18px;
    height: 18px;
  }
}

/* The chips grew but kept their old anchor points, so Earn crowded the
   payout toast and Send sat close under it. Push them out toward the stage
   corners and drop the toast down so nothing clusters. */
.fchip--deposit {
  left: -2%;
  top: 10%;
  right: auto;
  bottom: auto;
}
.fchip--earn {
  right: -3%;
  top: 8%;
  left: auto;
  bottom: auto;
}
.fchip--send {
  right: -4%;
  top: 58%;
  left: auto;
  bottom: auto;
}
.fchip--spend {
  left: -1%;
  bottom: 8%;
  right: auto;
  top: auto;
}

/* the toast moves to the middle-right, clear of Earn above it */
.fv11__toast {
  right: 12%;
  top: 36%;
}

/* the stage can spill the chips now they sit on its edges */
.fv11__media {
  overflow: visible;
}
.fv11__media img {
  border-radius: var(--r-card);
}

@media (max-width: 980px) {
  .fchip--deposit {
    left: 0;
    top: 8%;
  }
  .fchip--earn {
    right: 0;
    top: 6%;
  }
  .fchip--send {
    right: 0;
    top: 60%;
  }
  .fchip--spend {
    left: 0;
    bottom: 6%;
  }
  .fv11__toast {
    right: 8%;
    top: 34%;
  }
}

/* ── phone mockup: float, tilt and a screen sweep ─────────────────────────
   The PNG's contents can't animate, so the device does: a slow rise-and-tilt
   with a highlight passing across the screen, plus a lift on hover. */
.fv11__media {
  perspective: 1400px;
}

.fv11__media img {
  position: relative;
  z-index: 1;
  transform-origin: 50% 60%;
  animation: phoneFloat 9s ease-in-out infinite;
  transition:
    transform var(--reveal-dur) var(--ease),
    filter var(--reveal-dur) var(--ease);
  filter: drop-shadow(0 26px 50px rgba(13, 7, 10, 0.3));
}

@keyframes phoneFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-18px) rotate(-0.8deg) scale(1.012);
  }
}

/* highlight travelling across the screen, clipped to the media frame */
.fv11__media::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 8%;
  top: 4%;
  width: 84%;
  height: 92%;
  border-radius: 28px;
  background: linear-gradient(
    104deg,
    transparent 40%,
    rgba(255, 255, 255, 0.3) 49%,
    transparent 58%
  );
  transform: translateX(-130%);
  animation: phoneSweep 9s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes phoneSweep {
  0%,
  58% {
    transform: translateX(-130%);
  }
  84%,
  100% {
    transform: translateX(130%);
  }
}

.fv11__media:hover img {
  animation-play-state: paused;
  transform: translateY(-24px) rotateX(4deg) rotateY(-5deg) scale(1.03);
  filter: drop-shadow(0 40px 70px rgba(13, 7, 10, 0.42));
}

@media (prefers-reduced-motion: reduce) {
  .fv11__media img {
    animation: none;
  }
  .fv11__media::after {
    animation: none;
    opacity: 0;
  }
}

/* The sweep lived on .fv11__media, which must stay overflow:visible so the
   chips can overhang — so the highlight travelled out over the body copy.
   Move it into a clipping frame around the image instead. */
.fv11__media::after {
  content: none;
}

.fv11__screen {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-card);
  width: 100%;
  max-width: 572px;
  margin-inline: auto;
}
.fv11__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    104deg,
    transparent 40%,
    rgba(255, 255, 255, 0.28) 49%,
    transparent 58%
  );
  transform: translateX(-130%);
  animation: phoneSweep 9s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  .fv11__screen::after {
    animation: none;
    opacity: 0;
  }
}

/* ── floating stat beside the phone ───────────────────────────────────────
   The mockup's own figures are baked into the PNG, so this sits alongside it
   as a live panel: the total counts up, the delta counts with it, and the
   mini bars fill on a loop. */
.fstat {
  position: absolute;
  z-index: 4;
  left: -6%;
  top: 40%;
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 20px 44px rgba(13, 7, 10, 0.26);
  animation: fchipFloat 7s ease-in-out infinite;
  animation-delay: -1s;
}
.fstat__label {
  font-size: 12px;
  color: var(--muted);
}
.fstat__v {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.fstat__row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.fstat__bar {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 30px;
}
.fstat__bar b {
  width: 7px;
  height: var(--h);
  border-radius: 3px;
  background: rgba(13, 7, 10, 0.14);
  animation: fstatGrow 4.5s var(--reveal-ease) infinite;
}
.fstat__bar b.is-on {
  background: var(--accent);
}
.fstat__bar b:nth-child(2) {
  animation-delay: 0.08s;
}
.fstat__bar b:nth-child(3) {
  animation-delay: 0.16s;
}
.fstat__bar b:nth-child(4) {
  animation-delay: 0.24s;
}
.fstat__bar b:nth-child(5) {
  animation-delay: 0.32s;
}

@keyframes fstatGrow {
  0% {
    height: 0;
  }
  26%,
  74% {
    height: var(--h);
  }
  100% {
    height: 0;
  }
}

.fstat__delta {
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: #14a85a;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 980px) {
  .fstat {
    left: 0;
    top: 44%;
    padding: 13px 15px;
  }
  .fstat__v {
    font-size: 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fstat {
    animation: none;
  }
  .fstat__bar b {
    animation: none;
    height: var(--h);
  }
}

/* The lime eyebrow chips are gone from every page — the labels they styled
   ("Waitlist open", "Cryptocard", "How it works" and the rest) were removed,
   so the override that made them lime went with them. The base .eyebrow rule
   from the template is left alone in case the class is ever used again. */

/* The mockup carries its intrinsic 838×1050, which overran the media frame
   and clipped the device at the bottom. Fit it to the box instead. */
.p2-split__media img[src*="h2-phone-app"] {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* The overview panel framed a landscape composition around the stacked cards.
   With those gone the phone render stands alone, so give the panel a vertical
   frame sized to the artwork's own 917:1200 and let it fill. */
.overview__panel {
  aspect-ratio: 917 / 1200;
  max-width: 560px;
  margin-inline: auto;
}
.overview__shot {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}

/* An earlier rule pins .overview__shot to 323px / max-width 70%, which kept
   the render at 336×653 inside a 560-wide panel — the `contain` fit was
   working against a box far smaller than the frame. Release both. */
.overview__shot {
  width: 100%;
  max-width: 100%;
  height: 100%;
}

/* Light purple panel behind the app render, replacing the black. */
.overview__panel {
  background: linear-gradient(160deg, #e8e3fb 0%, #d9d1f7 55%, #f1edfd 100%);
}

/* The "Payment sent" chip was white text on 10% white, built for the black
   panel — invisible on light purple. Give it a solid card treatment. */
.overview__float {
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 12px 30px rgba(13, 7, 10, 0.14);
}
.overview__float strong {
  color: var(--fg);
}
.overview__float em {
  color: var(--muted);
}

/* Dark purple gradient panel instead of the light one. */
.overview__panel {
  background:
    radial-gradient(
      120% 80% at 78% 14%,
      rgba(139, 108, 255, 0.45) 0%,
      transparent 58%
    ),
    radial-gradient(
      90% 70% at 16% 88%,
      rgba(96, 66, 210, 0.38) 0%,
      transparent 62%
    ),
    linear-gradient(158deg, #2b1c63 0%, #1a1040 48%, #120b2e 100%);
}

/* the chip goes back to glass now the panel is dark again */
.overview__float {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(8px);
}
.overview__float strong {
  color: #fff;
}
.overview__float em {
  color: rgba(255, 255, 255, 0.62);
}

/* The chip sat at 6%/7%, right over the SmashPay logo in the app header.
   Move it clear to the left edge, lower down beside the balance figure, and
   give it a drift so it reads as floating over the render. */
.overview__float {
  left: -4%;
  top: 26%;
  animation: ovFloat 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes ovFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* let it overhang the panel edge rather than being clipped by it */
.overview__panel {
  overflow: visible;
}
.overview__shot {
  border-radius: 18px;
}

@media (max-width: 640px) {
  .overview__float {
    left: 0;
    top: 22%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .overview__float {
    animation: none;
  }
}

/* At 26% it cleared the logo but sat across the balance figure — the phone
   screen's most important line. Drop it to the lower-left, level with the
   card stack, where the panel background is clear. */
.overview__float {
  left: -8%;
  top: 60%;
}

/* Measured from the artwork: inside phone-screen.png the card runs from 49.3%
   to 97.4% of the image height, which lands at 49.4%-92.5% of the panel. The
   chip is 15.3% of the panel tall, so there is no gap beneath the card to drop
   it into — the card reaches the bottom. Moving it down puts it over the
   card's lower-left instead, which is the empty part: clear of the SMASHX
   wordmark and the Visa mark along the top, and below the mass of the X
   monogram. */
@media (max-width: 640px) {
  .overview__float {
    left: -2%;
    top: 76%;
  }
}

/* The chip is sized for a 560px panel. On a phone the panel is 350px, so at
   full size it measured 204px wide — 58% of the panel — and sat across 11% of
   the card render, which is the thing it is supposed to be annotating. Scale
   the whole chip down rather than moving it: the position is what makes it
   read as floating over the card, and that is worth keeping.

   640, not 700: .overview__panel is max-width 560px and only starts shrinking
   below roughly 620px of viewport. Above that the panel is already full size,
   the chip covers 3% of the render rather than 11%, and shrinking it there
   just makes it look undersized. This matches the breakpoint the chip's own
   position rule already uses. */
@media (max-width: 640px) {
  .overview__float {
    gap: 8px;
    padding: 8px 12px;
  }

  .overview__float strong {
    font-size: 11.5px;
  }

  .overview__float em {
    font-size: 10px;
  }

  .overview__float-dot {
    width: 7px;
    height: 7px;
  }
}

/* ── staking & rewards widget ─────────────────────────────────────────────
   Replaces the two flat f6 images with markup, so the balance, the split
   between staked and liquid, and the rewards figures are live text that can
   count up — and the sparkline can draw. */
.stakew {
  margin-top: 26px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-card);
  padding: 26px;
}
.stakew__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.stakew__coin {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: #fff;
}
.stakew__coin img {
  width: 26px;
  height: 26px;
  max-width: none;
}
.stakew__apy {
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: rgba(37, 194, 110, 0.2);
  color: #57da97;
  font-size: 13px;
  font-weight: 600;
}

.stakew__label {
  margin: 24px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.stakew__value {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3vw, 40px);
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.stakew__meter {
  margin-top: 18px;
}
.stakew__meter i {
  display: block;
  height: 8px;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #7ec9a2, var(--accent));
  transition: width 1.4s var(--reveal-ease) 0.2s;
}
.darkfeature .is-in .stakew__meter i
{
  width: var(--w);
}
.stakew__meter span {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.stakew__meter b {
  font-weight: 500;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stakew__meter em {
  font-style: normal;
}

.stakew__rows {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}
.stakew__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}
.stakew__row b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stakew__row b.is-up {
  color: #57da97;
}

.stakew__spark {
  margin-top: 20px;
  color: #57da97;
}
.stakew__spark svg {
  display: block;
  width: 100%;
  height: 64px;
}
.stakew__spark path {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  transition: stroke-dashoffset 1.8s var(--reveal-ease) 0.3s;
}
.darkfeature .is-in .stakew__spark path
{
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .stakew__meter i {
    transition: none;
    width: var(--w);
  }
  .stakew__spark path {
    transition: none;
    stroke-dashoffset: 0;
  }
}

/* ── staking widget: fitted to the card, with a live input ────────────────
   Sized so it fills the fbox rather than floating in it, and the amount is
   an editable field the visitor can type into. */
.stakew {
  margin-top: 22px;
  padding: 22px;
}

.stakew__field {
  display: block;
  margin-top: 20px;
}
.stakew__label {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.stakew__input {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.stakew__input:focus-within {
  border-color: rgba(126, 201, 162, 0.8);
  background: rgba(255, 255, 255, 0.1);
}
.stakew__input i {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px);
  color: rgba(255, 255, 255, 0.6);
}
.stakew__input input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stakew__input input:focus {
  outline: none;
}

.stakew__meter {
  margin-top: 16px;
}
.stakew__meter i {
  transition: width var(--reveal-dur) var(--ease);
}
.stakew__rows {
  margin-top: 16px;
}
.stakew__note {
  margin: auto 0 0;
  padding-top: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
}

/* ── "users earning yield" card, rebuilt from f6-profile / f6-customers ───
   Markup rather than two flat images, so the earned figures count up and the
   rows can stagger in. */
.ystake {
  position: relative;
  margin-top: 26px;
  display: grid;
  gap: 16px;
}

.ystake__hero {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(120deg, #b6f03c, #8fd91f);
  color: var(--fg);
  animation: yheroFloat 6s ease-in-out infinite;
}
.ystake__av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(140deg, #f5c79a, #c98b5a);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.ystake__who {
  display: grid;
}
.ystake__who b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.ystake__who i {
  font-style: normal;
  font-size: 12px;
  color: rgba(13, 7, 10, 0.62);
}
.ystake__earned {
  display: grid;
  justify-items: end;
}
.ystake__earned b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ystake__earned i {
  font-style: normal;
  font-size: 11px;
  color: rgba(13, 7, 10, 0.6);
}

@keyframes yheroFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.ystake__panel {
  background: var(--surface);
  border-radius: 16px;
  padding: 18px;
}
.ystake__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ystake__head span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.ystake__head a {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
}

.ystake__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.yrow {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(13, 7, 10, 0.08);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease);
}
.yrow:last-child {
  border-bottom: 0;
}
.darkfeature .is-in .yrow
{
  opacity: 1;
  transform: none;
}
.yrow:nth-child(2) {
  transition-delay: 0.09s;
}
.yrow:nth-child(3) {
  transition-delay: 0.18s;
}
.yrow:nth-child(4) {
  transition-delay: 0.27s;
}

.yrow__av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(140deg, #cfc9f8, #8b7ff0);
}
.yrow:nth-child(2) .yrow__av {
  background: linear-gradient(140deg, #f5c79a, #d08b57);
}
.yrow:nth-child(3) .yrow__av {
  background: linear-gradient(140deg, #9fd8bd, #4fa97f);
}
.yrow:nth-child(4) .yrow__av {
  background: linear-gradient(140deg, #f3b7c6, #d1697f);
}

.yrow__who {
  display: grid;
  min-width: 0;
}
.yrow__who b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.yrow__who i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted-2);
  overflow: hidden;
  text-overflow: ellipsis;
}
.yrow__amt {
  display: grid;
  justify-items: end;
}
.yrow__amt b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.yrow__amt i {
  font-style: normal;
  font-size: 11px;
  color: var(--muted-2);
}

@media (prefers-reduced-motion: reduce) {
  .ystake__hero {
    animation: none;
  }
  .yrow {
    opacity: 1;
    transform: none;
  }
}

/* ── "Start earning rewards" action on the staking widget ─────────────────
   Full-width so it reads as the widget's primary action, in the same green
   as the yield figures rather than the site accent. */
.stakew__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--r-pill);
  background: linear-gradient(120deg, #b6f03c, #8fd91f);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
  box-shadow: 0 10px 26px rgba(143, 217, 31, 0.22);
}
.stakew__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(143, 217, 31, 0.34);
}
.stakew__cta-badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  transition: transform var(--dur) var(--ease);
}
.stakew__cta-badge svg {
  width: 14px;
  height: 14px;
}
.stakew__cta:hover .stakew__cta-badge {
  transform: rotate(45deg);
}

.stakew__note {
  padding-top: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .stakew__cta:hover {
    transform: none;
  }
}

/* White CTA instead of the green fill. */
.stakew__cta {
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}
.stakew__cta:hover {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
}

/* ── currency figures roll up ─────────────────────────────────────────────
   Two slots per row, stacked in a fixed-height shell: the outgoing value
   slides up and out while the incoming one rises from below into its place. */
.crow__bal .roll {
  position: relative;
  display: block;
  overflow: hidden;
  height: 1.35em;
  line-height: 1.35em;
}
.crow__bal .roll__v {
  position: absolute;
  inset: 0;
  display: block;
  white-space: nowrap;
  transform: translateY(0);
  opacity: 1;
  transition:
    transform var(--reveal-dur) var(--ease),
    opacity var(--reveal-dur) var(--ease);
}
/* waiting below the shell */
.crow__bal .roll__v--under {
  transform: translateY(105%);
  opacity: 0;
  transition: none;
}
/* leaving through the top */
.crow__bal .roll__v.is-out {
  transform: translateY(-105%);
  opacity: 0;
}

.crow__bal strong {
  font-variant-numeric: tabular-nums;
}

/* The figures were clipping mid-roll — the shell is overflow:hidden and the
   text had nowhere to go. Right-align and give it the row's full width. */
.crow__bal .roll {
  width: 100%;
  text-align: right;
}
.crow__bal .roll__v {
  text-align: right;
}

/* `width: 100%` sized the shell to the balance column, which is narrower than
   the widest value — so overflow:hidden was cutting the digits off. Let it
   size to its content instead, and keep the column from squeezing it. */
.crow__bal .roll {
  width: auto;
  min-width: max-content;
}
.crow__bal {
  min-width: max-content;
}

/* the sizer keeps the shell wide enough for the widest value it will show */
.crow__bal .roll__size {
  display: block;
  visibility: hidden;
  white-space: nowrap;
}
.crow__bal .roll {
  min-width: 0;
}

/* ══ news / blog-post (soltio blog-post layout) ═══════════════════════════ */

.posthero {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: #000;
  background-image: url("/assets/h1-herobg.svg");
  background-size: cover;
  background-position: 50% 50%;
  margin-inline: var(--gutter);
  padding: 150px var(--gutter) 110px;
  display: grid;
  place-items: center;
  text-align: center;
}
.posthero__ray {
  position: absolute;
  left: 0;
  top: 0;
  width: 40%;
  height: 73%;
  pointer-events: none;
}
.posthero__inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
}
.posthero__date {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.posthero__date svg {
  width: 16px;
  height: 16px;
}
.posthero__h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 3.8vw, 54px);
  line-height: 1.16;
  text-wrap: balance;
}

.postlead {
  margin: -70px auto 0;
  max-width: var(--content);
  position: relative;
  z-index: 3;
}
.postlead img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}

.post__grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}
.post__author {
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 110px;
}
.post__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(140deg, #cfc9f8, var(--accent));
}
.post__by {
  display: grid;
}
.post__by b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.post__by i {
  font-style: normal;
  font-size: 13px;
  color: var(--muted);
}

.post__body {
  max-width: 720px;
}
.post__h2 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.post__h3 {
  margin: 40px 0 14px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.post__body p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 30px;
  color: var(--text);
}
.post__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 34px 0;
}
.post__pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-card);
  aspect-ratio: 4 / 3;
}
.post__list {
  margin: 0 0 18px;
  padding-left: 22px;
}
.post__list li {
  margin-bottom: 12px;
  font-size: 17px;
  line-height: 30px;
  color: var(--text);
}
.post__list b {
  font-weight: 500;
  color: var(--fg);
}

/* article cards */
.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 44px;
}
.ncard {
  display: grid;
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.ncard:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(13, 7, 10, 0.14);
}
.ncard__media {
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}
.ncard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ncard__date {
  display: block;
  padding: 20px 22px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ncard__t {
  display: block;
  padding: 10px 22px 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.ncard__by {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 22px 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(13, 7, 10, 0.1);
  font-size: 14px;
  color: var(--text);
}
.ncard__by i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(140deg, #f3b7c6, #d1697f);
}

@media (max-width: 980px) {
  .post__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .post__author {
    position: static;
  }
  .posts {
    grid-template-columns: minmax(0, 1fr);
  }
  .postlead {
    margin-top: -40px;
  }
  .post__pair {
    grid-template-columns: 1fr;
  }
}

/* ══ waitlist ═════════════════════════════════════════════════════════════ */

.wlhero {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: #000;
  background-image: url("/assets/h1-herobg.svg");
  background-size: cover;
  background-position: 50% 50%;
  margin-inline: var(--gutter);
  padding: 140px var(--gutter) 96px;
  display: grid;
  place-items: center;
  text-align: center;
}
.wlhero__ray {
  position: absolute;
  left: 0;
  top: 0;
  width: 40%;
  height: 73%;
  pointer-events: none;
}
.wlhero__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
}
.wlhero__h1 {
  margin: 20px 0 0;
  color: #fff;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.14;
}
.wlhero__lede {
  margin: 18px auto 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.7);
}

.wl__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 70px;
  align-items: start;
}

.wl__form {
  display: grid;
  gap: 20px;
}
.wl__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.wl__field {
  display: grid;
  gap: 8px;
}
.wl__field label {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
}
.wl__field label span {
  font-weight: 400;
  color: var(--muted-2);
}
.wl__field input,
.wl__field select {
  width: 100%;
  padding: 15px 16px;
  border-radius: 12px;
  border: 1px solid rgba(13, 7, 10, 0.16);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.wl__field input:focus,
.wl__field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(84, 98, 230, 0.16);
}

.wl__consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 4px;
}
.wl__consent input {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--accent);
}
.wl__consent span {
  font-size: 14px;
  line-height: 23px;
  color: var(--text);
}

.wl__submit {
  justify-self: start;
  margin-top: 6px;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
}
.wl__note {
  margin: 0;
  font-size: 13px;
  line-height: 21px;
  color: var(--muted);
}
.wl__note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.wl__side {
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 34px;
}
.wl__sh {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.wl__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.wl__list li {
  font-size: 15px;
  line-height: 24px;
  color: var(--text);
}
.wl__list b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 4px;
}
.wl__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 26px 0;
}
.wl__facts div {
  background: var(--surface);
  border-radius: 14px;
  padding: 16px 18px;
}
.wl__facts b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.wl__facts i {
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}
.wl__fine {
  margin: 0;
  font-size: 12px;
  line-height: 19px;
  color: var(--muted);
}

@media (max-width: 900px) {
  .wl__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .wl__row {
    grid-template-columns: 1fr;
  }
}

/* ══ legal & compliance — accordion (soltio rt-faq-v1 style) ══════════════ */
.lq {
  padding: 90px 0 110px;
}

/* ── /legal, split into a page per document ─────────────────────────────────
   Was one page carrying all eight, which meant scrolling past 15,000 words to
   reach the one you wanted. The sidebar is the whole point of the split, so it
   sticks; on a phone it becomes a scrollable row above the text rather than a
   column you have to get past. Type is untouched — same families, sizes and
   colours as the single-page version had. */
.lqpage {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 56px;
  /* The nav is fixed and its underside sits at 90px. There is no hero on a
     document page to push the content down, so the padding has to clear the
     nav itself or the title renders behind it. */
  padding: 130px 0 110px;
  align-items: start;
}
.lqpage__body {
  min-width: 0;
}
.lqside {
  position: sticky;
  top: 96px;
}
.lqside__label {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, rgba(13, 7, 10, 0.55));
}
.lqside__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid rgba(13, 7, 10, 0.12);
}
.lqside__list a {
  display: block;
  padding: 9px 0 9px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 1.35;
  color: var(--fg);
  text-decoration: none;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.lqside__list a:hover {
  color: var(--ink);
  border-left-color: rgba(13, 7, 10, 0.3);
}
.lqside__list .is-here a {
  font-weight: 600;
  color: var(--ink);
  border-left-color: var(--ink);
}

/* Each document in the sidebar opens to show its own sections. The current
   document starts open; the rest are one click from their contents without
   leaving the page you are on, which is the point -- you usually want to know
   whether the clause you are after is in the Terms or the Disclosures before
   you commit to loading either. */
.lqside__doc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0 9px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 1.35;
  color: var(--fg);
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.lqside__doc > summary::-webkit-details-marker {
  display: none;
}
.lqside__doc > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.55;
  transition: transform var(--dur) var(--ease);
}
.lqside__doc[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.lqside__doc > summary:hover {
  color: var(--ink);
  border-left-color: rgba(13, 7, 10, 0.3);
}
.lqside__list .is-here .lqside__doc > summary {
  font-weight: 600;
  color: var(--ink);
  border-left-color: var(--ink);
}
.lqside__secs {
  margin: 0 0 8px;
  padding: 0 0 0 16px;
  list-style: none;
}
.lqside__secs a {
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--muted, rgba(13, 7, 10, 0.55));
  border-left: 0;
  margin-left: 0;
}
.lqside__secs a:hover {
  color: var(--ink);
  border-left-color: transparent;
}
.lqside__open a {
  font-weight: 600;
  color: var(--ink);
}
.lqside__list .lqside__flat {
  display: none;
}

/* /legal itself: the eight documents as cards, nothing to scroll past. */
.lqindex {
  padding: 60px 0 110px;
}
.lqgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.lqcard {
  display: block;
  padding: 22px 24px;
  border: 1px solid rgba(13, 7, 10, 0.12);
  border-radius: 14px;
  text-decoration: none;
  background: var(--surface);
  transition:
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.lqcard:hover {
  border-color: rgba(13, 7, 10, 0.32);
  transform: translateY(-2px);
}
.lqcard__t {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.lqcard__s {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted, rgba(13, 7, 10, 0.6));
}

@media (max-width: 860px) {
  .lqpage {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 46px;
  }
  .lqside {
    position: static;
  }
  .lqside__list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    border-left: 0;
    border-bottom: 1px solid rgba(13, 7, 10, 0.12);
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .lqside__list a {
    white-space: nowrap;
    padding: 8px 12px;
    margin-left: 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
  }
  .lqside__list .is-here a {
    border-left: 0;
    border-bottom-color: var(--ink);
  }
  /* The row is horizontal here; a disclosure that opens downward inside it
     would push the document off the screen. Phones get the plain link. */
  .lqside__doc {
    display: none;
  }
  .lqside__list .lqside__flat {
    display: block;
  }
}

.lq__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 34px;
  margin-bottom: 46px;
  border-bottom: 1px solid rgba(13, 7, 10, 0.12);
}
.lq__nav a {
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.lq__nav a:hover {
  background: var(--ink);
  color: #fff;
}

.lq__group {
  scroll-margin-top: 96px;
}
.lq__group + .lq__group {
  margin-top: 80px;
}
.lq__head {
  max-width: 60ch;
  margin-bottom: 26px;
}
.lq__h {
  margin: 0;
}
.lq__sub {
  margin: 12px 0 0;
}

.lq__list {
  border-top: 1px solid rgba(13, 7, 10, 0.12);
}
.lq__item {
  border-bottom: 1px solid rgba(13, 7, 10, 0.12);
}
.lq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.lq__item summary::-webkit-details-marker {
  display: none;
}
.lq__item summary::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 4px;
  background:
    linear-gradient(var(--ink), var(--ink)) center/2px 14px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center/14px 2px no-repeat;
  transition: transform var(--dur) var(--ease);
}
.lq__item[open] summary::after {
  transform: rotate(45deg);
}
.lq__item p {
  margin: 0;
  padding: 0 60px 28px 0;
  font-size: 16px;
  line-height: 28px;
  color: var(--text);
}

/* A generated document's section body. The Membership agreement has one
   paragraph per clause, so .lq__item p could carry its own bottom padding;
   the imported documents have twenty, and twenty lots of 28px inside one
   open section reads as twenty separate answers. The padding moves to the
   wrapper and the paragraphs get ordinary spacing between them. */
.lq__secbody {
  padding: 0 60px 28px 0;
}
.lq__secbody p {
  padding: 0;
}
.lq__secbody p + p,
.lq__secbody .lq__sub-h,
.lq__secbody .lq__row {
  margin-top: 14px;
}
.lq__secbody .lq__li {
  margin-top: 6px;
  padding-left: 18px;
}

/* The contents list above the sections, each entry a link to one. */
/* The Fee Schedule. Upstream ships these as <dt>/<dd> pairs -- a name and a
   price -- and they were being flattened into "Free — $0 / month" sentences,
   which is the one shape a price list must not have. The question this
   document gets asked is what something costs, and the answer should be a
   column you run your eye down rather than twelve lines you read. */
.lqtab {
  width: 100%;
  margin: 0 0 8px;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 24px;
}
.lqtab th,
.lqtab td {
  padding: 11px 0;
  border-bottom: 1px solid rgba(13, 7, 10, 0.1);
  vertical-align: baseline;
}
.lqtab th {
  text-align: left;
  font-weight: 400;
  color: var(--text);
  padding-right: 20px;
}
.lqtab td {
  text-align: right;
  font-weight: 500;
  color: var(--ink);
  /* Tabular figures so the prices line up on the decimal rather than
     drifting with the width of each digit. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* A value too long to sit on one line with its label -- "no issuance fee; the
   metal card itself is $99" -- wraps instead of forcing a scrollbar. */
.lqtab td:only-of-type:not(:first-child) {
  white-space: normal;
}
.lqtab tr:last-child th,
.lqtab tr:last-child td {
  border-bottom: 0;
}
.lq__sub-h + .lqtab {
  margin-top: 2px;
}

.lq__toc {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.lq__toc:hover {
  border-bottom-color: currentColor;
}

/* Opens every section at once, for reading straight through, printing, or
   searching the page with the browser's own find. Without it, ctrl-F misses
   everything inside a closed <details> in most browsers. */
.lq__all {
  margin: 0 0 26px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (max-width: 640px) {
  .lq__secbody {
    padding-right: 0;
  }
}

@media (max-width: 640px) {
  .lq {
    padding: 60px 0 80px;
  }
  .lq__group + .lq__group {
    margin-top: 56px;
  }
  .lq__item p {
    padding-right: 0;
  }
}

/* ══ contact (soltio rt-contact-v2) ═══════════════════════════════════════
   Info strip across the top, then a two-column split: copy left, form right,
   divided by a hairline as in the template. */
.ci {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-bottom: 44px;
  margin-bottom: 54px;
  border-bottom: 1px solid rgba(13, 7, 10, 0.12);
}
.ci__item {
  display: grid;
  gap: 8px;
}
.ci__k {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ci__v {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: -0.02em;
  color: var(--fg);
  text-decoration: none;
}
a.ci__v:hover {
  color: var(--accent);
}

.cmain {
  display: grid;
  grid-template-columns: minmax(0, 494fr) minmax(0, 600fr);
  gap: 70px;
  align-items: start;
}
.cmain__side {
  position: relative;
}
.cmain__h {
  margin: 0;
  max-width: 14ch;
}
.cmain__lede {
  margin: 18px 0 0;
  max-width: 44ch;
}
.cmain__rows {
  display: grid;
  gap: 18px;
  margin-top: 34px;
}
.cmain__rows > div {
  padding-top: 18px;
  border-top: 1px solid rgba(13, 7, 10, 0.12);
}
.cmain__rows b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.cmain__rows i {
  font-style: normal;
  font-size: 14px;
  line-height: 23px;
  color: var(--text);
}

.cmain__social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}
.cmain__social a {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.cmain__social a:hover {
  background: var(--ink);
  color: #fff;
}

/* form — reuses the waitlist field styling */
.cform {
  display: grid;
  gap: 20px;
}
/* Personal or business, asked first because it decides who picks the enquiry
   up and what the rest of the form is worth asking. Two cards rather than a
   select: there are only two answers, and a select hides one of them behind a
   click for no reason. */
.cform__who {
  border: 0;
  margin: 0;
  padding: 0;
}
.cform__who legend {
  padding: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
}
.cform__whoopts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cform__whoopts label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.16));
  border-radius: 14px;
  cursor: pointer;
}
.cform__whoopts label:hover {
  border-color: var(--line-strong, rgba(255, 255, 255, 0.34));
}
/* The selected card is outlined, not only tinted — the state has to survive
   being read by someone who cannot separate the two colours. */
.cform__whoopts label:has(input:checked) {
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
}
.cform__whoopts label:focus-within {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.cform__whoopts input {
  margin-top: 3px;
  flex: 0 0 auto;
}
.cform__whoopts span {
  display: grid;
  gap: 2px;
}
.cform__whoopts b {
  font-size: 15px;
}
.cform__whoopts i {
  font-style: normal;
  font-size: 13px;
  opacity: 0.7;
}
@media (max-width: 560px) {
  .cform__whoopts { grid-template-columns: 1fr; }
}

/* The honeypot. Hidden from sight and from assistive technology, but not with
   display:none or hidden — some bots skip those and fill everything else, which
   defeats the point. Taken out of the layout and out of the tab order instead. */
.cform__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* The submit result. Empty until there is something to say, so it takes no
   space on a form nobody has sent yet. */
.cform__status:empty {
  display: none;
}
.cform__status.is-ok {
  color: var(--ok, #1f9d55);
}
.cform__status.is-err {
  color: var(--err, #c0392b);
}
.cform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.cform textarea {
  width: 100%;
  padding: 15px 16px;
  border-radius: 12px;
  border: 1px solid rgba(13, 7, 10, 0.16);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg);
  resize: vertical;
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.cform textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(84, 98, 230, 0.16);
}
.wl__consent a {
  color: var(--accent);
}

@media (max-width: 980px) {
  .cmain {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .ci {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .cform__row {
    grid-template-columns: 1fr;
  }
}

/* ══ about (soltio rt-counter-v1 + rt-service-v2) ═════════════════════════ */
.ab__intro {
  max-width: 780px;
}
.ab__h {
  margin: 16px 0 0;
}
.ab__lede {
  margin: 20px 0 0;
  max-width: 64ch;
}

.ab__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid rgba(13, 7, 10, 0.12);
}
.ab__stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg);
}
.ab__stat span {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.ab__stat i {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 14px;
  line-height: 23px;
  color: var(--text);
}

.ab__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 50px;
}
.ab__card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 30px;
  min-height: 220px;
}
.ab__card h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.ab__card p {
  margin: 0;
  font-size: 15px;
  line-height: 25px;
  color: var(--text);
}

.faq__answer a {
  color: var(--accent);
}

@media (max-width: 1000px) {
  .ab__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ab__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .ab__stats,
  .ab__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ab__card {
    min-height: 0;
  }
}

/* The FAQ styling is scoped under a `.faq` wrapper, which the About and
   How-it-works pages don't use — their accordions were rendering as raw
   <details> with the browser's default triangle. Match on the list itself
   so any page can drop in a `.faq__list` and get the styled accordion. */
.faq__list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.faq__list summary::-webkit-details-marker {
  display: none;
}
.faq__list summary::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 6px;
  background:
    linear-gradient(var(--ink), var(--ink)) center/2px 14px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center/14px 2px no-repeat;
  transition: transform var(--dur) var(--ease);
}
.faq__list details[open] summary::after {
  transform: rotate(45deg);
}
.faq__list .faq__item {
  border-bottom: 1px solid rgba(13, 7, 10, 0.12);
}
.faq__list .faq__item:first-child {
  border-top: 1px solid rgba(13, 7, 10, 0.12);
}
.faq__list .faq__answer {
  margin: 0;
  padding: 0 60px 30px 0;
  font-size: 16px;
  line-height: 28px;
  color: var(--text);
}

@media (max-width: 720px) {
  .faq__list summary {
    font-size: 19px;
    padding: 24px 0;
  }
  .faq__list .faq__answer {
    padding-right: 0;
  }
}

/* ── corridor links in the footer, with flags ─────────────────────────────
   Flags are drawn in CSS rather than fetched — at 18px a circular crop reads
   as the flag's colour signature and stays sharp at any density. */
.flink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fflag {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* Vietnam — yellow star on red */
.fflag--vn {
  background: #da251d;
}
.fflag--vn::after {
  content: "★";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffcd00;
  font-size: 10px;
  line-height: 1;
}
/* Indonesia — red over white */
.fflag--id {
  background: linear-gradient(#ce1126 50%, #fff 50%);
}
/* Thailand — five bands, double-height blue */
.fflag--th {
  background: linear-gradient(
    #a51931 16.66%,
    #fff 16.66% 33.33%,
    #2d2a4a 33.33% 66.66%,
    #fff 66.66% 83.33%,
    #a51931 83.33%
  );
}
/* Philippines — blue over red with the white hoist triangle */
.fflag--ph {
  background: linear-gradient(#0038a8 50%, #ce1126 50%);
}
.fflag--ph::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 55%;
  background: var(--surface);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* Mexico — green / white / red */
.fflag--mx {
  background: linear-gradient(
    90deg,
    #006847 33.33%,
    #fff 33.33% 66.66%,
    #ce1126 66.66%
  );
}
/* Brazil — yellow lozenge and blue disc on green */
.fflag--br {
  background: #009b3a;
}
.fflag--br::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  height: 78%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #fedf00;
}
.fflag--br::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38%;
  height: 38%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #002776;
}

/* ── community channel cards (news card shell, icon-led) ──────────────────── */
.cmty__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cmty__card {
  padding: 30px;
}
.cmty__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 20px;
}
.cmty__icon svg {
  width: 24px;
  height: 24px;
}
.cmty__card .ncard__t {
  padding: 0 0 10px;
  font-size: 20px;
}
.cmty__p {
  display: block;
  font-size: 15px;
  line-height: 25px;
  color: var(--text);
}
.cmty__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
}
.cmty__go svg {
  width: 15px;
  height: 15px;
  transition: transform var(--dur) var(--ease);
}
.cmty__card:hover .cmty__go svg {
  transform: translate(2px, -2px);
}

@media (max-width: 1000px) {
  .cmty__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .cmty__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The lead image was `width:100%; height:auto`, so a near-square 800×829
   source stretched to ~1440×1490 — taller than the viewport. Crop it to a
   banner instead, as the template's lead does. */
.postlead img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: 50% 45%;
}

@media (max-width: 720px) {
  .postlead img {
    aspect-ratio: 4 / 3;
  }
}

/* The community lead is a purpose-built SVG at 16:7, so it needs no crop —
   let it sit at its own ratio rather than being covered like a photo. */
.postlead img[src$=".svg"] {
  aspect-ratio: auto;
  object-fit: contain;
}

/* The card art is transparent and ~1.6:1. Keep the 16/7 slot so this lead
   matches every other post, but `contain` instead of `cover` — cover sliced
   the outer cards off, and dropping the ratio entirely made it 904px tall. */
.postlead img[src$="smashx-cards.png"] {
  object-fit: contain;
  max-width: 780px;
  margin-inline: auto;
}

/* ── Home hero particle sphere ─────────────────────────────────────────────
   Canvas is absolute, not fixed: .hero sets `isolation: isolate`, which makes
   it a containing block, so a fixed canvas would anchor to the hero anyway —
   and `overflow: hidden` would clip it. Absolute is the honest expression. */
.sph {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sph canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.sph-rings {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}

.sph-rings i {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1.5px dashed rgba(160, 150, 255, 0.22);
  transform: translate(-50%, -50%);
  display: block;
}

.sph-rings i:nth-child(odd) {
  border-style: solid;
  border-color: rgba(160, 150, 255, 0.13);
}

.sph-coins {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Rendered large and scaled DOWN. transform: scale() on a will-change layer
   rasterises at the base size, so scaling a small image up is a real raster
   upscale — downscaling always resamples cleanly. */
.sph-coins img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  box-sizing: border-box;
  padding: 26px;
  border-radius: 50%;
  /* Near-opaque: at 0.62 the particle field showed through the pill and the
     coin read as part of the cloud rather than in front of it. */
  background: rgba(14, 11, 30, 0.94);
  /* Glow radii scale with the pill. They were drawn for a 52px coin; left at
     78px on a 38px coin the halo would carry the same visual weight and the
     icon would still read as large, just with a smaller disc inside it. */
  box-shadow:
    inset 0 0 0 3px rgba(170, 158, 255, 0.68),
    0 0 19px rgba(126, 112, 255, 0.5),
    0 0 57px rgba(96, 84, 226, 0.3);
  opacity: 0;
  will-change: transform, opacity;
  animation: sphCoinGlow 4.5s ease-in-out infinite;
}

/* Filters apply BEFORE transform, so these radii are multiplied by the coin's
   0.525 scale on screen — sized generously to survive that. */
@keyframes sphCoinGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 14px rgba(140, 122, 255, 0.6))
      drop-shadow(0 0 46px rgba(104, 92, 236, 0.32)) saturate(1.2);
  }
  50% {
    filter: drop-shadow(0 0 34px rgba(178, 162, 255, 0.95))
      drop-shadow(0 0 96px rgba(120, 104, 255, 0.55)) saturate(1.6)
      brightness(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sph-coins img {
    animation: none;
  }
}

/* ── Hero clears as the sphere zooms in ────────────────────────────────────
   sphere.js writes --hero-p (0 at rest, 1 once the hero has travelled a full
   viewport). Copy and cards fade against it, leaving the particle field on the
   hero's own background before "World-class partners." arrives.
   The fade finishes well before the section leaves, so it reads as the content
   clearing rather than simply scrolling away. */
.hero__copy,
.hero__cards {
  will-change: opacity, transform;
}

/* There WAS a rule here killing clicks on .hero__copy / .hero__cards once
   .is-cleared was set, on the reasoning that an invisible CTA which still
   swallows the pointer is worse than no CTA. That reasoning was sound for the
   old order, where the copy was on screen first and faded out as the sphere
   zoomed in: .is-cleared fires at --hero-p 0.55, by which point the copy had
   gone.

   The order is now sphere -> footage -> copy, so the copy ARRIVES at
   --lede-in (0.78) — after 0.55. The rule was therefore disabling a fully
   visible "Open an account" button and leaving it dead for the rest of the
   page. Exactly the invisible failure it was written to prevent, inverted.

   Nothing replaces it, because two rules already cover the window it was for:
   .hero__lede is pointer-events:none until .is-lede-in, which now fires at
   --lede-in rather than a hardcoded 0.62, and .is-covering suppresses the
   whole layer while the footage is over it. */

@media (prefers-reduced-motion: reduce) {
  .hero__copy,
  .hero__cards {
    opacity: 1;
    transform: none;
  }
}

/* ── Hero as a scroll track ────────────────────────────────────────────────
   The section is deliberately tall; .hero__stage is sticky inside it and holds
   the viewport, so the sphere stays put while the page scrolls through the
   zoom. Note `overflow` moved OFF .hero — an overflow-hidden ancestor disables
   position: sticky entirely, which is the usual reason this pattern fails. */
.hero {
  min-height: 0;
  /* tunable via ?tune — the track length sets how much scroll the zoom gets.
     The hold is added on top: the stage is sticky inside .hero, so the only
     way to keep it pinned past the end of the choreography is to give the
     containing block more room. */
  height: calc(var(--hero-track, 260vh) + var(--hero-hold, 0px));
  padding: 0;
  display: block;
  overflow: visible;
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 0 0 var(--r-card) var(--r-card);
  /* the gradient lived on .hero; it belongs to whatever fills the viewport */
  background: inherit;
  /* The whole stage — sphere, coins and field — clears over the tail of the
     track, so the brand strip parallaxes up into empty space rather than
     sliding over a still-lit hero. */
  /* Clears mid-track so the copy can arrive afterwards. This used to run off
     the tail of the track, which left no room for anything to follow it. */
  opacity: clamp(
    0,
    calc(
      1 - (var(--hero-p, 0) - var(--stage-out, 0.4)) / var(--stage-len, 0.16)
    ),
    1
  );
  will-change: opacity;
}

/* ── Brand strip parallax ──────────────────────────────────────────────────
   --par runs 0 -> 1 as the section crosses the viewport. Heading and logos
   travel at different rates so the band assembles as it arrives.

   The negative top margin is what makes the two overlap: without it the strip
   only enters the viewport once the hero track is fully spent, so the stage
   had already faded to nothing and there was a dead beat between them. Pulled
   up, it rises while the hero is still clearing. */
.brandstrip {
  position: relative;
  z-index: 2;
  /* --hero-hold is the structural pull that makes the strip climb over the
     pinned sphere; --band-overlap stays as a free nudge on top of it. */
  margin-top: calc((var(--hero-hold, 0px) + var(--band-overlap, 0vh)) * -1);
  background: var(--bg);
  border-radius: var(--r-card) var(--r-card) 0 0;
  /* Figma section rhythm: 100px top padding (user-approved target). Parallax,
     negative margin and hero hold unchanged — only the visual inset updates. */
  padding-top: 100px;
  padding-bottom: 100px;
}

.brandstrip__head {
  transform: translate3d(
    0,
    calc((1 - var(--par, 1)) * var(--par-head, 46px)),
    0
  );
  opacity: clamp(0, calc(var(--par, 1) * 1.8), 1);
  will-change: transform, opacity;
}

.brandstrip .marquee {
  transform: translate3d(
    0,
    calc((1 - var(--par, 1)) * var(--par-logos, 88px)),
    0
  );
  opacity: clamp(0, calc(var(--par, 1) * 1.35), 1);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .brandstrip__head,
  .brandstrip .marquee {
    transform: none;
    opacity: 1;
  }
}

/* ── Header: sticky, and clears with the hero ──────────────────────────────
   Was position:absolute, which pinned it to the top of the document — with a
   2405px hero it scrolled away immediately. Sticky keeps it in the viewport.
   It fades on the same curve as the hero copy, then returns once the track is
   spent, so the rest of the page still has navigation. */
.nav {
  /* fixed, not sticky. Sticky is in-flow, so it consumed 70px above the hero
     and exposed a band of the light page background. Fixed keeps it pinned
     without taking layout space, exactly as the old `absolute` did. */
  position: fixed;
  inset: 0 0 auto;
}

/* Links, Login and the waitlist CTA follow the hero copy — but ONLY on the
   page that has the sphere. Everywhere else --hero-p is never written, so it
   fell back to 0 and the formula hid the whole menu on all 11 other pages. */
:root.has-sphere .nav__links,
:root.has-sphere .nav__login,
:root.has-sphere .nav__right .btn {
  opacity: clamp(
    0,
    calc((var(--hero-p, 0) - var(--lede-in, 0.82)) / var(--lede-len, 0.07)),
    1
  );
}

/* invisible chrome must not keep swallowing clicks */
:root.has-sphere:not(.is-nav-in) .nav__links,
:root.has-sphere:not(.is-nav-in) .nav__login,
:root.has-sphere:not(.is-nav-in) .nav__right .btn {
  pointer-events: none;
}

:root.is-past-hero .nav__links,
:root.is-past-hero .nav__login,
:root.is-past-hero .nav__right .btn {
  opacity: 1;
  pointer-events: auto;
}

:root.is-past-hero .nav {
  /* a backdrop once it overlaps real content rather than the hero field */
  background: rgba(10, 8, 26, 0.72);
  backdrop-filter: blur(12px);
  padding-top: 14px;
  padding-bottom: 14px;
}

/* The drawer now hangs off <body> so no header effect can become its
   containing block, which means the header has to be lifted over it by hand —
   inside .nav the toggle's z-index only ever competed within the header's own
   stacking context. */
.nav--menu-open {
  z-index: 210;
}

/* ...and the header must drop its own blurred bar while the drawer is open,
   or it smears a translucent band across the top of the panel. Written to
   outrank :root.is-past-hero .nav. */
:root .nav.nav--menu-open {
  background: transparent;
  backdrop-filter: none;
}

/* Login read as body text next to a solid white pill. Both are actions in the
   drawer, so it gets the same footprint with an outlined treatment. */
.navmenu__login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-weight: 500;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  :root.has-sphere .nav__links,
  :root.has-sphere .nav__login,
  :root.has-sphere .nav__right .btn {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Tuned hero-sequence values, set here rather than as var() fallbacks so the
   whole sequence reads in one place. The ?tune panel writes the same names. */
:root {
  /* the fixed bar, measured: 70px at rest, 72 once .is-past-hero adds its
     vertical padding. The strip clears the larger of the two. */
  --nav-h: 72px;
  --hero-track: 260vh;
  /* Extra sticky room AFTER the choreography finishes, during which the brand
     strip rises over a still-pinned sphere. The strip is pulled up by the same
     amount, so it reaches the header exactly as the stage releases. */
  --hero-hold: 100vh;
  --fade-start: 0.46;
  --fade-len: 0.41;
  --fade-lift: -64px;
  --nav-fade-start: 0.1;
  --nav-fade-len: 0.36;
  --par-head: 54px;
  --par-logos: 110px;
  --stage-out: 0.91;
  --stage-len: 0.58;
  --band-overlap: 0vh;
  --type-size: 28px;
  --type-track: 0.27em;
  --lede-in: 0.78;
  --lede-len: 0.09;
  --lede-lift: 96px;
  /* The line clears as the footage assembles over it. 0.88 was right when the
     sphere held the screen to the end of the track; it now has to be gone
     before the mosaic fills the middle, which is where the line sits. */
  --type-out: 0.26;
  --type-out-len: 0.1;
}

/* ── Scroll-driven typewriter ──────────────────────────────────────────────
   Characters are revealed from the hero's own scroll progress rather than a
   timer, so scrolling back un-types it. Sits under the mark, inside the stage,
   so it inherits the stage's fade at the end of the track. */
.sph-type {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  margin: 0;
  transform: translate(-50%, 96px);
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--type-size, 15px);
  letter-spacing: var(--type-track, 0.22em);
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 18px rgba(130, 112, 255, 0.55);
  /* Clears just ahead of the hero copy so the two hand over rather than
     sharing the frame. Its own opacity multiplies the stage's, so it goes
     regardless of how gently --stage-out is set. */
  opacity: clamp(
    0,
    calc(
      1 - (var(--hero-p, 0) - var(--type-out, 0.72)) / var(--type-out-len, 0.1)
    ),
    1
  );
}

.sph-type__caret {
  display: inline-block;
  width: 0.62em;
  height: 1.05em;
  margin-left: 0.16em;
  vertical-align: -0.16em;
  background: rgba(255, 255, 255, 0.92);
  animation: sphCaret 1.05s steps(1) infinite;
}

/* the caret only belongs while the line is still being typed */
.sph-type.is-done .sph-type__caret {
  /* the animation has to stop too: a running animation outranks a normal
     declaration, so opacity:0 on its own never hid this */
  animation: none;
  opacity: 0;
}

@keyframes sphCaret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sph-type__caret {
    animation: none;
    opacity: 0;
  }
}

/* ── Hero copy layer ───────────────────────────────────────────────────────
   A sticky sibling of the stage, not a child — a child inherits the stage's
   opacity and so could never remain once the sphere has gone. It waits for
   the sphere to clear, then fades in over the same pinned viewport. */
.hero__lede {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  margin-top: -100vh; /* sit over the stage, not after it */
  display: flex;
  align-items: center;
  z-index: 3;
  pointer-events: none;
  /* No opacity here any more. The footage panel is one of this layer's three
     children, and the sequence is now sphere -> footage -> copy: a parent's
     opacity multiplies its children's, so while the ramp lived here the video
     could not possibly appear before the copy it was meant to precede. The
     ramp moved down onto the copy and the cards, which are the two children it
     was ever actually for. */
}

/* Clickable once it is there, and NOT while the footage is over it.

   Written as "suppress while covering" rather than "enable once the copy has
   arrived", and the difference is the whole point.

   The previous version keyed clickability off .is-copy-in, a class only ever
   added from inside herofs.js's animation frame. Opacity had a fallback — the
   rule below falls back to computing the ramp in CSS — so the copy still
   became visible if that loop never ran. pointer-events had no such fallback,
   so it stayed `none`. Any condition that stops the loop (a page opened in a
   background tab, where requestAnimationFrame does not fire; a throttled
   frame; a thrown frame) left a fully visible "Open an account" button that
   could not be clicked, with nothing on screen to explain it.

   .is-covering is added only WHILE the footage owns the screen and removed
   when it hands over, so a loop that never runs never adds it and the copy is
   simply clickable — which is the correct way round to fail. */
.hero.is-lede-in .hero__lede {
  pointer-events: auto;
}
.hero.is-covering .hero__lede {
  pointer-events: none;
}

.hero__lede .hero__copy,
.hero__lede .hero__cards {
  transform: translate3d(
    0,
    calc((1 - var(--hero-p, 0)) * var(--lede-lift, 30px)),
    0
  );
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  /* The ramp lives on the children now, so this has to name them — left on
     .hero__lede it was overriding an opacity that is no longer there, and the
     copy would have stayed on its scroll ramp for a reader who asked for no
     motion. */
  .hero__lede .hero__copy,
  .hero__lede .hero__cards {
    opacity: 1;
    transform: none;
  }
}

/* The centre column carries the app screens again. It sits inside .hero__lede,
   so it inherits that layer's fade rather than needing its own. The lay-back
   vars (--p / --tilt / --zoom) are written by sphere.js against the copy's
   arrival, so the phone tips onto its back as the section comes up. */
.hero__lede .hero__device {
  position: relative;
  height: 100%;
  max-height: 620px;
  display: block;
}

.hero__lede .hero__shots {
  height: 100%;
  max-height: 620px;
}

/* ── Hero sphere: small screens ────────────────────────────────────────────
   Everything here is scoped to <=700px so the desktop tuning is untouched.
   Four separate problems, all from the sphere hero rather than the old layout:

   1. .hero__lede was height:100vh with align-items:center. Stacked at 375px
      the content measures ~890px against an 812px layer, so centring pushed
      the headline to top:-223px — sliced off, and unreachable because the
      layer is sticky. It now grows with its content and top-aligns.
   2. The fixed header overlapped that content; padding-top clears it.
   3. --stage-len was wider than the track left after --stage-out, so the
      field never fell below 84% and sat over the copy. Shortened so it
      actually clears.
   4. Type size, tracking and the orbit radii were fixed pixel values with no
      viewport relationship, so the line and the outer ring ran off-screen. */
@media (max-width: 980px) {
  /* The stage stays sticky as on desktop, so the sphere holds the viewport
     through the zoom. What changes is the copy: at 375px it and the cards
     stack to ~890px and cannot share a screen with the sphere, so instead of
     overlaying (which broke the sticky pin — a sticky box taller than the
     viewport scrolls until its far edge aligns) it follows in flow and rides
     up over the pinned stage on its own background. */
  .hero {
    /* grows with the copy that follows the pinned run */
    height: auto;
  }

  .hero__stage {
    min-height: 0;
    /* NOT margin-bottom here. Sticky containment keeps the sticky element's
       MARGIN box inside its container, so a margin on the stage is subtracted
       from the pinned run rather than added to it: the sphere came unstuck at
       scrollY 1030 with the copy still 553px down the screen, and then slid
       away while the copy finished rising. The spacer lives on the copy
       instead — see .hero__lede margin-top, which produces the same gap. */
  }

  .hero__lede {
    position: relative;
    z-index: 3;
    height: auto;
    min-height: 0;
    /* the pinned run: the stage holds the viewport for this much scroll before
       the copy reaches it. On the copy rather than the stage so it does not
       count against the stage's own sticky containment. */
    margin-top: 95vh;
    align-items: flex-start;
    padding: 76px 0 64px;
    /* a normal section now, not something the scroll reveals — and opaque, so
       it covers the sphere rather than letting particles read through the copy */
    opacity: 1;
    pointer-events: auto;
    background: var(--ink, #0d070a);
    border-radius: 22px 22px 0 0;
  }

  .hero__lede .hero__copy,
  .hero__lede .hero__cards {
    transform: none;
  }

  /* The cards carry width:358px and justify-self:end so they sit as a narrow
     right-hand column against the desktop grid. Once the grid stacks that is
     the wrong shape: at 768 the column is 696px, so the cards held 358 and
     pinned right, leaving 338x460 of dead space beside them. Phones never
     showed it because max-width:100% already clamped them. Fill the column,
     the way they already do on a phone. */
  .hero__lede .hero__cards {
    width: 100%;
    justify-self: stretch;
  }

  /* Retimed against the pinned run. The second line now finishes typing at
     p 0.23 (swapAt 0.10 + swapLen 0.04 + type2Len 0.09) rather than 0.73,
     because the footage beat takes the middle of the screen from 0.26 —
     nothing may start clearing before 0.23, and everything must be clear
     before the mosaic fills in. The line holds fully typed, then fades, then
     the footage runs, and the copy arrives last. */
  :root {
    /* Only a dim, never a clear: here the copy is opaque and rides up over the
       pinned stage, so it does the covering. Fading the field to zero first
       would blank the screen while the copy was still a viewport away. */
    /* no hold here: the copy is in flow and already rides up over the pinned
       stage, so pulling the strip up too would drag it over that copy */
    --hero-hold: 0px;
    /* 1.02, not 0.92: the type's opacity multiplies the stage's, so a stage
       already down to 0.73 by p=1 is what made "MONEY IS MOVING ON-CHAIN"
       read so much fainter than the first line. Above 1.0 it never dims
       inside the track, and nothing is lost — the copy is opaque and does
       the covering by itself. */
    --stage-out: 1.02;
    --stage-len: 0.3;
    --lede-in: 0.86;
    --lede-len: 0.14;
    --lede-lift: 40px;
    --type-out: 0.28;
    --type-out-len: 0.12;
    /* 24 characters have to fit the viewport, tracking included */
    --type-size: clamp(11px, 3.1vw, 16px);
    --type-track: 0.12em;
  }

  .sph-type {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    transform: translate(-50%, 74px);
  }

  /* No hold on phones — section scrolls normally with Figma padding rhythm. */
  .brandstrip {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  /* The phone was absent here entirely. .hero__lede .hero__device is
     height:100%, and on phones the grid row that holds it is auto-height with
     nothing else in flow inside it — the screens are absolutely positioned —
     so it resolved to 335x0 and neither the screens nor the slab had anywhere
     to render. It needs a height of its own.

     460px caps it: at this aspect that is a 226px phone, which grows to 289px
     at the 1.28 it zooms to, inside a 335px column. 540px would overflow. */
  .hero__lede .hero__device {
    height: min(56vh, 460px);
    max-height: none;
  }

  .hero__lede .hero__shots {
    max-height: none;
  }

  /* coins and guides are sized from canvas height, which is portrait here —
     hold them inside the narrower axis instead */
  .sph-coins img {
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
    padding: 15px;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  /* 0.5, not 0.62: at 0.62 the outer ring still ran to the screen edges on a
     384px phone and coins sat half-clipped rather than reading as an orbit. */
  .sph-rings {
    transform: translate(-50%, -50%) scale(0.5);
  }
  .sph-coins {
    transform: scale(0.5);
    transform-origin: 50% 50%;
  }
}

/* ── Personal: "Built on rails that already move trillions" ────────────────
   The orbit was display:none below 980px, so the whole graphic was simply
   absent on phones and the section was heading-plus-paragraph.

   The reason given was that the tiles collide with the centre copy — but
   .p2-rings__centre is used by no page. On this page the copy sits BELOW the
   rings, so there is nothing in the middle to collide with. The real problem
   was radial: the tiles stayed a fixed 70px while the field shrank, so at
   375px an outer tile (r 94-164) overlapped a mid tile (r 54-124) wherever
   the two rings happened to line up.

   So: scale the tiles with the viewport, and push the two populated rings
   further apart to buy back the radial clearance. At 375px the field is
   335px, giving a 39px tile, an outer orbit at r 141 and a mid at r 74 —
   28px of clear space between their tile edges, and 7px inside the field. */
@media (max-width: 980px) {
  .p2-ring {
    display: block;
  }

  .p2-rings {
    --tile: clamp(34px, 10.5vw, 54px);
    padding-block: 0;
  }

  /* wider apart than the desktop 11.5 / 23.3 / 35.6 */
  .p2-ring--outer {
    inset: 8%;
  }
  .p2-ring--mid {
    inset: 28%;
  }
  .p2-ring--inner {
    inset: 46%;
  }
}

/* ── Paint order for the held hero ────────────────────────────────────────
   --hero-hold makes .hero a screen taller than the sphere it shows, so the
   hero's box now runs PAST the brand strip and overlaps whatever follows.
   .hero__stage is sticky, and a positioned element paints above the
   backgrounds and text of later static siblings — so the hero was drawn on
   top of the next section entirely.

   Two things are needed. The hero gets its own stacking context pinned below
   the content that follows it, and that content is lifted above it. The
   strip already carried z-index 2; its siblings need the same treatment or
   only the strip would clear the hero. */
.hero {
  position: relative;
  z-index: 0;
}

.brandstrip ~ * {
  position: relative;
  z-index: 1;
}

/* Being above the hero is not enough — these are transparent and sit on the
   body colour, so the hero would still read through them. They are opaque in
   appearance already (body is the same #EFEFEF), so this changes nothing
   visually; it just stops the hero showing through. The strip is only ~350px
   against a full-screen hold, so the two sections after it are what actually
   cover the hero's tail. */
.brandstrip + *,
.brandstrip + * + * {
  background: var(--bg);
}

/* ── Reveal feel on phones ────────────────────────────────────────────────
   The 50px travel was set against desktop rows, where several items sweep in
   together and the distance reads as one gesture. Stacked on a 375px screen
   each item makes that journey alone, one after another, which reads as
   heavy and slightly late. A shorter lift keeps the same motion signature
   but lands sooner.

   Duration stays at 400ms: it is already the quick end of the range, and
   shortening it further starts to look like a flicker rather than a reveal.
   The real fix for the phone lateness was the stagger — see rowDelays() in
   reveal.js, which stops stacked items inheriting a queue position they
   never earned. */
@media (max-width: 700px) {
  :root {
    --reveal-lift: 28px;
  }
}

/* ── Hero headline typewriter ─────────────────────────────────────────────
   The H1 types two sentences instead of holding one static line. The visible
   text lives in .hero__title-out; the real heading is the .visually-hidden
   copy, so the H1 always has text for search engines and screen readers no
   matter where the animation is. */
.hero__title--type {
  /* The .h1 scale (42-72px) is built for a 5-to-8 word headline. These are
     ~90-character sentences; left at that size the block measured 704px, ten
     lines deep, and swamped the paragraph and button under it. Stepped down
     to a statement size, which lands at three or four lines. */
  font-size: clamp(30px, 3.1vw, 46px);
  /* 15ch was sized for the old 47-character headline. */
  max-width: 26ch;
  /* Both sentences are reserved for at load, so the paragraph, button and
     proof row below do not shunt down a line at a time as it types.
     JS measures the taller of the two and writes this. */
  min-height: var(--title-h, auto);
  /* Fill that reserved box from the BOTTOM. Holding the tallest sentence's
     height means a half-typed line leaves slack somewhere; anchored to the top
     it opened a quarter-screen hole between the headline and its own body copy
     — on a 384px phone that is five lines of nothing, and it reads as broken.
     Anchored to the bottom the text stays welded to the paragraph under it and
     the slack sits above, where it reads as spacing. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero__title-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.78em;
  margin-left: 0.06em;
  vertical-align: -0.04em;
  background: currentColor;
  animation: heroCaret 1.05s steps(1) infinite;
}

/* the caret belongs only while something is still being typed. The animation
   must be cancelled as well — a running animation beats a plain declaration. */
.hero__title--type.is-done .hero__title-caret {
  animation: none;
  opacity: 0;
}

@keyframes heroCaret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 700px) {
  .hero__title--type {
    max-width: none;
  }
}

/* No typing for anyone who asked for less motion — the full sentence is
   simply present. JS also bails, so this is belt and braces. */
@media (prefers-reduced-motion: reduce) {
  .hero__title-caret {
    animation: none;
    opacity: 0;
  }
}

/* ── Phone as a solid, not a plane ────────────────────────────────────────
   The screens were one flat image on one flat plane, so laying it back gave
   a rectangle with no thickness — which is what read as fake, not the
   renderer. This builds the phone as an actual slab: the screens are the
   front face, four thin walls carry the sides, and a panel closes the back.

   perspective moves off the transform list and onto the parent as a property.
   As a transform function it only projects the element's own transform, not
   its children — the walls would have stayed unprojected and sheared. The
   2400px value is kept exactly, since a shorter one flares the near edge and
   grew the projected box enough to collide with the copy. */
.hero__lede .hero__device,
.hero__device {
  perspective: 2400px;
  perspective-origin: 50% 50%;
}

.hero__shots {
  /* was: perspective(2400px) rotateX() scale() — see above.
     scale3d, not scale: a 2D scale leaves translateZ alone, so the phone
     would have got proportionally thinner as it zoomed in. */
  transform: rotateX(var(--tilt, 0deg))
    scale3d(var(--zoom, 1), var(--zoom, 1), var(--zoom, 1));
  transform-style: preserve-3d;
  /* how thick the phone is. A real handset is about 11% of its width; this
     sits a little under that, which reads better at small sizes. */
  --thick: clamp(9px, 1.35vw, 22px);
}
/* ── Hero copy must not spill out of its own column ───────────────────────
   .hero__copy is a column flex with align-items:flex-start, so its children
   are sized from their content, not from the column. .lede carries
   max-width:52ch (~470px at 16px) and the column is only 289px at 1280 — so
   the paragraph rendered 60..530 inside a 60..349 parent and ran 181px out
   the side, straight under the phone.

   It was always overflowing; it only became visible when the phone grew to a
   1.28 zoom and moved left into that space. Worst at 1194x834, where the text
   crossed 112px into the phone.

   Capping at the column is the fix — a max-width in ch cannot know how much
   room the grid actually gave it. */
.hero__lede .hero__copy > * {
  max-width: 100%;
}

/* ── Tablet: hero drops the inline CTA ────────────────────────────────────
   Scoped to 701-980 only — the range where the grid stacks but the screen is
   still wide. Phones keep both: they have no header CTA to fall back on once
   the nav collapses to a hamburger, so the hero button is the only way in
   from this section. Desktop keeps both too.

   The header's own "Join waitlist" stays visible right through this range,
   so the section is not left without a way to convert. */
@media (min-width: 701px) and (max-width: 980px) {
  .hero__lede .hero__copy > .btn,
  .hero__lede .hero__copy > .proof {
    display: none;
  }
}

/* ── Business hero on tablet ──────────────────────────────────────────────
   Scoped 701-980, matching the homepage: the range where the grid stacks but
   the screen is still wide. Phones keep the button (their nav is a hamburger,
   so it is the only visible route into the waitlist); desktop keeps it too.
   The header's own "Join waitlist" stays on screen right through this range. */
@media (min-width: 701px) and (max-width: 980px) {
  .p2-hero__copy > .btn {
    display: none;
  }

  /* The collage collapsed to ONE column below 980 — three full-width blocks
     stacked 1125px deep, against 553px for the same content at 1280. That is
     what made the hero 1591px tall on a 768px tablet. There is room for two
     columns at this width, so use it: the hero card takes the full width on
     its own row, the two stacks sit side by side beneath it. */
  .p2-collage {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .p2-col--mid {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-top: 0;
  }

  .p2-colstack--l {
    grid-column: 1;
    grid-row: 2;
  }

  .p2-colstack--r {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ── Coin layers on phones ────────────────────────────────────────────────
   The 13 coins sit above the canvas as separately-composited layers, each
   carrying will-change, a permanently running animation, and three shadows —
   one of them a 78px blur. Thirteen large-radius blurs recomposited every
   frame over a full-screen WebGL canvas is a real cost on a mobile GPU, and
   plausibly a larger one than the particles themselves.

   Keep the inset ring — that is what reads as a rim, and an inset shadow with
   no blur is nearly free. Drop the two outer glows. */
@media (max-width: 700px) {
  .sph-coins img {
    box-shadow: inset 0 0 0 3px rgba(170, 158, 255, 0.68);
  }
}

/* ── <picture> must not interrupt the phone's 3D context ──────────────────
   Wrapping the hero screens for WebP puts a box between .hero__shots, which
   is transform-style: preserve-3d, and the <img> that carries translateZ.
   <picture> is transform-style: flat by default, so the image gets flattened
   out of the slab's 3D space, lands at Z=0, and the rim layers — which sit in
   front of that — paint straight over it. The phone renders as a blank slab.
   Found the hard way on the first attempt at this.

   display:contents removes the wrapper's box entirely, so the <img> is again
   a direct participant in its parent's 3D space and keeps the same containing
   block. Format selection is unaffected: the browser picks a <source> before
   layout, and display has no bearing on it. */
.hero__shots picture,
.overview__panel picture {
  display: contents;
}

/* ── Coin glyphs on phones ────────────────────────────────────────────────
   The pill is 160px with 26px of padding, so the logo gets 67% of it. That is
   right at desktop size; scaled down for a phone it left the mark too small
   to identify. Less padding gives the glyph more of the same pill without
   making the pill itself any bigger. */
@media (max-width: 700px) {
  .sph-coins img {
    padding: 14px;
  }
}

/* ── Keep the overview render on its own layer ────────────────────────────
   It judders while scrolling on iOS. Size and document position are provably
   stable through a scroll — measured 79 frames, one distinct width, one
   distinct height, one document Y — so nothing is being laid out again. That
   leaves compositing.

   Two things work against it. The reveal hands the panel's layer back when it
   finishes (will-change goes to auto), and the "Payment sent" chip animates
   over the image forever, so that region keeps being recomposited. Without
   its own layer the rounded 18px corners are re-rasterised as it moves.

   Promoting the image, not the panel: the panel is a reveal target and
   already carries a transform, which this would fight. */
.overview__shot {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 4 · overview — old-v3 homepage (scoped to .section.overview) */
.section.overview {
  --overview-purple: #6232ff;
  --overview-text-muted: #40424d;
  --overview-card-border: #e2e2e2;
  --overview-float-green: #4cd964;
  --overview-float-dur: 4s;
  --overview-float-ease: ease-in-out;
  --overview-shot-ratio: 917 / 1200;
  padding-top: 0;
  padding-bottom: 50px;
}

.section.overview .overview__wrap {
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 566px);
  justify-content: space-between;
  gap: clamp(32px, 8vw, 120px);
  align-items: center;
}

.section.overview .overview__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 540px;
  gap: 0;
}

.section.overview .overview__text .h2 {
  margin: 0 0 25px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 2.5vw, 36px);
  line-height: 1.22;
  letter-spacing: 0;
  color: var(--fg);
}

@media (min-width: 768px) {
  .section.overview .overview__text .h2 {
    font-size: 36px;
    line-height: 44px;
  }
}

.section.overview .overview__text .lede {
  margin: 0 0 25px;
  max-width: none;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--overview-text-muted);
}

.section.overview .overview__cta.btn {
  padding: 8px 15px;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  background: #000;
  color: #fff;
  border-radius: 25px;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.section.overview .overview__cta.btn:hover {
  transform: none;
  background: #000;
}

.section.overview .overview__cta .btn__badge {
  width: 35px;
  height: 35px;
  background: #fff;
  color: #000;
  transition: none;
}

.section.overview .overview__cta .btn__badge svg {
  transform-origin: center center;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .section.overview .overview__cta.btn:hover .btn__badge {
    transform: none;
  }

  .section.overview .overview__cta.btn:hover .btn__badge svg {
    transform: rotate(45deg);
  }
}

.section.overview .counters {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: clamp(8px, 1.2vw, 10px);
  margin-top: 35px;
  max-width: 450px;
  width: 100%;
  flex-wrap: unset;
}

.section.overview .counters__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--overview-card-border);
  border-radius: 15px;
  min-width: 114px;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 500ms var(--ease),
    transform 500ms var(--ease);
}

.section.overview .counters.is-in .counters__card {
  opacity: 1;
  transform: translateY(0);
}

.section.overview .counters.is-in .counters__card:nth-child(1) {
  transition-delay: 0ms;
}

.section.overview .counters.is-in .counters__card:nth-child(2) {
  transition-delay: 80ms;
}

.section.overview .counters.is-in .counters__card:nth-child(3) {
  transition-delay: 160ms;
}

.section.overview .counters__n {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.section.overview .counters__l {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--overview-text-muted);
}

.section.overview .overview__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 566px;
  min-height: 0;
  aspect-ratio: auto;
  margin-inline: 0;
  justify-self: end;
  padding: clamp(24px, 4vw, 40px) clamp(20px, 5vw, 73px);
  background: var(--overview-purple);
  border-radius: var(--r-card);
  overflow: visible;
}

.section.overview .overview__visual {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: var(--overview-shot-ratio);
}

.section.overview .overview__visual picture {
  display: contents;
}

.section.overview .overview__shot {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.section.overview .overview__float {
  position: absolute;
  z-index: 2;
  top: 75%;
  left: 0;
  --float-x: -14%;
  --float-y: -50%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: clamp(12px, 2.5vw, 20px);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 10px 5px rgba(0, 0, 0, 0.25);
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translate(var(--float-x), var(--float-y));
  animation: overviewFloat var(--overview-float-dur) var(--overview-float-ease)
    infinite;
  will-change: transform;
}

.section.overview .overview__float-copy {
  display: flex;
  flex-direction: column;
}

.section.overview .overview__float strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.2;
  color: #fff;
}

.section.overview .overview__float em {
  margin-top: 5px;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.2;
  color: #fff;
}

.section.overview .overview__float-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--overview-float-green);
}

@keyframes overviewFloat {
  0%,
  100% {
    transform: translate(var(--float-x), var(--float-y)) translateY(0);
  }

  50% {
    transform: translate(var(--float-x), var(--float-y)) translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section.overview .counters__card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .section.overview .overview__float {
    animation: none;
  }

  .section.overview .overview__cta .btn__badge svg {
    transition: none;
  }
}

@media (max-width: 1180px) {
  .section.overview .overview__wrap {
    gap: 64px;
  }
}

@media (max-width: 980px) {
  .section.overview .overview__wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .section.overview .overview__text {
    max-width: none;
  }

  .section.overview .overview__panel {
    max-width: none;
    justify-self: stretch;
  }

  .section.overview .counters {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .section.overview .overview__panel {
    padding: 24px 16px 20px;
    overflow: hidden;
  }

  .section.overview .overview__visual {
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    height: auto;
  }

  .section.overview .overview__visual picture {
    display: block;
    width: 100%;
    line-height: 0;
  }

  .section.overview .overview__shot {
    width: 100%;
    height: auto;
    aspect-ratio: var(--overview-shot-ratio);
    object-position: center bottom;
  }

  .section.overview .overview__float {
    top: auto;
    bottom: 22%;
    left: 12px;
    --float-x: 0%;
    --float-y: 0%;
    padding: 10px 14px;
    gap: 8px;
    max-width: calc(100% - 24px);
  }

  .section.overview .overview__float strong {
    font-size: 13px;
  }

  .section.overview .overview__float em {
    font-size: 11px;
    margin-top: 4px;
  }

  .section.overview .overview__float-dot {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 640px) {
  .section.overview .overview__panel {
    padding: 20px 14px 18px;
  }

  .section.overview .overview__float {
    bottom: 20%;
    left: 10px;
    padding: 9px 12px;
  }

  .section.overview .counters {
    grid-template-columns: 1fr 1fr;
    gap: clamp(8px, 1.2vw, 10px);
  }

  .section.overview .counters__card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 430px) {
  .section.overview .counters {
    grid-template-columns: 1fr;
  }

  .section.overview .counters__card:last-child {
    grid-column: auto;
  }
}

@media (max-width: 425px) {
  .section.overview .overview__text .h2 {
    font-size: clamp(24px, 6.5vw, 28px);
    line-height: 1.22;
    letter-spacing: -0.02em;
  }

  .section.overview .overview__cta.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 8px 8px 8px 16px;
    gap: 10px;
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.2;
    white-space: normal;
    text-align: left;
  }

  .section.overview .overview__cta.btn > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .section.overview .overview__cta.btn .btn__badge {
    width: 32px;
    height: 32px;
    flex: none;
    margin: 0;
    transform: none;
  }
}

/* 5 · trio — old-v3 homepage (scoped to .section.trio; corridor .tcard untouched) */
.section.trio {
  --trio-overlay: rgba(0, 0, 0, 0.5);
  --trio-gutter: clamp(20px, 3.5vw, 50px);
  --trio-card-gap: 25px;
  --trio-card-radius: 15px;
  --trio-card-border: #c8c8c8;
  --trio-card-bg: rgba(255, 255, 255, 0.1);
  --trio-purple: #6232ff;
  --trio-slide-cycle: 24s;
  --trio-fade-ease: ease-in-out;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
}

.section.trio .trio__container {
  position: relative;
  z-index: 2;
  padding-inline: var(--trio-gutter);
}

.section.trio .trio__inner {
  padding-block: var(--trio-gutter);
}

.section.trio .trio__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.section.trio .trio__bg-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation-duration: var(--trio-slide-cycle);
  animation-timing-function: var(--trio-fade-ease);
  animation-iteration-count: infinite;
  will-change: opacity;
}

.section.trio .trio__bg-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--trio-bg-pos, center center);
}

.section.trio .trio__bg-slide--1 {
  --trio-bg-pos: center 35%;
  animation-name: trio-bg-1;
}

.section.trio .trio__bg-slide--2 {
  --trio-bg-pos: center 40%;
  animation-name: trio-bg-2;
}

.section.trio .trio__bg-slide--3 {
  --trio-bg-pos: center 30%;
  animation-name: trio-bg-3;
}

.section.trio .trio__bg-slide--4 {
  --trio-bg-pos: center 45%;
  animation-name: trio-bg-4;
}

@keyframes trio-bg-1 {
  0%,
  22% {
    opacity: 1;
  }

  27%,
  92% {
    opacity: 0;
  }

  97%,
  100% {
    opacity: 1;
  }
}

@keyframes trio-bg-2 {
  0%,
  22% {
    opacity: 0;
  }

  27%,
  47% {
    opacity: 1;
  }

  52%,
  100% {
    opacity: 0;
  }
}

@keyframes trio-bg-3 {
  0%,
  47% {
    opacity: 0;
  }

  52%,
  72% {
    opacity: 1;
  }

  77%,
  100% {
    opacity: 0;
  }
}

@keyframes trio-bg-4 {
  0%,
  72% {
    opacity: 0;
  }

  77%,
  97% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.section.trio .trio__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, var(--trio-overlay), var(--trio-overlay));
  pointer-events: none;
}

.section.trio .trio__title {
  max-width: 520px;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 2.5vw, 36px);
  line-height: 1.22;
  letter-spacing: 0;
  color: #fff;
}

@media (min-width: 768px) {
  .section.trio .trio__title {
    font-size: 36px;
    line-height: 44px;
  }
}

.section.trio .trio__grid {
  gap: var(--trio-card-gap);
  margin-top: 50px;
}

.section.trio .tcard {
  gap: 10px;
  padding: 20px;
  background: var(--trio-card-bg);
  border: 1px solid var(--trio-card-border);
  border-radius: var(--trio-card-radius);
  min-width: 0;
}

.section.trio .tcard__num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  margin: 0 0 25px;
  border-radius: 10px;
  background: var(--trio-purple);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #fff;
}

.section.trio .tcard__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.22;
  letter-spacing: 0;
  color: #fff;
}

@media (min-width: 768px) {
  .section.trio .tcard__h {
    font-size: 36px;
    line-height: 44px;
  }
}

.section.trio .tcard__p {
  margin: 25px 0;
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #fff;
}

.section.trio .tcard__art {
  margin-top: 0;
  margin-bottom: 25px;
  border-radius: var(--trio-card-radius);
  aspect-ratio: 391 / 212.22;
  background: transparent;
}

.section.trio .tcard__art img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.section.trio .tcard__cta.btn {
  align-self: stretch;
  width: 100%;
  margin-top: auto;
  justify-content: center;
  padding: 8px 15px;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  background: #fff;
  color: #000;
  border-radius: 25px;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.section.trio .tcard__cta.btn:hover {
  transform: none;
  background: #fff;
  color: #000;
}

.section.trio .tcard__cta .btn__badge {
  position: static;
  flex: none;
  width: 35px;
  height: 35px;
  margin: 0;
  background: var(--ink);
  color: #fff;
  transition: none;
}

.section.trio .tcard__cta .btn__badge svg {
  transform-origin: center center;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .section.trio .tcard__cta.btn:hover .btn__badge {
    transform: none;
  }

  .section.trio .tcard__cta.btn:hover .btn__badge svg {
    transform: rotate(45deg);
  }
}

@media (max-width: 767px) {
  .section.trio .trio__bg-slide--1 {
    --trio-bg-pos: 55% 35%;
  }

  .section.trio .trio__bg-slide--2 {
    --trio-bg-pos: 45% 40%;
  }

  .section.trio .trio__bg-slide--3 {
    --trio-bg-pos: 50% 30%;
  }

  .section.trio .trio__bg-slide--4 {
    --trio-bg-pos: 50% 45%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section.trio .trio__bg-slide {
    animation: none;
    opacity: 0;
  }

  .section.trio .trio__bg-slide--1 {
    opacity: 1;
  }
}

@media (max-width: 1023px) {
  .section.trio .trio__grid {
    gap: clamp(16px, 3vw, var(--trio-card-gap));
  }
}

@media (max-width: 425px) {
  .section.trio {
    padding-top: clamp(48px, 12vw, 72px);
  }

  .section.trio .trio__title {
    font-size: clamp(24px, 6.5vw, 28px);
    line-height: 1.22;
    letter-spacing: -0.02em;
  }

  .section.trio .tcard {
    padding: 16px;
    gap: 8px;
  }

  .section.trio .tcard__num {
    width: 34px;
    height: 34px;
    padding: 8px;
    margin-bottom: 16px;
    font-size: 14px;
  }

  .section.trio .tcard__h {
    font-size: clamp(20px, 5.5vw, 24px);
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  .section.trio .tcard__p {
    margin: 16px 0;
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.45;
  }

  .section.trio .tcard__art {
    margin-bottom: 16px;
  }

  .section.trio .tcard__cta.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 8px 8px 8px 16px;
    gap: 10px;
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.2;
    white-space: normal;
    text-align: left;
  }

  .section.trio .tcard__cta.btn > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .section.trio .tcard__cta.btn .btn__badge {
    width: 32px;
    height: 32px;
    flex: none;
    margin: 0;
    transform: none;
  }
}

/* 6 · big text marquee — old-v3 homepage (scoped to .bigmarquee--figma;
   smashxcard .bigmarquee and global .marquee / @keyframes marquee untouched) */
.bigmarquee.bigmarquee--figma {
  --bigmarquee-bg: #000000;
  --bigmarquee-ink: #ffffff;
  --bigmarquee-muted: #969696;
  --bigmarquee-gap: 10px;
  --bigmarquee-pad-y: 25px;
  --bigmarquee-radius: 0 0 20px 20px;
  --bigmarquee-size: clamp(26px, 2.2vw + 18px, 40px);
  --bigmarquee-dur: 40s;
  width: 100%;
  max-width: 100%;
  padding: var(--bigmarquee-pad-y) 0;
  background: var(--bigmarquee-bg);
  border-radius: var(--bigmarquee-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bigmarquee.bigmarquee--figma .bigmarquee__inner {
  background: transparent;
  border-radius: 0;
  margin-inline: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--bigmarquee-gap);
  width: 100%;
  max-width: 100%;
}

.bigmarquee.bigmarquee--figma .bigmarquee__row {
  overflow: hidden;
  width: 100%;
}

.bigmarquee.bigmarquee--figma .bigmarquee__train {
  display: flex;
  gap: 0;
  width: max-content;
  animation: bigmarquee-figma-slide var(--bigmarquee-dur) linear infinite;
  will-change: transform;
}

.bigmarquee.bigmarquee--figma .bigmarquee__row--rev .bigmarquee__train {
  animation-direction: reverse;
}

.bigmarquee.bigmarquee--figma .bigmarquee__text {
  display: flex;
  flex-shrink: 0;
  align-items: baseline;
  white-space: nowrap;
}

.bigmarquee.bigmarquee--figma .bigmarquee__train span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--bigmarquee-size);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  color: var(--bigmarquee-ink);
  white-space: nowrap;
  flex-shrink: 0;
}

.bigmarquee.bigmarquee--figma .bigmarquee__row--muted .bigmarquee__train span {
  color: var(--bigmarquee-muted);
}

@keyframes bigmarquee-figma-slide {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (min-width: 1440px) {
  .bigmarquee.bigmarquee--figma .bigmarquee__train span {
    font-size: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bigmarquee.bigmarquee--figma .bigmarquee__train {
    animation: none;
    transform: none;
    width: 100%;
    justify-content: center;
  }

  .bigmarquee.bigmarquee--figma .bigmarquee__text[aria-hidden="true"] {
    display: none;
  }

  .bigmarquee.bigmarquee--figma .bigmarquee__text {
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
    text-wrap: balance;
    max-width: min(100%, 40ch);
    padding-inline: var(--gutter);
  }

  .bigmarquee.bigmarquee--figma .bigmarquee__train span {
    white-space: normal;
  }
}

/* ── Cross-reference block ─────────────────────────────────────────────────
   The signpost left on /pricing where the personal tiers used to sit. Centred
   and quiet: it is a direction, not a third pricing table competing with the
   two either side of it. */
/* Violet card and photograph side by side, as the design has it. The copy
   stays live text rather than being baked into the artwork -- this site
   translates the DOM into eleven locales, and a picture of a sentence does
   not translate.

   It stays an <aside>: the job is still to send people to /membership rather
   than restate the ladder here, which is why the button still reads "See
   personal plans" where the design says "Open a personal account". */
.crossref .inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--accent);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.crossref {
  text-align: left;
}

.crossref__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  padding: clamp(28px, 3.6vw, 56px);
}

.crossref__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.crossref__h {
  margin: 0;
  max-width: 20ch;
  color: #ffffff;
}

.crossref__p {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 860px) {
  .crossref .inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .crossref__media {
    aspect-ratio: 980 / 464;
    height: auto;
  }
}

/* ── Earn: the three mechanisms ────────────────────────────────────────────
   Savings, cash back, referrals. Each card leads with the top rate and carries
   the per-tier breakdown underneath, because the tier is what moves all three
   and a headline rate with no ladder under it reads as a rate everyone gets. */
.earn3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-top: 46px;
}

.earnway {
  display: flex;
  flex-direction: column;
  padding: 34px 32px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.earnway--feature {
  background: var(--ink);
  color: #fff;
  border-color: var(--fg);
}

.earnway__tag {
  align-self: flex-start;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

.earnway--feature .earnway__tag {
  background: rgba(255, 255, 255, 0.12);
  color: var(--smash-lime);
}

.earnway__rate {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 22px;
  font-family: var(--font-display);
  color: var(--fg);
}

.earnway__rate b {
  font-size: clamp(38px, 3.4vw, 54px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

.earnway__rate i {
  font-style: normal;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.earnway--feature .earnway__rate {
  color: var(--smash-lime);
}

.earnway--feature .earnway__rate i {
  color: rgba(255, 255, 255, 0.6);
}

.earnway__h {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.earnway--feature .earnway__h {
  color: #fff;
}

.earnway__p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}

.earnway--feature .earnway__p {
  color: rgba(255, 255, 255, 0.68);
}

/* pushed to the foot so the three cards line their ladders up with each other
   however long the paragraph above runs */
.earnway__rows {
  list-style: none;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}

.earnway__rows:last-child {
  margin-top: auto;
}

.earnway--feature .earnway__rows {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.earnway__rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--text);
}

.earnway__rows b {
  font-weight: 600;
  color: var(--fg);
}

.earnway--feature .earnway__rows li {
  color: rgba(255, 255, 255, 0.6);
}

.earnway--feature .earnway__rows b {
  color: #fff;
}

.earnway__link {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

/* the tier picker reuses the billing pill, three-up and full width */
.earn__tiers {
  width: 100%;
  margin: 12px 0 0;
  justify-content: space-between;
}

.earn__tiers .ptoggle__btn {
  flex: 1 1 0;
  padding-inline: 10px;
  font-size: 14px;
}

/* ── Earn: risk note ── */
/* No padding-top override here. Every .section on the site carries 130px of it
   and no bottom padding, so a boundary is spaced by the next section's top —
   which made this the one section on the site that butted straight into the one
   above it, with the last FAQ answer touching the heading. */
.earn-risk {
  padding-top: var(--section-y);
}

.earn-risk__h {
  max-width: 20ch;
}

.earn-risk__body {
  margin-top: 24px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 16px;
  max-width: 78ch;
}

.earn-risk__body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}

@media (max-width: 980px) {
  .earn3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .earnway {
    padding: 28px 24px 26px;
  }

  /* three tier names will not sit on one line at 350px */
  .earn__tiers {
    flex-wrap: wrap;
  }

  .earn__tiers .ptoggle__btn {
    flex: 1 1 30%;
  }
}

/* ── Membership page: the two-ladder chooser ───────────────────────────────
   Two cards at the top saying which half of the page is which. Two ladders in
   one document answer different questions — one is the card you carry, the
   other is how much you move — and without this the reader has to work that
   out from the prices. */
.memjump .inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding-top: 40px;
}

.memjump__link {
  display: block;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  transition:
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.memjump__link:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.memjump__link b {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* The down arrow said "jump further down the page", which stopped being true
   when these became tabs — the panel now opens where they are. Only the tab
   role loses it, so any other .memjump elsewhere keeps its arrow. */
.memjump__link b::after {
  content: " ↓";
  color: var(--accent);
}
.memjump__link[role="tab"] b::after {
  content: none;
}

.memjump__link span {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}

@media (max-width: 760px) {
  .memjump .inner {
    grid-template-columns: 1fr;
  }
}

/* Four card tiers rather than three. minmax(0, 1fr), not 1fr: a track's default
   minimum is its content, and "Free top-ups to $2,000 a month, 0.75% above"
   would otherwise push its column past its share. */
.memgrid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1240px) {
  .memgrid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memgrid--four .mem--feature {
    grid-column: auto;
    order: 0;
  }
}

@media (max-width: 700px) {
  .memgrid--four {
    grid-template-columns: 1fr;
  }
}

/* heading above the business add-on table */
/* "What the extras cost" is its own card, as the layout draws it: centred
   heading on a rule, the table, then the small print beside a photograph,
   then the same two buttons the plan header carries. */
.addon-card {
  --addon-pad: clamp(24px, 2.6vw, 38px);
  margin-top: 20px;
  padding: var(--addon-pad);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.addon-card .addon__h {
  margin: 0 0 clamp(18px, 2vw, 26px);
  padding-bottom: clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-size: clamp(22px, 2.4vw, 30px);
}
/* The frame's header row is bold text on a rule, not a filled band -- the
   fill belongs to the comparison table, where it separates the plan names
   from the figures. And the widths: Notes was taking 599 of 1227 and running
   every note onto one long line, while Price was squeezed to 261. The frame
   gives the three roughly 37 / 35 / 28. */
.addon-card .memtab thead th {
  background: none;
}

/* The table is wider than a phone and scrolls sideways inside this box. The
   box was the card's content width, so the cut landed a padding short of the
   card's edge with a strip of empty card beyond it -- which reads as a
   rendering fault rather than as "there is more this way". Same fix as the
   send-to table on /markets: the scroll region runs to the card's edges and
   the padding goes back as padding, so the first column does not move and
   the table still rests with a gutter at both ends of the travel. */
.addon-card .memtab-wrap {
  margin-inline: calc(var(--addon-pad) * -1);
  padding-inline: var(--addon-pad);
}
.addon-card .memtab thead th:nth-child(1) { width: 37%; }
.addon-card .memtab thead th:nth-child(2) { width: 35%; }
.addon-card .memtab thead th:nth-child(3) { width: 28%; }
.addon-card .memtab tbody th { width: auto; }

.addon-card .addon__p {
  margin: 0 auto clamp(20px, 2.2vw, 30px);
  max-width: 70ch;
  text-align: center;
}

/* The small print and the photograph side by side. One column until there
   is an image to put in the slot, so an empty box never ships. */
.addon-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px);
  margin-top: clamp(26px, 3vw, 40px);
  align-items: center;
}
.addon-foot:has(.addon-foot__img img) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.addon-card .prices__foot {
  margin: 0;
  text-align: left;
}
/* The buttons sit under the small print, both in the left column, with the
   photograph alongside the pair -- not under the whole row. */
.addon-foot__text {
  align-self: center;
}
.addon-foot__img:empty {
  display: none;
}
.addon-foot__img {
  align-self: center;
}
/* height:auto, or the width/height attributes on the img keep it at its
   natural 862 and it renders 592 by 862 instead of 592 by 255. */
.addon-foot__img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}
.memplanhead__acts--foot {
  justify-content: flex-start;
  margin: clamp(26px, 3vw, 40px) 0 0;
}

@media (max-width: 860px) {
  .addon-foot:has(.addon-foot__img img) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.addon__h {
  margin-top: 46px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* .lede carries margin:0 site-wide, so on the personal panel "What the
   extras cost" sat straight on its own sentence with nothing between them
   but the line-height. Same gap the markets headings got. */
.addon__h + .lede {
  margin-top: clamp(14px, 1.6vw, 22px);
}

/* the business rate table highlights a whole row, not a column */
.memtab tr.is-feature th,
.memtab tr.is-feature td {
  background: var(--accent-soft);
}

/* ── Comparison table: groups and row hints ────────────────────────────────
   The reference puts an explanation under each row label rather than in a
   footnote, so the caveat sits where someone comparing actually is — "the
   machine's owner may charge separately" belongs beside the ATM row, not at
   the bottom of the page. */
.memtab__group th {
  padding-top: 26px;
  padding-bottom: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border-bottom: 1px solid var(--line);
}

/* the first group needs no gap above it — the header row is already there */
.memtab tbody tr:first-child.memtab__group th {
  padding-top: 12px;
}

.memtab__hint {
  display: block;
  margin-top: 4px;
  max-width: 42ch;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
}

/* a row label with a hint under it is two lines, so its values sit top-aligned
   against the label rather than floating in the middle of the pair */
.memtab td {
  vertical-align: top;
}

/* ── Comparison table: group icons and inclusion marks ─────────────────────
   The reference marks an included feature with a tick and an absent one with
   a dash. Both carry an aria-label, because a tick read aloud as "check" tells
   a screen-reader user nothing about which column it sits in. */
.memtab__ico {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  opacity: 0.9;
}

.memtab__yes {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

/* A dash, not a cross. A cross reads as an error; this is simply a tier that
   does not carry the feature. */
.memtab__no {
  display: inline-block;
  width: 22px;
  text-align: center;
  /* --line is #dbdbdb, which against the card measures about 1.3:1 -- the
     dash was in the markup and effectively not on the page. The layout
     draws a plainly visible one. */
  color: var(--muted);
  font-weight: 700;
}

.memtab .is-feature .memtab__yes {
  background: var(--surface);
}

/* The metal card is the only thing you join a list for, so its chip drops the
   accent tint the other tiers carry: those describe a card you get on signing
   up, this one describes a card you wait for. Ink on a neutral fill, with the
   dashed edge doing the work the colour used to. */
.mem__card--wait {
  background: rgba(13, 7, 10, 0.05);
  color: var(--fg);
  border: 1px dashed var(--line);
}

/* The waitlist page's form posted nowhere, so it is now three steps and a link
   into the hub. Numbered, because the order matters: no account, no KYC, no
   card. */
.wl__steps {
  display: grid;
  gap: 22px;
  counter-reset: wlstep;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wl__steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 16px;
  align-items: start;
}
.wl__steps li::before {
  counter-increment: wlstep;
  content: counter(wlstep);
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
}
.wl__steps b {
  font-size: 17px;
  font-weight: 500;
  color: var(--fg);
}
.wl__steps span {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* The saving sits under the price, not beside it — a discounted wire fee is
   two facts (what you pay, what you saved) and the second must not compete
   with the first. */
.memtab__save {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  color: var(--accent);
}

/* ---- Personal / Business tabs on /membership ------------------------------
   The jump links became tabs. Selected state has to be visible without colour
   alone, so the selected tab takes the accent border and a filled corner mark
   as well as the tint. */
.memjump__link[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.memjump__link[role="tab"][aria-selected="true"] b::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}
.memjump__link[role="tab"] {
  cursor: pointer;
}
.memjump__link[role="tab"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- Sticky comparison header --------------------------------------------
   Forty rows down a table you can no longer see which column is Premium, which
   is the actual problem with a long comparison — not its length.

   The wrapper's overflow-x:auto computes overflow-y to auto as well, and that
   makes it a scroll container the header would stick inside rather than to the
   viewport. Since the container never scrolls vertically, the header would
   simply never stick. So the overflow only exists where it is needed: below
   900px, where the table genuinely is wider than the screen. Above that the
   wrapper stops being a scroll container and the header can stick to the fixed
   70px nav. */
@media (min-width: 900px) {
  .memtab-wrap {
    overflow: visible;
  }
  .memtab thead th {
    position: sticky;
    /* The nav is 26 + 64 before the hero is cleared and 14 + 64 + 14 after,
       so its underside is 90-92. At 70 the top third of the stuck header sat
       behind it and the column names were clipped. 92 clears the taller
       state and meets it; any more and a band of the scrolling rows shows
       between the two. */
    top: 92px;
    z-index: 2;
    /* Opaque, or the rows scroll through it. */
    background: var(--bg);
  }
  /* The tinted feature column has to keep its tint in the stuck header, and it
     must sit above the plain cells so its edge does not show through. */
  .memtab thead th.is-feature {
    /* The tint over the opaque ground, not instead of it. --accent-soft is
       14% alpha, so as the whole background this was the one header cell the
       rows scrolled straight through -- the figures underneath painted over
       the name of the column they belonged to. */
    background-color: var(--bg);
    background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
    z-index: 3;
  }
}

/* ---- Corridors on a plan card ---------------------------------------------
   A count alone ("10 corridors") cannot be checked by the person reading it,
   so each card names them. Naming all seventeen on Metal would swamp the card,
   so every tier above the first names what it ADDS — which is also the reason
   to move up a tier. */
.mem__corr {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.mem__corr b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}
.mem__corr span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.mem__corr i {
  font-style: normal;
  color: var(--muted-2);
}
/* The dark feature card needs its own edge and text, or the border disappears
   into the panel and the names go unreadable. */
.mem--feature .mem__corr,
.plan--feature .mem__corr {
  border-color: rgba(255, 255, 255, 0.18);
}
.mem--feature .mem__corr b,
.plan--feature .mem__corr b {
  color: #fff;
}
.mem--feature .mem__corr span,
.plan--feature .mem__corr span {
  color: rgba(255, 255, 255, 0.72);
}
.mem--feature .mem__corr i,
.plan--feature .mem__corr i {
  color: rgba(255, 255, 255, 0.5);
}

/* Enterprise has no "/month" on its price and a one-line note, so its price and
   note blocks come out 41px shorter than the other three — which pushed its CTA
   40px above theirs in a row of four. Reserving the taller measurement on both
   lines everything below them up. */
.plan__price {
  min-height: 49px;
}
.plan__note {
  min-height: 52px;
}

/* ---- Feature icons on the plan cards --------------------------------------
   Both ladders now carry the same eight-slot structure, so an icon per line
   lets the eye jump to the row it wants instead of reading four cards top to
   bottom. Grid rather than an inline element: a two-line feature should wrap
   under itself, not under the icon. */
.mem__feats li,
.plan__feats li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

/* The glyph sits in a filled disc, as the layout draws it: the icon is its
   own circle rather than a bare stroke, so the list reads as a column of
   marks down the left of the card instead of grey hairlines. padding plus
   content-box keeps the 16px glyph at 16px inside a 30px disc. */
.feat__ico {
  width: 16px;
  height: 16px;
  padding: 7px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--ink);
  color: var(--smash-lime);
  flex: none;
}

/* On the dark cards a black disc disappears, so it lifts off the panel
   instead. The glyph stays lime on both. */
.mem--feature .feat__ico,
.plan--feature .feat__ico {
  background: rgba(255, 255, 255, 0.1);
  color: var(--smash-lime);
}

/* The "who it is for" line personal was missing, matched to the business one. */
.mem__desc {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---- Corridor pages (send money to …) -------------------------------------
   Two columns on desktop: the worked example on the left, the price table on
   the right. The example is the hook; the table is the proof, and putting them
   side by side means the reader never has to take the headline on trust. */
.corr__grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.corr__copy .memtab-wrap {
  margin-top: 26px;
}
.corr__note {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}
.corr__steps {
  margin-top: 34px;
}

@media (max-width: 900px) {
  .corr__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
}

/* The US flag was the one corridor endpoint with no chip — every page here
   sends FROM dollars, so it appears on both. */
/* Stripes plus a canton, rather than the red disc with a dark corner the first
   attempt produced. At 18px the stripes have to be few and thick to read. */
.fflag--us {
  background: repeating-linear-gradient(
    #b22234 0 14.28%,
    #ffffff 14.28% 28.57%
  );
}
.fflag--us::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 52%;
  height: 50%;
  background: #3c3b6e;
}

/* ---- Corridor hero: copy left, converter right, live route behind ----------
   The widget is the reason someone opened the page, so it sits in the hero
   rather than below it. The globe and its animated route are the same ones the
   business page uses, cut down to the single corridor this page is about. */
.corrhero {
  position: relative;
  overflow: hidden;
  /* Taller, matching the reference: its hero runs most of the first screen
     rather than sitting as a band above the fold. */
  min-height: 88vh;
  /* A column, not a centred row: the hero holds the copy and, on the
     Philippines, a band of figures that has to sit on its floor. Both margins
     are auto so the free space splits above and below the copy — it stays
     optically centred while the band is pushed to the bottom, without either
     being positioned absolutely and able to collide on a short viewport. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 150px 0 56px;
  /* Light, which is what f3-globe.webp was drawn for — on the dark version it
     had to be inverted and brightened to be seen at all. Here it is simply
     itself. */
  background: var(--surface);
  color: var(--fg);
}
/* The copy block: auto above and below, so it centres in whatever the band
   leaves. The band itself carries .corrstats and takes the floor. */
.corrhero > .container:not(.corrstats) { margin-block: auto; }

.corrstats { margin-top: auto; position: relative; z-index: 2; }
.corrstats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.corrstats__cell { padding-right: 26px; }
.corrstats__cell + .corrstats__cell {
  border-left: 1px solid var(--line);
  padding-left: 26px;
}

/* The number is the point, so it is set at display scale and the label is the
   caption under it. Clamped rather than fixed: four cells of 76px type do not
   fit a laptop, and the band has to hold its shape from 1100 up to 2200. */
.corrstats__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 4.1vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--fg);
}
.corrstats__label {
  margin: 10px 0 0;
  font-weight: 600;
  font-size: 15px;
  line-height: 21px;
  color: var(--fg);
}
.corrstats__note {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}
/* Named quietly. A figure this large invites the question of where it came
   from, and the answer should travel with it rather than sit in a footnote. */
.corrstats__src {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
  opacity: .75;
}

/* Four cells of display type need the width. Two up, then one, and the
   dividers move with them so no cell carries a rule into empty space. */
@media (max-width: 1080px) {
  .corrstats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .corrstats__cell:nth-child(odd) { border-left: 0; padding-left: 0; }
  .corrstats__cell:nth-child(n + 3) { border-top: 1px solid var(--line); padding-top: 22px; }
}
@media (max-width: 620px) {
  .corrstats__grid { grid-template-columns: minmax(0, 1fr); }
  .corrstats__cell,
  .corrstats__cell + .corrstats__cell { border-left: 0; padding-left: 0; padding-right: 0; }
  .corrstats__cell:nth-child(n + 2) { border-top: 1px solid var(--line); padding-top: 22px; }
}

.corrhero__map {
  position: absolute;
  inset: 0;
  /* The layer must not swallow the pointer; the canvas inside it takes the
     drag. No mask any more — the globe is meant to be seen whole, so it is
     placed clear of the copy instead of faded out of it. */
  pointer-events: none;
  opacity: 1;
}
/* Dropped from 50% to 58%: at centre the arc ran through the lower third of
   the heading. Moving the whole map rather than dimming the route keeps it as
   visible as it now is. */
.corrhero__map img {
  position: absolute;
  right: -6%;
  top: 58%;
  width: 78%;
  transform: translateY(-50%);
}
.corrhero__map .gsend {
  position: absolute;
  right: -6%;
  top: 58%;
  width: 78%;
  height: auto;
  transform: translateY(-50%);
}
/* route and token styling moved below, with the brighter globe */

.corrhero__grid {
  position: relative;
  /* The grid sits above the canvas and its box spans the whole hero, so it was
     swallowing every drag before it reached the globe — elementFromPoint at the
     globe's centre returned this div, not the canvas. It passes the pointer
     through; the copy and the converter take it back. */
  pointer-events: none;
  display: grid;
  /* One column. The second track held the converter card, which has been
     removed; left in place it reserved 400px plus a 60px gap of empty hero on
     the right and pushed the copy off centre for nothing. */
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

/* The copy used to be bounded by its grid track. With one column it would run
   the full container, so the heading needs a width of its own — .lede already
   caps at 46ch, but the h1 had nothing holding it. */
.corrhero__copy {
  max-width: 620px;
}
/* .h1 carries its own ink colour, which on this dark hero rendered the
   heading black on black — inheriting #fff from .corrhero was never going
   to win against a colour set on the class itself. */
/* The break is explicit now, so balancing would only fight it. */
.corrhero__copy .h1 {
  margin: 0;
  text-wrap: initial;
}
.corrhero__copy .lede {
  margin: 20px 0 30px;
  max-width: 46ch;
}

@media (max-width: 980px) {
  .corrhero {
    min-height: 0;
    display: block;
    padding: 112px 0 76px;
  }
  .corrhero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  /* One column means the copy runs the full width, so the globe is behind the
     text rather than beside it. Shrunk into the top corner and faded, it stays
     an accent; at full size the heading was unreadable over it. */
  .corrhero__map {
    opacity: 0.3;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 76%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 76%);
  }
  .corrhero__map canvas {
    right: -40%;
    top: -6%;
    width: 78%;
    height: 34%;
    transform: none;
  }
}

/* f3-globe.webp is drawn dark for the light business section, so on this hero
   it was dark-on-dark and effectively absent however high the opacity went.
   Inverting turns the landmasses light; the route and token are drawn by us in
   lime and must not be inverted with it. */
.corrhero__map img {
  opacity: 1;
}
.corrhero__map {
  opacity: 1;
}

/* Once globe.js has a context it marks the host and the flat image steps
   aside. Without WebGL2 the class never lands and the image is what shows. */
.corrhero__map.is-gl img {
  display: none;
}
.corrhero__map canvas {
  position: absolute;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  /* Pushed right and shrunk until the globe clears the heading. It sits behind
     the converter card, which is opaque, so the visible crescent is the part
     between the copy and the right edge. */
  right: -16%;
  top: 50%;
  width: 56%;
  height: 120%;
  transform: translateY(-50%);
}

/* The route and the token are the moving part, so they carry more weight than
   the map behind them — a heavier stroke and full-strength lime. */
/* route styling removed with the SVG map; the globe is drawn in GL now */

/* ---- Light hero: the nav has to come with it -------------------------------
   .nav__links is white at rest because every other hero on the site is dark.
   The corridor pages are not, so the bar was white on white and the six links
   simply were not there. Scoped to a body class rather than changed globally,
   since the dark heroes still need the white. */
/* The corridor pages' dark-ink override is gone with the transparent bar —
   the header has its own dark ground now, so it needs no per-page exception. */

/* grabbed state, so the drag reads as one */
.corrhero__map.is-grabbing canvas {
  cursor: grabbing;
}

/* the two things in the hero that are actually interactive */
.corrhero__copy {
  pointer-events: auto;
}

/* India — saffron / white / green with the chakra */
.fflag--in {
  background: linear-gradient(#ff9933 33.3%, #fff 33.3% 66.6%, #138808 66.6%);
}
.fflag--in::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  height: 30%;
  transform: translate(-50%, -50%);
  border: 1.5px solid #000080;
  border-radius: 50%;
}
/* Nigeria — green / white / green */
.fflag--ng {
  background: linear-gradient(
    90deg,
    #008751 33.3%,
    #fff 33.3% 66.6%,
    #008751 66.6%
  );
}

/* ---- Country pins on the globe --------------------------------------------
   DOM chips rather than GL geometry: they carry the same flag styling the rest
   of the site uses, and text in a canvas would be softer than text on the page.
   globe.js projects each country's position every frame and moves them. */
/* left/top/width/height are set from the canvas's measured box in globe.js —
   the canvas is offset and transformed by CSS, so inset:0 put the pins in a
   different coordinate space from the globe they label. */
.gpins {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
/* Under 980px the map drops to 30% and is masked away; labels at that opacity
   are unreadable, and at full opacity they float over nothing. */
@media (max-width: 980px) {
  .gpins {
    display: none;
  }
}
/* A pin is an anchor with no size: globe.js translates it to the projected
   point, and the dot and the label hang off it. One element centred on the
   country would put the label over the country instead of pointing at it. */
.gpin3 {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  will-change: transform, opacity;
}
.gpin3__dot {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* the same green as the rails, so the pin and the route it serves read as
     one system */
  background: #8ac929;
  box-shadow: 0 0 0 3px rgba(138, 201, 41, 0.26);
}
.gpin3__chip {
  position: absolute;
  left: 13px;
  top: -13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 5px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(13, 7, 10, 0.16);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--fg);
  white-space: nowrap;
}
.gpin3__chip .fflag {
  width: 15px;
  height: 15px;
}

/* Badges used as links on the corridor pages. The badge is a static tile
   everywhere else, so it has no affordance of its own; these need one. */
.badge--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition:
    transform 220ms var(--ease),
    box-shadow 220ms var(--ease);
}
.badge--link:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(13, 7, 10, 0.1);
}
.badge--link .badge__title {
  margin-top: 10px;
}

/* The corridor pages put a link inside the small print under a section. */
.corr__note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Panel band carrying real copy ----------------------------------------
   The base band is one word per panel at 58px. These panels carry a heading
   and a sentence, so the block sits at the foot of the panel and is set at a
   readable size instead. Same wipe, same stagger, same slots for footage. */
/* Every .section spaces itself with padding-top: var(--section-y) and no
   bottom padding, so the gap before a section lives at the top of that
   section. .panels is not a .section — it is full-bleed with its own dark
   background — so its head padding sat *inside* the dark block and the block
   itself butted straight onto the cards above it with nothing between them.

   Same fix and same idiom the page already uses for its other full-bleed dark
   band, `.section + .darkfeature`, and the same token, so the gap tracks the
   breakpoints (130 / 96 / 72px) instead of being pinned at the desktop value. */
/* The features band follows a .section and needs the page's own rhythm in
   front of it, since .panels brings its own full-bleed background and would
   otherwise start exactly where the previous block ended.

   The steps band is the opposite case. It follows the hero, and a gap there
   showed a strip of the grey page background between two full-width blocks —
   a seam rather than breathing room. It runs straight off the bottom of the
   hero instead. */
.section + .panels--copy {
  margin-top: var(--section-y);
}

.corrhero + .panels--copy {
  margin-top: 0;
}

.panels--copy .panels__head {
  padding: 78px 0 40px;
}

.panels--copy .panels__head .h2 {
  color: #fff;
}
.panels--copy .panels__head .lede {
  color: rgba(255, 255, 255, 0.68);
  max-width: 56ch;
  margin-top: 12px;
}

.panels--copy .panels__row {
  height: clamp(400px, 56vh, 620px);
}

/* Scrim weighted to the bottom, where the copy now sits, rather than even. */
.panels--copy .panels__panel::after {
  background: linear-gradient(
    180deg,
    rgba(13, 7, 10, 0.18) 0%,
    rgba(13, 7, 10, 0.1) 34%,
    rgba(13, 7, 10, 0.76) 100%
  );
}

.panels--copy .panels__word {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* The base block centres its single word with place-items, which in a column
     flex resolves to align-items: center — the cross axis, so it was centring
     each line horizontally. The body filled the width and looked left-aligned
     while the shorter heading sat in the middle, which read as a mistake
     because it was one. Stretch, so both start at the same edge. */
  align-items: stretch;
  gap: 10px;
  padding: 0 26px 30px;
  text-align: left;
  /* the base rule sets a display face at 58px; the children set their own */
  font-size: inherit;
  letter-spacing: normal;
}

.panels__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 1.5vw, 25px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: #fff;
  text-wrap: balance;
}

.panels__body {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.76);
}

@media (max-width: 980px) {
  .panels--copy .panels__head {
    padding: 64px 0 28px;
  }
  .panels--copy .panels__word {
    padding: 0 20px 24px;
  }
  .panels__body {
    font-size: 13px;
    line-height: 19px;
  }
}

/* Under 760px the base band becomes a 2x2 grid of 3:4 panels and drops its
   fixed height. This variant's height is a more specific selector, so it would
   have survived that reset and left the rows fighting their own aspect-ratio. */
@media (max-width: 760px) {
  .panels--copy .panels__row {
    height: auto;
  }
}

/* ---- Steps band -----------------------------------------------------------
   The same panel treatment as the features band, carrying the four steps of
   sending money. The number is what separates the two at a glance: this band
   is a sequence, the other is a list of things that are all true at once. */
.panels--steps .panels__word {
  gap: 5px;
}

.panels__step {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 980px) {
  .panels__step {
    font-size: 12px;
  }
}

/* ---- Hero footage ---------------------------------------------------------
   The video is a backdrop, not content: it sits under the floating boxes and
   the copy, and the section keeps its black background and h1-herobg.svg
   beneath it. Anything that stops the file arriving — a slow line, a blocked
   request, reduced motion, a narrow screen — leaves the original hero intact
   rather than a hole. */
.fhero__vid,
.wlhero__vid,
.wlhero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Footage is busier than the flat panel it replaces, and this hero sets white
   type over it. The scrim is weighted to the middle, where the heading sits. */
.fhero--video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* --scrim is a single dial on how much of the footage is hidden. It was set
     by measuring text contrast frame by frame rather than by eye: at 1 the
     copy sat at 10-14:1 against a 4.5 threshold, which is far darker than it
     needed to be. See the value chosen below each hero. */
  background:
    /* Top band, deliberately NOT scaled by --scrim. The header sits over the
       hero at about 7% of its height, and it was the old full-height wash that
       kept those links legible. Lightening the scrim took that away and the nav
       went with it, so the band is now its own layer and holds regardless of
       how far the rest is turned down. */
    linear-gradient(
      180deg,
      rgba(6, 4, 12, 0.72) 0%,
      rgba(6, 4, 12, 0.48) 9%,
      rgba(6, 4, 12, 0.18) 17%,
      transparent 26%
    ),
    radial-gradient(
      46% 34% at 50% 49%,
      rgba(6, 4, 12, calc(0.85 * var(--scrim))),
      rgba(6, 4, 12, calc(0.3 * var(--scrim))) 68%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      rgba(6, 4, 12, calc(0.2 * var(--scrim))) 0%,
      rgba(6, 4, 12, calc(0.09 * var(--scrim))) 50%,
      rgba(6, 4, 12, calc(0.24 * var(--scrim))) 100%
    );
}

/* 3.1MB is a lot to spend on a phone for something purely decorative, and the
   crop of a 16:9 clip into a tall hero shows little of it anyway. */
@media (max-width: 760px) {
  .fhero__vid,
  .wlhero__vid {
    display: none;
  }
  /* .wlhero__bg deliberately absent: a 177K still is neither the bandwidth
     problem a multi-megabyte clip is, nor motion, so it stays on phones
     where the footage does not. */
}

@media (prefers-reduced-motion: reduce) {
  .fhero__vid,
  .wlhero__vid {
    display: none;
  }
}

/* Earn hero footage. .wlhero is shared by eight pages, so the scrim hangs off
   a modifier the earn page alone carries — every other .wlhero keeps its flat
   background. Copy here is centred rather than offset, so the scrim is heavier
   through the middle than the personal hero's. */
.wlhero--video::before,
.wlhero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Top band, deliberately NOT scaled by --scrim. The header sits over the
       hero at about 7% of its height, and it was the old full-height wash that
       kept those links legible. Lightening the scrim took that away and the nav
       went with it, so the band is now its own layer and holds regardless of
       how far the rest is turned down. */
    linear-gradient(
      180deg,
      rgba(6, 4, 12, 0.72) 0%,
      rgba(6, 4, 12, 0.48) 9%,
      rgba(6, 4, 12, 0.18) 17%,
      transparent 26%
    ),
    radial-gradient(
      46% 34% at 50% 49%,
      rgba(6, 4, 12, calc(0.85 * var(--scrim))),
      rgba(6, 4, 12, calc(0.3 * var(--scrim))) 68%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      rgba(6, 4, 12, calc(0.2 * var(--scrim))) 0%,
      rgba(6, 4, 12, calc(0.09 * var(--scrim))) 50%,
      rgba(6, 4, 12, calc(0.24 * var(--scrim))) 100%
    );
}

/* Scrim strength per hero.

   The shape changed as well as the strength. The old one leaned on a
   full-height linear wash, which dimmed the whole frame to protect text that
   only occupies its middle. Now the weight is a soft ellipse over the copy and
   the linear is a fraction of what it was, so the corners of the footage come
   through.

   Set by measurement, not by eye: text contrast is sampled against the actual
   video pixels across six frames of each clip, and the strength is the lowest
   that keeps every line at 4.5:1. The binding element is the 14px bold eyebrow
   on /personal, and the lede elsewhere — not the headings, which have enormous
   margin at any setting. */
.fhero--video {
  --scrim: 0.9;
} /* personal:  eyebrow 4.7:1 — the binding line */
.wlhero--video {
  --scrim: 0.45;
}
/* A photograph is brighter and busier than these clips — this one is a
   sunlit crossing with white paint straight through the middle — so it
   needs more scrim than footage does. The page sets its own value; this is
   the floor for anything using the variant. */
.wlhero--photo {
  --scrim: 0.7;
}

/* The shared ellipse is sized for the clips, whose copy sits higher in a
   taller box. On this hero the lede runs from 64% to 80% of the height,
   which is past the ellipse's useful reach: at the lede's lowest line the
   radial contributes about 0.09 alpha, so the scrim there is essentially
   just the base linear and the sunlit crosswalk came through at full
   brightness. Measured against the actual photograph, the worst point under
   the lede was 1.73:1.

   Neither of the usual levers reaches it. Solid white text on the shared
   scrim measures 2.13:1, and turning --scrim all the way up to 1 with solid
   white still only gets to 2.41 -- the ellipse is not over the text, so
   strengthening it does nothing where it is needed. The shape has to change:
   wider, taller, centred on the copy rather than on the box, and falling off
   later.

   Only /rewards uses this variant, so nothing else moves. */
.wlhero--photo::before {
  background:
    /* The nav band, unchanged and still unscaled by --scrim. */
    linear-gradient(
      180deg,
      rgba(6, 4, 12, 0.72) 0%,
      rgba(6, 4, 12, 0.48) 9%,
      rgba(6, 4, 12, 0.18) 17%,
      transparent 26%
    ),
    radial-gradient(
      56% 46% at 50% 55%,
      rgba(6, 4, 12, calc(0.88 * var(--scrim))),
      rgba(6, 4, 12, calc(0.55 * var(--scrim))) 64%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      rgba(6, 4, 12, calc(0.2 * var(--scrim))) 0%,
      rgba(6, 4, 12, calc(0.09 * var(--scrim))) 50%,
      rgba(6, 4, 12, calc(0.24 * var(--scrim))) 100%
    );
}

/* 0.7 is the site's hero lede, and it is what the rest of the heroes can
   afford over footage. Over this photograph it measures 3.68:1 even with the
   ellipse fixed; 0.92 takes it to 5.03. */
.wlhero--photo .wlhero__lede {
  color: rgba(255, 255, 255, 0.92);
}

/* Below about 1024 the ellipse stops working, for two reasons at once: cover
   crops to a narrow slice of the photograph, which swings bright content in
   behind the copy, and the copy grows to fill most of the box, so its edges
   sit out where the ellipse has faded. Measured with the ellipse: 5.30 at
   1023, 4.20 at 900, 3.87 at 768, 2.34 at 375 -- and strength does not
   rescue it, since even --scrim 1.3 only reaches 3.10 at 375.

   A narrow screen wants the flat wash the ellipse replaced: with the copy
   filling the frame there is no "around the text" left to keep bright. At
   0.58 the lede measures 5.47 at 1023, 5.43 at 900, 5.18 at 768 and 5.34
   at 375.

   background-color rather than another layer, and after the shorthand,
   which would otherwise reset it. */
@media (max-width: 1023px) {
  .wlhero--photo::before {
    background: linear-gradient(
      180deg,
      rgba(6, 4, 12, 0.72) 0%,
      rgba(6, 4, 12, 0.48) 9%,
      rgba(6, 4, 12, 0.18) 17%,
      transparent 26%
    );
    background-color: rgba(6, 4, 12, 0.58);
  }
}

/* The hero is far taller than a 16:9 still, so `cover` crops top and bottom.
   Centred, that cut lands on the faces. Pulling the crop up keeps the people
   in frame and pushes the brightest thing in the photograph — the crosswalk
   paint — toward the bottom, away from the lede. */
.wlhero__bg {
  object-position: 50% 32%;
} /* membership: lede 5.1:1  (earn overrides, its clip is darker) */

/* ---- Hero footage panel ---------------------------------------------------
   .hero__shots was sized to a handset (952/1941) because it held three phone
   screenshots on an extruded slab. The footage that replaced them is 16:9, so
   the box changes shape with it. Everything else about the element stays: it
   still reads --tilt and --zoom from sphere.js, so the panel lays back and
   pushes in on scroll exactly as the phone did. */
.hero__lede .hero__shots--video {
  /* Scoped under .hero__lede to match `.hero__lede .hero__shots { height: 100% }`,
     which is (0,2,0) and beat a bare .hero__shots--video.

     Absolutely positioned and centred in .hero__device rather than sized by
     the grid: the element carries its FULL-SCREEN dimensions at all times
     (herofs.js writes them) and is scaled down to sit in the column, so the
     grid must not be asked to accommodate that box. The defaults below are
     what a no-JS or reduced-motion load gets — column-sized and unscaled. */
  position: absolute;
  /* inset first: it is a shorthand and resets top/left, so written after them
     it silently wiped the centring. */
  inset: auto;
  left: 50%;
  top: 50%;
  margin: 0;
  width: var(--cover-w, 415px);
  height: var(--cover-h, 233px);
  /* `.hero__lede .hero__shots` caps height at 620px — right for a phone that
     had to fit the column, wrong for a box that is deliberately screen-sized
     and scaled down. */
  max-height: none;
  aspect-ratio: auto;
  border-radius: calc(22px * (1 - var(--fs, 0)));
  overflow: hidden;
  /* Also scaled by --asm, the assembly progress. The panel is at full opacity
     while its blocks are still converging — otherwise the shadow would fade in
     twice — so without this there is a dark rounded slab sitting on the sphere
     with nothing inside it, a frame arriving before its picture. */
  box-shadow:
    0 40px 90px rgba(6, 4, 22, calc(0.55 * (1 - var(--fs, 0)) * var(--asm, 1))),
    0 0 0 1px
      rgba(255, 255, 255, calc(0.1 * (1 - var(--fs, 0)) * var(--asm, 1)));
  z-index: calc(1 + var(--fs, 0) * 10);
  transform-style: flat;
  /* Its own compositor layer, and nothing animated that would force a
     re-raster — only transform and opacity change. backface-visibility keeps
     Safari from re-promoting the layer mid-scroll, which showed as a hitch
     right as the panel started to open. */
  will-change: transform, opacity;
  backface-visibility: hidden;

  /* Left to right: centre on the column, walk to the screen centre, then grow
     from the resting scale to 1. The lay-back tilt and zoom ride along, faded
     out by (1 - fs) — a frame that owns the whole screen should be square to
     it, not tipped. */
  transform: translate(-50%, -50%)
    translate(
      calc(var(--fs-dx, 0px) * var(--fs, 0)),
      calc(var(--fs-dy, 0px) * var(--fs, 0))
    )
    rotateX(calc(var(--tilt, 0deg) * 0.28 * (1 - var(--fs, 0))))
    scale(
      calc(
        (var(--rest-scale, 1) + (1 - var(--rest-scale, 1)) * var(--fs, 0)) *
          (1 + 0.06 * var(--out, 0))
      )
    );
}

/* While the footage is opening, the hero has to sit above what follows.

   .hero is position:relative with z-index 0 — a stacking context — and the
   sections after it are z-index 1 and 2, so they paint over everything in it,
   the panel included. That is right once the hero is done; it is wrong while
   the video is still growing, because the pale section climbing from the
   bottom shows as a white band under a video that has not filled the screen
   yet. Measured: it appeared 875px of scroll before the video was full.

   herofs.js raises the hero for exactly the stretch between the expansion
   starting and the handover finishing, and drops it again afterwards so the
   page stacks normally. */
.hero.is-covering {
  z-index: 5;
}

/* Never takes input. It is decorative footage — the container is aria-hidden
   and there is nothing on it to click. An earlier version gave it
   pointer-events:auto once it filled the screen, on the theory that the video
   should be clickable; the effect was a full-screen layer sitting on top of
   the page swallowing everything aimed at what was behind it. */
.hero__lede .hero__shots--video,
.hero__lede .hero__shots--video .hero__vid {
  pointer-events: none;
}

/* The copy and the cards arrive AFTER the footage, not before it.

   This used to read `1 - var(--hero-fs)` — the copy was on screen first and
   stepped aside as the video grew over it. The order is now sphere, footage,
   copy, so this is the ramp that was on .hero__lede, moved down to the two
   children it was for.

   The fallback inside var() is the whole no-JS story: herofs.js writes
   --copy-op, and where it does not run — a phone, reduced motion, a script
   that failed — the original scroll ramp applies unchanged. Written this way
   round rather than as a multiply so the curve is not squared when both are
   in play.

   No transition: --copy-op is already eased frame by frame in herofs.js, and a
   CSS transition on top of an already-smooth value reads as lag, not polish. */
.hero__lede .hero__copy,
.hero__lede .hero__cards {
  opacity: var(
    --copy-op,
    clamp(
      0,
      calc((var(--hero-p, 0) - var(--lede-in, 0.6)) / var(--lede-len, 0.18)),
      1
    )
  );
  will-change: opacity;
}

/* ── The footage beat on small screens ─────────────────────────────────────
   980px, matching where .hero__grid stacks — not the 900 this block used to
   carry. Below 980 the copy stops being a sticky transparent overlay on the
   stage and becomes an opaque section in flow, a full screen further down, and
   that is the layout fact everything here answers to.

   The panel and the typed line live inside .hero__lede. On desktop that layer
   is sticky and transparent, so a panel positioned inside it is already over
   the sphere. Here the layer sits 95vh below and is opaque, so a panel
   positioned inside it would be a screen off the bottom of the viewport during
   the beat it is supposed to own — and behind an opaque background when it got
   there. Fixed positioning takes both out to the viewport, which is where the
   footage beat actually happens.

   Nothing on the path is transformed, so fixed resolves against the viewport
   rather than against an ancestor. The panel's own transform does not affect
   that; it applies after the positioning. */
@media (max-width: 980px) {
  .hero__lede .hero__shots--video {
    position: fixed;
    /* The lay-back tilt goes with the perspective below. sphere.js writes
       --tilt inline on .hero__device and an inline value beats a rule, so it
       is overridden here on the panel itself, where the transform reads it. */
    --tilt: 0deg;
  }

  /* This is what made `fixed` above not actually fix.

     .hero__device carries perspective: 2400px for the lay-back, and an element
     with a perspective becomes the containing block for fixed descendants —
     so the panel resolved against the device and scrolled with the page
     exactly as an absolute one would. Measured: its top ran 1790 -> -831
     across the track instead of holding at 0.

     Dropping it costs nothing here. The perspective existed to foreshorten a
     tilt that this layout no longer performs. */
  .hero__lede .hero__device {
    perspective: none;
  }

  /* The typed line gets the same treatment, but it cannot be written here —
     .hero__vidline is defined further down this file, so a rule at this point
     loses to it on source order at equal specificity. It is next to that
     definition instead.

     The slot the panel used to occupy in the stacked column. With the panel
     fixed it holds nothing, and at min(56vh, 460px) it was a screen-and-a-half
     of empty gap between the headline and the cards. Collapsed rather than
     removed: herofs.js measures this box for the panel's resting width, and a
     display:none element measures zero, which would scale the panel to nothing. */
  .hero__lede .hero__device {
    height: 0;
    min-height: 0;
  }
}

/* Portrait screens crop the 16:9 frame hard — a phone keeps about a quarter of
   its width. Biased above centre so that quarter contains the subject's head
   rather than whatever is halfway down the frame. */
@media (orientation: portrait) {
  .hero__vid {
    object-position: 50% 34%;
  }
}

.hero__vid {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* The assembling frame. Sits exactly over the video and matches it edge for
   edge, so the handover at the end of the assembly is a swap between two
   identical images rather than a dissolve between two different ones. */
.hero__vidmosaic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  /* poster only — the element keeps its box, so the layout does not shift */
  .hero__vid {
    visibility: hidden;
  }
  .hero__lede .hero__shots--video {
    background: url("/assets/home-hero-poster.jpg") 50% 50% / cover no-repeat;
  }
}

/* ---- Line over the expanded footage ---------------------------------------
   Rides --hero-fs, the same value that fades the copy out: as the footage
   takes the screen this takes its place. Sits above the panel and takes no
   input — the panel is decorative and so is this. */
.hero__vidline {
  position: absolute;
  inset: 0;
  z-index: 12;
  margin: 0;
  display: grid;
  place-items: center;
  padding-inline: 6vw;
  text-align: center;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(6, 4, 20, 0.55);
  /* In on --hero-fs with the footage, out on --hero-out with it. The second
     factor is what stops the line outliving the video and sitting over the
     starfield by itself. */
  opacity: calc(var(--hero-fs, 0) * (1 - var(--hero-out, 0)));
}

/* One inline box holding both the text and the caret. Without it the grid
   treats the span and the caret as two separate items and stacks them in two
   rows, parking the caret under the line rather than after its last letter. */
.hero__vidline__in {
  display: inline;
}

.hero__vidline__caret {
  display: inline-block;
  width: 0.06em;
  height: 0.92em;
  margin-left: 0.08em;
  translate: 0 0.12em;
  background: currentColor;
  animation: vidcaret 1s steps(1, end) infinite;
}

@keyframes vidcaret {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__vidline__caret {
    animation: none;
  }
}

/* Small screens run the sequence too now, so this is no longer hidden — it is
   repositioned. Fixed for the same reason the panel is: .hero__lede is an
   opaque section a full screen below the sphere down here, and a line
   positioned inside it would be off the bottom of the viewport during the beat
   it belongs to.

   Placed beside the base rule rather than up with the panel's media block,
   because at equal specificity the later rule wins and the base rule is here.

   980px, matching where the hero grid stacks. */
@media (max-width: 980px) {
  .hero__vidline {
    position: fixed;
    inset: 0;
    /* the desktop clamp tops out at 58px, which is four words to a line here */
    font-size: clamp(20px, 6.4vw, 34px);
    padding-inline: 8vw;
  }
}

/* ── Animated corridor map ─────────────────────────────────────────────────
   A halftone world with arcs running into the destination, a pulse travelling
   each arc and a ring breathing at every node. worldmap.js paints it into a
   canvas; the dot grid itself is baked by gen_worldmap.py out of the same
   coastlines the hero globe uses.

   The colours are custom properties rather than literals so a placement on a
   dark section can restate them without a second rule for every part. */
.wmap {
  --wm-dot: rgba(84, 98, 230, 0.3);
  --wm-arc: rgba(84, 98, 230, 0.4);
  --wm-pulse: #5462e6;
  --wm-node: #4450dd;

  position: relative;
  width: 100%;
  /* The baked grid is 190x95, so this is the map's own proportion — any other
     aspect would letterbox it inside its own box. Capped in height because on
     a wide desktop the full ratio is taller than anything else on the page. */
  aspect-ratio: 190 / 95;
  max-height: 560px;
  margin-inline: auto;
  max-width: 1240px;
}

.wmap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.on-dark .wmap,
.wmap--dark {
  --wm-dot: rgba(255, 255, 255, 0.16);
  --wm-arc: rgba(150, 165, 255, 0.34);
  --wm-pulse: #9fb0ff;
  --wm-node: #b9c5ff;
}

/* The --wm-* tokens above are keyed to which VARIANT of the map this is, not
   to which theme the page is in — .wmap--dark means "on a dark section", and
   it predates dark mode. So in dark mode the ordinary map and the corridor
   hero map both kept their indigo: --wm-dot on the hero is 17% indigo, which
   over a near-black page composites to about rgb(25,27,53) and is a map you
   cannot see.

   Dark mode wants what .wmap--dark already wants, so it borrows those values.
   The hero keeps its lighter touch relative to the section map, because it
   sits behind the headline and has always been the quieter of the two. */
:root[data-theme="dark"] .wmap {
  --wm-dot: rgba(255, 255, 255, .16);
  --wm-arc: rgba(150, 165, 255, .34);
  --wm-pulse: #9fb0ff;
  --wm-node: #b9c5ff;
}
:root[data-theme="dark"] .wmap--hero {
  --wm-dot: rgba(255, 255, 255, .11);
  --wm-arc: rgba(150, 165, 255, .26);
}

.wmapsec__head {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 26px;
}

.wmapsec__head .lede {
  margin-inline: auto;
}

@media (max-width: 700px) {
  /* Portrait boxes crop a 2:1 map to almost nothing. Let it be shorter than
     its natural ratio and lose a little of the empty ocean instead. */
  .wmap {
    aspect-ratio: 4 / 3;
  }
}

/* The corridor hero's artwork, in place of the globe that used to sit here.

   Full-bleed rather than parked to one side. The globe was a compact object
   and could be placed right of the copy; a world map is 2:1, and at any width
   large enough to read it runs past both edges of the hero. So it fills the
   layer instead and the copy sits on top of it.

   worldmap.js fits the map inside whatever box it is given and centres it, so
   nothing here has to know the aspect — only how big the box is.

   The hero is LIGHT, so this takes the light palette. Worth stating because
   the first version assumed dark and rendered white-on-white: nearly nothing
   was visible except a few arcs in the top corner. */
.wmap--hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;

  --wm-dot: rgba(84, 98, 230, 0.17);
  --wm-arc: rgba(84, 98, 230, 0.3);
  --wm-pulse: #5462e6;
  --wm-node: #4450dd;

  /* No mask. The map sits behind the heading, and any left-to-right fade works
     against that — two earlier versions both pushed the visible map into the
     right of the hero, which is what read as off-centre. The dots carry a low
     enough alpha to hold type on their own. */
}

@media (max-width: 980px) {
  /* Not shown on a stacked hero, and this is a shape problem rather than a
     preference. The map is 2:1; the hero here is a tall column of heading,
     paragraph, button and pricing card. Fitted into that box the map becomes a
     thin band a couple of hundred pixels high, centred vertically — which puts
     it behind the card, where it reads as a faint smear rather than a map.

     The alternatives were worse: zooming it to fill crops away every route
     except the two nearest the destination, and stretching it distorts the
     coastlines. Artwork that cannot be seen properly is better left out. */
  .wmap--hero {
    display: none;
  }
}

/* ── Language switcher ─────────────────────────────────────────────────────
   lang.js injects this into .nav__right, ahead of the Login button. Dark panel
   on a light or dark header alike — it reads as a control rather than as part
   of the page, which is what a language picker should be. */
.langsw {
  position: relative;
  flex: 0 0 auto;
}

.langsw__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(13, 7, 10, 0.14));
  background: transparent;
  /* White, not inherited. The bar's links sit at 85% so the active page can be
     full white and read as picked out from the rest — but these two are
     controls, not one of a set, and inheriting that dimming just made them
     look disabled. The bar behind them is dark on every page. */
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--dur, 0.2s) var(--ease, ease),
    border-color var(--dur, 0.2s) var(--ease, ease);
}

.langsw__btn:hover {
  background: rgba(127, 127, 140, 0.12);
}
.langsw__btn:focus-visible {
  outline: 2px solid var(--accent, #5462e6);
  outline-offset: 2px;
}

/* The header sits on a dark hero on some pages and a light one on others, and
   inherits its ink from .on-dark. The border has to follow it or it vanishes
   against one of the two. */
.on-dark .langsw__btn,
.nav.is-dark .langsw__btn,
.langsw__btn { border-color: rgba(255, 255, 255, .28); }
.on-dark .langsw__btn:hover,
.nav.is-dark .langsw__btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.langsw__flag {
  font-size: 17px;
  line-height: 1;
  /* Emoji flags carry their own colour; stop a coloured button tinting them. */
  -webkit-text-fill-color: initial;
}

.langsw__label {
  white-space: nowrap;
}

.langsw__chev {
  display: block;
  width: 14px;
  height: 14px;
  transition: transform var(--dur, 0.2s) var(--ease, ease);
}
.langsw__chev svg {
  display: block;
  width: 100%;
  height: 100%;
}
.langsw.is-open .langsw__chev {
  transform: rotate(180deg);
}

.langsw__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  min-width: 232px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: 16px;
  background: #17171b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  /* Twelve languages is taller than a short viewport; scroll rather than run
     off the bottom of the screen. */
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.langsw__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  /* Was .78, which on this panel read as disabled rather than as unselected.
     The tick and the brighter white carry the current choice; the rest only
     need to be legible, and legible here is close to white. */
  color: rgba(255, 255, 255, .92);
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}

.langsw__item:hover,
.langsw__item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
}

.langsw__item.is-on {
  color: #fff;
}

.langsw__name {
  flex: 1 1 auto;
}

/* The tick holds its space whether or not it is shown, so the labels do not
   shuffle sideways as the selection moves down the list. */
.langsw__tick {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--lime, #d8f34a);
  color: var(--fg);
  visibility: hidden;
}
.langsw__tick svg {
  width: 11px;
  height: 11px;
  display: block;
}
.langsw__item.is-on .langsw__tick {
  visibility: visible;
}

@media (max-width: 900px) {
  /* Beside a hamburger there is no room for a language name. The flag alone
     still says which one is active, and the menu carries the full labels. */
  .langsw__label {
    display: none;
  }
  .langsw__btn {
    padding: 0 10px;
    gap: 6px;
  }
  .langsw__menu {
    left: auto;
    right: 0; /* or it runs off the right edge of a phone */
  }
}

/* While a page is being machine-translated. Deliberately faint: the English is
   still readable underneath and the swap usually lands inside a second, so a
   spinner or an overlay would be more disruptive than the wait. */
:root.is-translating .nav__right {
  cursor: progress;
}
:root.is-translating .langsw__btn {
  opacity: 0.6;
  pointer-events: none;
}

/* ── Dark theme ────────────────────────────────────────────────────────────
   Everything here is a token override. No component is restyled, because a
   dark mode built by restating rules is a second stylesheet that drifts from
   the first — the point of the token pass above was to make this a list of
   colours rather than a list of exceptions.

   Two things are deliberately NOT inverted:

   - --ink. It is a dark surface, not a text colour. The bands that use it are
     dark on purpose in both themes; flipping it would turn 41 dark sections
     white. It is lifted slightly here so those bands still read as raised
     panels against a darker page rather than merging into it.

   - `color: #fff` on .on-dark sections, of which there are about a hundred.
     White text on a dark band is correct in both themes and was left alone.

   Set on :root by theme.js, which also honours the system setting on a first
   visit. The attribute is on <html> rather than <body> so the page background
   is right before the body exists. */
:root[data-theme="dark"] {
  --bg: #0d0d11;
  --surface: #16161c;
  --cream: #1b1a20;
  --ink: #1f1f27; /* a raised dark panel, not near-black */
  --ink-2: #d6d6dd;
  --fg: #f2f2f5;
  --text: #a2a2ac;
  --muted: #8e8e98;
  --muted-2: #83838d;
  --line: #2b2b34;
  --line-soft: #23232b;
  /* Lifted off the light-mode indigo: #5462e6 on #0d0d11 is close to the
     minimum contrast for body-size text, and it is used for links. */
  --accent: #838dff;
  --accent-soft: rgba(131, 141, 255, 0.14);
  /* --on-fixed-light is deliberately NOT overridden: the lime and the white
     pill are the same colour in both themes, so their ink is too. */
  --on-accent: #0d0d11;
  --on-accent-soft: rgba(13, 13, 17, 0.78);
  color-scheme: dark;
}

/* Photographs and screenshots are lit for a white page. Taking the very
   brightest edge off stops them glaring out of a dark one; anything stronger
   starts to look like a fault in the image. */
:root[data-theme="dark"] img:not([src$=".svg"]):not(.nav__logo) {
  filter: brightness(0.92);
}

/* Brand strip — beat the global dark photo filter; logos are not photographs. */
:root[data-theme="dark"] .brandstrip__head .h2 {
  color: var(--fg);
}

:root[data-theme="dark"] .brandstrip__head .lede {
  color: var(--text);
}

:root[data-theme="dark"] .brandstrip .marquee__track img {
  filter: brightness(0) invert(1);
  opacity: 0.82;
}

:root[data-theme="dark"] .section.acc {
  --acc-border: var(--line);
  --acc-muted: var(--text);
  --acc-ink: var(--fg);
  --acc-toggle-bg: rgba(255, 255, 255, 0.16);
  --acc-toggle-hover: #fff;
  --acc-ghost: rgba(255, 255, 255, 0.45);
  --acc-shadow-flag: 0 4px 4px rgba(0, 0, 0, 0.45);
}

:root[data-theme="dark"] .section.overview {
  --overview-text-muted: var(--text);
  --overview-card-border: var(--line);
}

:root[data-theme="dark"] .section.overview .overview__text .h2,
:root[data-theme="dark"] .section.overview .counters__n {
  color: var(--fg);
}

:root[data-theme="dark"] .section.overview .overview__panel {
  background: var(--overview-purple);
}

:root[data-theme="dark"] .section.overview .overview__float,
:root[data-theme="dark"] .section.overview .overview__float strong,
:root[data-theme="dark"] .section.overview .overview__float em {
  color: #fff;
}

/* Trio is an .on-dark band in both themes — pin the white CTAs against
   .btn--light token inversion, and skip the global photo dim on already-dark
   product shots. */
:root[data-theme="dark"] .section.trio .tcard__cta.btn {
  background: #fff;
  color: #000;
}

:root[data-theme="dark"] .section.trio .tcard__cta .btn__badge {
  background: #0d070a;
  color: #fff;
}

:root[data-theme="dark"] .section.trio img {
  filter: none;
}

/* Big marquee is an on-dark band in both themes — pin ink/muted against
   token inversion. No photographs, so the global img filter does not apply. */
:root[data-theme="dark"] .bigmarquee.bigmarquee--figma {
  --bigmarquee-bg: #000000;
  --bigmarquee-ink: #ffffff;
  --bigmarquee-muted: #969696;
}

@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"]
    .section.acc
    .accitem__head:hover
    .accitem__toggle-icon,
  :root[data-theme="dark"]
    .section.acc
    .accitem__head:focus-visible
    .accitem__toggle-icon {
    filter: brightness(0);
  }
}

/* The theme is applied before paint, so there is nothing to transition on
   load — but a switch mid-session should not be a hard cut. Scoped to the two
   properties that actually carry the change, so it cannot slow anything else
   down. */
:root.theme-ready body,
:root.theme-ready .nav {
  transition:
    background-color 220ms var(--ease),
    color 220ms var(--ease);
}

/* f3-globe.webp is pure black dots on transparency — drawn for the light
   business section, where black on near-white reads well. In dark mode the
   section goes near-black and the dots go with it: black on black, a map that
   is simply not there.

   Inverting is the whole fix, because the file carries no background of its
   own: the dots flip to white and the 90% of the image that is transparent
   stays transparent. Scoped to the img so the lime routes and the flag
   markers, which are separate SVG and DOM on top, keep their colours.

   This has to sit after the rule above and carry the same specificity to beat
   it — filter is one property, so brightness(.92) and invert(1) cannot both
   apply from two rules, and the glare-reduction that photographs want is not
   something a black-dot map needs anyway. Hence the repeated :not(), which is
   here for weight rather than for what it excludes.

   Held below full strength for the same reason --wm-dot is: white at full
   alpha on a near-black page glares, where black on a light page did not. */
:root[data-theme="dark"] .greach__map img:not([src$=".svg"]),
:root[data-theme="dark"] .corrhero__map img:not([src$=".svg"]) {
  filter: invert(1);
  opacity: .66;
}

/* Nothing transitions while the theme is changing.

   The fade this replaced was pleasant and wrong: any element transitioning
   `color` starts one when the tokens change, and an off-screen element's
   transition can stall at its start value and never complete — leaving it in
   the old theme's colour for good. theme.js adds this for the duration of the
   swap, so the change lands in one frame with nothing left mid-flight. */
:root.theme-switching,
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after {
  transition: none !important;
  animation-duration: 0s !important;
}

/* The light/dark toggle. Sits beside the language switcher, and matches it:
   same height, same pill, same border treatment on light and dark headers. */
.themesw {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: #fff;                    /* see .langsw__btn — a control, not a link */
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.themesw svg {
  width: 17px;
  height: 17px;
  display: block;
}
.themesw:hover {
  background: rgba(127, 127, 140, 0.12);
}
.themesw:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.on-dark .themesw,
.nav.is-dark .themesw,
.themesw { border-color: rgba(255, 255, 255, .28); }

@media (max-width: 900px) {
  /* Beside a hamburger and a flag there is not room for a third pill at full
     size; the icon still carries the whole meaning. */
  .themesw {
    width: 36px;
    height: 36px;
  }
}

/* The corridor pages swap in the dark wordmark, because their hero is white in
   light mode (see gen_corridor.py). In dark mode that leaves a dark logo on a
   dark header — present, and effectively invisible. Swap the white one back.

   content: url() rather than a filter: the mark is a coloured lockup, and
   inverting it turns the lime green magenta. */
/* The corridor pages swapped in the dark wordmark for their white hero. With
   the bar always dark the white mark is always right, so the swap is gone. */

/* ── Company mega-menu ─────────────────────────────────────────────────────
   nav-mega.js upgrades the Company item in the bar into a nine-dot launcher
   and appends the panel to .nav__inner. */
.navmega { position: static; }          /* the panel anchors to .nav__inner */

.navmega > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.navmega__dots {
  display: block;
  width: 15px;
  height: 15px;
  opacity: .55;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.navmega__dots svg { display: block; width: 100%; height: 100%; }
.navmega:hover .navmega__dots,
.navmega.is-open .navmega__dots { opacity: 1; }
.navmega.is-open .navmega__dots { transform: rotate(45deg); }

.navmega__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  width: min(920px, calc(100vw - 40px));
  padding: 26px 30px 28px;
  border-radius: 20px;
  background: #17171b;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
}

/* Bridges the gap between the bar and the panel. Without it the pointer
   crosses dead space on the way down and the menu closes under the cursor —
   the CLOSE_MS grace in the script covers the timing, this covers the
   geometry, and both are needed. */
.navmega__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.navmega__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 28px;
}

.navmega__h {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}

.navmega__col ul { list-style: none; margin: 0; padding: 0; }
.navmega__col li + li { margin-top: 2px; }

.navmega__col a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin-inline: -10px;
  border-radius: 9px;
  color: rgba(255, 255, 255, .80);
  font-size: 14.5px;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.navmega__col a:hover,
.navmega__col a:focus-visible {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  outline: none;
}

.navmega__badge {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--smash-lime, #ceff1c);
  color: #0d070a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .navmega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
  .navmega__col + .navmega__col + .navmega__col { margin-top: 14px; }
}

@media (max-width: 980px) {
  /* The bar itself is gone below this width — menu.js takes over with the
     drawer, which already lists these destinations. A hover panel with no
     bar to hang from would be orphaned. */
  .navmega__panel { display: none; }
  .navmega__dots { display: none; }
}

/* ── The nav's own bar ─────────────────────────────────────────────────────
   The header used to be fully transparent, so its ink had to follow whatever
   scrolled underneath — white over the hero, dark over the white sections
   below. nav-ink.js measured that and flipped it.

   A bar removes the question. The nav now carries its own dark ground on every
   page, so the text is white everywhere and the reader gets the same header on
   /personal that they get on the home page.

   Contained and rounded rather than edge to edge: the heroes on this site are
   inset by --gutter and rounded at the bottom, and a full-bleed bar above an
   inset hero reads as two unrelated pieces of furniture.

   Slightly transparent with a blur, so what is behind it still registers as it
   passes under — a solid slab would sit on the page rather than over it. */
.nav__inner {
  background: rgba(20, 20, 25, .78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  padding-inline: 22px;
  padding-block: 9px;
}

/* Everything in the bar is now on a dark ground, always. */
.nav__links,
.nav__login { color: rgba(255, 255, 255, .85); }
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: #fff; }
.nav__toggle span { background: #fff; }
.nav__logo { content: normal; }        /* the white wordmark, on every page */

/* In dark mode the page is already near-black, so a dark bar on it is not a
   bar — it measured 1.0 against the page behind it, which is the transparent
   header again by another route. The bar lifts instead of deepens: light
   enough to read as a surface sitting above the page, dark enough that the
   white text on it stays around 14:1. */
:root[data-theme="dark"] .nav__inner {
  background: rgba(46, 46, 55, .82);
  border-color: rgba(255, 255, 255, .14);
}


/* Two literal greys in the .sv4 caption that never flip. #7c7c7c and #6f6f6f
   are chosen against a near-white page; on the dark one they land at 3.86,
   under the 4.5 that body text needs. Overridden only in dark, so light mode
   renders exactly as it did. */
:root[data-theme="dark"] .sv4__cap { color: var(--text); }
:root[data-theme="dark"] .sv4__cap span { color: var(--muted); }


/* The inactive plan toggle resolved to the light --text on a dark surface —
   2.45 against the 4.5 a 15px label needs. Restated in dark so it cannot pick
   up a stale value whatever else is in the cascade. */
:root[data-theme="dark"] .ptoggle__btn:not(.is-on) { color: var(--text); }


/* ── Newsroom index (Soltio blog-two) ──────────────────────────────────────
   The card itself is .ncard, which already existed and already matches the
   template — image, date, title, then a divided author row. Only the page
   around it is new: a centred section heading and the pager.

   Measured off the reference rather than guessed: the grid is three columns
   with a 30px gutter, and the section runs 121px/130px of vertical padding. */
.newsidx__h {
  text-align: center;
  max-width: 20ch;
  margin-inline: auto;
}

.newsidx .posts {
  gap: 30px;
  margin-top: 52px;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 56px;
}

.pager__count {
  font-size: 15px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.pager__next {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pager__next svg { width: 17px; height: 17px; }
.pager__next:hover:not(:disabled) { background: var(--bg); transform: translateX(2px); }
.pager__next:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Disabled rather than hidden: the control belongs to the layout, and a reader
   who can see there is a "1 / 1" should be able to see why nothing follows. */
.pager__next:disabled { opacity: .38; cursor: default; }

@media (max-width: 980px) {
  .newsidx .posts { gap: 22px; margin-top: 34px; }
  .newsidx__h { max-width: none; }
}

/* ── Newsroom category tabs ────────────────────────────────────────────────
   A pill rail between the hero and the grid. Measured off the reference: a
   rounded container with 7px/8px of padding, each tab a pill of its own at
   16px/500 with 32px of side padding, the active one filled. */
.ntabs__wrap { margin-top: 44px; }

.ntabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  /* Five pills do not fit a phone. Scroll the rail rather than wrapping it to
     two rows, which turns a filter into a paragraph. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ntabs::-webkit-scrollbar { display: none; }

.ntab {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  height: 44px;
  padding: 0 28px;
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.ntab:hover:not(.is-on) { background: var(--bg); }
.ntab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ntab.is-on {
  background: var(--accent);
  /* --on-accent, not #fff: the accent lightens in dark mode and white on it
     drops below the contrast a 16px label needs. */
  color: var(--on-accent);
}

/* Media inquiries.

   Holds the same contact-one layout the contact page uses — the .ci info bar
   and the .cmain two-column split — so this is a plain container and not a
   card. It was a card, 640px wide with 40px of padding, back when it held
   three lines of text; left in place it squeezed a two-column form into about
   230px. The components inside bring their own width and spacing. */
.npress { margin-top: 52px; }

.nempty { margin-top: 52px; color: var(--text); }

@media (max-width: 980px) {
  .ntabs__wrap { margin-top: 30px; }
  .ntab { padding: 0 20px; height: 40px; font-size: 15px; }
  .npress { padding: 28px; margin-top: 34px; }
}

/* `hidden` is a UA rule (display:none) and loses to any author `display`.
   .ncard is display:grid and .posts is display:grid, so setting .hidden on
   them from news-tabs.js changed the attribute and nothing else — the filter
   ran, reported the right counts, and every card stayed on screen.
   These are the elements that script hides, so these are the ones that need
   to actually go. */
.ncard[hidden],
.posts[hidden],
.npress[hidden],
.nempty[hidden],
.pager[hidden] { display: none !important; }

/* Market news cards. Same .ncard as the rest of the newsroom, plus a source
   badge — the tab already says these are not ours, and the badge says it again
   at the point a reader is deciding whether to click. */
.nmarket[hidden] { display: none !important; }

.ncard__src {
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-right: 8px;
}

/* The external cards have no avatar; the badge takes that slot. */
.ncard--ext .ncard__by i { display: none; }

/* No arrow on the title any more. It said "this leaves the site", and a plain
   click now opens the summary here instead — the arrow moved to the button
   inside the dialog, which is the thing that really does leave. */

/* A feed item may have no image; the card must not collapse around the gap. */
.ncard--ext { align-content: start; }

.nmarket__status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 40px 0;
  text-align: center;
  color: var(--text);
}

/* ── Market news detail ────────────────────────────────────────────────────
   A native <dialog>, so focus trapping, Escape and the inert background come
   from the platform rather than from code that has to remember them.

   It shows what the feed provides and says so. The article body is not in the
   feed and is not ours to republish, so the dialog's job is to give the reader
   enough to decide, then hand them to the publisher. */
.ndlg {
  width: min(620px, calc(100vw - 32px));
  max-height: min(86vh, 760px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--fg);
  overflow: auto;
  overscroll-behavior: contain;
}
.ndlg::backdrop { background: rgba(6, 4, 16, .58); backdrop-filter: blur(3px); }

.ndlg__x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  /* Sits over the image, so it carries its own contrast rather than borrowing
     the theme's — the photograph underneath is a different colour every time. */
  background: rgba(13, 7, 10, .55);
  color: #fff;
  cursor: pointer;
}
.ndlg__x svg { width: 15px; height: 15px; }
.ndlg__x:hover { background: rgba(13, 7, 10, .78); }
.ndlg__x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.ndlg__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg); }
.ndlg__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ndlg__media[hidden] { display: none; }

.ndlg__body { padding: 26px 28px 28px; }

.ndlg__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text);
}

.ndlg__h {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--fg);
}

.ndlg__sum { margin: 0 0 16px; font-size: 16px; line-height: 1.65; color: var(--text); }

.ndlg__note {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.ndlg__go::after { content: "↗"; margin-left: 8px; font-size: .85em; }

@media (max-width: 700px) {
  .ndlg__body { padding: 20px 20px 24px; }
}

/* ==========================================================================
   Homepage · Earn / darkfeature (Figma Staking + Floating 2)
   Scoped to .darkfeature--figma so smashxcard / personal .darkfeature stay
   unchanged. Geometry and motion from old-v3 rt-feature-v6; fonts map to
   current --font-display / --font-body (no Manrope).
   ========================================================================== */

.darkfeature.darkfeature--figma {
  --fv6-bg: #000000;
  --fv6-card: #1e1e24;
  --fv6-muted: #929292;
  --fv6-muted-2: #909090;
  --fv6-muted-3: #a7a7a7;
  --fv6-line: #555555;
  --fv6-line-2: #545454;
  --fv6-input-bg: #242424;
  --fv6-input-border: #868686;
  --fv6-green: #4cd964;
  --fv6-green-soft: rgba(76, 217, 100, 0.15);
  --fv6-lime-a: #ceff1c;
  --fv6-lime-b: #82ff1c;
  --fv6-purple: #6232ff;
  --fv6-inner-grad: linear-gradient(124.38deg, #40424d 0.06%, #141417 99.94%);
  --fv6-reserves-grad: radial-gradient(
    65.8% 131.75% at 50% 181.75%,
    #372576 0.97%,
    #6232ff 15.04%,
    #1e1e24 100%
  );
  --fv6-gap: 25px;
  --fv6-stack-gap: 10px;
  --fv6-anim: 600ms;
  --fv6-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --fv6-earn-dur: 650ms;
  --fv6-earn-gap: 15px;
  --fv6-earn-travel: 38px;
  --fv6-earn-float-dur: 4s;
  --fv6-earn-float-ease: ease-in-out;

  margin-top: 50px;
  padding: 50px 0;
  background: var(--fv6-bg);
  border-radius: var(--r-lg);
  color: var(--fv6-muted);
}

.darkfeature.darkfeature--figma .darkfeature__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.darkfeature.darkfeature--figma .darkfeature__title {
  display: block;
  margin: 0;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 2.5vw, 36px);
  line-height: clamp(34px, 3.05vw, 44px);
  letter-spacing: 0;
  text-align: center;
  text-wrap: unset;
  color: #ffffff;
}

.darkfeature.darkfeature--figma .darkfeature__lede {
  margin: 10px 0 0;
  max-width: none;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  color: var(--fv6-muted);
}

.darkfeature.darkfeature--figma .stakew {
  margin-top: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px;
  gap: 0;
  background: var(--fv6-inner-grad);
  border: 1px solid var(--fv6-line);
  border-radius: var(--r-card);
}

.darkfeature.darkfeature--figma .stakew__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fv6-stack-gap);
  margin-bottom: 30px;
}

.darkfeature.darkfeature--figma .stakew__coin {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--fv6-stack-gap);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  color: #ffffff;
}

.darkfeature.darkfeature--figma .stakew__coin img {
  width: 40px;
  height: 40px;
  max-width: none;
  object-fit: contain;
}

.darkfeature.darkfeature--figma .stakew__apy {
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--fv6-green-soft);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: #ffffff;
}

.darkfeature.darkfeature--figma .stakew__field {
  display: block;
  width: 100%;
  margin: 0;
}

.darkfeature.darkfeature--figma .stakew__label {
  display: block;
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--fv6-muted);
}

.darkfeature.darkfeature--figma .stakew__input {
  display: flex;
  align-items: baseline;
  gap: var(--fv6-stack-gap);
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 5px 10px;
  background: var(--fv6-input-bg);
  border: 1px solid var(--fv6-input-border);
  border-radius: 10px;
}

.darkfeature.darkfeature--figma .stakew__input:focus-within {
  border-color: var(--fv6-input-border);
  background: var(--fv6-input-bg);
}

.darkfeature.darkfeature--figma .stakew__currency {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.2vw, 32px);
  line-height: 1;
  color: #979797;
}

.darkfeature.darkfeature--figma .stakew__amount {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.2vw, 32px);
  line-height: 1;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.darkfeature.darkfeature--figma .stakew__meter {
  width: 100%;
  margin: 0;
}

.darkfeature.darkfeature--figma .stakew__meter-track {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  height: 7.6px;
  border-radius: 50px;
  background: #555555;
  overflow: hidden;
}

.darkfeature.darkfeature--figma .stakew__meter .stakew__meter-track > i,
.darkfeature.darkfeature--figma
  .stakew__meter
  .stakew__meter-track
  > i#stakeBar,
.darkfeature.darkfeature--figma .is-in .stakew__meter .stakew__meter-track > i,
.darkfeature.darkfeature--figma
  .is-in
  .stakew__meter
  .stakew__meter-track
  > i#stakeBar {
  display: block;
  height: 100%;
  width: 100%;
  margin: 0;
  border-radius: 50px;
  background: linear-gradient(90deg, #8a38f5 0%, #4cd964 100%);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  transition: transform var(--fv6-anim) var(--fv6-ease);
  will-change: transform;
  max-width: none;
}

.darkfeature.darkfeature--figma .stakew__stats {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  width: 100%;
  margin: 0;
  flex-wrap: nowrap;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 14px;
}

.darkfeature.darkfeature--figma .stakew__stats-earn,
.darkfeature.darkfeature--figma .stakew__stats-liquid {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  line-height: 14px;
  white-space: nowrap;
}

.darkfeature.darkfeature--figma .stakew__stats .stakew__stats-earn b,
.darkfeature.darkfeature--figma .stakew__stats .stakew__stats-liquid b {
  display: inline;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
}

.darkfeature.darkfeature--figma .stakew__stats .stakew__stats-earn b {
  color: #ffffff;
}

.darkfeature.darkfeature--figma .stakew__stats .stakew__stats-earn span,
.darkfeature.darkfeature--figma .stakew__stats .stakew__stats-liquid b,
.darkfeature.darkfeature--figma .stakew__stats .stakew__stats-liquid span {
  display: inline;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  color: var(--fv6-muted);
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
}

.darkfeature.darkfeature--figma .stakew__stats-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: center;
  width: 9px;
  height: 9px;
  font-size: 9px;
  line-height: 1;
  color: var(--fv6-muted);
}

.darkfeature.darkfeature--figma .stakew__rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin-top: 10px;
}

.darkfeature.darkfeature--figma .stakew__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fv6-stack-gap);
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 10px;
  background: var(--fv6-input-bg);
  border: 1px solid var(--fv6-input-border);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--fv6-muted-2);
}

.darkfeature.darkfeature--figma .stakew__row:last-child {
  margin-bottom: 15px;
}

.darkfeature.darkfeature--figma .stakew__row b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.darkfeature.darkfeature--figma .stakew__row b.is-up {
  color: var(--fv6-green);
}

.darkfeature.darkfeature--figma .btn.btn--light {
  position: static;
  margin-top: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  padding: 8px 15px;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  background: #fff;
  color: #000;
  border-radius: 25px;
  box-shadow: none;
  transform: none;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.darkfeature.darkfeature--figma .stakew__cta.btn {
  align-self: stretch;
  width: 100%;
  max-width: none;
}

.darkfeature.darkfeature--figma .btn.btn--light:hover,
.darkfeature.darkfeature--figma .stakew__cta.btn:hover {
  transform: none;
  background: #fff;
  box-shadow: none;
}

.darkfeature.darkfeature--figma .btn.btn--light .btn__badge,
.darkfeature.darkfeature--figma .stakew__cta .btn__badge {
  position: static;
  flex: none;
  width: 35px;
  height: 35px;
  margin: 0;
  background: var(--ink);
  color: #fff;
  transform: none;
  transition: none;
}

.darkfeature.darkfeature--figma .btn.btn--light .btn__badge svg,
.darkfeature.darkfeature--figma .stakew__cta .btn__badge svg {
  width: 15px;
  height: 15px;
  transform-origin: center center;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .darkfeature.darkfeature--figma .btn.btn--light:hover .btn__badge,
  .darkfeature.darkfeature--figma .stakew__cta.btn:hover .btn__badge {
    transform: none;
  }

  .darkfeature.darkfeature--figma .btn.btn--light:hover .btn__badge svg,
  .darkfeature.darkfeature--figma .stakew__cta.btn:hover .btn__badge svg {
    transform: rotate(45deg);
  }
}

.darkfeature.darkfeature--figma .stakew__note {
  margin: 15px 0 0;
  padding-top: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: var(--fv6-muted);
}

.darkfeature.darkfeature--figma .ystake {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
  overflow: visible;
}

.darkfeature.darkfeature--figma .ystake__track {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
}

.darkfeature.darkfeature--figma .ystake__hero-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--fv6-stack-gap);
  flex: 1 1 auto;
  min-width: 0;
}

.darkfeature.darkfeature--figma .ystake__hero-slot {
  margin-bottom: var(--fv6-earn-gap);
  padding-bottom: var(--fv6-earn-travel);
}

.darkfeature.darkfeature--figma .ystake__hero {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--fv6-stack-gap);
  margin-bottom: 0;
  padding: 20px;
  border-radius: var(--r-card);
  background: linear-gradient(
    90deg,
    var(--fv6-lime-a) 0%,
    var(--fv6-lime-b) 100%
  );
  color: #000000;
  animation: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.darkfeature.darkfeature--figma .ystake.is-animating .ystake__hero {
  animation: fv6-earn-float var(--fv6-earn-float-dur) var(--fv6-earn-float-ease)
    infinite;
}

@keyframes fv6-earn-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, var(--fv6-earn-travel), 0);
  }
}

.darkfeature.darkfeature--figma .ystake__av {
  display: block;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  flex: none;
  flex-shrink: 0;
  border-radius: 50%;
  background: #6232ff;
  box-shadow:
    0 2px 4px 2px rgba(82, 82, 82, 0.25),
    inset 5px 4px 4px rgba(0, 0, 0, 0.25);
}

.darkfeature.darkfeature--figma .ystake__who {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
}

.darkfeature.darkfeature--figma .ystake__who b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: #000000;
}

.darkfeature.darkfeature--figma .ystake__who i {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: #3e3e3e;
}

.darkfeature.darkfeature--figma .ystake__earned {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  flex: none;
}

.darkfeature.darkfeature--figma .ystake__earned b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  text-align: right;
  color: #000000;
}

.darkfeature.darkfeature--figma .ystake__earned i {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  text-align: right;
  color: #3e3e3e;
}

.darkfeature.darkfeature--figma .ystake__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px;
  background: var(--fv6-inner-grad);
  border: 1px solid var(--fv6-line);
  border-radius: var(--r-card);
}

.darkfeature.darkfeature--figma .ystake__head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--fv6-stack-gap);
}

.darkfeature.darkfeature--figma .ystake__head span {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
}

.darkfeature.darkfeature--figma .ystake__see-all {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: #939393;
  text-decoration: none;
}

.darkfeature.darkfeature--figma .ystake__see-all img {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
}

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

.darkfeature.darkfeature--figma .yrow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--fv6-stack-gap);
  padding: 0;
  border: 0;
  opacity: 1;
  transform: none;
}

.darkfeature.darkfeature--figma .yrow:not(:last-child)::after {
  content: "";
  grid-column: 1 / -1;
  width: 100%;
  height: 1px;
  background: var(--fv6-line-2);
  margin: 15px 0;
}

.darkfeature.darkfeature--figma .yrow__av {
  width: 43px;
  height: 43px;
  flex: none;
  border-radius: 50%;
  background: #8c8c8c;
  box-shadow:
    0 2px 4px 2px rgba(82, 82, 82, 0.25),
    inset 5px 4px 4px rgba(0, 0, 0, 0.25);
}

.darkfeature.darkfeature--figma .yrow:nth-child(2) .yrow__av,
.darkfeature.darkfeature--figma .yrow:nth-child(3) .yrow__av,
.darkfeature.darkfeature--figma .yrow:nth-child(4) .yrow__av {
  background: #8c8c8c;
}

.darkfeature.darkfeature--figma .yrow__who {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
}

.darkfeature.darkfeature--figma .yrow__who b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
}

.darkfeature.darkfeature--figma .yrow__who i {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--fv6-muted-3);
}

.darkfeature.darkfeature--figma .yrow__amt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  flex: none;
}

.darkfeature.darkfeature--figma .yrow__amt b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  text-align: right;
  color: #ffffff;
}

.darkfeature.darkfeature--figma .yrow__amt i {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  text-align: right;
  color: var(--fv6-muted-3);
}

.darkfeature.darkfeature--figma .wbox {
  margin-top: var(--fv6-gap);
  padding: 20px;
  background: var(--fv6-reserves-grad);
  border-radius: var(--r-card);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  overflow: hidden;
  isolation: isolate;
}

.darkfeature.darkfeature--figma .wbox__glow {
  display: none;
}

.darkfeature.darkfeature--figma .wbox__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 15px;
  max-width: 505px;
  width: 100%;
}

.darkfeature.darkfeature--figma .wbox__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 2.5vw, 36px);
  line-height: 1.2;
  letter-spacing: 0;
  color: #ffffff;
}

.darkfeature.darkfeature--figma .wbox__p {
  margin: 15px 0;
  max-width: none;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--fv6-muted);
}

/* The Earn card used to be a separate half-width box in a two-column grid.
   Its sibling ("Users earning yield by staking stablecoins") was removed and
   the survivor sat alone beside an empty track, so it now lives inside this
   panel. The rule separates the two voices: the short line above is the
   promise, the paragraph below is the detail that qualifies it. */
.darkfeature.darkfeature--figma .wbox__divider {
  width: 100px;
  height: 1px;
  margin: 25px 0;
  border: 0;
  background: #ffffff;
  opacity: 0.4;
}

.darkfeature.darkfeature--figma .wbox__h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.3;
  letter-spacing: 0;
  color: #ffffff;
}

/* One column. Three badges in a 2x2 grid left a hole where the fourth would
   be, and the odd one out read as an afterthought rather than the third of
   three. Stacked, they also sit at the same measure as the paragraph beside
   them. */
.darkfeature.darkfeature--figma .wbox__right {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 15px;
  align-content: center;
}

.darkfeature.darkfeature--figma .wbox__right > * {
  min-width: 0;
}

.darkfeature.darkfeature--figma .dbadge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  gap: var(--fv6-stack-gap);
  background: var(--fv6-inner-grad);
  border: 1px solid var(--fv6-line);
  border-radius: var(--r-card);
}

.darkfeature.darkfeature--figma .dbadge span {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
}

.darkfeature.darkfeature--figma .dbadge p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: var(--fv6-muted-3);
}

.darkfeature.darkfeature--figma .wbox__left .btn.btn--light {
  align-self: flex-start;
  width: auto;
  max-width: 221px;
}

.darkfeature.darkfeature--figma .darkfeature__cta {
  margin-top: var(--fv6-gap);
  align-self: center;
}

.darkfeature.darkfeature--figma .iconfield {
  --chip: clamp(56px, 14vw, 88px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 16px);
  max-width: 1410px;
  min-height: 0;
  margin: var(--fv6-gap) auto 0;
  padding-inline: 0;
  pointer-events: none;
}

.darkfeature.darkfeature--figma .iconfield__i {
  width: var(--chip);
  height: var(--chip);
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

@media (min-width: 981px) {
  .darkfeature.darkfeature--figma .iconfield {
    --chip: 97px;
    flex-wrap: nowrap;
    gap: 10px;
    min-height: 97px;
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .darkfeature.darkfeature--figma .iconfield__i {
    width: 97px;
    height: 97px;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 48.5px;
  }

  .darkfeature.darkfeature--figma .iconfield__i img {
    width: 65px;
    height: 65px;
  }

  .darkfeature.darkfeature--figma .darkfeature__cta {
    margin-top: 50px;
  }
}

/* Wide layout. Everything here used to pin text to a single line, which was
   true of the copy when it was written and stopped being true once the Earn
   disclosure grew: at 1280 the badge column was pushed 456px outside a panel
   with overflow:hidden (GDPR vanished entirely, PCI DSS and FinCEN lost their
   right edge), the lede overhung its container by 53px, and the document
   itself scrolled sideways. A line that cannot fit does not stay on one line
   -- it takes the layout with it, so the text wraps instead. */
@media (min-width: 1280px) {
  .darkfeature.darkfeature--figma .darkfeature__lede {
    max-width: none;
  }

  /* minmax(0,1fr), not auto: an auto track is sized by its content, so a long
     sentence sets the track width and evicts the column beside it. */
  .darkfeature.darkfeature--figma .wbox {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
    align-items: center;
  }

  .darkfeature.darkfeature--figma .wbox__left {
    max-width: none;
  }
}

@media (max-width: 1023px) {

  .darkfeature.darkfeature--figma .wbox {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .darkfeature.darkfeature--figma {
    padding: 50px 0;
  }

  .darkfeature.darkfeature--figma .wbox {
    padding: 20px;
    gap: clamp(20px, 3vw, 40px);
  }

  .darkfeature.darkfeature--figma .iconfield {
    display: flex;
  }
}

@media (max-width: 767px) {
  .darkfeature.darkfeature--figma {
    padding: clamp(32px, 8vw, 50px) 0;
  }

  .darkfeature.darkfeature--figma .wbox__right {
    grid-template-columns: minmax(0, 1fr);
  }

  .darkfeature.darkfeature--figma .iconfield {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(8px, 2vw, 16px);
    min-height: 0;
    margin-bottom: 28px;
  }

  .darkfeature.darkfeature--figma .iconfield__i {
    width: var(--chip);
    height: var(--chip);
  }

  .darkfeature.darkfeature--figma .ystake__hero {
    flex-wrap: nowrap;
  }

  .darkfeature.darkfeature--figma .ystake__av {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
  }

  .darkfeature.darkfeature--figma .btn.btn--light {
    justify-content: space-between;
    white-space: normal;
    text-align: left;
  }

  .darkfeature.darkfeature--figma .btn.btn--light > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .darkfeature.darkfeature--figma .stakew__cta.btn {
    margin-top: 10px;
  }

  .darkfeature.darkfeature--figma .stakew__stats {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .darkfeature.darkfeature--figma .stakew__stats-earn,
  .darkfeature.darkfeature--figma .stakew__stats-liquid {
    white-space: normal;
  }

  .darkfeature.darkfeature--figma .yrow__who b,
  .darkfeature.darkfeature--figma .yrow__who i {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .darkfeature.darkfeature--figma .wbox__left .btn.btn--light {
    align-self: stretch;
    width: 100%;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .darkfeature.darkfeature--figma .ystake__hero-slot {
    padding-bottom: 0;
    margin-bottom: var(--fv6-earn-gap);
  }

  .darkfeature.darkfeature--figma .ystake.is-animating .ystake__hero,
  .darkfeature.darkfeature--figma .ystake__hero {
    animation: none;
    transform: none;
  }

  .darkfeature.darkfeature--figma .stakew__meter-track > i,
  .darkfeature.darkfeature--figma .stakew__meter-track > i#stakeBar {
    transition: none;
  }

  .darkfeature.darkfeature--figma .yrow {
    opacity: 1;
    transform: none;
  }
}

/* Earn is an on-dark band in both themes — pin white CTAs and skip the
   global photo dim on coin chips (they are marks, not photographs). */
:root[data-theme="dark"] .darkfeature.darkfeature--figma .btn.btn--light {
  background: #fff;
  color: #000;
}

:root[data-theme="dark"]
  .darkfeature.darkfeature--figma
  .btn.btn--light
  .btn__badge {
  background: #0d070a;
  color: #fff;
}

:root[data-theme="dark"] .darkfeature.darkfeature--figma img {
  filter: none;
}

/* ==========================================================================
   Homepage · FAQ (accordion · same toggle as #why)
   Scoped to .faqsec--static so other .faqsec pages keep <details> behavior.
   ========================================================================== */

.section.faqsec--static {
  --faq-max: 1040px;
  --faq-text-max: 945px;
  --faq-divider: #c4c4c4;
  --faq-card-gap: 25px;
  --faq-card-pad: 15px;
  --faq-header-gap: 20px;
  --faq-ink: var(--fg);
  --acc-dur: 300ms;
  --acc-icon-dur: 520ms;
  --acc-ease: cubic-bezier(0, 0, 0.2, 1);
  --acc-icon-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --acc-toggle-bg: rgba(0, 0, 0, 0.15);
  --acc-toggle-hover: #000;
  padding-top: 50px;
  background: var(--bg);
}

.section.faqsec--static .faq {
  width: 100%;
  max-width: var(--faq-max);
  margin-inline: auto;
}

.section.faqsec--static .faq .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.18;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--faq-ink);
}

.faqsec__divider {
  width: 100%;
  max-width: var(--faq-max);
  height: 1px;
  margin: 50px auto 25px;
  border: 0;
  background: var(--faq-divider);
}

.section.faqsec--static .faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--faq-card-gap);
  margin-top: 0;
  border-top: none;
}

.section.faqsec--static .faq__item {
  padding: var(--faq-card-pad);
  background: var(--surface);
  border-radius: var(--r-card);
  border: none;
  min-width: 0;
  overflow: hidden;
}

.section.faqsec--static .faq__head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--faq-header-gap);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.section.faqsec--static .faq__head .accitem__toggle {
  margin-left: 0;
  width: 35px;
  height: 35px;
  padding: 3px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 25px;
  background: var(--acc-toggle-bg);
  position: relative;
  transition: background-color var(--acc-dur) var(--acc-ease);
}

.section.faqsec--static .accitem__toggle-icon {
  display: block;
  width: 18px;
  height: 18px;
  transform-origin: center;
  will-change: transform, opacity;
}

.section.faqsec--static .accitem__toggle-icon--close {
  position: absolute;
}

.section.faqsec--static .faq__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-dur) var(--acc-ease);
}

.section.faqsec--static .faq__item.is-open .faq__body {
  grid-template-rows: 1fr;
}

.section.faqsec--static .faq__body-inner {
  overflow: hidden;
}

.section.faqsec--static .faq__question {
  flex: 1;
  min-width: 0;
  max-width: var(--faq-text-max);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--faq-ink);
}

.section.faqsec--static
  .faq__item:not(.is-open)
  .accitem__toggle:not(.is-icon-animating)
  .accitem__toggle-icon--open {
  transform: rotate(0deg);
  opacity: 1;
}

.section.faqsec--static
  .faq__item:not(.is-open)
  .accitem__toggle:not(.is-icon-animating)
  .accitem__toggle-icon--close {
  transform: rotate(45deg);
  opacity: 0;
}

.section.faqsec--static
  .faq__item.is-open
  .accitem__toggle:not(.is-icon-animating)
  .accitem__toggle-icon--open {
  transform: rotate(45deg);
  opacity: 0;
}

.section.faqsec--static
  .faq__item.is-open
  .accitem__toggle:not(.is-icon-animating)
  .accitem__toggle-icon--close {
  transform: rotate(0deg);
  opacity: 1;
}

.section.faqsec--static
  .accitem__toggle.is-icon-animating
  .accitem__toggle-icon--open,
.section.faqsec--static
  .accitem__toggle.is-icon-animating
  .accitem__toggle-icon--close {
  animation-duration: var(--acc-icon-dur);
  animation-timing-function: var(--acc-icon-ease);
  animation-fill-mode: forwards;
}

.section.faqsec--static
  .accitem__toggle.is-icon-animating.is-icon-opening
  .accitem__toggle-icon--open {
  animation-name: accPlusOpen;
}

.section.faqsec--static
  .accitem__toggle.is-icon-animating.is-icon-opening
  .accitem__toggle-icon--close {
  position: absolute;
  animation-name: accCloseOpen;
}

.section.faqsec--static
  .accitem__toggle.is-icon-animating.is-icon-closing
  .accitem__toggle-icon--close {
  position: absolute;
  animation-name: accCloseClose;
}

.section.faqsec--static
  .accitem__toggle.is-icon-animating.is-icon-closing
  .accitem__toggle-icon--open {
  animation-name: accPlusClose;
}

@media (hover: hover) and (pointer: fine) {
  .section.faqsec--static .faq__head:hover .accitem__toggle,
  .section.faqsec--static .faq__head:focus-visible .accitem__toggle {
    background: var(--acc-toggle-hover);
  }

  .section.faqsec--static .faq__head:hover .accitem__toggle-icon,
  .section.faqsec--static .faq__head:focus-visible .accitem__toggle-icon {
    filter: brightness(0) invert(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section.faqsec--static {
    --acc-dur: 0ms;
    --acc-icon-dur: 0ms;
  }

  .section.faqsec--static
    .accitem__toggle.is-icon-animating
    .accitem__toggle-icon--open,
  .section.faqsec--static
    .accitem__toggle.is-icon-animating
    .accitem__toggle-icon--close {
    animation: none;
  }
}

.section.faqsec--static .faq__list .faq__answer {
  margin: 5px 0 0;
  padding: 0;
  max-width: var(--faq-text-max);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 19px;
  color: var(--faq-ink);
}

@media (max-width: 640px) {
  .section.faqsec--static .faq .h2 {
    font-size: clamp(28px, 7.5vw, 36px);
  }

  .section.faqsec--static .faq__question {
    font-size: clamp(20px, 5.2vw, 24px);
  }

  .section.faqsec--static .faq__head {
    gap: clamp(12px, 3vw, 20px);
  }

  .section.faqsec--static .faq__head .accitem__toggle {
    flex: none;
  }
}

@media (max-width: 425px) {
  .section.faqsec--static {
    padding-top: clamp(32px, 8vw, 50px);
  }

  .section.faqsec--static .faq .h2 {
    font-size: clamp(24px, 6.5vw, 28px);
    line-height: 1.22;
    letter-spacing: -0.02em;
  }

  .section.faqsec--static .faq__question {
    font-size: clamp(18px, 4.8vw, 20px);
    line-height: 1.25;
  }

  .section.faqsec--static .faq__item {
    padding: clamp(12px, 3vw, 15px);
  }

  .section.faqsec--static .faq__head .accitem__toggle {
    width: 30px;
    height: 30px;
  }

  .section.faqsec--static .accitem__toggle-icon {
    width: 16px;
    height: 16px;
  }

  .faqsec__divider {
    margin: clamp(32px, 8vw, 50px) auto clamp(16px, 4vw, 25px);
  }
}

:root[data-theme="dark"] .section.faqsec--static {
  --faq-divider: var(--line);
  --faq-ink: var(--fg);
  --acc-toggle-bg: rgba(255, 255, 255, 0.16);
  --acc-toggle-hover: #fff;
}

@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"]
    .section.faqsec--static
    .faq__head:hover
    .accitem__toggle-icon,
  :root[data-theme="dark"]
    .section.faqsec--static
    .faq__head:focus-visible
    .accitem__toggle-icon {
    filter: brightness(0);
  }
}

/* ---- Card hero -------------------------------------------------------------
   One piece of footage in a rounded panel, one heading over it, one button.
   Modelled on coorda.framer.website: the media is inset from the viewport
   rather than bleeding to its edges, which makes the page read as a card on a
   surface instead of a video with text on top.

   The heading carries the product inside the sentence. A card image sitting
   beside a heading is decoration and gets ignored; the same image set into the
   line has to be read, because the sentence does not finish without it. */
.cxhero {
  position: relative;
  isolation: isolate;
  margin: 12px;
  min-height: min(88vh, 780px);
  display: grid;
  place-items: center;
  border-radius: 28px;
  overflow: hidden;
  /* Sampled from the first frame and darkened to the scrim's weight, so the
     moment before the video paints is the hero rather than a flash of nothing.
     Cheaper than a poster file for footage that is hidden on phones anyway.
     Re-sample this when the footage changes — the previous clip averaged a
     neutral grey and this one is warm, so the old value flashed the wrong
     colour. */
  background: #3b3126;
}

.cxhero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cxhero__vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}

/* Weighted to the middle, where the heading sits, and held at the top so the
   nav stays legible over whatever the footage is doing up there. Same
   two-layer approach as the personal and earn heroes. */
.cxhero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(6, 4, 12, 0.74) 0%,
      rgba(6, 4, 12, 0.44) 11%,
      rgba(6, 4, 12, 0.14) 20%,
      transparent 30%
    ),
    radial-gradient(
      54% 42% at 50% 52%,
      rgba(6, 4, 12, 0.78),
      rgba(6, 4, 12, 0.34) 66%,
      transparent 100%
    ),
    linear-gradient(180deg, transparent 40%, rgba(6, 4, 12, 0.42) 100%);
}

.cxhero__inner {
  position: relative;
  z-index: 2;
  width: min(920px, 90vw);
  padding: 96px 0 72px;
  text-align: center;
  color: #fff;
}

/* Pinned, not inherited. A global `h1, h2, h3, h4 { color: var(--fg) }` beats
   the white on .cxhero__inner, and in light theme that put a near-black
   heading over the footage. This hero is dark in both themes, so its type is
   white in both. */
.cxhero__h1,
:root[data-theme="light"] .cxhero__h1,
:root[data-theme="dark"] .cxhero__h1 {
  color: #fff;
}

.cxhero__h1 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  /* Deliberately larger than the site's .h1. The whole hero is one sentence,
     so the sentence carries the page. */
  font-size: clamp(40px, 7.4vw, 84px);
  text-wrap: balance;
}

.cxhero__lede {
  margin: 22px auto 0;
  max-width: 44ch;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.cxhero__cta {
  margin-top: 30px;
}
/* .btn--light inverts with the site theme, which is right everywhere else and
   wrong here: this hero is dark in both themes because the footage and the
   scrim make it so. The button is pinned rather than inherited, or it turns
   near-black on a dark background and disappears. */
.cxhero__btn,
:root[data-theme="dark"] .cxhero__btn {
  background: #fff;
  color: #12121a;
  border-color: #fff;
  border-radius: 999px;
  padding: 15px 30px;
  font-weight: 600;
}
.cxhero__btn:hover,
:root[data-theme="dark"] .cxhero__btn:hover {
  background: rgba(255, 255, 255, 0.88);
  color: #12121a;
}

.cxhero__proof {
  margin: 26px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.66);
}
.cxhero__proof strong {
  color: #fff;
  font-weight: 600;
}

@media (max-width: 760px) {
  .cxhero {
    margin: 8px;
    min-height: 74vh;
    border-radius: 22px;
  }
  .cxhero__inner {
    padding: 80px 0 56px;
  }
  /* 6.4MB is a lot to spend on a phone for something decorative, and a 16:9
     clip cropped into a tall hero shows almost none of it. Same call the
     personal and earn heroes make.

     What replaces it is the site's own hero art rather than the flat colour
     the desktop fallback uses: a phone sees this instead of the footage, not
     for a moment before it, so it has to look designed. */
  .cxhero__vid {
    display: none;
  }
  .cxhero {
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(96, 76, 220, 0.42), transparent 62%),
      linear-gradient(180deg, #1a1726 0%, #0d0b16 100%);
  }
  .cxhero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/assets/h1-uvray.avif") center / cover no-repeat;
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cxhero__vid {
    display: none;
  }
}

/* ---- Product newsletter dialog --------------------------------------------
   Two columns: the ask on the left, one piece of product art on the right.
   The art is decorative and goes first on narrow screens only if it earns the
   height — below 720px it is dropped entirely, because a popup that fills a
   phone screen with a picture and pushes the field under the fold is worse
   than no popup.

   Colour comes from --accent, the site's own indigo, rather than from the
   reference this was modelled on. A borrowed accent on somebody else's brand
   reads as a borrowed template. */
.nlpop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 6, 16, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.nlpop.is-open {
  opacity: 1;
}
.nlpop[hidden] {
  display: none;
}

/* Scroll is locked while it is open so the page behind does not move under a
   reader who is trying to type. */
.nlpop-lock,
.nlpop-lock body {
  overflow: hidden;
}

.nlpop__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.86fr;
  width: min(940px, 100%);
  max-height: calc(100vh - 40px);
  overflow: hidden;
  border-radius: 20px;
  /* --surface, not --bg: the card is a raised sheet, and the page background
     would have put a seam down the middle of it where the art begins. */
  background: var(--surface, #fff);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  transform: translateY(10px) scale(0.985);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.nlpop.is-open .nlpop__card {
  transform: none;
}

.nlpop__x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #12121a;
  cursor: pointer;
}
.nlpop__x:hover {
  background: #fff;
}
.nlpop__x svg {
  width: 17px;
  height: 17px;
}

.nlpop__copy {
  padding: 40px 34px 34px;
  overflow-y: auto;
}

.nlpop__eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted, rgba(0, 0, 0, 0.55));
}

.nlpop__h {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-wrap: balance;
}

.nlpop__list {
  margin: 22px 0 26px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.nlpop__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.45;
}
.nlpop__list svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--accent);
}

/* One row on a desktop, stacked on a phone — the field needs its full width
   more than the button needs to sit beside it. */
.nlpop__form {
  display: flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.12));
  border-radius: 999px;
}
.nlpop__form:focus-within {
  border-color: var(--accent);
}
.nlpop__form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
}
.nlpop__form input:focus {
  outline: none;
}
.nlpop__go {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 12px 22px;
}

.nlpop__status:empty {
  display: none;
}
.nlpop__status {
  margin: 12px 0 0;
  font-size: 13px;
}
.nlpop__status.is-ok {
  color: var(--ok, #1f9d55);
}
.nlpop__status.is-err {
  color: var(--err, #c0392b);
}

.nlpop__fine {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted, rgba(0, 0, 0, 0.55));
}

.nlpop__art {
  position: relative;
  background: #0d0b16;
}
.nlpop__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 18% 50%;
  display: block;
}

/* The form is the point. Once it has been submitted the fields go and the
   status line carries the result on its own. */
.nlpop.is-done .nlpop__form,
.nlpop.is-done .nlpop__fine {
  display: none;
}

@media (max-width: 860px) {
  .nlpop__card {
    grid-template-columns: 1fr;
  }
  .nlpop__art {
    display: none;
  }
  .nlpop__copy {
    padding: 36px 24px 26px;
  }
  .nlpop__form {
    flex-wrap: wrap;
    border-radius: 16px;
  }
  .nlpop__form input {
    flex-basis: 100%;
  }
  .nlpop__go {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nlpop,
  .nlpop__card {
    transition: none;
  }
  .nlpop__card {
    transform: none;
  }
}