/* ==========================================================================
   TrivaPay — one visual language: photography, white space, quiet type.
   No video, no motion, no decorative gradients. Reference: lunar.app.

   >>> BRAND COLOUR: change --brand below. Nothing else needs editing.
   ========================================================================== */

:root {
  --brand:      #1D439C;   /* [BRAND] primary — sampled from the TrivaPay logo */
  --brand-deep: #142E6E;   /* [BRAND] hover                                    */

  --ink:   #14151A;
  --ink-2: #55565C;
  --ink-3: #8C8D93;
  --line:  #E6E3DD;
  --paper: #FBFAF8;   /* warm off-white, not screen white */
  --mist:  #F1EFEA;

  --pad:  clamp(20px, 5vw, 56px);
  --maxw: 1180px;
  --gap:  clamp(28px, 5vw, 72px);
  --section: clamp(72px, 10vw, 148px);

  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
[hidden] { display: none !important; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px;
}
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(48px, 7vw, 96px); }
.section--facts { padding-block: clamp(24px, 3vw, 44px); }
.mist { background: var(--mist); }
.rule { border-top: 1px solid var(--line); }

/* ---------- type ---------- */
.display {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3.1rem, 7.2vw, 5.6rem); line-height: .95; letter-spacing: -0.022em;
}
.h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.02; letter-spacing: -0.018em;
}
.h3      { font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -0.025em; font-weight: 600; }
.lede    { font-size: clamp(1.02rem, 1.25vw, 1.2rem); color: var(--ink-2); }
.small   { font-size: .93rem; color: var(--ink-2); }
.label   { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.measure { max-width: 54ch; }
.measure-sm { max-width: 40ch; }
.stack > * + * { margin-top: 20px; }
.stack-lg > * + * { margin-top: 28px; }

/* ---------- links & buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 32px; border: 1px solid transparent; border-radius: 2px;
  font-weight: 600; font-size: .96rem; letter-spacing: .005em; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-deep); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--ghost { border-color: rgba(20,21,26,.24); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--sm { padding: 10px 18px; font-size: .95rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.tlink { color: var(--brand); font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.tlink:hover { color: var(--brand-deep); }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(251,250,248,.88);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.header.is-stuck {
  background: rgba(251,250,248,.96);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 28px rgba(20,21,26,.05);
}
.header__inner { display: flex; align-items: center; gap: 20px; height: 84px; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.brand img { height: 28px; width: auto; }
/* the bar: items sit in soft pills rather than under a hairline — quieter at
   rest, and the current page is stated rather than underlined */
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a {
  position: relative; border-radius: 999px;
  font-size: .92rem; letter-spacing: -.005em; color: var(--ink-2);
  padding: 9px 15px; white-space: nowrap;
  transition: color .22s ease, background .22s ease;
}
.nav a::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(20,21,26,.05); opacity: 0; transition: opacity .22s ease;
}
.nav a > * { position: relative; }
.nav a:hover { color: var(--ink); }
.nav a:hover::after { opacity: 1; }
.nav a[aria-current="page"] {
  color: var(--ink); font-weight: 600;
  background: rgba(20,21,26,.06);
  box-shadow: inset 0 0 0 1px rgba(20,21,26,.05);
}
.nav a[aria-current="page"]::after { opacity: 0; }
/* a hairline between the sections of the bar */
.header__cta { position: relative; }
.header__cta::before {
  content: ""; position: absolute; left: -13px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: rgba(20,21,26,.12);
}
.header__cta { display: flex; align-items: center; gap: 18px; margin-left: 26px; }
.header__cta > a:first-child { font-size: .98rem; color: var(--ink-2); }
.header__cta > a:first-child:hover { color: var(--ink); }
.burger { display: none; margin-left: auto; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; align-items: center; justify-content: center; }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--ink); }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.drawer { position: fixed; inset: 76px 0 0; z-index: 89; background: var(--paper); padding: 12px var(--pad) 40px; display: none; flex-direction: column; overflow-y: auto; }
.drawer.is-open { display: flex; }
.drawer a { font-size: 1.4rem; padding: 16px 0; border-bottom: 1px solid var(--line); }
.drawer .btn { margin-top: 24px; }
@media (max-width: 960px) { .nav, .header__cta { display: none; } .burger { display: inline-flex; } }

/* ---------- hero ---------- */
.hero { padding-block: clamp(44px, 6vw, 92px) clamp(28px, 4vw, 56px); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--gap); align-items: center; }
.hero__copy > * + * { margin-top: 26px; }
@media (max-width: 1000px) {
  .hero-z__cards { grid-template-columns: minmax(0, 1fr); padding-right: 40%; }
  .ncard--b, .ncard--d, .ncard--h { display: none; }
  .ncard--c { grid-area: 2 / 1; } .ncard--e { grid-area: 3 / 1; }
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

/* ---------- hero, bleed variant: film runs off the right screen edge ------ */
.hero--bleed {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: stretch;
  padding-block: 0;
  gap: clamp(24px, 4vw, 64px);
}
.hero--bleed .hero__copy {
  display: flex; flex-direction: column; justify-content: center;
  /* line the text up with the container while the grid itself is full-bleed */
  padding: clamp(56px, 8vw, 116px) clamp(16px, 3vw, 40px) clamp(56px, 8vw, 116px)
           max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
}
.hero--bleed .hero__copy > * + * { margin-top: 28px; }
.hero--bleed .hero__fig .shot img, .hero--bleed .hero__fig .shot video { height: 100%; }
.hero--bleed .hero__fig { position: relative; align-self: stretch; }
.hero--bleed .hero__fig .shot {
  height: 100%; min-height: min(86vh, 880px); aspect-ratio: auto;
}
@media (max-width: 980px) {
  .hero--bleed { grid-template-columns: 1fr; gap: 0; }
  .hero--bleed .hero__copy {
    padding: clamp(40px, 8vw, 72px) var(--pad) clamp(32px, 6vw, 56px);
  }
  .hero--bleed .hero__fig .shot { min-height: 62vh; }
}

/* ---------- figures: one treatment everywhere ---------- */
.shot { position: relative; overflow: hidden; background: var(--mist); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--portrait { aspect-ratio: 4 / 5; }
.shot--square   { aspect-ratio: 1 / 1; }
.shot--wide     { aspect-ratio: 3 / 2; }
.shot--tall     { aspect-ratio: 2 / 3; }
.shot--43       { aspect-ratio: 4 / 3; }
.shot figcaption { margin-top: 12px; font-size: .84rem; color: var(--ink-3); }
.shot--product { background: var(--mist); display: grid; place-items: center; }
.shot--product img { width: auto; height: 86%; object-fit: contain; }


/* ---------- video: real footage, treated exactly like a photo ---------- */
.shot--video { aspect-ratio: 16 / 9; }
.shot video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- hero figure + the payment card that sits on it ---------- */
.hero__fig { position: relative; }
.pop {
  position: absolute; left: clamp(-64px, -4vw, -24px); bottom: clamp(28px, 5vw, 56px);
  width: min(376px, 84%);
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(17,18,20,.05), 0 20px 48px rgba(17,18,20,.16);
  padding: 20px 22px;
  animation: pop-in .6s cubic-bezier(.2,.75,.3,1) .3s both;
}
.pop__row { display: flex; align-items: center; gap: 13px; }
.pop__body { flex: 1 1 auto; min-width: 0; }
.pop__sub {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-top: 3px;
}
.pop__who {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
  background: var(--mist); color: var(--ink-2);
  display: grid; place-items: center; font-size: .82rem; font-weight: 600;
}
.pop__name {
  display: block; font-weight: 600; font-size: .96rem; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .18s ease;
}
.pop__meta { font-size: .81rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop__amount {
  flex: 0 0 auto; font-weight: 600; font-size: .97rem; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap;
}

/* the transfer completing: a line fills, then the confirmation replaces it */
.pop__foot {
  position: relative; min-height: 21px;
  margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--ink-2);
}
.pop__bar {
  position: absolute; left: 0; right: 0; top: 21px; height: 2px;
  background: var(--line); overflow: hidden; opacity: 0; transition: opacity .3s ease;
}
.pop__bar i { display: block; height: 100%; width: 0; background: var(--brand); }
.pop.is-sending .pop__bar { opacity: 1; }
.pop.is-sending .pop__bar i { width: 100%; transition: width 1.7s cubic-bezier(.35,0,.15,1); }
.pop__done {
  display: flex; align-items: flex-start; gap: 9px;
  opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .4s ease;
}
.pop.is-sent .pop__done { opacity: 1; transform: none; }
.pop__tick { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }
.pop__tick circle { fill: var(--brand); }
.pop__tick path { stroke: #fff; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.pop--rate {
  left: auto; right: clamp(20px, 4vw, 44px); bottom: auto; top: clamp(28px, 5vw, 56px); width: auto;
  padding: 12px 16px; animation-delay: .55s; text-align: right;
}
.pop--rate .pop__meta { display: block; white-space: nowrap; margin: 0 0 3px; }
.pop--rate b { display: block; font-size: .98rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

@keyframes pop-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pop { animation: none; }
  .pop__bar { display: none; }
  .pop__done, .pop__name { transition: none; }
}
@media (max-width: 980px) { .pop { left: 16px; bottom: 16px; } .pop--rate { right: 16px; top: 16px; left: auto; bottom: auto; } }

/* ---------- split rows ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.split + .split { margin-top: clamp(64px, 9vw, 128px); }
.split--flip .split__fig { order: -1; }
.split__copy > * + * { margin-top: 20px; }
@media (max-width: 1000px) {
  .hero-z__cards { grid-template-columns: minmax(0, 1fr); padding-right: 40%; }
  .ncard--b, .ncard--d, .ncard--h { display: none; }
  .ncard--c { grid-area: 2 / 1; } .ncard--e { grid-area: 3 / 1; }
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--flip .split__fig { order: 0; } }

/* ---------- plain lists ---------- */
.plain { border-top: 1px solid var(--line); }
.plain li {
  border-bottom: 1px solid var(--line); padding: 15px 0; color: var(--ink-2);
  display: flex; align-items: flex-start; gap: 12px;
}
.plain li::before {
  content: ""; flex: 0 0 auto; width: 17px; height: 17px; margin-top: 5px;
  border-radius: 50%; background-color: var(--brand);
  -webkit-mask: no-repeat center / 9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.4 4.3 9.6 11 2.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask: no-repeat center / 9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.4 4.3 9.6 11 2.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.dark .plain li::before { background-color: #fff; }
.numbered { display: grid; gap: 0; border-top: 1px solid var(--line); }
.numbered > div { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start; }
.numbered span { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: .95rem; padding-top: 3px; }
.numbered h3 { margin-bottom: 6px; }

/* ---------- facts ---------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.facts > div { background: var(--paper); padding: 30px 24px; }
.facts b { display: block; font-family: var(--serif); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 400; letter-spacing: -.01em; line-height: 1; }
.facts span { display: block; margin-top: 8px; color: var(--ink-2); font-size: .93rem; }
.mist .facts > div { background: var(--mist); }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, 1fr); } }

/* ---------- columns of plain text ---------- */
.cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.cols--3 { grid-template-columns: repeat(3, 1fr); }
.cols--2 { grid-template-columns: repeat(2, 1fr); }
.cols > div { background: var(--paper); padding: 32px 28px 40px; }
.mist .cols > div { background: var(--mist); }
.cols h3 { margin-bottom: 10px; }
@media (max-width: 1000px) {
  .hero-z__cards { grid-template-columns: minmax(0, 1fr); padding-right: 40%; }
  .ncard--b, .ncard--d, .ncard--h { display: none; }
  .ncard--c { grid-area: 2 / 1; } .ncard--e { grid-area: 3 / 1; }
}
@media (max-width: 900px) { .cols, .cols--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cols, .cols--3, .cols--2 { grid-template-columns: 1fr; } }

/* ---------- picture grid ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.gallery h3 { margin: 18px 0 6px; }
@media (max-width: 860px) { .gallery { grid-template-columns: 1fr; } }

/* ---------- pricing ---------- */
.switch { display: inline-flex; gap: 28px; border-bottom: 1px solid var(--line); }
.switch button { border: 0; background: none; padding: 0 0 14px; font-size: 1.05rem; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.switch button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.plans > div { background: var(--paper); padding: 36px 28px 32px; display: flex; flex-direction: column; }
.plan__price { font-family: var(--serif); font-size: clamp(2.3rem, 3.4vw, 3rem); font-weight: 400; letter-spacing: -.01em; line-height: 1; margin: 20px 0 6px; }
.plan__price small { font-size: .95rem; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.plan ul { margin: 24px 0 30px; }
.plan ul li { padding: 11px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .96rem; }
.plan .btn { margin-top: auto; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }

/* ---------- table ---------- */
.table-scroll { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; min-width: 560px; }
th, td { text-align: left; padding: 15px 18px 15px 0; border-bottom: 1px solid var(--line); font-size: .96rem; }
th { font-weight: 600; border-bottom-color: var(--ink); }
td { color: var(--ink-2); }

/* ---------- accordion ---------- */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; padding: 24px 40px 24px 0; position: relative; font-size: 1.08rem; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; position: absolute; right: 4px; top: 22px; font-size: 1.3rem; color: var(--ink-3); line-height: 1; }
.acc details[open] summary::after { content: "\2013"; }
.acc p { padding-bottom: 24px; color: var(--ink-2); max-width: 70ch; }

/* ---------- forms ---------- */
.field { display: grid; gap: 8px; }
.field label { font-size: .88rem; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font: inherit; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink); width: 100%; border-radius: 0;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.form-grid { display: grid; gap: 26px; grid-template-columns: 1fr 1fr; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- closing block ---------- */
.close { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: end; }
@media (max-width: 860px) { .close { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: clamp(56px, 7vw, 88px) 36px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 40px; }
@media (max-width: 1000px) {
  .hero-z__cards { grid-template-columns: minmax(0, 1fr); padding-right: 40%; }
  .ncard--b, .ncard--d, .ncard--h { display: none; }
  .ncard--c { grid-area: 2 / 1; } .ncard--e { grid-area: 3 / 1; }
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4 { margin: 0 0 16px; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.footer__grid li + li { margin-top: 10px; }
.footer li a { color: var(--ink-2); }
.footer li a:hover { color: var(--ink); }
.footer address { font-style: normal; line-height: 1.7; color: var(--ink-2); font-size: .94rem; }
.footer__legal { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); font-size: .8rem; line-height: 1.7; color: var(--ink-3); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; margin-top: 16px; font-size: .8rem; color: var(--ink-3); }

.row-min > * { min-width: 0; }

/* ==========================================================================
   Front page, dark product system — the Revolut reading:
   near-black ground, bold sans at scale, the app itself as the hero image,
   tiles rather than editorial photography.
   ========================================================================== */

:root {
  --night:   #14171A;
  --night-2: #1C2024;
  --night-3: #262B31;
  --on-night:      #FFFFFF;
  --on-night-soft: rgba(255,255,255,.64);
  --on-night-line: rgba(255,255,255,.12);
}

/* headlines go back to sans, heavier and tighter */
.display {
  font-family: var(--font); font-weight: 600;
  font-size: clamp(2.9rem, 6.2vw, 4.9rem); line-height: .98; letter-spacing: -.038em;
}
.h2 {
  font-family: var(--font); font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.04; letter-spacing: -.035em;
}

.dark { background: var(--night); color: var(--on-night); }
.dark h1, .dark h2, .dark h3 { color: var(--on-night); }
.dark .lede, .dark .small, .dark p { color: var(--on-night-soft); }
.dark .label { color: rgba(255,255,255,.5); }
.dark .btn--ghost { border-color: rgba(255,255,255,.34); color: #fff; }
.dark .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.dark .tlink { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.dark .tlink:hover { border-bottom-color: #fff; }

/* ---------- hero ---------- */
.hero-r { position: relative; overflow: hidden; }
.hero-r::after {          /* one soft brand glow behind the device */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(760px, 78vw); aspect-ratio: 1; border-radius: 50%;
  right: -8%; top: 50%; transform: translateY(-50%);
  background: #fff;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 46%, transparent) 0%, transparent 66%);
  filter: blur(20px); opacity: .5;
}
.hero-r__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(56px, 8vw, 116px);
}
.hero-r__copy > * + * { margin-top: 26px; }
.hero-r__points { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.hero-r__points li { color: var(--on-night-soft); font-size: .96rem; display: flex; align-items: center; gap: 9px; }
.hero-r__points li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); flex: 0 0 auto;
}
@media (max-width: 940px) {
  .hero-r__grid { grid-template-columns: 1fr; padding-block: clamp(40px, 8vw, 72px); }
  .hero-r::after { right: -30%; top: 76%; }
}

/* ---------- the device, drawn in CSS ---------- */
.device {
  width: min(392px, 100%); margin-inline: auto;
  background: #0A0C0E; border-radius: 46px; padding: 11px;
  box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 40px 90px rgba(0,0,0,.55),
              inset 0 0 0 1px rgba(255,255,255,.09);
}
.device__screen {
  background: var(--night-2); border-radius: 36px; overflow: hidden;
  padding: 24px 20px 20px; color: #fff;
  display: grid; gap: 20px; align-content: start;
  aspect-ratio: 9 / 18.5;   /* a phone, not a rounded box */
}
.app__top { display: flex; align-items: center; justify-content: space-between; }
.app__avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand);
  display: grid; place-items: center; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.app__bell { width: 18px; height: 18px; stroke: rgba(255,255,255,.5); fill: none; stroke-width: 1.7; }
.app__label { font-size: .78rem; color: rgba(255,255,255,.52); letter-spacing: .01em; }
.app__balance {
  font-size: 2.35rem; font-weight: 600; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums; margin-top: 6px;
}
.app__balance small { font-size: 1.15rem; color: rgba(255,255,255,.45); font-weight: 500; }
.app__chips { display: flex; gap: 7px; flex-wrap: wrap; }
.app__chip {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.72);
}
.app__chip.is-on { background: var(--brand); color: #fff; }
.app__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.app__action {
  background: rgba(255,255,255,.07); border-radius: 14px; padding: 12px 6px;
  display: grid; justify-items: center; gap: 7px;
  font-size: .7rem; color: rgba(255,255,255,.78); font-weight: 500;
}
.app__action svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app__feed { display: grid; gap: 2px; }
.app__feedhead {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .74rem; color: rgba(255,255,255,.45); margin-bottom: 8px;
}
.tx {
  display: flex; align-items: center; gap: 11px; padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.tx:first-of-type { border-top: 0; }
.tx__who {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%;
  background: rgba(255,255,255,.1); display: grid; place-items: center;
  font-size: .68rem; font-weight: 600; color: rgba(255,255,255,.8);
}
.tx__body { flex: 1 1 auto; min-width: 0; display: block; }
.tx__name { display: block; font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx__meta { display: block; font-size: .72rem; color: rgba(255,255,255,.45); margin-top: 1px; }
.tx__amt { font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx__amt.is-out { color: #fff; }
.tx__amt.is-in  { color: #4ADE80; }

/* the live row at the top of the feed */
.tx--live { position: relative; }
.tx--live .tx__meta { color: var(--brand); }
.tx--new { animation: tx-in .5s cubic-bezier(.2,.75,.3,1) both; }
@keyframes tx-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.tx__bar { display: block; height: 2px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 9px; }
.tx__bar i { display: block; height: 100%; width: 0; background: var(--brand); }
.is-sending .tx__bar i { width: 100%; transition: width 1.6s cubic-bezier(.35,0,.15,1); }
.is-sending .tx__bar { opacity: 1; }
.is-sent .tx__bar { opacity: 0; transition: opacity .3s ease; }

/* ---------- badge tiles ---------- */
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.badge {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 24px 22px 26px;
  transition: transform .4s cubic-bezier(.2,.8,.25,1), border-color .4s ease;
}
.badge:hover { transform: translateY(-3px); }
.badge__icon {
  width: 36px; height: 36px; border-radius: 12px; margin-bottom: 22px;
  display: grid; place-items: center; background: rgba(255,255,255,.08);
}
.badge__icon svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.badge b {
  display: block; font-size: clamp(1.7rem, 2.4vw, 2.15rem); font-weight: 600;
  letter-spacing: -.035em; line-height: 1;
}
.badge span { display: block; margin-top: 8px; font-size: .9rem; color: var(--ink-2); }
@media (max-width: 860px) { .badges { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .badges { grid-template-columns: 1fr; } .badge__icon { margin-bottom: 14px; } }

/* ---------- product tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tile {
  background: var(--night-2); border: 1px solid var(--on-night-line); border-radius: 18px;
  padding: 26px 24px 24px; display: flex; flex-direction: column;
  transition: background-color .18s ease, border-color .18s ease;
}
.tile:hover { background: var(--night-3); border-color: rgba(255,255,255,.2); }
.tile h3 { font-size: 1.12rem; font-weight: 600; margin-bottom: 8px; }
.tile__price {
  font-size: 2rem; font-weight: 600; letter-spacing: -.035em; line-height: 1; margin: 18px 0 4px;
  font-variant-numeric: tabular-nums;
}
.tile__price small { font-size: .88rem; font-weight: 500; color: rgba(255,255,255,.45); }
.tile ul { margin: 18px 0 24px; display: grid; gap: 9px; }
.tile li { font-size: .9rem; color: var(--on-night-soft); padding-left: 17px; position: relative; }
.tile li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--brand);
}
.tile .tlink { margin-top: auto; align-self: flex-start; }
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr; } }

/* ---------- dark feature rows ---------- */
.dark .shot { background: var(--night-3); }
.dark .plain { border-top-color: var(--on-night-line); }
.dark .plain li { border-bottom-color: var(--on-night-line); color: var(--on-night-soft); }
.dark .numbered { border-top-color: var(--on-night-line); }
.dark .numbered > div { border-bottom-color: var(--on-night-line); }
.dark .numbered span { color: rgba(255,255,255,.4); }

/* ---------- dark footer ---------- */
.footer--dark { background: var(--night); border-top: 0; color: var(--on-night-soft); }
.footer--dark h4 { color: rgba(255,255,255,.5); }
.footer--dark a, .footer--dark li a { color: var(--on-night-soft); }
.footer--dark a:hover, .footer--dark li a:hover { color: #fff; }
.footer--dark address, .footer--dark .small, .footer--dark p { color: var(--on-night-soft); }
.footer--dark .footer__legal { border-top-color: var(--on-night-line); color: rgba(255,255,255,.56); }
.footer--dark .footer__bottom { color: rgba(255,255,255,.56); }


@media (prefers-reduced-motion: reduce) {
  .tx--new { animation: none; }
  .is-sending .tx__bar i { transition: none; width: 100%; }
}

/* ---------- the logo -----------------------------------------------------
   assets/images/logo.png is white artwork on transparency, which disappears
   on the light bar. An SVG colour matrix repaints every pixel in the brand
   colour and keeps the original alpha, so the mark is blue in the header and
   blue in the footer whatever colour the file itself is. The filter lives in
   a hidden <svg> at the end of the page. To show the file exactly as supplied,
   delete the two rules below.                                              */
.brand { display: inline-flex; align-items: center; }
.brand img { filter: url(#tp-brandmark); }
.brand:hover img { filter: url(#tp-brandmark-deep); }

/* ==========================================================================
   Front page v3 — the reference set: a person on their phone inside a soft
   rounded frame, with frosted UI cards floating over and past its edges.
   Light ground, rounded everything, pill buttons.
   ========================================================================== */

:root {
  --glass:      rgba(255,255,255,.72);
  --glass-line: rgba(255,255,255,.85);
  --r-card: 22px;
  --r-media: 28px;
}

/* pills and rounder media everywhere on this page */
.stage-light .btn { border-radius: 999px; padding: 17px 34px; }
.stage-light .shot,
.stage-light .badge,
.stage-light .tile { border-radius: var(--r-media); }

/* ---------- the hero stage ---------- */
.stage-light {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 620px at 82% 8%,  color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 62%),
    radial-gradient(900px 560px at 6% 88%,   color-mix(in srgb, var(--brand) 9%,  transparent) 0%, transparent 60%),
    linear-gradient(180deg, #EEF0F4 0%, #F7F7F8 58%, var(--paper) 100%);
}
.stage-light__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1.06fr; gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(52px, 7vw, 104px) clamp(64px, 8vw, 120px);
}
.stage-light__copy > * + * { margin-top: 26px; }
.stage-light .display { font-weight: 600; letter-spacing: -.04em; }

/* soft decorative shapes, well behind everything */
.blob { position: absolute; z-index: 0; border-radius: 40px; pointer-events: none; }
.blob--a {
  width: 190px; height: 190px; right: 3%; top: 8%;
  background: #fff;
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  filter: blur(26px); transform: rotate(12deg);
}
.blob--b {
  width: 150px; height: 150px; right: 44%; bottom: 3%;
  background: #fff;
  background: color-mix(in srgb, var(--brand) 7%, transparent);
  filter: blur(26px); transform: rotate(-14deg);
}

/* ---------- the media frame the person sits in ---------- */
.framed { position: relative; }
.framed__media {
  position: relative; border-radius: var(--r-media); overflow: hidden;
  aspect-ratio: 4 / 5; background: #DFE2E7;
  box-shadow: 0 2px 6px rgba(20,21,26,.06), 0 30px 70px rgba(20,21,26,.16);
}
.framed__media img, .framed__media video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- frosted cards that float over the frame ---------- */
.gcard {
  position: absolute; z-index: 3;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-card);
  box-shadow: 0 2px 8px rgba(20,21,26,.06), 0 22px 50px rgba(20,21,26,.16);
  padding: 18px 20px;
  animation: gcard-in .78s cubic-bezier(.16,.84,.24,1) both;
}
@keyframes gcard-in {
  from { opacity: 0; transform: translateY(26px) scale(.94); filter: blur(6px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.gcard__head {
  display: flex; align-items: center; gap: 9px;
  font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 12px;
}
.gcard__head svg { width: 15px; height: 15px; stroke: var(--brand); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gcard__big {
  font-size: 1.65rem; font-weight: 600; letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* the amount lands with a small pop each time it changes */
.amt-pop { animation: amt-pop .42s cubic-bezier(.2,.8,.3,1); }
@keyframes amt-pop {
  0%   { transform: scale(.86); opacity: .35; }
  55%  { transform: scale(1.05); opacity: 1; }
  100% { transform: none; }
}
.toast__amt { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .amt-pop { animation: none; } }
.gcard__sub { font-size: .8rem; color: var(--ink-3); margin-top: 6px; }

/* card 1 — balance, upper left, hanging off the frame */
.gcard--balance { left: clamp(-92px, -6vw, -40px); top: 7%; width: min(252px, 58%); animation-delay: .35s; }
.gcard--balance .chips { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.gcard--balance .chip {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  padding: 5px 9px; border-radius: 999px; background: rgba(20,21,26,.07); color: var(--ink-2);
}
.gcard--balance .chip.is-on { background: var(--brand); color: #fff; }

/* card 2 — the transfer toast, lower left, the one that keeps moving */
.gcard--toast {
  left: clamp(-92px, -6vw, -40px); bottom: 12%; width: min(330px, 78%);
  animation-delay: .95s; padding: 16px 18px;
}
.toast__row { display: flex; align-items: center; gap: 12px; }
.toast__who {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%;
  background: #fff;
  background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand);
  display: grid; place-items: center; font-size: .76rem; font-weight: 700;
}
.toast__body { flex: 1 1 auto; min-width: 0; }
.toast__title {
  display: block; font-size: .92rem; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .18s ease;
}
.toast__sub {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-top: 3px;
}
.toast__meta { font-size: .78rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast__amt {
  flex: 0 0 auto; font-size: .95rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap;
}
.toast__amt.is-in { color: #0F9D58; }
.toast__bar {
  display: block; height: 3px; border-radius: 999px; margin-top: 12px;
  background: rgba(20,21,26,.1); overflow: hidden; opacity: 0; transition: opacity .3s ease;
}
.toast__bar i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 999px; }
.is-sending .toast__bar { opacity: 1; }
.is-sending .toast__bar i { width: 100%; transition: width 1.6s cubic-bezier(.35,0,.15,1); }

/* card 3 — received this month, upper right */
.gcard--stat { right: clamp(-40px, -3vw, -16px); top: 26%; width: min(228px, 54%); animation-delay: 1.55s; }
.spark { display: block; width: 100%; height: 40px; margin: 4px 0 10px; }
.spark path { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* card 4 — rate chip, lower right */
.gcard--rate {
  right: clamp(-30px, -2vw, -10px); bottom: 6%; width: auto; padding: 13px 17px;
  animation-delay: 2.1s; text-align: right;
}
.gcard--rate b { display: block; font-size: 1rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

@media (max-width: 1080px) {
  .gcard--balance { left: -12px; width: min(240px, 58%); }
  .gcard--toast   { left: -12px; width: min(290px, 74%); }
  .gcard--stat    { right: -8px; }
  .gcard--rate    { right: -8px; }
}
@media (max-width: 940px) {
  .stage-light__grid { grid-template-columns: 1fr; padding-block: clamp(36px, 7vw, 64px) clamp(56px, 9vw, 88px); }
  .stage-light .framed { margin-top: 8px; }
  .gcard--balance { left: 8px; top: 5%; }
  .gcard--toast   { left: 8px; bottom: 6%; }
  .gcard--stat    { right: 8px; top: 34%; }
  .gcard--rate    { right: 8px; bottom: 4%; }
  .blob--a, .blob--b { display: none; }
}
@media (max-width: 560px) {
  .gcard { padding: 14px 16px; border-radius: 18px; }
  .gcard--balance { width: 78%; top: 4%; }
  .gcard--balance .gcard__big { font-size: 1.45rem; }
  .gcard--balance .chip { padding: 4px 8px; font-size: .64rem; }
  .gcard--toast { width: 88%; bottom: 5%; }
  .gcard--stat { display: none; }
  .gcard--rate { bottom: auto; top: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .gcard { animation: none; }
  .is-sending .toast__bar i { transition: none; width: 100%; }
}

/* ==========================================================================
   The soft system applied to the whole front page
   ========================================================================== */

.theme-soft { background: var(--paper); }
.theme-soft .btn { border-radius: 999px; padding: 16px 32px; }
.theme-soft .btn--sm { padding: 11px 20px; }
.theme-soft .shot { border-radius: var(--r-media); }
.theme-soft .mist {
  background: linear-gradient(180deg, #F4F5F7 0%, #F7F7F8 100%);
}

/* soft tiles instead of hairline boxes */
.theme-soft .badges { gap: 16px; }
.theme-soft .badge {
  background: #fff; border: 1px solid rgba(20,21,26,.07); border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(20,21,26,.04), 0 10px 26px rgba(20,21,26,.05);
  padding: 26px 24px;
}
.theme-soft .plans {
  background: transparent; border: 0; gap: 16px;
}
/* plain hairline columns become the same soft tile as everything else */
.theme-soft .cols {
  background: transparent; border-top: 0; gap: 16px;
}
.theme-soft .cols > div {
  background: #fff; border: 1px solid rgba(20,21,26,.07); border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(20,21,26,.04), 0 10px 26px rgba(20,21,26,.05);
  padding: 26px 24px 30px;
}
.theme-soft .facts { background: transparent; border: 0; gap: 16px; }
.theme-soft .facts > div {
  background: #fff; border: 1px solid rgba(20,21,26,.07); border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(20,21,26,.04), 0 10px 26px rgba(20,21,26,.05);
}
.theme-soft .plans > div {
  background: #fff; border: 1px solid rgba(20,21,26,.07); border-radius: var(--r-media);
  box-shadow: 0 1px 2px rgba(20,21,26,.04), 0 12px 30px rgba(20,21,26,.06);
  padding: 32px 28px 30px;
}
.theme-soft .plans > div.is-featured {
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(20,21,26,.06), 0 26px 60px rgba(20,21,26,.14);
}
.theme-soft .plan ul li { border-top-color: rgba(20,21,26,.07); }
.theme-soft .numbered { border-top: 0; }
.theme-soft .numbered > div {
  border-bottom: 0; background: #fff; border-radius: var(--r-card);
  padding: 24px 26px; margin-bottom: 12px;
  border: 1px solid rgba(20,21,26,.06);
}
.theme-soft .plain { border-top-color: rgba(20,21,26,.08); }
.theme-soft .plain li { border-bottom-color: rgba(20,21,26,.08); }
.theme-soft .gallery img { border-radius: var(--r-media); }

/* a single floating chip on a section figure — the hero language, quieter */
.figpin {
  position: absolute; z-index: 3; left: -18px; bottom: 22px;
  display: flex; align-items: center; gap: 11px;
  /* opaque enough to stay readable over a dark photograph */
  background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-line); border-radius: 18px;
  box-shadow: 0 2px 8px rgba(20,21,26,.06), 0 18px 40px rgba(20,21,26,.14);
  padding: 13px 17px; max-width: 82%;
  opacity: 0; transform: translateY(16px) scale(.96);
  transition: opacity .6s cubic-bezier(.16,.84,.24,1), transform .6s cubic-bezier(.16,.84,.24,1);
}
.figpin.is-in { opacity: 1; transform: none; }
.figpin--right { left: auto; right: -18px; bottom: 22px; }
.figpin__icon {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 10px;
  background: #fff;
  background: color-mix(in srgb, var(--brand) 12%, #fff);
  display: grid; place-items: center;
}
.figpin__icon svg { width: 16px; height: 16px; stroke: var(--brand); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.figpin b { display: block; font-size: .88rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.figpin span { display: block; font-size: .76rem; color: var(--ink-2); margin-top: 1px; }
@media (max-width: 700px) { .figpin { left: 10px; max-width: 88%; } .figpin--right { right: 10px; left: auto; } }
@media (prefers-reduced-motion: reduce) {
  .figpin { opacity: 1; transform: none; transition: none; }
}

/* the split figure becomes a frame, so chips can hang off it */
.split__fig { position: relative; }

/* ==========================================================================
   Full-bleed film hero — the whole viewport is the footage, the copy and the
   cards sit on top of it.
   ========================================================================== */

.hero-full {
  position: relative; isolation: isolate;
  min-height: min(94vh, 940px);
  min-height: min(94svh, 940px);
  display: grid; align-items: center;
  background: #0C0E11;
  margin-top: -82px;          /* the header floats over the film */
  padding-top: 82px;
}
.hero-full__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-full__media video,
.hero-full__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* nudge this if the person sits behind the headline: first value is
     horizontal, second vertical. 50% 40% keeps a standing subject's head
     in frame on a wide crop. */
  object-position: var(--hero-focus, 50% 50%);
}
.hero-full__scrim {
  position: absolute; inset: 0; z-index: -1;
  /* only as dark as the headline needs, and only where the headline is */
  /* enough contrast for the headline over any footage, and no more */
  background:
    linear-gradient(90deg, rgba(8,10,13,.84) 0%, rgba(8,10,13,.60) 30%, rgba(8,10,13,.22) 56%, rgba(8,10,13,.04) 78%),
    linear-gradient(180deg, rgba(8,10,13,.46) 0%, rgba(8,10,13,.06) 28%, rgba(8,10,13,.06) 60%, rgba(8,10,13,.4) 100%);
}
.hero-full__grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 560px) 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding-block: clamp(72px, 10vw, 132px);
}
.hero-full__copy { color: #fff; }
.hero-full__copy > * + * { margin-top: 26px; }
.hero-full .display {
  color: #fff; font-weight: 600; letter-spacing: -.042em;
  font-size: clamp(3rem, 6.6vw, 5.2rem); line-height: .96;
  text-wrap: balance;
}
.hero-full .lede { color: rgba(255,255,255,.82); }
.hero-full .label { color: rgba(255,255,255,.62); }
.hero-full .btn--ghost { border-color: rgba(255,255,255,.42); color: #fff; }
.hero-full .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* the card stack, floating over the film on the right.
   A grid, not absolute positioning — cards can never collide. */
.hero-full__cards {
  display: grid; grid-template-columns: 1.07fr .93fr; gap: 16px;
  align-content: center; align-items: start; justify-items: stretch;
}
.hero-full__cards .gcard {
  position: static; width: auto; left: auto; right: auto; top: auto; bottom: auto;
  /* the film behind is dark, so the glass is whiter here than on light ground */
  background: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.7);
  box-shadow: 0 2px 10px rgba(0,0,0,.18), 0 26px 60px rgba(0,0,0,.34);
}
/* a little vertical drift so they read as floating, not as a table */
.hero-full__cards .gcard--balance { transform-origin: center; margin-top: -22px; }
.hero-full__cards .gcard--stat    { margin-top: 26px; }
.hero-full__cards .gcard--toast   { grid-column: 1 / -1; }
.hero-full__cards .gcard--rate    { display: none; }
.hero-full__cards .gcard--balance .chips { gap: 5px; }
.hero-full__cards .gcard--balance .chip { padding: 4px 8px; font-size: .64rem; }

/* a quiet scroll cue */
.hero-full__cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 2; display: grid; justify-items: center; gap: 8px;
  color: rgba(255,255,255,.6); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
.hero-full__cue i {
  display: block; width: 1px; height: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue { 0%,100% { opacity: .25; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

@media (max-width: 1100px) {
  .hero-full__grid { grid-template-columns: minmax(0, 1fr); }
  .hero-full__cards { margin-top: clamp(32px, 6vw, 56px); max-width: 560px; }
  .hero-full__cards .gcard--balance,
  .hero-full__cards .gcard--stat { margin-top: 0; }
}
@media (max-width: 720px) {
  .hero-full { min-height: min(92vh, 780px); }
  .hero-full { min-height: min(92svh, 780px); }
  .hero-full__scrim {
    background: linear-gradient(180deg, rgba(8,10,13,.66) 0%, rgba(8,10,13,.34) 32%, rgba(8,10,13,.82) 100%);
  }
  .hero-full__grid { padding-block: clamp(48px, 11vw, 76px) clamp(56px, 12vw, 84px); }
  .hero-full__cards { grid-template-columns: 1fr; }
  .hero-full__cards .gcard--stat { display: none; }
  .hero-full__cue { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-full__cue i { animation: none; } }

/* ==========================================================================
   Hero v4 — a person on their phone, full height, bleeding off the right
   screen edge, with the cards popping up over the film's left edge.
   A tall frame takes vertical footage natively, so the person can never be
   cropped out the way a full-bleed letterbox crops them.
   ========================================================================== */

.hero-p {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: stretch; gap: clamp(20px, 3vw, 48px);
  background: linear-gradient(180deg, #EEF0F4 0%, #F7F7F8 62%, var(--paper) 100%);
  overflow: hidden;
}
.hero-p__copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(52px, 7vw, 108px) clamp(16px, 2vw, 32px) clamp(52px, 7vw, 108px)
           max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
}
.hero-p__copy > * + * { margin-top: 26px; }

.hero-p__fig { position: relative; align-self: stretch; }
.hero-p__media {
  position: absolute; inset: 0; overflow: hidden; background: #DDE1E6;
}
.hero-p__media video, .hero-p__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--hero-focus, 50% 30%);
}
/* just enough shading at the left edge so the cards separate from the film */
.hero-p__fig::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,12,15,.28) 0%, rgba(10,12,15,0) 42%);
}

/* the cards sit over the film's left edge, in a column, one after another */
.hero-p__cards {
  position: absolute; z-index: 3; left: clamp(-96px, -6vw, -40px);
  top: 50%; transform: translateY(-50%);
  width: min(370px, 82%); display: grid; gap: 14px;
}
.hero-p__cards .gcard {
  position: static; left: auto; right: auto; top: auto; bottom: auto; width: auto;
  background: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.8);
  box-shadow: 0 2px 10px rgba(20,21,26,.1), 0 24px 56px rgba(20,21,26,.2);
}
.hero-p__cards .gcard--rate { display: none; }
.hero-p__cards .gcard--stat { margin-left: 34px; }
.hero-p__cards .gcard--balance .chips { gap: 6px; }

@media (max-width: 1040px) {
  .hero-p { grid-template-columns: 1fr; gap: 0; }
  .hero-p__copy { padding: clamp(40px, 8vw, 72px) var(--pad) clamp(28px, 5vw, 44px); }
  .hero-p__fig { min-height: 74vh; }
  .hero-p__media { position: absolute; }
  .hero-p__cards { left: 16px; right: 16px; width: auto; top: auto; bottom: 22px; transform: none; }
  .hero-p__cards .gcard--stat { display: none; }
  .hero-p__fig::after { background: linear-gradient(180deg, rgba(10,12,15,0) 40%, rgba(10,12,15,.34) 100%); }
}
@media (max-width: 560px) {
  .hero-p__fig { min-height: 66vh; }
  .hero-p__cards .gcard--balance .chip { padding: 4px 8px; font-size: .64rem; }
}

/* ==========================================================================
   Hero v5 — the Zopa reading: one full-bleed frame of a person on their
   phone, with notification cards scattered across the left at different
   sizes, overlapping, arriving one after another.
   ========================================================================== */

.hero-z {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(calc(96vh - 84px), 900px);
  min-height: min(calc(96svh - 84px), 900px);
  display: grid; grid-template-rows: 1fr auto;
  /* the ground the clip fades in over — and what you see if the file is not
     there yet, so the hero is never a flat black rectangle */
  background-color: #0D0F12;
  background-image:
    radial-gradient(110% 80% at 74% 12%, rgba(27,77,255,.34), transparent 60%),
    radial-gradient(80% 60% at 8% 96%, rgba(27,77,255,.16), transparent 58%);
}
/* the wash sits behind the media, so a missing or still-loading video shows a
   branded field rather than an empty black box */
.hero-z__media {
  position: absolute; inset: 0; z-index: -2;
  background: #142E6E;
  background:
    radial-gradient(120% 90% at 78% 12%, #2B58B8 0%, transparent 62%),
    linear-gradient(168deg, #1D439C 0%, #101A38 100%);
}
.hero-z__media video, .hero-z__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* the subject sits right of centre, the cards live on the left */
  object-position: var(--hero-focus, 78% 30%);
}
.hero-z__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(9,11,14,.80) 0%, rgba(9,11,14,.62) 38%, rgba(9,11,14,.34) 62%, rgba(9,11,14,.06) 88%, rgba(9,11,14,0) 100%),
    linear-gradient(180deg, rgba(9,11,14,.52) 0%, rgba(9,11,14,.2) 24%, rgba(9,11,14,.22) 58%, rgba(9,11,14,.66) 100%);
}

/* the copy is pinned to the lower row so the card band can never reach it */
.hero-z > .wrap { grid-row: 2; align-self: end; }

/* the copy sits low-left, the way the reference sets its wordmark low-right */
.hero-z__copy {
  position: relative; z-index: 4; color: #fff;
  padding-block: clamp(20px, 3vw, 36px) clamp(44px, 6vw, 80px);
  max-width: 660px;
}
.hero-z__copy > * + * { margin-top: 20px; }
.hero-z .display { color: #fff; font-weight: 600; letter-spacing: -.042em; font-size: clamp(2.5rem, 4.8vw, 3.9rem); line-height: 1; }
.hero-z .lede { color: rgba(255,255,255,.84); }
.hero-z .label { color: rgba(255,255,255,.6); }
.hero-z .btn--ghost { border-color: rgba(255,255,255,.44); color: #fff; }
.hero-z .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* ---------- the scatter ---------- */
/* The cards live in the grid's first row and the copy in the second, so the
   band shrinks by itself when the copy needs the space. They cannot meet.
   Inside the band the cards are laid out on a 3x3 grid and then nudged a few
   pixels each — the scatter is a transform, so two cards can never land on
   top of each other however wide or short the screen gets. */
.hero-z__cards {
  position: relative; grid-row: 1; z-index: 3; pointer-events: none;
  display: grid; overflow: hidden;   /* last-resort guard: clip, never spill */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: min-content;
  align-content: start; align-items: start;
  gap: clamp(18px, 2.4vh, 34px) clamp(14px, 1.6vw, 26px);
  padding: clamp(14px, 2.4vh, 34px) 34% clamp(14px, 2vh, 28px)
           max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
}
.hero-z__cards > * { pointer-events: auto; }
.hero-z__cards > * { pointer-events: auto; }

.ncard {
  position: relative;
  /* crisper: the cards should read as white glass, not as a grey wash of
     whatever happens to be behind them */
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.16), 0 24px 56px rgba(0,0,0,.3);
  padding: 16px 18px;
  opacity: 0; transform: translateY(24px) scale(.93); filter: blur(7px);
  transition: opacity .62s cubic-bezier(.16,.84,.24,1),
              transform .62s cubic-bezier(.16,.84,.24,1),
              filter .5s ease;
}
.ncard.is-in { opacity: 1; transform: none; filter: blur(0); }
.ncard__top { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.ncard__logo {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 7px;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: .6rem; font-weight: 700; letter-spacing: .02em;
}
.ncard__logo--alt { background: #10151C; }
.ncard__logo--ok  { background: #0F9D58; }
.ncard__src { font-size: .76rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ncard__time { font-size: .72rem; color: var(--ink-3); margin-left: auto; white-space: nowrap; }
.ncard__dots { color: var(--ink-3); letter-spacing: .12em; font-size: .8rem; margin-left: 8px; }
.ncard h3 {
  font-size: .9rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
  color: var(--ink-2); margin-bottom: 2px;
}
.ncard__sum {
  display: block; font-size: 1.18rem; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.15; color: var(--ink); margin-bottom: 7px;
  font-variant-numeric: tabular-nums;
}
.ncard p { font-size: .79rem; line-height: 1.42; color: var(--ink-3); }
.ncard a {
  display: inline-block; margin-top: 10px;
  font-size: .78rem; font-weight: 700; color: var(--brand);
}
.ncard a:hover { text-decoration: underline; }
.ncard__amt { font-variant-numeric: tabular-nums; }

/* the two small confirmations, thinner and quieter */
.ncard--pill { padding: 13px 16px; border-radius: 14px; }
.ncard--pill .ncard__top { margin-bottom: 6px; }
.ncard--pill h3 { font-size: .82rem; font-weight: 700; margin-bottom: 3px; }
.ncard--pill p { font-size: .73rem; }

/* one card per cell, then a different width, alignment and nudge for each, so
   the set reads as scattered rather than tabular. The nudges stay inside the
   row gap, which is why the measured overlap is still zero. */
.ncard--a { grid-area: 1 / 1; width: 100%; }
.ncard--b { grid-area: 1 / 2; width: 95%;  justify-self: end; }
.ncard--f { grid-area: 1 / 3; width: 92%; }
.ncard--c { grid-area: 2 / 1; width: 100%; }
.ncard--d { grid-area: 2 / 2; width: 96%;  justify-self: end; }
.ncard--g { grid-area: 2 / 3; width: 94%; }
.ncard--e { grid-area: 3 / 1; width: 100%; }
.ncard--h { grid-area: 3 / 2; width: 90%;  justify-self: end; }

.ncard--a.is-in { transform: translate(0, 0); }
.ncard--b.is-in { transform: translate(0, 17px); }
.ncard--f.is-in { transform: translate(9px, -7px); }
.ncard--c.is-in { transform: translate(-13px, 9px); }
.ncard--d.is-in { transform: translate(3px, 24px); }
.ncard--g.is-in { transform: translate(11px, -3px); }
.ncard--e.is-in { transform: translate(5px, 6px); }
.ncard--h.is-in { transform: translate(-9px, 20px); }

@media (max-width: 1320px) {
  .hero-z__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 36%; }
  .ncard--f, .ncard--g { display: none; }
  .ncard--c { grid-area: 2 / 1; } .ncard--d { grid-area: 2 / 2; }
  .ncard--e { grid-area: 3 / 1; } .ncard--h { grid-area: 3 / 2; }
}

@media (max-width: 1200px) {
}
@media (max-width: 1000px) {
  .hero-z__cards { grid-template-columns: minmax(0, 1fr); padding-right: 40%; }
  .ncard--b, .ncard--d, .ncard--h { display: none; }
  .ncard--c { grid-area: 2 / 1; } .ncard--e { grid-area: 3 / 1; }
}
@media (max-width: 900px) {
  .hero-z { min-height: min(94vh, 860px); }
  .hero-z { min-height: min(94svh, 860px); }

  .hero-z__scrim {
    background: linear-gradient(180deg, rgba(9,11,14,.62) 0%, rgba(9,11,14,.2) 40%, rgba(9,11,14,.82) 100%);
  }
  .hero-z__media video, .hero-z__media img { object-position: var(--hero-focus, 62% 26%); }
  .ncard--d, .ncard--f, .ncard--g, .ncard--h, .ncard--i { display: none; }
}

/* On a phone the headline comes first. Only the two thin confirmations survive
   — the old rules kept the two FULL cards and hid the small ones, which pushed
   the headline 605px down the screen and the buttons off the bottom. */
@media (max-width: 700px) {
  .hero-z { min-height: min(88vh, 720px); }
  .hero-z { min-height: min(88svh, 720px); }
  .hero-z__cards {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px var(--pad) 10px;
    gap: 10px; align-content: end;
  }
  .ncard--c, .ncard--d, .ncard--e, .ncard--f,
  .ncard--g, .ncard--h, .ncard--i { display: none; }
  .ncard--a, .ncard--b {
    display: block; grid-area: auto; width: 100%; justify-self: stretch;
    padding: 12px 15px; border-radius: 14px;
  }
  .ncard--a.is-in, .ncard--b.is-in { transform: none; }
  .hero-z .display { font-size: clamp(2.1rem, 9.4vw, 2.7rem); }
  .hero-z .btn-row { display: grid; gap: 10px; }
  .hero-z .btn-row .btn { width: 100%; }
  .hero-z--short { min-height: min(76vh, 600px); }
  .hero-z--short { min-height: min(76svh, 600px); }
}
@media (prefers-reduced-motion: reduce) { .ncard { opacity: 1; transform: none; filter: none; transition: none; } }

/* short viewports: drop the lowest cards rather than let the hero outgrow the
   screen. The bar above the hero is 84px tall, so these sit 85px higher than
   the viewport heights they are protecting. */
@media (min-width: 901px) and (max-height: 965px) { .ncard--e, .ncard--h { display: none; } }
@media (min-width: 901px) and (max-height: 885px) { .ncard--d, .ncard--g { display: none; } }
@media (max-width: 1000px) { .hero-z__cards { padding-right: var(--pad); } }
@media (max-width: 900px) and (max-height: 700px) { .ncard--e { display: none; } }

/* subpage heroes: the same frame, less of it */
.hero-z--short { min-height: min(calc(80vh - 84px), 700px); }
.hero-z--short { min-height: min(calc(80svh - 84px), 700px); }
.hero-z--short .display { font-size: clamp(2.3rem, 4.2vw, 3.5rem); }
.hero-z--short .hero-z__cards { align-content: center; padding-block: clamp(12px, 2vh, 26px); }
/* the nudges are smaller where the band is shorter */
.hero-z--short .ncard--b.is-in { transform: translate(0, 9px); }
.hero-z--short .ncard--d.is-in { transform: translate(3px, 12px); }
.hero-z--short .ncard--h.is-in { transform: translate(-9px, 10px); }
@media (max-width: 900px) { .hero-z--short { min-height: min(calc(78vh - 84px), 600px); } }
@media (max-width: 900px) { .hero-z--short { min-height: min(calc(78svh - 84px), 600px); } }

/* the numbers band continues straight out of the dark hero */
.band-top { padding-top: clamp(40px, 5vw, 72px); }
.dark .badge,
.dark .cols > div,
.dark .plan,
.dark .numbered > div {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}
.dark .badge b, .dark .cols h3 { color: #fff; }
.dark .badge span, .dark .cols .small { color: rgba(255,255,255,.62); }
.dark .badges, .dark .cols, .dark .plans { background: transparent; }
.dark .plain li, .dark .plan ul li { border-color: rgba(255,255,255,.12); }

/* the numbers band continues straight out of the dark hero */
.band-top { padding-top: clamp(40px, 5vw, 72px); }
.dark .badge,
.dark .cols > div,
.dark .plan,
.dark .numbered > div {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}
.dark .badge b, .dark .cols h3 { color: #fff; }
.dark .badge span, .dark .cols .small { color: rgba(255,255,255,.62); }
.dark .badges, .dark .cols, .dark .plans { background: transparent; }
.dark .plain li, .dark .plan ul li { border-color: rgba(255,255,255,.12); }

/* ==========================================================================
   Drawn panel: money leaving one account for three corridors
   ========================================================================== */
.corridor {
  background:
    radial-gradient(120% 100% at 50% 45%, color-mix(in srgb, var(--brand) 9%, transparent) 0%, transparent 62%),
    linear-gradient(160deg, #EDEFF3 0%, #F6F6F5 58%, #FBFAF8 100%);
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.corridor svg { width: 100%; height: 100%; display: block; }
.corridor__dots circle { fill: var(--ink); }

.corridor__arcs path {
  fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round;
  opacity: .18;
}
.corridor__ends circle { fill: var(--brand); opacity: .3; }

/* a payment travelling the corridor */
.corridor__mover {
  fill: var(--brand); opacity: 0;
  offset-rotate: 0deg;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--brand) 55%, transparent));
}
.corridor.is-in .corridor__mover { animation: cor-travel 4.2s cubic-bezier(.5,0,.5,1) infinite; }
.corridor.is-in .corridor__mover--b { animation-delay: 1.4s; }
.corridor.is-in .corridor__mover--c { animation-delay: 2.8s; }
@keyframes cor-travel {
  0%   { offset-distance: 0%;   opacity: 0;   r: 3; }
  12%  { opacity: 1; r: 5; }
  80%  { opacity: 1; r: 5; }
  100% { offset-distance: 100%; opacity: 0; r: 8; }
}

/* the endpoint lights up as its payment lands */
.corridor.is-in .corridor__ends circle { animation: cor-land 4.2s ease-in-out infinite; }
.corridor.is-in .corridor__ends circle.cor-b { animation-delay: 1.4s; }
.corridor.is-in .corridor__ends circle.cor-c { animation-delay: 2.8s; }
@keyframes cor-land {
  0%, 72%  { opacity: .3;  transform: scale(1); }
  84%      { opacity: 1;   transform: scale(1.9); }
  100%     { opacity: .3;  transform: scale(1); }
}
.corridor__ends circle { transform-box: fill-box; transform-origin: center; }

.corridor__hub { fill: var(--ink); }
.corridor__ring { fill: none; stroke: var(--brand); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.corridor.is-in .corridor__ring { animation: cor-ring 4.2s ease-out infinite; }
@keyframes cor-ring {
  0%   { opacity: .55; transform: scale(1); }
  55%  { opacity: 0;   transform: scale(2.6); }
  100% { opacity: 0;   transform: scale(2.6); }
}

.corridor__tag, .corridor__hublabel {
  position: absolute;
  background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 9px 14px; border-radius: 14px; white-space: nowrap; color: var(--ink);
  box-shadow: 0 2px 6px rgba(20,21,26,.07), 0 14px 32px rgba(20,21,26,.12);
  font-size: .7rem; line-height: 1.35; color: var(--ink-3);
}
.corridor__tag b, .corridor__hublabel b {
  display: block; font-size: .84rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
}
.corridor__tag--a { left: 3%;  top: 9%; }
.corridor__tag--b { right: 2%; top: 42%; }
.corridor__tag--c { right: 4%; bottom: 8%; }
.corridor__hublabel {
  left: 50%; top: 58%; transform: translateX(-50%);
  background: var(--ink); border-color: transparent; color: rgba(255,255,255,.6);
  padding: 10px 16px; text-align: center;
}
.corridor__hublabel b { color: #fff; font-variant-numeric: tabular-nums; font-size: .92rem; }
.corridor__hubtop { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 620px) {
  .corridor__tag--b { display: none; }
  .corridor__tag, .corridor__hublabel { font-size: .64rem; padding: 7px 10px; border-radius: 11px; }
  .corridor__tag b, .corridor__hublabel b { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .corridor .corridor__mover, .corridor .corridor__ring { display: none; }
  .corridor .corridor__ends circle { animation: none; opacity: .8; }
  .corridor .corridor__arcs path { opacity: .3; }
}

/* ---------- a thin reading indicator across the top ---------- */
.progress {
  position: fixed; left: 0; top: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--brand); z-index: 200; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .progress { display: none; } }

/* ---------- tiles answer to the cursor ---------- */
.theme-soft .badge, .theme-soft .cols > div, .theme-soft .plans > div {
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.theme-soft .badge:hover, .theme-soft .cols > div:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(20,21,26,.05), 0 18px 40px rgba(20,21,26,.1);
}
.theme-soft .plans > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(20,21,26,.06), 0 26px 60px rgba(20,21,26,.13);
}
.dark .badge:hover, .dark .cols > div:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.09) !important;
}

/* ---------- one treatment over the photography ----------
   A light unifying grade so mixed sources read as one set, plus an inner
   hairline that keeps a pale photo from bleeding into a pale background. */
.theme-soft .split__fig .shot img,
.theme-soft .gallery .shot img,
.theme-soft .close .shot img {
  filter: saturate(.94) contrast(1.03);
  transition: transform .7s cubic-bezier(.2,.7,.3,1), filter .4s ease;
}
.theme-soft .split__fig .shot,
.theme-soft .gallery .shot,
.theme-soft .close .shot { position: relative; }
.theme-soft .split__fig .shot::after,
.theme-soft .gallery .shot::after,
.theme-soft .close .shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(20,21,26,.07);
}
.theme-soft .gallery a:hover .shot img,
.theme-soft .gallery > div:hover .shot img { transform: scale(1.035); filter: saturate(1) contrast(1.03); }
@media (prefers-reduced-motion: reduce) {
  .theme-soft .gallery .shot img { transition: none; }
}

/* ==========================================================================
   The corner card — one quiet invitation, once, and dismissible
   ========================================================================== */
/* the corner card belongs to the same family as the hero notifications:
   frosted, tight, one action — not a pop-up with two competing buttons */
.nudge {
  position: fixed; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px);
  z-index: 120; width: min(316px, calc(100vw - 28px));
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(20,21,26,.08); border-radius: 18px;
  box-shadow: 0 1px 3px rgba(20,21,26,.08), 0 22px 54px rgba(20,21,26,.2);
  padding: 17px 18px 18px; color: var(--ink);
  opacity: 0; transform: translateY(18px) scale(.96);
  transition: opacity .55s cubic-bezier(.16,.84,.24,1), transform .55s cubic-bezier(.16,.84,.24,1);
}
.nudge.is-in { opacity: 1; transform: none; }

.nudge__close {
  position: absolute; top: 12px; right: 12px;
  width: 26px; height: 26px; border-radius: 50%; padding: 0;
  border: 1px solid transparent; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--ink-3);
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.nudge__close svg { width: 13px; height: 13px; }
.nudge__close:hover { background: var(--mist); border-color: rgba(20,21,26,.08); color: var(--ink); }

.nudge__top { display: flex; align-items: center; gap: 10px; padding-right: 30px; }
.nudge__logo {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: .62rem; font-weight: 700;
}
.nudge__src { font-size: .84rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.nudge__src i {
  display: block; font-style: normal; font-size: .72rem; font-weight: 400;
  color: var(--ink-3); margin-top: 2px;
}
.nudge__body {
  font-size: .84rem; line-height: 1.5; color: var(--ink-2);
  margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(20,21,26,.07);
}
.nudge__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 15px; padding: 11px 14px 11px 16px;
  background: var(--ink); color: #fff; border-radius: 12px;
  font-size: .86rem; font-weight: 600; letter-spacing: -.01em;
  transition: background .25s ease;
}
.nudge__cta svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .3s cubic-bezier(.2,.8,.25,1); }
.nudge__cta:hover { background: var(--brand); }
.nudge__cta:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .nudge { transition: none; }
  .nudge__cta svg { transition: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer--dark { background: var(--night); border-top: 0; }
.footer__cta {
  display: flex; flex-wrap: wrap; gap: 28px; align-items: end; justify-content: space-between;
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--on-night-line);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.footer--dark .footer__cta .h2 { color: #fff; }
.footer--dark .footer__cta .label { color: rgba(255,255,255,.5); }
/* the coverage figures read as a small table, not three loose lines */
.footer__facts { margin-top: 24px; display: grid; gap: 0; border-top: 1px solid var(--on-night-line); max-width: 30ch; }
.footer__facts li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--on-night-line);
  font-size: .82rem; color: rgba(255,255,255,.55);
}
.footer__grid .footer__facts li + li { margin-top: 0; }
.footer__facts b { color: #fff; font-weight: 600; min-width: 3.4rem; font-variant-numeric: tabular-nums; }
.footer--dark address { display: block; font-size: .88rem; line-height: 1.6; color: rgba(255,255,255,.6); }
.footer--dark address + address { margin-top: 16px; }
.footer--dark address b {
  display: block; color: #fff; font-weight: 600; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px;
}
.footer__mail { margin-top: 18px; }
.footer__mail a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 2px; }
.footer__mail a:hover { border-bottom-color: #fff; }

.footer__licences {
  margin-top: clamp(36px, 4vw, 52px); padding-top: 30px;
  border-top: 1px solid var(--on-night-line);
}
.footer__licences ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; align-items: stretch; }
.footer__licences li + li { margin-top: 0; }   /* grid items, not a list */
.footer__licences li {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 16px 18px; font-size: .8rem; color: rgba(255,255,255,.58);
  line-height: 1.5;
}
.footer__licences b {
  display: block; color: #fff; font-weight: 600; font-size: .88rem; margin-bottom: 4px; letter-spacing: -.01em;
}
@media (max-width: 780px) { .footer__licences ul { grid-template-columns: 1fr; } }

.footer--dark .footer__legal {
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--on-night-line);
}
.footer--dark .footer__legal p {
  font-size: .78rem; line-height: 1.75; color: rgba(255,255,255,.45); max-width: 92ch;
}
.footer__top { color: rgba(255,255,255,.6); }
.footer__top:hover { color: #fff; }

/* ---------- contact ---------- */
.formcard {
  background: #fff; border: 1px solid rgba(20,21,26,.07); border-radius: var(--r-media);
  box-shadow: 0 2px 6px rgba(20,21,26,.05), 0 24px 56px rgba(20,21,26,.09);
  padding: clamp(26px, 3vw, 40px);
}
.formcard .field input, .formcard .field select, .formcard .field textarea {
  border: 1px solid rgba(20,21,26,.12); border-radius: 12px; padding: 13px 14px; background: #FCFCFB;
}
.formcard .field input:focus, .formcard .field select:focus, .formcard .field textarea:focus {
  border-color: var(--line);
  border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
}
.formcard .btn { border-radius: 999px; }
.office {
  background: #fff; border: 1px solid rgba(20,21,26,.07); border-radius: var(--r-media);
  box-shadow: 0 1px 2px rgba(20,21,26,.04), 0 12px 30px rgba(20,21,26,.06);
  padding: clamp(26px, 3vw, 36px);
}
.office__city {
  font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; margin-bottom: 14px;
}
.office address { font-style: normal; line-height: 1.7; color: var(--ink-2); font-size: .95rem; }
.office .plain { margin-top: 22px; }
.office .plain li { font-size: .9rem; padding: 12px 0; }

/* ---------- simple column utilities ---------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }
.offices { gap: 16px; }


/* ==========================================================================
   Front page, second half — added in the premium pass
   ========================================================================== */

/* ---------- how it works: three steps on a rail ---------- */
.steps__head {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 22px clamp(32px, 6vw, 80px); align-items: end;
}
@media (max-width: 860px) { .steps__head { grid-template-columns: 1fr; } }

.steps {
  --sgap: clamp(18px, 2.4vw, 30px);
  --half: calc((100% - 2 * var(--sgap)) / 6);   /* half a column */
  position: relative; list-style: none; margin: clamp(44px, 6vw, 68px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sgap);
}
/* the rail the three medallions are threaded on */
.steps::before,
.steps::after {
  content: ""; position: absolute; top: 27px; height: 1px;
  pointer-events: none;
}
/* the medallions sit centred over their card, so the rail runs from the centre
   of the first column to the centre of the last */
.steps::before {
  left: var(--half); right: var(--half);
  background: var(--line);
}
/* the fill shares the track's own left and right, then scales into view, so
   it can never stop short of the last medallion however wide the row gets */
.steps::after {
  left: var(--half); right: var(--half);
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--brand) 45%, transparent) 0%,
              var(--brand) 18%, var(--brand) 100%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.7s cubic-bezier(.22,.75,.25,1);
}
.steps.is-in::after { transform: scaleX(1); }

.step { position: relative; display: grid; grid-template-rows: auto 1fr; justify-items: center; }
.step__no {
  position: relative; z-index: 2;
  width: 54px; height: 54px; border-radius: 17px;
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
  font-size: .84rem; font-weight: 700; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(20,21,26,.08), 0 8px 20px rgba(20,21,26,.07);
  margin-bottom: 22px;
  transition: background .4s ease, transform .4s cubic-bezier(.2,.8,.25,1);
}
.steps.is-in .step:nth-child(1) .step__no { background: var(--brand); }
.steps.is-in .step:nth-child(2) .step__no { background: var(--brand); transition-delay: .5s; }
.steps.is-in .step:nth-child(3) .step__no { background: var(--brand); transition-delay: 1s; }

.step__card {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 28px 28px 26px; height: 100%; width: 100%; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 1px 2px rgba(20,21,26,.04);
  transition: transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .4s ease, border-color .4s ease;
}
.step:hover .step__card {
  transform: translateY(-4px);
  border-color: rgba(20,21,26,.14);
  box-shadow: 0 20px 46px rgba(20,21,26,.09);
}
.step:hover .step__no { transform: translateY(-4px); }
.step__card h3 { margin-bottom: 10px; }
.step__card p { color: var(--ink-2); font-size: .96rem; max-width: 30ch; }
/* pushed to the bottom, so the chips line up across all three cards */
.step__time {
  margin-top: auto; padding-top: 22px; align-self: center;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--mist); color: var(--ink-2);
  font-size: .76rem; font-weight: 600; letter-spacing: .01em;
  padding: 6px 12px; border-radius: 999px;
}
.step__time::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); flex: 0 0 auto;
}
@media (max-width: 780px) {
  .steps { grid-template-columns: 1fr; gap: 20px; }
  .steps::before, .steps::after { display: none; }
  .step__no { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .steps::after { transition: none; transform: scaleX(1); }
  .step__no, .step__card { transition: none; }
}

/* ---------- numbered lists: same medallion vocabulary ---------- */
.numbered > div { position: relative; }
.numbered span {
  width: 40px; height: 40px; border-radius: 13px; padding-top: 0;
  display: grid; place-items: center;
  background: var(--mist); color: var(--ink);
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
}
.dark .numbered span { background: rgba(255,255,255,.09); color: #fff; }
.mist .numbered span { background: #fff; border: 1px solid var(--line); }

/* ---------- built for: use-case cards ---------- */
.usecases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
@media (max-width: 860px) { .usecases { grid-template-columns: 1fr; } }

.usecase {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 24px;
  overflow: hidden; color: inherit;
  box-shadow: 0 1px 2px rgba(20,21,26,.04);
  transition: transform .45s cubic-bezier(.2,.8,.25,1), box-shadow .45s ease, border-color .45s ease;
}
.usecase:hover { transform: translateY(-5px); border-color: rgba(20,21,26,.14); box-shadow: 0 26px 56px rgba(20,21,26,.11); }
.usecase__media { position: relative; overflow: hidden; }
.usecase__media .shot { border-radius: 0; }
.usecase__media img { transition: transform 1s cubic-bezier(.2,.8,.25,1); }
.usecase:hover .usecase__media img { transform: scale(1.045); }
.usecase__chip {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px; padding: 8px 14px;
  font-size: .76rem; font-weight: 700; letter-spacing: .01em; color: var(--ink);
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}
.usecase__chip svg { width: 14px; height: 14px; fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.usecase__body { padding: 26px 26px 24px; display: flex; flex-direction: column; flex: 1; }
.usecase__body h3 { margin-bottom: 9px; }
.usecase__body p { color: var(--ink-2); font-size: .95rem; }
.usecase__go {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 9px;
  font-size: .88rem; font-weight: 700; color: var(--brand);
}
.usecase__go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.2,.8,.25,1); }
.usecase:hover .usecase__go svg { transform: translateX(5px); }

/* ---------- dark capability band ---------- */
.caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--on-night-line, rgba(255,255,255,.14)); border-top: 1px solid var(--on-night-line, rgba(255,255,255,.14)); }
.caps > div { background: var(--night, #14171A); padding: 30px 26px 34px; }
.caps__icon {
  width: 40px; height: 40px; border-radius: 13px; margin-bottom: 20px;
  display: grid; place-items: center; background: rgba(255,255,255,.08);
}
.caps__icon svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.caps h3 { margin-bottom: 10px; color: #fff; }
.caps p { color: rgba(255,255,255,.62); font-size: .93rem; }
@media (max-width: 900px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .caps { grid-template-columns: 1fr; } }

/* ---------- the currency rail ---------- */
.ticker {
  margin-top: clamp(40px, 6vw, 68px); overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker__row { display: flex; width: max-content; animation: tick 46s linear infinite; }
.ticker__row > span {
  display: inline-flex; align-items: center; gap: 12px;
  padding-right: 34px; white-space: nowrap;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem); font-weight: 500; letter-spacing: .01em;
  color: rgba(255,255,255,.42);
  font-variant-numeric: tabular-nums;
}
.ticker__row > span::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.24); margin-left: 22px;
}
.ticker__row > span.is-hot { color: #fff; }
@keyframes tick { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .ticker__row { animation: none; } }

/* ---------- plans: the small premium touches ---------- */
.plan { position: relative; }
/* the ribbon marks the card; a straight bar across a 28px radius only ever
   looks like it is floating free of the corners */
.plan.is-featured::before { content: none; }
/* a ribbon straddling the top edge: out of flow, so all three plan names stay
   on the same line */
.plan__tag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  white-space: nowrap;
  background: var(--brand); color: #fff; border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 14px; line-height: 1.4;
  box-shadow: 0 6px 18px rgba(27,77,255,.32);
}
/* one line or two, every card's feature list starts at the same height */

.plan ul li { display: flex; align-items: flex-start; gap: 11px; }
.plan ul li::before {
  content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 5px;
  border-radius: 50%; background: var(--brand);
  -webkit-mask: no-repeat center / 9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.4 4.3 9.6 11 2.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask: no-repeat center / 9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.4 4.3 9.6 11 2.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-color: var(--brand);
}
.plans__note { margin-top: 26px; color: var(--ink-3); font-size: .88rem; }

/* ---------- closing block: the trust row ---------- */
.trustrow {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px;
}
.trustrow span {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font-size: .8rem; font-weight: 600; color: var(--ink-2);
  background: #fff;
}
.trustrow span::before {
  content: ""; width: 15px; height: 15px; flex: 0 0 auto; border-radius: 50%;
  background-color: var(--brand);
  -webkit-mask: no-repeat center / 9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.4 4.3 9.6 11 2.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask: no-repeat center / 9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.4 4.3 9.6 11 2.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- the ninth hero card, on the open right-hand side ---------- */
.ncard--i {
  position: absolute; z-index: 4; top: 38%;
  /* anchored to the wrap, but never allowed into the column the grid uses */
  right: min(max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad))), calc(34vw - 300px));
  width: clamp(214px, 16.6vw, 252px);
}
.ncard--i.is-in { transform: translate(0, -9px); }
@media (max-width: 1080px) { .ncard--i { display: none; } }
@media (min-width: 1081px) and (max-height: 820px) { .ncard--i { top: 30%; } }
/* the short hero's band is ~120px tall and a full card is 187px, so the
   ninth card cannot fit there. The subpages spread pills instead. */
.hero-z--short .ncard--i { display: none; }


/* ---------- three quiet lines under a short piece of copy ---------- */
.minilist { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); margin-top: 30px; }
.minilist > div { background: var(--paper); padding: 18px 2px 18px 0; display: flex; align-items: baseline; gap: 16px; }
.mist .minilist > div { background: var(--mist); }
.minilist b { flex: 0 0 auto; min-width: 8.5rem; font-size: .95rem; font-weight: 600; color: var(--ink); }
.minilist span { font-size: .93rem; color: var(--ink-2); }
@media (max-width: 520px) { .minilist > div { display: block; } .minilist b { display: block; margin-bottom: 4px; } }

.tp-filters { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ==========================================================================
   The OTC desk and the pricing comparison
   ========================================================================== */

/* ---------- the quote ticket: the figure the desk actually hands over ---- */
.ticket {
  margin: 0; position: relative; overflow: hidden;
  background-color: #101318;   /* a solid ground under the gradient */
  background-image: linear-gradient(160deg, #1B1F26 0%, #101318 62%, #0C0F13 100%);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-media, 28px);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 2px 8px rgba(12,15,19,.2), 0 30px 70px rgba(12,15,19,.28);
  color: #fff;
}
.ticket::before {
  content: ""; position: absolute; inset: -40% 40% 55% -30%;
  background: radial-gradient(closest-side, rgba(27,77,255,.35), transparent 70%);
  pointer-events: none;
}
.ticket > * { position: relative; }
.ticket__head { display: flex; align-items: center; gap: 11px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.ticket__mark {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  background: var(--brand); display: grid; place-items: center;
  font-size: .62rem; font-weight: 700; letter-spacing: .02em;
}
.ticket__title { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.78); }
.ticket__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #34D07F;
}
.ticket__live i { width: 7px; height: 7px; border-radius: 50%; background: #34D07F; animation: tpulse 1.9s ease-in-out infinite; }
@keyframes tpulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }

.ticket__legs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; padding: 28px 0; }
/* the label only — not the <span> the counter writes into */
.ticket__leg > span { display: block; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 9px; }
.ticket__leg b {
  display: block; font-size: clamp(1.05rem, 1.9vw, 1.45rem); font-weight: 600;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15;
  white-space: nowrap;
}
.ticket__leg b em { font-style: normal; font-size: .74em; font-weight: 600; color: rgba(255,255,255,.62); margin-left: 3px; }
.ticket__leg--in b { color: #fff; }
.ticket__arrow { color: rgba(255,255,255,.34); display: grid; place-items: center; }
.ticket__arrow svg { width: 22px; height: 22px; }

.ticket__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; background: rgba(255,255,255,.1); border-radius: 14px; overflow: hidden; }
.ticket__meta > div { background: #12151A; padding: 15px 16px; }
.ticket__meta dt { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.44); }
.ticket__meta dd { margin: 6px 0 0; font-size: .94rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.ticket__foot {
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  margin-top: 22px; font-size: .76rem; color: rgba(255,255,255,.5);
}
.ticket__foot b { color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .ticket__legs { grid-template-columns: 1fr; gap: 14px; }
  .ticket__arrow { transform: rotate(90deg); justify-self: start; }
  .ticket__meta { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ticket__live i { animation: none; } }

/* ---------- the capability band, on a light ground ---------- */
.caps--light { background: var(--line); border-top-color: var(--line); }
.caps--light > div { background: var(--paper); }
.caps--light .caps__icon { background: var(--mist); }
.caps--light .caps__icon svg { stroke: var(--brand); }
.caps--light h3 { color: var(--ink); min-height: 2.2em; }
.caps--light p { color: var(--ink-2); }
.mist .caps--light > div { background: var(--mist); }
.theme-soft .caps--light { background: transparent; border-top: 0; gap: 16px; }
.theme-soft .caps--light > div {
  background: #fff; border: 1px solid rgba(20,21,26,.07); border-radius: var(--r-card, 22px);
  box-shadow: 0 1px 2px rgba(20,21,26,.04), 0 10px 26px rgba(20,21,26,.05);
  padding: 26px 24px 30px;
}

/* ---------- the supported-asset row ---------- */
.assets { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.assets__row { display: flex; flex-wrap: wrap; gap: 8px; }
.assets__row span {
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  padding: 7px 14px; font-size: .8rem; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- pricing: the rails and the comparison ---------- */
.railchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.railchips span {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  padding: 8px 14px; font-size: .8rem; font-weight: 600; color: var(--ink-2);
}
.railchips span::before {
  content: ""; width: 15px; height: 15px; flex: 0 0 auto; border-radius: 50%;
  background-color: var(--brand);
  -webkit-mask: no-repeat center / 9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.4 4.3 9.6 11 2.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask: no-repeat center / 9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.4 4.3 9.6 11 2.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.rails {
  background: #fff; border: 1px solid rgba(20,21,26,.07); border-radius: var(--r-media, 28px);
  box-shadow: 0 1px 2px rgba(20,21,26,.04), 0 14px 36px rgba(20,21,26,.06);
  overflow: hidden;
}
.rails__head, .rails__row {
  display: grid; grid-template-columns: minmax(0, 1.05fr) 74px minmax(0, 1.5fr);
  gap: 16px; align-items: center; padding: 16px clamp(18px, 2.2vw, 26px);
}
.rails__head {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-3); background: var(--mist); padding-block: 13px;
}
.rails__row { border-top: 1px solid rgba(20,21,26,.07); transition: background .25s ease; }
.rails__row:hover { background: var(--mist); }
/* the six-currency plans get a brand rule down the edge rather than a cool
   wash that fights the warm off-white the rest of the site is built on */
.rails__row.is-wide {
  background: #fff;
  background: color-mix(in srgb, var(--mist) 45%, #fff);
  box-shadow: inset 3px 0 0 var(--brand);
}
.rails__row.is-wide:hover { background: var(--mist); }
.rails__plan b { display: block; font-size: .98rem; font-weight: 600; letter-spacing: -.01em; }
.rails__plan span { display: block; font-size: .74rem; color: var(--ink-3); margin-top: 2px; }
.rails__n {
  justify-self: start; min-width: 40px; text-align: center;
  background: var(--mist); border-radius: 11px; padding: 7px 12px;
}
.rails__n b { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rails__ccy { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rails__ccy span {
  border: 1px solid var(--line); border-radius: 7px; background: var(--paper);
  padding: 4px 8px; font-size: .74rem; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.rails__row.is-wide .rails__ccy span { background: #fff; border-color: color-mix(in srgb, var(--brand) 26%, var(--line)); color: var(--ink); }
.rails__ccy i { font-style: normal; font-size: .72rem; color: var(--ink-3); margin-left: 2px; }
@media (max-width: 620px) {
  .rails__head { display: none; }
  .rails__row { grid-template-columns: 1fr auto; row-gap: 12px; }
  .rails__ccy { grid-column: 1 / -1; }
}


/* ---------- the accordion, as cards rather than a bare list ---------- */
.theme-soft .acc { border-top: 0; display: grid; gap: 12px; }
.theme-soft .acc details {
  border-bottom: 0; background: #fff; border: 1px solid rgba(20,21,26,.07);
  border-radius: 18px; overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.theme-soft .acc details[open] {
  border-color: rgba(20,21,26,.12);
  box-shadow: 0 1px 2px rgba(20,21,26,.04), 0 14px 34px rgba(20,21,26,.06);
}
.theme-soft .acc summary { padding: 22px 60px 22px 24px; font-size: 1.02rem; font-weight: 500; }
.theme-soft .acc summary::after {
  right: 24px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: var(--mist);
  display: grid; place-items: center; font-size: 1.05rem; line-height: 1;
  content: "+"; color: var(--ink-2);
  transition: background .25s ease, color .25s ease;
}
.theme-soft .acc details[open] summary::after { content: "\2013"; background: var(--brand); color: #fff; }
.theme-soft .acc summary:hover::after { background: var(--brand); color: #fff; }
.theme-soft .acc p { padding: 0 60px 24px 24px; }


/* ==========================================================================
   Drawn panels — the same family as the corridor and the quote ticket
   ========================================================================== */
.panel {
  margin: 0; position: relative;
  background: #fff; border: 1px solid rgba(20,21,26,.08);
  border-radius: var(--r-media, 28px); overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,21,26,.04), 0 26px 60px rgba(20,21,26,.09);
}
.panel__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; background: var(--mist);
  border-bottom: 1px solid rgba(20,21,26,.07);
}
.panel__dots { display: flex; gap: 6px; }
.panel__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(20,21,26,.14); }
.panel__url {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid rgba(20,21,26,.07); border-radius: 999px;
  padding: 5px 14px; font-size: .74rem; font-weight: 600; color: var(--ink-3);
}
.panel__url svg { width: 12px; height: 12px; }

/* ---------- the hosted checkout ---------- */
.checkout__body { padding: clamp(20px, 2.6vw, 28px); }
.checkout__top { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.checkout__brand {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  font-size: .7rem; font-weight: 700;
}
.checkout__shop { font-size: .9rem; font-weight: 600; }
.checkout__shop i { display: block; font-style: normal; font-size: .74rem; font-weight: 400; color: var(--ink-3); margin-top: 2px; }
.checkout__total { margin-left: auto; text-align: right; }
.checkout__total i { display: block; font-style: normal; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.checkout__total b { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.checkout__field {
  display: block; position: relative; margin-top: 16px;
  border: 1px solid var(--line); border-radius: 13px; padding: 11px 15px; background: var(--paper);
}
.checkout__field span { display: block; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.checkout__field b { display: block; margin-top: 4px; font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.checkout__field--card { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 11%, transparent); }
.checkout__field em {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: .06em;
  color: #1A1F71; background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 4px 7px;
}
.checkout__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkout__pair .checkout__field { margin-top: 12px; }

.checkout__cta { position: relative; margin-top: 20px; height: 48px; }
.checkout__pay, .checkout__done {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 999px; font-size: .95rem; font-weight: 700;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.25,1);
}
.checkout__pay { background: var(--brand); color: #fff; overflow: hidden; }
.checkout__pay i {
  position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255,255,255,.22);
}
.checkout__done { background: #0F9D58; color: #fff; opacity: 0; transform: scale(.96);
  display: flex; align-items: center; justify-content: center; gap: 10px; }
.checkout__done svg { width: 17px; height: 17px; }
.checkout.is-in .checkout__pay i { animation: cofill 6s cubic-bezier(.4,0,.2,1) infinite; }
.checkout.is-in .checkout__pay { animation: cohide 6s steps(1, end) infinite; }
.checkout.is-in .checkout__done { animation: coshow 6s ease infinite; }
@keyframes cofill { 0%,18% { width: 0; } 38%,58% { width: 100%; } 59%,100% { width: 0; } }
@keyframes cohide { 0%,58% { opacity: 1; } 59%,88% { opacity: 0; } 89%,100% { opacity: 1; } }
@keyframes coshow {
  0%,57% { opacity: 0; transform: scale(.96); }
  62%,86% { opacity: 1; transform: scale(1); }
  92%,100% { opacity: 0; transform: scale(.96); }
}
.checkout__foot { margin-top: 14px; text-align: center; font-size: .74rem; color: var(--ink-3); }

/* ---------- tap to pay on the phone you own ---------- */
.tappay {
  background: linear-gradient(165deg, var(--mist) 0%, #fff 60%);
  border-radius: var(--r-media, 28px); overflow: visible;
  display: grid; place-items: center; padding: clamp(30px, 4vw, 52px) 20px;
  box-shadow: 0 1px 2px rgba(20,21,26,.04), 0 22px 52px rgba(20,21,26,.07);
}
.tappay__phone {
  position: relative; width: min(232px, 62%); aspect-ratio: 9 / 18.5;
  background: #14171A; border-radius: 34px; padding: 9px;
  box-shadow: 0 3px 10px rgba(20,21,26,.2), 0 30px 60px rgba(20,21,26,.26);
}
.tappay__phone::before {
  content: ""; position: absolute; left: 50%; top: 17px; transform: translateX(-50%);
  width: 58px; height: 17px; border-radius: 999px; background: #14171A; z-index: 3;
}
.tappay__screen {
  position: relative; height: 100%; border-radius: 26px; overflow: hidden;
  background: linear-gradient(175deg, #1D439C 0%, #142E6E 100%);
  color: #fff; display: flex; flex-direction: column; align-items: center;
  /* the content sits in the lower half so the incoming card has clear space */
  justify-content: flex-end; text-align: center; padding: 26px 18px 40px;
}
.tappay__label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.tappay__amt { display: block; margin-top: 8px; font-size: 1.65rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tappay__wave { position: relative; width: 74px; height: 74px; margin: 22px 0 18px; }
.tappay__wave i {
  position: absolute; inset: 0; margin: auto; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.75); width: 22px; height: 22px; opacity: 0;
}
.tappay.is-in .tappay__wave i { animation: twave 2.6s ease-out infinite; }
.tappay.is-in .tappay__wave i:nth-child(2) { animation-delay: .55s; }
.tappay.is-in .tappay__wave i:nth-child(3) { animation-delay: 1.1s; }
@keyframes twave {
  0% { width: 20px; height: 20px; opacity: 0; }
  22% { opacity: .95; }
  100% { width: 74px; height: 74px; opacity: 0; }
}
.tappay__hint { font-size: .72rem; line-height: 1.45; color: rgba(255,255,255,.72); max-width: 20ch; }
.tappay__ok {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: #0F9D58; opacity: 0;
}
.tappay__ok svg { width: 34px; height: 34px; }
.tappay__ok span { font-size: .92rem; font-weight: 700; }
.tappay.is-in .tappay__ok { animation: tok 7.8s ease infinite; }
@keyframes tok { 0%,70% { opacity: 0; } 76%,92% { opacity: 1; } 97%,100% { opacity: 0; } }

.tappay__card {
  position: absolute; right: clamp(-6px, 2vw, 34px); top: 26%;
  width: min(178px, 44%); aspect-ratio: 1.586;
  background: linear-gradient(140deg, #23272E 0%, #14171A 100%);
  border-radius: 13px; padding: 14px; color: rgba(255,255,255,.7);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 3px 10px rgba(20,21,26,.18), 0 22px 44px rgba(20,21,26,.24);
  transform: rotate(-9deg);
}
.tappay.is-in .tappay__card { animation: tcard 7.8s ease-in-out infinite; }
@keyframes tcard {
  0%,10% { transform: rotate(-9deg) translate(0,0); }
  30%,62% { transform: rotate(-6deg) translate(-14px,6px); }
  82%,100% { transform: rotate(-9deg) translate(0,0); }
}
.tappay__chip { width: 30px; height: 22px; border-radius: 5px; background: linear-gradient(140deg,#D9B45B,#A8813A); }
.tappay__brand { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 620px) { .tappay__card { right: 4px; width: 40%; } }

/* ---------- one screen, every currency ---------- */
.bal__body { padding: clamp(20px, 2.6vw, 28px); }
.bal__top { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.bal__top > span { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.bal__top b { display: block; margin-top: 7px; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.bal__top i { display: block; font-style: normal; margin-top: 6px; font-size: .74rem; color: var(--ink-3); }
.bal__list { margin: 0; padding: 0; list-style: none; }
.bal__list li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 4px 12px; padding: 15px 0; border-bottom: 1px solid var(--line);
}
.bal__list li:last-child { border-bottom: 0; padding-bottom: 4px; }
.bal__code {
  border: 1px solid var(--line); border-radius: 7px; background: var(--paper);
  padding: 4px 8px; font-size: .72rem; font-weight: 700; color: var(--ink-2);
}
.bal__city { font-size: .86rem; color: var(--ink-3); }
.bal__amt { font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bal__bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bal__bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--brand); transition: width 1.3s cubic-bezier(.22,.75,.25,1); }
.balances.is-in .bal__bar i { width: var(--w); }
.balances.is-in li:nth-child(2) .bal__bar i { transition-delay: .1s; }
.balances.is-in li:nth-child(3) .bal__bar i { transition-delay: .2s; }
.balances.is-in li:nth-child(4) .bal__bar i { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .checkout.is-in .checkout__pay, .checkout.is-in .checkout__pay i,
  .checkout.is-in .checkout__done, .tappay.is-in .tappay__wave i,
  .tappay.is-in .tappay__ok, .tappay.is-in .tappay__card { animation: none; }
  .bal__bar i { transition: none; }
}


/* ==========================================================================
   Pricing
   ========================================================================== */
.pricehead { max-width: 780px; text-align: center; }
.pricehead .lede { margin: 18px auto 0; max-width: 62ch; }
.pricehead .h2 { max-width: 18ch; margin-inline: auto; }

/* a segmented control, not two underlined words */
.segbar {
  display: inline-flex; gap: 4px; margin-top: 34px;
  background: var(--mist); border-radius: 999px; padding: 5px;
  border: 1px solid rgba(20,21,26,.05);
}
.segbar button {
  border: 0; background: none; cursor: pointer;
  padding: 11px 30px; border-radius: 999px;
  font-size: .96rem; font-weight: 600; color: var(--ink-2);
  transition: background .28s ease, color .28s ease, box-shadow .28s ease;
}
.segbar button:hover { color: var(--ink); }
.segbar button[aria-selected="true"] {
  background: #fff; color: var(--ink);
  box-shadow: 0 1px 2px rgba(20,21,26,.07), 0 6px 16px rgba(20,21,26,.08);
}

/* the currency allowance, as one soft chip */
.slots { display: block; margin-top: 20px; }
.slots__chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff;
  background: color-mix(in srgb, var(--brand) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: 999px; padding: 9px 16px;
  font-size: .84rem; font-weight: 600; color: var(--brand-deep); line-height: 1.3;
}
.slots__chip svg { width: 15px; height: 15px; flex: 0 0 auto; stroke: var(--brand); }
.slots__chip--all {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.slots__chip--all svg { stroke: #fff; }
.plan ul { margin-top: 24px; }


/* ---------- before and after, side by side ---------- */
.versus {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(14px, 2vw, 26px);
  align-items: stretch; margin-top: clamp(40px, 5vw, 60px);
}
.versus__col {
  border-radius: var(--r-media, 28px); padding: clamp(24px, 2.8vw, 34px);
  border: 1px solid rgba(20,21,26,.07);
}
.versus__col--before { background: var(--mist); }
.versus__col--after {
  background: #fff;
  box-shadow: 0 1px 2px rgba(20,21,26,.04), 0 22px 52px rgba(20,21,26,.08);
  border-color: rgba(20,21,26,.1);
}
.versus__head {
  font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em;
  padding-bottom: 18px; margin-bottom: 6px; border-bottom: 1px solid rgba(20,21,26,.08);
}
.versus__col--before .versus__head { color: var(--ink-3); }
.versus ul { margin: 0; padding: 0; list-style: none; }
.versus li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 0; font-size: .95rem; line-height: 1.5;
  border-bottom: 1px solid rgba(20,21,26,.06);
}
.versus li:last-child { border-bottom: 0; padding-bottom: 0; }
.versus li::before {
  content: ""; flex: 0 0 auto; width: 17px; height: 17px; margin-top: 4px; border-radius: 50%;
}
.versus__col--before li { color: var(--ink-3); }
.versus__col--before li::before {
  background-color: rgba(20,21,26,.24);
  -webkit-mask: no-repeat center / 8px 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2 10 10M10 2 2 10' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
          mask: no-repeat center / 8px 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2 10 10M10 2 2 10' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.versus__col--after li { color: var(--ink-2); }
.versus__col--after li::before {
  background-color: var(--brand);
  -webkit-mask: no-repeat center / 9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.4 4.3 9.6 11 2.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask: no-repeat center / 9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.4 4.3 9.6 11 2.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.versus__mid {
  align-self: center; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: #fff; flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(20,21,26,.14), 0 12px 26px rgba(20,21,26,.12);
}
.versus__mid svg { width: 20px; height: 20px; }
.versus.is-in .versus__col--after { animation: vlift .8s cubic-bezier(.2,.8,.25,1) both; }
@keyframes vlift { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 860px) {
  .versus { grid-template-columns: 1fr; }
  .versus__mid { transform: rotate(90deg); justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { .versus.is-in .versus__col--after { animation: none; } }


/* ---------- plan cards, matching the real product ---------- */
/* two lines reserved, so the price sits on the same line in all three cards */
.plan__sub { margin-top: 8px; font-size: .92rem; color: var(--ink-2); min-height: 2.95em; }
.plan__price { margin-top: 16px; }
.plan__billing { display: block; margin-top: 6px; font-size: .76rem; color: var(--ink-3); }
.rails__pill {
  border-radius: 999px !important; padding: 6px 13px !important;
  font-size: .78rem !important; background: var(--paper);
}
.rails__pill--all {
  background: #fff;
  background: color-mix(in srgb, var(--brand) 10%, #fff) !important;
  border-color: var(--line);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line)) !important;
  color: var(--brand-deep) !important;
}


/* ---------- the six rails, said properly rather than tabulated twice ------ */
.railgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: rgba(20,21,26,.09);
  border-block: 1px solid rgba(20,21,26,.09);
  margin-top: clamp(40px, 5vw, 60px);
}
.railgrid > div {
  background: var(--mist); padding: 30px clamp(20px, 2.2vw, 30px) 34px;
  transition: background .3s ease;
}
.railgrid > div:hover { background: #fff; }
.railgrid__n {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  color: var(--brand); font-variant-numeric: tabular-nums; margin-bottom: 16px;
}
.railgrid h3 { margin-bottom: 10px; }
.railgrid p { font-size: .93rem; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) { .railgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .railgrid { grid-template-columns: 1fr; } }


/* ---------- the payment link, as it actually happens ---------- */
.chanrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chanrow span {
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  padding: 7px 14px; font-size: .8rem; font-weight: 600; color: var(--ink-2);
}
.mist .chanrow span { background: #fff; }

.paylink__thread { padding: clamp(20px, 2.6vw, 28px); display: grid; gap: 14px; }
.paylink__msg { max-width: 88%; border-radius: 18px; padding: 15px 17px; }
.paylink__msg p { font-size: .92rem; line-height: 1.5; }
.paylink__who { display: block; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 7px; }
.paylink__msg--out { justify-self: end; background: var(--brand); color: #fff; border-bottom-right-radius: 6px; }
.paylink__msg--out .paylink__who { color: rgba(255,255,255,.62); }
.paylink__msg--in { justify-self: start; background: var(--mist); color: var(--ink); border-bottom-left-radius: 6px; }
.paylink__msg--in .paylink__who { color: var(--ink-3); }
.paylink__card {
  display: flex; align-items: center; gap: 11px; margin-top: 13px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  border-radius: 13px; padding: 11px 13px;
}
.paylink__mark {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; background: #fff;
  color: var(--brand); display: grid; place-items: center; font-size: .64rem; font-weight: 800;
}
.paylink__meta { display: block; font-size: .74rem; color: rgba(255,255,255,.8); line-height: 1.35; }
.paylink__meta b { display: block; font-size: .98rem; color: #fff; font-variant-numeric: tabular-nums; margin-top: 2px; }
.paylink__receipt {
  display: flex; align-items: center; gap: 12px; margin-top: 4px;
  background: #fff;
  background: color-mix(in srgb, #0F9D58 8%, #fff);
  border: 1px solid color-mix(in srgb, #0F9D58 26%, var(--line));
  border-radius: 16px; padding: 15px 17px;
}
.paylink__receipt svg { width: 20px; height: 20px; flex: 0 0 auto; color: #0F9D58; }
.paylink__receipt span { font-size: .8rem; color: var(--ink-2); line-height: 1.4; }
.paylink__receipt b { display: block; font-size: .95rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.paylink .paylink__msg, .paylink .paylink__receipt { opacity: 0; transform: translateY(12px); }
.paylink.is-in .paylink__msg, .paylink.is-in .paylink__receipt {
  animation: plin .65s cubic-bezier(.2,.8,.25,1) both;
}
.paylink.is-in .paylink__msg--in { animation-delay: .5s; }
.paylink.is-in .paylink__receipt { animation-delay: 1s; }
@keyframes plin { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .paylink .paylink__msg, .paylink .paylink__receipt { opacity: 1; transform: none; animation: none; }
}





/* ==========================================================================
   The fee schedule: an access strip, the per-currency tariff, then the
   figures people actually ask for.
   ========================================================================== */
.accessbar {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: rgba(20,21,26,.09);
  border: 1px solid rgba(20,21,26,.09); border-radius: 20px; overflow: hidden;
  margin-top: clamp(34px, 4vw, 46px);
}
.accessbar > div { background: #fff; padding: 20px clamp(18px, 2vw, 26px) 22px; }
.accessbar span { display: block; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.accessbar b { display: block; margin-top: 7px; font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .accessbar { grid-template-columns: 1fr; } }

.ledger {
  margin-top: 18px; background: #fff;
  border: 1px solid rgba(20,21,26,.07); border-radius: var(--r-media, 28px);
  box-shadow: 0 1px 2px rgba(20,21,26,.04), 0 18px 44px rgba(20,21,26,.06);
  overflow: hidden;
}
.ledger__head, .ledger__row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px; align-items: center; padding: 0 clamp(20px, 2.6vw, 34px);
}
.ledger__head {
  padding-block: 15px; background: var(--mist);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-3);
}
.ledger__head span:not(:first-child), .ledger__v { text-align: right; }
.ledger__row {
  padding-block: 20px; border-top: 1px solid rgba(20,21,26,.07);
  transition: background .22s ease;
}
.ledger__row:hover { background: var(--mist); }
.ledger__ccy { display: flex; align-items: baseline; gap: 12px; }
.ledger__ccy b {
  font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; background: var(--paper);
}
.ledger__ccy i { font-style: normal; font-size: .9rem; color: var(--ink-3); }
.ledger__v {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
  font-feature-settings: "tnum" 1;
}
.ledger__v i.cap { display: none; }
@media (max-width: 640px) {
  .ledger__head { display: none; }
  .ledger__row { grid-template-columns: 1fr 1fr; gap: 8px 16px; padding-block: 18px; }
  .ledger__ccy { grid-column: 1 / -1; }
  .ledger__v { text-align: left; font-size: 1.05rem; }
  .ledger__v i.cap {
    display: block; font-style: normal; font-size: .68rem; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 3px;
  }
}

.figtiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: rgba(20,21,26,.09);
  border: 1px solid rgba(20,21,26,.09); border-radius: 20px; overflow: hidden;
  margin-top: 18px;
}
.figtiles > div { background: #fff; padding: 26px clamp(18px, 2vw, 26px) 30px; transition: background .25s ease; }
.figtiles > div:hover { background: var(--mist); }
.figtile__n {
  display: block; font-size: clamp(1.6rem, 2.6vw, 2.05rem); font-weight: 600;
  letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums;
}
.figtile__l { display: block; margin-top: 12px; font-size: .9rem; font-weight: 600; }
.figtiles p { margin-top: 8px; font-size: .84rem; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 900px) { .figtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .figtiles { grid-template-columns: 1fr; } }

.feefoot { margin-top: 26px; font-size: .84rem; line-height: 1.65; color: var(--ink-3); max-width: 82ch; }


/* ---------- in-page anchors clear the sticky bar ---------- */
:target, [id] { scroll-margin-top: 104px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* the fee panels change over rather than snapping */
[data-plan-group] { animation: planin .45s cubic-bezier(.2,.8,.25,1) both; }
@keyframes planin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { [data-plan-group] { animation: none; } }


/* ---------- a hero without a photograph ---------- */
.hero-z__wash {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(115% 85% at 76% 14%, color-mix(in srgb, var(--brand) 46%, transparent), transparent 62%),
    radial-gradient(85% 65% at 10% 96%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 60%),
    linear-gradient(158deg, #191D25 0%, #0E1116 60%, #0A0C10 100%);
}
.hero-z__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(85% 70% at 70% 22%, #000 0%, transparent 78%);
          mask-image: radial-gradient(85% 70% at 70% 22%, #000 0%, transparent 78%);
}
.hero-z:has(.hero-z__wash) .hero-z__scrim { opacity: .45; }

/* ---------- the tariff figures, properly typeset ---------- */



/* ---------- the QR side of a payment link ---------- */
.qrcard {
  display: flex; align-items: center; gap: clamp(18px, 2vw, 26px);
  margin-top: 30px; padding: clamp(20px, 2.2vw, 26px);
  background: #fff; border: 1px solid rgba(20,21,26,.07); border-radius: 22px;
  box-shadow: 0 1px 2px rgba(20,21,26,.04), 0 14px 34px rgba(20,21,26,.05);
}
.qrmark {
  width: clamp(84px, 9vw, 108px); height: auto; flex: 0 0 auto;
  color: var(--ink); border-radius: 12px;
}
.qrcard span { font-size: .88rem; line-height: 1.55; color: var(--ink-2); }
.qrcard b { display: block; font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; letter-spacing: -.01em; }
.qrcard:hover .qrmark { color: var(--brand); }
.qrmark { transition: color .4s ease; }
@media (max-width: 520px) { .qrcard { flex-direction: column; align-items: flex-start; } }


/* ---------- the step cards arrive with the rail, not after it ---------- */
.steps .step__card { opacity: 0; transform: translateY(16px); }
.steps.is-in .step__card { animation: stepin .7s cubic-bezier(.2,.8,.25,1) both; }
.steps.is-in .step:nth-child(1) .step__card { animation-delay: .12s; }
.steps.is-in .step:nth-child(2) .step__card { animation-delay: .42s; }
.steps.is-in .step:nth-child(3) .step__card { animation-delay: .72s; }
.steps .step__no { opacity: 0; transform: translateY(10px) scale(.9); }
.steps.is-in .step__no { animation: stepno .6s cubic-bezier(.2,.8,.25,1) both; }
.steps.is-in .step:nth-child(2) .step__no { animation-delay: .3s; }
.steps.is-in .step:nth-child(3) .step__no { animation-delay: .6s; }
@keyframes stepin { to { opacity: 1; transform: none; } }
@keyframes stepno { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .steps .step__card, .steps .step__no { opacity: 1; transform: none; animation: none; }
}

/* ---------- pills answer to the cursor ---------- */
.assets__row span, .railchips span, .chanrow span, .rails__ccy span, .slots__chip {
  transition: transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s ease,
              background .22s ease, color .22s ease, box-shadow .22s ease;
}
.assets__row span:hover, .chanrow span:hover, .railchips span:hover {
  transform: translateY(-2px);
  border-color: var(--line);
  border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(20,21,26,.07);
}
.assets__row span:hover { color: var(--brand-deep); }


/* ---------- the pricing hero: the plan ladder, ghosted into the ground ---- */
.hero-z__ladder {
  position: absolute; right: 5%; bottom: 26%; left: 46%;
  display: flex; align-items: flex-end; justify-content: flex-end;
  gap: clamp(14px, 2.4vw, 40px); pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(210deg, #000 30%, transparent 96%);
          mask-image: linear-gradient(210deg, #000 30%, transparent 96%);
}
.hero-z__ladder i {
  font-style: normal; font-family: var(--serif);
  font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: .84;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.3);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  transform: translateY(var(--y, 0));
}
.hero-z__ladder i:nth-child(1) { --y: 0;      opacity: .5; }
.hero-z__ladder i:nth-child(2) { --y: -14%;   opacity: .68; }
.hero-z__ladder i:nth-child(3) { --y: -28%;   opacity: .84; }
.hero-z__ladder i:nth-child(4) { --y: -42%;   opacity: 1;
  color: rgba(255,255,255,.06); -webkit-text-stroke-color: rgba(255,255,255,.32); }
@media (max-width: 900px) { .hero-z__ladder { display: none; } }
.office__mail { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.ticket__meta dd[data-tick] { transition: color .5s ease; }
.ticket__meta dd.is-up   { color: #34D07F; }
.ticket__meta dd.is-down { color: #FF8577; }
.formcard__note {
  margin-top: 14px; font-size: .82rem; line-height: 1.5; color: #0F9D58;
  background: #F2FAF5;
  background: color-mix(in srgb, #0F9D58 8%, #fff);
  border: 1px solid #CFE8DA;
  border: 1px solid color-mix(in srgb, #0F9D58 24%, var(--line));
  border-radius: 12px; padding: 11px 14px;
}
.formcard__note.is-bad {
  color: #B3261E;
  background: #FBF2F1;
  background: color-mix(in srgb, #B3261E 7%, #fff);
  border-color: #EBD2CF;
  border-color: color-mix(in srgb, #B3261E 22%, var(--line));
}
/* the honeypot: off-screen for bots to find, unreachable for everyone else */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.formcard button[type="submit"][disabled] { opacity: .6; cursor: progress; }


/* ==========================================================================
   Mobile: nothing under 13px, nothing you cannot hit with a thumb
   ========================================================================== */
@media (max-width: 760px) {
  /* small type that measured under 12.5px on a phone */
  .label            { font-size: .82rem; letter-spacing: .11em; }
  .small            { font-size: .95rem; }
  .plan__billing,
  .panel__url,
  .railgrid__n,
  .tappay__label,
  .slots__note,
  .feecard__note,
  .figtiles p,
  .footer__facts li { font-size: .82rem; }
  .plan__tag        { font-size: .72rem; }
  .ncard__src       { font-size: .82rem; }
  .ncard__time      { font-size: .78rem; }
  .ncard p          { font-size: .84rem; }
  .step__time, .assets__row span, .railchips span, .chanrow span,
  .rails__ccy span, .slots__chip { font-size: .84rem; }
  .feefoot, .footer__legal, .footer__bottom { font-size: .86rem; }
  .versus li, .minilist span, .caps p, .cols .small { font-size: .95rem; }

  /* thumb-sized targets: every text link gets real vertical room */
  .footer li a,
  .footer__bottom a,
  .footer__mail a,
  .tlink,
  .usecase__go,
  .nudge__link      { display: inline-block; padding-block: 9px; }
  .footer li + li   { margin-top: 2px; }
  .drawer a         { padding-block: 18px; }
  .nav a            { padding-block: 12px; }
  .ncard a          { padding-block: 8px; }
  .footer__top      { display: inline-block; padding-block: 10px; }
}

/* one button size for the whole site */
.btn--sm { font-size: .96rem; }
@media (max-width: 760px) {
  /* readable content inside the drawn panels (the two-letter badges stay small
     on purpose — they are marks, not copy) */
  .corridor__tag, .corridor__hublabel { font-size: .8rem; }
  .corridor__tag b, .corridor__hublabel b { font-size: .88rem; }
  .tappay__hint     { font-size: .84rem; }
  .bal__code, .rails__n b, .ticket__live { font-size: .82rem; }
  .footer h4        { font-size: .84rem; }
  .brand            { padding-block: 8px; }   /* a 44px tap target for the logo */
}


/* ---------- the smallest phone still in use (320px) ---------- */
@media (max-width: 380px) {
  .ncard--b { display: none; }              /* one confirmation is enough */
  .hero-z         { min-height: min(84vh, 600px); min-height: min(84svh, 600px); }
  .hero-z--short  { min-height: min(70vh, 500px); min-height: min(70svh, 500px); }
  .hero-z .display { font-size: clamp(1.9rem, 8.8vw, 2.3rem); }
  .hero-z .lede    { font-size: .95rem; }
  .hero-z__cards   { padding-block: 12px 8px; }
}

/* ---------- a phone held sideways: height decides, not width ---------- */
@media (max-height: 620px) and (min-width: 701px) {
  .ncard--c, .ncard--d, .ncard--e,
  .ncard--f, .ncard--g, .ncard--h, .ncard--i { display: none; }
  .hero-z, .hero-z--short { min-height: 0; }
  .hero-z__cards { padding-block: 10px 6px; gap: 8px; }
  .hero-z .display { font-size: clamp(1.8rem, 4.4vw, 2.4rem); }
  .hero-z .lede { font-size: 1rem; }
}
@media (max-height: 620px) and (min-width: 701px) {
  /* there is width in landscape — stop stacking the buttons */
  .hero-z .btn-row { display: flex; }
  .hero-z .btn-row .btn { width: auto; }
  .hero-z__copy { padding-block: 10px 18px; }
  .hero-z .lede { margin-top: 8px; }
}
@media (max-width: 380px) {
  .hero-z__copy { padding-bottom: 14px; }
  .hero-z .lede { line-height: 1.45; margin-top: 8px; }
  .hero-z .btn-row { gap: 8px; margin-top: 14px; }
}
@media (max-height: 620px) and (min-width: 701px) {
  /* in landscape the headline owns the screen; the cards are decoration */
  .hero-z__cards { display: none; }
}


/* the hero clip fades in over the dark ground once it can actually play, so
   nothing is shown before it except the ground the cards already sit on */
.hero-z__media video[data-fade] { opacity: 0; transition: opacity .7s ease; }
.hero-z__media video[data-fade].is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-z__media video[data-fade] { transition: none; }
}