/* ════════════════════════════════════════════════════════════════════════════
   INDIAGRAM — 2026 EDITORIAL REDESIGN
   "India + Instagram = Indiagram"
   A typographic, editorial-minimal expression of Indian growth.

   This file loads LAST in head-common.php and overrides everything before it.
   Concept: Khadi paper. Ink. Saffron. Devanagari. Gram (village/grain/measure).
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. RESET LAYERS WE NO LONGER NEED ─────────────────────────────────── */
:root {
  /* Palette — Indian editorial */
  --paper:      #F3EDE2;          /* khadi cotton */
  --paper-2:    #E9E1D2;          /* slightly deeper paper */
  --ink:        #0A0A0A;          /* sumi ink */
  --ink-2:      #1A1A1A;
  --ink-mute:   #5A5550;
  --line:       #BFB6A6;
  --line-soft:  rgba(10,10,10,0.10);

  --saffron:    #E63946;          /* sindoor vermillion — primary accent */
  --saffron-2:  #C72A36;
  --kesari:     #FF6B35;          /* warmer kesari for hover/glow */
  --gold:       #C8A24B;          /* brass / gold */
  --neem:       #2F5D3A;          /* deep neem green — secondary */
  --gulabi:     #E91E63;          /* Instagram pink moment */

  /* Type */
  --serif-display: "Fraunces", "Instrument Serif", Georgia, serif;
  --serif:         "Instrument Serif", "Fraunces", Georgia, serif;
  --sans:          "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:          "JetBrains Mono", "Geist Mono", ui-monospace, monospace;
  --devanagari:    "Noto Serif Devanagari", "Noto Sans Devanagari", sans-serif;

  /* Sizing — fluid */
  --fs-hero:    clamp(3.5rem, 12vw, 13rem);
  --fs-display: clamp(2.6rem, 7vw, 6.5rem);
  --fs-h1:      clamp(2.2rem, 5vw, 4.5rem);
  --fs-h2:      clamp(1.8rem, 3.5vw, 3rem);
  --fs-h3:      clamp(1.3rem, 2.2vw, 1.75rem);
  --fs-body:    clamp(1rem, 1.1vw, 1.125rem);
  --fs-lead:    clamp(1.15rem, 1.5vw, 1.45rem);
  --fs-small:   0.825rem;
  --fs-micro:   0.7rem;

  /* Spacing */
  --gutter:     clamp(1.25rem, 3vw, 2.5rem);
  --section-y:  clamp(5rem, 10vw, 10rem);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:   0.35s;
  --t-med:    0.6s;
  --t-slow:   1.1s;

  /* Borders */
  --r-sm: 4px;
  --r-md: 12px;
  --r-lg: 24px;
  --r-pill: 999px;
}

/* ─── 2. BASE ───────────────────────────────────────────────────────────── */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  cursor: none; /* custom cursor — falls back to auto on touch */
}

@media (hover: none) {
  body { cursor: auto; }
}

::selection { background: var(--saffron); color: var(--paper); }

a { color: inherit; text-decoration: none; transition: opacity var(--t-fast) var(--ease-out); }
a:hover { opacity: 0.7; }

/* paper grain */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: multiply;
  z-index: 9999;
}

/* ─── 3. TYPOGRAPHY ─────────────────────────────────────────────────────── */
.serif        { font-family: var(--serif); }
.serif-italic { font-family: var(--serif); font-style: italic; }
.display      { font-family: var(--serif-display); font-weight: 400; letter-spacing: -0.04em; line-height: 0.95; }
.mono         { font-family: var(--mono); letter-spacing: 0; }
.deva         { font-family: var(--devanagari); }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 1.6em; height: 1px;
  background: var(--ink-mute);
}

/* All headings on .edt-page pages — neutralise legacy ive-theme overrides
   (which used !important + -webkit-text-fill-color and Poppins everywhere). */
body.edt-page h1, body.edt-page h2, body.edt-page h3,
body.edt-page h4, body.edt-page h5, body.edt-page h6 {
  font-family: var(--serif-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.02 !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  text-transform: none !important;
  background: none !important;
  margin: 0;
}
body.edt-page h1 { font-size: var(--fs-display); }
body.edt-page h2 { font-size: var(--fs-h1); }
body.edt-page h3 { font-size: var(--fs-h2); }
body.edt-page h4 { font-size: var(--fs-h3); font-family: var(--sans) !important; font-weight: 500 !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; }
body.edt-page h5 { font-size: 1.05rem; font-family: var(--sans) !important; font-weight: 600 !important; letter-spacing: -0.005em !important; }
body.edt-page h6 { font-family: var(--mono) !important; font-weight: 400 !important; font-size: 0.72rem; text-transform: uppercase !important; letter-spacing: 0.2em !important; color: var(--ink-mute) !important; -webkit-text-fill-color: var(--ink-mute) !important; }

/* Light heading variants where the section background is dark */
body.edt-page .steps-edt h1, body.edt-page .steps-edt h2, body.edt-page .steps-edt h3,
body.edt-page .steps-edt h4, body.edt-page .steps-edt h5,
body.edt-page .cta-strip h1, body.edt-page .cta-strip h2, body.edt-page .cta-strip h3,
body.edt-page .menu-overlay h1, body.edt-page .menu-overlay h2, body.edt-page .menu-overlay h3,
body.edt-page .menu-overlay h4, body.edt-page .menu-overlay h5, body.edt-page .menu-overlay h6 {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
body.edt-page .menu-overlay h6 { color: var(--line) !important; -webkit-text-fill-color: var(--line) !important; }

/* fallback for any non-edt-page legacy heading uses */
h1, h2, h3, h4, h5 {
  font-family: var(--serif-display);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0;
}
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h1); }
h3 { font-size: var(--fs-h2); }
h4 { font-size: var(--fs-h3); font-family: var(--sans); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
h5 { font-size: 1.05rem; font-family: var(--sans); font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0 0 1em; color: var(--ink-2); line-height: 1.6; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); font-weight: 400; }

.italic-accent { font-family: var(--serif); font-style: italic; color: var(--saffron); font-weight: 400; }

/* ─── 4. LAYOUT — editorial 12-col grid override of bootstrap ───────────── */
.container { max-width: 1440px; padding-left: var(--gutter); padding-right: var(--gutter); }
.container-narrow { max-width: 920px; margin: 0 auto; padding: 0 var(--gutter); }
.container-fluid-edge { padding-left: var(--gutter); padding-right: var(--gutter); }

section { padding-top: var(--section-y); padding-bottom: var(--section-y); position: relative; }
section.tight { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }

/* Section labels — top-left tag */
.section-tag {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(2rem, 5vw, 4rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.section-tag .num {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-mute);
}
.section-tag .label {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink);
}

/* ─── 5. CUSTOM CURSOR ─────────────────────────────────────────────────── */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  mix-blend-mode: difference;
  transition: transform 0.25s var(--ease-out), width 0.3s var(--ease-out),
              height 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.cursor-dot {
  width: 6px; height: 6px;
  background: #fff;
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid #fff;
  background: transparent;
  transform: translate(-50%, -50%);
}
body.cursor-active .cursor-ring {
  width: 64px; height: 64px;
  background: rgba(255,255,255,0.12);
  border-color: transparent;
}
body.cursor-text .cursor-ring {
  width: 4px; height: 36px;
  border-radius: 2px;
  background: #fff;
  border: none;
}
@media (hover: none), (max-width: 768px) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ─── 6. NAVIGATION ────────────────────────────────────────────────────── */
.nav-strip-top {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.6rem 0;
  overflow: hidden;
  position: relative;
}
.nav-strip-top .marquee {
  display: flex; gap: 4rem;
  animation: marquee 40s linear infinite;
  white-space: nowrap;
}
.nav-strip-top .marquee span { display: inline-flex; align-items: center; gap: 0.6rem; }
.nav-strip-top .marquee .dot { width: 4px; height: 4px; background: var(--saffron); border-radius: 50%; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.navbar-edt {
  position: fixed;
  top: 32px; left: 0; right: 0;
  z-index: 1000;
  padding: 1.25rem var(--gutter);
  background: rgba(243, 237, 226, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--line-soft);
  transition: padding 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.navbar-edt.scrolled { padding-top: 0.7rem; padding-bottom: 0.7rem; }

.navbar-edt .nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  gap: 2rem;
}

/* Brand mark — used in nav, lockups, etc. SVG logo + Devanagari pairing. */
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink) !important;
  position: relative;
  text-decoration: none;
  line-height: 1;
}
.brand-mark .logo-svg {
  height: 30px;
  width: auto;
  display: block;
}
.brand-mark .logo-svg.icon {
  height: 30px; width: 30px;
  border-radius: 5px;
}
.brand-mark .deva {
  font-family: var(--devanagari);
  font-size: 0.78rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  margin-left: 0.2em;
}
@media (max-width: 600px) {
  .brand-mark .logo-svg { height: 24px; }
  .brand-mark .deva { display: none; }
}

/* Footer giant wordmark — kept as drawn text (already styled in .footer-mark below) */
/* Curtain logo — uses inline icon SVG */
.page-curtain .curtain-logo {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.page-curtain .curtain-logo svg {
  width: clamp(80px, 14vw, 130px);
  height: auto;
}
.page-curtain .curtain-logo .deva {
  font-family: var(--devanagari);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--line);
  letter-spacing: 0.05em;
}

/* Menu overlay logo — large */
.menu-overlay .menu-logo {
  position: absolute;
  top: 2rem; left: var(--gutter);
  display: flex; align-items: center; gap: 0.8rem;
}
.menu-overlay .menu-logo svg { height: 32px; width: auto; }
.menu-overlay .menu-logo .deva {
  font-family: var(--devanagari);
  font-size: 0.85rem;
  color: var(--line);
}

.nav-links {
  display: flex;
  gap: 2.2rem;
  list-style: none;
  margin: 0; padding: 0;
  justify-content: center;
}
.nav-links a {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink) !important;
  position: relative;
  padding: 0.3rem 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  justify-content: flex-end;
}
.nav-cart {
  position: relative;
  font-family: var(--mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  padding: 0.55rem 1rem;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.nav-cart:hover { background: var(--ink); color: var(--paper); opacity: 1; }
.nav-cart .count { font-family: var(--mono); font-size: 0.72rem; }

.menu-toggle {
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: var(--r-pill);
  padding: 0.6rem 1.2rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: all 0.3s var(--ease-out);
}
.menu-toggle:hover { background: var(--saffron); }
.menu-toggle .bars {
  display: inline-flex; flex-direction: column; gap: 3px;
}
.menu-toggle .bars span {
  width: 14px; height: 1px; background: var(--paper); transition: transform 0.3s var(--ease-out);
}

@media (max-width: 900px) {
  .navbar-edt { top: 0; padding: 1rem var(--gutter); }
  .nav-strip-top { display: none; }
  .nav-links { display: none; }
  .navbar-edt .nav-inner { grid-template-columns: auto 1fr auto; }
  .nav-actions .nav-cart .nav-cart-label { display: none; }
}

/* ─── 6b. FULLSCREEN MENU OVERLAY ──────────────────────────────────────── */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: var(--paper);
  z-index: 9998;
  transform: translateY(-100%);
  transition: transform 0.7s var(--ease-in-out);
  overflow-y: auto;
  padding: 6rem var(--gutter) 4rem;
}
.menu-overlay.open { transform: translateY(0); }
.menu-overlay .menu-close {
  position: absolute;
  top: 2rem; right: var(--gutter);
  background: transparent;
  border: 1px solid var(--paper);
  color: var(--paper);
  border-radius: var(--r-pill);
  padding: 0.6rem 1.2rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
}
.menu-overlay .menu-grid {
  max-width: 1440px;
  margin: 2rem auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
}
.menu-overlay .menu-primary {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.menu-overlay .menu-primary a {
  font-family: var(--serif-display);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1;
  color: var(--paper);
  text-decoration: none;
  letter-spacing: -0.04em;
  position: relative;
  width: max-content;
  transition: color 0.4s var(--ease-out), padding 0.4s var(--ease-out);
}
.menu-overlay .menu-primary a:hover {
  color: var(--saffron);
  padding-left: 1rem;
  opacity: 1;
}
.menu-overlay .menu-primary a .num {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  vertical-align: super;
  margin-right: 0.8rem;
}
.menu-overlay .menu-secondary { display: flex; flex-direction: column; gap: 2rem; }
.menu-overlay .menu-section h6 {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--line);
  margin-bottom: 0.8rem;
}
.menu-overlay .menu-section a {
  display: block;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1.05rem;
  padding: 0.3rem 0;
  letter-spacing: -0.005em;
}
.menu-overlay .menu-section a .deva { color: var(--line); margin-left: 0.4rem; font-size: 0.8em; }
.menu-overlay .menu-foot {
  grid-column: 1 / -1;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(243,237,226,0.18);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--line);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 800px) {
  .menu-overlay .menu-grid { grid-template-columns: 1fr; }
}

/* ─── 7. BUTTONS ───────────────────────────────────────────────────────── */
.btn-ink, .btn-saffron, .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 1.8rem;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.btn-ink     { background: var(--ink);     color: var(--paper); }
.btn-saffron { background: var(--saffron); color: var(--paper); }
.btn-ghost   { background: transparent;    color: var(--ink); border-color: var(--ink); }

.btn-ink:hover     { background: var(--saffron); color: var(--paper); opacity: 1; transform: translateY(-2px); }
.btn-saffron:hover { background: var(--ink);     color: var(--paper); opacity: 1; transform: translateY(-2px); }
.btn-ghost:hover   { background: var(--ink);     color: var(--paper); opacity: 1; transform: translateY(-2px); }

.btn-ink .arr, .btn-saffron .arr, .btn-ghost .arr {
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
}
.btn-ink:hover .arr, .btn-saffron:hover .arr, .btn-ghost:hover .arr {
  transform: translateX(4px);
}

/* magnetic button wrapper helper */
.magnetic { display: inline-block; }

/* ─── 8. HERO — kinetic typographic ────────────────────────────────────── */
.hero-edt {
  min-height: 100vh;
  padding: 12rem var(--gutter) 4rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.hero-edt .hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
}
.hero-edt .hero-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  flex-wrap: wrap;
  gap: 1rem;
}
.hero-edt h1.hero-title {
  font-size: var(--fs-hero);
  line-height: 0.88;
  letter-spacing: -0.05em;
  font-weight: 400;
  font-family: var(--serif-display);
  margin: 0;
}
.hero-edt h1.hero-title .line { display: block; overflow: hidden; }
.hero-edt h1.hero-title .line > span { display: inline-block; }
.hero-edt h1.hero-title .italic-accent {
  font-family: var(--serif);
  font-style: italic;
  color: var(--saffron);
}
.hero-edt h1.hero-title .outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  text-stroke: 1.5px var(--ink);
}
.hero-edt h1.hero-title .deva {
  font-family: var(--devanagari);
  font-size: 0.7em;
  color: var(--ink-mute);
  letter-spacing: 0;
  font-weight: 400;
  margin-left: 0.2em;
}

.hero-edt .hero-foot {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 2rem;
  align-items: end;
}
.hero-edt .hero-foot p.lead { max-width: 38ch; }
.hero-edt .hero-stat {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border-top: 1px solid var(--line-soft);
  padding-top: 0.8rem;
}
.hero-edt .hero-stat strong {
  display: block;
  font-family: var(--serif-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin-top: 0.4rem;
}

/* canvas hero backdrop — particle India map */
#hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.85;
  pointer-events: none;
}

@media (max-width: 800px) {
  .hero-edt { padding: 8rem 1.25rem 3rem; min-height: 92vh; }
  .hero-edt .hero-foot { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* ─── 9. SCROLLING TICKER / MARQUEE ────────────────────────────────────── */
.ticker {
  background: var(--ink);
  color: var(--paper);
  padding: 1.2rem 0;
  overflow: hidden;
  border-top: 1px solid var(--paper);
  border-bottom: 1px solid var(--paper);
}
.ticker .track {
  display: flex;
  gap: 4rem;
  animation: marquee 35s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.ticker .track:hover { animation-play-state: paused; }
.ticker span.item {
  font-family: var(--serif-display);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 2rem;
}
.ticker span.item .star { color: var(--saffron); font-style: italic; font-family: var(--serif); }
.ticker span.item .deva { font-family: var(--devanagari); color: var(--line); font-size: 0.7em; }

/* ─── 10. MANIFESTO / TYPE PANELS ──────────────────────────────────────── */
.manifesto-edt {
  padding: clamp(5rem, 10vw, 9rem) var(--gutter);
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.manifesto-edt .container { max-width: 1440px; }
.manifesto-edt .head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 3rem;
  flex-wrap: wrap; gap: 1rem;
}
.manifesto-edt .head .label { font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-mute); }
.manifesto-edt .head .deva  { font-family: var(--devanagari); font-size: 1.1rem; color: var(--ink-mute); }

.manifesto-line {
  font-family: var(--serif-display);
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink);
  display: block;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 400;
}
.manifesto-line:last-child { border-bottom: none; }
.manifesto-line em { font-style: italic; color: var(--saffron); font-family: var(--serif); }
.manifesto-line .num {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-mute);
  vertical-align: super;
  margin-right: 1rem;
  letter-spacing: 0.15em;
}

/* ─── 11. SERVICES — editorial product cards ──────────────────────────── */
.services-edt { background: var(--paper); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-soft);
}
.service-card {
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out);
  cursor: pointer;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(100%);
  transition: transform 0.6s var(--ease-out);
  z-index: 0;
}
.service-card:hover::before { transform: translateY(0); }
/* IMPORTANT — legacy ive-theme.css uses -webkit-text-fill-color !important on h1-h6.
   We must override both `color` AND `-webkit-text-fill-color` for hover to work. */
.service-card:hover { color: var(--paper) !important; -webkit-text-fill-color: var(--paper) !important; }
.service-card:hover .pname,
.service-card:hover h1, .service-card:hover h2, .service-card:hover h3,
.service-card:hover h4, .service-card:hover h5, .service-card:hover h6 {
    color: var(--paper) !important;
    -webkit-text-fill-color: var(--paper) !important;
}
.service-card:hover .pdesc     { color: rgba(243, 237, 226, 0.78) !important; -webkit-text-fill-color: rgba(243, 237, 226, 0.78) !important; }
.service-card:hover .meta,
.service-card:hover .meta span { color: rgba(243, 237, 226, 0.65) !important; -webkit-text-fill-color: rgba(243, 237, 226, 0.65) !important; }
.service-card:hover .idx       { color: rgba(243, 237, 226, 0.50) !important; -webkit-text-fill-color: rgba(243, 237, 226, 0.50) !important; }
.service-card:hover .price     { color: var(--paper)               !important; -webkit-text-fill-color: var(--paper) !important; }
.service-card:hover .price .unit { color: rgba(243, 237, 226, 0.55) !important; -webkit-text-fill-color: rgba(243, 237, 226, 0.55) !important; }
.service-card:hover .product-price-display { color: var(--paper) !important; -webkit-text-fill-color: var(--paper) !important; }
.service-card:hover .platform-icon { color: var(--saffron) !important; -webkit-text-fill-color: var(--saffron) !important; }
/* preserve saffron accents inside hovered cards */
.service-card:hover .italic-accent,
.service-card:hover em { color: var(--saffron) !important; -webkit-text-fill-color: var(--saffron) !important; }
.service-card > * { position: relative; z-index: 1; }

.service-card .card-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 2rem;
}
.service-card .platform-icon { font-size: 1.6rem; color: var(--ink-mute); transition: color 0.4s var(--ease-out); }
.service-card .idx {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  letter-spacing: 0.1em;
}
.service-card .pname {
  font-family: var(--serif-display);
  font-size: 1.6rem;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 0.6rem;
  transition: color 0.4s var(--ease-out);
}
.service-card .pdesc {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-mute);
  line-height: 1.5;
  margin: 0 0 1.5rem;
  transition: color 0.4s var(--ease-out);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.service-card .meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-mute);
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.service-card .card-bottom {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: end;
  gap: 1rem;
}
.service-card .price {
  font-family: var(--serif-display);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.service-card .price .unit {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  display: block;
  margin-top: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.service-card .btn-card {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 0.7rem 1.2rem;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  white-space: nowrap;
}
.service-card:hover .btn-card { border-color: var(--paper) !important; color: var(--paper) !important; background: transparent !important; }
.service-card .btn-card:hover { background: var(--saffron) !important; border-color: var(--saffron) !important; color: var(--paper) !important; }

/* When .service-card is rendered as <a> (catalogue links), kill the base link
   opacity hover and make sure descendants stay light on dark */
a.service-card { text-decoration: none; }
a.service-card:hover { opacity: 1 !important; }
a.service-card:hover .pname,
a.service-card:hover .pdesc,
a.service-card:hover .meta,
a.service-card:hover .price,
a.service-card:hover .idx { color: var(--paper) !important; }

/* The active quantity selector inside a hovered card — keep visible */
.service-card:hover .qty-btn { color: var(--paper) !important; border-color: rgba(243,237,226,0.35) !important; background: transparent !important; }
.service-card:hover .qty-btn:hover,
.service-card:hover .qty-btn.active { background: var(--saffron) !important; border-color: var(--saffron) !important; color: var(--paper) !important; }
.service-card:hover .product-price-display { color: var(--paper) !important; }

/* ─── 12. STEPS / HOW-IT-WORKS ─────────────────────────────────────────── */
.steps-edt { background: var(--ink); color: var(--paper); }
.steps-edt h2 { color: var(--paper); }
.steps-edt p  { color: var(--line); }
.steps-edt .eyebrow { color: var(--line); }
.steps-edt .eyebrow::before { background: var(--line); }
.steps-edt .section-tag { border-bottom-color: rgba(243,237,226,0.15); }
.steps-edt .section-tag .label, .steps-edt .section-tag .num { color: var(--paper); }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 3rem;
}
.step-edt {
  padding: 2.5rem 1.5rem 2.5rem 0;
  border-right: 1px solid rgba(243,237,226,0.15);
  position: relative;
}
.step-edt:last-child { border-right: none; }
.step-edt .step-num {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--saffron);
  letter-spacing: 0.18em;
  display: block;
  margin-bottom: 1.5rem;
}
.step-edt h3 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--paper);
  margin-bottom: 0.8rem;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.step-edt p { font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 800px) {
  .steps-grid { grid-template-columns: 1fr; }
  .step-edt { border-right: none; border-bottom: 1px solid rgba(243,237,226,0.15); padding: 2rem 0; }
  .step-edt:last-child { border-bottom: none; }
}

/* ─── 13. BHARAT COUNTER (live stat panel) ─────────────────────────────── */
.bharat-counter {
  background: var(--paper-2);
  padding: clamp(4rem, 8vw, 7rem) var(--gutter);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.bharat-counter .head {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  margin-bottom: 3rem;
}
.bharat-counter .live-tag {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink);
}
.bharat-counter .live-tag .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--saffron);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(230,57,70,0.6); }
  50%      { transform: scale(1.25); opacity: 0.7; box-shadow: 0 0 0 12px rgba(230,57,70,0); }
}
.bharat-counter .big-num {
  font-family: var(--serif-display);
  font-size: clamp(4rem, 14vw, 14rem);
  line-height: 1;
  letter-spacing: -0.06em;
  font-weight: 400;
  color: var(--ink);
  margin: 1rem 0;
}
.bharat-counter .big-num .small { font-size: 0.4em; font-family: var(--mono); color: var(--ink-mute); letter-spacing: 0; vertical-align: super; }
.bharat-counter .breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  margin-top: 3rem;
  border-top: 1px solid var(--line-soft);
}
.bharat-counter .b-item {
  padding: 1.4rem 1.2rem 1.4rem 0;
  border-right: 1px solid var(--line-soft);
}
.bharat-counter .b-item:last-child { border-right: none; }
.bharat-counter .b-item .city {
  font-family: var(--mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-mute);
}
.bharat-counter .b-item .val {
  font-family: var(--serif-display);
  font-size: 1.8rem;
  letter-spacing: -0.03em;
  margin-top: 0.5rem;
}

/* ─── 14. TESTIMONIALS / PRESS ─────────────────────────────────────────── */
.testimonials-edt { background: var(--paper); }
.testimonial-card {
  padding: 3rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.testimonial-card blockquote {
  font-family: var(--serif-display);
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 1.5rem;
  font-weight: 400;
  max-width: 22ch;
}
.testimonial-card blockquote em {
  font-style: italic; color: var(--saffron); font-family: var(--serif);
}
.testimonial-card .who {
  font-family: var(--mono); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-mute);
  display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.testimonial-card .who strong { color: var(--ink); }

/* ─── 15. FAQ ──────────────────────────────────────────────────────────── */
.faq-edt { background: var(--paper); }
.faq-list { border-top: 1px solid var(--line-soft); }
.faq-item {
  border-bottom: 1px solid var(--line-soft);
  padding: 1.6rem 0;
  cursor: pointer;
  transition: padding 0.4s var(--ease-out);
}
.faq-item.open { padding: 2.2rem 0; }
.faq-item .q {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--serif-display);
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.faq-item .q .plus {
  font-family: var(--mono); font-size: 1.2rem;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  transition: transform 0.5s var(--ease-out), background 0.4s var(--ease-out), color 0.4s var(--ease-out);
  flex-shrink: 0;
}
.faq-item.open .q .plus { transform: rotate(45deg); background: var(--saffron); color: var(--paper); border-color: var(--saffron); }
.faq-item .a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s var(--ease-out), margin 0.4s var(--ease-out);
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-mute);
  max-width: 60ch;
}
.faq-item.open .a { max-height: 400px; margin-top: 1rem; }

/* ─── 16. CTA STRIP ────────────────────────────────────────────────────── */
.cta-strip {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(5rem, 10vw, 9rem) var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: 'इंडियाग्राम';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--devanagari);
  font-size: clamp(8rem, 25vw, 28rem);
  color: rgba(243,237,226,0.05);
  font-weight: 400;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}
.cta-strip .inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; }
.cta-strip .eyebrow { color: var(--line); }
.cta-strip .eyebrow::before { background: var(--line); }
.cta-strip h2 {
  color: var(--paper);
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 1.5rem 0 2.5rem;
}
.cta-strip h2 em { font-style: italic; color: var(--saffron); font-family: var(--serif); }
.cta-strip .btn-saffron { background: var(--saffron); color: var(--paper); padding: 1.2rem 2.2rem; font-size: 1rem; }
.cta-strip .btn-saffron:hover { background: var(--paper); color: var(--ink); }

/* ─── 17. FOOTER ───────────────────────────────────────────────────────── */
.footer-edt {
  background: var(--paper);
  color: var(--ink);
  padding: 5rem var(--gutter) 2rem;
  border-top: 1px solid var(--line-soft);
}
.footer-edt .footer-mark {
  font-family: var(--serif-display);
  font-size: clamp(5rem, 18vw, 18rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  margin: 0 0 3rem;
  color: var(--ink);
  font-weight: 400;
}
.footer-edt .footer-mark .deva {
  font-family: var(--devanagari);
  font-size: 0.45em;
  color: var(--ink-mute);
  display: block;
  letter-spacing: 0;
  line-height: 1;
}
.footer-edt .footer-mark .dot-i { display: inline-block; width: 0.4em; height: 0.4em; background: var(--saffron); border-radius: 50%; vertical-align: 0.55em; }

.footer-edt .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  border-top: 1px solid var(--line-soft);
  padding-top: 2.5rem;
}
.footer-edt h6 {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  margin: 0 0 1rem;
}
.footer-edt ul { list-style: none; padding: 0; margin: 0; }
.footer-edt ul li { margin-bottom: 0.5rem; }
.footer-edt ul li a {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.footer-edt .signoff {
  border-top: 1px solid var(--line-soft);
  margin-top: 3rem;
  padding-top: 1.5rem;
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-mute);
}
@media (max-width: 800px) {
  .footer-edt .grid { grid-template-columns: 1fr 1fr; }
}

/* ─── 18. FORMS ────────────────────────────────────────────────────────── */
.form-edt label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin-bottom: 0.6rem;
}
.form-edt input, .form-edt textarea, .form-edt select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  padding: 0.9rem 0;
  font-family: var(--serif-display);
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  transition: border-color 0.3s var(--ease-out);
}
.form-edt input::placeholder, .form-edt textarea::placeholder { color: var(--ink-mute); }
.form-edt input:focus, .form-edt textarea:focus, .form-edt select:focus {
  border-bottom-color: var(--saffron);
}
.form-edt .field { margin-bottom: 2.2rem; }
.form-edt textarea { min-height: 120px; resize: vertical; font-size: 1.15rem; line-height: 1.5; font-family: var(--sans); }

/* ─── 19. PAGE INTRO (sub-pages) ──────────────────────────────────────── */
.page-intro {
  padding: 12rem var(--gutter) 4rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.page-intro .breadcrumb {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-bottom: 2rem;
}
.page-intro .breadcrumb a { color: var(--ink-mute); }
.page-intro .breadcrumb .sep { margin: 0 0.6rem; color: var(--line); }
.page-intro h1 {
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-weight: 400;
  font-family: var(--serif-display);
  margin: 0 0 1.5rem;
}
.page-intro h1 .italic-accent { font-style: italic; color: var(--saffron); font-family: var(--serif); }
.page-intro .lead { max-width: 50ch; margin-top: 1rem; }

/* ─── 20. REVEAL ANIMATIONS ───────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }

.split-line { overflow: hidden; display: block; }
.split-line > span { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease-out); }
.split-line.in > span { transform: translateY(0); }

/* ─── 21. LOADER / PAGE TRANSITION ────────────────────────────────────── */
.page-curtain {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  transition: transform 1.2s var(--ease-in-out);
}
.page-curtain.gone { transform: translateY(-100%); pointer-events: none; }
.page-curtain .curtain-text {
  font-family: var(--serif-display);
  font-size: clamp(3rem, 10vw, 9rem);
  color: var(--paper);
  font-weight: 400;
  letter-spacing: -0.04em;
  display: flex; align-items: baseline; gap: 0.4rem;
}
.page-curtain .curtain-text .dot-i { width: 0.3em; height: 0.3em; background: var(--saffron); border-radius: 50%; display: inline-block; vertical-align: middle; }
.page-curtain .curtain-text .deva {
  font-family: var(--devanagari); font-size: 0.4em;
  color: var(--line); margin-left: 0.5em;
}

/* ─── 22. UTILITY ─────────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--line-soft); margin: 4rem 0; }
.text-ink { color: var(--ink) !important; }
.text-mute { color: var(--ink-mute) !important; }
.text-saffron { color: var(--saffron) !important; }
.bg-paper { background: var(--paper) !important; }
.bg-ink { background: var(--ink) !important; color: var(--paper); }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; } .gap-4 { gap: 2rem; }
.mt-section { margin-top: var(--section-y); }
.no-pad { padding: 0 !important; }

/* hide bootstrap leftovers when we use the new system */
body.edt-page .navbar-premium,
body.edt-page .footer-premium,
body.edt-page .whatsapp-float { display: none !important; }
body.edt-page .hero-premium,
body.edt-page .ive-manifesto,
body.edt-page .stats-section,
body.edt-page .category-section,
body.edt-page .ive-process,
body.edt-page .ive-testimonials { display: none !important; }

/* edge for accessibility */
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 4px; }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .ticker .track { animation: none; }
  .nav-strip-top .marquee { animation: none; }
}

/* ─── 23. PROSE (legal pages, long-form) ────────────────────────────── */
.prose-edt {
  background: var(--paper);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) var(--section-y);
}
.prose-edt .container { max-width: 920px; }

.prose-edt .toc {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 2rem 0;
  margin-bottom: 3rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
}
.prose-edt .toc h6 {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  margin: 0;
}
.prose-edt .toc ol {
  list-style: none;
  counter-reset: toc;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 2rem;
}
.prose-edt .toc ol li {
  counter-increment: toc;
  font-family: var(--sans);
  font-size: 0.95rem;
}
.prose-edt .toc ol li::before {
  content: counter(toc, decimal-leading-zero) " ";
  font-family: var(--mono); color: var(--ink-mute); font-size: 0.78rem;
  margin-right: 0.5rem;
}
.prose-edt .toc a { color: var(--ink); }

.prose-edt .lead-text {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.45;
  color: var(--ink);
  font-style: italic;
  margin: 0 0 3rem;
  max-width: 50ch;
}

.prose-edt h3 {
  font-family: var(--serif-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  margin: 3rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  color: var(--ink);
  line-height: 1.15;
}
.prose-edt h3:first-of-type { border-top: none; padding-top: 0; }
.prose-edt p, .prose-edt ul, .prose-edt ol {
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 1.2rem;
}
.prose-edt ul, .prose-edt ol { padding-left: 1.5rem; }
.prose-edt ul li, .prose-edt ol li { margin-bottom: 0.5rem; }
.prose-edt ul li::marker { color: var(--saffron); }
.prose-edt a { color: var(--saffron); text-decoration: underline; text-underline-offset: 3px; }
.prose-edt a:hover { color: var(--ink); opacity: 1; }

@media (max-width: 700px) {
  .prose-edt .toc { grid-template-columns: 1fr; }
  .prose-edt .toc ol { grid-template-columns: 1fr; }
}

/* ─── 24. TRACK ORDER ────────────────────────────────────────────────── */
.track-edt { background: var(--paper); padding-top: clamp(3rem, 6vw, 5rem); }
.track-edt .track-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.track-edt .order-result {
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 2.5rem;
}
.track-edt .order-result h4 {
  font-family: var(--serif-display);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.025em;
}
.track-edt .order-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
}
.track-edt .order-badge.pending,
.track-edt .order-badge.processing { background: var(--kesari); }
.track-edt .order-badge.completed { background: var(--neem); }
.track-edt .order-badge.failed,
.track-edt .order-badge.cancelled { background: var(--saffron); }
.track-edt .progress-list {
  margin-top: 1.5rem; padding: 0; list-style: none;
  border-top: 1px solid var(--line-soft);
}
.track-edt .progress-list li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 1rem;
  align-items: center;
  opacity: 0.4;
  transition: opacity 0.4s var(--ease-out);
}
.track-edt .progress-list li.active,
.track-edt .progress-list li.completed { opacity: 1; }
.track-edt .progress-list .ic {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  background: var(--paper);
}
.track-edt .progress-list li.completed .ic { background: var(--ink); color: var(--paper); }
.track-edt .progress-list li.active .ic { background: var(--saffron); color: var(--paper); border-color: var(--saffron); animation: pulse 1.6s infinite; }
.track-edt .progress-list h6 { font-family: var(--sans); font-size: 0.92rem; font-weight: 600; margin: 0 0 0.1rem; }
.track-edt .progress-list p { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin: 0; }

@media (max-width: 800px) {
  .track-edt .track-grid { grid-template-columns: 1fr; }
}

/* ─── 25. 404 ────────────────────────────────────────────────────────── */
.notfound {
  min-height: 100vh;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem var(--gutter);
}
.notfound .big-404 {
  font-family: var(--serif-display);
  font-size: clamp(8rem, 30vw, 24rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.notfound .big-404 .italic-accent { font-style: italic; color: var(--saffron); font-family: var(--serif); }
.notfound .deva { font-family: var(--devanagari); font-size: clamp(1rem, 2vw, 1.4rem); color: var(--ink-mute); margin: 0.5rem 0; }
.notfound p.lead { max-width: 40ch; margin: 1.5rem auto 2rem; }