/* ============================================================
   BillSathi — site styles
   ------------------------------------------------------------
   World: a well-set business document on white paper. Read
   colors_and_type.css first — it explains why every edge is a
   1px tint rather than a black keyline, and why black is #14110F.

   One component family carries the whole site:

     .plate   a panel. Hairline edge, shallow shadow, generous
              padding. Modifier .plate-ink / .plate-red fills it.
              Green is never a field colour: it lives on buttons,
              links and small marks.

   .paint is retained as a no-op hook so existing markup keeps
   working; the painted letter-shadow it used to carry is gone —
   an ink drop behind ink letters is what made every heading read
   doubled. If you are about to add a second container style, use
   a plate.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bs-bg);
  color: var(--bs-fg-1);
  font-family: var(--bs-font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}
a { color: var(--paint-green-800); text-decoration-color: var(--paint-green-500); transition: color var(--bs-dur-fast) var(--bs-ease); }
a:hover { color: var(--bs-ink-900); text-decoration-color: currentColor; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; }

/* ============================================================
   Layout
   ============================================================ */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--bs-space-8); }
.container.narrow { max-width: 860px; }
@media (max-width: 720px) { .container { padding: 0 var(--bs-space-5); } }

/* One spacing rhythm for the whole site. A dense section earns a quiet one;
   the variation comes from what is inside, not from ad-hoc padding. */
.section { padding: var(--bs-space-24) 0; position: relative; }
.section.tight { padding: var(--bs-space-16) 0; }
.section.alt { background: var(--bs-bg-alt); }
.section.ink { background: var(--bs-ink-900); color: var(--bs-fg-inv); }
@media (max-width: 720px) { .section { padding: var(--bs-space-16) 0; } .section.tight { padding: var(--bs-space-12) 0; } }

/* More space above a heading than below it. */
.section-head { max-width: 780px; margin: 0 0 var(--bs-space-12); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--bs-fg-3); margin: var(--bs-space-5) 0 0; font-size: 19px; max-width: 62ch; }
.section-head.center p { margin-left: auto; margin-right: auto; }
.prose { max-width: 68ch; }

/* ============================================================
   Headings
   ------------------------------------------------------------
   No letter carries a shadow anywhere on this site. .paint and
   .paint-flat survive only so the existing markup does not need
   a sweep; they add nothing.
   ============================================================ */
.paint, .paint-flat { text-shadow: none; }

/* The Devanagari line above an English heading. Poppins, quiet, and small
   enough to read as a subtitle rather than as a second headline. */
:where(.bs) .sign-deva {
  display: block;
  font-family: var(--bs-font-hindi);
  font-weight: 500;
  font-size: 0.30em;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--paint-green-800);
  margin-bottom: 0.42em;
}
.on-ink .sign-deva { color: var(--paint-yellow-300); }

/* ============================================================
   Plates — the one container
   ============================================================ */
.plate {
  position: relative;
  background: var(--bs-surface);
  border: var(--bs-rule) solid var(--bs-line);
  border-radius: var(--bs-radius-lg);
  box-shadow: var(--bs-shadow-sm);
  padding: var(--bs-space-8);
}
/* The enamel grain is gone. A texture tile over every filled panel was the
   loudest remaining piece of the signboard costume and it dirtied the type. */
.plate-ink   { background-color: var(--bs-ink-900);      color: var(--bs-fg-inv); border-color: transparent; }
.plate-red   { background-color: #fff; color: var(--bs-fg-2); border-color: var(--bs-line); }
.plate-cream { background: var(--bs-bg-alt); border-color: transparent; }
.plate-arc   { border-radius: var(--bs-radius-2xl); }

.plate-ink h1, .plate-ink h2, .plate-ink h3, .plate-ink h4 { color: var(--bs-fg-inv); }
.plate-red h1, .plate-red h2, .plate-red h3, .plate-red h4 { color: var(--bs-ink-900); }
.plate-red p { color: var(--bs-fg-3); }
.plate-red li svg { color: var(--paint-red-600); }
.plate-red .meta { color: var(--bs-fg-3); border-top-color: var(--bs-line); }
.plate-ink p { color: var(--bs-fg-on-ink-2); }

/* Lift on hover only where the plate is a link or a real target. */
.plate-hover { transition: transform var(--bs-dur) var(--bs-ease-out), box-shadow var(--bs-dur) var(--bs-ease-out); }
.plate-hover:hover { transform: translateY(-3px); box-shadow: var(--bs-shadow-lg); }

/* ============================================================
   Buttons
   ------------------------------------------------------------
   Press is a physical event: the plate travels into its own
   shadow and the shadow collapses. 120ms, because feedback that
   takes longer reads as latency.
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--bs-space-2);
  height: 50px; padding: 0 var(--bs-space-6);
  font-family: var(--bs-font-body);
  font-size: 17px; font-weight: 600; letter-spacing: -0.005em; line-height: 1;
  border: var(--bs-rule) solid transparent;
  border-radius: var(--bs-radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--bs-dur-fast) var(--bs-ease),
              box-shadow var(--bs-dur-fast) var(--bs-ease),
              background-color var(--bs-dur-fast) var(--bs-ease);
}
.btn:active { transform: translateY(1px); box-shadow: var(--bs-shadow-xs); }

.btn-primary { background: var(--paint-green-700); color: #fff; box-shadow: var(--bs-shadow-sm); }
.btn-primary:hover { background: var(--paint-green-800); color: #fff; box-shadow: var(--bs-shadow-md); }

.btn-ink { background: var(--bs-ink-900); color: var(--bs-fg-inv); box-shadow: var(--bs-shadow-sm); }
.btn-ink:hover { background: var(--bs-ink-700); color: var(--bs-fg-inv); box-shadow: var(--bs-shadow-md); }

.btn-white { background: #ffffff; color: var(--bs-ink-900); box-shadow: var(--bs-shadow-sm); }
.btn-white:hover { background: var(--paint-yellow-100); color: var(--bs-ink-900); box-shadow: var(--bs-shadow-md); }

.btn-secondary { background: transparent; color: var(--bs-ink-900); border-color: var(--bs-line-strong); }
.btn-secondary:hover { background: var(--bs-ink-50); color: var(--bs-ink-900); border-color: var(--bs-ink-900); }
.on-ink .btn-secondary, .plate-ink .btn-secondary { color: #fff; border-color: #fff; }
.on-ink .btn-secondary:hover, .plate-ink .btn-secondary:hover { background: rgba(255,255,255,0.14); color: #fff; }

.btn-lg { height: 56px; padding: 0 var(--bs-space-8); font-size: 17px; }
.btn-sm { height: 40px; padding: 0 var(--bs-space-4); font-size: 15px; border-radius: var(--bs-radius-sm); }
.btn-block { width: 100%; }
.btn .wa-ico { width: 1.35em; height: 1.35em; flex: none; }

/* ============================================================
   Small parts
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border: var(--bs-rule) solid var(--bs-line);
  border-radius: var(--bs-radius-pill);
  background: #fff;
  font-size: 13px; font-weight: 600; color: var(--bs-fg-2);
}
.chip svg { width: 15px; height: 15px; flex: none; }
.chip-yellow { background: var(--paint-yellow-100); }
.chip-green { background: var(--paint-green-50); }
.on-ink .chip { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.5); color: #fff; }

.rule { height: 1px; background: var(--bs-line-strong); border: 0; margin: 0; }
.rule-soft { height: 1px; background: var(--bs-ink-200); border: 0; margin: 0; }

/* An index number that carries real sequence information. Not decoration:
   used only where the order is the point. */
.step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border: var(--bs-rule) solid var(--bs-line);
  border-radius: 50%;
  background: var(--bs-bg-alt);
  font-family: var(--bs-font-display); font-weight: 500; font-size: 19px;
  line-height: 1;
  color: var(--paint-green-800);
}

/* ============================================================
   Announce rail + nav
   ============================================================ */
.announce {
  background: var(--bs-ink-900);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
  text-align: center;
  padding: 9px var(--bs-space-5);
  display: flex; align-items: center; justify-content: center; gap: var(--bs-space-3);
  flex-wrap: wrap;
}
.announce b { color: #fff; font-weight: 600; }
.announce .sep { color: rgba(255, 255, 255, 0.35); }
@media (max-width: 560px) {
  .announce { font-size: 12px; padding: 7px var(--bs-space-4); }
  .announce .drop { display: none; }
}

.nav {
  position: sticky; top: 0; z-index: 60;
  background: #fff;
  border-bottom: var(--bs-rule) solid var(--bs-line);
  transition: box-shadow var(--bs-dur) var(--bs-ease);
}
.nav.is-stuck { box-shadow: var(--bs-shadow-md); }
.nav-inner { display: flex; align-items: center; gap: var(--bs-space-6); height: 72px; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 38px; width: auto; }
.brand-fallback { font-family: var(--bs-font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.02em; color: var(--bs-ink-900); }

.nav-links { display: flex; align-items: center; gap: var(--bs-space-6); margin-left: var(--bs-space-4); }
.nav-links a {
  font-family: var(--bs-font-body);
  font-size: 15px; font-weight: 500;
  color: var(--bs-fg-2);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--bs-ink-900); border-bottom-color: var(--paint-green-600); }
.nav-links a[aria-current="page"] { color: var(--bs-ink-900); border-bottom-color: var(--bs-ink-900); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: var(--bs-space-3); }

/* Mobile navigation. The previous site simply hid the links below 880px, so
   a phone had no way to reach any page but the one it landed on. This is a
   <details> disclosure: it works with JavaScript switched off. */
.nav-menu { display: none; }
.nav-menu > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: var(--bs-rule) solid var(--bs-line);
  border-radius: var(--bs-radius-sm);
  background: #fff;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary .bar { display: block; width: 20px; height: 2px; background: var(--bs-ink-900); box-shadow: 0 -6px 0 var(--bs-ink-900), 0 6px 0 var(--bs-ink-900); }
.nav-menu[open] > summary .bar { box-shadow: none; transform: rotate(45deg); }
.nav-menu[open] > summary .bar::after { content: ""; display: block; width: 20px; height: 2px; background: var(--bs-ink-900); transform: rotate(-90deg); }
.nav-drawer {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff;
  border-bottom: var(--bs-rule) solid var(--bs-line);
  box-shadow: var(--bs-shadow-lg);
  padding: var(--bs-space-4) var(--bs-space-5) var(--bs-space-6);
  display: flex; flex-direction: column;
}
.nav-drawer a {
  font-size: 19px; font-weight: 600; color: var(--bs-ink-900);
  text-decoration: none; padding: var(--bs-space-4) 0;
  border-bottom: 1px solid var(--bs-ink-150);
}
.nav-drawer .btn { margin-top: var(--bs-space-5); }

@media (max-width: 940px) {
  .nav-links { display: none; }
  .nav-menu { display: block; }
  .nav-right .btn-nav-cta { display: none; }
}

/* ============================================================
   Hero
   ------------------------------------------------------------
   White ground, a serif headline, and the two pieces of real
   evidence we own: the owner's WHOLE WhatsApp screenshot — not a
   crop of it — and a genuine PDF rendered by the product's own
   template. The phone is the taller object and stands in front;
   the document leans out from behind its right shoulder. One
   thing in two halves: the chat inside, the paper coming out.
   ============================================================ */
.hero { padding: var(--bs-space-12) 0 0; background: var(--bs-bg); }
@media (max-width: 720px) { .hero { padding: var(--bs-space-8) 0 0; } }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--bs-space-10); } }

.hero h1 { margin-bottom: var(--bs-space-6); }
.hero .lead { color: var(--bs-fg-2); max-width: 44ch; margin: 0 0 var(--bs-space-8); }
.hero-cta { display: flex; gap: var(--bs-space-4); flex-wrap: wrap; align-items: center; margin-bottom: var(--bs-space-5); }
.hero-note { color: var(--bs-fg-3); font-size: 13px; font-weight: 500; margin: 0; }

/* The evidence pair. BOTH artefacts are shown WHOLE. The document is the
   full A4 page now, letterhead to footer — the previous crop started at the
   customer's name, which threw away the shop's own name, the QUOTATION
   badge, the quote number and the footer, i.e. exactly the branding the
   paid plan is sold on. The DOCUMENT is the front object: it is what the
   customer receives, so nothing may cover it. The phone sits behind and to
   the left. Nothing is rotated more than a degree; a rakish tilt is the
   cheapest way to look like a template. */
.evidence { position: relative; }
.evidence-phone {
  position: relative; z-index: 1;
  width: 42%; display: block; height: auto;
  border-radius: var(--bs-radius-xl);
  box-shadow: 0 16px 36px rgba(20, 17, 15, 0.12), 0 4px 9px rgba(20, 17, 15, 0.05);
  background: var(--bs-wa-bg);
}
.evidence-doc {
  position: absolute; z-index: 2;
  right: 0; top: 3%;
  width: 64%; display: block; height: auto;
  border: var(--bs-rule) solid var(--bs-line);
  border-radius: var(--bs-radius-sm);
  box-shadow: 0 20px 44px rgba(20, 17, 15, 0.15), 0 5px 12px rgba(20, 17, 15, 0.06);
  transform: rotate(0.8deg);
  transform-origin: 100% 50%;
}
/* A caption, not a sticker. The rotated red tag was doing a sales badge's
   job, which is exactly the register this pass exists to leave. */
.evidence-tag {
  position: absolute; z-index: 3;
  right: 2px; top: calc(3% - 24px);
  color: var(--bs-fg-3);
  font-family: var(--bs-font-body); font-weight: 700;
  font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase;
}
@media (max-width: 940px) {
  .evidence { max-width: 640px; margin: 0 auto; }
}
@media (max-width: 560px) {
  /* Two portrait images overlapping inside 390px leaves neither readable, and
     both have to stay whole. Side by side, document first — it is the thing
     being promised. */
  .evidence { display: flex; flex-direction: row-reverse; gap: var(--bs-space-3); align-items: flex-start; padding: 22px 0 0; }
  .evidence-phone { width: 41%; }
  .evidence-doc { position: static; width: 56%; transform: none; }
  .evidence-tag { top: 0; right: auto; left: 0; }
}

/* The number band, now a full-width ink strip under the hero rather than the
   bottom edge of a painted plate. */
.sign-band {
  background: var(--bs-ink-900);
  color: #fff;
  padding: var(--bs-space-4) var(--bs-space-6);
  border-radius: var(--bs-radius-md);
  margin-top: var(--bs-space-16);
  display: flex; align-items: center; justify-content: center; gap: var(--bs-space-6);
  flex-wrap: wrap;
  font-family: var(--bs-font-body); font-weight: 600;
  font-size: clamp(13px, 1.2vw, 15px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}
.sign-band .no { color: #fff; font-weight: 700; }
.sign-band .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--paint-green-600); flex: none; }
.closing .sign-band { margin: 0 clamp(-20px, -3.5vw, -48px); border-radius: 0; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.68); }
.closing .sign-band .no { color: #fff; }
.closing .sign-band .dot { background: var(--paint-green-600); }

/* ============================================================
   The document — a real GST invoice, drawn, not photographed
   ============================================================ */
.doc-paper {
  background: #fff;
  border: var(--bs-rule) solid var(--bs-line);
  border-radius: var(--bs-radius-sm);
  box-shadow: var(--bs-shadow-xl);
  padding: 20px;
  font-size: 13px; line-height: 1.45;
  color: var(--bs-ink-800);
  transform: rotate(-0.8deg);
  transform-origin: 50% 100%;
}
.hero .doc-paper { margin-bottom: var(--bs-space-10); }
@media (max-width: 900px) { .hero .doc-paper { max-width: 420px; margin: 0 auto var(--bs-space-10); } }

.doc-paper .doc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--bs-line-strong); padding-bottom: 10px; }
.doc-paper .firm { font-family: var(--bs-font-display); font-weight: 500; font-size: 21px; line-height: 1.1; letter-spacing: -0.018em; color: var(--bs-ink-900); }
.doc-paper .gstin { font-size: 11px; color: var(--bs-fg-3); letter-spacing: 0.02em; margin-top: 3px; }
.doc-paper .doc-kind { font-family: var(--bs-font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; background: var(--bs-ink-900); color: #fff; padding: 4px 9px; border-radius: var(--bs-radius-xs); white-space: nowrap; }
.doc-paper .doc-meta { display: flex; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--bs-ink-200); font-size: 11px; }
.doc-paper .doc-meta b { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bs-fg-3); }
.doc-paper table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.doc-paper th { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bs-fg-3); text-align: left; padding: 0 6px 6px 0; border-bottom: 1px solid var(--bs-ink-200); }
.doc-paper td { padding: 6px 6px 6px 0; border-bottom: 1px solid var(--bs-ink-100); font-size: 13px; }
.doc-paper th:last-child, .doc-paper td:last-child, .doc-paper .r { text-align: right; padding-right: 0; }
.doc-paper .doc-sum { margin-left: auto; width: 62%; margin-top: 10px; font-size: 13px; }
.doc-paper .doc-sum div { display: flex; justify-content: space-between; padding: 3px 0; }
.doc-paper .doc-sum .grand { border-top: 1px solid var(--bs-line-strong); margin-top: 5px; padding-top: 7px; font-family: var(--bs-font-display); font-weight: 500; font-size: 21px; line-height: 1.1; letter-spacing: -0.015em; color: var(--bs-ink-900); }
.doc-paper .doc-foot { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--bs-ink-200); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--bs-fg-3); }
.doc-paper .words { font-style: italic; max-width: 62%; }
.doc-paper .qr { width: 52px; height: 52px; flex: none; }

/* Says out loud that this is an example, so nobody reads it as a real sale. */
.doc-stamp {
  position: absolute; z-index: 2;
  right: 0; top: -22px;
  color: var(--bs-fg-3);
  font-family: var(--bs-font-body); font-weight: 700;
  font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase;
}
.doc-wrap { position: relative; }

/* ============================================================
   The confirm demo — the product's actual loop, on the page
   ------------------------------------------------------------
   BillSathi never generates silently: it restates what it heard
   and waits. That step is the whole trust argument, so it is
   dramatized rather than described. Values BillSathi INFERRED
   are set apart from values the owner SAID, and resolve when
   the owner confirms.
   ============================================================ */
.wa {
  max-width: 440px; width: 100%; margin-left: auto;
  border: var(--bs-rule) solid var(--bs-line);
  border-radius: var(--bs-radius-xl);
  overflow: hidden;
  box-shadow: 0 22px 48px rgba(20, 17, 15, 0.14), 0 5px 12px rgba(20, 17, 15, 0.06);
  background: var(--bs-wa-bg);
}
.wa-top { background: var(--bs-wa-header); color: #fff; padding: 11px var(--bs-space-4); display: flex; align-items: center; gap: 10px; }
.wa-top .av { width: 34px; height: 34px; border-radius: 50%; background: #fff; flex: none; display: grid; place-items: center; overflow: hidden; }
.wa-top .av img { width: 24px; height: 24px; }
.wa-top b { font-size: 15px; font-weight: 700; line-height: 1.2; display: block; }
.wa-top span { font-size: 11px; opacity: 0.85; }
.wa-body { padding: var(--bs-space-4); display: flex; flex-direction: column; gap: 10px; min-height: 430px; }

.wa-msg { max-width: 86%; padding: 8px 11px; border-radius: 9px; font-size: 15px; line-height: 1.5; box-shadow: 0 1px 1px rgba(20, 17, 15, 0.12); position: relative; }
.wa-out { align-self: flex-end; background: var(--bs-wa-bubble-out); border-top-right-radius: 2px; }
.wa-in  { align-self: flex-start; background: var(--bs-wa-bubble-in); border-top-left-radius: 2px; }
.wa-msg .wa-time { display: block; text-align: right; font-size: 11px; color: var(--bs-fg-3); margin-top: 3px; }
.wa-time .tick { color: var(--bs-wa-tick); font-weight: 700; }

/* A voice note, drawn. */
.wa-voice { display: flex; align-items: center; gap: 9px; min-width: 210px; }
.wa-voice .play { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--bs-wa-header); display: grid; place-items: center; }
.wa-voice .play svg { width: 11px; height: 11px; color: #fff; }
.wa-voice .wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 20px; }
.wa-voice .wave i { flex: 1; background: var(--bs-ink-300); border-radius: 1px; display: block; }
.wa-voice .dur { font-size: 11px; color: var(--bs-fg-3); font-variant-numeric: tabular-nums; }

/* The extracted table. */
.wa-extract { width: 100%; font-size: 13px; }
.wa-extract .hd { font-weight: 700; color: var(--bs-ink-900); margin-bottom: 6px; }
.wa-extract dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; }
.wa-extract dt { color: var(--bs-fg-3); font-size: 13px; }
.wa-extract dd { margin: 0; color: var(--bs-ink-900); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
/* Inferred: BillSathi worked this out rather than being told it. Dotted, so
   the owner's eye lands on exactly what to check. */
.wa-extract .inferred { font-weight: 500; color: var(--bs-fg-2); border-bottom: 1px dotted var(--bs-fg-4); transition: color var(--bs-dur-slow) var(--bs-ease), border-color var(--bs-dur-slow) var(--bs-ease); }
.wa-confirmed .wa-extract .inferred { color: var(--bs-ink-900); font-weight: 600; border-bottom-color: transparent; }
.wa-extract .wa-legend { font-size: 13px; line-height: 1.45; color: var(--bs-fg-3); margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--bs-ink-150); }
.wa-legend i { border-bottom: 1px dotted var(--bs-fg-4); font-style: normal; }

.wa-btns { display: flex; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--bs-ink-150); }
.wa-btns span { flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: var(--bs-wa-header); padding: 6px 4px; border-radius: 6px; background: var(--bs-ink-50); }
.wa-btns span.hit { background: var(--bs-wa-header); color: #fff; }

.wa-file { display: flex; align-items: center; gap: 10px; min-width: 240px; }
.wa-file .ico { width: 28px; height: 34px; background: none; border-radius: 0; margin: 0; }
.wa-file > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-file b { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--bs-ink-900); }
.wa-file > span > span { font-size: 11px; color: var(--bs-fg-3); }

/* ============================================================
   The document wall — six plates, deliberately unequal
   ------------------------------------------------------------
   Not one card size repeated six times. A wall of shop boards
   is never uniform, and the two documents owners reach for most
   get the bigger boards.
   ============================================================ */
.doc-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--bs-space-5); }
.doc-plate { grid-column: span 2; display: flex; flex-direction: column; gap: var(--bs-space-3); }
.doc-plate.wide { grid-column: span 3; }
.doc-plate.full { grid-column: span 6; flex-direction: row; align-items: center; gap: var(--bs-space-6); flex-wrap: wrap; }
.doc-plate.full .tag, .doc-plate.full h3 { flex: none; }
.doc-plate.full p:not(.said) { flex: 1 1 260px; margin: 0; }
.doc-plate.full .said { margin-top: 0; }
@media (max-width: 900px) {
  .doc-wall { grid-template-columns: repeat(2, 1fr); }
  /* The full-width plate keeps span 6 on a 2-track grid otherwise, which is
     what pushed the mobile document to 850px against a 390px viewport. */
  .doc-plate, .doc-plate.wide, .doc-plate.full { grid-column: span 1; }
  .doc-plate.full { flex-direction: column; align-items: flex-start; gap: var(--bs-space-3); }
  .doc-plate.full p:not(.said) { flex: initial; }
}
@media (max-width: 560px) {
  /* Six single-file cards is a minute of scrolling for a list whose job is
     to be taken in at a glance. Two tracks, and on a phone the NAME is the
     whole message — a shopkeeper reading "Delivery challans" already knows
     what one is. The description and the example line are desktop detail. */
  .doc-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bs-space-3); }
  .doc-plate .said, .doc-plate p { display: none; }
  .doc-plate { gap: var(--bs-space-1); padding: var(--bs-space-4) var(--bs-space-3); border: var(--bs-rule) solid var(--bs-line); border-radius: var(--bs-radius-md); }
  .doc-plate h3 { font-size: 17px; line-height: 1.25; }
  .doc-plate.full { flex-direction: column; align-items: flex-start; gap: var(--bs-space-1); }
}

.doc-plate .tag {
  font-family: var(--bs-font-body); font-weight: 700;
  font-size: 11px; line-height: 1;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paint-green-800);
}

.doc-plate h3 { font-size: clamp(19px, 1.9vw, 24px); }
.doc-plate p { font-size: 15px; margin: 0; color: var(--bs-fg-2); }
/* The sentence an owner actually says out loud. Set in the display face so
   it reads as speech on a board, not as a code sample. */
.said {
  margin-top: auto;
  font-family: var(--bs-font-display); font-weight: 400; font-style: italic;
  font-size: clamp(17px, 1.5vw, 19px); line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--bs-fg-2);
  border-left: 2px solid var(--paint-green-600);
  padding: 2px 0 2px 14px;
}
.said::before { content: "\201C"; }
.said::after { content: "\201D"; }

/* ============================================================
   Steps — the sequence IS the information here, so it is numbered
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bs-space-8); }
@media (max-width: 880px) { .steps { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }
@media (max-width: 560px) {
  .steps { gap: var(--bs-space-6); }
  .step { gap: var(--bs-space-3); }
  .step p { font-size: 15px; }
}
.step { display: flex; flex-direction: column; gap: var(--bs-space-4); }
.step-hd { display: flex; align-items: center; gap: var(--bs-space-4); }
.step p { margin: 0; font-size: 17px; }
.step p:last-child { margin-top: auto; }
.step .ts { font-size: 15px; font-weight: 700; color: var(--paint-green-800); }

/* ============================================================
   Old way / BillSathi
   ============================================================ */
.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--bs-space-6); align-items: stretch; }
.ba > .plate { display: flex; flex-direction: column; }
@media (max-width: 880px) {
  /* Two columns survive to the smallest screen: the whole point of this
     block is reading one list against the other, and stacking them puts a
     scroll between the two halves of a single comparison. */
  .ba { grid-template-columns: 1fr 1fr; gap: var(--bs-space-2); }
  .ba .vs { grid-column: 1 / -1; grid-row: 1; justify-self: center; margin-bottom: var(--bs-space-3); }
  .ba > .plate { grid-row: 2; padding: var(--bs-space-4) var(--bs-space-3); }
  .ba h3 { font-size: 19px; }
  .ba li { font-size: 13px; line-height: 1.35; gap: 6px; }
  .ba li svg { width: 13px; height: 13px; margin-top: 2px; }
  .ba ul { gap: 9px; margin-top: var(--bs-space-3); }
  .ba .meta { font-size: 13px; padding-top: var(--bs-space-3); margin-top: var(--bs-space-4); }
  .ba .readout { font-size: 42px; margin-bottom: 0; }
  .ba .readout .unit { font-size: 10px; }
  /* The supporting paragraph cannot survive a 130px measure, and the two
     lists ARE the comparison — the prose only restates them. */
  .ba .readout-note { display: none; }
}
.ba .vs {
  align-self: center;
  font-family: var(--bs-font-body); font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bs-fg-3);
  background: var(--bs-bg);
  border: var(--bs-rule) solid var(--bs-line);
  border-radius: var(--bs-radius-pill); width: auto; height: auto;
  display: grid; place-items: center; padding: 7px 14px;
}
.ba ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: var(--bs-space-5) 0 0; }
.ba li { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; line-height: 1.5; }
.ba li svg { width: 19px; height: 19px; flex: none; margin-top: 3px; }
.ba .meta { margin-top: auto; padding-top: var(--bs-space-6); border-top: 1px solid currentColor; font-family: var(--bs-font-display); font-weight: 500; font-size: 21px; letter-spacing: -0.015em; }

/* ============================================================
   The market street — who uses it
   ------------------------------------------------------------
   Two rows of shop boards drifting past in opposite directions,
   the way a row of shopfronts reads when you walk a market. The
   loop is paused whenever it is off screen, and reduced motion
   gets a static wrapped row instead.
   ============================================================ */
.street { overflow: hidden; padding: var(--bs-space-2) 0; -webkit-mask-image: linear-gradient(to right, transparent, var(--bs-ink-900) 3%, var(--bs-ink-900) 97%, transparent); mask-image: linear-gradient(to right, transparent, var(--bs-ink-900) 3%, var(--bs-ink-900) 97%, transparent); }
.street + .street { margin-top: var(--bs-space-4); }
.street-track { display: flex; gap: var(--bs-space-4); width: max-content; }
/* One material, not four. Alternating black / marigold / vermilion slabs
   turned a row of trades into a row of highlighter pens. */
.shopboard {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px var(--bs-space-5);
  border: var(--bs-rule) solid var(--bs-line);
  border-radius: var(--bs-radius-pill);
  background: #fff;
  font-family: var(--bs-font-body); font-weight: 600;
  font-size: 15px; line-height: 1; letter-spacing: -0.005em;
  color: var(--bs-fg-2);
  white-space: nowrap;
  box-shadow: var(--bs-shadow-xs);
}
.shopboard svg { width: 18px; height: 18px; flex: none; color: var(--paint-green-700); }
.shopboard:nth-child(3n+2) { background-color: var(--bs-bg-alt); }

/* ============================================================
   The proof number
   ------------------------------------------------------------
   Every number on this site sits next to the thing that makes
   it true. A bare metric with a label under it is the template
   the old homepage used, and it is what let five invented
   award badges sit in the same row as a real figure.
   ============================================================ */
.readout {
  display: flex; align-items: baseline; gap: var(--bs-space-3);
  font-family: var(--bs-font-display); font-weight: 400;
  font-size: clamp(60px, 8vw, 100px); line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0 0 var(--bs-space-2);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.readout .unit { font-family: var(--bs-font-body); font-size: 0.17em; font-weight: 700; color: var(--paint-green-500); letter-spacing: 0.1em; text-transform: uppercase; }
.readout-note { font-size: 15px; color: var(--bs-fg-on-ink-2); margin: 0 0 var(--bs-space-5); max-width: 40ch; }

/* ============================================================
   Pricing
   ============================================================ */
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bs-space-6); max-width: 900px; margin: 0 auto; align-items: stretch; }
/* Below 800px the plans stop stacking and become a deck you swipe. Two full
   plan cards stacked is ~1400px of scrolling before the page continues, and
   an owner comparing them cannot see one while reading the other. Native
   scroll-snap does the swiping; script only adds the dots and the drift. */
@media (max-width: 800px) {
  .price-grid {
    display: flex;
    grid-template-columns: none;
    gap: var(--bs-space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* The ribbon hangs above its card and would be clipped by the scroller. */
    padding: 18px var(--bs-space-5) var(--bs-space-2);
    margin: 0 calc(var(--bs-space-5) * -1);
  }
  .price-grid::-webkit-scrollbar { display: none; }
  .price-grid > .pl {
    flex: 0 0 86%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}
/* The dots are built by script from the cards present, so a third plan needs
   no markup here. Without script the deck is still swipeable, just undotted. */
.pl-dots { display: none; }
@media (max-width: 800px) {
  html.js .pl-dots {
    display: flex; justify-content: center; gap: 8px;
    margin-top: var(--bs-space-4);
  }
  .pl-dots button {
    width: 7px; height: 7px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--bs-ink-200);
    cursor: pointer;
    transition: background-color var(--bs-dur) var(--bs-ease), width var(--bs-dur) var(--bs-ease);
  }
  .pl-dots button[aria-current="true"] { background: var(--paint-green-700); width: 18px; border-radius: 4px; }
}
.pl { display: flex; flex-direction: column; }
.pl-name { font-family: var(--bs-font-display); font-weight: 500; font-size: 30px; line-height: 1.1; letter-spacing: -0.022em; }
.pl-price { font-family: var(--bs-font-display); font-weight: 400; font-size: clamp(42px, 5.2vw, 60px); line-height: 1; letter-spacing: -0.03em; margin: var(--bs-space-4) 0 var(--bs-space-2); font-variant-numeric: tabular-nums; }
.pl .pl-price small { font-family: var(--bs-font-body); font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--bs-fg-3); }
.pl.pl-ink .pl-price small, .pl.pl-ink .pl-quota small { color: var(--bs-fg-on-ink-2); }
.pl .pl-for { font-size: 15px; margin: 0 0 var(--bs-space-5); color: var(--bs-fg-3); }
.pl.pl-ink .pl-for { color: var(--bs-fg-on-ink-2); }
.pl-quota {
  font-family: var(--bs-font-display); font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -0.018em;
  border-top: 1px solid var(--bs-line); border-bottom: 1px solid var(--bs-line);
  padding: var(--bs-space-4) 0; margin-bottom: var(--bs-space-5);
}
.pl .pl-quota small { display: block; font-family: var(--bs-font-body); font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0; margin-top: 5px; color: var(--bs-fg-3); }
.pl ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0 0 var(--bs-space-6); }
.pl li { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.pl li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.pl li.no { opacity: 0.62; }
.pl .btn { margin-top: auto; }
.pl-note { margin: var(--bs-space-3) 0 0; font-size: 13px; line-height: 1.5; text-align: center; }
.pl.pl-ink .pl-note { color: var(--bs-fg-on-ink-2); }
.pl.pl-ink .pl-quota { border-color: var(--bs-line-inv); }

.ribbon {
  position: absolute; top: -1px; right: var(--bs-space-6);
  transform: translateY(-50%);
  background: var(--paint-green-800); color: #fff;
  border-radius: var(--bs-radius-pill);
  font-family: var(--bs-font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.11em; text-transform: uppercase;
  padding: 5px 14px;
  box-shadow: var(--bs-shadow-sm);
}

/* Billing period — painted tabs, not a decorative switch. */
.bp-toggle { display: inline-flex; align-items: center; gap: 0; border: var(--bs-rule) solid var(--bs-line); border-radius: var(--bs-radius-md); overflow: hidden; background: #fff; box-shadow: var(--bs-shadow-sm); }
.bp-toggle span[data-period] { padding: 10px var(--bs-space-5); font-size: 15px; font-weight: 600; cursor: pointer; color: var(--bs-fg-2); border-right: var(--bs-rule) solid var(--bs-line); transition: background-color var(--bs-dur-fast) var(--bs-ease), color var(--bs-dur-fast) var(--bs-ease); }
.bp-toggle span[data-period]:last-of-type { border-right: 0; }
.bp-toggle span[data-period]:hover { background: var(--bs-ink-50); }
.bp-toggle span[data-period].on { background: var(--bs-ink-900); color: #fff; }
.bp-save { display: inline-block; margin-left: var(--bs-space-4); font-weight: 700; font-size: 15px; color: var(--paint-red-600); }
.bp-save:empty { display: none; }

.topup-strip {
  max-width: 900px; margin: var(--bs-space-8) auto 0;
  padding: var(--bs-space-5) var(--bs-space-6);
  border: var(--bs-rule) dashed var(--bs-line-strong);
  border-radius: var(--bs-radius-lg);
  background: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: var(--bs-space-5); flex-wrap: wrap;
}
.topup-strip b { display: block; font-family: var(--bs-font-display); font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; color: var(--bs-ink-900); }
.topup-strip span { display: block; margin-top: 5px; color: var(--bs-fg-3); font-size: 15px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq details { border-bottom: var(--bs-rule) solid var(--bs-line); }
.faq details:first-of-type { border-top: var(--bs-rule) solid var(--bs-line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: var(--bs-space-4);
  padding: var(--bs-space-5) 0;
  font-family: var(--bs-font-display); font-weight: 500;
  font-size: clamp(19px, 1.9vw, 24px); line-height: 1.3;
  letter-spacing: -0.016em;
  color: var(--bs-ink-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 22px; height: 22px; margin-top: 5px;
  background: var(--bs-ink-400);
  transition: transform var(--bs-dur) var(--bs-ease-out), background-color var(--bs-dur) var(--bs-ease);
  /* a painted plus */
  -webkit-mask: linear-gradient(var(--bs-ink-900) 0 0) center/100% 1.5px no-repeat, linear-gradient(var(--bs-ink-900) 0 0) center/1.5px 100% no-repeat;
  mask: linear-gradient(var(--bs-ink-900) 0 0) center/100% 1.5px no-repeat, linear-gradient(var(--bs-ink-900) 0 0) center/1.5px 100% no-repeat;
}
.faq summary:hover::after { background: var(--paint-green-700); }
.faq details[open] summary::after {
  background: var(--bs-ink-900);
  -webkit-mask: linear-gradient(var(--bs-ink-900) 0 0) center/100% 1.5px no-repeat;
  mask: linear-gradient(var(--bs-ink-900) 0 0) center/100% 1.5px no-repeat;
}
.faq .answer { padding: 0 var(--bs-space-10) var(--bs-space-6) 0; color: var(--bs-fg-2); font-size: 17px; max-width: 68ch; }

/* ============================================================
   Closing plate + footer
   ============================================================ */
.final-cta { padding: var(--bs-space-24) 0; background: var(--bs-bg); }
.closing {
  background-color: var(--bs-ink-900); color: #fff;
  border-radius: var(--bs-radius-2xl);
  padding: clamp(48px, 7vw, 88px) clamp(24px, 5vw, 72px) 0;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--bs-shadow-xl);
}
.closing h2 { color: #fff; }
.closing p { color: var(--bs-fg-on-ink-2); max-width: 48ch; margin: var(--bs-space-5) auto var(--bs-space-8); }
.closing .sign-band { border-top: 1px solid var(--bs-line-inv); }

.foot { background: var(--bs-ink-900); color: #fff; padding: var(--bs-space-16) 0 0; }
.foot-cols { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--bs-space-10); padding-bottom: var(--bs-space-10); border-bottom: 1px solid rgba(255,255,255,0.12); }
@media (max-width: 880px) { .foot-cols { grid-template-columns: 1fr 1fr; gap: var(--bs-space-8); } .foot-brand { grid-column: 1 / -1; } }
.foot-cols h6 { font-family: var(--bs-font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 0 0 var(--bs-space-4); }
.foot-cols ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.foot-cols a { color: rgba(255,255,255,0.74); font-size: 15px; font-weight: 500; text-decoration: none; }
.foot-cols a:hover { color: #fff; text-decoration: underline; }
.foot-cols li span { color: rgba(255,255,255,0.6); font-size: 15px; }
.foot-brand img { height: 30px; width: auto; }
.foot-brand p { color: rgba(255,255,255,0.6); font-size: 15px; line-height: 1.6; margin: var(--bs-space-4) 0 0; max-width: 34ch; }
.foot-legal { padding: var(--bs-space-5) 0 var(--bs-space-8); display: flex; justify-content: space-between; gap: var(--bs-space-4); flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,0.55); }
/* The tricolour, restored on the owner's instruction 2026-08-20. It was cut
   in the de-greening pass on the argument that saffron and green had become
   the site's own palette, so the stripe read as three brand slabs rather
   than as a flag. His call, his flag. Hard stops, not a blend — a flag has
   three bands, not a gradient. */
.foot-rule {
  height: 4px;
  background: linear-gradient(to right, #ff9933 0 33.33%, #ffffff 33.33% 66.66%, #138808 66.66% 100%);
}

/* ============================================================
   Forms
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--bs-space-5); }
.field label { font-size: 15px; font-weight: 700; color: var(--bs-ink-900); }
.field .hint { font-size: 13px; color: var(--bs-fg-3); }
.field input, .field select, .field textarea {
  font-family: var(--bs-font-body); font-size: 17px; color: var(--bs-ink-900);
  background: #fff;
  border: var(--bs-rule) solid var(--bs-line-strong);
  border-radius: var(--bs-radius-sm);
  padding: 12px var(--bs-space-4);
  width: 100%;
  transition: box-shadow var(--bs-dur-fast) var(--bs-ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--bs-fg-3); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--bs-ink-900); }
.form-msg { margin-top: var(--bs-space-4); padding: var(--bs-space-4); border: var(--bs-rule) solid var(--bs-line); border-radius: var(--bs-radius-sm); font-size: 15px; font-weight: 600; }
.form-msg.ok { background: var(--paint-green-100); color: var(--paint-green-900); }
.form-msg.err { background: var(--paint-red-100); color: var(--paint-red-800); }

/* ============================================================
   Long-form reading (legal, DPDPA, policies)
   ============================================================ */
.doc-page { padding: var(--bs-space-16) 0 var(--bs-space-24); }
.doc-page .prose h2 { margin: var(--bs-space-16) 0 var(--bs-space-5); font-size: clamp(24px, 3vw, 42px); }
.doc-page .prose h3 { margin: var(--bs-space-10) 0 var(--bs-space-3); font-size: clamp(19px, 2vw, 24px); }
.doc-page .prose p { margin: 0 0 var(--bs-space-4); }
.doc-page .prose ul, .doc-page .prose ol { margin: 0 0 var(--bs-space-5) var(--bs-space-6); }
.doc-page .prose li { margin-bottom: 7px; padding-left: 4px; }
.doc-page .prose ul { list-style: square; }
.doc-page .prose ol { list-style: decimal; }
.doc-page .prose li::marker { color: var(--paint-green-700); font-weight: 700; }
.doc-page .prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--bs-space-6); font-size: 15px; }
.doc-page .prose th { text-align: left; background: var(--bs-ink-900); color: #fff; padding: 10px 12px; font-size: 15px; font-weight: 700; }
.doc-page .prose td { padding: 10px 12px; border-bottom: 1px solid var(--bs-ink-200); vertical-align: top; }
.doc-page .updated { font-size: 15px; font-weight: 600; color: var(--bs-fg-3); }
.toc { position: sticky; top: 100px; align-self: start; }
.toc ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.toc a { font-size: 15px; font-weight: 600; color: var(--bs-fg-2); text-decoration: none; border-left: var(--bs-rule) solid var(--bs-line); padding-left: var(--bs-space-3); display: block; }
.toc a:hover { color: var(--bs-ink-900); border-left-color: var(--paint-green-700); }
.doc-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--bs-space-16); }
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; gap: var(--bs-space-8); } .toc { position: static; } }

/* ============================================================
   Utilities
   ============================================================ */
.center { text-align: center; }
.row { display: flex; align-items: center; gap: var(--bs-space-3); flex-wrap: wrap; }
.row.center { justify-content: center; }
.col { display: flex; flex-direction: column; gap: var(--bs-space-3); }
.between { justify-content: space-between; }
.mt-2 { margin-top: var(--bs-space-2); } .mt-3 { margin-top: var(--bs-space-3); }
.mt-4 { margin-top: var(--bs-space-4); } .mt-5 { margin-top: var(--bs-space-5); }
.mt-6 { margin-top: var(--bs-space-6); } .mt-8 { margin-top: var(--bs-space-8); }
.mt-10 { margin-top: var(--bs-space-10); } .mt-12 { margin-top: var(--bs-space-12); }
.max-720 { max-width: 720px; margin-left: auto; margin-right: auto; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split.top { align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: minmax(0, 1fr); } }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================================================
   MOTION
   ------------------------------------------------------------
   The budget is four moments, not an effect per section:

     1. THE WIPE    the hero headline is revealed once, left to
                    right, as if written. This is the only
                    entrance animation on the site.
     2. THE CONFIRM the WhatsApp exchange plays itself once, so
                    the visitor watches the mechanism instead of
                    reading a claim about it.
     3. THE STREET  shop boards drift past like a market row.
     4. THE READOUT the five-second figure counts to itself.

   Everything else is state feedback measured in milliseconds.
   Every one of them starts from a state that is already
   complete, so a failed script or a blocked animation leaves a
   finished page rather than an empty one.
   ============================================================ */

/* ── 1. The wipe ────────────────────────────────────────────
   Default (no JS): the finished headline. With JS: it is
   revealed left to right in one pass, the way a line is written
   rather than the way a card fades in. The text-stroke ghost
   underneath is gone — with a serif at 66px it read as a second,
   blurred headline, which is exactly the doubling this pass was
   opened to fix. */
.paint-sweep { position: relative; display: block; }

@media (prefers-reduced-motion: no-preference) {
  html.js .paint-sweep {
    clip-path: inset(0 100% 0 0);
    will-change: clip-path;
    animation: brush var(--bs-dur-paint) var(--bs-ease-out) 160ms forwards;
  }
}
@keyframes brush { to { clip-path: inset(0 0 0 0); } }

/* ── 2. The confirm ─────────────────────────────────────────
   .wa--anim is added by script, so without script every bubble
   is simply present. .is-playing starts the sequence when the
   thread scrolls into view; it runs once and rests finished. */
.wa--anim .wa-step { opacity: 0; transform: translateY(10px); }
.wa--anim.is-playing .wa-step {
  animation: wa-arrive 320ms var(--bs-ease-out) forwards;
}
.wa--anim.is-playing .wa-step:nth-child(1) { animation-delay: 100ms; }
.wa--anim.is-playing .wa-step:nth-child(2) { animation-delay: 900ms; }
.wa--anim.is-playing .wa-step:nth-child(3) { animation-delay: 2500ms; }
.wa--anim.is-playing .wa-step:nth-child(4) { animation-delay: 3400ms; }
@keyframes wa-arrive { to { opacity: 1; transform: none; } }

/* The tap that confirms. Short and physical: the button takes the press. */
.wa--anim.is-playing .wa-btns span.hit { animation: wa-tap 260ms var(--bs-ease) 2250ms both; }
@keyframes wa-tap {
  0%   { transform: none; }
  45%  { transform: scale(0.94); }
  100% { transform: none; }
}

/* The voice note's waveform, drawn as bars that hold still until played. */
.wa-voice .wave i { height: 30%; }
.wa-voice .wave i:nth-child(3n)   { height: 68%; }
.wa-voice .wave i:nth-child(3n+1) { height: 46%; }
.wa-voice .wave i:nth-child(5n)   { height: 90%; }

/* ── 3. The street ─────────────────────────────────────────── */
.street-track { animation: street 46s linear infinite; }
.street-track.rev { animation-direction: reverse; }
.street.is-off .street-track { animation-play-state: paused; }
/* One copy of three, so the seam lands where the next copy begins. */
@keyframes street { to { transform: translateX(-33.3333%); } }

/* ── 4. State feedback ──────────────────────────────────────
   Nothing here is longer than a fifth of a second. Feedback
   that takes longer stops reading as feedback and starts
   reading as latency. */
.shopboard { transition: transform var(--bs-dur-fast) var(--bs-ease); }
.shopboard:hover { transform: translateY(-2px); border-color: var(--bs-line-strong); }

/* ── Reduced motion ────────────────────────────────────────
   Fewer and gentler, not none. Every state change that carries
   meaning — a press, an open panel, a confirmed value — keeps
   its transition; what goes is travel and anything that plays
   on its own.  */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Restore the transitions that ARE the feedback. */
  .btn, .faq summary::after, .wa-extract .inferred, .field input, .field textarea {
    transition-duration: var(--bs-dur-fast) !important;
  }
  .wa--anim .wa-step { opacity: 1; transform: none; }
  .street { -webkit-mask-image: none; mask-image: none; }
  .street-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .plate-hover:hover { transform: none; }
  .shopboard:hover { transform: none; }
}

/* ============================================================
   Legal, policy and disclosure pages
   ------------------------------------------------------------
   Four pages used to carry four near-identical <style> blocks,
   which is how they drifted apart. One system here instead.
   Mode is Read: structure for comprehension first, then make
   the reading worth staying in. Same paint world, quieter — the
   plates are outlined, not filled, because a policy page that
   shouts is a policy page nobody finishes.
   ============================================================ */
.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: var(--bs-space-16); max-width: 1120px; margin: 0 auto; }
@media (max-width: 940px) { .legal-layout { grid-template-columns: minmax(0, 1fr); gap: var(--bs-space-8); } }

.legal-head { max-width: 1120px; margin: 0 auto var(--bs-space-12); }
.meta-row {
  display: flex; gap: var(--bs-space-6); flex-wrap: wrap;
  margin-top: var(--bs-space-5); padding-top: var(--bs-space-4);
  border-top: var(--bs-rule) solid var(--bs-line);
  font-size: 15px; color: var(--bs-fg-3);
}
.meta-row b { color: var(--bs-ink-900); font-weight: 700; }

.legal-body > section { margin-bottom: var(--bs-space-16); scroll-margin-top: 110px; }
.legal-body > section:last-child { margin-bottom: 0; }
.legal-body h3 {
  font-family: var(--bs-font-display); font-weight: 500;
  font-size: clamp(21px, 2.2vw, 30px); line-height: 1.2;
  letter-spacing: -0.016em;
  color: var(--bs-ink-900);
  margin: 0 0 var(--bs-space-5);
  padding-bottom: var(--bs-space-3);
  border-bottom: 1px solid var(--bs-line);
}
.legal-body h4 { margin: var(--bs-space-6) 0 var(--bs-space-2); }
.legal-body p { font-size: 17px; line-height: 1.7; color: var(--bs-fg-2); margin: 0 0 var(--bs-space-4); max-width: 68ch; }
.legal-body ul, .legal-body ol { margin: 0 0 var(--bs-space-4) var(--bs-space-6); max-width: 68ch; }
.legal-body ul { list-style: square; }
.legal-body ol { list-style: decimal; }
.legal-body li { font-size: 17px; line-height: 1.7; color: var(--bs-fg-2); margin-bottom: 6px; padding-left: 4px; }
.legal-body li::marker { color: var(--paint-green-700); font-weight: 700; }
.legal-body a, .link { color: var(--paint-green-800); font-weight: 600; text-decoration: underline; }
.two-col-list { columns: 2; column-gap: var(--bs-space-8); }
@media (max-width: 640px) { .two-col-list { columns: 1; } }

/* Contents rail */
.toc { position: sticky; top: 100px; align-self: start; }
.toc h6 { font-family: var(--bs-font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--bs-fg-3); margin: 0 0 var(--bs-space-4); }
.toc ol, .toc ul { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; }
.toc a { display: block; font-size: 15px; font-weight: 600; color: var(--bs-fg-2); text-decoration: none; padding: 6px var(--bs-space-3); border-left: var(--bs-rule) solid var(--bs-line); }
.toc a:hover { color: var(--bs-ink-900); border-left-color: var(--paint-green-700); background: var(--bs-ink-50); }
.toc .related { margin-top: var(--bs-space-6); padding-top: var(--bs-space-4); border-top: var(--bs-rule) solid var(--bs-line); }

/* Tables carry real reference data on these pages, so they get the outline
   treatment rather than being left as browser defaults. */
.retention-table, .plans-table, .response-table, .compare-table {
  width: 100%; border-collapse: collapse; margin: 0 0 var(--bs-space-5);
  font-size: 15px; border: var(--bs-rule) solid var(--bs-line);
}
.retention-table th, .plans-table th, .response-table th, .compare-table th {
  background: var(--bs-ink-900); color: #fff; text-align: left;
  padding: 10px 14px; font-size: 15px; font-weight: 700;
}
.retention-table td, .plans-table td, .response-table td, .compare-table td {
  padding: 10px 14px; border-bottom: 1px solid var(--bs-ink-200); vertical-align: top; color: var(--bs-fg-2);
}
.retention-table tr:last-child td, .plans-table tr:last-child td,
.response-table tr:last-child td, .compare-table tr:last-child td { border-bottom: 0; }
.compare-table .group-row td { background: var(--bs-bg-alt); font-weight: 500; color: var(--bs-ink-900); font-family: var(--bs-font-display); font-size: 19px; letter-spacing: -0.015em; }
.compare-table .tick { color: var(--paint-green-700); font-weight: 700; }
.compare-table .no { color: var(--bs-fg-4); }

/* Small outlined plates used for sub-processors, rights, lawful bases. */
.sub-grid, .rights-grid, .basis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bs-space-4); margin-bottom: var(--bs-space-5); }
@media (max-width: 720px) { .sub-grid, .rights-grid, .basis-grid { grid-template-columns: 1fr; } }
/* The card list and the heading list were one rule, so every card inherited
   the heading's 22px display serif and NONE of them got a panel — which is
   why the DPDPA sub-processor grid rendered as bare full-bleed text. */
.sub-card, .right-card, .basis-card, .id-card, .dpo-card, .grievance-step,
.loc-card, .ct-card, .pillar, .confirm-card, .ic-card {
  border: var(--bs-rule) solid var(--bs-line);
  border-radius: var(--bs-radius-lg);
  background: #fff;
  padding: var(--bs-space-5);
}
.sub-card b, .right-card b, .basis-card b, .id-card b, .grievance-step b,
.sub-card h5, .right-card h5, .basis-card h5, .id-card h5, .grievance-step h5 { display: block; font-family: var(--bs-font-display); font-weight: 500; font-size: 19px; line-height: 1.3; letter-spacing: -0.018em; color: var(--bs-ink-900); margin-bottom: 6px; }
.sub-card p, .right-card p, .basis-card p, .id-card p,
.sub-card span, .right-card span, .basis-card span, .id-card span { display: block; font-size: 15px; line-height: 1.55; color: var(--bs-fg-2); }
.lbl { display: block; font-size: 13px; font-weight: 700; color: var(--bs-fg-3); margin-bottom: 2px; }
.dpo-card { font-family: var(--bs-font-display); font-weight: 500; font-size: 21px; line-height: 1.4; letter-spacing: -0.018em; background: var(--bs-bg-alt); }
.contact-pill { display: inline-block; padding: 6px 14px; border-radius: var(--bs-radius-pill); background: var(--paint-green-50); color: var(--paint-green-800); font-weight: 600; font-size: 15px; }
.version-history { display: flex; flex-direction: column; gap: 0; border: var(--bs-rule) solid var(--bs-line); border-radius: var(--bs-radius-md); overflow: hidden; }
.version-row { display: flex; gap: var(--bs-space-4); padding: var(--bs-space-4) var(--bs-space-5); border-bottom: 1px solid var(--bs-ink-200); font-size: 15px; color: var(--bs-fg-2); }
.version-row:last-child { border-bottom: 0; }
.version-row b { flex: none; width: 110px; color: var(--bs-ink-900); font-variant-numeric: tabular-nums; }
.grievance-step { display: flex; gap: var(--bs-space-4); align-items: flex-start; margin-bottom: var(--bs-space-3); }

/* ============================================================
   404 and payment-return
   ============================================================ */
.nf-wrap { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--bs-space-16) 0; }
/* The class lands on the image element on one page, a wrapper on another. */
.nf-logo { height: 62px; width: auto; margin: 0 auto var(--bs-space-8); }
.nf-logo img { height: 44px; width: auto; }
.nf-code { font-family: var(--bs-font-display); font-weight: 400; font-size: clamp(60px, 15vw, 170px); line-height: 0.9; letter-spacing: -0.04em; color: var(--bs-ink-400); font-variant-numeric: tabular-nums; margin: 0; }
.nf-title { margin: var(--bs-space-6) 0 0; }
.nf-msg { max-width: 52ch; margin: var(--bs-space-4) auto 0; color: var(--bs-fg-2); font-size: 17px; }
.nf-actions { display: flex; gap: var(--bs-space-4); flex-wrap: wrap; justify-content: center; margin-top: var(--bs-space-8); }

/* ============================================================
   Inner page header
   ------------------------------------------------------------
   A quiet panel, not an arc-topped board with bolts. Every page
   below the homepage opens on one, so the site keeps one rhythm.
   ============================================================ */
.pagehead { padding: var(--bs-space-8) 0 var(--bs-space-16); }
@media (max-width: 720px) { .pagehead { padding: var(--bs-space-5) 0 var(--bs-space-12); } }
.pagehead-plate {
  position: relative;
  background-color: var(--bs-bg-alt);
  border-radius: var(--bs-radius-2xl);
  padding: clamp(40px, 5.5vw, 76px) clamp(24px, 4vw, 56px);
  overflow: hidden;
  text-align: center;
}

.pagehead-plate > * { position: relative; z-index: 1; }
.closing > * { position: relative; z-index: 1; }
.pagehead-plate h1 { color: var(--bs-ink-900); }
.pagehead-plate .lead { color: var(--bs-fg-2); max-width: 60ch; margin: var(--bs-space-5) auto 0; }

/* Ink variant, for a page that opens on something heavier. */
.pagehead-plate.ink { background-color: var(--bs-ink-900); }
.pagehead-plate.ink .lead { color: var(--bs-fg-on-ink-2); }
.pagehead-plate.ink h1 { color: #fff; }

/* Drawn icons, one stroke weight throughout. No emoji anywhere on this site:
   an emoji is a different artist's icon set rendered by the operating system,
   and it changes shape per device. */
.ico {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--bs-radius-md);
  background: var(--paint-green-50);
  color: var(--paint-green-800);
  margin-bottom: var(--bs-space-4);
}


.input-grid, .pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bs-space-5); }
@media (max-width: 880px) { .input-grid, .pillars { grid-template-columns: 1fr; max-width: 560px; } }

/* A short labelled example under a card. Reuses the painted speech plate. */
.example { background: var(--bs-bg-alt); box-shadow: none; padding: var(--bs-space-4); margin-top: auto; }

/* Fact rows: a label, a rule, and the value. Used for the GST engine, the
   revision terms, the plan quotas — anywhere a bare stat row would have gone.
   Every value keeps the thing it is a value FOR on the same line. */
.facts { border: var(--bs-rule) solid var(--bs-line); border-radius: var(--bs-radius-md); overflow: hidden; background: #fff; }
.facts div { display: flex; gap: var(--bs-space-4); justify-content: space-between; align-items: baseline; padding: var(--bs-space-4) var(--bs-space-5); border-bottom: 1px solid var(--bs-ink-200); }
.facts div:last-child { border-bottom: 0; }
.facts dt, .facts .k { font-size: 15px; color: var(--bs-fg-2); }
.facts dd, .facts .v { margin: 0; font-family: var(--bs-font-display); font-weight: 500; font-size: 19px; line-height: 1.25; letter-spacing: -0.015em; color: var(--bs-ink-900); text-align: right; }
.facts .v.green { color: var(--paint-green-800); }

/* The confirm card, reused from the homepage demo's vocabulary. */
.confirm-card { max-width: 440px; }
.confirm-card .hd { font-family: var(--bs-font-display); font-weight: 500; font-size: 21px; letter-spacing: -0.018em; margin-bottom: var(--bs-space-4); }
.confirm-card .line { display: flex; justify-content: space-between; gap: var(--bs-space-4); padding: 8px 0; border-bottom: 1px solid var(--bs-ink-150); font-size: 15px; }
.confirm-card .line.total { border-bottom: 0; border-top: 1px solid var(--bs-line-strong); margin-top: 6px; padding-top: 10px; font-family: var(--bs-font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.022em; }
.confirm-card .actions { display: flex; gap: var(--bs-space-3); margin-top: var(--bs-space-5); }
.confirm-card .actions .btn { flex: 1; }

/* ============================================================
   The name, set as three painted plates
   ------------------------------------------------------------
   बिल + साथी = बिलसाथी. Devanagari is Poppins throughout — one
   family for every Hindi glyph on the site, reached through
   unicode-range rather than a per-element font override.
   ============================================================ */
.name-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--bs-space-4); align-items: stretch; }
@media (max-width: 880px) { .name-equation { grid-template-columns: 1fr; } .name-equation .op { justify-self: center; } }
.name-equation .op { align-self: center; font-family: var(--bs-font-display); font-weight: 400; font-size: 34px; line-height: 1; color: var(--bs-ink-300); }
.word-card { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.word-card .deva { font-family: var(--bs-font-hindi); font-weight: 600; font-size: clamp(30px, 4vw, 42px); line-height: 1.45; color: var(--paint-green-800); }
.word-card .latin { font-family: var(--bs-font-body); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: 0.11em; text-transform: uppercase; color: var(--bs-fg-3); }
.word-card p { font-size: 15px; line-height: 1.55; color: var(--bs-fg-2); margin: var(--bs-space-3) 0 0; }
.word-card.result { background: var(--bs-bg-alt); }

/* FAQ page: one painted band per category. */
.faq-cat { margin-bottom: var(--bs-space-16); scroll-margin-top: 110px; }
.faq-cat:last-child { margin-bottom: 0; }
.faq-cat-head { display: flex; align-items: center; gap: var(--bs-space-4); margin-bottom: var(--bs-space-5); }
/* The scale had no section-label role, so five headings hardcoded a clamp. */
.bs-h2.sub, h2.sub { font-size: clamp(24px, 3vw, 42px); }
.faq-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--bs-space-16); }
@media (max-width: 940px) { .faq-layout { grid-template-columns: minmax(0, 1fr); gap: var(--bs-space-8); } }

/* An inline <svg> with no width attribute fills its flex line — on the
   features page that rendered four 200px checkmarks down the left of a
   paragraph. Bound every icon that sits directly in a list item; the sized
   rules above (.pl li svg, .ba li svg, .chip svg, .ico svg) still win. */
li > svg { width: 19px; height: 19px; flex: none; margin-top: 3px; }

/* Two plates side by side should match height; a text-and-plate pair should
   not. .top tops them out, .even stretches them. */
.split.even { align-items: stretch; }
.split.even > .plate { display: flex; flex-direction: column; }

/* The one section that interrupts the page's white/grey beat runs on ink, so
   the fact rows have to invert with it. */
.section.ink .facts { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.35); }
.section.ink .facts div { border-bottom-color: rgba(255, 255, 255, 0.14); }
.section.ink .facts dt { color: var(--bs-fg-on-ink-2); }
.section.ink .facts dd, .section.ink .facts .v { color: #fff; }
.section.ink .facts .v.green { color: var(--paint-green-500); }
.section.ink h2, .section.ink h3, .section.ink h4 { color: #fff; }
.section.ink p { color: var(--bs-fg-on-ink-2); }

/* The three input routes as a numbered list, ruled between: a numeral, the
   route name, and the same quoted line the document wall uses. It was three
   same-size icon cards with a nested quote box inside each, which is the
   first thing the craft floor refuses. */
.routes { list-style: none; display: flex; flex-direction: column; }
.routes li { display: flex; gap: var(--bs-space-6); padding: var(--bs-space-8) 0; border-bottom: var(--bs-rule) solid var(--bs-line); }
.routes li:first-child { border-top: var(--bs-rule) solid var(--bs-line); }
.routes li > div { display: flex; flex-direction: column; gap: var(--bs-space-3); max-width: 68ch; }
.routes p { margin: 0; }
.routes .said { align-self: flex-start; margin-top: var(--bs-space-2); }
@media (max-width: 640px) { .routes li { gap: var(--bs-space-4); padding: var(--bs-space-6) 0; } }

/* A quiet passage, so the passage after it can be dense again. One line, one
   colour, nothing else on the band. */
.section.breath { padding: var(--bs-space-24) 0; }
@media (max-width: 720px) { .section.breath { padding: var(--bs-space-16) 0; } }
.statement {
  font-family: var(--bs-font-display); font-weight: 400;
  font-size: clamp(24px, 3.4vw, 42px); line-height: 1.22;
  letter-spacing: -0.022em;
  color: var(--bs-ink-900);
  max-width: 26ch; margin: 0;
  text-wrap: balance;
}

/* A label and one sentence is a definition list. Cards are for a set with
   parallel fields worth scanning across, like the sub-processor inventory. */
.deflist { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 0; margin: 0 0 var(--bs-space-5); border-top: var(--bs-rule) solid var(--bs-line); }
.deflist dt { font-family: var(--bs-font-display); font-weight: 500; font-size: 21px; line-height: 1.3; letter-spacing: -0.018em; color: var(--bs-ink-900); padding: var(--bs-space-4) var(--bs-space-6) var(--bs-space-4) 0; border-bottom: 1px solid var(--bs-ink-200); }
.deflist dd { margin: 0; font-size: 17px; line-height: 1.6; color: var(--bs-fg-2); padding: var(--bs-space-4) 0; border-bottom: 1px solid var(--bs-ink-200); }
@media (max-width: 640px) {
  .deflist { grid-template-columns: 1fr; }
  .deflist dt { padding-bottom: 2px; border-bottom: 0; }
  .deflist dd { padding-top: 0; }
}



/* ============================================================
   PHONE
   ------------------------------------------------------------
   Everything below is the owner's read of the site on his own
   handset, 2026-08-20: the logo and the hero should sit centred,
   the number band is one line and not two, and a column that can
   survive at 390px keeps its second track rather than becoming a
   minute of scrolling. The two-track rules for the comparison,
   the document wall and the plan deck live with their components
   above; what is here is the parts that belong to no component.
   ============================================================ */
@media (max-width: 940px) {
  /* Centred mark, control on the right edge. The mark is the only thing in
     the rail on a phone, so anything other than centred reads as an
     accident of the desktop layout. */
  .nav-inner { position: relative; justify-content: center; }
  .brand { margin: 0; }
  .nav-right { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-left: 0; }
}

@media (max-width: 720px) {
  .hero-grid > div:first-child { text-align: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero .sign-deva { text-align: center; }
}

@media (max-width: 560px) {
  /* One line, always. It wrapped to two, which turned a single claim into
     what looked like two unrelated rows. */
  .sign-band {
    flex-wrap: nowrap;
    gap: 9px;
    padding: 11px var(--bs-space-4);
    font-size: 11px;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  .sign-band .no { font-size: 12px; }
  .sign-band .dot { width: 4px; height: 4px; }
  .closing .sign-band { margin-left: calc(var(--bs-space-5) * -1); margin-right: calc(var(--bs-space-5) * -1); }

  /* A phone-width CTA pair is two full-width buttons, not two half ones. */
  .hero-cta .btn { width: 100%; }

  .section-head p { font-size: 17px; }
  .pillars, .input-grid { gap: var(--bs-space-4); }
}