/* The supplied 2026-10-20 posters define this campaign's palette and artwork. */
:root {
  color-scheme: dark;
  --navy: #e6edff;
  --blue: #8dc3ff;
  --body: #c5d3ed;
  --line: #40517c;
  --gold: #f4d693;
  --page-width: 100vw;
  font-family: Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--navy);
  background: #0c132b;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { width: 100%; max-width: var(--page-width); min-height: 100vh; min-height: 100dvh; margin: 0 auto; background: radial-gradient(ellipse at 65% 12%, #1c315d, transparent 55%), #0c132b; }
::selection { color: #0c132b; background: var(--gold); }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
p, h1, h2 { margin: 0; }
[hidden] { display: none !important; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.topbar { padding-top: env(safe-area-inset-top); }
.topbar-inner { display: flex; align-items: center; gap: 7px; min-height: 52px; padding: 4px 14px; }
.back { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; }
.campaign-overview { padding: 8px 22px max(24px, env(safe-area-inset-bottom)); }
.campaign-brand { display: flex; align-items: center; gap: 8px; width: max-content; direction: ltr; color: #087dff; font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.campaign-brand-mark { display: block; width: 44px; height: 27px; stroke: none; }
.campaign-edition { margin: 20px 0 12px; color: var(--gold); font-size: 13px; font-weight: 650; line-height: 1.5; }
h1 { font-size: clamp(32px, calc(var(--page-width) * .105), 43px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: balance; }
h1 > span, h1 > strong { display: block; }
h1 > strong { color: var(--gold); }
.campaign-hero-art { width: 100%; aspect-ratio: 950 / 635; margin: 10px 0 18px; background-image: url('./launch-offers-poster-20261020.jpg'); background-repeat: no-repeat; background-size: 123.157895% auto; background-position: 63.636364% 28.067%; }
.campaign-offer { display: grid; grid-template-columns: minmax(0, 1fr) 98px; align-items: center; gap: 4px; min-height: 126px; margin-top: 12px; padding: 17px 15px; border: 1px solid #405e9f; border-radius: 22px; background: linear-gradient(110deg, #172a66, #2853a1); }
.campaign-offer--monthly { border-color: #695397; background: linear-gradient(110deg, #2c2055, #57418f); }
.campaign-offer--deposit { border-color: #655740; background: linear-gradient(110deg, #26221b, #51422c); }
.campaign-offer-copy { min-width: 0; }
.campaign-kicker { color: #ced9ee; font-size: 13px; font-weight: 650; line-height: 1.4; }
.campaign-value { margin-top: 8px; color: var(--gold); font-size: 39px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.campaign-value bdi { white-space: nowrap; }
.campaign-value small { font-size: 22px; }
.campaign-monthly-value { color: #fff; font-size: clamp(22px, calc(var(--page-width) * .07), 28px); }
.campaign-trip { margin-top: 6px; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; }
.campaign-teaser { margin-top: 8px; color: #ced9ee; font-size: 12px; line-height: 1.5; }
.campaign-offer-art { width: 100%; background-image: url('./launch-offers-poster-20261020.jpg'); background-repeat: no-repeat; }
.campaign-hero-art, .campaign-offer-art { mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent); mask-composite: intersect; -webkit-mask-composite: source-in; }
/* Select only the illustrations; no raster campaign text appears in any locale. */
.activation-art { aspect-ratio: 300 / 320; background-size: 390% auto; background-position: 88.505747% 52.298%; }
.monthly-art { aspect-ratio: 330 / 310; background-size: 354.545455% auto; background-position: 89.285714% 68.666%; }
.cashback-art { aspect-ratio: 310 / 315; background-size: 377.419355% auto; background-position: 89.302326% 84.618426%; }
.open-card { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; min-height: 56px; padding: 14px 20px; border-radius: 999px; color: #fff; background: linear-gradient(#2470d6, #1f65c9); font-size: 18px; font-weight: 700; line-height: 1.4; transition: filter .16s ease-out; }
.campaign-apply { margin-top: 18px; }
.campaign-notice { margin-top: 12px; color: #b5c2dc; font-size: 11px; line-height: 1.6; text-align: center; }
.noscript { margin: 0 22px 30px; color: var(--body); }
[dir="rtl"] .back svg, [dir="rtl"] .open-card svg { transform: scaleX(-1); }
@media (hover: hover) {
  .back:hover { background: #1b2e60; }
  .open-card:hover { filter: brightness(.96); }
}
/* Align desktop H5 with the wallet's existing 390px phone column. */
@media screen and (min-width: 768px) { :root { --page-width: 390px; background: #e6e8f0; } }
@media (max-width: 359px) {
  .campaign-overview { padding-inline: 18px; }
  .campaign-offer { grid-template-columns: minmax(0, 1fr) 80px; padding: 15px 12px; }
  .campaign-value { font-size: 34px; }
  .campaign-value small { font-size: 19px; }
  .campaign-monthly-value { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .open-card { transition: none; } }