/* Auto-generated homepage CSS — do not edit manually */
/* Source: scripts/lib/home-css.js — run: node scripts/generate-shared-css.js */
/* Cascade contract: linked AFTER /css/shared.css. */

    /* ===== HOMEPAGE-SPECIFIC STYLES ONLY =====
       All header, footer, body typography, and global focus styles come
       from /css/shared.css. Do not duplicate them here. */

    /* Smooth scrolling (scroll-behavior) comes from the shared animation
       system CSS interpolated at the end of this style block. */
    html { scroll-padding-top: 88px; }
    section, h2, [id] { scroll-margin-top: 88px; }

    /* === HERO LOGO ANIMATION ===
       Apr 27 (I18 fix): default state is now visible (offset 0). The animation
       uses fill-mode: backwards so the from-state (invisible) only applies
       during the delay window — after that, default visible takes over. This
       way Googlebot, link previewers, and any non-animation context render
       the heartbeat lines immediately rather than seeing a half-drawn logo. */
    .hero-seg {
      stroke-dasharray: 1;
      stroke-dashoffset: 0; /* visible by default for bots / JS-disabled */
      animation-fill-mode: backwards;
    }
    @keyframes hero-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    @keyframes hero-fadeback { from { opacity: 1; } to { opacity: 0.7; } }
    .hero-glow-dot { opacity: 0.25; }
    #hero-seg1 { animation: hero-draw 0.6s ease 0.5s backwards; }
    #hero-seg2 { animation: hero-draw 0.6s ease 1.6s backwards; }
    #hero-seg3 { animation: hero-draw 0.6s ease 2.7s backwards; }
    #hero-seg4 { animation: hero-draw 0.6s ease 3.8s backwards; }
    #hero-seg5 { animation: hero-draw 0.6s ease 4.9s backwards; }
    .hero-line-group { animation: hero-fadeback 0.6s ease 5.6s forwards; }

    /* === DISPLAY HEADLINE (Apr 29: Montserrat — matches data.cms.gov, signals
       authoritative federal-data source over editorial-magazine feel) === */
    .serif-display {
      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .hero-title {
      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e40af;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.1;
      /* R4-T1 I07: fluid size replaces text-3xl/5xl/6xl utilities so the
         hero search clears the fold at 1440x900 and 375x812 */
      font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    }
    html.dark .hero-title {
      color: #93c5fd;
    }

    /* === COMPACT HERO (R4-T1 I07) ===
       Replaces pt-12 sm:pt-20 on <main> and the text-xl sm:text-2xl subhead
       utilities. Copy is unchanged; only vertical bulk shrinks. */
    .home-main-pad { padding-top: 1.25rem; }
    @media (min-width: 640px) { .home-main-pad { padding-top: 2rem; } }
    .home-hero-sub {
      font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
      line-height: 1.5;
      font-weight: 400;
    }

    /* === GLASS CARD === */
    .glass {
      background: #f8f9fa;
      border: 1px solid rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
    }
    html.dark .glass {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* === FADE-IN ===
       .fade-in visuals + reduced-motion handling come from the shared
       animation system CSS interpolated at the end of this style block
       (getCoreAnimationSystem). Only homepage-specific reduced-motion
       overrides live here. */
    @media (prefers-reduced-motion: reduce) {
      .hero-seg { animation: none; stroke-dashoffset: 0; }
      .hero-line-group { opacity: 0.9; animation: none; }
    }

    /* === NAV BUTTONS (procedure cards) === */
    .nav-button {
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .nav-button:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-3);
    }
    html.dark .nav-button:hover {
      box-shadow: var(--shadow-3);
    }

    /* === STATE TEASER GRID (R4-T1 P02) ===
       Top states by surgeon count as light tiles; counts use the sitewide
       success-green stats convention. Full directory lives at /surgeons/. */
    .state-teaser-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    @media (min-width: 640px)  { .state-teaser-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 768px)  { .state-teaser-grid { grid-template-columns: repeat(5, 1fr); } }
    .state-teaser-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 72px;
      padding: 12px 10px;
      background: #f8f9fa;
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: var(--radius-sm);
      text-decoration: none;
      color: inherit;
      transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    }
    .state-teaser-tile:hover {
      border-color: rgba(59, 130, 246, 0.5);
      transform: translateY(-1px);
      box-shadow: var(--shadow-2);
    }
    html.dark .state-teaser-tile {
      background: rgba(255,255,255,0.03);
      border-color: rgba(255,255,255,0.08);
    }
    html.dark .state-teaser-tile:hover { border-color: rgba(96, 165, 250, 0.5); }
    .state-teaser-name {
      font-size: 1rem;
      font-weight: 600;
      color: #202124;
    }
    html.dark .state-teaser-name { color: #e8eaed; }
    .state-teaser-count {
      font-size: 0.875rem;
      font-weight: 700;
      color: #059669;
    }
    html.dark .state-teaser-count { color: #10b981; }
    .state-teaser-all {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 12px 28px;
      background: #1d4ed8;
      color: #ffffff;
      border-radius: var(--radius-sm);
      font-size: 1rem;
      font-weight: 700;
      text-decoration: none;
      transition: background-color 0.2s;
    }
    .state-teaser-all:hover { background: #1e40af; }
    html.dark .state-teaser-all { background: #2563eb; }
    html.dark .state-teaser-all:hover { background: #1d4ed8; } /* AA: white text 6.70:1 */

    /* === PROCEDURE CARDS === */
    /* R4-T1: dedicated grid (the static Tailwind subset ships grid-cols-*
       but no .grid display rule, so the old utility wrapper stacked). */
    .procedure-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }
    @media (min-width: 768px) { .procedure-grid { grid-template-columns: repeat(3, 1fr); } }
    .procedure-card {
      display: block;
      background: #f8f9fa;
      border: 2px solid transparent;
      border-radius: var(--radius-lg);
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    }
    .procedure-card:hover {
      transform: translateY(-2px);
      border-color: rgba(59,130,246,0.3);
      box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    }
    html.dark .procedure-card {
      background: rgba(255,255,255,0.03);
    }
    html.dark .procedure-card:hover {
      border-color: rgba(96,165,250,0.4);
    }
    .procedure-card img {
      width: 100%;
      /* R4-T1: visibly smaller artwork so three cards read as one compact row */
      height: clamp(88px, 9vw, 128px);
      object-fit: cover;
      object-position: center;
      display: block;
    }
    .procedure-card-body { padding: 20px; }
    .procedure-card h3 {
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      margin: 0 0 8px;
    }
    .procedure-card p {
      color: #4a4f55;
      line-height: 1.5;
      font-size: 0.95rem;
      margin: 0 0 16px;
    }
    html.dark .procedure-card p { color: #c4c7c5; }
    .procedure-cta {
      display: inline-block;
      background: #1d4ed8;
      color: #ffffff;
      padding: 12px 24px;
      border-radius: var(--radius-sm);
      font-weight: 700;
      transition: background-color 0.2s;
    }
    .procedure-card:hover .procedure-cta { background: #1e40af; }
    html.dark .procedure-cta { background: #2563eb; }
    html.dark .procedure-card:hover .procedure-cta { background: #1d4ed8; } /* AA: white text 6.70:1 */

    /* Hero data-provenance chip: shared .data-chip (see
       generateDataProvenanceCSS in scripts/lib/shared-components.js) */

    /* === SEARCH FORM === */
    .home-search {
      max-width: 640px;
      margin: 0 auto 24px;
      width: 100%;
    }
    .home-search-row {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 8px;
      background: #ffffff;
      border: 2px solid #e5e7eb;
      border-radius: var(--radius-md);
      padding: 6px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.06);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .home-search-row:focus-within {
      border-color: #3b82f6;
      box-shadow: var(--shadow-3);
    }
    html.dark .home-search-row {
      background: #1A1A1A;
      border-color: rgba(255,255,255,0.10);
    }
    html.dark .home-search-row:focus-within {
      border-color: #60a5fa;
    }
    .home-search-icon {
      display: inline-flex;
      align-items: center;
      padding-left: 12px;
      color: #6b7280;
      flex-shrink: 0;
    }
    html.dark .home-search-icon { color: #9aa0a6; }
    .home-search-input {
      flex: 1 1 200px;
      min-width: 0;
      padding: 12px 16px;
      font-size: 1.05rem;
      background: transparent;
      border: none;
      outline: none;
      color: #202124;
    }
    html.dark .home-search-input { color: #e8eaed; }
    .home-search-input::placeholder { color: #6b7280; }
    html.dark .home-search-input::placeholder { color: #9aa0a6; }
    .home-search-btn {
      flex: 0 0 auto;
      background: #1d4ed8;
      color: #ffffff;
      padding: 12px 24px;
      border: none;
      border-radius: var(--radius-sm);
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      transition: background-color 0.2s;
      min-height: 44px;
    }
    .home-search-btn:hover { background: #1e40af; }
    html.dark .home-search-btn { background: #2563eb; }
    html.dark .home-search-btn:hover { background: #1d4ed8; } /* AA: white text 6.70:1 */
    /* Inline autocomplete dropdown wired to header search index */
    .home-search-results {
      position: relative;
      width: 100%;
      max-height: 360px;
      overflow-y: auto;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: var(--radius-md);
      margin-top: 8px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.10);
      display: none;
    }
    .home-search-results.is-open { display: block; }
    html.dark .home-search-results {
      background: #1A1A1A;
      border-color: rgba(255,255,255,0.10);
    }
    .home-search-result {
      display: block;
      padding: 12px 16px;
      text-decoration: none;
      color: inherit;
      border-bottom: 1px solid #f3f4f6;
    }
    .home-search-result:last-child { border-bottom: none; }
    .home-search-result:hover,
    .home-search-result.is-highlighted {
      background: rgba(59,130,246,0.08);
    }
    html.dark .home-search-result { border-bottom-color: rgba(255,255,255,0.06); }
    html.dark .home-search-result:hover,
    html.dark .home-search-result.is-highlighted {
      background: rgba(96,165,250,0.12);
    }
    .home-search-result-name { font-weight: 600; }
    .home-search-result-loc { font-size: 0.875rem; color: #6b7280; margin-top: 2px; }
    html.dark .home-search-result-loc { color: #9aa0a6; }
    .home-search-result mark {
      background: rgba(59,130,246,0.25);
      color: inherit;
      padding: 0 2px;
      border-radius: 2px;
    }
    html.dark .home-search-result mark { background: rgba(96,165,250,0.30); }
    .home-search-empty {
      padding: 16px;
      text-align: center;
      color: #6b7280;
    }
    html.dark .home-search-empty { color: #9aa0a6; }

    /* === HOW WE RANK SECTION (R4-T1 P01: compact 3-across row on desktop) === */
    .how-rank-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    @media (min-width: 768px) { .how-rank-grid { grid-template-columns: repeat(3, 1fr); } }
    .how-rank-step {
      border-radius: var(--radius-md);
      padding: 16px 18px;
      text-align: left;
    }
    .how-rank-step-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }
    .how-rank-step h3 {
      font-size: 1rem;
      font-weight: 700;
      margin: 0;
    }
    .how-rank-step p {
      line-height: 1.5;
      font-size: 0.9rem;
      margin: 0;
    }
    .how-rank-step-icon {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      background: #dbeafe;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    html.dark .how-rank-step-icon {
      background: rgba(59,130,246,0.18);
      border: 1px solid rgba(96,165,250,0.4);
    }
    .how-rank-step-icon span {
      font-size: 1.05rem;
      font-weight: 800;
      color: #1e40af;
    }
    html.dark .how-rank-step-icon span { color: #93c5fd; }

    /* === FAQ ACCORDION === */
    .faq-card {
      background: #f8f9fa;
      border: 1px solid rgba(0,0,0,0.06);
      border-radius: var(--radius-md);
      transition: border-color 0.2s;
    }
    .faq-card:hover { border-color: rgba(59,130,246,0.3); }
    html.dark .faq-card {
      background: rgba(255,255,255,0.03);
      border-color: rgba(255,255,255,0.08);
    }
    .faq-summary {
      padding: 18px 20px;
      cursor: pointer;
      font-weight: 600;
      color: #202124;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 56px;
    }
    .faq-summary::-webkit-details-marker { display: none; }
    html.dark .faq-summary { color: #e8eaed; }
    .faq-chevron {
      flex-shrink: 0;
      color: #4a4f55;
      transition: transform 0.2s ease;
    }
    html.dark .faq-chevron { color: #c4c7c5; }
    .faq-card[open] .faq-chevron { transform: rotate(180deg); }
    .faq-answer {
      padding: 0 20px 20px;
      color: #374151;
      line-height: 1.6;
    }
    html.dark .faq-answer { color: #d1d5db; }

    /* === HOMEPAGE TEXT TOKENS (dark-mode aware) ===
       Apr 27 fix: previously inline style="color:..." declarations applied
       in both modes; without a dark variant they collapsed to invisible on
       the dark page background. These classes pair light + dark explicitly. */
    .home-text-body { color: #374151; }
    html.dark .home-text-body { color: #d1d5db; }
    .home-text-meta { color: #4a4f55; }
    html.dark .home-text-meta { color: #c4c7c5; }
    .home-text-strong { color: #1d4ed8; font-weight: 600; }
    html.dark .home-text-strong { color: #93c5fd; }
    .home-link {
      color: #1d4ed8;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .home-link:hover { color: #1e40af; }
    html.dark .home-link { color: #93c5fd; }
    html.dark .home-link:hover { color: #bfdbfe; }
    /* Padded inline link variants for tap targets on hero quick links */
    .home-link-pad {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 4px;
      min-height: 44px;
      color: #1d4ed8;
      text-decoration: none;
      font-weight: 500;
    }
    .home-link-pad:hover { color: #1e40af; text-decoration: underline; }
    html.dark .home-link-pad { color: #93c5fd; }
    html.dark .home-link-pad:hover { color: #bfdbfe; }

    /* === SOCIAL PROOF BADGES === */
    .proof-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
    }
    .proof-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 20px;
      background: #f8f9fa;
      border: 1px solid rgba(0,0,0,0.06);
      border-radius: var(--radius-md);
    }
    html.dark .proof-card {
      background: rgba(255,255,255,0.03);
      border-color: rgba(255,255,255,0.08);
    }
    .proof-icon { color: #1d4ed8; flex-shrink: 0; }
    html.dark .proof-icon { color: #93c5fd; }
    .proof-title { font-weight: 700; font-size: 0.9rem; color: #202124; }
    html.dark .proof-title { color: #e8eaed; }
    .proof-sub { font-size: 0.875rem; color: #4a4f55; }
    html.dark .proof-sub { color: #c4c7c5; }
    /* R3-T4: CMS proof card is a link to /data-methodology.html */
    .proof-card-link {
      min-height: 44px;
      text-decoration: none;
      color: inherit;
    }
    .proof-card-link:hover { border-color: #2563eb; }
    .proof-card-link:hover .proof-title { color: #1d4ed8; }
    html.dark .proof-card-link:hover { border-color: #60a5fa; }
    html.dark .proof-card-link:hover .proof-title { color: #93c5fd; }

    /* === RECOVERY BANNER (desktop) === */
    .recovery-banner {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 20px;
      margin: 1.25rem 0;
      background: rgba(59,130,246,0.07);
      border: 1.5px solid #60a5fa;
      border-radius: var(--radius-md);
      text-decoration: none;
      color: inherit;
      transition: background-color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    }
    .recovery-banner:hover {
      background: rgba(59,130,246,0.12);
      border-color: #1d4ed8;
      transform: translateY(-1px);
      box-shadow: var(--shadow-2);
    }
    html.dark .recovery-banner {
      background: rgba(59, 130, 246, 0.10);
      border-color: rgba(96,165,250,0.4);
    }
    html.dark .recovery-banner:hover {
      background: rgba(59, 130, 246, 0.18);
      border-color: #60a5fa;
    }
    .recovery-banner-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      background: #1d4ed8;
      color: #ffffff;
      border-radius: var(--radius-md);
      flex-shrink: 0;
    }
    html.dark .recovery-banner-icon { background: #2563eb; color: #ffffff; }
    .recovery-banner-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .recovery-banner-title {
      display: block;
      font-weight: 800;
      font-size: 1rem;
      line-height: 1.3;
      color: #1e40af;
    }
    html.dark .recovery-banner-title { color: #93c5fd; }
    .recovery-banner-sub {
      display: block;
      font-size: 0.875rem;
      color: #374151;
      line-height: 1.35;
    }
    html.dark .recovery-banner-sub { color: #d1d5db; }
    .recovery-banner-arrow {
      font-size: 1.4rem;
      font-weight: 800;
      color: #1d4ed8;
      flex-shrink: 0;
      transition: transform 0.2s;
    }
    .recovery-banner:hover .recovery-banner-arrow { transform: translateX(4px); }
    html.dark .recovery-banner-arrow { color: #93c5fd; }
    @media (max-width: 480px) {
      .recovery-banner { padding: 14px 16px; gap: 12px; }
      .recovery-banner-icon { width: 40px; height: 40px; }
      .recovery-banner-title { font-size: 0.92rem; }
      .recovery-banner-sub { font-size: 0.875rem; }
    }
    @media (max-width: 767px) {
      .recovery-banner { display: none !important; }
    }

    /* === RECOVERY STICKY BAR (mobile) === */
    .recovery-sticky {
      display: none;
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 900;
      background: #ffffff;
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: var(--radius-md);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
      padding: 10px 12px;
      align-items: center;
      gap: 10px;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    html.dark .recovery-sticky {
      background: #1A1A1A;
      border-color: rgba(255,255,255,0.10);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
    }
    @media (max-width: 767px) {
      .recovery-sticky.is-visible { display: flex; opacity: 1; transform: translateY(0); }
    }
    .recovery-sticky-link {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: inherit;
      min-width: 0;
    }
    .recovery-sticky-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      background: #1d4ed8;
      color: #ffffff;
      border-radius: var(--radius-sm);
      flex-shrink: 0;
    }
    html.dark .recovery-sticky-icon { background: #2563eb; color: #ffffff; }
    .recovery-sticky-text {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
      flex: 1;
    }
    .recovery-sticky-text strong {
      font-size: 0.875rem;
      font-weight: 800;
      color: #1e40af;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    html.dark .recovery-sticky-text strong { color: #93c5fd; }
    /* Inline affiliate disclosure — keep at 14px */
    .recovery-sticky-text small {
      font-size: 0.875rem;
      color: #4a4f55;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    html.dark .recovery-sticky-text small { color: #c4c7c5; }
    .recovery-sticky-arrow {
      font-size: 1.2rem;
      font-weight: 800;
      color: #1d4ed8;
      flex-shrink: 0;
    }
    html.dark .recovery-sticky-arrow { color: #93c5fd; }
    /* Close: real 44x44 tap target with a visible border affordance */
    .recovery-sticky-close {
      background: none;
      border: 1px solid #d1d5db;
      color: #4a4f55;
      font-size: 1.4rem;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
      border-radius: var(--radius-sm);
      min-width: 44px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .recovery-sticky-close:hover { color: #202124; background: rgba(0,0,0,0.05); }
    html.dark .recovery-sticky-close { color: #c4c7c5; border-color: #4b5563; }
    html.dark .recovery-sticky-close:hover { color: #e8eaed; background: rgba(255,255,255,0.08); }

    /* === MOBILE-ONLY STICKY SEARCH (Round 5) === */
    .sticky-search {
      display: none;
      position: fixed;
      top: 64px;
      left: 0;
      right: 0;
      z-index: 999;
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(0,0,0,0.08);
      padding: 8px 12px;
      transform: translateY(-100%);
      transition: transform 0.25s ease;
    }
    .sticky-search.is-visible { transform: translateY(0); }
    html.dark .sticky-search {
      background: rgba(26,26,26,0.97);
      border-bottom-color: rgba(255,255,255,0.10);
    }
    @media (max-width: 767px) {
      .sticky-search { display: block; }
    }
    .sticky-search-row {
      display: flex;
      align-items: center;
      gap: 8px;
      max-width: 720px;
      margin: 0 auto;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: var(--radius-sm);
      padding: 4px;
    }
    html.dark .sticky-search-row {
      background: #1A1A1A;
      border-color: rgba(255,255,255,0.10);
    }
    .sticky-search-input {
      flex: 1;
      min-width: 0;
      padding: 8px 12px;
      background: transparent;
      border: none;
      outline: none;
      color: #202124;
      font-size: 0.95rem;
    }
    html.dark .sticky-search-input { color: #e8eaed; }
    /* AA placeholder contrast: #6b7280 on white = 4.83:1, #9aa0a6 on #1A1A1A = 6.59:1 */
    .sticky-search-input::placeholder { color: #6b7280; }
    html.dark .sticky-search-input::placeholder { color: #9aa0a6; }
    .sticky-search-btn {
      flex: 0 0 auto;
      background: #1d4ed8;
      color: #ffffff;
      padding: 8px 14px;
      border: none;
      border-radius: var(--radius-sm);
      font-weight: 700;
      cursor: pointer;
      min-height: 36px;
    }
    .sticky-search-btn:hover { background: #1e40af; }
    html.dark .sticky-search-btn { background: #2563eb; }
    html.dark .sticky-search-btn:hover { background: #1d4ed8; } /* AA: white text 6.70:1 */

    
    /* === CORE ANIMATION KEYFRAMES === */

    /* Fade in from bottom (used by .stagger-children > *) */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    /* Subtle pulse (used by .animate-pulse) */
    @keyframes pulse {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.8;
      }
    }

    /* === CORE ANIMATION CLASSES === */

    /* Smooth scrolling */
    html {
      scroll-behavior: smooth;
    }

    /* Fade-in on scroll trigger */
    .fade-in {
      opacity: 1; /* Visible by default for accessibility */
      transform: translate3d(0, 0, 0);
      transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                  transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Only hide if JavaScript is enabled and running */
    .js-enabled .fade-in:not(.visible) {
      opacity: 0;
      transform: translate3d(0, 30px, 0);
    }

    .fade-in.visible {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    /* Staggered animations for lists/grids */
    .stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
    .stagger-children > *:nth-child(2) { animation-delay: 0.10s; }
    .stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
    .stagger-children > *:nth-child(4) { animation-delay: 0.20s; }
    .stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
    .stagger-children > *:nth-child(6) { animation-delay: 0.30s; }
    .stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
    .stagger-children > *:nth-child(8) { animation-delay: 0.40s; }
    .stagger-children > *:nth-child(9) { animation-delay: 0.45s; }
    .stagger-children > *:nth-child(10) { animation-delay: 0.50s; }

    .stagger-children > * {
      animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    /* Enhanced button hover effects */
    .btn-hover {
      position: relative;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }

    .btn-hover:hover {
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    .btn-hover:active {
      transform: translateY(0) scale(0.99);
    }

    /* Card hover effects */
    .card-hover {
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }

    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    }

    /* Link hover effects */
    .link-hover {
      position: relative;
      transition: color 0.2s ease;
    }

    .link-hover::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: currentColor;
      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .link-hover:hover::after {
      width: 100%;
    }

    /* Stat number emphasis */
    .stat-number {
      font-variant-numeric: tabular-nums;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .stat-number:hover {
      transform: scale(1.15);
      color: #3b82f6;
    }

    /* Scroll progress indicator */
    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: #3b82f6; /* solid blue */
      transform-origin: left;
      z-index: 9999;
      transition: transform 0.1s ease-out;
    }

    /* Accessibility: Respect reduced motion preference */
    @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;
      }

      .fade-in {
        opacity: 1;
        transform: none;
      }
    }