/* ════════════════════════════════════════════════════════════════════
   themes.css — namo360.life production theme system v1.1
   ────────────────────────────────────────────────────────────────────
   PRODUCTION ARCHITECTURE — 2 themes only:

     light  — the ORIGINAL brand. Warm parchment, lotus pink, saffron
              CTAs, Tiranga green surname. Defined inline in index.html
              under [data-theme="light"]. Brand source-of-truth — do not
              re-define here.
     dark   — deep teal + custard text + cream-light surfaces. The
              brand layer (lotus, saffron, Tiranga green) renders
              IDENTICALLY to light; only theme territory (page bg,
              surfaces, body text, hairlines, CTA fill) changes.

   Default on dark-OS preference → 'dark'.
   Default on light-OS preference → 'light'.

   Experimental variants were explored during the v1 theme system
   phase and pruned at v1.1. Available in git history at commit
   112cc3c for reference. Removed from production to reduce
   maintenance surface.

   See .claude/skills/namo360-theme/ for the full playbook.
   ════════════════════════════════════════════════════════════════════ */

/* ─── SECTION A — ROOT DEFAULTS ──────────────────────────────────── */
:root {
  --namo-btn-bg:   transparent;
  --namo-btn-text: var(--namo-text);
  --namo-overlay:  color-mix(in srgb, var(--namo-bg) 82%, transparent);

  /* Brand tokens — exact light-theme hex values. Brand-locked
     elements use these directly, identically across every theme.
     The lotus is the logo; every pink in the site is an expression
     of THAT lotus. There is no per-theme lotus translation. */
  --brand-lotus:       #C8437E;  /* sacred lotus pink — the canonical pink */
  --brand-saffron:     #E87820;  /* Tiranga saffron — Reddy shimmer + chip accent */
  --brand-tiranga:     #1A7A3A;  /* heritage green — Chintala surname */
  --brand-navy-deep:   #0A1A2F;  /* deep brand navy */
}

/* ─── SECTION B — THEMES ─────────────────────────────────────────── */

/* LIGHT — minimal --namo-* tokens for the floating switcher widget
   ONLY. The full light brand styling (page backgrounds, text, CTAs,
   logo, sections) lives in index.html under [data-theme="light"]. */
:root[data-theme="light"] {
  --namo-surface:      #FFFFFF;
  --namo-border:       rgba(26,10,46,0.10);
  --namo-text:         #1A0A2E;
  --namo-text-muted:   rgba(26,10,46,0.55);
  --namo-accent:       #C8437E;
  --namo-btn-border:   rgba(200,67,126,0.35);
}

/* DARK — production dark theme: deep teal + custard text. Provides
   --namo-* tokens AND legacy aliases (--bg, --text, --gold, etc.) so
   page CSS in index.html that references the legacy alias system
   resolves to dark theme values. */
:root[data-theme="dark"] {
  /* ════ SURFACE SYSTEM v2.5 — canonical ════
     Mirrors Light's two-token system. Section assignments live in
     Section B.6 below. The --namo-* and legacy aliases all flow from
     these two tokens so no section background needs theme-specific
     values. */
  --surface-base:      #0D1E24;
  --surface-raised:    #193741;

  --namo-bg:           var(--surface-base);
  --namo-surface:      var(--surface-raised);
  --namo-nav:          #1d414d;
  --namo-accent:       #f7dc99;
  --namo-accent-sub:   #c1c19f;
  --namo-text:         #f8e9ac;
  --namo-text-muted:   #9a9260;
  --namo-border:       rgba(247,220,153,0.13);
  --namo-btn-bg:       transparent;
  --namo-btn-border:   rgba(248,233,172,0.30);
  --namo-btn-text:     #f8e9ac;
  --namo-overlay:      rgba(13,30,36,0.82);

  --bg:        var(--namo-bg);
  --bg2:       var(--namo-surface);
  --bg3:       var(--namo-surface);
  --bg4:       var(--namo-surface);
  --text:      var(--namo-text);
  --text-2:    var(--namo-text);
  --text-3:    var(--namo-text-muted);
  --muted:     var(--namo-text-muted);
  --muted-2:   var(--namo-text-muted);
  --border:    var(--namo-border);
  --border-2:  var(--namo-border);
  --card:      var(--namo-surface);
  --nav-bg:    var(--namo-nav);
  --gold:      var(--namo-accent);
  --gold-2:    var(--namo-accent-sub);
  --gold-3:    var(--namo-border);
  --gold-text: var(--namo-accent);
  --input-bg:  var(--namo-surface);
  --shadow:    rgba(0,0,0,0.5);
}

/* ─── SECTION B.6 — SECTION SURFACE ASSIGNMENT (canonical) ──────── */
/* Single source of truth for every <section> background on the site.
   Sections listed in document order. Modify here, not anywhere else.
   No inline or theme-specific override of these classes is permitted.

   Pattern: section assignments are IDENTICAL across themes. Only the
   tonal values differ (raised lifts lighter on dark, deeper on light).

   Cards (.svc, .pillar, .pc, .persona, .stat-card, .t-card,
   .clarity-card, .kgp, .cred-nj, .faq-item) inherit var(--card),
   which is #FFFFFF on light (white-on-deeper-cream contrast) and
   var(--surface-raised) on dark (raised-teal-on-deeper-teal contrast). */

.hero          { background: var(--surface-base);   }  /* base */
.movement      { background: var(--surface-raised); }  /* raised */
.stats-section { background: var(--surface-raised); }  /* raised */
.about         { background: var(--surface-base);   }  /* base */
.namo-section  { background: var(--surface-base);   }  /* base — Vision */
.services      { background: var(--surface-raised); }  /* raised — also Medicare (shares .services class) */
.personas      { background: var(--surface-raised); }  /* raised — #foryou */
.credentials   { background: var(--surface-base);   }  /* base */
.partner       { background: var(--surface-raised); }  /* raised */
.events        { background: var(--surface-base);   }  /* base */
.testimonials  { background: var(--surface-raised); }  /* raised */
.consult       { background: var(--surface-raised); }  /* raised */
.faq           { background: var(--surface-raised); }  /* raised */

/* ─── SECTION B.7 — HAIRLINE SECTION DIVIDERS ────────────────────── */
/* Brand-gradient line at the top of every section EXCEPT hero. The
   line itself does the visual-rhythm work; the cream tone shift
   between base/raised reinforces but doesn't carry the rhythm alone.

   Implementation: border-top + border-image instead of ::before so
   we don't clobber existing ambient overlays on .movement::before
   and .partner::before. Pseudo-elements stay theirs; the border
   lives on the section element itself.

   Brand colors (lotus + saffron) work on both themes — they read
   against parchment on Light and against deep teal on Dark.
   Opacity baked into rgba stops so border-image renders consistently.

   To tune visibility: adjust the rgba alpha in the gradient stops
   (currently 0.35). Bump to 0.55 if too subtle; dial to 0.25 if too
   prominent. */
.movement,
.stats-section,
.about,
.namo-section,
.services,
.personas,
.credentials,
.partner,
.events,
.testimonials,
.consult,
.faq {
  border-top:         1px solid transparent;
  border-image-source: linear-gradient(90deg,
    transparent 0%,
    rgba(200,67,126,0.35) 30%,
    rgba(232,120,32,0.35) 50%,
    rgba(200,67,126,0.35) 70%,
    transparent 100%);
  border-image-slice: 1;
}

/* ─── SECTION C — REMOVED at v2.1 ────────────────────────────────── */
/* The dark-theme ghost CTA override that previously lived here was
   removed when CTAs were unified to saffron-filled on both themes.
   Base .btn-gold, .nav-cta, .float-book, .cf-submit in index.html
   now use brand saffron (#E87820) directly — no theme-conditional
   variation. Brand semantic: saffron = action, lotus = link/emphasis. */

/* ─── SECTION D — SVG GRAIN OVERLAY (dark theme only) ────────────── */
/* The original light theme has its own ambient gradient backdrop
   (defined inline in index.html) and does not need the grain. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0;
  transition: opacity 0.3s;
}
[data-theme="dark"] body::after { opacity: 0.046; }
#namo-sw { z-index: 9999 !important; }

/* ─── SECTION E — HERO RADIAL DEPTH (dark theme only) ────────────── */
.hero { position: relative; }
.hero > * { position: relative; z-index: 1; }

[data-theme="dark"] .hero::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 80% 65% at 18% 12%,
    rgba(29,65,77,0.70) 0%, transparent 55%);
}

/* ─── SECTION F — BRAND LOCK (identical on every theme) ──────────── */
/* The lotus is the logo. Every brand element below uses the EXACT
   value the original light theme renders — the same pinks, gold,
   green, saffron — byte-identical across light AND dark. Only the
   page background and body text vary by theme.

   Specificity strategy — each rule uses a 2-class or class+element
   compound to beat the inline base rules in index.html, without
   needing !important. Where the inline `[data-theme="light"]` rule
   has equal specificity, both produce the same color (the brand
   value), so the cascade tie is visually a no-op. */

/* "नमो" Devanagari — lotus → lotus-soft gradient, every theme.
   Specificity: .namo-word .namo-devanagari (0,0,2,0) beats inline
   .namo-devanagari (0,0,1,0) which uses var(--gold). */
.namo-word .namo-devanagari {
  background: linear-gradient(135deg, var(--brand-lotus), #E06898);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Universal italic emphasis — lotus pink, every theme, every context.
   The <em> tag is brand-semantic: every italic emphasis is a brand
   moment. One rule replaces section-by-section enumeration.

   !important here is architectural, not a hack: it declares that
   brand identity outranks any utility coloring. Element-only
   selectors (em, html em, body em — all 0,0,0,1 or 0,0,0,2) always
   lose to class-scoped selectors like .partner-vehicle em or
   .section-hd em (0,0,1,1) regardless of source order. Bumped
   element count never beats class count. !important is the only
   single-selector path that catches every <em> site-wide. */
em {
  color: var(--brand-lotus) !important;
}

/* Body-copy inline <strong> — lotus pink, every theme. Targeted to
   narrative-emphasis contexts only: NOT headline gradients (which
   have their own gradient brand-lock on .s-title strong), NOT form
   UI labels (.photo-drop-text, .f-note), NOT legal disclaimer
   labels (.ft-copy footer), NOT the explicit color-callout in
   .lsg-body (which uses inline style="color:..." per element).
   Specificity (0,0,2,1) beats existing inline (0,0,1,1) rules
   without !important. */
.about-copy p strong,
.partner-text p strong,
.namo-pillars .namo-pillar strong,
.svc-body strong {
  color: var(--brand-lotus);
}

/* Bold gradient text in .s-title (e.g. "Last Generations") —
   lotus → warm-cream (#F0D472) gradient, every theme.
   Specificity: h2.s-title strong (0,0,1,2). */
h2.s-title strong {
  background-image: linear-gradient(135deg, var(--brand-lotus) 0%, #F0D472 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero tagline "Know. Grow. Prosper." — lotus + soft pink glow,
   every theme. Specificity: .hero .hero-tagline (0,0,2,0). */
.hero .hero-tagline {
  color: var(--brand-lotus);
  text-shadow: 0 2px 16px rgba(200,67,126,0.15);
}

/* Hero name "Reddy" — locked lotus → saffron → lotus shimmer.
   Specificity: .hero .n-reddy (0,0,2,0).
   IMPORTANT: the `background:` shorthand resets background-clip to
   `border-box`, which would un-clip the gradient from the letter-
   forms and render it as a solid bar across the element box. We
   must re-declare background-clip:text + text-fill-color here, even
   though the inline base rule already sets them. The light theme's
   [data-theme="light"] .n-reddy rule does the same. */
.hero .n-reddy {
  background: linear-gradient(120deg,
    var(--brand-lotus) 0%,
    var(--brand-saffron) 40%,
    var(--brand-lotus) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero .n-reddy::after {
  background: linear-gradient(90deg,
    var(--brand-lotus),
    var(--brand-saffron),
    var(--brand-lotus));
  opacity: 0.55;
}

/* Hero surname "Chintala" — Tiranga green, every theme.
   Specificity: .name-wrap .n-last (0,0,2,0). */
.name-wrap .n-last {
  color: var(--brand-tiranga);
  -webkit-text-fill-color: var(--brand-tiranga);
}

/* Section eyebrow labels (.s-label) — dark pink #8A1A50, every theme.
   Specificity: div.s-label (0,0,1,1) beats inline .s-label (0,0,1,0).
   See dark-only luminance bump below — #8A1A50 on dark teal fails
   WCAG contrast; dark theme bumps to var(--brand-lotus). */
div.s-label {
  color: #8A1A50;
}

/* Hero eyebrow (".eyebrow" — Licensed Financial Services Provider …) —
   dark pink #8A1A50 text + lotus prefix dash.
   Specificity: div.eyebrow (0,0,1,1). */
div.eyebrow {
  color: #8A1A50;
}
.hero .eyebrow::before {
  background: var(--brand-lotus);
}

/* Service-card numbers (.svc-num) — faint lotus tint on light,
   solid lotus on dark (alpha-blend on dark teal would render plum).
   Specificity: div.svc-num (0,0,1,1). */
div.svc-num {
  color: rgba(200,67,126,0.18);
}

/* Chip pill tags (.tag) — saffron family, every theme.
   Specificity: .tags .tag (0,0,2,0). */
.tags .tag {
  background:    rgba(232,120,32,0.07);
  border-color:  rgba(232,120,32,0.3);
  color:         #8A3800;
}

/* ─── SECTION F.2 — STAT NUMBERS + ACCENTED ELEMENTS ─────────────── */
/* Large numerical displays and accented decorative elements that
   previously used var(--gold) (custard on dark, lotus on light) —
   brand-lock to the appropriate brand family on both themes. */

/* Hero stat values — saffron, every theme.
   Specificity: .hero-stats .stat-val (0,0,2,1). */
.hero-stats .stat-val {
  color: var(--brand-saffron);
}

/* Stats-section big numbers (100M+, 74M, 7 in 10, $129,575, etc.) —
   lotus, every theme. Light's inline override adds a soft glow that
   we preserve there; dark gets the same lotus without the glow. */
div.sc-val {
  color: var(--brand-lotus);
}

/* Credentials stat values (.cs-val) — lotus, every theme. */
div.cs-val {
  color: var(--brand-lotus);
}
div.cs-val.text-sm {
  color: var(--brand-lotus);
}

/* Persona checkmark badges — saffron → lotus gradient, every theme.
   Specificity: .persona .persona-check (0,0,2,1). */
.persona .persona-check {
  background: linear-gradient(135deg, var(--brand-saffron), var(--brand-lotus));
}

/* Pillar icon disks (.p-ico) — saffron tone family, every theme.
   Specificity: .pillar .p-ico (0,0,2,1). */
.pillar .p-ico {
  background:    rgba(232,120,32,0.08);
  border-color:  rgba(232,120,32,0.35);
  color:         #8A3800;
}

/* Testimonial rating stars (.t-stars) — saffron, every theme. */
div.t-stars {
  color: var(--brand-saffron);
}

/* Testimonial author name (.t-author) — dark berry on light (matches
   #8A1A50 eyebrow family). Dark variant in Section G bumps to #E25592
   for WCAG legibility. */
div.t-author {
  color: #8A1A50;
}

/* Testimonial tag (.t-stag) — lotus border + dark berry text on light.
   Dark variants for both border alpha + text color in Section G. */
div.t-stag {
  border-color: rgba(200,67,126,0.2);
  color:        #8A1A50;
}

/* Partner blockquote pull-quote (.partner-vehicle) — lotus left rule
   + lotus-tint bg on every theme. Specificity: blockquote.partner-
   vehicle (0,0,1,1) beats inline .partner-vehicle (0,0,1,0). */
blockquote.partner-vehicle {
  border-left-color: var(--brand-lotus);
  background:        rgba(200,67,126,0.06);
}

/* KGP feature list bullets (`→` arrows) — lotus, every theme.
   Specificity: .kgp-list li::before (0,0,1,2). */
.kgp-list li::before {
  color: var(--brand-lotus);
}

/* .svc::before — handled by Section H card-design architectural
   rule (multi-card-grid hover-only top accent). */

/* Movement-strip highlight gradient (.mv-quote .hl on "institution-
   grade" and "everyday") — saffron → lotus, both themes. Base inline
   rule used var(--gold) → #F0D472 which renders flat custard on dark.
   Specificity: .mv-quote .hl (0,0,2,0) ties inline; themes.css loses
   on tie. Use a stronger selector: p.mv-quote .hl (0,0,2,1) wins. */
p.mv-quote .hl {
  background:                 linear-gradient(135deg, var(--brand-saffron), var(--brand-lotus));
  -webkit-background-clip:    text;
  background-clip:            text;
  -webkit-text-fill-color:    transparent;
  color:                      transparent;
  font-weight:                700;
  font-style:                 normal;
}

/* Hero "100% In Your Corner" photo badge — lotus → lotus-soft gradient,
   both themes. Base inline uses var(--gold) → var(--gold-2) which
   resolves custard on dark; light has an explicit lotus override.
   Brand-lock unifies. */
.hero .photo-badge {
  background: linear-gradient(135deg, var(--brand-lotus), #E06898);
  box-shadow: 0 12px 40px rgba(200,67,126,0.30);
}
.hero .photo-badge .badge-num,
.hero .photo-badge .badge-lbl {
  color: #FFFFFF;
}

/* Hero "NATIONAL PLATFORM" floating sys-badge — saffron title text,
   both themes. Base inline title color uses var(--gold) (custard on
   dark, lotus on light); light override is #8A3800 deep saffron.
   Brand-lock to saffron token on both. */
.hero .sys-badge .sb-title {
  color: var(--brand-saffron);
}

/* Form-field focus border + bg — lotus on every theme.
   Specificity: body .f-input:focus, etc. (0,0,2,1) beats inline
   base (0,0,2,0). Light's inline override (0,0,3,0) still wins on
   light; both produce lotus. */
body .f-input:focus,
body .f-textarea:focus,
body .f-select:focus {
  border-color: var(--brand-lotus);
  background:   rgba(200,67,126,0.04);
}

/* Inline body links — lotus on every theme. Citation links under
   stat cards, "View Full Disclosures" footer link, credentials
   license link, and any narrative-copy anchor share the same
   brand semantic: lotus = link/emphasis (saffron = action/CTA).
   Specificity: each rule must beat existing inline base + light
   overrides without !important where possible. */
a.src-link,
a.src-link:visited {
  color: var(--brand-lotus);
}
a.src-link:hover {
  color: var(--brand-saffron);
  text-shadow: 0 0 6px rgba(232,120,32,0.3);
}
a.ft-disclosure-link,
a.ft-disclosure-link:visited {
  color: var(--brand-lotus);
}
a.ft-disclosure-link:hover {
  color: var(--brand-saffron);
  text-shadow: 0 0 8px rgba(232,120,32,0.35);
}
/* Credential .cred-nj-link gets the same hover treatment; default
   color on dark is set in Section G eyebrow group (#E25592). */
a.cred-nj-link:hover {
  color: var(--brand-saffron);
  text-shadow: 0 0 8px rgba(232,120,32,0.35);
}

/* ─── SECTION G — DARK-THEME LUMINANCE BUMPS ─────────────────────── */
/* Brand colors tuned for light substrate (cream parchment) use their
   "rest" luminance — #8A1A50 dark berry, #8A3800 deep saffron, faint
   rgba(200,67,126,0.18) decorative lotus tints. On chromatic dark
   (deep teal), these substrate-dependent values fail WCAG contrast
   or alpha-blend into off-brand hues. Dark theme uses the BRIGHTER
   variant of the same brand family at full luminance:
     #8A1A50 → var(--brand-lotus) (#C8437E)
     #8A3800 → var(--brand-saffron) (#E87820)
     faint lotus alpha → solid lotus
   Same brand hue family, surface-appropriate luminance. */

/* Eyebrow + dark-berry-family text labels — bright lotus #E25592 on
   dark. Brand-voice equivalence: light uses #8A1A50 dark berry (10.45:1
   WCAG vs cream — sophisticated quiet authority). On dark teal #8A1A50
   collapses to ~1.6:1 (invisible) and intermediate #B53870 is 2.3:1
   (still fails AA). #E25592 lands at 4.34:1 — passes WCAG AA normal
   text, brand-pink family preserved, brand voice present without
   shouting. Eyebrows, testimonial author + tag text, credential link
   all share this dark variant. */
[data-theme="dark"] .s-label,
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .vr-label,
[data-theme="dark"] .kgp-ey,
[data-theme="dark"] div.t-author,
[data-theme="dark"] div.t-stag,
[data-theme="dark"] .cred-nj-link {
  color: #E25592;
}
[data-theme="dark"] .vr-item.upcoming .vr-label {
  color: rgba(226,85,146,0.55);
}
[data-theme="dark"] div.t-stag {
  border-color: rgba(226,85,146,0.35);
}

/* Hero "Zero Obligation · Zero Pressure · 100% Free" badge —
   same brand-voice drift as eyebrows. Light keeps #8A1A50 text +
   pink-tinted bg/border (inline rule at index.html:123-126). */
[data-theme="dark"] .zero-badge {
  color:        #E25592;
  background:   rgba(226,85,146,0.10);
  border-color: rgba(226,85,146,0.40);
}

/* Service-card numbers — solid brand lotus on dark.
   Light keeps its faint rgba(200,67,126,0.18) decorative tint. */
[data-theme="dark"] div.svc-num {
  color: #C8437E;
}

/* Chip pill borders + text — saffron alpha bump + readable saffron
   text. Light keeps its #8A3800 dark-saffron text and 0.30 border. */
[data-theme="dark"] .tags .tag {
  color:        #E87820;
  border-color: rgba(232,120,32,0.55);
}

/* Stat-card hover border — light has lotus-tint visibility; on dark
   the base var(--border-2) custard-rgba-0.13 is barely perceptible.
   Bump alpha on dark for visible interaction feedback. */
[data-theme="dark"] .stat-card:hover {
  border-color: rgba(200,67,126,0.25);
}

/* Pillar + Partner card hover tints — light gets lotus tint via
   inline override; dark falls through to base var(--gold-3) custard
   which is off-brand. Mirror light's lotus-tint affordance on dark. */
[data-theme="dark"] .pillar:hover,
[data-theme="dark"] .pc:hover {
  border-color: rgba(200,67,126,0.25);
  background:   rgba(200,67,126,0.04);
}

/* FAQ interaction states — Dark needs visible feedback (light hovers
   from indigo → dark pink; on dark, hover from custard → custard is
   imperceptible). Brand-pink hover + open-state arrow + border match
   the affordance light theme already provides via
   [data-theme="light"] .faq-q:hover, .faq-item.open .faq-arrow, etc. */
[data-theme="dark"] .faq-q:hover {
  color: var(--brand-lotus);
}
[data-theme="dark"] .faq-item.open .faq-arrow {
  color: var(--brand-lotus);
}
[data-theme="dark"] .faq-item.open {
  border-color: rgba(200,67,126,0.3);
}

/* ─── SECTION H — CARD DESIGN SYSTEM v2.3 ────────────────────────── */
/*
   Two architectural rules for cards site-wide:

   RULE 1 — Top accent gradient (same gradient on every card):
       linear-gradient(90deg,
         transparent 0%,
         var(--brand-lotus) 30%,
         var(--brand-saffron) 50%,
         var(--brand-lotus) 70%,
         transparent 100%)
       at 2px height, top of card, inherits border-radius corners.

       SOLO cards (.kgp, .cred-nj, .t-card, .clarity-card) —
         accent ALWAYS visible.
       MULTI-CARD GRIDS (.pillar, .pc, .persona, .stat-card, .svc) —
         accent visible ON HOVER ONLY, 0.3s ease transition. The
         .namo-card-shimmer hover effect continues to fire alongside
         the accent for richer feedback.

   RULE 2 — Universal chrome:
       16px border-radius on every card type.
       Border 1px solid var(--border) (theme-adaptive).
       Visible boundary on both themes; NJ card on dark as reference.
       Specificity: body .selector (0,0,1,1) beats inline .selector
       (0,0,1,0) without !important.
*/

/* Universal card border-radius + positioning anchor — 16px on every
   card class (Item 9), plus position:relative + overflow:hidden so
   the ::before top-accent positions correctly within the card boundary
   and clips at the rounded corners. */
body .pillar,
body .pc,
body .persona,
body .stat-card,
body .svc,
body .faq-item,
body .kgp,
body .cred-nj,
body .t-card,
body .clarity-card {
  border-radius: 16px;
  position:      relative;
  overflow:      hidden;
}

/* SOLO cards — top accent ALWAYS visible */
.kgp::before,
.cred-nj::before,
.t-card::before,
.clarity-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--brand-lotus) 30%,
    var(--brand-saffron) 50%,
    var(--brand-lotus) 70%,
    transparent 100%);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* MULTI-CARD GRIDS — top accent on HOVER ONLY */
.pillar::before,
.pc::before,
.persona::before,
.stat-card::before,
.svc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--brand-lotus) 30%,
    var(--brand-saffron) 50%,
    var(--brand-lotus) 70%,
    transparent 100%);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pillar:hover::before,
.pc:hover::before,
.persona:hover::before,
.stat-card:hover::before,
.svc:hover::before {
  opacity: 1;
}

/* Item 2 — Movement strip interest pills (.pills .pill) on Dark:
   lotus tint to match Light's brand treatment. Specificity:
   [data-theme="dark"] .pills .pill (0,0,3,0) beats inline base
   .pill (0,0,1,0) and any var(--gold)-derived alias. */
[data-theme="dark"] .pills .pill {
  background:    rgba(200,67,126,0.10);
  border-color:  rgba(200,67,126,0.40);
  color:         #E25592;
}

/* Item 4 — Vision timeline dots on Dark:
   - Active "NOW" dot: solid saffron #E87820
   - Upcoming "COMING" dot: outlined saffron (hollow)
   - Rail: saffron tint matching light, deeper alpha
   Specificity each: [data-theme="dark"] .vr-item.X .vr-dot
   (0,0,3,0) beats base (0,0,2,0). */
[data-theme="dark"] .vr-item {
  border-left-color: rgba(232,120,32,0.35);
}
[data-theme="dark"] .vr-item:last-child {
  border-left-color: transparent;
}
[data-theme="dark"] .vr-item.active {
  border-left-color: var(--brand-saffron);
}
[data-theme="dark"] .vr-item.active .vr-dot {
  background: var(--brand-saffron);
  box-shadow: 0 0 0 4px rgba(232,120,32,0.18);
}
[data-theme="dark"] .vr-item.upcoming {
  border-left-color: rgba(232,120,32,0.18);
}
[data-theme="dark"] .vr-item.upcoming .vr-dot {
  background: transparent;
  border: 2px solid rgba(232,120,32,0.65);
}