/**
 * CLI Popup System — Styles
 * Version: 1.3
 *
 * CHANGELOG v1.3:
 * - Full visual redesign to integrate with CLI's HSK article template design system
 * - Replaced generic Inter/system font stack with Fraunces (headlines) + Source Sans 3 (body)
 * - Adopted article template color palette (--accent, --ink, --surface-card, --border, etc.)
 * - Matched component vocabulary: warm card aesthetic, 10-12px radius, translateY hover lifts
 * - Reused article template animation language: cubic-bezier(0.16, 1, 0.3, 1) for slides
 * - z-index layering coexists with article template (progress bar 10000, mobile TOC 10001)
 * - Sticky bar now overlays content (no layout shift via padding-top)
 * - Bottom elements coordinate with back-to-top FAB (800) and mobile TOC FAB (900)
 * - Mobile bottom bar under 20% viewport height for SEO safety
 * - Touch targets minimum 44px for close buttons and CTAs
 * - env(safe-area-inset-bottom) for notched devices
 * - Zero additional font imports — uses fonts already loaded by article template
 *
 * Components:
 *   1. Sticky Top Bar
 *   2. Scroll Slide-In (bottom-right)
 *   3. Exit-Intent Modal (desktop)
 *   4. Mobile Bottom Bar
 *   5. Shared: email form, thank-you state, animations
 *
 * All classes are prefixed with .cli-popup- to avoid collisions.
 */


/* ================================================================
   DESIGN TOKENS
   Mirrors the HSK article template's design system variables.

   NOTE: The article template scopes its CSS custom properties under
   .hsk-article-wrapper (which uses `all: initial`). Since popups are
   appended to document.body (outside that wrapper), they cannot
   inherit those scoped properties. We redeclare the same values here
   under :root so popups share the identical visual language.

   If the article template's palette changes, update these to match.
   ================================================================ */
:root {
  /* ── Colors (from article template) ── */
  --cli-popup-ink:            #1a1a1a;
  --cli-popup-ink-soft:       #3d3d3d;
  --cli-popup-ink-muted:      #6b6b6b;
  --cli-popup-ink-faint:      #999999;
  --cli-popup-surface:        #faf9f7;
  --cli-popup-surface-warm:   #f5f2ed;
  --cli-popup-surface-card:   #ffffff;
  --cli-popup-border:         #e8e4de;
  --cli-popup-border-light:   #f0ede8;

  --cli-popup-accent:         #c23c2a;
  --cli-popup-accent-soft:    #d4564a;
  --cli-popup-accent-bg:      #fdf0ee;
  --cli-popup-accent-border:  #f0c4be;

  --cli-popup-green:          #3a7a5c;
  --cli-popup-green-bg:       #eef7f2;

  --cli-popup-gold:           #b8860b;
  --cli-popup-gold-hover:     #a67a0a;

  /* ── Typography (matches article template stacks) ── */
  --cli-popup-font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --cli-popup-font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cli-popup-font-cn:      'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', serif;

  /* ── Type scale (from article template) ── */
  --cli-popup-text-xs:   0.75rem;
  --cli-popup-text-sm:   0.875rem;
  --cli-popup-text-base: 1rem;       /* popup body slightly tighter than article's 1.175rem */
  --cli-popup-text-lg:   1.125rem;
  --cli-popup-text-xl:   1.375rem;
  --cli-popup-text-2xl:  1.625rem;

  /* ── Spacing (from article template scale) ── */
  --cli-popup-space-xs:  0.25rem;
  --cli-popup-space-sm:  0.5rem;
  --cli-popup-space-md:  1rem;
  --cli-popup-space-lg:  1.5rem;
  --cli-popup-space-xl:  2rem;

  /* ── Surfaces & Elevation ── */
  --cli-popup-shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.06);
  --cli-popup-shadow-md:  0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  --cli-popup-shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  --cli-popup-shadow-xl:  0 20px 48px rgba(0, 0, 0, 0.13), 0 4px 12px rgba(0, 0, 0, 0.06);
  --cli-popup-radius-sm:  8px;
  --cli-popup-radius-md:  10px;
  --cli-popup-radius-lg:  14px;

  /* ── Animation (from article template patterns) ── */
  --cli-popup-ease-slide: cubic-bezier(0.16, 1, 0.3, 1);    /* deceleration with overshoot */
  --cli-popup-ease-out:   cubic-bezier(0, 0, 0.58, 1);       /* standard ease-out */
  --cli-popup-duration-enter: 350ms;
  --cli-popup-duration-exit:  200ms;

  /* ── z-index layering ──
     Article template uses:
       800  = back-to-top FAB
       900  = mobile TOC FAB
       10000 = reading progress bar
       10001 = mobile TOC overlay, stroke panel

     Popup z-index sits BETWEEN the FABs and the progress bar so:
       - FABs render below popups (expected)
       - Progress bar renders above the sticky top bar (user can see read progress)
       - Mobile TOC overlay renders above popups (rare overlap, but correct priority)
  */
  --cli-popup-z-mobile-bar:    950;
  --cli-popup-z-bar:           990;
  --cli-popup-z-slidein:       960;
  --cli-popup-z-modal-overlay: 9998;
  --cli-popup-z-modal:         9999;
}


/* ================================================================
   1. STICKY TOP BAR
   Overlays content — no layout shift. Sits below the progress bar
   (z-index 990 vs 10000) so the thin reading indicator remains visible.
   ================================================================ */
.cli-popup-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--cli-popup-z-bar);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cli-popup-space-md);
  padding: 10px 20px;
  background: var(--cli-popup-ink);
  color: var(--cli-popup-surface-card);
  font-family: var(--cli-popup-font-body);
  font-size: var(--cli-popup-text-sm);
  line-height: 1.4;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Enter from above, no layout shift */
  transform: translateY(-100%);
  transition: transform var(--cli-popup-duration-enter) var(--cli-popup-ease-slide);
}

.cli-popup-bar.is-visible {
  transform: translateY(0);
}

/*
 * v1.3: NO body padding-top. The bar overlays content.
 * The 3px progress bar (z-index 10000) sits visually above this bar.
 * body.cli-popup-bar-active is kept as a hook for JS coordination
 * but no longer causes layout shift.
 */

.cli-popup-bar__text {
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.cli-popup-bar__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  background: var(--cli-popup-accent);
  color: var(--cli-popup-surface-card);
  font-family: var(--cli-popup-font-body);
  font-size: var(--cli-popup-text-xs);
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: var(--cli-popup-radius-sm);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}

.cli-popup-bar__cta:hover {
  background: var(--cli-popup-accent-soft);
  color: var(--cli-popup-surface-card);
  text-decoration: none;
  transform: translateY(-1px);
}

.cli-popup-bar__cta:active {
  transform: translateY(0);
}

.cli-popup-bar__close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;     /* min 44px touch target */
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s ease, background 0.2s ease;

  /* Visual size smaller than hit area */
  margin: -8px -8px -8px 0;
}

.cli-popup-bar__close:hover {
  color: var(--cli-popup-surface-card);
  background: rgba(255, 255, 255, 0.1);
}

.cli-popup-bar__close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: -2px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .cli-popup-bar {
    padding: 8px 12px;
    gap: var(--cli-popup-space-sm);
    font-size: 13px;
  }

  .cli-popup-bar__text {
    font-size: 12px;
  }

  .cli-popup-bar__cta {
    font-size: 12px;
    padding: 6px 14px;
  }
}


/* ================================================================
   2. SCROLL SLIDE-IN (bottom-right)
   Card aesthetic matching article template: white bg, warm border,
   10px radius, elevation shadow. Positioned above back-to-top FAB.
   ================================================================ */
.cli-popup-slidein {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--cli-popup-z-slidein);
  width: 380px;
  max-width: calc(100vw - 48px);
  background: var(--cli-popup-surface-card);
  border: 1px solid var(--cli-popup-border);
  border-radius: var(--cli-popup-radius-md);
  box-shadow: var(--cli-popup-shadow-lg);
  font-family: var(--cli-popup-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Entrance: fade + slide up + slight scale */
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  pointer-events: none;
  transition:
    opacity var(--cli-popup-duration-enter) var(--cli-popup-ease-out),
    transform var(--cli-popup-duration-enter) var(--cli-popup-ease-slide);
}

.cli-popup-slidein.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.cli-popup-slidein__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;    /* 44px touch target */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  color: var(--cli-popup-ink-muted);
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s ease, background 0.2s ease;
  z-index: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cli-popup-slidein__close:hover {
  color: var(--cli-popup-ink);
  background: var(--cli-popup-surface-card);
}

.cli-popup-slidein__close:focus-visible {
  outline: 2px solid var(--cli-popup-accent);
  outline-offset: -2px;
}

.cli-popup-slidein__image {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--cli-popup-radius-md) var(--cli-popup-radius-md) 0 0;
  display: block;
}

.cli-popup-slidein__content {
  padding: 20px 20px 24px;
}

.cli-popup-slidein__headline {
  margin: 0 0 8px;
  font-family: var(--cli-popup-font-heading);
  font-size: var(--cli-popup-text-xl);
  font-weight: 600;
  font-optical-sizing: auto;
  color: var(--cli-popup-ink);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.cli-popup-slidein__body {
  margin: 0 0 var(--cli-popup-space-md);
  font-family: var(--cli-popup-font-body);
  font-size: var(--cli-popup-text-sm);
  color: var(--cli-popup-ink-muted);
  line-height: 1.55;
}

/* Mobile slide-in: full-width bottom sheet */
@media (max-width: 768px) {
  .cli-popup-slidein {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    border-radius: var(--cli-popup-radius-lg) var(--cli-popup-radius-lg) 0 0;
    box-shadow: var(--cli-popup-shadow-xl);
    transform: translateY(100%);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .cli-popup-slidein.is-visible {
    transform: translateY(0);
  }

  .cli-popup-slidein__image {
    height: 100px;
    border-radius: var(--cli-popup-radius-lg) var(--cli-popup-radius-lg) 0 0;
  }

  .cli-popup-slidein__content {
    padding: 16px 16px 20px;
  }
}


/* ================================================================
   3. EXIT-INTENT MODAL (desktop only)
   Centered dialog with article-template overlay treatment:
   backdrop-filter blur, warm shadow elevation, Fraunces headings.
   ================================================================ */
.cli-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--cli-popup-z-modal-overlay);
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.cli-popup-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.cli-popup-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: var(--cli-popup-z-modal);
  width: 520px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--cli-popup-surface-card);
  border: 1px solid var(--cli-popup-border);
  border-radius: var(--cli-popup-radius-lg);
  box-shadow: var(--cli-popup-shadow-xl);
  font-family: var(--cli-popup-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Entrance: centered scale-up with fade */
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 300ms ease,
    transform 300ms var(--cli-popup-ease-slide);
}

.cli-popup-modal.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.cli-popup-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;    /* 44px touch target */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--cli-popup-border-light);
  color: var(--cli-popup-ink-muted);
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  z-index: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cli-popup-modal__close:hover {
  color: var(--cli-popup-ink);
  background: var(--cli-popup-surface-card);
  border-color: var(--cli-popup-border);
}

.cli-popup-modal__close:focus-visible {
  outline: 2px solid var(--cli-popup-accent);
  outline-offset: -2px;
}

.cli-popup-modal__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--cli-popup-radius-lg) var(--cli-popup-radius-lg) 0 0;
  display: block;
}

.cli-popup-modal__content {
  padding: 28px 32px 32px;
  text-align: center;
}

.cli-popup-modal__headline {
  margin: 0 0 10px;
  font-family: var(--cli-popup-font-heading);
  font-size: var(--cli-popup-text-2xl);
  font-weight: 600;
  font-optical-sizing: auto;
  color: var(--cli-popup-ink);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.cli-popup-modal__body {
  margin: 0 0 24px;
  font-family: var(--cli-popup-font-body);
  font-size: var(--cli-popup-text-base);
  color: var(--cli-popup-ink-muted);
  line-height: 1.6;
}

.cli-popup-modal__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Hide modal on mobile — mobile bar replaces it */
@media (max-width: 768px) {
  .cli-popup-overlay,
  .cli-popup-modal {
    display: none !important;
  }
}


/* ================================================================
   4. MOBILE BOTTOM BAR
   Compact, dismissible bar at bottom of screen. Under 20% viewport
   height for Google SEO compliance. Coordinates with back-to-top
   and mobile TOC FABs.
   ================================================================ */
.cli-popup-mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--cli-popup-z-mobile-bar);
  display: none;  /* shown only on mobile via media query */
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--cli-popup-surface-card);
  border-top: 1px solid var(--cli-popup-border);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
  font-family: var(--cli-popup-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* max-height caps at 20vh for SEO safety */
  max-height: 20vh;
  overflow: hidden;

  transform: translateY(100%);
  transition: transform var(--cli-popup-duration-enter) var(--cli-popup-ease-slide);
}

.cli-popup-mobile-bar.is-visible {
  transform: translateY(0);
}

.cli-popup-mobile-bar__text {
  flex: 1 1 auto;
  font-family: var(--cli-popup-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--cli-popup-ink);
  line-height: 1.3;
  min-width: 0;  /* allow text truncation in flex */
}

.cli-popup-mobile-bar__text small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--cli-popup-ink-muted);
  margin-top: 2px;
}

.cli-popup-mobile-bar__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;  /* 44px touch target */
  padding: 10px 18px;
  background: var(--cli-popup-accent);
  color: var(--cli-popup-surface-card);
  font-family: var(--cli-popup-font-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: var(--cli-popup-radius-sm);
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.cli-popup-mobile-bar__cta:hover {
  background: var(--cli-popup-accent-soft);
  color: var(--cli-popup-surface-card);
  text-decoration: none;
}

.cli-popup-mobile-bar__close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;     /* 44px touch target */
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--cli-popup-ink-faint);
  font-size: 16px;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s ease;

  /* Pull close button into gutters so hit area doesn't waste space */
  margin: -6px -8px -6px 0;
}

.cli-popup-mobile-bar__close:hover {
  color: var(--cli-popup-ink);
}

.cli-popup-mobile-bar__close:focus-visible {
  outline: 2px solid var(--cli-popup-accent);
  outline-offset: -2px;
}

/* Only show on mobile */
@media (max-width: 768px) {
  .cli-popup-mobile-bar {
    display: flex;
  }

  /* Push back-to-top and mobile TOC FABs above the bar.
     The bar height with padding is ~64-72px + safe-area. Use 80px offset. */
  body.cli-popup-mobile-bar-active .back-to-top {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  body.cli-popup-mobile-bar-active .toc-mobile-fab {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* Hide on desktop */
@media (min-width: 769px) {
  .cli-popup-mobile-bar {
    display: none !important;
  }
}


/* ================================================================
   5. SHARED COMPONENTS: Buttons, Email Form, Thank-You State
   Matches article template's CTA button pattern exactly:
   accent background, 8px radius, 600 weight, translateY hover lift.
   ================================================================ */

/* ── Primary CTA Button (reused in slide-in & modal) ── */
.cli-popup-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 320px;
  min-height: 48px;  /* accessible touch target */
  padding: 0.75rem 1.25rem;
  background: var(--cli-popup-accent);
  color: var(--cli-popup-surface-card);
  font-family: var(--cli-popup-font-body);
  font-size: var(--cli-popup-text-base);
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: var(--cli-popup-radius-sm);
  cursor: pointer;
  line-height: 1.4;
  transition: all 0.2s ease;
}

.cli-popup-cta-primary:hover {
  background: var(--cli-popup-accent-soft);
  color: var(--cli-popup-surface-card);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(194, 60, 42, 0.25);
}

.cli-popup-cta-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.cli-popup-cta-primary:focus-visible {
  outline: 2px solid var(--cli-popup-accent);
  outline-offset: 2px;
}

/* ── Secondary / Dismiss Link ── */
.cli-popup-cta-secondary {
  display: inline-block;
  padding: 8px 16px;
  min-height: 44px; /* touch target */
  background: transparent;
  border: none;
  color: var(--cli-popup-ink-muted);
  font-family: var(--cli-popup-font-body);
  font-size: var(--cli-popup-text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--cli-popup-border);
  cursor: pointer;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
  line-height: 1.4;
}

.cli-popup-cta-secondary:hover {
  color: var(--cli-popup-ink-soft);
  text-decoration-color: var(--cli-popup-ink-muted);
}

.cli-popup-cta-secondary:focus-visible {
  outline: 2px solid var(--cli-popup-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Email Capture Form ── */
.cli-popup-email-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.cli-popup-email-form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  min-height: 48px; /* accessible touch target */
  font-family: var(--cli-popup-font-body);
  font-size: var(--cli-popup-text-sm);
  color: var(--cli-popup-ink);
  background: var(--cli-popup-surface);
  border: 1px solid var(--cli-popup-border);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.cli-popup-email-form input[type="email"]:focus {
  border-color: var(--cli-popup-accent);
  box-shadow: 0 0 0 3px rgba(194, 60, 42, 0.1);
}

.cli-popup-email-form input[type="email"]::placeholder {
  color: var(--cli-popup-ink-faint);
}

.cli-popup-email-form .cli-popup-cta-primary {
  max-width: 100%;
}

.cli-popup-email-form__error {
  font-family: var(--cli-popup-font-body);
  font-size: var(--cli-popup-text-xs);
  color: var(--cli-popup-accent);
  margin: 0;
  display: none;
}

.cli-popup-email-form__error.is-visible {
  display: block;
}

/* ── Thank-You State ── */
.cli-popup-thankyou {
  display: none;
  text-align: center;
  padding: 8px 0;
}

.cli-popup-thankyou.is-visible {
  display: block;
}

.cli-popup-thankyou__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  background: var(--cli-popup-green-bg);
  color: var(--cli-popup-green);
  border-radius: 50%;
  font-size: 24px;
}

.cli-popup-thankyou__message {
  font-family: var(--cli-popup-font-heading);
  font-size: var(--cli-popup-text-lg);
  font-weight: 600;
  color: var(--cli-popup-ink);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.cli-popup-thankyou__sub {
  font-family: var(--cli-popup-font-body);
  font-size: var(--cli-popup-text-sm);
  color: var(--cli-popup-ink-muted);
  margin: 0 0 14px;
}

.cli-popup-thankyou__download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px; /* touch target */
  padding: 10px 20px;
  background: var(--cli-popup-gold);
  color: var(--cli-popup-surface-card);
  font-family: var(--cli-popup-font-body);
  font-size: var(--cli-popup-text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s ease, transform 0.15s ease;
}

.cli-popup-thankyou__download:hover {
  background: var(--cli-popup-gold-hover);
  color: var(--cli-popup-surface-card);
  text-decoration: none;
  transform: translateY(-1px);
}

.cli-popup-thankyou__download:focus-visible {
  outline: 2px solid var(--cli-popup-gold);
  outline-offset: 2px;
}


/* ================================================================
   6. ANIMATION UTILITIES
   ================================================================ */
@keyframes cli-popup-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.cli-popup-shake {
  animation: cli-popup-shake 0.5s ease;
}

/* Reduce motion preference — matches article template pattern */
@media (prefers-reduced-motion: reduce) {
  .cli-popup-bar,
  .cli-popup-slidein,
  .cli-popup-modal,
  .cli-popup-overlay,
  .cli-popup-mobile-bar {
    transition-duration: 0.01ms !important;
  }

  .cli-popup-shake {
    animation: none !important;
  }
}


/* ================================================================
   7. FOCUS VISIBLE FALLBACK
   Ensures focus indicators work in older browsers that don't
   support :focus-visible — graceful degradation.
   ================================================================ */
@supports not selector(:focus-visible) {
  .cli-popup-bar__close:focus,
  .cli-popup-slidein__close:focus,
  .cli-popup-modal__close:focus,
  .cli-popup-mobile-bar__close:focus,
  .cli-popup-cta-primary:focus,
  .cli-popup-cta-secondary:focus,
  .cli-popup-thankyou__download:focus {
    outline: 2px solid var(--cli-popup-accent);
    outline-offset: 2px;
  }
}


/* ================================================================
   8. PRINT — hide all popups
   ================================================================ */
@media print {
  .cli-popup-bar,
  .cli-popup-slidein,
  .cli-popup-overlay,
  .cli-popup-modal,
  .cli-popup-mobile-bar {
    display: none !important;
  }
}