/* ==========================================================================
   LiquorHub — marketing site
   Ink and brass on warm bone: a shelf, not a shopfront.
   Tokens mirror apps/web/src/app/globals.css so the site and the app agree.
   No build step. Edit freely; every colour lives in the :root blocks below.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
/* Georgia sized to Fraunces' metrics (Fraunces sets ~91% as wide), so headings keep their line breaks
   when the webfont swaps in — no layout jump. Bold is declared separately: headings are 600/700, and a
   synthetic bold from the regular face would be far narrower than Fraunces. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  font-weight: 300 500;
  size-adjust: 91%;
  ascent-override: 97%;
  descent-override: 25%;
}
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia Bold"), local("Georgia-Bold");
  font-weight: 600 900;
  size-adjust: 91%;
  ascent-override: 97%;
  descent-override: 25%;
}

:root {
  color-scheme: light dark;

  /* product tokens (same values as the web app) */
  --background: #faf8f4;
  --surface: #ffffff;
  --foreground: #15161a;
  --muted: #6e6a63;
  --border: #e7e2d8;
  --primary: #1b2436;
  --primary-soft: #f2efe7;
  --accent: #a87a2c;
  --accent-soft: #f7efdd;
  --sheet-head: #1b2436;
  --danger: #a3271d;
  --danger-soft: #fbece9;
  --warning: #92591a;
  --warning-soft: #fcf2e2;
  --success: #1f6b4a;
  --success-soft: #e8f2ec;

  /* site-only tokens */
  --border-strong: #d8d0c1;
  --brass-text: #8a6220;          /* brass dark enough for small text on bone */
  --rule: rgba(27, 36, 54, 0.055); /* ledger lines */
  --btn: #1b2436;
  --btn-fg: #ffffff;
  --btn-hover: #2a3550;
  --band: #1b2436;                /* ink bands: marquee, stats, final CTA */
  --band-fg: #f4f0e8;
  --band-muted: #a7abb8;
  --band-line: rgba(244, 240, 232, 0.14);
  --band-brass: #d9b36a;
  --shelf-top: #e6d8bd;
  --shelf-face: #cdb58a;
  --shelf-shadow: rgba(92, 66, 22, 0.28);
  --phone-body: #11141b;
  --phone-edge: #2c3242;
  --header-bg: rgba(250, 248, 244, 0.86);

  --shadow-sm: 0 1px 0 rgba(21, 22, 26, 0.04), 0 1px 3px rgba(27, 36, 54, 0.06);
  --shadow-md: 0 1px 0 rgba(21, 22, 26, 0.04), 0 10px 28px -14px rgba(27, 36, 54, 0.22);
  --shadow-lg: 0 2px 0 rgba(21, 22, 26, 0.03), 0 30px 60px -28px rgba(27, 36, 54, 0.38), 0 14px 28px -18px rgba(27, 36, 54, 0.22);

  /* Latin fallbacks come before Devanagari so English never drops to a sans face while the webfonts
     load; Devanagari glyphs still reach Noto Sans Devanagari through per-glyph fallback. */
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", "Noto Sans Devanagari", serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Devanagari", monospace;

  --gutter: 16px;
  --maxw: 1200px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --header-h: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0d0f14;
    --surface: #15181f;
    --foreground: #eceae5;
    --muted: #9a958c;
    --border: #262a33;
    --primary: #3d4e72;
    --primary-soft: #1a2032;
    --accent: #d4a857;
    --accent-soft: #2a2113;
    --sheet-head: #202634;
    --danger: #e8897c;
    --danger-soft: #301815;
    --warning: #d9a85e;
    --warning-soft: #302411;
    --success: #6cc59a;
    --success-soft: #122a20;

    --border-strong: #353a46;
    --brass-text: #d4a857;
    --rule: rgba(236, 234, 229, 0.035);
    --btn: #d4a857;
    --btn-fg: #15120b;
    --btn-hover: #e2ba6d;
    --band: #1c2334;                /* lifted ink, so ink panels still read as panels on the dark page */
    --band-fg: #eceae5;
    --band-muted: #9a958c;
    --band-line: rgba(236, 234, 229, 0.1);
    --band-brass: #d4a857;
    --shelf-top: #3a3022;
    --shelf-face: #2a2218;
    --shelf-shadow: rgba(0, 0, 0, 0.55);
    --phone-body: #05070a;
    --phone-edge: #343b4b;
    --header-bg: rgba(13, 15, 20, 0.84);

    --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 12px 30px -14px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.03);
  }
}

@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; --header-h: 72px; } }

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 400 1rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent-soft); color: var(--foreground); }
.tabular, .num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--btn); color: var(--btn-fg); padding: 10px 14px; border-radius: 10px;
  text-decoration: none; font-weight: 600; transition: top .15s;
}
.skip-link:focus { top: 12px; }

.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }

/* Hindi picked on an earlier visit: the head script hides the page until main.js has swapped the text */
.lh-i18n-wait body { visibility: hidden; }

/* Hindi: Devanagari needs air, and no negative tracking */
:lang(hi) body { line-height: 1.75; }
:lang(hi) .display, :lang(hi) h1, :lang(hi) h2, :lang(hi) h3 { letter-spacing: 0 !important; line-height: 1.3 !important; }
:lang(hi) .display em, :lang(hi) .h2 em { font-style: normal; }
:lang(hi) .eyebrow, :lang(hi) .app-cap, :lang(hi) .kicker { letter-spacing: 0.02em; text-transform: none; }

/* ---------- 3. Type ------------------------------------------------------ */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.022em;
  line-height: 1.04;
}
.display em { font-style: italic; color: var(--brass-text); }
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 2.6vw + 1.1rem, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h2 em { font-style: italic; color: var(--brass-text); }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; line-height: 1.2; letter-spacing: -0.01em; }
.lead { font-size: clamp(1.04rem, 0.4vw + 0.95rem, 1.18rem); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.muted { color: var(--muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 0.78rem/1 var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brass-text);
}
.eyebrow .n { color: var(--muted); }
.eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.55; }

/* ---------- 4. Buttons & links ------------------------------------------ */
.btn {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: var(--h); padding: 0 1.2rem;
  border-radius: 12px; border: 1px solid transparent;
  font: 600 0.98rem/1.15 var(--font-body); letter-spacing: -0.005em;
  text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), color .18s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn); color: var(--btn-fg); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 20px -10px rgba(27, 36, 54, .55); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-outline { background: var(--surface); color: var(--foreground); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--foreground); }
.btn-brass { background: var(--band-brass); color: #15120b; }
.btn-brass:hover { background: #e6c47f; }
.btn-on-band { background: transparent; color: var(--band-fg); border-color: var(--band-line); }
.btn-on-band:hover { border-color: var(--band-fg); }
.btn-sm { --h: 40px; padding: 0 0.95rem; font-size: 0.92rem; border-radius: 10px; }
.btn-lg { --h: 52px; padding: 0 1.4rem; font-size: 1.02rem; }
.btn-block { width: 100%; }

.wa-ico { color: var(--success); }
.link-arrow {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none;
  color: var(--brass-text); border-bottom: 1px solid color-mix(in srgb, var(--brass-text) 35%, transparent);
  padding-bottom: 1px;
}
.link-arrow:hover { border-bottom-color: currentColor; }
.link-arrow svg { width: 16px; height: 16px; transition: transform .18s var(--ease); }
.link-arrow:hover svg { transform: translateX(2px); }

/* ---------- 5. Header ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--border); box-shadow: 0 6px 20px -16px rgba(27, 36, 54, .35); }
.header-inner { display: flex; align-items: center; gap: 12px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; margin-right: auto; }
.brand-tile { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 2px 6px -2px rgba(1, 35, 31, .45); }
.brand-word { font: 700 1.24rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--foreground); }
.brand-word span { color: var(--accent); }
.nav-desktop { display: none; }
.nav-desktop a, .header-link { white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-link, .header-cta { display: none; }

.lang-toggle {
  display: inline-flex; align-items: center; padding: 3px; gap: 2px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
}
.lang-toggle button {
  border: 0; background: transparent; cursor: pointer;
  min-height: 30px; padding: 0 10px; border-radius: 999px;
  font: 600 0.8rem/1 var(--font-body); color: var(--muted);
}
.lang-toggle button[lang="hi"] { font-family: "Noto Sans Devanagari", var(--font-body); font-size: 0.84rem; }
.lang-toggle button[aria-pressed="true"] { background: var(--btn); color: var(--btn-fg); }

.menu-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); cursor: pointer;
}
.menu-btn svg { width: 20px; height: 20px; }
.menu-btn .i-close { display: none; }
.menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }

.mobile-nav {
  position: absolute; left: 0; right: 0; top: 100%;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--background);
  box-shadow: 0 24px 40px -24px rgba(27, 36, 54, .35);
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-nav nav { padding: 8px 0 24px; }
.mobile-nav-links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 2px; border-bottom: 1px solid var(--border);
  font: 600 1.3rem/1.2 var(--font-display); letter-spacing: -0.01em; text-decoration: none;
}
.mobile-nav-links a::after { content: "→"; font-family: var(--font-body); font-size: 1rem; color: var(--accent); }
.mobile-nav-ctas { display: grid; gap: 10px; margin-top: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .mobile-nav:not([hidden]) { animation: drop .22s var(--ease); }
}
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
body.nav-open { overflow: hidden; }
body.nav-open::after { /* dim the page under the open menu; a tap on it closes the menu (main.js) */
  content: ""; position: fixed; inset: var(--header-h) 0 0; z-index: 40;
  background: rgba(13, 15, 20, 0.42);
}
@media (prefers-reduced-motion: no-preference) { body.nav-open::after { animation: fade .2s var(--ease); } }
@keyframes fade { from { opacity: 0; } }

@media (min-width: 600px) {
  .header-cta { display: inline-flex; }
}
@media (min-width: 1024px) {
  .menu-btn, .mobile-nav { display: none !important; }
  .brand { margin-right: 0; }
  .nav-desktop { display: flex; gap: 4px; margin: 0 auto; }
  .nav-desktop a {
    padding: 8px 12px; border-radius: 10px; text-decoration: none;
    font-weight: 500; font-size: 0.95rem; color: var(--muted);
    transition: color .15s, background-color .15s;
  }
  .nav-desktop a:hover { color: var(--foreground); background: var(--primary-soft); }
  .header-link { display: inline-flex; padding: 8px 10px; font-weight: 600; font-size: 0.95rem; text-decoration: none; }
  .header-link:hover { color: var(--brass-text); }
  .header-cta { display: inline-flex; }
  .header-actions { gap: 10px; }
}
/* 1024-1179 (iPad landscape): one line only fits without the second "Open web app" (it is in the hero too) */
@media (min-width: 1024px) and (max-width: 1179px) {
  .header-link { display: none; }
  .nav-desktop { gap: 2px; }
  .nav-desktop a { padding: 8px 9px; }
}

/* ---------- 6. Hero ------------------------------------------------------ */
.hero { position: relative; padding: 36px 0 28px; overflow-x: clip; }
.hero::before { /* ledger rules, fading out */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--rule) 33px 34px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 92%);
}
.hero::after { /* brass glow behind the phone */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 620px; height: 620px; right: -220px; top: 280px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
}
.hero-grid { display: grid; gap: 40px; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 12px 6px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 0.82rem; font-weight: 500; color: var(--muted); box-shadow: var(--shadow-sm);
}
.hero-kicker b {
  font: 600 0.7rem/1 var(--font-mono); letter-spacing: .06em;
  color: var(--brass-text); background: var(--accent-soft); padding: 4px 7px; border-radius: 999px;
}
.hero-title { font-size: clamp(2.45rem, 6.4vw + 0.9rem, 4.7rem); margin-top: 18px; text-wrap: balance; }
.hero-sub { margin-top: 18px; max-width: 34em; }
.hero-ctas { display: grid; gap: 10px; margin-top: 26px; }
.hero-wa {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-weight: 600; text-decoration: none; font-size: 0.97rem;
}
.hero-wa svg { width: 20px; height: 20px; }
.hero-wa span { border-bottom: 1px solid var(--border-strong); }
.hero-wa:hover span { border-bottom-color: currentColor; }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; padding-top: 18px;
  border-top: 1px dashed var(--border-strong);
  font-size: 0.88rem; color: var(--muted);
}
.hero-trust li { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { width: 16px; height: 16px; color: var(--success); flex: none; }
.store-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 11px; border-radius: 11px;
  border: 1px dashed var(--border-strong); color: var(--muted); background: transparent;
  cursor: default; user-select: none;
}
.store-badge svg { width: 20px; height: 20px; opacity: .75; }
.store-badge span { display: grid; line-height: 1.15; }
.store-badge small { font-size: 0.68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--brass-text); }
.store-badge b { font-weight: 600; font-size: 0.92rem; }

@media (min-width: 480px) {
  .hero-ctas { display: flex; flex-wrap: wrap; }
}
@media (min-width: 1024px) {
  .hero { padding: 64px 0 48px; }
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; gap: 56px; }
  .hero::after { right: -120px; top: 40px; width: 760px; height: 760px; }
}

/* the shelf the phone stands on */
.hero-visual { position: relative; display: grid; justify-items: center; }
.stage { position: relative; width: min(100%, 420px); display: flex; justify-content: center; padding-top: 8px; }
.shelf {
  position: relative; z-index: 2; width: min(100%, 460px); height: 16px; margin-top: -2px;
  border-radius: 4px 4px 3px 3px;
  background: linear-gradient(to bottom, var(--shelf-top) 0 40%, var(--shelf-face) 40% 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 18px 24px -14px var(--shelf-shadow);
}
.shelf-tags { display: flex; justify-content: center; gap: 10px; margin-top: 8px; position: relative; z-index: 1; flex-wrap: wrap; }
.shelf-tag {
  position: relative; display: inline-flex; align-items: baseline; gap: 5px;
  padding: 7px 9px 6px; border-radius: 3px 3px 6px 6px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  font: 500 0.72rem/1 var(--font-mono); color: var(--muted);
}
.shelf-tag::before { /* clip */
  content: ""; position: absolute; top: -9px; left: 50%; width: 10px; height: 9px; transform: translateX(-50%);
  background: var(--accent); border-radius: 2px 2px 0 0; opacity: .8;
}
.shelf-tag b { font: 700 0.95rem/1 var(--font-display); color: var(--foreground); }
.mock-note { margin-top: 14px; font-size: 0.74rem; color: var(--muted); letter-spacing: .02em; text-align: center; }

.bottles { display: none; position: absolute; bottom: 0; left: 0; width: 108px; height: auto; z-index: 0; color: var(--border-strong); }
.bottles.right { left: auto; right: 0; width: 72px; }
.bottles .cap { fill: var(--accent); opacity: .8; }
.bottles .glass { fill: currentColor; }
.bottles .label { fill: var(--background); opacity: .9; }
@media (prefers-color-scheme: dark) { /* warm glass and paper labels, not slate with black holes */
  .bottles { color: #2b2620; }
  .bottles .label { fill: var(--accent-soft); opacity: 1; }
}

/* floating cards around the hero phone */
.float {
  position: absolute; z-index: 3;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 11px 12px;
}
.float-cap { font: 500 0.64rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.code-digits {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px;
  font: 600 1.28rem/1 var(--font-mono); letter-spacing: .03em; color: var(--foreground);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.code-ring {
  --p: 0.7; position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p) * 1turn), var(--border) 0);
  display: grid; place-items: center;
}
.code-ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--surface); }
.code-ring span { position: relative; font: 600 0.6rem/1 var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.code-foot { margin-top: 7px; font-size: 0.7rem; color: var(--muted); line-height: 1.35; }

/* phones up to 679px: cards tuck onto the phone's top and bottom edges, where the screen is quiet */
.float-code { top: -14px; right: 0; width: 140px; }
.float-code .code-foot { display: none; }
.float-slip { bottom: -14px; left: 0; width: 152px; }
.slip-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 6px; }
.slip-row b { font: 600 1.1rem/1 var(--font-display); }
.slip-share {
  display: flex; align-items: center; gap: 6px; margin-top: 9px; padding-top: 8px;
  border-top: 1px dashed var(--border-strong); font-size: 0.72rem; font-weight: 600; color: var(--success);
}
.slip-share svg { width: 14px; height: 14px; flex: none; }
.float-slip .slip-share { display: none; } /* tucked over the phone's tab bar, the slip stays one line short */
@media (max-width: 679px) {
  /* Cover exactly the left half of the tab bar (Home + Parcha) so no tab label is cut in half.
     The phone is centred in the stage and 262px wide, so its middle is the stage's middle. */
  .float-slip { left: max(0px, calc(50% - 149px)); right: calc(50% + 4px); width: auto; }
}

/* 680px+: wider stage, cards flank the phone and only kiss its bezel */
@media (min-width: 680px) {
  .stage { width: min(100%, 540px); }
  .phone.phone-hero { --pw: 280px; }
  .bottles { display: block; }
  .float-code { top: 92px; right: -36px; width: 176px; padding: 13px 14px; }
  .float-code .code-foot { display: block; }
  .float-slip .slip-share { display: flex; }
  .float-slip { bottom: 168px; left: -36px; width: 176px; padding: 13px 14px; }
  .code-digits { font-size: 1.45rem; }
  .shelf { width: min(100%, 560px); }
}
/* 1024-1279: the hero column is narrow again, so tuck the cards back onto the edges */
@media (min-width: 1024px) and (max-width: 1279px) {
  .phone.phone-hero { --pw: 262px; }
  .bottles { display: none; }
  .float-code { top: -14px; right: -8px; width: 160px; }
  .float-code .code-foot { display: none; }
  .float-slip .slip-share { display: none; }
  .float-slip { bottom: -14px; left: -8px; width: 164px; }
}
/* 1280-1359: keep the flanking cards at least a gutter inside the window */
@media (min-width: 1280px) and (max-width: 1359px) {
  .float-code { right: -12px; }
  .float-slip { left: -12px; }
}

/* ---------- 7. Phone + app UI (all em-based; scale with --pw) ----------- */
.phone {
  --pw: 262px;
  position: relative; z-index: 1; flex: none;
  width: var(--pw); aspect-ratio: 9 / 19.2;
  padding: calc(var(--pw) * 0.034);
  border-radius: calc(var(--pw) * 0.16);
  background: var(--phone-body);
  box-shadow: inset 0 0 0 1.5px var(--phone-edge), inset 0 0 0 4px #000, var(--shadow-lg);
  font-size: calc(var(--pw) / 22.5);
}
.phone::before { /* camera island */
  content: ""; position: absolute; z-index: 5; left: 50%; top: calc(var(--pw) * 0.058);
  width: 30%; height: calc(var(--pw) * 0.072); transform: translateX(-50%);
  border-radius: 99px; background: #000;
}
.screen {
  height: 100%; overflow: hidden; position: relative;
  border-radius: calc(var(--pw) * 0.126);
  background: var(--background); color: var(--foreground);
  display: flex; flex-direction: column;
  font-family: var(--font-body); line-height: 1.3;
}
.app-status { display: flex; justify-content: space-between; align-items: center; padding: 1.15em 2.1em 0.5em; font-size: 0.92em; font-weight: 600; flex: none; }
.app-status i { display: inline-flex; gap: 0.3em; align-items: center; }
.app-status i::before { content: ""; width: 1.4em; height: 0.75em; border-radius: 0.15em; background: linear-gradient(90deg, currentColor 0 25%, transparent 25% 37%, currentColor 37% 62%, transparent 62% 75%, currentColor 75%); opacity: .8; }
.app-status i::after { content: ""; width: 1.9em; height: 0.85em; border-radius: 0.25em; border: 0.12em solid currentColor; box-shadow: inset -0.5em 0 0 var(--background), inset 0 0 0 0.15em var(--background); background: currentColor; opacity: .8; }
.app-bar { display: flex; align-items: center; gap: 0.7em; padding: 0.55em 1.2em 0.75em; background: var(--surface); border-bottom: 1px solid var(--border); flex: none; }
.app-bar img { width: 2.3em; height: 2.3em; border-radius: 0.55em; }
.app-bar .t { font: 600 1.45em/1 var(--font-display); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-bar .m { width: 1.6em; height: 1.1em; background: linear-gradient(currentColor 0 0) top/100% 0.16em no-repeat, linear-gradient(currentColor 0 0) center/100% 0.16em no-repeat, linear-gradient(currentColor 0 0) bottom/100% 0.16em no-repeat; opacity: .7; }
.app-lic { display: flex; align-items: center; gap: 0.6em; margin: 0.85em 1.2em 0; padding: 0.55em 0.8em; border: 1px solid var(--border); border-radius: 0.8em; background: var(--surface); }
.app-lic .s { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-lic .p { font-size: 0.82em; color: var(--success); font-weight: 600; white-space: nowrap; }
.app-lic::after { content: ""; width: 0.5em; height: 0.5em; border-right: 0.14em solid var(--muted); border-bottom: 0.14em solid var(--muted); transform: rotate(45deg) translateY(-0.2em); }
.app-body { padding: 0.9em 1.2em 1.2em; display: grid; gap: 0.85em; align-content: start; flex: 1; min-height: 0; }
.app-cap { font-size: 0.78em; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); text-align: center; font-weight: 500; }
.app-big { display: flex; align-items: center; gap: 0.7em; padding: 0.7em 0; border-bottom: 1px solid var(--primary-soft); }
.app-big .ic { width: 2.4em; height: 2.4em; border-radius: 0.6em; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 1em; }
.app-big .l { flex: 1; font-size: 1.1em; }
.app-big .v { font: 600 1.85em/1 var(--font-display); font-variant-numeric: tabular-nums; }
.app-chart { display: flex; align-items: flex-end; gap: 0.45em; height: 5.2em; padding-top: 0.4em; }
.app-chart span { flex: 1; border-radius: 0.25em 0.25em 0 0; background: color-mix(in srgb, var(--accent) 55%, transparent); min-height: 0.3em; }
.app-chart span.on { background: var(--accent); }
.app-chart-x { display: flex; gap: 0.45em; margin-top: -0.45em; }
.app-chart-x span { flex: 1; text-align: center; font-size: 0.72em; color: var(--muted); }
.app-seg { display: flex; justify-content: center; }
.app-seg span { padding: 0.35em 1.2em; border: 1px solid var(--primary); font-size: 0.9em; font-weight: 600; color: var(--primary); }
@media (prefers-color-scheme: dark) { .app-seg span { color: var(--foreground); } }
.app-seg span:first-child { border-radius: 99px 0 0 99px; }
.app-seg span:last-child { border-radius: 0 99px 99px 0; }
.app-seg span.on { background: var(--primary); color: #fff; }
.app-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55em; }
.app-tile { background: var(--primary-soft); border-radius: 0.85em; padding: 0.6em 0.5em; text-align: center; }
.app-tile .l { font-size: 0.8em; color: var(--muted); }
.app-tile .v { font: 600 1.3em/1.15 var(--font-display); margin-top: 0.2em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-tile .v.ok { color: var(--success); font-size: 1.12em; }
.app-tile .v.warn { color: var(--warning); }
.app-tile .v.short { color: var(--danger); }
.app-tile .s { font-size: 0.72em; color: var(--muted); margin-top: 0.15em; }
.app-bar-meter { height: 0.38em; border-radius: 99px; background: var(--border); overflow: hidden; margin-top: 0.4em; }
.app-bar-meter i { display: block; height: 100%; border-radius: inherit; background: var(--success); }
.app-cats { display: grid; gap: 0.5em; }
.app-cat { display: grid; grid-template-columns: 4.6em 1fr auto; align-items: center; gap: 0.6em; font-size: 0.92em; }
.app-cat .bar { height: 0.55em; border-radius: 99px; background: var(--primary-soft); overflow: hidden; }
.app-cat .bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
@media (prefers-color-scheme: dark) { .app-cat .bar i { background: var(--accent); } }
.app-cat .a { font-weight: 600; font-variant-numeric: tabular-nums; }
.app-alert { display: flex; align-items: center; justify-content: space-between; padding: 0.65em 0.85em; border-radius: 0.8em; background: var(--warning-soft); color: var(--warning); font-weight: 600; font-size: 0.92em; border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent); }
/* bottom tab bar, as in the phone app: Home · Parcha · Stock · More */
.app-tabbar {
  flex: none; margin-top: auto; display: flex; justify-content: space-around;
  padding: 0.6em 0.8em 1.3em; border-top: 1px solid var(--border); background: var(--surface);
}
.app-tabbar > span { display: grid; justify-items: center; gap: 0.2em; min-width: 4.4em; font-size: 0.74em; font-weight: 600; color: var(--muted); }
.app-tabbar svg { width: 1.95em; height: 1.95em; }
.app-tabbar > span.on { color: var(--primary); }
@media (prefers-color-scheme: dark) { .app-tabbar > span.on { color: var(--accent); } }
.app-ok { display: flex; align-items: center; justify-content: space-between; padding: 0.65em 0.85em; border-radius: 0.8em; background: var(--success-soft); color: var(--success); font-weight: 600; font-size: 0.92em; }

/* tabs + sheets (parcha, stock, POS) */
.app-tabs { display: flex; gap: 0.35em; overflow: hidden; }
.app-tabs span { flex: none; padding: 0.38em 0.8em; border-radius: 99px; border: 1px solid var(--border); font-size: 0.86em; font-weight: 500; color: var(--muted); background: var(--surface); }
.app-tabs span.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.app-search { display: flex; align-items: center; gap: 0.5em; padding: 0.55em 0.8em; border: 1px solid var(--border); border-radius: 0.7em; background: var(--surface); color: var(--muted); font-size: 0.9em; }
.app-search::before { content: ""; width: 0.8em; height: 0.8em; border: 0.14em solid currentColor; border-radius: 50%; }
.app-pill { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.86em; font-weight: 600; color: var(--brass-text); }
.app-sheet { border: 1px solid var(--border); border-radius: 0.75em; overflow: hidden; background: var(--surface); }
.app-sheet .hd, .app-sheet .rw { display: grid; grid-template-columns: minmax(0, 1fr) 3.3em 4.1em 3.1em; align-items: center; gap: 0.4em; padding: 0.5em 0.7em; }
.app-sheet .hd { background: var(--sheet-head); color: #fff; font-weight: 700; letter-spacing: .02em; }
.app-sheet .hd span { font-size: 0.78em; }
.app-sheet .hd span:not(:first-child), .app-sheet .rw span:not(:first-child) { text-align: center; }
.app-sheet .br { padding: 0.45em 0.7em 0.15em; font-weight: 700; font-size: 0.92em; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 0.5em; }
.app-sheet .br small { font-weight: 500; color: var(--muted); font-size: 0.85em; white-space: nowrap; }
.app-sheet .hd + .br { border-top: 0; }
.app-sheet .rw { font-variant-numeric: tabular-nums; padding-top: 0.3em; padding-bottom: 0.3em; }
.app-sheet .rw span { font-size: 0.9em; }
.app-sheet .rw .sz { font-family: var(--font-mono); font-weight: 500; color: var(--muted); font-size: 0.85em; }
.app-sheet .rw .in { border: 1px solid var(--border-strong); border-radius: 0.4em; padding: 0.2em 0; background: var(--background); font-weight: 600; }
.app-sheet .rw .in.empty { color: transparent; border-style: dashed; }
.app-sheet .rw .sold { font-weight: 700; color: var(--success); }
.app-foot { display: flex; gap: 0.5em; padding: 0.75em 1.2em 1.3em; border-top: 1px solid var(--border); background: var(--surface); margin-top: auto; flex: none; }
.app-btn { flex: 1; text-align: center; padding: 0.75em 0.6em; border-radius: 0.7em; font-weight: 700; font-size: 0.95em; background: var(--primary); color: #fff; white-space: nowrap; }
.app-btn.alt { background: var(--surface); color: var(--foreground); border: 1px solid var(--border-strong); }
.app-btn.brass { background: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .app-btn.brass { color: #15120b; } }

.app-billtabs { display: flex; gap: 0.3em; border-bottom: 1px solid var(--border); }
.app-billtabs span { padding: 0.5em 0.85em; font-weight: 600; font-size: 0.9em; color: var(--muted); border-bottom: 0.18em solid transparent; margin-bottom: -1px; }
.app-billtabs span.on { color: var(--foreground); border-bottom-color: var(--accent); }
.app-billtabs span.add { color: var(--accent); }
.app-items { display: grid; }
.app-item { display: grid; grid-template-columns: 1fr auto; gap: 0.1em 0.6em; padding: 0.55em 0; border-bottom: 1px dashed var(--border-strong); }
.app-item .n { font-weight: 600; font-size: 0.95em; }
.app-item .q { font-size: 0.8em; color: var(--muted); font-variant-numeric: tabular-nums; }
.app-item .a { grid-row: span 2; align-self: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.app-sum { display: grid; gap: 0.3em; font-size: 0.9em; }
.app-sum div { display: flex; justify-content: space-between; }
.app-sum .neg { color: var(--danger); }
.app-sum .tot { padding-top: 0.45em; border-top: 1px solid var(--border); font-weight: 700; font-size: 1.1em; }
.app-sum .tot b { font: 600 1.3em/1 var(--font-display); }
.app-pay { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35em; }
.app-pay span { text-align: center; padding: 0.45em 0.2em; border: 1px solid var(--border); border-radius: 0.55em; font-size: 0.8em; font-weight: 600; background: var(--surface); white-space: nowrap; }
.app-pay span.on { border-color: var(--accent); background: var(--accent-soft); color: var(--brass-text); }

.app-total { padding: 0.8em 0.9em; border-radius: 0.85em; background: var(--sheet-head); color: #fff; display: flex; justify-content: space-between; align-items: center; }
.app-total .l { font-size: 0.85em; opacity: .75; }
.app-total .v { font: 600 1.55em/1 var(--font-display); color: #f0d39b; font-variant-numeric: tabular-nums; }
.app-list { display: grid; background: var(--surface); border: 1px solid var(--border); border-radius: 0.8em; overflow: hidden; }
.app-li { display: grid; grid-template-columns: 2.3em 1fr auto; gap: 0.6em; align-items: center; padding: 0.6em 0.75em; border-top: 1px solid var(--border); }
.app-li:first-child { border-top: 0; }
.app-li .av { width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--accent-soft); color: var(--brass-text); display: grid; place-items: center; font-weight: 700; font-size: 0.9em; }
.app-li .n, .app-li .d { display: block; }
.app-li .n { font-weight: 600; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-li .d { font-size: 0.78em; color: var(--muted); }
.app-li .a { font-weight: 700; color: var(--danger); font-variant-numeric: tabular-nums; }
.app-rep { display: grid; grid-template-columns: 1fr auto auto; gap: 0.4em; align-items: center; padding: 0.62em 0.75em; border-top: 1px solid var(--border); }
.app-rep:first-child { border-top: 0; }
.app-rep .n { font-weight: 600; font-size: 0.92em; }
.app-rep .d { font-size: 0.75em; color: var(--muted); }
.app-rep .f { padding: 0.3em 0.55em; border-radius: 0.45em; font-size: 0.75em; font-weight: 700; }
.app-rep .f.pdf { background: var(--danger-soft); color: var(--danger); }
.app-rep .f.xls { background: var(--success-soft); color: var(--success); }
.app-range { display: flex; gap: 0.4em; }
.app-range span { flex: 1; padding: 0.5em 0.7em; border: 1px solid var(--border); border-radius: 0.6em; background: var(--surface); font-size: 0.85em; }
.app-range span small { display: block; font-size: 0.8em; color: var(--muted); }

/* ---------- 8. Marquee --------------------------------------------------- */
.marquee {
  background: var(--band); color: var(--band-fg);
  border-block: 1px solid var(--band-line);
  overflow: hidden; position: relative;
}
.marquee::before, .marquee::after { /* soft edges, drawn over the moving list */
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 8%; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--band), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--band) 30%, transparent); }
.marquee-toggle { /* WCAG 2.2.2: moving text can be paused by touch and keyboard, not only by hover */
  position: absolute; z-index: 2; top: 50%; right: max(8px, calc((100% - var(--maxw)) / 2 - 4px));
  width: 36px; height: 36px; margin-top: -18px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--band-line); background: var(--band); color: var(--band-fg);
}
.marquee-toggle:hover { border-color: var(--band-brass); color: var(--band-brass); }
.marquee-toggle svg { width: 14px; height: 14px; }
.marquee-toggle .i-play, .marquee-toggle[aria-pressed="true"] .i-pause { display: none; }
.marquee-toggle[aria-pressed="true"] .i-play { display: block; }
.marquee-track { display: flex; width: max-content; }
.marquee-list { display: flex; flex: none; align-items: center; }
.marquee-list li {
  display: inline-flex; align-items: center; gap: 22px; padding: 16px 0 16px 22px;
  font: 600 1.08rem/1 var(--font-display); letter-spacing: -0.005em; white-space: nowrap;
}
.marquee-list li::after { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--band-brass); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 55s linear infinite; }
  .marquee:hover .marquee-track, .marquee.paused .marquee-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee::before, .marquee::after, .marquee-toggle { display: none; }
  .marquee-track { width: auto; }
  .marquee-list { flex-wrap: wrap; justify-content: center; padding: 6px var(--gutter); }
  .marquee-list li { padding: 8px 0 8px 18px; font-size: 0.98rem; }
  .marquee-list[aria-hidden="true"] { display: none; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 9. Sections -------------------------------------------------- */
.section { padding: 72px 0; position: relative; }
.section-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 36px; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
@media (min-width: 1024px) {
  .section { padding: 112px 0; }
  .section-head { margin-bottom: 52px; }
}
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }

/* features */
.features { display: grid; gap: 14px; }
.card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 22px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .25s var(--ease), transform .25s var(--ease);
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.card .ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 4px;
}
.card .ico svg { width: 22px; height: 22px; }
.card p { color: var(--muted); font-size: 0.97rem; text-wrap: pretty; }
.card .tagline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--background); font-size: 0.76rem; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.chip.mono { font-family: var(--font-mono); font-weight: 500; }
.chip.ok { color: var(--success); background: var(--success-soft); border-color: transparent; }
.chip.brass { color: var(--brass-text); background: var(--accent-soft); border-color: transparent; }
.card-mock { /* the tray a mini UI sits in */
  margin: 8px -8px -8px; padding: 14px; border-radius: 14px;
  background: var(--primary-soft); border: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.3;
}
.card-mock .app-sheet, .card-mock .app-list { font-size: 12.5px; }
.f-billing .card-mock, .f-guarantee .card-mock { margin-top: auto; }
.card-ink { background: var(--band); color: var(--band-fg); border-color: transparent; }
.card-ink p { color: var(--band-muted); }
.card-ink .ico { background: rgba(217, 179, 106, .14); color: var(--band-brass); }
.card-ink:hover { border-color: transparent; }
.ink-code { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 12px; }
.ink-code .digits { white-space: nowrap; font: 600 1.7rem/1 var(--font-mono); letter-spacing: .06em; color: var(--band-brass); font-variant-numeric: tabular-nums; }
.ink-code .code-ring { width: 34px; height: 34px; background: conic-gradient(var(--band-brass) calc(var(--p) * 1turn), var(--band-line) 0); }
.ink-code .code-ring::before { background: var(--band); }
.ink-code .code-ring span { color: var(--band-muted); font-size: 0.66rem; }
.ink-code small { color: var(--band-muted); font-size: 0.78rem; line-height: 1.35; }

/* mini mock pieces used inside feature cards */
.mini-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; font-size: 0.8rem; color: var(--muted); }
.mini-formula .grp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mini-formula b { font-family: var(--font-mono); font-weight: 500; color: var(--foreground); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 3px 7px; }
.mini-formula .eq { color: var(--brass-text); font-weight: 700; }
.mini-bill { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0 12px 12px; display: grid; gap: 10px; max-width: 420px; margin-inline: auto; }
.mini-bill .app-billtabs { margin: 0 -12px; padding: 0 6px; }
.mini-guar { display: grid; gap: 10px; }
.g-row { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.g-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.g-top .l { font-weight: 600; font-size: 0.9rem; }
.g-top .r { font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-meter { position: relative; height: 8px; border-radius: 99px; background: var(--border); margin: 10px 0 8px; overflow: hidden; }
.g-meter i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); }
.g-meter.done i { background: var(--success); }
.g-state { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; gap: 8px; }
.g-state .ok { color: var(--success); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.g-state .short { color: var(--danger); font-weight: 700; font-variant-numeric: tabular-nums; }
.g-state .pct { color: var(--muted); font-variant-numeric: tabular-nums; }

/* phones: the four cards with a picture stay full cards; the six text-only ones join into one ruled ledger */
@media (max-width: 679px) {
  .f-parcha { order: 1; } .f-billing { order: 2; } .f-guarantee { order: 3; } .f-owner { order: 4; }
  .f-stock, .f-udhaar, .f-cash, .f-reports, .f-licenses, .f-mrp { order: 5; }
  .features > :is(.f-stock, .f-udhaar, .f-cash, .f-reports, .f-licenses, .f-mrp) {
    display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 14px; align-content: start;
    padding: 18px; margin-top: -15px; border-radius: 0; box-shadow: none;
  }
  .features > .f-stock { margin-top: 6px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .features > .f-mrp { border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-sm); }
  .features > :is(.f-stock, .f-udhaar, .f-cash, .f-reports, .f-licenses, .f-mrp) .ico {
    grid-row: 1 / span 3; width: 36px; height: 36px; border-radius: 10px; margin: 2px 0 0;
  }
  .features > :is(.f-stock, .f-udhaar, .f-cash, .f-reports, .f-licenses, .f-mrp) .ico svg { width: 19px; height: 19px; }
  .features > :is(.f-stock, .f-udhaar, .f-cash, .f-reports, .f-licenses, .f-mrp) > :not(.ico) { grid-column: 2; }
  .features > :is(.f-stock, .f-udhaar, .f-cash, .f-reports, .f-licenses, .f-mrp) .h3 { font-size: 1.14rem; }
  .features > :is(.f-stock, .f-udhaar, .f-cash, .f-reports, .f-licenses, .f-mrp) p { font-size: 0.94rem; margin-top: 2px; }
  .features > :is(.f-stock, .f-udhaar, .f-cash, .f-reports, .f-licenses, .f-mrp) .tagline { padding-top: 10px; }
}
@media (min-width: 680px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; grid-auto-flow: row dense; }
  .f-parcha, .f-owner, .f-billing, .f-guarantee { grid-column: span 2; }
  /* cards with a picture run full width with the picture on the right, so text-only cards pair up */
  .f-parcha, .f-billing, .f-guarantee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 10px 24px; align-items: start; }
  .f-parcha .card-mock, .f-billing .card-mock, .f-guarantee .card-mock { grid-column: 2; grid-row: 1 / span 6; margin: 0 -8px -8px 0; }
  .f-owner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 28px; }
  .f-owner .ink-code { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; padding: 0; }
}
@media (min-width: 1024px) {
  .features { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
  .features > .card { grid-column: span 2; padding: 26px; }
  .features > .f-parcha { grid-column: span 4; }
  .features > .f-billing, .features > .f-guarantee { grid-column: span 3; display: flex; align-items: stretch; }
  .f-billing .card-mock, .f-guarantee .card-mock { margin: auto -8px -8px; padding-top: 14px; }
  .f-owner { grid-column: span 2 !important; display: flex; }
  .f-owner .ink-code { margin-top: auto; padding-top: 12px; }
}

/* stats band (product facts, not usage numbers) */
.facts { background: var(--band); color: var(--band-fg); padding: 44px 0; border-block: 1px solid var(--band-line); }
.facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
.fact { display: grid; gap: 8px; align-content: start; }
.fact b { font: 600 clamp(1.7rem, 2.4vw + 1rem, 2.6rem)/1 var(--font-display); color: var(--band-brass); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fact span { font-size: 0.9rem; color: var(--band-muted); line-height: 1.45; }
@media (min-width: 900px) {
  .facts { padding: 56px 0; }
  .facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .fact { padding: 0 28px; border-left: 1px solid var(--band-line); }
  .fact:first-child { padding-left: 0; border-left: 0; }
}

/* why LiquorHub — a ruled ledger page */
.why-grid { display: grid; gap: 32px; }
.why-list { border-top: 1px solid var(--border-strong); counter-reset: why; }
.why-item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px;
  padding: 22px 0; border-bottom: 1px solid var(--border);
}
.why-item::before {
  counter-increment: why; content: counter(why, decimal-leading-zero);
  grid-row: span 3; font: 600 1.15rem/1.3 var(--font-display); color: var(--brass-text); font-variant-numeric: tabular-nums;
}
.why-item h3 { font-size: 1.16rem; }
.why-item p { color: var(--muted); font-size: 0.97rem; margin-top: 4px; text-wrap: pretty; }
.why-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.strike { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); opacity: .8; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 70%, transparent); text-decoration-thickness: 1px; }
.why-proof .arrow { color: var(--muted); font-size: 0.8rem; }
.why-aside { display: grid; gap: 16px; align-content: start; }
.why-note { padding: 16px 18px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); font-size: 0.93rem; }
.why-note b { color: var(--brass-text); }
@media (min-width: 1024px) {
  .why-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; }
  .why-aside { position: sticky; top: calc(var(--header-h) + 32px); }
  .why-item { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 18px; padding: 26px 0; }
  .why-item::before { font-size: 1.35rem; }
  .why-item .why-proof { grid-column: 3; grid-row: 1 / span 2; margin: 0; justify-content: flex-end; max-width: 270px; align-self: center; }
}

/* how it works */
.steps { display: grid; gap: 0; counter-reset: step; position: relative; }
.step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 16px; padding-bottom: 30px; }
.step:last-child { padding-bottom: 0; }
.step::before {
  counter-increment: step; content: counter(step);
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm);
  font: 600 1.3rem/1 var(--font-display); color: var(--brass-text); grid-row: span 3; z-index: 1;
}
.step:not(:last-child)::after { content: ""; position: absolute; left: 23.5px; top: 52px; bottom: 4px; border-left: 1.5px dashed var(--border-strong); }
.step h3 { margin-top: 10px; }
.step p { color: var(--muted); font-size: 0.97rem; margin-top: 6px; }
.step-ui { margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); font-size: 0.86rem; max-width: 420px; }
.otp { display: flex; gap: 6px; }
.otp span { flex: 1 1 0; min-width: 0; max-width: 32px; height: 38px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--background); font: 600 1rem/1 var(--font-mono); }
.otp span.cur { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field { display: grid; gap: 4px; }
.field + .field { margin-top: 8px; }
.field small { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.field span { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--background); font-weight: 600; font-variant-numeric: tabular-nums; }
.pick { display: grid; gap: 0; padding-block: 4px; }
.pick div { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.pick div + div { border-top: 1px dashed var(--border-strong); }
.pick b { min-width: 2.6em; text-align: right; font: 600 0.92rem/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.pick .nm { flex: 1; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick .sz { display: flex; gap: 4px; }
.pick .sz i { font: normal 500 0.72rem/1 var(--font-mono); padding: 3px 5px; border-radius: 4px; background: var(--accent-soft); color: var(--brass-text); }
.done-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.done-row b { font: 600 1.15rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
/* 700-1179: two by two — four columns only fit the step cards from 1180 */
@media (min-width: 700px) and (max-width: 1179px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .step { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; align-content: start; }
  .step::before { grid-row: auto; }
  .step:not(:last-child)::after { display: none; }
  .step h3 { margin-top: 18px; }
}
@media (min-width: 1180px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .step { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; align-content: start; }
  .step::before { grid-row: auto; }
  .step:not(:last-child)::after { left: 60px; right: -12px; top: 23.5px; bottom: auto; border-left: 0; border-top: 1.5px dashed var(--border-strong); }
  .step h3 { margin-top: 18px; }
}

/* app screens row */
.screens-wrap { position: relative; }
.screens {
  display: flex; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 10px max(var(--gutter), calc((100% - var(--maxw)) / 2)) 30px;
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2));
}
.screens::-webkit-scrollbar { display: none; }
.shot { flex: none; scroll-snap-align: start; display: grid; gap: 16px; justify-items: start; width: 250px; }
.shot .phone { --pw: 250px; }
.shot figcaption { display: grid; gap: 4px; padding-left: 4px; max-width: 250px; }
.shot figcaption b { font: 600 1.08rem/1.25 var(--font-display); }
.shot figcaption span { font-size: 0.88rem; color: var(--muted); line-height: 1.45; }
.screens-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.screens-hint { font-size: 0.85rem; color: var(--muted); }
.screens-btns { display: flex; gap: 8px; }
.round-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--foreground);
  transition: border-color .15s, opacity .15s;
}
.round-btn:hover { border-color: var(--foreground); }
.round-btn:disabled { opacity: .35; cursor: default; border-color: var(--border-strong); }
.round-btn svg { width: 18px; height: 18px; }
@media (min-width: 1024px) {
  .shot, .shot figcaption { width: 264px; max-width: 264px; }
  .shot .phone { --pw: 264px; }
  .screens { gap: 28px; }
}

/* pricing */
.trial-banner {
  display: grid; gap: 14px; align-items: center;
  padding: 18px 20px; border-radius: var(--radius-lg); margin-bottom: 18px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.trial-banner b { font: 600 1.2rem/1.25 var(--font-display); display: block; text-wrap: balance; }
.trial-banner p { color: var(--muted); font-size: 0.95rem; margin-top: 4px; text-wrap: pretty; }
.plans { display: grid; gap: 14px; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 24px 22px 22px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.plan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.plan-name { font: 600 1.45rem/1.1 var(--font-display); letter-spacing: -0.01em; }
.plan-per { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
.plan-price { padding: 14px 0 6px; border-top: 1px dashed var(--border-strong); }
.plan-price .amt { display: block; font: 600 1.6rem/1.1 var(--font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
/* a plan with no listed price (Lifetime) keeps the slot as a quiet note: class "amt ask" */
.plan-price .amt.ask { font: 500 0.95rem/1.3 var(--font-body); letter-spacing: 0; color: var(--muted); }
.plan-free .plan-price .amt { color: var(--success); }
/* what a plan works out to per month */
.plan-price .eq { display: block; margin-top: 6px; font: 600 0.86rem/1.3 var(--font-body); color: var(--brass-text); font-variant-numeric: tabular-nums; }
.plan.featured .plan-price .eq { color: var(--band-brass); }
.plan-price small { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--muted); text-wrap: pretty; }
.plan .btn { margin-top: auto; }
/* Lifetime: price on request, so it runs full width under the four priced plans with its own button */
.plan-life { grid-column: 1 / -1; }
.plan-life .btn { white-space: normal; padding-block: 10px; width: 100%; }
.plan-badge {
  position: absolute; top: -11px; left: 20px;
  padding: 4px 10px; border-radius: 999px; background: var(--band-brass); color: #15120b;
  font: 600 0.72rem/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.plan.featured { background: var(--band); color: var(--band-fg); border-color: color-mix(in srgb, var(--band-brass) 40%, transparent); box-shadow: var(--shadow-lg); }
.plan.featured .plan-per, .plan.featured .plan-price small { color: var(--band-muted); }
.plan.featured .plan-price { border-color: var(--band-line); }
@media (max-width: 599px) { /* phones: the four priced plans as a compact 2 x 2, Lifetime full width below */
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .plan { padding: 18px 16px 16px; gap: 10px; }
  .plan-top { flex-direction: column; align-items: flex-start; gap: 2px; }
  .plan-name { font-size: 1.3rem; }
  .plan-price { padding-top: 10px; }
  .plan-price .amt { font-size: 1.45rem; }
  .plan-price .amt.ask { font-size: 0.95rem; }
  .plan-badge { left: 14px; }
}
@media (max-width: 374px) { /* small phones (320px): keep "≈ ₹1,333 a month" and the Lifetime button on one line */
  .plans { gap: 8px; }
  .plan { padding-inline: 12px; }
  .plan-price .eq { font-size: 0.8rem; }
  .plan-life .btn { padding-inline: 0.9rem; }
}
.plan-notes { display: grid; gap: 22px; margin-top: 18px; padding: 22px 20px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--background); }
.plan-notes-h { font: 500 0.74rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 14px; }
.plan-inc ul { display: grid; gap: 10px; font-size: 0.95rem; }
.plan-inc li { display: flex; gap: 10px; align-items: flex-start; }
.plan-inc li svg { width: 16px; height: 16px; margin-top: 4px; flex: none; color: var(--success); }
.pay-methods { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pay-methods .lbl { font-size: 0.85rem; color: var(--muted); margin-left: 2px; }
.pay-points { display: grid; gap: 10px; font-size: 0.95rem; margin-top: 16px; }
.pay-points li { display: flex; gap: 10px; align-items: flex-start; }
.pay-points svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--accent); }
.plan-pay { padding-top: 20px; border-top: 1px dashed var(--border-strong); }
@media (min-width: 600px) {
  .plan-price .amt { font-size: 1.9rem; }
  .plan-price .amt.ask { font-size: 0.95rem; }
  .plan-name { font-size: 1.6rem; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .trial-banner { grid-template-columns: minmax(0, 1fr) auto; padding: 20px 24px; }
  .plan-notes { padding: 26px 28px; }
}
@media (min-width: 700px) {
  /* Lifetime in two columns lined up with the 2 x 2 above: name and note under "1 month", the
     WhatsApp button from where "3 months" starts. (Below 700px the button would wrap, so the card
     stacks like on phones.) Each card is (row - 16px gap) / 2 wide; a card's content box is its
     width minus 2 x 22px padding and 2 x 1px border (46px), so the gap between columns is 16 + 46. */
  .plan-life { display: grid; grid-template-columns: calc((100% + 46px - 16px) / 2 - 46px) minmax(0, 1fr); column-gap: 62px; row-gap: 14px; align-items: center; }
  .plan-life .plan-top, .plan-life .plan-price { grid-column: 1; }
  .plan-life .btn { grid-column: 2; grid-row: 1 / span 2; justify-self: start; width: auto; margin: 0; }
}
@media (min-width: 900px) {
  .plan-notes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .plan-pay { padding-top: 0; border-top: 0; padding-left: 40px; border-left: 1px dashed var(--border-strong); }
}
@media (min-width: 1100px) {
  .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Lifetime in one row, its columns lined up with the cards above: the name under "1 month",
     the price note from "3 months" on, the button ending where "12 months" ends. Each card is
     (row - 3 gaps) / 4 wide; a card's content box is its width minus 2 x 22px padding and 2 x 1px border. */
  .plan-life { grid-template-columns: calc((100% + 46px - 48px) / 4 - 46px) minmax(0, 1fr) auto; column-gap: 62px; row-gap: 0; }
  .plan-life .plan-top { flex-direction: column; align-items: flex-start; gap: 4px; grid-column: 1; grid-row: 1; }
  .plan-life .plan-price { grid-column: 2; grid-row: 1; padding: 0; border-top: 0; }
  .plan-life .btn { grid-column: 3; grid-row: 1; }
}
@media (min-width: 1100px) and (max-width: 1279px) { /* four narrow cards: "per license" under the name, so "12 months" stays on one line */
  .plan-top { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* FAQ */
.faq-grid { display: grid; gap: 28px; }
.faq-list { border-top: 1px solid var(--border-strong); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 20px 0; font: 600 1.1rem/1.35 var(--font-display); letter-spacing: -0.005em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; flex: none; width: 26px; height: 26px; margin-top: -1px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(var(--accent) 0 0) center / 10px 1.6px no-repeat,
    linear-gradient(var(--accent) 0 0) center / 1.6px 10px no-repeat;
  transition: transform .2s var(--ease);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:hover { color: var(--brass-text); }
.faq-a { padding: 0 42px 22px 0; color: var(--muted); }
.faq-a p + p { margin-top: 10px; }
.faq-a a { color: var(--brass-text); font-weight: 600; }
@media (min-width: 1024px) {
  .faq-grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 72px; }
  .faq-grid .section-head { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}

/* final CTA */
.final { padding: 0 0 72px; }
.final-card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 44px 22px; border-radius: 26px;
  background: var(--band); color: var(--band-fg);
  box-shadow: var(--shadow-lg);
}
.final-card::before { /* ledger rules on ink */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(to bottom, transparent 0 35px, var(--band-line) 35px 36px);
  -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 90%);
  mask-image: linear-gradient(100deg, transparent 20%, #000 90%);
  opacity: .6;
}
.final-card::after {
  content: ""; position: absolute; z-index: -1; right: -60px; top: 50%; width: 460px; height: 460px; margin-top: -230px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(217, 179, 106, .16), rgba(217, 179, 106, 0));
}
.final-card .eyebrow { color: var(--band-brass); }
.final-card .h2 { margin-top: 14px; max-width: 16ch; color: var(--band-fg); }
.final-card .h2 em { color: var(--band-brass); }
.final-card p { margin-top: 14px; color: var(--band-muted); max-width: 36em; }
.final-ctas { display: grid; gap: 10px; margin-top: 26px; }
.final-tile { display: none; }
.final-card::after { display: none; }
@media (min-width: 480px) { .final-ctas { display: flex; flex-wrap: wrap; } }
@media (min-width: 900px) {
  .final { padding-bottom: 112px; }
  .final-card::after { display: block; }
  .final-card { padding: 64px 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
  .final-tile { display: block; width: 168px; height: 168px; border-radius: 40px; transform: rotate(-6deg); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
}

/* ---------- 10. Footer --------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); padding: 52px 0 28px; font-size: 0.94rem; }
.footer-top { display: grid; gap: 34px; }
.footer-brand p { color: var(--muted); margin-top: 12px; max-width: 30em; }
.footer-brand .slogan { font: 600 1.1rem/1.3 var(--font-display); color: var(--foreground); font-style: italic; }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.footer-col h2 { font: 500 0.74rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 14px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { text-decoration: none; color: var(--foreground); }
.footer-col a:hover { color: var(--brass-text); text-decoration: underline; text-underline-offset: 3px; }
.footer-col .soon { color: var(--muted); display: inline-flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.footer-col .soon small { font-size: 0.68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brass-text); }
.footer-contact li { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); }
.footer-contact a, .footer-contact span { min-width: 0; overflow-wrap: anywhere; }
.footer-cols .footer-contact { grid-column: 1 / -1; order: 4; }
.footer-cols .footer-app { order: 3; }
.footer-contact svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--accent); }
.footer-legal {
  margin-top: 36px; padding: 16px 18px; border-radius: var(--radius);
  background: var(--background); border: 1px solid var(--border);
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 0.85rem; color: var(--muted); line-height: 1.55;
}
.footer-legal .age { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--danger); color: var(--danger); font: 700 0.82rem/1 var(--font-body); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--muted); }
.footer-bottom a { color: var(--muted); }
@media (min-width: 900px) {
  .footer-top { grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.3fr); gap: 48px; }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 0.8fr)) minmax(0, 1.3fr); }
  .footer-cols .footer-contact, .footer-cols .footer-app { grid-column: auto; order: 0; }
}

/* ---------- 11. Inner pages (privacy, terms, refund, contact, 404) ------- */
.page-head { padding: 48px 0 28px; border-bottom: 1px solid var(--border); position: relative; overflow-x: clip; }
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--rule) 33px 34px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent);
}
.page-head h1 { font-size: clamp(2.1rem, 4vw + 1rem, 3.4rem); margin-top: 12px; }
.page-head p { margin-top: 12px; color: var(--muted); max-width: 40em; }
.page-body { padding: 40px 0 80px; }
.prose { max-width: 72ch; font-size: 1.02rem; line-height: 1.7; }
.prose h2 { font: 600 1.45rem/1.25 var(--font-display); margin: 2.2em 0 0.6em; letter-spacing: -0.01em; }
.prose h3 { font: 600 1.12rem/1.3 var(--font-display); margin: 1.6em 0 0.5em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.4em; }
.prose a { color: var(--brass-text); font-weight: 600; }
.prose strong { color: var(--foreground); }
.prose .note { padding: 14px 16px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 0.95rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { background: var(--sheet-head); color: #fff; font-weight: 600; }
.contact-cards { display: grid; gap: 14px; }
.contact-card { display: grid; gap: 6px; padding: 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; }
a.contact-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.contact-card .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 6px; }
.contact-card .ico svg { width: 22px; height: 22px; }
.contact-card b { font: 600 1.15rem/1.25 var(--font-display); }
.contact-card span { color: var(--muted); font-size: 0.94rem; overflow-wrap: anywhere; }
.contact-card .cc-info { margin-top: 0.35rem; }
.contact-card .cc-info a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 700px) { .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .contact-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } .page-head { padding: 72px 0 40px; } }
.notfound { padding: 72px 0 96px; text-align: center; display: grid; justify-items: center; gap: 16px; }
.notfound .big { font: 700 clamp(5rem, 18vw, 9rem)/0.9 var(--font-display); color: var(--accent); letter-spacing: -0.04em; }

/* ---------- 12. Motion ---------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js-motion .reveal.in { opacity: 1; transform: none; }
  .js-motion .reveal.d1 { transition-delay: .08s; }
  .js-motion .reveal.d2 { transition-delay: .16s; }
  .js-motion .reveal.d3 { transition-delay: .24s; }
  .phone-hero { animation: rise .9s var(--ease) both; }
  .float-code { animation: floaty 7s ease-in-out 1s 3; }
  .float-slip { animation: floaty 8s ease-in-out 2s 3 reverse; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } }
  @keyframes floaty { 50% { transform: translateY(-6px); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media print {
  .site-header, .marquee, .screens-nav, .final, .mobile-nav { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Pages */
/* ==========================================================================
   13. Inner pages — privacy, terms, refund, contact, 404.
   Builds on section 11 (.page-head, .page-body, .prose, .contact-card).
   ========================================================================== */

/* page head */
.page-head .eyebrow { margin-top: 0; color: var(--brass-text); }
.page-head h1.display { max-width: 20ch; text-wrap: balance; }
.page-head .lead { margin-top: 14px; max-width: 38em; }
.page-head .link-arrow { margin-top: 18px; }
.page-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.page-meta .chip { white-space: normal; line-height: 1.35; padding: 5px 10px; }
.page-meta time { color: var(--foreground); font-variant-numeric: tabular-nums; }

/* shown only while the site is switched to हिंदी (legal text stays English) */
.lang-note { display: none; }
html[lang="hi"] .page-head .lang-note {
  display: block; margin-top: 18px; padding: 12px 14px; max-width: 38em;
  border-radius: var(--radius); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--foreground); font-size: 0.97rem; line-height: 1.7;
}

/* legal layout: index on the left, text on the right */
.legal { display: grid; gap: 24px; }
.legal-main { min-width: 0; max-width: 46rem; }
@media (min-width: 1024px) {
  .legal { grid-template-columns: 236px minmax(0, 1fr); gap: 64px; align-items: start; }
}

/* table of contents — a ledger index */
.toc { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.toc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 0 18px;
  font: 500 0.76rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-text);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after {
  content: ""; width: 8px; height: 8px; margin-top: -4px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .2s var(--ease), margin .2s var(--ease);
}
.toc[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.toc ol { counter-reset: toc; padding: 6px 8px 10px; border-top: 1px solid var(--border); }
.toc li { counter-increment: toc; }
.toc a {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px;
  padding: 9px 10px; border-radius: 10px; text-decoration: none;
  font-size: 0.94rem; line-height: 1.35; color: var(--muted);
  transition: color .15s, background-color .15s;
}
.toc a::before { content: counter(toc, decimal-leading-zero); font: 500 0.76rem/1.75 var(--font-mono); color: var(--brass-text); }
/* an unnumbered lead section (refund "At a glance") keeps the list in step with the numbered headings */
.toc li.toc-intro { counter-increment: none; }
.toc li.toc-intro a::before { content: "\2022"; text-align: center; }
.toc a:hover { color: var(--foreground); background: var(--primary-soft); }
.toc a[aria-current="true"] { color: var(--foreground); background: var(--accent-soft); font-weight: 600; }
@media (min-width: 1024px) {
  .toc {
    position: sticky; top: calc(var(--header-h) + 28px);
    max-height: calc(100vh - var(--header-h) - 56px); overflow-y: auto; scrollbar-width: thin;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  .toc summary { pointer-events: none; min-height: 0; padding: 0 0 14px 10px; }
  .toc summary::after { display: none; }
  .toc ol { padding: 8px 0 0; border-top-color: var(--border-strong); }
}

/* "the short version" — a slip on top of the full text */
.gist {
  position: relative; padding: 20px 20px 6px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
}
.gist::before { /* tear-off perforation */
  content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 17px);
  opacity: .55;
}
.gist-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--border-strong); }
.gist-head h2 { font: 500 0.76rem/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-text); }
.gist-head span { font-size: 0.82rem; color: var(--muted); }
.gist li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 0.98rem; line-height: 1.55; text-wrap: pretty; }
.gist li:last-child { border-bottom: 0; }
.gist li svg { width: 18px; height: 18px; margin-top: 3px; color: var(--success); }
.gist li b { font-weight: 600; }
@media (min-width: 600px) { .gist { padding: 24px 26px 8px; } }
.glance-head { border-bottom: 0; padding-bottom: 12px; }

/* refund outcomes */
.outcomes { display: grid; gap: 12px; }
.outcome {
  display: grid; gap: 8px; align-content: start; padding: 18px 20px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.outcome h3 { font: 600 1.08rem/1.3 var(--font-display); letter-spacing: -0.005em; text-wrap: balance; }
.outcome p { color: var(--muted); font-size: 0.95rem; text-wrap: pretty; }
.outcome .chip { justify-self: start; }
.chip.bad { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.chip.plain { color: var(--foreground); }
@media (min-width: 700px) { .outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

/* legal text extras */
.legal .prose { margin-top: 12px; max-width: none; }
.legal .prose > h2 {
  display: flex; align-items: baseline; gap: 12px;
  margin: 1.9em 0 0.65em; padding-top: 1.3em; border-top: 1px solid var(--border);
}
.legal .prose > h2 .sec-n { flex: none; font: 500 0.78rem/1 var(--font-mono); letter-spacing: 0.04em; color: var(--brass-text); transform: translateY(-3px); }
.prose .kv { margin: 0 0 1.2em; border-top: 1px solid var(--border); }
.prose .kv > div { display: grid; gap: 2px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.prose .kv dt { font-weight: 600; }
.prose .kv dd { font-size: 0.98rem; }
@media (min-width: 700px) { .prose .kv > div { grid-template-columns: 10.5em minmax(0, 1fr); gap: 20px; } }
.prose ul.marks { list-style: none; padding-left: 0; }
.prose ul.marks li { position: relative; padding-left: 32px; }
.prose ul.marks li::before {
  content: "✕"; position: absolute; left: 0; top: 0.22em;
  width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  font: 700 0.62rem/1 var(--font-body); color: var(--danger); background: var(--danger-soft);
}
.prose .officer {
  margin: 0 0 1.2em; padding: 4px 18px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.prose .officer > div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px dashed var(--border-strong); }
.prose .officer > div:last-child { border-bottom: 0; }
.prose .officer dt { font: 500 0.72rem/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.prose .officer dd { font-weight: 500; overflow-wrap: anywhere; }
@media (min-width: 600px) { .prose .officer > div { grid-template-columns: 9em minmax(0, 1fr); gap: 16px; align-items: baseline; } }

/* "questions?" box + related pages */
.ask-box {
  display: grid; gap: 16px; margin-top: 44px; padding: 22px 20px; border-radius: var(--radius-lg);
  background: var(--band); color: var(--band-fg);
}
.ask-box b { display: block; font: 600 1.3rem/1.2 var(--font-display); letter-spacing: -0.01em; }
.ask-box p { margin-top: 6px; color: var(--band-muted); font-size: 0.96rem; }
.ask-ctas { display: grid; gap: 10px; }
.ask-box .btn-on-band svg { color: var(--band-brass); }
@media (min-width: 480px) { .ask-ctas { display: flex; flex-wrap: wrap; } }
@media (min-width: 600px) { .ask-box { padding: 26px 28px; } }
.related { margin-top: 40px; }
.related-h { font: 500 0.76rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-text); }
.related-grid { display: grid; gap: 10px; margin-top: 14px; }
.related-grid a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center;
  padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
  text-decoration: none; transition: border-color .2s, box-shadow .2s;
}
.related-grid a b { font: 600 1.06rem/1.3 var(--font-display); }
.related-grid a span { grid-column: 1; color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
.related-grid a svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--accent); transition: transform .18s var(--ease); }
.related-grid a:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.related-grid a:hover svg { transform: translateX(3px); }
@media (min-width: 700px) { .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* contact */
.contact-card { align-content: start; }
.contact-card .ico.wa { background: var(--success-soft); color: var(--success); }
.contact-card .cc-label { font: 500 0.72rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-text); }
.contact-card b { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.contact-card .cc-go { margin-top: 8px; font-style: normal; font-weight: 600; font-size: 0.92rem; color: var(--brass-text); }
.contact-card .cc-go::after { content: " →"; }
a.contact-card:hover .cc-go { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 699px) { /* phones: icon beside the text keeps four cards short */
  .contact-card { grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 18px; }
  .contact-card .ico { grid-row: 1 / span 4; margin-bottom: 0; }
  .contact-card > :not(.ico) { grid-column: 2; }
  .contact-card .cc-go { margin-top: 4px; }
}
.contact-grid { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); gap: 20px; align-items: start; } }

.cf { padding: 24px 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.cf > h2 { font: 600 1.55rem/1.15 var(--font-display); letter-spacing: -0.015em; }
.cf > h2 + p { margin-top: 8px; color: var(--muted); font-size: 0.96rem; max-width: 40em; }
.cf-grid { display: grid; gap: 18px; margin-top: 22px; }
.cf-field { display: grid; gap: 7px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.cf-field label, .cf-field legend { padding: 0; font-size: 0.92rem; font-weight: 600; }
.cf-field label small { font-weight: 500; color: var(--muted); font-size: 0.82rem; }
.cf input:not([type="radio"]), .cf select, .cf textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border-strong); background: var(--background); color: var(--foreground);
  font: 400 1rem/1.4 var(--font-body); transition: border-color .15s, box-shadow .15s;
}
.cf textarea { min-height: 132px; resize: vertical; }
.cf select {
  -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer;
  background:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 22px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 16px) 50% / 6px 6px no-repeat,
    var(--background);
}
.cf input::placeholder, .cf textarea::placeholder { color: var(--muted); opacity: .75; }
.cf input:not([type="radio"]):focus, .cf select:focus, .cf textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); border-radius: 12px;
}
.cf-field.invalid input, .cf-field.invalid textarea { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.cf-err { font-size: 0.85rem; font-weight: 600; color: var(--danger); }
.cf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-chips label { position: relative; font-weight: 500; }
.cf-chips input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cf-chips span {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--background);
  font-size: 0.93rem; font-weight: 600; color: var(--muted);
  transition: background-color .15s, color .15s, border-color .15s;
}
.cf-chips label:hover span { border-color: var(--foreground); color: var(--foreground); }
.cf-chips input:checked + span { background: var(--btn); border-color: var(--btn); color: var(--btn-fg); }
.cf-chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.cf-actions { display: grid; gap: 10px; margin-top: 24px; }
.cf-status { font-size: 0.92rem; font-weight: 600; color: var(--success); }
.cf-status.on { margin-top: 14px; }
.cf-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border-strong); font-size: 0.86rem; color: var(--muted); line-height: 1.5; }
.cf-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent); }
.cf-note a { color: var(--brass-text); font-weight: 600; }
@media (min-width: 480px) { .cf-actions { display: flex; flex-wrap: wrap; } }
@media (min-width: 600px) {
  .cf { padding: 30px 28px; }
  .cf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
  .cf-full { grid-column: 1 / -1; }
}

.contact-aside { display: grid; gap: 16px; }
.aside-card { padding: 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.aside-h { font: 500 0.76rem/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 12px; }
.hours > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--border-strong); }
.hours > div:first-child { padding-top: 2px; }
.hours dt { color: var(--muted); font-size: 0.94rem; }
.hours dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.aside-note { margin-top: 12px; font-size: 0.88rem; color: var(--muted); }
.handy { display: grid; gap: 10px; font-size: 0.95rem; }
.handy li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.handy svg { width: 16px; height: 16px; margin-top: 4px; color: var(--success); }
.aside-card.ink { background: var(--band); color: var(--band-fg); border-color: transparent; }
.aside-card.ink .aside-h { color: var(--band-brass); }
.aside-card.ink p { color: var(--band-muted); font-size: 0.95rem; }
.aside-card.ink .link-arrow { margin-top: 14px; color: var(--band-brass); border-bottom-color: color-mix(in srgb, var(--band-brass) 40%, transparent); }

/* 404 — a stock check that comes up empty */
.nf { position: relative; padding: 40px 0 80px; overflow-x: clip; }
.nf::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--rule) 33px 34px);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%); mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
}
.nf-grid { display: grid; gap: 40px; align-items: center; }
.nf-code { font: 700 clamp(5.6rem, 24vw, 10rem)/0.82 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: lining-nums; color: var(--foreground); }
.nf-code em { font-style: italic; font-weight: 600; color: var(--accent); }
.nf h1 { font-size: clamp(2.1rem, 4.4vw + 1rem, 3.4rem); margin-top: 22px; text-wrap: balance; }
.nf .lead { margin-top: 14px; max-width: 32em; }
.nf-ctas { display: grid; gap: 10px; margin-top: 26px; }
@media (min-width: 480px) { .nf-ctas { display: flex; flex-wrap: wrap; } }
.nf-card { width: 100%; max-width: 440px; justify-self: center; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.nf-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 18px; background: var(--sheet-head); color: #f4f0e8; font: 500 0.74rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.nf-card-head span:last-child { opacity: .7; }
.nf-row { display: grid; grid-template-columns: minmax(0, 1fr) 3.2em auto; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); text-decoration: none; }
.nf-row .nm { font-weight: 600; line-height: 1.3; min-width: 0; }
.nf-row .nm code { display: block; margin-top: 3px; font: 500 0.78rem/1.35 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.nf-row .qty { font: 600 1.1rem/1 var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.nf-row.miss { background: var(--danger-soft); }
.nf-row.miss .qty { color: var(--danger); }
.nf-row.miss .chip { background: var(--surface); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
a.nf-row { transition: background-color .15s; }
a.nf-row:hover { background: var(--primary-soft); }
a.nf-row:hover .nm { color: var(--brass-text); }
.nf-cols { display: grid; grid-template-columns: minmax(0, 1fr) 3.2em auto; gap: 12px; padding: 9px 18px; border-bottom: 1px solid var(--border); font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.nf-cols span:nth-child(2) { text-align: right; }
.nf-cols span:last-child { min-width: 5.6em; }
.nf-row .chip { min-width: 5.6em; justify-content: center; }
.nf-foot { padding: 12px 18px; font-size: 0.86rem; color: var(--muted); background: var(--primary-soft); }
.nf-foot a { color: var(--brass-text); font-weight: 600; }
@media (min-width: 900px) {
  .nf { padding: 72px 0 120px; }
  .nf-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; }
}

/* Hindi, last so it wins over the label rules above. The small tracked mono labels are made for
   Latin capitals: in Devanagari the tracking pulls letters apart and the monospace space leaves wide
   gaps, so in Hindi they switch to the body face at a size Devanagari can carry. */
:lang(hi) [data-i18n] { letter-spacing: normal; }
:lang(hi) :is(.eyebrow, .toc summary, .gist-head h2, .related-h, .contact-card .cc-label, .aside-h,
  .plan-notes-h, .footer-col h2, .nf-card-head, .nf-cols, .plan-badge, .float-cap) { font-family: var(--font-body); }
:lang(hi) :is(.eyebrow, .toc summary, .gist-head h2, .related-h, .contact-card .cc-label, .aside-h,
  .plan-notes-h, .footer-col h2, .nf-card-head, .nf-cols) { font-size: 0.84rem; }
:lang(hi) .float-cap { font-size: 0.72rem; }
:lang(hi) .eyebrow .n { font-family: var(--font-mono); font-size: 0.78rem; }

/* Dark mode, last so it wins over the panel rules above: ink panels on a near-black page get a brass
   hairline so they still read as panels. */
@media (prefers-color-scheme: dark) {
  .card-ink, .card-ink:hover, .final-card, .aside-card.ink, .ask-box { border: 1px solid color-mix(in srgb, var(--band-brass) 30%, transparent); }
}