/*
 * The landing page's styling.
 *
 * The palette is not picked for this page. It is lifted from public/app.css --
 * the same surface, ink and eight-hue categorical series the Mini App draws its
 * charts with -- so the marketing page and the product a visitor lands in agree
 * about what Groceries looks like. The series hues were validated against this
 * surface for colour-blind separation between neighbours; reordering them or
 * repainting the surface would throw that away, so neither happens here.
 *
 * Light values live on bare :root. Dark redefines only the tokens, guarded so
 * an explicit light choice still wins. Nothing has its only definition inside a
 * media query.
 */

:root {
  color-scheme: light;

  --surface: #fcfcfb;
  --plane: #f9f9f7;
  --raised: #ffffff;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --ink-muted: #898781;
  --hairline: rgba(11, 11, 11, 0.1);
  --hairline-2: rgba(11, 11, 11, 0.06);

  --accent: #2a78d6;
  --accent-ink: #ffffff;
  --accent-soft: rgba(42, 120, 214, 0.1);

  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;

  /* The commitment ramp: one hue in three steps, because committed →
     essential → discretionary is an ordered scale and the categories are not.
     Dark is the locked end -- weight reads as constraint. */
  --commit-1: #1c4f8f;
  --commit-2: #2a78d6;
  --commit-3: #9cc4ee;

  --radius: 14px;
  --radius-lg: 22px;
  --wrap: 1120px;

  --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 8px 24px rgba(11, 11, 11, 0.06);
  --shadow-lg: 0 2px 4px rgba(11, 11, 11, 0.05), 0 24px 60px rgba(11, 11, 11, 0.1);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    "PingFang SC", "Noto Sans CJK SC", "Noto Sans Tamil", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --surface: #121211;
    --plane: #1a1a19;
    --raised: #1f1f1e;
    --ink: #f4f3f0;
    --ink-2: #b9b7b1;
    --ink-muted: #8a8883;
    --hairline: rgba(244, 243, 240, 0.14);
    --hairline-2: rgba(244, 243, 240, 0.08);

    --accent: #5b9ce8;
    --accent-ink: #08131f;
    --accent-soft: rgba(91, 156, 232, 0.16);

    --series-1: #5b9ce8;
    --series-2: #f0865a;
    --series-3: #3fc796;
    --series-4: #f0b532;
    --series-5: #ef99ba;
    --series-6: #35a835;
    --series-7: #7d6fd0;
    --series-8: #ec6f6e;

    --commit-1: #a9cef3;
    --commit-2: #5b9ce8;
    --commit-3: #2d5581;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.44), 0 24px 60px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0.1em 0.4em;
  border-radius: 5px;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 780px; }
.center { text-align: center; }

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

/* Holds the <symbol> the mark is drawn from. Hidden, but a <use> elsewhere on
   the page still renders it -- that is what a symbol is for. */
.sprite { display: none; }

/* ── Nav ──────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.nav.stuck { border-bottom-color: var(--hairline-2); }

.nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-size: 18px;
}
.brand-mark { display: inline-flex; }

.nav-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: 15px;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--ink); }

.nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-links + .nav-right { margin-left: 0; }

.langs {
  display: inline-flex;
  background: var(--plane);
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  padding: 2px;
}
.langs button {
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.langs button[aria-pressed="true"] {
  background: var(--raised);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.08);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 13px 24px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); }
.btn-primary:hover { box-shadow: var(--shadow-lg); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn-ghost:hover { background: var(--plane); }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-lg { padding: 16px 34px; font-size: 17px; }
.btn-block { display: flex; width: 100%; }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero { padding: 72px 0 84px; overflow: hidden; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

/* Not uppercased, unlike the other small labels on this page. It carries a
   Telegram @handle, and @SPENDLENSSG_BOT reads as a different name than the one
   a visitor will type. */
.eyebrow {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
  margin-bottom: 16px;
}

.hero h1 {
  font-size: clamp(38px, 5.6vw, 60px);
  font-weight: 680;
  margin-bottom: 20px;
}

.lede { font-size: 19px; color: var(--ink-2); max-width: 34em; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 26px; }

.trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
  color: var(--ink-muted);
}
.trust li { display: flex; align-items: center; gap: 7px; }
.trust li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--series-3);
  flex: none;
}

/* ── Phone / chat demo ────────────────────────────────────────────────── */

.hero-demo { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.phone {
  width: 100%;
  max-width: 380px;
  background: var(--raised);
  border: 1px solid var(--hairline-2);
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.phone-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline-2);
  background: var(--plane);
}
/* Was a disc plus a ::after ring built from borders, which is where the mark
   drifted: a border-drawn ring cannot have the centre dot, so the avatar was a
   different logo to the one in the nav. It uses the shared <symbol> now and
   only needs sizing. */
.phone-avatar { display: inline-flex; flex: none; }
.phone-name { font-weight: 600; font-size: 15px; }
.phone-status { font-size: 12px; color: var(--ink-muted); margin-left: auto; }

.phone-thread {
  min-height: 372px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-end;
  background:
    radial-gradient(circle at 20% 20%, var(--accent-soft), transparent 55%),
    var(--surface);
}

.msg {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.45;
  animation: pop 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.3);
  white-space: pre-line;
}
.msg.from-user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--accent-ink);
  border-bottom-right-radius: 5px;
}
.msg.from-bot {
  align-self: flex-start;
  background: var(--plane);
  color: var(--ink);
  border: 1px solid var(--hairline-2);
  border-bottom-left-radius: 5px;
}

/* A file bubble, so "it sends a spreadsheet back" is shown rather than
   asserted. */
.msg.file { display: flex; align-items: center; gap: 10px; }
.msg .file-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--series-3);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex: none;
}
.msg .file-meta { display: flex; flex-direction: column; line-height: 1.25; }
.msg .file-name { font-weight: 600; font-size: 13.5px; }
.msg .file-size { font-size: 11.5px; opacity: 0.7; }

.typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-muted);
  animation: blink 1.1s infinite;
}
.typing i:nth-child(2) { animation-delay: 0.18s; }
.typing i:nth-child(3) { animation-delay: 0.36s; }

.phone-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-top: 1px solid var(--hairline-2);
  background: var(--plane);
}
.phone-field {
  flex: 1;
  font-size: 14px;
  color: var(--ink-muted);
  min-height: 20px;
}
.phone-field.live { color: var(--ink); }
.phone-send {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  position: relative;
}
.phone-send::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 8px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translateX(1px);
}

.replay {
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.replay:hover { background: var(--plane); color: var(--ink); }

@keyframes pop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes blink {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}

/* ── Bands ────────────────────────────────────────────────────────────── */

.band { padding: 88px 0; }
.band-tint { background: var(--plane); }

.section-title {
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 660;
  margin-bottom: 14px;
}
.section-lede { font-size: 18px; color: var(--ink-2); max-width: 42em; margin-bottom: 40px; }
.section-lede.center { margin-left: auto; margin-right: auto; }

/* ── Steps ────────────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  counter-reset: step;
}
.step {
  background: var(--raised);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
}
.step-n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 16px;
}
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { color: var(--ink-2); font-size: 15.5px; }

/* ── Ask demo ─────────────────────────────────────────────────────────── */

.ask { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.ask .section-lede { margin-bottom: 0; }

.ask-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.ask-chips button {
  border: 1px solid var(--hairline);
  background: var(--raised);
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  padding: 9px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.ask-chips button:hover { color: var(--ink); border-color: var(--accent); }
.ask-chips button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.ask-answer {
  display: block;
  background: var(--raised);
  border: 1px solid var(--hairline-2);
  border-left: 3px solid var(--series-3);
  border-radius: var(--radius);
  padding: 20px 22px;
  min-height: 128px;
  font-size: 16px;
  line-height: 1.55;
  white-space: pre-line;
  box-shadow: var(--shadow);
}
.ask-answer .who {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

/* ── Cards ────────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.card {
  background: var(--raised);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card h3 { font-size: 18px; margin-bottom: 10px; }
.card p { color: var(--ink-2); font-size: 15.5px; }

/* Deliberately not painted in the series hues. Those eight are a validated
   categorical scale that means something in the donut below, and spending them
   on decoration here -- on fourteen names, so six would have to repeat or fall
   back -- would teach a colour and then break it. */
.chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.chips li {
  color: var(--ink-muted);
  font-size: 12.5px;
  font-weight: 550;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chips li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Dashboard ────────────────────────────────────────────────────────── */

.dash { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dash .section-lede { margin-bottom: 22px; }
.note { font-size: 14px; color: var(--ink-muted); margin-top: 18px; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; font-size: 15.5px; color: var(--ink-2); }
.ticks li::before {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.periods {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 14px;
}
.periods button {
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  padding: 7px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.periods button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

.dash-card {
  background: var(--raised);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-lg);
}
.dash-label {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  font-weight: 600;
}
.dash-sub { margin-top: 26px; }
.dash-amount {
  font-size: 38px;
  font-weight: 680;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: 4px;
}
.dash-window { font-size: 13.5px; color: var(--ink-muted); margin-bottom: 18px; }

.donut-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donut { flex: none; }
.donut svg { display: block; }
.donut .wedge {
  transition: stroke-width 0.18s ease, opacity 0.18s ease;
  cursor: pointer;
}
.donut.has-hover .wedge { opacity: 0.32; }
.donut .wedge.on { opacity: 1; stroke-width: 25; }

.legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 190px; display: grid; gap: 7px; }
.legend li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 0;
  transition: opacity 0.18s ease;
}
.legend.has-hover li { opacity: 0.4; }
.legend li.on { opacity: 1; }
.legend .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.legend .name { color: var(--ink-2); }
.legend .val {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 550;
}

.commit {
  display: flex;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 10px;
  background: var(--plane);
}
.commit span {
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 650;
  color: #fff;
  transition: flex-grow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.commit-key { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.commit-key li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.commit-key .dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--raised);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 16.5px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
/* pre-line so an answer can hold a blank line. The banks answer needs one: the
   claim comes first and the caveat about day-first dates second, and run
   together as one block the caveat reads as fine print rather than as part of
   the answer. */
.faq .answer { padding: 0 22px 20px; color: var(--ink-2); font-size: 16px; white-space: pre-line; }

/* ── Pricing ──────────────────────────────────────────────────────────── */

.price-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; align-items: start; }
.price-card {
  background: var(--raised);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow);
}
.price-main { border-color: var(--accent); box-shadow: var(--shadow-lg); }
.price-name { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); font-weight: 600; }
.price-fig { font-size: 34px; font-weight: 680; letter-spacing: -0.02em; margin: 4px 0 20px; }
.price-card .ticks { margin-bottom: 24px; }
.price-body { color: var(--ink-2); font-size: 15.5px; }
.price-body + .price-body { margin-top: 12px; }
.price-foot { margin-top: 22px; font-size: 14.5px; color: var(--ink-muted); text-align: center; }

/* ── Closer + footer ──────────────────────────────────────────────────── */

.closer { padding: 90px 0; }
.closer h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 680; margin-bottom: 14px; }
.closer p { color: var(--ink-2); font-size: 18px; margin-bottom: 28px; }

.foot { border-top: 1px solid var(--hairline-2); padding: 40px 0; background: var(--plane); }
.foot-inner { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.foot-brand { font-weight: 650; }
.foot-note { color: var(--ink-muted); font-size: 14px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; align-items: flex-start; }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }

/* ── Reveal on scroll ─────────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ── Legal page ───────────────────────────────────────────────────────── */

.legal { padding: 60px 0 80px; }
.legal h1 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 10px; }
.legal .updated { color: var(--ink-muted); font-size: 14px; margin-bottom: 36px; }
.legal h2 { font-size: 21px; margin: 36px 0 10px; }
.legal p, .legal li { color: var(--ink-2); font-size: 16.5px; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 20px; display: grid; gap: 8px; margin: 12px 0 0; }

/* ── Card recommendations ─────────────────────────────────────────────── */

/* The visual sits FIRST in the grid on a wide screen and the copy second,
   mirroring the dashboard band above it so two consecutive two-column bands do
   not read as the same layout twice. Source order is copy-then-visual, which is
   the order it should be read in when the columns stack. */
.cards-band { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.cards-band .section-lede { margin-bottom: 22px; }
.cards-band .cards-copy { order: 2; }
.cards-band .rank-app { order: 1; }

.rank-app {
  background: var(--raised);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-lg);
}

/* The user's own half of the comparison, above the cards rather than under
   them: what a card could reward is the number every row below is a function
   of, and a reader who has not seen it first is reading rankings of nothing. */
.rank-profile { border-bottom: 1px solid var(--hairline-2); padding-bottom: 18px; }
.rank-profile-amount {
  font-size: 32px;
  font-weight: 680;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.rank-profile-note {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: 6px;
}

.rank { list-style: none; margin: 0; padding: 0; }
.rank li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
}
.rank li + li { border-top: 1px solid var(--hairline); }

.rank-n {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.rank-body { flex: 1 1 auto; min-width: 0; }
.rank-name { font-size: 15.5px; font-weight: 600; }

/* The terms behind the number. Two chips per row and no more: the point is
   that the estimate has fine print, not to reproduce all of it here. */
.rank-chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rank-chips li {
  padding: 3px 9px;
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink-muted);
  background: var(--surface);
}

.rank-amount {
  flex: none;
  font-size: 17px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

.rank-foot {
  font-size: 12.5px;
  color: var(--ink-muted);
  border-top: 1px solid var(--hairline-2);
  padding-top: 14px;
}

/* ── Unusual charges ──────────────────────────────────────────────────── */

/* Copy left, panel right -- the mirror of the cards band directly above it, so
   two adjacent two-column bands do not read as one long one. */
.flag-band { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.flag-band .section-lede { margin-bottom: 22px; }

.flag-app {
  background: var(--raised);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-lg);
}

.flag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--hairline-2);
  padding-bottom: 16px;
}
.flag-card { font-size: 15.5px; font-weight: 600; }

/* How many charges on this card did not look like the rest of it.

   Series 4 at low opacity, which is the Mini App's own warn tone and is here
   for the reason it is there: a charge that does not fit is not an error, and
   red would say something had gone wrong rather than that something is worth a
   look. Ink rather than the hue for the text, because 20% of an amber on this
   surface is nowhere near readable as a foreground. */
.flag-count {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 550;
  background: color-mix(in srgb, var(--series-4) 20%, transparent);
  color: var(--ink);
}

.flag-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0 4px;
}
.flag-body { flex: 1 1 auto; min-width: 0; }

/* A statement descriptor, shown as one: this is the string a bank actually
   prints, and dressing it up as a tidy merchant name would misrepresent the
   thing a reader is being asked to recognise. */
.flag-merchant {
  font-size: 15.5px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.flag-when { font-size: 13px; color: var(--ink-muted); margin-top: 3px; }

/* Why it was raised, in the same chip shape the ranking panel uses for a
   card's fine print -- both are the working behind a claim above them. Stacked
   rather than in a row: these are sentences, and two sentences side by side
   wrap into an unreadable pair at this width. */
.flag-why { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; justify-items: start; }
.flag-why li {
  padding: 3px 9px;
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink-muted);
  background: var(--surface);
}

.flag-amount {
  flex: none;
  font-size: 17px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

.flag-ask { font-size: 14px; color: var(--ink-2); margin-top: 18px; }

/* The three answers the Mini App offers. Drawn as buttons and deliberately not
   built as any: the whole panel is one role="img", and a control that looks
   pressable, takes focus and does nothing is worse than a picture of one. */
.flag-answers {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.flag-answers li {
  padding: 7px 13px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--surface);
}
/* The answer that ends the question, so it carries the accent the primary
   buttons elsewhere on the page carry. */
.flag-answers li:first-child {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 550;
}

/* ── The Review queue, worked ──────────────────────────────────────────── *
 *
 * The one panel on this page that is operable rather than illustrated. It sits
 * beside the flag card's styling deliberately and borrows its shell -- same
 * raised surface, same radius, same footer -- so the two Mini App sections read
 * as two views of one app instead of two designs.
 *
 * The blue is the Mini App's own: a categorisation is drawn in --series-1 there
 * and an unusual charge in amber, which is what lets somebody tapping through a
 * run tell the two questions apart without reading either. That distinction is
 * the thing worth carrying onto the marketing page, so it is carried exactly.
 */

.rev-app {
  background: var(--raised);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-lg);
  /* The card changes height as it steps -- a suggestion block appears, a picker
     replaces the body -- and without a floor the whole band jumps under the
     reader's cursor as they work. Sized to the tallest state, the picker. */
  min-height: 430px;
  display: flex;
  flex-direction: column;
}

.rev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--hairline-2);
  padding-bottom: 14px;
}
.rev-step { font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* One dot per card, filled as it is answered. Decorative -- rev-step says the
   same thing in words right beside it, and a screen reader hearing "1 of 4"
   does not also need four list items. */
.rev-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.rev-dots li {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--hairline);
}
.rev-dots li[data-state="done"] { background: color-mix(in srgb, var(--series-1) 45%, transparent); }
.rev-dots li[data-state="now"] { background: var(--series-1); }

.rev-body { flex: 1 1 auto; padding-top: 18px; }

/* What kind of question this is, in the Mini App's own chip. */
.rev-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--series-1) 12%, transparent);
  color: var(--series-1);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rev-chip svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rev-merchant {
  font-size: 19px;
  font-weight: 650;
  line-height: 1.2;
  margin-top: 10px;
  overflow-wrap: anywhere;
}

/* The bank's own line, monospaced for the reason the flag card's merchant is:
   it is a machine's text, and lining the characters up is what makes
   SMP_IJOOZ legible as two parts rather than one word. */
.rev-line {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.rev-count { margin-top: 10px; font-size: 13px; color: var(--ink-muted); }

/* The category, and the control that changes it -- one thing, because the
   category IS what the button is about. */
.rev-guess {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin-top: 16px;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--series-1) 32%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--series-1) 10%, transparent);
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}
.rev-guess:hover { background: color-mix(in srgb, var(--series-1) 16%, transparent); }
.rev-guess:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }

.rev-guess-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.rev-guess-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--series-1);
}
.rev-guess-value { font-size: 17px; font-weight: 600; line-height: 1.25; }
/* Nothing proposed, so the block is a prompt rather than a statement. */
.rev-guess[data-empty="true"] .rev-guess-value { color: var(--series-1); }
.rev-chevron {
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-muted);
}

.rev-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.rev-confirm {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.rev-confirm:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rev-skip {
  width: 100%;
  min-height: 36px;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font: inherit;
  cursor: pointer;
}
.rev-skip:hover { color: var(--ink-2); }

/* The picker, which replaces the body rather than opening over it: this panel
   is 430px of a marketing page, and a modal inside it would be a second thing
   to dismiss before the point had been made. */
.rev-pick-title { font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }
.rev-options { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.rev-options button {
  padding: 7px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.rev-options button:hover { border-color: var(--series-1); color: var(--ink); }
/* The picker's way out, which is the skip button's shape because it is the
   same kind of control: a quiet one that costs nothing to press. */
.rev-options + .rev-skip { margin-top: 16px; }

.rev-options button[aria-pressed="true"] {
  border-color: var(--series-1);
  background: color-mix(in srgb, var(--series-1) 12%, transparent);
  color: var(--series-1);
  font-weight: 550;
}

/* Everything answered. */
.rev-done { text-align: center; padding: 34px 0 10px; }
.rev-done-mark {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  fill: none;
  stroke: var(--series-1);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rev-done-title { font-size: 17px; font-weight: 650; }
.rev-done-body { font-size: 13.5px; color: var(--ink-muted); margin-top: 8px; }
.rev-replay {
  margin-top: 18px;
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.rev-replay:hover { border-color: var(--series-1); color: var(--ink); }

/* What the last press did. Not hidden from sight, because somebody who has
   just filed three transactions should see that it landed. */
.rev-said {
  min-height: 20px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--series-1);
  font-weight: 550;
}

.flag-foot {
  font-size: 12.5px;
  color: var(--ink-muted);
  border-top: 1px solid var(--hairline-2);
  margin-top: 20px;
  padding-top: 14px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

/* Seven links, a language toggle and a button share this row, and the seventh
   is what makes these two rules necessary.

   Measured rather than guessed, because the widest case is not the English one:
   Bahasa Melayu labels come to 418px against English's 394, and its "Buka dalam
   Telegram" button is wider too. At the full gap that case needs 1064px of
   viewport, and the links used to be hidden at 940 -- so between those two
   numbers the nav was already overlapping itself in Malay before a seventh link
   was added to it.

   So the gap closes first, which buys 60px and costs nothing anybody will
   notice, and the links then leave at 1024 rather than at 940: Malay needs
   956px of content there against 976px available. Hiding them earlier than the
   layout stacks is the right way round -- a nav that has dropped its links is a
   normal narrow nav, and one whose links run through the language toggle is a
   bug. */
@media (max-width: 1080px) {
  .nav-links { gap: 16px; }
}

@media (max-width: 1024px) {
  .nav-links { display: none; }
}

@media (max-width: 940px) {
  .hero-grid, .ask, .dash, .cards-band, .flag-band { grid-template-columns: 1fr; gap: 40px; }
  /* Stacked, the copy leads: a ranking panel read before the sentence that
     says whose spending it is built from explains nothing. */
  .cards-band .cards-copy { order: 1; }
  .cards-band .rank-app { order: 2; }
  .steps, .cards { grid-template-columns: 1fr 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .hero { padding: 48px 0 60px; }
  .band { padding: 64px 0; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .steps, .cards { grid-template-columns: 1fr; }
  .lede, .section-lede { font-size: 17px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .foot-inner { flex-direction: column; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}