/* DukaanBox — The Paper Lantern
   A washi-and-bamboo world in daylight: paper surfaces, bamboo rules, charcoal ink,
   one vermilion active mark, and light reserved for the product's own moment —
   a payment arriving lights the surface up. Fintech anatomy throughout. */

/* ─────────────────────────── tokens ─────────────────────────── */
:root {
  /* grounds */
  --washi: #f6efe1;
  --washi-warm: #f2e8d6;
  --paper: #fffdf7;
  --paper-lit: #fdf8ec;

  /* structure */
  --bamboo: #d8b48a;
  --bamboo-deep: #b8925f;
  --rule: rgba(184, 146, 95, .34);
  --rule-soft: rgba(184, 146, 95, .2);
  --rib: rgba(184, 146, 95, .46);

  /* ink */
  --ink: #2a2a2a;
  --ink-soft: #6a6155;
  --ink-mute: #8d8375;
  --ink-dark: #2a2724;

  /* signals */
  --vermilion: #cc3a2e;
  --vermilion-deep: #b02f24;
  --money: #2d7a4a;
  --lit: #fdf1d4;                 /* the momentary lit state of a small plate */
  --glow: rgba(255, 228, 158, .66);
  --glow-strong: rgba(255, 214, 130, .5);

  /* shape */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-pill: 9999px;

  /* depth — always offset, always soft */
  --lift: 0 12px 34px -18px rgba(120, 86, 40, .42);
  --lift-phone: 0 34px 60px -26px rgba(60, 40, 16, .5), 0 3px 10px rgba(60, 40, 16, .28);

  /* metrics */
  --container: 1200px;
  --gutter: 40px;
  --section-y: 104px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ─────────────────────────── base ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; background: var(--washi); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--washi);
  color: var(--ink);
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 18.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: 'Instrument Sans', 'Geist', sans-serif; font-weight: 600; }
strong, b { font-weight: 600; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

/* every figure in the system is tabular — amounts must not jitter while a total ticks */
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

::selection { background: rgba(204, 58, 46, .16); color: var(--ink); }
:root { scrollbar-color: var(--bamboo) var(--washi); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--washi); }
::-webkit-scrollbar-thumb { background: var(--bamboo); border-radius: var(--r-pill); border: 3px solid var(--washi); }
::-webkit-scrollbar-thumb:hover { background: var(--bamboo-deep); }

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

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 11px 18px; border-radius: var(--r-sm);
  font-size: 15.5px; font-weight: 600; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 16px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* the world's structure: bamboo ribs banding the page, quiet */
.page-ribs {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 940px;
}

/* ─────────────────────────── icons ─────────────────────────── */
.icon {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon--sm { width: 17px; height: 17px; }

/* ─────────────────────────── buttons ─────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 24px;
  border-radius: var(--r-sm);
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.btn .icon { width: 17px; height: 17px; stroke-width: 2; }

.btn-accent { background: var(--vermilion); color: #fff; box-shadow: 0 6px 18px -8px rgba(176, 47, 36, .7); }
.btn-accent:hover { background: var(--vermilion-deep); }
.btn-ghost { background: var(--paper); color: var(--ink); border: 1px solid var(--bamboo); }
.btn-ghost:hover { border-color: var(--bamboo-deep); background: var(--paper-lit); }

.btn-lg { height: 57px; padding: 0 30px; font-size: 17.5px; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
}
.btn:active { transform: scale(.985); }

/* the one secondary action — a drawn plate, never a copied badge image */
.play-badge {
  display: inline-flex; align-items: center; gap: 11px;
  height: 54px; padding: 0 22px;
  border: 1px solid var(--bamboo); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); text-decoration: none;
  transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .play-badge:hover { border-color: var(--bamboo-deep); background: var(--paper-lit); transform: translateY(-1px); }
}
.play-badge:active { transform: scale(.985); }
.play-glyph { width: 20px; height: 22px; flex: none; }
.play-badge-text { display: flex; flex-direction: column; line-height: 1.15; }
.play-badge-text small { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.play-badge-text strong { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }

/* ─────────────────────────── header ─────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 239, 225, .92);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
.header.is-scrolled { box-shadow: 0 8px 24px -18px rgba(120, 86, 40, .6); }

.header-container {
  max-width: var(--container); margin: 0 auto;
  padding: 15px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo-container { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.logo-mark { width: 38px; height: 38px; }
.logo-text { font-family: 'Instrument Sans', 'Geist', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -.015em; }

.header-nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.header-nav a {
  position: relative;
  font-size: 16px; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; letter-spacing: -.005em;
  transition: color .18s var(--ease);
}
.header-nav a:hover { color: var(--vermilion-deep); }
.download-btn { height: 46px; padding: 0 22px; font-size: 16px; }

/* ─────────────────────────── hero ─────────────────────────── */
.hero { position: relative; z-index: 1; padding: 34px 0 80px; }
/* Centred, and it only works because the stage is scaled to sit within ~60px of
   the text column below. Centring a 195px mismatch is what put a hole above the
   headline; close the gap first, then centre. */
.hero-grid { display: grid; grid-template-columns: 1.04fr 1fr; gap: 64px; align-items: center; }

.hero-title {
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.06; letter-spacing: -.028em;
  max-width: 12ch;
}
.hero-description {
  margin-top: 24px; max-width: 52ch;
  font-size: 19px; line-height: 1.6; color: var(--ink-soft);
}
.lede-lead {
  display: block; margin-bottom: 7px;
  font-size: 22.5px; font-weight: 600; line-height: 1.28;
  letter-spacing: -.018em; color: var(--ink);
}
.hero-description strong { color: var(--ink); font-weight: 600; }

.hero-cta { margin-top: 34px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.hero-trust-badge {
  margin-top: 26px;
  display: flex; align-items: center; gap: 12px;
  font-size: 17px; color: var(--ink-soft);
}
.hero-trust-badge > span:last-child { flex: 1; }
.hero-trust-badge strong { color: var(--ink); font-weight: 600; }

/* The merchant's seal, in certification-rosette form (owner's reference): a
   scalloped award edge, a ring of stars, a bold check. A dukaan's proof is a
   stamp on the slip, so the line closes under an award seal, not a bare tick,
   and ink on paper is the world's own gesture.
   Two plates, per the reference badge: stamp-red ink (vermilion-deep, a step
   darker than the CTA's vermilion so the page's one active mark keeps its own
   note) and bamboo-gold stars.
   The tilt lives on the element, never only in a keyframe -- a stamp is never
   square, and a strike that never runs must still leave a finished seal. */
.hero-trust-seal {
  position: relative; flex: none;
  width: 40px; height: 40px;
  color: rgba(176, 47, 36, .85);
  transform: rotate(-1.2deg);
}
.hero-trust-seal svg { width: 100%; height: 100%; }

/* the strike: the stamp falls onto the paper once -- oversized, blurred and
   tilted, a hard contact at 35% where the ink floods dark, a recoil past rest,
   then the ink soaking back to its resting alpha. One act, then stillness: the
   claim rail already pulses on the 7s beat, and a seal that keeps re-stamping
   or re-ringing itself reads as flicker, not an attestation. Per-keyframe
   timing functions carry the physics -- an accelerating fall, an overshooting
   recoil. */
.hero-trust-seal.is-pressing { animation: seal-strike .55s linear 1.4s backwards; }
@keyframes seal-strike {
  0%   { transform: scale(1.42) rotate(-8deg); opacity: 0; filter: blur(2.4px);
         animation-timing-function: cubic-bezier(.5, 0, .85, .45); }
  35%  { transform: scale(.955) rotate(-.4deg); opacity: 1; filter: blur(0);
         color: rgba(140, 30, 21, .98);
         animation-timing-function: cubic-bezier(.3, 1.55, .6, 1); }
  60%  { transform: scale(1.006) rotate(-1.34deg); color: rgba(158, 38, 28, .92);
         animation-timing-function: cubic-bezier(.25, .6, .3, 1); }
  100% { transform: scale(1) rotate(-1.2deg); color: rgba(176, 47, 36, .85); }
}

/* the shock of contact: one ring snapped out and gone inside 400ms. ::before,
   because ::after belongs to the quiet 7s impression below. Starts at opacity
   0 in its own keyframes -- `both` fill must not paint it before the strike. */
.hero-trust-seal::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1.5px solid rgba(176, 47, 36, .5);
  opacity: 0; pointer-events: none;
}
.hero-trust-seal.is-pressing::before { animation: seal-shock .38s var(--ease) 1.59s both; }
@keyframes seal-shock {
  0%   { transform: scale(.72); opacity: 0; }
  18%  { opacity: .5; }
  100% { transform: scale(1.5); opacity: 0; }
}


/* ── the stage: the lantern glows behind, the merchant's own phone stands in front ── */
.hero-visual { position: relative; }
/* flow-root, not plain block: the phone's top margin would otherwise collapse
   through the stage and land the device at the stage's own top edge */
.hero-stage { position: relative; display: flow-root; height: 716px; }

/* On the two-column hero the stage is scaled down as one piece, so the phone
   keeps its true 20:9 screen and 2.14:1 body while the column heights come into
   balance. .hero-visual carries the scaled height so layout stays honest. */
@media (min-width: 1081px) {
  .hero-visual { height: 609px; }
  .hero-stage { transform: scale(.85); transform-origin: top center; }
}

.lantern-cord {
  position: absolute; left: 50%; top: -26px;
  width: 1px; height: 26px; background: var(--bamboo-deep); opacity: .45;
}
.lantern {
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%) translateY(var(--par, 0px));
  width: min(436px, 100%); height: 716px;
  border-radius: 218px / 120px;
  /* lit from inside: a real value range falling off to the paper edge, so the
     volume reads as a light source instead of a tint */
  background:
    radial-gradient(118% 62% at 50% 44%,
      #fffdf3 0%, #fdf5dd 34%, #f7e9c9 62%, #efdcb4 84%, #e4cda2 100%);
  box-shadow: 0 30px 76px -34px rgba(120, 86, 40, .5);
}
/* light thrown from inside the paper — an opacity fade on a pseudo-element,
   never an animated box-shadow */
/* sized in percentages so the spill can never widen the page — a fixed px glow
   overflowed the document at narrow widths, invisibly to any element scan */
.lantern::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 92%; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), rgba(255, 228, 158, 0));
  opacity: .72; transition: opacity .5s var(--ease);
  pointer-events: none;
  /* paper lanterns are never quite still — the page has a pulse at rest */
  animation: breathe 7s ease-in-out infinite;
}
.lantern.is-announcing::before { animation: none; opacity: 1; }
@keyframes breathe { 0%, 100% { opacity: .6; } 50% { opacity: .86; } }
.lantern-ribs {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  border-radius: 218px / 120px;
}
.lantern-ribs i { position: absolute; left: 0; right: 0; height: 1px; background: var(--rib); }

/* the phone: real device proportions — body 296×634 (2.14:1), screen 274×612 (20:9) */
.phone {
  position: relative; z-index: 3;
  width: 296px; height: 634px; margin: 41px auto 0;
  border-radius: 38px; padding: 11px;
  background: linear-gradient(158deg, #3a3a38 0%, #242422 46%, #333331 100%);
  box-shadow: var(--lift-phone);
}
.phone::after {
  content: ""; position: absolute; inset: 1px; border-radius: 37px;
  border: 1px solid rgba(255, 240, 200, .16); pointer-events: none;
}
.phone-btn { position: absolute; width: 2.5px; border-radius: 2px; background: #1d1d1b; }
.phone-btn--vol-a { left: -2px; top: 132px; height: 34px; }
.phone-btn--vol-b { left: -2px; top: 176px; height: 34px; }
.phone-btn--pwr { right: -2px; top: 152px; height: 56px; }

.phone-screen {
  position: relative; width: 274px; height: 612px;
  border-radius: 29px; background: var(--paper);
  overflow: hidden; display: flex; flex-direction: column;
}
.phone-punch {
  position: absolute; left: 50%; top: 11px; margin-left: -4px;
  width: 8px; height: 8px; border-radius: 50%; background: #17171a; z-index: 5;
}
.phone-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px 3px;
  font-size: 10.5px; font-weight: 600; color: var(--ink-soft);
}
.phone-status-icons { display: flex; align-items: center; gap: 4px; }

/* the app itself */
.app { position: relative; z-index: 2; padding: 8px 14px 0; flex: 1; }
.app-shop { display: flex; align-items: center; gap: 9px; }
.app-shop-mark {
  width: 32px; height: 32px; flex: none; border-radius: var(--r-sm);
  background: var(--vermilion); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600;
}
.app-shop-name { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.app-shop-status { margin-top: 1px; font-size: 10.5px; color: var(--ink-mute); display: flex; align-items: center; gap: 4px; }
.status-dot { width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--money); display: block; }

.app-tabs { margin-top: 15px; display: flex; gap: 18px; border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.app-tab { font-size: 11.5px; font-weight: 500; color: var(--ink-mute); }
.app-tab.active { color: var(--ink); font-weight: 600; position: relative; }
.app-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; background: var(--vermilion); }

.app-collection { margin-top: 16px; text-align: center; padding: 2px 0 14px; }
.collection-date { font-size: 10.5px; color: var(--ink-mute); letter-spacing: .02em; }
.collection-label { margin-top: 5px; font-size: 11.5px; font-weight: 500; color: var(--ink-soft); }
.collection-amount {
  margin-top: 3px;
  font-family: 'Instrument Sans', 'Geist', sans-serif;
  font-size: 33px; font-weight: 600; letter-spacing: -.028em;
  transition: color .3s var(--ease);
}
.collection-amount.tick { animation: tick .6s var(--ease); }
@keyframes tick {
  0%   { transform: translateY(5px); opacity: .5; }
  100% { transform: translateY(0);   opacity: 1; }
}

.app-ledger { border-top: 1px solid var(--rule); padding-top: 10px; }
.app-ledger-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; font-weight: 600; color: var(--ink-mute);
  letter-spacing: .04em; text-transform: uppercase;
}
.app-ledger-header .icon { width: 15px; height: 15px; stroke: var(--ink-mute); }
.transaction-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9.5px 0; border-bottom: 1px solid var(--rule-soft);
  animation: row-in .45s var(--ease);
}
.transaction-item:last-child { border-bottom: none; }
@keyframes row-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
.transaction-avatar {
  width: 27px; height: 27px; flex: none; border-radius: 8px;
  background: rgba(216, 180, 138, .3); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 600; color: var(--ink-soft);
}
.transaction-name { font-size: 12.5px; font-weight: 500; letter-spacing: -.005em; }
.transaction-time { font-size: 10px; color: var(--ink-mute); margin-top: 1px; }
.transaction-amount { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--money); }

/* payment cards: paper, lit at the moment of arrival */
.payment-box {
  position: absolute; z-index: 4; width: 200px;
  background: var(--paper);
  border-radius: var(--r-md); padding: 11px 13px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--lift);
  animation: float 3.6s ease-in-out infinite;
}
/* Anchored to the phone's edge, with the overhang capped so a narrow column can
   never push a card past the container and widen the document. The cap wins at
   most widths; the phone-anchored value only takes over once the stage column
   is wide enough (~692px) for it to be the smaller overhang. */
.payment-box-1 { left: max(-24px, calc(50% - 322px)); top: 176px; }
/* negative, not positive: this offsets the float's phase rather than delaying
   its start, so the card never stalls when the entrance class is removed */
.payment-box-2 { right: max(-24px, calc(50% - 322px)); top: 452px; animation-delay: -1.8s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.payment-box::before {
  content: ""; position: absolute; inset: -4px; border-radius: 18px;
  box-shadow: 0 0 0 4px var(--glow-strong);
  opacity: 0; transition: opacity .45s var(--ease);
  pointer-events: none;
}
.payment-box.is-announcing::before { opacity: 1; }

.payment-logo { width: 26px; height: 26px; flex: none; display: flex; }
.payment-logo .brand-logo { width: 100%; height: 100%; }
.payment-text { display: flex; flex-direction: column; min-width: 0; }
.payment-title {
  display: block; font-size: 10px; font-weight: 600; color: var(--ink-mute);
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.payment-amount {
  display: block; margin-top: 2px;
  font-size: 16px; font-weight: 600; color: var(--money);
  letter-spacing: -.01em; white-space: nowrap;
}
.sound-waves { margin-left: auto; display: flex; align-items: flex-end; gap: 2.5px; height: 20px; }
.sound-wave { width: 2.5px; border-radius: 2px; background: var(--bamboo-deep); display: block; }
.wave-1 { height: 8px; }  .wave-2 { height: 16px; }
.wave-3 { height: 11px; } .wave-4 { height: 19px; }
.payment-box.is-announcing .sound-wave { animation: wave .6s ease-in-out 3; }
@keyframes wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.7); } }

/* The claim rail: the product's three promises, stacked under the call to
   action. Set at emphasis size — larger than the lede, because a highlighted
   line smaller than the paragraph around it is not emphasis — with a mark each
   and no rule of their own; a rule per claim made the hero stripey. Stacked
   rather than in a row: three claims at this size do not fit the text column,
   and shrinking them to fit would undo the emphasis. */
.claim-rail {
  position: relative; overflow: hidden;
  margin-top: 30px; padding: 4px 0;
  display: grid; grid-template-columns: 1fr; gap: 15px;
}

/* The announcement sweep — the page's own idea said as motion: a warm band
   travels the rail on the announce beat, and each mark lifts as it passes.
   Paper-warm, never the money glow: --glow stays reserved for a payment. */
.claim-rail::after {
  content: ""; position: absolute; z-index: 1;
  pointer-events: none;
  background: linear-gradient(185deg,
    rgba(255, 244, 214, 0) 0%,
    rgba(255, 240, 200, .9) 45%,
    rgba(255, 244, 214, 0) 100%);
  left: 0; right: 0; top: -48%; height: 46%;
  animation: sweep 7s cubic-bezier(.4, 0, .2, 1) infinite;
  mix-blend-mode: multiply;
}
/* the announcement travels DOWN the stack, reaching each claim in turn */
@keyframes sweep {
  0%       { transform: translateY(0); opacity: 0; }
  6%       { opacity: 1; }
  34%      { opacity: 1; }
  40%, 100%{ transform: translateY(330%); opacity: 0; }
}
.claim-rail .claim { position: relative; z-index: 2; }

/* the marks fire in turn, as the sweep reaches each one */
.claim-rail .claim-mark, .claim-rail .tricolour { animation: mark-lift 7s ease-in-out infinite; }
.claim-rail .claim:nth-child(2) .claim-mark { animation-delay: .55s; }
.claim-rail .claim:nth-child(3) .tricolour  { animation-delay: 1.1s; }
@keyframes mark-lift {
  0%, 22%, 100% { transform: scaleY(1); }
  8%            { transform: scaleY(1.14); }
}
.claim { display: flex; align-items: stretch; gap: 13px; }
.claim-text {
  font-size: 20.5px; font-weight: 600; line-height: 1.32;
  letter-spacing: -.018em; color: var(--ink);
  /* the hero column cannot hold this on one line at emphasis size, so let it
     break evenly at its own comma rather than orphaning the last word */
  text-wrap: balance;
}
/* No min-height: it forced the mark to 36px while the text line box is 25px,
   so the bars hung below the words. Stretching to the flex line alone keeps the
   mark exactly the height of the text, and still adapts if a claim wraps. */
.claim-mark, .claim .tricolour {
  flex: none; align-self: stretch;
  width: 4px; border-radius: 2px;
}
/* the bamboo bar; transform-origin is shared with the lift so they compose */
.claim-mark { background: var(--bamboo-deep); }
.claim-mark, .claim .tricolour { transform-origin: top; }

/* point two: the flag's own bands, in their real order, top to bottom */
.tricolour { display: flex; border-radius: 2px; overflow: hidden; }
.claim .tricolour {
  flex-direction: column;
  box-shadow: 0 0 0 1px rgba(184, 146, 95, .5);
}
.tricolour i { flex: 1; }
.tricolour i:nth-child(1) { background: #ff9933; }
.tricolour i:nth-child(2) { background: #ffffff; }
.tricolour i:nth-child(3) { background: #138808; }

.trust-item--india .trust-item-title { font-weight: 600; }
.trust-item--india .tricolour { width: 44px; height: 3px; margin-bottom: 7px; }

/* staged entrance — everything above is visible by default; these rules only
   bite once JS adds .hero-seq, so no-JS and reduced-motion get the static page */
.hero-seq .lantern   { animation: seq-lantern .9s var(--ease) backwards; }
.hero-seq .phone     { animation: seq-phone 1s var(--ease) .25s backwards; }
.hero-seq .app,
.hero-seq .phone-status { animation: seq-fade .7s var(--ease) .85s backwards; }
@keyframes seq-lantern {
  from { opacity: 0; transform: translateX(-50%) translateY(30px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes seq-phone { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
@keyframes seq-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes seq-card  { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }

@media (min-width: 761px) {
  .hero-seq .payment-box-1 { animation: seq-card .7s var(--ease) 1.5s backwards, float 3.6s ease-in-out 2.2s infinite; }
  .hero-seq .payment-box-2 { animation: seq-card .7s var(--ease) 1.9s backwards, float 3.6s ease-in-out -1.8s infinite; }
}
@media (max-width: 760px) {
  /* the card is centred by a transform here, so it fades rather than travels */
  .hero-seq .payment-box-1 { animation: seq-fade .7s var(--ease) 1.5s backwards; }
}

/* ─────────────────────────── trust strip ─────────────────────────── */
.trust-strip {
  position: relative; z-index: 1;
  background: var(--paper);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 40px 0;
}
.trust-strip-container {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px;
}
.trust-item { display: flex; gap: 13px; align-items: flex-start; }
.trust-item-icon { display: flex; flex: none; }
.trust-item-icon .icon { width: 23px; height: 23px; stroke: var(--bamboo-deep); }
.trust-item-title { font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; }
.trust-item-text { margin-top: 5px; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }

/* ─────────────────────────── section shells ─────────────────────────── */
.section { position: relative; z-index: 1; padding: var(--section-y) 0; background: var(--washi); }
.section--white { background: var(--paper); }
.section--warm { background: var(--washi-warm); }
.section + .section--white, .section--white + .section { border-top: 1px solid var(--rule); }

.section-header { max-width: 660px; }
.section-header--center { margin: 0 auto 56px; text-align: center; }
.section-title { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.028em; }
.section-subtitle { margin-top: 14px; font-size: 18.5px; color: var(--ink-soft); }

/* ─────────────────────────── who can use ─────────────────────────── */
/* a ruled directory of trades, not six identical boxes: the rule and the
   column carry the structure, so nothing here is a card */
.business-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 44px; }
.business-card {
  padding: 26px 0 32px; border-top: 1px solid var(--rule);
  transition: border-color .3s var(--ease);
}
.business-icon .icon { transition: stroke .3s var(--ease), transform .3s var(--ease); }
.business-icon { display: flex; }
/* 34px, not 24: in a ruled row this wide the mark was reading as a footnote.
   The stroke is trimmed to 1.45 because the icon is drawn in a 24-unit viewBox
   -- scaling the box scales the line with it, and the inherited 1.75 would have
   rendered a 2.48px stroke, chunky in a world built on hairlines. 1.45 lands at
   2.05px: a little more weight than before, which a larger mark should carry,
   without leaving the register. */
.business-icon .icon {
  width: 34px; height: 34px;
  stroke: var(--bamboo-deep); stroke-width: 1.45;
}
.business-title { margin-top: 14px; font-size: 19px; letter-spacing: -.015em; }
.business-description { margin-top: 9px; font-size: 17px; line-height: 1.55; color: var(--ink-soft); max-width: 34ch; }

/* ─────────────────────────── features ─────────────────────────── */
/* No align-items: start -- the three cards hold different amounts (six marks,
   ten languages, a ledger), and left to their natural heights they ended the
   row on a ragged line. Stretch makes the row one object; each card's content
   stays top-aligned inside it. */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 30px 26px;
}
/* At rest the card declares its elevation once, with the border. On hover it
   becomes a real object: it tilts toward the pointer in perspective, its
   contents stand off the face at their own depths, the shadow swings against
   the tilt, and a warm light follows the cursor across the paper. A sheet that
   has lifted casts a shadow, so the shadow is the consequence of the lift, not
   a second resting claim.

   --px/--py are unitless -.5..+.5, written by the pointer handler. Everything
   below -- rotation, shadow offset, light position -- is derived from those two
   numbers in CSS, so the script never owns a transform and reduced motion can
   neutralise the whole effect from one place. */
@media (hover: hover) and (pointer: fine) {
  .feature-card {
    --px: 0; --py: 0;
    position: relative;
    transform-style: preserve-3d;
    transform: perspective(1150px) rotateX(calc(var(--py) * -9deg)) rotateY(calc(var(--px) * 9deg));
    /* the unhovered state owns the RETURN: slow and eased, so the card settles
       back rather than snapping */
    transition: transform .55s var(--ease), box-shadow .55s var(--ease),
                border-color .34s var(--ease), background .34s var(--ease);
  }

  /* the light that follows the cursor: warm, low, and clipped to the card's own
     radius. It sits under the content (z-index 0 against the content's stacking)
     and never eats a pointer event. */
  .feature-card::after {
    content: ""; position: absolute; inset: 0;
    border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .34s var(--ease);
    background: radial-gradient(46% 38% at calc(50% + var(--px) * 100%) calc(50% + var(--py) * 100%),
                rgba(255, 233, 176, .5) 0%, rgba(255, 233, 176, .16) 42%, transparent 72%);
  }

  /* .features-grid prefix is load-bearing: the card also carries .reveal, and
     `.reveal.is-in { transform: none }` has the same specificity while sitting
     later in the file -- so a bare .feature-card:hover loses the transform and
     the card changes colour without ever tilting. */
  .features-grid .feature-card:hover {
    transform: perspective(1150px)
               rotateX(calc(var(--py) * -9deg)) rotateY(calc(var(--px) * 9deg))
               translateY(-6px) scale(1.012);
    border-color: var(--bamboo-deep);
    background: var(--paper-lit);
    /* the shadow swings opposite the tilt, the way a real sheet's would */
    box-shadow: calc(var(--px) * -22px) calc(16px - var(--py) * 12px) 42px -16px rgba(120, 86, 40, .5);
    /* while tracking, the transform must keep up with the cursor -- the .55s
       return above would read as syrup */
    transition: transform .13s linear, box-shadow .13s linear,
                border-color .34s var(--ease), background .34s var(--ease);
  }
  .features-grid .feature-card:hover::after { opacity: 1; }

  /* the contents stand off the card face at their own depths, so the tilt
     parallaxes them instead of sliding a flat picture */
  .feature-title, .feature-subtitle,
  .upi-apps-grid, .languages-grid, .collections-preview {
    transition: transform .4s var(--ease);
  }
  .features-grid .feature-card:hover .feature-title { transform: translateZ(30px); }
  .features-grid .feature-card:hover .feature-subtitle { transform: translateZ(20px); }
  .features-grid .feature-card:hover .upi-apps-grid,
  .features-grid .feature-card:hover .languages-grid,
  .features-grid .feature-card:hover .collections-preview { transform: translateZ(12px); }
}
.feature-title { font-size: 22px; letter-spacing: -.018em; line-height: 1.25; }
.feature-subtitle { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--ink-soft); }

/* UPI marks sit on the card's own ground: a bordered tile inside a bordered
   card is the nested-card tell */
.upi-apps-grid {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 10px;
}
.upi-app-item { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.upi-tile {
  width: 100%; height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.upi-tile .brand-logo { width: var(--fit, 58%); max-height: 40px; height: auto; }
.upi-app-name { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); }

/* At rest the marks are still. The `relay` loop that bobbed each tile in turn
   was removed on the owner's call -- six logos moving on their own read as a
   shake, not as alerts arriving. Motion here is now something the visitor
   causes: the hovered mark stands up off the card face and takes a shadow.
   The lift stays on the logo rather than the tile so the drop-shadow tracks
   the artwork's own bounds instead of the tile's empty box. */
@media (hover: hover) and (pointer: fine) {
  .brand-logo { transition: transform .3s var(--ease), filter .3s var(--ease); }
  .upi-app-name { transition: color .25s var(--ease); }
  .upi-app-item:hover .brand-logo {
    transform: translateZ(26px) translateY(-5px) scale(1.11);
    filter: drop-shadow(0 6px 10px rgba(120, 86, 40, .3));
  }
  .upi-app-item:hover .upi-app-name { color: var(--ink); }
}
/* languages read as a list on the card's own ground */
.languages-grid {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 10px;
}
.language-item { display: flex; align-items: center; gap: 9px; }
/* At rest every chip sits in its resting state. The `speak` loop that lit the
   ten codes in sequence was removed with the relay -- ten marks blinking on
   their own is the same flicker, one card over. The lit state is now something
   hovering causes, and it is the same lit state `speak` used to flash. */
@media (hover: hover) and (pointer: fine) {
  .language-code {
    transition: transform .28s var(--ease), background .24s var(--ease),
                border-color .24s var(--ease), color .24s var(--ease);
  }
  .language-name { transition: color .24s var(--ease); }
  .language-item:hover .language-code {
    background: var(--lit); border-color: var(--bamboo-deep); color: var(--vermilion-deep);
    transform: translateZ(22px) translateY(-2px) scale(1.1);
  }
  .language-item:hover .language-name { color: var(--ink); }
}
.language-code {
  width: 30px; height: 30px; flex: none; border-radius: var(--r-xs);
  background: var(--washi); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.language-name { font-size: 15px; font-weight: 500; color: var(--ink-soft); }

/* collections preview */
.collections-preview { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule); }
.collections-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.collection-tab {
  font-size: 14.5px; font-weight: 500; color: var(--ink-soft);
  padding: 2px 0; position: relative;
  transition: color .2s var(--ease);
}
.collection-tab:hover { color: var(--ink); }
.collection-tab.active { color: var(--ink); font-weight: 600; }
.collection-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; background: var(--vermilion); }
.collections-panel:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 4px; border-radius: var(--r-xs); }
.collections-panel .collections-row, .collections-panel .collections-transactions { animation: panel-in .4s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.collections-row { padding: 16px 0 14px; text-align: center; }
.collections-date { font-size: 14px; color: var(--ink-mute); }
.collections-label { margin-top: 5px; font-size: 15px; font-weight: 500; color: var(--ink-soft); }
.collections-amount { margin-top: 3px; font-family: 'Instrument Sans', 'Geist', sans-serif; font-size: 32px; font-weight: 600; letter-spacing: -.028em; }
.collections-transactions { border-top: 1px solid var(--rule); padding-top: 10px; }
.collections-transactions-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600; color: var(--ink-mute);
  letter-spacing: .04em; text-transform: uppercase;
}
.collections-transactions-header .icon { width: 15px; height: 15px; stroke: var(--ink-mute); }
.collection-transaction { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.collection-transaction:last-child { border-bottom: none; }
.collection-initials {
  width: 29px; height: 29px; flex: none; border-radius: 8px;
  background: rgba(216, 180, 138, .3); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
}
.collection-name { font-size: 15px; font-weight: 500; }
.collection-amount-small { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--money); }

/* ─────────────────────────── testimonials ─────────────────────────── */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testimonial-card {
  background: var(--washi); border: 1px solid var(--rule);
  transition: transform .28s var(--ease), border-color .28s var(--ease);
  border-radius: var(--r-lg); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 20px;
}
.testimonial-text { font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.testimonial-author { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.testimonial-avatar {
  width: 42px; height: 42px; flex: none; border-radius: var(--r-pill);
  background: rgba(216, 180, 138, .34); border: 1px solid var(--rule); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 16.5px; font-weight: 600;
}
.testimonial-name { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.testimonial-role { font-size: 14px; color: var(--ink-soft); margin-top: 1px; }

/* ─────────────────────────── FAQ ─────────────────────────── */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-md); margin-bottom: 12px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.faq-item--open { border-color: var(--bamboo-deep); background: var(--paper-lit); }
.faq-h { font: inherit; font-weight: 400; }
.faq-question {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; text-align: left;
}
.faq-number { flex: none; font-size: 14.5px; font-weight: 600; color: var(--bamboo-deep);
  letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.faq-question-text { font-size: 18px; font-weight: 600; letter-spacing: -.012em; }
.faq-toggle {
  margin-left: auto; flex: none;
  width: 30px; height: 30px; border-radius: var(--r-xs);
  background: var(--washi); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.faq-toggle .icon { width: 15px; height: 15px; stroke: var(--ink-soft); }
.faq-item--open .faq-toggle { transform: rotate(45deg); background: var(--vermilion); border-color: var(--vermilion); }
.faq-item--open .faq-toggle .icon { stroke: #fff; }

/* grid-rows collapse so open and close can interrupt each other mid-flight */
.faq-answer { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s var(--ease); }
.faq-answer.is-closed { grid-template-rows: 0fr; }
.faq-answer > div { overflow: hidden; }
.faq-answer p { padding: 0 24px 22px; font-size: 17px; line-height: 1.62; color: var(--ink-soft); max-width: 68ch; }

/* ─────────────────────────── footer ─────────────────────────── */
.footer { position: relative; z-index: 1; background: var(--ink-dark); color: rgba(255, 253, 247, .72); padding-top: 96px; margin-top: 104px; }

/* the closing lantern: one warm card overlapping the dark ground */
.footer-cta {
  position: relative; z-index: 2;
  max-width: 940px; margin: -200px auto 0;
  background: linear-gradient(165deg, #fffaeb 0%, var(--paper-lit) 55%, #fbf2dd 100%);
  border-radius: 24px;
  padding: 52px 48px; text-align: center;
  box-shadow: 0 34px 80px -34px rgba(120, 86, 40, .55);
}
.footer-cta-title { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.14; letter-spacing: -.028em; color: var(--ink); max-width: 20ch; margin: 0 auto; }
.footer-cta-actions { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.footer-container { max-width: var(--container); margin: 0 auto; padding: 84px var(--gutter) 0; }
.footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr 1.6fr; gap: 44px; }
.footer .logo-text { color: var(--paper); }
.footer-description { margin-top: 16px; font-size: 16px; line-height: 1.6; max-width: 40ch; }
.footer-heading { font-size: 14.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--paper); }
.footer-links, .footer-contact { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; }
.footer-links a, .footer-contact a {
  font-size: 16px; text-decoration: none; color: rgba(255, 253, 247, .72);
  transition: color .18s var(--ease);
}
.footer-links a:hover, .footer-contact a:hover { color: var(--paper); }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; }
.footer-contact .icon { width: 18px; height: 18px; margin-top: 3px; stroke: var(--bamboo); }
.footer :focus-visible { outline-color: var(--bamboo); }

.footer-bottom { margin-top: 64px; border-top: 1px solid rgba(216, 180, 138, .22); padding: 24px 0 30px; }
.footer-copyright { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14.5px; color: rgba(255, 253, 247, .55); }

/* ─────────────────── document pages (about, terms, privacy, support, 404) ─────────────────── */
/* The document sits in a raised panel and its lines run the panel's full width,
   matching the category reference's own layout. The earlier 720px measure was
   derived from a 52ch cap on paragraphs; that cap is gone (see below), so the
   constraint that produced 720 is gone with it and the width is re-derived
   rather than nudged. Elevation is declared once -- a 1px bamboo hairline, no
   shadow underneath it -- so this stays a sheet of paper, not a floating card. */
.doc-shell { padding: 56px var(--gutter) 96px; }
/* A page with a few lines in it does not want the full 1320: an oversized panel
   around short content reads as an empty box rather than a considered one. The
   long documents keep the wide measure; 404, About and Support opt down. */
.doc-shell--narrow .doc-main { max-width: 860px; }
.doc-main {
  position: relative; z-index: 1;
  max-width: 1320px; margin: 0 auto;
  padding: 60px clamp(28px, 4vw, 68px) 76px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
@media (max-width: 760px) {
  .doc-shell { padding: 0; }
  /* below the panel's own comfortable width it stops being a panel: full-bleed
     paper, no border to box in a screen that is already narrow */
  .doc-main {
    max-width: none; border: 0; border-radius: 0;
    padding: 56px var(--gutter) 80px;
  }
}
.doc-title { font-size: clamp(32px, 4vw, 46px); line-height: 1.1; letter-spacing: -.028em; }
.doc-updated {
  margin-top: 14px; padding-bottom: 26px;
  border-bottom: 1px solid var(--rule);
  font-size: 16px; color: var(--ink-soft);
}
.doc-main h2 { margin-top: 46px; font-size: 24px; letter-spacing: -.02em; }
.doc-main h3 { margin-top: 32px; font-size: 19px; letter-spacing: -.015em; }
/* No measure cap: lines run the panel's full width, which is the layout the
   owner asked for and what the reference does. The trade is real -- a line this
   long is harder to track back to on a wide monitor than a 70-character one --
   so line-height carries more of the load at 1.72, which is what keeps the eye
   on the right row when the row is long. */
.doc-main p, .doc-main li { font-size: 18px; line-height: 1.72; color: var(--ink-soft); }
/* the standfirst under the date, as the reference has: the product said once,
   before the document proper starts */
.doc-standfirst { margin-top: 16px; font-size: 18.5px; line-height: 1.6; color: var(--ink-soft); }
/* When a document opens with a standfirst instead of a date line, the intro
   block carries the rule that separates it from the first section. */
.doc-intro { padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
.doc-intro .doc-standfirst:first-child { margin-top: 16px; }
/* the owner's documents close with the revision date rather than opening on it */
.doc-lastupdated {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--rule);
  font-size: 16px; color: var(--ink-soft);
}
.doc-main p { margin-top: 15px; }
.doc-main ul, .doc-main ol { margin-top: 15px; display: flex; flex-direction: column; gap: 10px; }
.doc-main li { position: relative; padding-left: 20px; }
.doc-main li::before {
  content: ""; position: absolute; left: 2px; top: 12px;
  width: 7px; height: 1.5px; background: var(--bamboo-deep);
}
.doc-main li strong, .doc-main p strong { color: var(--ink); font-weight: 600; }

/* Numbered sub-clauses, laid out the way the category's reference documents are
   drafted: a bold clause number leading its own paragraph, not a hanging-indent
   list. Numbering runs only through the sections that carry enumerable
   provisions; later sections (liability, indemnity, governing law) run as plain
   prose, which is the same convention. */
.doc-main p.clause { margin-top: 14px; }
.clause-n {
  color: var(--vermilion-deep); font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-right: 9px;
}
/* :not(.btn) or this rule outranks .btn-accent and paints the CTA label
   vermilion on vermilion — invisible on 404 and support */
.doc-main a:not(.btn) { color: var(--vermilion-deep); text-underline-offset: 3px; }
.doc-main a:not(.btn):hover { color: var(--vermilion); }

/* the lit note — the world's accent, used once per document */
/* Inside the document panel this is no longer a card -- a bordered box within a
   bordered box is a nested card, which this system does not do. It keeps its job
   (marking a block apart from the prose) with a bamboo hairline above it and its
   own spacing, nothing more. */
.doc-card {
  margin-top: 44px; padding: 30px 0 0; max-width: 720px;
  border-top: 1px solid var(--rule);
}
.doc-card h2 { margin-top: 0; }
/* when the block follows the date line directly, the date's own bottom rule is
   already the separator -- a second hairline 26px under it reads as a mistake */
.doc-updated + .doc-card,
.doc-standfirst + .doc-card { border-top: 0; margin-top: 26px; padding-top: 0; }
.doc-card .btn { margin-top: 22px; }

.doc-footer { position: relative; z-index: 1; background: var(--ink-dark); }
.doc-footer-inner {
  max-width: 800px; margin: 0 auto; padding: 26px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  justify-content: space-between; align-items: center;
  font-size: 15.5px; color: var(--ink-mute);
}
.doc-footer-inner { color: rgba(255, 253, 247, .58); }
.doc-footer-inner a { color: rgba(255, 253, 247, .8); text-decoration: none; transition: color .18s var(--ease); }
.doc-footer-inner a:hover { color: var(--paper); }
.doc-footer :focus-visible { outline-color: var(--bamboo); }

@media (hover: hover) and (pointer: fine) {
  .testimonial-card:hover { transform: translateY(-3px); border-color: var(--bamboo); }
  .business-card:hover { border-color: var(--bamboo-deep); }
  .business-card:hover .business-icon .icon { stroke: var(--vermilion); transform: translateY(-3px); }
  .header-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px;
    background: var(--vermilion-deep); transform: scaleX(0); transform-origin: left;
    transition: transform .28s var(--ease);
  }
  .header-nav a:hover::after { transform: scaleX(1); }
}

/* ─────────────────────────── scroll reveals ─────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ─────────────────────────── support form ─────────────────────────── */
/* Fields are paper on paper, held by a bamboo hairline, at the senior-legible
   scale the rest of the page uses: 17px text in a 52px control, which is also a
   comfortable tap target. Vermilion is the focus ring only -- the same single
   active mark the CTA owns, spent on the thing the visitor is touching. */
/* The panel is wide; a text input is not prose and does not want to be. Fields
   stay at a width a person can actually scan and fill. */
.support-form { margin-top: 26px; max-width: 620px; }
.form-field { margin-bottom: 20px; }

.form-label {
  display: block; margin-bottom: 7px;
  font-size: 15.5px; font-weight: 600; color: var(--ink);
}
.form-optional { font-weight: 400; color: var(--ink-soft); }
.req { color: var(--vermilion-deep); }

.form-input {
  display: block; width: 100%;
  min-height: 52px; padding: 13px 15px;
  font: inherit; font-size: 17px; color: var(--ink);
  background: var(--washi); border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.form-input::placeholder { color: var(--ink-mute); }
.form-input:hover { border-color: var(--bamboo-deep); }
.form-input:focus { outline: none; border-color: var(--vermilion); background: var(--paper); }
.form-input:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }

/* the arrow is drawn, not a system widget, so the control matches the world */
.form-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8925f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px;
}
.form-select:invalid { color: var(--ink-mute); }
.form-textarea { min-height: 116px; resize: vertical; line-height: 1.55; }

/* an invalid field is named by its message, not by colour alone */
.form-input[aria-invalid="true"] { border-color: var(--vermilion); background: #fdf3f1; }
.form-error {
  margin-top: 6px; font-size: 14.5px; font-weight: 500; color: var(--vermilion-deep);
}
.form-error::before { content: "\2716\00a0"; font-size: 12px; }

.form-note { margin-top: 16px; font-size: 14.5px; color: var(--ink-soft); }
.form-status {
  margin-top: 16px; padding: 13px 15px;
  border-radius: var(--r-sm); font-size: 15.5px; font-weight: 500;
  background: rgba(45, 122, 74, .1); border: 1px solid rgba(45, 122, 74, .35); color: #1e5c36;
}
.form-status[data-state="error"] {
  background: rgba(204, 58, 46, .08); border-color: rgba(204, 58, 46, .35); color: var(--vermilion-deep);
}
.support-form .btn-lg { width: 100%; max-width: 260px; }
@media (max-width: 560px) { .support-form .btn-lg { max-width: none; } }

/* ─────────────────────────── responsive ─────────────────────────── */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-title, .hero-description { max-width: none; }
  .trust-strip-container { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .business-cards { grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: 1fr; }
  .footer-content { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --section-y: 76px; }
  .header-nav { display: none; }
  /* ...except on the legal pages, where the nav IS the navigation: no download
     CTA beside it, and nothing but the wordmark otherwise. It takes its own row
     rather than disappearing. Deliberately not using :has() for the container --
     the merchants this is built for are on Android WebViews old enough that it
     may not resolve, and wrapping every header here costs nothing, since the
     marketing nav is already hidden and the logo and CTA fit on one row. */
  .header-container { flex-wrap: wrap; row-gap: 12px; }
  .header-nav--legal {
    display: flex; width: 100%; margin-left: 0;
    gap: 20px; flex-wrap: wrap;
  }
  .header-container { padding: 12px var(--gutter); }
  .logo-mark { width: 34px; height: 34px; }
  .logo-text { font-size: 20px; }
  .hero { padding: 44px 0 64px; }
  .claim-rail { gap: 14px; margin-top: 26px; }
  .business-cards { grid-template-columns: 1fr; gap: 0; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .footer-cta { margin: -180px 20px 0; padding: 40px 26px; border-radius: 20px; }
  .footer-content { grid-template-columns: 1fr; gap: 34px; }

  /* the phone fills the column here, so a card flanking it would bury the ledger.
     One card floats clear above the lantern instead, and the pair becomes a single. */
  .hero-stage { height: 812px; }
  .lantern { top: 74px; }
  .lantern-cord { top: 0; height: 60px; }
  .phone { margin-top: 115px; }
  .payment-box-1 {
    left: 50%; top: 0; width: 230px;
    transform: translateX(-50%); animation: none;
  }
  .payment-box-2 { display: none; }
}

@media (max-width: 560px) {
  body { font-size: 17.5px; }
  /* The header holds a 20px wordmark and a 16px CTA on a 350px line. Trim the
     button's padding and the logo's gap -- both chrome -- rather than shrinking
     either piece of text, which is the part that has to stay legible. */
  .header-container { gap: 12px; }
  .logo-container { gap: 9px; }
  .download-btn { padding: 0 14px; }
  .trust-strip-container { grid-template-columns: 1fr; }
  .hero-cta, .footer-cta-actions { flex-direction: column; align-items: stretch; }
  .hero-cta .btn, .hero-cta .play-badge,
  .footer-cta-actions .btn, .footer-cta-actions .play-badge { width: 100%; }
  .claim-rail { gap: 13px; }
  .footer-links a, .footer-contact a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Below 400px three columns of marks cannot hold a name like "Amazon Pay" at a
   senior-legible size, whatever the gap. Two columns give each name ~130px and
   the label keeps its 14.5px. The header's wordmark and button label are the
   one place type may give: they are chrome, not reading copy, and at this width
   the alternative is a header that overflows the screen. Nothing a visitor
   actually reads drops below 14px. */
@media (max-width: 400px) {
  .upi-apps-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 10px; }
  .logo-text { font-size: 18.5px; }
  .download-btn { font-size: 15px; padding: 0 12px; }
  .header-container { gap: 10px; }
}

/* below the phone's own width the stage scales as one piece, so the device keeps
   its proportions instead of the screen being squeezed out of ratio */
@media (max-width: 360px) {
  .hero-stage { height: 700px; transform: scale(.84); transform-origin: top center; }
}

/* ─────────────────────────── reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .payment-box { animation: none; }
  .claim-mark, .claim .tricolour { transform: scaleY(1); }
  .claim-rail::after, .hero-trust-seal::before { display: none; }
  .hero-trust-seal.is-pressing { animation: none; }
  .lantern { --par: 0px !important; }
  .lantern::before { animation: none; }
  /* hover may still change colour and depth; nothing is allowed to travel,
     tilt or stand off the page */
  .feature-card { transform: none; transform-style: flat; }
  .features-grid .feature-card:hover, .upi-app-item:hover .brand-logo,
  .language-item:hover .language-code,
  .features-grid .feature-card:hover .feature-title,
  .features-grid .feature-card:hover .feature-subtitle,
  .features-grid .feature-card:hover .upi-apps-grid,
  .features-grid .feature-card:hover .languages-grid,
  .features-grid .feature-card:hover .collections-preview { transform: none; }
  .feature-card::after { display: none; }
}