/* ==========================================================================
   OpenRewards — marketing site
   Type:   Bricolage Grotesque (headlines) · DM Sans (body, buttons) ·
           Geist Mono (labels, eyebrows) · Google Sans Flex (in-app UI)
   Colour: Royal Blue #014BAA × Light Cream #F8F3F0 (see THEME G below)
   ========================================================================== */


:root {
  /* brand */
  --palm: #02261e;         /* Palm Leaf — primary */
  --palm-700: #0c3b30;
  --palm-900: #011712;
  --sail: #89c9c9;         /* Sail — secondary blocks */
  --lime: #cfe0f6;         /* Fringy Flower — highlight */
  --tint: #d6ebeb;         /* light Sail for chips, icons, image placeholders */
  --tint-2: #bfe0e0;
  --serenade: #f2f7f9;     /* Serenade — page */
  --white: #ffffff;

  /* text */
  --ink: #02261e;
  --ink-2: #28443e;        /* 5.7:1 on Sail, 10:1 on Serenade */
  --ink-3: #34504a;        /* 4.6:1 on Sail, 8:1 on Serenade */
  --on-palm: #f2f7f9;
  --on-palm-2: #b8d0cb;    /* 10:1 on Palm */

  --line: rgba(1, 75, 170, 0.1);
  --line-2: rgba(1, 75, 170, 0.18);
  --line-palm: rgba(242, 247, 249, 0.16);

  --f-display: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: var(--f-display);
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --pill: 999px;

  --max: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --sec: clamp(64px, 8.5vw, 112px);

  --shadow-1: 0 1px 2px rgba(4, 20, 48, 0.06), 0 8px 24px -12px rgba(4, 20, 48, 0.18);
  --shadow-2: 0 2px 6px rgba(4, 20, 48, 0.08), 0 30px 60px -24px rgba(4, 20, 48, 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--serenade);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--palm); outline-offset: 3px; border-radius: 6px; }
.on-palm :focus-visible { outline-color: var(--lime); }
::selection { background: var(--lime); color: var(--palm); }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--serenade); padding: 10px 16px; border-radius: var(--pill); }
.skip:focus { left: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.sec { padding: var(--sec) 0; }
.sec--tight { padding: calc(var(--sec) * 0.6) 0; }
.bg-sail { background: var(--sail); }
.bg-white { background: var(--white); }

/* ---------- Type ---------- */
.display, h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
.display { font-size: clamp(3rem, 7.8vw, 6.9rem); line-height: 1.05; letter-spacing: -0.04em; }
h2, .h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); }
h3, .h3 { font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.16; letter-spacing: -0.02em; }
/* Highlight: Fringy Flower marker on light, Fringy Flower text on Palm */
/* Highlight strip: drawn from layered gradients so it hugs the letters
   (cap height → descender) instead of the font's taller line box, which
   would otherwise cover the descenders of the line above. */
em.accent, .accent {
  --r: .15em;              /* corner radius */
  --t: .2em;               /* strip top, from the inline box top */
  --h: .93em;              /* strip height */
  --c: var(--lime);
  font-style: normal; color: var(--palm);
  padding: 0 .12em;
  margin: 0 -.04em;
  background:
    radial-gradient(closest-side, var(--c) 97%, transparent 100%) 0 var(--t) / calc(var(--r) * 2) calc(var(--r) * 2) no-repeat,
    radial-gradient(closest-side, var(--c) 97%, transparent 100%) 100% var(--t) / calc(var(--r) * 2) calc(var(--r) * 2) no-repeat,
    radial-gradient(closest-side, var(--c) 97%, transparent 100%) 0 calc(var(--t) + var(--h) - var(--r) * 2) / calc(var(--r) * 2) calc(var(--r) * 2) no-repeat,
    radial-gradient(closest-side, var(--c) 97%, transparent 100%) 100% calc(var(--t) + var(--h) - var(--r) * 2) / calc(var(--r) * 2) calc(var(--r) * 2) no-repeat,
    linear-gradient(var(--c), var(--c)) var(--r) var(--t) / calc(100% - var(--r) * 2) var(--h) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 calc(var(--t) + var(--r)) / 100% calc(var(--h) - var(--r) * 2) no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.on-palm em.accent, .on-palm .accent { color: var(--lime); background: none; padding: 0; }

.mono, .eyebrow, .btn, .tag, .tier__name, .tier__flag, .receipt__lbl, .foot h4, .ph-note,
.ui__badge, .st, .feed__chg, .trio__k, .safe__num, .case__logo, .modes button, .gbadge, .mini-btn, .logo-ph {
  font-family: var(--f-mono);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--palm); margin: 0 0 20px;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; background: currentColor; border-radius: 2px; }
.on-palm .eyebrow { color: var(--lime); }

.lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--ink-2); margin: 24px 0 0; max-width: 34em; text-wrap: pretty; letter-spacing: -0.01em; }
.on-palm .lede { color: var(--on-palm-2); }
p { margin: 0; text-wrap: pretty; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; color: var(--ink-3); }

/* ---------- Buttons ---------- */
.btn {
  --h: 54px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 26px; border-radius: var(--pill);
  font-weight: 500; font-size: 14px; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap;
  border: 1.5px solid transparent;
  transition: transform .35s var(--ease), background-color .25s, color .25s, box-shadow .35s var(--ease), border-color .25s;
}
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--palm); color: var(--serenade); box-shadow: 0 10px 24px -12px rgba(1, 75, 170, .7); }
.btn--primary:hover { background: var(--palm-700); transform: translateY(-1px); box-shadow: 0 16px 30px -14px rgba(1, 75, 170, .8); }
.btn--ghost { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); background: rgba(1, 75, 170, .03); }
.btn--light { background: var(--lime); color: var(--palm); }
.btn--light:hover { background: #bcd4f2; transform: translateY(-1px); }
.btn--ghost-light { border-color: var(--line-palm); color: var(--serenade); }
.btn--ghost-light:hover { border-color: var(--serenade); }
.btn--sm { --h: 44px; padding: 0 20px; font-size: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
@media (max-width: 520px) { .btn { white-space: normal; height: auto; min-height: var(--h); padding: 14px 22px; text-align: center; line-height: 1.3; } }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--ink);
  padding-bottom: 4px;
  background: linear-gradient(var(--palm), var(--palm)) 0 100% / 100% 1.5px no-repeat;
  transition: background-size .4s var(--ease), color .2s;
}
.link svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.link:hover { color: var(--palm); }
.link:hover svg { transform: translateX(4px); }
.on-palm .link { color: var(--serenade); background-image: linear-gradient(var(--lime), var(--lime)); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  padding: 14px 0;
  transition: background-color .3s, box-shadow .3s, padding .3s;
}
.nav.is-scrolled { background: rgba(242, 247, 249, .86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); padding: 10px 0; }
.nav__in { display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand__mark { width: 34px; height: 34px; }
.brand__word { font-family: var(--f-display); font-size: 25px; letter-spacing: -0.03em; line-height: 1; }
.brand__by { display: none; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--ink-3); border-left: 1px solid var(--line-2); padding-left: 10px; margin-left: 2px; line-height: 1.1; }
.nav__links { display: flex; gap: 4px; margin-left: 12px; }
.nav__links a { white-space: nowrap;
  position: relative; padding: 10px 14px; font-weight: 500; font-size: 15.5px; color: var(--ink-2); border-radius: var(--pill);
  transition: color .2s, background-color .2s;
}
.nav__links a:hover { color: var(--ink); background: rgba(1, 75, 170, .04); }
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--palm); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav__right .plain { padding: 10px 14px; font-weight: 500; font-size: 15.5px; color: var(--ink-2); border-radius: var(--pill); }
.nav__right .plain:hover { color: var(--ink); background: rgba(1, 75, 170, .04); }
.nav__burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; align-items: center; justify-content: center; }
.nav__burger span, .nav__burger span::before, .nav__burger span::after { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; transition: transform .3s var(--ease), background-color .2s; }
.nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; }
.nav__burger span::before { top: -6px; } .nav__burger span::after { top: 6px; }
.nav.is-open .nav__burger span { background: transparent; }
.nav.is-open .nav__burger span::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__burger span::after { transform: translateY(-6px) rotate(-45deg); }
.nav__sheet { display: none; }

@media (max-width: 1080px) {
  .nav__links, .nav__right .plain, .nav__right .btn { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__sheet {
    display: block; position: fixed; inset: 64px 0 auto 0; background: var(--serenade);
    padding: 12px var(--gut) 28px; border-bottom: 1px solid var(--line);
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: all .3s var(--ease);
    box-shadow: 0 30px 40px -30px rgba(4, 20, 48, .3);
  }
  .nav.is-open .nav__sheet { transform: none; opacity: 1; visibility: visible; }
  .nav__sheet a:not(.btn) { display: block; padding: 16px 0; font-family: var(--f-display); font-size: 28px; letter-spacing: -0.02em; border-bottom: 1px solid var(--line); }
  .nav__sheet a[aria-current="page"] { color: var(--palm); }
  .nav__sheet .btn { width: 100%; margin-top: 20px; }
}

/* ---------- Hero ---------- */
.hero { padding: clamp(24px, 4vw, 48px) 0 var(--sec); position: relative; }
.hero__grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--pill);
  background: var(--white); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
}
.pill b { color: var(--ink); font-weight: 650; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sail); box-shadow: 0 0 0 4px rgba(207, 224, 246, .18); animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(207, 224, 246, 0); } }
.hero .lede { max-width: 30em; }

.hero__media { position: relative; }
.hero__photo {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 4 / 4.6; background: var(--tint);
  box-shadow: var(--shadow-2);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s var(--ease); }
.is-loaded .hero__photo img { transform: scale(1); }
.hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 20, 48, 0) 55%, rgba(4, 20, 48, .35)); }

/* Receipt-style proof cards */
.receipt {
  position: absolute; z-index: 2;
  border-radius: 22px; padding: 18px 20px 20px; min-width: 210px;
  box-shadow: var(--shadow-2);
}
.receipt__lbl { font-size: 11.5px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.receipt__val { font-family: var(--f-display); font-size: clamp(2rem, 3.2vw, 2.7rem); letter-spacing: -0.03em; line-height: 1; margin-top: 10px; }
.receipt__val small { font-size: .5em; letter-spacing: 0; margin-left: 4px; }
.receipt__meta { margin-top: 12px; padding-top: 12px; border-top: 1px dashed currentColor; font-size: 13px; display: flex; justify-content: space-between; gap: 16px; opacity: .85; }
.receipt--dark { background: var(--palm); color: var(--serenade); left: -24px; bottom: 64px; }
.receipt--dark .receipt__lbl { color: var(--lime); }
.receipt--dark .receipt__meta { border-color: rgba(242, 247, 249, .3); }
.receipt--light { background: var(--serenade); color: var(--ink); right: -24px; top: 44px; }
.receipt--light .receipt__lbl { color: var(--palm); }
.receipt--light .receipt__meta { border-color: var(--line-2); color: var(--ink-2); }
.receipt .tick { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; background: currentColor; }
.receipt .tick svg { width: 11px; height: 11px; }
.float-a { animation: floatA 7s ease-in-out infinite; }
.float-b { animation: floatB 8s ease-in-out infinite; }
@keyframes floatA { 50% { transform: translateY(-8px); } }
@keyframes floatB { 50% { transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .float-a, .float-b, .pill .dot { animation: none; } }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__photo { aspect-ratio: 4 / 3.6; border-radius: var(--r-lg); }
  .receipt--dark { left: 12px; bottom: 12px; }
  .receipt--light { right: 12px; top: 12px; }
}
@media (max-width: 520px) {
  .receipt { min-width: 0; padding: 14px 16px; border-radius: 18px; }
  .receipt__meta { display: none; }
  .receipt__val { font-size: 1.7rem; }
  .btn-row .btn { flex: 1 1 100%; }
}

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); }
.stat { padding: 32px 28px 8px 0; border-right: 1px solid var(--line); }
.stat + .stat { padding-left: 28px; }
.stat:last-child { border-right: 0; }
.stat__n { font-family: var(--f-display); font-size: clamp(2.8rem, 5vw, 4.4rem); letter-spacing: -0.04em; line-height: 1; color: var(--palm); }
.stat__n sup { font-size: .45em; vertical-align: top; position: relative; top: .25em; margin-left: 2px; }
.stat__l { margin-top: 12px; color: var(--ink-2); font-size: 15.5px; max-width: 16em; }
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat, .stat + .stat { padding: 28px 16px 24px 0; }
  .stat:nth-child(2n) { border-right: 0; padding-left: 16px; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

.markets { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.market { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: var(--pill); background: var(--white); border: 1px solid var(--line); font-weight: 500; font-size: 14.5px; }
.market img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* ---------- Logo marquee ---------- */
.trusted { display: flex; align-items: center; gap: 40px; }
.trusted__lbl { flex: 0 0 220px; font-size: 15px; color: var(--ink-2); line-height: 1.4; }
.marquee { position: relative; overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; gap: 16px; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
.logo-ph {
  height: 64px; min-width: 188px; padding: 0 22px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--white); display: flex; align-items: center; gap: 10px;
  color: var(--ink-2); font-size: 13px; font-weight: 500; text-transform: uppercase; white-space: nowrap;
}
.logo-ph svg { width: 22px; height: 22px; color: var(--palm); }
@media (max-width: 760px) { .trusted { flex-direction: column; align-items: flex-start; gap: 20px; } .trusted__lbl { flex: none; } .marquee { width: 100%; } }

/* ---------- Section heads ---------- */
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: clamp(40px, 5vw, 64px); }
.head .lede { margin-top: 20px; }
.head--center { flex-direction: column; align-items: center; text-align: center; }
.head--center .lede { margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { .head { flex-direction: column; align-items: flex-start; } }

/* ---------- Catalogue bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(180px, auto); gap: 14px; }
.tile {
  position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--tint);
  color: var(--serenade); isolation: isolate;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(1, 75, 170, 0) 40%, rgba(1, 75, 170, .72)); }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.tile:hover img { transform: scale(1.05); }
.tile__body { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.tile__name { font-family: var(--f-display); font-size: clamp(1.4rem, 2vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.05; }
.tile__meta { font-size: 13.5px; opacity: .88; margin-top: 4px; }
.tile__go { width: 40px; height: 40px; border-radius: 50%; background: var(--serenade); color: var(--palm); display: grid; place-items: center; flex-shrink: 0; transform: scale(.85); opacity: 0; transition: all .4s var(--ease); }
.tile__go svg { width: 18px; height: 18px; }
.tile:hover .tile__go, .tile:focus-visible .tile__go { transform: none; opacity: 1; }
.t-a { grid-column: span 5; grid-row: span 2; }
.t-b { grid-column: span 4; grid-row: span 1; }
.t-c { grid-column: span 3; grid-row: span 2; }
.t-d { grid-column: span 4; grid-row: span 1; }
.t-e { grid-column: span 7; grid-row: span 1; }
.t-f { grid-column: span 5; grid-row: span 1; }
.tile--chips { background: var(--lime); color: var(--palm); padding: 24px; gap: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.tile--chips::before { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 14px; border-radius: var(--pill); border: 1px solid var(--line-2); font-size: 14px; font-weight: 500; }
.chip--solid { background: var(--palm); color: var(--lime); border-color: transparent; }
@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(200px, auto); }
  .t-f { grid-column: span 2; }
  .t-a, .t-b, .t-c, .t-d, .t-e, .t-f { grid-column: span 1; grid-row: span 1; }
  .t-a { grid-column: span 2; grid-row: span 2; }
  .t-e { grid-column: span 2; }
  .tile__go { opacity: 1; transform: none; }
}
@media (max-width: 520px) { .bento { grid-auto-rows: minmax(170px, auto); gap: 10px; } .tile__body { left: 16px; right: 16px; bottom: 14px; } .tile__go { display: none; } }

/* ---------- Feature rows ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 112px); align-items: center; }
.feature--flip .feature__media { order: -1; }
.feature__media { position: relative; }
.feature__photo { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 5 / 5.4; background: var(--tint-2); box-shadow: var(--shadow-1); }
.feature__photo img { width: 100%; height: 100%; object-fit: cover; }
.checks { list-style: none; padding: 0; margin: 32px 0 36px; display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 40px; min-height: 26px; color: var(--ink); font-size: 16.5px; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23014baa' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 14L8.5 17.5L19 6.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.bg-sail .checks li::before, .card .checks li::before { background-color: var(--serenade); }
.on-palm .checks li { color: var(--serenade); }
.on-palm .checks li::before { background-color: rgba(242, 247, 249, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfe0f6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 14L8.5 17.5L19 6.5'/%3E%3C/svg%3E"); }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature--flip .feature__media { order: 0; }
  .feature__photo { aspect-ratio: 4 / 3.3; border-radius: var(--r-lg); }
}

/* UI overlay cards on photos */
.ui {
  position: absolute; background: var(--white); color: var(--ink); border-radius: 20px; padding: 16px 18px;
  box-shadow: var(--shadow-2); font-size: 14px; min-width: 240px;
}
.ui__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ui__row + .ui__row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ui__k { color: var(--ink-3); font-size: 13px; }
.ui__v { font-weight: 650; font-variant-numeric: tabular-nums; }
.ui__title { font-weight: 650; display: flex; align-items: center; gap: 8px; }
.ui__badge { font-size: 11.5px; font-weight: 500; padding: 4px 8px; border-radius: var(--pill); background: rgba(1, 75, 170, .08); color: var(--palm); letter-spacing: .02em; }
.ui__bar { height: 8px; border-radius: 8px; background: var(--tint); overflow: hidden; display: flex; margin-top: 12px; }
.ui__bar i { display: block; height: 100%; background: var(--palm); }
.ui__bar i + i { background: var(--sail); }
.ui__legend { display: flex; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.ui__legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--palm); margin-right: 6px; }
.ui__legend span + span::before { background: var(--sail); }
.ui--br { right: -28px; bottom: 36px; }
.ui--bl { left: -28px; bottom: 36px; }
.ui--tr { right: -28px; top: 36px; }
.ui--tl { left: -28px; top: 36px; }
.live { width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 3px rgba(31,157,85,.18); }
@media (max-width: 900px) { .ui--br, .ui--tr { right: 12px; } .ui--bl, .ui--tl { left: 12px; } .ui { min-width: 0; max-width: calc(100% - 24px); } }
@media (max-width: 520px) { .ui { font-size: 13px; padding: 12px 14px; } }

/* ---------- Cards (persona, tier, case) ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: transparent; }
.card__img { aspect-ratio: 16 / 9.5; overflow: hidden; background: var(--tint); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
a.card:hover .card__img img { transform: scale(1.04); }
.card__body { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; flex: 1; }
.card__body p { color: var(--ink-2); margin-top: 12px; }
.card .checks { margin: 24px 0 28px; }
.card__cta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--line); font-weight: 600; }
.card__cta .arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--tint); color: var(--palm); display: grid; place-items: center; transition: all .4s var(--ease); }
.card__cta .arrow svg { width: 18px; height: 18px; }
a.card:hover .card__cta .arrow { background: var(--palm); color: var(--serenade); transform: rotate(-45deg); }
.tag { display: inline-flex; align-self: flex-start; font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--palm); background: var(--tint); padding: 6px 12px; border-radius: var(--pill); margin-bottom: 18px; }

/* ---------- Spotlight (Palm Leaf band) ---------- */
.spot {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--palm); color: var(--on-palm);
}
.spot::before {
  content: ""; position: absolute; z-index: -1; inset: -20%;
  background:
    radial-gradient(40% 50% at 88% 12%, rgba(207, 224, 246, .28), transparent 70%),
    radial-gradient(30% 40% at 70% 95%, rgba(207, 224, 246, .10), transparent 70%),
    radial-gradient(45% 60% at 10% 100%, rgba(4, 20, 48, .9), transparent 70%);
}
.spot__grain { position: absolute; inset: 0; z-index: -1; opacity: .12; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.spot__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 7vw, 104px); align-items: center; }
.spot h2 { color: var(--serenade); }
.spot__grid--wide { grid-template-columns: .8fr 1.2fr; }
@media (max-width: 900px) { .spot__grid, .spot__grid--wide { grid-template-columns: 1fr; } }

/* Calculator (Wise-style converter) */
.calc {
  background: rgba(242, 247, 249, .06); border: 1px solid var(--line-palm);
  border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px);
  backdrop-filter: blur(6px);
  box-shadow: 0 40px 80px -40px rgba(2, 12, 30, .6);
}
.calc__basket { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line-palm); }
.calc__basket .k { font-size: 13.5px; color: var(--on-palm-2); }
.calc__basket .v { font-family: var(--f-display); font-size: 1.7rem; letter-spacing: -0.02em; }
.calc__item { display: flex; align-items: center; gap: 12px; }
.calc__item img { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; }
.calc__lbl { font-size: 13.5px; color: var(--on-palm-2); margin: 24px 0 12px; display: flex; justify-content: space-between; }
.stepper { display: flex; align-items: center; gap: 16px; }
.stepper button {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-palm); background: transparent; color: var(--serenade);
  display: grid; place-items: center; flex-shrink: 0; transition: background-color .2s, transform .2s;
}
.stepper button:hover { background: rgba(242, 247, 249, .1); }
.stepper button:active { transform: scale(.94); }
.stepper button.plus { background: var(--serenade); color: var(--palm); border-color: var(--serenade); }
.stepper button.plus:hover { background: var(--white); }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper button svg { width: 20px; height: 20px; }
.stepper__val { flex: 1; text-align: center; font-family: var(--f-display); font-size: clamp(2.4rem, 5vw, 3.4rem); letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.stepper__val small { font-size: .42em; letter-spacing: 0; margin-left: 6px; color: var(--on-palm-2); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; margin: 24px 0 6px; background: linear-gradient(90deg, var(--serenade) var(--p, 75%), rgba(242, 247, 249, .18) var(--p, 75%)); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--serenade); border: 5px solid var(--lime); cursor: grab; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--serenade); border: 5px solid var(--lime); cursor: grab; }
.range:focus-visible { outline: 3px solid var(--lime); outline-offset: 6px; }
.range__ends { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--on-palm-2); }
.split { margin-top: 24px; border-radius: var(--r-md); background: var(--serenade); color: var(--ink); padding: 20px; }
.split__bar { display: flex; height: 10px; border-radius: 10px; overflow: hidden; background: var(--tint); }
.split__bar i { display: block; background: var(--palm); }
.split__bar i + i { background: var(--sail); }
.split__rows { display: grid; gap: 10px; margin-top: 16px; }
.split__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; color: var(--ink-2); }
.split__row b { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.split__row .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--palm); }
.split__row .sw--r { background: var(--sail); }
.split__row--g { padding-top: 12px; border-top: 1px dashed var(--line-2); }
.split__row--g b { font-family: var(--f-body); font-size: 14px; font-weight: 650; color: var(--palm); letter-spacing: 0; display: inline-flex; align-items: center; gap: 6px; }
.calc .btn { width: 100%; margin-top: 16px; }

/* ---------- Safe at every step ---------- */
.safe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.safe__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); position: relative; }
.bg-sail .safe__item { border-color: transparent; }
.safe__num { font-family: var(--f-display); font-size: 15px; color: var(--ink-3); position: absolute; top: 28px; right: 30px; }
.safe__ic { width: 56px; height: 56px; border-radius: 18px; background: var(--palm); color: var(--serenade); display: grid; place-items: center; margin-bottom: 28px; }
.safe__ic svg { width: 26px; height: 26px; }
.safe__item h3 { font-size: 1.45rem; }
.safe__item p { margin-top: 12px; color: var(--ink-2); }
@media (max-width: 900px) { .safe { grid-template-columns: 1fr; } }

/* ---------- Testimonials ---------- */
.tst { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.tst__photo { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 4.6; position: relative; background: var(--tint-2); }
.tst__photo img { width: 100%; height: 100%; object-fit: cover; }
.ratings { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.rating { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--white); border-radius: var(--r-md); border: 1px solid var(--line); }
.rating__n { font-family: var(--f-display); font-size: 1.7rem; letter-spacing: -0.02em; line-height: 1; color: var(--palm); }
.rating__stars { display: flex; gap: 2px; color: var(--palm); }
.rating__stars svg { width: 14px; height: 14px; }
.rating__l { font-size: 13px; color: var(--ink-2); line-height: 1.2; }
.slides { position: relative; min-height: 290px; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s; }
.slide.is-on { opacity: 1; visibility: visible; transform: none; position: relative; }
blockquote { margin: 0; }
.quote { font-family: var(--f-display); font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.16; letter-spacing: -0.02em; text-wrap: pretty; }
.quote::before { content: "“"; display: block; font-size: 4.5rem; line-height: .6; color: var(--palm); margin-bottom: 12px; height: 34px; }
.who { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: 15px; }
.who__av { width: 48px; height: 48px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; font-family: var(--f-display); color: var(--palm); font-size: 18px; flex-shrink: 0; overflow: hidden; }
.who__av img { width: 100%; height: 100%; object-fit: cover; }
.who b { display: block; font-weight: 650; }
.who span { color: var(--ink-3); }
.ph-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); border: 1px dashed var(--line-2); padding: 4px 10px; border-radius: var(--pill); margin-left: 6px; }
.sl-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 36px; }
.sl-ctrl button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; display: grid; place-items: center; transition: all .25s; }
.sl-ctrl button:hover { background: var(--palm); color: var(--serenade); border-color: var(--palm); }
.sl-ctrl button svg { width: 18px; height: 18px; }
.sl-dots { display: flex; gap: 6px; margin-left: 8px; }
.sl-dots i { width: 22px; height: 3px; border-radius: 3px; background: var(--line-2); transition: all .3s; }
.sl-dots i.is-on { background: var(--palm); width: 36px; }
@media (max-width: 900px) { .tst { grid-template-columns: 1fr; } .tst__photo { aspect-ratio: 4 / 3; border-radius: var(--r-lg); } }

.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.qcard { background: var(--white); border-radius: var(--r-lg); padding: clamp(28px, 3.5vw, 44px); border: 1px solid var(--line); display: flex; flex-direction: column; }
.qcard .quote { font-size: clamp(1.35rem, 2vw, 1.7rem); flex: 1; }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }

/* ---------- Mission / final CTA ---------- */
.mission { text-align: center; }
.mission .display { font-size: clamp(2.6rem, 6.4vw, 5.8rem); max-width: 14ch; margin: 0 auto; }
.mission .lede { margin-left: auto; margin-right: auto; }
.mission .btn-row { justify-content: center; }
.mission__faces { display: flex; justify-content: center; margin-bottom: 36px; }
.mission__faces img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--serenade); margin-left: -14px; box-shadow: var(--shadow-1); }
.mission__faces img:first-child { margin-left: 0; }

.final {
  border-radius: var(--r-xl); overflow: hidden; background: var(--lime);
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: stretch;
}
.final__body { padding: clamp(36px, 6vw, 80px); display: flex; flex-direction: column; justify-content: center; }
.final__media { position: relative; min-height: 380px; }
.final__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.final .small { margin-top: 18px; }
@media (max-width: 900px) { .final { grid-template-columns: 1fr; border-radius: var(--r-lg); } .final__media { min-height: 280px; order: -1; } }

/* ---------- Footer ---------- */
.foot { background: var(--sail); padding: clamp(64px, 8vw, 104px) 0 36px; margin-top: 0; }
.foot__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding-bottom: 56px; border-bottom: 1px solid var(--line-2); }
.foot__brand p { color: var(--ink-2); margin-top: 18px; max-width: 22em; font-size: 15px; }
.social { display: flex; gap: 8px; margin-top: 24px; }
.social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--palm); background: rgba(242,247,249,.35); transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ease); }
.social a:hover { background: var(--palm); color: var(--lime); border-color: var(--palm); transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; }
.foot h4 { margin: 0 0 18px; font-size: 12.5px; letter-spacing: .02em; text-transform: uppercase; color: var(--palm); font-weight: 500; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.foot ul a { color: var(--ink-2); font-size: 15.5px; transition: color .2s; }
.foot ul a:hover { color: var(--ink); }
.foot__legal { padding-top: 28px; display: grid; grid-template-columns: 1fr auto; gap: 24px; font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.foot__legal .flag { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--palm); }
.foot__big { font-family: var(--f-display); font-size: clamp(4rem, 17vw, 15rem); letter-spacing: -0.05em; line-height: .8; color: rgba(1, 75, 170, .08); margin-top: 48px; white-space: nowrap; overflow: hidden; user-select: none; }
@media (max-width: 900px) { .foot__top { grid-template-columns: repeat(2, 1fr); } .foot__brand { grid-column: 1 / -1; } .foot__legal { grid-template-columns: 1fr; } }

/* ---------- Businesses: problem trio ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-2); }
.trio__i { padding: 36px 32px 8px 0; }
.trio__i + .trio__i { padding-left: 32px; border-left: 1px solid var(--line); }
.trio__k { font-family: var(--f-display); font-size: 15px; color: var(--palm); margin-bottom: 20px; display: block; }
.trio__i h3 { font-size: 1.7rem; }
.trio__i p { color: var(--ink-2); margin-top: 12px; }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } .trio__i, .trio__i + .trio__i { padding: 28px 0; border-left: 0; } .trio__i + .trio__i { border-top: 1px solid var(--line); } }

/* Live feed mock (catalogue) */
.feed { background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; }
.feed__hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); font-weight: 650; font-size: 15px; }
.feed__hd span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); font-weight: 500; }
.feed__list { list-style: none; margin: 0; padding: 0; }
.feed__list li { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 14.5px; animation: feedIn .6s var(--ease) both; }
.feed__list li:last-child { border-bottom: 0; }
.feed__list img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.feed__list b { display: block; font-weight: 600; }
.feed__list small { color: var(--ink-3); font-size: 13px; }
.feed__chg { font-size: 12.5px; font-weight: 500; padding: 5px 10px; border-radius: var(--pill); background: var(--tint); color: var(--palm); white-space: nowrap; }
@keyframes feedIn { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Ops console mock ---------- */
.console { min-width: 0;
  background: #fffdfb; color: var(--ink); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 50px 100px -40px rgba(2, 12, 30, .75); font-size: 14px;
}
.console__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--tint); border-bottom: 1px solid var(--line); }
.console__bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(1, 75, 170, .15); }
.console__bar span { margin-left: 12px; font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.console__in { display: grid; grid-template-columns: 150px 1fr; min-height: 380px; }
.console__side { border-right: 1px solid var(--line); padding: 16px 10px; display: grid; align-content: start; gap: 2px; font-size: 13.5px; }
.console__side a { padding: 9px 12px; border-radius: 10px; color: var(--ink-2); display: flex; justify-content: space-between; }
.console__side a.on { background: rgba(1, 75, 170, .07); color: var(--palm); font-weight: 650; }
.console__side a em { font-style: normal; font-size: 12px; background: var(--palm); color: var(--serenade); border-radius: var(--pill); padding: 0 7px; line-height: 20px; }
.console__main { padding: 20px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi { border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.kpi small { color: var(--ink-3); font-size: 12px; display: block; }
.kpi b { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; letter-spacing: -0.02em; display: block; margin-top: 6px; }
.kpi .ok { color: #1f7a45; font-size: 12px; font-weight: 650; }
.tbl { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.tbl th { text-align: left; font-weight: 600; color: var(--ink-3); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 8px; border-bottom: 1px solid var(--line); }
.tbl td:first-child, .tbl td:nth-child(3) { white-space: nowrap; }
.tbl td { padding: 11px 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.tbl tr:last-child td { border-bottom: 0; }
.st { font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: var(--pill); white-space: nowrap; }
.st--wait { background: var(--lime); color: var(--palm); }
.st--ok { background: rgba(31,157,85,.12); color: #1f6e40; }
.st--auto { background: var(--tint); color: var(--ink-2); }
.mini-btn { font-size: 12px; font-weight: 650; padding: 5px 10px; border-radius: 8px; background: var(--palm); color: var(--serenade); border: 0; }
@media (max-width: 640px) {
  .console__in { grid-template-columns: minmax(0, 1fr); }
  .console__main { padding: 16px; }
  .kpi b { font-size: 1.3rem; }
  .tbl td:last-child, .tbl th:last-child { display: none; }
  .console__side { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi:nth-child(3) { display: none; }
  .tbl .hide-s { display: none; }
}

/* ---------- Tiers ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tier { padding: clamp(28px, 3vw, 36px); }
.tier__name { font-size: 13px; letter-spacing: .02em; text-transform: uppercase; font-weight: 500; color: var(--ink-3); }
.tier h3 { margin-top: 14px; font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
.tier p { min-height: 4.7em; margin-top: 12px; }
.tier .checks { border-top: 1px solid var(--line); padding-top: 24px; }
.tier--pop { background: var(--palm); color: var(--serenade); border-color: var(--palm); transform: translateY(-12px); box-shadow: var(--shadow-2); }
a.tier--pop:hover { transform: translateY(-16px); }
.tier--pop .tier__name { color: var(--lime); }
.tier--pop p { color: var(--on-palm-2); }
.tier--pop .checks { border-color: var(--line-palm); }
.tier--pop .checks li { color: var(--serenade); }
.tier--pop .checks li::before { background-color: rgba(242, 247, 249, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfe0f6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 14L8.5 17.5L19 6.5'/%3E%3C/svg%3E"); }
.tier--pop .card__cta { border-color: var(--line-palm); }
.tier--pop .card__cta .arrow { background: var(--serenade); color: var(--palm); }
.tier__flag { position: absolute; top: 24px; right: 24px; font-size: 11.5px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; background: var(--lime); color: var(--palm); padding: 6px 12px; border-radius: var(--pill); }
@media (max-width: 980px) { .tiers { grid-template-columns: 1fr; } .tier--pop, a.tier--pop:hover { transform: none; } .tier p { min-height: 0; } }

/* ---------- Case studies ---------- */
.case .card__body { gap: 0; }
.case__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.case__logo { font-size: 12px; text-transform: uppercase; color: var(--palm); background: var(--tint); border: 0; border-radius: 10px; padding: 8px 12px; }
.case__seg { font-size: 13px; color: var(--ink-2); }
.case__nums { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.case__nums b { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 3.4vw, 3rem); letter-spacing: -0.035em; line-height: 1; color: var(--palm); display: block; }
.case__nums small { color: var(--ink-2); font-size: 14px; display: block; margin-top: 8px; }

/* ---------- Partners: settlement ---------- */
.modes { display: inline-flex; padding: 5px; border-radius: var(--pill); background: rgba(242, 247, 249, .08); border: 1px solid var(--line-palm); margin-bottom: 20px; flex-wrap: wrap; }
.modes button { border: 0; background: transparent; color: var(--on-palm-2); padding: 10px 18px; border-radius: var(--pill); font-weight: 600; font-size: 14.5px; transition: all .3s var(--ease); }
.modes button[aria-pressed="true"] { background: var(--serenade); color: var(--palm); }
.flow { display: grid; gap: 10px; }
.flow__step { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; background: rgba(242, 247, 249, .06); border: 1px solid var(--line-palm); border-radius: var(--r-md); padding: 18px 20px; }
.flow__step .n { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-palm); display: grid; place-items: center; font-family: var(--f-display); font-size: 17px; }
.flow__step .k { font-size: 13.5px; color: var(--on-palm-2); }
.flow__step .v { font-family: var(--f-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: opacity .3s; }
.flow__step--final { background: var(--serenade); color: var(--ink); border-color: var(--serenade); }
.flow__step--final .n { background: var(--palm); color: var(--serenade); border-color: var(--palm); }
.flow__step--final .k { color: var(--ink-2); }
.flow__step .gbadge { font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: var(--pill); background: var(--palm); color: var(--serenade); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.flow__join { height: 18px; width: 1px; margin-left: 42px; background: repeating-linear-gradient(var(--on-palm-2) 0 3px, transparent 3px 6px); opacity: .5; }
@media (max-width: 520px) { .flow__step { grid-template-columns: 36px 1fr; } .flow__step .n { width: 36px; height: 36px; } .flow__step .gbadge { grid-column: 2; justify-self: start; } .flow__join { margin-left: 38px; } }

/* Data boundary diagram */
.boundary { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: stretch; }
.bcol { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); }
.bcol--you { background: var(--palm); color: var(--serenade); border-color: var(--palm); }
.bcol h3 { font-size: 1.6rem; margin-bottom: 4px; }
.bcol .tag { margin-bottom: 20px; }
.bcol--you .tag { background: rgba(242, 247, 249, .12); color: var(--lime); }
.bcol ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.bcol li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--serenade); font-weight: 500; font-size: 15.5px; }
.bcol--you li { background: rgba(242, 247, 249, .08); }
.bcol li svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--palm); }
.bcol--you li svg { color: var(--lime); }
.bcol .note { margin-top: 20px; font-size: 14.5px; color: var(--ink-2); }
.bcol--you .note { color: var(--on-palm-2); }
.bridge { position: relative; display: flex; align-items: center; justify-content: center; }
.bridge svg { width: 100%; height: 100%; max-height: 340px; }
.bridge .lock { position: absolute; width: 58px; height: 58px; border-radius: 50%; background: var(--serenade); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--palm); box-shadow: var(--shadow-1); }
.bridge .lock svg { width: 24px; height: 24px; }
.dash-flow { stroke-dasharray: 5 7; animation: dash 1.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .dash-flow { animation: none; } }
@media (max-width: 860px) { .boundary { grid-template-columns: 1fr; } .bridge { height: 90px; } .bridge svg { transform: rotate(90deg); width: 90px; } }

/* Featured quote */
.fq { display: grid; grid-template-columns: 340px 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.fq__img { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; }
.fq__img img { width: 100%; height: 100%; object-fit: cover; }
.fq .quote { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
.fq__second { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line-2); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.fq__second p { font-family: var(--f-display); font-size: 1.35rem; line-height: 1.3; letter-spacing: -0.01em; }
@media (max-width: 860px) { .fq { grid-template-columns: 1fr; } .fq__img { aspect-ratio: 4 / 3; max-width: none; } .fq__second { grid-template-columns: 1fr; } }

/* QR */
.qr { display: flex; align-items: center; gap: 18px; margin-top: 32px; padding: 14px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line); max-width: 380px; }
.qr svg { width: 88px; height: 88px; flex-shrink: 0; }
.qr b { display: block; font-weight: 650; }
.qr span { font-size: 14px; color: var(--ink-2); }

/* Trust row */
.trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.trust-row > div { display: flex; gap: 16px; align-items: flex-start; padding: 28px 28px 28px 0; }
.trust-row > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.trust-row .ic { width: 44px; height: 44px; border-radius: 14px; background: var(--tint); color: var(--palm); display: grid; place-items: center; flex-shrink: 0; }
.trust-row .ic svg { width: 22px; height: 22px; }
.trust-row b { display: block; font-weight: 650; font-size: 16.5px; }
.trust-row span { color: var(--ink-2); font-size: 15px; }
@media (max-width: 860px) { .trust-row { grid-template-columns: 1fr; } .trust-row > div, .trust-row > div + div { padding: 22px 0; border-left: 0; } .trust-row > div + div { border-top: 1px solid var(--line); } }

/* ---------- Reveal on scroll ---------- */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.rv.is-in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Footer wordmark — continuous flow */
.foot__big { margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); color: rgba(1, 75, 170, .14); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.foot__track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.foot__track span { display: inline-flex; align-items: center; }
.foot__track span::after { content: ""; width: .16em; height: .16em; border-radius: 50%; background: var(--lime); margin: 0 .32em; }
.foot__big:hover .foot__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .foot__track { animation: none; } }

/* ---------- Header (Klarna-style, OpenRewards palette) ---------- */
.nav, .nav.is-scrolled { background: var(--white); padding: 0; box-shadow: none; border-bottom: 1px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav.is-scrolled { box-shadow: 0 6px 20px -16px rgba(4, 20, 48, .35); }
.nav__in { height: 76px; gap: 40px; }
.brand__mark { width: 30px; height: 30px; }
.brand__word { font-size: 27px; font-weight: 600; letter-spacing: -0.045em; }
.nav__links { gap: 6px; margin-left: 0; }
.nav__links a { color: var(--ink); font-weight: 500; font-size: 16.5px; padding: 10px 16px; letter-spacing: -0.01em; }
.nav__links a:hover { background: var(--serenade); }
.nav__links a[aria-current="page"]::after { left: 16px; right: 16px; bottom: 2px; }
.nav__right { gap: 10px; }
.lang {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 12px;
  border-radius: var(--pill); border: 1px solid var(--line-2); background: var(--white);
  font-family: var(--f-body); font-weight: 500; font-size: 16.5px; color: var(--ink);
  transition: border-color .2s, background-color .2s;
}
.lang:hover { border-color: var(--ink); }
.lang__flag { width: 22px; height: 22px; }
.nav__cta.btn { --h: 48px; padding: 0 24px 0 20px; gap: 10px; font-family: var(--f-body); text-transform: none; font-size: 16.5px; font-weight: 500; letter-spacing: -0.01em; box-shadow: none; }
.nav__cta.btn svg { width: 20px; height: 20px; }
.nav__cta.btn:hover svg { transform: none; }
@media (max-width: 1080px) {
  .nav__in { height: 64px; }
  .nav__right .lang { display: none; }
  .nav__sheet { top: 64px; }
}

@media (max-width: 760px) { .br-d { display: none; } }
@media (max-width: 1240px) { .nav__in { gap: 20px; } .nav__links { gap: 0; } .nav__links a { padding: 10px 12px; } .nav__links a[aria-current="page"]::after { left: 12px; right: 12px; } .lang { padding: 0 14px 0 10px; } }

/* ==========================================================================
   Home hero — live checkout visual
   ========================================================================== */
.ck { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 9px; }
.ck__top { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; margin-bottom: 2px; }
.ck__back { width: 30px; height: 30px; border-radius: 50%; background: var(--white); display: grid; place-items: center; }
.ck__back svg { width: 16px; height: 16px; }
.ck__title { font-weight: 600; font-size: 16px; letter-spacing: -0.02em; }
.ck__live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 9.5px; text-transform: uppercase; background: var(--white); padding: 4px 8px; border-radius: var(--pill); }
.ck__live i { width: 6px; height: 6px; border-radius: 50%; background: #1f9d55; animation: pulse 2s infinite; }
.ck__shop, .ck__pts, .ck__cash { background: var(--white); border-radius: 18px; box-shadow: 0 1px 2px rgba(4, 20, 48,.05); }
.ck__shop { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; }
.ck__thumbs { display: flex; }
.ck__thumbs img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--white); }
.ck__thumbs img + img { margin-left: -12px; }
.ck__shop-t b { display: block; font-weight: 600; font-size: 13px; }
.ck__shop-t small { display: block; font-size: 11px; color: var(--ink-3); }
.ck__total { font-weight: 600; font-size: 16px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ck__pts { padding: 12px; }
.ck__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ck__lbl { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; }
.ck__coin { width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: var(--palm); display: grid; place-items: center; font-family: var(--f-mono); font-size: 11px; font-weight: 600; }
.ck__toggle { position: relative; width: 38px; height: 22px; border-radius: 22px; background: var(--tint-2); transition: background-color .35s; }
.ck__toggle i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .35s var(--ease); }
.ck__toggle.is-on { background: var(--palm); }
.ck__toggle.is-on i { transform: translateX(16px); }
.ck__bal { font-size: 11.5px; color: var(--ink-3); margin: 6px 0 10px 30px; }
.ck__bal b { color: var(--ink); font-weight: 600; }
.ck__meter { height: 8px; border-radius: 8px; background: var(--tint); overflow: hidden; }
.ck__meter i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--palm), #3f7fd6); }
.ck__row--big { margin-top: 10px; align-items: baseline; }
.ck__row--big b[data-pts] { font-size: 24px; font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.ck__row--big > span:first-child { font-size: 13px; color: var(--ink-2); }
.ck__eq { font-size: 13px; color: var(--ink-3); }
.ck__eq b { color: var(--palm); font-weight: 600; font-variant-numeric: tabular-nums; }
.ck__cash { display: flex; align-items: center; justify-content: space-between; padding: 12px; }
.ck__cash b { font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ck__card { width: 22px; height: 15px; border-radius: 4px; background: linear-gradient(135deg, var(--sail), #5fa9a9); }
.ck__split { display: flex; height: 6px; border-radius: 6px; overflow: hidden; background: var(--tint); margin: 2px 2px 0; }
.ck__split i { display: block; height: 100%; background: var(--palm); }
.ck__split i + i { background: var(--sail); }
.ck__pay {
  height: 46px; border: 0; border-radius: var(--pill); background: var(--palm); color: var(--serenade);
  font-family: var(--f-body); font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; margin-top: 4px;
  transition: transform .18s ease, background-color .2s; cursor: default;
}
.ck__pay.is-press { transform: scale(.95); background: var(--palm-700); }
.ck__fine { text-align: center; font-size: 10.5px; color: var(--ink-3); }

/* Success */
.ok {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 24px; background: var(--palm); color: var(--serenade);
  clip-path: circle(0% at 50% 86%); transition: clip-path .7s cubic-bezier(.7,0,.2,1);
}
.is-ok .ok { clip-path: circle(150% at 50% 86%); }
.ok__ring svg { width: 84px; height: 84px; }
.ok__ring circle { stroke: rgba(207, 224, 246,.25); stroke-width: 3; }
.ok__ring path { stroke: var(--lime); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .5s ease .55s; }
.is-ok .ok__ring path { stroke-dashoffset: 0; }
.ok__ring { width: 84px; height: 84px; border-radius: 50%; background: rgba(207, 224, 246,.1); transform: scale(.6); opacity: 0; transition: transform .6s var(--ease) .35s, opacity .4s .35s; }
.is-ok .ok__ring { transform: none; opacity: 1; }
.ok__t, .ok__s, .ok__card { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease); }
.is-ok .ok__t { opacity: 1; transform: none; transition-delay: .7s; }
.is-ok .ok__s { opacity: 1; transform: none; transition-delay: .8s; }
.is-ok .ok__card { opacity: 1; transform: none; transition-delay: .95s; }
.ok__t { margin-top: 20px; font-size: 25px; font-weight: 500; letter-spacing: -0.03em; }
.ok__s { margin-top: 6px; font-family: var(--f-mono); font-size: 12px; color: var(--lime); text-transform: uppercase; }
.ok__card { margin-top: 24px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; border-radius: 18px; background: rgba(242,247,249,.08); text-align: left; }
.ok__card small { display: block; font-size: 11px; color: var(--on-palm-2); }
.ok__card b { display: block; font-size: 14px; font-weight: 600; margin-top: 2px; }

.ck__shop-t { min-width: 0; }
.ck__shop-t b, .ck__shop-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   Home hero — Klarna-style card with live checkout callout
   ========================================================================== */
.hero--k { padding: clamp(16px, 2.4vw, 28px) 0 0; }
.hk {
  --bg: var(--lime); /* matches the filtered studio backdrop, top to bottom */
  --px: 0px; --py: 0px;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(560px, calc(100vh - 190px), 680px);
  border-radius: var(--r-xl); background: var(--bg);
  display: flex; align-items: center;
}
.hk::after { /* brand glow behind the copy: Sail up top, Fringy Flower low */
  content: ""; position: absolute; z-index: -3; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 65% at 0% 0%, rgba(242,247,249,.35), transparent 70%),
    radial-gradient(45% 55% at 8% 100%, rgba(207, 224, 246,.28), transparent 70%);
}
.hk__media { position: absolute; z-index: -2; top: 0; right: 0; bottom: 0; width: 52%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
.hk__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 96% 22%;
  filter: saturate(.5) hue-rotate(-18deg) brightness(1.05);
  transform: translate(calc(var(--px) * -0.5), calc(var(--py) * -0.5)) scale(1.04);
  transition: transform .8s var(--ease);
  animation: hkZoom 24s ease-in-out infinite alternate;
}
@keyframes hkZoom { from { scale: 1; } to { scale: 1.06; } }

.hk__copy { position: relative; width: min(580px, 47%); padding: clamp(40px, 5vw, 72px) 16px clamp(40px, 5vw, 72px) clamp(28px, 5vw, 72px); }
.hk .display { font-size: clamp(2.6rem, 4.5vw, 4.5rem); line-height: 1.02; letter-spacing: -0.045em; font-weight: 600; }
.hk .lede { color: var(--ink); opacity: .82; max-width: 25em; }
.pill--glass { background: rgba(255,255,255,.75); border-color: rgba(1, 75, 170,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink); }
.pill--glass .dot { background: var(--palm); box-shadow: 0 0 0 4px rgba(1, 75, 170,.14); }
.btn--glass { background: rgba(255,255,255,.7); border-color: rgba(1, 75, 170,.18); color: var(--ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--glass:hover { background: rgba(242,247,249,.8); border-color: var(--ink); }

/* Steps: glass bar that tracks the demo */
.hk__steps {
  list-style: none; margin: 32px 0 0; padding: 5px; display: inline-flex; flex-wrap: nowrap; gap: 2px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(1, 75, 170,.08); border-radius: 18px;
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.hk__steps li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px 7px 7px; border-radius: 12px; font-size: 13px; font-weight: 500; color: var(--ink-2); transition: background-color .4s, color .4s; white-space: nowrap; }
.hk__steps .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-size: 11px; background: rgba(1, 75, 170,.08); color: var(--ink-2); transition: all .4s var(--ease); }
.hk__steps .n svg { width: 12px; height: 12px; }
.hk__steps li.is-done { color: var(--ink); }
.hk__steps li.is-done .n { background: var(--palm); color: var(--lime); }
.hk__steps li.is-on { background: var(--white); color: var(--ink); box-shadow: 0 6px 16px -10px rgba(4, 20, 48,.45); }
.hk__steps li.is-on .n { background: var(--lime); color: var(--palm); transform: scale(1.1); }

/* Callout (her screen, enlarged) */
.hk__demo { --s: 1; position: absolute; z-index: 2; right: clamp(20px, 4.5%, 64px); bottom: clamp(20px, 6%, 44px); width: 360px;
  transform-origin: 100% 100%; transform: translate(var(--px), var(--py)) scale(var(--s)); transition: transform .8s var(--ease); }
.co {
  position: relative; overflow: hidden; border-radius: 28px; background: var(--serenade);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 6px rgba(4, 20, 48,.08), 0 40px 70px -30px rgba(4, 20, 48,.55);
}
.co .ck { padding: 14px; gap: 8px; }
.co .ck__top { margin-bottom: 0; }
.co .ck__shop { padding: 8px 12px; }
.co .ck__pts { padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; }
.co .ck__pts > .ck__row:first-child { grid-column: 1 / -1; }
.co .ck__bal { grid-column: 1 / -1; margin: 2px 0 8px 30px; }
.co .ck__meter { grid-column: 1; }
.co .ck__row--big { grid-column: 2; margin-top: 0; gap: 8px; }
.co .ck__row--big b[data-pts] { font-size: 20px; }
.co .ck__cash { padding: 10px 12px; }
.co .ck__pay { height: 42px; margin-top: 2px; }
.co .ok { flex-direction: row; justify-content: flex-start; gap: 18px; padding: 22px 24px; text-align: left; flex-wrap: wrap; align-content: center; }
.co .ok__ring, .co .ok__ring svg { width: 64px; height: 64px; }
.co .ok__head { flex: 1; min-width: 0; }
.co .ok__t { margin-top: 0; font-size: 24px; }
.co .ok__card { margin-top: 18px; }
.co .ok { border-radius: inherit; }
.hk__toast {
  position: absolute; z-index: 3; right: -14px; top: -26px; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: 16px; border: 1px solid rgba(1, 75, 170,.06); background: var(--white); box-shadow: var(--shadow-2); white-space: nowrap;
  opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.is-ok .hk__toast { opacity: 1; transform: none; transition-delay: .6s; }
.hk__toast-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--lime); color: var(--palm); display: grid; place-items: center; flex-shrink: 0; }
.hk__toast-ic svg { width: 16px; height: 16px; }
.hk__toast b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.hk__toast small { display: block; font-size: 11.5px; color: var(--ink-3); }

/* Trust row (under the card) */
.trust { padding: clamp(40px, 5vw, 64px) 0 clamp(24px, 3vw, 40px); }
.trust__in { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.trust__head h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); font-weight: 600; letter-spacing: -0.035em; }
.trust__head .markets { margin-top: 20px; }
.trust__stats { display: grid; grid-template-columns: repeat(4, auto); gap: clamp(20px, 3.4vw, 56px); margin: 0; text-align: center; }
.trust__stats dt { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.trust__stats dd { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-2); max-width: 15em; }
.trust__stats .star { color: #1f9d55; }

@media (prefers-reduced-motion: reduce) { .hk__media img { animation: none; } }
@media (max-width: 1180px) {
  .hk__copy { width: min(540px, 48%); }
  .hk__demo { --s: .9; }
  .trust__in { flex-direction: column; align-items: flex-start; }
  .trust__stats { width: 100%; grid-template-columns: repeat(4, 1fr); text-align: left; }
}
@media (max-width: 1100px) {
  .hk { flex-direction: column; align-items: stretch; min-height: 0; border-radius: var(--r-lg); }
  .hk::after { inset: -10% -20% 40% -20%; }
  .hk__copy { order: -1; width: 100%; padding: 32px 24px 8px; }
  .hk__media { position: relative; z-index: -2; width: 100%; height: 480px; margin-top: -40px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
  .hk__media img { object-position: 52% 18%; }
  .hk__demo { --s: .84; right: 16px; bottom: 18px; }
  .hk__toast { right: -8px; top: -24px; }
}
@media (max-width: 560px) {
  .hk__media { height: 500px; }
  .hk__demo { --s: .68; right: 12px; bottom: 14px; }
  .hk__steps { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .hk__toast small { display: none; }
  .trust__stats { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
}
.trust__head h2 .accent { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1300px) { .hk .lede { max-width: 21em; } .hk .display { font-size: clamp(2.6rem, 4.2vw, 4rem); } }

/* ==========================================================================
   Catalogue — brand wall (real app icons, three marquee rows)
   ========================================================================== */
.bw { position: relative; overflow: hidden; isolation: isolate; background: var(--palm); color: var(--on-palm); }
.bw::before { content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(45% 60% at 85% 0%, rgba(207, 224, 246,.22), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(207, 224, 246,.08), transparent 70%); }
.bw h2 { color: var(--serenade); }
.bw .link { color: var(--serenade); }

.bw__stats { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 14px; margin-bottom: clamp(40px, 5vw, 64px); }
.bw__stat { background: rgba(242,247,249,.06); border: 1px solid var(--line-palm); border-radius: var(--r-lg); padding: 22px 24px 26px; }
.bw__k { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--on-palm-2); }
.bw__k svg { width: 20px; height: 20px; color: var(--lime); }
.bw__stat b { display: block; margin-top: 18px; font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--serenade); font-variant-numeric: tabular-nums; }
.bw__stat small { display: block; margin-top: 10px; font-size: 14px; color: var(--on-palm-2); }
.bw__stat--wide b { color: var(--lime); }

.bw__wall { display: grid; gap: 16px; }
.bw__row { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.bw__row .marquee__track { list-style: none; margin: 0; padding: 6px 0; gap: 16px; animation-duration: 55s; }
.bw__row.marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 62s; }
.bw__row.marquee--slow .marquee__track { animation-duration: 70s; }
.bw__wall:hover .marquee__track { animation-play-state: paused; }

.bi {
  position: relative; flex-shrink: 0; width: 104px; height: 104px; border-radius: 28px; background: var(--c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -8px 16px rgba(0,0,0,.12), 0 14px 28px -16px rgba(0,0,0,.6);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.bi::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255,255,255,.22), transparent 45%); pointer-events: none; }
.bi__logo { position: absolute; inset: 26%; width: 48%; height: 48%; object-fit: contain; filter: invert(1); }
.bi--dk .bi__logo { filter: none; opacity: .88; }
.bi:hover { transform: translateY(-6px) scale(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 24px 40px -18px rgba(0,0,0,.7); }
.bw__cap { margin-top: clamp(36px, 4vw, 52px); text-align: center; color: var(--on-palm-2); font-size: clamp(1rem, 1.4vw, 1.15rem); }
.bw__cap b { color: var(--serenade); font-weight: 500; }

@media (max-width: 900px) {
  .bw__stats { grid-template-columns: 1fr 1fr; }
  .bw__stat--wide { grid-column: 1 / -1; }
  .bi { width: 84px; height: 84px; border-radius: 22px; }
  .bw__row .marquee__track { gap: 12px; }
  .bw__wall { gap: 12px; }
}
@media (max-width: 480px) { .bi { width: 72px; height: 72px; border-radius: 19px; } }
.pill--mk { gap: 10px; }
.flags { display: inline-flex; }
.flags svg { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(4, 20, 48,.25); }
.flags svg + svg { margin-left: -5px; }
.bw .head .link { white-space: nowrap; }
.tst__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
.tst__photo img.is-on { opacity: 1; transform: none; }

/* Inner-page heroes (Businesses, Partners): calmer headline scale */
.hero:not(.hero--k) .display { font-size: clamp(2.5rem, 4.6vw, 4.4rem); line-height: 1.04; letter-spacing: -0.04em; }
.hero:not(.hero--k) .lede { max-width: 32em; }
.qr__code { display: block; width: 96px; height: 96px; flex-shrink: 0; border-radius: 10px; overflow: hidden; }
.qr__code svg { width: 100%; height: 100%; display: block; }
a.qr { transition: border-color .2s, box-shadow .3s var(--ease); }
a.qr:hover { border-color: var(--palm); box-shadow: var(--shadow-1); }

/* Spacing rhythm */
.hero:not(.hero--k) { padding-bottom: clamp(40px, 5vw, 72px); }
.sec--tight + .sec:not(.bg-sail):not(.bg-white):not(.spot):not(.bw) { padding-top: calc(var(--sec) * .6); }

/* Hero demo — step cues: item lands in the cart, then cash lights up */
.hk .ck__shop { opacity: 0; transform: translateY(-10px) scale(.96); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.hk.is-added .ck__shop { opacity: 1; transform: none; animation: ckAdd 1.8s var(--ease); }
@keyframes ckAdd { 0%, 20% { box-shadow: 0 0 0 0 rgba(207, 224, 246,0); } 35% { box-shadow: 0 0 0 3px var(--lime); } 100% { box-shadow: 0 0 0 0 rgba(207, 224, 246,0), 0 1px 2px rgba(4, 20, 48,.05); } }
.hk .ck__cash { transition: box-shadow .5s var(--ease), background-color .5s; }
.hk.is-cash:not(.is-ok) .ck__cash { box-shadow: 0 0 0 2px var(--lime); background: #f4f8fd; }
@media (prefers-reduced-motion: reduce) { .hk .ck__shop { opacity: 1; transform: none; } .hk.is-added .ck__shop { animation: none; } }
.trust__head .lede { max-width: 30em; }
.qr { max-width: min(380px, 100%); }
.qr > span:last-child { min-width: 0; }
.qr > span:last-child > span { overflow-wrap: anywhere; }
@media (max-width: 420px) { .qr__code { width: 76px; height: 76px; } .qr { gap: 12px; } }
@media (max-width: 700px) { .hk__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .hk__steps li { white-space: normal; line-height: 1.25; } }

/* ==========================================================================
   Hero demo v3 — one checkout card, four steps, plain words
   Only transform/opacity animate; every row has a fixed slot (no layout shift)
   ========================================================================== */
.dm {
  --e: cubic-bezier(.22, 1, .36, 1);
  position: relative; overflow: hidden; isolation: isolate;
  padding: 16px; border-radius: 28px; background: var(--serenade);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 2px 6px rgba(4, 20, 48,.08), 0 40px 70px -30px rgba(4, 20, 48,.55);
  font-size: 13px; line-height: 1.3;
}
.dm__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dm__steps li { display: grid; gap: 7px; }
.dm__steps i { display: block; height: 4px; border-radius: 4px; background: rgba(1, 75, 170,.1); overflow: hidden; }
.dm__steps b { display: block; height: 100%; border-radius: inherit; background: var(--palm); transform: scaleX(0); transform-origin: 0 50%; }
.dm__steps li.is-done b { transform: scaleX(1); }
.dm__steps li.is-on b { transform: scaleX(1); transition: transform var(--dur, 2.5s) linear; }
.dm__steps span { font-size: 11px; font-weight: 500; color: var(--ink-3); white-space: nowrap; transition: color .4s; }
.dm__steps li.is-on span, .dm__steps li.is-done span { color: var(--ink); }
.dm__steps li.is-on span { font-weight: 600; }

.dm__cap { position: relative; height: 28px; margin: 14px 0 10px; }
.dm__cap-t { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
  opacity: 0; transform: translateY(10px); transition: opacity .45s var(--e), transform .6s var(--e); }
.dm__cap-t.is-on { opacity: 1; transform: none; transition-delay: .12s; }
.dm__cap-t em { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--palm); font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; flex-shrink: 0; }

.dm__cart { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dm__cart li {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; height: 50px; padding: 0 12px 0 7px;
  background: var(--white); border-radius: 14px; box-shadow: 0 1px 2px rgba(4, 20, 48,.05);
  opacity: 0; transform: translateX(18px) scale(.98); transition: opacity .5s var(--e), transform .7s var(--e);
}
.dm__cart li.is-in { opacity: 1; transform: none; }
.dm__cart img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.dm__cart b { display: block; font-size: 13.5px; font-weight: 600; }
.dm__cart small { display: block; font-size: 11.5px; color: var(--ink-3); }
.dm__cart em { font-style: normal; font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }

.dm__row {
  display: grid; grid-template-columns: 32px auto 1fr auto; align-items: center; gap: 10px; height: 56px; margin-top: 8px; padding: 0 12px 0 10px;
  background: var(--white); border-radius: 16px; box-shadow: 0 0 0 0 rgba(207, 224, 246,0), 0 1px 2px rgba(4, 20, 48,.05);
  opacity: .4; transition: opacity .5s var(--e), box-shadow .5s var(--e);
}
.dm__row--cash { grid-template-columns: 32px 1fr auto; }
.dm__row.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--lime), 0 10px 24px -14px rgba(4, 20, 48,.35); }
.dm__row.is-done { opacity: 1; }
.dm__ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; font-weight: 600; }
.dm__ic--pts { background: var(--lime); color: var(--palm); }
.dm__ic--cash { background: var(--tint); color: var(--palm); }
.dm__ic svg { width: 17px; height: 17px; }
.dm__lbl b { display: block; font-size: 13.5px; font-weight: 600; }
.dm__lbl small { display: block; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm__meter { display: block; height: 6px; border-radius: 6px; background: var(--tint); overflow: hidden; min-width: 40px; }
.dm__meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--palm), #3f7fd6); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.dm__amt { font-style: normal; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
.dm__row--pts .dm__amt { color: #1f7a45; }

.dm__pay {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; height: 62px; margin-top: 10px; padding: 0 12px 0 18px;
  background: var(--palm); color: var(--serenade); border-radius: 18px; transition: transform .18s ease, background-color .2s;
}
.dm__pay.is-press { transform: scale(.97); background: var(--palm-700); }
.dm__pay-k { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; color: var(--on-palm-2); }
.dm__pay-v { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dm__pay-v b { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.dm__pay-v small { display: inline-block; margin-left: 6px; font-size: 12.5px; color: var(--lime); opacity: 0; transform: translateX(-6px); transition: opacity .4s var(--e), transform .5s var(--e); }
.dm__pay-v small.is-on { opacity: 1; transform: none; }
.dm__pay-go { width: 38px; height: 38px; border-radius: 50%; background: var(--lime); color: var(--palm); display: grid; place-items: center; }
.dm__pay-go svg { width: 18px; height: 18px; }

/* Success */
.dm__ok {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px;
  padding: 28px; background: var(--palm); color: var(--serenade);
  clip-path: circle(0% at 50% 92%); transition: clip-path .75s cubic-bezier(.7, 0, .2, 1);
}
.is-ok .dm__ok { clip-path: circle(150% at 50% 92%); }
.dm__ok-ring { width: 76px; height: 76px; border-radius: 50%; background: rgba(207, 224, 246,.1); transform: scale(.6); opacity: 0; transition: transform .6s var(--e) .35s, opacity .4s .35s; }
.dm__ok-ring svg { width: 100%; height: 100%; }
.dm__ok-ring circle { stroke: rgba(207, 224, 246,.28); stroke-width: 3; }
.dm__ok-ring path { stroke: var(--lime); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .55s ease .6s; }
.dm__ok-t { margin-top: 10px; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.dm__ok-s { font-family: var(--f-mono); font-size: 11.5px; text-transform: uppercase; color: var(--lime); }
.dm__ok-split { display: flex; gap: 4px; width: 100%; margin-top: 18px; }
.dm__ok-split i { display: block; height: 34px; border-radius: 10px; background: var(--lime); color: var(--palm); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 600; transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--e) 1s; }
.dm__ok-split i + i { background: var(--sail); transition-delay: 1.15s; }
.dm__ok-split span { white-space: nowrap; }
.is-ok .dm__ok-ring { transform: none; opacity: 1; }
.is-ok .dm__ok-ring path { stroke-dashoffset: 0; }
.is-ok .dm__ok-split i { transform: none; }
.dm__ok-t, .dm__ok-s { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--e); }
.is-ok .dm__ok-t { opacity: 1; transform: none; transition-delay: .75s; }
.is-ok .dm__ok-s { opacity: 1; transform: none; transition-delay: .85s; }

/* Loop reset: fade the card's content rather than snapping */
.dm > *:not(.dm__ok) { transition: opacity .4s; }
.dm.is-fading > * { opacity: 0 !important; }
.dm.is-fading .dm__ok { transition: opacity .4s; }

.hk__demo { width: 368px; }
@media (prefers-reduced-motion: reduce) { .dm *, .dm { transition: none !important; } }
.dm__ok-split i { min-width: 96px; padding: 0 10px; }
/* Stacked layouts: card sits under the photo, overlapping it slightly — her face stays clear */
@media (max-width: 1100px) {
  .hk__media { height: 440px; }
  .hk__demo { position: relative; right: auto; bottom: auto; width: min(380px, calc(100% - 32px)); margin: -120px auto 24px; transform: none; }
  .hk__toast { right: -6px; top: -22px; }
}
@media (max-width: 560px) { .hk__media { height: 380px; } .hk__demo { margin-top: -90px; } }

/* ==========================================================================
   Calm hero — one receipt chip beside her phone
   ========================================================================== */
.hk__chip {
  position: absolute; z-index: 2; right: clamp(24px, 7%, 96px); bottom: clamp(28px, 12%, 88px); width: 244px;
  padding: 16px 18px 14px; border-radius: 22px;
  background: rgba(255,255,255,.86); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 2px 6px rgba(4, 20, 48,.06), 0 30px 60px -28px rgba(4, 20, 48,.45);
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
}
.hk__chip.is-in { opacity: 1; transform: none; animation: chipFloat 7s ease-in-out 1.2s infinite; }
@keyframes chipFloat { 50% { transform: translateY(-6px); } }
.hk__chip-top { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-2); }
.hk__chip-ic { width: 20px; height: 20px; border-radius: 50%; background: var(--lime); color: var(--palm); display: grid; place-items: center; }
.hk__chip-ic svg { width: 12px; height: 12px; }
.hk__chip-v { display: block; margin-top: 12px; font-size: 34px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.hk__chip-v small { font-size: 15px; font-weight: 500; letter-spacing: 0; margin-left: 6px; color: var(--ink-2); }
.hk__chip-plus { display: block; margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--ink); }
.hk__chip-foot { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 1100px) { .hk__chip { right: 16px; bottom: 16px; width: 220px; } .hk__chip-v { font-size: 30px; } }
@media (max-width: 420px) { .hk__chip { width: 196px; padding: 14px 14px 12px; } .hk__chip-v { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .hk__chip { opacity: 1; transform: none; transition: none; } .hk__chip.is-in { animation: none; } }

/* ==========================================================================
   How it works — steps on the left, live checkout on the right
   ========================================================================== */
.hw__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.hw__list { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 4px; }
.hw__list li {
  position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; padding: 16px 18px; border-radius: 20px;
  transition: background-color .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1);
}
.hw__list .n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-size: 13px; background: var(--tint); color: var(--ink-2); transition: background-color .5s, color .5s, transform .5s cubic-bezier(.22,1,.36,1); }
.hw__list .n svg { width: 16px; height: 16px; }
.hw__list b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-2); transition: color .5s; }
.hw__list small { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--ink-3); }
.hw__list li.is-done .n { background: var(--palm); color: var(--lime); }
.hw__list li.is-done b { color: var(--ink); }
.hw__list li.is-on { background: var(--white); box-shadow: 0 1px 2px rgba(4, 20, 48,.05), 0 18px 36px -24px rgba(4, 20, 48,.35); }
.hw__list li.is-on .n { background: var(--lime); color: var(--palm); transform: scale(1.06); }
.hw__list li.is-on b { color: var(--ink); }

.hw__stage {
  position: relative; display: grid; place-items: center; min-height: 600px; padding: 56px 24px; border-radius: var(--r-xl); overflow: hidden;
  background: radial-gradient(70% 60% at 70% 20%, rgba(207, 224, 246,.45), transparent 70%), linear-gradient(160deg, #f3ece7, #d9e5f5);
}
.hw__demo { position: relative; width: min(380px, 100%); }
@media (max-width: 900px) {
  .hw__grid { grid-template-columns: 1fr; }
  .hw__stage { min-height: 0; padding: 44px 16px; border-radius: var(--r-lg); }
  .hw__list li { padding: 14px; }
}

/* Highlights sit *behind* the heading's text, so a strip on one line can never
   paint over descenders (y, p, g) from the line above. */
h1, h2, .display { isolation: isolate; }
em.accent, .accent { position: relative; z-index: -1; }
.hk .display { line-height: 1.08; }

/* Trust row — aligned, single-line stats */
.trust__in { align-items: center; }
.trust__stats { grid-template-columns: repeat(4, minmax(110px, auto)); column-gap: clamp(24px, 3.4vw, 56px); text-align: center; }
.trust__stats dt { white-space: nowrap; }
.trust__stats dd { max-width: none; white-space: nowrap; }
.markets { align-items: center; }
.markets__k { font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-3); margin-right: 4px; }
@media (max-width: 1180px) { .trust__stats { grid-template-columns: repeat(4, 1fr); text-align: left; } }
@media (max-width: 560px) { .trust__stats { grid-template-columns: repeat(2, 1fr); } .markets__k { width: 100%; } }

/* ==========================================================================
   Pay-with pattern (Klarna-style) — shared bits
   ========================================================================== */
.or-mark { width: 14px; height: 14px; flex-shrink: 0; }

/* Hero: compact "Pay with" card beside her phone */
.hk__pay {
  --e: cubic-bezier(.22,1,.36,1);
  position: absolute; z-index: 2; right: clamp(24px, 6%, 88px); bottom: clamp(28px, 10%, 80px); width: 290px; padding: 14px;
  border-radius: 24px; background: rgba(255,255,255,.9); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.95); box-shadow: 0 2px 6px rgba(4, 20, 48,.06), 0 30px 60px -28px rgba(4, 20, 48,.45);
  opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .8s var(--e), transform 1s var(--e);
}
.hk__pay.is-in { opacity: 1; transform: none; }
.hp__top { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 12px; font-size: 13px; color: var(--ink-2); }
.hp__top b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hp__opt { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; height: 52px; padding: 0 12px; border-radius: 14px; background: var(--serenade); transition: background-color .5s var(--e), box-shadow .5s var(--e); }
.hp__opt + .hp__opt { margin-top: 6px; }
.hp__opt.is-on { background: var(--white); box-shadow: 0 0 0 1.5px var(--palm); }
.hp__chk { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; transition: background-color .35s, border-color .35s, color .35s; }
.hp__chk svg { width: 13px; height: 13px; transform: scale(.5); transition: transform .45s var(--e); }
.hp__opt.is-on .hp__chk { background: var(--palm); border-color: var(--palm); color: var(--lime); }
.hp__opt.is-on .hp__chk svg { transform: none; }
.hp__badge { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 9px 4px 7px; border-radius: 8px; background: var(--palm); color: var(--lime); font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; }
.hp__badge--lime { background: var(--lime); color: var(--palm); }
.hp__name { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; }
.hp__name svg { width: 18px; height: 18px; color: var(--ink-2); }
.hp__v { text-align: right; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hp__v b { display: block; font-size: 14px; font-weight: 600; }
.hp__v small { display: block; font-size: 11.5px; color: #1f7a45; }
.hp__btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; margin-top: 10px; border-radius: var(--pill); background: var(--palm); color: var(--serenade); font-size: 14px; font-weight: 500; }
@media (max-width: 1100px) { .hk__pay { right: 16px; bottom: 16px; width: 272px; } }
@media (max-width: 420px) { .hk__pay { width: 244px; padding: 12px; } .hp__opt { height: 48px; } }

/* How it works: dark phone checkout */
.kp {
  --e: cubic-bezier(.22,1,.36,1);
  position: relative; overflow: hidden; width: 340px; padding: 14px 18px 20px; border-radius: 44px;
  background: #0c1f3d; color: var(--serenade);
  box-shadow: 0 0 0 8px #0b0f0e, 0 0 0 9px rgba(255,255,255,.08), 0 50px 90px -30px rgba(4, 20, 48,.7);
}
.kp__status { display: flex; justify-content: space-between; align-items: center; height: 18px; margin: 2px 4px 0; }
.kp__status i { width: 38px; height: 10px; border-radius: 6px; background: rgba(242,247,249,.22); }
.kp__status span { display: flex; gap: 4px; }
.kp__status b { width: 12px; height: 10px; border-radius: 3px; background: rgba(242,247,249,.22); }
.kp__title { margin-top: 18px; text-align: center; font-size: 16px; font-weight: 600; }
.kp__total { margin: 18px 0 20px; text-align: center; }
.kp__total b { display: block; font-size: 44px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.kp__total small { display: block; margin-top: 8px; font-size: 13px; color: var(--on-palm-2); min-height: 17px; }
.kp__lbl { font-size: 14px; font-weight: 600; margin: 0 2px 10px; }
.kp__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kp__items li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--e), transform .7s var(--e); }
.kp__items li.is-in { opacity: 1; transform: none; }
.kp__items img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.kp__sk { display: grid; gap: 6px; }
.kp__sk i { display: block; height: 8px; border-radius: 6px; background: rgba(242,247,249,.18); }
.kp__sk i:first-child { width: 78%; } .kp__sk i:last-child { width: 46%; }
.kp__items em { font-style: normal; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.kp__pay { margin-top: 18px; border-radius: 20px; background: rgba(242,247,249,.07); padding: 4px 14px; }
.kp__opt { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; height: 60px; border-radius: 14px; transition: background-color .5s var(--e), box-shadow .5s var(--e); }
.kp__opt.is-hl { box-shadow: 0 0 0 1.5px var(--lime); background: rgba(207, 224, 246,.06); margin: 0 -8px; padding: 0 8px; }
.kp__sep { height: 1px; background: rgba(242,247,249,.1); }
.kp__chk { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(242,247,249,.45); display: grid; place-items: center; color: transparent; transition: background-color .35s, border-color .35s, color .35s; }
.kp__chk svg { width: 13px; height: 13px; transform: scale(.4); transition: transform .45s var(--e); }
.kp__opt.is-on .kp__chk { background: var(--serenade); border-color: var(--serenade); color: #0c1f3d; }
.kp__opt.is-on .kp__chk svg { transform: none; }
.kp__badge { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 10px 5px 8px; border-radius: 9px; background: var(--lime); color: var(--palm); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; transition: box-shadow .5s var(--e); }
.kp__opt.is-on .kp__badge { box-shadow: 0 0 0 4px rgba(207, 224, 246,.18); }
.kp__badge--dk { background: var(--palm); color: var(--lime); }
.kp__name { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--on-palm-2); }
.kp__name svg { width: 20px; height: 20px; }
.kp__meta { text-align: right; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kp__meta b { display: block; font-size: 15px; font-weight: 600; }
.kp__meta small { display: block; font-size: 11.5px; color: var(--on-palm-2); }
.kp__btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; margin-top: 18px; border-radius: var(--pill); background: var(--serenade); color: var(--palm); font-size: 15px; font-weight: 500; transition: transform .18s ease, background-color .2s; }
.kp__btn.is-press { transform: scale(.97); background: #efe7e1; }
.kp__ok { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 30px;
  background: var(--palm); clip-path: circle(0% at 50% 90%); transition: clip-path .75s cubic-bezier(.7,0,.2,1); }
.kp.is-ok .kp__ok { clip-path: circle(150% at 50% 90%); }
.kp__ring { width: 84px; height: 84px; border-radius: 50%; background: rgba(207, 224, 246,.1); transform: scale(.6); opacity: 0; transition: transform .6s var(--e) .35s, opacity .4s .35s; }
.kp__ring svg { width: 100%; height: 100%; }
.kp__ring circle { stroke: rgba(207, 224, 246,.28); stroke-width: 3; }
.kp__ring path { stroke: var(--lime); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .55s ease .6s; }
.kp__ok b { margin-top: 8px; font-size: 26px; font-weight: 600; letter-spacing: -0.03em; opacity: 0; transform: translateY(8px); transition: opacity .5s .75s, transform .6s var(--e) .75s; }
.kp__ok span { font-family: var(--f-mono); font-size: 11.5px; text-transform: uppercase; color: var(--lime); opacity: 0; transition: opacity .5s .9s; }
.kp.is-ok .kp__ring { transform: none; opacity: 1; }
.kp.is-ok .kp__ring path { stroke-dashoffset: 0; }
.kp.is-ok .kp__ok b { opacity: 1; transform: none; }
.kp.is-ok .kp__ok span { opacity: 1; }
.kp.is-fading > * { opacity: 0 !important; transition: opacity .4s !important; }
.hw__stage { padding: 64px 24px; }
@media (max-width: 420px) { .kp { width: 100%; padding: 12px 14px 16px; border-radius: 36px; } .kp__total b { font-size: 38px; } }
@media (prefers-reduced-motion: reduce) { .kp *, .kp, .hk__pay, .hk__pay * { transition: none !important; } }
.hp__v b, .hp__v small { white-space: nowrap; }
.hp__opt { grid-template-columns: 22px auto 1fr; }
.hp__v { justify-self: end; }
@media (max-width: 560px) { .hk__media { height: 460px; } .hk__pay { width: 236px; } .hp__badge { font-size: 12px; } }
.kp__meta b, .kp__meta small { white-space: nowrap; }
.spot__grid > * { min-width: 0; }
@media (min-width: 901px) and (max-width: 1180px) { .spot__grid--wide { grid-template-columns: .9fr 1.1fr; gap: 40px; } .console__in { grid-template-columns: 124px minmax(0, 1fr); } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi:nth-child(3) { display: none; } .tbl .hide-s { display: none; } }
@media (min-width: 901px) and (max-width: 1180px) { .tbl { font-size: 12.5px; } .tbl th, .tbl td { padding-left: 5px; padding-right: 5px; } .console__main { padding: 16px; } }
@media (min-width: 901px) and (max-width: 1000px) { .tbl td:last-child, .tbl th:last-child { display: none; } }

/* ==========================================================================
   Overlay cards live *inside* the photo frame (Klarna / Wise pattern):
   anchored at a fixed inset from the corner, no bobbing, grounded shadow.
   ========================================================================== */
.hero__media, .feature__media { --inset: 24px; }
.receipt, .ui { max-width: calc(100% - var(--inset, 24px) * 2); animation: none; }
.receipt--dark  { left: var(--inset); bottom: var(--inset); right: auto; top: auto; }
.receipt--light { right: var(--inset); top: var(--inset); left: auto; bottom: auto; }
.ui--bl { left: var(--inset); bottom: var(--inset); right: auto; top: auto; }
.ui--br { right: var(--inset); bottom: var(--inset); left: auto; top: auto; }
.ui--tr { right: var(--inset); top: var(--inset); left: auto; bottom: auto; }
.ui--tl { left: var(--inset); top: var(--inset); right: auto; bottom: auto; }
.receipt, .ui {
  box-shadow: 0 1px 2px rgba(4, 20, 48,.08), 0 12px 28px -14px rgba(4, 20, 48,.35);
  border: 1px solid rgba(255,255,255,.6);
}
.receipt--dark { border-color: rgba(242,247,249,.08); }
.receipt--light, .ui { background: rgba(255,255,255,.92); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); }
@media (max-width: 900px) { .hero__media, .feature__media { --inset: 16px; } }
@media (max-width: 520px) { .hero__media, .feature__media { --inset: 12px; } }
.hk__pay { right: 32px; bottom: 32px; box-shadow: 0 1px 2px rgba(4, 20, 48,.08), 0 16px 32px -16px rgba(4, 20, 48,.35); }
@media (max-width: 1100px) { .hk__pay { right: 16px; bottom: 16px; } }
@media (max-width: 520px) { .hk__pay { right: 12px; bottom: 12px; } }

/* Hero card v2 — Points + UPI, plain "Pay", 1 pt = ₹1 */
.pt-coin { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--lime); color: var(--palm); font-family: var(--f-mono); font-size: 11px; font-weight: 600; flex-shrink: 0; }
.hp__name { gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink); }
.hp__name--muted { font-weight: 500; }
.hp__opt { grid-template-columns: 22px 1fr auto; box-shadow: 0 0 0 1px transparent; transition: background-color .6s cubic-bezier(.22,1,.36,1), box-shadow .6s cubic-bezier(.22,1,.36,1); }
.hp__opt.is-on { background: var(--white); box-shadow: 0 0 0 1px var(--line-2), 0 6px 16px -12px rgba(4, 20, 48,.35); }
.hp__v b { display: inline-block; min-width: 6.2ch; text-align: right; font-variant-numeric: tabular-nums; }
.hp__v small { opacity: 0; transform: translateY(-3px); transition: opacity .5s ease .25s, transform .6s cubic-bezier(.22,1,.36,1) .25s; }
.hp__opt.is-on .hp__v small { opacity: 1; transform: none; }
.hp__opt[data-hp-pts]:not(.is-on) .hp__v b { color: var(--ink-3); }
.hp__chk { transition: background-color .45s ease, border-color .45s ease, color .45s ease; }
.hp__btn { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }

/* Phone: Points row without a logo */
.kp__name--pts { gap: 10px; color: var(--serenade); font-weight: 600; }
.kp__meta b { min-width: 6.2ch; display: inline-block; text-align: right; }
.kp__btn { font-size: 16px; font-weight: 600; }
.pill--mk { white-space: nowrap; }
@media (max-width: 380px) { .pill--mk { font-size: 12.5px; gap: 8px; } .pill--mk .flags svg { width: 18px; height: 18px; } }

/* ==========================================================================
   OpenRewards mark — iridescent ring (from the brand motion study)
   ========================================================================== */
.or-ring { --ring: 5px; position: relative; display: inline-block; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; isolation: isolate; }
.or-ring::before, .or-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 210deg, #3d2bff, #1fb8ff, #19e3b1, #f6f24a, #ff8a1f, #ff2d55, #7b2bff, #3d2bff);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring) - .5px), #000 calc(100% - var(--ring)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring) - .5px), #000 calc(100% - var(--ring)));
  animation: orSpin 14s linear infinite;
}
.or-ring::after { z-index: -1; filter: blur(5px); opacity: .45; }
@keyframes orSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .or-ring::before, .or-ring::after { animation: none; } }
.brand__mark.or-ring { width: 30px; height: 30px; --ring: 5px; }
.or-ring--xl { width: 88px; height: 88px; --ring: 9px; }
.or-ring--xl::after { filter: blur(14px); opacity: .6; }

/* ==========================================================================
   Catalogue — the OpenRewards app on a phone
   ========================================================================== */
.bw__grid { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: clamp(40px, 7vw, 112px); align-items: center; }
.bw__facts { list-style: none; margin: 36px 0 36px; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line-palm); }
.bw__facts li { display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line-palm); }
.bw__facts b { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; color: var(--lime); white-space: nowrap; }
.bw__facts span { font-size: 16px; color: var(--on-palm-2); }
.bw__glow { position: absolute; z-index: -1; right: 6%; top: 50%; width: 620px; height: 620px; margin-top: -310px; border-radius: 50%;
  background: conic-gradient(from 210deg, #3d2bff, #1fb8ff, #19e3b1, #f6f24a, #ff8a1f, #ff2d55, #7b2bff, #3d2bff);
  -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 70%, transparent 100%); mask: radial-gradient(farthest-side, transparent 62%, #000 70%, transparent 100%);
  filter: blur(30px); opacity: .32; animation: orSpin 40s linear infinite; pointer-events: none; }
.bw__device { display: flex; justify-content: center; }
.bw__video { width: 100%; max-width: 360px; aspect-ratio: 9 / 16; height: auto; display: block; object-fit: cover; border-radius: 30px; background: #014BAA; box-shadow: 0 40px 80px -40px rgba(1, 36, 90, .5), 0 0 0 1px rgba(1, 36, 90, .06); }
@media (max-width: 980px) { .bw__video { margin-inline: auto; } }

.app {
  --e: cubic-bezier(.22,1,.36,1);
  position: relative; width: 360px; padding: 12px 16px 10px; border-radius: 46px; background: var(--serenade); color: var(--ink);
  box-shadow: 0 0 0 9px #0b0f0e, 0 0 0 10px rgba(255,255,255,.1), 0 60px 100px -40px rgba(0,0,0,.75);
}
.app__status { position: relative; display: flex; justify-content: space-between; align-items: center; height: 24px; padding: 0 12px; font-size: 13px; font-weight: 600; }
.app__status i { position: absolute; left: 50%; top: 2px; width: 88px; height: 24px; margin-left: -44px; border-radius: 20px; background: #0b0f0e; }
.app__sig { display: inline-flex; gap: 2px; align-items: flex-end; }
.app__sig b { width: 3px; background: var(--ink); border-radius: 1px; }
.app__sig b:nth-child(1) { height: 5px; } .app__sig b:nth-child(2) { height: 8px; } .app__sig b:nth-child(3) { height: 11px; }
.app__top { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.app__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; letter-spacing: -0.02em; }
.app__ring { width: 22px; height: 22px; --ring: 4px; }
.app__pts { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: var(--pill); background: var(--palm); color: var(--serenade); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.app__hi { margin-top: 16px; font-size: 24px; font-weight: 600; letter-spacing: -0.035em; }
.app__search { display: flex; align-items: center; gap: 8px; height: 40px; margin-top: 12px; padding: 0 12px; border-radius: 12px; background: var(--white); color: var(--ink-3); font-size: 13px; box-shadow: 0 1px 2px rgba(4, 20, 48,.05); }
.app__search svg { width: 16px; height: 16px; }
.app__chips { display: flex; gap: 6px; margin-top: 12px; }
.app__chips span { padding: 6px 12px; border-radius: var(--pill); background: var(--white); font-size: 12px; font-weight: 500; color: var(--ink-2); }
.app__chips span.is-on { background: var(--palm); color: var(--serenade); }
.app__grp { display: flex; align-items: center; gap: 7px; margin: 18px 2px 10px; font-size: 13.5px; font-weight: 600; }
.app__grp small { margin-left: auto; font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-3); font-weight: 500; }
.app__dot { width: 7px; height: 7px; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 3px rgba(31,157,85,.16); }
.app__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; }
.at { display: grid; justify-items: center; gap: 6px; opacity: 0; transform: translateY(8px) scale(.94); transition: opacity .5s var(--e), transform .6s var(--e); transition-delay: calc(var(--i, 0) * 45ms); }
.app.is-in .at { opacity: 1; transform: none; }
.at__ic { position: relative; width: 56px; height: 56px; border-radius: 15px; overflow: hidden; background: var(--white); box-shadow: 0 1px 2px rgba(4, 20, 48,.08), 0 6px 14px -8px rgba(4, 20, 48,.35); display: grid; place-items: center; }
.at__ic img { width: 100%; height: 100%; object-fit: cover; }
.at__ic--svg { background: var(--c); }
.at__ic--svg img { width: 28px; height: 28px; object-fit: contain; filter: invert(1); }
.at__ic--dk img { filter: none; opacity: .85; }
.at__ic--word { background: #111; color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }
.at__n { max-width: 70px; font-size: 10.5px; font-weight: 500; line-height: 1.2; text-align: center; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__grid--soon .at__ic::after { content: "Soon"; position: absolute; right: 3px; bottom: 3px; padding: 1px 5px; border-radius: 6px; background: rgba(1, 75, 170,.78); color: var(--lime); font-family: var(--f-mono); font-size: 7.5px; text-transform: uppercase; }
.app__tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px -16px -10px; padding: 10px 8px 16px; border-top: 1px solid var(--line); border-radius: 0 0 46px 46px; background: var(--white); }
.app__tabs span { display: grid; justify-items: center; gap: 3px; font-size: 10px; color: var(--ink-3); }
.app__tabs span.is-on { color: var(--palm); font-weight: 600; }
.app__tabs svg { width: 20px; height: 20px; }
@media (max-width: 980px) { .bw__grid { grid-template-columns: 1fr; } .bw__glow { right: 50%; margin-right: -310px; top: auto; bottom: 8%; margin-top: 0; } }
@media (max-width: 420px) { .app { width: 100%; padding: 10px 12px 8px; border-radius: 38px; } .at__ic { width: 50px; height: 50px; border-radius: 13px; } .app__grid { gap: 10px 4px; } .bw__facts li { grid-template-columns: 110px 1fr; } }
@media (prefers-reduced-motion: reduce) { .at { opacity: 1; transform: none; transition: none; } .bw__glow { animation: none; } }
.at__n { white-space: normal; overflow: visible; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.4em; max-width: 72px; }
.app__ring { width: 22px; height: 22px; }
@media (max-width: 1180px) { .trust__in { align-items: stretch; } }
.trust__head { min-width: 0; max-width: 100%; }
@media (max-width: 767px) { .trust__head h2 .accent { white-space: normal; } }

/* In-app UI (brand-grid phone, How it works phone, hero Pay card) uses Google Sans Flex, like a real app */
.app, .app *, .kp, .kp *, .hk__pay, .hk__pay * { font-family: "Google Sans Flex", "Google Sans", var(--f-body); }
.app__grp small { font-size: 11px; text-transform: none; letter-spacing: 0; }
.app__grid--soon .at__ic::after { content: none; }

/* Hero card — Pay → confirmation */
.hp__btn { transition: transform .18s ease, background-color .2s; }
.hp__btn.is-press { transform: scale(.96); background: var(--palm-700); }
.hp__ok {
  position: absolute; inset: 0; z-index: 3; border-radius: inherit; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, #2a6fd0 0%, var(--palm) 60%); color: var(--serenade);
  clip-path: circle(0% at 50% 86%); transition: clip-path .8s cubic-bezier(.7, 0, .2, 1);
}
.hk__pay.is-paid .hp__ok { clip-path: circle(150% at 50% 86%); }
.hp__ok-ring { width: 64px; height: 64px; border-radius: 50%; background: rgba(207, 224, 246,.12); transform: scale(.5); opacity: 0; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) .35s, opacity .3s .35s; }
.hp__ok-ring svg { width: 100%; height: 100%; }
.hp__ok-ring circle { stroke: var(--lime); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; transition: stroke-dashoffset .7s ease .45s; }
.hp__ok-ring path { stroke: var(--lime); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .45s ease .95s; }
.hp__ok-t { margin-top: 8px; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.hp__ok-s { font-size: 13.5px; color: var(--lime); }
.hp__ok-foot { display: flex; justify-content: space-between; gap: 12px; width: 100%; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(242,247,249,.22); font-size: 12px; color: var(--on-palm-2); }
.hp__ok-t, .hp__ok-s, .hp__ok-foot { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.hk__pay.is-paid .hp__ok-ring { transform: none; opacity: 1; }
.hk__pay.is-paid .hp__ok-ring circle, .hk__pay.is-paid .hp__ok-ring path { stroke-dashoffset: 0; }
.hk__pay.is-paid .hp__ok-t { opacity: 1; transform: none; transition-delay: 1s; }
.hk__pay.is-paid .hp__ok-s { opacity: 1; transform: none; transition-delay: 1.1s; }
.hk__pay.is-paid .hp__ok-foot { opacity: 1; transform: none; transition-delay: 1.2s; }

/* Confetti burst — pieces are spawned by JS, each with its own direction */
.hp__burst { position: absolute; z-index: 4; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.hp__burst i {
  position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--c);
  opacity: 0; transform: translate(-50%, -50%) scale(.4);
  animation: hpBurst var(--dur, 1.1s) cubic-bezier(.12, .7, .3, 1) var(--delay, 0s) forwards;
}
.hp__burst i.r { border-radius: 50%; width: 7px; height: 7px; }
@keyframes hpBurst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(0deg); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(var(--rot)); }
}
@media (prefers-reduced-motion: reduce) { .hp__ok, .hp__ok * { transition: none !important; } .hp__burst { display: none; } }

/* ==========================================================================
   THEME G — Royal Blue × Light Cream (2026-09-29)
   Colour: Royal Blue #014BAA · Light Cream #F8F3F0 · Sky tint #cfe0f6 · Navy ink #0c1f3d · Cream deep #efe7e1
   Type:   Bricolage Grotesque 700 (display) · DM Sans (body) · Geist Mono (labels)
   v1 (Makaya) is kept in ../openrewards-versions/.
   ========================================================================== */
:root {
  --palm: #014baa;          /* Royal Blue — buttons, hero, headlines, dark bands, footer */
  --palm-700: #1a5fc0;
  --palm-900: #0c1f3d;
  --forest: #0c1f3d;        /* ink on dark bands */
  --lime: #cfe0f6;          /* Sky tint — highlights, accents on blue */
  --sail: #efe7e1;          /* Cream deep — secondary section blocks */
  --serenade: #f8f3f0;      /* page: Light Cream */
  --white: #ffffff;
  --tint: #eef3fa;          /* light Sky for chips and placeholders */
  --tint-2: #dde8f6;
  --ink: #0c1f3d;           /* 15:1 on page */
  --ink-2: #3b4a63;         /* 9:1 on page */
  --ink-3: #56627a;         /* 6.8:1 on page, 5:1 on Cream deep */
  --on-palm: #fbfaf0;
  --on-palm-2: #d3def0;     /* 8:1 on Blue */
  --line: rgba(1, 75, 170, 0.12);
  --line-2: rgba(1, 75, 170, 0.2);
  --line-palm: rgba(251, 250, 240, 0.16);
  --f-display: "Bricolage Grotesque", "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "DM Sans", "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.display, h1, h2, h3 { color: var(--palm); }
.on-palm .display, .on-palm h1, .on-palm h2, .on-palm h3, .foot h1, .foot h2, .foot h3 { color: var(--on-palm); }
.brand__mark circle:first-child, .app__ring circle:first-child { stroke: var(--palm); }
.brand__mark circle:last-child { fill: #5b93dc; }   /* Sky, deepened so the dot reads on white */
.foot .brand__mark circle:last-child { fill: var(--lime); }
body { font-family: var(--f-body); }

/* Chunky display type */
.display, h1, h2 { font-weight: 700; letter-spacing: -0.045em; }
h3, .h3 { font-weight: 600; letter-spacing: -0.03em; }
.display { font-size: clamp(2.9rem, 7.2vw, 6.4rem); line-height: 1; }
h2, .h2 { font-size: clamp(2.1rem, 4.3vw, 3.7rem); line-height: 1.02; }
.hk .display { font-size: clamp(2.6rem, 4.4vw, 4.4rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.05em; }
.hero:not(.hero--k) .display { font-size: clamp(2.4rem, 4.4vw, 4.2rem); line-height: 1.02; letter-spacing: -0.05em; }
.mission .display { font-size: clamp(2.5rem, 6vw, 5.4rem); }
/* the strip hugs Bricolage's shorter caps */
em.accent, .accent { --t: .14em; --h: .9em; --r: .12em; }

/* Lime is a full surface: the home hero */
.hk { --bg: var(--lime); }
.hk::after { background: none; }
.hk .accent, .hk em.accent { --c: var(--palm); color: var(--lime); }
.hk .lede { opacity: .86; }
.hk .btn--ghost, .hk .btn--line { border-color: rgba(12, 31, 61, .25); }

/* Dark bands: ink with a hint of forest */
.on-palm { background-color: var(--palm); }
.spot, .bw.on-palm { background: radial-gradient(90% 70% at 100% 0%, rgba(42, 111, 208, .55), transparent 70%), var(--palm); }

/* Success screen on the hero pay card */
.hp__ok { background: radial-gradient(120% 90% at 50% 0%, #2a6fd0 0%, var(--palm) 62%); }

/* Footer: ink, with lime marquee */
.foot { background: var(--palm); color: var(--on-palm); }
.foot h4 { color: var(--lime); }
.foot ul a, .foot p, .foot small { color: var(--on-palm-2); }
.foot ul a:hover { color: var(--on-palm); }
.foot .brand, .foot .brand__name { color: var(--on-palm); }
.foot .brand__mark circle:first-child { stroke: var(--on-palm); }
.foot__brand p, .foot__legal { color: var(--on-palm-2); }
.foot__legal .flag { color: var(--lime); }
.foot .social a { color: var(--on-palm); border-color: var(--line-palm); background: rgba(251, 251, 247, .04); }
.foot .social a:hover { background: var(--lime); color: var(--palm); border-color: var(--lime); }
.foot__big, .foot .foot__big { color: rgba(207, 224, 246, .16); }
.foot__legal, .foot hr, .foot__cols { border-color: var(--line-palm) !important; }

/* Hero photo: its own rounded panel inside the lime card (no fade into lime) */
.hk__media { top: 14px; right: 14px; bottom: 14px; width: calc(50% - 14px); border-radius: calc(var(--r-xl) - 14px); overflow: hidden; -webkit-mask-image: none; mask-image: none; background: #efe7e1; }
.hk__media img { filter: saturate(.9) brightness(1.02); }
@media (max-width: 1100px) {
  .hk__media { top: auto; right: auto; bottom: auto; width: auto; margin: 8px 12px 12px; border-radius: calc(var(--r-lg) - 12px); }
}
.hk::after { display: none; }

/* THEME G — the home hero is a Royal Blue surface with cream type */
.hk { --bg: var(--palm); }
.hk .display, .hk h1 { color: var(--serenade); }
.hk .lede { color: var(--serenade); opacity: .88; }
.hk .accent, .hk em.accent { --c: var(--serenade); color: var(--palm); }
.hk .btn--primary { background: var(--serenade); color: var(--palm); box-shadow: 0 14px 30px -14px rgba(2, 12, 30, .5); }
.hk .btn--primary:hover { background: #ffffff; }
.hk .btn--glass { background: transparent; color: var(--serenade); border-color: rgba(248, 243, 240, .45); }
.hk .btn--glass:hover { background: rgba(248, 243, 240, .12); border-color: var(--serenade); }
.hk .pill--glass { background: rgba(248, 243, 240, .12); border-color: rgba(248, 243, 240, .22); color: var(--serenade); }

/* Buttons: sentence case in the body sans instead of mono caps */
.btn { font-family: var(--f-body); text-transform: none; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.btn--sm { font-size: 15px; }
.hk .pill--glass b { color: var(--palm); background: var(--serenade); padding: 3px 9px; border-radius: 999px; }

/* Headlines inside blue cards stay cream (the site-wide blue headline rule would hide them) */
.tier--pop h2, .tier--pop h3, .bcol--you h2, .bcol--you h3 { color: var(--serenade); }
/* KPI captions: undo the leftover success-overlay .ok rule that clipped them away */
.kpi .ok { position: static; inset: auto; z-index: auto; display: block; padding: 0; margin-top: 4px; background: none; clip-path: none; text-align: left; transition: none; }
/* Hero card: "Left to pay" summary line, no checkbox */
.hp__opt--sum { grid-template-columns: 1fr auto; background: transparent; border: 1.5px dashed var(--line-2); }
.hp__opt--sum .hp__v b { font-size: 1.05em; }

/* ==========================================================================
   REGIONS — India / UK (html[data-region]); business-first home (2026-09-30)
   ========================================================================== */
html[data-region="uk"] .r-in, html:not([data-region="uk"]) .r-uk { display: none !important; }

/* Region picker */
.region { position: relative; }
.lang__code { min-width: 1.4em; }
.lang__chev { width: 16px; height: 16px; margin-left: -2px; opacity: .6; transition: transform .2s; }
.lang[aria-expanded="true"] .lang__chev { transform: rotate(180deg); }
.region__menu {
  position: absolute; z-index: 80; top: calc(100% + 10px); right: 0; min-width: 272px; padding: 8px;
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 24px 60px -24px rgba(4, 20, 48, .35), 0 2px 6px rgba(4, 20, 48, .06);
}
.region__k { margin: 6px 10px 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.region__menu button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px;
  background: none; text-align: left; font-family: var(--f-body); color: var(--ink); transition: background-color .15s;
}
.region__menu button:hover { background: var(--serenade); }
.region__menu button[aria-pressed="true"] { background: var(--tint); }
.region__menu button svg { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.region__menu b { display: block; font-size: 15.5px; font-weight: 600; }
.region__menu small { display: block; font-size: 13px; color: var(--ink-3); }
.sheet__region { display: flex; gap: 8px; margin: 8px 0 4px; }
.sheet__region button { flex: 1; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--white); font: 600 15px var(--f-body); color: var(--ink); }
.sheet__region button[aria-pressed="true"] { border-color: var(--palm); background: var(--tint); color: var(--palm); }
@media (max-width: 1080px) {
  .nav__right .region .lang { display: inline-flex; height: 40px; padding: 0 8px 0 6px; gap: 4px; }
  .nav__right .region .lang__code { display: none; }
}

/* Hero: note line, mirrored India photo, "Back again" chip */
.hk__note { display: flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14.5px; color: var(--serenade); opacity: .82; }
.hk__note svg { width: 16px; height: 16px; flex-shrink: 0; }
.hk__media { background: #1b3d78; }
.hk__media img { object-position: 50% 28%; filter: none; }
html:not([data-region="uk"]) .hk__media img { transform: scale(-1.04, 1.04); }
@media (max-width: 1100px) { .hk__media img { object-position: 50% 24%; } }
.hk__habit {
  position: absolute; z-index: 3; top: 18px; left: 18px; display: flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 9px; border-radius: 16px; background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 34px -16px rgba(4, 20, 48, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: "Google Sans Flex", "Google Sans", var(--f-body); color: var(--ink);
  opacity: 0; transform: translateY(-8px) scale(.96); transition: opacity .5s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
.hk__habit.is-on { opacity: 1; transform: none; }
.hk__habit b { display: block; font-size: 14px; font-weight: 700; line-height: 1.2; }
.hk__habit small { display: block; font-size: 12.5px; color: var(--ink-3); }
.hk__habit-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--palm); color: #fff; }
.hk__habit-ic svg { width: 18px; height: 18px; }
.pt-coin svg { width: 12px; height: 12px; }

.markets__next { font-size: 14px; color: var(--ink-3); margin-left: 4px; }

/* Why loyalty teams switch */
.why .head .lede { max-width: 30em; margin: 0; }
.why__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-2); }
.why__stats > div { padding: 28px 28px 8px 0; }
.why__stats > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.why__stats b { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -0.05em; color: var(--palm); }
.why__stats span { display: block; margin-top: 10px; max-width: 18em; color: var(--ink-2); font-size: 16px; }
.why__src { margin: 14px 0 clamp(40px, 5vw, 56px); font-size: 12.5px; color: var(--ink-3); }
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why__card { padding: 28px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.why__ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--tint); color: var(--palm); }
.why__ic svg { width: 22px; height: 22px; }
.why__card h3 { margin: 20px 0 10px; font-size: clamp(1.3rem, 1.8vw, 1.55rem); }
.why__card p { margin: 0; color: var(--ink-2); }
@media (max-width: 900px) {
  .why .head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .why__stats { grid-template-columns: 1fr; }
  .why__stats > div, .why__stats > div + div { padding: 20px 0; border-left: 0; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 16px; }
  .why__stats > div:first-child, html[data-region="uk"] .why__stats > div.r-uk:nth-child(2) { border-top: 0; }
  .why__stats b { min-width: 3.3ch; font-size: 2.6rem; }
  .why__stats span { margin-top: 0; }
  .why__grid { grid-template-columns: 1fr; }
}

/* Programme rules card */
.rules__bar { height: 8px; margin: 2px 0 10px; border-radius: 8px; background: var(--tint); overflow: hidden; }
.rules__bar i { display: block; height: 100%; border-radius: inherit; background: var(--palm); }
.ui__row--bar { border-bottom: 0 !important; padding-bottom: 6px !important; }

html[data-region="uk"] .ph-partner { object-position: 50% 30%; }
.mission__note { margin-top: 22px; font-size: 14.5px; color: var(--ink-3); }

/* Hero: rotating word */
.rot { display: inline-block; position: relative; vertical-align: bottom; overflow: hidden; white-space: nowrap;
  padding-bottom: .2em; margin-bottom: -.2em; transition: width .5s cubic-bezier(.22, 1, .36, 1); }
.rot__w { display: inline-block; color: var(--lime); transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; }
.rot__w.is-out { transform: translateY(-85%); opacity: 0; }
.rot__w.is-pre { transform: translateY(85%); opacity: 0; transition: none; }
.rot__m { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; pointer-events: none; }
@media (max-width: 1180px) { .trust__stats dd { white-space: normal; } }
@media (max-width: 900px) { .trust__stats { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } }

/* Mirror only the home hero photo (India) — keeps her phone clear of the pay card */
html:not([data-region="uk"]) .hk__media img { transform: none; }
html:not([data-region="uk"]) .hk__media img[data-mirror] { transform: scale(-1.04, 1.04); }
.hero--c .hk__media img { object-position: 50% 40%; }

/* Customers — FAQ */
.faq { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__list details { border-top: 1px solid var(--line-2); }
.faq__list details:last-child { border-bottom: 1px solid var(--line-2); }
.faq__list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing: -0.02em; color: var(--palm); }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: ""; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--white)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23014baa' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list p { margin: -6px 0 22px; max-width: 40em; color: var(--ink-2); }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } }

/* Rotating word v2 — stacked, cross-fading, fixed width (replaces the width-animating version) */
.h1l { display: block; }
.rot { display: inline-grid; vertical-align: baseline; overflow: visible; padding: 0; margin: 0; transition: none; width: auto !important; }
.rot__w { grid-area: 1 / 1; justify-self: start; white-space: nowrap; color: var(--lime); opacity: 0; transform: translateY(.32em); filter: blur(6px);
  transition: opacity .55s ease, transform .75s cubic-bezier(.22, 1, .36, 1), filter .55s ease; will-change: opacity, transform; }
.rot__w.is-on { opacity: 1; transform: none; filter: none; }
.rot__w.is-out { opacity: 0; transform: translateY(-.32em); filter: blur(6px); }
@media (prefers-reduced-motion: reduce) { .rot__w { transition: none; } }

/* From hello to live — the go-live process */
.go .head .lede { max-width: 28em; margin: 0; }
.go__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.go__list::before { content: ""; position: absolute; left: 28px; right: 28px; top: 43px; height: 2px; background: repeating-linear-gradient(90deg, var(--palm) 0 8px, transparent 8px 16px); opacity: .25; }
.go__step { position: relative; padding: 28px 26px 30px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.go__t { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--palm); color: var(--serenade); font-family: var(--f-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.go__step:last-child .go__t { background: var(--lime); color: var(--palm); }
.go__step h3 { margin: 22px 0 8px; font-size: clamp(1.35rem, 1.8vw, 1.6rem); }
.go__step p { margin: 0; color: var(--ink-2); }
@media (max-width: 1000px) { .go__list { grid-template-columns: repeat(2, 1fr); } .go__list::before { display: none; } }
@media (max-width: 900px) { .go .head { flex-direction: column; align-items: flex-start; gap: 16px; } }
@media (max-width: 560px) { .go__list { grid-template-columns: 1fr; } }

/* Partners photo framing */
.ph-partner { object-position: 42% 30%; }

/* Small screens: keep the hero headline and pill inside the card */
@media (max-width: 420px) {
  .hk .display { font-size: clamp(2.1rem, 10.4vw, 2.6rem); }
  .hk .pill--mk { white-space: normal; flex-wrap: wrap; row-gap: 6px; }
}
.bw__grid > *, .feature > *, .spot__grid > *, .hw__grid > * { min-width: 0; }
@media (max-width: 360px) { .bw__facts li { grid-template-columns: 1fr; gap: 4px; } }
@media (max-width: 380px) {
  .nav__right .nav__cta { display: none; }
  .nav__right { gap: 6px; }
  .calc { padding: 18px; }
  .stepper { gap: 8px; }
  .stepper button { width: 44px; height: 44px; flex-shrink: 0; }
  .stepper__val { min-width: 0; }
}
@media (max-width: 380px) { .nav .brand__word { font-size: 22px; } .nav .brand__mark { width: 28px; height: 28px; } .nav .brand { gap: 8px; } }

/* ==========================================================================
   CUSTOMERS HERO — light, craving-led mosaic (distinct from the business home)
   ========================================================================== */
.cx { position: relative; overflow: hidden; padding: clamp(28px, 5vw, 80px) 0 clamp(40px, 5vw, 88px);
  background: radial-gradient(55% 70% at 88% 35%, rgba(207, 224, 246, .75), transparent 72%), radial-gradient(40% 50% at 0% 100%, rgba(207, 224, 246, .45), transparent 70%), var(--serenade); }
.cx__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cx__pill { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.cx__pill b { padding: 3px 10px; border-radius: 999px; background: var(--palm); color: #fff; font-size: 13px; }
.cx .display { font-size: clamp(3rem, 6.4vw, 6rem); line-height: .98; letter-spacing: -0.055em; color: var(--palm); }
.cx .rot__w { color: var(--palm); background: var(--lime); padding: 0 .12em; margin-left: -.04em; border-radius: .14em; }
.cx .lede { margin-top: 24px; max-width: 32em; color: var(--ink-2); }
.cx .btn-row { margin-top: 32px; }
.cx__note { display: flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14.5px; color: var(--ink-3); }
.cx__note svg { width: 16px; height: 16px; color: #1f7a45; flex-shrink: 0; }

.cx__mosaic { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: clamp(380px, 42vw, 600px); }
.cx__tile { position: relative; margin: 0; border-radius: 26px; overflow: hidden; background: var(--tint);
  box-shadow: 0 30px 60px -34px rgba(4, 20, 48, .45);
  opacity: 0; transform: translateY(22px) scale(.97);
  transition: opacity .7s ease calc(var(--d) * 1s), transform 1s cubic-bezier(.22, 1, .36, 1) calc(var(--d) * 1s); }
.cx__tile--a { grid-row: 1 / span 2; }
.cx__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.8s cubic-bezier(.22, 1, .36, 1) calc(var(--d) * 1s); }
.cx.is-in .cx__tile { opacity: 1; transform: none; }
.cx.is-in .cx__tile img { transform: scale(1); }
.cx__chip { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px;
  border-radius: 16px; background: rgba(255, 255, 255, .95); box-shadow: 0 12px 28px -14px rgba(4, 20, 48, .5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: "Google Sans Flex", "Google Sans", var(--f-body); color: var(--ink);
  opacity: 0; transform: translateY(12px); transition: opacity .5s ease calc(var(--d) * 1s + .55s), transform .7s cubic-bezier(.22, 1, .36, 1) calc(var(--d) * 1s + .55s); }
.cx.is-in .cx__chip { opacity: 1; transform: none; }
.cx__ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: #1f7a45; color: #fff; }
.cx__ic svg { width: 16px; height: 16px; }
.cx__t { min-width: 0; }
.cx__t b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx__t small { display: block; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.cx__chip em { margin-left: auto; font-style: normal; font-weight: 700; font-size: 15px; color: var(--palm); white-space: nowrap; }
.cx__badge { position: absolute; z-index: 2; top: -14px; right: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px;
  background: var(--palm); color: #fff; font: 600 13.5px "Google Sans Flex", "Google Sans", var(--f-body); box-shadow: 0 16px 30px -16px rgba(4, 20, 48, .6);
  opacity: 0; transform: translateY(-8px) scale(.94); transition: opacity .5s ease 1.2s, transform .7s cubic-bezier(.22, 1, .36, 1) 1.2s; }
.cx.is-in .cx__badge { opacity: 1; transform: none; }
.cx__badge .pt-coin { background: var(--lime); color: var(--palm); }
@media (prefers-reduced-motion: reduce) { .cx__tile, .cx__tile img, .cx__chip, .cx__badge { opacity: 1; transform: none; transition: none; } }
@media (max-width: 960px) {
  .cx__grid { grid-template-columns: 1fr; }
  .cx__mosaic { height: clamp(360px, 80vw, 520px); margin-top: 8px; }
}
@media (max-width: 560px) {
  .cx .display { font-size: clamp(2.6rem, 12.4vw, 3.4rem); }
  .cx__mosaic { gap: 10px; height: 420px; grid-template-columns: 1fr 1fr; }
  .cx__tile { border-radius: 20px; }
  .cx__chip { left: 8px; right: 8px; bottom: 8px; padding: 8px 10px 8px 8px; gap: 8px; border-radius: 13px; flex-wrap: wrap; }
  .cx__ic { width: 24px; height: 24px; border-radius: 8px; }
  .cx__t b { font-size: 13px; } .cx__t small { font-size: 11.5px; }
  .cx__chip em { font-size: 13.5px; }
  .cx__tile--b .cx__t small, .cx__tile--c .cx__t small { display: none; }
  .cx__badge { right: 10px; font-size: 12.5px; }
}
.cx__t b { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 1180px) {
  .cx__tile--b .cx__ic, .cx__tile--c .cx__ic { display: none; }
  .cx__tile--b .cx__chip, .cx__tile--c .cx__chip { padding: 9px 12px; }
}
@media (max-width: 960px) {
  .cx__tile--b .cx__t small, .cx__tile--c .cx__t small { display: none; }
}
#bz-img { object-position: 50% 22%; }
html[data-region="uk"] #bz-img { object-position: 62% 40%; }
#pt-img { object-position: 50% 30%; }

/* ==========================================================================
   HOME HERO — "This week" feed (replaces the single checkout card)
   ========================================================================== */
.hk__week { width: 304px; padding: 16px 14px 14px; font-family: "Google Sans Flex", "Google Sans", var(--f-body); color: var(--ink); }
.wk__hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 0 4px 10px; border-bottom: 1px solid var(--line); }
.wk__hd b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.wk__hd small { display: block; font-size: 12.5px; color: var(--ink-3); }
.wk__count { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.wk__count b { display: inline-block; min-width: .6em; margin-right: 3px; font-size: 22px; line-height: 1; font-weight: 700; color: var(--palm); text-align: right; }
.wk__count b.is-bump { animation: wkBump .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes wkBump { 0% { transform: scale(.6); opacity: .4; } 100% { transform: none; opacity: 1; } }
.wk__list { list-style: none; margin: 0; padding: 6px 0 0; height: calc(4 * 50px + 6px); overflow: hidden; }
.wk__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; height: 50px; padding: 0 4px;
  opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .45s ease, transform .65s cubic-bezier(.22, 1, .36, 1); }
.wk__row.is-in { opacity: 1; transform: none; }
.wk__row.is-out { opacity: 0; transform: translateY(-6px); transition: opacity .35s ease, transform .45s ease; }
.wk__ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--tint); color: var(--palm); }
.wk__ic svg { width: 18px; height: 18px; }
.wk__t { min-width: 0; }
.wk__t b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk__t small { display: block; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.wk__row em { font-style: normal; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.wk__ft { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 4px 0; border-top: 1px dashed var(--line-2); font-size: 12.5px; color: var(--ink-3); }
.wk__top { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; background: var(--palm); color: #fff; font-weight: 700; white-space: nowrap;
  opacity: 0; transform: scale(.7); transition: opacity .35s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.wk__top.is-on { opacity: 1; transform: none; }
.wk__top svg { width: 12px; height: 12px; color: var(--lime); }
@media (max-width: 1100px) { .hk__week { width: 290px; } }
@media (max-width: 560px) {
  .hk__week { width: 262px; padding: 12px 10px 10px; }
  .wk__list { height: calc(4 * 44px + 6px); }
  .wk__row { height: 44px; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; }
  .wk__ic { width: 30px; height: 30px; border-radius: 9px; }
  .wk__t b { font-size: 13px; } .wk__t small { font-size: 11px; } .wk__row em { font-size: 13.5px; }
  .wk__count b { font-size: 19px; }
}
@media (max-width: 380px) { .hk__week { width: 244px; } }
@media (prefers-reduced-motion: reduce) { .wk__row, .wk__top { transition: none; } .wk__count b.is-bump { animation: none; } }
/* Week card placement per region: India photo has her face centre-right, UK photo has her phone on the left */
.hk__media img { object-position: 50% 22%; }
@media (min-width: 1101px) {
  .hk__week { right: auto; left: calc(50% - 46px); bottom: 40px; }
  html[data-region="uk"] .hk__week { left: auto; right: 32px; bottom: 32px; }
}
@media (max-width: 1100px) {
  .hk__week { right: auto; left: 16px; bottom: 16px; }
  html[data-region="uk"] .hk__week { left: auto; right: 16px; }
  .hk__media img { object-position: 50% 18%; }
}
@media (max-width: 560px) { .hk__week { width: 240px; } }
/* Phones: the week card sits under the photo (slightly overlapping) so faces stay clear */
@media (max-width: 700px) {
  .hk__week, html[data-region="uk"] .hk__week { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: -56px 20px 20px; }
  .hk__media { margin-bottom: 0; }
}
@media (max-width: 1100px) { html:not([data-region="uk"]) .hk__media img { object-position: 50% 46%; } }
@media (max-width: 1100px) { html:not([data-region="uk"]) .hk__media img { object-position: 50% 28%; } }

/* ==========================================================================
   UNIQUE SECTIONS (v16) — no section layout is shared across pages any more
   ========================================================================== */
/* Home · "Your app. Three taps." storyboard */
.story .head .lede { max-width: 30em; margin: 0; }
.story__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.story__step { position: relative; }
.story__n { display: inline-block; margin-top: 22px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--palm); }
.story__step h3 { margin: 6px 0 8px; font-size: clamp(1.3rem, 1.8vw, 1.55rem); }
.story__step p { margin: 0; color: var(--ink-2); max-width: 24em; }
.mini { position: relative; height: 300px; padding: 18px 16px; border-radius: 28px; background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 30px 50px -36px rgba(4, 20, 48, .45); overflow: hidden; font-family: "Google Sans Flex", "Google Sans", var(--f-body); color: var(--ink);
  background-image: linear-gradient(180deg, rgba(207, 224, 246, .45), transparent 42%); }
.mini__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 14px; }
.mini__bar i { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--tint); }
.mini__logo { padding: 4px 10px; border-radius: 8px; background: var(--palm); color: #fff; font-weight: 700; font-size: 12.5px; }
.mini__back { font-size: 22px; line-height: 1; color: var(--palm); }
.mini__acct { padding: 14px; border-radius: 16px; background: var(--palm); color: #fff; }
.mini__acct small { display: block; font-size: 11.5px; opacity: .75; }
.mini__acct b { display: block; margin-top: 4px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.mini__tile { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 16px; background: var(--white); border: 1.5px solid var(--palm);
  box-shadow: 0 0 0 4px rgba(207, 224, 246, .9); }
.mini__tile b { display: block; font-size: 13.5px; } .mini__tile small { display: block; font-size: 11.5px; color: var(--ink-3); }
.mini__tile > svg { margin-left: auto; width: 16px; height: 16px; color: var(--palm); }
.mini__tile.is-hot { animation: miniPulse 2.8s ease-in-out infinite; }
@keyframes miniPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(207, 224, 246, .9); } 50% { box-shadow: 0 0 0 9px rgba(207, 224, 246, .35); } }
.mini__ghost { display: grid; gap: 6px; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--serenade); }
.mini__ghost i { display: block; height: 7px; border-radius: 4px; background: var(--line-2); width: 70%; } .mini__ghost i + i { width: 45%; }
.mini__row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.mini__row b { display: block; font-size: 13.5px; } .mini__row small { display: block; font-size: 11.5px; color: var(--ink-3); }
.mini__row em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--palm); padding: 3px 8px; border-radius: 999px; background: var(--tint); }
.mini__ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--tint); color: var(--palm); }
.mini__ic svg { width: 18px; height: 18px; }
.mini__chips { display: flex; gap: 6px; margin-top: 14px; }
.mini__chips span { padding: 5px 10px; border-radius: 999px; font-size: 11.5px; background: var(--serenade); color: var(--ink-2); }
.mini__chips .is-on { background: var(--palm); color: #fff; }
.mini--ok { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; background-image: linear-gradient(180deg, rgba(207, 224, 246, .7), rgba(255, 255, 255, 0) 70%); }
.mini__check { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--palm); color: #fff; margin-bottom: 6px; box-shadow: 0 0 0 8px rgba(1, 75, 170, .12); }
.mini__check svg { width: 26px; height: 26px; }
.mini__paid { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.mini__split { font-size: 12.5px; color: var(--ink-3); }
.mini__eta { display: flex; justify-content: space-between; width: 100%; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 11.5px; color: var(--ink-3); }
.mini__back2 { margin-top: 12px; width: 100%; padding: 10px; border-radius: 12px; background: var(--palm); color: #fff; font-size: 12.5px; font-weight: 700; }
@media (max-width: 900px) { .story .head { flex-direction: column; align-items: flex-start; gap: 16px; } .story__row { grid-template-columns: 1fr; gap: 36px; } .mini { max-width: 380px; } }
@media (prefers-reduced-motion: reduce) { .mini__tile.is-hot { animation: none; } }

/* Customers · "Where you can use it" category cards */
.uses .head .lede { max-width: 30em; margin: 0; }
.uc__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.uc { padding: 24px 22px 18px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.uc__k { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.uc h3 { margin: 8px 0 16px; font-size: clamp(1.35rem, 1.8vw, 1.6rem); }
.uc__list { list-style: none; margin: 0; padding: 0; }
.uc__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 500; }
.uc__list .at__ic { width: 40px; height: 40px; border-radius: 12px; font-size: 8.5px; }
.uc__list .at__ic--svg img { width: 20px; height: 20px; }
.uc__list em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.uc__list .is-live { background: rgba(31, 122, 69, .12); color: #1f6e40; }
.uc__list .is-soon { background: var(--serenade); color: var(--ink-3); }
.uc__note { margin: 20px 0 0; font-size: 14px; color: var(--ink-3); }
@media (max-width: 1100px) { .uc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .uses .head { flex-direction: column; align-items: flex-start; gap: 16px; } }
@media (max-width: 560px) { .uc__grid { grid-template-columns: 1fr; } }

/* Customers · promises as a centred icon trio */
.pv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); text-align: center; }
.pv__item { display: flex; flex-direction: column; align-items: center; }
.pv__ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--palm); color: var(--lime); box-shadow: 0 0 0 10px var(--tint); }
.pv__ic svg { width: 30px; height: 30px; }
.pv__item h3 { margin: 26px 0 8px; font-size: clamp(1.3rem, 1.8vw, 1.55rem); }
.pv__item p { margin: 0; max-width: 22em; color: var(--ink-2); }
@media (max-width: 760px) { .pv__grid { grid-template-columns: 1fr; gap: 40px; } }

/* Customers · final share card */
.ask__card { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(32px, 5vw, 72px);
  border-radius: var(--r-xl); background: radial-gradient(70% 90% at 100% 0%, #1f5fc4 0%, var(--palm) 60%); color: var(--serenade); }
.ask__card .eyebrow { color: var(--lime); }
.ask__card h2 { color: var(--serenade); font-size: clamp(2.4rem, 5vw, 4.4rem); }
.ask__card .accent { --c: var(--serenade); color: var(--palm); }
.ask__card .lede { color: var(--on-palm-2); margin-top: 18px; max-width: 30em; }
.ask__card .btn-row { margin-top: 28px; }
.ask__card .btn--primary { background: var(--serenade); color: var(--palm); }
.ask__card .btn--glass { color: var(--serenade); border-color: rgba(248, 243, 240, .45); background: transparent; }
.ask__chat { justify-self: center; width: min(360px, 100%); padding: 18px; border-radius: 26px; background: var(--white); color: var(--ink); font-family: "Google Sans Flex", "Google Sans", var(--f-body); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .55); }
.ask__to { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.ask__to b { color: var(--ink); }
.bub { margin: 0 0 8px; max-width: 82%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.4; }
.bub--me { margin-left: auto; background: var(--palm); color: #fff; border-bottom-right-radius: 6px; }
.bub--them { background: var(--serenade); border-bottom-left-radius: 6px; }
.bub--sm { max-width: 60%; }
.ask__seen { display: block; text-align: right; font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 900px) { .ask__card { grid-template-columns: 1fr; } .ask__chat { justify-self: stretch; width: auto; } }

/* Businesses · safety as rows (distinct from the home grid) */
.pr { border-top: 1px solid var(--line-2); }
.pr__row { display: grid; grid-template-columns: 56px 52px minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(16px, 2.4vw, 32px); align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line-2); }
.pr__num { font-family: var(--f-mono); font-size: 13px; color: var(--ink-3); }
.pr__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--tint); color: var(--palm); }
.pr__ic svg { width: 22px; height: 22px; }
.pr__row h3 { margin: 0; font-size: clamp(1.2rem, 1.7vw, 1.45rem); }
.pr__row p { margin: 0; color: var(--ink-2); }
@media (max-width: 760px) { .pr__row { grid-template-columns: 44px minmax(0, 1fr); row-gap: 8px; } .pr__num { display: none; } .pr__row p { grid-column: 2; } }
/* Partners hero mirrors the Businesses hero: photo left, words right, stat cards swapped */
@media (min-width: 981px) {
  .hero--flip .hero__grid { grid-template-columns: 1fr 1.02fr; }
  .hero--flip .hero__media { order: -1; }
  .hero--flip .receipt--dark { left: auto; right: -24px; bottom: 64px; }
  .hero--flip .receipt--light { right: auto; left: -24px; top: 44px; }
}
@media (min-width: 981px) { .hero--flip .receipt--light { left: 16px; } .hero--flip .receipt--dark { right: -20px; } }
/* Status tag sits under the brand name, so long names never truncate */
.uc__list li { grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px; }
.uc__list li .at__ic { grid-row: 1 / span 2; }
.uc__list li > span:not(.at__ic) { grid-column: 2; align-self: end; line-height: 1.25; }
.uc__list li em { grid-column: 2; justify-self: start; align-self: start; }

/* ==========================================================================
   BRIEF v17 — "Stop browsing. Start asking." chat · "Built around your week" · extras
   ========================================================================== */
.askit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.askit .lede { max-width: 32em; }
.askit__live { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; }
.askit__live li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.askit__live span { width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 0 rgba(31, 157, 85, .5); animation: livePing 2.4s ease-out infinite; }
.askit__live li:nth-child(2) span { animation-delay: .4s; } .askit__live li:nth-child(3) span { animation-delay: .8s; }
@keyframes livePing { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 85, .45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(31, 157, 85, 0); } }

.chat { justify-self: center; width: min(400px, 100%); border-radius: 32px; background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 40px 80px -44px rgba(4, 20, 48, .5); overflow: hidden; font-family: "Google Sans Flex", "Google Sans", var(--f-body); color: var(--ink); }
.chat__top { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--palm); color: #fff; }
.chat__logo { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); }
.chat__logo svg { width: 24px; height: 24px; }
.chat__top b { display: block; font-size: 15.5px; }
.chat__top small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; opacity: .8; }
.chat__top small i { width: 7px; height: 7px; border-radius: 50%; background: #6ee7a0; }
.chat.is-live .chat__top small i { animation: livePing 1.2s ease-out infinite; }
.chat__body { display: flex; flex-direction: column; gap: 10px; height: 318px; padding: 18px 16px; background: linear-gradient(180deg, var(--serenade), #fff); overflow: hidden; }
.msg { display: none; margin: 0; max-width: 84%; padding: 11px 15px; border-radius: 20px; font-size: 14.5px; line-height: 1.45; }
.msg.is-in { display: block; animation: msgIn .5s cubic-bezier(.22, 1, .36, 1) both; }
.msg.is-out { animation: msgOut .45s ease both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes msgOut { to { opacity: 0; transform: translateY(-6px); } }
.msg--me { align-self: flex-end; background: var(--palm); color: #fff; border-bottom-right-radius: 6px; }
.msg--bot { align-self: flex-start; background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 6px; box-shadow: 0 6px 16px -12px rgba(4, 20, 48, .35); }
.msg--done { display: none; }
.msg--done.is-in { display: flex; align-items: flex-start; gap: 8px; }
.msg__tick { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #1f9d55; color: #fff; margin-top: 1px; }
.msg__tick svg { width: 13px; height: 13px; }
.msg--typing { display: none; align-self: flex-start; padding: 12px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; border-bottom-left-radius: 6px; }
.msg--typing.is-in { display: inline-flex; gap: 4px; }
.msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); opacity: .35; animation: dot 1.1s infinite; }
.msg--typing i:nth-child(2) { animation-delay: .15s; } .msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: .9; transform: translateY(-3px); } }
.chat__input { display: flex; align-items: center; justify-content: space-between; margin: 0 14px 14px; padding: 10px 10px 10px 16px; border-radius: 999px; background: var(--serenade); font-size: 14px; color: var(--ink-3); }
.chat__input b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--palm); color: #fff; }
@media (max-width: 900px) { .askit__grid { grid-template-columns: 1fr; } .chat { justify-self: stretch; width: auto; max-width: 440px; } }
@media (prefers-reduced-motion: reduce) { .msg { display: block; animation: none !important; } .msg--done { display: flex; } .askit__live span { animation: none; } }

/* Built around your week — category chips, food & rides first */
.wk2__chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; }
.wk2__chips li { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 12px; border-radius: 999px; background: var(--white); border: 1px solid var(--line-2); font-size: clamp(15px, 1.4vw, 17px); font-weight: 600; color: var(--ink); }
.wk2__chips li.is-first { background: var(--palm); color: #fff; border-color: var(--palm); box-shadow: 0 18px 30px -20px rgba(1, 75, 170, .8); }
.wk2__ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--palm); }
.wk2__chips li.is-first .wk2__ic { background: rgba(255, 255, 255, .14); color: var(--lime); }
.wk2__ic svg { width: 21px; height: 21px; }

/* "Idle balances" stats: a fourth card that's words, not a number */
.why__stats { grid-template-columns: repeat(4, 1fr); }
.why__stats > div.is-text b { font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -0.035em; line-height: 1.05; }
@media (max-width: 1100px) and (min-width: 901px) { .why__stats { grid-template-columns: repeat(2, 1fr); } .why__stats > div:nth-child(odd) { padding-left: 0; border-left: 0; } }
@media (max-width: 900px) { .why__stats > div.is-text { flex-direction: column; gap: 6px; } }

/* Brand wall: generic category tiles (no partner signed yet) */
.at__ic--gen { background: var(--c); }
.at__ic--gen svg { width: 28px; height: 28px; }

/* Partners: the one place MCP is named */
.mcp-note { margin: 22px 0 0; padding: 14px 16px; border-left: 3px solid var(--palm); border-radius: 0 12px 12px 0; background: var(--tint); font-size: 15px; color: var(--ink-2); max-width: 34em; }

/* Customers: four promises */
.pv__grid { grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 1000px) { .pv__grid { grid-template-columns: repeat(2, 1fr); row-gap: 44px; } }
@media (max-width: 560px) { .pv__grid { grid-template-columns: 1fr; } }
/* Chat v2 — reserved slots (no resizing, nothing clipped at any width) */
.chat__body { height: auto; min-height: 0; overflow: visible; }
.slot { position: relative; display: flex; }
.slot--me { justify-content: flex-end; }
.chat .msg, .chat .msg--done { display: block; visibility: hidden; opacity: 0; animation: none; }
.chat .msg--done { display: flex; align-items: flex-start; gap: 8px; }
.chat .msg.is-in { visibility: visible; opacity: 1; animation: msgIn .5s cubic-bezier(.22, 1, .36, 1) both; }
.chat .msg.is-out { visibility: visible; animation: msgOut .45s ease both; }
.typing { position: absolute; left: 0; top: 0; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 20px; border-bottom-left-radius: 6px;
  background: var(--white); border: 1px solid var(--line); opacity: 0; transform: scale(.9); transform-origin: left bottom; transition: opacity .25s ease, transform .3s ease; pointer-events: none; }
.typing.is-in { opacity: 1; transform: none; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); opacity: .35; animation: dot 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .chat .msg, .chat .msg--done { visibility: visible; opacity: 1; } }
@media (max-width: 900px) { .why__stats { grid-template-columns: 1fr; } .why__stats > div, .why__stats > div:nth-child(odd) { padding: 20px 0; border-left: 0; } }
.cx__note { display: block; }
.cx__note svg { display: inline-block; vertical-align: -3px; margin-right: 6px; }

/* Partners quote: caption always under the quote (never truncated) */
.fq__second { grid-template-columns: 1fr; gap: 16px; }
.fq__second .who { flex-wrap: wrap; }
.who span { white-space: normal; }
.fq__img img.fq-in { object-position: 70% 40%; }

/* ==========================================================================
   HERO SPEC (v18): 658px tall · 36px top/bottom · aligned highlight · 240×260 card
   ========================================================================== */
@media (min-width: 1101px) {
  .hero--k .hk { height: 658px; min-height: 658px; align-items: stretch; }
  .hk .hk__copy { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; padding-top: 36px; padding-bottom: 36px; box-sizing: border-box; }
  .hk .hk__copy .pills { margin-bottom: auto; }
  .hk .hk__copy .display { margin-top: 28px; }
  .hk .hk__copy .hk__note { margin-top: auto; padding-top: 28px; }
  .hk__media { top: 14px; bottom: 14px; }
}
/* "Every day." — text sits flush with the lines above; the box bleeds evenly on both sides */
.hk h1 .accent, .hk h1 em.accent { padding: 0 .14em; margin: 0 0 0 -.14em; --r: .14em; --t: .13em; --h: .92em; }

/* Week card — compact 240 × 260 */
.hk__week { width: 240px; height: 260px; padding: 12px 12px 10px; box-sizing: border-box; display: flex; flex-direction: column; }
.hk__week .wk__hd { padding: 0 2px 8px; }
.hk__week .wk__hd b { font-size: 13.5px; } .hk__week .wk__hd small { font-size: 11px; }
.hk__week .wk__count { font-size: 11.5px; } .hk__week .wk__count b { font-size: 18px; }
.hk__week .wk__list { height: calc(4 * 38px + 4px); padding-top: 4px; }
.hk__week .wk__row { height: 38px; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; padding: 0 2px; }
.hk__week .wk__ic { width: 28px; height: 28px; border-radius: 9px; } .hk__week .wk__ic svg { width: 15px; height: 15px; }
.hk__week .wk__t b { font-size: 12.5px; } .hk__week .wk__t small { font-size: 10.5px; }
.hk__week .wk__row em { font-size: 12.5px; }
.hk__week .wk__ft { margin-top: auto; padding: 8px 2px 0; font-size: 11px; }
.hk__week .wk__top { padding: 4px 9px 4px 7px; font-size: 11px; }
@media (min-width: 1101px) {
  .hk__week, html[data-region="uk"] .hk__week { left: auto; right: 38px; bottom: 38px; }
}
@media (max-width: 1100px) and (min-width: 701px) { .hk__week, html[data-region="uk"] .hk__week { left: auto; right: 28px; bottom: 28px; } }
@media (max-width: 700px) { .hk__week, html[data-region="uk"] .hk__week { width: auto; height: auto; } }
/* India photo: her phone is on the right, so the card sits bottom-left of the photo */
@media (min-width: 1101px) { html:not([data-region="uk"]) .hk__week { right: auto; left: calc(50% + 38px); } }
@media (max-width: 1100px) and (min-width: 701px) { html:not([data-region="uk"]) .hk__week { right: auto; left: 24px; bottom: 24px; } }

/* ==========================================================================
   NAV (v18): active page in brand blue + one sliding underline
   ========================================================================== */
.nav__links { position: relative; }
.nav__links a { transition: color .25s ease, background-color .25s ease; }
.nav__links a[aria-current="page"] { color: var(--palm); }
.nav__links a[aria-current="page"]:hover { background: transparent; }
.nav__links.has-ink a[aria-current="page"]::after { display: none; }
.nav__ink { position: absolute; left: 0; bottom: 2px; height: 2px; width: 0; border-radius: 2px; background: var(--palm); pointer-events: none;
  opacity: 0; transform: translateX(0); transition: transform .42s cubic-bezier(.22, 1, .36, 1), width .42s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; }
.nav__links.has-ink .nav__ink.is-on { opacity: 1; }
.nav__links.is-hovering a[aria-current="page"]:not(:hover) { color: var(--ink); }
.nav__sheet a[aria-current="page"] { color: var(--palm); font-weight: 600; }
.nav__sheet a[aria-current="page"]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--palm); margin: 0 10px 2px 0; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .nav__ink { transition: opacity .2s ease; } }

/* ==========================================================================
   PHONE FLOW (v18): a full, uncut phone that plays one real order —
   pick Swiggy → add a Coca-Cola → pay with points → on the way home
   ========================================================================== */
@media (min-width: 981px) { .bw__grid { grid-template-columns: 1fr minmax(0, 360px); } }
.app.ph { width: 324px; height: 702px; padding: 12px 0 0; overflow: hidden; isolation: isolate; border-radius: 48px; background: var(--serenade);
  box-shadow: 0 0 0 9px #0b0f0e, 0 0 0 10px rgba(255,255,255,.14), 0 70px 110px -40px rgba(0,0,0,.8); }
.ph::after { content: ""; position: absolute; z-index: 6; left: 50%; bottom: 8px; width: 112px; height: 4px; margin-left: -56px; border-radius: 4px; background: rgba(4, 20, 48, .82); pointer-events: none; }
.ph .app__status { z-index: 5; padding: 0 26px; }
.ph__view { position: absolute; inset: 0; transition: opacity .45s ease; }
.ph.is-dim .ph__view { opacity: 0; }
.ph.no-anim *, .ph.no-anim *::before, .ph.no-anim *::after { transition: none !important; }

/* Screens: the next one slides in from the right, the last one eases back */
.fl { position: absolute; inset: 0; padding: 44px 16px 0; background: var(--serenade); visibility: hidden; transform: translate3d(100%, 0, 0);
  transition: transform .6s var(--e), visibility 0s linear .6s; will-change: transform; }
.fl.is-on { visibility: visible; transform: none; transition: transform .6s var(--e), visibility 0s; }
.fl.is-back { visibility: hidden; transform: translate3d(-24%, 0, 0); transition: transform .6s var(--e), visibility 0s linear .6s; }
.fl.is-back::after { opacity: 1; }
.fl::after { content: ""; position: absolute; inset: 0; background: rgba(4, 20, 48, .18); opacity: 0; transition: opacity .6s ease; pointer-events: none; }

/* 1 · Home */
.fl--home .app__top { margin-top: 10px; }
.fl__av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--ink-2); box-shadow: 0 1px 2px rgba(4, 20, 48, .06); }
.fl__av svg { width: 18px; height: 18px; }
.fl__bal { position: relative; display: grid; gap: 2px; margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: var(--palm); color: var(--serenade); overflow: hidden; }
.fl__bal::before { content: ""; position: absolute; right: -40px; top: -60px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(207, 224, 246, .32), transparent 70%); }
.fl__bal-k { font-size: 11.5px; opacity: .8; }
.fl__bal-v { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; }
.fl__bal-v b { font-size: 28px; font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.fl__bal-s { font-size: 11.5px; opacity: .85; }
.fl__bal .pt-coin { position: absolute; right: 16px; top: 16px; width: 30px; height: 30px; }
.fl__bal .pt-coin svg { width: 16px; height: 16px; }
.fl--home .app__search { margin-top: 12px; }
.fl--home .app__grp { margin: 16px 2px 10px; }
.fl--home .app__tabs { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 8px 22px; border-radius: 0; }
.fl--home .at { transition: opacity .5s var(--e), transform .35s var(--e); }
.fl--home .at.is-press { transform: scale(.9); }

/* Shared bits */
.fl__bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; min-height: 44px; }
.fl__back { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(4, 20, 48, .06); }
.fl__back svg { width: 17px; height: 17px; }
.fl__logo { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; background: var(--c, #FC8019); }
.fl__logo img { width: 20px; height: 20px; filter: invert(1); }
.fl__logo svg { width: 20px; height: 20px; }
.fl__ttl { display: grid; min-width: 0; line-height: 1.25; }
.fl__ttl b { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl__ttl small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl__chip { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 4px; border-radius: var(--pill); background: var(--palm); color: var(--serenade); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.fl__chip .pt-coin { width: 20px; height: 20px; }

/* 2 · Store */
.fl__search { display: flex; align-items: center; gap: 8px; height: 40px; margin-top: 12px; padding: 0 12px; border-radius: 12px; background: var(--white); color: var(--ink); font-size: 13.5px; box-shadow: 0 1px 2px rgba(4, 20, 48, .05), 0 0 0 1.5px var(--palm); }
.fl__search svg { width: 16px; height: 16px; color: var(--ink-3); }
.fl__caret { width: 1.5px; height: 16px; margin-left: -6px; background: var(--palm); animation: flCaret 1s steps(2) infinite; }
@keyframes flCaret { 50% { opacity: 0; } }
.fl__cats { display: flex; gap: 6px; margin-top: 12px; }
.fl__cats span { padding: 6px 11px; border-radius: var(--pill); background: var(--white); font-size: 11.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.fl__cats span.is-on { background: var(--ink); color: var(--white); }
.fl__meta { display: flex; align-items: center; gap: 7px; margin: 14px 2px 10px; font-size: 11.5px; color: var(--ink-3); }
.fl__meta .app__dot, .fl__live .app__dot { width: 6px; height: 6px; }
.fl__prods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fl__p { display: grid; gap: 2px; padding: 8px 8px 10px; border-radius: 16px; background: var(--white); box-shadow: 0 1px 2px rgba(4, 20, 48, .05);
  opacity: 0; transform: translateY(10px); transition: opacity .45s var(--e), transform .55s var(--e); transition-delay: calc(var(--i, 0) * 70ms); }
.fl--store.is-shown .fl__p { opacity: 1; transform: none; }
.fl__p-img { display: grid; place-items: center; height: 104px; margin-bottom: 6px; border-radius: 11px; background: var(--tint, #EAF1FB); }
.fl__p-img svg { height: 88px; width: auto; filter: drop-shadow(0 6px 6px rgba(4, 20, 48, .18)); }
.fl__p b { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.fl__p small { font-size: 11px; color: var(--ink-3); }
.fl__p-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.fl__p-row em { font-style: normal; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fl__add { position: relative; display: inline-grid; place-items: center; min-width: 58px; height: 28px; padding: 0 10px; border-radius: 9px; border: 1.5px solid var(--palm); background: var(--white); color: var(--palm); font-size: 12px; font-weight: 700; letter-spacing: .02em; transition: background-color .25s ease, color .25s ease, transform .2s var(--e); }
.fl__add .n { display: none; }
.fl__add.is-press { transform: scale(.92); }
.fl__add.is-added { background: var(--palm); color: var(--serenade); }
.fl__add.is-added .a { display: none; }
.fl__add.is-added .n { display: inline-flex; gap: 12px; align-items: center; }
.fl__cart { position: absolute; left: 16px; right: 16px; bottom: 26px; display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 16px; border-radius: 16px; background: var(--palm); color: var(--serenade); font-size: 13.5px;
  box-shadow: 0 16px 30px -12px rgba(1, 75, 170, .6); transform: translateY(140%); transition: transform .5s var(--e); }
.fl__cart b { font-weight: 600; }
.fl__cart > span:last-child { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.fl__cart svg { width: 16px; height: 16px; }
.fl__cart.is-on { transform: none; }
.fl__cart.is-press { transform: scale(.97); }

/* 3 · Checkout */
.fl__item, .fl__use { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px; border-radius: 16px; background: var(--white); box-shadow: 0 1px 2px rgba(4, 20, 48, .05); }
.fl__thumb { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--tint, #EAF1FB); }
.fl__thumb svg { height: 40px; width: auto; }
.fl__amt { margin-left: auto; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fl__use { margin-top: 10px; transition: box-shadow .3s ease; }
.fl__use .pt-coin { width: 34px; height: 34px; }
.fl__use .pt-coin svg { width: 17px; height: 17px; }
.fl__use.is-on { box-shadow: 0 0 0 1.5px var(--palm), 0 10px 22px -14px rgba(1, 75, 170, .6); }
.fl__sw { position: relative; margin-left: auto; width: 44px; height: 26px; flex-shrink: 0; border-radius: 26px; background: #D5DCE6; transition: background-color .3s ease; }
.fl__sw i { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(4, 20, 48, .3); transition: transform .35s var(--e); }
.fl__use.is-on .fl__sw { background: var(--palm); }
.fl__use.is-on .fl__sw i { transform: translateX(18px); }
.fl__bill { margin: 14px 0 0; padding: 4px 14px; border-radius: 16px; background: var(--white); box-shadow: 0 1px 2px rgba(4, 20, 48, .05); }
.fl__bill div { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; font-size: 13px; border-bottom: 1px dashed var(--line); }
.fl__bill div:last-child { border-bottom: 0; }
.fl__bill dt { color: var(--ink-2); }
.fl__bill dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.fl__bill dd.is-free { color: #1f9d55; }
.fl__used dd { color: var(--palm); }
.fl__due dt { color: var(--ink); font-weight: 600; }
.fl__due dd { font-size: 20px; letter-spacing: -0.03em; }
.fl__live { display: flex; align-items: center; gap: 7px; margin: 12px 2px 0; font-size: 11.5px; color: var(--ink-3); }
.fl__pay { position: absolute; left: 16px; right: 16px; bottom: 26px; display: grid; place-items: center; height: 54px; border-radius: 16px; background: var(--ink); color: var(--white); font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  transition: background-color .35s ease, transform .2s var(--e); }
.fl__pay.is-ready { background: var(--palm); }
.fl__pay.is-press { transform: scale(.97); }
.fl__pay > * { grid-area: 1 / 1; transition: opacity .2s ease; }
.fl__spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; opacity: 0; animation: flSpin .8s linear infinite; }
.fl__pay.is-busy .fl__pay-t { opacity: 0; }
.fl__pay.is-busy .fl__spin { opacity: 1; }
@keyframes flSpin { to { transform: rotate(360deg); } }

/* 4 · Paid → on the way */
.fl--done { background: var(--white); }
.fl__ok { position: absolute; left: 0; right: 0; top: 190px; display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--ink);
  transition: transform .7s var(--e); }
.fl__ok-ring { width: 92px; height: 92px; color: #1f9d55; margin-bottom: 12px; }
.fl__ok-ring circle { stroke-dasharray: 240; stroke-dashoffset: 240; transform: rotate(-90deg); transform-origin: 44px 44px; transition: stroke-dashoffset .7s var(--e); }
.fl__ok-ring path { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset .45s var(--e) .5s; }
.fl__ok-t { font-size: 22px; font-weight: 600; letter-spacing: -0.035em; }
.fl__ok-s { font-size: 13px; color: var(--ink-2); }
.fl__ok-b { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 12px 5px 5px; border-radius: var(--pill); background: var(--tint, #EAF1FB); color: var(--palm); font-size: 12.5px; font-weight: 600; }
.fl__ok-t, .fl__ok-s, .fl__ok-b { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--e), transform .5s var(--e); }
.fl--done.is-paid .fl__ok-ring circle, .fl--done.is-paid .fl__ok-ring path { stroke-dashoffset: 0; }
.fl--done.is-paid .fl__ok-t { opacity: 1; transform: none; transition-delay: .55s; }
.fl--done.is-paid .fl__ok-s { opacity: 1; transform: none; transition-delay: .65s; }
.fl--done.is-paid .fl__ok-b { opacity: 1; transform: none; transition-delay: .75s; }

/* The finger: a soft dot that glides to each tap and presses */
.ph__tap { position: absolute; z-index: 8; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .38); border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 6px 16px rgba(4, 20, 48, .28), inset 0 0 0 10px rgba(1, 75, 170, .16);
  opacity: 0; transform: translate3d(var(--x, 160px), var(--y, 500px), 0) scale(.6);
  transition: transform .55s var(--e), opacity .3s ease; }
.ph__tap.is-show { opacity: 1; transform: translate3d(var(--x), var(--y), 0) scale(1); }
.ph__tap.is-press { transform: translate3d(var(--x), var(--y), 0) scale(.78); transition-duration: .16s; }
.ph__tap::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); opacity: 0; }
.ph__tap.is-press::after { animation: flRipple .6s var(--e); }
@keyframes flRipple { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }

/* Scale the whole phone on small screens instead of squashing it */
@media (max-width: 980px) { .bw__device { margin-top: 8px; } }
@media (max-width: 420px) { .app.ph { width: 324px; padding: 12px 0 0; border-radius: 48px; zoom: .92; } .ph .at__ic { width: 56px; height: 56px; border-radius: 15px; } }
@media (max-width: 370px) { .app.ph { zoom: .84; } }
@media (max-width: 340px) { .app.ph { zoom: .8; } }
@media (prefers-reduced-motion: reduce) { .fl, .fl *, .ph__tap { transition: none !important; } .fl__caret, .fl__live-tag i { animation: none; } }
.fl--home .at { transition-delay: calc(var(--i, 0) * 45ms); }
.fl--home .at.is-press { transition-delay: 0s; }
.fl__addr { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px; border-radius: 16px; background: var(--white); box-shadow: 0 1px 2px rgba(4, 20, 48, .05); }
.fl__addr-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--tint, #EAF1FB); color: var(--palm); }
.fl__addr-ic svg { width: 17px; height: 17px; }
.fl__cart { transform: translateY(calc(100% + 60px)); }
.fl__cart.is-on { transform: none; }
.fl__cart.is-on.is-press { transform: scale(.97); }
/* Trust strip: stack a little earlier so the headline + four stats never crowd the row */
@media (max-width: 1340px) {
  .trust__in { flex-direction: column; align-items: stretch; }
  .trust__stats { width: 100%; grid-template-columns: repeat(4, 1fr); text-align: left; }
}
@media (max-width: 560px) { .trust__stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .trust__stats { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } }
/* Hero pill stays on one line on phones */
@media (max-width: 440px) {
  .hk .pill--mk { flex-wrap: nowrap; white-space: nowrap; gap: 7px; font-size: 12.5px; padding-right: 8px; }
  .hk .pill--mk .flags svg { width: 18px; height: 18px; }
}
@media (max-width: 350px) { .hk .pill--mk { font-size: 11.5px; } .hk .pill--mk .flags { display: none; } }
.pill__m { display: none; }
@media (max-width: 414px) { .hk .pill__d { display: none; } .hk .pill__m { display: inline; } }
@media (max-width: 374px) { .hk .pill--mk .flags { display: none; } }

/* ==========================================================================
   v20 · Hero: taller (718px, 60px top/bottom) with the framed photo —
   the photo sits inside the blue card with an even 14px inset
   ========================================================================== */
@media (min-width: 1101px) {
  .hero--k .hk { height: 718px; min-height: 718px; }
  .hk .hk__copy { padding-top: 60px; padding-bottom: 60px; }
  .hk__media { top: 14px; right: 14px; bottom: 14px; width: calc(50% - 14px); border-radius: calc(var(--r-xl) - 14px); -webkit-mask-image: none; mask-image: none; }
  .hk__media img { object-position: 50% 30%; }
  .hk__week, html[data-region="uk"] .hk__week { left: auto; right: 38px; bottom: 38px; }
  html:not([data-region="uk"]) .hk__week { right: auto; left: calc(50% + 38px); bottom: 38px; }
}

/* Week feed: real photos instead of icons */
.hk__week .wk__ic--img { width: 32px; height: 32px; border-radius: 10px; overflow: hidden; background: var(--tint); padding: 0; }
.hk__week .wk__ic--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hk__week .wk__row { grid-template-columns: 32px minmax(0, 1fr) auto; }
@media (max-width: 700px) { .wk__ic--img { width: 34px; height: 34px; border-radius: 10px; overflow: hidden; } .wk__ic--img img { width: 100%; height: 100%; object-fit: cover; } }

/* Categories: equal pills with real photos, never ragged on phones */
.wk2__chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1080px; margin: 0 auto; justify-content: stretch; }
.wk2__chips li { justify-content: flex-start; min-width: 0; padding: 10px 18px 10px 10px; gap: 14px; line-height: 1.2; }
.wk2__ic--img { width: 52px; height: 52px; flex-shrink: 0; overflow: hidden; background: var(--tint); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.wk2__chips li.is-first .wk2__ic--img { background: rgba(255,255,255,.14); box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.wk2__ic--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk2__t { display: grid; gap: 3px; min-width: 0; }
.wk2__t small { font-size: 12px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.wk2__chips li.is-first .wk2__t small { color: rgba(255, 255, 255, .72); }
@media (max-width: 980px) { .wk2__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; } }
@media (max-width: 560px) {
  .wk2__chips { gap: 10px; }
  .wk2__chips li { border-radius: 20px; padding: 10px 12px 10px 10px; gap: 10px; font-size: 14.5px; align-items: center; }
  .wk2__ic--img { width: 44px; height: 44px; }
  .wk2__t small { font-size: 11px; }
}
@media (max-width: 360px) { .wk2__chips { grid-template-columns: 1fr; } .wk2__chips li { border-radius: 999px; } }

/* Customers hero: same type scale as the Partners hero */
.cx .display { font-size: clamp(2.4rem, 4.4vw, 4.2rem); line-height: 1.02; letter-spacing: -0.05em; }
@media (max-width: 700px) { .cx .display { font-size: 2.4rem; } }

/* Partners photos */
html:not([data-region="uk"]) .fq__img img.fq-in { object-position: 50% 30%; }
html[data-region="uk"] .fq__img img.fq-in { object-position: 50% 40%; }
html:not([data-region="uk"]) .feature__photo img.kw-in { object-position: 55% 30%; }

/* ==========================================================================
   v19 · Mobile audit fixes
   ========================================================================== */
/* Centred section heads: no 40px flex gap between eyebrow, heading and lede */
.head--center { gap: 0; }

/* Photo cards sit under the photo on phones, overlapping its bottom edge — faces stay clear */
@media (max-width: 700px) {
  .feature__media .ui, .feature__media .ui.ui--bl, .feature__media .ui.ui--br, .feature__media .ui.ui--tl, .feature__media .ui.ui--tr {
    position: relative; left: auto; right: auto; top: auto; bottom: auto; z-index: 2;
    margin: -56px 14px 0; min-width: 0; max-width: none; width: auto; }
  .feature__photo { aspect-ratio: 4 / 3.6; }
}

/* Settlement switch: three equal segments, never wraps into a ragged pill */
@media (max-width: 560px) {
  .modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: 18px; gap: 2px; }
  .modes button { padding: 10px 6px; font-size: 12px; line-height: 1.25; border-radius: 14px; white-space: normal; text-align: center; }
}

/* Final CTA buttons: full width on phones so labels stay on one line */
@media (max-width: 520px) {
  .final .btn-row { flex-direction: column; align-items: stretch; width: 100%; }
  .final .btn-row .btn { flex: 0 0 auto; width: 100%; justify-content: center; padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 361px) and (max-width: 520px) { .final .btn-row .btn { white-space: nowrap; font-size: 15px; } }

/* Footer wordmark ticker: softer edges on phones so letters drift in, not look cut */
@media (max-width: 700px) {
  .foot__big { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
}

/* Testimonial + category photos: keep the subject in frame */
html:not([data-region="uk"]) .fq__img img.fq-in { object-position: 50% 18%; }
.wk2__ic--img img[src*="pexels-5650023"] { object-position: 64% 78%; transform: scale(1.5); transform-origin: 64% 78%; }
.wk2__ic--img img[src*="pexels-16738987"] { object-position: 40% 88%; }
.wk2__ic--img img[src*="pexels-20003057"] { object-position: 45% 60%; }
@media (min-width: 981px) { .wk2__chips li { font-size: 16px; gap: 12px; padding-right: 14px; } }

/* v20 · "Every day." strip — 8px radius with 60% corner smoothing (Figma squircle).
   Drawn as its own layer so the smoothed corner can be masked; plain 8px radius where
   mask-box-image isn't supported. */
.hk h1 .accent, .hk h1 em.accent { background: none; }
.hk h1 .accent::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: var(--t); height: var(--h); background: var(--c); border-radius: 8px; pointer-events: none; }
@supports (-webkit-mask-box-image: none) {
  .hk h1 .accent::before { border-radius: 0; -webkit-mask-box-image: url("squircle-8-60.svg") 13 fill / 13px stretch; }
}
/* Strip fully contains the descenders, with even room above the caps */
.hk h1 .accent, .hk h1 em.accent { --t: .16em; --h: 1.01em; }

/* ==========================================================================
   v21 · Phone: real can photos + a proper live-tracking screen
   (map on top, bottom sheet with ETA, 4-step bar, courier, payment)
   ========================================================================== */
.fl__p-img { background: linear-gradient(180deg, #F4F6FA, #E9EEF6); }
.fl__p-img img { height: 88px; width: auto; display: block; filter: drop-shadow(0 8px 8px rgba(4, 20, 48, .22)); }
.fl__thumb img { height: 40px; width: auto; display: block; filter: drop-shadow(0 3px 3px rgba(4, 20, 48, .2)); }

.fl--done .fl__ok { transition: opacity .45s ease, transform .6s var(--e); }
.fl--done.is-trip .fl__ok { opacity: 0; transform: translateY(-16px) scale(.96); }

.tk { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.fl--done.is-trip .tk { opacity: 1; visibility: visible; transition: opacity .5s ease; }

/* Map */
.tk__map { position: absolute; left: 0; top: 0; width: 324px; height: 420px; overflow: hidden; background: #EEEEE8; transform: scale(1.08); transform-origin: 70% 40%; transition: transform 1.4s var(--e); }
.fl--done.is-trip .tk__map { transform: none; }
.tk__map::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 64px; background: linear-gradient(180deg, rgba(238, 238, 232, .95), rgba(238, 238, 232, 0)); pointer-events: none; }
.tk__svg { position: absolute; inset: 0; display: block; }
.tk__blocks rect { fill: #E3E1DA; }
.tk__blocks rect.tk__park { fill: #D3E8C4; }
.tk__water { fill: #C3DCF1; }
.tk__case, .tk__rd { fill: none; stroke-linecap: square; }
.tk__case { stroke: #DAD7CF; }
.tk__rd { stroke: #fff; }
.tk__lbl { font: 600 7.5px "Google Sans Flex", var(--f-body); fill: #8B909A; letter-spacing: .02em; }
.tk__lbl--area { font-size: 7px; letter-spacing: .18em; fill: #A3A7AE; }
.tk__route-case { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.tk__route { fill: none; stroke: var(--palm); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.tk__route-done { fill: none; stroke: #A9B3C4; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 4.2s cubic-bezier(.45, 0, .25, 1); }
.fl--done.is-go .tk__route-done { stroke-dashoffset: 30; }

.tk__store { position: absolute; left: 90px; top: 352px; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center; background: var(--c, #FC8019); box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(4, 20, 48, .28); }
.tk__store img { width: 15px; height: 15px; filter: invert(1); }
.tk__store svg { width: 15px; height: 15px; }
.tk__home { position: absolute; left: 266px; top: 150px; display: grid; justify-items: center; transform: translate(-50%, calc(-100% + 16px)); }
.tk__home b { margin-bottom: 6px; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 14px rgba(4, 20, 48, .3); }
.tk__home i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--palm); color: #fff; box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(1, 75, 170, .4); }
.tk__home svg { width: 16px; height: 16px; }
.tk__rider { position: absolute; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--palm); z-index: 2;
  box-shadow: 0 6px 16px rgba(4, 20, 48, .28);
  offset-path: path("M90 352L90 312Q90 300 102 300L218 300Q230 300 230 288L230 162Q230 150 242 150L266 150"); offset-rotate: 0deg; offset-distance: 0%;
  transition: offset-distance 4.2s cubic-bezier(.45, 0, .25, 1); }
.tk__rider::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: rgba(1, 75, 170, .16); animation: tkHalo 1.8s ease-out infinite; z-index: -1; }
@keyframes tkHalo { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.tk__rider svg { width: 20px; height: 20px; }
.fl--done.is-go .tk__rider { offset-distance: 70%; }
.tk__ctl { position: absolute; top: 46px; z-index: 3; display: grid; place-items: center; height: 34px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 4px 12px rgba(4, 20, 48, .16); font-size: 12.5px; font-weight: 600; }
.tk__ctl--x { left: 16px; width: 34px; }
.tk__ctl--x svg { width: 15px; height: 15px; }
.tk__ctl--help { right: 16px; padding: 0 14px; }

/* Bottom sheet */
.tk__sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; gap: 12px; padding: 8px 16px 30px; border-radius: 24px 24px 0 0; background: #fff;
  box-shadow: 0 -12px 30px rgba(4, 20, 48, .14); transform: translateY(105%); transition: transform .75s var(--e) .12s; }
.fl--done.is-trip .tk__sheet { transform: none; }
.tk__grab { justify-self: center; width: 38px; height: 4px; border-radius: 4px; background: #D6DAE1; margin-bottom: 2px; }
.tk__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tk__eta { display: grid; gap: 2px; }
.tk__eta small { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #1f7a45; }
.tk__dot { width: 7px; height: 7px; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 0 rgba(31, 157, 85, .5); animation: tkLive 1.6s ease-out infinite; }
@keyframes tkLive { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 85, .5); } 100% { box-shadow: 0 0 0 7px rgba(31, 157, 85, 0); } }
.tk__eta b { font-size: 21px; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tk__ontime { flex-shrink: 0; margin-top: 2px; padding: 5px 10px; border-radius: 999px; background: rgba(31, 157, 85, .12); color: #1f7a45; font-size: 11px; font-weight: 700; }
.tk__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tk__bar i { position: relative; height: 5px; border-radius: 5px; background: #E3E7EE; overflow: hidden; }
.tk__bar i.is-done { background: var(--palm); }
.tk__bar i.is-now b { position: absolute; inset: 0; background: var(--palm); transform: scaleX(.18); transform-origin: left; transition: transform 4.2s cubic-bezier(.45, 0, .25, 1); }
.fl--done.is-go .tk__bar i.is-now b { transform: scaleX(.75); }
.tk__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: -6px; font-size: 10.5px; color: var(--ink-3); }
.tk__steps .is-now { color: var(--palm); font-weight: 700; }
.tk__rider-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: #F5F7FA; }
.tk__av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px #fff; }
.tk__who { display: grid; gap: 2px; min-width: 0; margin-right: auto; }
.tk__who b { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.tk__who small { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tk__btn { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--palm); box-shadow: 0 1px 3px rgba(4, 20, 48, .12); }
.tk__btn svg { width: 16px; height: 16px; }
.tk__paid { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.tk__paid .pt-coin { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .tk__rider::before, .tk__dot { animation: none; } .tk, .tk * { transition: none !important; } }
.tk__rider { margin: 0; }
.tk__map { height: 500px; }

/* v22 · Partners hero strip: flush with the line above, 8px radius + 60% smoothing (same as Home) */
.hero--flip h1 .accent, .hero--flip h1 em.accent { background: none; padding: 0 .14em; margin: 0 0 0 -.14em; --t: .16em; --h: 1.01em; }
.hero--flip h1 .accent::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: var(--t); height: var(--h); background: var(--c); border-radius: 8px; pointer-events: none; }
@supports (-webkit-mask-box-image: none) {
  .hero--flip h1 .accent::before { border-radius: 0; -webkit-mask-box-image: url("squircle-8-60.svg") 13 fill / 13px stretch; }
}
/* Partners quote photo (India): keep his face centred in the portrait crop */
html:not([data-region="uk"]) .fq__img img.fq-in { object-position: 64% 28%; }

/* ==========================================================================
   v23 · Store search is real: empty search → type "coke" → searching → results
   ========================================================================== */
.fl--store .fl__cats, .fl--store .fl__meta { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .45s var(--e); }
.fl--store.is-shown .fl__cats, .fl--store.is-shown .fl__meta { opacity: 1; transform: none; }
.fl--store.is-shown .fl__meta { transition-delay: .05s; }
.fl__pre { position: absolute; left: 16px; right: 16px; top: 160px; transition: opacity .3s ease, transform .4s var(--e); }
.fl__pre-k { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.fl__pre-k + .fl__pre-chips, .fl__pre-k + .fl__pre-list { margin-bottom: 20px; }
.fl__pre-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fl__pre-chips > span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 10px; border-radius: 999px; background: var(--white); color: var(--ink); font-size: 12.5px; font-weight: 500; box-shadow: 0 1px 2px rgba(4, 20, 48, .06); }
.fl__pre-chips svg { width: 14px; height: 14px; color: var(--palm); }
.fl__pre-list { list-style: none; margin: 0; padding: 0; display: grid; }
.fl__pre-list li { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.fl__pre-list li:last-child { border-bottom: 0; }
.fl__pre-list svg { width: 16px; height: 16px; color: var(--ink-3); }
.fl--store.is-typing .fl__pre { opacity: .35; }
.fl--store.is-searching .fl__pre, .fl--store.is-shown .fl__pre { opacity: 0; transform: translateY(-6px); }

.fl__skel { position: absolute; left: 16px; right: 16px; top: 226px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.fl__skel i { height: 190px; border-radius: 16px; background: linear-gradient(100deg, #E9EDF3 30%, #F6F8FB 50%, #E9EDF3 70%); background-size: 300% 100%; animation: flShimmer 1.1s linear infinite; }
@keyframes flShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.fl--store.is-searching .fl__skel { opacity: 1; }
.fl__search { position: relative; }
.fl__search::after { content: ""; position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid rgba(1, 75, 170, .2); border-top-color: var(--palm); opacity: 0; animation: flSpin .7s linear infinite; transition: opacity .2s ease; }
.fl--store.is-searching .fl__search::after { opacity: 1; }


/* v24 · Nav: current page in semibold; the width is reserved for every link so nothing shifts.
   Indicator per spec: 2px tall, top corners 12px (flat bottom), flush with the link's bottom edge. */
.nav__links a { display: inline-flex; flex-direction: column; align-items: flex-start; }
.nav__links a::before { content: attr(data-label); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; user-select: none; }
.nav__links a[aria-current="page"] { font-weight: 600; }
.nav__ink { bottom: 0; height: 2px; border-radius: 12px 12px 0 0; }
.nav__ink { height: 3px; }

/* ==========================================================================
   v25 · Go-live stepper: one rail runs through the Hour pills; a blue fill
   with a glowing head glides pill to pill (smart-animate easing) and each
   step lights up as it's reached. Holds on Hour 48, rewinds, repeats.
   ========================================================================== */
.go__flow { position: relative; isolation: isolate; }
.go__list { isolation: auto; }
.go__rail { position: absolute; z-index: 1; left: 38px; top: 43px; width: calc(75% + 13.5px); height: 2px; border-radius: 2px; background: rgba(1, 75, 170, .14); pointer-events: none; }
.go__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--palm), #3F7FD6); transform-origin: left center; transform: scaleX(0);
  transition: transform 1.15s cubic-bezier(.65, 0, .35, 1); }
.go__head { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px var(--palm), 0 0 0 9px rgba(1, 75, 170, .14), 0 6px 14px rgba(1, 75, 170, .35);
  transition: left 1.15s cubic-bezier(.65, 0, .35, 1); }
.go__flow[data-step="1"] .go__fill { transform: scaleX(.33333); } .go__flow[data-step="1"] .go__head { left: 33.333%; }
.go__flow[data-step="2"] .go__fill { transform: scaleX(.66667); } .go__flow[data-step="2"] .go__head { left: 66.667%; }
.go__flow[data-step="3"] .go__fill { transform: scaleX(1); }      .go__flow[data-step="3"] .go__head { left: 100%; }
.go__flow.is-rewind .go__fill, .go__flow.is-rewind .go__head { transition-duration: .75s; }

.go__flow .go__t { z-index: 2; transition: background-color .45s ease, color .45s ease, box-shadow .45s ease; }
.go__flow[data-step] .go__t, .go__flow[data-step] .go__step:last-child .go__t { background: #E2EAF6; color: var(--palm); }
.go__flow[data-step] .go__step.is-done .go__t, .go__flow[data-step] .go__step.is-now .go__t { background: var(--palm); color: #fff; }
.go__flow[data-step] .go__step.is-now .go__t { animation: goPing 1.6s ease-out infinite; }
@keyframes goPing { 0% { box-shadow: 0 0 0 0 rgba(1, 75, 170, .35); } 100% { box-shadow: 0 0 0 10px rgba(1, 75, 170, 0); } }
.go__step { transition: border-color .5s ease 0s, box-shadow .5s ease 0s, opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.go__flow[data-step] .go__step.is-now { border-color: rgba(1, 75, 170, .32); box-shadow: 0 24px 48px -30px rgba(1, 75, 170, .6); }
@media (max-width: 1000px) { .go__rail { display: none; } }
@media (prefers-reduced-motion: reduce) { .go__fill, .go__head, .go__t { transition: none !important; animation: none !important; } }
.go__list::before { display: none; }
.go__rail { opacity: 0; transition: opacity .6s ease; }
.go__flow.is-live .go__rail { opacity: 1; }

/* ==========================================================================
   v26 · Hero card: a checkout paid with rewards (240 × 260)
   ========================================================================== */
.hk__rc { gap: 0; padding: 12px; overflow: hidden; }
/* no-anim: snap the checkout and paid sheet instantly — only used while the veil covers them */
.hk__rc.no-anim > :not(.rc__veil), .hk__rc.no-anim > :not(.rc__veil) * { transition: none !important; }
/* Veil: covers the card while one order swaps to the next — no ghosting, no pop */
.rc__veil { position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #fff; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.hk__rc.is-veil .rc__veil { opacity: 1; }
.rc__hd { display: flex; align-items: center; gap: 8px; }
.rc__logo { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; background: var(--c, var(--palm)); }
.rc__logo img { width: 16px; height: 16px; filter: invert(1); }
.rc__logo svg { width: 16px; height: 16px; }
.rc__m { display: grid; min-width: 0; line-height: 1.2; }
.rc__m b { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc__m small { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc__tag { margin-left: auto; flex-shrink: 0; padding: 3px 7px; border-radius: 999px; background: var(--tint, #EEF3FA); color: var(--palm); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.rc__row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.rc__row b { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rc__use { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px; border-radius: 12px; background: #F4F7FB; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .35s ease, background-color .35s ease; }
.rc__use .pt-coin { width: 26px; height: 26px; }
.rc__use .pt-coin svg { width: 14px; height: 14px; }
.rc__ut { display: grid; min-width: 0; line-height: 1.2; }
.rc__ut b { font-size: 12px; font-weight: 600; color: var(--ink); }
.rc__ut small { font-size: 10px; color: var(--ink-3); white-space: nowrap; }
.rc__sw { position: relative; margin-left: auto; width: 32px; height: 19px; flex-shrink: 0; border-radius: 19px; background: #CFD6E0; transition: background-color .3s ease; }
.rc__sw i { position: absolute; left: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(4, 20, 48, .3); transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.hk__rc.is-on .rc__use { background: #fff; box-shadow: 0 0 0 1.5px var(--palm), 0 8px 18px -12px rgba(1, 75, 170, .6); }
.hk__rc.is-on .rc__sw { background: var(--palm); }
.hk__rc.is-on .rc__sw i { transform: translateX(13px); }
.rc__due { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--ink); font-weight: 600; }
.rc__due b { font-size: 17px; letter-spacing: -0.02em; transition: color .3s ease; }
.hk__rc.is-ready .rc__due b { color: #1f7a45; }
.rc__btn { display: grid; place-items: center; height: 36px; margin-top: 10px; border-radius: 11px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background-color .35s ease, transform .18s ease; }
.hk__rc.is-ready .rc__btn { background: var(--palm); }
.hk__rc.is-press .rc__btn { transform: scale(.96); }
.rc__ft { display: flex; align-items: center; justify-content: center; gap: 6px; margin: auto 0 0; padding-top: 8px; font-size: 10px; color: var(--ink-3); }
.rc__ft .app__dot { width: 6px; height: 6px; }

/* Paid: a white sheet ripples out from the button, the tick draws itself */
.rc__ok { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 16px; border-radius: inherit; background: #fff; text-align: center;
  clip-path: circle(0% at 50% 82%); transition: clip-path .7s cubic-bezier(.65, 0, .35, 1), opacity .4s ease; }
.hk__rc.is-paid .rc__ok { clip-path: circle(150% at 50% 82%); }
.rc__ring { width: 54px; height: 54px; margin-bottom: 8px; color: #1f9d55; }
.rc__ring circle { stroke-dasharray: 170; stroke-dashoffset: 170; transform: rotate(-90deg); transform-origin: 32px 32px; transition: stroke-dashoffset .6s ease .3s; }
.rc__ring path { stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .4s ease .75s; }
.hk__rc.is-paid .rc__ring circle, .hk__rc.is-paid .rc__ring path { stroke-dashoffset: 0; }
.rc__ok b { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.rc__ok small { font-size: 11px; color: var(--ink-2); }
.rc__okb { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--tint, #EEF3FA); color: var(--palm); font-size: 11px; font-weight: 600; }
.rc__okb .pt-coin { width: 18px; height: 18px; }
.rc__ok b, .rc__ok small, .rc__okb { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.hk__rc.is-paid .rc__ok b { opacity: 1; transform: none; transition-delay: .55s; }
.hk__rc.is-paid .rc__ok small { opacity: 1; transform: none; transition-delay: .65s; }
.hk__rc.is-paid .rc__okb { opacity: 1; transform: none; transition-delay: .8s; }
@media (max-width: 700px) { .hk__rc { min-height: 250px; } }
@media (prefers-reduced-motion: reduce) { .hk__rc *, .rc__ok { transition: none !important; } }

/* ==========================================================================
   v26 · Colour rhythm: blue hero card → light brands → blue chat → light app steps
   ========================================================================== */
/* Brands: light, with a soft blue wash so the phone still glows */
.bw.bw--light { background: radial-gradient(60% 70% at 88% 20%, rgba(1, 75, 170, .09), transparent 70%), var(--white); color: var(--ink); }
.bw.bw--light::before { display: none; }
.bw--light h2 { color: var(--palm); }
.bw--light .link { color: var(--ink); }
.bw--light .bw__facts { border-top-color: var(--line); }
.bw--light .bw__facts li { border-bottom-color: var(--line); }
.bw--light .bw__facts b { color: var(--palm); }
.bw--light .bw__facts span { color: var(--ink-2); }
.bw--light .bw__cap { color: var(--ink-3); }
.bw--light .bw__cap b { color: var(--ink); }
.bw--light .app.ph { box-shadow: 0 0 0 9px #0b0f0e, 0 0 0 10px rgba(4, 20, 48, .12), 0 60px 90px -40px rgba(1, 36, 90, .45); }

/* Chat: the blue section now — the AI moment gets the spotlight */
.askit.on-palm { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(90% 70% at 100% 0%, rgba(42, 111, 208, .55), transparent 70%), var(--palm); color: var(--on-palm); }
.askit.on-palm .askit__live li { background: rgba(255, 255, 255, .08); border-color: var(--line-palm); color: var(--serenade); }
.askit.on-palm .chat { border-color: transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 50px 90px -40px rgba(0, 10, 30, .7); }
.askit.on-palm .chat__top { background: var(--ink); }
.bw__facts b span { font-size: inherit; color: inherit; }

/* v27 · Phones: the checkout card tucks up right under the hand holding the phone.
   The photo box is a fixed height while the image scales with the viewport, so the
   hand moves down as the screen widens; the offset follows it (≈10px below the hand). */
@media (max-width: 560px) {
  .hk .hk__rc { margin-top: clamp(-179px, calc(43.6vw - 338px), -40px); }
  html[data-region="uk"] .hk .hk__rc { margin-top: clamp(-151px, calc(66.1vw - 392px), -40px); }
}
@media (min-width: 561px) and (max-width: 700px) {
  .hk .hk__rc { margin-top: clamp(-80px, calc(43.6vw - 318px), -12px); }
  html[data-region="uk"] .hk .hk__rc { margin-top: -24px; }
}
@media (min-width: 561px) and (max-width: 700px) {
  html[data-region="uk"] .hk__media img { object-position: 50% 35%; }
  html[data-region="uk"] .hk .hk__rc { margin-top: clamp(-60px, calc(42.2vw - 292px), -12px); }
}
/* ₹0 / £0 fact: the currency sits in a region span inside <b>; keep it the same size and blue as the other facts */
.bw__facts b span, .bw--light .bw__facts b span { font-size: inherit; color: inherit; }

/* v27 · Why stats on phones: figures never shrink under their labels; the UK column fits "£5.5bn" so labels still align */
@media (max-width: 900px) {
  .why__stats > div:not(.is-text) b { flex-shrink: 0; }
  html[data-region="uk"] .why__stats > div:not(.is-text) b { min-width: 4.9ch; }
}
/* v27 · Trust stats beside the headline (≥1341px): equal columns, labels wrap onto a balanced
   second line instead of spilling into the next stat */
@media (min-width: 1341px) {
  .trust__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
  .trust__stats dd { white-space: normal; text-wrap: balance; }
}
/* Mobile-only line break inside a headline */
.br-m { display: none; }
@media (max-width: 700px) { .br-m { display: inline; } }

/* v28 · Customers checkout phone: navy veil between loops (replaces the is-fading crossfade) */
.kp.no-anim > :not(.kp__veil), .kp.no-anim > :not(.kp__veil) * { transition: none !important; }
.kp__veil { position: absolute; inset: 0; z-index: 4; border-radius: inherit; background: #0c1f3d; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.kp.is-veil .kp__veil { opacity: 1; }

/* v29 · Go-live steps: progress lives inside each card (a bar along its bottom edge that fills
   step by step) — no line crossing the gaps between cards. Works the same on phones. */
.go__rail { display: none !important; }
.go__step { overflow: hidden; background: linear-gradient(#E2EAF6, #E2EAF6) left bottom / 100% 4px no-repeat, var(--white); }
.go__step::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--palm), #3F7FD6);
  transform: scaleX(0); transform-origin: left center; transition: transform .45s ease; }
.go__flow[data-step] .go__step.is-done::before { transform: scaleX(1); }
.go__flow[data-step] .go__step.is-now::before { transform: scaleX(1); transition: transform 1.4s cubic-bezier(.45, 0, .55, 1); }
.go__flow.is-rewind .go__step::before { transition: transform .5s ease; }
@media (prefers-reduced-motion: reduce) { .go__step::before { transition: none !important; } }

/* ==========================================================================
   v30 · Partners "Your users / Plus theirs": your brand at the hub of the network,
   customers flowing in from banks, cards, employers, wallets, telcos and airlines
   ========================================================================== */
.net { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1; margin: 0 auto; border-radius: var(--r-xl); overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(1, 75, 170, .07) 0 21%, transparent 21.3%),
              radial-gradient(circle at 50% 50%, transparent 0 37.7%, rgba(1, 75, 170, .12) 37.9% 38.3%, transparent 38.5%), var(--white);
  border: 1px solid var(--line); box-shadow: 0 40px 70px -48px rgba(4, 20, 48, .45); }
.net__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.net__ln { fill: none; stroke: rgba(1, 75, 170, .16); stroke-width: .45; }
.net__flow { fill: none; stroke: var(--palm); stroke-width: .75; stroke-linecap: round; stroke-dasharray: 1 4; animation: netFlow 1.4s linear infinite; }
@keyframes netFlow { to { stroke-dashoffset: -5; } }
.net__hub { position: absolute; left: 50%; top: 50%; width: 31%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  display: grid; place-content: center; justify-items: center; gap: 3px; text-align: center; color: #fff;
  background: linear-gradient(160deg, #2468c9, var(--palm)); box-shadow: 0 0 0 10px rgba(1, 75, 170, .08), 0 26px 44px -20px rgba(1, 75, 170, .75); }
.net__hub::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(1, 75, 170, .28); animation: netPulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes netPulse { 0% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1.32); opacity: 0; } }
.net__hub svg { width: 30%; height: auto; margin-bottom: 4px; }
.net__hub b { font-family: var(--f-display); font-size: clamp(14px, 1.5vw, 18px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.net__hub small { font-size: clamp(10.5px, 1vw, 12.5px); opacity: .82; }
.net__n { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 7px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 10px 22px -16px rgba(4, 20, 48, .55);
  font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.net__n i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--palm); }
.net__n svg { width: 16px; height: 16px; }
.net__cap { margin: 16px auto 0; max-width: 540px; text-align: center; font-size: 14px; color: var(--ink-3); }
@media (max-width: 560px) { .net__n { font-size: 12px; gap: 6px; padding: 5px 10px 5px 5px; } .net__n i { width: 24px; height: 24px; } .net__n svg { width: 13px; height: 13px; } }
@media (prefers-reduced-motion: reduce) { .net__flow, .net__hub::after { animation: none; } }

/* v30 · Customers brand cards: no status tags, bigger logos */
.uc__list li { grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto; align-items: center; column-gap: 14px; padding: 11px 0; font-size: 15px; }
.uc__list li .at__ic { grid-row: auto; width: 52px; height: 52px; border-radius: 15px; }
.uc__list li .at__ic--svg img { width: 26px; height: 26px; }
.uc__list li > span:not(.at__ic) { grid-column: 2; align-self: center; }
/* v30 · Partners hero (India) on phones/tablets: frame the photo so his face sits between the two cards */
@media (max-width: 980px) { html:not([data-region="uk"]) #pt-img { object-position: 50% 0%; } }

/* ==========================================================================
   v31 · Brands phone: the shop is the home screen — grocery categories and cold
   drinks right there, every price in points. Checkout is points only.
   ========================================================================== */
.fl__bal--sm { margin-top: 12px; padding: 12px 16px; }
.fl__bal--sm .fl__bal-v b { font-size: 24px; }
.fl__grp { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 2px 8px; font-size: 13.5px; }
.fl__grp b { font-weight: 600; color: var(--ink); }
.fl__grp small { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); }
.fl__grp .app__dot { width: 6px; height: 6px; }
.fl__cats2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fl__cats2 li { display: grid; justify-items: center; gap: 5px; text-align: center; font-size: 10.5px; font-weight: 500; line-height: 1.2; color: var(--ink-2); }
.fl__cats2 img { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; display: block; box-shadow: 0 1px 2px rgba(4, 20, 48, .08); }
.fl--home .fl__p { opacity: 1; transform: none; }
.fl--home .fl__p-img { height: 78px; }
.fl--home .fl__p-img img { height: 66px; }
.fl__p-row em { white-space: nowrap; }
.fl__wallet { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border-radius: 16px; background: var(--white); box-shadow: 0 0 0 1.5px var(--palm), 0 10px 22px -14px rgba(1, 75, 170, .6); }
.fl__wallet .pt-coin { width: 34px; height: 34px; }
.fl__wallet .pt-coin svg { width: 17px; height: 17px; }
.fl__wal { margin-left: auto; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--palm); font-variant-numeric: tabular-nums; }
.fl__wallet .fl__ttl small { white-space: normal; }

/* ==========================================================================
   v31 · AI chat as a real phone screen, with a product in the answer
   ========================================================================== */
.chat.chat--ph, .askit.on-palm .chat.chat--ph { position: relative; display: flex; flex-direction: column; width: 324px; max-width: none; height: 660px; border: 0; border-radius: 48px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 9px #0b0f0e, 0 0 0 10px rgba(255, 255, 255, .16), 0 60px 100px -40px rgba(0, 10, 30, .75); }
.chat--ph::after { content: ""; position: absolute; left: 50%; bottom: 9px; width: 112px; height: 4px; margin-left: -56px; border-radius: 4px; background: rgba(4, 20, 48, .82); }
.chat__status { position: relative; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; height: 40px; padding: 12px 28px 0; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; }
.chat__status i { position: absolute; left: 50%; top: 9px; width: 88px; height: 24px; margin-left: -44px; border-radius: 20px; background: #0b0f0e; }
.chat__status .app__sig b { background: #fff; }
.chat--ph .chat__top { flex-shrink: 0; padding-top: 10px; }
.chat--ph .chat__body { flex: 1; min-height: 0; overflow: hidden; padding: 16px 14px; }
.chat--ph .chat__input { flex-shrink: 0; margin: 0 14px 28px; }
.chat .msg--card { display: flex; align-items: center; gap: 10px; max-width: 92%; padding: 8px 12px 8px 8px; border-radius: 18px; border: 1px solid var(--line); border-bottom-left-radius: 6px; background: #fff; box-shadow: 0 8px 20px -14px rgba(4, 20, 48, .4); }
.msg__img { width: 64px; height: 64px; flex-shrink: 0; border-radius: 12px; object-fit: cover; }
.msg__pd { display: grid; gap: 2px; min-width: 0; line-height: 1.25; }
.msg__pd b { font-size: 14px; font-weight: 600; color: var(--ink); }
.msg__pd small { font-size: 11.5px; color: var(--ink-3); }
.msg__pts { justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--tint); color: var(--palm); font-size: 12px; font-weight: 700; }
.msg__pts .pt-coin { width: 18px; height: 18px; }
.msg__pts .pt-coin svg { width: 10px; height: 10px; }
@media (max-width: 900px) { .chat.chat--ph { justify-self: center; width: 324px; } }
@media (max-width: 370px) { .chat.chat--ph { zoom: .9; } }

/* v32 · Home: the brands section sits on the same cream as the hero */
.bw.bw--light { background: none; }
/* v32 · Partners hero: a big-audience crowd, framed on the people */
#pt-img { object-position: 50% 62%; }
@media (max-width: 980px) { html:not([data-region="uk"]) #pt-img, #pt-img { object-position: 50% 60%; } }
/* v32 · Chat phone: no light rim, no seam under the status bar, no halo round the live dot */
.chat.chat--ph, .askit.on-palm .chat.chat--ph {
  background: linear-gradient(180deg, var(--ink) 0 50%, #fff 50%);
  box-shadow: 0 0 0 9px #0b0f0e, 0 60px 100px -40px rgba(0, 10, 30, .75); }
.chat--ph .chat__status { box-shadow: 0 1px 0 var(--ink); }
.chat--ph .chat__top { box-shadow: 0 -1px 0 var(--ink); }
.chat--ph .chat__body { background: #fff; }
.chat.chat--ph.is-live .chat__top small i { animation: liveDot 1.2s ease-in-out infinite; box-shadow: none; }
@keyframes liveDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
html[data-region="uk"] #pt-img { object-position: 50% 76%; }
/* v32 · Headline accents line up with the line above (the highlight bleeds left, the text doesn't move) */
h1 br + em.accent, h2 br + em.accent, h3 br + em.accent { margin-left: -.12em; }
@media (min-width: 701px) { h1 br.br-m + em.accent, h2 br.br-m + em.accent { margin-left: -.04em; } }
.on-palm h1 br + em.accent, .on-palm h2 br + em.accent, .on-palm h3 br + em.accent { margin-left: 0; }
.final h2 em.accent { padding: 0; margin: 0; }
/* v32 · Customers checkout: "Points left" is a readout, not a choice — no tick */
.kp [data-kp-cash] .kp__chk { visibility: hidden; }

/* v33 · Trust stats: their own full-width row under the headline, evenly spaced with hairline dividers */
.trust__in { flex-direction: column; align-items: stretch; gap: clamp(32px, 4vw, 48px); }
.trust__stats { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; row-gap: 32px; text-align: left;
  padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.trust__stats > div { min-width: 0; padding: 0 clamp(16px, 2.6vw, 36px); border-left: 1px solid var(--line); }
.trust__stats > div:first-child { padding-left: 0; border-left: 0; }
.trust__stats dt { white-space: nowrap; font-size: clamp(2rem, 3.4vw, 3rem); }
.trust__stats dd { margin-top: 12px; white-space: normal; max-width: 14em; text-wrap: balance; }
@media (max-width: 600px) {
  .trust__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
/* v33 · Home partner photo (India): keep his face clear of the order card */
html:not([data-region="uk"]) .ph-partner { object-position: 50% 20%; }
/* v33 · Customers checkout: real item names */
.kp__nm { min-width: 0; display: grid; gap: 2px; }
.kp__nm b { font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp__nm small { font-size: 11.5px; color: rgba(242, 247, 249, .6); white-space: nowrap; }

/* v34 · Partners hero (India): corporate event, framed from the top so both presenters sit clear of the cards */
html:not([data-region="uk"]) #pt-img { object-position: 50% 4%; }

/* v35 · Points readouts never break mid-number on phones */
.calc__basket .v, .stepper__val [data-points] { white-space: nowrap; }
.calc__basket .v { flex-shrink: 0; }
@media (max-width: 480px) {
  .stepper__val { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .stepper__val small { display: block; margin: 6px 0 0; }
  .calc__basket .v { font-size: 1.35rem; }
}

/* v36 · Home hero: category line under the lede */
.hk__cats { margin: 14px 0 0; font-size: 15px; font-weight: 600; letter-spacing: .01em; opacity: .92; }
/* v36 · Launch steps: five cards (no timeline claims) */
.go__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.go__step { padding: 24px 20px 26px; }
@media (max-width: 1100px) { .go__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .go__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .go__list > li:last-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .go__list { grid-template-columns: 1fr; } }
.hk__cats { color: #fff; opacity: .86; }

/* v38 · "Why it matters" on Royal Blue, matching the AI chat band */
.why.on-palm { position: relative; overflow: hidden; isolation: isolate; color: var(--on-palm);
  background: radial-gradient(80% 70% at 0% 0%, rgba(42, 111, 208, .5), transparent 70%), var(--palm); }
.why.on-palm .why__stats { border-top-color: var(--line-palm); }
.why.on-palm .why__stats > div + div { border-left-color: var(--line-palm); }
.why.on-palm .why__stats b { color: var(--on-palm); }
.why.on-palm .why__stats > div.is-text b { color: var(--lime); }
.why.on-palm .why__stats span { color: var(--on-palm-2); }
.why.on-palm .why__src { color: rgba(211, 222, 240, .72); }
.why.on-palm .why__card { background: rgba(255, 255, 255, .06); border-color: var(--line-palm); }
.why.on-palm .why__ic { background: rgba(207, 224, 246, .14); color: var(--lime); }
.why.on-palm .why__card h3 { color: var(--on-palm); }
.why.on-palm .why__card p { color: var(--on-palm-2); }
@media (max-width: 900px) {
  .why.on-palm .why__stats > div, .why.on-palm .why__stats > div + div { border-top-color: var(--line-palm); }
}
@media (min-width: 901px) { .why .head > div:first-child { flex-shrink: 0; } .why .head .lede { flex: 1 1 auto; min-width: 0; } }
.on-palm h1 em.accent, .on-palm h2 em.accent, .on-palm h3 em.accent { margin-right: 0; }

/* v40 · Partners hero: the highlighted line always stays on one line */
.hero--flip h1 em.accent { white-space: nowrap; }
@media (max-width: 480px) { .hero.hero--flip:not(.hero--k) .display { font-size: clamp(1.7rem, 9.4vw, 2.6rem); } }

/* v41 · Home hero: two sentences, two tones — four lines, sized to fit */
.hk .display { font-size: clamp(2.2rem, 3.5vw, 3.2rem); }
.hk h1 .h1l--b { color: var(--lime); }
.hk h1 .h1l--b em.accent { margin-left: .04em; white-space: nowrap; }
.hk h1 .h1l { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1300px) { .hk .display { font-size: clamp(2.2rem, 3.4vw, 3.2rem); } }
@media (max-width: 560px) { .hk .display { font-size: clamp(1.5rem, 7.5vw, 2.3rem); } }

/* v44 · Chat product card: a Coke can cut-out on a soft tile */
.msg__img--can { object-fit: contain; padding: 6px; background: radial-gradient(circle at 50% 60%, #fff, #fde7e7); }
/* v44 · Home brands photo: owner sits right of the "New order" card, face clear */
html .ph-partner, html[data-region] .ph-partner { object-position: 14% 30%; }
/* v44 · Partners hero: manager right of the Settlement card on desktop, left of it on phones/tablets */
html #pt-img, html[data-region] #pt-img { object-position: 22% 30%; }
@media (max-width: 980px) { html #pt-img, html[data-region] #pt-img { object-position: 90% 30%; } }

/* v45 · Home hero: two-line headline, sized back up */
.hk .display { font-size: clamp(2.4rem, 4.1vw, 3.7rem); }
@media (min-width: 1101px) and (max-width: 1300px) { .hk .display { font-size: clamp(2.4rem, 4vw, 3.9rem); } }
@media (max-width: 560px) { .hk .display { font-size: clamp(1.9rem, 11.6vw, 3.4rem); line-height: 1; } }
.hk .hk__cats { margin-top: 12px; }

/* v47 · Mobile audit fixes */
/* facts: the label column fits its words at every width */
.bw__facts li { grid-template-columns: 160px 1fr; }
@media (max-width: 420px) { .bw__facts li { grid-template-columns: 128px 1fr; gap: 14px; } .bw__facts b { font-size: 20px; } }
@media (max-width: 360px) { .bw__facts li { grid-template-columns: 1fr; gap: 4px; } }
/* comfortable tap areas: links and the logo get an invisible 44px hit zone, layout unchanged */
.link { position: relative; }
.link::before { content: ""; position: absolute; inset: -9px -6px; }
.nav .brand { position: relative; }
.nav .brand::before { content: ""; position: absolute; inset: -8px -6px; }
.modes button { min-height: 40px; }
/* readable hub label */
.net__hub small { font-size: clamp(12px, 1vw, 12.5px); }
/* never split a hyphenated word across lines */
.nw { white-space: nowrap; }
/* network hub: the label always fits inside the circle */
.net__hub small { display: block; max-width: 84%; margin: 0 auto; line-height: 1.15; text-align: center; }
@media (max-width: 600px) { .net__hub { width: 37%; } .net__hub b { font-size: 14px; } }
/* small phones (≤400px): checkout phone rows never overlap or clip */
.kp__nm small { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) {
  .kp__items li { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; }
  .kp__items img { width: 38px; height: 38px; border-radius: 10px; }
  .kp__items em { font-size: 13px; }
  .kp__pay { padding: 4px 10px; }
  .kp__opt { gap: 8px; grid-template-columns: 20px minmax(0, 1fr) auto; }
  .kp__name { font-size: 13px; gap: 6px; }
  .kp__meta b { min-width: 0; font-size: 14px; }
  .kp__meta small { font-size: 10.5px; }
  /* live brand feed: the change pill drops under the text */
  .feed__list li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; padding: 14px 16px; }
  .feed__list img { width: 40px; height: 40px; grid-row: span 2; }
  .feed__chg { grid-column: 2; justify-self: start; }
}
/* network diagram on phones: compact pills, pulled in from the edges and away from the hub */
@media (max-width: 560px) {
  .net__n { font-size: 11px; padding: 4px 9px; gap: 0; }
  .net__n i { display: none; }
  .net__n[style*="--x:17%"] { left: 23%; }
  .net__n[style*="--x:83%"] { left: 77%; }
  .net__n[style*="--y:31%"] { top: 27%; }
  .net__n[style*="--y:69%"] { top: 73%; }
}
@media (max-width: 400px) { .net__hub { width: 34%; } }
/* network diagram in the narrower two-column layout (tablets / small laptops) */
@media (min-width: 561px) and (max-width: 1240px) {
  .net__n { font-size: 12.5px; }
  .net__n[style*="--x:17%"] { left: 24%; }
  .net__n[style*="--x:83%"] { left: 76%; }
  .net__n[style*="--y:31%"] { top: 27%; }
  .net__n[style*="--y:69%"] { top: 73%; }
}
/* Businesses hero on phones: both cards sit along the bottom edge so neither covers a face */
@media (max-width: 600px) {
  .hero__media:has(#bz-img) .receipt--light { top: auto; bottom: var(--inset, 12px); right: var(--inset, 12px); }
}
@media (max-width: 380px) { .hero__media .receipt { padding: 11px 12px; } .hero__media .receipt__lbl { font-size: 10.5px; letter-spacing: .01em; } .hero__media .receipt__val { font-size: 1.5rem; } }
@media (max-width: 360px) { .kp__name--pts .pt-coin { display: none; } }
/* phone menu fills the screen under the header, so the page never shows through */
@media (max-width: 1080px) { .nav__sheet { bottom: 0; overflow-y: auto; overscroll-behavior: contain; } }

/* v48 · Brands section: category chips under the facts */
.bw__catk { margin: 4px 0 14px; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--palm); }
.wk2__chips.bw__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin: 0 0 28px; }
.wk2__chips.bw__cats li { font-size: 15px; }
@media (max-width: 360px) { .wk2__chips.bw__cats { grid-template-columns: 1fr; } }
/* v48 · "Make it yours" rules + theme mockup */
.mini__kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.mini__kv b { font-size: 13px; color: var(--ink); font-weight: 600; }
.mini__kv b.is-on { color: #1f6e40; background: #e3f3e8; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; }
.mini__theme { display: flex; justify-content: space-between; align-items: center; padding: 13px 2px 0; font-size: 12.5px; color: var(--ink-3); }
.mini__sw { display: inline-flex; gap: 6px; }
.mini__sw i { width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line-2); }
.mini__sw i:first-child { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--palm); }
.bw__facts li { grid-template-columns: 184px 1fr; }
@media (max-width: 420px) { .bw__facts li { grid-template-columns: 148px 1fr; } }
@media (min-width: 561px) and (max-width: 1100px) { .hk .display { font-size: clamp(3.4rem, 8vw, 4.6rem); line-height: 1; } }
/* chat header: name and status sit tight together */
.chat__top b { line-height: 1.15; }
.chat__top small { display: flex; line-height: 1.1; margin-top: 1px; }

/* v57 · Category chips (title only): compact, even padding on every side */
.wk2__chips.bw__cats { gap: 10px; }
.wk2__chips.bw__cats li { padding: 6px 18px 6px 6px; gap: 12px; border-radius: 999px; min-height: 0; font-size: 15.5px; font-weight: 600; line-height: 1.2; }
.wk2__chips.bw__cats .wk2__ic--img { width: 40px; height: 40px; box-shadow: none; }
@media (max-width: 560px) { .wk2__chips.bw__cats li { font-size: 14px; padding: 5px 14px 5px 5px; gap: 10px; } .wk2__chips.bw__cats .wk2__ic--img { width: 36px; height: 36px; } }
/* v58 · hero without the note: pill at top, copy block centred in the remaining space */
@media (min-width: 1101px) {
  .hk .hk__copy .pills { margin-bottom: 0; }
  .hk .hk__copy .display { margin-top: auto; }
  .hk .hk__copy .btn-row { margin-bottom: auto; }
}

/* v59 · "Make it yours" on phones/tablets: each step is one card (mockup + its text), clearly separated */
@media (max-width: 900px) {
  .story__row { gap: 20px; }
  .story__step { padding: 14px 14px 22px; border-radius: 28px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 24px 40px -34px rgba(1, 36, 90, .45); }
  .story__step .mini { max-width: none; border-radius: 20px; box-shadow: none; margin-bottom: 18px; background: var(--tint); }
  .story__step .story__n, .story__step h3, .story__step p { padding: 0 6px; }
}
@media (max-width: 900px) { .story__step .mini--rules { height: auto; padding-bottom: 18px; } }
/* category chips hug their label: no empty space on the right */
.wk2__chips.bw__cats { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; }
.wk2__chips.bw__cats li { width: auto; flex: 0 0 auto; padding-right: 20px; }
@media (max-width: 560px) { .wk2__chips.bw__cats li { padding-right: 16px; } }
/* tighter gap between the brands section and "Make it yours" */
#brands.sec { padding-bottom: clamp(24px, 3vw, 48px); }
.sec.story { padding-top: clamp(32px, 4vw, 64px); }
/* brands phone: soft shadow that never gets cut at the section edge; a little more breathing room */
.bw--light .app.ph { box-shadow: 0 0 0 9px #0b0f0e, 0 0 0 10px rgba(4, 20, 48, .12), 0 28px 50px -30px rgba(1, 36, 90, .28); }
.bw--light .bw__glow { display: none; }
#brands.sec { padding-bottom: clamp(48px, 5vw, 80px); }
.sec.story { padding-top: clamp(40px, 5vw, 80px); }
/* phones: category chips in an even 2 × 2 grid */
@media (max-width: 560px) {
  .wk2__chips.bw__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wk2__chips.bw__cats li { width: 100%; min-height: 50px; padding: 6px 12px 6px 6px; gap: 10px; font-size: 13.5px; line-height: 1.2; border-radius: 999px; }
  .wk2__chips.bw__cats .wk2__ic--img { width: 36px; height: 36px; }
}

/* v64 · Customers "Ask, confirm, done": a step turns into a tick once it's done */
.hw__list li .n { position: relative; }
.hw__list li.is-done .n { font-size: 0; color: transparent; }
.hw__list li.is-done .n svg { display: none; }
.hw__list li.is-done .n::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfe0f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 14L8.5 17.5L19 6.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
/* v64 · Partners data bridge on phones: straight vertical dashes, lock upright */
@media (max-width: 860px) {
  .bridge { height: 96px; }
  .bridge svg { transform: none; width: 2px; height: 96px; }
  .bridge::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 0; border-left: 2px dashed rgba(1, 75, 170, .45); }
  .bridge > svg { display: none; }
  .bridge .lock svg { transform: none; display: block; width: 24px; height: 24px; }
}
/* v64 · centred headlines: both lines share one centre */
.head--center h2 br + em.accent, .head--center h2 em.accent { margin-left: 0; margin-right: 0; }
/* v64 · Customers final card headline: lines no longer crowd each other */
.ask__card h2 { line-height: 1.08; }
.ask__card h2 em.accent { display: inline-block; margin: 8px 0 0 -.12em; }
.head--center > h2, .head--center > .lede, .head--center > p { margin-left: auto; margin-right: auto; }
/* mini mockup filter chips: blue outline */
.mini__chips span:not(.is-on) { background: transparent; color: var(--palm); box-shadow: inset 0 0 0 1.25px var(--palm); font-weight: 500; }
.mini .mini__acct + .mini__tile + .mini__theme, .mini__tile + .mini__theme { padding-top: 14px; }

/* v69 · "Make it yours" mockups: controls, theme picker, go-live */
.mini__ctl { padding: 10px 2px 12px; border-bottom: 1px solid var(--line); }
.mini__ctl-k { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink-3); }
.mini__ctl-k b { font-size: 13px; color: var(--ink); font-weight: 600; }
.mini__slider { position: relative; height: 6px; margin: 12px 4px 2px; border-radius: 6px; background: #e2eaf6; }
.mini__slider i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 6px; background: var(--palm); }
.mini__slider i::after { content: ""; position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--palm), 0 2px 6px rgba(1, 36, 90, .3); }
.mini__pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.mini__pick span { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; color: var(--palm); box-shadow: inset 0 0 0 1.25px var(--line-2); }
.mini__pick span.is-on { background: var(--palm); color: #fff; box-shadow: none; }
.mini__tg { width: 34px; height: 20px; border-radius: 999px; background: #d5dbe6; position: relative; flex-shrink: 0; }
.mini__tg i { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.mini__tg.is-on { background: var(--palm); }
.mini__tg.is-on i { left: 16px; }
.mini--rules .mini__kv { padding: 10px 2px; }
.mini__sw--top { gap: 5px; }
.mini__sw--top i { width: 22px; height: 22px; }
.mini__bar .mini__sw--top { margin-left: auto; }
.mini__step { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); }
.mini__step small { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-3); margin-top: 1px; }
.mini__ok { width: 22px; height: 22px; border-radius: 50%; background: #e3f3e8; color: #1f6e40; display: grid; place-items: center; flex-shrink: 0; }
.mini__ok svg { width: 12px; height: 12px; }
.mini__go { margin-top: 16px; height: 42px; border-radius: 999px; background: var(--palm); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 700; letter-spacing: -.01em; box-shadow: 0 10px 20px -12px rgba(1, 75, 170, .8); animation: goPulse 2.4s ease-in-out infinite; }
@keyframes goPulse { 0%, 100% { box-shadow: 0 10px 20px -12px rgba(1, 75, 170, .8), 0 0 0 0 rgba(1, 75, 170, .28); } 50% { box-shadow: 0 10px 20px -12px rgba(1, 75, 170, .8), 0 0 0 7px rgba(1, 75, 170, 0); } }
@media (prefers-reduced-motion: reduce) { .mini__go { animation: none; } }
@media (max-width: 900px) { .story__step .mini--launch { height: auto; padding-bottom: 18px; } }
.mini__sw--top { gap: 10px; }
.mini__sw--top i { width: 20px; height: 20px; }
.mini__themebox { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: var(--serenade); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.mini__sw--lg { gap: 12px; }
.mini__sw--lg i { width: 22px; height: 22px; }
.mini__tile + .mini__themebox { margin-top: 18px; }
/* category chips: rounded-square photos, clearer on phones */
.wk2__chips.bw__cats li { border-radius: 16px; }
.wk2__chips.bw__cats .wk2__ic--img { border-radius: 10px; }
/* phones: bigger, clearer category photos */
@media (max-width: 560px) {
  .wk2__chips.bw__cats li { padding: 6px 10px 6px 6px; min-height: 60px; gap: 10px; }
  .wk2__chips.bw__cats .wk2__ic--img { width: 48px; height: 48px; border-radius: 12px; }
}
/* theme row first in the "Your app" mockup */
.mini__bar + .mini__themebox { margin: 0 0 12px; }
.mini__themebox + .mini__acct { margin-top: 0; }
/* chat header: a little room between name and status */
.chat__top small { margin-top: 4px; }

/* v76 · Demo request modal */
.drm { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; }
.drm[hidden] { display: none; }
.drm__scrim { position: absolute; inset: 0; background: rgba(8, 22, 48, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s ease; }
.drm__card { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 32px 28px 28px; border-radius: 28px; background: var(--serenade); box-shadow: 0 40px 80px -30px rgba(1, 20, 60, .55);
  opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.drm.is-open .drm__scrim { opacity: 1; }
.drm.is-open .drm__card { opacity: 1; transform: none; }
.drm__x { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--white); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.drm__x svg { width: 18px; height: 18px; }
.drm h2 { margin: 8px 0 6px; font-size: clamp(1.6rem, 4vw, 2rem); color: var(--palm); }
.drm__sub { margin: 0 0 22px; color: var(--ink-2); }
.drm__f { display: block; margin-bottom: 14px; }
.drm__f span { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.drm__f input { width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--white); font: 500 16px var(--f-body); color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s; }
.drm__f input:focus { border-color: var(--palm); box-shadow: 0 0 0 4px rgba(1, 75, 170, .12); }
.drm__submit { width: 100%; justify-content: center; margin-top: 8px; }
.drm__submit:disabled { opacity: .7; }
.drm__hp { position: absolute; left: -9999px; }
.drm__ok { text-align: center; padding: 12px 0 4px; }
.drm__ok .btn { margin-top: 4px; }
.drm__tick { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: #e3f3e8; color: #1f6e40; display: grid; place-items: center; }
.drm__tick svg { width: 30px; height: 30px; }
/* v76 · Glare sweep on the demo buttons */
.btn--glare { position: relative; overflow: hidden; isolation: isolate; }
.btn--glare::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent); transform: skewX(-20deg); animation: glare 3.6s ease-in-out infinite; }
.hk .btn--glare::after, .mission .btn--glare::after { background: linear-gradient(100deg, transparent, rgba(1, 75, 170, .22), transparent); }
@keyframes glare { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .btn--glare::after { animation: none; display: none; } }
.drm__submit { white-space: nowrap; } @media (max-width: 380px) { .drm__card { padding: 26px 20px 22px; } }
/* modal scrim: the page stays visible behind a dark dim, no blur */
.drm__scrim { background: rgba(4, 12, 28, .62); backdrop-filter: none; -webkit-backdrop-filter: none; }
.drm .btn--glare::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); }
.drm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.drm__f select { width: 100%; height: 50px; padding: 0 40px 0 16px; border-radius: 14px; border: 1px solid var(--line-2); font: 500 16px var(--f-body); color: var(--ink); outline: none; -webkit-appearance: none; appearance: none;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23014baa' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; }
.drm__f select:focus { border-color: var(--palm); box-shadow: 0 0 0 4px rgba(1, 75, 170, .12); }
.drm__f input[type=date] { -webkit-appearance: none; appearance: none; min-width: 0; }
@media (max-width: 380px) { .drm__row { grid-template-columns: 1fr; gap: 0; } }
.drm__scrim { background: rgba(2, 8, 20, .78); }

/* v80 · Demo form: chip-style date and time pickers */
.drm__pick > span:first-child, .drm__tl { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.drm__dates { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.drm__dates::-webkit-scrollbar { display: none; }
.drm__dates button { flex: 0 0 auto; width: 58px; padding: 8px 0; border-radius: 16px; border: 1px solid var(--line-2); background: var(--white); color: var(--ink); display: grid; gap: 1px; justify-items: center; cursor: pointer; scroll-snap-align: start; transition: background-color .2s, border-color .2s, color .2s; }
.drm__dates button b { font-size: 18px; font-weight: 700; line-height: 1.1; }
.drm__dates button small, .drm__times button small { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.drm__times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.drm__times button { height: 52px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--white); color: var(--ink); display: grid; place-content: center; gap: 0; line-height: 1.15; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.drm__times button b { font-size: 15px; font-weight: 600; }
.drm__dates button:hover, .drm__times button:hover { border-color: var(--palm); }
.drm__dates button[aria-checked="true"], .drm__times button[aria-checked="true"] { background: var(--palm); border-color: var(--palm); color: #fff; }
.drm__dates button[aria-checked="true"] small, .drm__times button[aria-checked="true"] small { color: rgba(255, 255, 255, .78); }
.drm__tz { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--white); border: 1px solid var(--line-2); }
.drm__tz button { border: 0; background: transparent; padding: 4px 10px; border-radius: 999px; font: 600 11.5px var(--f-body); color: var(--ink-2); cursor: pointer; }
.drm__tz button[aria-pressed="true"] { background: var(--palm); color: #fff; }
.drm__err { margin: 8px 0 0; font-size: 13px; color: #c0392b; }
@media (max-width: 380px) { .drm__times { grid-template-columns: repeat(3, 1fr); } }

/* v81 · Customers hero: no blue glow, plain cream */
.cx { background: var(--serenade); }
/* v81 · Customers "Ask, confirm, done" on Royal Blue */
.hw.on-palm { background: radial-gradient(80% 70% at 100% 0%, rgba(42, 111, 208, .5), transparent 70%), var(--palm); color: var(--on-palm); }
.hw.on-palm .hw__list b { color: rgba(251, 250, 240, .7); }
.hw.on-palm .hw__list small { color: var(--on-palm-2); }
.hw.on-palm .hw__list .n { background: rgba(255, 255, 255, .1); color: var(--on-palm); }
.hw.on-palm .hw__list li.is-done b, .hw.on-palm .hw__list li.is-on b { color: var(--on-palm); }
.hw.on-palm .hw__list li.is-done .n { background: rgba(207, 224, 246, .22); }
.hw.on-palm .hw__list li.is-on { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--line-palm); }
.hw.on-palm .hw__list li.is-on b { color: #fff; }
.hw.on-palm .hw__list li.is-on .n { background: var(--lime); color: var(--palm); }
.hw.on-palm .hw__stage { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-palm); }
/* "+N more" markets pill */
.market--more { padding: 6px 16px; min-height: 46px; background: var(--tint); border-color: var(--line-2); color: var(--palm); font-weight: 600; }

/* ===== Logo pack (2026-10-16): lockup replaces ring + wordmark ===== */
.brand__logo { display: block; height: 31px; width: auto; }
.foot .brand__logo { height: 34px; }
.app__logo { display: block; height: 19px; width: auto; }
.chat__logo img { width: 24px; height: auto; display: block; }
@media (max-width: 380px) { .nav .brand__logo { height: 27px; } }

/* ===== QA pass (2026-10-16): mobile legibility + tap targets ===== */
@media (max-width: 700px) {
  .foot ul { gap: 2px; }
  .foot ul a { display: inline-block; padding: 7px 0; }
  .rc__m small, .rc__ut small, .rc__ft { font-size: 11px; }
  .net__n { font-size: 11.5px; }
  .uc__k { font-size: 12px; }
}
@media (max-width: 380px) { .hero__media .receipt__lbl { font-size: 11px; } }
.foot__track img { display: block; height: .82em; width: auto; opacity: .16; }
.foot__track span::after { opacity: .5; }
@media (min-width: 701px) { .wk2__chips.bw__cats { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 10px; } .wk2__chips.bw__cats li { width: 100%; } }
@media (min-width: 901px) { #uses-h .accent { white-space: nowrap; } .head:has(#uses-h) > div { flex-shrink: 0; } }
.mini > .mini__kv:last-child { border-bottom: 0; padding-bottom: 0; }

/* Hero rotating word: pure white */
.hk .rot__w { color: #fff; }

/* ===== Launch checklist ticks (Hugeicons Tick 02): solid brand circle, white tick drawn in sequence ===== */
.mini__ok { width: 22px; height: 22px; background: var(--palm); color: #fff; box-shadow: 0 2px 6px -2px rgba(1, 75, 170, .45); }
.mini__ok svg { width: 13px; height: 13px; stroke-width: 2.6; }
.mini--launch .mini__ok { transform: scale(.6); opacity: 0; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease; }
.mini--launch .mini__ok path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .4s ease .15s; }
.story__step.is-in .mini--launch .mini__ok { transform: none; opacity: 1; }
.story__step.is-in .mini--launch .mini__ok path { stroke-dashoffset: 0; }
.mini--launch .mini__step:nth-of-type(2) .mini__ok, .mini--launch .mini__step:nth-of-type(2) .mini__ok path { transition-delay: .25s; }
.mini--launch .mini__step:nth-of-type(3) .mini__ok, .mini--launch .mini__step:nth-of-type(3) .mini__ok path { transition-delay: .6s; }
.mini--launch .mini__step:nth-of-type(4) .mini__ok, .mini--launch .mini__step:nth-of-type(4) .mini__ok path { transition-delay: .95s; }
@media (prefers-reduced-motion: reduce) { .mini--launch .mini__ok, .mini--launch .mini__ok path { transition: none; transform: none; opacity: 1; stroke-dashoffset: 0; } }
.foot__track span::after { display: none; }
.foot__track span { margin-right: .5em; }
.story__step h3 { color: #111418; }
.pv__ic svg path, .pv__ic svg ellipse, .pv__ic svg circle, .why__ic svg path, .why__ic svg circle { stroke: currentColor; }

/* ===== Intro (2026-10-16): logo drop + wordmark sweep, curtain lift, hero settles. Once per visit. ===== */
.intro { display: none; }
html.is-intro body { overflow: hidden; }
html.is-intro .intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 10000;
  background: var(--serenade); will-change: transform;
  transition: transform 1.05s cubic-bezier(.83, 0, .17, 1), border-radius 1.05s cubic-bezier(.83, 0, .17, 1);
}
.intro__logo { display: flex; align-items: center; gap: 10px; transition: transform .8s cubic-bezier(.65, 0, .35, 1), opacity .45s ease, filter .6s ease; }
.intro__mark { width: 66px; height: 56px; display: block; transform-origin: 70% 40%;
  animation: or-drop .95s cubic-bezier(.34, 1.56, .64, 1) .08s both; }
.intro__word { width: 236px; height: 56px; display: block;
  animation: or-sweep .75s cubic-bezier(.65, 0, .35, 1) .34s both; }
.intro__bar { position: absolute; left: 50%; bottom: 14vh; width: 120px; height: 2px; margin-left: -60px; border-radius: 2px; background: rgba(1, 75, 170, .12); overflow: hidden; }
.intro__bar::after { content: ""; position: absolute; inset: 0; background: var(--palm); transform-origin: 0 50%; animation: or-bar 1.2s cubic-bezier(.65, 0, .35, 1) .1s both; }
@keyframes or-drop { 0% { transform: scale(.2) rotate(-24deg); opacity: 0; filter: blur(14px); } 60% { opacity: 1; filter: blur(0); } 100% { transform: none; opacity: 1; filter: none; } }
@keyframes or-sweep { from { clip-path: inset(0 100% 0 0); transform: translateX(-18px); opacity: .2; } to { clip-path: inset(0 0 0 0); transform: none; opacity: 1; } }
@keyframes or-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Curtain lifts with a soft curved edge; the logo rises and blurs away */
html.is-intro-out .intro { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 22vh 22vh; pointer-events: none; }
html.is-intro-out .intro__logo { transform: translateY(-48px) scale(.94); opacity: 0; filter: blur(6px); }
html.is-intro-out .intro__bar { opacity: 0; transition: opacity .3s; }

/* Page waits underneath, then settles in as the curtain clears */
html.is-intro .nav { opacity: 0; transform: translateY(-14px); }
html.is-intro.is-intro-out .nav { opacity: 1; transform: none; transition: opacity .8s ease .5s, transform .9s cubic-bezier(.22, 1, .36, 1) .5s; }
html.is-intro #main > :first-child { transform: translateY(40px) scale(.97); opacity: .001; transform-origin: 50% 0; }
html.is-intro.is-intro-out #main > :first-child { transform: none; opacity: 1; transition: transform 1.25s cubic-bezier(.22, 1, .36, 1) .35s, opacity .8s ease .35s; }
html.is-intro .hk__media img { transform: scale(1.12); }
html.is-intro.is-intro-out .hk__media img { transform: none; transition: transform 1.8s cubic-bezier(.22, 1, .36, 1) .35s; }
html.is-intro .rv { opacity: 0 !important; transform: translateY(26px) !important; filter: blur(8px); transition: none !important; }
html.is-intro.is-intro-out .rv.is-in { opacity: 1 !important; transform: none !important; filter: none;
  transition: opacity .9s ease, transform 1s cubic-bezier(.22, 1, .36, 1), filter .9s ease !important; transition-delay: calc(.55s + var(--d, 0s) * 1.6) !important; }
html.is-intro.is-intro-out .hk .h1l { animation: or-line 1s cubic-bezier(.22, 1, .36, 1) both; }
html.is-intro.is-intro-out .hk .h1l:nth-child(1) { animation-delay: .6s; }
html.is-intro.is-intro-out .hk .h1l:nth-child(2) { animation-delay: .7s; }
html.is-intro.is-intro-out .hk .h1l:nth-child(3) { animation-delay: .8s; }
@keyframes or-line { from { transform: translateY(.45em); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }
@media (max-width: 560px) { .intro__mark { width: 52px; height: 44px; } .intro__word { width: 185px; height: 44px; } .intro__logo { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { html.is-intro .intro { display: none; } }