/* ============================================================
   OkCredit homepage — 2026 redesign
   Source of truth: "OkCredit Animation Redesign" design files
   (OkCredit Website.dc.html + Udhar Loop Animation.dc.html).
   Standalone stylesheet — this page does not load Bootstrap.
   ============================================================ */

:root {
  --ink: #17332B;
  --green: #0E7A41;
  --green-dark: #0A5C31;
  --green-bright: #16A85C;
  --green-tint: #E3F4EA;
  --mint: #8FDCAE;
  --body: #4E5F58;
  --muted: #71817A;
  --slate: #3E524A;
  --border: #E7EEE9;
  --page-bg: #F7FAF8;
  --amber: #F5A623;
  --red: #C0392B;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page-bg);
  font-family: "Plus Jakarta Sans", Helvetica, Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* The 560px hero glow bleeds past narrow viewports; without this the
     page scrolls sideways on phones. */
  overflow-x: hidden;
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); }

h1, h2, h3, p, figure, blockquote { margin: 0; }

.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}

/* ---------- Section headers ---------- */
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.eyebrow {
  background: var(--green-tint);
  color: var(--green);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
}
.eyebrow--red { background: #FDEBEB; color: var(--red); }
.eyebrow--dark {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--mint);
}
.sec-title {
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 800;
  letter-spacing: -1.2px;
  color: var(--ink);
}
.sec-sub {
  font-size: 16.5px;
  color: var(--body);
  max-width: 620px;
  line-height: 1.6;
}

/* ---------- Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(14, 122, 65, 0.08);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 11px; }
/* Real OkCredit mark (inline SVG in the markup) */
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(14, 122, 65, 0.25);
  flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -0.3px; }
.brand-tag { font-size: 10.5px; color: var(--muted); letter-spacing: 0.2px; font-weight: 600; }

.site-nav { display: flex; align-items: center; gap: 30px; font-size: 14.5px; font-weight: 700; }
.site-nav a { color: var(--slate); }
.site-nav a:hover { color: var(--green); }
.nav-stores { display: flex; align-items: center; gap: 12px; }
.nav-stores a { display: inline-flex; opacity: 0.85; transition: opacity 0.2s ease, transform 0.2s ease; }
.nav-stores a:hover { opacity: 1; transform: translateY(-1px); }
.nav-stores img { height: 28px; width: auto; display: block; }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 32px;
  align-items: center;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 36px 56px 56px 56px;
  background-image: radial-gradient(rgba(14, 122, 65, 0.055) 1px, transparent 1px);
  background-size: 30px 30px;
}
.hero-copy { display: flex; flex-direction: column; gap: 22px; max-width: 620px; }

.badge-row { display: flex; }
.hero-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #FFFFFF;
  border: 1px solid #D6EEDF;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px 8px 9px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(14, 58, 40, 0.06);
}
.hero-badge b {
  background: var(--green-tint);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.hero-title-block { display: flex; flex-direction: column; gap: 10px; }
/* Sits inside the <h1> (see index.ejs) so the heading carries the category
   keyword. Needs its own display/line-height/letter-spacing because it would
   otherwise inherit the h1's 66px, 1.06 and -2px. */
.hero-kicker {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: 2.2px;
  line-height: 1.4;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.hero h1 {
  font-size: clamp(46px, 4.6vw, 66px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--ink);
}
/* Headline words highlight in sync with the phone demo phase */
.hero-word {
  color: #C3D1C8;
  transition: color 0.5s ease, background-size 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
  background-image: linear-gradient(rgba(22, 168, 92, 0.18), rgba(22, 168, 92, 0.18));
  background-repeat: no-repeat;
  background-size: 0% 0.28em;
  background-position: 0 82%;
  padding-right: 0.05em;
}
.hero-word.active { color: var(--green); background-size: 100% 0.28em; }

.hero-lede {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--body);
  text-wrap: pretty;
  max-width: 540px;
}
.hero-lede b { color: var(--ink); }

.cta-row { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
/* Same equal-width trick as .final-cta .cta-row: two 1fr tracks in a
   fit-content box both take the wider button's width, so Play and App Store
   match in every locale. Collapses to one track on mobile — see below. */
.store-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  width: fit-content;
  align-items: stretch;
}
.store-pair .store-btn { justify-content: center; }
.store-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 24px;
  border-radius: 13px;
  transition: all 0.2s ease;
}
.store-btn .store-label { display: flex; flex-direction: column; text-align: left; }
.store-btn .store-kicker { font-size: 10.5px; opacity: 0.75; letter-spacing: 0.8px; font-weight: 600; }
.store-btn .store-name { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; }
.store-btn--dark {
  background: var(--ink);
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(23, 51, 43, 0.25);
  /* Matches the 1.5px border on --light. Without it the pair differs by 3px in
     height, which nothing can correct once they stack and each owns a row. */
  border: 1.5px solid transparent;
}
.store-btn--dark:hover {
  background: #0F241E;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(23, 51, 43, 0.32);
}
.store-btn--light {
  background: #FFFFFF;
  color: var(--ink);
  border: 1.5px solid #DCE6DF;
  box-shadow: 0 4px 14px rgba(23, 51, 43, 0.07);
}
.store-btn--light:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }
.store-btn--light .store-kicker { opacity: 0.6; }
.web-cta {
  font-size: 15px;
  font-weight: 800;
  padding: 13px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease;
}
.web-cta:hover { gap: 9px; }
.web-cta .arrow { font-size: 17px; }

.trust-row { display: flex; align-items: center; gap: 13px; }
.avatars { display: flex; }
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2.5px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}
.avatar + .avatar { margin-left: -10px; }
.avatar--s { background: linear-gradient(145deg, #FFD66B, #F5A623); color: #6B4A00; }
.avatar--a { background: linear-gradient(145deg, #6BC8FF, #2E90D9); color: #0A3A5C; }
.avatar--m { background: linear-gradient(145deg, #52C98A, #0E7A41); color: #FFFFFF; }
.avatar--p { background: linear-gradient(145deg, #FF9F8A, #E05B3D); color: #5C1A0A; }
.trust-text { display: flex; flex-direction: column; gap: 1px; }
.trust-stars { color: var(--amber); font-size: 14px; letter-spacing: 1px; }
.trust-stars b { color: var(--ink); font-size: 14px; letter-spacing: 0; }
.trust-sub { font-size: 13.5px; color: var(--body); }
.trust-sub b { color: var(--ink); }

.hero-visual { display: flex; justify-content: center; position: relative; }
.hero-glow {
  position: absolute;
  width: min(560px, 92vw);
  height: min(560px, 92vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 168, 92, 0.16) 0%, rgba(22, 168, 92, 0.05) 45%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  pointer-events: none;
}

/* ============================================================
   Phone demo — the 3-phase udhar loop animation.
   Phase state lives on #phone-demo[data-phase="0|1|2"] plus the
   transient classes .is-resetting / .is-btn-down / .is-wa-open /
   .is-wa-sent applied by js/home.js.
   ============================================================ */
.phone-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 8px;
  position: relative;
}
.phone-frame {
  width: 310px;
  height: 640px;
  background: linear-gradient(160deg, #16332E 0%, #0B1F1B 100%);
  border-radius: 50px;
  padding: 11px;
  box-shadow: 0 40px 80px -20px rgba(11, 42, 34, 0.45), 0 12px 28px rgba(11, 42, 34, 0.18),
    inset 0 1px 1px rgba(255, 255, 255, 0.18);
  position: relative;
}
.phone-screen {
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border-radius: 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Status bar */
.status-bar {
  background: #FFFFFF;
  padding: 10px 22px 2px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.status-time { color: #1D3B36; font-size: 11.5px; font-weight: 700; }
.status-icons { display: flex; align-items: center; gap: 5px; }
.signal { display: flex; align-items: flex-end; gap: 1.5px; }
.signal i { display: block; width: 3px; background: #1D3B36; border-radius: 1px; }
.signal i:nth-child(1) { height: 4px; }
.signal i:nth-child(2) { height: 6px; }
.signal i:nth-child(3) { height: 8px; }
.signal i:nth-child(4) { height: 10px; background: rgba(29, 59, 54, 0.35); }
.battery {
  width: 20px;
  height: 10px;
  border: 1.5px solid rgba(29, 59, 54, 0.6);
  border-radius: 3px;
  padding: 1px;
  display: flex;
}
.battery i { display: block; width: 70%; background: #1D3B36; border-radius: 1px; }
.punch-hole {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #06120F;
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.25);
  z-index: 30;
}

/* Customer top bar */
.customer-bar {
  background: #FFFFFF;
  padding: 8px 14px 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #EAF0EC;
}
.customer-bar .back { color: #1D3B36; font-size: 19px; line-height: 1; }
.customer-avatar { position: relative; }
.customer-avatar .initial {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #E8837E;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
}
.customer-avatar .okc-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1C873B;
  border: 2px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.customer-avatar .okc-dot svg { width: 9px; height: 9px; display: block; }
.customer-meta { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.customer-name { color: #1D3B36; font-weight: 800; font-size: 15px; }
.customer-link { color: var(--green); font-size: 11px; font-weight: 700; }

/* Ledger */
.ledger {
  flex: 1;
  padding: 12px 12px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #FBFDFC;
  overflow: hidden;
}
.day-chip {
  align-self: center;
  background: #8FA9A3;
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
}
.entry-row {
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.34, 1.4, 0.44, 1);
  opacity: 1;
  transform: translateY(0) scale(1);
}
.entry-row.hidden-state { opacity: 0; transform: translateY(14px) scale(0.97); }
.entry-inner { display: flex; flex-direction: column; gap: 4px; }
.entry-row--udhar .entry-inner { align-items: flex-end; }
.entry-row--payment .entry-inner { align-items: flex-start; }
.entry-bubble {
  background: #FFFFFF;
  border: 1px solid #E3E8E5;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 2px 6px rgba(20, 50, 43, 0.05);
}
.entry-dir { font-size: 16px; font-weight: 800; }
.entry-dir--given { color: var(--red); }
.entry-dir--received { color: var(--green); }
.entry-amt { color: #1D3B36; font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.entry-time { color: #94A39C; font-size: 11px; font-weight: 600; }
.entry-tick { color: #94A39C; font-size: 12px; }
.entry-note { font-size: 12px; font-weight: 700; }
.entry-row--udhar .entry-note { color: #1D3B36; padding-right: 4px; }
.entry-row--payment .entry-note { color: var(--green); padding-left: 4px; }

/* Payment row shows only in phase 2 (with a small delay) */
.entry-row--payment { opacity: 0; transform: translateY(14px) scale(0.97); }
.phone-demo[data-phase="2"] .entry-row--payment {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.3s;
}
/* Udhar row hides briefly while the loop resets */
.phone-demo.is-resetting .entry-row--udhar { opacity: 0; transform: translateY(14px) scale(0.97); }

/* Bottom sheet */
.bottom-sheet {
  background: #EDF3F0;
  border-top: 1.5px dashed #CBD8D1;
  border-radius: 18px 18px 0 0;
  padding: 8px 12px 6px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sheet-icons { display: flex; align-items: center; gap: 8px; }
.sheet-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #AEBEB7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sheet-icon i { display: block; border: 1.5px solid #FFFFFF; }
.sheet-icon i.doc { width: 9px; height: 11px; border-radius: 2px; }
.sheet-icon i.card { width: 10px; height: 8px; border-radius: 2px; }
.sheet-icon i.circle { width: 8px; height: 8px; border-radius: 50%; }
.sheet-icons .spacer, .sheet-actions .spacer { flex: 1; }
.sheet-more { color: #5E7168; font-size: 11.5px; font-weight: 700; }

.sheet-actions { display: flex; align-items: center; gap: 8px; }
.pill-btn { font-size: 12px; font-weight: 800; border-radius: 999px; }
.pill-btn--outline {
  border: 1.5px solid var(--green);
  color: var(--green);
  padding: 9px 13px;
  background: #FFFFFF;
}
.pill-btn--solid {
  background: var(--green);
  color: #FFFFFF;
  padding: 10px 16px;
  box-shadow: 0 3px 8px rgba(14, 122, 65, 0.25);
}
.remind-btn {
  background: var(--green);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(14, 122, 65, 0.25);
  transform: scale(1);
  transition: all 0.2s ease;
}
.phone-demo.is-btn-down .remind-btn {
  background: var(--green-dark);
  box-shadow: 0 0 0 5px rgba(14, 122, 65, 0.22);
  transform: scale(0.92);
}

.balance-row {
  background: #FFFFFF;
  margin: 0 -12px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.balance-label { color: #1D3B36; font-size: 13.5px; font-weight: 700; }
.balance-amts { position: relative; height: 20px; width: 110px; }
.balance-amt {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 15px;
  font-weight: 800;
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.4, 0.44, 1);
  opacity: 0;
  transform: scale(0.9);
}
.balance-amt--due { color: #E0403C; }
.balance-amt--clear { color: var(--green); }
.phone-demo:not([data-phase="2"]) .balance-amt--due { opacity: 1; transform: scale(1); }
.phone-demo[data-phase="2"] .balance-amt--clear { opacity: 1; transform: scale(1); }

.sheet-cta-row { display: flex; gap: 9px; padding-bottom: 2px; }
.sheet-cta {
  flex: 1;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 11px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(20, 50, 43, 0.06);
}
.sheet-cta--received { color: var(--green); }
.sheet-cta--given { color: var(--red); }
.sheet-handle-row { display: flex; justify-content: center; padding-bottom: 2px; }
.sheet-handle { width: 100px; height: 4px; border-radius: 999px; background: #C6D2CB; }

/* WhatsApp reminder overlay (phase 1) */
.wa-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #0B141A;
  transition: transform 0.55s cubic-bezier(0.3, 1.15, 0.4, 1), opacity 0.4s ease;
  transform: translateY(103%);
  opacity: 0.6;
  display: flex;
  flex-direction: column;
}
.phone-demo.is-wa-open .wa-overlay { transform: translateY(0); opacity: 1; }
.wa-head {
  padding: 34px 14px 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wa-title { color: #E9EDEF; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; }
.wa-sent {
  color: #E9EDEF;
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.35s ease;
  opacity: 0;
}
.wa-sent b { color: #53BDEB; font-weight: 800; }
.phone-demo.is-wa-sent .wa-sent { opacity: 1; }

.wa-card { margin: 0 16px; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.wa-card-head { background: var(--green); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.wa-merchant-avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(145deg, #FFD66B, #F5A623);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #6B4A00;
}
.wa-merchant { display: flex; flex-direction: column; gap: 1px; }
.wa-merchant-name { color: #FFFFFF; font-size: 14px; font-weight: 800; }
.wa-merchant-phone { color: #BFE8D0; font-size: 11px; font-weight: 600; }
.wa-card-body {
  background: #FFFFFF;
  padding: 14px 14px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.wa-due-label { color: #5E7168; font-size: 12px; font-weight: 700; }
.wa-due-amt { color: #1D3B36; font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.wa-divider { width: 100%; border-top: 1px solid #E3E8E5; margin: 4px 0; }
.wa-qr { width: 108px; height: 108px; display: flex; }
.wa-qr svg { width: 100%; height: 100%; }
.wa-upi-id { color: #5E7168; font-size: 10.5px; font-weight: 600; }
.wa-upi-apps { color: #94A39C; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; }

.wa-msg { margin: 10px 16px 0 16px; background: #1F2C34; border-radius: 12px; padding: 11px 13px; }
.wa-msg-text { color: #E9EDEF; font-size: 11.5px; line-height: 1.55; }
.wa-msg-text a, .wa-msg-text .wa-link { color: #53BDEB; }
.wa-msg-from { color: #8696A0; font-size: 10.5px; margin-top: 4px; }

/* Step indicator */
.demo-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #E2EAE4;
  border-radius: 999px;
  padding: 5px;
  box-shadow: 0 4px 14px rgba(14, 58, 40, 0.06);
}
.demo-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #8A9A91;
  background: transparent;
  padding: 6px 13px 6px 7px;
  border-radius: 999px;
  transition: all 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.demo-step .num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  background: #E2EAE4;
  color: #8A9A91;
  transition: all 0.45s ease;
}
.demo-step.active { color: #FFFFFF; background: var(--green); }
.demo-step.active .num { background: rgba(255, 255, 255, 0.22); color: #FFFFFF; }

/* ---------- Stats strip ---------- */
.stats-strip { background: #FFFFFF; border-top: 1px solid #EAF0EC; border-bottom: 1px solid #EAF0EC; }
.stats-row {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.stat-num { font-size: 34px; font-weight: 800; color: var(--green); letter-spacing: -1px; }
.stat-label { font-size: 13.5px; font-weight: 600; color: var(--muted); }

/* ---------- Features ---------- */
/* NOTE: these sections carry the .wrap class — set only vertical padding
   here, or the shorthand wipes out .wrap's 56px side padding and the
   section renders wider than the header/other sections. */
.features { padding-top: 84px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 40px; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.25s ease;
}
.feat-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(14, 58, 40, 0.09); }
.feat-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feat-icon--green { background: var(--green-tint); }
.feat-icon--amber { background: #FFF3DC; }
.feat-icon--blue { background: #E8F1FD; font-size: 19px; font-weight: 800; color: #2E6ED9; }
.feat-icon--red { background: #FBEBEB; }
.feat-icon--purple { background: #EEEAFB; }
.feat-icon--free { background: var(--green-tint); font-size: 20px; font-weight: 800; color: var(--green); }
.feat-icon .lang-sup { font-size: 13px; margin-top: -10px; }
.bars { display: flex; align-items: flex-end; gap: 3px; }
.bars i { display: block; width: 5px; background: var(--green); border-radius: 2px; }
.bars i:nth-child(1) { height: 10px; }
.bars i:nth-child(2) { height: 16px; }
.bars i:nth-child(3) { height: 22px; background: #52C98A; }
.feat-card h3 { font-size: 18.5px; font-weight: 800; color: var(--ink); }
.feat-card p { font-size: 14.5px; line-height: 1.6; color: var(--body); }

/* ---------- Getting started (dark) ---------- */
.getting-started { background: var(--ink); }
.getting-started .wrap { padding-top: 76px; padding-bottom: 76px; display: flex; flex-direction: column; gap: 40px; }
.getting-started .sec-title { color: #FFFFFF; }
.getting-started .sec-sub { color: #B9CBC2; max-width: 560px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.step-card .step-num { font-size: 15px; font-weight: 800; color: var(--mint); letter-spacing: 1px; }
.step-card h3 { font-size: 20px; font-weight: 800; color: #FFFFFF; }
.step-card p { font-size: 14.5px; line-height: 1.65; color: #B9CBC2; }
.check-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.check-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #D7E4DC;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: 999px;
}

/* ---------- Business categories ---------- */
.categories { background: #FFFFFF; border-top: 1px solid #EAF0EC; }
.categories .wrap { padding-top: 84px; padding-bottom: 84px; display: flex; flex-direction: column; gap: 40px; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Each card is a photograph of the trade with the copy laid over it. The photo
   is absolutely positioned rather than a background-image so it can carry
   srcset/sizes and be lazily decoded — see CAT_PHOTOS in index.ejs. */
.cat-card {
  position: relative;
  min-height: 260px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cat-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The scrim has to carry three lines of body copy, so it reaches ~92% at the
   foot while staying light at the top, where the photo should still read. */
.cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(8, 22, 16, 0.14) 0%,
    rgba(8, 22, 16, 0.60) 46%,
    rgba(8, 22, 16, 0.92) 100%
  );
}
.cat-body {
  position: relative;
  z-index: 2;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(14, 58, 40, 0.22);
}
.cat-card h3 { font-size: 17px; font-weight: 800; color: #FFFFFF; }
/* Cards whose category has a landing page render the heading as a link (see
   CAT_LANDING in index.ejs). It must look identical to the unlinked headings
   beside it — without this the global `a { color: var(--green) }` turns it
   green on a photo background, and only some cards would change. The card
   already lifts on :hover, so the underline is the only affordance added. */
.cat-card h3 a { color: inherit; text-decoration: none; }
.cat-card h3 a:hover { color: inherit; text-decoration: underline; }
.cat-card h3 a:focus-visible { outline: 2.5px solid #FFFFFF; outline-offset: 3px; border-radius: 3px; }
.cat-card p { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); }
.cat-tail { text-align: center; font-size: 14.5px; color: var(--muted); }
.cat-tail b { color: var(--ink); }

/* ---------- Geography ---------- */
.geography { padding-top: 84px; padding-bottom: 84px; display: flex; flex-direction: column; gap: 40px; }
.geo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Photo side panel + text column. The card is a flex ROW on desktop; below
   640px it stacks and the photo becomes a top banner (see the media query at
   the foot of this file). Padding moved off .geo-card onto .geo-body so the
   image can bleed to the card edge. */
.geo-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  position: relative;
  overflow: hidden;
}
.geo-photo {
  flex: 0 0 34%;
  min-width: 130px;
  background: #F0F7F2;
}
.geo-photo picture,
.geo-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.geo-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Landmark mark on the cities that have one. Cities without a landmark get a
   plain chip on purpose — a filler icon reads worse than no icon. */
.city-mark { width: 14px; height: 14px; flex-shrink: 0; color: var(--green); }
.city-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.corner-flag {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--green);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 7px 16px;
  border-radius: 0 0 0 14px;
}
.geo-card h3 { font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -0.5px; }
.geo-card p { font-size: 14.5px; line-height: 1.65; color: var(--body); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.city-chip {
  background: #F0F7F2;
  border: 1px solid #DCEAE1;
  color: var(--slate);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.states-row { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; max-width: 900px; margin: 0 auto; }
.states-row .states-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  width: 100%;
  text-align: center;
  margin-bottom: 4px;
}
.state-chip {
  background: #FFFFFF;
  border: 1px solid var(--border);
  color: var(--slate);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: 999px;
}

/* ---------- Auto-scrolling marquee (testimonials + videos) ----------
   Two identical .marquee-set children each translate -100% for a
   seamless loop. Pauses on hover/focus; with reduced motion it becomes
   a plain swipeable row. */
.marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.marquee-set {
  display: flex;
  gap: 20px;
  padding-right: 20px;
  flex-shrink: 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  animation: marquee-scroll var(--marquee-dur, 60s) linear infinite;
}
@keyframes marquee-scroll {
  to { transform: translateX(-100%); }
}
.marquee:hover .marquee-set,
.marquee:focus-within .marquee-set { animation-play-state: paused; }
.marquee .testi-card { width: 360px; flex-shrink: 0; }
.marquee .vid-card { width: 340px; flex-shrink: 0; }
@media (max-width: 640px) {
  .marquee .testi-card { width: 300px; }
  .marquee .vid-card { width: 290px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-set { animation: none; }
  .marquee-set[aria-hidden="true"] { display: none; }
}

/* ---------- Testimonials ---------- */
.testimonials { background: #FFFFFF; border-top: 1px solid #EAF0EC; }
.testimonials .wrap { padding-top: 84px; padding-bottom: 84px; display: flex; flex-direction: column; gap: 40px; }
.testi-card {
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testi-stars { color: var(--amber); font-size: 15px; letter-spacing: 2px; }
.testi-card blockquote { font-size: 15px; line-height: 1.65; color: var(--slate); }
.testi-card figcaption { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}
.testi-avatar--green { background: linear-gradient(145deg, #52C98A, #0E7A41); }
.testi-avatar--blue { background: linear-gradient(145deg, #6BC8FF, #2E90D9); }
.testi-avatar--amber { background: linear-gradient(145deg, #FFD66B, #F5A623); color: #6B4A00; }
.testi-who { display: flex; flex-direction: column; }
.testi-who b { font-size: 14.5px; color: var(--ink); }
.testi-who span { font-size: 12.5px; color: var(--muted); }
.testi-source { text-align: center; font-size: 14px; color: var(--muted); }
.testi-source a { font-weight: 700; }

/* ---------- Creator videos ---------- */
.videos { padding-top: 84px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 40px; }
.vid-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  color: inherit;
}
.vid-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(14, 58, 40, 0.1); color: inherit; }
.vid-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.vid-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid-thumb-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #EDF3F0, #DCE8E1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8A9A91;
  font-size: 12.5px;
  font-weight: 700;
}
.play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.vid-meta { padding: 18px 20px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.vid-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vid-creator { display: flex; align-items: center; gap: 9px; }
.vid-creator-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #E2EAE4;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.vid-creator span:last-child { font-size: 13px; color: var(--muted); font-weight: 600; }

.yt-band {
  background: var(--ink);
  border-radius: 22px;
  padding: 34px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.yt-band-copy { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.yt-band-title { display: flex; align-items: center; gap: 12px; }
.yt-band-title h3 { font-size: 22px; font-weight: 800; color: #FFFFFF; letter-spacing: -0.4px; }
.yt-band p { font-size: 15px; line-height: 1.6; color: #B9CBC2; }
.yt-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.yt-chip {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #D7E4DC;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 999px;
}
.yt-cta {
  background: #FF0000;
  color: #FFFFFF;
  font-size: 15.5px;
  font-weight: 800;
  padding: 15px 28px;
  border-radius: 13px;
  box-shadow: 0 6px 18px rgba(255, 0, 0, 0.28);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.yt-cta:hover { background: #D90000; color: #FFFFFF; transform: translateY(-2px); }

/* ---------- Udhar khata guide ---------- */
.guide { padding-top: 84px; padding-bottom: 84px; display: flex; flex-direction: column; gap: 36px; }
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vs-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.vs-card--new { border: 2px solid var(--green); position: relative; overflow: hidden; }
.vs-head { display: flex; flex-direction: column; gap: 3px; }
.vs-kicker { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.vs-kicker--old { color: #A87642; }
.vs-kicker--new { color: var(--green); }
.vs-card h3 { font-size: 21px; font-weight: 800; color: var(--ink); }
.vs-list { display: flex; flex-direction: column; gap: 13px; }
.vs-item { display: flex; align-items: flex-start; gap: 12px; }
.vs-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}
.vs-mark--x { background: #FBEBEB; color: var(--red); }
.vs-mark--check { background: var(--green-tint); color: var(--green); }
.vs-item span:last-child { font-size: 14.5px; line-height: 1.55; color: var(--body); }
.vs-item b { color: var(--ink); }

/* minmax(0, 1fr), not 1fr: a bare 1fr floors at min-content, and Tamil and
   Malayalam compounds here run to ~220px unbroken (வாடிக்கையாளரிடமிருந்து).
   That refused to shrink and pushed the page 66px wide on a 390px phone.
   Latin locales never hit it because the words are short. */
.gloss-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gloss-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.gloss-hindi { font-size: 24px; font-weight: 800; }
.gloss-term { font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: 0.3px; }
.gloss-def { font-size: 13px; line-height: 1.5; color: var(--muted); }
/* Lets those compounds break rather than set an unshrinkable floor. */
.gloss-hindi, .gloss-term, .gloss-def { overflow-wrap: break-word; }

.guide-prose {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
}
.guide-prose b { color: var(--ink); }
.guide-prose a { font-weight: 700; }

/* ---------- FAQ ---------- */
.faq { background: #FFFFFF; border-top: 1px solid #EAF0EC; }
.faq .wrap { max-width: 900px; padding-top: 84px; padding-bottom: 84px; display: flex; flex-direction: column; gap: 36px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4px 24px;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .toggle { color: var(--green); font-size: 20px; font-weight: 700; }
.faq-item[open] summary .toggle::before { content: "−"; }
.faq-item:not([open]) summary .toggle::before { content: "+"; }
.faq-item p { padding: 0 0 20px 0; font-size: 15px; line-height: 1.7; color: var(--slate); }
.faq-item p a { font-weight: 700; }

/* ---------- Final CTA ---------- */
.final-cta { background: linear-gradient(145deg, #0E7A41, #0A5C31); }
.final-cta .wrap {
  padding-top: 72px;
  padding-bottom: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.final-cta h2 {
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -1.2px;
  color: #FFFFFF;
  max-width: 700px;
  line-height: 1.15;
}
.final-cta .cta-sub { font-size: 16.5px; color: #BFE8D0; max-width: 520px; line-height: 1.6; }
/* Grid rather than the inherited flex. Two 1fr tracks inside a fit-content box
   both resolve to the widest button's max-content, so Play and App Store come
   out identical without hard-coding a width that the next locale would break —
   "Get it on / Google Play" and "Get it on / App Store" are different lengths
   in all eleven. Collapses to one full-width track on mobile. */
.final-cta .cta-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: fit-content;
  margin: 6px auto 0;
  /* stretch, overriding .cta-row's align-items:center — .store-btn--ghost
     carries a 1.5px border that --white does not, so left to themselves the
     two boxes differ by 3px in height and sit visibly off each other. */
  align-items: stretch;
}
.final-cta .store-btn { justify-content: center; }
.store-btn--white {
  background: #FFFFFF;
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  /* Matches the 1.5px border on --ghost. Without it the two buttons differ by
     3px in height, which align-items cannot correct once they stack on mobile
     and each one owns its own grid row. */
  border: 1.5px solid transparent;
}
.store-btn--white:hover { transform: translateY(-2px); color: var(--ink); }
.store-btn--white .store-kicker { opacity: 0.65; }
.store-btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
}
.store-btn--ghost:hover { background: rgba(255, 255, 255, 0.2); color: #FFFFFF; transform: translateY(-2px); }

/* ---------- Back to top ---------- */
/* visibility (not display or the hidden attribute) so the fade actually runs
   and the button still leaves the tab order while it is hidden. */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--green);
  box-shadow: 0 8px 22px rgba(14, 58, 40, 0.18);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease, background 0.2s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--green-tint); }
.to-top:focus-visible { outline: 2.5px solid var(--green); outline-offset: 3px; }
.to-top svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* Footer styles live in footer.ejs (shared, self-contained include). */

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  /* Stacked hero order: badge → headline → phone demo → CTAs → rating → lede,
     mirroring the headline/phone pairing that desktop gets from its two columns.
     The demo renders at full size — scaling it to 0.62 was tried and rejected
     because the ₹ amounts became illegible. That still holds: do not reach for
     a transform to make this fit. The shorter mobile variant the old note asked
     for now exists as a height reduction at ≤640px (see below), which trims
     dead space rather than shrinking type.

     .hero-copy is dissolved with `display: contents` so its children become
     direct flex items of .hero and can be ordered against .hero-visual — the
     phone is .hero-copy's SIBLING, so there is no other way to interleave them
     without changing the markup. Without display:contents support .hero-copy
     stays a box at the default order of 0 and .hero-visual (order 3) lands after
     it, i.e. the old stacked order. Degrades gracefully. */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    padding-top: 8px;
  }
  .hero-copy { display: contents; }
  .badge-row { order: 1; }
  .hero-title-block { order: 2; }
  .hero-visual { order: 3; }
  .cta-row { order: 4; }
  .trust-row { order: 5; }
  .hero-lede { order: 6; }

  /* Mobile nav: hide text links, keep the compact platform icons */
  .site-nav > a { display: none; }
  /* The 40px floor only bites below ~444px, where 9vw stops clearing it — i.e.
     on phones. It cost a whole extra line there: the English headline wrapped to
     5 lines (223px) instead of 4 (168px), pushing the demo 55px further down the
     fold. 36px is the specific value that buys that line back; measured lower
     values (32/30px) re-wrap to 5 lines again and end up worse per pixel, so
     this is a floor to tune by measurement, not by taste. */
  .hero h1 { font-size: clamp(36px, 9vw, 56px); }
  .cta-row, .badge-row, .trust-row { justify-content: center; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .feat-grid, .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: 1fr; }
  .geo-grid, .vs-grid { grid-template-columns: 1fr; }
  .gloss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yt-band { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .wrap, .hero { padding-left: 20px; padding-right: 20px; }
  .stats-row { padding-left: 20px; padding-right: 20px; grid-template-columns: repeat(2, 1fr); }
  .feat-grid, .cat-grid { grid-template-columns: 1fr; }
  /* Mobile header: brand on the left, language picker on the right, nothing
     else. The three store icons come out here because they are redundant on a
     phone — the hero's full-size Google Play and App Store buttons are the very
     next thing on screen. On tablet (641–1080px) they stay, since the header
     has the room and the hero CTAs are further down the fold. */
  .nav-stores { display: none; }

  /* Geography card stacks: photo becomes a top banner. Must match the 641px
     breakpoint on the <source> in index.ejs, or the portrait crop gets
     stretched across a wide banner. */
  .geo-card { flex-direction: column; }
  .geo-photo { flex: 0 0 auto; width: 100%; height: 132px; }
  .geo-body { padding: 24px; }

  /* Shorter demo on phones, so the frame is not sliced by the fold on load.
     At 640px the ledger box is 341px tall but its deepest row sits at 175px in
     every one of the three phases — ~166px the animation never uses. .ledger is
     the only flex:1 child of .phone-screen, so reducing the frame height eats
     that slack and nothing else. No transform, no type shrunk.

     528px is set by the WORST locale, not by English. Measured height at which
     the ledger starts clipping its own rows, per locale:
       Hinglish 488 · Tamil 492 · Hindi/Bengali/Marathi/Telugu 503 ·
       Kannada 512 · Malayalam 521
     Indic scripts have taller line boxes, so anything tuned on the root locale
     silently clips the other ten. 528 clears Malayalam with 7px to spare.
     Re-measure this floor before lowering it or before adding a row to the
     ledger — .ledger is overflow:hidden, so a regression here hides content
     without any visible error. */
  .phone-frame { height: 528px; }

  /* The step pill is laid out from its three labels, so its width is whatever
     the locale makes it: 326px on Hindi, 384px on Malayalam
     ("1എഴുതുക 2ഓർമ്മിപ്പിക്കുക 3പിരിക്കുക"). At 384 + 16px of .phone-demo
     padding it outgrew a 350px content column and scrolled the page sideways.
     Wrapping to a second line is the only option that keeps all three labels
     readable — shrinking the type would fail on Kannada next. */
  .demo-steps { flex-wrap: wrap; justify-content: center; max-width: 100%; }

  /* One track, so the two store buttons stack and both take the width of the
     wider one instead of each shrinking to its own label. */
  .final-cta .cta-row { grid-template-columns: 1fr; }
  .store-pair { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  /* transform:scale leaves the layout box at its unscaled size, so the scaled
     -away 8% would open a phantom gap between the phone and .demo-steps. The
     negative margin (528 × 0.08 ≈ 42px) absorbs it. */
  .phone-frame {
    transform: scale(0.92);
    transform-origin: top center;
    margin-bottom: -42px;
  }
}

/* Reduced motion: freeze the demo in its settled state (js/home.js
   pins data-phase="2" and never starts the loop). */
@media (prefers-reduced-motion: reduce) {
  .hero-word, .entry-row, .balance-amt, .demo-step, .demo-step .num, .wa-overlay, .wa-sent {
    transition: none !important;
  }
}