/* =====================================================================
   VittaFide design system
   Palette comes from the logo: emerald shield, amber growth line, ink-navy
   tile. "Paper" surfaces are bahi-khata pages: they mark what you can try.
   No nesting / @layer on purpose: older Android Chrome must still render it.
   ===================================================================== */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { /* the rupee sign only, subset from Inter latin-ext */
  font-family: "Inter";
  src: url("/assets/fonts/inter-rupee.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+20B9;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/jakarta-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { /* metric-matched fallback keeps text from jumping when Inter arrives */
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  --ink-950: #061116;
  --ink-900: #0a1a21;
  --ink-850: #0d222a;
  --ink-800: #122d37;
  --line: rgb(173 232 214 / 0.12);
  --line-strong: rgb(173 232 214 / 0.24);

  --text: #e8f2ef;
  --text-2: #a8bdb8;
  --text-3: #86a09a;

  --emerald: #3fd3a3;
  --emerald-deep: #1fa583;
  --emerald-ink: #052b20;
  --amber: #f2b544;
  --vermilion: #e5533d;
  --vermilion-deep: #c4361f; /* white text on it passes AA */

  --paper: #f3ecd8;
  --paper-ink: #13303a;
  --paper-ink-2: #4a666e;
  --paper-red: #b5341d;

  --fg: var(--text);
  --fg-2: var(--text-2);
  --focus: var(--amber);

  --font-display: "Plus Jakarta Sans", "Inter", "Inter Fallback", system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hi: "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", "Mangal", "Devanagari Sangam MN", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 64px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-block-size: 100vh;
  background: var(--ink-950);
  color: var(--fg);
  font: 400 1rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, picture { display: block; max-inline-size: 100%; }
img { block-size: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; word-spacing: 0.07em; }
p { text-wrap: pretty; }
[lang="hi"] { font-family: var(--font-hi); letter-spacing: 0; line-height: 1.5; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--emerald); color: var(--emerald-ink); }

.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: 12px; inset-block-start: -80px; z-index: 100; padding: 12px 18px; border-radius: var(--r-sm); background: var(--amber); color: #2a1c00; font-weight: 700; text-decoration: none; }
.skip-link:focus { inset-block-start: 12px; }
.wrap { inline-size: 100%; max-inline-size: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.num, .ledger, .receipt, .closing, .rakam, .vasool__amt, .perms { font-variant-numeric: tabular-nums; }

/* ---------- Buttons, links, badges ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 48px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent;
  font: 700 1rem/1 var(--font-display); text-decoration: none; text-align: center;
  transition: background-color 0.2s, transform 0.2s var(--ease), border-color 0.2s;
}
.btn--primary { background: var(--emerald); color: var(--emerald-ink); }
.btn--primary:hover { background: #63e2b8; }
.btn--primary:active { transform: translateY(1px); }
.btn--sm { min-block-size: 44px; padding: 0 16px; font-size: 0.9375rem; }
.text-link { color: var(--emerald); font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.text-link:hover { text-decoration-thickness: 2px; }
.link-btn { background: none; border: 0; padding: 10px 4px; min-block-size: 44px; color: var(--fg-2); text-decoration: underline; text-underline-offset: 4px; font-size: 0.9375rem; }
.link-btn:hover { color: var(--fg); }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 600 0.8125rem/1.5 var(--font-body); background: rgb(255 255 255 / 0.08); color: var(--text); white-space: nowrap; }
.badge--green { background: rgb(63 211 163 / 0.14); color: var(--emerald); }
.badge--amber { background: rgb(242 181 68 / 0.16); color: var(--amber); }
.badge--red { background: rgb(229 83 61 / 0.16); color: #ff8a76; }

/* Store badges: official artwork, same height, clear space around each */
.store-row { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; }
.store-row--center { justify-content: center; }
.store-badge { position: relative; display: inline-block; block-size: 56px; border-radius: 10px; line-height: 0; transition: transform 0.2s var(--ease); }
.store-badge img { block-size: 100%; inline-size: auto; }
.store-badge:hover { transform: translateY(-2px); }
.store-badge__soon { display: none; }
.store-badge[data-state="soon"] { cursor: not-allowed; transform: none; }
.store-badge[data-state="soon"] img { opacity: 0.45; filter: grayscale(0.5); }
.store-badge[data-state="soon"] .store-badge__soon { /* a corner tag, so the badge itself stays readable */
  display: block; position: absolute; inset: -11px -8px auto auto;
  padding: 5px 11px; border-radius: 999px; background: var(--amber); color: #2a1c00;
  font: 700 0.75rem/1.2 var(--font-display); white-space: nowrap; box-shadow: 0 6px 16px -6px rgb(0 0 0 / 0.6);
}

/* ---------- Header ---------- */
.site-header { position: sticky; inset-block-start: 0; z-index: 50; background: rgb(6 17 22 / 0.82); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-block-end: 1px solid var(--line); }
.site-header__bar { display: flex; align-items: center; gap: 12px; min-block-size: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 1.25rem/1 var(--font-display); letter-spacing: -0.02em; margin-inline-end: auto; }
.brand img { border-radius: 8px; }
.site-nav { position: absolute; inset: calc(var(--header-h) - 4px) var(--gutter) auto; display: none; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--ink-900); box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.7); }
.site-nav.is-open { display: block; }
.site-nav a { display: flex; align-items: center; min-block-size: 48px; padding: 0 14px; border-radius: var(--r-sm); text-decoration: none; font-weight: 600; color: var(--text-2); }
.site-nav a:hover { background: var(--ink-800); color: var(--text); }
.nav-toggle { inline-size: 44px; block-size: 44px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 12px; background: transparent; }
.nav-toggle .icon--close, .nav-toggle[aria-expanded="true"] .icon--open { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }
@media (min-width: 860px) {
  .brand { margin-inline-end: 0; }
  .site-nav { position: static; display: block; padding: 0; border: 0; background: none; box-shadow: none; margin-inline: auto; }
  .site-nav ul { display: flex; gap: 4px; }
  .nav-toggle { display: none; }
}
@media (scripting: none) { .site-nav { display: block; position: static; box-shadow: none; } }

/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section--tint { background: linear-gradient(180deg, var(--ink-900), var(--ink-950)); border-block: 1px solid var(--line); }
.section__head { max-inline-size: 46rem; margin-block-end: clamp(32px, 5vw, 56px); }
.section__head h2, .privacy__lead h2, .faq__head h2 { font-size: clamp(1.875rem, 1.1rem + 2.8vw, 3rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
.hi { margin-block-start: 10px; font-size: 1.125rem; font-weight: 500; color: var(--amber); }
.section__lede { margin-block-start: 16px; font-size: 1.0625rem; color: var(--text-2); max-inline-size: 42rem; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(32px, 6vw, 80px) clamp(40px, 6vw, 72px); overflow: hidden; }
.hero::before { /* one soft emerald glow behind the phones; nothing else is glowing */
  content: ""; position: absolute; inset-inline-end: -10%; inset-block-start: -10%; inline-size: min(900px, 90vw); aspect-ratio: 1;
  background: radial-gradient(closest-side, rgb(63 211 163 / 0.16), transparent 70%); pointer-events: none;
}
.hero__grid { position: relative; display: grid; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2.25rem, 1rem + 6vw, 4.5rem); font-weight: 800; line-height: 1.03; letter-spacing: -0.04em; }
.h1-line { display: block; }
.hero__hi { margin-block-start: 18px; font-size: clamp(1.0625rem, 1rem + 0.6vw, 1.375rem); font-weight: 500; color: var(--amber); }
.hero__lede { margin-block-start: 20px; max-inline-size: 34rem; font-size: 1.0625rem; color: var(--text-2); }
.hero .store-row { margin-block-start: 28px; }
.hero__note { margin-block-start: 16px; font-size: 0.9375rem; color: var(--text-3); }

.hero__visual { position: relative; }
.phones { position: relative; inline-size: min(100%, 520px); aspect-ratio: 1 / 1.08; margin-inline: auto; }
.phone { position: absolute; padding: 6px; border-radius: 28px; background: linear-gradient(160deg, #1a2d35, #081015); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.13), 0 40px 70px -28px rgb(0 0 0 / 0.85); }
.phone__screen { overflow: hidden; border-radius: 22px; background: #0a0f12; }
.phone__screen img { inline-size: 100%; }
.phone--a { inset-inline-start: 3%; inset-block-start: 4%; inline-size: 55%; z-index: 2; }
.phone--b { inset-inline-end: 0; inset-block-start: 14%; inline-size: 49%; transform: rotate(3deg); }
.phone-chip {
  position: absolute; z-index: 3; inset-inline-start: 0; inset-block-start: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: rgb(10 26 33 / 0.92); font-size: 0.8125rem; font-weight: 600; color: var(--text);
  box-shadow: 0 12px 28px -10px rgb(0 0 0 / 0.7);
}
.phone-chip .icon { inline-size: 1rem; block-size: 1rem; color: var(--emerald); }

.proof { position: relative; display: grid; gap: 14px; margin-block-start: clamp(32px, 5vw, 56px); padding-block-start: 28px; border-block-start: 1px solid var(--line); }
.proof li { display: flex; gap: 12px; align-items: flex-start; }
.proof .icon { margin-block-start: 2px; color: var(--emerald); }
.proof strong { display: block; font: 700 0.9375rem/1.35 var(--font-display); }
.proof span { display: block; font-size: 0.875rem; color: var(--text-2); }

@media (min-width: 560px) { .proof { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 32px; }
  .proof { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* The one orchestrated moment on the page: the phones rise into place, then the badges and the proof chip fade in.
     Text and the phone images are never faded (translate only), so the largest paint (LCP) is not delayed. */
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes slide-in { from { transform: translateY(32px); } }
  @keyframes slide-in-b { from { transform: translateY(32px) rotate(3deg); } to { transform: rotate(3deg); } }
  .phone--a { animation: slide-in 0.9s var(--ease) 0.1s backwards; }
  .phone--b { animation: slide-in-b 0.9s var(--ease) 0.25s backwards; }
  .hero .store-row { animation: rise 0.6s var(--ease) 0.35s backwards; }
  .phone-chip { animation: rise 0.6s var(--ease) 0.7s backwards; }
}

/* ---------- Bento ---------- */
.bento { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.cell {
  display: flex; flex-direction: column; gap: 16px; min-inline-size: 0;
  padding: clamp(20px, 2.6vw, 28px); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-850), var(--ink-900));
}
.cell h3 { font-size: 1.3125rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.cell__head p { margin-block-start: 8px; font-size: 0.96875rem; color: var(--fg-2); }
.cell__fine { margin-block-start: auto; font-size: 0.875rem; color: var(--fg-2); }
@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell--lock { grid-column: span 2; }
}
@media (min-width: 1000px) { /* four rows: 7+5, 5+7, 4+4+4, 5+7 */
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .cell--khata, .cell--rakam, .cell--lock { grid-column: span 7; }
  .cell--trust, .cell--vasool, .cell--kharcha { grid-column: span 5; }
  .cell--print, .cell--ca, .cell--stock { grid-column: span 4; }
}

/* Paper cells: bahi-khata pages you can interact with */
.paper {
  --fg: var(--paper-ink); --fg-2: var(--paper-ink-2); --focus: #0b5e8a; --line: rgb(19 48 58 / 0.16);
  color: var(--fg);
  border-color: rgb(19 48 58 / 0.22); border-radius: var(--r-md);
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, transparent 13px, rgb(181 52 29 / 0.38) 13px, rgb(181 52 29 / 0.38) 14px, transparent 14px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgb(19 48 58 / 0.06) 31px 32px);
  box-shadow: 0 24px 48px -28px rgb(0 0 0 / 0.8);
}
.paper .cell__head, .paper > * { position: relative; }
.paper .chip { border-color: rgb(19 48 58 / 0.32); }
.paper .chip:hover { background: rgb(19 48 58 / 0.07); }

/* Khata demo */
.ledger { border: 1px solid var(--line); border-radius: var(--r-sm); background: rgb(255 255 255 / 0.45); }
.ledger__who { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-block-end: 1px solid var(--line); }
.avatar { inline-size: 40px; block-size: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-ink); color: var(--paper); font: 700 1.0625rem/1 var(--font-display); flex: none; }
.ledger__name { min-inline-size: 0; }
.ledger__name strong { display: block; font: 700 1rem/1.25 var(--font-display); }
.ledger__name small { font-size: 0.8125rem; color: var(--fg-2); }
.ledger__due { margin-inline-start: auto; text-align: end; font-size: 0.875rem; color: var(--fg-2); }
.ledger__due output { display: block; font: 800 1.375rem/1.1 var(--font-display); color: var(--paper-red); }
.ledger__due.is-clear output { color: #12795a; }
.ledger__lines li { display: grid; grid-template-columns: 12px 3.25rem minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px 16px; }
.ledger__lines li + li { border-block-start: 1px dashed var(--line); }
.ledger__date { font-size: 0.875rem; color: var(--fg-2); }
.ledger__note { min-inline-size: 0; overflow-wrap: anywhere; }
.ledger__amt { font-weight: 700; text-align: end; }
.dot { inline-size: 12px; block-size: 12px; border-radius: 50%; background: #c23b22; transition: background-color 0.3s; }
.is-part .dot { background: #d79a1f; }
.is-paid .dot { background: #1c9a74; }
.is-paid .ledger__amt { color: #12795a; }
.is-paid .ledger__note { text-decoration: line-through; text-decoration-color: rgb(19 48 58 / 0.4); }

.demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.demo-actions__label { font: 700 0.9375rem/1 var(--font-display); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-block-size: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-strong); background: transparent; font-weight: 700; transition: background-color 0.2s; }
.chip:hover { background: rgb(255 255 255 / 0.06); }
.demo-msg { margin-block-start: auto; min-block-size: 3em; padding: 10px 14px; border-radius: var(--r-sm); background: rgb(19 48 58 / 0.08); font-size: 0.9375rem; }
.demo-msg--dark { background: rgb(255 255 255 / 0.06); color: var(--text-2); }
.demo-msg.is-error { background: rgb(181 52 29 / 0.12); color: var(--paper-red); font-weight: 600; }

/* Trust Score demo */
@property --score { syntax: "<number>"; inherits: false; initial-value: 67; }
.trust { display: flex; align-items: center; gap: 20px; }
.ring { --score: 67; --ring: #8be0b0; flex: none; position: relative; inline-size: 116px; block-size: 116px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--ring) calc(var(--score) * 3.6deg), rgb(255 255 255 / 0.09) 0); transition: --score 0.7s var(--ease); }
.ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--ink-850); }
.ring__num { position: relative; font: 800 2.25rem/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ring[data-tier="reliable"] { --ring: #3fd3a3; }
.ring[data-tier="trusted"] { --ring: #8be0b0; }
.ring[data-tier="building"] { --ring: #f2b544; }
.ring[data-tier="attention"] { --ring: #f08a3c; }
.ring[data-tier="risk"] { --ring: #e5533d; }
.trust__label { font: 700 1.125rem/1.25 var(--font-display); }
.trust__hint { margin-block-start: 4px; font-size: 0.9375rem; color: var(--text-2); }
.scores { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-inline-size: 0; margin: auto 0 0; padding: 0; border: 0; }
.scores legend { padding: 0; margin-block-end: 10px; font-size: 0.875rem; color: var(--text-2); }
.scores label { position: relative; }
.scores input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.scores span { display: grid; place-items: center; min-inline-size: 48px; min-block-size: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; font: 700 1rem/1 var(--font-display); font-variant-numeric: tabular-nums; transition: background-color 0.2s, color 0.2s; }
.scores input:checked + span { background: var(--emerald); border-color: var(--emerald); color: var(--emerald-ink); }
.scores input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 3px; }

/* Vasool Raja demo */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 12px; align-self: flex-start; }
.seg button { min-block-size: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font-weight: 600; font-size: 0.9375rem; color: var(--text-2); }
.seg button[aria-pressed="true"] { background: var(--emerald); color: var(--emerald-ink); }
.vasool { display: grid; gap: 10px; }
.vasool li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgb(255 255 255 / 0.03); }
.vasool li.is-top { border-color: rgb(229 83 61 / 0.6); background: rgb(229 83 61 / 0.08); }
.vasool__rank { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 0.1); font: 700 0.8125rem/1 var(--font-display); }
.is-top .vasool__rank { background: var(--vermilion-deep); }
.vasool strong { display: block; font: 700 1rem/1.3 var(--font-display); }
.vasool small { font-size: 0.8125rem; color: var(--text-2); }
.vasool__amt { font: 700 1.0625rem/1 var(--font-display); color: #ff8a76; }
.tag { grid-column: 1 / -1; justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--vermilion-deep); color: #fff; font: 700 0.75rem/1.6 var(--font-display); }
@media (prefers-reduced-motion: no-preference) { /* lets the two rows glide when the sort order changes */
  [data-id="suresh"] { view-transition-name: vasool-suresh; }
  [data-id="ramesh"] { view-transition-name: vasool-ramesh; }
}
.vasool:not(.is-vasool) .vasool__rank { display: none; }
.vasool:not(.is-vasool) li { grid-template-columns: minmax(0, 1fr) auto; }

/* Rakam demo */
.rakam { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--fg-2); }
.field select, .field input { min-block-size: 48px; padding: 0 14px; border: 1px solid rgb(19 48 58 / 0.35); border-radius: 10px; background: rgb(255 255 255 / 0.6); color: var(--paper-ink); font-size: 1.0625rem; font-weight: 600; inline-size: 100%; }
.rakam__out { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--paper-ink); color: var(--paper); }
.rakam__qty { font: 800 2rem/1.1 var(--font-display); letter-spacing: -0.02em; }
.rakam__g { font-size: 1rem; color: #f2cf8a; }
.rakam__math { font-size: 0.875rem; color: var(--fg-2); }
@media (min-width: 1000px) {
  .rakam { grid-template-columns: 1fr 1fr; }
  .rakam .chips, .rakam__out, .rakam__math { grid-column: 1 / -1; }
}

/* Receipt */
.receipt {
  --tooth: 7px; align-self: center; margin-block: auto; inline-size: min(100%, 300px); padding: 18px 18px calc(18px + var(--tooth)); background: #f7f3e8; color: #1a2b30;
  font: 0.78125rem/1.55 var(--font-mono);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth)) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth)) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x;
}
.receipt__shop { text-align: center; font-weight: 700; padding-block-end: 8px; border-block-end: 1px dashed rgb(26 43 48 / 0.4); }
.receipt dl { padding-block: 8px; }
.receipt dl div { display: flex; justify-content: space-between; gap: 12px; }
.receipt dd { white-space: nowrap; }
.receipt__total { margin-block: 6px; padding-block: 6px; border-block: 1px dashed rgb(26 43 48 / 0.4); font-weight: 700; }
.receipt__foot { text-align: center; padding-block-start: 8px; border-block-start: 1px dashed rgb(26 43 48 / 0.4); }

/* Apna CA, stock, closing */
.weights { display: grid; gap: 12px; }
.weights div { display: grid; gap: 6px; }
.weights dt { font-size: 0.875rem; color: var(--text-2); }
.bar { block-size: 26px; border-radius: 8px; background: rgb(255 255 255 / 0.07); overflow: hidden; }
.bar span { display: flex; align-items: center; block-size: 100%; padding-inline: 10px; border-radius: 8px; background: linear-gradient(90deg, var(--emerald-deep), var(--emerald)); color: var(--emerald-ink); font: 700 0.8125rem/1 var(--font-display); transform-origin: left; }
.w-25 span { inline-size: 100%; } .w-20 span { inline-size: 80%; } .w-15 span { inline-size: 60%; }
.bar { max-inline-size: 100%; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes grow { from { transform: scaleX(0.02); } }
  .bar span { animation: grow 0.9s var(--ease) 0.1s backwards; }
}
.stock { display: grid; gap: 8px; }
.stock li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgb(255 255 255 / 0.03); font-weight: 500; }
.backups { display: grid; gap: 8px; }
.backups li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgb(255 255 255 / 0.03); }
.backups strong { display: block; font: 700 1rem/1.3 var(--font-display); }
.backups span { font-size: 0.875rem; color: var(--text-2); }
.closing { display: grid; gap: 0; }
.closing div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-block-end: 1px solid var(--line); }
.closing dt { color: var(--text-2); }
.closing dd { font-weight: 700; }
.closing .neg { color: #ff8a76; }
.closing__net { border-block-end: 0 !important; padding-block-start: 14px !important; }
.closing__net dt { color: var(--text); font-weight: 600; }
.closing__net dd { font: 800 1.5rem/1 var(--font-display); color: var(--emerald); }

/* ---------- Tabs (progressive: all panels stacked without JS) ---------- */
.tabs__panel + .tabs__panel { margin-block-start: 40px; }
.tabs__panel > h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-block-end: 18px; }
.tabs__body { display: grid; gap: 20px; }
.tabs__for { font-size: 1.0625rem; color: var(--text-2); margin-block-end: 16px; }
.ticks { display: grid; gap: 12px; }
.ticks li { position: relative; padding-inline-start: 28px; color: var(--text-2); }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: 0.5em; inline-size: 10px; block-size: 6px; border-inline-start: 2px solid var(--emerald); border-block-end: 2px solid var(--emerald); transform: rotate(-45deg); }
.ticks strong { color: var(--text); font-weight: 600; }
.tabs__body .cell__fine { margin-block-start: 18px; }
.example { align-self: start; display: grid; gap: 12px; padding: 24px; border-radius: var(--r-md); border: 1px solid rgb(19 48 58 / 0.22); background-color: var(--paper); color: var(--paper-ink); }
.example p { color: var(--paper-ink); }
.example__shop { font: 800 1.125rem/1.2 var(--font-display); color: var(--paper-red) !important; }
.tabs--js .tabs__panel > h3 { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tabs--js .tabs__panel + .tabs__panel { margin-block-start: 0; }
.tabs__list { display: flex; gap: 8px; margin: -8px -8px 20px; padding: 8px; overflow-x: auto; scrollbar-width: none; } /* padding leaves room for the focus ring */
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab { flex: none; min-block-size: 48px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: 12px; background: transparent; font: 700 1rem/1 var(--font-display); color: var(--text-2); transition: background-color 0.2s, color 0.2s; }
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] { background: var(--text); color: var(--ink-950); border-color: var(--text); }
@media (min-width: 860px) { .tabs__body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 40px; } }

/* ---------- Privacy ---------- */
.privacy { display: grid; gap: 40px; align-items: start; }
.privacy__lead .section__lede { margin-block-end: 20px; }
.perms { inline-size: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--ink-900); }
.perms__note { margin-block-start: 14px; }
.perms caption { text-align: start; padding-block-end: 12px; font: 700 1.0625rem/1.3 var(--font-display); }
.perms thead th { padding: 12px 18px; text-align: start; font-size: 0.8125rem; font-weight: 600; color: var(--text-3); background: var(--ink-850); }
.perms tbody th, .perms td { padding: 14px 18px; border-block-start: 1px solid var(--line); text-align: start; vertical-align: top; }
.perms tbody th { font-weight: 600; inline-size: 38%; }
.perms td span { display: inline-block; margin-inline-start: 6px; font-size: 0.9375rem; color: var(--text-2); }
.limits { margin-block-start: clamp(40px, 6vw, 72px); padding: clamp(20px, 3vw, 32px); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.limits h3 { font-size: 1.25rem; font-weight: 700; margin-block-end: 16px; }
.limits ul { display: grid; gap: 12px; }
.limits li { color: var(--text-2); }
.limits strong { color: var(--text); font-weight: 600; }
@media (min-width: 560px) { .limits ul { grid-template-columns: repeat(2, 1fr); gap: 16px 32px; } }
@media (min-width: 960px) { .privacy { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; } .limits ul { grid-template-columns: repeat(4, 1fr); } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 32px; }
.faq__head .section__lede { max-inline-size: 28rem; }
.faq__list details { border-block-start: 1px solid var(--line-strong); }
.faq__list details:last-child { border-block-end: 1px solid var(--line-strong); }
.faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 60px; padding-block: 14px; font: 600 1.0625rem/1.35 var(--font-display); cursor: pointer; list-style: none; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: ""; flex: none; inline-size: 16px; block-size: 16px; transition: transform 0.25s var(--ease); color: var(--emerald);
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list summary:hover { color: var(--emerald); }
.faq__body { padding-block-end: 22px; display: grid; gap: 12px; color: var(--text-2); max-inline-size: 42rem; }
.faq__body strong { color: var(--text); font-weight: 600; }
@media (min-width: 900px) { .faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 72px; } .faq__head { position: sticky; inset-block-start: calc(var(--header-h) + 32px); align-self: start; } }

/* ---------- Final CTA ---------- */
.cta { position: relative; padding-block: clamp(72px, 10vw, 128px); text-align: center; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 100%; background: radial-gradient(60% 80% at 50% 100%, rgb(63 211 163 / 0.14), transparent 70%); pointer-events: none; }
.cta__inner { position: relative; display: grid; justify-items: center; }
.cta__logo { border-radius: 18px; margin-block-end: 24px; box-shadow: 0 20px 40px -16px rgb(63 211 163 / 0.35); }
.cta h2 { font-size: clamp(2rem, 1.1rem + 3.4vw, 3.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; max-inline-size: 18ch; }
.cta .store-row { margin-block-start: 32px; }
.cta__help { margin-block-start: 28px; color: var(--text-2); }
.cta__help a { color: var(--emerald); text-underline-offset: 4px; }

/* ---------- Footer ---------- */
.site-footer { padding-block: 56px 32px; border-block-start: 1px solid var(--line); background: var(--ink-900); }
.site-footer__grid { display: grid; gap: 36px; }
.site-footer__brand p { margin-block-start: 12px; color: var(--text-2); font-size: 0.9375rem; }
.site-footer__brand p + p { margin-block-start: 2px; }
.foot-h { margin-block-end: 14px; font: 700 0.9375rem/1.2 var(--font-display); color: var(--text); }
.site-footer ul { display: grid; gap: 2px; }
.site-footer li a { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; color: var(--text-2); text-decoration: none; }
.site-footer li a:hover { color: var(--emerald); }
.site-footer .social { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; }
.site-footer .social a { inline-size: 44px; justify-content: center; border: 1px solid var(--line-strong); border-radius: 12px; }
.site-footer__fine + .site-footer__fine { margin-block-start: 10px; padding-block-start: 0; border-block-start: 0; }
.site-footer__fine { margin-block-start: 40px; padding-block-start: 24px; border-block-start: 1px solid var(--line); font-size: 0.875rem; color: var(--text-3); }
.site-footer [hidden], [data-bind-item][hidden] { display: none !important; }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: 48px; } }

/* ---------- Legal pages (privacy, terms) ---------- */
.legal-hero { padding-block: clamp(40px, 6vw, 80px) 8px; }
.legal-hero h1 { font-size: clamp(2.25rem, 1.2rem + 4vw, 3.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; }
.legal__meta { margin-block-start: 16px; color: var(--text-2); }
.legal__mirror { margin-block-start: 8px; font-size: 0.9375rem; color: var(--text-3); }
.legal { display: grid; gap: 32px; padding-block: 32px clamp(64px, 9vw, 112px); }
/* The contents list is collapsed by CSS on phones (never by JS after load), so nothing shifts while the page loads. */
.legal__toc { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--ink-900); }
.legal__toc-title { display: none; padding: 16px 18px 8px; font: 700 0.9375rem/1 var(--font-display); }
.legal__toc-toggle { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; min-block-size: 52px; padding: 0 18px; border: 0; background: none; font: 700 0.9375rem/1 var(--font-display); text-align: start; }
.legal__toc-toggle::after { content: ""; inline-size: 16px; block-size: 16px; color: var(--emerald); transition: transform 0.25s var(--ease);
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; }
.legal__toc-toggle[aria-expanded="true"]::after { transform: rotate(45deg); }
.legal__toc ol { display: none; padding: 0 8px 10px; }
.legal__toc.is-open ol { display: grid; }
@media (scripting: none) { .legal__toc ol { display: grid; } .legal__toc-toggle { display: none; } .legal__toc-title { display: block; } }
.legal__toc a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 0.9375rem; line-height: 1.35; }
.legal__toc a:hover { color: var(--text); background: var(--ink-800); }
.legal__toc a[aria-current="location"] { color: var(--emerald); background: rgb(63 211 163 / 0.1); font-weight: 600; }
.prose { max-inline-size: 44rem; }
.prose section { padding-block: 28px; border-block-start: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.prose section:first-child { border-block-start: 0; padding-block-start: 0; }
.prose h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-block-end: 14px; }
.prose h3 { margin-block: 22px 8px; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: var(--text); }
.prose p { margin-block-start: 12px; color: var(--text-2); }
.prose h2 + p { margin-block-start: 0; }
.prose p b { color: var(--text); font-weight: 600; }
.prose ul { display: grid; gap: 8px; margin-block-start: 12px; padding-inline-start: 22px; list-style: disc; color: var(--text-2); }
.prose ul li::marker { color: var(--emerald); }
.prose a { color: var(--emerald); text-underline-offset: 4px; }
.prose .fine { margin-block-start: 40px; font-size: 0.875rem; color: var(--text-3); }
@media (min-width: 960px) {
  .legal { grid-template-columns: 260px minmax(0, 1fr); gap: 64px; }
  .legal__toc-toggle { display: none; }
  .legal__toc-title { display: block; }
  .legal__toc ol { display: grid; }
  .legal__toc { position: sticky; inset-block-start: calc(var(--header-h) + 24px); align-self: start; max-block-size: calc(100vh - var(--header-h) - 48px); overflow: auto; }
}

/* ---------- 404 ---------- */
.lost { padding-block: clamp(72px, 12vw, 160px); }
.lost h1 { font-size: clamp(2.25rem, 1.2rem + 4vw, 3.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; max-inline-size: 16ch; }
.lost p { margin-block-start: 16px; max-inline-size: 32rem; color: var(--text-2); font-size: 1.0625rem; }
.lost .btn { margin-block-start: 28px; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .ring { transition: none; } }
@media (forced-colors: active) { .btn, .chip, .tabs__tab, .scores span { border: 1px solid ButtonText; } }