/* ==========================================================================
   Accept² — commercial site
   Hand-written static CSS. No build step, no dependencies.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Canvas — Stripe-style light. The dark palette is kept below under
     [data-theme="dark"], so the whole site flips with one attribute. */
  --bg:            #FFFFFF;
  --bg-raised:     #F6F9FC;
  --bg-panel:      #FFFFFF;
  --surface:       rgba(10, 37, 64, .035);
  --surface-hi:    rgba(10, 37, 64, .06);
  --border:        rgba(10, 37, 64, .09);
  --border-hi:     rgba(10, 37, 64, .16);

  /* Type */
  --text:          #0A2540;
  --text-soft:     #425466;
  --muted:         #5A6472;   /* ~6.0:1 on white */
  --faint:         #646D7B;   /* ~5.3:1 on white — clears AA for small text */

  /* Brand — the accept² blue, unchanged */
  --brand:         #1A7FFF;
  --brand-lift:    #0A5FD4;   /* ~5.8:1 on white */
  --brand-deep:    #0B55D9;
  --brand-glow:    rgba(26, 127, 255, .30);

  /* Accents */
  --teal:          #0A7C63;   /* ~5.1:1 on white */
  --teal-deep:     #0B7D65;
  --amber:         #9A5806;   /* ~5.4:1 on white */
  --rose:          #DF1B41;

  /* Gradients */
  --grad-brand:    linear-gradient(135deg, #4D9EFF 0%, #1A7FFF 45%, #0B55D9 100%);
  --grad-text:     linear-gradient(120deg, #0A2540 0%, #1A7FFF 100%);
  --grad-panel:    linear-gradient(165deg, rgba(255,255,255,.9), rgba(246,249,252,.6));

  /* Fonts */
  --font-display:  'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Rhythm */
  --wrap:          1200px;
  --wrap-narrow:   860px;
  --gutter:        24px;
  --r-sm:          6px;
  --r-md:          10px;
  --r-lg:          14px;
  --r-xl:          20px;

  /* Elevation — Stripe's soft layered shadows */
  --shadow-sm:     0 2px 5px -1px rgba(50,50,93,.08), 0 1px 3px -1px rgba(0,0,0,.06);
  --shadow-md:     0 6px 12px -2px rgba(50,50,93,.10), 0 3px 7px -3px rgba(0,0,0,.08);
  --shadow-lg:     0 15px 35px -5px rgba(50,50,93,.12), 0 5px 15px -5px rgba(0,0,0,.08);

  --ease:          cubic-bezier(.22, .61, .36, 1);
}

/* The original dark palette, one attribute away. */
:root[data-theme="dark"] .grid-lines {
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
}
:root[data-theme="dark"] .site-header.is-stuck { background: rgba(6,10,20,.84); }
:root[data-theme="dark"] .dropdown { background: rgba(13,20,38,.97); }
:root[data-theme="dark"] .mobile-menu { background: rgba(6,10,20,.98); }
:root[data-theme="dark"] .card { box-shadow: none; background: var(--grad-panel); }
:root[data-theme="dark"] .flow { background: linear-gradient(168deg, rgba(255,255,255,.07), rgba(255,255,255,.015)); }
:root[data-theme="dark"] .moat-art,
:root[data-theme="dark"] .quote-block,
:root[data-theme="dark"] .chip { background: rgba(0,0,0,.3); }
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .select,
:root[data-theme="dark"] .textarea { background: rgba(0,0,0,.34); }
:root[data-theme="dark"] .input:focus,
:root[data-theme="dark"] .textarea:focus { background: rgba(0,0,0,.5); }
:root[data-theme="dark"] .wallet-chip img { filter: none; }

:root[data-theme="dark"] {
  --bg: #060A14; --bg-raised: #0A1020; --bg-panel: #0D1426;
  --surface: rgba(255,255,255,.032); --surface-hi: rgba(255,255,255,.055);
  --border: rgba(255,255,255,.09); --border-hi: rgba(255,255,255,.16);
  --text: #E9EEF9; --text-soft: #B4C0D6; --muted: #7C8AA5; --faint: #56617A;
  --brand-lift: #4D9EFF; --teal: #2FE0B6; --amber: #FFB342; --rose: #FF6B8A;
  --grad-text: linear-gradient(120deg, #FFFFFF 0%, #C9DEFF 55%, #6FA8FF 100%);
  --grad-panel: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  --shadow-sm: 0 2px 8px rgba(0,0,0,.30);
  --shadow-md: 0 12px 36px rgba(0,0,0,.42);
  --shadow-lg: 0 32px 80px rgba(0,0,0,.55);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

::selection { background: var(--brand); color: #fff; }

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(72px, 9vw, 128px); position: relative; }
.section--tight { padding-block: clamp(56px, 6vw, 84px); }
.section--panel { background: var(--bg-raised); border-block: 1px solid var(--border); }

.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.stack   { display: flex; flex-direction: column; }
.stack-8  { gap: 8px; }  .stack-12 { gap: 12px; }
.stack-16 { gap: 16px; } .stack-24 { gap: 24px; }
.stack-32 { gap: 32px; } .stack-48 { gap: 48px; }

.center { text-align: center; }
.center-x { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Type utilities
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--brand-lift);
}
.eyebrow::before {
  content: '';
  width: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-lift));
}
.eyebrow--teal { color: var(--teal); }
.eyebrow--teal::before { background: linear-gradient(90deg, transparent, var(--teal)); }

.h-display { font-size: clamp(2.6rem, 6.6vw, 4.5rem); font-weight: 400; letter-spacing: -.032em; line-height: 1.08; }
.h-1       { font-size: clamp(2.05rem, 4.6vw, 3.1rem); font-weight: 500; letter-spacing: -.028em; }
.h-2       { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.h-3       { font-size: clamp(1.18rem, 1.8vw, 1.4rem); letter-spacing: -.018em; }

.lede {
  font-size: clamp(1.03rem, 1.5vw, 1.2rem);
  line-height: 1.66;
  color: var(--text-soft);
}
.body-soft { color: var(--text-soft); }
.body-muted { color: var(--muted); font-size: .955rem; line-height: 1.68; }
.tiny { font-size: .82rem; color: var(--faint); line-height: 1.6; }

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-text { color: var(--brand-lift); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.measure { max-width: 64ch; }
.measure-tight { max-width: 52ch; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.008em;
  white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 6px 20px rgba(26,127,255,.30), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--primary:hover { box-shadow: 0 12px 34px rgba(26,127,255,.44), inset 0 1px 0 rgba(255,255,255,.28); }

.btn--ghost {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border-hi);
  box-shadow: var(--shadow-sm);
}
:root[data-theme="dark"] .btn--ghost { background: var(--surface); box-shadow: none; }
.btn--ghost:hover { background: var(--surface-hi); border-color: rgba(255,255,255,.28); }

.btn--plain { padding-inline: 4px; color: var(--brand-lift); }
.btn--plain:hover { color: var(--brand-deep); }

.btn--sm { padding: 7px 14px; font-size: .875rem; border-radius: 5px; }
.btn--lg { padding: 12px 22px; font-size: 1rem; border-radius: 6px; }

.btn .arw { transition: transform .22s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }

/* --------------------------------------------------------------------------
   6. Cards & surfaces
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: border-color .28s var(--ease), transform .28s var(--ease), background .28s var(--ease);
}
.card--hover:hover {
  border-color: var(--border-hi);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.card--link { display: block; }
.card--flat { background: var(--bg-panel); }
.card--pad-lg { padding: clamp(28px, 4vw, 44px); }

/* Card that glows at its top edge on hover */
.card--beam::before {
  content: '';
  position: absolute; inset: -1px -1px auto -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-lift), transparent);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.card--beam:hover::before { opacity: 1; }

.icon-box {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: linear-gradient(150deg, rgba(26,127,255,.24), rgba(26,127,255,.07));
  border: 1px solid rgba(77,158,255,.26);
  color: var(--brand-lift);
  flex: none;
}
.icon-box--teal {
  background: linear-gradient(150deg, rgba(47,224,182,.22), rgba(47,224,182,.06));
  border-color: rgba(47,224,182,.26);
  color: var(--teal);
}
.icon-box--amber {
  background: linear-gradient(150deg, rgba(255,179,66,.22), rgba(255,179,66,.06));
  border-color: rgba(255,179,66,.26);
  color: var(--amber);
}
.icon-box--sm { width: 34px; height: 34px; border-radius: 10px; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .8rem;
  color: var(--text-soft);
  white-space: nowrap;
}
.pill--brand { border-color: rgba(77,158,255,.3); color: var(--brand-lift); background: rgba(26,127,255,.10); }
.pill--teal  { border-color: rgba(47,224,182,.3); color: var(--teal); background: rgba(47,224,182,.09); }
.pill--amber { border-color: rgba(255,179,66,.32); color: var(--amber); background: rgba(255,179,66,.10); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.dot--pulse { animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

.rule { height: 1px; background: var(--border); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   7. Ambient background effects
   -------------------------------------------------------------------------- */
.aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.aura--brand { background: radial-gradient(circle, rgba(26,127,255,.14), transparent 68%); }
.aura--teal  { background: radial-gradient(circle, rgba(14,159,128,.10), transparent 68%); }

.grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(10,37,64,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,37,64,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, #000 20%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}

.layer { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   7b. Hero gradient sweep — Stripe's signature diagonal wash
   -------------------------------------------------------------------------- */
.sweep {
  position: absolute;
  top: -42%;
  right: -18%;
  width: 78%;
  height: 185%;
  /* Accept²'s own spectrum — blue through cyan to mint, one warm note.
     Same craft as Stripe's wash, not the same colours. */
  background: conic-gradient(from 195deg at 62% 40%,
      #0B55D9 0deg, #1A7FFF 60deg, #4FB8FF 120deg,
      #35E0B0 190deg, #7BE0FF 250deg, #8FA6FF 305deg, #0B55D9 360deg);
  filter: blur(62px) saturate(1.15);
  opacity: .42;
  transform: skewY(-14deg);
  border-radius: 46% 54% 40% 60%;
  pointer-events: none;
  z-index: 0;
  animation: sweep-drift 22s ease-in-out infinite alternate;
}
@keyframes sweep-drift {
  from { transform: skewY(-14deg) translate3d(0,0,0) rotate(0deg); }
  to   { transform: skewY(-14deg) translate3d(-3%, 4%, 0) rotate(7deg); }
}
:root[data-theme="dark"] .sweep { opacity: .22; filter: blur(80px) saturate(1.1); }
@media (prefers-reduced-motion: reduce) { .sweep { animation: none; } }
@media (max-width: 900px) { .sweep { width: 130%; right: -40%; opacity: .32; } }

/* --------------------------------------------------------------------------
   7c. Phone stage — a real device frame with the screen mapped into it
   The frame PNG is 472x834 with its display already transparent. The screen
   is a flat 300x650 element projected onto the frame's trapezoidal display
   by the matrix below, so content sits in true perspective inside the bezel.
   -------------------------------------------------------------------------- */
.phone-stage {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.phone {
  /* A photographic iPhone, mirrored so it faces the wallets. The 300x650 screen is
     projected onto the photo's display; the scale lives in --ph-scale on the stage. */
  position: relative; z-index: 2;
  width: 472px; height: 834px;
  transform: scale(var(--ph-scale)); transform-origin: center;
  margin: calc(834px * (var(--ph-scale) - 1) / 2) calc(472px * (var(--ph-scale) - 1) / 2);
  filter: drop-shadow(14px 30px 40px rgba(10,37,64,.26));
}
.phone__frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.phone__island {
  position: absolute; z-index: 6; top: 10px; left: 50%; width: 88px; height: 25px; margin-left: -44px;
  border-radius: 20px; background: #000;
}
/* The display cutout is a trapezoid: its sides are vertical but the left edge
   stands 707px tall against the right's 657px. The matrix below maps a flat
   300x650 screen onto that quad, padded 4px so the bezel covers the seam
   rather than leaving a gap for the page background to show through. */
.phone__screen {
  position: absolute; left: 0; top: 0;
  width: 300px; height: 650px;
  transform-origin: 0 0;
  transform: matrix3d(0.827934, -0.123731, 0, -0.000289, 0, 1.092067, 0, 0, 0, 0, 1, 0, 94.967309, 64.815451, 0, 1);
  border-radius: 42px; background: #fff; overflow: hidden; z-index: 1;
  font-family: var(--font-body);
}
.ph-yours { margin: 2px 18px 6px; font-size: .95rem; font-weight: 600; color: var(--text); flex: none; }

/* ---- screen contents ---- */
.ph-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 20px 2px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text);
}
.ph-head { display: flex; align-items: center; justify-content: space-between; padding: 0 18px 8px; }

.ph-issuer { position: relative; display: block; width: 110px; height: 24px; }
.ph-issuer span {
  position: absolute; inset: 0; display: flex; align-items: center;
  opacity: 0; animation: ph-card-cycle 31.5s infinite;
}
/* the issuers' own logos; Isracard is its mark with the name set beside it */
.iss img { display: block; height: 20px; width: auto; }
.iss--isracard { gap: 5px; }
.iss--isracard b { font-family: var(--font-display); font-weight: 700; font-size: .92rem; letter-spacing: -.02em; color: #1B1F3B; }
.ph-issuer span:nth-child(1) { animation-delay: 0s; }
.ph-issuer span:nth-child(2) { animation-delay: 10.5s; }
.ph-issuer span:nth-child(3) { animation-delay: 21s; }

.ph-powered { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .04em; color: var(--faint); white-space: nowrap; }
.ph-powered img { display: block; height: 30px; width: auto; }
.ph-powered b { font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: -.02em; color: var(--text); }
.ph-powered b sup { font-size: .58em; color: var(--brand); top: -.55em; position: relative; }

.ph-cards { position: relative; width: 70%; margin: 0 auto; aspect-ratio: 1.586 / 1; border-radius: 12px; }
.ph-cards img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; border-radius: 10px;
  animation: ph-card-cycle 31.5s infinite;
}
.ph-cards img:nth-child(1) { animation-delay: 0s; }
.ph-cards img:nth-child(2) { animation-delay: 10.5s; }
.ph-cards img:nth-child(3) { animation-delay: 21s; }

/* ph-card-cycle keyframes: generated, in section 22 */
@media (prefers-reduced-motion: reduce) {
  .ph-cards img, .ph-issuer span, .ph-logo--card img { animation: none; opacity: 0; }
  .ph-cards img:nth-child(1), .ph-issuer span:nth-child(1), .ph-logo--card img:nth-child(1) { opacity: 1; }
}

.ph-pay { padding: 30px 18px 0; }
.ph-pay .amt { display: flex; align-items: baseline; justify-content: space-between; }
.ph-pay .amt b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; color: var(--text); }
.ph-pay .amt span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--teal); font-weight: 500; }
.ph-pay .where { font-size: .76rem; color: var(--muted); margin-top: 2px; }

.ph-split { padding: 10px 18px 0; }
.ph-split .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--faint); display: block; margin-bottom: 6px; }
.ph-src {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0; font-size: 1.17rem; font-weight: 450; color: var(--text);
  border-top: 1px solid var(--border);
}
/* Names whichever card is on screen, on the card stack's own timing. */
.ph-cardname { position: relative; display: inline-block; width: 118px; height: 1.28em; }
.ph-cardname span {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  opacity: 0; animation: ph-card-cycle 31.5s infinite;
}
.ph-cardname span:nth-child(1) { animation-delay: 0s; }
.ph-cardname span:nth-child(2) { animation-delay: 10.5s; }
.ph-cardname span:nth-child(3) { animation-delay: 21s; }
@media (prefers-reduced-motion: reduce) {
  .ph-cardname span { animation: none; opacity: 0; }
  .ph-cardname span:nth-child(1) { opacity: 1; }
}

.ph-src .v { margin-left: auto; font-family: var(--font-mono); font-size: 1.15rem; color: var(--text); }

.ph-logo { width: 41px; height: 41px; border-radius: 11px; flex: none; object-fit: cover; display: block; }
/* Cycles the issuer logo — Isracard / Cal. / MAX — in step with the card on screen. */
.ph-logo--card { position: relative; overflow: hidden; }
.ph-logo--card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: ph-card-cycle 31.5s infinite; }
.ph-logo--card img:nth-child(1) { animation-delay: 0s; }
.ph-logo--card img:nth-child(2) { animation-delay: 10.5s; }
.ph-logo--card img:nth-child(3) { animation-delay: 21s; }


/* --------------------------------------------------------------------------
   8. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom-color: var(--border);
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 72px;
}

/* Stacked lockup — the wordmark sits UNDER the mark, matching the brand asset. */
.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: none;
  line-height: 1;
}
.brand-lockup img { width: 34px; height: 34px; object-fit: contain; }
.brand-lockup .wordmark {
  font-family: var(--font-display);
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--text);
}
.brand-lockup .wordmark sup { font-size: .6em; top: -.5em; position: relative; color: var(--brand-lift); }

/* Footer gets room to breathe, so the lockup runs larger there. */
.brand-lockup--lg { gap: 6px; }
.brand-lockup--lg img { width: 46px; height: 46px; }
.brand-lockup--lg .wordmark { font-size: 1.22rem; }

.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-link {
  position: relative;
  padding: 8px 13px;
  border-radius: 9px;
  font-size: .925rem;
  font-weight: 450;
  color: var(--text-soft);
  transition: color .2s, background .2s;
}
.nav-link:hover { color: var(--text); background: var(--surface); }
.nav-link.is-active { color: var(--text); }
.nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 1px;
  height: 2px; border-radius: 2px;
  background: var(--brand);
}

.nav-spacer { flex: 1; }
.nav-cta { display: flex; align-items: center; gap: 10px; flex: none; }

/* Dropdown */
.nav-item { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; gap: 6px; }
.nav-trigger .chev { transition: transform .22s var(--ease); }
.nav-item:hover .nav-trigger .chev,
.nav-item.is-open .nav-trigger .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 8px);
  width: 460px;
  padding: 10px;
  border-radius: var(--r-md);
  background: #fff;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-hi);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.nav-item:hover .dropdown,
.nav-item.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.dd-link {
  display: flex;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 11px;
  transition: background .18s;
}
.dd-link:hover { background: var(--surface-hi); }
.dd-link .dd-title { font-size: .9rem; font-weight: 500; color: var(--text); display: block; }
.dd-link .dd-desc { font-size: .785rem; color: var(--muted); line-height: 1.45; display: block; margin-top: 2px; }

/* Mobile */
.nav-burger { display: none; width: 40px; height: 40px; place-items: center; border-radius: 10px; border: 1px solid var(--border); }
.nav-burger:hover { background: var(--surface); }
.nav-burger span {
  display: block; width: 17px; height: 1.5px; background: var(--text); border-radius: 2px;
  transition: transform .26s var(--ease), opacity .2s;
}
.nav-burger span + span { margin-top: 4.5px; }
body.nav-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 72px 0 0 0;
  z-index: 99;
  background: rgba(255, 255, 255, .985);
  backdrop-filter: blur(20px);
  padding: 22px var(--gutter) 40px;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
body.nav-open .mobile-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu .m-group { padding-block: 14px; border-bottom: 1px solid var(--border); }
.mobile-menu .m-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 10px; display: block;
}
.mobile-menu .m-link {
  display: block; padding: 10px 0; font-size: 1.06rem;
  font-family: var(--font-display); font-weight: 500; color: var(--text);
}
.mobile-menu .m-link:hover { color: var(--brand-lift); }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(62px, 7vw, 78px);
  padding-bottom: clamp(48px, 6vw, 76px);
  overflow: hidden;
}
.hero .aura--a { width: 760px; height: 760px; top: -320px; left: 50%; margin-left: -380px; }
.hero .aura--b { width: 520px; height: 520px; top: 180px; right: -200px; }

.hero-inner { display: grid; grid-template-columns: 440px 1fr; gap: 40px; align-items: center; }
/* the roadmap wallets run directly under the illustration */
@media (min-width: 1081px) { .hero:has(.hero-wallets) { padding-top: clamp(28px, 3vw, 44px); } }
.hero-inner:has(.hero-wallets) { grid-template-rows: auto auto; row-gap: 0; }
.hero-inner:has(.hero-wallets) > :first-child { grid-column: 1; grid-row: 1; }
.hero-inner:has(.hero-wallets) > .phone-stage { grid-column: 2; grid-row: 1; }
.hero-wallets { grid-column: 1 / -1; grid-row: 2; min-width: 0; margin-top: -6px; }
/* the label stays under the illustration; the strip itself runs edge to edge */
.hero-wallets__k { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 20px; padding-left: 480px; font-size: .88rem; color: var(--muted); }
.hero-wallets__k.is-placed { justify-content: flex-start; padding-left: 0; }
.hero-wallets .marquee { margin-inline: calc(50% - 50vw); }
.hero-wallets .marquee {   /* the script lines it up from the headline to the table's corner */
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
@media (max-width: 1080px) {
  .hero-inner:has(.hero-wallets) > :first-child,
  .hero-inner:has(.hero-wallets) > .phone-stage, .hero-wallets { grid-column: 1; grid-row: auto; }
  .hero-wallets__k { padding-left: 0; }
}
.hero--center .hero-inner { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; text-align: center; }
.hero--center .btn-row, .hero--center .eyebrow { justify-content: center; }

.hero h1 { margin-block: 20px 22px; }
@media (min-width: 1081px) { .hero .h-display { font-size: clamp(2.6rem, 4.2vw, 3.7rem); } }
.hero .lede { font-size: clamp(1.08rem, 1.5vw, 1.32rem); line-height: 1.55; color: var(--text-soft); }
.hero .btn--primary { background: #0A2540; box-shadow: 0 12px 24px -12px rgba(10,37,64,.6); }
.hero .btn--primary:hover { background: #12345a; }
.btn-link { display: inline-flex; align-items: center; gap: 8px; padding: 12px 6px; font-weight: 600; font-size: 1rem;
            color: var(--brand-lift); text-decoration: none; }
.btn-link:hover .arw { transform: translateX(3px); }
.btn-link .arw { transition: transform .2s var(--ease); }
/* the new look is lighter: the saturated sweep and the grid step back */
.hero .sweep, .hero .grid-lines, .hero .aura { display: none; }
.hero { background: #fff; }
.hero h1.h-display { font-weight: 700; letter-spacing: -.04em; line-height: 1.02; color: var(--text); }
.hero .hl { color: #1A6BFF; white-space: nowrap; }
/* soft pale-blue light behind the product visuals */
.phone-stage::before {
  content: ""; position: absolute; z-index: 0; left: 8%; right: -6%; top: var(--nav-h); bottom: 0;
  background: radial-gradient(ellipse at 48% 46%, rgba(120,170,255,.28), rgba(120,170,255,.10) 42%, rgba(120,170,255,0) 70%);
  pointer-events: none;
}
.hero-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--border);
}
.hero-strip span {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-size: clamp(.95rem, 1.3vw, 1.15rem); font-weight: 500; color: var(--text);
}
.hero-strip span + span { border-left: 1px solid var(--border); }
.hs__icn {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%;
  background: #EEF4FF; color: #1A6BFF;
}
.hs__icn--g { background: #EAF8F0; color: #0A7C63; }
@media (max-width: 700px) {
  .hero-strip { grid-template-columns: 1fr; gap: 14px; }
  .hero-strip span { justify-content: flex-start; }
  .hero-strip span + span { border-left: 0; }
  .hs__icn { width: 42px; height: 42px; }
}

.hero-proof {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 30px; padding-top: 26px;
  border-top: 1px solid var(--border);
}
.hero-proof span { display: inline-flex; align-items: center; gap: 8px; font-size: .855rem; color: var(--muted); }
.hero-proof svg { color: var(--teal); flex: none; }

/* --------------------------------------------------------------------------
   10. Flow diagram (the signature visual)
   -------------------------------------------------------------------------- */
.flow {
  position: relative;
  border-radius: var(--r-xl);
  background: var(--bg-panel);
  border: 1px solid var(--border-hi);
  padding: 26px 24px 22px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.flow::after {
  content: '';
  position: absolute; inset: -1px -1px auto -1px; height: 1px;
  background: linear-gradient(90deg, transparent 12%, var(--brand-lift) 50%, transparent 88%);
}
.flow-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.flow-head .t {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}

.flow-svg { width: 100%; height: auto; display: block; }

.flow-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.flow-metric .k {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); display: block;
}
.flow-metric .v {
  font-family: var(--font-mono); font-size: 1.08rem; color: var(--teal);
  font-variant-numeric: tabular-nums; margin-top: 3px; display: block;
}

/* Animated dots travelling the SVG paths */
.spark { animation: travel 3.4s linear infinite; }
.spark--2 { animation-delay: -1.13s; }
.spark--3 { animation-delay: -2.26s; }
@keyframes travel { to { motion-offset: 100%; offset-distance: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .spark { animation: none; opacity: .55; }
  .dot--pulse { animation: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   10b. Diagram theming
   The accept² core is a solid brand panel on the light canvas and a soft
   tinted one on dark; its inner text stays light either way.
   -------------------------------------------------------------------------- */
.core-fill { opacity: .95; }
:root[data-theme="dark"] .core-fill { opacity: .16; }

/* Text sitting inside that blue panel must not follow the page text colour. */
.flow-svg .core-fill ~ text,
.moat-art .core-fill ~ text { fill: #FFFFFF; }

/* --------------------------------------------------------------------------
   11. Stat band
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat { background: var(--bg-panel); padding: 28px 24px; }
.stat .n {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.45rem);
  font-weight: 600; letter-spacing: -.035em;
  line-height: 1;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .l { font-size: .875rem; color: var(--muted); margin-top: 10px; line-height: 1.5; }

/* --------------------------------------------------------------------------
   12. Section headers
   -------------------------------------------------------------------------- */
.sec-head { max-width: 680px; margin-bottom: 52px; }
.sec-head.center { margin-inline: auto; }
.sec-head h2 { margin-block: 16px 16px; }

/* --------------------------------------------------------------------------
   13. Steps (how it works)
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 1px; background: var(--border);
         border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.step {
  counter-increment: step;
  background: var(--bg-raised);
  padding: 32px clamp(24px, 3vw, 38px);
  display: grid;
  grid-template-columns: 56px 1fr 1.05fr;
  gap: 26px;
  align-items: start;
  transition: background .3s var(--ease);
}
.step:hover { background: var(--bg-panel); }
.step .n {
  font-family: var(--font-mono);
  font-size: .95rem;
  color: var(--brand-lift);
  padding-top: 3px;
}
.step .n::before { content: '0' counter(step); }
.step h3 { margin-bottom: 9px; }
/* Code panels stay dark in both themes — a dark snippet on a light page is
   the payments-docs convention, and keeps the mono type legible. */
.step .detail {
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1.75;
  color: #B4C0D6;
  padding: 15px 17px;
  border-radius: var(--r-sm);
  background: #0D1426;
  border: 1px solid rgba(255,255,255,.08);
}
.step .detail b { color: #35E0B0; font-weight: 500; }
.step .detail .c { color: #7A89A3; }

/* --------------------------------------------------------------------------
   14. Comparison table
   -------------------------------------------------------------------------- */
.cmp {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: .92rem;
}
.cmp th, .cmp td { padding: 17px 20px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.cmp thead th {
  background: var(--bg-panel);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.cmp thead th.is-us { color: var(--brand-lift); background: rgba(26,127,255,.10); }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody td:first-child { color: var(--text); font-weight: 500; width: 27%; }
.cmp td.is-us { background: rgba(26,127,255,.055); color: var(--text-soft); }
.cmp td.is-them { color: var(--muted); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .cmp { min-width: 720px; }

/* --------------------------------------------------------------------------
   15. Audience / persona cards
   -------------------------------------------------------------------------- */
.persona {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.persona__body { padding: clamp(28px, 3.6vw, 44px); background: var(--bg-raised); }
.persona__aside {
  padding: clamp(28px, 3.6vw, 44px);
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
.persona--flip .persona__body { order: 2; border-left: 1px solid var(--border); }
.persona--flip .persona__aside { order: 1; border-left: 0; }

.check-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding-block: 9px;
  font-size: .945rem; color: var(--text-soft);
}
.check-list li + li { border-top: 1px solid var(--border); }
.check-list svg { color: var(--teal); flex: none; margin-top: 4px; }

.quote-block {
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 2px solid var(--brand);
}
.quote-block p { font-size: 1.02rem; line-height: 1.6; color: var(--text); font-style: italic; }
.quote-block .who { margin-top: 12px; font-size: .82rem; color: var(--muted); font-style: normal; }

/* --------------------------------------------------------------------------
   16. Logo / badge strip
   -------------------------------------------------------------------------- */
.badge-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 12px;
}
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .05em;
  color: var(--text-soft);
}
.badge svg { color: var(--muted); }

/* --------------------------------------------------------------------------
   16b. Wallet marquee
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  animation: marquee-slide 46s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

/* The track holds the list twice; -50% lands exactly on the duplicate,
   so the loop is seamless. */
@keyframes marquee-slide {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Transparent — the logos are white silhouettes sitting straight on the page.
   Held back to a muted opacity because none of these are connected yet. */
.wallet-chip {
  flex: none;
  display: grid;
  place-items: center;
  width: 112px;
  height: 40px;
}
.wallet-chip img {
  width: 100%; height: 100%;
  object-fit: contain;
  /* the logos are white silhouettes; invert them for the light canvas */
  filter: invert(1);
  opacity: .42;
  transition: opacity .25s var(--ease);
}
.marquee:hover .wallet-chip img { opacity: .55; }
.wallet-chip:hover img { opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee { mask-image: none; -webkit-mask-image: none; }
  .marquee__track > [aria-hidden="true"] { display: none; }
}

@media (max-width: 640px) {
  .wallet-chip { width: 92px; height: 34px; }
}

/* --------------------------------------------------------------------------
   16c. Moat illustrations
   Same dark language as the rest of the site — an inset panel a shade below
   the card it sits in, so the artwork reads as a plate, not a second card.
   -------------------------------------------------------------------------- */
.moat-art {
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 16px 18px;
}
.moat-art svg { width: 100%; height: auto; display: block; overflow: visible; }

@media (max-width: 640px) {
  .moat-art { padding: 12px 13px; }
}

/* --------------------------------------------------------------------------
   16d. People (leadership & advisors)
   Monogram avatars stand in for photography — swap for real headshots by
   replacing .avatar with <img class="avatar avatar--photo">.
   -------------------------------------------------------------------------- */
.person__role {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--brand-lift);
}

.avatar {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  background: var(--grad-brand);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.avatar--stealth {
  background: var(--surface);
  border: 1px dashed var(--border-hi);
  color: var(--muted);
  box-shadow: none;
}
.avatar--photo { object-fit: cover; padding: 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip--soon {
  font-size: .78rem;
  padding: 7px 13px;
  border-style: dashed;
  border-color: rgba(255,179,66,.34);
  color: var(--amber);
  background: rgba(255,179,66,.06);
}
.chip {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  padding: 4px 9px;
  border-radius: 5px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   16e. Slogans, why-now forces, outcome band
   -------------------------------------------------------------------------- */
.slogan {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.35;
  color: var(--text);
  text-wrap: balance;
}

.force-list { counter-reset: force; }
.force-list li {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding-block: 15px;
}
.force-list li + li { border-top: 1px solid var(--border); }
.force-n {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: rgba(26,127,255,.16);
  border: 1px solid rgba(77,158,255,.35);
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--brand-lift);
}
.force-list strong { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--text); }
.force-list span:not(.force-n) { display: block; margin-top: 3px; font-size: .9rem; color: var(--muted); line-height: 1.55; }

.cmp .vs-cell { text-align: center; color: var(--rose); font-size: 1rem; }
.cmp .ok-mark {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; margin-right: 9px;
  border-radius: 50%;
  background: rgba(14,159,128,.12);
  border: 1px solid rgba(14,159,128,.35);
  color: var(--teal-deep);
  font-size: .68rem;
  vertical-align: -3px;
}
.cmp td.is-them { color: var(--muted); }

.outcomes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: 26px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.outcome { background: var(--bg-panel); padding: 22px 16px; text-align: center; }
.outcome-n {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -.025em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.outcome-l { display: block; margin-top: 5px; font-size: .84rem; color: var(--muted); }

@media (max-width: 900px) { .outcomes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .outcomes { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   17. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.acc { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.acc__item + .acc__item { border-top: 1px solid var(--border); }
.acc__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 21px clamp(20px, 2.6vw, 30px);
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 500;
  background: var(--bg-raised);
  transition: background .2s;
}
.acc__q:hover { background: var(--bg-panel); }
.acc__q .ico { flex: none; color: var(--muted); transition: transform .28s var(--ease), color .2s; }
.acc__item.is-open .acc__q .ico { transform: rotate(45deg); color: var(--brand-lift); }
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); background: var(--bg-panel); }
.acc__item.is-open .acc__a { grid-template-rows: 1fr; }
.acc__a > div { overflow: hidden; }
.acc__a p { padding: 0 clamp(20px, 2.6vw, 30px) 24px; color: var(--text-soft); font-size: .95rem; }

/* Without JS the toggle can't run, so every answer would be unreachable. Show
   them all open instead — the FAQ reads as a plain Q&A list. */
html:not(.js) .acc__a { grid-template-rows: 1fr; }
html:not(.js) .acc__q { cursor: default; }
html:not(.js) .acc__q .ico { display: none; }

/* --------------------------------------------------------------------------
   18. CTA band
   -------------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; border-block: 1px solid var(--border); background: var(--bg-raised); }
.cta-band .aura { width: 620px; height: 620px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.cta-band .inner { padding-block: clamp(64px, 8vw, 100px); text-align: center; position: relative; z-index: 1; }
.cta-band h2 { max-width: 700px; margin-inline: auto; }
.cta-band .lede { max-width: 560px; margin: 18px auto 30px; }
.cta-band .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   19. Forms
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: .845rem; font-weight: 500; color: var(--text-soft); }
.field label .req { color: var(--brand-lift); }
.input, .select, .textarea {
  width: 100%;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1px solid var(--border-hi);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .95rem;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(26,127,255,.16);
}
.textarea { min-height: 128px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23697386' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}
.select option { background: #fff; color: var(--text); }
:root[data-theme="dark"] .select option { background: #0D1426; }

.form-note {
  padding: 13px 16px; border-radius: var(--r-sm);
  background: rgba(47,224,182,.08); border: 1px solid rgba(47,224,182,.24);
  color: var(--teal); font-size: .875rem;
}
.form-note--err { background: rgba(255,107,138,.08); border-color: rgba(255,107,138,.26); color: var(--rose); }
.form-note[hidden] { display: none; }

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-raised); padding-block: 64px 30px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px 28px; }
.foot-col h4 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--faint); font-weight: 500; margin-bottom: 15px;
}
.foot-col li + li { margin-top: 10px; }
.foot-col a { font-size: .9rem; color: var(--text-soft); transition: color .18s; }
.foot-col a:hover { color: var(--brand-lift); }

.foot-about p { font-size: .89rem; color: var(--muted); max-width: 30ch; margin-top: 15px; line-height: 1.66; }

.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  align-items: center; justify-content: space-between;
  margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--border);
}
.foot-bottom p, .foot-bottom a { font-size: .82rem; color: var(--faint); }
.foot-bottom a:hover { color: var(--text-soft); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 20px; }

.disclaimer { margin-top: 22px; font-size: .77rem; color: var(--faint); line-height: 1.7; max-width: 92ch; }

/* --------------------------------------------------------------------------
   21. Page hero (interior pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-top: clamp(118px, 13vw, 152px);
  padding-bottom: clamp(44px, 6vw, 68px);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.page-hero .aura { width: 620px; height: 620px; top: -300px; left: 42%; }
.page-hero h1 { margin-block: 18px 20px; }
.page-hero .lede { max-width: 62ch; }

.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--faint); }
.breadcrumb a:hover { color: var(--brand-lift); }

/* --------------------------------------------------------------------------
   22. Reveal on scroll
   -------------------------------------------------------------------------- */
/* Content is visible by default. Only when JS is confirmed running (the `js`
   class is set by an inline head script) do we hide it to animate it in — so a
   JS failure degrades to a plain, fully readable page instead of a blank one. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-about { grid-column: 1 / -1; }
  .step { grid-template-columns: 44px 1fr; }
  .step .detail { grid-column: 2; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; }
  .nav-cta .btn--ghost { display: none; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .persona { grid-template-columns: 1fr; }
  .persona__aside, .persona--flip .persona__body { border-left: 0; border-top: 1px solid var(--border); }
  .persona--flip .persona__body { order: 0; }
  .persona--flip .persona__aside { order: 0; }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; }
  body { font-size: 16px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .card { padding: 22px; }
  .step { grid-template-columns: 1fr; gap: 14px; }
  .step .detail { grid-column: 1; }
  .step .n { padding-top: 0; }
  .btn-row .btn { flex: 1 1 100%; }
  .flow { padding: 18px 16px 16px; }
}

/* ==========================================================================
   20. How-it-works wizard  (platform.html)
   Five steps. Each step's artwork is a mock of the actual screen the
   customer would see, so the page explains itself without being read.
   No-JS: every panel renders stacked. With JS: one panel at a time.
   ========================================================================== */
.section--flush { padding-top: 26px; }
.page-hero--tight { padding-bottom: clamp(26px, 3.4vw, 42px); }

.wiz { max-width: 1060px; margin: 0 auto; }

/* ---- progress rail ---- */
.wiz-rail {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px; margin-bottom: 34px;
}
.wiz-dot {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 0 4px 16px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); color: var(--muted); font-size: .84rem; font-weight: 500;
  border-bottom: 3px solid var(--border);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.wiz-dot__n {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--muted);
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.wiz-dot__l { text-align: center; line-height: 1.25; }
.wiz-dot:hover { color: var(--text); }
.wiz-dot:hover .wiz-dot__n { border-color: var(--border-hi); }
.wiz-dot.is-done { color: var(--text-soft); border-bottom-color: var(--brand); }
.wiz-dot.is-done .wiz-dot__n { background: rgba(26,127,255,.12); color: var(--brand-lift); border-color: transparent; }
.wiz-dot.is-current { color: var(--text); border-bottom-color: var(--brand); }
.wiz-dot.is-current .wiz-dot__n {
  background: var(--grad-brand); color: #fff; border-color: transparent;
  transform: scale(1.09); box-shadow: 0 6px 16px var(--brand-glow);
}
.wiz-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 6px; }

/* ---- panel ---- */
.wiz-panel {
  display: grid; grid-template-columns: 1fr 340px; gap: clamp(28px, 5vw, 68px);
  align-items: center; padding: 6px 0 4px;
}
.wiz-panel + .wiz-panel { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--border); }
.js .wiz-panel { display: none; }
.js .wiz-panel.is-current { display: grid; animation: wiz-in .42s var(--ease) both; }
/* One steady frame: stepping through never shifts the page under the reader. */
@media (min-width: 901px) { .js .wiz-panel { min-height: 580px; } }
.js .wiz-panel + .wiz-panel { margin-top: 0; padding-top: 6px; border-top: 0; }
.wiz-panel:focus { outline: none; }
@keyframes wiz-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .wiz-panel.is-current { animation: none; } }

.wiz-step {
  display: inline-block; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-lift); margin-bottom: 12px;
}
.wiz-h { font-family: var(--font-display); font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.1;
         letter-spacing: -.02em; color: var(--text); margin: 0 0 16px; }
.wiz-say { font-size: clamp(1.13rem, 1.7vw, 1.35rem); line-height: 1.5; color: var(--text-soft);
           font-weight: 450; margin: 0 0 14px; max-width: 30ch; }
.wiz-note { font-size: 1rem; line-height: 1.65; color: var(--muted); margin: 0 0 22px; max-width: 46ch; }
.wiz-when {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
  font-size: .82rem; font-weight: 500;
}
.wiz-when::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.wiz-when--once  { background: var(--surface); color: var(--faint); }
.wiz-when--every { background: rgba(10,124,99,.10); color: var(--teal); }

/* ---- the mock screen ---- */
.wiz-art { display: grid; place-items: center; }
.wiz-screen {
  width: 320px; max-width: 100%; border-radius: 30px; overflow: hidden;
  background: var(--bg-panel); border: 1px solid var(--border-hi);
  box-shadow: var(--shadow-lg);
}
.wiz-screen__bar { display: grid; place-items: center; height: 26px; background: var(--surface); }
.wiz-notch { width: 62px; height: 6px; border-radius: 99px; background: var(--border-hi); }
.wiz-screen__body { padding: 18px 18px 22px; }
.wiz-screen__title {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 12px;
}

.wiz-brandrow { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.wiz-bankmark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
                background: var(--surface); color: var(--muted); }
.wiz-bankname { font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
                color: var(--muted); }

/* rows: tile / pick / option all share the same card look */
.wiz-tile, .wiz-pick, .wiz-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px; margin-bottom: 9px; border-radius: 13px;
  background: var(--bg-panel); border: 1.5px solid var(--border);
}
.wiz-tile.is-on, .wiz-pick.is-picked, .wiz-opt.is-picked {
  border-color: var(--brand); background: rgba(26,127,255,.055);
}
.wiz-pick.is-signing { border-style: dashed; border-color: var(--border-hi); }

.wiz-tile__txt, .wiz-pick__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wiz-tile__txt strong, .wiz-pick__txt strong { font-size: .97rem; font-weight: 600; color: var(--text); }
.wiz-tile__txt em, .wiz-pick__txt em { font-style: normal; font-size: .8rem; color: var(--muted); }
.wiz-tile__txt strong sup { font-size: .58em; top: -.5em; position: relative; }

.wiz-switch { flex: none; width: 44px; height: 26px; border-radius: 99px; background: var(--grad-brand);
              position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.wiz-switch span { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
                   background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28); }

.wiz-pick__card { flex: none; width: 76px; height: 48px; object-fit: contain; border-radius: 5px; }
.wiz-pick__logo { flex: none; width: 34px; height: 34px; border-radius: 9px; }
.wiz-pick--sm { padding: 10px 12px; }

.wiz-radio { flex: none; width: 21px; height: 21px; border-radius: 50%; border: 2px solid var(--border-hi); }
.is-picked .wiz-radio { border-color: var(--brand); box-shadow: inset 0 0 0 4.5px var(--bg-panel),
                        inset 0 0 0 11px var(--brand); }
.wiz-check { flex: none; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 6px;
             border: 2px solid var(--border-hi); color: transparent; }
.is-picked .wiz-check { background: var(--brand); border-color: var(--brand); color: #fff; }

.wiz-ok { display: flex; align-items: center; gap: 8px; margin: 14px 0 0;
          font-size: .9rem; font-weight: 600; color: var(--teal); }

/* step 3 sign-in slip */
.wiz-signin { margin-top: 13px; padding: 13px; border-radius: 13px;
              background: var(--surface); border: 1px solid var(--border); }
.wiz-signin__h { display: flex; align-items: center; gap: 7px; margin: 0 0 10px;
                 font-size: .84rem; font-weight: 600; color: var(--text); }
.wiz-field { display: block; padding: 9px 11px; margin-bottom: 7px; border-radius: 8px;
             background: var(--bg-panel); border: 1px solid var(--border);
             font-size: .82rem; color: var(--muted); }
/* Solid --brand-deep, not the gradient: the gradient's light end only reaches
   ~3:1 against white text, which fails AA for text this size. */
.wiz-cta { display: block; padding: 9px; border-radius: 8px; background: var(--brand-deep);
           color: #fff; font-size: .86rem; font-weight: 600; text-align: center; }

/* step 4 options */
.wiz-opt { flex-direction: column; align-items: stretch; gap: 10px; }
.wiz-opt__head { display: flex; align-items: center; gap: 10px; }
.wiz-opt__head strong { flex: 1; font-size: .97rem; font-weight: 600; color: var(--text); }
.wiz-opt__head strong sup { font-size: .58em; top: -.5em; position: relative; }
.wiz-opt__icn { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
                background: rgba(26,127,255,.12); color: var(--brand-lift); }
.wiz-opt__icn--ai { background: rgba(154,88,6,.12); color: var(--amber); }
.wiz-opt__sub { font-style: normal; font-size: .82rem; color: var(--muted); }
.wiz-order { display: flex; flex-wrap: wrap; gap: 6px; }
.wiz-ochip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 5px;
             border-radius: 99px; background: var(--bg-panel); border: 1px solid var(--border);
             font-size: .78rem; font-weight: 500; color: var(--text-soft); }
.wiz-ochip b { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
               background: var(--brand); color: #fff; font-size: .66rem; }
.wiz-ochip img { border-radius: 5px; }

/* step 5 approval */
.wiz-amount { font-family: var(--font-display); font-size: 2.45rem; font-weight: 600; letter-spacing: -.02em;
              color: var(--text); margin: 4px 0 2px; }
.wiz-merchant { font-size: .88rem; color: var(--muted); margin: 0 0 18px; }
.wiz-fundedlabel { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
                   text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.wiz-fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.wiz-fchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px;
             border-radius: 99px; background: var(--surface); border: 1px solid var(--border);
             font-size: .8rem; font-weight: 500; color: var(--text-soft); }
.wiz-fchip img { border-radius: 5px; }
.wiz-approve { display: block; padding: 14px; border-radius: 13px; background: var(--teal); color: #fff;
               font-size: 1.05rem; font-weight: 600; text-align: center; letter-spacing: .01em;
               box-shadow: 0 8px 20px rgba(10,124,99,.26); }
.wiz-bio { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0;
           font-size: .8rem; color: var(--muted); }

/* ---- back / next ---- */
.wiz-nav { display: none; align-items: center; justify-content: space-between; gap: 16px;
           margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--border); }
.js .wiz-nav { display: flex; }
.wiz-count { font-family: var(--font-mono); font-size: .8rem; color: var(--faint); }
.wiz-back[disabled] { opacity: .4; pointer-events: none; }

/* ---- what you need ---- */
.need-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.need { padding: 26px; border-radius: var(--r-lg); background: var(--bg-panel);
        border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.need__icn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
             background: rgba(26,127,255,.12); color: var(--brand-lift); margin-bottom: 16px; }
.need__icn--teal  { background: rgba(10,124,99,.12); color: var(--teal); }
.need__icn--amber { background: rgba(154,88,6,.12); color: var(--amber); }
.need h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.need p { font-size: .96rem; color: var(--muted); margin: 0; }
.need-foot { margin: 26px 0 0; text-align: center; font-size: 1rem; color: var(--faint); }

/* ---- after setup ---- */
.after { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center;
         padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl);
         background: var(--grad-panel); border: 1px solid var(--border); }
.after__copy .h-2 { margin-top: 8px; }
/* One unbroken chain: wallets -> card -> shop. The three wallets overlap so
   the whole thing stays on a single line beside the copy. */
.after__strip { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 9px; }
.after__node { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 14px;
               background: var(--bg-panel); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.after__node img { width: 30px; height: 30px; border-radius: 8px; }
.after__node + .after__node { margin-left: -21px; }   /* wallets only — arrows break the chain */
.after__strip > :nth-child(1) { z-index: 3; }
.after__strip > :nth-child(2) { z-index: 2; }
.after__strip > :nth-child(3) { z-index: 1; }
.after__node--card { width: 80px; }
.after__node--card img { width: 64px; height: auto; border-radius: 4px; }
.after__node--shop { color: var(--teal); }
.after__arrow { color: var(--border-hi); display: grid; place-items: center; }

/* ---- deeper reading ---- */
.deep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.deep { display: block; padding: 26px; border-radius: var(--r-lg); background: var(--bg-panel);
        border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none;
        transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.deep:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.deep h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--text); margin: 0 0 8px; }
.deep p { font-size: .95rem; line-height: 1.6; color: var(--muted); margin: 0 0 16px; }
.deep__go { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600;
            color: var(--brand-lift); }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .wiz-panel { grid-template-columns: 1fr; gap: 28px; }
  /* Headline first, then the picture — instructions read that way. */
  .wiz-say, .wiz-note { max-width: none; }
  .need-grid, .deep-grid { grid-template-columns: 1fr; }
  .after { grid-template-columns: 1fr; }
  .after__strip { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .wiz-rail { gap: 3px; }
  .wiz-dot { padding-bottom: 12px; font-size: 0; gap: 0; }
  .wiz-dot__n { width: 34px; height: 34px; font-size: .95rem; }
  .wiz-nav { flex-wrap: wrap; justify-content: center; }
  .wiz-count { order: 3; width: 100%; text-align: center; }
}

:root[data-theme="dark"] .wiz-screen,
:root[data-theme="dark"] .wiz-tile,
:root[data-theme="dark"] .wiz-pick,
:root[data-theme="dark"] .wiz-opt,
:root[data-theme="dark"] .wiz-field,
:root[data-theme="dark"] .wiz-ochip,
:root[data-theme="dark"] .after__node,
:root[data-theme="dark"] .need,
:root[data-theme="dark"] .deep { background: var(--bg-panel); }
:root[data-theme="dark"] .wiz-tile.is-on,
:root[data-theme="dark"] .wiz-pick.is-picked,
:root[data-theme="dark"] .wiz-opt.is-picked { background: rgba(77,158,255,.10); }
:root[data-theme="dark"] .is-picked .wiz-radio { box-shadow: inset 0 0 0 4.5px var(--bg-panel), inset 0 0 0 11px var(--brand); }

/* ==========================================================================
   21. Phone — tappable funding rows and the per-source transaction view
   Each row in FUNDED FROM opens its own screen inside the handset: balance,
   amount, date, store and transaction number. The status bar and the issuer
   header stay put, exactly as they would in a real app.
   ========================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* the area a detail view covers — everything below the issuer header. It always
   fills the rest of the screen: breakdowns differ in length (two rows or four),
   and the flow screens and details are positioned against this box. */
.phone__screen { display: flex; flex-direction: column; }
.ph-status, .ph-head { flex: none; }
.ph-body { position: relative; flex: 1 1 auto; min-height: 0; }

/* rows are buttons now */
.ph-src {
  width: 100%; background: none; border: 0; border-top: 1px solid var(--border);
  font-family: var(--font-body); text-align: left; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background .18s var(--ease);
}
.ph-src:hover { background: rgba(10,37,64,.035); }
.ph-src:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 4px; }
.ph-chev { flex: none; margin-left: -4px; color: var(--faint); transition: transform .18s var(--ease); }
.ph-src:hover .ph-chev { transform: translateX(2px); color: var(--brand-lift); }

/* ---- the card, with a glow ---- */
.ph-cards::before {
  content: ""; position: absolute; inset: -16% -11%; z-index: 0; pointer-events: none;
  border-radius: 30px;
  background:
    radial-gradient(58% 56% at 50% 46%, rgba(26,127,255,.34), rgba(26,127,255,.12) 52%, rgba(26,127,255,0) 76%),
    radial-gradient(46% 44% at 50% 52%, rgba(255,255,255,.95), rgba(255,255,255,0) 72%);
  filter: blur(13px);
}
.ph-cards img { z-index: 1; filter: drop-shadow(0 7px 15px rgba(10,37,64,.30)); }

/* ---- detail view ---- */
.ph-view {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  padding: 2px 17px 13px; background: #fff;
  animation: ph-view-in .26s var(--ease) both;
}
/* An author `display` beats the UA's [hidden] rule, so restate it here —
   without this every view paints at once and the last one wins. */
.ph-view[hidden] { display: none; }
@keyframes ph-view-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ph-view { animation: none; } }

.ph-vhead { display: flex; align-items: center; gap: 9px; padding: 0 0 7px; }
.ph-vback {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--brand-deep);
  border-radius: 50%; transition: background .18s var(--ease);
}
.ph-vback:hover { background: rgba(10,37,64,.06); }
.ph-vback:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ph-vtitle { font-family: var(--font-display); font-size: 1.16rem; font-weight: 600;
             letter-spacing: -.01em; color: var(--brand-deep); }
/* the whole title rotates, so the name never sits in a gap sized for a longer one */
.ph-vtitle .ph-cardname { width: 200px; height: 1.2em; vertical-align: -.2em; }

.ph-vtop { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 0 10px; }
.ph-vlogo { width: 46px; height: 46px; border-radius: 13px; object-fit: cover; margin-bottom: 7px; }
.ph-vlogo--card { position: relative; overflow: hidden; display: block; }
.ph-vlogo--card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                      opacity: 0; animation: ph-card-cycle 31.5s infinite; border-radius: 13px; }
.ph-vlogo--card img:nth-child(1) { animation-delay: 0s; }
.ph-vlogo--card img:nth-child(2) { animation-delay: 10.5s; }
.ph-vlogo--card img:nth-child(3) { animation-delay: 21s; }
.ph-vbal-k { font-size: .78rem; color: var(--muted); }
.ph-vbal { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
           letter-spacing: -.03em; color: var(--brand-deep); }

.ph-vcard {
  flex: 1; padding: 13px 14px 11px; border-radius: 14px; background: #fff;
  box-shadow: 0 5px 18px rgba(10,37,64,.13), 0 0 0 1px rgba(10,37,64,.05);
}
.ph-vstore { display: block; font-family: var(--font-display); font-size: 1.18rem; font-weight: 600;
             letter-spacing: -.02em; color: var(--brand-deep); }
.ph-vamt { display: block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600;
           letter-spacing: -.03em; color: var(--brand-deep); margin-top: -1px; }
.ph-vok { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px;
          font-size: .86rem; font-weight: 500; color: var(--text); }
.ph-vok svg { color: #15A66A; flex: none; }

.ph-vrows { margin: 10px 0 0; padding: 9px 0 0; border-top: 1px solid var(--border); }
.ph-vrows > div { display: flex; align-items: baseline; justify-content: space-between;
                  gap: 8px; padding: 4px 0; }
.ph-vrows dt { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.ph-vrows dd { margin: 0; font-size: .77rem; font-weight: 500; color: var(--brand-deep);
               text-align: right; white-space: nowrap; }
.ph-vfoot { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--border);
            font-size: .71rem; color: var(--muted); }

/* while a detail view is open the card stack holds still */
.phone__screen.has-view .ph-cards img,
.phone__screen.has-view .ph-cardname span,
.phone__screen.has-view .ph-logo--card img { animation-play-state: paused; }

/* ==========================================================================
   22. Hero scenes — In store (terminal) and Online (web shop)
   The phone stays put; its partner changes. One story runs 10.5s and uses one
   card, so the three cards take 31.5s. Every timed state below comes from the
   generated keyframes at the end of this section (seconds -> percentages).
   ========================================================================== */
.phone-stage {
  --nav-h: 72px; --nav-x: 0px;
  /* Solved per width band in _dev/terminal-build/layout_solver.py: wallet cards, links,
     phone, terminal; the phone's top lands on the terminal's corner when it tilts. */
  --ph-scale: 0.77; --ph-x: 6px; --ph-y: 2px;
  --pt-x: 175px;
  --pos-x: 172px; --pos-y: -163px; --pos-w: 312px;
  --card-grow: 1.24; --card-drop: 98px;
  --shop-y: -155px; --shop-w: 206px;
  --tilt-x: 11px; --tilt-y: 42px; --tilt-r: 24.6deg;
  --wl-x: -376px; --wl-w: 140px; --wl-conn: 116px; --wl-pitch: 84px;
  --gap: 44px;
  min-height: calc(580px + var(--nav-h));
  padding-top: var(--nav-h);
}
.phone { translate: var(--ph-x) var(--ph-y); }
.phone-stage[data-scene="1"] .phone { animation: ph-tilt 10.5s cubic-bezier(.45, 0, .25, 1) infinite; }

/* ---- screens inside the phone, covering everything under the card ---- */
.phone-stage[data-scene="1"] [data-scene-only="2"],
.phone-stage[data-scene="2"] [data-scene-only="1"] { display: none; }
.ph-flow {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 3;
  background: #fff; opacity: 0; visibility: hidden;
}
.ph-flow--ready, .ph-flow--web { animation: ph-ready 10.5s infinite; }
.ph-flow--hold, .ph-flow--paying { animation: ph-hold 10.5s infinite; }
.ph-webreq { position: absolute; inset: 0; animation: ph-webreq 10.5s infinite; }
.ph-webidle { animation: ph-webidle 10.5s infinite; }

.ph-dclick {
  position: absolute; top: 16px; right: 20px; text-align: right;
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.12;
  letter-spacing: -.01em; color: var(--text);
}
/* sits on the screen edge beside the side button, and flashes twice for the double-click */
.ph-sidekey {
  position: absolute; top: 10px; right: 0; width: 6px; height: 58px;
  border-radius: 6px 0 0 6px; background: var(--brand);
  box-shadow: 0 0 14px 3px rgba(26,127,255,.55); transform-origin: right center;
  animation: ph-sidekey 10.5s infinite;
}
.ph-flow__mid {
  position: absolute; left: 0; right: 0; top: 67%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.ph-flow__mid em { font-style: normal; font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; color: var(--text); }
.ph-flow__mid--quiet { top: 71%; gap: 10px; }
.ph-flow__mid--quiet em { font-family: var(--font-body); font-size: .95rem; font-weight: 500; color: var(--muted); }
.ph-cl { display: block; width: 66px; height: auto; color: var(--brand); }
.ph-flow__mid--quiet .ph-cl { width: 40px; color: var(--faint); }
.ph-flow__mid--live .ph-cl path { opacity: .3; }
.ph-flow__mid--live .a1 { animation: ph-cl-a1 10.5s infinite; }
.ph-flow__mid--live .a2 { animation: ph-cl-a2 10.5s infinite; }
.ph-flow__mid--live .a3 { animation: ph-cl-a3 10.5s infinite; }
.ph-merchant {
  position: absolute; left: 0; right: 0; top: 67%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.ph-merchant small { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; color: var(--faint); }
.ph-merchant b { font-family: var(--font-display); font-size: 2.05rem; font-weight: 600; letter-spacing: -.03em; color: var(--text); }
.ph-merchant em { font-style: normal; font-size: .85rem; color: var(--muted); }
.ph-spin, .shop__spin {
  display: block; border-radius: 50%; border-style: solid;
  border-color: rgba(26,127,255,.18); border-top-color: var(--brand);
  animation: spin .9s linear infinite;
}
.ph-spin { width: 54px; height: 54px; border-width: 5px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- partners: slide in and out when the scene changes ---- */
.partner {
  position: absolute; z-index: 1; left: 50%; top: calc(50% + var(--nav-h) / 2);
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
.partner:not(.is-active) { opacity: 0; visibility: hidden; }
.partner.is-active { transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s; }
.partner.is-before { transform: translateX(-44px); }
.partner.is-after  { transform: translateX(44px); }
.partner.no-anim   { transition: none; }

/* ---- scene 1: the terminal ---- */
.pos {
  z-index: 3;                                   /* in front: the phone's head tucks behind it */
  width: var(--pos-w); translate: var(--pos-x) var(--pos-y);
}
.pos__img { filter: drop-shadow(-10px 22px 26px rgba(10,37,64,.26)); }
.pos__img, .pos__pay, .pos__proc { display: block; width: 100%; height: auto; }
.pos__pay, .pos__proc { position: absolute; inset: 0; }
.pos__pay  { animation: pos-pay 10.5s infinite; }
/* the price on the terminal: text on a flat 600x816 screen, projected onto the photo's display
   (the canvas is 720x599 at --pos-k, set by site.js from the terminal's width) */
.pos__amt { position: absolute; left: 0; top: 0; width: 720px; height: 599px; transform-origin: 0 0; transform: scale(var(--pos-k, 1)); pointer-events: none; animation: pos-pay 10.5s infinite; }
.pos__amt-flat {
  position: absolute; left: 0; top: 0; width: 600px; height: 816px; transform-origin: 0 0;
  transform: matrix3d(0.440915, 0.037535, 0, -0.000015, -0.212238, 0.307834, 0, -0.000083, 0, 0, 1, 0, 286.3, 30.8, 0, 1);
}
.pos__amt b {
  position: absolute; left: 0; right: 0; top: 282px; transform: translateY(-50%); text-align: center; white-space: nowrap;
  font: 600 104px/1 var(--font-display); letter-spacing: -.01em; color: #0A2540;
}
.pos__proc { animation: pos-proc 10.5s infinite; opacity: 0; }
.pos__glow {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0;
  filter: drop-shadow(0 0 5px rgba(26,127,255,.95)) drop-shadow(0 0 12px rgba(26,127,255,.6));
  animation: pos-glow 10.5s infinite;
}
.pos__glow polygon { stroke: #4D9EFF; stroke-width: 7; fill: rgba(77,158,255,.14); }
.pos__glow ellipse { stroke: #4D9EFF; stroke-width: 6; }

/* NFC: three arcs from the phone's top edge to the terminal, three bursts */
.nfc {
  position: absolute; z-index: 4; color: var(--brand); pointer-events: none;
  /* starts at the corner the phone touches (27.5% across, 3.3% down the terminal) and fans
     up and to the right, above the terminal's head, clear of the phone */
  width: calc(var(--pos-w) * .18);
  left: calc(50% + var(--pos-x) + var(--pos-w) * .385);
  top: calc(50% + var(--nav-h) / 2 + var(--pos-y) + var(--pos-w) * .033 - 8px - var(--pos-w) * .18 * 88 / 64 / 2);
}
.nfc svg {
  display: block; width: 100%; height: auto; overflow: visible; transform: rotate(-42deg); transform-origin: 0 50%;
  filter: drop-shadow(0 0 4px rgba(26,127,255,.9)) drop-shadow(0 0 10px rgba(26,127,255,.5));
}
.nfc path { opacity: 0; }
.nfc .w1 { animation: nfc-w1 10.5s infinite; }
.nfc .w2 { animation: nfc-w2 10.5s infinite; }
.nfc .w3 { animation: nfc-w3 10.5s infinite; }
.nfc b {
  position: absolute; left: 70%; bottom: 105%; margin-left: 2px; padding: 3px 8px; border-radius: 99px;
  background: var(--brand); color: #fff; font-family: var(--font-mono); font-size: .66rem;
  font-weight: 500; letter-spacing: .12em; box-shadow: 0 4px 12px var(--brand-glow);
  opacity: 0; visibility: hidden; animation: nfc-label 10.5s infinite;
}

/* ---- scene 2: the web shop, scaled from its own width ---- */
.shop {
  width: var(--shop-w); translate: var(--pt-x) var(--shop-y);
  font-size: calc(var(--shop-w) / 19);
  background: #fff; border-radius: 1.1em; border: 1px solid rgba(10,37,64,.10);
  box-shadow: 0 22px 44px -10px rgba(10,37,64,.34), 0 4px 10px rgba(10,37,64,.08);
  color: var(--text);
}
.shop__bar {
  display: flex; align-items: center; gap: .38em; padding: .6em .8em;
  border-bottom: 1px solid rgba(10,37,64,.08); background: #F6F9FC; border-radius: 1.1em 1.1em 0 0;
}
.shop__bar > i { width: .55em; height: .55em; border-radius: 50%; background: #E2E8F0; }
.shop__bar > i:nth-child(1) { background: #FF6159; }
.shop__bar > i:nth-child(2) { background: #FFBD2E; }
.shop__bar > i:nth-child(3) { background: #28C941; }
.shop__tab { display: inline-flex; align-items: center; gap: .35em; margin-left: .5em; font-size: .78em; color: var(--muted); }
.shop__tab svg { width: 1em; height: 1em; }
.shop__body { position: relative; padding: .95em 1em 1.05em; overflow: hidden; border-radius: 0 0 1.1em 1.1em; }
.shop__h { margin: 0 0 .6em; font-family: var(--font-mono); font-size: .68em; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.shop__items { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.shop__items li { display: grid; grid-template-columns: 2.1em 1fr auto; align-items: center; gap: .6em; font-size: .92em; }
.shop__items b { font-weight: 600; }
.shop__thumb { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: .5em; }
.shop__thumb svg { width: 1.3em; height: 1.3em; }
.shop__thumb--a { background: #FDEBD8; color: #B45A0B; }
.shop__thumb--b { background: #E3F0FF; color: #0B55D9; }
.shop__thumb--c { background: #E4F5EE; color: #0A7C63; }
.shop__total { display: flex; justify-content: space-between; margin: .8em 0 .75em; padding-top: .65em; border-top: 1px solid rgba(10,37,64,.09); font-size: .98em; }
.shop__total b { font-family: var(--font-display); font-weight: 600; }
.shop__btn {
  display: block; padding: .62em; border-radius: .6em; background: #0A2540; color: #fff;
  text-align: center; font-size: .92em; font-weight: 600; animation: shop-press 10.5s infinite;
}
.shop__pane { font-size: 1em; }
.shop__pane--wait, .shop__pane--proc, .shop__pane--done {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .45em; padding: 1em; text-align: center; background: #fff; opacity: 0; visibility: hidden;
}
.shop__pane b { font-family: var(--font-display); font-size: 1.05em; font-weight: 600; }
.shop__pane em { font-style: normal; font-size: .8em; color: var(--muted); }
.shop__pane--wait { animation: shop-wait 10.5s infinite; }
.shop__pane--proc { animation: shop-proc 10.5s infinite; }
.shop__pane--done { animation: shop-done 10.5s infinite; }
.shop__icon { width: 2.4em; height: 2.4em; color: var(--brand); }
.shop__spin { width: 2.3em; height: 2.3em; border-width: .26em; }
.shop__ok { width: 2.6em; height: 2.6em; color: #15A66A; }
.shop__cursor {
  position: absolute; right: 24%; bottom: .9em; width: 1.5em; height: 1.5em; z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); opacity: 0; animation: shop-cursor 10.5s infinite;
}
/* the link between shop and phone, in the gap between them */
.sig {
  position: absolute; left: calc(-1 * var(--gap)); top: 50%; width: var(--gap); height: 8px;
  margin-top: -4px; display: flex; justify-content: space-evenly; align-items: center;
}
.sig i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--brand); opacity: 0;
  box-shadow: 0 0 8px rgba(26,127,255,.8);
}
.sig i:nth-child(1) { animation: sig-d1 10.5s infinite; }
.sig i:nth-child(2) { animation: sig-d2 10.5s infinite; }
.sig i:nth-child(3) { animation: sig-d3 10.5s infinite; }

/* ---- navigation between scenes ---- */
.scene-nav {
  /* centred over the phone and the terminal, above the illustration */
  position: absolute; left: calc(50% + var(--nav-x)); top: 10px; transform: translateX(-50%); z-index: 6;
  display: none; align-items: center; gap: 12px; white-space: nowrap;
}
.js .scene-nav { display: flex; }      /* the buttons need the script; without it scene 1 just plays */
.scene-arrow {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--border-hi); background: var(--bg-panel); color: var(--text);
  box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.scene-arrow--next { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: 0 6px 16px var(--brand-glow); }
.scene-arrow:hover { transform: translateY(-1px); }
.scene-arrow--next:hover svg { transform: translateX(2px); }
.scene-arrow--prev:hover svg { transform: translateX(-2px); }
.scene-arrow svg { transition: transform .2s var(--ease); }
.scene-arrow:focus-visible, .scene-tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.scene-tabs {
  display: inline-flex; padding: 4px; border-radius: 99px;
  background: rgba(255,255,255,.78); border: 1px solid var(--border); backdrop-filter: blur(6px);
}
.scene-tabs button {
  padding: 7px 15px; border: 0; border-radius: 99px; background: none; cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-size: .86rem; font-weight: 500; color: var(--muted);
}
.scene-tabs button[aria-pressed="true"] { background: var(--text); color: #fff; }
:root[data-theme="dark"] .scene-tabs { background: rgba(0,0,0,.35); }
:root[data-theme="dark"] .scene-tabs button[aria-pressed="true"] { background: #fff; color: #0A2540; }


/* ---- one transaction per card: the script sets data-tx from the card clock ---- */
.phone-stage[data-tx="1"] [data-tx-only]:not([data-tx-only="1"]),
.phone-stage[data-tx="2"] [data-tx-only]:not([data-tx-only="2"]),
.phone-stage[data-tx="3"] [data-tx-only]:not([data-tx-only="3"]) { display: none; }
/* without the script the stage stays on the first transaction, so hold the first card too */
html:not(.js) .ph-cards img, html:not(.js) .ph-issuer span { animation: none; opacity: 0; }
html:not(.js) .ph-cards img:first-child, html:not(.js) .ph-issuer span:first-child { opacity: 1; }

/* the card grows and drops on the double-click screen, above the flow screens */
.ph-cards { z-index: 4; transform-origin: 50% 0; animation: ph-card-big 10.5s infinite; }

/* ---- flight checkout ---- */
.fl { display: flex; align-items: center; gap: .55em; margin: .1em 0 .25em; }
.fl b { font-family: var(--font-display); font-size: 1.35em; font-weight: 600; letter-spacing: .02em; }
.fl__path { position: relative; flex: 1; display: grid; place-items: center; height: 1.1em; }
.fl__path::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed rgba(10,37,64,.25); }
.fl__plane { position: relative; width: 1.1em; height: 1.1em; padding: 0 .15em; color: var(--brand); background: #fff; transform: rotate(90deg); }
.fl__meta { margin: 0 0 .75em; font-size: .74em; color: var(--muted); }
.shop__items--plain li { grid-template-columns: 1fr auto; }
.shop__items--plain span { color: var(--text-soft); }



/* ---- new look: wallet cards, their links into the phone, pedestal and glow ---- */
.wl {
  /* the column sits 15% of a card's width further left than solved, for more air before the phone */
  --wl-shift: calc(var(--wl-w) * .15);
  position: absolute; z-index: 2; left: calc(50% + var(--wl-x) - var(--wl-shift)); width: var(--wl-w);
  top: calc(50% + var(--nav-h) / 2 + var(--ph-y)); transform: translateY(-50%);
  display: grid; gap: calc(var(--wl-pitch) - var(--wl-h));
}
.wl__card {
  position: relative; display: flex; align-items: center; gap: calc(var(--wl-h) * .12);
  height: var(--wl-h); padding: 0 calc(var(--wl-h) * .12);
  border-radius: calc(var(--wl-h) * .2); background: #fff; border: 1px solid rgba(10,37,64,.06);
  box-shadow: 0 16px 34px -18px rgba(10,37,64,.30), 0 2px 6px rgba(10,37,64,.05);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.wl__card img { width: calc(var(--wl-h) * .56); height: calc(var(--wl-h) * .56); border-radius: calc(var(--wl-h) * .14); flex: none; }
.wl__card span { display: flex; flex-direction: column; gap: calc(var(--wl-h) * .1); min-width: 0; flex: 1; }
.wl__card b { font-size: calc(var(--wl-h) * .2); font-weight: 600; color: var(--text); }
.wl__card i { display: block; height: calc(var(--wl-h) * .08); width: 78%; border-radius: 4px; background: #CFE0FF; }
.wl__dot {
  position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 4px rgba(26,127,255,.18);
}
/* only the wallets funding the purchase on screen stay bright */
.phone-stage[data-tx="2"] .wl__card:not([data-w="paybox"]),
.phone-stage[data-tx="1"] .wl__card:not([data-w="bit"]) { opacity: .42; transform: scale(.97); }
.phone-stage[data-tx="2"] .wl-base:not([data-w="paybox"]),
.phone-stage[data-tx="1"] .wl-base:not([data-w="bit"]) { stroke-opacity: .25; }
.phone-stage[data-tx="2"] .wl-pulse:not([data-w="paybox"]),
.phone-stage[data-tx="1"] .wl-pulse:not([data-w="bit"]) { display: none; }

.wl-links {
  position: absolute; z-index: 1; overflow: visible; pointer-events: none;
  left: calc(50% + var(--wl-x) + var(--wl-w) * .85); width: calc(var(--wl-conn) + var(--wl-w) * .15 - 9px);   /* the links meet at the dot */
  top: calc(50% + var(--nav-h) / 2 + var(--ph-y) - var(--wl-pitch) * (var(--wl-n, 3) - 1) / 2); height: calc(var(--wl-pitch) * (var(--wl-n, 3) - 1));
}
.wl-links path { fill: none; vector-effect: non-scaling-stroke; }
.wl-base { stroke: #7FB2FF; stroke-width: 2; }
.wl-pulse {
  stroke: var(--brand); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 14 100;
  filter: drop-shadow(0 0 4px rgba(26,127,255,.9)); opacity: 0; animation: wl-pulse 10.5s infinite;
}
.wl-node {
  position: absolute; z-index: 3; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  left: calc(50% + var(--ph-x) - 151px * var(--ph-scale) - 9px);   /* just touching the phone's left edge */
  top: calc(50% + var(--nav-h) / 2 + var(--ph-y));
  background: var(--brand); box-shadow: 0 0 0 5px rgba(26,127,255,.22), 0 0 18px 4px rgba(26,127,255,.55);
  opacity: .55; animation: wl-node 10.5s infinite;
}
/* in store the links and the node fade while the phone tilts away from them */
.phone-stage[data-scene="1"] .wl-links,
.phone-stage[data-scene="1"] .wl-node { animation: wl-dim 10.5s infinite; }

/* phone -> terminal link at rest */
.ph-link {
  position: absolute; z-index: 1; height: 2px; pointer-events: none;
  left: calc(50% + var(--ph-x) + 172px * var(--ph-scale) + 8px);
  width: calc(var(--pos-x) + var(--pos-w) * .06 - var(--ph-x) - 172px * var(--ph-scale) - 12px);
  top: calc(50% + var(--nav-h) / 2 + var(--ph-y));
  background: linear-gradient(90deg, #7FB2FF, var(--brand));
  animation: ph-link 10.5s infinite;
}
.ph-link::before, .ph-link::after {
  content: ""; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 4px rgba(26,127,255,.18);
}
.ph-link::before { left: -5px; }
.ph-link::after { right: -5px; }

/* the terminal stands on a white table block: lit top face, front and side fading into the page */
.pos__table { position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pos__halo {
  position: absolute; z-index: -2; left: 14%; right: -44%; top: -52%; height: 160%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(46,204,140,.62) 0%, rgba(46,204,140,.34) 26%,
              rgba(46,204,140,.12) 48%, rgba(46,204,140,0) 68%);
  filter: blur(4px); opacity: 0; animation: pos-halo 10.5s infinite;
}
.pos__halo::before, .pos__halo::after {        /* faint rings, as in the reference */
  content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(46,204,140,.22);
}
.pos__halo::before { inset: 18%; }
.pos__halo::after  { inset: 6%; border-color: rgba(46,204,140,.12); }

/* the phone's wallet rows as rounded cards */
.ph-split .ph-src {
  border: 1px solid rgba(10,37,64,.07); border-radius: 14px; background: #fff;
  box-shadow: 0 3px 10px -6px rgba(10,37,64,.25); padding: 6px 10px; margin-bottom: 7px;
}

/* ---- after approval: a green tick beside the total, under the wallets ---- */
.ph-tx { animation: ph-tx-in 10.5s infinite; }
.ph-pay { padding-top: 14px; }
.ph-done { display: flex; align-items: center; gap: 14px; padding: 12px 44px 0 18px; }   /* the total ends under the amounts above */
.ph-tick { flex: none; width: 50px; height: 46px; transform-origin: 35% 60%; animation: ph-ok-pop 10.5s infinite; }
.ph-done b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; color: var(--text); margin-left: auto; }

/* ---- online: a booking checkout, not a departures board ---- */
.bk__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75em; }
.bk__brand { font-family: var(--font-display); font-size: 1.05em; font-weight: 700; letter-spacing: -.01em; }
.bk__steps { display: inline-flex; gap: .3em; font-size: .64em; color: var(--faint); }
.bk__steps i { font-style: normal; }
.bk__steps i + i::before { content: "\203A"; margin-right: .3em; color: var(--border-hi); }
.bk__steps .on { color: var(--brand-deep); font-weight: 600; }
.bk__flight { padding: .7em .75em; margin-bottom: .75em; border-radius: .7em; border: 1px solid rgba(10,37,64,.10); background: #F9FBFD; }
.bk__trip { margin: 0 0 .45em; font-family: var(--font-display); font-size: 1em; font-weight: 600; }
.bk__trip small { margin-left: .3em; font-family: var(--font-body); font-size: .7em; font-weight: 500; color: var(--faint); }
.bk__leg { display: flex; align-items: center; gap: .5em; }
.bk__t { display: flex; flex-direction: column; line-height: 1.15; }
.bk__t b { font-size: 1.02em; font-weight: 600; }
.bk__t small { font-size: .68em; color: var(--muted); letter-spacing: .04em; }
.bk__t--r { text-align: right; }
.bk__line { position: relative; flex: 1; display: grid; place-items: center; height: 1.6em; }
.bk__line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid rgba(10,37,64,.14); }
.bk__line em { position: relative; padding: 0 .4em; background: #F9FBFD; font-style: normal; font-size: .62em; color: var(--muted); white-space: nowrap; }
.bk__meta { margin: .45em 0 0; font-size: .66em; color: var(--muted); }

/* ---- hold still while someone reads: a detail open, or the cursor on the breakdown ---- */
.phone-stage:has(.phone__screen.has-view) *:not(.ph-view),
.phone-stage:has(.ph-split:hover) *:not(.ph-view) { animation-play-state: paused !important; }

/* ---- per-width fit (solved: _dev/terminal-build/layout_v56.py) ---- */
@media (min-width: 1500px) { .phone-stage { --ph-scale: 0.73; --ph-x: -64px; --ph-y: 0px; --pos-x: 212px; --pos-y: -96px; --pos-w: 225px; --tilt-x: 194px; --tilt-y: -7px; --tilt-r: 34.2deg; --nav-x: 111px; --wl-x: -365px; --wl-w: 126px; --wl-h: 79px; --wl-pitch: 106px; --wl-conn: 64px; --pt-x: 118px; --shop-w: 165px; --shop-y: -125px; --gap: 40px; min-height: calc(649px + var(--nav-h)); } }
@media (min-width: 1400px) and (max-width: 1499px) { .phone-stage { --ph-scale: 0.72; --ph-x: -63px; --ph-y: 0px; --pos-x: 212px; --pos-y: -95px; --pos-w: 214px; --tilt-x: 187px; --tilt-y: 1px; --tilt-r: 34.2deg; --nav-x: 107px; --wl-x: -364px; --wl-w: 125px; --wl-h: 78px; --wl-pitch: 105px; --wl-conn: 67px; --pt-x: 117px; --shop-w: 165px; --shop-y: -125px; --gap: 40px; min-height: calc(640px + var(--nav-h)); } }
@media (min-width: 1300px) and (max-width: 1399px) { .phone-stage { --ph-scale: 0.702; --ph-x: -54px; --ph-y: 0px; --pos-x: 208px; --pos-y: -91px; --pos-w: 175px; --tilt-x: 155px; --tilt-y: 9px; --tilt-r: 34.2deg; --nav-x: 91px; --wl-x: -366px; --wl-w: 122px; --wl-h: 76px; --wl-pitch: 102px; --wl-conn: 83px; --pt-x: 122px; --shop-w: 165px; --shop-y: -125px; --gap: 40px; min-height: calc(625px + var(--nav-h)); } }
@media (min-width: 1200px) and (max-width: 1299px) { .phone-stage { --ph-scale: 0.682; --ph-x: -51px; --ph-y: 0px; --pos-x: 190px; --pos-y: -89px; --pos-w: 175px; --tilt-x: 128px; --tilt-y: 23px; --tilt-r: 34.2deg; --nav-x: 85px; --wl-x: -365px; --wl-w: 118px; --wl-h: 74px; --wl-pitch: 99px; --wl-conn: 92px; --pt-x: 121px; --shop-w: 157px; --shop-y: -119px; --gap: 40px; min-height: calc(609px + var(--nav-h)); } }
@media (min-width: 1081px) and (max-width: 1199px) { .phone-stage { --ph-scale: 0.513; --ph-x: -39px; --ph-y: 0px; --pos-x: 145px; --pos-y: -78px; --pos-w: 132px; --tilt-x: 82px; --tilt-y: 69px; --tilt-r: 34.2deg; --nav-x: 60px; --wl-x: -287px; --wl-w: 106px; --wl-h: 66px; --wl-pitch: 88px; --wl-conn: 64px; --pt-x: 101px; --shop-w: 141px; --shop-y: -107px; --gap: 40px; min-height: calc(520px + var(--nav-h)); } }
@media (min-width: 860px) and (max-width: 1080px) { .phone-stage { --ph-scale: 0.644; --ph-x: -66px; --ph-y: 0px; --pos-x: 202px; --pos-y: -85px; --pos-w: 197px; --tilt-x: 197px; --tilt-y: 40px; --tilt-r: 34.2deg; --nav-x: 98px; --wl-x: -402px; --wl-w: 112px; --wl-h: 70px; --wl-pitch: 94px; --wl-conn: 126px; --pt-x: 99px; --shop-w: 189px; --shop-y: -144px; --gap: 40px; min-height: calc(577px + var(--nav-h)); } }
@media (min-width: 701px) and (max-width: 859px) { .phone-stage { --ph-scale: 0.588; --ph-x: -25px; --ph-y: 0px; --pos-x: 177px; --pos-y: -76px; --pos-w: 148px; --tilt-x: 70px; --tilt-y: 87px; --tilt-r: 34.2deg; --nav-x: 85px; --wl-x: -342px; --wl-w: 102px; --wl-h: 64px; --wl-pitch: 86px; --wl-conn: 126px; --pt-x: 129px; --shop-w: 168px; --shop-y: -128px; --gap: 40px; min-height: calc(530px + var(--nav-h)); } }
@media (min-width: 600px) and (max-width: 700px) { .phone-stage { --ph-scale: 0.559; --ph-x: -118px; --ph-y: 0px; --pos-x: 97px; --pos-y: -73px; --pos-w: 164px; --tilt-x: 156px; --tilt-y: 44px; --tilt-r: 34.2deg; --nav-x: 0px; --pt-x: 30px; --shop-w: 141px; --shop-y: -107px; --gap: 40px; min-height: calc(506px + var(--nav-h)); } .wl, .wl-links, .wl-node { display: none; } }
@media (min-width: 481px) and (max-width: 599px) { .phone-stage { --ph-scale: 0.401; --ph-x: -158px; --ph-y: 0px; --pos-x: 52px; --pos-y: -68px; --pos-w: 164px; --tilt-x: 303px; --tilt-y: 50px; --tilt-r: 34.2deg; --nav-x: 0px; --pt-x: -40px; --shop-w: 141px; --shop-y: -107px; --gap: 40px; min-height: calc(420px + var(--nav-h)); } .wl, .wl-links, .wl-node { display: none; } }
@media (min-width: 400px) and (max-width: 480px) { .phone-stage { --ph-scale: 0.357; --ph-x: -95px; --ph-y: 0px; --pos-x: 74px; --pos-y: -61px; --pos-y-base: -61px; --pos-w: 108px; --tilt-x: 209px; --tilt-y: 48px; --tilt-r: 34.2deg; --nav-x: 0px; --pt-x: -88px; --shop-w: 176px; --shop-y: 11px; --gap: 22px; min-height: calc(600px + var(--nav-h)); } .wl, .wl-links, .wl-node { display: none; } }
@media (max-width: 399px) { .phone-stage { --ph-scale: 0.342; --ph-x: -112px; --ph-y: 0px; --pos-x: 54px; --pos-y: -58px; --pos-y-base: -58px; --pos-w: 108px; --tilt-x: 225px; --tilt-y: 49px; --tilt-r: 34.2deg; --nav-x: 0px; --pt-x: -88px; --shop-w: 176px; --shop-y: 11px; --gap: 22px; min-height: calc(600px + var(--nav-h)); } .wl, .wl-links, .wl-node { display: none; } }
@media (max-width: 480px) {
  /* in store the terminal sits beside the phone; online the shop sits below it,
     and the phone glides between the two positions */
  .phone { transition: translate .5s var(--ease); }
  .phone-stage[data-scene="2"] { --ph-x: -40px; --ph-y: -158px; }
  /* in store the pair sits higher, under the scene selector (the height is kept for the online scene) */
  .phone-stage[data-scene="1"] { --s1-lift: 95px; --ph-y: -95px; --pos-y: calc(var(--pos-y-base) - var(--s1-lift)); }
  /* in store the pair sits higher, under the scene selector (the height is kept for the online scene) */
  /* in store needs less height than the shop below the phone; the stage eases between the two */
  .phone-stage { transition: min-height .5s var(--ease); }
  .phone-stage[data-scene="1"] { min-height: calc(330px + var(--nav-h)); }
  .scene-nav { gap: 8px; }
  .scene-tabs button { padding: 7px 12px; font-size: .82rem; }
  .sig { left: 50%; top: calc(-1 * var(--gap)); width: 8px; height: var(--gap); margin: 0 0 0 -4px; flex-direction: column; }
}
@media (max-width: 1080px) { .hero-inner { grid-template-columns: 1fr; } }

/* ---- reduced motion: one still frame per scene, the finished payment ---- */
@media (prefers-reduced-motion: reduce) {
  .phone, .ph-flow, .ph-webreq, .ph-sidekey, .ph-cl path, .pos__pay, .pos__proc, .pos__glow,
  .nfc path, .nfc b, .pos__amt, .ph-webidle, .ph-cards, .ph-tx, .ph-tick, .wl-pulse, .wl-node, .wl-links, .ph-link, .pos__halo, .shop__pane, .shop__cursor, .shop__btn, .sig i, .ph-spin, .shop__spin { animation: none !important; }
  .phone { transform: scale(var(--ph-scale)); }
  .ph-flow, .pos__pay, .pos__proc, .pos__glow, .nfc b, .shop__pane--wait, .shop__pane--proc { opacity: 0; visibility: hidden; }
  .shop__pane--done { opacity: 1; visibility: visible; }
  .shop__cursor, .sig i, .nfc path { opacity: 0; }
  .partner { transition: none; }
}

/* --------------------------------------------------------------------------
   23. The app, in a bubble (opened from the hero phone; built by site.js #13)
   -------------------------------------------------------------------------- */
.phone.is-openable { cursor: pointer; }
.phone-stage.is-held *:not([data-new]) { animation-play-state: paused !important; }
.phx-hint {
  position: absolute; z-index: 6; left: calc(50% + var(--ph-x)); transform: translateX(-50%);
  top: calc(50% + var(--nav-h) / 2 + var(--ph-y) + 396px * var(--ph-scale) + 788px * var(--ph-scale) * .084);   /* v108: 20% closer again */   /* 15% of the phone's height below its visible bottom edge (the photo's outline: 788 tall, bottom at +396) */
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px;
  border: 1px solid var(--border); background: rgba(255,255,255,.92); box-shadow: var(--shadow-sm);
  font: 600 .74rem/1 var(--font-body); color: var(--brand-deep, #0A4FD1); cursor: pointer;
  opacity: 0; transition: opacity .2s var(--ease);
}
.phone-stage:hover .phx-hint, .phx-hint:focus-visible { opacity: 1; }
.phx-hint:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (hover: none) { .phx-hint { opacity: 1; } }

html.phx-lock { overflow: hidden; }
.phx {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: rgba(10,37,64,.30); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .24s var(--ease);
}
.phx[hidden] { display: none; }
.phx.is-open { opacity: 1; }
.phx__bubble {
  position: relative; display: flex; flex-direction: column; align-items: center;
  /* a soft bubble of light behind the phone; the phone grows out of the hero phone */
  transform: translate(var(--phx-ox, 0), var(--phx-oy, 0)) scale(calc(var(--phx-s, 1) * .35));
  transition: transform .34s cubic-bezier(.2,.9,.25,1.05);
}
.phx.is-open .phx__bubble { transform: none; transform: scale(var(--phx-s, 1)); }
.phx__bubble::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: 620px; height: 620px; margin: -310px 0 0 -310px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(214,230,255,.75) 42%, rgba(214,230,255,0) 70%);
  pointer-events: none;
}
.phx__close {
  position: absolute; z-index: 2; top: -6px; right: -52px; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm);
}
.phx__close:hover { transform: scale(1.06); }
.phx__note { margin: 14px 0 0; font-size: .78rem; color: var(--text-soft, #425466); }
@media (max-width: 520px) { .phx__close { right: 6px; top: -46px; } }

.phx__device {
  position: relative; width: 360px; height: 740px; padding: 12px; border-radius: 58px;
  background: linear-gradient(145deg, #2B2F36, #0D0F12 55%, #1E2127);
  box-shadow: 0 0 0 2px #3A3F47 inset, 0 40px 80px -30px rgba(10,37,64,.55), 0 12px 30px -12px rgba(10,37,64,.35);
}
.phx__btn { position: absolute; width: 4px; border-radius: 3px; background: #22262C; }
.phx__btn--a { left: -4px; top: 150px; height: 34px; }
.phx__btn--b { left: -4px; top: 200px; height: 58px; }
.phx__btn--c { right: -4px; top: 190px; height: 84px; }
.phx__screen {
  position: relative; width: 100%; height: 100%; border-radius: 46px; overflow: hidden; outline: none;
  display: flex; flex-direction: column; background: #F5F7FB; font-family: var(--font-body); color: var(--text);
}
.phx__status { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 26px 0 30px; font-size: .82rem; }
.phx__status i { font-style: normal; font-size: .72rem; letter-spacing: .08em; }
.phx__island { position: absolute; left: 50%; top: 10px; width: 104px; height: 30px; margin-left: -52px; border-radius: 20px; background: #0B0C0E; }
.phx__body { flex: 1; overflow-y: auto; padding: 4px 16px 18px; scrollbar-width: none; }
.phx__body::-webkit-scrollbar { display: none; }
.phx__tabs { flex: none; display: flex; justify-content: space-around; padding: 8px 10px 22px; background: rgba(255,255,255,.94); border-top: 1px solid rgba(10,37,64,.08); }
.phx__tabs button {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 76px; padding: 4px 0;
  border: 0; background: none; font: 500 .68rem/1 var(--font-body); color: #8792A2; cursor: pointer;
}
.phx__tabs button[aria-current] { color: var(--brand); }
.phx__screen button:focus-visible, .phx__screen input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px; }

.phx-top { display: flex; flex-direction: column; margin: 6px 2px 12px; }
.phx-top small { font: 700 .72rem/1 var(--font-display); color: var(--brand); letter-spacing: .02em; }
.phx-top h2 { margin: 4px 0 0; font: 700 1.5rem/1.1 var(--font-display); letter-spacing: -.02em; }
.phx-top--back { flex-direction: row; align-items: center; gap: 10px; }
.phx-top--back h2 { margin: 0; font-size: 1.2rem; }
.phx-back { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fff; color: var(--text); box-shadow: 0 2px 8px -4px rgba(10,37,64,.3); cursor: pointer; }

.phx-seg { display: flex; padding: 3px; margin-bottom: 12px; border-radius: 12px; background: #E6EBF2; }
.phx-seg button { flex: 1; padding: 8px 6px; border: 0; border-radius: 9px; background: none; font: 600 .8rem/1 var(--font-body); color: #56627A; cursor: pointer; }
.phx-seg button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 2px 6px -2px rgba(10,37,64,.25); }
.phx-chips { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.phx-chips button {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 99px;
  border: 1px solid rgba(10,37,64,.10); background: #fff; font: 600 .76rem/1 var(--font-body); color: #3C475B; cursor: pointer;
}
.phx-chips button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.phx-chip-ico { width: 16px; height: 16px; border-radius: 4px; }

.phx-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; }
.phx-ico--card { display: inline-block; background: linear-gradient(135deg, #1A6BFF, #0A2540); }
.phx-bal { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px -12px rgba(10,37,64,.35); }
.phx-bal__ico { width: 40px; height: 40px; border-radius: 11px; }
.phx-bal span { display: flex; flex-direction: column; gap: 2px; }
.phx-bal small { font-size: .72rem; color: #6B7689; }
.phx-bal b { font: 700 1.3rem/1.1 var(--font-display); letter-spacing: -.02em; }

.phx-day { margin: 12px 4px 6px; font: 600 .68rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #8792A2; }
.phx-list { display: flex; flex-direction: column; gap: 6px; }
.phx-li, .phx-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px 10px 12px; text-align: left;
  border: 0; border-radius: 14px; background: #fff; box-shadow: 0 3px 10px -7px rgba(10,37,64,.3); font: inherit; color: inherit;
}
.phx-li { cursor: pointer; }
.phx-li:hover { background: #FAFCFF; }
.phx-li__m, .phx-row > span:not(.phx-li__v) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.phx-li__m b, .phx-row b { font-size: .86rem; font-weight: 600; }
.phx-li__m small, .phx-row small, .phx-li__v small { font-size: .68rem; color: #6B7689; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phx-li__v { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.phx-li__v b { font: 600 .86rem/1 var(--font-mono); }
.phx-chev { flex: none; color: #B3BCCB; }
.phx-stack { flex: none; display: flex; width: 44px; }
.phx-stack__i { width: 26px; height: 26px; border-radius: 8px; border: 2px solid #fff; }
.phx-stack__i + .phx-stack__i { margin-left: -12px; }

.phx-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 16px; text-align: center; }
.phx-hero small { font-size: .78rem; color: #6B7689; }
.phx-hero b { font: 700 2.1rem/1 var(--font-display); letter-spacing: -.03em; }
.phx-ok { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: #E3F6EC; color: #1F8A4C; font-size: .74rem; font-weight: 600; }
.phx-dl { margin: 0 0 14px; padding: 4px 14px; border-radius: 16px; background: #fff; box-shadow: 0 3px 10px -7px rgba(10,37,64,.3); }
.phx-dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: .8rem; }
.phx-dl div + div { border-top: 1px solid rgba(10,37,64,.07); }
.phx-dl dt { color: #6B7689; }
.phx-dl dd { margin: 0; font-weight: 600; text-align: right; }
.phx-rows { display: flex; flex-direction: column; gap: 6px; }
.phx-rows .phx-row { box-shadow: none; background: #F7F9FC; }

.phx-k { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 4px 8px; font: 600 .7rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #8792A2; }
.phx-k small { font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
.phx-grid { display: flex; flex-direction: column; gap: 6px; }
.phx-wal { display: flex; align-items: center; gap: 12px; padding: 12px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 3px 10px -7px rgba(10,37,64,.3); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.phx-wal__ico { width: 38px; height: 38px; border-radius: 11px; flex: none; }
.phx-wal span { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.phx-wal b { font-size: .88rem; }
.phx-wal small { font-size: .7rem; color: #6B7689; }
.phx-wal strong { font: 700 1rem/1 var(--font-mono); }
.phx-card { margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 3px 10px -7px rgba(10,37,64,.3); }
.phx-sum { display: flex; flex-direction: column; gap: 3px; background: linear-gradient(135deg, #1A6BFF, #0A4FD1); color: #fff; }
.phx-sum small, .phx-sum span { font-size: .72rem; opacity: .85; }
.phx-sum b { font: 700 1.5rem/1.1 var(--font-display); }

.phx-order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.phx-order li {
  display: flex; align-items: center; gap: 9px; padding: 8px 8px 8px 4px; border-radius: 14px; background: #fff;
  box-shadow: 0 3px 10px -7px rgba(10,37,64,.3); transition: box-shadow .15s, transform .15s;
}
.phx-order li.is-dragging { position: relative; z-index: 2; transform: scale(1.03); box-shadow: 0 14px 26px -12px rgba(10,37,64,.45); }
.phx-order em { font: 700 .8rem/1 var(--font-mono); font-style: normal; color: var(--brand); width: 10px; }
.phx-order b { flex: 1; font-size: .88rem; }
.phx-order__v { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.phx-order__v strong { font: 600 .84rem/1 var(--font-mono); }
.phx-order__v small { font-size: .64rem; color: #8792A2; }
.phx-drag {
  display: grid; place-items: center; width: 26px; height: 36px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: #A3ADBD; cursor: grab; touch-action: none;
}
.phx-drag:active { cursor: grabbing; color: var(--brand); }
.phx-rm { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 0; background: #F1F4F8; color: #6B7689; cursor: pointer; }
.phx-rm:hover { background: #FDECEC; color: #C62828; }
.phx-empty { margin: 0; padding: 12px 14px; border-radius: 14px; background: #fff; font-size: .78rem; color: #6B7689; }
.phx-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.phx-add span { font-size: .72rem; color: #6B7689; margin-right: 2px; }
.phx-add button {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 99px;
  border: 1.5px dashed rgba(26,107,255,.45); background: #F3F7FF; font: 600 .74rem/1 var(--font-body); color: var(--brand); cursor: pointer;
}
.phx-feats { padding-block: 0; }
.phx-feat { justify-content: flex-start; }
.phx-feat > span:nth-child(2) { flex: 1; }
.phx-sw span.phx-feat__i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #EEF3FF; color: var(--brand); }
.phx-notes { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(10,37,64,.07); }
.phx-try .phx-seg { margin-bottom: 10px; }
.phx-ico--cardimg { object-fit: cover; }
.phx-sws { display: flex; flex-direction: column; padding: 2px 14px; }
.phx-sw { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; cursor: pointer; }
.phx-sw + .phx-sw { border-top: 1px solid rgba(10,37,64,.07); }
.phx-sw span { display: flex; flex-direction: column; gap: 2px; }
.phx-sw b { font-size: .84rem; font-weight: 600; }
.phx-sw small { font-size: .7rem; color: #6B7689; }
.phx-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.phx-sw i { flex: none; position: relative; width: 42px; height: 26px; border-radius: 99px; background: #D5DCE6; transition: background .2s var(--ease); }
.phx-sw i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.phx-sw input:checked + i { background: #34C759; }
.phx-sw input:checked + i::after { transform: translateX(16px); }
.phx-ai { display: flex; gap: 12px; margin-top: 10px; background: linear-gradient(135deg, #EEF4FF, #F4EEFF); }
.phx-ai b { display: block; font-size: .88rem; }
.phx-ai__spark { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, #1A6BFF, #8B5CF6); color: #fff; }
/* the card page: the same screen as the animation, larger */
.phx-cardhead { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin: 2px 2px 10px; }
.phx-cardhead .iss { display: flex; align-items: center; }
.phx-cardhead .iss img { height: 24px; }
.phx-cardhead .iss--isracard b { font-size: 1.08rem; }
.phx-cardhead small { display: flex; align-items: center; gap: 6px; font-size: .68rem; color: #8792A2; }
.phx-cardhead small img { display: block; height: 38px; width: auto; }
.phx-yours { margin: 0 2px 8px; font-weight: 600; font-size: .95rem; }
.phx-cardimg { position: relative; margin: 0 4px; }
.phx-cardimg::before {          /* the same soft glow as the card in the animation */
  content: ""; position: absolute; inset: 8% 6% -6%; border-radius: 18px; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(26,107,255,.35), rgba(26,107,255,0) 70%); filter: blur(10px);
}
.phx-cardimg img { position: relative; display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 14px 28px -14px rgba(10,37,64,.55); }
.phx-cardpick { display: flex; justify-content: center; gap: 8px; margin: 12px 0 4px; }
.phx-cardpick button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 5px 4px; border-radius: 10px;
  border: 1.5px solid transparent; background: none; font: 600 .64rem/1 var(--font-body); color: #6B7689; cursor: pointer;
}
.phx-cardpick img { width: 54px; height: auto; border-radius: 4px; opacity: .6; transition: opacity .2s; }
.phx-cardpick button[aria-pressed="true"] { border-color: var(--brand); color: var(--text); background: #fff; }
.phx-cardpick button[aria-pressed="true"] img, .phx-cardpick button:hover img { opacity: 1; }
.phx-where { margin: 12px 4px 0; font-size: .76rem; color: #6B7689; }
.phx-where b { color: var(--text); }
.phx-li--src { padding-block: 9px; }
.phx-li--src .phx-li__m b { font-size: .9rem; }
.phx-done { display: flex; align-items: center; gap: 12px; margin: 12px 4px 0; padding-right: 23px; }   /* the total ends under the amounts above */
.phx-tick { width: 40px; height: 37px; flex: none; }
.phx-done b { margin-left: auto; font: 700 1.5rem/1 var(--font-display); letter-spacing: -.03em; }
.phx-done span { padding: 4px 10px; border-radius: 99px; background: #E3F6EC; color: #1F8A4C; font-size: .72rem; font-weight: 600; }
.phx-avail { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #EAF1FF; font-size: .78rem; color: #3C475B; }
.phx-avail b { font: 700 1rem/1 var(--font-mono); color: var(--text); }
.phx-bal--btn { width: 100%; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.phx-bal--btn span { flex: 1; }
.phx-bal--btn em { font-style: normal; font-size: .72rem; font-weight: 600; color: var(--brand); }
.phx-bal__card, .phx-wal__card { width: 52px; height: auto; border-radius: 5px; flex: none; box-shadow: 0 3px 8px -4px rgba(10,37,64,.45); }
.phx-wal .phx-chev { margin-left: 2px; }

/* rules: one choice, then only what that choice needs */
.phx-lead { margin: -4px 4px 10px; font-size: .84rem; color: #56627A; }
.phx-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.phx-choice button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px; text-align: left;
  border-radius: 16px; border: 2px solid transparent; background: #fff; box-shadow: 0 3px 10px -7px rgba(10,37,64,.3);
  font: inherit; color: inherit; cursor: pointer;
}
.phx-choice button[aria-checked="true"] { border-color: var(--brand); background: #F3F7FF; }
.phx-choice b { font-size: .9rem; margin-top: 6px; }
.phx-choice small { font-size: .7rem; color: #6B7689; }
.phx-choice__i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #E6EEFF; color: var(--brand); }
.phx-choice__i--ai { background: linear-gradient(135deg, #1A6BFF, #8B5CF6); color: #fff; }
.phx-ticks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.phx-ticks li { position: relative; padding-left: 20px; font-size: .78rem; color: #3C475B; }
.phx-ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #34C759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; }
.phx-try { margin-top: 0; }
.phx-amts { display: flex; gap: 6px; margin-bottom: 10px; }
.phx-amts button { flex: 1; padding: 8px 0; border-radius: 10px; border: 1px solid rgba(10,37,64,.12); background: #F7F9FC; font: 600 .82rem/1 var(--font-mono); color: var(--text); cursor: pointer; }
.phx-amts button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.phx-try ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.phx-try li { display: flex; align-items: center; gap: 10px; font-size: .84rem; }
.phx-try li .phx-ico { width: 28px; height: 28px; border-radius: 8px; }
.phx-try li span { flex: 1; font-weight: 500; }
.phx-try li b { font: 600 .84rem/1 var(--font-mono); }
.phx-save {
  display: block; width: 100%; margin-top: 14px; padding: 13px 0; border-radius: 14px; border: 0;
  background: var(--brand); color: #fff; font: 600 .9rem/1 var(--font-body); cursor: pointer;
}
.phx-save:disabled { background: #E3F6EC; color: #1F8A4C; cursor: default; }
/* wallets added in the app join the animation, dimmed: they fund nothing on screen yet */
.wl__card[data-new] { opacity: .5; animation: wl-in .5s var(--ease) both; }
.wl__card b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl { grid-template-columns: minmax(0, 1fr); }
.wl > .wl__card { min-width: 0; }
.wl__card.is-2l b { white-space: normal; line-height: 1.05; }
.wl__card.is-2l i { display: none; }
.wl__card[hidden] { display: none; }
.wl__rm {
  align-self: flex-start; padding: 0; margin-top: calc(var(--wl-h) * .02); border: 0; background: none;
  font: 500 max(10px, calc(var(--wl-h) * .15))/1.1 var(--font-body); color: var(--brand); cursor: pointer;
}
.wl__rm:hover { color: #C62828; text-decoration: underline; }
.wl__rm:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
/* a purchase with an added wallet: its card, link and pulse light up; the rest step back */
.ph-tx.is-replaced { display: none !important; }
.wl-pulse[data-new] { display: none; }
.phone-stage[data-fx-w] .wl__card { opacity: .42; transform: scale(.97); }
.phone-stage[data-fx-w] .wl__card.is-fx { opacity: 1; transform: none; }
.phone-stage[data-fx-w] .wl__card.is-feat { box-shadow: 0 0 0 2px var(--brand), 0 18px 34px -16px rgba(26,107,255,.55); }
.phone-stage[data-fx-w] .wl-base { stroke-opacity: .25; }
.phone-stage[data-fx-w] .wl-base.is-fx { stroke-opacity: 1; }
.phone-stage[data-fx-w] .wl-pulse { display: none; }
.phone-stage[data-fx-w] .wl-pulse.is-fx { display: inline; }
.wl-add {
  position: absolute; z-index: 5; left: calc(50% + var(--wl-x) - var(--wl-w) * .15); width: var(--wl-w);
  top: calc(50% + var(--nav-h) / 2 + var(--ph-y) + var(--wl-pitch) * (var(--wl-n, 3) - 1) / 2 + var(--wl-h) / 2 + 12px);
}
.wl-add[hidden] { display: none; }
.wl-add__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: max(34px, calc(var(--wl-h) * .48));
  border-radius: calc(var(--wl-h) * .2); border: 1.5px dashed rgba(26,107,255,.45); background: rgba(255,255,255,.9);
  font: 600 .82rem/1 var(--font-body); color: var(--brand); cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease);
}
.wl-add__btn:hover, .wl-add__btn[aria-expanded="true"] { background: #F3F7FF; border-style: solid; }
.wl-add__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.wl-add__btn span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .95rem; line-height: 1; }
.phx-menu em.is-minus { background: #FDECEC; color: #C62828; }
.phx-menu button:hover em.is-minus { background: #E5484D; color: #fff; }
.phx-menu button:disabled { opacity: .45; cursor: default; }
.phx-menu button:disabled:hover { background: none; }
.wl-add .wl-add__menu { position: absolute; left: 0; top: calc(100% + 10px); width: max(100%, 260px); margin: 0; }
@media (max-width: 1080px) { .wl-add .wl-add__menu { width: max(100%, 236px); } }
.wl-add__menu[hidden] { display: none; }
.wl-add.is-up .wl-add__menu { top: auto; bottom: calc(100% + 10px); }
.wl-add.is-left .wl-add__menu { top: auto; bottom: 0; left: auto; right: calc(100% + 12px); }
@media (max-width: 700px) { .wl-add { display: none; } }
.wl-base[data-new] { stroke-opacity: .3; }
@keyframes wl-in { from { opacity: 0; transform: translateX(-16px) scale(.9); } }
.phx-addw { position: relative; margin-top: 8px; }
.phx-addw__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 0;
  border-radius: 14px; border: 1.5px dashed rgba(26,107,255,.45); background: #F3F7FF;
  font: 600 .84rem/1 var(--font-body); color: var(--brand); cursor: pointer;
}
.phx-addw__btn span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 1rem; line-height: 1; }
.phx-addw__btn[aria-expanded="true"] { border-style: solid; background: #fff; }
.phx-menu {
  position: relative; list-style: none; margin: 10px 0 0; padding: 8px; border-radius: 24px;
  background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 48px -18px rgba(10,37,64,.45), 0 0 0 1px rgba(10,37,64,.06);
  /* the title and exactly six wallets; the rest scroll */
  max-height: calc(8px + 25px + 6 * 55px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(10,37,64,.2) transparent;
}
.phx-menu__title { box-sizing: border-box; height: 25px; padding: 6px 10px 0; font: 600 .7rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #8792A2; }
.phx-menu li + li { margin-top: 2px; }
.phx-menu button {
  display: flex; align-items: center; gap: 13px; width: 100%; height: 53px; padding: 0 13px 0 9px; border: 0; border-radius: 17px;
  background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background .15s var(--ease);
}
.phx-menu button:hover, .phx-menu button:focus-visible { background: #F3F7FF; }
.phx-menu .phx-ico { width: 35px; height: 35px; border-radius: 11px; box-shadow: 0 2px 6px -3px rgba(10,37,64,.4); }
.phx-menu span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.phx-menu b { font-size: .95rem; }
.phx-menu small { font-size: .75rem; color: #8792A2; }
.phx-menu em { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: #EEF3FF; font-style: normal; font-weight: 700; color: var(--brand); font-size: 1rem; line-height: 1; }
.phx-menu button:hover em { background: var(--brand); color: #fff; }
@media (prefers-reduced-motion: reduce) { .phx, .phx__bubble { transition: none; } }


/* --------------------------------------------------------------------------
   24. Who it's for: Consumer | Wallet | Issuer
   -------------------------------------------------------------------------- */
.aud { position: relative; overflow: hidden; padding-block: clamp(48px, 6vw, 88px) clamp(56px, 7vw, 96px); background: linear-gradient(180deg, #fff 0%, #F5F8FE 100%); }
.aud__tabs { display: flex; justify-content: center; gap: clamp(28px, 5vw, 56px); margin-bottom: clamp(28px, 4vw, 52px); }
.aud__tabs button {
  position: relative; padding: 10px 2px 12px; border: 0; background: none; cursor: pointer;
  font: 600 clamp(1rem, 1.3vw, 1.15rem)/1 var(--font-body); color: var(--muted); transition: color .2s var(--ease);
}
.aud__tabs button:hover { color: var(--text); }
.aud__tabs button[aria-selected="true"] { color: var(--text); }
.aud__tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--brand); }
.aud__tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 4px; }
.aud__panel { outline: none; animation: aud-in .45s var(--ease) both; }
.aud__panel[hidden] { display: none; }
@keyframes aud-in { from { opacity: 0; transform: translateY(10px); } }

.aud__top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 40px; }
.aud__eyebrow { margin: 0 0 18px; font: 500 .82rem/1 var(--font-mono); letter-spacing: .34em; text-transform: uppercase; color: #1A6BFF; }
.aud__title { margin: 0; font: 700 clamp(2.2rem, 4vw, 3.7rem)/1.04 var(--font-display); letter-spacing: -.045em; color: var(--text); }
.aud__title .hl { color: #1A6BFF; }
.aud__lede { max-width: 34ch; margin: 22px 0 0; font-size: clamp(1.1rem, 1.55vw, 1.4rem); line-height: 1.45; color: var(--text-soft); }

/* the illustration: the same photographic iPhone as the hero, its screen projected onto the display */
.aud__art { --aud-s: .58; position: relative; height: clamp(440px, 40vw, 560px); }
.aud-ph {
  position: absolute; left: 50%; top: 50%; width: 472px; height: 834px; margin: -417px 0 0 -236px;
  transform: scale(var(--aud-s)); filter: drop-shadow(14px 30px 40px rgba(10,37,64,.24));
}
.aud__art--consumer .aud-ph { left: 33%; }
.aud-ph__frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.aud-ph__screen {
  position: absolute; left: 0; top: 0; width: 300px; height: 650px; overflow: hidden; z-index: 1;
  transform-origin: 0 0; transform: matrix3d(0.827934, -0.123731, 0, -0.000289, 0, 1.092067, 0, 0, 0, 0, 1, 0, 94.967309, 64.815451, 0, 1);
  border-radius: 42px; background: #F7F9FC; font-family: var(--font-body); color: #0A2540;
}
.aud-ph__status { display: flex; justify-content: space-between; padding: 16px 28px 10px 30px; font-size: 13px; }
.aud-ph__status i { font-style: normal; font-size: 11px; letter-spacing: .08em; }
.aud-ph__k { margin: 16px 20px 9px; font-size: 14px; font-weight: 600; }
.aud-card {
  position: relative; height: 150px; margin: 10px 16px 0; padding: 16px 18px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, #21477F 0%, #0B2146 55%, #173E78 100%); color: #fff;
  box-shadow: 0 14px 26px -14px rgba(10,37,64,.7);
}
.aud-card::after { content: ""; position: absolute; right: -40px; bottom: -70px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 0 0 22px rgba(255,255,255,.03); }
.aud-card span { font-size: 14px; font-weight: 500; font-style: italic; letter-spacing: .01em; }
.aud-card em { position: absolute; left: 18px; bottom: 16px; font-style: normal; font-size: 13px; letter-spacing: .08em; }
.aud-card svg { position: absolute; right: 16px; bottom: 14px; width: 22px; }
.aud-card--sm { height: 104px; }
.aud-card--chip { height: 118px; margin-top: 0; }
.aud-chip { position: absolute; left: 18px; top: 22px; width: 34px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, #F2F4F8, #BFC6D2); }
.aud-row {
  display: flex; align-items: center; gap: 11px; margin: 0 14px 8px; padding: 11px 12px; border-radius: 14px;
  background: #fff; box-shadow: 0 4px 12px -8px rgba(10,37,64,.4);
}
.aud-row img { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.aud-row span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aud-row b { font-size: 13px; }
.aud-row small { font-size: 11px; color: #7A8699; }
.aud-row i { font-style: normal; font-size: 20px; color: #9AA5B5; }
.aud-row em { font: 600 13px/1 var(--font-mono); font-style: normal; color: #1A6BFF; }
.aud-row--sm { padding: 8px 12px; margin-bottom: 6px; }
.aud-row--sm img { width: 28px; height: 28px; }
.aud-bal {
  display: flex; align-items: center; gap: 12px; margin: 0 16px; padding: 18px 16px; border-radius: 16px;
  background: linear-gradient(135deg, #2A6BD8, #1A4FA8); color: #fff; box-shadow: 0 14px 26px -14px rgba(26,79,168,.8);
}
.aud-bal svg { width: 34px; flex: none; }
.aud-bal span { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.aud-bal b { font: 700 22px/1 var(--font-display); }
.aud-bal small { font-size: 11px; opacity: .85; }
.aud-bal i { font-style: normal; font-size: 22px; }
.aud-ph__down { margin: 8px 0 -4px; text-align: center; font-size: 20px; color: #1A6BFF; }
.aud-done { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 18px; }
.aud-done span { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%; background: #E6EEFF; color: #1A6BFF; }
.aud-done svg { width: 28px; }
.aud-done b { font-size: 14px; }
.aud-done small { font-size: 12px; color: #7A8699; }
.aud-metric { display: flex; align-items: baseline; gap: 8px; margin: 0 20px; }
.aud-metric b { font: 700 28px/1 var(--font-display); letter-spacing: -.02em; }
.aud-metric small { font-size: 11px; color: #7A8699; }
.aud-metric em { margin-left: auto; padding: 4px 8px; border-radius: 99px; background: #E3F6EC; color: #1F8A4C; font: 600 11px/1 var(--font-body); font-style: normal; }
.aud-bars { display: flex; align-items: flex-end; gap: 8px; height: 70px; margin: 14px 20px 16px; }
.aud-bars i { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #5B9BFF, #1A6BFF); }
.aud-bars i:last-child { background: linear-gradient(180deg, #34C759, #1F8A4C); }

/* around the phones */
.aud__term { position: absolute; right: 0; bottom: 12%; width: 47%; height: auto; filter: drop-shadow(-10px 22px 26px rgba(10,37,64,.22)); }
.aud__halo { position: absolute; left: 20%; right: 0; top: 10%; bottom: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(120,170,255,.35), rgba(120,170,255,0) 68%); }
.aud__halo--green { left: 50%; right: -10%; top: 5%; bottom: 25%; background: radial-gradient(circle, rgba(46,204,140,.35), rgba(46,204,140,0) 66%); }
.aud__orbit { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(26,107,255,.35); background: radial-gradient(circle, rgba(120,170,255,.28), rgba(120,170,255,0) 60%); }
.aud__orbit--2 { width: 124%; border-color: rgba(26,107,255,.18); background: none; }
.aud__spark { position: absolute; left: 8%; top: 38%; width: 18px; height: 18px; border-radius: 50%; background: #4D9EFF; box-shadow: 0 0 0 8px rgba(77,158,255,.18), 0 0 24px 8px rgba(77,158,255,.55); }

/* the three points underneath */
.aud__feats { list-style: none; margin: clamp(28px, 4vw, 52px) 0 0; padding: clamp(24px, 3vw, 36px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(26,107,255,.18); }
.aud__feats li { display: flex; gap: 20px; padding: 0 clamp(16px, 2.4vw, 32px); }
.aud__feats li:first-child { padding-left: 0; }
.aud__feats li + li { border-left: 1px solid var(--border); }
.aud__icon { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #EEF4FF; color: #1A6BFF; }
.aud__icon svg { width: 30px; height: 30px; }
.aud__feats h3 { margin: 6px 0 8px; font: 600 clamp(1.15rem, 1.6vw, 1.4rem)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--text); }
.aud__feats p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--text-soft); }
.aud__feats--num em { display: block; margin-bottom: 8px; font: 400 clamp(2.4rem, 3.6vw, 3.4rem)/1 var(--font-display); font-style: normal; letter-spacing: -.03em; color: #1A6BFF; }
.aud__foot { margin: clamp(28px, 3.5vw, 44px) 0 0; text-align: center; font-size: .88rem; color: var(--muted); }
.aud__foot--strong { font-size: 1.08rem; color: var(--text); }

@media (max-width: 1080px) { .aud__art { --aud-s: .52; } }
@media (max-width: 900px) {
  .aud__top { grid-template-columns: 1fr; gap: 12px; }
  .aud__art { height: 470px; }
  .aud__feats { grid-template-columns: 1fr; gap: 22px; }
  .aud__feats li { padding: 0; }
  .aud__feats li + li { border-left: 0; border-top: 1px solid var(--border); padding-top: 22px; }
}
@media (max-width: 520px) {
  .aud__art { --aud-s: .44; height: 390px; }
  .aud__art--consumer .aud-ph { left: 34%; }
  .aud__term { width: 52%; bottom: 14%; }
  .aud__tabs { gap: 24px; }
  .aud__icon { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .aud__panel { animation: none; } }


/* --------------------------------------------------------------------------
   25. The future of payments (future.html): agentic payments
   -------------------------------------------------------------------------- */
.fut-hero {
  position: relative; overflow: hidden; padding-block: clamp(96px, 10vw, 128px) clamp(56px, 7vw, 96px);
  background:
    radial-gradient(60% 70% at 80% 30%, rgba(139,92,246,.12), rgba(139,92,246,0) 70%),
    radial-gradient(50% 60% at 65% 70%, rgba(26,107,255,.12), rgba(26,107,255,0) 70%),
    linear-gradient(180deg, #fff, #F7F9FE);
}
.fut-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.fut-eyebrow { margin: 18px 0 16px; font: 500 .8rem/1 var(--font-mono); letter-spacing: .3em; text-transform: uppercase; color: #1A6BFF; }
.fut-title { margin: 0; font: 700 clamp(2.6rem, 5.4vw, 4.6rem)/1.02 var(--font-display); letter-spacing: -.045em; color: var(--text); }
.fut-title .hl, .fut-h2 .hl { background: linear-gradient(90deg, #1A6BFF, #8B5CF6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fut-lede { max-width: 40ch; margin: 22px 0 0; font-size: clamp(1.08rem, 1.45vw, 1.3rem); line-height: 1.55; color: var(--text-soft); }

/* ---- the agent at work ---- */
.ag { position: relative; display: flex; flex-direction: column; align-items: center; }
.ag::before { content: ""; position: absolute; left: 50%; top: 44%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; background: radial-gradient(circle, rgba(139,92,246,.18), rgba(26,107,255,.10) 40%, rgba(26,107,255,0) 68%); pointer-events: none; }
.ag__phone {
  position: relative; width: 330px; height: 670px; padding: 11px; border-radius: 54px;
  background: linear-gradient(145deg, #2B2F36, #0D0F12 55%, #1E2127);
  box-shadow: 0 0 0 2px #3A3F47 inset, 0 40px 80px -30px rgba(10,37,64,.5), 0 12px 30px -12px rgba(10,37,64,.3);
}
.ag__screen { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border-radius: 44px; background: #F6F8FC; font-family: var(--font-body); color: #0A2540; }
.ag__status { position: relative; flex: none; display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 24px 0 28px; font-size: 12px; }
.ag__status i { font-style: normal; font-size: 10px; letter-spacing: .08em; }
.ag__island { position: absolute; left: 50%; top: 10px; width: 96px; height: 28px; margin-left: -48px; border-radius: 18px; background: #0B0C0E; }
.ag__head { flex: none; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 4px 16px 10px; border-bottom: 1px solid rgba(10,37,64,.06); }
.ag__head .ag__orb { grid-row: span 2; }
.ag__head b { font-size: 14px; }
.ag__head small { font-size: 10.5px; color: #7A8699; }
.ag__orb {
  position: relative; display: block; width: 58px; height: 58px; border-radius: 50%;
  background: conic-gradient(from 0deg, #4D9EFF, #8B5CF6, #EC4899, #22D3EE, #4D9EFF);
  box-shadow: 0 0 24px 4px rgba(139,92,246,.35); animation: ag-spin 5s linear infinite;
}
.ag__orb::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.95), rgba(255,255,255,.35) 60%, rgba(255,255,255,0) 72%); }
.ag__orb--sm { width: 30px; height: 30px; box-shadow: 0 0 10px 2px rgba(139,92,246,.3); }
@keyframes ag-spin { to { transform: rotate(360deg); } }
.ag.is-listening .ag__mic .ag__orb { animation: ag-spin 2.5s linear infinite, ag-pulse 1s ease-in-out infinite; }
@keyframes ag-pulse { 50% { transform: scale(1.12) rotate(180deg); } }
.ag__mic { flex: none; display: grid; place-items: center; height: 92px; background: linear-gradient(180deg, rgba(246,248,252,0), #F6F8FC 40%); }

.ag__feed { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 12px 12px 0; overflow: hidden; }
.ag-msg { display: none; flex: none; max-width: 92%; padding: 11px 14px; border-radius: 16px 16px 16px 5px; background: #fff; box-shadow: 0 4px 14px -9px rgba(10,37,64,.45); font-size: 14px; line-height: 1.4; }
.ag-msg.is-in { display: block; animation: ag-in .45s cubic-bezier(.2,.9,.25,1.05) both; }
@keyframes ag-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.ag-msg p { margin: 0; }
.ag-msg--me { align-self: flex-end; border-radius: 16px 16px 5px 16px; background: linear-gradient(135deg, #1A6BFF, #6B5CF6); color: #fff; }
.ag-wave { display: flex; align-items: center; gap: 3px; height: 18px; margin-bottom: 6px; }
.ag-wave i { width: 3px; height: 30%; border-radius: 2px; background: rgba(255,255,255,.85); animation: ag-wave 1s ease-in-out infinite; }
.ag-wave i:nth-child(2n) { animation-delay: .15s; } .ag-wave i:nth-child(3n) { animation-delay: .3s; } .ag-wave i:nth-child(4n) { animation-delay: .45s; }
@keyframes ag-wave { 50% { height: 100%; } }
.ag-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ag-chips li { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 11px; background: #EEF3FF; font-size: 13px; font-weight: 600; color: #0A2540; }
.ag-chips small { font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #1A6BFF; }
.ag-bar { display: block; height: 6px; margin-top: 9px; border-radius: 4px; background: #E6ECF5; overflow: hidden; }
.ag-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #1A6BFF, #8B5CF6); }
.ag-msg.is-in .ag-bar i { animation: ag-fill 1.6s ease-out forwards; }
@keyframes ag-fill { to { width: 100%; } }
.ag-msg--deal { width: 92%; border: 1.5px solid #34C759; background: #F1FBF4; }
.ag-msg--deal small { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1F8A4C; }
.ag-msg--deal p { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.ag-msg--deal em { font: 700 16px/1 var(--font-mono); font-style: normal; }
.ag-msg--deal span { display: block; margin-top: 3px; font-size: 11.5px; color: #56627A; }
.ag-msg--pay { align-items: center; gap: 10px; }
.ag-msg--pay.is-in { display: flex; }
.ag-stack { display: inline-flex; }
.ag-stack img { width: 28px; height: 28px; border-radius: 8px; border: 2px solid #fff; }
.ag-stack img + img { margin-left: -9px; }
.ag-msg--done { display: none; align-items: center; gap: 10px; background: #0A2540; color: #fff; }
.ag-msg--done.is-in { display: flex; }
.ag-msg--done p { display: flex; flex-direction: column; gap: 2px; }
.ag-msg--done small { font-size: 11.5px; opacity: .75; }
.ag-face { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #34C759; color: #fff; }
.ag-face svg { width: 22px; }

.ag__ctrl { position: relative; display: flex; gap: 10px; margin-top: 22px; }
.ag__btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--border); background: #fff; font: 600 .85rem/1 var(--font-body); color: var(--text);
  box-shadow: 0 6px 16px -10px rgba(10,37,64,.4); transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.ag__btn:hover { border-color: rgba(26,107,255,.4); color: #1A6BFF; }
.ag__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.ag__btn--sound[aria-pressed="true"] { border-color: transparent; background: linear-gradient(90deg, #1A6BFF, #8B5CF6); color: #fff; }
.ag__btn--sound .ag-on { display: none; }
.ag__btn--sound[aria-pressed="true"] .ag-on { display: inline; }
.ag__btn--sound[aria-pressed="true"] .ag-off { display: none; }
.ag__btn[hidden] { display: none; }

/* ---- sections ---- */
.fut-head { max-width: 760px; margin: 0 auto clamp(32px, 4vw, 52px); text-align: center; }
.fut-head .fut-eyebrow { margin-top: 0; }
.fut-h2 { margin: 0; font: 700 clamp(1.9rem, 3.4vw, 3rem)/1.08 var(--font-display); letter-spacing: -.035em; color: var(--text); }
.fut-sub { margin: 16px auto 0; max-width: 60ch; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; color: var(--text-soft); }
.fut-split .fut-sub { margin-left: 0; }
.fut-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #EEF3FF; color: #1A6BFF; }
.fut-ic svg { width: 24px; height: 24px; }
.fut-ic--brand { background: linear-gradient(135deg, #1A6BFF, #8B5CF6); color: #fff; }

.fut-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: s; }
.fut-steps li { position: relative; padding: 22px 18px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--border); box-shadow: 0 10px 30px -22px rgba(10,37,64,.4); }
.fut-steps li:not(:last-child)::after { content: ""; position: absolute; right: -11px; top: 44px; width: 8px; height: 8px; border-top: 2px solid #9DB9F5; border-right: 2px solid #9DB9F5; transform: rotate(45deg); }
.fut-steps em { position: absolute; right: 16px; top: 18px; font: 500 .8rem/1 var(--font-mono); font-style: normal; color: #9AA5B5; }
.fut-steps h3 { margin: 16px 0 8px; font: 600 1.15rem/1.2 var(--font-display); color: var(--text); }
.fut-steps p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--text-soft); }

.fut-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.fut-attrs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fut-attrs li { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--border); }
.fut-attrs b { font: 600 1rem/1.2 var(--font-display); color: var(--text); }
.fut-attrs span { font-size: .86rem; color: var(--text-soft); }
.fut-attrs li.is-key { border-color: rgba(26,107,255,.35); background: #F3F7FF; }
.fut-attrs li.is-key b { color: #1A6BFF; }
.fut-attrs li.is-a2 { grid-column: 1 / -1; background: linear-gradient(135deg, #0A2540, #1B3F78); border-color: transparent; }
.fut-attrs li.is-a2 b { color: #fff; }
.fut-attrs li.is-a2 span { color: rgba(255,255,255,.8); }
.fut-attrs li.is-a2 em { font-style: normal; font-weight: 700; color: #7FB2FF; }

.fut-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fut-cards article { padding: 26px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--border); box-shadow: 0 14px 34px -26px rgba(10,37,64,.45); }
.fut-cards h3 { margin: 18px 0 8px; font: 600 1.18rem/1.25 var(--font-display); letter-spacing: -.01em; color: var(--text); }
.fut-cards p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--text-soft); }

.fut-split--rev { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.fut-mandate { max-width: 420px; justify-self: center; width: 100%; padding: 20px; border-radius: 26px; background: #fff; border: 1px solid var(--border); box-shadow: 0 30px 60px -34px rgba(10,37,64,.5); }
.fut-mandate__top { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.fut-mandate__top b { font: 600 1.05rem/1 var(--font-display); color: var(--text); }
.fut-mandate__top em { margin-left: auto; padding: 4px 10px; border-radius: 99px; background: #E3F6EC; color: #1F8A4C; font-size: .75rem; font-weight: 600; font-style: normal; }
.fut-mandate dl { margin: 6px 0 0; }
.fut-mandate dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid rgba(10,37,64,.05); font-size: .9rem; }
.fut-mandate dt { color: var(--muted); }
.fut-mandate dd { margin: 0; font-weight: 600; color: var(--text); text-align: right; display: flex; align-items: center; gap: 6px; }
.fut-src { display: inline-flex; }
.fut-src img { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #fff; }
.fut-src img + img { margin-left: -6px; }
.fut-mandate__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: .82rem; color: var(--muted); }
.fut-mandate__foot b { padding: 7px 14px; border-radius: 99px; background: #FDECEC; color: #C62828; font-size: .8rem; }
.fut-ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.fut-ticks li { position: relative; padding-left: 30px; font-size: 1rem; color: var(--text); }
.fut-ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #34C759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }

.fut-road { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fut-road::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: linear-gradient(90deg, #34C759, #1A6BFF 35%, #8B5CF6 70%, rgba(139,92,246,.15)); }
.fut-road li { position: relative; padding-top: 40px; }
.fut-road li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #8B5CF6; }
.fut-road li.is-now::before { border-color: #34C759; background: #34C759; box-shadow: 0 0 0 6px rgba(52,199,89,.18); }
.fut-road li.is-next::before { border-color: #1A6BFF; }
.fut-road span { font: 500 .74rem/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: #8B5CF6; }
.fut-road li.is-now span { color: #1F8A4C; }
.fut-road li.is-next span { color: #1A6BFF; }
.fut-road h3 { margin: 10px 0 8px; font: 600 1.12rem/1.25 var(--font-display); color: var(--text); }
.fut-road p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--text-soft); }
.fut-why { background: linear-gradient(180deg, #F7F9FE, #fff); }
.fut-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 980px; margin: 0 auto; }
.fut-vs__col { padding: 26px 26px 22px; border-radius: 24px; background: #fff; border: 1px solid var(--border); }
.fut-vs__col h3 { margin: 0 0 16px; font: 600 1.2rem/1.2 var(--font-display); color: var(--muted); }
.fut-vs__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fut-vs__col li { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; line-height: 1.45; color: var(--text-soft); }
.fut-vs__col i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; background: #FDECEC; color: #C62828; }
.fut-vs__col i svg { width: 13px; height: 13px; }
.fut-vs__col li.is-yes i { background: #E3F6EC; color: #1F8A4C; }
.fut-vs__col--a2 { background: linear-gradient(145deg, #0A2540, #1B3F78); border-color: transparent; box-shadow: 0 30px 60px -34px rgba(10,37,64,.7); }
.fut-vs__col--a2 h3 { color: #fff; }
.fut-vs__col--a2 h3 b { color: #7FB2FF; }
.fut-vs__col--a2 li { color: rgba(255,255,255,.88); }
.fut-vs__col--a2 i { background: #34C759; color: #fff; }
.fut-punch { margin: clamp(28px, 3.5vw, 40px) 0 0; text-align: center; font: 600 clamp(1.15rem, 1.8vw, 1.5rem)/1.3 var(--font-display); letter-spacing: -.02em; color: var(--text); }
.fut-punch b { background: linear-gradient(90deg, #1A6BFF, #8B5CF6); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 760px) { .fut-vs { grid-template-columns: 1fr; } }
.fut-dev { background: linear-gradient(180deg, #fff, #F5F7FD); }
.fut-code { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fut-code__card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--border); box-shadow: 0 20px 44px -30px rgba(10,37,64,.5); }
.fut-code__card header { display: flex; align-items: center; justify-content: space-between; }
.fut-code__tag { font: 600 1.15rem/1 var(--font-display); color: var(--text); }
.fut-code__card header em { padding: 4px 10px; border-radius: 99px; background: #F1ECFF; color: #6B4FD8; font-size: .74rem; font-weight: 600; font-style: normal; }
.fut-code__card > p { margin: 0; font-size: .96rem; line-height: 1.55; color: var(--text-soft); }
.fut-pre {
  margin: 0; padding: 18px 20px; border-radius: 16px; overflow-x: auto;
  background: #0B1730; color: #D6E2FF; font: 500 .82rem/1.6 var(--font-mono); white-space: pre;
}
.fut-pre .c { color: #6F83AD; }
.fut-pre .k { color: #7FB2FF; }
.fut-pre .s { color: #8CE4B5; }
.fut-pre .n { color: #F5C26B; }
.fut-tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fut-tools li { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: #F5F8FF; }
.fut-tools code { font: 600 .82rem/1.2 var(--font-mono); color: #1A6BFF; }
.fut-tools span { font-size: .8rem; color: var(--text-soft); }
@media (max-width: 900px) { .fut-code { grid-template-columns: 1fr; } }
.fut-note { margin: clamp(32px, 4vw, 48px) 0 0; text-align: center; font-size: .8rem; color: var(--muted); }

@media (max-width: 1080px) {
  .fut-steps { grid-template-columns: repeat(3, 1fr); }
  .fut-steps li:nth-child(3)::after { display: none; }
  .fut-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .fut-hero__grid, .fut-split, .fut-split--rev { grid-template-columns: 1fr; }
  .fut-road { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .fut-road::before { display: none; }
}
@media (max-width: 620px) {
  .fut-steps, .fut-cards, .fut-attrs { grid-template-columns: 1fr; }
  .fut-steps li::after { display: none; }
  .fut-road { grid-template-columns: 1fr; }
  .ag__phone { width: 300px; height: 620px; }
  .ag::before { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
}
@media (prefers-reduced-motion: reduce) {
  .ag__orb, .ag-wave i, .ag-msg.is-in, .ag-msg.is-in .ag-bar i { animation: none !important; }
  .ag-bar i { width: 100%; }
}


/* --------------------------------------------------------------------------
   26. Demo page (demo.html): the shopper film and the interactive setup
   -------------------------------------------------------------------------- */
.dm-hero { position: relative; overflow: hidden; padding-block: clamp(96px, 10vw, 124px) clamp(28px, 4vw, 48px);
  background: radial-gradient(60% 80% at 85% 20%, rgba(139,92,246,.10), rgba(139,92,246,0) 70%), radial-gradient(50% 70% at 70% 80%, rgba(26,107,255,.10), rgba(26,107,255,0) 70%), linear-gradient(180deg, #fff, #F7F9FE); }
.dm-hero .wrap { text-align: center; }
.dm-hero .breadcrumb { justify-content: center; }
.dm-hero .fut-lede { max-width: 56ch; margin-inline: auto; }
.dm-hero .btn-row { justify-content: center; }
.dm-watch { padding-top: clamp(40px, 5vw, 64px); }
/* the film fits one screen: header (~80px), breathing room (32px) and the controls, caption and note under the 16:9 stage (~200px) */
.dm-film { max-width: min(1120px, calc((100vh - 312px) * 16 / 9)); min-width: min(100%, 560px); margin: 0 auto; }
@supports (height: 100svh) { .dm-film { max-width: min(1120px, calc((100svh - 312px) * 16 / 9)); } }
.dm-film__frame { display: block; width: 100%; height: calc(min(1120px, 100vw) * 9 / 16 + 200px); border: 0; background: transparent; }
.dm-try { overflow-x: clip; background: linear-gradient(180deg, #F5F7FD, #fff); }

/* ---- the setup: bar, hint, devices ---- */
/* the issuer's colours: Isracard blue with its red, Max black, Cal blue (from their logos) */
.xp { --bk: #3028F8; --bk-dark: #2219C9; --bk-2: #6A5CFF; --bk-accent: #E82820; --bk-soft: #EFEFFE; --bk-line: rgba(48,40,248,.4); }
.xp[data-issuer="max"] { --bk: #111111; --bk-dark: #000000; --bk-2: #4A4A4A; --bk-accent: #111111; --bk-soft: #F2F2F2; --bk-line: rgba(0,0,0,.35); }
.xp[data-issuer="cal"] { --bk: #1858B0; --bk-dark: #124690; --bk-2: #2F7DE0; --bk-accent: #1858B0; --bk-soft: #EAF1FB; --bk-line: rgba(24,88,176,.4); }
.xp__issuer { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.xp__issuer > span { font: 600 .78rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.xp__issuer button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; border: 2px solid var(--border); background: #fff; font: 600 .9rem/1 var(--font-body); color: var(--text); cursor: pointer; }
.xp__issuer button img { height: 18px; width: auto; }
.xp__issuer button { min-height: 42px; padding-inline: 16px; }
.xp__issuer button img { height: 20px; }
.xp__issuer button[data-k="max"] img { height: 16px; }
.xp__issuer button[data-k="cal"] img { height: 19px; }
.xp__wm { margin-left: -2px; font: 700 16px/1 var(--font-display); letter-spacing: -.02em; color: #1B1F3B; }
.xp__issuer button[aria-checked="true"] { border-color: var(--bk); background: var(--bk-soft); box-shadow: 0 6px 16px -10px var(--bk); }
@media (min-width: 1181px) { .xp__issuer { margin-left: calc(300px + clamp(20px, 3vw, 44px)); } }
.xp { position: relative; max-width: 1260px; margin: 0 auto; }
.dm-try .wrap { max-width: 1320px; }
.xp__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.xp__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.xp__steps li { padding: 7px 13px; border-radius: 99px; background: #fff; border: 1px solid var(--border); font-size: .84rem; font-weight: 600; color: var(--muted); transition: all .25s var(--ease); }
.xp__steps li.is-done { color: #1F8A4C; border-color: rgba(52,199,89,.35); background: #F1FBF4; }
.xp__steps li.is-on { color: #fff; border-color: transparent; background: linear-gradient(90deg, #1A6BFF, #8B5CF6); box-shadow: 0 6px 16px -6px rgba(107,92,246,.6); }
.xp__restart { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--border); background: #fff; font: 600 .84rem/1 var(--font-body); color: var(--text); cursor: pointer; }
.xp__restart:hover { color: #1A6BFF; border-color: rgba(26,107,255,.4); }
.xp__guide { margin: 16px 0 22px; padding: 12px 16px; border-radius: 14px; background: #EEF3FF; color: #1B3F78; font-weight: 600; font-size: .98rem; }
.xp__guide::before { content: "→ "; color: #1A6BFF; }
.xp__devices { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.xp__toast { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 10px 18px; border-radius: 99px; background: #0A2540; color: #fff; font-size: .88rem; font-weight: 600; box-shadow: 0 14px 30px -12px rgba(10,37,64,.6); z-index: 5; }
.xp__toast[hidden] { display: none; }
.xp button:focus-visible, .xp input:focus-visible, .xp input:focus-visible + i { outline: 2px solid #1A7FFF; outline-offset: 2px; }

/* iPhone */
.xp-phone { position: relative; width: 300px; height: 620px; padding: 10px; border-radius: 50px; justify-self: center;
  background: linear-gradient(145deg, #2B2F36, #0D0F12 55%, #1E2127); box-shadow: 0 0 0 2px #3A3F47 inset, 0 40px 80px -30px rgba(10,37,64,.5); }
.xp-phone__screen { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border-radius: 41px; background: #F6F8FC; font-family: var(--font-body); color: #0A2540; }
.xp.is-phone .xp-phone { box-shadow: 0 0 0 2px #3A3F47 inset, 0 0 0 6px rgba(26,107,255,.25), 0 40px 80px -30px rgba(10,37,64,.5); }
.xp-status { position: relative; flex: none; display: flex; justify-content: space-between; align-items: center; height: 42px; padding: 0 22px 0 26px; font-size: 12px; z-index: 2; }
.xp-status i { font-style: normal; font-size: 10px; letter-spacing: .08em; }
.xp-island { position: absolute; left: 50%; top: 9px; width: 90px; height: 26px; margin-left: -45px; border-radius: 16px; background: #0B0C0E; }
.xp-phone__body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.xp-home { position: absolute; left: 50%; bottom: 8px; width: 110px; height: 4px; margin-left: -55px; border-radius: 4px; background: rgba(10,37,64,.35); }
.xp-lock { height: 100%; margin-top: -42px; padding: 70px 14px 20px; display: flex; flex-direction: column; align-items: center; background: linear-gradient(160deg, #2A4E9B, #6B5CF6 55%, #C4A5F7); color: #fff; }
.xp-lock small { font-size: 13px; opacity: .9; }
.xp-lock > b { font: 600 64px/1.05 var(--font-display); letter-spacing: -.03em; }
.xp-lock--dim { background: linear-gradient(160deg, #1D3570, #4B3FB0 55%, #8F74D6); }
.xp-note { width: 100%; margin-top: 24px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.88); color: #0A2540; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: xp-drop .4s cubic-bezier(.2,.9,.25,1.05) both; }
@keyframes xp-drop { from { opacity: 0; transform: translateY(-12px) scale(.97); } }
.xp-note__app { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #56627A; }
.xp-note__app em { font-style: normal; }
.xp-note p { margin: 6px 0 0; font-size: 13px; line-height: 1.35; }
.xp-note p b { display: block; margin-bottom: 2px; font-size: 14px; }
.xp-note__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.xp-note__btns button { padding: 10px; border: 0; border-radius: 12px; background: #E8ECF2; font: 600 14px/1 var(--font-body); color: #0A2540; cursor: pointer; }
.xp-note__btns .is-yes { background: #1A6BFF; color: #fff; }
.xp-app { min-height: 100%; display: flex; flex-direction: column; }
.xp-app--center { align-items: center; justify-content: center; gap: 10px; padding: 16px 20px 30px; text-align: center; }
.xp-app__top { display: flex; align-items: center; gap: 10px; padding: 6px 16px 10px; border-bottom: 1px solid rgba(10,37,64,.06); font-size: 15px; }
.xp-app__logo { width: 30px; height: 30px; border-radius: 9px; }
.xp-app__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.xp-app h4 { margin: 4px 0 0; font: 600 19px/1.2 var(--font-display); }
.xp-app p { margin: 0; font-size: 13px; line-height: 1.45; color: #56627A; }
.xp-link2 { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 4px; font-size: 20px; color: #9AA5B5; }
.xp-link2 .xp-ico { width: 52px; height: 52px; border-radius: 15px; }
.xp-mini, .xp-rows { display: flex; flex-direction: column; gap: 6px; }
.xp-mini span, .xp-rows span { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px -7px rgba(10,37,64,.35); font-size: 13px; font-weight: 600; }
.xp-mini b, .xp-rows b { margin-left: auto; font: 600 13px/1 var(--font-mono); }
.xp-cc-dot { width: 22px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, #21477F, #0B2146); }
.xp-total { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px 0 4px; }
.xp-total b { font: 700 22px/1 var(--font-display); }
.xp-ok { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #34C759; color: #fff; }
.xp-ok svg { width: 20px; }
.xp-face { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 26px; background: #EEF3FF; color: #1A6BFF; }
.xp-face svg { width: 48px; }
.xp-face.is-scan { animation: xp-scan 1s ease-in-out infinite; }
.xp-face--no { background: #FDECEC; color: #C62828; font-size: 34px; font-weight: 700; }
@keyframes xp-scan { 50% { box-shadow: 0 0 0 10px rgba(26,107,255,.15); } }
.xp-nfc { position: relative; width: 60px; height: 40px; }
.xp-nfc i { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 3px solid #1A6BFF; opacity: 0; animation: xp-ring 1.4s ease-out infinite; }
.xp-nfc i:nth-child(2) { animation-delay: .35s; } .xp-nfc i:nth-child(3) { animation-delay: .7s; }
@keyframes xp-ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }

/* shared: cards, icons, buttons, spinner */
.xp-bank { display: inline-flex; align-items: center; gap: 7px; font: 700 15px/1 var(--font-display); color: #0A2540; letter-spacing: -.01em; }
.xp-bank__mark { display: inline-block; width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, var(--bk), var(--bk-2)); box-shadow: inset 0 0 0 4px rgba(255,255,255,.25); }
.xp-bank__mark--lg { width: 52px; height: 52px; border-radius: 15px; box-shadow: inset 0 0 0 9px rgba(255,255,255,.22); }
.xp-cc-img { display: block; flex: none; width: 92px; height: auto; aspect-ratio: 720 / 449; object-fit: cover; border-radius: 6px; box-shadow: 0 4px 10px -6px rgba(10,37,64,.55); }
.xp-cc-img--big { width: 100%; border-radius: 13px; box-shadow: 0 14px 26px -14px rgba(10,37,64,.7); }
.xp-cc-img--dot { width: 24px; border-radius: 3px; box-shadow: none; }
.xp-cc { position: relative; display: block; flex: none; width: 92px; aspect-ratio: 1.586; padding: 8px 9px; border-radius: 8px; color: #fff; overflow: hidden; }
.xp-cc b { font-size: 9px; font-weight: 700; }
.xp-cc em { position: absolute; left: 9px; bottom: 7px; font-size: 8px; font-style: normal; letter-spacing: .06em; }
.xp-cc small { display: none; }
.xp-cc--navy { background: linear-gradient(135deg, #21477F, #0B2146 60%, #173E78); }
.xp-cc--silver { background: linear-gradient(135deg, #8A96A8, #4E5A6D 60%, #6B7890); }
.xp-cc--big { width: 100%; padding: 16px 18px; border-radius: 14px; box-shadow: 0 14px 26px -14px rgba(10,37,64,.7); }
.xp-cc--big b { font-size: 15px; }
.xp-cc--big em { left: 18px; bottom: 14px; font-size: 13px; }
.xp-cc--big small { display: block; position: absolute; right: 16px; bottom: 14px; font-size: 11px; opacity: .8; }
.xp-ico { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.xp-ico--sm { width: 22px; height: 22px; border-radius: 6px; }
.xp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px; border-radius: 10px; border: 1px solid transparent; font: 600 13px/1 var(--font-body); cursor: pointer; transition: background .15s, opacity .15s; }
.xp-btn--primary { background: var(--bk); color: #fff; }
.xp-btn--primary:hover { background: var(--bk-dark); }
.xp-btn--ghost { background: #fff; border-color: rgba(10,37,64,.14); color: #0A2540; }
.xp-btn--sm { padding: 7px 12px; background: #fff; border-color: var(--bk-line); color: var(--bk); }
.xp-btn--block { width: 100%; padding: 13px; font-size: 15px; border-radius: 14px; }
.xp-btn:disabled { opacity: .45; cursor: default; }
.xp-link { border: 0; background: none; font: 600 12px/1 var(--font-body); color: #C62828; cursor: pointer; }
.xp-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: currentColor; animation: spin .8s linear infinite; }
.xp-btn--sm .xp-spin { border-color: var(--bk-line); border-top-color: var(--bk); }

/* MacBook */
.xp-mac { position: relative; width: 100%; }
.xp-mac__lid { position: relative; padding: 16px 16px 20px; border-radius: 20px 20px 6px 6px; background: #0F1115; box-shadow: 0 0 0 2px #2C2F36 inset; }
.xp-mac__cam { position: absolute; left: 50%; top: 6px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #2A2E36; }
.xp-mac__screen { aspect-ratio: 16 / 10.4; border-radius: 6px; overflow: hidden; background: #fff; }
.xp-mac__base { position: relative; height: 16px; margin: 0 -5%; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, #D9DDE3, #AEB4BD); box-shadow: 0 24px 40px -20px rgba(10,37,64,.5); }
.xp-mac__base span { position: absolute; left: 50%; top: 0; width: 16%; height: 6px; margin-left: -8%; border-radius: 0 0 8px 8px; background: #9AA1AB; }
.xp-br { display: flex; flex-direction: column; height: 100%; font-family: var(--font-body); color: #0A2540; }
.xp-br__top { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 12px 0; background: #E9ECF1; }
.xp-br__dots { display: flex; gap: 6px; }
.xp-br__dots i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.xp-br__dots i:nth-child(2) { background: #FEBC2E; } .xp-br__dots i:nth-child(3) { background: #28C840; }
.xp-br__tab { padding: 7px 14px; border-radius: 9px 9px 0 0; background: #fff; font-size: 11.5px; font-weight: 600; }
.xp-br__url { flex: none; display: flex; align-items: center; gap: 7px; margin: 0; padding: 7px 14px; background: #fff; border-bottom: 1px solid #E4E8EE; font-size: 11.5px; color: #56627A; }
.xp-br__url span { padding: 5px 12px; border-radius: 99px; background: #F1F3F7; flex: 1; }
.xp-br__page { flex: 1; min-height: 0; overflow: hidden; background: #F7F9FB; font-size: 13px; }
.xp-br__page.is-scroll { overflow-y: auto; }
.xp-fit { transform-origin: 0 0; min-height: 100%; }
.xp-bank { display: inline-flex; align-items: center; gap: 6px; }
.xp-bank img { display: block; height: 20px; width: auto; }
.xp-bank span { font: 700 16px/1 var(--font-display); letter-spacing: -.02em; color: #1B1F3B; }
.xp[data-issuer="max"] .xp-bank img, .xp[data-issuer="cal"] .xp-bank img { height: 17px; }
.xp-bank--sm img { height: 14px !important; } .xp-bank--sm span { font-size: 12px; }
.xp-login__head { display: flex; align-items: center; justify-content: space-between; }
.xp-demo { padding: 3px 9px; border-radius: 99px; background: #FFF4D6; color: #8A5A00; font: 700 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; font-style: normal; }
.xp-demo-note { margin: -2px 0 0; font-size: 11px; color: #8792A2; }
.xp-login__card input[readonly] { background: #F6F8FA; color: #3C475B; }
.xp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.xp-selbtns { display: flex; gap: 12px; }
.xp-link--bk { color: var(--bk) !important; }
.xp-wl--pick { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.xp-wl--pick:hover { border-color: var(--bk-line); }
.xp-tick { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; border: 2px solid #C5CDD8; color: transparent; }
.xp-tick svg { width: 13px; }
.xp-wl--pick.is-sel { border-color: var(--bk); background: var(--bk-soft); }
.xp-wl--pick.is-sel .xp-tick { background: var(--bk); border-color: var(--bk); color: #fff; }
.xp-foot__r { display: flex; gap: 8px; }
/* four ways to pay, on the bank's page and in the issuer's app */
.xp-ways { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.xp-way { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid #E4E8EE; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.xp-way:hover { border-color: var(--bk-line); background: var(--bk-soft); }
.xp-way b { font-size: 12.5px; }
.xp-way small { font-size: 10.5px; color: #8792A2; }
.xp-way:disabled { opacity: .5; cursor: default; }
.xp-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.xp-acts button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 2px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 3px 10px -7px rgba(10,37,64,.4); font: 600 11px/1 var(--font-body); color: #0A2540; cursor: pointer; }
.xp-acts svg { width: 22px; height: 22px; padding: 7px; box-sizing: content-box; border-radius: 50%; background: var(--bk-soft); color: var(--bk); }
.xp-wtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.xp-wtabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; border: 1px solid #E4E8EE; background: #fff; font: 600 12px/1 var(--font-body); color: #0A2540; cursor: pointer; }
.xp-wtabs button[aria-selected="true"] { border-color: var(--bk); background: var(--bk-soft); }
.xp-embed { border-radius: 16px; overflow: hidden; border: 2px solid var(--wc); background: #fff; }
.xp-embed__bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--wc); color: #fff; }
.xp-embed__bar b { font-size: 13px; }
.xp-embed__bar small { margin-left: auto; font-size: 9px; opacity: .85; text-align: right; }
.xp-embed__body { display: flex; flex-direction: column; gap: 9px; padding: 10px; }
.xp-embed__bal { font-size: 11px; color: #8792A2; }
.xp-embed__send { background: var(--wc); color: #fff; }
.xp-people { display: flex; gap: 8px; }
.xp-people button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; border: 2px solid transparent; border-radius: 12px; background: none; font: 600 11px/1 var(--font-body); color: #0A2540; cursor: pointer; }
.xp-people i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #EEF1F5; font-style: normal; font-weight: 700; font-size: 12px; }
.xp-people button[aria-pressed="true"] { border-color: var(--wc, var(--bk)); }
.xp-chips { display: flex; gap: 6px; }
.xp-chips button { flex: 1; padding: 8px 0; border-radius: 10px; border: 1px solid #E4E8EE; background: #F7F9FB; font: 600 12.5px/1 var(--font-body); color: #0A2540; cursor: pointer; }
.xp-chips button[aria-pressed="true"] { border-color: var(--bk); background: var(--bk); color: #fff; }
.xp-embed .xp-chips button[aria-pressed="true"] { border-color: var(--wc); background: var(--wc); }
.xp-msg { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: 0 4px 14px -9px rgba(10,37,64,.45); font-size: 13px; }
.xp-msg p { margin: 0; color: #3C475B; }
.xp-msg span { color: var(--bk); font-weight: 600; text-decoration: underline; }
.xp-bigamt { font: 700 30px/1 var(--font-display); letter-spacing: -.02em; }
.xp-okbig { display: grid; place-items: center; width: 58px; height: 58px; margin: 6px auto 0; border-radius: 50%; background: #E3F6EC; color: #1F8A4C; }
.xp-okbig svg { width: 30px; }
.xp-app__body > h4 { text-align: left; }
.xp-sched { list-style: none; margin: 0; padding: 0; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px -7px rgba(10,37,64,.35); }
.xp-sched li { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 13px; }
.xp-sched li + li { border-top: 1px solid #EEF1F5; }
.xp-sched span { display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.xp-sched small { font-size: 10.5px; font-weight: 500; color: #8792A2; }
.xp-sched b { font: 600 12.5px/1 var(--font-mono); }
.xp-note2 { margin: 0; font-size: 12px; color: #56627A; }
@media (max-width: 620px) { .xp-ways { grid-template-columns: 1fr 1fr; } }

/* the bank's pages */
.xp-login { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; background: linear-gradient(160deg, var(--bk-soft), #F7F9FB 60%); }
.xp-login__card { width: min(340px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -26px rgba(10,37,64,.45); }
.xp-login__card h3 { margin: 6px 0 2px; font: 600 18px/1.2 var(--font-display); }
.xp-login__card label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: #56627A; }
.xp-login__card input[type="text"], .xp-login__card input[type="password"] { padding: 10px 12px; border-radius: 9px; border: 1px solid #D5DCE6; font: 500 14px/1.2 var(--font-body); color: #0A2540; background: #fff; }
.xp-check { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 500 !important; color: #3C475B !important; }
.xp-login__links { display: flex; justify-content: space-between; }
.xp-login__links button { border: 0; background: none; font: 600 12px/1 var(--font-body); color: var(--bk); cursor: pointer; }
.xp-err { margin: 0; padding: 8px 10px; border-radius: 8px; background: #FDECEC; color: #C62828; font-size: 12px; font-weight: 600; }
.xp-secure { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11.5px; color: #56627A; }
.xp-bk__top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-bottom-width: 3px !important; border-bottom-color: var(--bk-accent) !important; background: #fff; border-bottom: 1px solid #E4E8EE; }
.xp-bk__top nav { display: flex; gap: 4px; flex: 1; }
.xp-bk__top nav button, .xp-bk__out { padding: 7px 10px; border: 0; border-radius: 8px; background: none; font: 600 12px/1 var(--font-body); color: #56627A; cursor: pointer; }
.xp-bk__top nav button[aria-current] { color: var(--bk); background: var(--bk-soft); }
.xp-bk__top nav button:hover, .xp-bk__out:hover { color: #0A2540; }
.xp-bk__body { padding: 12px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.xp-h { margin: 0; font: 600 16px/1.25 var(--font-display); }
.xp-p { margin: -6px 0 0; color: #56627A; }
.xp-sub { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: #56627A; }
.xp-sub small { font-weight: 500; color: #8792A2; margin-left: 6px; }
.xp-kicker { margin: 0; font-size: 11.5px; color: #56627A; }
.xp-kicker b { color: #1A6BFF; }
.xp-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(120deg, var(--bk), var(--bk-2)); color: #fff; box-shadow: inset 0 -3px 0 var(--bk-accent); }
.xp-banner b { display: block; font: 600 15px/1.2 var(--font-display); margin-bottom: 4px; }
.xp-banner span { font-size: 12.5px; opacity: .92; }
.xp-banner__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-banner .xp-btn--primary { background: #fff; color: var(--bk); }
.xp-banner .xp-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.xp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xp-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid #E4E8EE; }
.xp-tile small, .xp-tile span { font-size: 11.5px; color: #56627A; }
.xp-tile b { font: 700 20px/1.1 var(--font-display); }
.xp-tile--card { flex-direction: row; align-items: center; gap: 12px; }
.xp-act { list-style: none; margin: 0; padding: 0; border-radius: 12px; background: #fff; border: 1px solid #E4E8EE; }
.xp-act li { display: flex; align-items: center; justify-content: space-between; padding: 7px 14px; }
.xp-act li + li { border-top: 1px solid #EEF1F5; }
.xp-act span { display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.xp-act small { font-size: 11px; font-weight: 500; color: #8792A2; }
.xp-act b { font: 600 12.5px/1 var(--font-mono); }
.xp-plus { color: #1F8A4C; }
.xp-wz { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.xp-wz li { flex: 1; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 10px; background: #fff; border: 1px solid #E4E8EE; font-size: 12px; font-weight: 600; color: #8792A2; }
.xp-wz i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #EEF1F5; font-style: normal; font-size: 11px; }
.xp-wz i svg { width: 12px; }
.xp-wz li.is-on { color: #0A2540; border-color: var(--bk); }
.xp-wz li.is-on i { background: var(--bk); color: #fff; }
.xp-wz li.is-done { color: #1F8A4C; }
.xp-wz li.is-done i { background: #E3F6EC; color: #1F8A4C; }
.xp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.xp-pick .xp-cc-img { width: 100%; }
.xp-pick { flex-direction: column; align-items: stretch; }
.xp-pick > span { flex-direction: row !important; align-items: center; justify-content: space-between; }
.xp-pick { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; border: 2px solid #E4E8EE; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.xp-pick span { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.xp-pick small { color: #8792A2; font-size: 11.5px; }
.xp-radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C5CDD8; }
.xp-pick.is-on { border-color: var(--bk); background: var(--bk-soft); }
.xp-pick.is-on .xp-radio { border: 5px solid var(--bk); }
.xp-wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xp-wl { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid #E4E8EE; }
.xp-wl span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xp-wl small { font-size: 11px; color: #8792A2; }
.xp-wl.is-on { border-color: rgba(52,199,89,.45); background: #F4FBF6; }
.xp-wl.is-on small { color: #1F8A4C; font-weight: 600; }
.xp-foot { display: flex; justify-content: space-between; gap: 10px; padding-top: 4px; }
.xp-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xp-choice button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 14px; border-radius: 12px; border: 2px solid #E4E8EE; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.xp-choice small { color: #8792A2; font-size: 11.5px; }
.xp-choice button[aria-checked="true"] { border-color: var(--bk); background: var(--bk-soft); }
.xp-order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.xp-order li { display: flex; align-items: center; gap: 9px; padding: 4px 12px 4px 4px; border-radius: 12px; background: #fff; border: 1px solid #E4E8EE; transition: box-shadow .15s, transform .15s; }
.xp-order li.is-dragging { position: relative; z-index: 2; transform: scale(1.02); box-shadow: 0 12px 24px -12px rgba(10,37,64,.45); }
.xp-order em { width: 10px; font: 700 12px/1 var(--font-mono); font-style: normal; color: var(--bk); }
.xp-order b { flex: 1; }
.xp-order li > span { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font: 600 12.5px/1 var(--font-mono); }
.xp-order li > span small { font: 500 10px/1 var(--font-body); color: #8792A2; }
.xp-drag { display: grid; place-items: center; width: 24px; height: 32px; padding: 0; border: 0; background: none; color: #A3ADBD; cursor: grab; touch-action: none; }
.xp-sw { display: flex; flex-direction: column; padding: 2px 14px; border-radius: 12px; background: #fff; border: 1px solid #E4E8EE; }
.xp-switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; cursor: pointer; }
.xp-switch + .xp-switch { border-top: 1px solid #EEF1F5; }
.xp-switch span { display: flex; flex-direction: column; gap: 2px; }
.xp-switch small { font-size: 11px; color: #8792A2; }
.xp-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.xp-switch i { flex: none; position: relative; width: 38px; height: 22px; border-radius: 99px; background: #D5DCE6; transition: background .2s; }
.xp-switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.xp-switch input:checked + i { background: #34C759; }
.xp-switch input:checked + i::after { transform: translateX(16px); }
.xp-preview { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--bk-soft); font-size: 12.5px; color: #1B2540; }
.xp-preview b { display: block; margin-top: 3px; }
.xp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.xp-cols .xp-sub { margin: 0 0 6px; }
@media (max-width: 620px) { .xp-cols { grid-template-columns: 1fr; } }
.xp-dl { margin: 0; padding: 4px 16px; border-radius: 12px; background: #fff; border: 1px solid #E4E8EE; }
.xp-dl div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; }
.xp-dl div + div { border-top: 1px solid #EEF1F5; }
.xp-dl dt { color: #56627A; }
.xp-dl dd { margin: 0; font-weight: 600; text-align: right; }
.xp-icons { display: flex; align-items: center; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.xp-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; text-align: center; }
.xp-done h3 { margin: 0; font: 600 22px/1.2 var(--font-display); }
.xp-done p { margin: 0; color: #56627A; }
.xp-done__ok { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #E3F6EC; color: #1F8A4C; }
.xp-done__ok svg { width: 32px; }
.xp-done .xp-banner__btns { justify-content: center; margin-top: 6px; }
.xp-receipt { display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; border-radius: 12px; background: #fff; border: 1px solid #E4E8EE; font-size: 12.5px; }
.xp-receipt span { color: #56627A; }

/* side by side, the MacBook stands exactly as tall as the iPhone: lid top to phone top, base to phone bottom */
@media (min-width: 1181px) {
  .xp__devices { align-items: stretch; }
  .xp-mac { display: flex; flex-direction: column; height: 620px; }
  .xp-mac__lid { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .xp-mac__screen { flex: 1; min-height: 0; aspect-ratio: auto; }
}
@media (max-width: 1180px) {
  .xp__devices { grid-template-columns: 1fr; justify-items: center; }
  .xp-mac__screen { aspect-ratio: auto; height: 600px; }   /* stacked: room below, so the screen is tall enough for each page */
  .xp-mac { max-width: 720px; }
}
@media (max-width: 620px) {

  .xp-mac__lid { padding: 10px 10px 12px; border-radius: 14px 14px 4px 4px; }
  .xp-mac__screen { aspect-ratio: auto; height: 640px; }
  .xp-grid2, .xp-cards, .xp-wallets, .xp-choice { grid-template-columns: 1fr; }
  .xp-bk__top { flex-wrap: wrap; gap: 8px; }
  .xp-bk__top nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .xp-banner { flex-direction: column; align-items: flex-start; }
  .xp-wz li { font-size: 0; justify-content: center; } .xp-wz i { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .xp-note, .xp-face.is-scan, .xp-nfc i { animation: none; } }

/* ---- timeline (generated from seconds; see _dev/gen_scenes_css.py) ---- */
@keyframes ph-card-cycle {
        0% { opacity: 0; transform: translateY(7px) scale(.97) }
    1.587% { opacity: 1; transform: none }
   32.381% { opacity: 1; transform: none }
   34.603% { opacity: 0; transform: translateY(-7px) scale(.97) }
      100% { opacity: 0 }
}

@keyframes ph-ready {
        0% { opacity: 1; visibility: visible }
   31.429% { opacity: 1; visibility: visible }
   33.333% { opacity: 0; visibility: hidden }
   90.476% { opacity: 0; visibility: hidden }
   95.238% { opacity: 1; visibility: visible }
      100% { opacity: 1; visibility: visible }
}

@keyframes ph-hold {
        0% { opacity: 0; visibility: hidden }
   31.429% { opacity: 0; visibility: hidden }
   33.333% { opacity: 1; visibility: visible }
   49.524% { opacity: 1; visibility: visible }
   51.905% { opacity: 0; visibility: hidden }
      100% { opacity: 0; visibility: hidden }
}

@keyframes ph-webreq {
        0% { opacity: 0; transform: translateY(8px) }
   18.571% { opacity: 0; transform: translateY(8px) }
   21.429% { opacity: 1; transform: none }
   33.333% { opacity: 1; transform: none }
   33.810% { opacity: 0; transform: translateY(8px) }
      100% { opacity: 0; transform: translateY(8px) }
}

@keyframes ph-webidle {
        0% { opacity: 1 }
   18.571% { opacity: 1 }
   20.476% { opacity: 0 }
   91.429% { opacity: 0 }
   95.238% { opacity: 1 }
      100% { opacity: 1 }
}

@keyframes ph-card-big {
        0% { transform: translateY(var(--card-drop)) scale(var(--card-grow)) }
   49.524% { transform: translateY(var(--card-drop)) scale(var(--card-grow)) }
   53.333% { transform: translateY(0px) scale(1) }
   90.476% { transform: translateY(0px) scale(1) }
   95.238% { transform: translateY(var(--card-drop)) scale(var(--card-grow)) }
      100% { transform: translateY(var(--card-drop)) scale(var(--card-grow)) }
}

@keyframes ph-tx-in {
        0% { opacity: 0 }
   51.905% { opacity: 0 }
   55.238% { opacity: 1 }
   88.571% { opacity: 1 }
   90.476% { opacity: 0 }
      100% { opacity: 0 }
}

@keyframes ph-ok-pop {
        0% { opacity: 0; transform: scale(.3) }
   52.857% { opacity: 0; transform: scale(.3) }
   55.238% { opacity: 1; transform: scale(1.18) }
   56.667% { opacity: 1; transform: scale(1) }
   88.571% { opacity: 1; transform: scale(1) }
   90.476% { opacity: 0; transform: scale(.3) }
      100% { opacity: 0; transform: scale(.3) }
}

@keyframes ph-sidekey {
        0% { opacity: .35; transform: none }
    5.714% { opacity: 1; transform: none }
   11.429% { opacity: .35; transform: none }
   17.143% { opacity: 1; transform: none }
   22.857% { opacity: .35; transform: none }
   23.810% { opacity: 1; transform: scaleX(2) }
   24.952% { opacity: .25; transform: none }
   26.286% { opacity: 1; transform: scaleX(2) }
   27.429% { opacity: .25; transform: none }
   31.429% { opacity: .6; transform: none }
      100% { opacity: .35; transform: none }
}

@keyframes ph-tilt {
        0% { transform: scale(var(--ph-scale)) translate(0px, 0px) rotate(0deg) }
   31.429% { transform: scale(var(--ph-scale)) translate(0px, 0px) rotate(0deg) }
   38.095% { transform: scale(var(--ph-scale)) translate(var(--tilt-x), var(--tilt-y)) rotate(var(--tilt-r)) }
   49.524% { transform: scale(var(--ph-scale)) translate(var(--tilt-x), var(--tilt-y)) rotate(var(--tilt-r)) }
   55.238% { transform: scale(var(--ph-scale)) translate(0px, 0px) rotate(0deg) }
      100% { transform: scale(var(--ph-scale)) translate(0px, 0px) rotate(0deg) }
}

@keyframes nfc-w1 {
        0% { opacity: 0 }
   37.619% { opacity: 0 }
   38.095% { opacity: 0.22 }
   38.762% { opacity: 1 }
   40.286% { opacity: 0.22 }
   41.905% { opacity: 0.22 }
   42.571% { opacity: 1 }
   44.095% { opacity: 0.22 }
   45.714% { opacity: 0.22 }
   46.381% { opacity: 1 }
   47.905% { opacity: 0.22 }
   50.952% { opacity: 0 }
      100% { opacity: 0 }
}

@keyframes ph-cl-a1 {
        0% { opacity: 0.3 }
   38.095% { opacity: 0.3 }
   38.762% { opacity: 1 }
   40.286% { opacity: 0.3 }
   41.905% { opacity: 0.3 }
   42.571% { opacity: 1 }
   44.095% { opacity: 0.3 }
   45.714% { opacity: 0.3 }
   46.381% { opacity: 1 }
   47.905% { opacity: 0.3 }
      100% { opacity: 0.3 }
}

@keyframes nfc-w2 {
        0% { opacity: 0 }
   37.619% { opacity: 0 }
   39.048% { opacity: 0.22 }
   39.714% { opacity: 1 }
   41.238% { opacity: 0.22 }
   42.857% { opacity: 0.22 }
   43.524% { opacity: 1 }
   45.048% { opacity: 0.22 }
   46.667% { opacity: 0.22 }
   47.333% { opacity: 1 }
   48.857% { opacity: 0.22 }
   50.952% { opacity: 0 }
      100% { opacity: 0 }
}

@keyframes ph-cl-a2 {
        0% { opacity: 0.3 }
   39.048% { opacity: 0.3 }
   39.714% { opacity: 1 }
   41.238% { opacity: 0.3 }
   42.857% { opacity: 0.3 }
   43.524% { opacity: 1 }
   45.048% { opacity: 0.3 }
   46.667% { opacity: 0.3 }
   47.333% { opacity: 1 }
   48.857% { opacity: 0.3 }
      100% { opacity: 0.3 }
}

@keyframes nfc-w3 {
        0% { opacity: 0 }
   37.619% { opacity: 0 }
       40% { opacity: 0.22 }
   40.667% { opacity: 1 }
   42.190% { opacity: 0.22 }
   43.810% { opacity: 0.22 }
   44.476% { opacity: 1 }
       46% { opacity: 0.22 }
   47.619% { opacity: 0.22 }
   48.286% { opacity: 1 }
   49.810% { opacity: 0.22 }
   50.952% { opacity: 0 }
      100% { opacity: 0 }
}

@keyframes ph-cl-a3 {
        0% { opacity: 0.3 }
       40% { opacity: 0.3 }
   40.667% { opacity: 1 }
   42.190% { opacity: 0.3 }
   43.810% { opacity: 0.3 }
   44.476% { opacity: 1 }
       46% { opacity: 0.3 }
   47.619% { opacity: 0.3 }
   48.286% { opacity: 1 }
   49.810% { opacity: 0.3 }
      100% { opacity: 0.3 }
}

@keyframes nfc-label {
        0% { opacity: 0; visibility: hidden }
   37.143% { opacity: 0; visibility: hidden }
   38.571% { opacity: 1; visibility: visible }
   49.524% { opacity: 1; visibility: visible }
   51.429% { opacity: 0; visibility: hidden }
      100% { opacity: 0; visibility: hidden }
}

@keyframes pos-glow {
        0% { opacity: 0 }
   37.619% { opacity: 0 }
   40.762% { opacity: 0.3 }
   41.429% { opacity: 1 }
   42.952% { opacity: 0.3 }
   44.571% { opacity: 0.3 }
   45.238% { opacity: 1 }
   46.762% { opacity: 0.3 }
   48.381% { opacity: 0.3 }
   49.048% { opacity: 1 }
   50.571% { opacity: 0.3 }
   51.429% { opacity: 0 }
      100% { opacity: 0 }
}

@keyframes pos-pay {
        0% { opacity: 1; visibility: visible }
   38.095% { opacity: 1; visibility: visible }
   39.524% { opacity: 0; visibility: hidden }
   90.476% { opacity: 0; visibility: hidden }
   95.238% { opacity: 1; visibility: visible }
      100% { opacity: 1; visibility: visible }
}

@keyframes pos-proc {
        0% { opacity: 0; visibility: hidden }
   37.619% { opacity: 0; visibility: hidden }
   39.048% { opacity: 1; visibility: visible }
   49.524% { opacity: 1; visibility: visible }
   50.952% { opacity: 0; visibility: hidden }
      100% { opacity: 0; visibility: hidden }
}

@keyframes shop-wait {
        0% { opacity: 0; visibility: hidden }
   19.048% { opacity: 0; visibility: hidden }
   20.476% { opacity: 1; visibility: visible }
   31.429% { opacity: 1; visibility: visible }
   32.857% { opacity: 0; visibility: hidden }
      100% { opacity: 0; visibility: hidden }
}

@keyframes shop-proc {
        0% { opacity: 0; visibility: hidden }
   31.429% { opacity: 0; visibility: hidden }
   32.857% { opacity: 1; visibility: visible }
   49.524% { opacity: 1; visibility: visible }
   50.952% { opacity: 0; visibility: hidden }
      100% { opacity: 0; visibility: hidden }
}

@keyframes shop-done {
        0% { opacity: 0; visibility: hidden }
   49.524% { opacity: 0; visibility: hidden }
   50.952% { opacity: 1; visibility: visible }
   90.476% { opacity: 1; visibility: visible }
   95.238% { opacity: 0; visibility: hidden }
      100% { opacity: 0; visibility: hidden }
}

@keyframes shop-cursor {
        0% { opacity: 0; transform: translate(3.2em, 2.4em) scale(1) }
    3.810% { opacity: 1; transform: translate(3.2em, 2.4em) scale(1) }
   14.762% { opacity: 1; transform: translate(0, 0) scale(1) }
   16.381% { opacity: 1; transform: translate(0, 0) scale(.8) }
   18.095% { opacity: 1; transform: translate(0, 0) scale(1) }
   20.476% { opacity: 0; transform: translate(0, 0) scale(1) }
   20.952% { opacity: 0; transform: translate(3.2em, 2.4em) scale(1) }
      100% { opacity: 0; transform: translate(3.2em, 2.4em) scale(1) }
}

@keyframes shop-press {
        0% { transform: none; filter: none }
   16.190% { transform: none; filter: none }
   16.762% { transform: scale(.94); filter: brightness(.8) }
   18.286% { transform: none; filter: none }
      100% { transform: none; filter: none }
}

@keyframes sig-d1 {
        0% { opacity: 0 }
   18.571% { opacity: 0 }
   21.810% { opacity: 0.2 }
   22.381% { opacity: 1 }
   23.905% { opacity: 0.2 }
   25.238% { opacity: 0.2 }
   25.810% { opacity: 1 }
   27.333% { opacity: 0.2 }
   31.905% { opacity: 0.2 }
   32.476% { opacity: 1 }
       34% { opacity: 0.2 }
   35.333% { opacity: 0.2 }
   35.905% { opacity: 1 }
   37.429% { opacity: 0.2 }
   41.905% { opacity: 0 }
      100% { opacity: 0 }
}

@keyframes sig-d2 {
        0% { opacity: 0 }
   18.571% { opacity: 0 }
   20.667% { opacity: 0.2 }
   21.238% { opacity: 1 }
   22.762% { opacity: 0.2 }
   24.095% { opacity: 0.2 }
   24.667% { opacity: 1 }
   26.190% { opacity: 0.2 }
   33.048% { opacity: 0.2 }
   33.619% { opacity: 1 }
   35.143% { opacity: 0.2 }
   36.476% { opacity: 0.2 }
   37.048% { opacity: 1 }
   38.571% { opacity: 0.2 }
   41.905% { opacity: 0 }
      100% { opacity: 0 }
}

@keyframes sig-d3 {
        0% { opacity: 0 }
   18.571% { opacity: 0 }
   19.524% { opacity: 0.2 }
   20.095% { opacity: 1 }
   21.619% { opacity: 0.2 }
   22.952% { opacity: 0.2 }
   23.524% { opacity: 1 }
   25.048% { opacity: 0.2 }
   34.190% { opacity: 0.2 }
   34.762% { opacity: 1 }
   36.286% { opacity: 0.2 }
   37.619% { opacity: 0.2 }
   38.190% { opacity: 1 }
   39.714% { opacity: 0.2 }
   41.905% { opacity: 0 }
      100% { opacity: 0 }
}

@keyframes wl-pulse {
        0% { opacity: 0; stroke-dashoffset: 14 }
   53.143% { opacity: 0; stroke-dashoffset: 14 }
   53.333% { opacity: 1; stroke-dashoffset: 14 }
   60.476% { opacity: 1; stroke-dashoffset: -100 }
   60.667% { opacity: 0; stroke-dashoffset: -100 }
   61.714% { opacity: 0; stroke-dashoffset: 14 }
   61.905% { opacity: 1; stroke-dashoffset: 14 }
   69.048% { opacity: 1; stroke-dashoffset: -100 }
   69.238% { opacity: 0; stroke-dashoffset: -100 }
      100% { opacity: 0; stroke-dashoffset: 14 }
}

@keyframes wl-node {
        0% { opacity: 0.55 }
       60% { opacity: 0.55 }
   60.762% { opacity: 1 }
   62.857% { opacity: 0.55 }
   68.571% { opacity: 0.55 }
   69.333% { opacity: 1 }
   71.429% { opacity: 0.55 }
      100% { opacity: 0.55 }
}

@keyframes wl-dim {
        0% { opacity: 1 }
   31.429% { opacity: 1 }
   33.333% { opacity: .18 }
   53.333% { opacity: .18 }
   55.714% { opacity: 1 }
      100% { opacity: 1 }
}

@keyframes ph-link {
        0% { opacity: 1 }
   30.476% { opacity: 1 }
   32.381% { opacity: 0 }
   56.190% { opacity: 0 }
       60% { opacity: 1 }
      100% { opacity: 1 }
}

@keyframes pos-halo {
        0% { opacity: 0 }
   49.524% { opacity: 0 }
   52.857% { opacity: 1 }
   89.524% { opacity: 1 }
   93.333% { opacity: 0 }
      100% { opacity: 0 }
}

/* 27. Demo v81: issuer look on the iPhone, shortfall rule, AI priorities, Apple Pay */
.xp { --lock: linear-gradient(165deg, #1A14A8 0%, #3028F8 48%, #7B6BFF 82%, #E8505B 130%); }
.xp[data-issuer="max"] { --lock: linear-gradient(165deg, #000 0%, #1B1B1B 55%, #3C3C3C 100%); }
.xp[data-issuer="cal"] { --lock: linear-gradient(165deg, #0B3574 0%, #1858B0 50%, #5EA2F0 100%); }
.xp .xp-lock { position: relative; background: var(--lock); }
.xp .xp-lock--dim { background: var(--lock); }
.xp .xp-lock--dim::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.22); pointer-events: none; }
.xp .xp-lock > * { position: relative; }
.xp-lock__brand { position: absolute !important; left: 0; right: 0; bottom: 40px; display: flex; justify-content: center; align-items: center; gap: 7px; opacity: .9; }
.xp-lock__brand img { width: auto;  height: 22px !important; filter: brightness(0) invert(1); }
.xp-lock__brand span { font: 700 18px/1 var(--font-display); letter-spacing: -.02em;  color: #fff; font-size: 18px; }
.xp-phone__screen { background: var(--bk-soft); }
.xp-phone__screen.is-dark .xp-status { color: #fff; }
.xp .xp-app__top { margin-top: -42px; padding: 48px 14px 12px; justify-content: space-between; border: 0; background: linear-gradient(135deg, var(--bk-dark), var(--bk) 60%, var(--bk-2)); }
.xp-app__top .xp-bank { padding: 6px 10px; border-radius: 10px; background: #fff; box-shadow: 0 4px 10px -6px rgba(0,0,0,.4); }
.xp-app__top .xp-bank img { height: 16px !important; }
.xp-app__top .xp-bank span { font-size: 14px; }
.xp-me { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font: 700 13px/1 var(--font-body); font-style: normal; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.xp .xp-note__btns .is-yes { background: var(--bk); }
.xp .xp-face { background: var(--bk-soft); color: var(--bk); }
.xp .xp-face--no { background: #FDECEC; color: #C62828; }
.xp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-top: 2px; border-radius: 12px; background: #EEF1F5; }
.xp-seg button { padding: 8px 6px; border: 0; border-radius: 9px; background: none; font: 600 12px/1.15 var(--font-body); color: #56627A; cursor: pointer; }
.xp-seg button[aria-checked="true"] { background: #fff; color: var(--bk); box-shadow: 0 2px 6px -3px rgba(10,37,64,.35); }
.xp-cols .xp-seg + .xp-preview, .xp-cols .xp-sw + .xp-sub { margin-top: 10px; }
.xp-preview.is-short { background: #FDECEC; color: #8A1C1C; }
.xp-warn { margin: 0; padding: 10px 12px; border-radius: 12px; background: #FDECEC; color: #8A1C1C; font-size: 12.5px; line-height: 1.4; }
.xp-act b.xp-no { color: #C62828; font-family: var(--font-body); font-size: 12px; }
.xp-prio { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.xp-prio li { display: flex; align-items: center; gap: 9px; padding: 5px 6px 5px 10px; border-radius: 12px; background: #fff; border: 1px solid #E4E8EE; }
.xp-prio em { width: 10px; font: 700 12px/1 var(--font-mono); font-style: normal; color: var(--bk); }
.xp-prio__ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
.xp-prio__ic svg { width: 17px; height: 17px; }
.xp-prio__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xp-prio__t b { font-size: 12.5px; }
.xp-prio__t small { font-size: 10.5px; color: #8792A2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-prio__mv { display: flex; flex-direction: column; }
.xp-prio__mv button { width: 26px; height: 16px; padding: 0; border: 0; background: none; color: #56627A; font-size: 9px; cursor: pointer; border-radius: 5px; }
.xp-prio__mv button:hover:not(:disabled) { background: var(--bk-soft); color: var(--bk); }
.xp-prio__mv button:disabled { opacity: .25; cursor: default; }
.xp-mob { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: center; }
.xp-mob__l { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.xp-mob__l .xp-done__ok { width: 44px; height: 44px; }
.xp-mob__l .xp-done__ok svg { width: 24px; }
.xp-mob__l h3 { margin: 0; font: 600 20px/1.2 var(--font-display); }
.xp-mob__l p { margin: 0; font-size: 13px; color: #56627A; }
.xp-mob__l .xp-cc-img { width: 200px; }
.xp-btn--apple { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: #000; color: #fff; }
.xp-btn--apple:hover { background: #222; }
.xp-apl { height: 20px; width: auto; }
.xp-btn--gpay { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: #1F1F1F; border: 1px solid #DADCE0; }
.xp-btn--gpay img { width: 20px; height: 20px; border-radius: 5px; }
.xp-mob__r { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; border-radius: 16px; border: 1px solid #E4E8EE; background: #fff; text-align: center; }
.xp-mob__r > b { font-size: 14px; }
.xp-mob__r small { font-size: 11.5px; color: #56627A; }
.xp-mob__r small b { font-family: var(--font-mono); color: #0A2540; }
.xp-qr { position: relative; width: 168px; height: 168px; padding: 10px; border-radius: 14px; border: 1px solid #E4E8EE; background: #fff; cursor: pointer; }
.xp-qr:hover { box-shadow: 0 8px 20px -12px rgba(10,37,64,.5); }
.xp-qr svg { display: block; width: 100%; height: 100%; }
.xp-qr span { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; padding: 3px; border-radius: 10px; background: #fff; }
.xp-qr span img { width: 100%; height: 100%; border-radius: 8px; }
.xp-added { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 13px; font-weight: 600; color: #1F8A4C; }
.xp-added svg { width: 16px; }
.xp-aw { background: #F2F2F7; min-height: 100%; }
.xp-aw__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 12px 10px; font-size: 13.5px; }
.xp-aw__top button { justify-self: start; padding: 0; border: 0; background: none; color: #0A7AFF; font: 500 13.5px/1 var(--font-body); cursor: pointer; }
.xp-aw .xp-app--center, .xp-aw.xp-app--center { gap: 8px; }
.xp-aw__card { width: 100%; max-width: 230px; height: auto; border-radius: 12px; box-shadow: 0 14px 28px -14px rgba(0,0,0,.55); }
.xp-aw h4 { margin: 4px 0 0; }
.xp-aw p { margin: 0; }
.xp-aplbadge { display: flex; justify-content: center; margin-bottom: 6px; }
.xp-aplbadge .xp-apl { height: 22px; padding: 4px 8px; border-radius: 6px; background: #000; box-sizing: content-box; }
.xp-imp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.xp-imp > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 12px; }
.xp-imp small { font-size: 11px; font-weight: 600; }
.xp-imp b { font: 700 18px/1.1 var(--font-display); }
.xp-imp span { font-size: 10px; color: #56627A; }
.xp-imp--g { background: #E8F8EE; color: #1F8A4C; } .xp-imp--p { background: #F1ECFF; color: #6B3FE0; }
.xp-imp--b { background: #EAF2FF; color: #2F6BFF; } .xp-imp--o { background: #FFF3E6; color: #D46A00; }
@media (max-width: 620px) {
  .xp-mob { grid-template-columns: 1fr; gap: 10px; }
  .xp-mob__l .xp-cc-img, .xp-mob__l p, .xp-mob__r small:first-of-type { display: none; }
  .xp-qr { width: 118px; height: 118px; padding: 6px; }
  .xp-imp { grid-template-columns: 1fr 1fr; }
  .xp-imp span, .xp-prio__t small { display: none; }
  .xp-prio li { padding-block: 3px; }
  .xp-prio { gap: 4px; }
  .xp-prio__ic { width: 22px; height: 22px; }
  .xp-prio li { padding-block: 2px; }
  .xp-switch { padding: 5px 0; }
  .xp-sw small, .xp-kicker, .xp-choice small, .xp-sub small, .xp-banner span { display: none; }
}
.xp-imp span { line-height: 1.25; }

/* 29. Demo v82: a Samsung Galaxy S26 Ultra (20% larger, drawn at 300x620 and zoomed) and a Lenovo laptop on Windows 11 */
.xp__devices { grid-template-columns: 360px minmax(0, 1fr); }
.xp[data-os="google"] .xp-phone { width: 300px; height: 620px; padding: 6px; border-radius: 30px;
  background: #0A0A0B; box-shadow: 0 0 0 2.5px #9A9EA5, 0 0 0 3.5px #5E6268, 0 40px 80px -30px rgba(10,37,64,.5); }
.xp[data-os="google"] .xp-phone::before, .xp[data-os="google"] .xp-phone::after { content: ""; position: absolute; right: -5.5px; width: 3px; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #6E7278, #A9ADB3); }
.xp[data-os="google"] .xp-phone::before { top: 120px; height: 64px; }
.xp[data-os="google"] .xp-phone::after { top: 200px; height: 36px; }
.xp[data-os="google"].is-phone .xp-phone { box-shadow: 0 0 0 2.5px #9A9EA5, 0 0 0 3.5px #5E6268, 0 0 0 9px rgba(26,107,255,.22), 0 40px 80px -30px rgba(10,37,64,.5); }
.xp[data-os="google"] .xp-phone__screen { border-radius: 25px; }
.xp[data-os="google"] .xp-status { height: 34px; padding: 0 18px 0 22px; font-size: 11.5px; }
.xp[data-os="google"] .xp-status > b { font-weight: 600; }
.xp[data-os="google"] .xp-island { top: 10px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #050506; box-shadow: 0 0 0 1.5px #1C1D20; }
.xp-sbar { display: flex; align-items: center; gap: 4px; }
.xp-sbar svg { width: 12px; height: 10px; fill: currentColor; }
.xp-sbar b { font-size: 10px; font-weight: 600; }
.xp-sbar .xp-sbar__bat { width: 7px; height: 12px; }
.xp[data-os="google"] .xp-lock { height: calc(100% + 34px); margin-top: -34px; padding-top: 64px; }
.xp[data-os="google"] .xp-lock > b { font-weight: 700; font-size: 70px; letter-spacing: -.02em; }
.xp[data-os="google"] .xp-app__top { margin-top: -34px; padding-top: 40px; }
.xp[data-os="google"] .xp-home { bottom: 6px; width: 96px; height: 3.5px; margin-left: -48px; }
.xp-btn--gw { background: #0B57D0; color: #fff; border-radius: 99px; }
.xp-btn--gw:hover { background: #0842A0; }
.xp-gw { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 14px/1 var(--font-body); color: #1F1F1F; }
.xp-gw img { width: 20px; height: 20px; border-radius: 5px; }
.xp[data-os="google"] .xp-aw { background: #F8FAFD; }
.xp[data-os="google"] .xp-aw__top button { font-size: 16px; color: #444746; }
.xp-btn--gpay img { width: 20px; height: 20px; border-radius: 5px; }

/* Lenovo lid: thin black bezels, a wordmark on the chin; Windows 11 window and taskbar */
.xp[data-os="google"] .xp-mac__lid { padding: 12px 12px 26px; border-radius: 12px 12px 4px 4px; background: #111214; box-shadow: 0 0 0 1.5px #2E3034 inset; }
.xp[data-os="google"] .xp-mac__cam { top: 4px; width: 5px; height: 5px; margin-left: -2.5px; background: #25282D; box-shadow: 0 0 0 1.5px #1A1C20; }
.xp-mac__brand { position: absolute; left: 50%; bottom: 7px; translate: -50% 0; font: 600 11px/1 "Segoe UI", Arial, sans-serif; letter-spacing: .02em; color: #6F737A; }
.xp[data-os="google"] .xp-mac__screen { border-radius: 2px; }
.xp[data-os="google"] .xp-mac__base { height: 12px; margin: 0 -4%; border-radius: 2px 2px 12px 12px; background: linear-gradient(180deg, #4A4D53, #2A2C30 70%, #1C1D20); box-shadow: 0 22px 36px -20px rgba(10,37,64,.55); }
.xp[data-os="google"] .xp-mac__base span { width: 12%; height: 4px; margin-left: -6%; border-radius: 0 0 5px 5px; background: #1A1B1E; }
.xp[data-os="google"] .xp-br { font-family: "Segoe UI", var(--font-body); }
.xp[data-os="google"] .xp-br__top { gap: 4px; padding: 6px 0 0 8px; background: #E6EBF1; }
.xp[data-os="google"] .xp-br__tab { display: inline-flex; align-items: center; gap: 7px; max-width: 46%; padding: 7px 10px; border-radius: 8px 8px 0 0; font-size: 11px; font-weight: 400; }
.xp[data-os="google"] .xp-br__tab > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xp-br__fav { flex: none; width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(135deg, var(--bk), var(--bk-2)); }
.xp[data-os="google"] .xp-br__tab em { font-style: normal; font-size: 9px; color: #5F6368; margin-left: 6px; }
.xp-br__plus { padding: 0 8px; font-size: 15px; color: #5F6368; }
.xp-br__win { display: flex; margin-left: auto; align-self: flex-start; margin-top: -6px; }
.xp-br__win i { display: grid; place-items: center; width: 40px; height: 30px; }
.xp-br__win svg { width: 10px; height: 10px; fill: none; stroke: #1F1F1F; stroke-width: 1; }
.xp-br__win i:last-child:hover { background: #C42B1C; }
.xp[data-os="google"] .xp-br__url { gap: 8px; padding: 5px 10px; }
.xp[data-os="google"] .xp-br__url span[data-url] { border-radius: 99px; }
.xp-br__nav { display: flex; gap: 10px; }
.xp-br__nav svg { width: 13px; height: 13px; fill: none; stroke: #5F6368; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.xp-task { flex: none; position: relative; display: flex; align-items: center; justify-content: center; height: 30px; padding: 0 10px; background: rgba(238,241,246,.96); border-top: 1px solid #D9DEE6; font-family: "Segoe UI", var(--font-body); color: #1F1F1F; }
.xp-task__apps { display: flex; align-items: center; gap: 12px; }
.xp-task__apps > svg { width: 16px; height: 16px; }
.xp-task__win rect { fill: #0078D4; }
.xp-task__search { display: inline-flex; align-items: center; gap: 6px; width: 120px; padding: 4px 10px; border-radius: 99px; background: #fff; border: 1px solid #D9DEE6; font-size: 10.5px; color: #5F6368; }
.xp-task__search svg { width: 11px; height: 11px; fill: none; stroke: #1F1F1F; stroke-width: 1.5; }
.xp-task__folder path { fill: #F8C443; stroke: #D69E1E; stroke-width: .8; }
.xp-task__web { fill: none; }
.xp-task__web circle { fill: #1A73E8; } .xp-task__web path { stroke: #7FE0A8; stroke-width: 2; stroke-linecap: round; }
.xp-task__web.is-on { filter: drop-shadow(0 7px 0 transparent); }
.xp-task__apps > .is-on { position: relative; }
.xp-task__tray { position: absolute; right: 10px; display: flex; align-items: center; gap: 10px; font-size: 10px; }
.xp-task__tray svg { width: 12px; height: 10px; fill: #1F1F1F; }
.xp-task__clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.xp-task__clock small { font-size: 10px; }

@media (max-width: 1180px) { .xp__devices { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .xp[data-os="google"] .xp-mac__lid { padding: 8px 8px 20px; }
  .xp-task__search, .xp-task__tray > span:first-child { display: none; }
  .xp-br__win i { width: 28px; }
  .xp[data-os="google"] .xp-br__tab { max-width: 58%; }
}


@media (max-width: 620px) { .xp .xp-mac__screen { height: 690px; } .xp-task { height: 26px; } }

/* 30. Demo v83: Apple or Google devices, several cards, the enrolment panel, the wallet/card slider, the keyboard */
.xp .xp-phone { zoom: 1.2; }
@media (max-width: 420px) { .xp .xp-phone { zoom: 1.1; } }
.xp[data-os="apple"] .xp-lock { height: calc(100% + 42px); }
.xp[data-os="apple"] .xp-sbar b { display: none; }
.xp[data-os="apple"] :is(.xp-task, .xp-mac__brand, .xp-br__win, .xp-br__nav, .xp-br__plus, .xp-br__tab em, .xp-br__fav) { display: none; }
.xp[data-os="google"] .xp-br__dots { display: none; }
.xp__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 0 14px; }
.xp .xp__pick .xp__issuer { margin: 0; }
.xp__os { display: flex; gap: 8px; }
.xp__os button { display: grid; place-items: center; height: 42px; padding: 0 14px; border: 2px solid transparent; border-radius: 12px; background: #000; cursor: pointer; opacity: .42; transition: opacity .2s, box-shadow .2s; }
.xp__os button img { height: 24px; width: auto; }
.xp__os button:hover { opacity: .7; }
.xp__os button[aria-checked="true"] { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1A6BFF, 0 8px 18px -10px rgba(0,0,0,.6); }
@media (min-width: 1181px) {
  .xp__os { justify-content: center; }
}
/* several cards */
.xp-cards--4 { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.xp-cards--4 .xp-pick { padding: 10px; gap: 8px; }
.xp-cards--4 .xp-pick b { font-size: 12.5px; }
.xp-tick { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 2px solid #C9D1DC; color: transparent; }
.xp-tick svg { width: 13px; }
.xp-pick.is-on .xp-tick { border-color: var(--bk); background: var(--bk); color: #fff; }
.xp-mycards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.xp-mycard { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid #E4E8EE; }
.xp-mycard .xp-cc-img { width: 100%; }
.xp-mycard span { display: flex; flex-direction: column; gap: 2px; }
.xp-mycard b { font-size: 12px; }
.xp-mycard small { font-size: 10.5px; color: #8792A2; }
.xp-mycard.is-on { border-color: var(--bk-line); }
.xp-mycard.is-on small { color: #1F8A4C; font-weight: 600; }
/* the enrolment panel */
.xp-enr { display: grid; grid-template-columns: 38% 1fr; overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid #E4E8EE; box-shadow: 0 10px 24px -18px rgba(10,37,64,.45); }
.xp-enr__vis { position: relative; min-height: 150px; background: radial-gradient(120% 90% at 30% 20%, var(--bk-2), var(--bk) 55%, var(--bk-dark)); }
.xp-enr__card { position: absolute; left: 50%; top: 50%; width: 62%; height: auto; translate: -50% -50%; rotate: -8deg; border-radius: 8px; box-shadow: 0 16px 30px -12px rgba(0,0,0,.55); }
.xp-enr__w { position: absolute; width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); animation: xp-enr 3.6s ease-in-out infinite; }
.xp-enr__w--0 { left: 9%; top: 14%; } .xp-enr__w--1 { right: 8%; top: 22%; animation-delay: -1.2s; } .xp-enr__w--2 { left: 16%; bottom: 10%; animation-delay: -2.4s; }
@keyframes xp-enr { 50% { transform: translateY(-7px) scale(1.06); } }
.xp-enr__txt { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; }
.xp-enr__txt > small { font: 600 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bk); }
.xp-enr__txt > b { font: 600 18px/1.2 var(--font-display); }
.xp-enr__txt ol { margin: 2px 0 4px; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: #3C475B; }
.xp-enr__txt li { counter-increment: s; display: flex; align-items: center; gap: 8px; }
.xp-enr__txt li::before { content: counter(s); display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--bk-soft); color: var(--bk); font: 700 10.5px/1 var(--font-body); }
.xp-enr__btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* the wallet / card slider */
.xp-pct { padding: 10px 12px 8px; border-radius: 12px; background: #fff; border: 1px solid #E4E8EE; margin-bottom: 10px; }
.xp-pct__lbl { display: flex; justify-content: space-between; font-size: 12px; color: #56627A; }
.xp-pct__lbl b { color: #0A2540; }
.xp-pct__lbl span { display: inline-flex; align-items: center; gap: 5px; }
.xp-pct__lbl i { width: 8px; height: 8px; border-radius: 2px; background: var(--bk); }
.xp-pct__lbl span:last-child i { background: #F5A524; }
.xp-pct input { width: 100%; height: 8px; margin: 10px 0 4px; border-radius: 99px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: linear-gradient(90deg, var(--bk) 0 var(--p), #F5A524 var(--p) 100%); }
.xp-pct input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--bk); box-shadow: 0 2px 6px rgba(10,37,64,.3); }
.xp-pct input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--bk); }
@media (max-width: 620px) {
  .xp-cards--4, .xp-mycards { grid-template-columns: 1fr 1fr; }
  .xp-enr { grid-template-columns: 1fr; }
  .xp-enr__vis { min-height: 90px; }
  .xp-enr__card { width: 34%; }
  .xp-enr__txt ol { display: none; }
}
@media (max-width: 620px) {
  .xp .xp-mac__screen { height: 760px; }
  .xp-enr__vis { display: none; }
  .xp .xp-mycards { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .xp-mycard { padding: 4px; }
  .xp-mycard span { display: none; }
}
/* v84: the 20% larger hero phone keeps a margin on narrow phones (phone and terminal move together, so the tilt still lands) */
@media (min-width: 400px) and (max-width: 480px) { .phone-stage { --ph-x: -77px; --pos-x: 92px; } }
@media (max-width: 399px) { .phone-stage { --ph-scale: 0.31; --ph-x: -92px; --pos-x: 74px; } }

/* v84: side by side, the phone and laptop take the height the screen has, so the whole setup fits without scrolling
   (--dz is set from the window height in site.js: 0.68 to 1.2 of the 300x620 phone) */
@media (min-width: 1181px) {
  .xp { --dz: 1.2; }
  .xp .xp-phone { zoom: var(--dz); }
  .xp__devices { grid-template-columns: calc(300px * var(--dz)) minmax(0, 1fr); }
  .xp__pick { display: grid; grid-template-columns: calc(300px * var(--dz)) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); }
  .xp .xp-mac { height: calc(620px * var(--dz)); }
  .xp .xp-mac__lid { flex: 1; }
}
/* v84: the customer's cards as a compact row: a small card, its name and number */
@media (min-width: 621px) {
  .xp-mycard { flex-direction: row; align-items: center; gap: 8px; padding: 6px 8px; }
  .xp-mycard .xp-cc-img { width: 56px; flex: none; border-radius: 4px; }
  .xp-mycard b { font-size: 11.5px; }
}
.xp-cards--4 .xp-pick { padding: 8px; }

/* v85: a tap inside the hero phone explains that part; "Back" at the top right of each detail screen */
.ph-vhead .ph-vback--txt { width: auto; height: 26px; margin-left: auto; padding: 0 10px; border-radius: 99px; background: rgba(10,37,64,.06); font: 600 .78rem/1 var(--font-body); color: var(--brand-deep); }
.ph-vhead .ph-vback--txt:hover { background: rgba(10,37,64,.12); }
.ph-info .ph-vcard { margin-top: 6px; }
.ph-info__p { margin: 0 0 10px; font-size: .92rem; line-height: 1.45; color: #3C475B; }
.ph-info .ph-vfoot b { color: var(--brand-deep); }
.phone__screen { cursor: pointer; }
/* v86: Apple Pay and Google Pay marks on white for the device switch; Safari on the MacBook, Chrome on the Lenovo */
.xp__os button { height: 44px; padding: 0 16px; border: 1.5px solid #E1E5EB; background: #fff; opacity: .55; }
.xp__os button:hover { opacity: .85; }
.xp__os button[aria-checked="true"] { opacity: 1; border-color: #fff; }
.xp-lg { display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.xp-lg b { font: 500 21px/1 -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em; }
.xp-lg--apple { color: #000; }
.xp-lg__apple { width: 17px; height: 20px; fill: #000; margin-top: -3px; }
.xp-lg--google { gap: 5px; }
.xp-lg--google b { font-family: "Google Sans", "Product Sans", Arial, sans-serif; font-weight: 400; color: #5F6368; }
.xp-lg__g { width: 19px; height: 19px; }
/* Safari (MacBook): one toolbar row, the address in the middle */
.xp-sf { display: none; }
.xp[data-os="apple"] .xp-br__top { align-items: center; height: 38px; padding: 0 12px; gap: 14px; background: #F4F4F6; border-bottom: 1px solid #DCDDE1; }
.xp[data-os="apple"] :is(.xp-br__tab, .xp-br__url) { display: none; }
.xp[data-os="apple"] .xp-sf { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.xp-sf svg { width: 15px; height: 15px; fill: none; stroke: #6E6E73; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.xp-sf__nav { display: flex; gap: 10px; }
.xp-sf__url { flex: 1; max-width: 360px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 5px; height: 26px; border-radius: 8px; background: #E6E6EA; font: 400 12px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; color: #1D1D1F; overflow: hidden; white-space: nowrap; }
.xp-sf__url svg { width: 10px; height: 10px; stroke-width: 2.4; }
.xp-sf__end { display: flex; gap: 14px; }
/* Chrome (Lenovo on Windows): tab strip, then back/forward/reload, the omnibox, star, profile and menu */
.xp-br__end { display: none; }
.xp[data-os="google"] .xp-br__top { background: #DEE1E6; }
.xp[data-os="google"] .xp-br__url span[data-url] { background: #F1F3F4; }
.xp[data-os="google"] .xp-br__end { display: flex; align-items: center; gap: 10px; flex: none; }
.xp-br__end svg { width: 14px; height: 14px; fill: none; stroke: #5F6368; stroke-width: 1.4; stroke-linejoin: round; }
.xp-br__end .xp-br__menu { fill: #5F6368; stroke: none; }
.xp-br__me { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bk); color: #fff; font: 600 10px/1 Arial, sans-serif; font-style: normal; }
.xp-task__chrome { display: block; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, #1A73E8 0 27%, #fff 28% 37%, transparent 38%), conic-gradient(from -30deg, #EA4335 0 120deg, #34A853 120deg 240deg, #FBBC04 240deg 360deg); }
@media (max-width: 620px) { .xp-sf__end, .xp-sf > svg:first-child { display: none; } .xp[data-os="google"] .xp-br__end svg:first-child { display: none; } }
/* v87: the issuer's logo on the lock screen in its own colours, on a white badge, as above the laptop */
.xp-lock__pill { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }
.xp-lock__brand .xp-lock__pill img { filter: none; height: 20px !important; }
.xp-lock__brand .xp-lock__pill span { color: #1B1F3B; font-size: 17px; }
.xp[data-issuer="max"] .xp-lock__pill img { height: 16px !important; }
/* v87: a larger Back in the homepage phone's detail screens */
.ph-vhead .ph-vback { width: 34px; height: 34px; }
.ph-vhead .ph-vback svg { width: 11px; height: 18px; }
.ph-vhead .ph-vback--txt { width: auto; height: 34px; padding: 0 16px; font-size: 1rem; font-weight: 700; background: rgba(10,37,64,.08); }
/* v87: with the 30% larger phone, shorter wallet links keep the wallet cards clear of the headline column */
@media (min-width: 1500px) { .phone-stage { --wl-x: -351px; --wl-conn: 50px; } }
@media (min-width: 1400px) and (max-width: 1499px) { .phone-stage { --wl-x: -350px; --wl-conn: 53px; } }
@media (min-width: 1300px) and (max-width: 1399px) { .phone-stage { --wl-x: -352px; --wl-conn: 69px; } }

/* v88: the lock-screen logo without a background: Isracard's mark keeps its colours, the wordmarks turn white */
.xp .xp-lock__pill { padding: 0; background: none; box-shadow: none; }
.xp .xp-lock__brand .xp-lock__pill span { color: #fff; }
.xp[data-issuer="max"] .xp-lock__brand .xp-lock__pill img, .xp[data-issuer="cal"] .xp-lock__brand .xp-lock__pill img { filter: brightness(0) invert(1); }
.xp[data-issuer="isracard"] .xp-lock__brand .xp-lock__pill img { filter: drop-shadow(0 0 1.5px rgba(255,255,255,.9)); }
/* v88: from 1081 to 1199px the hero stacks (copy above, illustration below), as below 1080, so the phone
   can take the larger size of the 860-1080 layout instead of squeezing beside the copy */
@media (min-width: 1081px) and (max-width: 1199px) {
  .hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .hero-inner:has(.hero-wallets) > :first-child,
  .hero-inner:has(.hero-wallets) > .phone-stage, .hero-wallets { grid-column: 1; grid-row: auto; }
  .hero-wallets__k { padding-left: 0; }
  .phone-stage { --ph-scale: 0.644; --ph-x: -66px; --ph-y: 0px; --pos-x: 202px; --pos-y: -85px; --pos-w: 197px; --tilt-x: 197px; --tilt-y: 40px; --tilt-r: 34.2deg; --nav-x: 98px; --wl-x: -402px; --wl-w: 112px; --wl-h: 70px; --wl-pitch: 94px; --wl-conn: 126px; --pt-x: 99px; --shop-w: 189px; --shop-y: -144px; --gap: 40px; min-height: calc(577px + var(--nav-h)); }
}

/* v90: the enrol panel shows just the chosen card; the cards row picks it; the card side of the slider notes the backup */
.xp .xp-enr__vis { background: none; display: grid; place-items: center; padding: 14px; }
.xp .xp-enr__card { position: static; width: 88%; translate: none; rotate: -4deg; }
button.xp-mycard { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.xp-mycard.is-cur { border-color: var(--bk); box-shadow: 0 0 0 1px var(--bk); }
.xp-pct__lbl small { font-size: 10.5px; color: #8792A2; margin-left: 2px; }

/* v91: the detail title takes the room left between the arrow and Back, and never pushes Back off the screen */
.ph-vhead > .ph-vtitle { flex: 1; min-width: 0; font-size: 1rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ph-vhead > .ph-vback--txt { flex: none; }
/* v91: "Coming soon" and the strip tuck in close under the Interactive Demo button; side by side the whole
   illustration also sits a little higher, so the strip is in view on a laptop screen */
.hero-wallets__k.is-placed { margin-bottom: 8px; }
@media (min-width: 1200px) { .hero-inner > .phone-stage { margin-top: -22px; } }

/* v92: the review reads left to right; the browser's back / forward buttons work */
.xp-dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); justify-content: start; }
.xp-dl dd { text-align: left; }
.xp-navb { display: grid; place-items: center; padding: 3px; margin: -3px; border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer; }
.xp-navb:hover:not(:disabled) { background: rgba(0,0,0,.07); }
.xp-navb:disabled { opacity: .35; cursor: default; }
.xp-dl dd.xp-icons { justify-content: flex-start; }

/* v93: modern action tiles in the issuer's app: a solid brand square, a white line icon */
.xp .xp-acts { gap: 8px; }
.xp .xp-acts button { gap: 6px; padding: 10px 2px 9px; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px -12px rgba(10,37,64,.55); font: 600 11px/1 var(--font-body); }
.xp .xp-acts i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: linear-gradient(145deg, var(--bk-2), var(--bk)); color: #fff; box-shadow: 0 6px 12px -6px var(--bk); }
.xp .xp-acts svg { width: 21px; height: 21px; padding: 0; border-radius: 0; background: none; color: #fff; }
.xp .xp-acts button:hover i { filter: brightness(1.08); }
/* v93: the issuer's logo in its app header without a background (Isracard's mark in colour, wordmarks in white) */
.xp .xp-app__top .xp-bank { padding: 0; background: none; box-shadow: none; }
.xp .xp-app__top .xp-bank span { color: #fff; }
.xp[data-issuer="max"] .xp-app__top .xp-bank img, .xp[data-issuer="cal"] .xp-app__top .xp-bank img { filter: brightness(0) invert(1); }
.xp[data-issuer="isracard"] .xp-app__top .xp-bank img { filter: drop-shadow(0 0 1.5px rgba(255,255,255,.9)); }
/* v93: the finished activation */
.xp-done--big { justify-content: center; min-height: 100%; gap: 14px; padding: 40px 20px; }
.xp-done--big h3 { font-size: 26px; }
.xp-done--big p { max-width: 420px; font-size: 15px; line-height: 1.5; }
.xp-done--big .xp-btn { margin-top: 6px; }

/* v94: the roadmap strip sits higher: the illustration moves up a little more, the label and strip tuck in closer */
@media (min-width: 1200px) { .hero-inner > .phone-stage { margin-top: -42px; } }
.hero-wallets__k.is-placed { margin-bottom: 4px; }
/* the Interactive Demo button stays visible, so "Coming soon" never floats under an empty gap */
.phx-hint { opacity: 1; }

/* v95: three actions in the issuer's app */
.xp .xp-acts { grid-template-columns: repeat(3, 1fr); }
.xp-dl dt { white-space: nowrap; }
.xp-dl div { grid-template-columns: 150px minmax(0, 1fr); }

/* v98: the review: a "Rules" heading, each rule indented under it */
.xp-dl .xp-dl__h dt { color: #0A2540; font-weight: 700; }
.xp-dl .xp-dl__h { padding-bottom: 4px; }
.xp-dl .xp-dl__sub { grid-template-columns: 150px minmax(0, 1fr); padding-left: 18px; position: relative; }
.xp-dl .xp-dl__sub + .xp-dl__sub, .xp-dl .xp-dl__h + .xp-dl__sub { border-top: 1px dashed #EEF1F5; }
.xp-dl .xp-dl__sub::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--bk-line); }
.xp-dl .xp-dl__sub dt { font-size: .95em; }

/* v100: the wallets in order: a number on each chosen wallet, a grip to drag it */
.xp-wlw { position: relative; min-width: 0; }
.xp-wlw.is-ranked .xp-wl { padding-left: 34px; }
.xp-wlw .xp-drag--wl { position: absolute; left: 6px; top: 50%; translate: 0 -50%; z-index: 2; width: 22px; height: 30px; }
.xp-wlw .xp-drag--wl:disabled { opacity: .4; cursor: default; }
.xp-rank { position: absolute; left: -7px; top: -7px; z-index: 3; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bk); color: #fff; font: 700 11px/1 var(--font-body); box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.xp-wlw.is-dragging { z-index: 4; }
.xp-wlw.is-dragging .xp-wl { box-shadow: 0 12px 24px -12px rgba(10,37,64,.45); transform: scale(1.02); }

/* v101: dragging: the whole numbered tile (or rules row) is the handle; it rides above the others while held */
.xp-wlw.is-ranked, .xp-order li { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.xp-wlw.is-ranked .xp-wl--pick { cursor: grab; }
.xp.is-dragging-any, .xp.is-dragging-any * { cursor: grabbing !important; }
.xp .is-dragging { position: relative; z-index: 10; transition: none !important; }
.xp .is-dragging .xp-wl, .xp .xp-order li.is-dragging { box-shadow: 0 18px 32px -14px rgba(10,37,64,.55); }
.xp .xp-wlw.is-dragging .xp-wl { transform: none; }

/* v102: connect wallets: the chosen ones in order on the left, the list to add from on the right (as on the home page) */
.xp-wcols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.xp-wcols .xp-sub { margin: 0 0 8px; }
.xp-wallets--list { grid-template-columns: 1fr; gap: 9px; padding-left: 6px; }
.xp-wl--chosen { border-color: var(--bk-line); background: var(--bk-soft); }
.xp-wl__rm { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: #FDECEC; color: #C62828; font: 700 16px/1 var(--font-body); cursor: pointer; }
.xp-wl__rm:hover { background: #E5484D; color: #fff; }
.xp-wempty { display: grid; place-items: center; min-height: 120px; padding: 16px; border: 1.5px dashed #D5DCE6; border-radius: 14px; color: #8792A2; font-size: 12.5px; text-align: center; }
.xp-wadd { position: relative; }
.xp .xp-wadd__btn { height: 44px; border-radius: 14px; border-color: var(--bk-line); color: var(--bk); font-size: 13px; }
.xp .xp-wadd__btn span { background: var(--bk); }
.xp .xp-wadd__btn:hover, .xp .xp-wadd__btn[aria-expanded="true"] { background: var(--bk-soft); }
.xp .xp-wadd__btn:disabled { opacity: .5; cursor: default; }
.xp .xp-wmenu { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px); margin: 0; max-height: none; border-radius: 18px; padding: 6px; }
.xp .xp-wmenu button { height: 46px; border-radius: 13px; gap: 11px; }
.xp .xp-wmenu .phx-ico { width: 30px; height: 30px; border-radius: 9px; }
.xp .xp-wmenu b { font-size: 13px; }
.xp .xp-wmenu small { font-size: 11px; }
.xp .xp-wmenu em { width: 26px; height: 26px; background: var(--bk-soft); color: var(--bk); }
.xp .xp-wmenu button:hover em { background: var(--bk); color: #fff; }
.xp .xp-wmenu em.is-minus { background: #FDECEC; color: #C62828; }
.xp .xp-wmenu button:hover em.is-minus { background: #E5484D; color: #fff; }
.xp .xp-wmenu button:hover { background: var(--bk-soft); }
@media (max-width: 620px) { .xp-wcols { grid-template-columns: 1fr; } }
.xp .xp-wmenu { max-height: min(330px, 62vh); overflow-y: auto; }
.xp-wallets--list { gap: 7px; } .xp-wallets--list .xp-wl { padding-block: 5px; } .xp-wallets--list .xp-ico { width: 30px; height: 30px; }

/* v103: Add to Apple Pay / Google Pay on white, with the same marks as the device switch */
.xp .xp-btn--wpay { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; background: #fff; color: #1D1D1F; border: 1.5px solid #D9DEE6; font-weight: 600; }
.xp .xp-btn--wpay.is-main { border-color: #1D1D1F; }
.xp .xp-btn--wpay:hover:not(:disabled) { background: #F6F7F9; }
.xp-mark { display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.xp-mark b { font: 500 19px/1 -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em; color: #000; }
.xp-mark .xp-lg__apple { width: 15px; height: 18px; fill: #000; margin-top: -3px; }
.xp-mark .xp-lg__g { width: 17px; height: 17px; }
.xp-mark .xp-lg__g ~ b { font-family: "Google Sans", "Product Sans", Arial, sans-serif; font-weight: 400; color: #5F6368; }
.xp-aplbadge .xp-mark { padding: 5px 10px; border-radius: 8px; background: #fff; border: 1px solid #D9DEE6; }

/* v104: the wallet dropdown: a search box that stays on top, the list scrolls, never past the laptop screen */
.xp .xp-wmenu { display: flex; flex-direction: column; overflow: hidden; padding: 6px; }
.xp-wsearch { flex: none; display: flex; align-items: center; gap: 8px; margin: 2px 2px 6px; padding: 0 10px; height: 36px; border-radius: 11px; background: #F1F3F7; border: 1px solid transparent; }
.xp-wsearch:focus-within { border-color: var(--bk); background: #fff; }
.xp-wsearch svg { width: 14px; height: 14px; fill: none; stroke: #8792A2; stroke-width: 1.6; stroke-linecap: round; flex: none; }
.xp-wsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 13px/1 var(--font-body); color: #0A2540; }
.xp-wmenu__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 0; scrollbar-width: thin; }
.xp-wmenu__list li + li { margin-top: 2px; }
.xp-wmenu__list li[hidden] { display: none; }
.xp-wnone { padding: 14px 10px; font-size: 12.5px; color: #8792A2; text-align: center; }

/* v105: the wallet list: search on top (it stays put while the list scrolls), 30 wallets */
.phx-menu { max-height: calc(8px + 46px + 25px + 6 * 55px); }
.phx-menu__search { position: sticky; top: -8px; z-index: 1; margin: -8px -8px 2px; padding: 8px 8px 6px; background: rgba(255,255,255,.98); }
.phx-menu__search label { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 13px; background: #F1F3F7; border: 1px solid transparent; }
.phx-menu__search label:focus-within { border-color: var(--brand); background: #fff; }
.phx-menu__search svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #8792A2; stroke-width: 1.6; stroke-linecap: round; }
.phx-menu__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 .9rem/1 var(--font-body); color: #0A2540; }
.phx-menu li[hidden] { display: none; }
.phx-menu__none { padding: 14px 10px; font-size: .82rem; color: #8792A2; text-align: center; }

/* v106: the chosen wallets as a ranked list, styled like the AI priorities */
.xp-wprio { padding: 0; }
.xp-wprio li { cursor: grab; }
.xp-wprio .xp-wico { background: none; width: 30px; height: 30px; }
.xp-wprio .xp-wico .xp-ico { width: 30px; height: 30px; border-radius: 9px; }
.xp-wprio li.is-on { border-color: rgba(52,199,89,.45); background: #F4FBF6; }
.xp-wprio li.is-on small { color: #1F8A4C; font-weight: 600; }
.xp-wprio .xp-wl__rm { margin-left: 2px; width: 24px; height: 24px; font-size: 15px; }
.xp-wprio li.is-dragging { box-shadow: 0 18px 32px -14px rgba(10,37,64,.55); }

/* v108: an x to close the wallet lists */
.phx-menu__search { display: flex; align-items: center; gap: 6px; }
.phx-menu__search label { flex: 1; min-width: 0; }
.phx-menu__x, .xp-wsearch__x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #F1F3F7; color: #56627A; cursor: pointer; }
.phx-menu__x svg, .xp-wsearch__x svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.phx-menu__x:hover, .xp-wsearch__x:hover { background: #E5E9F0; color: #0A2540; }
.xp-wsearch__x { width: 24px; height: 24px; margin-right: -4px; background: none; }
/* v108: the demo opens on the film: a short heading, the film sized to the window */
.dm-hero--film { padding-block: clamp(84px, 8vw, 104px) 0; }
.dm-hero--film .fut-title { margin-bottom: 8px; }
.dm-hero--film .fut-lede { margin-bottom: 0; }
.dm-hero--film .btn-row { margin-top: 14px !important; }
.dm-hero--film .dm-film { margin-top: 18px; }
/* v108b: a compact heading, so the film gets the height */
.dm-hero--film { padding-block: 22px 0; }
.dm-hero--film .breadcrumb { display: none; }
.dm-hero--film .fut-title { font-size: clamp(1.7rem, 2.6vw, 2.35rem); margin: 0 0 6px; }
.dm-hero--film .fut-lede { font-size: .98rem; max-width: 720px; margin-inline: auto; }
.dm-hero--film .btn-row { margin-top: 12px !important; }
.dm-hero--film .btn--lg { padding-block: 10px; }
.dm-hero--film .dm-film { min-width: 0; margin-top: 14px; }
.dm-hero--film { padding-top: calc(var(--header-h, 73px) + 16px); }
.dm-film__frame { overflow: hidden; }

/* ==========================================================================
   30. Hebrew (assets/js/i18n.js): right to left, a Hebrew font, the EN / עב switch
   ========================================================================== */
html.he-pending body { visibility: hidden; }
html.is-he { --font-display: 'Heebo', 'Outfit', 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-body: 'Heebo', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; }
html.is-he body { font-family: var(--font-body); }
.lang-switch { display: inline-grid; place-items: center; min-width: 38px; height: 32px; margin-inline: 8px 4px; padding: 0 10px; border-radius: 99px;
  border: 1px solid var(--border, #E4E8EE); background: #fff; font: 600 .82rem/1 var(--font-body); color: var(--text, #0A2540); text-decoration: none; }
.lang-switch:hover { border-color: var(--brand, #1A6BFF); color: var(--brand, #1A6BFF); }
.lang-switch:lang(he) { font-family: 'Heebo', 'Arial Hebrew', Arial, sans-serif; font-size: .9rem; }
html[dir="rtl"] .hl, html[dir="rtl"] .fut-title, html[dir="rtl"] .h-display { letter-spacing: 0; }
html[dir="rtl"] .chev, html[dir="rtl"] .btn svg, html[dir="rtl"] .arrow { transform: scaleX(-1); }
html[dir="rtl"] .wordmark, html[dir="rtl"] .brand-lockup { direction: ltr; }
html[dir="rtl"] .eyebrow, html[dir="rtl"] .fut-eyebrow { letter-spacing: .06em; }
html[dir="rtl"] [dir="ltr"] { text-align: start; }
/* Hebrew hero: the illustration keeps its English side (its geometry runs to the right edge); the copy reads right to left */
html[dir="rtl"] .hero-inner { direction: ltr; }
html[dir="rtl"] .hero-inner > :not(.phone-stage):not(.hero-wallets) { direction: rtl; text-align: right; }
@media (min-width: 1200px) { html[dir="rtl"] .hero-inner > .phone-stage { margin-top: 66px; } }
html[dir="rtl"] .hero-inner > :first-child { padding-right: 34px; }   /* the In store / Online selector clears the Hebrew menu */
html[dir="rtl"] svg { direction: ltr; }   /* diagram text keeps its anchors; Hebrew runs still read right to left */
.lang-switch { display: inline-flex; gap: 7px; align-items: center; padding: 0 12px 0 9px; }
.lang-flag { width: 22px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(10,37,64,.15); flex: none; overflow: hidden; }

/* v110: the wallet search is a bar of its own under "Add wallet"; the list opens under it */
.xp-wadd > .xp-wsearch { margin: 8px 0 0; height: 40px; background: #fff; border: 1px solid #D9DEE6; border-radius: 12px; }
.xp-wadd > .xp-wsearch:focus-within { border-color: var(--bk); box-shadow: 0 0 0 3px var(--bk-soft); }
.xp .xp-wsearch input { flex: 1 1 auto; width: 100%; min-width: 0; font-size: 13.5px; }
.xp .xp-wsearch .xp-wsearch__x { flex: 0 0 24px; width: 24px; height: 24px; margin: 0 -4px 0 0; padding: 0; border-radius: 50%; }
.xp .xp-wmenu { top: calc(100% + 6px); padding: 6px; }
.xp-wsearch input::-webkit-search-cancel-button, .phx-menu__search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
/* v111: In store / Online sits under the terminal's table (the table ends 127% of the terminal's width below its top,
   centred at 59% of its width); it keeps a margin from the page edge on narrow screens */
.phone-stage .scene-nav {
  left: min(calc(50% + var(--pos-x) + var(--pos-w) * .59), calc(100% - 150px));
  top: calc(50% + var(--nav-h) / 2 + var(--pos-y) + var(--pos-w) * 1.27 + 14px);
}
html[dir="rtl"] .hero-inner > .phone-stage { margin-top: 0; }
@media (min-width: 1200px) { html[dir="rtl"] .hero-inner > .phone-stage { margin-top: -42px; } }
@media (max-width: 480px) {   /* phones: the table ends above the phone's bottom, so the selector goes under Interactive Demo */
  .phone-stage .scene-nav { left: 50%; top: calc(50% + var(--nav-h) / 2 + var(--ph-y) + 396px * var(--ph-scale) + 788px * var(--ph-scale) * .084 + 36px); }
}
@media (min-width: 481px) {   /* aligned to the table's right edge (125% of the terminal's width), clear of the phone */
  .phone-stage .scene-nav { left: min(calc(50% + var(--pos-x) + var(--pos-w) * 1.25), calc(100% - 12px)); transform: translateX(-100%); }
}
@media (min-width: 481px) {
  .phone-stage .scene-nav { left: min(calc(50% + var(--pos-x) + var(--pos-w) * 1.25 + 40px), calc(100% + 40px)); gap: 8px; }
}

/* ==========================================================================
   31. The agentic demo (agentic-demo.html): the accept² app for shoppers and merchants
   ========================================================================== */
.xp.agx[data-issuer] { --bk: #1A6BFF; --bk-dark: #1257D6; --bk-2: #6B5CF6; --bk-soft: #EEF3FF; --bk-line: rgba(26,107,255,.4);
  --lock: linear-gradient(165deg, #0B1B4D 0%, #1A6BFF 50%, #8B5CF6 88%, #E8505B 130%); }
.xp.agx[data-issuer="isracard"] .agx-iss { --bk: #3028F8; --bk-dark: #2219C9; --bk-soft: #EFEFFE; }
.xp.agx[data-issuer="max"] .agx-iss { --bk: #111; --bk-dark: #000; --bk-soft: #F2F2F2; }
.xp.agx[data-issuer="cal"] .agx-iss { --bk: #1858B0; --bk-dark: #124690; --bk-soft: #EAF1FB; }
.agx-sec { padding-top: clamp(92px, 9vw, 112px); }
.agx-sec .fut-head { margin-bottom: 18px; }
.agx-sec .fut-title { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.agx-tracks { display: flex; justify-content: center; gap: 10px; margin: 0 auto 18px; flex-wrap: wrap; }
.agx-tracks button { display: flex; flex-direction: column; gap: 3px; min-width: 240px; padding: 12px 18px; border-radius: 14px; border: 1.5px solid var(--border); background: #fff; text-align: start; cursor: pointer; font: inherit; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.agx-tracks button b { font: 600 1rem/1.2 var(--font-display); }
.agx-tracks button span { font-size: .8rem; color: var(--muted); }
.agx-tracks button[aria-selected="true"] { border-color: #1A6BFF; box-shadow: 0 0 0 3px rgba(26,107,255,.14); }
.xp__sound { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--border); background: #fff; font: 600 .84rem/1 var(--font-body); color: var(--text); cursor: pointer; }
.xp__sound[aria-pressed="true"] { background: #1A6BFF; border-color: #1A6BFF; color: #fff; }
.agx .xp__bar { justify-content: flex-start; }
.agx[data-track="merchant"] [data-picker="issuer"] { display: none; }

/* the app */
.agx-top { display: flex; align-items: center; gap: 14px; padding: 9px 18px; background: #fff; border-bottom: 1px solid #E4E8EE; }
.agx-top nav { display: flex; gap: 2px; margin-inline-start: auto; }
.agx-top nav button { padding: 6px 11px; border: 0; border-radius: 8px; background: none; font: 600 12px/1 var(--font-body); color: #56627A; cursor: pointer; }
.agx-top nav button[aria-current="page"] { background: var(--bk-soft); color: var(--bk); }
.agx-top__tag { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: #0A2540; color: #fff; }
.agx-top__me { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #1A6BFF, #8B5CF6); color: #fff; font: 600 11px/1 var(--font-body); font-style: normal; }
.agx-a2 { display: inline-flex; align-items: center; gap: 5px; font: 700 14px/1 var(--font-display); color: #0A2540; letter-spacing: -.01em; }
.agx-a2 img { width: 18px; height: 18px; }
.agx-a2 sup { font-size: .6em; }
.agx-body { display: flex; flex-direction: column; gap: 9px; padding: 14px 20px 16px; }
.agx-p { margin: 0; font-size: 12px; line-height: 1.45; color: #56627A; }
.agx-fine { margin: 2px 0 0; font-size: 10.5px; color: #8792A2; text-align: center; }
.agx-kicker { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bk); }
.agx-hero-card { width: min(380px, 100%); margin: 6px auto 0; display: flex; flex-direction: column; gap: 9px; padding: 18px 22px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -26px rgba(10,37,64,.45); }
.agx-hero-card h3 { margin: 0; font: 600 18px/1.2 var(--font-display); }
.agx-field { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: #56627A; }
.agx-field input { padding: 8px 11px; border-radius: 9px; border: 1px solid #D5DCE6; font: 500 13px/1.2 var(--font-body); color: #3C475B; background: #F6F8FA; }
.xp-btn--block { width: 100%; }
.agx-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #0E9F6E; }
.agx-ok svg { width: 14px; height: 14px; }
.agx-cardrow { display: flex; align-items: center; gap: 18px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid #E4E8EE; }
.agx-cardrow .xp-cc-img { width: 190px; flex: none; border-radius: 10px; }
.agx-cardrow > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.agx-cardrow b { font-size: 14px; }
.agx-list { display: flex; flex-direction: column; border-radius: 12px; background: #fff; border: 1px solid #E4E8EE; }
.agx-li { display: flex; align-items: center; gap: 11px; padding: 9px 14px; cursor: pointer; }
.agx-li + .agx-li { border-top: 1px solid #EEF1F5; }
.agx-li > em { font-style: normal; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bk-soft); color: var(--bk); font-size: 11px; font-weight: 700; }
.agx-li > span, .agx-acard > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.agx-li small, .agx-acard small { font-size: 11px; color: #8792A2; }
.agx-wico { width: 28px; height: 28px; border-radius: 8px; }
.agx input[type="checkbox"]:not(.xp-switch input) { position: absolute; opacity: 0; pointer-events: none; }
.agx input:checked + .xp-tick { border-color: var(--bk); background: var(--bk); color: #fff; }
.agx .xp-tick svg { width: 13px; height: 13px; }
.agx-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 0; }
.agx-chip { padding: 6px 11px; border-radius: 99px; border: 1px solid #D5DCE6; background: #fff; font: 600 11.5px/1 var(--font-body); color: #3C475B; cursor: pointer; }
.agx-chip[aria-pressed="true"] { border-color: var(--bk); background: var(--bk); color: #fff; }
.agx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.agx-cols .xp-sub { margin-top: 8px; }
.agx-agrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.agx-acard { position: relative; display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 12px; background: #fff; border: 1px solid #E4E8EE; cursor: default; }
label.agx-acard { cursor: pointer; }
.agx-acard.is-on { border-color: var(--bk-line); background: #FBFCFF; }
.agx-acard .xp-btn--sm { padding: 6px 10px; font-size: 11.5px; background: var(--bk-soft); color: var(--bk); }
.agx-acard .agx-ok { font-size: 11px; }
.agx-aico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; font: 700 14px/1 var(--font-display); font-style: normal; }
.agx-aico--sm { width: 22px; height: 22px; border-radius: 7px; font-size: 11px; }
.agx-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.agx-sum > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 13px; border-radius: 12px; background: #fff; border: 1px solid #E4E8EE; }
.agx-sum small { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8792A2; }
.agx-sum b { font: 600 14px/1.2 var(--font-display); }
.agx-sum span { font-size: 11px; color: #56627A; }
.agx-scs { display: flex; flex-direction: column; gap: 6px; }
.agx-sc { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 12px; border: 1px solid #E4E8EE; background: #fff; text-align: start; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
.agx-sc:not(:disabled):hover { border-color: var(--bk); transform: translateY(-1px); }
.agx-sc:disabled { cursor: default; opacity: .6; }
.agx-sc > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.agx-sc b { font-size: 12.5px; }
.agx-sc small { font-size: 11px; color: #8792A2; }
.agx-sc em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--bk); }
.agx-sc.is-done { border-color: rgba(14,159,110,.4); }
.agx-conn { display: flex; flex-wrap: wrap; gap: 6px; }
.agx-conn > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px; background: #fff; border: 1px solid #E4E8EE; font-size: 11.5px; font-weight: 600; }
.agx-conn .agx-aico { width: 20px; height: 20px; border-radius: 50%; font-size: 10px; }
.agx-code { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 10px; background: #0A2540; color: #fff; }
.agx-code small { font-size: 10.5px; color: #9FB3D1; }
.agx-code code { font: 500 12px/1.3 var(--font-mono); }
.agx-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #EAF8F2; font-size: 11.5px; line-height: 1.4; color: #1D4D3C; }
.agx-note svg { flex: none; width: 15px; height: 15px; color: #0E9F6E; margin-top: 1px; }
.agx-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #0E9F6E; }
.agx-live i { width: 8px; height: 8px; border-radius: 50%; background: #0E9F6E; animation: agx-pulse 1.4s ease-in-out infinite; }
@keyframes agx-pulse { 50% { box-shadow: 0 0 0 5px rgba(14,159,110,.18); } }
.agx-orders li.is-new { animation: agx-new 1.2s ease-out; }
@keyframes agx-new { from { background: #EAF8F2; } }
.agx-orders li > span { flex-direction: row !important; align-items: center; gap: 10px !important; }
.agx-orders li > span > span, .agx .xp-act li > span > span { display: flex; flex-direction: column; gap: 2px; }
.agx .xp-act li > span { flex-direction: row; align-items: center; gap: 10px; }
.agx .xp-act b { color: #0A2540; }
.agx-orders li > b { color: #0E9F6E !important; }

/* a purchase: the chat assistant on the laptop */
.agx-chat { height: 100%; min-height: 330px; display: flex; flex-direction: column; background: #fff; }
.agx-chat > header { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid #EEF1F5; }
.agx-chat > header small { font-size: 11px; color: #8792A2; }
.agx-msgs { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; overflow: auto; }
.agx-msg { display: flex; gap: 9px; align-items: flex-start; max-width: 86%; font-size: 12.5px; line-height: 1.45; color: #0A2540; animation: agx-in .35s cubic-bezier(.2,.9,.25,1.05) both; }
.agx-msg > div { display: flex; flex-direction: column; gap: 8px; }
.agx-msg.is-me { align-self: flex-end; padding: 8px 13px; border-radius: 16px 16px 4px 16px; background: #F1F3F6; }
@keyframes agx-in { from { opacity: 0; transform: translateY(8px); } }
.agx-typing { display: inline-flex; gap: 4px; padding: 7px 0; }
.agx-typing i { width: 6px; height: 6px; border-radius: 50%; background: #B6C0CE; animation: agx-dot 1s ease-in-out infinite; }
.agx-typing i:nth-child(2) { animation-delay: .15s; } .agx-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes agx-dot { 50% { transform: translateY(-4px); background: #56627A; } }
.agx-compose { display: flex; align-items: center; justify-content: space-between; margin: 0 16px 12px; padding: 10px 14px; border-radius: 14px; border: 1px solid #E4E8EE; font-size: 12px; color: #A0AAB8; }
.agx-compose i { width: 22px; height: 22px; border-radius: 50%; background: #0A2540; }
.agx-prod { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; border: 1px solid #E4E8EE; background: #fff; }
.agx-prod > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.agx-prod small { font-size: 10.5px; color: #8792A2; }
.agx-prod > b { font: 600 12.5px/1 var(--font-mono); }
.agx-prod__img { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #EEF3FF, #F3EDFF); color: #6B5CF6; font: 700 14px/1 var(--font-display); }
.agx-mandate { display: flex; flex-direction: column; gap: 5px; min-width: 300px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid rgba(26,107,255,.35); background: #F7FAFF; }
.agx-mandate__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid #E4E8EE; }
.agx-mandate__h > span:last-child { font-size: 11px; font-weight: 700; color: #1A6BFF; }
.agx-mrow { display: grid; grid-template-columns: 18px 88px 1fr; align-items: center; gap: 6px; font-size: 11.5px; }
.agx-mrow i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #0E9F6E; color: #fff; font-style: normal; font-size: 9px; }
.agx-mrow i svg { width: 10px; height: 10px; }
.agx-mrow span { color: #56627A; }
.agx-mrow.is-no i { background: #C62828; }
.agx-mrow.is-wait i { background: none; }
.agx-mrow.is-wait i .xp-spin { width: 12px; height: 12px; border-color: rgba(26,107,255,.25); border-top-color: #1A6BFF; }
.agx-paid { display: flex; gap: 8px; align-items: center; margin-top: 4px; padding: 8px 10px; border-radius: 9px; background: #EAF8F2; font-size: 12px; font-weight: 600; color: #0A2540; }
.agx-paid > svg { flex: none; width: 16px; height: 16px; color: #0E9F6E; }
.agx-paid span { display: flex; flex-direction: column; gap: 2px; }
.agx-paid small { font-size: 10.5px; font-weight: 500; color: #56627A; }
.agx-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.agx-tl li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid #E4E8EE; opacity: .35; }
.agx-tl li.is-on { opacity: 1; animation: agx-in .35s both; }
.agx-tl b { font-size: 12px; } .agx-tl span { font-size: 11.5px; color: #56627A; }

/* the phone */
.agx .xp-phone__screen.is-dark .agx-a2 { color: #fff; }
.agx .xp-note .agx-a2 { color: #0A2540; font-size: 12px; }
.agx .xp-note .agx-a2 img { width: 15px; height: 15px; }
.agx-noteapp { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.agx .xp-note p b { display: block; margin-bottom: 2px; }
.agx-sheet { gap: 10px; padding: 26px 18px 18px; text-align: center; background: #fff; color: #0A2540; }
.agx-sheet h4 { margin: 0; font: 600 16px/1.25 var(--font-display); }
.agx-sheet p { margin: 0; font-size: 12px; line-height: 1.45; color: #56627A; }
.agx-sheet .xp-face { margin: 4px auto; }
.agx-issuerbar { display: flex; justify-content: center; padding-bottom: 6px; }
.agx-issuerbar .xp-bank img { height: 22px; }
.agx-issuerbar .agx-a2 { font-size: 16px; }
.agx-sheet.agx-iss .xp-btn--primary { background: var(--bk); }
.agx-voice { height: 100%; margin-top: -42px; padding: 60px 14px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: #05060B; color: #fff; }
.agx-vlines { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; overflow: hidden; }
.agx-vu { margin: 0; font-size: 13.5px; line-height: 1.4; color: #fff; animation: agx-in .35s both; }
.agx-vu.is-me { color: #9FA8BA; font-size: 12.5px; }
.agx-voice .agx-prod { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #fff; }
.agx-voice .agx-prod small { color: #B7C0D0; }
.agx-vcheck { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.1); font-size: 12px; font-weight: 600; }
.agx-vcheck .agx-a2 { color: #fff; font-size: 12px; } .agx-vcheck .agx-a2 img { width: 14px; height: 14px; }
.agx-vcheck > svg { width: 14px; height: 14px; color: #34D399; }
.agx-orb { flex: none; width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(from 0deg, #FF4FD8, #7A5CFF, #2FD8FF, #FF4FD8); filter: blur(.5px); box-shadow: 0 0 26px 4px rgba(122,92,255,.55); animation: ag-spin 4s linear infinite; }
.agx-orb.is-talk { animation: ag-spin 1.6s linear infinite, agx-talk .6s ease-in-out infinite; }
@keyframes agx-talk { 50% { transform: scale(1.14); } }
.agx-voice--alexa .agx-orb { width: 150px; height: 10px; border-radius: 99px; background: linear-gradient(90deg, #00A8E1, #7FDBFF, #00A8E1); box-shadow: 0 0 20px 3px rgba(0,168,225,.6); animation: none; }
.agx-voice--alexa .agx-orb.is-talk { animation: agx-talk .6s ease-in-out infinite; }
.agx-voice > small { font-size: 11px; color: #8792A2; }
.xp[data-os="google"] .agx-voice { margin-top: -34px; }

/* below the demo */
.agx-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.agx-how > div { padding: 22px 24px; border-radius: 18px; background: var(--surface, #fff); border: 1px solid var(--border); }
.agx-how h3 { margin: 0 0 10px; font: 600 1.15rem/1.2 var(--font-display); }
.agx-how ul { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: .92rem; line-height: 1.45; }
@media (max-width: 900px) {
  .agx-how { grid-template-columns: 1fr; }
  .agx-cols { grid-template-columns: 1fr; gap: 4px; }
  .agx-agrid { grid-template-columns: repeat(2, 1fr); }
  .agx-tracks button { min-width: 0; flex: 1 1 200px; }
}
.agx-top__sp { margin-inline-start: auto; }
.agx .xp-act li > span b { font: 600 12.5px/1.3 var(--font-body); }
.agx-disc { font-size: 11.5px; color: #C62828 !important; }
.agx-prod > span b { font-size: 12.5px; line-height: 1.3; }
.agx-voice .agx-prod > span b { font-size: 12px; }
.agx-voice--gemini .agx-orb { background: conic-gradient(from 0deg, #4285F4, #9B72CB, #D96570, #4285F4); box-shadow: 0 0 26px 4px rgba(66,133,244,.5); }
@media (max-width: 1180px) { .agx .xp__devices { grid-template-columns: minmax(0, 1fr); } .agx .xp-mac { width: 100%; } }
@media (max-width: 620px) {
  .agx-body { padding: 10px 12px 12px; }
  .agx-agrid { grid-template-columns: 1fr; }
  .agx-sum { grid-template-columns: 1fr 1fr; }
  .agx-cardrow { flex-direction: column; align-items: flex-start; }
  .agx-mandate { min-width: 0; }
  .agx-top { gap: 8px; padding: 8px 10px; }
  .agx-top nav button { padding: 5px 6px; font-size: 11px; }
  .agx .xp-wz li { font-size: 0; gap: 0; }
}
/* Hebrew inside the (left-to-right) devices: each line takes its own direction, so punctuation lands right */
.is-he .xp.agx :is(.xp__devices, .agtx__dev) :is(p, h3, h4, small, b, em, .agx-msg > div, .agx-msg.is-me, .agx-sc > span, .agx-li > span, .agx-acard > span, .xp-note__app ~ p) { direction: rtl; unicode-bidi: isolate; }
.is-he .agtx__dev :is(.agtx-f, .agtx-log li, .agtx-cartt div, .agtx-opt, .agtx-sheetrows, .agtx-act > div:first-child) { direction: rtl; }
.is-he .xp.agx .xp__devices .agx-mrow { direction: rtl; }

/* ==========================================================================
   32. Agentic demo: explainer, one purchase both sides, comparison
   ========================================================================== */
.agx-herobtns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 22px; }
.agx-part, .agtx__tabs em { font-style: normal; }
.agx-part { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 12px; font: 600 1.05rem/1.3 var(--font-display); color: var(--text); }
.agx-part em, .agtx__tabs em { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #1A6BFF, #8B5CF6); color: #fff; font: 700 13px/1 var(--font-display); }

/* the explainer */
.agx-dlg { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 30px 32px 26px; border: 0; border-radius: 22px; background: #fff; color: var(--text); box-shadow: 0 40px 90px -30px rgba(10,37,64,.55); overflow: auto; }
.agx-dlg::backdrop { background: rgba(10,20,40,.55); backdrop-filter: blur(3px); }
.agx-dlg h2 { margin: 4px 0 8px; font: 700 clamp(1.5rem, 3vw, 2rem)/1.15 var(--font-display); }
.agx-dlg__x { position: absolute; top: 14px; inset-inline-end: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 14px; }
.agx-dlg__lede { margin: 0 0 16px; color: var(--muted); line-height: 1.55; }
.agx-dlg__parts { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: p; display: flex; flex-direction: column; gap: 10px; }
.agx-dlg__parts li { counter-increment: p; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; }
.agx-dlg__parts li::before { content: counter(p); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #EEF3FF; color: #1A6BFF; font: 700 13px/1 var(--font-display); }
.agx-dlg__parts b { font: 600 1rem/1.3 var(--font-display); }
.agx-dlg__parts span { font-size: .9rem; line-height: 1.5; color: var(--muted); }
.agx-dlg__who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.agx-dlg__who div { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border-radius: 12px; background: #F5F7FD; }
.agx-dlg__who b { font-size: .9rem; } .agx-dlg__who span { font-size: .78rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 700px) { .agx-dlg { padding: 24px 18px 20px; } .agx-dlg__who { grid-template-columns: 1fr 1fr; } }

/* one purchase, both sides */
.agx-txsec { background: linear-gradient(180deg, #fff, #F5F7FD); }
.agtx__tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.agtx__tabs button { display: flex; align-items: center; gap: 11px; min-width: 260px; padding: 12px 18px; border-radius: 14px; border: 1.5px solid var(--border); background: #fff; font: inherit; color: var(--text); text-align: start; cursor: pointer; }
.agtx__tabs button span { display: flex; flex-direction: column; gap: 2px; }
.agtx__tabs button b { font: 600 1rem/1.2 var(--font-display); } .agtx__tabs button small { font-size: .78rem; color: var(--muted); }
.agtx__tabs button[aria-selected="true"] { border-color: #1A6BFF; box-shadow: 0 0 0 3px rgba(26,107,255,.14); }
.agtx__bar { margin-bottom: 14px; }
.agtx[data-view="merchant"] .agtx__bar .xp__os { display: none; }
.agtx__stage { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; }
.agtx[data-view="shopper"] .agtx__stage { grid-template-columns: minmax(280px, 460px) 330px; justify-content: center; }
.agtx__side { display: flex; flex-direction: column; gap: 12px; }
.agtx__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.agtx__steps button { width: 100%; display: flex; align-items: flex-start; gap: 11px; padding: 8px 12px; border: 1px solid transparent; border-radius: 12px; background: none; font: inherit; color: var(--muted); text-align: start; cursor: pointer; }
.agtx__steps em { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #C9D1DC; font: 700 11.5px/1 var(--font-display); font-style: normal; }
.agtx__steps span { display: flex; flex-direction: column; gap: 4px; padding-top: 3px; }
.agtx__steps b { font: 600 .95rem/1.2 var(--font-display); }
.agtx__steps small { font-size: .88rem; line-height: 1.5; color: var(--text); animation: agx-in .35s both; }
.agtx__steps .is-done em { border-color: #0E9F6E; background: #0E9F6E; color: #fff; }
.agtx__steps .is-on button { background: #fff; border-color: rgba(26,107,255,.35); box-shadow: 0 10px 26px -18px rgba(10,37,64,.5); color: var(--text); }
.agtx__steps .is-on em { border-color: #1A6BFF; background: #1A6BFF; color: #fff; }
.agtx__ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.agtx__ctl .xp-btn { padding: 10px 16px; font-size: 14px; }
.agtx__ctl .xp-btn--primary { min-width: 110px; }
.agtx__ctl .xp__sound { margin-inline-start: 0; }
.agtx__dev .xp-phone { margin: 0 auto; }
.agtx__dev .xp-mac { max-width: 860px; }
.agtx .xp-phone__screen { background: #fff; }
.agtx-chat { height: 100%; margin-top: 0; }
.agtx-chat .agx-msgs { padding: 10px 10px; gap: 8px; }
.agtx-chat .agx-msg { max-width: 94%; font-size: 11.5px; }
.agtx-chat .agx-mandate { min-width: 0; padding: 8px 9px; }
.agtx-chat .agx-mrow { grid-template-columns: 16px 64px 1fr; font-size: 10.5px; }
.agtx-chat .agx-compose { margin: 0 10px 10px; font-size: 11px; }
.agtx-chat > header { padding: 8px 12px; } .agtx-chat > header .agx-aico { width: 24px; height: 24px; font-size: 12px; }
.agtx-search { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #56627A; }
.agtx-search svg { width: 12px; height: 12px; color: #0E9F6E; } .agtx-search .agx-a2 { font-size: 11px; } .agtx-search .agx-a2 img { width: 12px; height: 12px; }
.agtx-opts { display: flex; flex-direction: column; gap: 5px; }
.agtx-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 9px; border: 1px solid #E4E8EE; background: #fff; }
.agtx-opt span { display: flex; flex-direction: column; gap: 1px; } .agtx-opt small { font-size: 9.5px; color: #8792A2; }
.agtx-opt > b { font: 600 11px/1 var(--font-mono); }
.agtx-opt.is-best { border-color: #10A37F; box-shadow: 0 0 0 2px rgba(16,163,127,.15); }
.agtx-cart { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 9px; background: #F5F7FD; font-size: 10.5px; }
.agtx-cart .agx-a2 { font-size: 11px; } .agtx-cart .agx-a2 img { width: 12px; height: 12px; }
.agtx-token { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: #0A2540; color: #fff; }
.agtx-token span { font-size: 9.5px; color: #9FB3D1; } .agtx-token b { font: 500 10.5px/1.3 var(--font-mono); }
.agtx-fund, .agtx-bal { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.agtx-fund span, .agtx-bal span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; border-radius: 99px; background: #EAF8F2; font-size: 10.5px; }
.agtx-fund .agx-wico, .agtx-bal .agx-wico { width: 18px; height: 18px; border-radius: 50%; }
.agtx-fund__card { padding-inline-start: 8px !important; background: #F1F3F6 !important; }
.agtx-bal span { background: #F5F7FD; }
.agtx-push { position: absolute; z-index: 3; top: 44px; left: 8px; right: 8px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 14px 30px -12px rgba(10,37,64,.45); animation: xp-drop .45s cubic-bezier(.2,.9,.25,1.05) both; }
.agtx-push__app { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #8792A2; }
.agtx-push__app em { font-style: normal; }
.agtx-push p { margin: 4px 0 0; font-size: 11px; line-height: 1.35; color: #3C475B; } .agtx-push p b { display: block; color: #0A2540; font-size: 12px; }
.agtx .xp-phone__body { position: relative; }
.agtx-sheetrows { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; width: 100%; padding: 8px 10px; border-radius: 10px; background: #F5F7FD; font-size: 11px; text-align: start; }
.agtx-sheetrows span { color: #8792A2; }
.agtx .xp-face.is-scan { animation: agx-talk 1s ease-in-out infinite; }
.agtx .agx-sheet .xp-face svg { width: 44px; height: 44px; }
.agtx-app { min-height: 100%; background: #F7F9FB; }
.agtx-app > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #fff; border-bottom: 1px solid #E4E8EE; }
.agtx-app > header small { font-size: 12px; font-weight: 600; color: #56627A; }
.agtx-act { display: flex; flex-direction: column; gap: 6px; padding: 12px; font-size: 11.5px; }
.agtx-act > div:first-child { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid #E4E8EE; }
.agtx-act > div:first-child > span { flex: 1; display: flex; flex-direction: column; gap: 2px; } .agtx-act small { font-size: 10px; color: #8792A2; }
.agtx-act > div:first-child > b { font: 600 12px/1 var(--font-mono); }
.agtx-act > p { margin: 6px 0 0; font-size: 10.5px; font-weight: 600; color: #56627A; }
.agtx-note { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: #EAF8F2; font-size: 10.5px; line-height: 1.4; }
.agtx-note svg { flex: none; width: 13px; height: 13px; color: #0E9F6E; }
/* the merchant's dashboard */
.agtx-dash { min-height: 100%; display: flex; flex-direction: column; background: #F7F9FB; }
.agtx-shop { font: 700 14px/1 var(--font-display); color: #0A2540; letter-spacing: -.01em; }
.agtx-pow { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #8792A2; }
.agtx-pow .agx-a2 { font-size: 12px; } .agtx-pow .agx-a2 img { width: 14px; height: 14px; }
.agtx-dash__body { flex: 1; display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; padding: 14px 16px; }
.agtx-log ol { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.agtx-log li { display: grid; grid-template-columns: 58px 1fr; gap: 8px; padding: 7px 10px; border-radius: 10px; background: #fff; border: 1px solid #E4E8EE; font-size: 11.5px; animation: agx-in .35s both; }
.agtx-log li em { font: 500 10.5px/1.4 var(--font-mono); font-style: normal; color: #8792A2; }
.agtx-log li.is-on { border-color: rgba(26,107,255,.45); box-shadow: 0 0 0 2px rgba(26,107,255,.1); }
.agtx-detail { display: flex; flex-direction: column; gap: 0; align-self: start; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #E4E8EE; animation: agx-in .35s both; }
.agtx-detail h4 { margin: 0 0 8px; font: 600 14px/1.2 var(--font-display); }
.agtx-f { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid #EEF1F5; font-size: 12px; }
.agtx-f span { color: #8792A2; } .agtx-f b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.agtx-f .agx-aico { width: 20px; height: 20px; border-radius: 6px; font-size: 10px; }
.agtx-f .agx-a2 { font-size: 12px; } .agtx-f .agx-a2 img { width: 14px; height: 14px; }
.agtx-code { margin: 0; padding: 12px 14px; border-radius: 10px; background: #0A2540; color: #D6E2F5; font: 500 11.5px/1.6 var(--font-mono); white-space: pre-wrap; }
.agtx-cartt { display: flex; flex-direction: column; margin-bottom: 6px; }
.agtx-cartt div { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid #EEF1F5; font-size: 12px; }
.agtx-cartt div b { font: 600 12px/1 var(--font-mono); } .agtx-cartt .is-tot { font-weight: 700; border-top: 1.5px solid #0A2540; }
@media (max-width: 1180px) {
  .agtx__stage, .agtx[data-view="shopper"] .agtx__stage { grid-template-columns: minmax(0, 1fr); }
  .agtx__dev { order: -1; }
}
@media (max-width: 620px) {
  .agtx__tabs button { min-width: 0; flex: 1 1 100%; }
  .agtx-dash__body { grid-template-columns: 1fr; }
  .agtx-f { grid-template-columns: 96px 1fr; }
}

/* how accept² compares */
.agx-cmp__wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--border); background: #fff; }
.agx-cmp__t { width: 100%; min-width: 980px; border-collapse: collapse; font-size: .86rem; line-height: 1.45; }
.agx-cmp__t th, .agx-cmp__t td { padding: 12px 14px; text-align: start; vertical-align: top; border-bottom: 1px solid #EEF1F5; }
.agx-cmp__t thead th { position: sticky; top: 0; background: #F5F7FD; font: 600 .78rem/1.3 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.agx-cmp__t tbody th { width: 160px; font: 600 .92rem/1.3 var(--font-display); color: var(--text); }
.agx-cmp__t td { color: var(--muted); }
.agx-cmp__t tr.is-us { background: linear-gradient(90deg, rgba(26,107,255,.08), rgba(139,92,246,.06)); }
.agx-cmp__t tr.is-us td { color: var(--text); font-weight: 500; }
.agx-cmp__t tr.is-us .agx-a2 { font-size: 1rem; } .agx-cmp__t tr.is-us .agx-a2 img { width: 20px; height: 20px; }
.agx-diff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.agx-diff > div { padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--border); }
.agx-diff em { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #1A6BFF, #8B5CF6); color: #fff; font: 700 13px/1 var(--font-display); font-style: normal; }
.agx-diff h3 { margin: 10px 0 6px; font: 600 1.05rem/1.25 var(--font-display); }
.agx-diff p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.agx-plug { margin-top: 18px; padding: 22px 26px; border-radius: 18px; background: #0A2540; color: #fff; }
.agx-plug h3 { margin: 0 0 6px; font: 600 1.1rem/1.25 var(--font-display); }
.agx-plug p { margin: 0; color: #C9D6EA; line-height: 1.55; }
.agx-src { margin-top: 16px; font-size: .85rem; color: var(--muted); }
.agx-src summary { cursor: pointer; font-weight: 600; color: var(--text); }
.agx-src ul { columns: 2; margin: 10px 0; padding-inline-start: 18px; }
.agx-src li { margin-bottom: 4px; break-inside: avoid; }
@media (max-width: 900px) { .agx-diff { grid-template-columns: 1fr; } .agx-src ul { columns: 1; } }
.agtx__dev > [hidden] { display: none !important; }
.agtx__bar .xp__pick { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; }
.agtx__bar .xp__issuer { flex-wrap: nowrap; }

/* ==========================================================================
   33. Agentic demo: Enrollment | Demo buttons, the consumer's journey
   ========================================================================== */
.agx-hero { padding-top: clamp(92px, 9vw, 112px); padding-bottom: clamp(26px, 4vw, 44px); background: linear-gradient(180deg, #F5F7FD, #fff); }
.agx-hero .fut-head { margin-bottom: 22px; }
.agx-modebtns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.agx-modebtn { display: flex; align-items: center; gap: 14px; width: min(400px, 100%); padding: 18px 22px; border-radius: 18px; border: 0; background: linear-gradient(135deg, #1A6BFF, #6B5CF6); color: #fff; text-align: start; font: inherit; cursor: pointer; box-shadow: 0 18px 40px -22px rgba(26,107,255,.8); transition: transform .15s, box-shadow .15s; }
.agx-modebtn:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -20px rgba(26,107,255,.9); }
.agx-modebtn--demo { background: #0A2540; box-shadow: 0 18px 40px -22px rgba(10,37,64,.8); }
.agx-modebtn > svg { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.16); }
.agx-modebtn span { display: flex; flex-direction: column; gap: 4px; }
.agx-modebtn b { font: 700 1.3rem/1.1 var(--font-display); }
.agx-modebtn small { font-size: .85rem; line-height: 1.4; color: rgba(255,255,255,.82); }
.agx-herolinks { display: flex; justify-content: center; gap: 6px 22px; flex-wrap: wrap; margin-top: 18px; }
.agx-textbtn { padding: 4px 0; border: 0; background: none; font: 600 .92rem/1.3 var(--font-body); color: #1A6BFF; text-decoration: underline; text-decoration-color: rgba(26,107,255,.35); text-underline-offset: 4px; cursor: pointer; }
.agx-textbtn:hover { text-decoration-color: #1A6BFF; }

/* the journey */
.agx-jny__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.agx-jny__groups span { padding: 6px 12px; border-radius: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.agx-jny__groups .is-en { background: rgba(26,107,255,.1); color: #1A6BFF; }
.agx-jny__groups .is-de { background: rgba(10,37,64,.08); color: #0A2540; }
.agx-jny__stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; position: relative; }
.agx-jny__stages button { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; border-radius: 16px; border: 1.5px solid var(--border); background: #fff; font: inherit; color: var(--text); text-align: center; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.agx-jny__stages button:hover { transform: translateY(-2px); }
.agx-jny__stages em { position: absolute; top: 8px; inset-inline-start: 10px; font: 700 .72rem/1 var(--font-mono); font-style: normal; color: var(--muted); }
.agx-jny__stages svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: #EEF3FF; color: #1A6BFF; }
.agx-jny__stages .is-demo svg { background: #EEF1F5; color: #0A2540; }
.agx-jny__stages b { font: 600 .86rem/1.25 var(--font-display); }
.agx-jny__stages button[aria-selected="true"] { border-color: #1A6BFF; box-shadow: 0 14px 30px -18px rgba(26,107,255,.7); }
.agx-jny__stages .is-demo[aria-selected="true"] { border-color: #0A2540; box-shadow: 0 14px 30px -18px rgba(10,37,64,.7); }
.agx-jny__stages button[aria-selected="true"] svg { background: #1A6BFF; color: #fff; }
.agx-jny__stages .is-demo[aria-selected="true"] svg { background: #0A2540; }
.agx-jny__panel { margin-top: 14px; padding: 22px 26px; border-radius: 20px; background: #fff; border: 1px solid var(--border); box-shadow: 0 20px 44px -34px rgba(10,37,64,.5); animation: agx-in .3s both; }
.agx-jny__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.agx-jny__head em { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #1A6BFF; color: #fff; font: 700 14px/1 var(--font-display); font-style: normal; }
.agx-jny__panel.is-demo .agx-jny__head em { background: #0A2540; }
.agx-jny__head h3 { margin: 0; font: 600 1.3rem/1.2 var(--font-display); }
.agx-jny__tag { margin-inline-start: auto; padding: 4px 10px; border-radius: 99px; background: rgba(26,107,255,.1); color: #1A6BFF; font-size: .75rem; font-weight: 700; }
.agx-jny__panel.is-demo .agx-jny__tag { background: rgba(10,37,64,.08); color: #0A2540; }
.agx-jny__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.agx-jny__cols > div { padding: 14px 16px; border-radius: 14px; background: #F5F7FD; }
.agx-jny__cols > div + div { background: #0A2540; color: #fff; }
.agx-jny__cols p { margin: 0; line-height: 1.55; }
.agx-jny__cols > div + div p:not(.agx-jny__lbl) { color: #D6E2F5; }
.agx-jny__lbl { margin-bottom: 6px !important; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1A6BFF; }
.agx-jny__cols > div + div .agx-jny__lbl { color: #8FB5FF; }

/* the switch between the two parts */
.agx-modebar { position: sticky; top: var(--nav-h, 72px); z-index: 20; padding: 10px 0; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.agx-modes { display: flex; justify-content: center; gap: 6px; width: max-content; margin: 0 auto; padding: 5px; border-radius: 16px; background: #EEF1F5; }
.agx-modes button { display: flex; align-items: center; gap: 8px; padding: 10px 26px; border: 0; border-radius: 12px; background: none; font: inherit; color: var(--muted); cursor: pointer; }
.agx-modes button svg { width: 18px; height: 18px; }
.agx-modes button b { font: 600 1rem/1 var(--font-display); }
.agx-modes button[aria-selected="true"] { background: #fff; color: #1A6BFF; box-shadow: 0 6px 16px -10px rgba(10,37,64,.5); }
.agx-modes button[data-mode-go="demo"][aria-selected="true"] { color: #0A2540; }
.agx-sec[data-mode] { padding-top: 34px; }
.agx-txsec[data-mode] { padding-top: 34px; }
[data-mode][hidden] { display: none !important; }
@media (max-width: 1100px) {
  .agx-jny__stages { grid-template-columns: repeat(4, 1fr); }
  .agx-jny__groups { display: none; }
}
@media (max-width: 620px) {
  .agx-jny__stages { grid-template-columns: repeat(2, 1fr); }
  .agx-jny__cols { grid-template-columns: 1fr; }
  .agx-jny__panel { padding: 18px 16px; }
  .agx-modebtn { padding: 14px 16px; }
  .agx-modes button { padding: 9px 18px; }
}

/* ==========================================================================
   34. Interactive demo: the shopping assistant on the pop-up iPhone (.phx--shop)
   ========================================================================== */
.agx-modebtns { max-width: 1260px; margin-inline: auto; }
.agx-modebtn { width: min(380px, 100%); }
.agx-modebtn--try { background: linear-gradient(135deg, #0E9F6E, #1A6BFF); box-shadow: 0 18px 40px -22px rgba(14,159,110,.8); }
.agx-tryit { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 26px auto 0; padding: 18px 22px; max-width: 900px; border-radius: 18px; background: #fff; border: 1px solid var(--border); text-align: center; }
.agx-tryit span { font-size: .95rem; color: var(--muted); max-width: 440px; }
.agx-tryit .btn { display: inline-flex; align-items: center; gap: 8px; }

.phx--shop .phx__screen { background: #F5F7FB; }
.phx--shop .phx__body { position: relative; padding: 0 14px 16px; }
.shp-coach { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 12px 6px; padding: 8px 11px; border-radius: 12px; background: #0A2540; color: #fff; font-size: .74rem; line-height: 1.3; animation: agx-in .3s both; }
.shp-coach em { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #34D399; color: #0A2540; font: 800 .7rem/1 var(--font-display); font-style: normal; animation: shp-pulse 1.6s ease-in-out infinite; }
@keyframes shp-pulse { 50% { box-shadow: 0 0 0 5px rgba(52,211,153,.25); } }
.shp-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.shp-logo { display: inline-flex; align-items: center; gap: 5px; font: 700 .9rem/1 var(--font-display); color: #0A2540; }
.shp-logo img { width: 18px; height: 18px; } .shp-logo sup { font-size: .6em; }
.shp-card { padding: 4px 9px; border-radius: 99px; background: #fff; box-shadow: 0 2px 8px -5px rgba(10,37,64,.4); font: 600 .68rem/1 var(--font-mono); color: #3C475B; }
.shp-h { margin: 6px 0 12px; font: 700 1.45rem/1.15 var(--font-display); letter-spacing: -.02em; color: #0A2540; }
.shp-h span { color: #1A6BFF; }
.shp-h--s { margin: 0; font-size: 1.25rem; }
.shp-search { position: relative; display: flex; align-items: center; gap: 4px; padding: 5px 5px 5px 10px; border-radius: 16px; background: #fff; border: 2px solid #1A6BFF; box-shadow: 0 10px 22px -16px rgba(26,107,255,.8); }
.shp-search__i { display: grid; color: #1A6BFF; }
.shp-search input { flex: 1; min-width: 0; padding: 8px 4px; border: 0; outline: 0; background: none; font: 500 .9rem/1.2 var(--font-body); color: #0A2540; }
.shp-search input::-webkit-search-cancel-button { display: none; }
.shp-search input.is-nudge { animation: shp-nudge .5s; }
@keyframes shp-nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.shp-mic { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #EEF3FF; color: #1A6BFF; cursor: pointer; }
.shp-mic.is-on { background: #E8505B; color: #fff; animation: shp-pulse 1s ease-in-out infinite; }
.shp-go { padding: 9px 12px; border: 0; border-radius: 12px; background: #1A6BFF; color: #fff; font: 600 .8rem/1 var(--font-body); cursor: pointer; }
.shp-lbl { margin: 16px 2px 8px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8792A2; }
.shp-sugg { display: flex; flex-direction: column; gap: 6px; }
.shp-sugg button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 3px 10px -7px rgba(10,37,64,.35); font: inherit; color: #0A2540; text-align: start; cursor: pointer; transition: transform .12s; }
.shp-sugg button:hover { transform: translateX(3px); }
.shp-sugg b { flex: 1; font-size: .86rem; font-weight: 600; }
.shp-sugg > button > svg { color: #A0AAB8; }
.shp-tile { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, #EEF3FF, #F3EDFF); color: #6B5CF6; }
.shp-tile--big { width: 52px; height: 52px; border-radius: 14px; }
.shp-chips { display: flex; gap: 6px; margin: 10px -14px 8px; padding: 0 14px; overflow-x: auto; scrollbar-width: none; }
.shp-chips::-webkit-scrollbar { display: none; }
.shp-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 99px; border: 1.5px solid #D5DCE6; background: #fff; font: 600 .74rem/1 var(--font-body); color: #3C475B; cursor: pointer; }
.shp-chip.is-on { border-color: #1A6BFF; background: #1A6BFF; color: #fff; }
.shp-chip[data-s="filters"] { border-color: #0A2540; }
.shp-chip[data-s="filters"].is-on { background: #0A2540; }
.shp-fine { margin: 14px 4px 0; font-size: .7rem; line-height: 1.4; color: #8792A2; text-align: center; }
.shp-rtop { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.shp-rtop .shp-search { flex: 1; min-width: 0; padding-inline-start: 8px; }
.shp-rtop .shp-search__i, .shp-rtop .shp-mic { display: none; }
.shp-backb { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px -4px rgba(10,37,64,.35); color: #0A2540; cursor: pointer; }
.shp-sort, .shp-seg { display: flex; padding: 3px; border-radius: 12px; background: #E6EBF2; }
.shp-sort button, .shp-seg button { flex: 1; padding: 7px 4px; border: 0; border-radius: 9px; background: none; font: 600 .72rem/1 var(--font-body); color: #56627A; cursor: pointer; }
.shp-sort button[aria-pressed="true"], .shp-seg button[aria-pressed="true"] { background: #fff; color: #0A2540; box-shadow: 0 2px 6px -2px rgba(10,37,64,.25); }
.shp-count { margin: 10px 4px 8px; font-size: .74rem; color: #56627A; }
.shp-count b { color: #0A2540; }
.shp-o { margin-bottom: 8px; padding: 11px 11px 10px; border-radius: 16px; background: #fff; box-shadow: 0 4px 14px -10px rgba(10,37,64,.4); border: 1.5px solid transparent; animation: agx-in .3s both; }
.shp-o.is-best { border-color: #0E9F6E; }
.shp-o__pick { display: flex; align-items: center; gap: 5px; margin: -2px 0 8px; font-size: .68rem; font-weight: 700; color: #0E9F6E; }
.shp-o__top { display: flex; align-items: center; gap: 10px; }
.shp-o__m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shp-o__m b { font-size: .84rem; line-height: 1.25; }
.shp-o__m small { font-size: .7rem; color: #8792A2; }
.shp-o__s { font-weight: 600; color: #3C475B; }
.shp-o__p { display: flex; flex-direction: column; align-items: flex-end; }
.shp-o__p b { font: 700 .95rem/1 var(--font-display); color: #0A2540; }
.shp-o__p small { font-size: .62rem; color: #8792A2; }
.shp-o__badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 6px; }
.shp-b { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 99px; background: #F1F3F6; font-size: .64rem; font-weight: 600; color: #56627A; }
.shp-b--tax { background: #FFF4DB; color: #9A6200; }
.shp-b--ship { background: #EAF8F2; color: #0E7C57; }
.shp-b--km { background: #EEF3FF; color: #1A6BFF; }
.shp-o__facts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .68rem; color: #56627A; }
.shp-o__facts span { display: inline-flex; align-items: center; gap: 3px; }
.shp-star { display: inline-flex; align-items: center; gap: 3px; } .shp-star svg { color: #F5A623; }
.shp-o__btns { display: flex; gap: 6px; margin-top: 9px; }
.shp-cmpbtn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: 11px; border: 1.5px solid #D5DCE6; background: #fff; font: 600 .76rem/1 var(--font-body); color: #3C475B; cursor: pointer; }
.shp-cmpbtn i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid #B6C0CE; color: #fff; }
.shp-cmpbtn.is-on { border-color: #1A6BFF; color: #1A6BFF; } .shp-cmpbtn.is-on i { border-color: #1A6BFF; background: #1A6BFF; }
.shp-buy { flex: 1; padding: 9px; border: 0; border-radius: 11px; background: #0A2540; color: #fff; font: 600 .8rem/1 var(--font-body); cursor: pointer; }
.shp-buy:hover { background: #1A6BFF; }
.shp-cbar { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px -4px 0; padding: 9px 10px 9px 14px; border-radius: 16px; background: #0A2540; color: #fff; font-size: .8rem; box-shadow: 0 10px 24px -10px rgba(10,37,64,.7); animation: agx-in .25s both; }
.shp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; border: 0; border-radius: 12px; background: #1A6BFF; color: #fff; font: 600 .8rem/1 var(--font-body); cursor: pointer; }
.shp-btn:disabled { opacity: .45; cursor: default; }
.shp-btn--ghost { background: #EEF1F5; color: #0A2540; }
.shp-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; padding: 24px 18px; border-radius: 18px; background: #fff; text-align: center; color: #8792A2; }
.shp-empty b { color: #0A2540; font-size: .95rem; }
.shp-empty span { font-size: .78rem; line-height: 1.45; }
.shp-empty .shp-btn { margin-top: 6px; }
.shp-n { position: absolute; top: 0; margin-inline-start: 18px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: #E8505B; color: #fff; font: 700 .6rem/16px var(--font-body); font-style: normal; }
.phx--shop .phx__tabs button { position: relative; }
/* compare */
.shp-ct { margin: 10px -6px 0; overflow-x: auto; }
.shp-ct table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .7rem; background: #fff; border-radius: 14px; overflow: hidden; }
.shp-ct th, .shp-ct td { padding: 7px 5px; border-bottom: 1px solid #EEF1F5; text-align: center; vertical-align: middle; }
.shp-ct tbody th { text-align: start; font-weight: 600; color: #8792A2; font-size: .66rem; white-space: nowrap; }
.shp-ct thead th { position: relative; padding-top: 10px; vertical-align: top; }
.shp-ct thead th .shp-tile { margin: 0 auto 5px; width: 32px; height: 32px; }
.shp-ct thead b { display: block; font-size: .68rem; line-height: 1.2; color: #0A2540; }
.shp-ct thead small { display: block; margin-top: 2px; font-size: .62rem; color: #8792A2; }
.shp-ct td span { color: #56627A; }
.shp-ct td.is-win { background: #EAF8F2; color: #0E7C57; font-weight: 700; }
.shp-ct td.is-win span { color: #0E7C57; }
.shp-ct__buy td, .shp-ct__buy th { border-bottom: 0; }
.shp-ct .shp-buy { width: 100%; padding: 8px 4px; }
.shp-x { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: #EEF1F5; color: #56627A; cursor: pointer; }
.shp-ct thead .shp-x { position: absolute; top: 4px; inset-inline-end: 2px; width: 20px; height: 20px; }
/* orders */
.shp-ord { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 3px 10px -7px rgba(10,37,64,.35); }
.shp-ord > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shp-ord b { font-size: .8rem; } .shp-ord small { font-size: .66rem; color: #8792A2; }
.shp-ord__pay { color: #0E7C57 !important; }
.shp-ord__r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.shp-ord__r em { font-style: normal; font-size: .62rem; font-weight: 600; color: #1A6BFF; }
/* sheets: filters and buy */
.shp-sheet { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-end; background: rgba(10,37,64,.35); animation: shp-fade .2s both; }
.shp-sheet[hidden] { display: none; }
@keyframes shp-fade { from { opacity: 0; } }
.shp-sheet__in { width: 100%; max-height: 88%; overflow-y: auto; padding: 16px 16px 26px; border-radius: 26px 26px 0 0; background: #fff; scrollbar-width: none; animation: shp-up .28s cubic-bezier(.2,.9,.25,1.05) both; }
@keyframes shp-up { from { transform: translateY(40%); } }
.shp-sheet__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.shp-sheet__h h3 { margin: 0; font: 700 1.15rem/1.2 var(--font-display); }
.shp-sheet .shp-lbl { margin-top: 14px; }
.shp-note { margin: 6px 2px 0; font-size: .68rem; line-height: 1.4; color: #8792A2; }
.shp-togs { display: flex; flex-direction: column; margin-top: 12px; border-radius: 14px; background: #F5F7FB; }
.shp-tog { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.shp-tog + .shp-tog { border-top: 1px solid #E6EBF2; }
.shp-tog__i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #fff; color: #1A6BFF; }
.shp-tog > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.shp-tog b { font-size: .8rem; } .shp-tog small { font-size: .66rem; color: #8792A2; }
.shp-tog input { position: absolute; opacity: 0; pointer-events: none; }
.shp-tog input + i { flex: none; position: relative; width: 40px; height: 24px; border-radius: 99px; background: #C9D1DC; transition: background .15s; }
.shp-tog input + i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.shp-tog input:checked + i { background: #0E9F6E; }
.shp-tog input:checked + i::after { transform: translateX(16px); }
.shp-tog input:focus-visible + i { outline: 2px solid #1A6BFF; outline-offset: 2px; }
.shp-sheet__btns { display: flex; gap: 8px; margin-top: 16px; }
.shp-sheet__btns .shp-btn { flex: 1; padding: 13px; font-size: .86rem; }
.shp-sheet__item { display: flex; align-items: center; gap: 12px; margin: 8px 0 10px; }
.shp-sheet__item > span { display: flex; flex-direction: column; gap: 3px; }
.shp-sheet__item b { font-size: .92rem; } .shp-sheet__item small { font-size: .72rem; color: #8792A2; }
.shp-kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 10px 12px; border-radius: 14px; background: #F5F7FB; font-size: .78rem; }
.shp-kv span { color: #8792A2; } .shp-kv b { text-align: end; font-family: var(--font-mono); font-weight: 600; }
.shp-kv .is-t { padding-top: 6px; border-top: 1px solid #E0E6EE; color: #0A2540; font-size: .9rem; font-weight: 700; }
.shp-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.shp-checks li { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: #3C475B; }
.shp-checks i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0E9F6E; color: #fff; }
.shp-checks .is-no i { background: #C62828; } .shp-checks .is-no { color: #C62828; font-weight: 600; }
.shp-checks .is-ask i { background: #1A6BFF; }
.shp-plan { display: flex; flex-wrap: wrap; gap: 6px; }
.shp-plan span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px; background: #EAF8F2; font-size: .74rem; }
.shp-plan img, .shp-cardi { width: 22px; height: 22px; border-radius: 50%; }
.shp-cardi { display: inline-block; background: linear-gradient(135deg, #1A6BFF, #0A2540); }
.shp-btn--pay { width: 100%; margin-top: 16px; padding: 15px; font-size: .92rem; background: #0A2540; }
.shp-btn--pay.is-scan { background: #1A6BFF; opacity: 1; animation: shp-pulse 1s ease-in-out infinite; }
.shp-stop { margin: 14px 0 8px; padding: 10px 12px; border-radius: 12px; background: #FDECEC; color: #C62828; font-size: .76rem; font-weight: 600; }
.shp-done { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.shp-done__ok { display: grid; place-items: center; width: 72px; height: 72px; margin-top: 6px; border-radius: 50%; background: #0E9F6E; color: #fff; animation: shp-pop .4s cubic-bezier(.2,.9,.25,1.4) both; }
@keyframes shp-pop { from { transform: scale(.4); opacity: 0; } }
.shp-done h3 { margin: 0; font: 700 1.3rem/1.2 var(--font-display); }
.shp-done p { margin: 0; font-size: .86rem; font-weight: 600; } .shp-done p span { font-weight: 400; color: #8792A2; }
.shp-done .shp-kv { width: 100%; text-align: start; }
.shp-done .shp-sheet__btns { width: 100%; }
/* while a phone pops up, everything behind it holds still */
html.phx-lock main *, html.phx-lock main *::before, html.phx-lock main *::after { animation-play-state: paused !important; }

/* ==========================================================================
   35. Interactive demo: "Help me choose" wizard (ranking with pros and cons)
   ========================================================================== */
.wz-card { display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 14px; padding: 12px; border: 0; border-radius: 16px; background: linear-gradient(135deg, #6B5CF6, #1A6BFF); color: #fff; font: inherit; text-align: start; cursor: pointer; box-shadow: 0 12px 26px -16px rgba(107,92,246,.9); transition: transform .12s; }
.wz-card:hover { transform: translateY(-2px); }
.wz-card > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.wz-card b { font-size: .88rem; } .wz-card small { font-size: .7rem; line-height: 1.35; color: rgba(255,255,255,.85); }
.wz-wand { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.18); color: #fff; }
.shp-h--s svg { vertical-align: -3px; color: #6B5CF6; }
.wz-intro { display: flex; gap: 11px; align-items: flex-start; margin-top: 6px; padding: 13px; border-radius: 16px; background: linear-gradient(135deg, #6B5CF6, #1A6BFF); color: #fff; }
.wz-intro p { margin: 0; font-size: .8rem; line-height: 1.45; }
.wz-tips { display: flex; flex-direction: column; gap: 6px; }
.wz-tips details { border-radius: 13px; background: #fff; box-shadow: 0 3px 10px -7px rgba(10,37,64,.35); }
.wz-tips summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; font-size: .8rem; font-weight: 600; color: #0A2540; cursor: pointer; }
.wz-tips summary::-webkit-details-marker { display: none; }
.wz-tips summary::after { content: "+"; font: 600 1rem/1 var(--font-body); color: #1A6BFF; }
.wz-tips details[open] summary::after { content: "−"; }
.wz-tips details p { margin: 0; padding: 0 12px 12px; font-size: .74rem; line-height: 1.5; color: #56627A; }
.shp-lbl svg { vertical-align: -2px; color: #F5A623; }
.wz-go { width: 100%; margin-top: 16px; padding: 14px; font-size: .9rem; }
.wz-dots { display: flex; gap: 5px; margin: 8px 0 12px; }
.wz-dots i { flex: 1; height: 5px; border-radius: 99px; background: #E0E6EE; }
.wz-dots .is-done { background: #0E9F6E; } .wz-dots .is-on { background: #1A6BFF; }
.wz-n { margin: 0; font-size: .7rem; color: #8792A2; }
.wz-q { margin: 4px 0 6px; font: 700 1.3rem/1.2 var(--font-display); color: #0A2540; }
.wz-why { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 12px; font-size: .74rem; line-height: 1.4; color: #56627A; }
.wz-why svg { flex: none; margin-top: 1px; color: #F5A623; }
.wz-opts { display: flex; flex-direction: column; gap: 7px; }
.wz-opt { display: flex; align-items: center; gap: 11px; width: 100%; padding: 13px 12px; border-radius: 14px; border: 2px solid #E0E6EE; background: #fff; font: inherit; color: #0A2540; text-align: start; cursor: pointer; transition: border-color .12s, transform .12s; }
.wz-opt:hover { border-color: #9DBBFF; transform: translateX(2px); }
.wz-opt i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #C9D1DC; color: #fff; }
.wz-opt span { display: flex; flex-direction: column; gap: 2px; }
.wz-opt b { font-size: .86rem; } .wz-opt small { font-size: .7rem; color: #8792A2; }
.wz-opt.is-on { border-color: #1A6BFF; background: #F4F8FF; } .wz-opt.is-on i { border-color: #1A6BFF; background: #1A6BFF; }
.wz-unsure { display: block; width: 100%; margin-top: 12px; padding: 11px; border: 1.5px dashed #B6C0CE; border-radius: 14px; background: none; font: 600 .78rem/1 var(--font-body); color: #56627A; cursor: pointer; }
.wz-unsure:hover { border-color: #1A6BFF; color: #1A6BFF; }
.wz-edit { margin-inline-start: auto; padding: 7px 10px; border: 0; border-radius: 10px; background: #EEF3FF; font: 600 .7rem/1 var(--font-body); color: #1A6BFF; cursor: pointer; }
.wz-need { margin-top: 6px; padding: 2px 12px 12px; border-radius: 16px; background: #fff; box-shadow: 0 4px 14px -10px rgba(10,37,64,.4); }
.wz-need .shp-lbl { margin-top: 10px; }
.wz-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.wz-chips span { padding: 5px 9px; border-radius: 99px; background: #EEF3FF; font-size: .7rem; font-weight: 600; color: #1A6BFF; }
.wz-look { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.wz-look li { display: flex; gap: 6px; align-items: flex-start; font-size: .74rem; line-height: 1.35; color: #3C475B; }
.wz-look svg { flex: none; margin-top: 2px; color: #0E9F6E; }
.wz-r { margin-bottom: 8px; padding: 11px; border-radius: 16px; background: #fff; box-shadow: 0 4px 14px -10px rgba(10,37,64,.4); border: 1.5px solid transparent; animation: agx-in .3s both; }
.wz-r.is-1 { border-color: #0E9F6E; }
.wz-r__top { display: flex; align-items: center; gap: 10px; }
.wz-rank { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #0A2540; color: #fff; font: 700 .78rem/1 var(--font-display); font-style: normal; }
.wz-r.is-1 .wz-rank { background: #0E9F6E; }
.wz-r__m { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.wz-r__m b { font-size: .84rem; line-height: 1.25; } .wz-r__m small { font-size: .7rem; color: #8792A2; }
.wz-bdg { padding: 2px 7px; border-radius: 99px; font-size: .6rem; font-weight: 700; letter-spacing: .02em; }
.wz-bdg--1 { background: #0E9F6E; color: #fff; } .wz-bdg--v { background: #FFF4DB; color: #9A6200; }
.wz-score { flex: none; position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: conic-gradient(#1A6BFF calc(var(--p) * 1%), #E6EBF2 0); }
.wz-score::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.wz-score b, .wz-score small { position: relative; line-height: 1; }
.wz-score b { font: 700 .9rem/1 var(--font-display); margin-top: 6px; } .wz-score small { font-size: .5rem; color: #8792A2; margin-top: -8px; }
.wz-r.is-1 .wz-score { background: conic-gradient(#0E9F6E calc(var(--p) * 1%), #E6EBF2 0); }
.wz-fit { display: flex; gap: 5px; align-items: flex-start; margin: 9px 0 0; padding: 7px 9px; border-radius: 10px; background: #F4F8FF; font-size: .72rem; line-height: 1.35; color: #1A4FB8; }
.wz-fit svg { flex: none; margin-top: 1px; }
.wz-pc { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wz-pc li { display: flex; gap: 6px; align-items: flex-start; font-size: .72rem; line-height: 1.35; color: #3C475B; }
.wz-pc i { flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; color: #fff; }
.wz-pc .is-pro i { background: #0E9F6E; } .wz-pc .is-con i { background: #E8505B; }
.wz-spec { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.wz-spec span { padding: 3px 7px; border-radius: 7px; background: #F1F3F6; font-size: .62rem; font-weight: 600; color: #56627A; }
.wz-more { display: block; width: 100%; margin-top: 8px; padding: 8px; border: 0; border-radius: 10px; background: #F1F3F6; font: 600 .72rem/1 var(--font-body); color: #1A6BFF; cursor: pointer; }
.phx--shop .shp-rtop .shp-h--s { display: flex; align-items: center; gap: 6px; }
.phx--shop .shp-lbl svg, .phx--shop .shp-h--s svg { display: inline-block; }
.phx--shop .shp-lbl { display: flex; align-items: center; gap: 5px; }

/* ==========================================================================
   36. Mobile review (v118)
   ========================================================================== */
/* phones: the terminal stays clear of the screen edge; Interactive Demo, In store / Online and
   "Coming soon" stack in one centred column under the illustration */
@media (min-width: 400px) and (max-width: 480px) { .phone-stage { --pos-x: 78px; } }
@media (max-width: 399px) { .phone-stage { --pos-x: 58px; } }
@media (max-width: 480px) {
  .phx-hint { left: 50%; }
  .hero-wallets__k.is-placed { text-align: center; }
}
/* the small uppercase headings: room between lines when they wrap, tighter spacing on phones */
.fut-eyebrow { line-height: 1.5; }
@media (max-width: 600px) {
  .fut-eyebrow { letter-spacing: .16em; font-size: .72rem; }
  .eyebrow { letter-spacing: .1em; }
  .breadcrumb { flex-wrap: wrap; margin-bottom: 10px; }
}
/* comparison tables become one card per row on phones, each value labelled with its column */
@media (max-width: 640px) {
  .table-scroll { overflow: visible; }
  .table-scroll .cmp { min-width: 0; border: 0; border-radius: 0; overflow: visible; }
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp td { display: block; width: 100% !important; }
  .cmp tr { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--bg, #fff); }
  .cmp td { padding: 11px 16px; border-bottom: 1px solid var(--border); }
  .cmp tbody tr:last-child td { border-bottom: 1px solid var(--border); }
  .cmp tr td:last-child, .cmp tbody tr:last-child td:last-child { border-bottom: 0; }
  .cmp td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; margin-bottom: 3px; font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .cmp td.is-us[data-label]::before { color: var(--brand-lift); }
  .cmp tbody td:first-child:is([data-label=""], :not([data-label])) { background: var(--bg-panel); font-weight: 600; }
  .cmp .vs-cell { display: none; }
}
@media (max-width: 640px) {
  .agx-cmp__wrap { overflow: visible; border: 0; background: none; }
  .agx-cmp__t { min-width: 0; font-size: .86rem; }
  .agx-cmp__t thead { display: none; }
  .agx-cmp__t, .agx-cmp__t tbody, .agx-cmp__t tr, .agx-cmp__t th, .agx-cmp__t td { display: block; width: 100% !important; }
  .agx-cmp__t tr { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #fff; }
  .agx-cmp__t tbody th { padding: 12px 16px; background: #F5F7FD; border-bottom: 1px solid var(--border); }
  .agx-cmp__t td { padding: 9px 16px; }
  .agx-cmp__t td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 600 10.5px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .agx-cmp__t tr.is-us { border-color: #1A6BFF; }
}
/* phones, online: the shop's checkout sits beside the phone (like the terminal in store), never over
   Interactive Demo, the scene selector or the wallet strip; the stage is as tall as in store */
@media (max-width: 480px) {
  .phone-stage[data-scene="2"] { --ph-y: -95px; --shop-y: -196px; min-height: calc(330px + var(--nav-h)); }
}
@media (min-width: 400px) and (max-width: 480px) { .phone-stage[data-scene="2"] { --ph-x: -95px; --pt-x: 12px; --shop-w: 156px; } }
@media (max-width: 399px) { .phone-stage[data-scene="2"] { --ph-x: -104px; --pt-x: 4px; --shop-w: 142px; --shop-y: -188px; } }
/* the wallet order (home page app): the whole row is the handle; a finger on it holds it instead of scrolling */
.phx-order li { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: grab; }
.phx-order li .phx-rm { touch-action: manipulation; cursor: pointer; }
.phx-order li.is-dragging { cursor: grabbing; transform-origin: center; box-shadow: 0 18px 32px -14px rgba(10,37,64,.5); background: #fff; }
.phx.is-dragging-any .phx-order li:not(.is-dragging) { will-change: transform; }
.phx.is-dragging-any, .phx.is-dragging-any * { cursor: grabbing !important; }
/* the wallet list's search row: the close button keeps its size (the list's row-button rule made it fill the
   width and squeezed the search field to nothing); nothing in the list scrolls sideways */
.phx-menu .phx-menu__x { flex: 0 0 30px; width: 30px; height: 30px; padding: 0; margin: 0; border-radius: 50%; justify-content: center; }
.phx-menu .phx-menu__search label { flex: 1 1 auto; min-width: 0; }
.phx-menu .phx-menu__search input { flex: 1 1 auto; width: 100%; min-width: 0; font-size: 16px; }   /* 16px: iPhone doesn't zoom in */
.phx-menu { overflow-x: hidden; }
.phx-menu li[data-name] > button { min-width: 0; }
.phx-menu button.is-flash { animation: phx-flash .9s ease-out; }
@keyframes phx-flash { from { background: #E7F6EE; } }
.phx-menu button.is-flash small { color: #0E9F6E; font-weight: 600; }
/* phones (up to 700px): the wallets feeding the card, which sit left of the phone on wider screens, become a
   row of tiles above the illustration, with "+ Add" at its end; the one paying on screen stays bright */
@media (max-width: 700px) {
  .hero-inner > .phone-stage { margin-top: 78px; }
  .phone-stage .wl { display: flex !important; position: absolute; z-index: 6; left: 0; right: 84px; top: -70px; width: auto;
    transform: none; gap: 8px; overflow-x: auto; overflow-y: visible; padding: 4px 2px 6px; scrollbar-width: none; --wl-shift: 0px; }
  .phone-stage .wl::-webkit-scrollbar { display: none; }
  .phone-stage .wl__card { flex: 0 0 64px; flex-direction: column; justify-content: center; gap: 4px; height: 60px; padding: 6px 4px 5px;
    border-radius: 14px; }
  .phone-stage .wl__card img { width: 28px; height: 28px; border-radius: 8px; }
  .phone-stage .wl__card span { flex: none; width: 100%; align-items: center; gap: 0; }
  .phone-stage .wl__card b { max-width: 100%; font-size: 10.5px !important; line-height: 1.1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .phone-stage .wl__card i, .phone-stage .wl__dot { display: none; }
  .phone-stage .wl__card.is-2l b { white-space: nowrap; }
  .phone-stage .wl__rm { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; margin: 0; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 6px -1px rgba(10,37,64,.35); font-size: 0; color: #56627A; display: grid; place-items: center; }
  .phone-stage .wl__rm::after { content: "×"; font: 600 14px/1 var(--font-body); }
  .phone-stage .wl__rm:hover { background: #FDECEC; color: #C62828; text-decoration: none; }
  .phone-stage .wl-add { display: block !important; left: auto; right: 0; top: -66px; width: 76px; }
  .phone-stage .wl-add__btn { flex-direction: column; gap: 4px; height: 60px; border-radius: 14px; font-size: 10.5px; }
  .phone-stage .wl-add .wl-add__menu { left: auto; right: 0; top: calc(100% + 8px); bottom: auto; width: min(300px, calc(100vw - 36px)); z-index: 20; }
  .phone-stage .wl-add.is-up .wl-add__menu, .phone-stage .wl-add.is-left .wl-add__menu { left: auto; right: 0; top: calc(100% + 8px); bottom: auto; }
}
@media (max-width: 700px) { .phone-stage .wl-add { z-index: 40; } }
/* phones: more air between the wallet row and the phone; the lines from the wallets meet at a dot on the phone's top edge */
.wl-mlinks, .wl-mnode { display: none; }
@media (max-width: 700px) {
  .hero-inner > .phone-stage { margin-top: 132px; }
  .phone-stage .wl { top: -124px; }
  .phone-stage .wl-add { top: -120px; }
  .wl-mlinks { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
  .wl-mlinks path { fill: none; }
  .wl-mnode { display: block; position: absolute; z-index: 3; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
    left: calc(50% + var(--ph-x)); top: calc(50% + var(--nav-h) / 2 + var(--ph-y) - 392px * var(--ph-scale) - 10px);
    background: var(--brand); box-shadow: 0 0 0 4px rgba(26,127,255,.2), 0 0 14px 3px rgba(26,127,255,.5);
    transition: left .5s var(--ease), top .5s var(--ease); }
}
/* phones: the Back buttons are 20% bigger, easier to spot and to tap */
@media (max-width: 700px) {
  .phx-back { width: 41px; height: 41px; flex: none; }
  .phx-back svg { width: 12px; height: 19px; }
  .phx-top--back h2 { font-size: 1.32rem; }
  .ph-vhead .ph-vback { width: 41px; height: 41px; }
  .ph-vhead .ph-vback svg { width: 13px; height: 22px; }
  .ph-vhead .ph-vback--txt { width: auto; height: 41px; padding: 0 19px; font-size: 1.2rem; }
}

/* ==========================================================================
   37. Interactive demo: live search (location, progress, sources, transaction record)
   ========================================================================== */
.shp-head { gap: 6px; }
.shp-loc { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 132px; margin-inline-start: auto; padding: 4px 8px; border: 0; border-radius: 99px; background: #EEF3FF; color: #1A6BFF; font: 600 .66rem/1 var(--font-body); cursor: pointer; }
.shp-loc span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.shp-loc svg { flex: none; }
.shp-live { display: flex; gap: 6px; align-items: flex-start; margin: 10px 2px 0; padding: 8px 10px; border-radius: 12px; background: #EAF8F2; font-size: .68rem; line-height: 1.4; color: #0E7C57; }
.shp-live svg { flex: none; margin-top: 1px; }
.shp-live.is-off { background: #F1F3F6; color: #56627A; }
.shp-load { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; padding: 22px 16px; border-radius: 18px; background: #fff; text-align: center; }
.shp-load__orb { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #1A6BFF, #8B5CF6); color: #fff; animation: shp-pulse 1.4s ease-in-out infinite; }
.shp-load b { font-size: .95rem; color: #0A2540; }
.shp-load ul { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 7px; align-self: stretch; text-align: start; }
.shp-load li { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: #A0AAB8; }
.shp-load li i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #D5DCE6; }
.shp-load li.is-on { color: #0A2540; } .shp-load li.is-on svg { color: #0E9F6E; }
.shp-load small { font-size: .66rem; color: #8792A2; }
.shp-sum { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 4px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid #D9E6FF; font-size: .74rem; line-height: 1.4; color: #3C475B; }
.shp-sum > svg { flex: none; margin-top: 2px; color: #1A6BFF; }
.shp-sum > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shp-sum b { font-size: .74rem; color: #0A2540; }
.shp-sum details summary { cursor: pointer; font-weight: 600; color: #1A6BFF; }
.shp-sum details a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 3px; font-size: .68rem; color: #1A6BFF; }
.shp-pc { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.shp-pc li { display: flex; gap: 5px; align-items: flex-start; font-size: .68rem; line-height: 1.35; color: #3C475B; }
.shp-pc li svg { flex: none; margin-top: 2px; } .shp-pc .is-pro svg { color: #0E9F6E; } .shp-pc .is-con svg { color: #E8505B; }
.shp-src { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin-top: 7px; font-size: .68rem; font-weight: 600; color: #1A6BFF; text-decoration: none; }
.shp-src span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.shp-b--out { background: #FDECEC; color: #C62828; }
.shp-o__p small { white-space: nowrap; }
button.shp-ord { width: 100%; border: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; }
button.shp-ord:hover { background: #FAFCFF; }
.shp-txn { margin-top: 10px; }
.shp-txn .shp-lbl { display: flex; align-items: center; gap: 5px; margin: 12px 2px 6px; }
.shp-txn .shp-kv { font-size: .72rem; }
.shp-txn .shp-kv b { font-family: var(--font-body); font-weight: 600; overflow-wrap: anywhere; }
.shp-txn .shp-kv a { color: #1A6BFF; }
.shp-ok { font-style: normal; color: #0E9F6E; }
.shp-btn--wide { display: flex; width: 100%; margin-top: 12px; padding: 12px; text-decoration: none; }
.shp-locnow { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 12px; padding: 10px 12px; border-radius: 12px; background: #F5F7FB; }
.shp-locnow svg { flex: none; margin-top: 2px; color: #1A6BFF; }
.shp-locnow span { display: flex; flex-direction: column; gap: 2px; } .shp-locnow b { font-size: .84rem; } .shp-locnow small { font-size: .68rem; color: #8792A2; }
.shp-sheet .shp-search { margin-bottom: 4px; }

/* ==========================================================================
   38. Interactive demo: the conversation before a search (prompt style)
   ========================================================================== */
.shp-livetag { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: auto; padding: 3px 7px; border-radius: 99px; background: #EAF8F2; color: #0E7C57; font-size: .62rem; font-weight: 700; }
.shp-chatlog { display: flex; flex-direction: column; gap: 9px; padding: 6px 0 12px; }
.shp-msg { display: flex; gap: 7px; align-items: flex-start; max-width: 100%; animation: agx-in .3s both; }
.shp-msg p { margin: 0; padding: 9px 12px; border-radius: 4px 16px 16px 16px; background: #fff; box-shadow: 0 3px 10px -7px rgba(10,37,64,.35); font-size: .8rem; line-height: 1.45; color: #0A2540; }
.shp-msg.is-me { align-self: flex-end; max-width: 84%; padding: 8px 12px; border-radius: 16px 4px 16px 16px; background: #1A6BFF; color: #fff; font-size: .8rem; line-height: 1.4; font-weight: 500; }
.shp-bot { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px -2px rgba(10,37,64,.35); }
.shp-bot img { width: 15px; height: 15px; }
.shp-msg--q > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.shp-msg--q p b { font-weight: 700; }
.shp-opts { display: flex; flex-direction: column; gap: 6px; }
.shp-opts button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 11px; border: 1.5px solid #D9E6FF; border-radius: 14px; background: #fff; font: inherit; color: #0A2540; text-align: start; cursor: pointer; transition: border-color .12s, transform .12s; }
.shp-opts button:hover { border-color: #1A6BFF; transform: translateX(2px); }
.shp-opts button span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.shp-opts b { font-size: .8rem; } .shp-opts small { font-size: .68rem; color: #8792A2; }
.shp-opts svg { flex: none; color: #1A6BFF; }
.shp-optx { display: flex; gap: 6px; flex-wrap: wrap; }
.shp-optx button { padding: 7px 10px; border: 1.5px dashed #B6C0CE; border-radius: 12px; background: none; font: 600 .7rem/1 var(--font-body); color: #56627A; cursor: pointer; }
.shp-optx button:hover { border-color: #1A6BFF; color: #1A6BFF; }
.shp-typing { display: inline-flex; gap: 4px; }
.shp-typing i { width: 6px; height: 6px; border-radius: 50%; background: #B6C0CE; animation: agx-dot 1s ease-in-out infinite; }
.shp-typing i:nth-child(2) { animation-delay: .15s; } .shp-typing i:nth-child(3) { animation-delay: .3s; }
.shp-reply { position: sticky; bottom: 0; margin-top: 4px; padding-inline-start: 12px; }
.shp-reply input:disabled { opacity: .5; }
.shp-asked { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 8px 0 2px; padding: 8px 10px; border-radius: 14px; background: #fff; border: 1px solid #D9E6FF; }
.shp-asked span { padding: 4px 8px; border-radius: 99px; background: #EEF3FF; font-size: .68rem; font-weight: 600; color: #1A6BFF; }
.shp-asked .shp-asked__q { background: #0A2540; color: #fff; }
.shp-asked button { margin-inline-start: auto; padding: 4px 8px; border: 0; border-radius: 8px; background: none; font: 700 .7rem/1 var(--font-body); color: #1A6BFF; cursor: pointer; text-decoration: underline; }
.shp-chatlog { padding-bottom: 64px; }
/* phones: the wallet list as a sheet above the keyboard */
html.wl-sheet-lock, html.wl-sheet-lock body { overflow: hidden; }
.wl-sheet-bg { position: fixed; inset: 0; z-index: 1990; background: rgba(10,37,64,.35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.phx-menu.wl-add__menu.is-sheet { position: fixed; z-index: 2000; left: 10px; right: 10px; top: 10px; width: auto; max-height: none; margin: 0;
  display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 20px; box-shadow: 0 24px 60px -20px rgba(10,37,64,.6); }
.phx-menu.wl-add__menu.is-sheet[hidden] { display: none; }
.phx-menu.is-sheet .phx-menu__search { top: -8px; }
.phx-menu.is-sheet .phx-menu__search input { font-size: 16px; }

/* ==========================================================================
   39. Interactive demo: speak to search; notes
   ========================================================================== */
.shp-speak { display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 10px; padding: 11px 12px; border: 0; border-radius: 16px;
  background: linear-gradient(135deg, #0A2540, #1A6BFF); color: #fff; font: inherit; text-align: start; cursor: pointer; box-shadow: 0 12px 26px -16px rgba(26,107,255,.9); }
.shp-speak > svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.shp-speak span { display: flex; flex-direction: column; gap: 2px; }
.shp-speak b { font-size: .88rem; } .shp-speak small { font-size: .68rem; color: rgba(255,255,255,.78); }
.shp-speak.is-on > svg { background: #E8505B; animation: shp-pulse 1s ease-in-out infinite; }
.shp-listening { display: flex; align-items: center; gap: 4px; margin: 0 0 8px; padding: 8px 12px; border-radius: 12px; background: #FDECEC; color: #C62828; font-size: .74rem; font-weight: 700; }
.shp-listening i { width: 4px; height: 12px; border-radius: 2px; background: #E8505B; animation: agx-talk .6s ease-in-out infinite; }
.shp-listening i:nth-child(2) { animation-delay: .15s; } .shp-listening i:nth-child(3) { animation-delay: .3s; }
.shp-listening span { margin-inline-start: 6px; }
.shp-note-top { margin: 0 0 8px; padding: 9px 12px; border-radius: 12px; background: #FFF4DB; color: #7A4E00; font-size: .72rem; line-height: 1.4; }
.shp-reply .shp-mic { width: 32px; height: 32px; }
.shp-sample { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 2px; padding: 8px 10px; border-radius: 12px; background: #FFF4DB; color: #7A4E00; font-size: .7rem; line-height: 1.4; }
.shp-sample svg { flex: none; margin-top: 1px; }
/* the options as a 2x2 grid of product photos; photos on result cards */
.shp-optgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.shp-optgrid button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 9px; border: 1.5px solid #D9E6FF; border-radius: 14px; background: #fff; font: inherit; color: #0A2540; text-align: center; cursor: pointer; transition: border-color .12s, transform .12s; }
.shp-optgrid button:hover { border-color: #1A6BFF; transform: translateY(-1px); }
.shp-optimg { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 10px; background: #F5F7FB; overflow: hidden; }
.shp-optimg img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.shp-optimg i { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #EEF3FF, #F3EDFF); }
.shp-optgrid b { font-size: .74rem; line-height: 1.2; }
.shp-optgrid small { font-size: .62rem; line-height: 1.25; color: #8792A2; }
.shp-tile--img { padding: 0; background: #fff; border: 1px solid #EEF1F5; overflow: hidden; }
.shp-tile--img img { width: 100%; height: 100%; object-fit: contain; }
.shp-o .shp-tile { width: 54px; height: 54px; }
.shp-o__m b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* search with a photo */
.shp-twin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.shp-twin .shp-speak { margin-top: 0; padding: 10px; gap: 8px; }
.shp-twin .shp-speak > svg { width: 34px; height: 34px; padding: 7px; }
.shp-speak--photo { background: linear-gradient(135deg, #6B5CF6, #1A6BFF); }
.shp-msg.is-img { padding: 3px; background: #1A6BFF; }
.shp-msg.is-img img { display: block; width: 150px; max-width: 100%; border-radius: 13px 2px 13px 13px; }
.shp-search .shp-mic + .shp-mic { margin-inline-start: -2px; }