/* ============================================================
   BUMP · SITE
   Flat, borderless, colour-block rooms. No elevation shadows:
   depth comes from lavender → white → pastel → canopy green.
   Reads tokens.css only.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface-page-canvas);
  color: var(--color-ink-black);
  font-family: var(--font-dm-sans);
  font-feature-settings: "ss03";
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; font-feature-settings: "ss03"; }
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--color-indigo-bloom); outline-offset: 3px; border-radius: 6px; }
.band--dark :focus-visible, .hero :focus-visible, .band--indigo :focus-visible { outline-color: var(--color-paper-white); }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--color-paper-white); color: var(--color-canopy-green);
  padding: 8px 16px; border-radius: var(--radius-buttons);
}
.skip:focus { left: 16px; }

.wrap { max-width: var(--page-max-width); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 1440px) { .wrap { max-width: calc(var(--page-max-width) + 160px); } }

/* ---------- Type ---------------------------------------- */
.display {
  font-size: clamp(46px, 7.2vw, 96px);
  line-height: 0.98;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.h-xl {
  font-size: clamp(38px, 5.4vw, 72px);
  line-height: var(--leading-display);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-display);
  color: var(--color-canopy-green);
  text-wrap: balance;
}
.h-xl b { font-weight: var(--font-weight-bold); }
.h-xl em, .display em { font-style: normal; }
.h-indigo { color: var(--color-indigo-bloom); }
.h-light { color: var(--color-paper-white); }
.h-light em { color: var(--color-leaf-bright); }
.lead {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-graphite);
  max-width: 34em;
}
.lead em { font-style: normal; font-weight: var(--font-weight-semibold); color: var(--color-canopy-green); }
.lead--light { color: var(--color-mint-wash); }
.legal { font-size: var(--text-body-sm); color: var(--color-slate); margin-top: var(--spacing-32); }
.legal--center { text-align: center; max-width: 60ch; margin-inline: auto; }

/* ---------- Pill tag chip ------------------------------- */
.chip {
  display: inline-block;
  font-size: var(--text-caption); line-height: 1.2;
  font-weight: var(--font-weight-semibold);
  padding: 6px 12px; border-radius: var(--radius-tags);
  margin-bottom: var(--spacing-20);
}
.chip--dark      { background: var(--color-canopy-line); color: var(--color-mint-wash); }
.chip--mint      { background: var(--color-mint-wash);  color: var(--color-canopy-green); }
.chip--on-mint   { background: var(--color-sage-wash);  color: var(--color-canopy-green); }
.chip--on-lilac  { background: var(--color-orchid-tint); color: var(--color-aubergine); }
.chip--indigo    { background: var(--color-paper-white); color: var(--color-indigo-bloom); }
.chip--peach     { background: var(--color-peach-wash); color: var(--color-aubergine); }
.chip--on-peach  { background: var(--color-paper-white); color: var(--color-aubergine); }
.chip--sky       { background: var(--color-paper-white); color: var(--color-deep-teal); }
.chip--cream     { background: var(--color-paper-white); color: var(--color-canopy-green); }
.chip--on-indigo { background: rgba(255,255,255,.14);  color: var(--color-lilac-wash); }

/* ---------- Buttons (40px radius, flat) ----------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--radius-buttons);
  font-size: var(--text-body); font-weight: var(--font-weight-medium); line-height: 1.38;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.btn:active { transform: scale(.98); }
.btn--coral { background: var(--color-coral-pulse); color: var(--color-paper-white); font-weight: var(--font-weight-semibold); }
.btn--coral:hover { background: color-mix(in srgb, var(--color-coral-pulse) 88%, var(--color-ink-black)); }
.btn--ghost-light { border-color: var(--color-paper-white); color: var(--color-paper-white); }
.btn--ghost-light:hover { background: var(--color-paper-white); color: var(--color-canopy-green); }
.btn--nav {
  background: var(--color-paper-white); border-color: var(--color-ink-black); color: var(--color-canopy-green);
  font-size: var(--text-body-sm); padding: 8px 20px;
}
.btn--nav:hover { background: var(--color-canopy-green); color: var(--color-paper-white); border-color: var(--color-canopy-green); }
.btn--cream { background: var(--color-cream); color: var(--color-canopy-green); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); padding: 8px 16px; }
.btn--cream:hover { background: var(--color-paper-white); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Logo: two phones, bumping ------------------- */
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 26px; font-weight: var(--font-weight-bold); letter-spacing: -0.04em;
  color: var(--color-canopy-green); text-decoration: none;
}
.logo__mark { position: relative; width: 26px; height: 24px; flex: none; }
.logo__mark i {
  position: absolute; top: 2px; width: 12px; height: 20px; border-radius: 4px;
  background: var(--color-canopy-green);
}
.logo__mark i:first-child { left: 1px; transform: rotate(-12deg); }
.logo__mark i:last-child  { right: 1px; transform: rotate(12deg); background: var(--color-leaf-bright); }
.logo__mark--sm { width: 16px; height: 14px; }
.logo__mark--sm i { width: 7px; height: 12px; top: 1px; border-radius: 2px; }

/* ---------- Nav ----------------------------------------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--color-paper-white); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.nav__links { display: flex; gap: 32px; }
.nav__links a, .nav__login, .nav__loc {
  font-size: var(--text-body-sm); font-weight: var(--font-weight-medium);
  color: var(--color-canopy-green); text-decoration: none;
}
.nav__links a:hover, .nav__login:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav__end { display: flex; align-items: center; gap: 20px; }
.nav__loc { color: var(--color-slate); }
@media (max-width: 960px) { .nav__links { display: none; } }
@media (max-width: 520px) { .nav__loc, .nav__login { display: none; } .nav__in { height: 64px; } }

/* ---------- Bands ("rooms") ------------------------------ */
.band { padding: var(--section-y) 0; }
.band--white    { background: var(--color-paper-white); }
.band--lavender { background: var(--color-lavender-mist); }
.band--sky      { background: var(--color-sky-wash); }
.band--cream    { background: var(--color-cream); }
.band--peach    { background: var(--color-peach-wash); }
.band--dark     { background: var(--color-canopy-green); color: var(--color-paper-white); }
.band--indigo   { background: var(--color-indigo-bloom); color: var(--color-paper-white); }

.head { margin-bottom: var(--section-gap); max-width: 900px; }
.head .lead { margin-top: var(--spacing-24); }
.head--center { text-align: center; margin-inline: auto; }
.head--center .lead { margin-inline: auto; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-64); align-items: center; }
.split--head { align-items: end; margin-bottom: var(--spacing-48); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--spacing-40); } }

/* ---------- Hero ---------------------------------------- */
.hero { background: var(--color-canopy-green); color: var(--color-paper-white); padding: 80px 0 64px; overflow: hidden; }
.hero__in { display: grid; grid-template-columns: 1.08fr 1fr; gap: var(--spacing-56); align-items: center; }
.hero .display em { color: var(--color-leaf-bright); }
.hero__lead { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--color-mint-wash); max-width: 32em; margin: var(--spacing-32) 0 var(--spacing-40); }
.hero__lead b { color: var(--color-paper-white); font-weight: var(--font-weight-semibold); }
.hero__note { margin-top: var(--spacing-24); font-size: var(--text-body-sm); color: var(--color-ash); }

.hero__art { position: relative; min-height: 600px; }
.hero__photo {
  position: absolute; right: 0; top: 0; width: 78%; height: 100%;
  border-radius: var(--radius-cards); overflow: hidden;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }

@media (max-width: 1020px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__art { min-height: 540px; max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 520px) {
  .hero { padding-top: 48px; }
  .hero__art { min-height: 480px; }
  .hero__photo { width: 84%; }
}

/* logo strip */
.logos { margin-top: var(--spacing-64); padding-top: var(--spacing-32); border-top: 1px solid var(--color-canopy-line); text-align: center; }
.logos__lab { font-size: var(--text-caption); font-weight: var(--font-weight-medium); color: var(--color-ash); margin-bottom: var(--spacing-20); }
.logos__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 48px; }
.lg { font-size: 19px; font-weight: var(--font-weight-bold); letter-spacing: -0.02em; color: var(--color-ash); opacity: .8; }
.lg--visa { font-style: italic; font-weight: 800; letter-spacing: .02em; }

/* ---------- Phone mockup -------------------------------- */
.phone {
  position: absolute; width: 238px;
  background: var(--color-canopy-deep);
  border-radius: 38px; padding: 8px;
}
.phone__bar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--color-canopy-green); color: var(--color-mint-wash);
  font-size: 11px; font-weight: var(--font-weight-semibold);
  padding: 12px 18px 10px; border-radius: 30px 30px 0 0;
}
.phone__brand { color: var(--color-paper-white); font-size: 13px; font-weight: var(--font-weight-bold); letter-spacing: -0.03em; }
.phone__body {
  position: relative; background: var(--color-paper-white);
  border-radius: 0 0 30px 30px; padding: 22px 18px 24px; min-height: 380px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: var(--color-canopy-green);
}
.ps__lab { font-size: var(--text-caption); font-weight: var(--font-weight-semibold); color: var(--color-slate); }
.ps__amt { font-size: 46px; font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-display); line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ps__amt small { font-size: .5em; color: var(--color-slate); }
.ps__amt--in { color: var(--color-canopy-green); }
.ps__note { font-size: var(--text-body-sm); color: var(--color-graphite); margin-top: 2px; }
.ps__status { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); margin-top: auto; position: relative; min-height: 1.4em; }

.ps__target { position: relative; width: 132px; height: 132px; margin: 26px 0 18px; display: grid; place-items: center; }
.ps__target::before { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: var(--color-mint-wash); transition: background var(--dur-fast), transform var(--dur) var(--ease-out); }
.ps__ring { position: absolute; inset: 22px; border-radius: 50%; border: 2px solid var(--color-leaf-bright); opacity: 0; }
.ps__nfc, .ps__check { position: relative; width: 38px; height: 38px; transition: opacity var(--dur-fast), transform var(--dur) var(--ease-out); }
.ps__nfc svg, .ps__check svg { width: 100%; height: 100%; fill: none; stroke: var(--color-canopy-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ps__check { position: absolute; opacity: 0; transform: scale(.4); }
.ps__check svg { stroke: var(--color-paper-white); stroke-width: 2.6; }

/* hero scene states (toggled by motion.js) */
.is-live .ps__ring { animation: ring 1.8s var(--ease-out) infinite; }
.is-live .ps__ring--2 { animation-delay: .9s; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.75); opacity: 0; } }
[data-scene].is-hit .ps__target::before { transform: scale(1.12); }
[data-scene].is-done .ps__target::before { background: var(--color-leaf-bright); transform: scale(1); }
[data-scene].is-done .ps__nfc { opacity: 0; transform: scale(.4); }
[data-scene].is-done .ps__check { opacity: 1; transform: scale(1); }
[data-scene].is-done .ps__ring { animation: none; opacity: 0; }
.ps__wait, .ps__done { transition: opacity var(--dur-fast); }
.ps__done { position: absolute; left: 0; right: 0; opacity: 0; color: var(--color-canopy-green); }
[data-scene].is-done .ps__wait { opacity: 0; }
[data-scene].is-done .ps__done { opacity: 1; }

.phone--hero { left: 0; bottom: 28px; transition: transform .45s var(--ease-out); }
[data-scene].is-hit.phone--hero { transform: translateX(10px) rotate(1.5deg); }
@media (max-width: 520px) { .phone--hero { width: 200px; bottom: 16px; } .phone--hero .phone__body { min-height: 330px; } .phone--hero .ps__amt { font-size: 38px; } }

/* toast notification card */
.toast {
  position: absolute; display: flex; align-items: center; gap: 12px;
  background: var(--color-paper-white); color: var(--color-canopy-green);
  padding: 12px 16px 12px 12px; border-radius: var(--radius-cards-sm);
  font-size: var(--text-body-sm); line-height: 1.3;
}
.toast b { display: block; font-weight: var(--font-weight-bold); }
.toast small { display: block; color: var(--color-slate); font-size: var(--text-caption); margin-top: 2px; }
.toast__ic { width: 36px; height: 36px; border-radius: var(--radius-icons); background: var(--color-leaf-bright); color: var(--color-paper-white); display: grid; place-items: center; font-weight: var(--font-weight-bold); font-size: 18px; flex: none; }
.toast--hero { top: 44px; right: -12px; opacity: 0; transform: translateY(-10px) scale(.96); transition: opacity var(--dur-fast), transform .5s var(--ease-out); }
.toast--hero.is-on { opacity: 1; transform: none; }
@media (max-width: 1020px) { .toast--hero { right: 8px; } }
@media (max-width: 520px) { .toast--hero { top: 18px; right: 0; } }

/* ---------- Pastel feature cards ------------------------ */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-24); }
@media (max-width: 860px) { .pgrid { grid-template-columns: 1fr; } }
.pcard { border-radius: var(--radius-cards); padding: var(--spacing-32); display: flex; flex-direction: column; }
.pcard h3 { font-size: clamp(26px, 2.6vw, 32px); line-height: var(--leading-heading); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-mid); color: var(--color-canopy-green); max-width: 18em; }
.pcard > p { margin-top: var(--spacing-12); color: var(--color-graphite); max-width: 32em; }
.pcard--mint  { background: var(--color-mint-wash); }
.pcard--lilac { background: var(--color-lilac-wash); }
.pcard--lilac h3 { color: var(--color-indigo-bloom); }

/* white product card */
.wcard { background: var(--color-paper-white); border-radius: var(--radius-cards-sm); padding: var(--card-padding); margin-top: auto; }
.pcard .wcard { margin-top: var(--spacing-32); }
.pcard { justify-content: flex-start; }
.pcard .wcard { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.wave__legend { display: flex; justify-content: space-between; font-size: var(--text-caption); font-weight: var(--font-weight-semibold); color: var(--color-slate); margin-top: 8px; }

/* Motion Kit stages (light re-theme) */
.cx { position: relative; overflow: hidden; }
.cx svg, .cx canvas { display: block; width: 100%; height: 100%; }
.cx--odo { height: 200px; }
.cx--wave { height: 150px; }
.cx--path { height: 210px; }
.cx--globe { width: 100%; aspect-ratio: 1; max-width: 520px; margin-left: auto; }
@media (max-width: 900px) { .cx--globe { margin: 0 auto; max-width: 400px; } }

/* CX-20 odometer */
.odowrap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; text-align: center; }
.odocap { font-size: var(--text-caption); font-weight: var(--font-weight-semibold); color: var(--color-slate); }
.odorow { display: flex; align-items: flex-end; font-size: clamp(34px, 4.3vw, 54px); font-weight: var(--font-weight-medium); letter-spacing: -0.02em; color: var(--color-canopy-green); line-height: 1; font-variant-numeric: tabular-nums; }
.odowheel { height: 1em; overflow: hidden; }
.odocol { display: flex; flex-direction: column; }
.ododigit { height: 1em; line-height: 1em; }
.odosep { line-height: 1em; padding: 0 1px; }
.ododelta { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-canopy-green); background: var(--color-sage-wash); padding: 4px 12px; border-radius: var(--radius-tags); opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s var(--ease-out); }
.ododelta.on { opacity: 1; transform: none; }

/* CX-22 capability cloud */
.cx--chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 8px 0 var(--spacing-48); overflow: visible; }
.cchip {
  font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold);
  color: var(--color-canopy-green); border: 1.5px solid var(--c); border-radius: var(--radius-tags);
  padding: 8px 16px; background: var(--color-paper-white);
  opacity: 0; transform: scale(.5) rotate(var(--r));
  transition: opacity .45s, transform .6s var(--ease-out);
}
.cchip.on { opacity: 1; transform: none; }
.cchip.feat { background: var(--bgc); border-color: var(--bgc); }

/* ---------- Toolkit (lavender) --------------------------- */
.toolkit { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--spacing-64); align-items: center; }
@media (max-width: 960px) { .toolkit { grid-template-columns: 1fr; } }
.checklist { display: grid; gap: 8px; }
.ck button {
  width: 100%; display: flex; gap: 16px; align-items: flex-start; text-align: left;
  background: transparent; border: 0; padding: 20px; border-radius: var(--radius-cards-sm);
  color: var(--color-canopy-green); cursor: pointer; position: relative; overflow: hidden;
  transition: background var(--dur-fast);
}
.ck button:hover { background: rgba(255,255,255,.5); }
.ck.is-active button { background: var(--color-paper-white); }
.ck__ic { flex: none; width: 40px; height: 40px; border-radius: var(--radius-icons); background: var(--color-indigo-bloom); display: grid; place-items: center; }
.ck__ic svg { width: 22px; height: 22px; fill: none; stroke: var(--color-paper-white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ck__txt b { display: block; font-size: var(--text-subheading); line-height: var(--leading-subheading); font-weight: var(--font-weight-medium); }
.ck__txt { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows var(--dur) var(--ease-out); }
.ck.is-active .ck__txt { grid-template-rows: auto 1fr; }
.ck__txt small { display: block; min-height: 0; overflow: hidden; font-size: var(--text-body); color: var(--color-aubergine); opacity: 0; transition: opacity var(--dur); }
.ck__txt small::before { content: ""; display: block; height: 6px; }
.ck__txt em { font-style: normal; font-weight: var(--font-weight-semibold); }
.ck.is-active .ck__txt small { opacity: 1; }
.ck button::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; border-radius: 3px; background: var(--color-orchid-tint); transform: scaleX(0); transform-origin: left; }
.ck.is-active.is-timing button::after { animation: fill var(--step-ms, 3600ms) linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }

.toolkit__art { position: relative; min-height: 560px; }
.toolkit__photo { position: absolute; inset: 0 0 0 16%; border-radius: var(--radius-cards); overflow: hidden; background: var(--color-indigo-bloom); }
.toolkit__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.toolkit__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, var(--color-indigo-bloom) 0 30%, transparent 30%); opacity: .35; mix-blend-mode: multiply; }
.phone--step { left: 0; top: 50%; transform: translateY(-50%); }
.phone--step .phone__body { min-height: 400px; }
.sp { position: absolute; inset: 22px 18px 24px; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(8px); transition: opacity var(--dur-fast), transform var(--dur) var(--ease-out); pointer-events: none; }
.phone--step[data-step="0"] .sp--0, .phone--step[data-step="1"] .sp--1,
.phone--step[data-step="2"] .sp--2, .phone--step[data-step="3"] .sp--3 { opacity: 1; transform: none; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; margin-top: 20px; }
.keypad i { font-style: normal; font-size: 18px; font-weight: var(--font-weight-medium); padding: 9px 0; border-radius: 12px; background: var(--color-cloud-gray); }
.faceid { width: 96px; height: 96px; margin: 48px 0 32px; border-radius: 28px; background: var(--color-lavender-mist); display: grid; place-items: center; }
.faceid svg { width: 60px; height: 60px; fill: none; stroke: var(--color-indigo-bloom); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.phone--step[data-step="2"] .faceid { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.94); } }
.receipt { width: 100%; margin-top: 22px; text-align: left; font-size: var(--text-body-sm); }
.receipt li { display: flex; justify-content: space-between; padding: 10px 2px; border-top: 1px solid var(--color-frost-gray); }
.receipt span { color: var(--color-slate); }
@media (max-width: 960px) { .toolkit__art { min-height: 520px; max-width: 620px; width: 100%; } }
@media (max-width: 520px) {
  .toolkit__art { min-height: 480px; }
  .toolkit__photo { inset: 0 0 0 26%; }
  .phone--step { width: 208px; }
}

/* ---------- Stories -------------------------------------- */
.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-24); }
@media (max-width: 960px) { .stories { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
.story { border-radius: var(--radius-cards); padding: 12px 12px var(--spacing-32); display: flex; flex-direction: column; }
.story figure { border-radius: var(--radius-cards-sm); overflow: hidden; aspect-ratio: 4 / 3; }
.story img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.story:hover img { transform: scale(1.03); }
.story__body { padding: var(--spacing-24) 20px 0; }
.story h3 { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); font-weight: var(--font-weight-bold); color: var(--color-canopy-green); margin-top: 12px; }
.story p { margin-top: 8px; color: var(--color-graphite); }
.story--peach { background: var(--color-peach-wash); }
.story--sky   { background: var(--color-sky-wash); }
.story--cream { background: var(--color-cream); }
.amt { display: inline-block; font-size: var(--text-caption); font-weight: var(--font-weight-semibold); padding: 4px 12px; border-radius: var(--radius-tags); background: var(--color-paper-white); color: var(--color-canopy-green); }

/* ---------- Pay by Link ---------------------------------- */
.split--link { grid-template-columns: 1fr 1.05fr; align-items: start; }
.link__art { position: relative; min-height: 640px; }
.link__photo { position: absolute; inset: 0 22% 80px 0; border-radius: var(--radius-cards); overflow: hidden; }
.link__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
.chat { position: absolute; right: 0; bottom: 0; width: min(330px, 86%); background: var(--color-paper-white); border-radius: var(--radius-cards-sm); overflow: hidden; }
.chat__head { display: flex; align-items: center; gap: 10px; background: var(--color-canopy-green); color: var(--color-paper-white); padding: 12px 16px; font-size: var(--text-body-sm); line-height: 1.2; }
.chat__head small { display: block; color: var(--color-mint-wash); font-size: var(--text-caption); }
.chat__av { width: 32px; height: 32px; border-radius: 50%; background: var(--color-leaf-bright); display: grid; place-items: center; font-weight: var(--font-weight-bold); }
.chat__body { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--color-cloud-gray); font-size: var(--text-body-sm); }
.bub { max-width: 84%; padding: 8px 12px; border-radius: 12px; line-height: 1.35; }
.bub--in { align-self: flex-start; background: var(--color-paper-white); border: 1px solid var(--color-frost-gray); border-top-left-radius: 4px; }
.bub--out { align-self: flex-end; background: var(--color-chat-out); border-top-right-radius: 4px; }
.bub--link { padding: 4px; }
.linkcard { display: block; background: var(--color-paper-white); border-radius: 9px; padding: 10px 12px; }
.linkcard__top { display: flex; align-items: center; gap: 6px; font-size: var(--text-caption); color: var(--color-leaf-bright); font-weight: var(--font-weight-semibold); }
.linkcard b { display: block; color: var(--color-canopy-green); font-size: var(--text-body); margin: 4px 0 2px; }
.linkcard small { color: var(--color-slate); font-size: var(--text-caption); }
.link__copy .h-xl b { font-weight: var(--font-weight-bold); color: var(--color-deep-teal); }
.link__copy .lead { margin-top: var(--spacing-24); }
.wcard--path { margin-top: var(--spacing-32); padding: 12px 16px; }
.ticks { margin-top: var(--spacing-32); display: grid; gap: 16px; }
.ticks li { position: relative; padding-left: 36px; color: var(--color-graphite); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-deep-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ticks b { color: var(--color-deep-teal); font-weight: var(--font-weight-semibold); }
@media (max-width: 900px) { .link__art { min-height: 560px; max-width: 560px; width: 100%; } }
@media (max-width: 520px) { .link__art { min-height: 520px; } .link__photo { inset: 0 8% 150px 0; } }

/* ---------- Network (dark) ------------------------------ */
.split--net { grid-template-columns: 1.1fr 1fr; }
.band--dark .lead { margin-top: var(--spacing-24); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-24); margin-top: var(--spacing-48); padding-top: var(--spacing-32); border-top: 1px solid var(--color-canopy-line); }
.stat b { font-size: clamp(40px, 4.6vw, 56px); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-display); line-height: 1; font-variant-numeric: tabular-nums; }
.stat sup { font-size: 24px; color: var(--color-leaf-bright); font-weight: var(--font-weight-semibold); vertical-align: top; margin-left: 2px; }
.stat p { margin-top: 10px; font-size: var(--text-body-sm); color: var(--color-mint-wash); max-width: 16em; }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr 1fr; } }

/* ---------- Fees ---------------------------------------- */
.fees { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-24); }
@media (max-width: 960px) { .fees { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
.fcard { background: var(--color-paper-white); border-radius: var(--radius-cards); padding: var(--spacing-32); }
.fcard__ic { width: 44px; height: 44px; border-radius: var(--radius-icons); display: grid; place-items: center; }
.fcard__ic svg { width: 22px; height: 22px; fill: none; stroke: var(--color-canopy-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fcard__ic--mint { background: var(--color-mint-wash); }
.fcard__ic--lilac { background: var(--color-lavender-mist); }
.fcard__ic--lilac svg { stroke: var(--color-indigo-bloom); }
.fcard__ic--peach { background: var(--color-peach-wash); }
.fcard__ic--peach svg { stroke: var(--color-aubergine); }
.fcard h3 { font-size: var(--text-heading-sm); font-weight: var(--font-weight-bold); color: var(--color-canopy-green); margin: var(--spacing-20) 0 var(--spacing-12); }
.fcard dl div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--color-frost-gray); font-size: var(--text-body-sm); }
.fcard dt { color: var(--color-graphite); }
.fcard dd { font-weight: var(--font-weight-semibold); color: var(--color-canopy-green); text-align: right; }

/* ---------- FAQ ----------------------------------------- */
.faqwrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--spacing-64); align-items: start; }
.faqwrap .lead { margin-top: var(--spacing-24); }
@media (max-width: 900px) { .faqwrap { grid-template-columns: 1fr; gap: var(--spacing-40); } }
.faq { display: grid; gap: 8px; }
.faq__item { background: var(--color-sage-wash); border-radius: var(--radius-cards-sm); }
.faq__item:nth-child(2n) { background: var(--color-lilac-wash); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 24px; font-size: var(--text-subheading); line-height: var(--leading-subheading); font-weight: var(--font-weight-medium); color: var(--color-canopy-green);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__ic { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--color-paper-white); }
.faq__ic::before, .faq__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--color-canopy-green); border-radius: 2px; transition: transform var(--dur-fast); }
.faq__ic::after { transform: rotate(90deg); }
.faq__item[open] .faq__ic::after { transform: rotate(0); }
.faq__a { padding: 0 24px 22px; color: var(--color-graphite); max-width: 40em; }

/* ---------- CTA (indigo) -------------------------------- */
.cta { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--spacing-64); align-items: center; }
@media (max-width: 900px) { .cta { grid-template-columns: 1fr; } }
.display--cta { color: var(--color-paper-white); font-size: clamp(46px, 7vw, 96px); }
.capture { display: flex; gap: 8px; margin-top: var(--spacing-40); max-width: 520px; background: var(--color-paper-white); border-radius: var(--radius-buttons); padding: 6px; box-shadow: var(--shadow-subtle); }
.capture input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 16px; color: var(--color-ink-black); font-size: var(--text-body); }
.capture input::placeholder { color: var(--color-slate); }
.capture input:focus { outline: none; }
.capture:focus-within { outline: 2px solid var(--color-orchid-tint); outline-offset: 3px; }
.capture__msg { min-height: 1.4em; margin-top: 12px; font-size: var(--text-body-sm); color: var(--color-orchid-tint); font-weight: var(--font-weight-semibold); }
.cta__note { font-size: var(--text-body-sm); color: var(--color-lilac-wash); opacity: .8; }
@media (max-width: 420px) { .capture { flex-direction: column; border-radius: var(--radius-cards-sm); } .capture input { padding: 12px 14px; } }

.cardface-wrap { perspective: 1200px; }
.cardface {
  position: relative; aspect-ratio: 1.586; width: 100%; max-width: 460px; margin-left: auto;
  background: var(--color-canopy-green); border-radius: 22px; padding: 26px 28px;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  transform: rotate(-6deg); transition: transform 1s var(--ease-out);
}
.cardface:hover { transform: rotate(-2deg) translateY(-6px); }
.cardface::before, .cardface::after { content: ""; position: absolute; border-radius: 50%; }
.cardface::before { width: 78%; aspect-ratio: 1; right: -26%; top: -38%; background: var(--color-leaf-bright); opacity: .9; }
.cardface::after { width: 58%; aspect-ratio: 1; right: -4%; bottom: -46%; background: var(--color-mint-wash); opacity: .16; }
.cardface > * { position: relative; z-index: 1; }
.cardface__top { display: flex; justify-content: space-between; align-items: center; }
.logo--card { color: var(--color-paper-white); font-size: 28px; }
.logo--card .logo__mark i:first-child { background: var(--color-paper-white); }
.logo--card .logo__mark i:last-child { background: var(--color-canopy-green); }
.cardface__marks { display: inline-flex; align-items: center; gap: 14px; }
.cardface__nfc { width: 28px; height: 28px; }
.cardface__ctp { width: auto; height: 21px; }
.cardface__nfc svg { width: 100%; height: 100%; fill: none; stroke: var(--color-canopy-green); stroke-width: 2.2; stroke-linecap: round; }
.cardface__chip { width: 52px; height: 40px; border-radius: 8px; background: var(--color-cream); }
.cardface__foot { display: flex; justify-content: space-between; align-items: flex-end; color: var(--color-paper-white); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); letter-spacing: .08em; }
.cardface__foot small { display: block; font-size: 10px; letter-spacing: .06em; color: var(--color-mint-wash); margin-bottom: 4px; text-transform: uppercase; }
.cardface__visa { font-size: 34px; font-style: italic; font-weight: 800; letter-spacing: .01em; line-height: 1; text-align: right; }
.cardface__visa small { font-style: normal; font-size: 13.2px; letter-spacing: .04em; margin: 4px 0 0; text-transform: none; color: var(--color-paper-white); }
@media (max-width: 900px) { .cardface { margin: 0 auto; max-width: 400px; } }

/* ---------- Footer -------------------------------------- */
.foot { background: var(--color-cloud-gray); padding: var(--spacing-80) 0 var(--spacing-40); }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--spacing-40); }
.foot__tag { color: var(--color-graphite); margin-top: 16px; max-width: 26em; }
.foot ul { display: grid; gap: 10px; align-content: start; }
.foot__h { font-size: var(--text-caption); font-weight: var(--font-weight-semibold); color: var(--color-slate); }
.foot a:not(.logo) { text-decoration: none; color: var(--color-canopy-green); font-weight: var(--font-weight-medium); }
.foot a:not(.logo):hover { text-decoration: underline; }
.foot__bar { display: flex; justify-content: space-between; gap: 24px; margin-top: var(--spacing-64); padding-top: var(--spacing-24); border-top: 1px solid var(--color-frost-gray); font-size: var(--text-body-sm); color: var(--color-slate); }
.foot__bar p:first-child { max-width: 70ch; }
@media (max-width: 700px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__grid > div:first-child { grid-column: 1 / -1; } .foot__bar { flex-direction: column; } }
body.has-notice .foot { padding-bottom: 140px; }

/* ---------- Sticky notification ------------------------- */
.notice {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  background: var(--color-canopy-green); color: var(--color-paper-white);
  padding: 16px 20px; border-radius: var(--radius-cards-sm); width: 340px;
  transform: translateY(calc(100% + 40px)); transition: transform .6s var(--ease-out);
}
.notice.is-up { transform: none; }
.notice.is-gone { display: none; }
.notice__t { font-size: var(--text-body); font-weight: var(--font-weight-semibold); padding-right: 24px; }
.notice__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.notice__x { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--color-ash); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 50%; }
.notice__x:hover { color: var(--color-paper-white); }
.count { display: flex; gap: 6px; }
.count span { display: flex; align-items: baseline; gap: 1px; background: var(--color-canopy-line); border-radius: 8px; padding: 6px 7px; font-size: var(--text-caption); font-weight: var(--font-weight-semibold); color: var(--color-ash); }
.count b { font-size: 16px; color: var(--color-paper-white); font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); }
@media (max-width: 520px) {
  .notice { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 14px 16px; }
  .count span { padding: 5px 6px; }
}

/* ---------- Reveal -------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms * var(--motion)); }
[data-reveal].is-in { opacity: 1; transform: none; }
:root[data-motion="none"] [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } .is-live .ps__ring, .faceid { animation: none !important; } }

/* ---------- Late overrides (must follow the split variants) ---------- */
.pcard > .chip, .link__copy > .chip { align-self: flex-start; }
@media (max-width: 900px) {
  .split--link, .split--net { grid-template-columns: 1fr; }
  .link__art { margin: 0 auto; }
}
@media (max-width: 520px) {
  .notice__t { font-size: var(--text-body-sm); }
  .notice__row { margin-top: 8px; }
}

/* ---------- Issuer + network marks (Kiwibank, Visa) ---------- */
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.brand__kb { width: 44px; height: 44px; flex: none; }
.brand__div { width: 1px; height: 28px; background: var(--color-frost-gray); }
.foot .brand__div { background: var(--color-ash); }
.foot__visa { width: 72px; height: auto; margin-top: 24px; }
.lg--visa img { height: 20px; width: auto; opacity: .75; }
.cardface__brand { display: inline-flex; align-items: center; gap: 12px; }
.cardface__brand img { width: 66px; height: 66px; }
.cardface__name { font-size: calc(var(--text-body-sm) * 1.2); }
.cardface__visa img { display: block; width: 96px; height: auto; margin-left: auto; }
@media (max-width: 520px) { .brand__kb { width: 36px; height: 36px; } .brand { gap: 10px; } .brand .logo { font-size: 22px; } .cardface__visa img { width: 72px; } .cardface__brand img { width: 52px; height: 52px; } }
@media (max-width: 520px) {
  .hero__photo { width: 72%; }
  .hero__photo img { object-position: 50% 30%; }
  .phone--hero { width: 176px; padding: 6px; border-radius: 30px; }
  .phone--hero .phone__bar { border-radius: 24px 24px 0 0; padding: 10px 14px 8px; }
  .phone--hero .phone__body { min-height: 300px; border-radius: 0 0 24px 24px; padding: 18px 12px 20px; }
  .phone--hero .ps__amt { font-size: 32px; }
  .phone--hero .ps__target { width: 104px; height: 104px; margin: 16px 0 12px; }
  .phone--hero .ps__status, .phone--hero .ps__note { font-size: var(--text-caption); }
}

/* ---------- Micro & small business ---------------------- */
.split--biz { grid-template-columns: 1.05fr .95fr; align-items: center; }
.split--biz > div:first-child > .chip { display: inline-block; }
.bizticks { margin-top: var(--spacing-32); display: grid; gap: 16px; max-width: 34em; }
.bizticks li { position: relative; padding-left: 36px; color: var(--color-graphite); }
.bizticks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-canopy-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.bizticks b { color: var(--color-canopy-green); font-weight: var(--font-weight-semibold); }

.biz__art { position: relative; }
.biz__photo { border-radius: var(--radius-cards); overflow: hidden; aspect-ratio: 4 / 3.2; }
.biz__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }
.toast--biz { left: -24px; bottom: -20px; }
@media (max-width: 900px) { .split--biz { grid-template-columns: 1fr; } .toast--biz { left: 12px; bottom: 12px; } }

/* the graduation path */
.grad { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--spacing-48); align-items: center; margin-top: var(--section-gap); }
.grad h3 { font-size: clamp(26px, 2.8vw, 32px); line-height: var(--leading-heading); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-mid); color: var(--color-canopy-green); }
.grad p { margin-top: var(--spacing-12); color: var(--color-graphite); max-width: 34em; }
.wcard--grad { margin-top: 0; padding: 12px 16px; }
.cx--road { height: 230px; }
@media (max-width: 900px) { .grad { grid-template-columns: 1fr; gap: var(--spacing-32); } }

/* bump vs a terminal */
.vs { margin-top: var(--section-gap); background: var(--color-paper-white); border-radius: var(--radius-cards); padding: var(--spacing-32); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 24px; align-items: center; }
.vs__head { grid-row: 1; font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-slate); padding-bottom: 16px; }
.vs__head--a { grid-column: 2; color: var(--color-canopy-green); }
.vs__head--b { grid-column: 3; }
.vs__head .logo { font-size: 22px; }
.vs__rows { grid-column: 1 / -1; display: grid; }
.vs__rows > div { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; padding: 14px 0; border-top: 1px solid var(--color-frost-gray); align-items: baseline; }
.vs__rows dt { font-size: var(--text-body-sm); color: var(--color-slate); }
.vs__rows dd { margin: 0; font-weight: var(--font-weight-semibold); color: var(--color-canopy-green); }
.vs__rows dd.vs__b { font-weight: var(--font-weight-regular); color: var(--color-graphite); }
@media (max-width: 760px) {
  .vs { grid-template-columns: 1fr; padding: var(--spacing-24); }
  .vs__head { display: none; }
  .vs__rows > div { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .vs__rows dd::before { content: "bump: "; color: var(--color-slate); font-weight: var(--font-weight-regular); }
  .vs__rows dd.vs__b::before { content: "Terminal: "; }
}

/* CX-21 roadmap, light */
.cx--road text { font-family: var(--font-dm-sans); }

.lg--ctp img { height: 22px; width: auto; opacity: .75; }

/* ============================================================
   KIWIBANK LAYER
   Brand rules taken from kiwibank.co.nz: black and white bands
   with Kiwi green as the single action colour, peach and sky as
   accent panels, square corners on everything, uppercase tracked
   eyebrow labels, medium-weight headings on light body copy, and
   the green chevron as the link mark.
   ============================================================ */

/* --- Bands ------------------------------------------------ */
.band--black { background: var(--color-ink-black); color: var(--color-paper-white); }
.band--mist  { background: var(--color-mist); }
.band--green { background: var(--color-kiwi-green); color: var(--color-ink-black); }
.band--rule  { border-top: 1px solid var(--color-frost-gray); }
.hero { background: var(--color-ink-black); }

.band--black .h-xl, .band--black h3, .band--black .grad h3 { color: var(--color-paper-white); }
.band--black .lead, .band--black p { color: var(--color-mist); }
.band--black .ck__txt small { color: var(--color-mist); }
.band--black .ck button { color: var(--color-paper-white); }
.band--black .ck button:hover { background: rgba(255,255,255,.08); }
.band--black .ck.is-active button { background: var(--color-paper-white); color: var(--color-ink-black); }
.band--black .ck.is-active .ck__txt small { color: var(--color-graphite); }
.band--black .ck__ic { background: var(--color-kiwi-green); }
.band--black .ck__ic svg { stroke: var(--color-ink-black); }
.band--black .ck button::after { background: var(--color-kiwi-green); }
.band--black .wcard, .band--black .white-card { background: var(--color-paper-white); }
.band--black .wcard p, .band--black .wcard .odocap { color: var(--color-slate); }

.band--green .h-xl, .band--green .display, .band--green .cta__note, .band--green p { color: var(--color-ink-black); }
.band--green .capture { background: var(--color-paper-white); border: 1px solid var(--color-ink-black); }
.band--green .capture__msg { color: var(--color-ink-black); }
.band--green .btn--coral { background: var(--color-ink-black); color: var(--color-paper-white); }
.band--green .btn--coral:hover { background: var(--color-night); }
.band--green .chip--on-indigo { background: var(--color-ink-black); color: var(--color-paper-white); }
.band--green :focus-visible { outline-color: var(--color-ink-black); }

/* --- Type ------------------------------------------------- */
body { font-weight: var(--font-weight-regular); }
.h-xl, .display { font-weight: var(--font-weight-medium); }
.h-indigo { color: var(--color-forest); }
.h-light { color: var(--color-paper-white); }
.h-light em, .hero .display em { color: var(--color-kiwi-green); }
.pcard h3, .story h3, .fcard h3, .grad h3 { font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-mid); }
.lead { color: var(--color-graphite); }

/* eyebrow labels: uppercase and tracked, the way Kiwibank sets them */
.chip {
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  padding: 7px 12px;
}
.chip--dark { background: transparent; color: var(--color-kiwi-green); padding-left: 0; }
.chip--indigo, .chip--sky, .chip--cream, .chip--mint { background: var(--color-peach); color: var(--color-ink-black); }
.chip--on-mint { background: var(--color-paper-white); color: var(--color-ink-black); }
.chip--on-lilac { background: var(--color-paper-white); color: var(--color-ink-black); }
.chip--on-peach { background: var(--color-peach); color: var(--color-ink-black); }
.chip--peach { background: var(--color-peach); color: var(--color-ink-black); }

/* --- Buttons: green fill, black label, square ------------- */
.btn { font-weight: var(--font-weight-medium); }
.btn--coral { background: var(--color-kiwi-green); color: var(--color-ink-black); }
.btn--coral:hover { background: var(--color-paper-white); color: var(--color-ink-black); }
.btn--ghost-light:hover { background: var(--color-kiwi-green); border-color: var(--color-kiwi-green); color: var(--color-ink-black); }
.btn--nav { border-color: var(--color-ink-black); }
.btn--nav:hover { background: var(--color-kiwi-green); color: var(--color-ink-black); border-color: var(--color-kiwi-green); }
.btn--cream { background: var(--color-kiwi-green); color: var(--color-ink-black); }
.btn--cream:hover { background: var(--color-paper-white); }

/* --- Accent panels ---------------------------------------- */
.pcard--sky { background: var(--color-sky); }
.pcard--peach { background: var(--color-peach); }
.pcard--sky h3, .pcard--peach h3 { color: var(--color-ink-black); }
.pcard--sky > p, .pcard--peach > p { color: var(--color-night); }
.story--peach { background: var(--color-peach); }
.story--mist { background: var(--color-mist); }
.story--cream { background: var(--color-sky); }
.story h3 { color: var(--color-ink-black); }
.amt { background: var(--color-paper-white); color: var(--color-ink-black); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.faq__item, .faq__item:nth-child(2n) { background: var(--color-mist); border-bottom: 1px solid var(--color-frost-gray); }
.faq__ic { background: var(--color-kiwi-green); }
.fcard { border: 1px solid var(--color-frost-gray); }
.fcard__ic--mint { background: var(--color-kiwi-green); }
.fcard__ic--lilac { background: var(--color-sky); }
.fcard__ic--peach { background: var(--color-peach); }
.fcard__ic--lilac svg, .fcard__ic--peach svg, .fcard__ic--mint svg { stroke: var(--color-ink-black); }
.cchip { border-color: var(--color-ink-black); color: var(--color-ink-black); }
.cchip.feat { background: var(--color-kiwi-green); border-color: var(--color-kiwi-green); }
.wcard { border: 1px solid var(--color-frost-gray); }
.band--black .wcard { border-color: transparent; }
.vs { border: 1px solid var(--color-frost-gray); }

/* green chevrons, Kiwibank's link mark */
.ticks li::before, .bizticks li::before {
  background: none; width: 20px; height: 20px; top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319e480' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  background-size: 20px; background-repeat: no-repeat;
}
.ticks b, .bizticks b { color: var(--color-ink-black); font-weight: var(--font-weight-medium); }
.band--black .ticks b, .band--black .bizticks b { color: var(--color-paper-white); }

/* --- Nav, footer, notice ---------------------------------- */
.nav { border-bottom: 1px solid var(--color-frost-gray); }
.brand__div { background: var(--color-frost-gray); }
.logo { letter-spacing: -0.03em; font-weight: var(--font-weight-bold); }
.logo__mark i { background: var(--color-ink-black); }
.logo__mark i:last-child { background: var(--color-kiwi-green); }
.foot { background: var(--color-mist); border-top: 1px solid var(--color-frost-gray); }
.foot a:not(.logo):not(.brand) { color: var(--color-ink-black); }
.notice { background: var(--color-ink-black); }
.notice .count span { background: rgba(255,255,255,.14); }
.logos { border-top-color: var(--color-canopy-line); }
.lg { color: var(--color-paper-white); opacity: .6; }

/* --- Product surfaces ------------------------------------- */
.phone { background: var(--color-ink-black); border-radius: 30px; }
.phone__bar { background: var(--color-ink-black); color: var(--color-mist); border-radius: 22px 22px 0 0; }
.phone__body { border-radius: 0 0 22px 22px; color: var(--color-ink-black); }
.ps__target::before { background: var(--color-mist); }
[data-scene].is-done .ps__target::before { background: var(--color-kiwi-green); }
.ps__check svg { stroke: var(--color-ink-black); }
.ps__ring { border-color: var(--color-kiwi-green); }
.toast__ic { background: var(--color-kiwi-green); color: var(--color-ink-black); }
.faceid { background: var(--color-mist); }
.faceid svg { stroke: var(--color-forest); }
.keypad i { background: var(--color-mist); }
.chat__head { background: var(--color-ink-black); }
.chat__av { background: var(--color-kiwi-green); color: var(--color-ink-black); }
.chat__head small { color: var(--color-mist); }
.linkcard__top { color: var(--color-forest); }
.toolkit__photo { background: var(--color-ink-black); }
.toolkit__photo::after { background: linear-gradient(115deg, var(--color-kiwi-green) 0 26%, transparent 26%); opacity: .3; mix-blend-mode: normal; }

/* the card itself */
.cardface { background: var(--color-ink-black); border-radius: 0; }
.cardface::before { background: var(--color-kiwi-green); opacity: 1; }
.cardface::after { background: var(--color-paper-white); opacity: .12; }
.cardface__chip { background: #e8c87a; border-radius: 4px; }
.cardface__nfc svg { stroke: var(--color-ink-black); }
.cardface__foot small { color: var(--color-mist); }

/* --- Card face rolled back to the canopy-green design ------- */
.cardface { background: var(--card-ink); border-radius: 22px; }
.cardface::before { background: var(--card-leaf); opacity: .9; }
.cardface::after { background: var(--card-mint); opacity: .16; }
.cardface__chip { background: var(--card-cream); border-radius: 8px; }
.cardface__nfc svg { stroke: var(--card-ink); }
.cardface__foot small { color: var(--card-mint); }

/* --- Kiwibank mark in the header, at double size ------------ */
.nav .brand__kb { width: 88px; height: 88px; }
.nav .brand__div { height: 44px; }
.nav__in { height: 116px; }
html { scroll-padding-top: 128px; }
@media (max-width: 520px) {
  .nav .brand__kb { width: 72px; height: 72px; }
  .nav .brand__div { height: 34px; }
  .nav__in { height: 96px; }
  html { scroll-padding-top: 108px; }
}

/* --- Story cards: one Kiwi green surround ------------------- */
.story--peach, .story--mist, .story--cream { background: var(--color-kiwi-green); }
.story p { color: var(--color-night); }

/* --- Product UI keeps its own ink on dark bands ------------- */
.band--black .phone__body, .band--black .phone__body p { color: var(--color-ink-black); }
.ps__amt { color: var(--color-ink-black); }
.band--black .ps__lab, .band--black .ps__note { color: var(--color-slate); }
.band--black .receipt span { color: var(--color-slate); }
.band--black .receipt b { color: var(--color-ink-black); }

/* --- Money out / money in panels on Kiwi green -------------- */
.pcard--sky, .pcard--peach { background: var(--color-kiwi-green); }
.pcard--sky > p, .pcard--peach > p { color: var(--color-night); }