/* Nidhi shared design system — "The Quiet Ledger"
   Canonical source for every web surface: this file, the manager webapp
   (imported into App.css), the marketing site, and the public passbook
   viewer (both linked at /shared/nidhi-tokens.css, copied here at build
   time by site/build.js). Edit ONLY this file — the copy in passbook/shared/
   is generated, never hand-edited.

   Values mirror DESIGN.md and the Android app's NidhiDesignSystem.kt Sage
   theme. Warm, low-saturation, matte — the accent is a signal, not
   decoration (see DESIGN.md's One-Tenth Rule). */

:root {
  /* Neutral surfaces — warm cream, never clinical white/gray */
  --nidhi-bg: #f7f5f0;
  --nidhi-surface: #ffffff;
  --nidhi-surface-variant: #f0ede6;
  --nidhi-surface-highlight: #e8e3d8;
  --nidhi-border: #d8d2c4;
  --nidhi-divider: #e5e0d5;
  --nidhi-shimmer-highlight: #e5e1d6;

  /* Text */
  --nidhi-text-primary: #1c1b18;
  --nidhi-text-secondary: #6b6a63;
  /* WCAG AA audit (2026-09-24): every real usage of this token turned out
     to be genuine readable content (meta text, field hints, footer
     labels), not the disabled/placeholder-only role DESIGN.md documents
     for it — the original #9c968c failed 4.5:1 against every background
     it's used on (as low as 2.51:1). Darkened to clear 4.5:1 against the
     lightest background in use (--nidhi-bg) while staying the same hue —
     it now sits closer to --nidhi-text-secondary than the three-tier
     hierarchy originally intended, which is the correct trade-off: a
     token that fails contrast has no legitimate "quiet" use in this
     codebase to protect. */
  --nidhi-text-tertiary: #767066;
  --nidhi-text-on-accent: #ffffff;

  /* Brand accent — Sage green. ~10% of any screen, only ever a status or
     a primary action (DESIGN.md's One-Tenth Rule). This is the canonical
     brand color; PRODUCT.md's Brand Commitments section is kept in sync
     with this value, not the other way around. */
  --nidhi-accent: #4a8a5e;
  --nidhi-accent-soft: #ebf5ee;
  --nidhi-accent-muted: #3a7a4e;

  /* Status */
  --nidhi-success: #4a8a5e;
  --nidhi-success-subtle: #ebf5ee;
  --nidhi-error: #b04840;
  --nidhi-error-subtle: #faecec;
  /* WCAG AA audit (2026-09-24): as text on --nidhi-warning-subtle (status
     pills, the offline banner), the original #b8843a measured 2.98:1 —
     fails 4.5:1. Darkened to 4.51:1 against warning-subtle; no solid-fill
     white-on-warning usage exists anywhere in this codebase to protect
     the lighter value for. */
  --nidhi-warning: #91682e;
  --nidhi-warning-subtle: #faf3e8;
  --nidhi-info: #3e6e92;
  --nidhi-info-subtle: #eaf1f5;

  /* Spacing — one 8px-based scale, zero raw literals in new work */
  --nidhi-space-xs: 4px;
  --nidhi-space-sm: 8px;
  --nidhi-space-md: 12px;
  --nidhi-space-lg: 16px;
  --nidhi-space-xl: 24px;
  --nidhi-space-xxl: 32px;
  --nidhi-space-xxxl: 48px;
  --nidhi-space-huge: 80px;

  /* Radius — three tiers only */
  --nidhi-radius-sm: 10px;
  --nidhi-radius-md: 14px;
  --nidhi-radius-lg: 20px;
  --nidhi-radius-pill: 999px;

  /* Type — system stack, no custom face; hierarchy via size/weight only */
  --nidhi-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --nidhi-display-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  --nidhi-display-weight: 700;
  --nidhi-display-tracking: -0.5px;
  --nidhi-headline-size: 22px;
  --nidhi-headline-weight: 600;
  --nidhi-title-size: 17px;
  --nidhi-title-weight: 600;
  --nidhi-body-size: 15px;
  --nidhi-body-weight: 400;
  --nidhi-label-size: 11px;
  --nidhi-label-weight: 600;
  --nidhi-number-size: 24px;
  --nidhi-number-weight: 700;
  --nidhi-number-tracking: -0.3px;

  /* Shadow vocabulary — reserved for content genuinely floating above the
     page (modals, toasts, palettes). Everything else uses a border. */
  --nidhi-shadow-overlay-deep: 0 20px 50px rgba(0, 0, 0, 0.25);
  --nidhi-shadow-overlay-medium: 0 16px 48px rgba(28, 27, 24, 0.25);
  --nidhi-shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.15);
  --nidhi-shadow-focus-ring: 0 0 0 3px var(--nidhi-accent-soft);
  /* Marketing-only: hero/parallax floating panels. Never on an app card
     or anything in normal page flow — see Floating-Only Rule. */
  --nidhi-shadow-float: 0 12px 32px rgba(28, 27, 24, 0.1);

  --nidhi-content-width: 1280px;
  --nidhi-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Motion scale. Financial software should feel stable, not playful —
     these are deliberately short, and every one of them is skipped under
     prefers-reduced-motion. Pick by what the motion is explaining:
     hover = "this responds", dropdown = "this came from that trigger",
     page = "you moved", drawer = "this slid in beside your context". */
  --nidhi-duration-hover: 120ms;
  --nidhi-duration-dropdown: 140ms;
  --nidhi-duration-page: 180ms;
  --nidhi-duration-drawer: 220ms;

  /* Marketing-only motion (DESIGN.md "Motion & Interaction", 2026-09-23) —
     longer durations for content that sells the craft rather than
     confirms a UI change. Never used inside the manager app. */
  --nidhi-duration-reveal: 600ms;
  --nidhi-duration-lift: 350ms;
  --nidhi-duration-float: 7s;
  --nidhi-duration-magnetic: 350ms;
  --nidhi-duration-count-up: 500ms;
  --nidhi-duration-chart-draw: 500ms;
  --nidhi-duration-transition: 250ms;

  /* Breakpoint scale (documented here since CSS custom properties can't
     be used inside @media conditions — every @media in this codebase
     should use one of these four pixel values, not an arbitrary one):
     mobile: default (<768px) · tablet: 768px · desktop: 1024px ·
     wide: 1280px. */

  color-scheme: light;
}

/* ---------------------------------------------------------------------
   Base component classes — usable from plain static HTML (marketing
   site, passbook viewer) as well as the React app.
   ------------------------------------------------------------------- */

.nidhi-container {
  max-width: var(--nidhi-content-width);
  margin: 0 auto;
  padding: 0 var(--nidhi-space-xl);
}

.nidhi-h1 {
  font-size: var(--nidhi-display-size);
  font-weight: var(--nidhi-display-weight);
  letter-spacing: var(--nidhi-display-tracking);
  line-height: 1.1;
  color: var(--nidhi-text-primary);
  margin: 0;
}

.nidhi-h2 {
  font-size: var(--nidhi-headline-size);
  font-weight: var(--nidhi-headline-weight);
  line-height: 1.3;
  color: var(--nidhi-text-primary);
  margin: 0;
}

.nidhi-eyebrow-free {
  /* deliberately no eyebrow/kicker component exists in this system —
     see DESIGN.md craft floor: the heading carries its own weight. */
}

.nidhi-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--nidhi-text-secondary);
  margin: 0;
}

.nidhi-body {
  font-size: var(--nidhi-body-size);
  font-weight: var(--nidhi-body-weight);
  line-height: 1.6;
  color: var(--nidhi-text-primary);
  margin: 0;
  max-width: 68ch;
}

.nidhi-label {
  font-size: var(--nidhi-label-size);
  font-weight: var(--nidhi-label-weight);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--nidhi-text-secondary);
}

.nidhi-number {
  font-size: var(--nidhi-number-size);
  font-weight: var(--nidhi-number-weight);
  letter-spacing: var(--nidhi-number-tracking);
  color: var(--nidhi-text-primary);
  font-variant-numeric: tabular-nums;
}

/* Applied to any money/count figure outside the .nidhi-number role
   (table cells, inline stats) so columns of numbers stay aligned
   digit-for-digit instead of drifting with proportional widths. */
.nidhi-tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Buttons — sm radius on every variant, per DESIGN.md */
.nidhi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nidhi-space-sm);
  font-family: var(--nidhi-font);
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--nidhi-radius-sm);
  padding: 13px 24px;
  min-height: 48px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s var(--nidhi-ease), background-color 0.15s var(--nidhi-ease), border-color 0.15s var(--nidhi-ease);
}
.nidhi-btn:active { transform: scale(0.98); }
.nidhi-btn:focus-visible { outline: none; box-shadow: var(--nidhi-shadow-focus-ring); }

.nidhi-btn-primary {
  background: var(--nidhi-accent);
  color: var(--nidhi-text-on-accent);
}
.nidhi-btn-primary:hover { background: var(--nidhi-accent-muted); }

.nidhi-btn-quiet {
  background: var(--nidhi-surface);
  color: var(--nidhi-text-primary);
  border: 1px solid var(--nidhi-border);
}
.nidhi-btn-quiet:hover { border-color: var(--nidhi-accent); color: var(--nidhi-accent); }

.nidhi-btn-sm {
  padding: 8px 16px;
  min-height: 36px;
  font-size: 13px;
}

/* Cards / containers */
.nidhi-card {
  background: var(--nidhi-surface);
  border: 1px solid var(--nidhi-border);
  border-radius: var(--nidhi-radius-md);
  padding: var(--nidhi-space-lg);
}

/* Status pills — subtle background + matching text, never a solid fill */
.nidhi-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--nidhi-radius-pill);
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
}
.nidhi-pill-success { background: var(--nidhi-success-subtle); color: var(--nidhi-success); }
.nidhi-pill-warning { background: var(--nidhi-warning-subtle); color: var(--nidhi-warning); }
.nidhi-pill-info { background: var(--nidhi-info-subtle); color: var(--nidhi-info); }

/* Site-wide header/footer shell — used by the marketing site and the
   passbook viewer; the manager webapp keeps its own task-focused
   Layout.tsx nav and does not use these two classes. */
.nidhi-site-header {
  background: var(--nidhi-bg);
  border-bottom: 1px solid var(--nidhi-border);
}
.nidhi-site-header-inner {
  max-width: var(--nidhi-content-width);
  margin: 0 auto;
  padding: var(--nidhi-space-lg) var(--nidhi-space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nidhi-space-lg);
  flex-wrap: wrap;
}
.nidhi-brand {
  display: flex;
  align-items: baseline;
  gap: var(--nidhi-space-sm);
  text-decoration: none;
  color: var(--nidhi-text-primary);
}
.nidhi-brand-mark {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.nidhi-brand-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--nidhi-text-tertiary);
}
.nidhi-nav {
  display: flex;
  align-items: center;
  gap: var(--nidhi-space-xl);
  flex-wrap: wrap;
}
.nidhi-nav-link {
  color: var(--nidhi-text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: var(--nidhi-space-xs) 0;
  border-bottom: 2px solid transparent;
}
.nidhi-nav-link:hover,
.nidhi-nav-link.is-active {
  color: var(--nidhi-text-primary);
  border-bottom-color: var(--nidhi-accent);
}
.nidhi-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nidhi-site-footer {
  background: var(--nidhi-surface-variant);
  border-top: 1px solid var(--nidhi-border);
  margin-top: var(--nidhi-space-huge);
}
.nidhi-site-footer-inner {
  max-width: var(--nidhi-content-width);
  margin: 0 auto;
  padding: var(--nidhi-space-xxl) var(--nidhi-space-xl);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--nidhi-space-xxl);
}
.nidhi-site-footer-col h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nidhi-text-tertiary);
  margin: 0 0 var(--nidhi-space-md);
}
.nidhi-site-footer-col a {
  display: block;
  color: var(--nidhi-text-secondary);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 0;
}
.nidhi-site-footer-col a:hover { color: var(--nidhi-accent); }
.nidhi-site-footer-bottom {
  max-width: var(--nidhi-content-width);
  margin: 0 auto;
  padding: var(--nidhi-space-lg) var(--nidhi-space-xl) var(--nidhi-space-xxl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nidhi-space-md);
  flex-wrap: wrap;
  color: var(--nidhi-text-tertiary);
  font-size: 12px;
}

@media (max-width: 720px) {
  .nidhi-site-footer-inner { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------
   Marketing page composition utilities — hero, sections, grids, FAQ,
   forms. Reused across Home/Pricing/Support/About and the passbook
   viewer's own supporting pages.
   ------------------------------------------------------------------- */

.nidhi-hero {
  padding: var(--nidhi-space-huge) 0 var(--nidhi-space-xxxl);
}
.nidhi-hero-inner {
  max-width: var(--nidhi-content-width);
  margin: 0 auto;
  padding: 0 var(--nidhi-space-xl);
  display: grid;
  gap: var(--nidhi-space-xl);
  max-width: 760px;
}
.nidhi-hero .nidhi-lede { max-width: 56ch; }
.nidhi-hero-actions {
  display: flex;
  gap: var(--nidhi-space-md);
  flex-wrap: wrap;
  margin-top: var(--nidhi-space-sm);
}

.nidhi-section {
  padding: var(--nidhi-space-xxxl) 0;
}
.nidhi-section-alt {
  background: var(--nidhi-surface-variant);
}
.nidhi-section-inner {
  max-width: var(--nidhi-content-width);
  margin: 0 auto;
  padding: 0 var(--nidhi-space-xl);
}
.nidhi-section-head {
  max-width: 640px;
  margin-bottom: var(--nidhi-space-xxl);
  display: grid;
  gap: var(--nidhi-space-sm);
}

.nidhi-grid {
  display: grid;
  gap: var(--nidhi-space-lg);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.nidhi-grid-2 { grid-template-columns: repeat(2, 1fr); }
.nidhi-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .nidhi-grid-2, .nidhi-grid-3 { grid-template-columns: 1fr; }
}

.nidhi-card h3 {
  font-size: var(--nidhi-title-size);
  font-weight: var(--nidhi-title-weight);
  color: var(--nidhi-text-primary);
  margin: 0 0 var(--nidhi-space-sm);
}
.nidhi-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--nidhi-text-secondary);
  margin: 0;
}

/* FAQ */
.nidhi-faq-item {
  border-bottom: 1px solid var(--nidhi-divider);
  padding: var(--nidhi-space-lg) 0;
}
.nidhi-faq-item summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--nidhi-text-primary);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nidhi-space-md);
}
.nidhi-faq-item summary::-webkit-details-marker { display: none; }
.nidhi-faq-item summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: var(--nidhi-text-tertiary);
  flex-shrink: 0;
}
.nidhi-faq-item[open] summary::after { content: '\2212'; }
.nidhi-faq-item p {
  margin-top: var(--nidhi-space-md);
  font-size: 14px;
  line-height: 1.6;
  color: var(--nidhi-text-secondary);
  max-width: 68ch;
}

/* Forms — shared between the Support and Member's Corner pages */
.nidhi-field { display: grid; gap: 6px; margin-bottom: var(--nidhi-space-lg); }
.nidhi-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--nidhi-text-primary);
}
.nidhi-field input,
.nidhi-field select,
.nidhi-field textarea {
  font-family: var(--nidhi-font);
  font-size: 15px;
  color: var(--nidhi-text-primary);
  background: var(--nidhi-surface);
  border: 1px solid var(--nidhi-border);
  border-radius: var(--nidhi-radius-sm);
  padding: 12px var(--nidhi-space-md);
  width: 100%;
}
.nidhi-field input:focus,
.nidhi-field select:focus,
.nidhi-field textarea:focus {
  outline: none;
  border-color: var(--nidhi-accent);
  box-shadow: var(--nidhi-shadow-focus-ring);
}
.nidhi-field textarea { resize: vertical; min-height: 96px; }
.nidhi-field-hint { font-size: 12px; color: var(--nidhi-text-tertiary); }

.nidhi-divider {
  border: none;
  border-top: 1px solid var(--nidhi-divider);
  margin: var(--nidhi-space-xxl) 0;
}

/* Legal documents (Terms, Privacy) */
.nidhi-legal {
  max-width: 720px;
}
.nidhi-legal-section {
  padding: var(--nidhi-space-xl) 0;
  border-bottom: 1px solid var(--nidhi-divider);
}
.nidhi-legal-section:last-child { border-bottom: none; }
.nidhi-legal-section h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--nidhi-text-primary);
  margin: 0 0 var(--nidhi-space-md);
}
.nidhi-legal-section p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--nidhi-text-secondary);
  margin: 0 0 var(--nidhi-space-md);
  white-space: pre-line;
}
.nidhi-legal-section p:last-child { margin-bottom: 0; }

/* Pricing — tiered plan cards + comparison table. No invented numbers:
   this product has one real free/paid split with no listed monthly/
   yearly price on web (purchased through Play Billing in the Android
   app), so there is deliberately no price toggle here — adding one
   would mean showing a figure nobody confirmed. */
.nidhi-pricing-card {
  padding: var(--nidhi-space-xxl);
  display: grid;
  gap: var(--nidhi-space-sm);
  align-content: start;
  position: relative;
}
.nidhi-pricing-card-recommended {
  border-color: var(--nidhi-accent);
  border-width: 2px;
}
.nidhi-pricing-badge {
  position: absolute;
  top: -12px;
  right: var(--nidhi-space-xl);
  background: var(--nidhi-accent);
  color: var(--nidhi-text-on-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 4px 12px;
  border-radius: var(--nidhi-radius-pill);
}
.nidhi-pricing-figure {
  font-size: var(--nidhi-display-size);
  font-weight: 800;
  letter-spacing: var(--nidhi-display-tracking);
  color: var(--nidhi-text-primary);
  margin-top: var(--nidhi-space-sm);
  font-variant-numeric: tabular-nums;
}
.nidhi-pricing-figure-quiet {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: normal;
}
.nidhi-pricing-sub { color: var(--nidhi-text-secondary); margin-bottom: var(--nidhi-space-md); }
.nidhi-pricing-list {
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: var(--nidhi-text-secondary);
  margin-bottom: var(--nidhi-space-lg);
}

.nidhi-compare { margin-top: var(--nidhi-space-xxxl); overflow-x: auto; }
.nidhi-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.nidhi-compare-table th,
.nidhi-compare-table td {
  padding: var(--nidhi-space-md) var(--nidhi-space-lg);
  text-align: left;
  border-bottom: 1px solid var(--nidhi-divider);
}
.nidhi-compare-table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nidhi-text-tertiary);
  font-weight: 700;
}
.nidhi-compare-table tbody th {
  font-weight: 600;
  color: var(--nidhi-text-primary);
  white-space: nowrap;
}
.nidhi-compare-table td { color: var(--nidhi-text-secondary); }
.nidhi-compare-yes { color: var(--nidhi-success); font-weight: 600; }
@media (max-width: 560px) {
  .nidhi-compare-table th, .nidhi-compare-table td { white-space: normal; }
}

/* ---------------------------------------------------------------------
   Marketing-only motion utilities (DESIGN.md "Motion & Interaction",
   2026-09-23). Never applied inside the manager app — see that section
   for the app's own quiet vocabulary (skeletons, count-ups, chart
   draw-ins), which lives beside each component instead of here.
   ------------------------------------------------------------------- */

/* Scroll reveal — toggle the .in class via IntersectionObserver. */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--nidhi-duration-reveal) var(--nidhi-ease),
    transform var(--nidhi-duration-reveal) var(--nidhi-ease);
}
[data-reveal].in {
  opacity: 1;
  transform: none;
}

/* Card lift + spotlight hover — marketing feature/pricing grids only. */
.nidhi-motion-card {
  transition: transform var(--nidhi-duration-lift) var(--nidhi-ease);
  position: relative;
}
@media (hover: hover) {
  .nidhi-motion-card:hover {
    transform: translateY(-4px);
  }
  .nidhi-motion-card:hover .nidhi-motion-card-media {
    transform: scale(1.03);
  }
}
.nidhi-motion-card-media {
  transition: transform var(--nidhi-duration-lift) var(--nidhi-ease);
}
.nidhi-spotlight {
  background-image: radial-gradient(
    360px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgb(74 138 94 / 0.08),
    transparent 60%
  );
}

/* Floating hero panels — independent slow loops, staggered via
   --float-delay and varied in --float-duration so panels never move in
   sync or read as one mechanically-repeating group. --float-rotate is
   the panel's resting tilt (set per-card, not animated) — folded into
   the same keyframe because an animated `transform` fully replaces any
   transform set elsewhere on the same element, it doesn't compose with
   it; a separate static `transform: rotate()` on the card would simply
   be overwritten every frame. */
.nidhi-float {
  animation: nidhi-float var(--float-duration, var(--nidhi-duration-float))
    cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: var(--float-delay, 0s);
  box-shadow: var(--nidhi-shadow-float);
}
@keyframes nidhi-float {
  0%, 100% { transform: translateY(0) rotate(var(--float-rotate, 0deg)); }
  50% { transform: translateY(-7px) rotate(var(--float-rotate, 0deg)); }
}

/* Parallax layers — set --parallax-speed (0.1-0.3) per layer; driven by
   a scroll listener setting --parallax-y on the container. */
.nidhi-parallax-layer {
  transform: translateY(calc(var(--parallax-y, 0px) * var(--parallax-speed, 0.2)));
}

/* Arrow-nudge links — used in both zones, calm enough for the app too. */
.nidhi-link-arrow svg {
  transition: transform var(--nidhi-duration-hover) var(--nidhi-ease);
}
.nidhi-link-arrow:hover svg {
  transform: translateX(3px);
}

/* Cursor follower ring — desktop marketing only, see home hero script. */
.nidhi-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--nidhi-text-primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 600;
  mix-blend-mode: difference;
  /* transform, not width/height — a fixed-position circle can grow via
     scale() with no layout cost, and center-anchored scale on a circle
     looks identical to resizing it. */
  transition: transform var(--nidhi-duration-transition) var(--nidhi-ease);
}
.nidhi-cursor-ring.is-hover {
  transform: scale(1.778);
}
@media (hover: none), (pointer: coarse) {
  .nidhi-cursor-ring { display: none; }
}

/* Magnetic CTA — JS sets --magnet-x/--magnet-y on pointermove, clears
   them (transitioning back over --nidhi-duration-magnetic) on leave. */
.nidhi-magnetic {
  transform: translate(var(--magnet-x, 0), var(--magnet-y, 0));
  transition: transform var(--nidhi-duration-magnetic) var(--nidhi-ease);
}

/* Count-up target — JS drives the displayed number; this only keeps
   digits from reflowing the layout as they change width. */
.nidhi-count-up {
  font-variant-numeric: tabular-nums;
}

/* Reduced motion — every marketing-only effect above collapses to its
   resting state. This is the one guard nothing here may skip. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nidhi-motion-card,
  .nidhi-motion-card-media,
  .nidhi-link-arrow svg,
  .nidhi-magnetic {
    transition: none;
  }
  .nidhi-motion-card:hover {
    transform: none;
  }
  .nidhi-motion-card:hover .nidhi-motion-card-media {
    transform: none;
  }
  .nidhi-float {
    animation: none;
    /* Keeps each card's resting tilt (set via --float-rotate) — only the
       bobbing loop is what reduced motion disables. */
    transform: rotate(var(--float-rotate, 0deg));
  }
  .nidhi-parallax-layer {
    transform: none;
  }
  .nidhi-cursor-ring {
    display: none;
  }
}

/* Secondary-page heroes (About/Pricing/Members/Support/Blog) — a single
   flat-line SVG illustration beside the heading, gently floating. Its own
   class rather than reusing .nidhi-hero-split: that layout's larger h1 and
   multi-card demo cluster are deliberately home-exclusive (see below), so
   these get standard nidhi-h1 sizing and a single centered visual. */
.nidhi-hero-illustrated { padding: var(--nidhi-space-huge) 0 var(--nidhi-space-xl); }
.nidhi-hero-illustrated-inner {
  max-width: var(--nidhi-content-width);
  margin: 0 auto;
  padding: 0 var(--nidhi-space-xl);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--nidhi-space-xxl);
  align-items: center;
}
.nidhi-hero-illustrated-copy { display: grid; gap: var(--nidhi-space-lg); max-width: 620px; }
.nidhi-hero-illustrated-copy .nidhi-lede { max-width: 56ch; }
.nidhi-hero-visual { width: 100%; max-width: 300px; margin: 0 auto; color: var(--nidhi-accent); }
@media (max-width: 900px) {
  .nidhi-hero-illustrated { padding-top: var(--nidhi-space-xxxl); }
  .nidhi-hero-illustrated-inner { grid-template-columns: 1fr; }
  .nidhi-hero-visual { max-width: 220px; margin-top: var(--nidhi-space-xl); }
}

/* Home hero — split layout with a floating product-demo cluster.
   Illustrative mockup only (see home.content.html comment); not tied to
   any real account. */
.nidhi-hero-split { padding-top: var(--nidhi-space-huge); }
.nidhi-hero-split-inner {
  max-width: var(--nidhi-content-width);
  margin: 0 auto;
  padding: 0 var(--nidhi-space-xl);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--nidhi-space-xxxl);
  align-items: center;
}
.nidhi-hero-copy { display: grid; gap: var(--nidhi-space-lg); max-width: 540px; }
/* Larger than the shared --nidhi-display-size deliberately — this is the
   one hero on the site, the rest of the type scale (About/Pricing/etc.)
   stays at the standard nidhi-h1 size. */
.nidhi-hero-split .nidhi-h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 3.75rem);
  margin-bottom: var(--nidhi-space-xs);
}
.nidhi-hero-copy .nidhi-lede { max-width: 46ch; }
.nidhi-hero-copy .nidhi-hero-actions { margin-top: var(--nidhi-space-sm); }
.nidhi-hero-copy .nidhi-field-hint { margin-top: -8px; }

.nidhi-hero-demo {
  position: relative;
  min-height: 420px;
}
.nidhi-demo-card {
  position: absolute;
  background: var(--nidhi-surface);
  border: 1px solid var(--nidhi-border);
  border-radius: var(--nidhi-radius-md);
  padding: var(--nidhi-space-lg) var(--nidhi-space-xl);
  display: grid;
  gap: 10px;
  width: 250px;
}
.nidhi-demo-card .nidhi-label { font-size: 11px; }
/* Deliberate scatter, not a grid — each card offset and gently rotated
   so the cluster reads as composed rather than mechanically stacked. */
.nidhi-demo-card-main { top: 12px; left: 4%; z-index: 3; --float-rotate: -1.25deg; }
.nidhi-demo-card-member { top: 172px; right: 2%; z-index: 2; width: 230px; --float-rotate: 1.5deg; }
.nidhi-demo-card-auction { top: 336px; left: 0; z-index: 1; width: 240px; --float-rotate: -0.75deg; }
.nidhi-demo-progress {
  height: 6px;
  border-radius: var(--nidhi-radius-pill);
  background: var(--nidhi-surface-variant);
  overflow: hidden;
  margin-top: 2px;
}
.nidhi-demo-progress-fill {
  height: 100%;
  width: 80%;
  background: var(--nidhi-accent);
  border-radius: inherit;
}
.nidhi-demo-caption { font-size: 12px; color: var(--nidhi-text-tertiary); line-height: 1.5; }
.nidhi-demo-member-row {
  display: flex;
  align-items: center;
  gap: var(--nidhi-space-sm);
  font-size: 13px;
  color: var(--nidhi-text-primary);
  line-height: 1.4;
}
.nidhi-demo-member-row .nidhi-pill { margin-left: auto; }
.nidhi-demo-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.nidhi-demo-dot-success { background: var(--nidhi-success); }
.nidhi-demo-dot-warning { background: var(--nidhi-warning); }

@media (max-width: 900px) {
  .nidhi-hero-split { padding-top: var(--nidhi-space-xxxl); }
  .nidhi-hero-split-inner { grid-template-columns: 1fr; }
  .nidhi-hero-demo { min-height: 460px; margin-top: var(--nidhi-space-xxl); }
  .nidhi-demo-card-main { left: 0; --float-rotate: 0deg; }
  .nidhi-demo-card-member { --float-rotate: 0deg; }
  .nidhi-demo-card-auction { --float-rotate: 0deg; }
}
@media (max-width: 560px) {
  .nidhi-demo-card { width: calc(100vw - 96px) !important; }
  .nidhi-demo-card-main { left: 0; }
  .nidhi-demo-card-member { right: 0; top: 190px; }
  .nidhi-demo-card-auction { left: 24px; top: 380px; }
}

/* Blog index + article. No stock imagery exists for this product (see
   DESIGN.md guardrails) — card "media" is a flat tinted block with a
   category label, not a placeholder photo pretending to be real. */
/* auto-fill (not auto-fit) with a capped max, not 1fr — with few posts,
   auto-fit's lone surviving track grows to fill the whole row, which
   stretched a single card edge-to-edge into a ~700px-tall placeholder
   block. auto-fill leaves the row's remaining space empty instead of
   feeding it to the existing card(s). */
.nidhi-blog-grid {
  display: grid;
  gap: var(--nidhi-space-xl);
  grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
}
.nidhi-blog-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--nidhi-border);
  border-radius: var(--nidhi-radius-md);
  overflow: hidden;
  background: var(--nidhi-surface);
}
.nidhi-blog-card-media {
  aspect-ratio: 16 / 9;
  background: var(--nidhi-surface-highlight);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nidhi-text-tertiary);
}
.nidhi-blog-card-media .nidhi-label { color: var(--nidhi-text-tertiary); }
.nidhi-blog-card-body { padding: var(--nidhi-space-lg); display: grid; gap: 6px; }
.nidhi-blog-card-body h3 {
  font-size: var(--nidhi-title-size);
  font-weight: var(--nidhi-title-weight);
  color: var(--nidhi-text-primary);
  margin: 0;
}
.nidhi-blog-card-body p {
  font-size: 14px;
  color: var(--nidhi-text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nidhi-blog-meta {
  font-size: 12px;
  color: var(--nidhi-text-tertiary);
  display: flex;
  gap: var(--nidhi-space-sm);
}
.nidhi-blog-empty {
  border: 1px dashed var(--nidhi-border);
  border-radius: var(--nidhi-radius-md);
  padding: var(--nidhi-space-xxl);
  text-align: center;
  color: var(--nidhi-text-tertiary);
}

/* Article reading layout — 65-72ch column, per DESIGN.md's existing
   type scale (no new sizes introduced). */
.nidhi-article-header { max-width: 68ch; margin: 0 auto var(--nidhi-space-xxl); display: grid; gap: var(--nidhi-space-md); }
.nidhi-article-meta { display: flex; gap: var(--nidhi-space-md); align-items: center; color: var(--nidhi-text-tertiary); font-size: 13px; }
.nidhi-prose { max-width: 68ch; margin: 0 auto; font-size: 17px; line-height: 1.7; color: var(--nidhi-text-primary); }
.nidhi-prose p { margin: 0 0 1.25em; }
.nidhi-prose h2 { font-size: 24px; font-weight: 700; margin: 1.75em 0 0.6em; color: var(--nidhi-text-primary); }
.nidhi-prose ul { margin: 0 0 1.25em; padding-left: 20px; }
.nidhi-prose li { margin-bottom: 0.5em; }
.nidhi-prose a { text-decoration: underline; text-underline-offset: 3px; }
.nidhi-article-back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--nidhi-text-secondary); text-decoration: none; margin-bottom: var(--nidhi-space-lg); }

/* View Transitions — page-level crossfade where supported; instant
   navigation elsewhere, so this is additive only. */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--nidhi-duration-transition);
  }
}