/* ==================================================================
   ROYCE CARD & WALLET — the /royce-card page.
   Ported September 2026 from update/RoyceCard/HomeSection/adapter/
   (css/royce-card-wallet.css + partials/royce-card-page-body.html).

   EVERYTHING IS SCOPED UNDER .rz-card, the <main> wrapper. The chrome
   above and below it is the shared header/footer (NFR-07) and keeps the
   site's own styling. Deviations from the package, and why:

   1. CLASS NAMES. The package prefixes everything royce-card-* with
      --rc-* tokens. Here the block is .rz-card with BEM children, and
      the tokens are --rzc-*: css/social-trading.css already owns --rc-*
      under .rst, and the two must never be confused.

   2. FONTS. Marcellus + Inter are dropped; the page inherits the
      self-hosted 'Ping AR + LT' — neither Google font covers Arabic
      (NFR-10). Sizes and line-heights are the package's.

   3. GOLD. The package's buttons are a #F5C518→#FFAA24 gradient with a
      gold glow, and the "card" badges are gold gradients too. BRD §9.1
      allows gold only as flat fills and fine accents, so the primary
      button is Royce Gold (--royce-gold / --royce-gold-hover) exactly as
      .ab-btn--gold, and the badges are flat. The warm amber survives only
      inside the runway glows, where it is the photograph's own light.

   4. PALETTE — NOTE FOR REVIEW. Cobalt #155EEF, azure #2E90FA and teal
      #12B8A6 are the card artwork's own colours and are NOT BRD §9.1
      tokens. They are kept as custom properties scoped to .rz-card, never
      on :root, so this page reads cooler than the rest of the site by
      design of the source package. Wants design sign-off
      (docs/www2026-audit.md §12).

   5. FIXED BANDS, NOT THEME-AWARE. The dark / aqua / cobalt / ivory /
      white rhythm is the design; it is the same in both themes. Every
      band paints its own background and ink, so nothing here reads the
      theme's body colours.

   6. DIRECTION. The package is written in physical properties; here the
      offsets are logical, so the wallet, trail, badges and the FAQ toggle
      sit on the reading side under html.rtl. The transfer trail is
      mirrored (the wallet → card motion must still run toward the card),
      the → in the relation strip flips, and letter-spacing is zeroed for
      Arabic.

   7. BUTTONS. .rz-card__btn is in the css/buttons.css base list, which
      owns its geometry; only colour and motion live here.

   8. MOTION. Reveals, the rail pulses and the hero tilt are js/royce-card.js
      (shared with the homepage section). The hooks are .rz-reveal (+ .is-in),
      [data-rz-loop] and [data-rz-tilt]. Everything is off under
      prefers-reduced-motion in both CSS and JS.

   9. HEADER CLEARANCE. The package's layout revision (September 2026,
      update/royceCard/royce-card-wallet-master/02-dedicated-page/) measures
      the shared header from JS and writes the covered height to a custom
      property. Here the fixed bar's resting height is the --nav-h token
      (css/royce-header.css), so the hero pads by var(--nav-h) and every
      [id] carries a matching scroll-margin — no measurement, right at
      first paint. The package's layout rules — one spacing system, the
      message-first mobile hero, grids that never create an implicit
      column, the in-column mobile timeline, the two-column FAQ from
      1200 — are ported as written, on the site's breakpoint ladder.

   CONTENT RULES (BRD §8.2, package LEGAL-AND-BRAND-BLOCKERS.md)
    · The wallet and dashboard figures are an illustrative interface and
      are labelled as such; they are not a price, limit or statistic.
    · The Mastercard mark is only ever the artwork inside the card image —
      never redrawn, recoloured or given an effect.
   ================================================================== */

/* #region ------- ( 1- Scope, tokens ) ---------- */
.rz-card {
  /* foundations */
  --rzc-navy: #081628;
  --rzc-navy-2: #0c2242;
  /* premium — the site's gold, flat */
  --rzc-gold: var(--royce-gold);
  --rzc-gold-hover: var(--royce-gold-hover);
  --rzc-amber: #ffaa24;
  /* money movement (artwork palette, see note 4) */
  --rzc-cobalt: #155eef;
  --rzc-cobalt-deep: #0b3fae;
  --rzc-azure: #2e90fa;
  /* available / secure / complete */
  --rzc-teal: #12b8a6;
  --rzc-teal-ink: #0a6f64; /* the teal that clears AA as text on white */
  --rzc-teal-lit: #5be8d6;
  --rzc-aqua: #ddf8f4;
  /* clarity */
  --rzc-ivory: #f7f4ea;
  --rzc-white: #ffffff;
  /* ink */
  --rzc-ink: #0e1a2b;
  --rzc-ink-2: #41506a;
  --rzc-on-dark: #ffffff;
  --rzc-on-dark-2: #c3cedf;
  --rzc-flag: #8a5a00;

  --rzc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* spacing system — one set of numbers for the whole page */
  --rzc-max: 1240px; /* matches the site's containers */
  --rzc-gutter: clamp(18px, 4vw, 40px); /* 18px phones → 40px desktop */
  --rzc-section-y: clamp(64px, 8.2vw, 108px); /* vertical rhythm per section */
  --rzc-card-pad: clamp(22px, 2.5vw, 34px); /* inside every card */
  --rzc-grid-gap: clamp(16px, 2vw, 28px);
  /* the visible gap between the fixed bar's resting edge and the hero copy */
  --rzc-hero-gap: clamp(28px, 4.4vw, 64px);

  display: block;
  color: var(--rzc-ink);
  font-family:
    'Ping AR + LT',
    -apple-system,
    sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.rz-card,
.rz-card *,
.rz-card *::before,
.rz-card *::after {
  box-sizing: border-box;
}
/* anchors land below the fixed bar, with air above the heading — --nav-h is
   the bar's resting height, a token set by css/royce-header.css */
.rz-card [id] {
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
/* #endregion */

/* #region ------- ( 2- Structure, bands, type ) ---------- */
.rz-card__section {
  position: relative;
  overflow: hidden;
  padding: var(--rzc-section-y) 0;
}
.rz-card__container {
  position: relative;
  z-index: 1;
  max-width: var(--rzc-max);
  margin: 0 auto;
  padding: 0 var(--rzc-gutter);
}
.rz-card__container--narrow {
  max-width: 920px;
}

.rz-card__section--dark {
  background: var(--rzc-navy);
  color: var(--rzc-on-dark);
}
.rz-card__section--ivory {
  background: var(--rzc-ivory);
}
.rz-card__section--white {
  background: var(--rzc-white);
}
.rz-card__section--aqua {
  background: linear-gradient(180deg, var(--rzc-aqua) 0%, #f2fcfa 62%, var(--rzc-white) 100%);
}
.rz-card__section--cobalt {
  background: linear-gradient(135deg, var(--rzc-cobalt-deep) 0%, #1250ce 48%, var(--rzc-cobalt) 100%);
  color: var(--rzc-on-dark);
}

.rz-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rzc-cobalt);
}
.rz-card__eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: currentColor;
}
.rz-card__section--dark .rz-card__eyebrow,
.rz-card__section--final .rz-card__eyebrow {
  color: var(--rzc-gold);
}
/* gold on cobalt does not clear AA — the label goes white, the rule stays gold */
.rz-card__section--cobalt .rz-card__eyebrow {
  color: var(--rzc-white);
}
.rz-card__section--cobalt .rz-card__eyebrow::before {
  background: var(--rzc-gold);
}

.rz-card__h2 {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.005em;
}
.rz-card__h3 {
  margin: 0;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.3;
}
.rz-card__lede {
  margin: 20px 0 0;
  max-width: 60ch;
  font-size: 18px;
  line-height: 1.7;
  color: var(--rzc-ink-2);
}
.rz-card__section--dark .rz-card__lede {
  color: var(--rzc-on-dark-2);
}
.rz-card__section--cobalt .rz-card__lede {
  color: #e9f1fd;
}
.rz-card__head {
  max-width: 780px;
  margin-bottom: clamp(36px, 4.4vw, 56px);
}
/* #endregion */

/* #region ------- ( 3- Buttons ) ---------- */
/* geometry is css/buttons.css; colour and motion only */
.rz-card__btn {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.18s var(--rzc-ease);
}
.rz-card__btn--gold {
  background: var(--rzc-gold);
  border-color: var(--rzc-gold);
  color: var(--royce-black);
}
.rz-card__btn--gold:hover,
.rz-card__btn--gold:focus-visible {
  background: var(--rzc-gold-hover);
  border-color: var(--rzc-gold-hover);
  color: var(--royce-black);
  transform: translateY(-2px);
}
.rz-card__btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--rzc-white);
}
.rz-card__btn--ghost:hover,
.rz-card__btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--rzc-white);
  color: var(--rzc-white);
  transform: translateY(-2px);
}
.rz-card__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.rz-card a:focus-visible,
.rz-card button:focus-visible,
.rz-card summary:focus-visible {
  outline: 3px solid var(--rzc-gold);
  outline-offset: 3px;
}
/* #endregion */

/* #region ------- ( 4- Reveals ) ---------- */
.rz-card .rz-reveal {
  opacity: 0;
  transform: translateY(22px);
}
.rz-card .rz-reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 620ms var(--rzc-ease),
    transform 620ms var(--rzc-ease);
  transition-delay: var(--d, 0s);
}
/* #endregion */

/* #region ------- ( 5- Hero ) ---------- */
.rz-card__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* the fixed bar covers the top of the document; --nav-h is its resting
     height, so the copy starts one --rzc-hero-gap below the bar's edge */
  padding: calc(var(--nav-h) + var(--rzc-hero-gap)) 0 clamp(52px, 6.2vw, 88px);
  color: var(--rzc-on-dark);
  background: var(--rzc-navy);
}
.rz-card__hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url('/image/royce-card/royce-card-hero.jpg');
  background-image: image-set(url('/image/royce-card/royce-card-hero.webp') type('image/webp'), url('/image/royce-card/royce-card-hero.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: 72% 52%;
}
.rz-card__hero-wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(96deg, rgba(8, 22, 40, 0.985) 0%, rgba(8, 22, 40, 0.95) 30%, rgba(11, 40, 88, 0.72) 50%, rgba(11, 40, 88, 0.3) 68%, rgba(8, 22, 40, 0.34) 100%), linear-gradient(180deg, rgba(8, 22, 40, 0.55) 0%, rgba(8, 22, 40, 0) 34%, rgba(8, 22, 40, 0.72) 100%);
}
.rz-card__hero-glow {
  position: absolute;
  z-index: -1;
  inset-inline-end: -8%;
  top: 12%;
  width: 60%;
  height: 72%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 170, 36, 0.22), rgba(255, 170, 36, 0) 72%);
  animation: rz-card-breathe 14s ease-in-out infinite alternate;
}
@keyframes rz-card-breathe {
  from {
    opacity: 0.6;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1.07);
  }
}

.rz-card__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
}
.rz-card__hero-grid > * {
  min-width: 0;
}
.rz-card__h1 {
  margin: 0;
  font-size: clamp(32px, 3.8vw, 50px);
  font-weight: 500;
  line-height: 1.07;
  letter-spacing: -0.01em;
  max-width: 19ch;
  text-wrap: balance;
  color: var(--rzc-white);
  text-shadow: 0 2px 30px rgba(8, 22, 40, 0.65);
}
.rz-card__hero-copy {
  margin: 20px 0 0;
  max-width: 48ch;
  font-size: 17.5px;
  line-height: 1.66;
  color: #e4ebf5;
}
.rz-card__flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.rz-card__flow li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--rzc-white);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.24);
}
.rz-card__flow li i {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  font-style: normal;
}
.rz-card__flow li:nth-child(1) i {
  background: var(--rzc-azure);
}
.rz-card__flow li:nth-child(2) i {
  background: var(--rzc-cobalt);
}
.rz-card__flow li:nth-child(3) i {
  background: var(--rzc-teal);
}
.rz-card__flow li:nth-child(4) i {
  background: var(--rzc-gold);
}
/* inline-block, not flex: the sentence wraps as a sentence on narrow screens */
.rz-card__badge {
  display: inline-block;
  margin-top: 20px;
  padding: 11px 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--rzc-white);
  border: 1px solid rgba(214, 166, 28, 0.55);
  background: rgba(214, 166, 28, 0.12);
}
.rz-card__badge b {
  font-weight: 600;
  color: var(--rzc-gold);
}
.rz-card__hero-foot {
  margin-top: 22px;
  max-width: 56ch;
  font-size: 13px;
  line-height: 1.55;
  color: #bcc9db;
}
.rz-card__hero .rz-card__ctas {
  margin-top: 32px;
}

/* hero composition: wallet behind and up-start, card in front and lower-end.
   The card overlaps only the wallet's empty lower apron (--rzc-tuck), never
   its label, balance or transaction lines. The outer wrapper places; the
   inner wrapper rotates. The script only ever writes to [data-rz-tilt], so
   motion cannot overwrite the placement. */
.rz-card__visual {
  position: relative;
  min-width: 0;
  padding: 0 clamp(0px, 1.6vw, 24px);
}
.rz-card__stack {
  --rzc-card-w: 84%; /* card width as a share of the stack      */
  --rzc-tuck: 11%; /* how far the card tucks under the wallet */
  position: relative;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
  padding-top: 30px; /* room for the "Illustrative interface" note */
}
/* reserves the card's height below the wallet; % padding resolves against
   the stack's width, and the card is 856 × 540 */
.rz-card__stack::after {
  content: '';
  display: block;
  padding-bottom: calc(var(--rzc-card-w) * 0.631 - var(--rzc-tuck));
}
.rz-card__position {
  position: absolute;
  z-index: 3;
  inset-inline-end: 2%;
  bottom: 0;
  width: var(--rzc-card-w);
}
.rz-card__tilt {
  position: relative;
  transform: rotate(-4deg);
  transform-origin: 50% 50%;
  transition: transform 620ms var(--rzc-ease);
  filter: drop-shadow(0 30px 48px rgba(2, 8, 20, 0.75));
  will-change: transform;
}
.rz-card__tilt img {
  display: block;
  width: 100%;
  height: auto;
}
.rz-card__sweep {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: 3.72% / 5.89%;
}
.rz-card__sweep::after {
  content: '';
  position: absolute;
  top: -40%;
  bottom: -40%;
  inset-inline-start: -40%;
  width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-16deg);
  animation: rz-card-sweep 7.5s var(--rzc-ease) infinite;
}
@keyframes rz-card-sweep {
  0% {
    inset-inline-start: -40%;
  }
  52% {
    inset-inline-start: 120%;
  }
  100% {
    inset-inline-start: 120%;
  }
}

.rz-card__wallet {
  position: relative;
  z-index: 2;
  width: 80%;
  /* the bottom padding reserves the tuck, so the card never covers a line */
  padding: 20px 22px calc(10px + var(--rzc-tuck) + 3.5%);
  background: linear-gradient(160deg, rgba(15, 38, 74, 0.9), rgba(8, 22, 40, 0.94));
  border: 1px solid rgba(46, 144, 250, 0.36);
  box-shadow: 0 22px 44px -24px rgba(2, 8, 20, 0.9);
}
/* "Illustrative interface" — a real element, so it translates */
.rz-card__w-note {
  position: absolute;
  inset-inline-start: 0;
  top: -24px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9bafc8;
}
.rz-card__w-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.rz-card__w-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a7bad2;
}
.rz-card__w-bal {
  margin-top: 4px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--rzc-white);
}
.rz-card__w-rule {
  height: 1px;
  margin: 16px 0;
  background: rgba(46, 144, 250, 0.32);
}
.rz-card__w-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 14px;
  color: #c3cedf;
}
.rz-card__w-line b {
  font-weight: 600;
  color: var(--rzc-white);
}
.rz-card__w-line--in b {
  color: var(--rzc-teal-lit);
}
.rz-card__w-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rzc-teal-lit);
  border: 1px solid rgba(18, 184, 166, 0.55);
  background: rgba(18, 184, 166, 0.16);
}

/* transfer trail, from the wallet's end edge down onto the card */
.rz-card__trail {
  position: absolute;
  z-index: 2;
  inset-inline-start: 79%;
  inset-inline-end: 4%;
  top: 20%;
  height: 96px;
  pointer-events: none;
}
.rz-card__trail svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rz-card__spark {
  animation: rz-card-dash 3.8s linear infinite;
}
@keyframes rz-card-dash {
  to {
    stroke-dashoffset: -260;
  }
}
/* #endregion */

/* #region ------- ( 6- Connected journey ) ---------- */
.rz-card__relation {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 42px;
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 600;
  color: var(--rzc-ink);
  background: var(--rzc-white);
  border: 1px solid rgba(21, 94, 239, 0.24);
}
.rz-card__relation i {
  display: inline-block;
  font-style: normal;
  font-size: 19px;
  color: var(--rzc-cobalt);
}
.rz-card__journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rzc-grid-gap);
}
.rz-card__jrail {
  position: absolute;
  inset-inline: 16%;
  top: calc(var(--rzc-card-pad) + 29px);
  height: 3px;
  opacity: 0.34;
  background: linear-gradient(90deg, var(--rzc-cobalt), var(--rzc-teal) 52%, var(--rzc-gold));
}
.rz-card__pulse {
  position: absolute;
  top: -4px;
  inset-inline-start: 0;
  width: 88px;
  height: 11px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  animation: rz-card-flow 5.2s var(--rzc-ease) infinite;
}
@keyframes rz-card-flow {
  0% {
    inset-inline-start: -10%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    inset-inline-start: 100%;
    opacity: 0;
  }
}
.rz-card__node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: var(--rzc-card-pad);
  background: var(--rzc-white);
  border: 1px solid rgba(14, 26, 43, 0.1);
  box-shadow: 0 18px 40px -30px rgba(8, 22, 40, 0.5);
  transition:
    transform 0.22s var(--rzc-ease),
    box-shadow 0.22s var(--rzc-ease);
}
.rz-card__node:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 52px -30px rgba(8, 22, 40, 0.6);
}
.rz-card__node-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  margin: 0 0 22px;
  font-size: 21px;
  font-weight: 700;
  color: var(--rzc-white);
}
.rz-card__node--acct .rz-card__node-badge {
  background: var(--rzc-cobalt);
}
.rz-card__node--wallet .rz-card__node-badge {
  background: var(--rzc-teal-ink);
}
.rz-card__node--card .rz-card__node-badge {
  background: var(--rzc-gold);
  color: var(--royce-black);
}
.rz-card__node h3 {
  margin: 0 0 8px;
}
.rz-card__node p {
  margin: 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--rzc-ink-2);
}
/* tags sit on a shared baseline when the cards share a row */
.rz-card__node-tag {
  display: inline-block;
  margin-top: auto;
  padding-top: 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rz-card__node--acct .rz-card__node-tag {
  color: var(--rzc-cobalt);
}
.rz-card__node--wallet .rz-card__node-tag {
  color: var(--rzc-teal-ink);
}
.rz-card__node--card .rz-card__node-tag {
  color: var(--rzc-flag);
}
/* #endregion */

/* #region ------- ( 7- Inside the wallet ) ---------- */
.rz-card__wx {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(40px, 5.5vw, 80px);
  align-items: center;
}
.rz-card__wx > * {
  min-width: 0;
}
.rz-card__dash {
  position: relative;
  width: 100%;
  padding: var(--rzc-card-pad);
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 30px 60px -34px rgba(2, 10, 30, 0.8);
}
.rz-card__dash .rz-card__w-note {
  color: #d5e1f2;
}
.rz-card__dash-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}
.rz-card__dash-bal {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  color: var(--rzc-white);
}
.rz-card__dash-sub {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e9f1fd;
}
.rz-card__dash-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0 0;
}
.rz-card__pot {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(8, 22, 40, 0.26);
}
.rz-card__pot-k {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e9f1fd;
}
.rz-card__pot-v {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 600;
  color: var(--rzc-white);
}
.rz-card__pot--wallet {
  border-color: rgba(91, 232, 214, 0.6);
}
.rz-card__pot--wallet .rz-card__pot-v {
  color: #7ff3e4;
}
.rz-card__ledger {
  margin-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.26);
}
.rz-card__tx {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.rz-card__tx:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.rz-card__tx-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  font-size: 15px;
  font-weight: 700;
  color: var(--rzc-white);
}
.rz-card__tx--out .rz-card__tx-dot {
  background: rgba(255, 255, 255, 0.18);
}
.rz-card__tx--in .rz-card__tx-dot {
  background: rgba(18, 184, 166, 0.4);
}
.rz-card__tx--spend .rz-card__tx-dot {
  background: rgba(214, 166, 28, 0.42);
  color: #1a1405;
}
.rz-card__tx-body {
  min-width: 0;
}
.rz-card__tx-t {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--rzc-white);
}
.rz-card__tx-s {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: #e9f1fd;
}
.rz-card__tx-amt {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  text-align: end;
  color: var(--rzc-white);
}
.rz-card__tx--in .rz-card__tx-amt {
  color: #7ff3e4;
}
.rz-card__wx-points {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.rz-card__wx-points li {
  position: relative;
  padding-block: 10px;
  padding-inline-start: 34px;
  font-size: 16.5px;
  color: #e9f1fd;
}
.rz-card__wx-points li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 19px;
  width: 18px;
  height: 2px;
  background: var(--rzc-gold);
}
/* #endregion */

/* #region ------- ( 8- Benefits ) ---------- */
/* two generous columns; the feature panel takes its own full-width row with
   the card beside the copy, so nothing is laid over the text */
.rz-card__benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rzc-grid-gap);
}
.rz-card__ben {
  position: relative;
  min-width: 0;
  padding: var(--rzc-card-pad);
  background: var(--rzc-white);
  border: 1px solid rgba(14, 26, 43, 0.1);
  box-shadow: 0 14px 36px -32px rgba(8, 22, 40, 0.5);
  transition:
    transform 0.22s var(--rzc-ease),
    box-shadow 0.22s var(--rzc-ease),
    border-color 0.22s ease;
}
.rz-card__ben:hover {
  transform: translateY(-5px);
  border-color: rgba(21, 94, 239, 0.42);
  box-shadow: 0 30px 54px -32px rgba(8, 22, 40, 0.55);
}
/* feature panel: copy start, card end, on one row across both columns */
.rz-card__ben--feature {
  grid-column: 1 / -1;
  grid-row: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto 1fr;
  column-gap: clamp(32px, 5vw, 72px);
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px);
  color: var(--rzc-white);
  border-color: transparent;
  background: linear-gradient(150deg, var(--rzc-navy) 0%, var(--rzc-cobalt-deep) 64%, var(--rzc-cobalt) 100%);
}
.rz-card__ben--feature:hover {
  border-color: transparent;
}
.rz-card__ben--feature::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset-inline-end: 0;
  top: 0;
  width: 60%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 170, 36, 0.28), transparent 70%);
}
/* The card is the subject of this panel. Without it the gradient reads as a
   failed image. It is a grid item in the end column, never laid under copy. */
.rz-card__ben-shot {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: center;
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 14px 0;
  transform: rotate(-5deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 24px 42px rgba(2, 8, 20, 0.65));
  transition: transform 620ms var(--rzc-ease);
}
.rz-card__ben--feature:hover .rz-card__ben-shot {
  transform: rotate(-3deg) translateY(-6px);
}
.rz-card__ben--feature .rz-card__ben-ico {
  grid-column: 1;
  grid-row: 2;
  z-index: 4;
}
.rz-card__ben--feature .rz-card__h3 {
  grid-column: 1;
  grid-row: 3;
  position: relative;
  z-index: 4;
  margin: 0 0 14px;
  font-size: clamp(25px, 2.5vw, 32px);
  color: var(--rzc-white);
}
.rz-card__ben--feature p {
  grid-column: 1;
  grid-row: 4;
  position: relative;
  z-index: 4;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.7;
  color: #e9f1fd;
}
/* the closing benefit spans the row too, with its icon beside the copy */
.rz-card__ben:last-child:not(.rz-card__ben--feature) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 24px;
  align-items: start;
}
.rz-card__ben:last-child:not(.rz-card__ben--feature) .rz-card__ben-ico {
  grid-row: 1 / span 2;
  margin: 0;
}
.rz-card__ben:last-child:not(.rz-card__ben--feature) h3 {
  padding-top: 12px;
}
.rz-card__ben-ico {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  font-size: 18px;
  font-weight: 700;
  color: var(--rzc-white);
}
.rz-card__ben-ico--cobalt {
  background: var(--rzc-cobalt);
}
.rz-card__ben-ico--teal {
  background: var(--rzc-teal-ink);
}
.rz-card__ben-ico--gold {
  background: var(--rzc-gold);
  color: var(--royce-black);
}
.rz-card__ben-ico--navy {
  background: var(--rzc-navy-2);
}
.rz-card__ben h3 {
  margin: 0 0 10px;
}
.rz-card__ben p {
  margin: 0;
  max-width: 58ch;
  font-size: 15.5px;
  line-height: 1.64;
  color: var(--rzc-ink-2);
}
/* #endregion */

/* #region ------- ( 9- How to get the card ) ---------- */
.rz-card__steps {
  --rzc-steps-gap: clamp(24px, 2.6vw, 36px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rzc-steps-gap);
}
/* from the first marker's centre to the last marker's centre */
.rz-card__srail {
  position: absolute;
  inset-inline-start: 27px;
  inset-inline-end: calc((100% - 3 * var(--rzc-steps-gap)) / 4 - 27px);
  top: 26px;
  height: 2px;
  background: linear-gradient(90deg, rgba(46, 144, 250, 0.3), rgba(18, 184, 166, 0.6), rgba(214, 166, 28, 0.65));
}
.rz-card__srail .rz-card__pulse {
  width: 80px;
  height: 10px;
  animation-duration: 6s;
}
.rz-card__step {
  position: relative;
  min-width: 0;
}
.rz-card__step-n {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 0 24px;
  font-size: 17px;
  font-weight: 700;
  color: var(--rzc-white);
  background: var(--rzc-navy);
  border: 2px solid var(--rzc-azure);
}
.rz-card__step:nth-of-type(3) .rz-card__step-n {
  border-color: var(--rzc-teal);
}
.rz-card__step:nth-of-type(4) .rz-card__step-n {
  border-color: var(--rzc-gold);
}
.rz-card__step h3 {
  margin: 0 0 10px;
  color: var(--rzc-white);
}
.rz-card__step p {
  margin: 0;
  max-width: 48ch;
  font-size: 15.5px;
  line-height: 1.64;
  color: var(--rzc-on-dark-2);
}
.rz-card__steps + .rz-card__ctas {
  margin-top: clamp(40px, 4.4vw, 56px);
}
/* #endregion */

/* #region ------- ( 10- Security and infrastructure ) ---------- */
.rz-card__trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rzc-grid-gap);
}
.rz-card__trust-item {
  min-width: 0;
  padding: var(--rzc-card-pad);
  background: var(--rzc-white);
  border: 1px solid rgba(14, 26, 43, 0.1);
  border-top: 3px solid var(--rzc-cobalt);
  transition:
    transform 0.2s var(--rzc-ease),
    box-shadow 0.2s var(--rzc-ease);
}
.rz-card__trust-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 46px -32px rgba(8, 22, 40, 0.5);
}
.rz-card__trust-item:nth-child(2) {
  border-top-color: var(--rzc-gold);
}
.rz-card__trust-item:nth-child(3) {
  border-top-color: var(--rzc-teal);
}
.rz-card__trust-item:nth-child(4) {
  border-top-color: var(--rzc-navy);
}
.rz-card__trust-item h3 {
  margin: 0 0 10px;
  font-size: 20px;
}
.rz-card__trust-item p {
  margin: 0;
  max-width: 58ch;
  font-size: 15.5px;
  line-height: 1.64;
  color: var(--rzc-ink-2);
}
.rz-card__infra {
  max-width: 78ch;
  margin-top: clamp(28px, 3vw, 40px);
  padding: 24px 28px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--rzc-ink-2);
  background: var(--rzc-ivory);
  border-inline-start: 3px solid var(--rzc-cobalt);
}
.rz-card__infra b {
  font-weight: 600;
  color: var(--rzc-ink);
}
/* #endregion */

/* #region ------- ( 11- FAQ ) ---------- */
.rz-card__faq {
  max-width: 920px;
  border-top: 1px solid rgba(14, 26, 43, 0.14);
}
.rz-card__q {
  border-bottom: 1px solid rgba(14, 26, 43, 0.14);
}
.rz-card__q summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding-block: 26px;
  padding-inline: 0 56px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--rzc-ink);
  transition: color 0.18s ease;
}
.rz-card__q summary:hover {
  color: var(--rzc-cobalt);
}
.rz-card__q summary::-webkit-details-marker {
  display: none;
}
.rz-card__q summary::after {
  content: '';
  position: absolute;
  inset-inline-end: 10px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  color: var(--rzc-cobalt);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform 0.24s var(--rzc-ease);
}
.rz-card__q[open] summary::after {
  transform: rotate(135deg);
}
.rz-card__q[open] summary {
  color: var(--rzc-cobalt);
}
.rz-card__q-body {
  max-width: 70ch;
  padding-block: 0 28px;
  padding-inline: 0 56px;
  font-size: 16.5px;
  line-height: 1.74;
  color: var(--rzc-ink-2);
}
.rz-card__q-body p {
  margin: 0;
}
.rz-card__q-body p + p {
  margin-top: 14px;
}
.rz-card__q-body a {
  color: var(--rzc-cobalt);
  overflow-wrap: anywhere;
}
/* wide screens: heading beside the questions, so the section uses the page
   width instead of leaving half of it empty */
@media (min-width: 1200px) {
  .rz-card__faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 72px;
    align-items: start;
  }
  .rz-card__faq-layout .rz-card__head {
    margin: 0;
  }
  .rz-card__faq-layout .rz-card__faq {
    max-width: none;
  }
}
/* #endregion */

/* #region ------- ( 12- Final CTA ) ---------- */
.rz-card__section--final {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: var(--rzc-on-dark);
  background: linear-gradient(140deg, var(--rzc-navy) 0%, #0b2e63 48%, var(--rzc-cobalt-deep) 100%);
}
.rz-card__final-runway {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56%;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 118%, rgba(255, 170, 36, 0.36), transparent 70%), radial-gradient(40% 80% at 22% 120%, rgba(18, 184, 166, 0.26), transparent 70%);
}
.rz-card__section--final .rz-card__h2 {
  max-width: 22ch;
  margin-inline: auto;
  color: var(--rzc-white);
}
.rz-card__section--final .rz-card__lede {
  margin-inline: auto;
  color: #e9f1fd;
}
.rz-card__section--final .rz-card__eyebrow {
  justify-content: center;
}
.rz-card__section--final .rz-card__ctas {
  justify-content: center;
}
.rz-card__final-card {
  position: relative;
  z-index: 1;
  width: min(420px, 72%);
  margin: 0 auto 48px;
  padding: 12px 0;
}
.rz-card__final-card img {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(-3deg);
  filter: drop-shadow(0 34px 54px rgba(2, 8, 20, 0.8));
}
/* Mastercard attribution — required wherever the mark appears */
.rz-card__legal {
  max-width: 70ch;
  margin: 28px auto 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #bcc9db;
}
/* #endregion */

/* #region ------- ( 13- Responsive ) ---------- */
/* The package's 1180 / 1024 / 900 / 600 on the site's ladder: 1199.98 (the
   1024 rule was the hero gap alone and folds in here), 991.98, 767.98. Every
   grid returns to minmax(0, 1fr) tracks and every spanning child has its
   placement reset, so no breakpoint can create an implicit column. */
@media (max-width: 1199.98px) {
  .rz-card__hero-grid {
    gap: 36px;
  }
  /* journey: three cards stack; wide cards put the badge beside the copy */
  .rz-card__journey {
    grid-template-columns: minmax(0, 1fr);
  }
  .rz-card__jrail {
    display: none;
  }
  .rz-card__node {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  .rz-card__node-badge {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0;
  }
  .rz-card__node h3,
  .rz-card__node p,
  .rz-card__node-tag {
    grid-column: 2;
  }
  .rz-card__node h3 {
    padding-top: 14px;
  }
  .rz-card__node-tag {
    margin-top: 0;
    padding-top: 14px;
    justify-self: start;
  }
  /* steps: two by two, no rail */
  .rz-card__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 44px;
  }
  .rz-card__srail {
    display: none;
  }
}
@media (max-width: 991.98px) {
  .rz-card__hero-photo {
    background-position: 66% 46%;
  }
  /* hero: message and actions first, illustration after */
  .rz-card__hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 7vw, 56px);
  }
  .rz-card__visual {
    order: 0;
    padding: 0;
  }
  .rz-card__stack {
    --rzc-card-w: 86%;
    --rzc-tuck: 11%;
    max-width: 480px;
  }
  .rz-card__wallet {
    width: 84%;
  }
  .rz-card__trail {
    display: none;
  }
  .rz-card__wx {
    grid-template-columns: minmax(0, 1fr);
  }
  .rz-card__dash {
    max-width: 640px;
  }
  .rz-card__trust {
    grid-template-columns: minmax(0, 1fr);
  }
  /* benefits: one card per row; every span and placement reset */
  .rz-card__benefits {
    grid-template-columns: minmax(0, 1fr);
  }
  .rz-card__ben,
  .rz-card__ben--feature,
  .rz-card__ben:last-child:not(.rz-card__ben--feature) {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .rz-card__ben--feature {
    display: block;
    padding: var(--rzc-card-pad);
  }
  .rz-card__ben-shot {
    width: 88%;
    max-width: 420px;
    margin: 6px auto 30px;
    transform: rotate(-3deg);
  }
  .rz-card__ben--feature:hover .rz-card__ben-shot {
    transform: rotate(-3deg);
  }
  .rz-card__ben--feature::after {
    display: none;
  }
  .rz-card__ben:last-child:not(.rz-card__ben--feature) {
    display: block;
  }
  .rz-card__ben:last-child:not(.rz-card__ben--feature) .rz-card__ben-ico {
    margin: 0 0 22px;
  }
  .rz-card__ben:last-child:not(.rz-card__ben--feature) h3 {
    padding-top: 0;
  }
}
@media (max-width: 767.98px) {
  .rz-card {
    font-size: 16px;
  }
  .rz-card__lede {
    font-size: 17px;
  }
  .rz-card__head {
    max-width: none;
  }
  .rz-card__hero-copy {
    font-size: 16.5px;
  }
  .rz-card__flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rz-card__flow li {
    justify-content: flex-start;
  }
  .rz-card__stack {
    --rzc-card-w: 88%;
    --rzc-tuck: 10%;
    padding-top: 28px;
  }
  .rz-card__wallet {
    width: 88%;
    padding-inline: 18px;
  }
  .rz-card__w-line {
    font-size: 13.5px;
  }
  .rz-card__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .rz-card__btn {
    width: 100%;
  }
  .rz-card__relation {
    display: flex;
    padding: 14px 18px;
    font-size: 15px;
  }
  /* journey cards: badge above the copy so the text keeps the full card width */
  .rz-card__node {
    display: flex;
  }
  .rz-card__node-badge {
    width: 52px;
    height: 52px;
    margin: 0 0 20px;
    font-size: 19px;
  }
  .rz-card__node h3 {
    padding-top: 0;
  }
  .rz-card__node-tag {
    padding-top: 16px;
  }
  /* wallet dashboard: pots become full-width label / value rows */
  .rz-card__dash-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .rz-card__pot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 14px 16px;
  }
  .rz-card__pot-v {
    margin-top: 0;
    font-size: 20px;
  }
  .rz-card__tx {
    column-gap: 12px;
  }
  .rz-card__tx-t {
    font-size: 15px;
  }
  .rz-card__tx-amt {
    font-size: 15px;
  }
  /* steps: a vertical timeline. Marker and connector live in the step's own
     first column, so nothing depends on negative offsets or on overflow. */
  .rz-card__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .rz-card__step {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 18px;
    padding-bottom: 34px;
  }
  .rz-card__step:last-of-type {
    padding-bottom: 0;
  }
  .rz-card__step::before {
    content: '';
    position: absolute;
    inset-inline-start: 23px;
    top: 48px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(46, 144, 250, 0.55), rgba(46, 144, 250, 0.18));
  }
  .rz-card__step:last-of-type::before {
    display: none;
  }
  .rz-card__step-n {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    margin: 0;
    font-size: 16px;
  }
  .rz-card__step h3 {
    grid-column: 2;
    margin: 0 0 8px;
    padding-top: 10px;
  }
  .rz-card__step p {
    grid-column: 2;
  }
  .rz-card__infra {
    padding: 20px 20px 20px 22px;
    font-size: 15.5px;
  }
  .rz-card__q summary {
    padding-block: 22px;
    padding-inline: 0 44px;
    font-size: 19px;
  }
  .rz-card__q summary::after {
    inset-inline-end: 6px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
  }
  .rz-card__q-body {
    padding-inline: 0;
    padding-bottom: 24px;
    font-size: 16px;
  }
  .rz-card__final-card {
    width: min(320px, 86%);
    margin-bottom: 40px;
  }
}
/* #endregion */

/* #region ------- ( 14- RTL ) ---------- */
/* Arabic letterforms join — tracking breaks them apart */
.rtl .rz-card__eyebrow,
.rtl .rz-card__h1,
.rtl .rz-card__h2,
.rtl .rz-card__w-note,
.rtl .rz-card__w-label,
.rtl .rz-card__w-chip,
.rtl .rz-card__dash-sub,
.rtl .rz-card__pot-k,
.rtl .rz-card__node-tag {
  letter-spacing: 0;
}
/* the trail still runs wallet → card, which is now start → end */
.rtl .rz-card__trail svg {
  transform: scaleX(-1);
}
/* the → in "Royce Wallet → Royce Card" points the reading way */
.rtl .rz-card__relation i {
  transform: scaleX(-1);
}
/* the diagonal sweep and the shadowed card lean the other way */
.rtl .rz-card__sweep::after {
  transform: skewX(16deg);
}
/* #endregion */

/* #region ------- ( 15- Reduced motion ) ---------- */
@media (prefers-reduced-motion: reduce) {
  .rz-card .rz-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .rz-card__hero-glow,
  .rz-card__pulse,
  .rz-card__sweep::after,
  .rz-card__spark {
    animation: none;
  }
  .rz-card__sweep::after {
    display: none;
  }
  .rz-card__tilt,
  .rz-card__q summary::after,
  .rz-card__ben-shot {
    transition: none;
  }
  .rz-card__btn:hover,
  .rz-card__ben:hover,
  .rz-card__node:hover,
  .rz-card__trust-item:hover {
    transform: none;
  }
}
/* #endregion */