/* =========================================================================
   Nadi Design System — Base Stylesheet (Light Theme / Public Pages)
   Version: 1.0.0
   Phase 1 build — locked decisions from p21_nadi_execution_checklist.md
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design Tokens (CSS Custom Properties)
   ------------------------------------------------------------------------- */
:root {
  /* Colors — Light theme (public) */
  --nadi-bg:            #FAFAF8;
  --nadi-surface:       #FFFFFF;
  --nadi-card:          #FFFFFF;
  --nadi-text:          #111827;
  --nadi-text-muted:    #6B7280;
  --nadi-muted:         #6B7280;
  --nadi-border:        #E5E7EB;
  --nadi-emerald:       #059669;
  --nadi-emerald-hover: #047857;
  --nadi-amber:         #F59E0B;
  --nadi-amber-hover:   #D97706;
  --nadi-error:         #EF4444;
  --nadi-success:       #059669;

  /* Typography */
  --nadi-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --nadi-size-hero:      clamp(40px, 5vw, 64px);
  --nadi-size-h2:        clamp(30px, 3.5vw, 40px);
  --nadi-size-h3:        clamp(20px, 2vw, 24px);
  --nadi-size-body:      17px;
  --nadi-size-body-sm:   15px;
  --nadi-size-caption:   14px;

  --nadi-weight-regular: 400;
  --nadi-weight-medium:  500;
  --nadi-weight-semi:    600;
  --nadi-weight-bold:    700;

  --nadi-line-tight:  1.1;
  --nadi-line-snug:   1.3;
  --nadi-line-normal: 1.6;

  /* 8px grid spacing */
  --nadi-s-1:   8px;
  --nadi-s-2:  16px;
  --nadi-s-3:  24px;
  --nadi-s-4:  32px;
  --nadi-s-6:  48px;
  --nadi-s-8:  64px;
  --nadi-s-12: 96px;
  --nadi-s-16: 128px;

  /* Radius */
  --nadi-radius-sm: 8px;
  --nadi-radius-md: 12px;
  --nadi-radius-lg: 16px;
  --nadi-radius-pill: 999px;

  /* Shadows — subtle only */
  --nadi-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04);
  --nadi-shadow-md: 0 4px 12px rgba(17, 24, 39, 0.06);
  --nadi-shadow-lg: 0 8px 24px rgba(17, 24, 39, 0.08);

  /* Motion */
  --nadi-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nadi-dur-fast:   120ms;
  --nadi-dur-base:   200ms;
  --nadi-dur-slow:   400ms;

  /* Layout */
  --nadi-container:    1200px;
  --nadi-container-sm:  720px;
  --nadi-nav-h:         72px;
}

/* -------------------------------------------------------------------------
   2. Reset + Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--nadi-bg);
  color: var(--nadi-text);
  font-family: var(--nadi-font);
  font-size: var(--nadi-size-body);
  font-weight: var(--nadi-weight-regular);
  line-height: var(--nadi-line-normal);
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a {
  color: var(--nadi-emerald);
  text-decoration: none;
  transition: color var(--nadi-dur-fast) var(--nadi-ease);
}
a:hover { color: var(--nadi-emerald-hover); }

::selection {
  background: var(--nadi-emerald);
  color: #fff;
}

/* -------------------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------------------- */
.nadi-hero {
  font-size: var(--nadi-size-hero);
  font-weight: var(--nadi-weight-bold);
  line-height: var(--nadi-line-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--nadi-s-3) 0;
  color: var(--nadi-text);
}

.nadi-h2 {
  font-size: var(--nadi-size-h2);
  font-weight: var(--nadi-weight-semi);
  line-height: var(--nadi-line-snug);
  letter-spacing: -0.01em;
  margin: 0 0 var(--nadi-s-2) 0;
}

.nadi-h3 {
  font-size: var(--nadi-size-h3);
  font-weight: var(--nadi-weight-medium);
  line-height: var(--nadi-line-snug);
  margin: 0 0 var(--nadi-s-2) 0;
}

.nadi-body     { font-size: var(--nadi-size-body);    line-height: var(--nadi-line-normal); }
.nadi-body-sm  { font-size: var(--nadi-size-body-sm); line-height: var(--nadi-line-normal); }
.nadi-caption  { font-size: var(--nadi-size-caption); color: var(--nadi-text-muted); }
.nadi-muted    { color: var(--nadi-text-muted); }

/* -------------------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------------------- */
.nadi-container {
  width: 100%;
  max-width: var(--nadi-container);
  margin: 0 auto;
  padding: 0 var(--nadi-s-3);
}
.nadi-container--sm { max-width: var(--nadi-container-sm); }

.nadi-section {
  padding: var(--nadi-s-12) 0;
}
@media (min-width: 900px) {
  .nadi-section { padding: var(--nadi-s-16) 0; }
}

.nadi-stack > * + * { margin-top: var(--nadi-s-2); }
.nadi-stack-lg > * + * { margin-top: var(--nadi-s-3); }

/* -------------------------------------------------------------------------
   5. Buttons — pill style
   ------------------------------------------------------------------------- */
.nadi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--nadi-font);
  font-size: var(--nadi-size-body);
  font-weight: var(--nadi-weight-semi);
  line-height: 1;
  border-radius: var(--nadi-radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background var(--nadi-dur-base) var(--nadi-ease),
    color var(--nadi-dur-base) var(--nadi-ease),
    border-color var(--nadi-dur-base) var(--nadi-ease),
    transform var(--nadi-dur-fast) var(--nadi-ease),
    box-shadow var(--nadi-dur-base) var(--nadi-ease);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.nadi-btn:active { transform: translateY(1px); }
.nadi-btn:focus-visible {
  outline: 3px solid rgba(5, 150, 105, 0.25);
  outline-offset: 2px;
}

/* Primary — amber pill */
.nadi-btn--primary {
  background: var(--nadi-amber);
  color: #1F1300;
  box-shadow: var(--nadi-shadow-sm);
}
.nadi-btn--primary:hover {
  background: var(--nadi-amber-hover);
  box-shadow: var(--nadi-shadow-md);
}

/* Secondary — emerald outlined pill */
.nadi-btn--secondary {
  background: transparent;
  color: var(--nadi-emerald);
  border-color: var(--nadi-emerald);
}
.nadi-btn--secondary:hover {
  background: var(--nadi-emerald);
  color: #fff;
}

/* Ghost — text only */
.nadi-btn--ghost {
  background: transparent;
  color: var(--nadi-text);
  padding: 10px 16px;
  border-radius: var(--nadi-radius-md);
}
.nadi-btn--ghost:hover {
  background: rgba(17, 24, 39, 0.06);
  color: var(--nadi-text);
}

.nadi-btn--lg { padding: 18px 36px; font-size: 18px; }
.nadi-btn--sm { padding: 10px 20px; font-size: 14px; }

.nadi-btn[disabled],
.nadi-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   6. Cards
   ------------------------------------------------------------------------- */
.nadi-card {
  background: var(--nadi-surface);
  border: 1px solid var(--nadi-border);
  border-radius: var(--nadi-radius-lg);
  padding: var(--nadi-s-4);
  transition: border-color var(--nadi-dur-base) var(--nadi-ease),
              box-shadow var(--nadi-dur-base) var(--nadi-ease),
              transform var(--nadi-dur-base) var(--nadi-ease);
}
.nadi-card:hover {
  border-color: var(--nadi-emerald);
  box-shadow: var(--nadi-shadow-md);
  transform: translateY(-2px);
}

.nadi-card--recommended {
  border: 2px solid var(--nadi-emerald);
  position: relative;
}
.nadi-card--recommended::before {
  content: 'Recommended';
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--nadi-emerald);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--nadi-radius-pill);
  font-size: 12px;
  font-weight: var(--nadi-weight-semi);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.nadi-card--flush {
  padding: var(--nadi-s-3);
}

/* -------------------------------------------------------------------------
   7. Form inputs
   ------------------------------------------------------------------------- */
.nadi-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nadi-label {
  font-size: var(--nadi-size-body-sm);
  font-weight: var(--nadi-weight-medium);
  color: var(--nadi-text);
}

.nadi-input,
.nadi-textarea,
.nadi-select {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background: var(--nadi-surface);
  border: 2px solid var(--nadi-border);
  border-radius: var(--nadi-radius-md);
  font-family: var(--nadi-font);
  font-size: var(--nadi-size-body);
  color: var(--nadi-text);
  transition: border-color var(--nadi-dur-base) var(--nadi-ease),
              box-shadow var(--nadi-dur-base) var(--nadi-ease);
}

.nadi-textarea {
  height: auto;
  min-height: 120px;
  padding: 14px 16px;
  resize: vertical;
  line-height: var(--nadi-line-normal);
}

.nadi-input::placeholder,
.nadi-textarea::placeholder { color: var(--nadi-text-muted); }

.nadi-input:focus,
.nadi-textarea:focus,
.nadi-select:focus {
  outline: none;
  border-color: var(--nadi-emerald);
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.12);
}

.nadi-field--error .nadi-input,
.nadi-field--error .nadi-textarea,
.nadi-input--error {
  border-color: var(--nadi-error);
}
.nadi-field--error .nadi-input:focus,
.nadi-input--error:focus {
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

.nadi-help {
  font-size: var(--nadi-size-caption);
  color: var(--nadi-text-muted);
}
.nadi-help--error { color: var(--nadi-error); }

/* -------------------------------------------------------------------------
   8. Navigation (shared nav)
   ------------------------------------------------------------------------- */
.nadi-nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nadi-nav-h);
  background: rgba(250, 250, 248, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--nadi-dur-base) var(--nadi-ease);
}
.nadi-nav--scrolled {
  border-bottom-color: var(--nadi-border);
}

.nadi-nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--nadi-container);
  margin: 0 auto;
  padding: 0 var(--nadi-s-3);
}

.nadi-nav__logo {
  display: inline-flex;
  align-items: center;
  height: 32px;
}
.nadi-nav__logo svg,
.nadi-nav__logo img,
.nadi-nav__logo .nadi-wordmark { height: 28px; width: auto; display: block; }

.nadi-nav__links {
  display: flex;
  align-items: center;
  gap: var(--nadi-s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nadi-nav__link {
  color: var(--nadi-text);
  font-size: var(--nadi-size-body-sm);
  font-weight: var(--nadi-weight-medium);
  padding: 8px 4px;
  position: relative;
}
.nadi-nav__link:hover { color: var(--nadi-emerald); }
.nadi-nav__link--active { color: var(--nadi-emerald); }

.nadi-nav__right {
  display: flex;
  align-items: center;
  gap: var(--nadi-s-2);
}

.nadi-nav__toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  padding: 0;
}
.nadi-nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--nadi-text);
  margin: 5px auto;
  border-radius: 2px;
  transition: transform var(--nadi-dur-base) var(--nadi-ease), opacity var(--nadi-dur-base) var(--nadi-ease);
}

/* Mobile nav */
@media (max-width: 820px) {
  .nadi-nav__links,
  .nadi-nav__right .nadi-btn { display: none; }
  .nadi-nav__toggle { display: block; }

  .nadi-nav--open .nadi-nav__links {
    display: flex;
    position: absolute;
    top: var(--nadi-nav-h);
    left: 0; right: 0;
    flex-direction: column;
    background: var(--nadi-surface);
    border-bottom: 1px solid var(--nadi-border);
    padding: var(--nadi-s-3);
    gap: var(--nadi-s-2);
  }
  .nadi-nav--open .nadi-nav__right .nadi-btn { display: inline-flex; }
}

/* -------------------------------------------------------------------------
   9. Footer (shared footer)
   ------------------------------------------------------------------------- */
.nadi-footer {
  border-top: 1px solid var(--nadi-border);
  background: var(--nadi-bg);
  padding: var(--nadi-s-4) 0;
}

.nadi-footer__inner {
  max-width: var(--nadi-container);
  margin: 0 auto;
  padding: 0 var(--nadi-s-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nadi-s-3);
  flex-wrap: wrap;
}

.nadi-footer__logo { height: 24px; width: auto; }
.nadi-footer__logo svg { height: 24px; width: auto; }

.nadi-footer__links {
  display: flex;
  align-items: center;
  gap: var(--nadi-s-3);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.nadi-footer__link {
  color: var(--nadi-text-muted);
  font-size: var(--nadi-size-caption);
}
.nadi-footer__link:hover { color: var(--nadi-text); }

/* -------------------------------------------------------------------------
   10. Logo / wordmark styling
   Wordmark is an inline SVG embedded directly in every page nav. This lets
   the Inter webfont (loaded on the page) render the "Nad" glyphs so there's
   no gap between the d and the custom i-stem + dot. The hover-only green
   outline sweep animation lives inside the SVG's own <style> block and
   respects prefers-reduced-motion.
   ------------------------------------------------------------------------- */
.nadi-logo { display: inline-flex; align-items: center; height: 28px; }
.nadi-logo svg,
.nadi-logo img { height: 28px; width: auto; }
img.nadi-wordmark,
svg.nadi-wordmark { height: 28px; width: auto; display: block; }

/* -------------------------------------------------------------------------
   11. Utility classes
   ------------------------------------------------------------------------- */
.nadi-center  { text-align: center; }
.nadi-emerald { color: var(--nadi-emerald); }
.nadi-amber   { color: var(--nadi-amber); }

.nadi-hr {
  border: 0;
  border-top: 1px solid var(--nadi-border);
  margin: var(--nadi-s-4) 0;
}

.nadi-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: var(--nadi-weight-semi);
  border-radius: var(--nadi-radius-pill);
  background: rgba(5, 150, 105, 0.1);
  color: var(--nadi-emerald);
  letter-spacing: 0.02em;
}
.nadi-badge--amber {
  background: rgba(245, 158, 11, 0.12);
  color: var(--nadi-amber-hover);
}

/* -------------------------------------------------------------------------
   12. Article pages (blog posts)
   ------------------------------------------------------------------------- */
.nadi-article-wrap {
  padding: var(--nadi-s-8) 0 var(--nadi-s-12);
  background: var(--nadi-bg);
}

.nadi-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--nadi-s-3);
}

.nadi-article__head {
  margin-bottom: var(--nadi-s-6);
}

.nadi-article__crumbs {
  display: flex;
  gap: 8px;
  font-size: var(--nadi-size-caption);
  color: var(--nadi-text-muted);
  margin-bottom: var(--nadi-s-3);
}
.nadi-article__crumbs a { color: var(--nadi-text-muted); }
.nadi-article__crumbs a:hover { color: var(--nadi-emerald); }

.nadi-article__tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(5, 150, 105, 0.08);
  color: var(--nadi-emerald);
  border-radius: var(--nadi-radius-pill);
  font-size: 12px;
  font-weight: var(--nadi-weight-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--nadi-s-3);
}

.nadi-article__title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: var(--nadi-weight-bold);
  line-height: var(--nadi-line-tight);
  letter-spacing: -0.02em;
  color: var(--nadi-text);
  margin: 0 0 var(--nadi-s-3) 0;
}

.nadi-article__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--nadi-text-muted);
  font-size: var(--nadi-size-body-sm);
}

.nadi-article__body {
  font-size: 18px;
  line-height: 1.75;
  color: var(--nadi-text);
}

.nadi-article__body p {
  margin: 0 0 var(--nadi-s-3) 0;
  color: #1F2937;
}

.nadi-article__body h2 {
  font-size: 28px;
  font-weight: var(--nadi-weight-bold);
  line-height: var(--nadi-line-snug);
  letter-spacing: -0.01em;
  margin: var(--nadi-s-6) 0 var(--nadi-s-2) 0;
  padding-left: var(--nadi-s-2);
  border-left: 4px solid var(--nadi-emerald);
  color: var(--nadi-text);
}

.nadi-article__body h3 {
  font-size: 22px;
  font-weight: var(--nadi-weight-semi);
  line-height: var(--nadi-line-snug);
  margin: var(--nadi-s-4) 0 var(--nadi-s-2) 0;
  color: var(--nadi-text);
}

.nadi-article__body strong { color: var(--nadi-text); font-weight: var(--nadi-weight-semi); }
.nadi-article__body em { color: var(--nadi-emerald); font-style: normal; font-weight: var(--nadi-weight-medium); }

.nadi-article__body a {
  color: var(--nadi-emerald);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.nadi-article__body a:hover { color: var(--nadi-emerald-hover); }

.nadi-article__body ul,
.nadi-article__body ol {
  margin: 0 0 var(--nadi-s-3) 0;
  padding-left: var(--nadi-s-3);
}
.nadi-article__body li {
  margin: 0 0 8px 0;
  line-height: 1.7;
}

.nadi-article__body blockquote {
  margin: var(--nadi-s-4) 0;
  padding: var(--nadi-s-3);
  border-left: 4px solid var(--nadi-emerald);
  background: rgba(5, 150, 105, 0.04);
  border-radius: 0 var(--nadi-radius-sm) var(--nadi-radius-sm) 0;
  color: var(--nadi-text);
  font-style: italic;
}

.nadi-article__body img,
.nadi-article__body svg {
  max-width: 100%;
  height: auto;
  margin: var(--nadi-s-3) 0;
  border-radius: var(--nadi-radius-md);
  border: 1px solid var(--nadi-border);
}

.nadi-article__body figure {
  margin: var(--nadi-s-4) 0;
}
.nadi-article__body figcaption {
  margin-top: 8px;
  font-size: var(--nadi-size-caption);
  color: var(--nadi-text-muted);
  text-align: center;
}

/* Preserved classes from original body content (stat callouts from Template B) */
.nadi-article__body .stat-callout {
  background: var(--nadi-surface);
  border: 1px solid var(--nadi-border);
  border-left: 4px solid var(--nadi-emerald);
  padding: var(--nadi-s-3);
  margin: var(--nadi-s-4) 0;
  border-radius: var(--nadi-radius-md);
}
.nadi-article__body .stat-callout .stat-number {
  font-size: 40px;
  font-weight: var(--nadi-weight-bold);
  color: var(--nadi-emerald);
  line-height: 1.1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.nadi-article__body .stat-callout .stat-label {
  color: var(--nadi-text-muted);
  font-size: var(--nadi-size-body-sm);
  line-height: var(--nadi-line-normal);
}

/* Inline CTA at end of article */
.nadi-article__cta {
  margin: var(--nadi-s-6) 0 var(--nadi-s-4);
  padding: var(--nadi-s-4);
  border: 1px solid var(--nadi-border);
  border-radius: var(--nadi-radius-lg);
  background: var(--nadi-surface);
  text-align: center;
  box-shadow: var(--nadi-shadow-sm);
}
.nadi-article__cta h3 {
  font-size: 24px;
  font-weight: var(--nadi-weight-bold);
  line-height: var(--nadi-line-snug);
  margin: 0 0 var(--nadi-s-2) 0;
  color: var(--nadi-text);
}
.nadi-article__cta p {
  margin: 0 auto var(--nadi-s-3);
  max-width: 540px;
  color: var(--nadi-text-muted);
}

/* Related articles */
.nadi-article__related {
  margin-top: var(--nadi-s-8);
  padding-top: var(--nadi-s-4);
  border-top: 1px solid var(--nadi-border);
}
.nadi-article__related h2 {
  font-size: 22px;
  font-weight: var(--nadi-weight-semi);
  margin: 0 0 var(--nadi-s-3) 0;
  color: var(--nadi-text);
}
.nadi-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--nadi-s-2);
}
.nadi-related-card {
  display: block;
  padding: var(--nadi-s-3);
  background: var(--nadi-surface);
  border: 1px solid var(--nadi-border);
  border-radius: var(--nadi-radius-lg);
  transition: border-color var(--nadi-dur-base) var(--nadi-ease),
              box-shadow var(--nadi-dur-base) var(--nadi-ease),
              transform var(--nadi-dur-base) var(--nadi-ease);
  color: var(--nadi-text);
}
.nadi-related-card:hover {
  border-color: var(--nadi-emerald);
  box-shadow: var(--nadi-shadow-md);
  transform: translateY(-2px);
  color: var(--nadi-text);
}
.nadi-related-card__tag {
  display: block;
  font-size: 11px;
  font-weight: var(--nadi-weight-semi);
  color: var(--nadi-emerald);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.nadi-related-card__title {
  font-size: 16px;
  font-weight: var(--nadi-weight-semi);
  line-height: var(--nadi-line-snug);
  margin: 0 0 8px 0;
  color: var(--nadi-text);
}
.nadi-related-card__excerpt {
  margin: 0;
  font-size: var(--nadi-size-body-sm);
  color: var(--nadi-text-muted);
  line-height: var(--nadi-line-normal);
}

/* Back link footer */
.nadi-article__back {
  margin-top: var(--nadi-s-6);
  padding-top: var(--nadi-s-3);
  border-top: 1px solid var(--nadi-border);
}

/* ----------------------------------------------------------
   13. Animation system (nadi-anim.js)
   Scroll-triggered reveals, staggered groups, number rollups.
   Paired JS: /assets/nadi/nadi-anim.js
   ---------------------------------------------------------- */

/* Hidden initial state — revealed by adding .is-in */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal="fade"] {
  transform: none;
}
[data-reveal="left"] {
  transform: translateX(-24px);
}
[data-reveal="right"] {
  transform: translateX(24px);
}
[data-reveal="scale"] {
  transform: scale(0.96);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Number rollup — preserves final style, just swaps text content */
[data-count].is-counting {
  font-variant-numeric: tabular-nums;
}

/* Stagger container — children inherit sequential delays */
[data-stagger] > [data-reveal] {
  transition-delay: calc(var(--nadi-stagger-i, 0) * 80ms);
}

/* Fallback: elements that never reach the observer (e.g. older browser
   without IntersectionObserver) still fade in via no-js / no-io class. */
html.no-io [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* -------------------------------------------------------------------------
   14. Card hover motion — site-wide consistency layer
   Applies the .nadi-related-card hover pattern (emerald border + shadow + lift)
   to every card-like surface. 200ms ease matches the base motion duration.
   Reduced-motion users skip the transform (see section 13 media block).
   ------------------------------------------------------------------------- */
.nadi-plan,
.nadi-trio__block,
.nadi-step,
.nadi-stat,
.nadi-obs,
.nadi-faq__item,
.nadi-audit-form__card,
.nadi-ask,
.nadi-answer,
.nadi-score-row,
.nadi-calc,
.nadi-calc__stat {
  transition: border-color var(--nadi-dur-base) var(--nadi-ease),
              box-shadow var(--nadi-dur-base) var(--nadi-ease),
              transform var(--nadi-dur-base) var(--nadi-ease);
}
.nadi-plan:hover,
.nadi-trio__block:hover,
.nadi-step:hover,
.nadi-stat:hover,
.nadi-obs:hover,
.nadi-faq__item:hover,
.nadi-audit-form__card:hover,
.nadi-ask:hover,
.nadi-score-row:hover,
.nadi-calc:hover,
.nadi-calc__stat:hover {
  border-color: var(--nadi-emerald);
  box-shadow: var(--nadi-shadow-md);
  transform: translateY(-2px);
}

/* Dark-surface card (.nadi-answer on audit results page): keep translate + shadow,
   but use a brighter emerald border so it reads against #0F172A. */
.nadi-answer:hover {
  border: 1px solid #10B981;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.18);
  transform: translateY(-2px);
}

/* Keep the "Recommended" pricing card's 2px emerald border on hover -- don't let
   the single-px border-color override it. */
.nadi-card--recommended:hover {
  border-color: var(--nadi-emerald-hover);
  border-width: 2px;
}

/* Reduced-motion: strip the transform lift from all card hovers. */
@media (prefers-reduced-motion: reduce) {
  .nadi-card:hover,
  .nadi-related-card:hover,
  .nadi-plan:hover,
  .nadi-trio__block:hover,
  .nadi-step:hover,
  .nadi-stat:hover,
  .nadi-obs:hover,
  .nadi-faq__item:hover,
  .nadi-audit-form__card:hover,
  .nadi-ask:hover,
  .nadi-answer:hover,
  .nadi-score-row:hover,
  .nadi-calc:hover,
  .nadi-calc__stat:hover {
    transform: none;
  }
}