/* === variables.css === */
/* ============================================
   CSS VARIABLES - Design System Tokens
   ============================================ */

:root {
  /* ----------------------------------------
     PRIMARY COLORS
     ---------------------------------------- */
  --primary: #1a1a2e;
  --primary-rgb: 26, 26, 46;
  --primary-hover: #2d2d44;
  --primary-light: #4a4a66;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ----------------------------------------
     BACKGROUNDS - Light mode
     Warm neutrals with subtle tonal hint
     ---------------------------------------- */
  --bg: #fafafb;
  --bg-warm: #fafafb;
  --bg-subtle: #f6f6f8;
  --bg-secondary: #f1f1f4;
  --card: #ffffff;
  --card-tonal: #F4F6FB;
  --card-hover: #f8f8fa;

  /* ----------------------------------------
     BORDERS
     ---------------------------------------- */
  --border: rgba(0, 0, 0, 0.10);
  --border-subtle: rgba(0, 0, 0, 0.05);
  --hairline: rgba(26, 26, 46, 0.07);

  /* ----------------------------------------
     TEXT COLORS
     ---------------------------------------- */
  --text: #1a1a2e;
  --text-muted: rgba(26, 26, 46, 0.58);
  --text-dimmed: rgba(26, 26, 46, 0.38);

  /* ----------------------------------------
     ACCENT COLOR
     ---------------------------------------- */
  --accent: #7C5CFC;

  /* ----------------------------------------
     TONAL PALETTE
     50 = subtle wash, 100 = chip bg, 700 = ink/text
     ---------------------------------------- */
  --tone-violet: #7C5CFC;
  --tone-violet-50: #EFEAFF;
  --tone-violet-100: #DDD3FF;
  --tone-violet-700: #4B2FB8;

  --tone-sky: #38BDF8;
  --tone-sky-50: #E6F6FE;
  --tone-sky-100: #C8ECFD;
  --tone-sky-700: #0c7eb3;

  --tone-emerald: #10B981;
  --tone-emerald-50: #D9F7EB;
  --tone-emerald-100: #B6EBD6;
  --tone-emerald-700: #047857;

  --tone-amber: #F59E0B;
  --tone-amber-50: #FFF4DD;
  --tone-amber-100: #FFE4B0;
  --tone-amber-700: #B45309;

  --tone-rose: #FB7185;
  --tone-rose-50: #FFE6EA;
  --tone-rose-100: #FFC9D2;
  --tone-rose-700: #B91D40;

  /* ----------------------------------------
     MARKERS
     Warm coral (softer than pure orange)
     ---------------------------------------- */
  --marker: #F97066;
  --marker-bg: rgba(249, 112, 102, 0.15);

  /* ----------------------------------------
     STATUS COLORS
     ---------------------------------------- */
  --success: #34D399;
  --error: #F87171;

  /* ----------------------------------------
     EFFECTS
     ---------------------------------------- */
  --glow: rgba(26, 26, 46, 0.1);

  /* ----------------------------------------
     ATMOSPHERE — Subtle depth tokens
     ---------------------------------------- */
  --tint-wash: rgba(var(--primary-rgb), 0.02);
  --tint-subtle: rgba(var(--primary-rgb), 0.05);
  --tint-focus: rgba(var(--primary-rgb), 0.1);
  --border-accent: rgba(var(--primary-rgb), 0.12);
  --shadow-accent-sm: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-accent-md: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-accent-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Legacy aliases — old tokens still referenced in code */
  --violet-wash: var(--tint-wash);
  --violet-tint: var(--tint-subtle);
  --violet-focus: var(--tint-focus);
  --border-violet: var(--border-accent);
  --shadow-violet-sm: var(--shadow-accent-sm);
  --shadow-violet-md: var(--shadow-accent-md);
  --shadow-violet-lg: var(--shadow-accent-lg);

  /* ----------------------------------------
     SAFE AREAS (iOS notch, etc.)
     ---------------------------------------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ----------------------------------------
     SPACING SCALE
     ---------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ----------------------------------------
     BORDER RADIUS SCALE
     Friendlier, bigger radii for the new design language.
     Legacy --radius-* names kept for back-compat with older CSS.
     ---------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 9999px;

  /* ----------------------------------------
     TRANSITIONS
     ---------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
  --transition-fast: 0.15s var(--ease-standard);
  --transition-base: 0.2s var(--ease-standard);
  --transition-slow: 0.3s var(--ease-standard);

  /* ----------------------------------------
     ADDITIONAL SEMANTIC COLORS
     ---------------------------------------- */
  --warning: #f59e0b;
  --info: #3b82f6;

  /* ----------------------------------------
     ELEVATION - Soft layered shadows
     ---------------------------------------- */
  --shadow-color: 20, 20, 40;
  --shadow-sm: 0 1px 2px rgba(20, 20, 40, 0.05), 0 1px 3px rgba(20, 20, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 20, 40, 0.06), 0 2px 4px rgba(20, 20, 40, 0.04);
  --shadow-lg: 0 10px 30px rgba(20, 20, 40, 0.08), 0 4px 10px rgba(20, 20, 40, 0.04);
  --shadow-tonal-violet: 0 6px 20px rgba(124, 92, 252, 0.18);
  --shadow-tonal-violet-lg: 0 8px 24px rgba(124, 92, 252, 0.32);
  --shadow-tonal-sky: 0 6px 20px rgba(56, 189, 248, 0.18);
  --surface-elevated: rgba(255, 255, 255, 0.95);

  /* ----------------------------------------
     ALIASES (backward compatibility)
     ---------------------------------------- */
  --text-secondary: var(--text-muted);
  --text-tertiary: var(--text-dimmed);
  --surface: var(--card);
}

/* Prevent horizontal scroll on mobile */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* === base.css === */
/* ============================================
   BASE STYLES
   Reset, typography, focus indicators,
   utility classes, and keyframe animations
   ============================================ */

/* ----------------------------------------
   CSS RESET
   ---------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  touch-action: manipulation;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------
   FOCUS INDICATORS - Accessibility
   ---------------------------------------- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ----------------------------------------
   UTILITY CLASSES
   ---------------------------------------- */
.hidden {
  display: none !important;
}

/* ----------------------------------------
   HIDDEN FILE INPUT
   Using sr-only pattern instead of display:none for mobile browser compatibility.
   display:none breaks label-input association on Samsung Internet and some other mobile browsers.
   ---------------------------------------- */
#fileInput,
#secondFileInput,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Credits button celebration */
@keyframes celebrateCredits {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Ripple effect for empty state */
@keyframes ripple {
  0% {
    width: 80px;
    height: 80px;
    opacity: 0.5;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

/* Edit marker pulse */
@keyframes marker-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

/* Shimmer effect for tips */
@keyframes shimmer {
  0%, 80% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Image reveal animation */
@keyframes imageReveal {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Badge pulse animation */
@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ============================================
   DESKTOP OVERRIDES - Ripple animation
   ============================================ */
@media (min-width: 900px) {
  @keyframes ripple {
    0% { width: 100px; height: 100px; opacity: 0.5; }
    100% { width: 400px; height: 400px; opacity: 0; }
  }
}

/* === components.css === */
/* ============================================
   COMPONENT STYLES
   Reusable UI components: buttons, inputs,
   modals, sheets, credit packs, etc.
   ============================================ */

/* ============================================
   PRICING FLASH PREVENTION
   Hide price values until localized prices load.
   JS adds .pricing-loaded to <html> after /api/pricing returns.
   ============================================ */
html:not(.pricing-loaded) [data-sub-tier-price],
html:not(.pricing-loaded) [data-sub-tier-per-edit],
html:not(.pricing-loaded) [data-onetime-price] {
  visibility: hidden;
}

/* ============================================
   BODY SCROLL LOCK
   Applied when modals/sheets are open
   ============================================ */
body.modal-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  /* height set dynamically via JS for iOS Safari */
}

/* Prevent touch scroll passthrough on iOS */
body.modal-open .sheet-overlay,
body.modal-open .modal-overlay {
  touch-action: none;
  -webkit-overflow-scrolling: auto;
}

/* Hide GDPR consent banner when modals/sheets are open */
body.modal-open #gdpr-banner,
body.modal-open [id*="gdpr"],
body.modal-open [class*="gdpr"],
body.modal-open [class*="consent-banner"] {
  display: none !important;
}

/* ============================================
   BUTTONS - General
   ============================================ */
.btn {
  flex: 1;
  padding: 14px 20px;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  font-family: var(--font-body);
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg), var(--shadow-tonal-violet-lg);
}

.btn-primary:active {
  background: var(--primary-hover);
  transform: scale(0.96);
  box-shadow: var(--shadow-sm);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--text-dimmed);
}

.btn-secondary:active {
  background: var(--border);
  transform: scale(0.96);
}

/* ============================================
   DRAG & DROP OVERLAY
   Full-viewport overlay when dragging files
   ============================================ */
.drag-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--tone-violet-50);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.drag-overlay.visible {
  display: flex;
  animation: drag-overlay-in 0.15s var(--ease-out);
}

@keyframes drag-overlay-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(2px);
  }
}

.drag-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 64px;
  background: var(--card);
  border: 3px dashed var(--tone-violet);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), var(--shadow-tonal-violet);
  font-family: var(--font-body);
  animation: drag-content-pulse 1.5s var(--ease-in-out) infinite;
}

@keyframes drag-content-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: var(--shadow-lg), var(--shadow-tonal-violet);
  }
  50% {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg), 0 12px 36px rgba(124, 92, 252, 0.30);
  }
}

.drag-overlay-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tone-violet-50);
  border-radius: var(--r-pill);
  color: var(--tone-violet-700);
}

.drag-overlay-icon svg {
  width: 40px;
  height: 40px;
}

.drag-overlay-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}

.drag-overlay-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Hide hint when no photo loaded yet */
body:not(.has-image) .drag-overlay-hint {
  display: none;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .drag-overlay {
    background: rgba(0, 0, 0, 0.07);
  }

  .drag-overlay-content {
    background: var(--bg-secondary);
    border-color: var(--primary);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .drag-overlay-content {
    padding: 32px 40px;
    margin: 16px;
  }

  .drag-overlay-icon {
    width: 64px;
    height: 64px;
  }

  .drag-overlay-icon svg {
    width: 32px;
    height: 32px;
  }

  .drag-overlay-text {
    font-size: 1.25rem;
  }
}

/* ============================================
   EDIT CARD - Premium unified input
   ============================================ */
.edit-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-md);
  transition: border-color 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard);
}

.edit-card:focus-within {
  border-color: color-mix(in srgb, var(--tone-violet) 22%, transparent);
  box-shadow: var(--shadow-md), 0 0 0 4px var(--tone-violet-50);
}

/* Post-upload attention animation - draws user to prompt input */
.edit-card.attention {
  animation: edit-card-attention 1.5s var(--ease-standard);
}

@keyframes edit-card-attention {
  0% {
    border-color: var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
  }
  25% {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: scale(1.01);
  }
  50% {
    border-color: var(--primary);
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.08), 0 4px 24px rgba(0, 0, 0, 0.1);
    transform: scale(1.01);
  }
  75% {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06);
    transform: scale(1.005);
  }
  100% {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--glow), 0 4px 16px rgba(0, 0, 0, 0.06);
    transform: scale(1);
  }
}

/* ============================================
   PROMPT SUGGESTIONS - Post-upload guidance
   Shows clickable example prompts to help users
   understand what to type
   ============================================ */
.prompt-english-hint {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-top: 4px;
  padding-left: 2px;
  opacity: 0.8;
}

.prompt-english-hint.hidden {
  display: none !important;
}

.prompt-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 4px;
}

.prompt-suggestions.hidden {
  display: none !important;
}

@keyframes prompt-chip-appear {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.prompt-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  min-height: 36px; /* tappable on mobile */
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  white-space: nowrap;
  /* Staggered entrance — JS sets --stagger-index on each chip so they cascade
     in one after another instead of all appearing at once. */
  opacity: 0;
  animation: prompt-chip-appear 0.32s var(--ease-standard) forwards;
  animation-delay: calc(var(--stagger-index, 0) * 110ms);
}

.prompt-chip:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.prompt-chip:active {
  transform: translateY(0);
  background: rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  .prompt-chip {
    padding: 6px 12px;
    font-size: 12.5px;
    flex-shrink: 0;
  }

  /* Slim persistent chip rail ABOVE the prompt input — single-line
     horizontal scroll, fade-edge mask, no hide-on-type. */
  .prompt-suggestions {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -12px 8px;
    padding: 2px 12px;
    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
  }

  .prompt-suggestions::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 380px) {
  .prompt-chip {
    padding: 5px 10px;
    font-size: 11.5px;
    min-height: 32px;
  }
}

/* Task prompts guidance — used by suggestions.js for reference-image tasks */
.task-prompts-guidance .guidance-icon {
  flex-shrink: 0;
  font-size: 16px;
}

.task-prompts-guidance .guidance-text {
  line-height: 1.4;
}

/* ============================================
   INLINE EMAIL GATE — appears below the result toolbar on Save click for
   anonymous free-tier users in the save-email-gate treatment. No modal,
   no overlay; slides into the existing flow.
   ============================================ */
.save-email-inline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px auto 12px;
  max-width: 540px;
  padding: 12px 14px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  animation: save-email-inline-in 0.25s var(--ease-out);
}

.save-email-inline.hidden {
  display: none;
}

@keyframes save-email-inline-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.save-email-inline-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
  padding-left: 2px;
}

.save-email-inline-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: nowrap;
}

.save-email-inline-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  font-size: 0.9rem;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.save-email-inline-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.08);
}

.save-email-inline-input[aria-invalid="true"] {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.save-email-inline-submit {
  flex: 0 0 auto;
  padding: 9px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  background: var(--primary);
  color: white;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.save-email-inline-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.save-email-inline-submit:active { transform: scale(0.97); }

.save-email-inline-submit[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.save-email-inline-skip {
  flex: 0 0 auto;
  padding: 9px 12px;
  font-size: 0.85rem;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.save-email-inline-skip:hover {
  color: var(--text);
}

.save-email-inline-submit:disabled,
.save-email-inline-submit[disabled] {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}

.save-email-inline-row.hidden { display: none; }

.save-email-inline-sent {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  animation: save-email-inline-in 0.2s var(--ease-out);
}

.save-email-inline-sent.hidden { display: none; }

.save-email-inline-sent-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.save-email-inline-sent-text strong {
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 480px) {
  .save-email-inline { padding: 10px 12px; }
  .save-email-inline-input { font-size: 0.85rem; padding: 8px 10px; }
  .save-email-inline-submit { padding: 8px 14px; font-size: 0.8rem; }
  .save-email-inline-skip { padding: 8px; font-size: 0.8rem; }
  .save-email-inline-sent { font-size: 0.85rem; }
}

/* ============================================
   MTV CROSS-SELL CARD — appears post-edit below the result toolbar
   ============================================ */
.mtv-cross-sell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px auto 16px;
  padding: 12px 16px;
  max-width: 540px;
  border-radius: 16px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  animation: mtv-cross-sell-in 0.35s var(--ease-out);
}

.mtv-cross-sell.hidden {
  display: none;
}

@keyframes mtv-cross-sell-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.mtv-cross-sell-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-dimmed);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s;
}

.mtv-cross-sell-close:hover {
  background: var(--border-subtle);
  color: var(--text);
}

.mtv-cross-sell-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--border-subtle);
}

.mtv-cross-sell-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mtv-cross-sell-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  color: white;
  pointer-events: none;
}

.mtv-cross-sell-body {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 8px;
}

.mtv-cross-sell-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.mtv-cross-sell-sub {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--text-tertiary);
  line-height: 1.35;
}

.mtv-cross-sell-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  min-height: 38px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: var(--primary);
  color: white;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mtv-cross-sell-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mtv-cross-sell-cta:active {
  transform: scale(0.96);
}

.mtv-cross-sell-cta[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

@media (max-width: 480px) {
  .mtv-cross-sell {
    padding: 10px 12px;
    gap: 10px;
  }
  .mtv-cross-sell-thumb { width: 48px; height: 48px; }
  .mtv-cross-sell-title { font-size: 0.9rem; }
  .mtv-cross-sell-sub { font-size: 0.75rem; }
  .mtv-cross-sell-cta { padding: 8px 12px; font-size: 0.78rem; }
}

/* ============================================
   RESULT TOOLBAR - Compact pill buttons (post-edit)
   ============================================ */
.result-toolbar {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0 12px;
  max-width: 100%;
}

.result-toolbar.visible {
  display: flex;
  animation: result-toolbar-in 0.25s var(--ease-out);
}

@keyframes result-toolbar-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.result-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  min-height: 36px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.15s var(--ease-standard);
  border: none;
  white-space: nowrap;
}

.result-pill svg {
  flex-shrink: 0;
}

.result-pill-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.result-pill-primary:active {
  transform: scale(0.95);
}

.result-pill-primary:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.result-pill-primary.saving {
  pointer-events: none;
  opacity: 0.7;
  position: relative;
}

.result-pill-primary.saving::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: saving-spin 0.6s linear infinite;
  margin-left: 6px;
  vertical-align: middle;
}

@keyframes saving-spin {
  to { transform: rotate(360deg); }
}

.result-pill-primary.saved,
.post-edit-btn-primary.saved {
  background: var(--success, #34D399);
  pointer-events: none;
}

/* Attention pulse on save button after reveal dismissal */
.result-pill-primary.save-attention {
  animation: save-attention-pulse 1.5s var(--ease-out);
}

@keyframes save-attention-pulse {
  0%   { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transform: scale(1); }
  15%  { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.25); transform: scale(1.08); }
  30%  { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.15); transform: scale(1); }
  50%  { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.2); transform: scale(1.06); }
  70%  { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transform: scale(1); }
  100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transform: scale(1); }
}

/* Immediate tap feedback — shown before paywall check resolves */
[data-action="save-image"],
[data-action="share-image"] {
  transition: transform 0.1s ease, opacity 0.1s ease;
}

[data-action="save-image"].tapped,
[data-action="share-image"].tapped {
  transform: scale(0.95);
  opacity: 0.7;
}

.result-pill-secondary {
  background: var(--bg-secondary);
  color: var(--text);
  border: 1px solid var(--border);
}

.result-pill-secondary:active {
  transform: scale(0.95);
  background: var(--bg);
}

.result-pill-secondary:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.result-pill:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* MTV cross-promo as a sibling action — same shape/size as secondary pills,
   but with a gradient icon ring so it reads as a destination, not a doc-action.
   Lives inside the result-toolbar so it inherits the post-edit visibility
   gate (toolbar is hidden until has-result). Critically NOT a banner — it
   doesn't intercept the path between edit reveal and the paywall. */
.result-pill-mtv {
  background: var(--bg-secondary);
  color: var(--text);
  border: 1px solid var(--border);
}
.result-pill-mtv:hover {
  background: color-mix(in srgb, #8b5cf6 7%, var(--bg-secondary));
  border-color: color-mix(in srgb, #8b5cf6 28%, var(--border));
  transform: translateY(-1px);
}
.result-pill-mtv:active {
  transform: scale(0.95);
}
.result-pill-mtv-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(139, 92, 246, 0.32);
  transition: transform 0.18s var(--ease-standard);
}
.result-pill-mtv:hover .result-pill-mtv-icon {
  transform: translateX(1px) scale(1.04);
}
.result-pill-mtv.mtv-cta-busy {
  pointer-events: none;
  opacity: 0.75;
}
.result-pill-mtv.mtv-cta-busy .result-pill-mtv-icon {
  animation: result-pill-mtv-spin 0.8s linear infinite;
}
@keyframes result-pill-mtv-spin {
  to { transform: rotate(360deg); }
}

/* Mobile post-edit toolbar — keep it visually adjacent to the result image
   and on one row so Save/Copy/Share are immediately discoverable rather
   than wrapped or dwarfed by other post-edit UI. */
@media (max-width: 768px) {
  body.has-result .result-toolbar.visible {
    margin: -14px -14px 4px;
    padding: 12px 14px;
    background: var(--surface-elevated, var(--bg));
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    gap: 6px;
    scrollbar-width: none;
  }
  body.has-result .result-toolbar.visible::-webkit-scrollbar {
    display: none;
  }
  body.has-result .result-toolbar.visible .result-pill {
    flex-shrink: 0;
    min-height: 42px;
  }
  body.has-result .result-toolbar.visible .result-pill-primary {
    padding: 10px 18px;
    font-size: 0.88rem;
  }
}

/* Very small screens: collapse secondary pills to icon-only so all 5 actions
   fit in one row. Save keeps its label so the primary CTA still reads. */
@media (max-width: 480px) {
  .result-pill {
    padding: 8px 12px;
  }
  body.has-result .result-toolbar.visible .result-pill-secondary span,
  body.has-result .result-toolbar.visible .result-pill-mtv span:not(.result-pill-mtv-icon) {
    display: none;
  }
  body.has-result .result-toolbar.visible .result-pill-secondary,
  body.has-result .result-toolbar.visible .result-pill-mtv {
    padding: 0;
    width: 42px;
    height: 42px;
    justify-content: center;
    border-radius: 50%;
  }
}

.post-edit-nudge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 0 4px;
  animation: post-edit-nudge-in 0.3s var(--ease-out);
}

@keyframes post-edit-nudge-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.post-edit-nudge[hidden] {
  display: none;
}

.post-edit-nudge-text {
  font-size: 0.78rem;
  color: var(--text-muted, #888);
}

.post-edit-nudge-cta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s;
}

.post-edit-nudge-cta:hover {
  opacity: 0.75;
}

.edit-card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================
   PROMPT INPUT - Clean textarea
   ============================================ */
.prompt-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
  resize: none;
  min-height: 72px;
  /* 240px ~ 10 lines at 14.5px/1.55 — long verbose prompts stay fully visible
     before internal scroll kicks in. Was 160px which clipped 100+ char prompts. */
  max-height: 240px;
  overflow-y: auto;
  line-height: 1.55;
  cursor: text;
  transition: background-color 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard), border-color 0.2s var(--ease-standard);
}

.prompt-input:hover {
  border-color: color-mix(in srgb, var(--text) 12%, transparent);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.prompt-input:focus {
  outline: none;
  background: var(--card);
  border-color: var(--tone-violet);
  box-shadow: 0 0 0 4px var(--tone-violet-50);
}

.prompt-input:focus {
  outline: none;
  background: var(--bg);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.prompt-input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
  transition: opacity 0.2s var(--ease-standard);
}

.prompt-input:focus::placeholder {
  opacity: 0.4;
}

.prompt-wrapper {
  position: relative;
  width: 100%;
  cursor: text;
}

/* Clear button — surfaces ONLY when textarea has content. Driven by
   :placeholder-shown (CSS-only, no JS class) so the button can't get stuck
   visible when programmatic value-sets bypass updateCharCount(). Selector
   uses the sibling combinator since #promptInput is followed by the clear
   button inside .prompt-wrapper. 24×24 hit target, top-right so it doesn't
   conflict with the char-count pill. */
.prompt-clear-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.16s var(--ease-standard),
              color 0.16s var(--ease-standard),
              border-color 0.16s var(--ease-standard),
              transform 0.12s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}

/* Show only when the textarea is NOT showing its placeholder, i.e. has text. */
.prompt-input:not(:placeholder-shown) ~ .prompt-clear-btn {
  display: inline-flex;
}

.prompt-clear-btn:hover {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 16%, transparent);
}

.prompt-clear-btn:active {
  transform: scale(0.92);
}

@media (hover: none) and (pointer: coarse) {
  /* Larger tap target on mobile — visible glyph stays 14px but hit area grows. */
  .prompt-clear-btn {
    width: 32px;
    height: 32px;
    top: 6px;
    right: 6px;
  }
}

.prompt-char-count {
  position: absolute;
  right: 12px;
  bottom: 6px;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.prompt-char-count.visible {
  opacity: 0.6;
}

.prompt-char-count.warning {
  color: #f59e0b;
  opacity: 1;
}

.prompt-char-count.danger {
  color: #ef4444;
  opacity: 1;
}

/* ============================================
   REFERENCE PHOTO SECTION
   ============================================ */
.reference-photo-section {
  margin-top: 12px;
  width: 100%;
}

.add-reference-btn {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--tone-violet-50);
  color: var(--text);
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: background 160ms var(--ease-standard);
}
.add-reference-btn:hover {
  background: color-mix(in srgb, var(--tone-violet) 10%, transparent);
}
.add-reference-btn:active { opacity: 0.8; }

.add-reference-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--tone-violet);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-reference-icon svg { width: 16px; height: 16px; stroke-width: 1.8; }

.add-reference-text {
  flex: 1;
  min-width: 0;
}
.add-reference-label {
  display: block;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.add-reference-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--tone-violet-700);
}
.add-reference-plus svg { width: 16px; height: 16px; stroke-width: 2.4; }

.reference-preview {
  display: none;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 12px;
  box-shadow: var(--shadow-sm);
}
.reference-preview.visible { display: block; }
.reference-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 0;
}
.reference-preview-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tone-violet-700);
}
.reference-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  min-height: 32px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 160ms var(--ease-standard), color 160ms var(--ease-standard);
}
.reference-remove-btn:hover { color: var(--tone-rose-700); background: var(--tone-rose-50); }
.reference-remove-btn svg { width: 14px; height: 14px; }

.reference-preview-content {
  padding: 8px 14px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.reference-preview-content img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--bg-subtle);
}
.reference-preview-hint {
  flex: 1;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
  font-weight: 500;
}

.reference-preview.visible ~ .add-reference-btn,
.reference-photo-section:has(.reference-preview.visible) .add-reference-btn {
  display: none;
}
body.has-two-photos .add-reference-btn { display: none; }
body.has-two-photos .reference-preview { display: block; }

@media (max-width: 768px) {
  .reference-photo-section { margin-top: 8px; }
  .reference-preview-content { padding: 8px 12px 12px; gap: 10px; }
  .reference-preview-content img { width: 48px; height: 48px; }
  .reference-preview-hint { font-size: 12.5px; }
}

/* ============================================
   EDIT COST INDICATOR
   ============================================ */
.edit-cost-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  font-size: 12px;
  color: var(--text-muted);
}

.edit-cost-indicator .cost-text {
  display: flex;
  align-items: center;
  gap: 4px;
}

.edit-cost-indicator.free .cost-text {
  color: #10b981;
  font-weight: 500;
}

.edit-cost-indicator.pro .cost-text {
  color: var(--primary);
}

.edit-cost-indicator.insufficient .cost-text {
  color: #f59e0b;
  font-weight: 500;
}

/* Edit button needs-credits state — dark fill matches default .edit-btn;
   the "Top up — keep editing" pill above carries the visual cue, not the button. */
.edit-btn.needs-credits {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 50%, #1a1a2e 100%);
  background-size: 200% 200%;
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
}

.edit-btn.needs-credits:hover {
  background: linear-gradient(135deg, #3d3d58 0%, #1a1a2e 50%, #151528 100%);
  box-shadow: var(--shadow-lg), 0 10px 28px rgba(124, 92, 252, 0.36);
}

/* Countdown waiting state - muted but still tappable */
.edit-btn.countdown-waiting {
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: pointer;
  animation: none;
  box-shadow: var(--shadow-sm);
}

.edit-btn.countdown-waiting:hover {
  background: var(--bg-subtle);
  box-shadow: var(--shadow-md);
}

.edit-cost-caption {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(26, 26, 46, 0.05);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  letter-spacing: 0.005em;
  text-align: left;
  margin-top: 0;
  transition: background 200ms var(--ease-standard), color 200ms var(--ease-standard);
}
.edit-cost-caption:empty { display: none; }
.edit-cost-caption.free {
  background: var(--tone-emerald-50);
  color: var(--tone-emerald-700);
}
.edit-cost-caption.warning {
  background: var(--tone-amber-50);
  color: var(--tone-amber-700);
}
.edit-cost-caption.pro-cost {
  background: var(--tone-violet-50);
  color: var(--tone-violet-700);
  font-style: normal;
}

/* ============================================
   QUALITY TOGGLE
   ============================================ */
.quality-toggle {
  display: inline-flex;
  font-family: var(--font-body);
}
.toggle-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
  box-sizing: border-box;
  background: var(--bg-secondary);
  border-radius: var(--r-pill);
  padding: 4px;
  border: 1px solid var(--hairline);
}
/* JS toggles .right on this for slide animation; visual replaced by .toggle-option.active background. */
.toggle-indicator { display: none; }

.toggle-option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  min-height: 34px;
  border: none;
  background: transparent;
  color: var(--text-dimmed);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color 200ms var(--ease-standard),
              background 240ms var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.toggle-option > svg { width: 14px; height: 14px; stroke-width: 2.4; flex-shrink: 0; transition: transform 240ms var(--ease-standard); }
.toggle-option:hover { color: var(--text-muted); }
.toggle-option.active {
  color: var(--text);
  background: var(--card);
  box-shadow: 0 1px 3px rgba(20, 20, 40, 0.10), 0 1px 1px rgba(20, 20, 40, 0.05);
}
.toggle-option#standardOption.active { color: var(--tone-sky-700); }
.toggle-option#standardOption.active > svg { color: var(--tone-sky); }
.toggle-option#proOption.active { color: var(--tone-violet-700); }
.toggle-option#proOption.active > svg { color: var(--tone-violet); transform: rotate(8deg) scale(1.08); }

.toggle-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  margin-left: 1px;
  background: var(--tone-violet-50, color-mix(in srgb, var(--tone-violet) 16%, transparent));
  color: var(--tone-violet-700);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 4px;
  line-height: 1.2;
}
.toggle-option:not(.active) .toggle-badge { opacity: 0.55; }

.toggle-option#proOption.insufficient { opacity: 0.5; cursor: not-allowed; }

/* Pro is paywalled for free users — keep the HD badge visible and show an
   inline lock SVG (.toggle-lock, in the markup) after it. Click is intercepted
   in setQuality() and routed to the buy sheet, so the option stays clickable
   but never enters the active state. */
.toggle-option#proOption > .toggle-lock { display: none; }
.toggle-option#proOption.locked > .toggle-lock {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 3px;
  color: var(--tone-violet-700);
  flex-shrink: 0;
}
.toggle-option#proOption.locked > svg:first-of-type { opacity: 0.55; }

/* Ambient hint that Pro is available (user has >= 2 credits, Pro not currently selected).
   Slow sparkle pulse on the icon + faint violet color tint, with long pause between cycles
   so it reads as "alive, available" rather than constant motion. */
.toggle-option#proOption.available:not(.active) { color: var(--tone-violet-700); }
.toggle-option#proOption.available:not(.active) > svg {
  color: var(--tone-violet);
  animation: pro-sparkle-hint 4.2s var(--ease-standard) infinite;
}
@keyframes pro-sparkle-hint {
  0%, 70%, 100% { transform: rotate(0) scale(1); opacity: 0.85; }
  78% { transform: rotate(-6deg) scale(1.14); opacity: 1; }
  86% { transform: rotate(6deg) scale(1.14); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .toggle-option#proOption.available:not(.active) > svg { animation: none; }
}

.toggle-cost {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.6;
  margin-left: 2px;
  line-height: 1;
}
.toggle-option.active .toggle-cost { opacity: 0.85; }

/* ============================================
   QUALITY TOGGLE WRAPPER
   ============================================ */
.quality-toggle-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  position: relative;
  z-index: 20;
  min-width: 0;
}
.controls-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  width: 100%;
}
/* Content-width groups — Mode has 2 buttons, Versions has 4. Letting them
   size to their content keeps Mode from over-stretching and visually
   encroaching on Versions. align-items: center on the row keeps the pill
   bars vertically aligned even if heights drift. */
.controls-row > .control-group {
  flex: 0 0 auto;
  min-width: 0;
}
.controls-row .quality-toggle,
.controls-row .toggle-track,
.controls-row .versions-toggle {
  width: auto;
}
.controls-row .toggle-option,
.controls-row .versions-option {
  flex: 0 0 auto;
  min-width: 0;
}
/* Wrapper must span its parent so the 50/50 split has actual width to
   divide. Some legacy media queries shrink the wrapper to content; this
   ensures it always fills the available row. */
.quality-toggle-wrapper { width: 100%; }

/* Each toggle group: pills on top, mini caption below. The captions sit at
   the same baseline so Quality and Versions look like a matched pair. */
.control-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
}
.control-group[hidden] { display: none; }
.control-group-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  user-select: none;
  line-height: 1;
}

/* ============================================
   VERSIONS TOGGLE (1 / 2 / 3 / 4 with glyphs)
   ============================================ */
.versions-toggle {
  display: inline-flex;
  align-items: center;
  height: 44px;
  box-sizing: border-box;
  background: var(--bg-secondary);
  border-radius: var(--r-pill);
  padding: 4px;
  border: 1px solid var(--hairline);
}
.versions-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 5px 9px;
  border: none;
  background: transparent;
  color: var(--text-dimmed);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color 200ms var(--ease-standard),
              background 240ms var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
/* Numbers are redundant — the glyph (1 dot, 2 dots, 3 dots, 2×2 grid) already
   shows count, and including numbers makes Mode+Versions overflow the
   ~353px-wide editor section on desktop. Glyph-only keeps both pills
   content-width and the row centerable. */
.versions-num { display: none; }
.versions-option:hover { color: var(--text-muted); }
.versions-option.active {
  color: var(--text);
  background: var(--card);
  box-shadow: 0 1px 3px rgba(20, 20, 40, 0.10), 0 1px 1px rgba(20, 20, 40, 0.05);
}
.versions-option.unaffordable {
  opacity: 0.4;
  cursor: pointer;
}
.versions-option.unaffordable:hover {
  opacity: 0.55;
  color: var(--text-dimmed);
}

/* Paywalled state: free users (no credits, no subscription) see all four
   options but 2/3/4 are locked. Click is routed to the buy sheet by
   setVersions(). The whole toggle gets a faint dashed look so the lock
   reads as a feature gate, not "broken". */
.versions-toggle.is-paywalled {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--hairline) 100%, transparent);
}
.versions-option.locked {
  opacity: 0.55;
  cursor: pointer;
}
.versions-option.locked .versions-glyph i { opacity: 0.45; }
.versions-option.locked::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b6bdc' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.95;
}
.versions-option.locked:hover { opacity: 0.75; }

/* Glyph: a tiny grid that previews how many results you'll get.
   1 = single tile, 2 = pair, 3 = trio, 4 = 2x2 grid. Renders with CSS Grid
   over inline <i> elements so we don't ship 4 SVGs. */
.versions-glyph {
  display: grid;
  width: 14px;
  height: 14px;
  gap: 2px;
  flex-shrink: 0;
}
.versions-glyph i {
  display: block;
  background: currentColor;
  border-radius: 1.5px;
  opacity: 0.55;
}
.versions-option.active .versions-glyph i { opacity: 1; }
.versions-glyph--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.versions-glyph--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.versions-glyph--3 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; }
.versions-glyph--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* ============================================
   VERSIONS STRIP (post-edit thumbs for batches)
   ============================================ */
.versions-strip {
  margin-top: 24px;
  margin-bottom: 6px;
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}
.versions-strip[hidden] { display: none; }
.versions-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.versions-strip-title {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.versions-strip-title--loading {
  color: var(--tone-violet, #7C3AED);
}
.versions-strip-title--loading::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  animation: versions-strip-title-pulse 1.4s ease-in-out infinite;
}
@keyframes versions-strip-title-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}
.versions-strip-saved-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--tone-emerald-700, #047857);
  letter-spacing: 0.005em;
}
.versions-strip-saved-hint:empty { display: none; }

/* ============================================
   VERSIONS FEATURE ANNOUNCEMENT MODAL
   ============================================ */
.versions-announcement {
  position: relative;
  text-align: center;
  padding-top: 28px;
}
.versions-announcement-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms var(--ease-standard);
}
.versions-announcement-close:hover { background: var(--bg-subtle); }
.versions-announcement-tag {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 14px;
  background: var(--text);
  color: var(--card);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 999px;
}
.versions-announcement-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--hairline);
}
.versions-announcement-thumb {
  aspect-ratio: 1;
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tone-violet) 14%, var(--bg-subtle)), var(--bg-subtle));
  border: 1px solid var(--hairline);
}
.versions-announcement-thumb:nth-child(1) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--tone-sky) 18%, var(--bg-subtle)), var(--bg-subtle));
}
.versions-announcement-thumb:nth-child(2) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--tone-emerald, #6ee7b7) 18%, var(--bg-subtle)), var(--bg-subtle));
}
.versions-announcement-thumb:nth-child(4) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--tone-amber, #fcd34d) 18%, var(--bg-subtle)), var(--bg-subtle));
}
.versions-announcement-meta {
  margin-top: 10px;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dimmed);
  letter-spacing: 0.005em;
}
.versions-strip-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.versions-strip-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--bg-subtle);
  cursor: pointer;
  transition: border-color 160ms var(--ease-standard), transform 160ms var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.versions-strip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.versions-strip-thumb:hover { transform: translateY(-1px); }
.versions-strip-thumb.active { border-color: var(--text); }
.versions-strip-thumb.loading {
  background: linear-gradient(110deg, var(--bg-subtle) 8%, var(--hairline) 18%, var(--bg-subtle) 33%);
  background-size: 200% 100%;
  animation: versions-shimmer 1.4s linear infinite;
}
.versions-strip-thumb.failed,
.versions-strip-thumb.broken {
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dimmed);
  font-size: 11px;
  font-family: var(--font-body);
  cursor: default;
}
.versions-strip-thumb.broken::before {
  content: '⊘';
  font-size: 18px;
}
.versions-strip-thumb.failed::before {
  content: '⚠';
  font-size: 18px;
  line-height: 1;
  margin-bottom: 2px;
}
.versions-strip-thumb.failed > .versions-strip-thumb-save { display: none; }
@keyframes versions-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.versions-strip-thumb-saved {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: var(--tone-emerald-700, #047857);
  color: #fff;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.versions-strip-thumb.saved .versions-strip-thumb-saved { display: inline-flex; }
.versions-strip-thumb-saved svg { width: 11px; height: 11px; }
.versions-strip-thumb-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 1px 6px;
  background: rgba(20, 20, 40, 0.72);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

/* Original thumb — visually distinct from version thumbs so users read it
   as "back to source" not "another result". Dashed border + muted tone. */
.versions-strip-thumb--original {
  border-style: dashed;
  border-color: var(--hairline);
  margin-right: 4px;
  position: relative;
}
.versions-strip-thumb--original::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.versions-strip-thumb--original.active {
  border-style: solid;
  border-color: var(--text);
}
.versions-strip-thumb--original.active::after { display: none; }
.versions-strip-thumb--original .versions-strip-thumb-badge {
  background: var(--card);
  color: var(--text-muted);
  border: 1px solid var(--hairline);
}

/* Phone widths: tighten button padding so Mode + Versions stay
   comfortably one row at iPhone-SE width. Version numbers are
   already hidden globally (see .versions-num rule above). */
@media (max-width: 480px) {
  .controls-row { gap: 10px; }
  .versions-option { padding: 5px 7px; gap: 0; }
}
@media (max-width: 380px) {
  .controls-row { gap: 8px; }
  .toggle-option { padding: 7px 12px; gap: 5px; }
  .versions-strip-thumb { width: 72px; height: 72px; }
}

/* ============================================
   FOOTER REFERENCE ICON BUTTON (mobile only)
   ============================================ */
.footer-ref-btn {
  display: none;
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bg-subtle);
  color: var(--tone-violet-700, var(--text));
  cursor: pointer;
  transition: background 160ms var(--ease-standard),
              border-color 160ms var(--ease-standard),
              transform 160ms var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.footer-ref-btn > svg {
  width: 22px;
  height: 22px;
  display: block;
  margin: 0 auto;
}
.footer-ref-btn:hover {
  background: var(--tone-violet-50);
  border-color: color-mix(in srgb, var(--tone-violet) 25%, transparent);
}
.footer-ref-btn:active { transform: scale(0.96); }
.footer-ref-plus {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tone-violet, #7C5CFC);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--card, #fff);
  box-shadow: 0 1px 3px rgba(20, 20, 40, 0.18);
}
.footer-ref-plus svg { width: 9px; height: 9px; }
body.has-two-photos .footer-ref-btn { display: none !important; }

/* Shown when Pro is selected but the user has < 2 credits. */
.pro-upsell {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--tone-violet-50);
  color: var(--tone-violet-700);
  border: 1px solid color-mix(in srgb, var(--tone-violet) 18%, transparent);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  transition: background 200ms var(--ease-standard),
              transform 160ms var(--ease-standard),
              box-shadow 240ms var(--ease-standard);
  margin-top: 6px;
}
.pro-upsell.visible { display: inline-flex; }
.pro-upsell:hover {
  background: var(--tone-violet-100);
  transform: translateY(-1px);
  box-shadow: var(--shadow-tonal-violet);
}
.pro-upsell-text { color: inherit; font-weight: 600; }
.pro-upsell-arrow { color: inherit; font-weight: 700; }

.quality-help-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--ease-standard);
  flex-shrink: 0;
}

.quality-help-btn:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--primary);
}

.quality-help-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), var(--shadow-tonal-violet);
  z-index: 9999;
  width: 320px;
  max-width: calc(100vw - 32px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.97);
  transition: opacity 0.2s var(--ease-standard), visibility 0.2s var(--ease-standard), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  font-family: var(--font-body);
}

.quality-help-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.quality-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
}

.quality-help-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.quality-help-close:hover {
  color: var(--text);
}

.quality-help-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quality-help-option {
  padding: 14px;
  background: var(--bg-subtle);
  border-radius: 12px;
}

.quality-help-option.smart {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.04) 0%, rgba(26, 26, 46, 0.02) 100%);
  border: 1px solid rgba(26, 26, 46, 0.05);
}

.quality-help-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.quality-help-cost {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 10px;
}

.quality-help-option.smart .quality-help-title {
  color: var(--primary);
}

.quality-help-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.quality-help-examples {
  margin: 0;
  padding-left: 16px;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.quality-help-examples li {
  margin-bottom: 2px;
}

/* Mobile: center tooltip */
@media (max-width: 480px) {
  .quality-help-tooltip {
    position: fixed;
    bottom: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.97);
    width: calc(100vw - 32px);
    max-width: 360px;
    opacity: 0;
    visibility: hidden;
  }

  .quality-help-tooltip.visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible;
  }
}

/* ============================================
   EDIT BUTTON - Primary action
   ============================================ */
.edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  border: none;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 50%, #1a1a2e 100%);
  background-size: 200% 200%;
  color: white;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard);
  min-height: 50px;
  flex-shrink: 0;
  letter-spacing: 0.005em;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  animation:
    edit-btn-gradient 4s var(--ease-in-out) infinite,
    edit-btn-glow 3s var(--ease-in-out) infinite;
}

@keyframes edit-btn-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes edit-btn-glow {
  0%, 100% {
    box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  }
  50% {
    box-shadow: var(--shadow-lg), 0 8px 28px rgba(124, 92, 252, 0.32);
  }
}

/* Shimmer sweep on hover */
.edit-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s var(--ease-standard);
  pointer-events: none;
}

.edit-btn:hover::after {
  left: 100%;
}

.edit-btn:hover {
  transform: translateY(-2px);
  animation: none;
  background: linear-gradient(135deg, #3d3d58 0%, #1a1a2e 50%, #151528 100%);
  box-shadow: var(--shadow-lg), 0 10px 28px rgba(124, 92, 252, 0.36);
}

.edit-btn:active {
  /* 60ms settle: physical press should ease in, not snap — adds tactile weight */
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out;
  transform: translateY(0) scale(0.98);
  animation: none;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Keyboard focus ring — visible without being garish.
   Dark ring matches --primary (#1a1a2e) design language; offset creates air around the button.
   :focus-visible scopes to keyboard navigation only — mouse users never see this. */
.edit-btn:focus-visible {
  outline: 2.5px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.15),
    0 0 0 5px rgba(255, 255, 255, 0.12);
}

.edit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  animation: none;
}

.edit-btn:disabled::after {
  display: none;
}

/* Submitting state — button is disabled during API call but communicates active work,
   not "broken". Slow violet pulse matches Bug B (onboarding-initializing) and Bug D-1
   (dropzone uploading) visual language: the system is alive and doing something.
   opacity stays lower than idle (0.8 vs 1.0) to signal "locked" without feeling dead. */
.edit-btn.submitting {
  opacity: 0.82;
  cursor: wait;
  animation: edit-btn-submitting-pulse 1.8s ease-in-out infinite;
}

.edit-btn.submitting::after {
  /* Travelling shimmer identical rhythm to onboarding-initializing — consistent motion language.
     display:block overrides the .edit-btn:disabled::after { display:none } rule so the shimmer
     shows even while the button is natively disabled. */
  display: block;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(255, 255, 255, 0.18) 55%,
    transparent 100%
  );
  animation: edit-btn-submitting-shimmer 1.6s ease-in-out infinite;
  transition: none;
}

@keyframes edit-btn-submitting-pulse {
  0%, 100% {
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.15),
      0 1px 3px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow:
      0 4px 22px rgba(139, 124, 246, 0.28),
      0 0 36px rgba(139, 124, 246, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
}

@keyframes edit-btn-submitting-shimmer {
  0%   { left: -110%; }
  60%  { left: 110%; }
  100% { left: 110%; }
}

@media (prefers-reduced-motion: reduce) {
  .edit-btn,
  .edit-btn.submitting,
  .post-edit-btn-primary {
    animation: none;
  }
  .edit-btn.submitting {
    opacity: 0.7;
  }
  .edit-btn.submitting::after {
    animation: none;
  }
}

/* Highlight animation for quick edit flow - draws attention to confirm */
.edit-btn.highlight {
  animation: editBtnHighlight 1.5s var(--ease-standard);
}

/* Onboarding-initializing state — shown while async onboarding setup is in flight.
   Bug B fix: PostHog session 019d61eb — rage-clicks on Edit during init window.
   Keeps the button visually alive (not broken) with a soft travelling shimmer,
   queues one click, snaps back to full state once onboarding engine is ready. */
.edit-btn.onboarding-initializing {
  cursor: wait;
  animation:
    edit-btn-gradient 4s var(--ease-in-out) infinite,
    edit-btn-glow 3s var(--ease-in-out) infinite;
  pointer-events: auto; /* keep clickable — JS queues the click */
}

/* Shimmer sweep for the initializing state (overrides default ::after transition) */
.edit-btn.onboarding-initializing::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 45%,
    rgba(255, 255, 255, 0.22) 55%,
    transparent 100%
  );
  animation: edit-btn-init-shimmer 1.4s ease-in-out infinite;
  transition: none;
}

@keyframes edit-btn-init-shimmer {
  0%   { left: -110%; }
  60%  { left: 110%; }
  100% { left: 110%; }
}


@keyframes editBtnHighlight {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  }
  20% {
    transform: scale(1.06);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.22);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  }
}

.edit-btn-text {
  font-weight: 700;
  min-width: 0;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.edit-btn-icon {
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-standard);
}

.edit-btn:hover .edit-btn-icon {
  transform: rotate(15deg) scale(1.1);
}

/* Free edit button state - keep standard purple styling */
.edit-btn.free-edit {
  /* Intentionally no override — stays on-brand */
}

/* ============================================
   REFERENCE IMAGE BUTTON
   ============================================ */
/* ============================================
   REFERENCE IMAGE CARD
   Mobile: Compact thumbnail strip (60px)
   Desktop: Larger preview in sidebar
   ============================================ */
.reference-card {
  display: none;
  flex-direction: column;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}

.reference-card.visible {
  display: flex;
}

.reference-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.reference-card-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.reference-card-label svg {
  color: var(--primary);
}

.reference-card-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s var(--ease-standard);
}

.reference-card-remove:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
}

.reference-card-image {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
}

.reference-card-image img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  display: block;
}

.reference-card-hint {
  font-size: 0.75rem;
  color: var(--text-dimmed);
  margin-top: 8px;
  text-align: center;
}

/* Tap hint for mobile */
.reference-card-tap-hint {
  display: none;
  font-size: 0.7rem;
  color: var(--text-dimmed);
  text-align: center;
  margin-top: 4px;
}

/* ============================================
   MOBILE: Compact thumbnail strip
   ============================================ */
@media (max-width: 768px) {
  .reference-card {
    flex-direction: row;
    align-items: center;
    padding: 8px 10px;
    gap: 10px;
    margin-bottom: 8px;
  }

  .reference-card-header {
    display: none; /* Hide header on mobile, use inline layout */
  }

  .reference-card-image {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 8px;
  }

  .reference-card-image img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  /* Mobile inline content */
  .reference-card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .reference-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .reference-card-title svg {
    width: 12px;
    height: 12px;
    color: var(--primary);
  }

  .reference-card-tap-hint {
    display: block;
    text-align: left;
    margin-top: 0;
  }

  .reference-card-hint {
    display: none; /* Hide verbose hint on mobile */
  }

  /* Remove button - inline on mobile */
  .reference-card-remove-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s var(--ease-standard);
  }

  .reference-card-remove-mobile:hover,
  .reference-card-remove-mobile:active {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
  }
}

/* Desktop: Show full card layout */
@media (min-width: 769px) {
  .reference-card-content {
    display: none;
  }

  .reference-card-remove-mobile {
    display: none;
  }
}

/* ============================================
   REFERENCE IMAGE OVERLAY (Mobile expand)
   Full-screen view when tapping thumbnail
   ============================================ */
.reference-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease-standard), visibility 0.2s var(--ease-standard);
}

.reference-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.reference-overlay-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
}

.reference-overlay-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
}

.reference-overlay-title svg {
  color: var(--primary);
}

.reference-overlay-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
  font-size: 1.5rem;
  transition: all 0.15s var(--ease-standard);
}

.reference-overlay-close:hover,
.reference-overlay-close:active {
  background: rgba(255, 255, 255, 0.2);
}

.reference-overlay-image {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  max-height: calc(100dvh - 140px);
  object-fit: contain;
  border-radius: 12px;
}

.reference-overlay-hint {
  position: absolute;
  bottom: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/* Add Reference Button */
.reference-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s var(--ease-standard);
  flex-shrink: 0;
  min-height: 44px; /* Touch target */
}

.reference-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--glow);
}

.reference-btn:active {
  transform: scale(0.98);
}

.reference-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.reference-btn-text {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Hide button when reference is visible */
.reference-card.visible ~ .edit-card .reference-btn {
  display: none;
}

/* ============================================
   PHOTO STRIP (Equal Photos Architecture)
   Horizontal strip of numbered photo thumbnails
   Positioned inside image-area, below the image-container
   ============================================ */
.photo-strip {
  display: none; /* Hidden until photo loaded */
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  flex-shrink: 0;
}

.photo-strip.visible {
  display: flex;
}

.photo-strip-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0;
}

/* Extra bottom padding for labels in two-photo mode */
.photo-strip.two-photos .photo-strip-scroll {
  padding-bottom: 20px;
}

.photo-strip-scroll::-webkit-scrollbar {
  display: none;
}

.photo-strip-item {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  box-shadow: var(--shadow-sm);
  background: var(--card);
  padding: 4px;
  transition: border-color 0.18s var(--ease-standard),
              box-shadow 0.18s var(--ease-standard),
              background 0.18s var(--ease-standard);
}

.photo-strip-item:hover {
  border-color: color-mix(in srgb, var(--tone-violet) 22%, transparent);
}

.photo-strip-item.active {
  border-color: var(--tone-violet);
  background: var(--tone-violet-50);
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
}

/* Number badge — primary photo (sky-blue) */
.photo-strip-badge {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--tone-sky);
  color: white;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border: 2px solid var(--card);
  box-shadow: 0 2px 6px rgba(56, 189, 248, 0.32);
}

.photo-strip-item.active .photo-strip-badge {
  background: var(--tone-sky);
}

/* Reference badge — violet to match the reference card */
.photo-strip-badge-ref {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0 5px;
  width: auto;
  min-width: 20px;
  background: var(--tone-violet);
  box-shadow: 0 2px 6px rgba(124, 92, 252, 0.32);
}

.photo-strip-item.active .photo-strip-badge-ref {
  background: var(--tone-violet);
}

/* Photo strip label (shown below thumbnail in two-photo mode) */
.photo-strip-label {
  display: none;
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.photo-strip.two-photos .photo-strip-label {
  display: block;
}

/* Thumbnail wrapper */
.photo-thumb-wrapper {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
}

.photo-thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Markers badge (shows marker count) */
.photo-markers-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: var(--orange, #F97316);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  display: none;
}

.photo-markers-badge:not(:empty) {
  display: block;
}

/* Remove button (on hover) */
.photo-remove-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid white;
  background: var(--error, #EF4444);
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 3;
  transition: transform 0.1s var(--ease-standard);
}

.photo-strip-item:hover .photo-remove-btn {
  display: flex;
}

.photo-remove-btn:hover {
  transform: scale(1.1);
}

/* ============================================
   PHOTO STRIP - Result Showing State
   When showing edit result, strip is view-only
   ============================================ */

/* Disable interaction styling when result is showing */
.has-result .photo-strip-item {
  cursor: default;
  opacity: 0.7;
}

.has-result .photo-strip-item:hover {
  border-color: transparent;
}

.has-result .photo-strip-item.active {
  opacity: 1;
  border-color: var(--primary);
}

/* Hide remove buttons when result is showing */
.has-result .photo-remove-btn {
  display: none !important;
}

/* Hide add button when result is showing */
.has-result .photo-strip-add {
  display: none !important;
}

/* View-only label on strip when result showing */
.photo-strip-view-label {
  display: none;
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 4px 8px;
  background: var(--bg-secondary);
  border-radius: 6px;
  white-space: nowrap;
}

.has-result .photo-strip.two-photos .photo-strip-view-label {
  display: block;
}

/* Shake animation for blocked interactions */
.photo-strip.shake,
.photo-strip-item.shake {
  animation: photo-strip-shake 0.4s var(--ease-out);
}

@keyframes photo-strip-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* Add photo button */
.photo-strip-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  border: 2px dashed color-mix(in srgb, var(--tone-violet) 32%, transparent);
  background: var(--tone-violet-50);
  color: var(--tone-violet-700);
  cursor: pointer;
  flex-shrink: 0;
  gap: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  transition: all 0.18s var(--ease-standard);
}

.photo-strip-add:hover {
  border-color: var(--tone-violet);
  border-style: solid;
  background: var(--tone-violet-100);
  transform: translateY(-1px);
  box-shadow: var(--shadow-tonal-violet);
}

.photo-strip-add span {
  font-size: 0.7rem;
  font-weight: 500;
}

.photo-strip-add svg {
  width: 18px;
  height: 18px;
}

/* Hide add button when both photos loaded */
.photo-strip.two-photos .photo-strip-add {
  display: none;
}

/* Hide photo strip when showing result - UNLESS user has 2 photos */
.has-result .photo-strip:not(.two-photos) {
  display: none !important;
}

/* When 2 photos, show strip even with result (so user can switch) */
.has-result .photo-strip.two-photos {
  display: flex !important;
}

/* ============================================
   PHOTO STRIP MOBILE RESPONSIVENESS
   ============================================ */
@media (max-width: 768px) {
  /* Show photo strip on mobile when visible (image loaded) */
  .photo-strip.visible {
    display: flex !important;
    justify-content: center;
    padding: 8px 16px;
  }

  .photo-thumb-wrapper {
    width: 48px;
    height: 48px;
  }

  .photo-strip-add {
    width: 56px;
    height: 56px;
  }

  .photo-strip-badge {
    width: 18px;
    height: 18px;
    font-size: 0.65rem;
  }

  /* Remove button always visible on mobile (no hover state), 44px min touch target */
  .photo-strip-item .photo-remove-btn {
    display: flex;
    width: 44px;
    height: 44px;
    top: -14px;
    right: -14px;
    font-size: 18px;
  }

  /* Hide strip when keyboard is open to prevent layout jumps */
  .keyboard-open .photo-strip {
    display: none !important;
  }

  .keyboard-open .reference-preview {
    display: none !important;
  }

  .photo-strip.two-photos .photo-strip-label {
    display: none;
  }
  .photo-strip.two-photos .photo-thumb-wrapper {
    width: 40px;
    height: 40px;
  }
  .photo-strip.two-photos {
    padding: 4px 12px;
  }
  .photo-strip.two-photos .photo-strip-scroll {
    padding-bottom: 0;
  }
}

/* ============================================
   DONE EDITING BUTTON
   ============================================ */
.done-editing-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 8px 0;
  margin-top: 4px;
  transition: color 0.15s var(--ease-standard);
}

.done-editing-btn:hover {
  color: var(--text);
}

.done-editing-btn.hidden {
  display: none;
}

/* Legacy support */
.quality-chip {
  display: none;
}

.quality-row {
  display: none;
}

.quality-row.hidden {
  display: none;
}

.quality-btn {
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 50px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 40px;
}

.quality-btn:hover {
  border-color: var(--text-dimmed);
}

.quality-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.quality-btn .cost {
  opacity: 0.7;
  font-size: 0.8rem;
}

/* ============================================
   BOTTOM SHEET (default for buySheet etc)
   ============================================ */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 40, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 10001; /* Above GDPR banner (9999) and interstitial (1000) */
  opacity: 0;
  visibility: hidden;
  /* Exit timing matches .bottom-sheet slide-out (0.28s) so the backdrop
     doesn't disappear before the sheet is off-screen — was causing a flash
     of whatever was underneath during the last ~80ms of close. */
  transition: opacity 0.28s var(--ease-standard), visibility 0.28s var(--ease-standard);
}

.sheet-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.1s var(--ease-standard), visibility 0.1s var(--ease-standard);
  touch-action: none;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior: contain;
}

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 24px;
  padding-bottom: calc(24px + var(--safe-bottom));
  z-index: 10002;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
  border-top: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);
  max-height: calc(92dvh - var(--safe-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.bottom-sheet.visible {
  transform: translateY(0);
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.sheet-handle {
  width: 38px;
  height: 4px;
  background: var(--text-dimmed);
  opacity: 0.4;
  border-radius: var(--r-pill);
  margin: 0 auto 20px;
  padding: 12px 32px;
  margin-top: -12px;
  background-clip: content-box;
  cursor: grab;
  touch-action: pan-y;
}

/* ============================================
   USER SHEET - Centered modal on desktop
   ============================================ */
#userSheetOverlay {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#userSheet {
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) scale(0.95) !important;
  width: 90%;
  max-width: 380px;
  border-radius: 16px !important;
  padding: 32px;
  border: 1px solid rgba(26, 26, 46, 0.05);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.03),
    0 10px 25px -3px rgba(0, 0, 0, 0.08),
    0 20px 50px -4px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease-standard), visibility 0.2s var(--ease-standard), transform 0.25s var(--ease-standard);
  overflow: visible;
}

/* Violet ambient glow behind user sheet */
#userSheet::before {
  content: '';
  position: absolute;
  inset: -40px;
  border-radius: 28px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.06) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

#userSheet.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1) !important;
}

#userSheet .sheet-handle {
  display: none;
}

/* Mobile: userSheet becomes bottom sheet */
@media (max-width: 640px) {
  #userSheet {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: translateY(100%) !important;
    width: 100%;
    max-width: none;
    border-radius: 20px 20px 0 0 !important;
    padding: 24px;
    padding-bottom: calc(24px + var(--safe-bottom));
    border: none;
    border-top: 1px solid rgba(26, 26, 46, 0.05);
    box-shadow:
      0 -4px 20px rgba(0, 0, 0, 0.1),
      0 -2px 12px rgba(26, 26, 46, 0.04);
    opacity: 1;
  }

  #userSheet.visible {
    transform: translateY(0) !important;
  }

  #userSheet .sheet-handle {
    display: block;
  }
}

/* Close button for user sheet */
.sheet-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(26, 26, 46, 0.03);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: background 0.2s var(--ease-standard), color 0.2s var(--ease-standard), transform 0.2s var(--ease-standard);
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.sheet-close-btn:hover {
  background: rgba(26, 26, 46, 0.05);
  color: var(--text);
}

.sheet-close-btn:active {
  transform: scale(0.9);
  background: var(--border);
}

@media (max-width: 640px) {
  .sheet-close-btn {
    top: 16px;
    right: 16px;
  }
}

.sheet-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 10px;
}

.sheet-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 0.01em;
}

.sheet-btn {
  width: 100%;
  padding: 14px 22px;
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.005em;
  cursor: pointer;
  margin-top: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.18s var(--ease-standard), box-shadow 0.2s var(--ease-standard), background 0.18s var(--ease-standard);
}

.sheet-btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
}

.sheet-btn-primary:hover {
  transform: translateY(-1px);
  background: var(--primary-hover);
  box-shadow: var(--shadow-lg), var(--shadow-tonal-violet-lg);
}

.sheet-btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 1px solid var(--hairline);
}

.sheet-btn-secondary:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text);
}

/* Magic link button loading state */
.sheet-btn.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.sheet-btn.loading:hover {
  transform: none;
  box-shadow: none;
}

.magic-link-spinner {
  animation: none;
}

.magic-link-spinner.spinning {
  animation: spin 1s linear infinite;
}

/* ============================================
   CREDIT PACKS
   ============================================ */
.credit-pack {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg-subtle);
  border: 2px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.credit-pack:hover {
  border-color: var(--text-dimmed);
}

.credit-pack.selected {
  border-color: var(--primary);
  background: rgba(26, 26, 46, 0.05);
}

.pack-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pack-name {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text);
}

.pack-edits {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}

.pack-detail {
  font-size: 0.75rem;
  color: var(--text-dimmed);
}

.pack-per-edit {
  font-size: 0.75rem;
  color: var(--success);
  font-weight: 600;
  margin-top: 2px;
}

.pack-tagline {
  font-size: 0.75rem;
  color: var(--text-dimmed);
  font-style: normal;
  font-weight: 500;
}

.credit-pack.selected .pack-tagline {
  color: var(--success);
  font-weight: 600;
}

.pack-badge {
  position: absolute;
  top: -10px;
  right: 12px;
  background: var(--primary);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.credit-pack.selected .pack-badge {
  background: linear-gradient(135deg, #10b981, #059669);
  animation: pulse-badge 2s var(--ease-in-out) infinite;
}

.pack-badge-best {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
}

.pack-badge-new {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.credit-pack.first-time-discount {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}

.pack-price-original {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: line-through;
  margin-left: 6px;
}

.pack-trust {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.pack-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--success);
}

.pack-credits {
  font-size: 0.9rem;
}

.pack-bonus {
  font-size: 0.7rem;
}

/* ============================================
   BUY SHEET V9 - SUBSCRIPTION FIRST (Premium)
   Credits-first visual hierarchy with brand accent
   ============================================ */

.buy-sheet-v9 {
  max-height: 92dvh;
  background: var(--card);
  color: var(--text);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* Violet ambient glow behind buy sheet */
.buy-sheet-v9::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, var(--tone-violet-50) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

.buy-sheet-v9 > * {
  position: relative;
  z-index: 1;
}

.buy-sheet-v9 .sheet-handle {
  flex-shrink: 0;
  margin: 12px auto 0;
  background-color: var(--text-dimmed);
  opacity: 0.4;
}

.buy-sheet-v9 .buy-sheet-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 24px 20px;
  -webkit-overflow-scrolling: touch;
}

.buy-sheet-v9 .buy-sheet-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.18s var(--ease-standard), color 0.18s var(--ease-standard), transform 0.18s var(--ease-standard);
  z-index: 10;
}

.buy-sheet-v9 .buy-sheet-close:hover {
  background: var(--tone-rose-50);
  color: var(--tone-rose-700);
}

.buy-sheet-v9 .buy-sheet-close:active {
  transform: scale(0.95);
}

.sheet-headline-v9 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
  color: var(--text);
  letter-spacing: -0.02em;
}

/* Trigger-aware subhead (Pro / Versions paywall surfaces). Single line on
   desktop, wraps gracefully on mobile. Sits directly under the headline
   inside .urgency-header so existing margins keep working. */
.sheet-context-sub {
  margin: 0 auto 4px;
  max-width: 28em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-light);
  text-align: center;
}
.sheet-context-sub[data-surface="pro"] { color: var(--tone-violet-700, var(--text-light)); }
.sheet-context-sub[data-surface="versions"] { color: var(--text-muted, var(--text-light)); }
.sheet-context-sub[data-surface="resolution"] { color: var(--tone-sky-700, var(--text-light)); }
.sheet-context-sub[data-surface="wait"] { color: var(--text-muted, var(--text-light)); }
.sheet-context-sub[data-surface="flow"] { color: var(--text-muted, var(--text-light)); }

/* Universal social-proof line at the top of the V9 buy sheet — sits between
   the headline/subhead and the billing toggle so trust copy anchors the
   pricing decision (Calm/Notion paywall pattern). */
.sheet-social-proof.v9-social-proof {
  margin: 6px auto 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.sheet-social-proof.v9-social-proof:empty { display: none; }

/* V9 trust ribbon — three inline checkmark items between tier cards and
   the one-time pack section. Reassurances that apply across every plan
   so the user doesn't need to scan tier cards for them. */
.v9-trust-ribbon {
  list-style: none;
  margin: 14px auto 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.005em;
}
.v9-trust-ribbon li {
  position: relative;
  padding-left: 18px;
}
.v9-trust-ribbon li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}


.buy-billing-toggle {
  background: var(--bg-secondary);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 4px;
  display: flex;
  margin: 14px 0 22px;
  font-family: var(--font-body);
}

.buy-billing-option {
  flex: 1;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--text-dimmed);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s var(--ease-standard), background 0.24s var(--ease-standard);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  -webkit-tap-highlight-color: transparent;
}

.buy-billing-option--active {
  background: var(--card);
  color: var(--tone-violet-700);
  box-shadow: 0 1px 3px rgba(20, 20, 40, 0.10), 0 1px 1px rgba(20, 20, 40, 0.05);
}

.buy-save-badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--tone-emerald-50);
  color: var(--tone-emerald-700);
  padding: 3px 7px;
  border-radius: var(--r-pill);
}

/* Legacy toggle hidden (replaced by segmented control) */
.annual-toggle-v9 {
  display: none;
}

/* Subscription Tier Cards - 3-Column Confident Numbers */
.sub-tiers-v9 {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 16px;
}

.sub-tier-v9 {
  background: var(--card);
  border: 1.5px solid var(--hairline);
  border-radius: 16px;
  flex: 1;
  padding: 22px 12px 18px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  font-family: var(--font-body);
}

.sub-tier-v9:hover {
  border-color: color-mix(in srgb, var(--tone-violet) 28%, transparent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.sub-tier-v9--selected {
  border-color: var(--tone-violet);
  background: linear-gradient(180deg, var(--tone-violet-50) 0%, var(--card) 60%);
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  transform: translateY(-2px);
}

.sub-tier-v9--selected:hover {
  border-color: var(--tone-violet);
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), 0 12px 36px rgba(124, 92, 252, 0.22);
}

.sub-tier-v9--popular {
  padding-top: 26px;
  border-color: var(--tone-violet);
  box-shadow: var(--shadow-tonal-violet);
}

.sub-tier-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--tone-violet);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(124, 92, 252, 0.30);
}

/* Tier name */
.sub-tier-name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.sub-tier-v9--selected .sub-tier-name,
.sub-tier-v9--popular .sub-tier-name {
  color: var(--tone-violet-700);
}

/* Credits hero metric */
.sub-tier-credits-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sub-tier-credits-num {
  font-family: var(--font-display), serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.sub-tier-v9--selected .sub-tier-credits-num {
  color: var(--tone-violet-700);
}

.sub-tier-credits-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.sub-tier-main { display: none; }
.sub-tier-credits { display: none; }

/* Price */
.sub-tier-price {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

.sub-tier-v9--selected .sub-tier-price { color: var(--tone-violet-700); }

/* Annual savings strikethrough — when the user toggles to Annual on the
   V9 buy sheet, each tier price renders as `<was> <now>` with the monthly
   price struck through next to the discounted annual-monthly-equivalent.
   Visceral way to show savings beyond the "Save 17%" toggle badge. */
.sub-tier-was {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--text-dimmed) 80%, transparent);
  color: var(--text-dimmed);
  font-weight: 400;
  margin-right: 1px;
}
.sub-tier-now {
  font-weight: 600;
}
.sub-tier-v9--selected .sub-tier-now { color: var(--tone-violet-700); }

.sub-tier-price-annual {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Subscription Benefits */
.sub-benefits-v9 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--card-tonal);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
}

.sub-benefit {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
}

.sub-benefit svg {
  width: 13px;
  height: 13px;
  stroke: var(--tone-emerald);
}

/* One-time Pack Section */
.onetime-section-v9 {
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
  margin-top: 10px;
}

.onetime-divider-v9 {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-align: center;
}

.onetime-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  width: 100%;
  text-align: center;
  transition: color 0.15s;
}

.onetime-toggle:hover {
  color: var(--text);
}

.onetime-toggle-link {
  color: var(--primary);
  font-weight: 600;
}

/* Credits Slider */
.credits-slider-container {
  display: none;
  margin-top: 14px;
  padding: 20px;
  background: var(--card-tonal);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}

.onetime-section-v9.expanded .credits-slider-container {
  display: block;
}

.credits-slider-display {
  text-align: center;
  margin-bottom: 16px;
}

.credits-slider-total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.credits-slider-count {
  font-family: var(--font-body);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.15s;
}

.credits-slider-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.credits-slider-bonus {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tone-amber-700);
  background: var(--tone-amber-50);
  padding: 4px 9px;
  border-radius: var(--r-pill);
  margin-top: 6px;
  transition: opacity 0.2s;
}

.credits-slider-bonus.hidden { display: none; }

.credits-slider-price {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tone-violet-700);
  letter-spacing: -0.015em;
  margin-top: 6px;
  transition: opacity 0.15s;
}

.credits-slider-per-edit {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
  transition: opacity 0.15s;
}

/* Range input — tonal violet track + thumb */
.credits-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(
    to right,
    var(--tone-violet) 0%,
    var(--tone-violet) var(--slider-fill, 33%),
    var(--bg-secondary) var(--slider-fill, 33%),
    var(--bg-secondary) 100%
  );
  border-radius: var(--r-pill);
  outline: none;
  cursor: pointer;
  margin: 0;
}

.credits-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 3px solid var(--tone-violet);
  box-shadow: var(--shadow-tonal-violet);
  cursor: grab;
  transition: transform 0.16s var(--ease-standard);
}

.credits-slider::-webkit-slider-thumb:hover {
  transform: scale(1.10);
}

.credits-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.credits-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 3px solid var(--tone-violet);
  box-shadow: var(--shadow-tonal-violet);
  cursor: grab;
}

.credits-slider::-moz-range-track {
  height: 6px;
  border: none;
  background: transparent;
}

/* Notch labels.
   Positioned absolutely so each label's CENTER lines up with the matching
   slider-thumb stop. Container is inset by 12px on each side (= half the
   thumb width) so left:0% / left:100% land where the thumb actually rests
   at value=min and value=max. See shared :nth-child rules below. */
.credits-slider-notches {
  position: relative;
  margin: 10px 12px 0;
  height: 22px;
}

.credits-slider-notches span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dimmed);
  font-weight: 500;
  min-width: 28px;
  text-align: center;
  padding: 3px 6px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color 0.16s, background 0.16s, font-weight 0.16s;
  -webkit-tap-highlight-color: transparent;
}

.credits-slider-notches span:hover {
  color: var(--text-muted);
  background: var(--bg-secondary);
}

.credits-slider-notches span.active {
  color: var(--tone-violet-700);
  font-weight: 700;
  background: var(--tone-violet-50);
}

/* Buy button — pill primary CTA */
.credits-slider-buy {
  width: 100%;
  margin-top: 14px;
  background: var(--primary);
  border: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.005em;
  padding: 14px 20px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform 0.16s var(--ease-standard), box-shadow 0.18s var(--ease-standard), background 0.16s var(--ease-standard);
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
}

.credits-slider-buy:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg), var(--shadow-tonal-violet-lg);
}

.credits-slider-buy:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Paywall slider variant */
.paywall-slider {
  background: var(--card-tonal);
  border: 1px solid var(--hairline);
  margin-bottom: 16px;
}

/* Subscriber: promoted one-time pack */
.onetime-section-v9.subscriber-primary .onetime-divider-v9 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

/* Upgrade CTA */
.cta-primary-v9.cta-upgrade {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 50%, #101024 100%);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35);
}

/* Footer link (Upgrade plan / Manage subscription) */
.buy-sheet-footer-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 12px 0 8px; /* Increased touch target */
  min-height: 44px; /* iOS accessibility guideline */
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.01em;
  transition: color var(--transition-fast), transform var(--transition-fast);
  border-radius: var(--radius-md);
  /* Ensure focus visibility */
  outline: none;
}
.buy-sheet-footer-link:hover {
  color: var(--primary-hover);
  transform: translateY(-1px);
}
.buy-sheet-footer-link:focus {
  color: var(--primary-hover);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.3);
  transform: translateY(-1px);
}
.buy-sheet-footer-link:active {
  transform: translateY(0);
  color: var(--primary-hover);
}
.buy-sheet-footer-link:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

/* Footer V9 - Sticky at bottom */
.buy-sheet-footer-v9 {
  flex-shrink: 0;
  padding: 16px 24px 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--border-subtle);
  /* Ensure footer is always visible */
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.cta-primary-v9 {
  width: 100%;
  background: var(--primary);
  color: white;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  padding: 14px 22px;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.18s ease, background 0.16s ease;
  letter-spacing: 0.005em;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
}

.cta-primary-v9::after {
  display: none;
}

.cta-primary-v9:hover {
  transform: translateY(-1px);
  background: var(--primary-hover);
  box-shadow: var(--shadow-lg), var(--shadow-tonal-violet-lg);
}

.cta-primary-v9:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Reassurance text below CTA */
.footer-reassurance {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 8px 0 0;
}

/* Footer Social Proof */
.footer-social-proof {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-dimmed);
  margin: 6px 0 0;
  letter-spacing: 0.01em;
}

/* Footer Trust Line */
.footer-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.footer-trust svg {
  width: 12px;
  height: 12px;
  stroke: var(--text-dimmed);
}

.footer-dot {
  opacity: 0.6;
}

.footer-signin {
  background: none;
  border: none;
  color: var(--primary);
  font-weight: 500;
  padding: 0;
}

.footer-signin:hover {
  text-decoration: underline;
}

.footer-signin.hidden {
  display: none;
}

/* ============================================
   BUY SHEET CONVERSION OPTIMIZATIONS (v2)
   New styles for improved conversion rate
   ============================================ */

/* Urgency Header - Creates momentum */
.urgency-header {
  text-align: center;
  margin-bottom: 24px;
}

.sheet-subheadline {
  font-size: 1rem;
  color: var(--text-light);
  margin: 8px 0 16px;
  font-weight: 500;
}

.momentum-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.momentum-badge svg {
  color: var(--primary);
}

/* Pricing tabs with clearer positioning */
.pricing-tabs-container {
  margin-bottom: 20px;
}

.buy-billing-option .tab-label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.buy-billing-option .tab-subtitle {
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.8;
}

/* Enhanced tier cards */
.tier-description {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 8px;
  text-align: center;
}

.sub-tier-v9--popular .tier-description {
  color: var(--text);
}

/* Tier feature lists — per-card value props (desktop only) */
.tier-features {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tier-features li {
  font-size: 0.76rem;
  color: var(--text-muted);
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}

.tier-features li::before {
  content: '\2713';
  color: var(--success);
  font-weight: 700;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.sub-tier-v9--selected .tier-features li {
  color: var(--text);
}

/* Trust signals for packs */
.pack-trust-signals {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.trust-item svg {
  color: var(--success);
  stroke-width: 2.5;
}

/* Improved footer styling */
.footer-social-proof-top {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-weight: 500;
}

.footer-trust-container {
  margin-top: 12px;
}

.footer-trust {
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.footer-trust span {
  font-size: 0.75rem;
}


/* Mobile optimizations */
@media (max-width: 480px) {
  .momentum-badge {
    font-size: 0.8rem;
    padding: 6px 12px;
  }

  .pack-trust-signals {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .trust-item {
    font-size: 0.75rem;
  }

  .tier-description {
    font-size: 0.75rem;
  }

  .footer-social-proof-top {
    font-size: 0.75rem;
  }
}

/* ============================================
   MOBILE BUY SHEET OPTIMIZATION
   Stack tiers vertically as compact rows.
   Compress spacing to maximize CTA visibility.
   ============================================ */
@media (max-width: 600px) {
  /* Reclaim viewport — mobile buy sheet needs max visible area */
  .buy-sheet-v9 {
    max-height: 92dvh;
  }

  .buy-sheet-v9 .buy-sheet-scroll {
    padding: 12px 16px 8px;
  }

  /* Compress urgency header — less scroll before tiers */
  .urgency-header {
    margin-bottom: 10px;
  }

  .sheet-headline-v9 {
    font-size: 1.25rem;
    margin-bottom: 2px;
  }

  .sheet-subheadline {
    font-size: 0.82rem;
    margin: 2px 0 6px;
  }

  /* Hide momentum badge — takes prime real estate on mobile */
  .momentum-badge {
    display: none;
  }

  /* Billing toggle: tighter */
  .pricing-tabs-container {
    margin-bottom: 12px;
  }

  .buy-billing-toggle {
    margin: 6px 0 12px;
  }

  .buy-billing-option {
    padding: 8px 10px;
    flex-direction: column;
    gap: 1px;
  }

  .buy-billing-option .tab-label {
    font-size: 0.8rem;
  }

  .buy-billing-option .tab-subtitle {
    font-size: 0.65rem;
  }

  /* Stack tier cards vertically — full width instead of cramped 3-col */
  .sub-tiers-v9 {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
  }

  /* Each tier: compact horizontal row */
  .sub-tier-v9 {
    flex-direction: row;
    align-items: center;
    padding: 12px 16px;
    border-radius: 12px;
    gap: 0;
  }

  .sub-tier-v9--popular {
    padding: 12px 16px;
  }

  .sub-tier-v9:hover {
    transform: none;
  }

  /* Badge: inline pill instead of absolute positioned */
  .sub-tier-badge {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    font-size: 0.48rem;
    padding: 2px 6px;
    margin-right: 6px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Name: compact left label */
  .sub-tier-name {
    margin-bottom: 0;
    font-size: 0.55rem;
    min-width: 28px;
  }

  /* Credits: inline row, centered flex-grow area */
  .sub-tier-credits-hero {
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    flex: 1;
    margin-left: 8px;
  }

  .sub-tier-credits-num {
    font-size: 1.5rem;
  }

  .sub-tier-credits-label {
    font-size: 0.6rem;
    margin-bottom: 0;
  }

  /* Price: right-aligned */
  .sub-tier-price {
    margin-left: auto;
    flex-shrink: 0;
    padding-left: 8px;
  }

  /* Selected tier: stronger visual on mobile horizontal layout */
  .sub-tier-v9--selected {
    border-width: 2px;
    border-color: rgba(var(--primary-rgb), 0.6);
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--primary-rgb), 0.03));
  }

  .sub-tier-v9--selected .sub-tier-credits-num {
    font-size: 1.65rem;
  }

  /* Hide verbose descriptions on mobile — tiers are self-explanatory */
  .tier-description {
    display: none;
  }

  /* Compact benefits */
  .sub-benefits-v9 {
    margin-bottom: 10px;
    padding: 8px 10px;
    gap: 4px 10px;
  }

  .sub-benefit {
    font-size: 0.7rem;
  }

  /* Compact one-time section */
  .onetime-section-v9 {
    padding-top: 10px;
    margin-top: 2px;
  }

  .onetime-divider-v9 {
    font-size: 0.7rem;
  }

  .credits-slider-container {
    padding: 12px;
  }

  .credits-slider-display {
    margin-bottom: 10px;
  }

  .credits-slider-count {
    font-size: 1.6rem;
  }

  .credits-slider-price {
    font-size: 1.1rem;
    margin-top: 2px;
  }

  /* Slider thumb: larger for mobile touch (28px visual, ~44px touch area) */
  .credits-slider {
    height: 6px;
  }

  .credits-slider::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }

  .credits-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }

  .credits-slider-buy {
    font-size: 0.85rem;
    padding: 8px 0;
    min-height: 44px;
  }

  .pack-trust-signals {
    margin-top: 10px;
    gap: 6px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .pack-trust-signals .trust-item {
    font-size: 0.7rem;
  }

  /* Sticky footer: more prominent CTA */
  .buy-sheet-footer-v9 {
    padding: 10px 16px 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .footer-social-proof-top {
    font-size: 0.7rem;
    margin-bottom: 8px;
  }

  .cta-primary-v9 {
    min-height: 52px;
    font-size: 1rem;
    padding: 14px 16px;
    border-radius: 12px;
  }

  .footer-trust-container {
    margin-top: 8px;
  }

  .footer-trust span {
    font-size: 0.68rem;
  }
}

/* Animation for shimmer effect */
@keyframes ctaShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}


/* Desktop: Full-screen overlay — no-scroll, everything visible */
@media (min-width: 900px) {
  .buy-sheet-v9 {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    transform: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-standard);
    display: flex;
    flex-direction: column;
    z-index: 10002;
  }

  .buy-sheet-v9.visible {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .buy-sheet-v9 .sheet-handle { display: none; }

  /* Content: fills viewport, vertically centered when short, scrollable when tall */
  .buy-sheet-v9 .buy-sheet-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    padding: 24px 60px 12px;
    max-width: 1120px;   /* wider than single-col 960 to host 1fr 3fr split */
    margin: 0 auto;
    width: 100%;
  }

  /* 2-column desktop grid: value props LEFT (1) | plans RIGHT (3).
     align-items: stretch lets the left column match the right's height
     so the trust foot can anchor to the bottom edge.
     Mobile is unchanged — .bs-grid is block-flow and .bs-grid-left hidden. */
  .buy-sheet-v9 .bs-grid {
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: 48px;
    align-items: stretch;
    width: 100%;
  }

  .buy-sheet-v9 .bs-grid-left {
    /* Editorial column: flex to push the trust foot to the bottom edge.
       The right column drives sheet height; the left fills its share. */
    display: flex;
    flex-direction: column;
    padding: 4px 28px 4px 0;
    border-right: 1px solid rgba(20, 20, 40, 0.07);
    margin-right: -8px;
  }

  .buy-sheet-v9 .bs-grid-right {
    /* The right column owns the centered single-screen flex layout the
       buy sheet used pre-grid — preserves vertical rhythm. */
    display: flex;
    flex-direction: column;
    min-width: 0;   /* allow tier cards to shrink when needed */
  }

  /* Left-column eyebrow: quiet mono caption sets up the bullet list as
     "what every plan includes" without screaming for attention. */
  .buy-sheet-v9 .bs-grid-eyebrow {
    margin: 0 0 18px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* Numbered editorial value props with hairline dividers. The dynamic JS
     writes <li class="bs-vp bs-vp--structured"><strong class="bs-vp-title">
     ...</strong><span class="bs-vp-body">...</span></li> — we add the
     mono "01 / 02 / 03" prefix via a CSS counter on ::before, and a hairline
     separator via border-top from the second item onward. */
  .buy-sheet-v9 .bs-value-props {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    counter-reset: bs-vp;
  }
  .buy-sheet-v9 .bs-value-props li {
    counter-increment: bs-vp;
    margin: 0;
    padding: 20px 0 20px 36px;   /* left padding makes room for the absolutely-positioned counter */
    display: block;
    border-top: 1px solid rgba(20, 20, 40, 0.06);
    position: relative;
  }
  .buy-sheet-v9 .bs-value-props li:first-child { border-top: none; padding-top: 0; }
  .buy-sheet-v9 .bs-value-props li:last-child { padding-bottom: 0; }

  /* Override the global .bs-vp.bs-vp--structured::before { display:none } so
     the counter shows up on the editorial layout. Mono number, tracking,
     violet-tinted so it harmonises with the popular badge on the right.
     Absolutely positioned so it doesn't break the title/body block flow. */
  .buy-sheet-v9 .bs-value-props li.bs-vp--structured::before,
  .buy-sheet-v9 .bs-value-props li::before {
    content: counter(bs-vp, decimal-leading-zero);
    position: absolute;
    top: 22px;
    left: 0;
    width: auto;
    height: auto;
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--tone-violet-700);
    background: none;
    line-height: 1.4;
  }
  .buy-sheet-v9 .bs-value-props li:first-child::before { top: 2px; }

  .buy-sheet-v9 .bs-vp-title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 650;
    color: var(--text);
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin-bottom: 5px;
    display: block;
  }
  .buy-sheet-v9 .bs-vp-body {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--text-muted);
    display: block;
  }
  /* Legacy plain-string value props (no .bs-vp--structured) — render body-only */
  .buy-sheet-v9 .bs-vp:not(.bs-vp--structured) .bs-vp-body {
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 500;
  }

  /* Trust foot — anchored at the bottom of the left column. Mono microcopy
     for the social-proof line, restrained text button for sign-in. */
  .buy-sheet-v9 .bs-grid-foot {
    margin-top: auto;
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .buy-sheet-v9 .bs-grid-foot-line {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.5;
  }
  .buy-sheet-v9 .bs-grid-foot-signin {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s var(--ease-standard);
  }
  .buy-sheet-v9 .bs-grid-foot-signin em {
    color: var(--text);
    font-style: normal;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(20, 20, 40, 0.25);
    transition: text-decoration-color 0.15s var(--ease-standard);
  }
  .buy-sheet-v9 .bs-grid-foot-signin:hover { color: var(--text); }
  .buy-sheet-v9 .bs-grid-foot-signin:hover em {
    text-decoration-color: var(--text);
  }

  /* Headline — compact for single-screen fit */
  .sheet-headline-v9 {
    font-size: 2rem;
    margin-bottom: 2px;
    letter-spacing: -0.03em;
  }

  .sheet-subheadline {
    margin-bottom: 2px;
  }

  /* Hide momentum badge — value communicated via per-card features */
  .urgency-header .momentum-badge {
    display: none;
  }

  .urgency-header {
    margin-bottom: 8px;
  }

  /* Billing toggle — compact */
  .buy-billing-toggle {
    margin: 4px auto 12px;
    max-width: 360px;
    padding: 3px;
  }

  .buy-billing-option {
    font-size: 0.88rem;
    padding: 9px 16px;
  }

  .buy-save-badge {
    font-size: 0.68rem;
  }

  /* Tier cards — compact with per-card feature bullets */
  .sub-tiers-v9 {
    gap: 14px;
    margin-bottom: 10px;
  }

  .sub-tier-v9 {
    padding: 22px 18px 18px;
    border-radius: 16px;
  }

  .sub-tier-v9--popular {
    padding-top: 28px;
  }

  .sub-tier-badge {
    font-size: 0.62rem;
    padding: 3px 12px;
  }

  .sub-tier-name {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    margin-bottom: 2px;
  }

  .sub-tier-credits-num {
    font-size: 2.75rem;
  }

  .sub-tier-credits-label {
    font-size: 0.65rem;
    margin-bottom: 6px;
  }

  .sub-tier-price {
    font-size: 0.95rem;
  }

  .sub-tier-price-annual {
    font-size: 0.78rem;
    margin-top: 2px;
  }

  /* Hide description — features replace it */
  .tier-description {
    display: none;
  }

  /* Per-card feature bullets */
  .tier-features {
    display: block;
    margin: 10px auto 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
    width: fit-content;
  }

  .tier-features li {
    font-size: 0.74rem;
    padding: 1.5px 0;
  }

  .sub-tier-v9--selected .tier-features {
    border-top-color: rgba(var(--primary-rgb), 0.12);
  }

  /* Hide benefits row — features are now in each card */
  .sub-benefits-v9 {
    display: none;
  }

  /* One-time section: horizontal layout on desktop */
  .onetime-section-v9 {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }

  .onetime-divider-v9 {
    font-size: 0.82rem;
    margin-bottom: 4px;
  }

  .buy-sheet-v9 .credits-slider-container {
    padding: 12px 20px;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0 28px;
  }

  /* Slider display: left column */
  .credits-slider-display {
    grid-column: 1;
    grid-row: 1 / 3;
    margin-bottom: 0;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
  }

  .credits-slider-count {
    font-size: 2.25rem;
  }

  .credits-slider-label {
    font-size: 1rem;
  }

  .credits-slider-bonus {
    font-size: 0.8rem;
  }

  .credits-slider-price {
    font-size: 1.35rem;
    margin-top: 0;
  }

  .credits-slider-per-edit {
    font-size: 0.82rem;
    margin-top: 0;
    margin-left: 6px;
  }

  /* Slider track: center column, spans rows */
  .credits-slider {
    grid-column: 2;
    grid-row: 1;
    min-width: 240px;
  }

  .credits-slider-notches {
    grid-column: 2;
    grid-row: 2;
    padding-top: 4px;
  }

  .credits-slider-notches span {
    font-size: 0.78rem;
  }

  /* Buy button: right column */
  .credits-slider-buy {
    grid-column: 3;
    grid-row: 1 / 3;
    margin-top: 0;
    font-size: 0.95rem;
    padding: 12px 20px;
    border-radius: 10px;
    width: auto;
    justify-self: end;
    white-space: nowrap;
  }

  /* Hide pack trust signals — slider is self-explanatory on desktop */
  .pack-trust-signals {
    display: none;
  }

  /* Footer — compact, single-line feel */
  .buy-sheet-footer-v9 {
    padding: 10px 60px 18px;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
  }

  .cta-primary-v9 {
    padding: 14px 24px;
    font-size: 1.1rem;
    border-radius: 12px;
  }

  .footer-social-proof-top {
    font-size: 0.78rem;
    margin-bottom: 8px;
  }

  .footer-reassurance {
    font-size: 0.82rem;
    margin-top: 6px;
  }

  .footer-trust {
    margin-top: 6px;
    font-size: 0.82rem;
    gap: 8px;
  }

  .footer-trust svg {
    width: 14px;
    height: 14px;
  }

  .footer-signin {
    font-size: 0.82rem;
  }

  /* Close button */
  .buy-sheet-v9 .buy-sheet-close {
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
  }
}

/* ============================================
   BUY SHEET REDESIGN — Shared + Quick Buy + Full Plans
   taste-skill aligned: warm surfaces, fine borders,
   Instrument Serif display, spring-physics CTAs
   ============================================ */

/* ── Shared CTAs ────────────────────────────── */
.cta-fill {
  width: 100%; background: var(--primary); color: white;
  font-size: 0.95rem; font-weight: 600; padding: 16px 20px;
  border: none; border-radius: 12px; cursor: pointer;
  letter-spacing: 0.005em;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-fill:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.3); }
.cta-fill:active { transform: scale(0.98); box-shadow: none; }
.cta-fill:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

.cta-ghost {
  width: 100%; background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.06); color: var(--text);
  font-size: 0.92rem; font-weight: 600; padding: 15px 20px;
  border-radius: 12px; cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-ghost:hover { border-color: rgba(var(--primary-rgb), 0.2); background: rgba(var(--primary-rgb), 0.03); }
.cta-ghost:active { transform: scale(0.98); }
.cta-ghost:disabled { opacity: 0.5; cursor: default; transform: none; }

/* ── Shared layout primitives ───────────────── */
.bs-header { text-align: center; margin-bottom: 28px; padding-top: 4px; }
.bs-title {
  font-family: var(--font-display), serif; font-size: 1.5rem;
  font-weight: 400; color: var(--text);
  letter-spacing: -0.025em; margin: 0 0 6px;
}
.bs-sub { font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.45; }

/* Value props — three checkmark bullets between the header and the pack
   card. World-class paywalls (Calm, Apple App Store, Notion) put the case
   for the product right under the headline, before the price. Inline SVG
   bullet keeps the file count down. */
.bs-value-props {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.bs-value-props li {
  position: relative;
  padding-left: 26px;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--text);
  font-weight: 500;
}
.bs-value-props li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.bs-value-props[data-surface="pro"] li::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Structured feature blocks (title + body) — work at ALL viewport sizes.
   Each .bs-vp--structured is a stacked block: bold title above, descriptive
   body below. Replaces the green-check single-line treatment for these
   items so the title/body don't collide on mobile. */
.bs-vp.bs-vp--structured {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-weight: inherit;
  line-height: inherit;
}
.bs-vp.bs-vp--structured::before {
  display: none;
  content: none;
  background: none;
}
.bs-vp-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.bs-vp-body {
  display: block;
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text-muted);
}

/* The integrated trust block in the left column is a desktop-only flourish
   — on mobile the existing .buy-sheet-footer-v9 already shows
   "Secure checkout · Sign in" below the sheet, so duplicating it here is
   noise. Desktop override (.buy-sheet-simple .bs-grid-trust) makes it
   visible only on the editorial 2-column layout. */
.bs-grid-trust { display: none; }

/* Mobile: hide the value-props left column entirely so the buy sheet's
   mobile layout is byte-for-bit the same as before. The desktop @media
   block above flips this on with `display: flex`. */
.bs-grid-left { display: none; }

/* Social proof — single line, centered, sits between the pack card and the
   plan upsell. Verifiable claims only (no fabricated review counts). */
.bs-social-proof {
  margin: 18px 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.bs-social-proof:empty { display: none; }

.bs-sep { text-align: center; margin: 28px 0; position: relative; }
.bs-sep::before {
  content: ''; position: absolute; left: 0; right: 0;
  top: 50%; height: 1px; background: rgba(0, 0, 0, 0.06);
}
.bs-sep span {
  position: relative; background: var(--bg); padding: 0 14px;
  font-size: 0.72rem; color: var(--text-dimmed); letter-spacing: 0.02em;
}

.bs-trust {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; font-size: 0.72rem; color: var(--text-muted);
}
.bs-trust svg { stroke: var(--text-dimmed); flex-shrink: 0; opacity: 0.7; }
.bs-trust .footer-signin { margin-left: 8px; }

/* ── Simplified footer (no sticky CTA) ──────── */
.buy-sheet-simple .buy-sheet-footer-v9 {
  border-top: none; padding-top: 8px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* ── Hybrid buy sheet: tier cards + one-time slider in one view ─────────────
   Used when a non-subscriber opens the buy sheet from any "out of credits"
   trigger. Plans visible above the fold so they're not buried behind a link
   nobody clicks (last data: 0.76% click-rate on the old "Save 60%" link). */
.bs-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
/* Tier card — borrows the homepage hero-card spunk (app.css line 6031-6043):
   warm violet tonal wash on selected, solid violet border, two-layer shadow
   stack that glows violet, snappy cubic-bezier hover lift. Same design
   language as the .pricing-v9-card--hero — premium, energetic, and on-brand
   with the editor's existing personality (not a sterile pivot). */
.bs-tier {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 20px 10px 18px;
  background: var(--card);
  border: 1.5px solid var(--hairline);
  border-radius: 16px; cursor: pointer;
  text-align: center; font-family: inherit; color: inherit;
  transition:
    border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.bs-tier:hover {
  border-color: color-mix(in srgb, var(--tone-violet) 28%, transparent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.bs-tier:active { transform: translateY(-1px) scale(0.99); }

/* Selected tier inherits the homepage hero-card aesthetic */
.bs-tier--selected {
  border-color: var(--tone-violet);
  background: linear-gradient(180deg, var(--tone-violet-50) 0%, var(--card) 60%);
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  transform: translateY(-2px);
}
.bs-tier--selected:hover {
  border-color: var(--tone-violet);
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), 0 12px 36px rgba(124, 92, 252, 0.22);
}

/* POPULAR pill — solid violet on the card top edge */
.bs-tier-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--tone-violet); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: var(--r-pill);
  text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(124, 92, 252, 0.30);
}
.bs-tier-name {
  font-size: 0.82rem; font-weight: 700; color: var(--text);
  letter-spacing: -0.005em;
}
.bs-tier--selected .bs-tier-name { color: var(--tone-violet-700); }

/* Hero metric — display serif at editorial weight, matches homepage */
.bs-tier-credits {
  font-family: var(--font-display), serif;
  font-size: 1.5rem; font-weight: 400; color: var(--text);
  line-height: 1.1; margin-top: 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}
.bs-tier--selected .bs-tier-credits { color: var(--tone-violet-700); }

.bs-tier-unit {
  font-size: 0.66rem; color: var(--text-dimmed);
  letter-spacing: 0.02em; text-transform: lowercase;
}
.bs-tier-price {
  font-size: 0.82rem; font-weight: 600; color: var(--text);
  margin-top: 6px; font-variant-numeric: tabular-nums;
}
.bs-tier--selected .bs-tier-price { color: var(--tone-violet-700); }
.bs-tier-price .sub-tier-was {
  text-decoration: line-through;
  color: var(--text-dimmed);
  font-weight: 400;
  margin-right: 4px;
}
.bs-tier-per-edit {
  font-size: 0.68rem; color: var(--text-dimmed);
  font-variant-numeric: tabular-nums;
}

/* Subscribe CTA — primary action, redesigned to share the slider+pricing
   section's design language. Dark fill with a soft violet undertone
   gradient, layered violet glow shadow, an arrow indicator that slides
   right on hover, and the homepage spring-bouncy lift. */
.bs-subscribe-cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px 16px 24px;
  margin-bottom: 22px;
  background:
    linear-gradient(135deg, var(--primary) 0%, #2a2a4a 100%);
  border-radius: 14px;
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s var(--ease-standard);
  position: relative;
  overflow: hidden;
}
.bs-subscribe-cta::before {
  /* Subtle violet rim glow at the top edge — like the homepage hero card's
     rim light, applied inside the button rather than around it. */
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(124, 92, 252, 0.4) 50%,
    transparent 100%);
  pointer-events: none;
}
.bs-subscribe-cta:hover {
  background:
    linear-gradient(135deg, var(--primary-hover) 0%, #34345a 100%);
  box-shadow: var(--shadow-lg), 0 12px 36px rgba(124, 92, 252, 0.32);
  transform: translateY(-2px);
}
.bs-subscribe-cta:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm), var(--shadow-tonal-violet);
}
.bs-cta-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1;
  text-align: left;
}
.bs-cta-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.92);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.bs-subscribe-cta:hover .bs-cta-arrow {
  transform: translateX(4px);
  color: #fff;
}
.bs-subscribe-cta .bs-cta-label {
  font-size: 0.95rem; font-weight: 700; color: #fff;
}
.bs-subscribe-cta .bs-cta-sub {
  font-family: var(--font-mono);
  font-size: 0.74rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.005em;
}

/* "Prefer to pay once?" divider — sits between the subscribe CTA and the
   pack card. Hairline rule + center label, calm not loud. */
.bs-onetime-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 0 18px;
  font-size: 0.78rem; color: var(--text-dimmed);
}
.bs-onetime-divider::before,
.bs-onetime-divider::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(0, 0, 0, 0.08);
}

/* Pack CTA — secondary but VISIBLE at rest. Earlier "white card on tonal
   card" treatment made it near-invisible (Playwright QA called it out as
   a P1 conversion bug). Now: dark outline with subtle tonal lift, then
   transforms to a confident dark fill + violet rim on hover. Still
   subordinate to the Subscribe CTA above but no longer disappears. */
.bs-pack-cta {
  display: block; width: 100%;
  padding: 13px 20px; margin-top: 16px;
  background: var(--card);
  color: var(--text);
  border: 1.5px solid rgba(20, 20, 40, 0.22);
  border-radius: var(--r-pill);
  font-size: 0.92rem; font-weight: 700; letter-spacing: -0.005em;
  cursor: pointer; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(20, 20, 40, 0.04);
  transition:
    border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.bs-pack-cta:hover {
  border-color: var(--tone-violet);
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, #2a2a4a 100%);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), 0 8px 22px rgba(124, 92, 252, 0.22);
}
.bs-pack-cta:active { transform: translateY(0) scale(0.99); }
.bs-pack-cta:disabled { opacity: 0.6; cursor: default; }

.bs-toggle-save {
  display: inline-block;
  margin-left: 6px;
  background: var(--tone-emerald-50, #D9F7EB);
  color: var(--tone-emerald-700, #047857);
  font-size: 0.62rem; font-weight: 700;
  padding: 2px 6px; border-radius: 6px; letter-spacing: 0.02em;
}
.bs-toggle-btn--on .bs-toggle-save {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.95);
}

@media (max-width: 380px) {
  .bs-tier { padding: 14px 4px 12px; }
  .bs-tier-name { font-size: 0.74rem; }
  .bs-tier-credits { font-size: 1.25rem; }
  .bs-tier-price { font-size: 0.74rem; }
  .bs-tier-per-edit { font-size: 0.62rem; }
}

/* ── Quick Buy: Pack card ───────────────────── */
.bs-pack {
  background: #FAFAF8; border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px; padding: 24px 22px;
}
.bs-pack-head {
  display: flex; align-items: baseline;
  justify-content: space-between; margin-bottom: 20px;
}
.bs-pack-left { display: flex; flex-direction: column; gap: 3px; }
.bs-pack-credits {
  font-family: var(--font-display), serif; font-size: 1.2rem;
  font-weight: 400; color: var(--text);
}
.bs-pack-note { font-size: 0.74rem; color: var(--text-dimmed); }
.bs-pack-price {
  font-family: var(--font-display), serif; font-size: 1.75rem;
  font-weight: 400; color: var(--primary);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.bs-pack .cta-fill { margin-bottom: 8px; }

/* Microcopy under the pack CTA — trust signals at the click moment.
   Smaller and dimmer than the social-proof line so it reads as supporting
   detail, not a competing trust block. */
.bs-cta-microcopy {
  display: block;
  text-align: center;
  margin: 0 0 16px;
  font-size: 0.72rem;
  color: var(--text-dimmed);
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* Inline slider zone */
.bs-slider-zone { border-top: 1px solid rgba(0, 0, 0, 0.06); padding-top: 16px; }
.bs-slider-label {
  display: block; font-size: 0.72rem; color: var(--text-dimmed);
  margin-bottom: 12px; text-align: center; letter-spacing: 0.01em;
}
.bs-slider-readout {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px; margin-top: 10px;
  font-size: 0.82rem; color: var(--text-muted); font-weight: 500;
}
.bs-dot { color: var(--text-dimmed); }
.bs-slider-peredit { color: var(--accent, #1a1a2e); font-weight: 600; }
/* Savings pill — shown next to per-edit cost when pack beats pack-3 baseline */
.bs-savings-pill {
  display: inline-block;
  background: var(--tone-emerald-50, #D9F7EB);
  color: var(--tone-emerald-700, #047857);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 2px 7px; border-radius: 20px;
  transition: opacity 0.15s;
}
.bs-savings-pill:empty { display: none; }
/* Notch container in buysheet simplified slider — same alignment trick. */
.bs-slider-notches-wrap {
  position: relative;
  margin: 8px 12px 0;
  height: 22px;
}
.bs-slider-notches-wrap span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-dimmed);
  font-weight: 500; min-width: 28px; text-align: center;
  padding: 3px 6px; border-radius: var(--r-pill); cursor: pointer;
  transition: color 0.16s, background 0.16s, font-weight 0.16s;
  -webkit-tap-highlight-color: transparent;
}
.bs-slider-notches-wrap span:hover { color: var(--text-muted); background: var(--bg-secondary); }
.bs-slider-notches-wrap span.active { color: var(--tone-violet-700); font-weight: 700; background: var(--tone-violet-50); }

/* Notch positions for the 7-stop credit-pack slider (input min=0 max=6).
   Each label is centered at its matching thumb stop via translateX(-50%). */
.credits-slider-notches > span:nth-child(1),
.paywall-slider-notches > span:nth-child(1),
.bs-slider-notches-wrap > span:nth-child(1) { left: 0%; }
.credits-slider-notches > span:nth-child(2),
.paywall-slider-notches > span:nth-child(2),
.bs-slider-notches-wrap > span:nth-child(2) { left: calc(100% / 6); }
.credits-slider-notches > span:nth-child(3),
.paywall-slider-notches > span:nth-child(3),
.bs-slider-notches-wrap > span:nth-child(3) { left: calc(2 * 100% / 6); }
.credits-slider-notches > span:nth-child(4),
.paywall-slider-notches > span:nth-child(4),
.bs-slider-notches-wrap > span:nth-child(4) { left: 50%; }
.credits-slider-notches > span:nth-child(5),
.paywall-slider-notches > span:nth-child(5),
.bs-slider-notches-wrap > span:nth-child(5) { left: calc(4 * 100% / 6); }
.credits-slider-notches > span:nth-child(6),
.paywall-slider-notches > span:nth-child(6),
.bs-slider-notches-wrap > span:nth-child(6) { left: calc(5 * 100% / 6); }
.credits-slider-notches > span:nth-child(7),
.paywall-slider-notches > span:nth-child(7),
.bs-slider-notches-wrap > span:nth-child(7) { left: 100%; }

.bs-expand {
  display: block; width: 100%; border: none;
  background: rgba(var(--primary-rgb), 0.06);
  color: var(--primary); font-size: 0.82rem; font-weight: 600;
  padding: 12px 16px; margin-top: 16px; cursor: pointer; text-align: center;
  border-radius: 10px;
  transition: background 0.15s, color 0.15s;
}
.bs-expand:hover { background: rgba(var(--primary-rgb), 0.1); }
.bs-pack-link {
  display: block; width: 100%; background: none; border: none;
  color: var(--text-dimmed); font-size: 0.8rem; font-weight: 500;
  padding: 16px 0 0; cursor: pointer; text-align: center;
  transition: color 0.15s;
}
.bs-pack-link:hover { color: var(--primary); }

/* ── Full Plans: Back link ──────────────────── */
.bs-back {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; color: var(--text-dimmed);
  font-size: 0.8rem; font-weight: 500; padding: 0 0 20px; cursor: pointer;
}
.bs-back:hover { color: var(--primary); }

/* ── Full Plans: Billing toggle ─────────────── */
.bs-toggle { display: flex; justify-content: center; margin-bottom: 28px; }
.bs-toggle-inner {
  display: inline-flex; border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px; padding: 3px;
}
.bs-toggle-btn {
  padding: 7px 18px; border-radius: 8px; font-size: 0.76rem;
  font-weight: 600; border: none; background: none;
  color: var(--text-dimmed); cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.bs-toggle-btn--on { background: var(--text); color: white; }

/* ── Full Plans: Standard hero card ─────────── */
.bs-hero {
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  background: #FAFAF8; border-radius: 16px;
  padding: 28px 22px; margin-bottom: 12px;
}
.bs-hero-top {
  display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 6px;
}
.bs-hero-name {
  font-family: var(--font-display), serif; font-size: 1.3rem;
  font-weight: 400; color: var(--text);
}
.bs-hero-price {
  font-family: var(--font-display), serif; font-size: 1.5rem;
  font-weight: 400; color: var(--primary);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.bs-hero-credits { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 4px; }
.bs-hero-perks {
  font-size: 0.74rem; color: var(--text-dimmed);
  margin-bottom: 20px; line-height: 1.5;
}

/* ── Full Plans: Compact plan rows ──────────── */
.bs-plan-row {
  display: flex; align-items: center; padding: 16px 18px;
  border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 14px;
  cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 8px;
}
.bs-plan-row:hover {
  background: rgba(var(--primary-rgb), 0.02);
  border-color: rgba(var(--primary-rgb), 0.1);
}
.bs-plan-row:active { transform: scale(0.98); }
.bs-row-name {
  font-family: var(--font-display), serif; font-size: 1rem;
  font-weight: 400; color: var(--text); min-width: 36px;
}
.bs-row-credits { font-size: 0.78rem; color: var(--text-muted); margin-left: 6px; flex: 1; }
.bs-row-price {
  font-family: var(--font-display), serif; font-size: 1rem;
  font-weight: 400; color: var(--text); font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.bs-row-arrow { margin-left: 10px; color: var(--text-dimmed); font-size: 0.85rem; }

/* ── Responsive: Mobile ─────────────────────── */
@media (max-width: 600px) {
  .bs-header { margin-bottom: 20px; }
  .bs-title { font-size: 1.35rem; }
  .bs-sub { font-size: 0.82rem; }
  .bs-pack { padding: 20px 18px; }
  .bs-pack-price { font-size: 1.5rem; }
  .bs-sep { margin: 20px 0; }
  .bs-hero { padding: 22px 18px; }
  .bs-hero-price { font-size: 1.3rem; }
  .bs-plan-row { padding: 14px 16px; }
  .cta-fill { padding: 14px 18px; font-size: 0.92rem; }
  .cta-ghost { padding: 14px 18px; font-size: 0.88rem; }
}

/* ── Responsive: Desktop ────────────────────── */
@media (min-width: 900px) {
  .buy-sheet-simple .buy-sheet-scroll { max-width: 520px; }
  .buy-sheet-simple .buy-sheet-footer-v9 { max-width: 520px; }
  .bs-title { font-size: 1.75rem; }
  .bs-pack { padding: 28px 24px; }
  .bs-hero { padding: 32px 28px; }
  .cta-fill { padding: 16px 24px; font-size: 0.98rem; }
  .cta-ghost { padding: 16px 24px; font-size: 0.95rem; }
}

/* ============================================
   MODAL OVERLAY
   ============================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 40, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  /* Hold backdrop until content scale-out finishes so closing modals
     don't reveal whatever is underneath mid-transition. */
  transition: opacity 0.28s, visibility 0.28s;
  padding: 20px;
}

.modal-overlay.visible {
  opacity: 1;
  visibility: visible;
  z-index: 2147483647;
}

.modal-content {
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 36px 28px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  transform: scale(0.94);
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--hairline);
}

.modal-overlay.visible .modal-content {
  transform: scale(1);
}

.modal-icon {
  width: 60px;
  height: 60px;
  background: var(--tone-violet-50);
  color: var(--tone-violet-700);
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-size: 2.4rem;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}

.modal-text {
  font-family: var(--font-body);
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.5;
  margin-bottom: 22px;
}

.subscription-success-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: var(--card-tonal);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
}

/* Subscription success variant — violet accent (matches Pro tier) */
.subscription-success .modal-icon {
  background: var(--tone-violet-50);
  color: var(--tone-violet-700);
}

.subscription-success .modal-stat-value {
  color: var(--tone-violet-700);
}

.subscription-success .modal-value .value-item {
  color: var(--tone-violet-700);
}

.success-detail {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.modal-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 24px;
  padding: 20px;
  background: var(--card-tonal);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
}

.modal-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.modal-stat-value {
  font-family: var(--font-body);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--tone-emerald-700);
  letter-spacing: -0.025em;
}

.modal-stat-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.modal-value {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  padding: 18px;
  background: var(--card-tonal);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
}

.modal-value .value-item {
  font-family: var(--font-body);
  color: var(--tone-emerald-700);
  font-size: 13.5px;
  font-weight: 600;
}

.modal-btn {
  width: 100%;
  padding: 14px 22px;
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: transform 0.18s var(--ease-standard), box-shadow 0.2s var(--ease-standard), background 0.18s var(--ease-standard), color 0.18s var(--ease-standard);
  margin-bottom: 10px;
}

.modal-btn:last-child { margin-bottom: 0; }

.modal-btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
}

.modal-btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-tonal-violet-lg);
}

.modal-btn-secondary {
  background: transparent;
  color: var(--text-muted);
}

.modal-btn-secondary:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

/* ============================================
   CELEBRATION MODALS - Success states
   ============================================ */
.celebration-modal {
  overflow: hidden;
}

.celebration-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  transform: scale(0);
}

.modal-overlay.visible .celebration-icon {
  animation: celebration-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.celebration-icon svg {
  width: 100%;
  height: 100%;
}

@keyframes celebration-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.checkmark-draw {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
}

.modal-overlay.visible .checkmark-draw {
  animation: checkmark-draw 0.4s 0.3s var(--ease-out) forwards;
}

@keyframes checkmark-draw {
  to { stroke-dashoffset: 0; }
}

.celebration-stat {
  font-family: var(--font-display), serif;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
  opacity: 0;
  transform: translateY(10px);
}

.modal-overlay.visible .celebration-stat {
  animation: stat-entrance 0.5s 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.celebration-pack .celebration-stat {
  background: linear-gradient(135deg, #34D399, #10b981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.celebration-sub .celebration-stat {
  background: linear-gradient(135deg, var(--tone-violet) 0%, var(--tone-violet-700) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.celebration-stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(8px);
}

.modal-overlay.visible .celebration-stat-label {
  animation: stat-entrance 0.5s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes stat-entrance {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.celebration-modal .modal-title,
.celebration-modal .modal-text,
.celebration-modal .subscription-success-details,
.celebration-modal .modal-btn {
  opacity: 0;
}

.celebration-modal .success-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
}

.modal-overlay.visible .celebration-modal .modal-title {
  animation: stat-entrance 0.4s 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-overlay.visible .celebration-modal .modal-text {
  animation: stat-entrance 0.4s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-overlay.visible .celebration-modal .subscription-success-details {
  animation: stat-entrance 0.4s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-overlay.visible .celebration-modal .success-detail {
  animation: stat-entrance 0.3s calc(0.7s + var(--i) * 60ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-overlay.visible .celebration-modal .modal-btn {
  animation: stat-entrance 0.4s 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.celebration-pack .celebration-icon svg circle {
  stroke: var(--tone-emerald-100);
}
.celebration-pack .celebration-icon svg path {
  stroke: var(--tone-emerald);
}

.celebration-sub .celebration-icon svg circle {
  stroke: var(--tone-violet-100);
}
.celebration-sub .celebration-icon svg path {
  stroke: var(--tone-violet);
}

/* Violet pulse on success icon after celebration-pop completes */
.modal-overlay.visible .celebration-sub .celebration-icon {
  animation: celebration-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             violet-pulse 2s 1s var(--ease-in-out) infinite;
}

@keyframes violet-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }
  50% { filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.15)); }
}
/* Reduced motion: skip all celebration animations, show final state immediately.
   Fixes stuck invisible content on iOS low power mode, bfcache restore, and
   when prefers-reduced-motion is active. */
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.visible .celebration-icon { transform: scale(1); animation: none; }
  .modal-overlay.visible .checkmark-draw { stroke-dashoffset: 0; animation: none; }
  .modal-overlay.visible .celebration-stat,
  .modal-overlay.visible .celebration-stat-label,
  .modal-overlay.visible .celebration-modal .modal-title,
  .modal-overlay.visible .celebration-modal .modal-text,
  .modal-overlay.visible .celebration-modal .subscription-success-details,
  .modal-overlay.visible .celebration-modal .success-detail,
  .modal-overlay.visible .celebration-modal .modal-btn {
    opacity: 1; transform: translateY(0); animation: none;
  }
  .modal-overlay.visible .share-option-btn {
    opacity: 1; transform: translateY(0); animation: none;
  }
  /* Disable breathing glow on CTA buttons */
  .edit-btn,
  .cta-primary-v9,
  .header-try-free {
    animation: none !important;
  }
}

/* ============================================
   SHARE MODAL
   ============================================ */
.share-modal {
  max-width: 340px;
}

.share-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.share-option-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  background: var(--card-tonal);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.18s var(--ease-standard), border-color 0.18s var(--ease-standard), transform 0.18s var(--ease-standard), box-shadow 0.2s var(--ease-standard);
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text);
}

.share-option-btn:hover {
  background: var(--tone-violet-50);
  border-color: color-mix(in srgb, var(--tone-violet) 26%, transparent);
  color: var(--tone-violet-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-tonal-violet);
}

.share-option-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.modal-overlay.visible .share-option-btn {
  animation: share-btn-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-overlay:not(.visible) .share-option-btn {
  opacity: 0;
}

.modal-overlay.visible .share-option-btn:nth-child(1) { animation-delay: 0.1s; }
.modal-overlay.visible .share-option-btn:nth-child(2) { animation-delay: 0.16s; }
.modal-overlay.visible .share-option-btn:nth-child(3) { animation-delay: 0.22s; }

@keyframes share-btn-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.share-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(var(--primary-rgb), 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary);
  transition: background 0.2s;
}

.share-option-btn:hover .share-icon {
  background: rgba(var(--primary-rgb), 0.15);
}

.share-icon-svg {
  width: 20px;
  height: 20px;
}

.share-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}

.share-link-result {
  text-align: center;
  padding: 16px 0;
}

.share-success-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px auto;
  background: var(--success);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.share-success-text {
  color: var(--text);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.share-link-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--text);
  text-align: center;
  cursor: pointer;
}

.share-link-input:focus {
  outline: none;
  border-color: var(--primary);
}


/* ============================================
   ONBOARDING MODAL
   ============================================ */
.onboarding-modal {
  max-width: 420px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  text-align: center;
}

/* Mobile: Compact onboarding to fit small screens */
@media (max-height: 700px) {
  .onboarding-modal {
    padding: 20px 16px;
    max-height: 95vh;
    max-height: 95dvh;
  }

  .onboarding-header h2 {
    font-size: 1.2rem;
    margin-bottom: 2px;
  }

  .onboarding-subtitle {
    font-size: 0.85rem;
    margin-bottom: 12px;
  }

  .onboarding-steps {
    gap: 8px;
    margin-bottom: 12px;
  }

  .onboarding-step {
    gap: 8px;
  }

  .step-number {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
  }

  .step-text {
    font-size: 0.85rem;
  }

  .onboarding-comparison {
    padding: 12px;
    margin-bottom: 12px;
  }

  .onboarding-comparison h3 {
    font-size: 0.8rem;
    margin-bottom: 4px;
  }

  .comparison-prompt {
    font-size: 0.75rem;
    margin-bottom: 8px;
  }

  .compare-img {
    border-radius: 6px;
  }

  .compare-label,
  .compare-verdict {
    font-size: 0.65rem;
  }

  .compare-mode-label {
    font-size: 0.65rem;
    padding: 2px 6px;
  }

  .onboarding-btn {
    padding: 12px 20px;
    font-size: 0.9rem;
  }
}

/* Very small screens - hide comparison to ensure modal fits */
@media (max-height: 550px) {
  .onboarding-comparison {
    display: none;
  }
}

.onboarding-header h2 {
  font-family: var(--font-display);
  margin: 0 0 4px 0;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
}

.onboarding-subtitle {
  margin: 0 0 20px 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  text-align: left;
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step-number {
  width: 28px;
  height: 28px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}

.step-text {
  font-size: 0.95rem;
  color: var(--text);
}

.onboarding-comparison {
  background: var(--bg-subtle);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.onboarding-comparison h3 {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 600;
}

.comparison-prompt {
  margin: 0 0 14px 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

.onboarding-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.compare-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.compare-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.compare-column.smart .compare-img {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.compare-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.compare-mode-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 4px;
}

.compare-mode-label.smart {
  color: var(--primary);
}

.compare-mode-label .mode-cost {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg);
  padding: 2px 5px;
  border-radius: 6px;
}

.compare-verdict {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-align: center;
}

.compare-column.smart .compare-verdict {
  color: var(--primary);
  font-weight: 500;
}

.onboarding-btn {
  width: 100%;
  padding: 14px 24px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
}

.onboarding-btn:hover {
  background: var(--primary-hover);
}

/* ============================================
   CONVERSION MODAL V2 - Cinematic Celebration
   ============================================ */

.conversion-modal-v2 {
  max-width: 480px;
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  max-height: 90dvh;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  background: var(--bg);
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 24px 80px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(26, 26, 46, 0.03);
}

/* Entrance animation */
#conversionModal.visible .conversion-modal-v2 {
  animation: conversionReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes conversionReveal {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Subtle X dismiss - delayed visibility */
.conversion-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  opacity: 0;
  transition: opacity 0.3s var(--ease-standard) 0.8s, background 0.2s;
}

#conversionModal.visible .conversion-dismiss {
  opacity: 0.6;
}

.conversion-dismiss:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.6);
}

/* Hero image - subtle frame */
.conversion-preview-v2 {
  width: 100%;
  flex: 1;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  background: var(--bg-secondary);
  overflow: hidden;
  padding: 24px;
}

/* Ambient glow behind image */
.conversion-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 50% 50%,
    rgba(26, 26, 46, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.conversion-preview-v2 img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 0 1px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 1;
  animation: imageReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes imageReveal {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Save badge - cleaner, more intentional */
.conversion-save-badge {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  z-index: 2;
  animation: badgeReveal 0.4s var(--ease-out) 0.6s both;
}

@keyframes badgeReveal {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.conversion-save-badge svg {
  opacity: 0.7;
}

/* Legacy save hint - hidden, replaced by badge */
.conversion-save-hint {
  display: none;
}

/* Content area */
.conversion-content {
  padding: 24px 24px 28px;
  text-align: center;
  background: var(--bg);
}

/* Header with staggered reveal */
.conversion-header {
  margin-bottom: 20px;
}

.conversion-celebration {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  animation: textReveal 0.4s var(--ease-out) 0.2s both;
}

@keyframes textReveal {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.conversion-message {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
  animation: textReveal 0.4s var(--ease-out) 0.3s both;
}

/* Primary CTA - prominent, confident */
.conversion-cta {
  width: 100%;
  background: var(--primary);
  border: none;
  border-radius: 14px;
  padding: 18px 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  animation: ctaReveal 0.4s var(--ease-out) 0.4s both;
  position: relative;
  overflow: hidden;
}

@keyframes ctaReveal {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Shimmer effect on CTA */
.conversion-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  animation: ctaShimmer 2.5s var(--ease-standard) 1s infinite;
}

@keyframes ctaShimmer {
  0% { transform: translateX(-100%); }
  50%, 100% { transform: translateX(100%); }
}

.conversion-cta:hover {
  transform: translateY(-2px);
  background: var(--primary-hover);
  box-shadow:
    0 8px 24px rgba(var(--primary-rgb), 0.35),
    0 4px 12px rgba(var(--primary-rgb), 0.2);
}

.conversion-cta:active {
  transform: translateY(0);
}

.conversion-cta-value {
  font-size: 1.15rem;
  font-weight: 600;
  color: white;
  position: relative;
  z-index: 1;
}

.conversion-cta-subtext {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.conversion-cta-price {
  font-weight: 600;
}

.conversion-cta-unit {
  opacity: 0.9;
}

/* Trust signals - subtle, credible */
.conversion-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--text-dimmed);
  animation: textReveal 0.4s var(--ease-out) 0.5s both;
}

.conversion-trust-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.conversion-trust-item svg {
  color: #f59e0b;
}

.conversion-trust-sep {
  opacity: 0.4;
}

/* One-time CTA - for users who don't want a subscription */
.conversion-onetime-cta {
  width: 100%;
  background: transparent;
  border: none;
  padding: 10px 20px;
  margin-top: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--primary);
  transition: all 0.15s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  animation: textReveal 0.4s var(--ease-out) 0.5s both;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.15);
  text-underline-offset: 3px;
}

.conversion-onetime-cta:hover {
  text-decoration-color: var(--primary);
}

.conversion-onetime-cta:active {
  transform: scale(0.98);
}

/* Secondary CTA */
.conversion-secondary-cta {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 20px;
  margin-top: 12px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.15s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  animation: textReveal 0.4s var(--ease-out) 0.55s both;
}

.conversion-secondary-cta:hover {
  background: var(--glow);
  border-color: var(--primary-light);
  color: var(--text);
}

.conversion-secondary-cta:active {
  transform: scale(0.98);
}

/* Legacy elements - hidden in new design */
.conversion-value-anchor,
.conversion-features-inline,
.conversion-social-proof {
  display: none;
}

/* ============================================
   MOBILE: Full-screen cinematic mode
   ============================================ */
@media (max-width: 599px) {
  .conversion-modal-v2 {
    position: fixed;
    inset: 0;
    z-index: 10002;
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    border-radius: 0;
    background: var(--bg);
  }

  .conversion-preview-v2 {
    min-height: min(40dvh, 240px);
    max-height: 45dvh;
    flex: 0 1 auto;
    padding: 20px;
  }

  .conversion-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .conversion-header {
    margin-bottom: 16px;
  }

  .conversion-celebration {
    font-size: 1.5rem;
  }

  .conversion-message {
    font-size: 0.9rem;
  }

  .conversion-cta {
    padding: 16px 24px;
  }

  .conversion-trust {
    margin-top: 12px;
  }
}

/* Very small height screens */
@media (max-width: 599px) and (max-height: 600px) {
  .conversion-preview-v2 {
    min-height: 120px;
    max-height: 140px;
    padding: 16px;
  }

  .conversion-content {
    padding: 16px 20px;
  }

  .conversion-header {
    margin-bottom: 12px;
  }

  .conversion-celebration {
    font-size: 1.25rem;
    margin-bottom: 4px;
  }

  .conversion-message {
    font-size: 0.85rem;
  }

  .conversion-cta {
    padding: 14px 20px;
  }

  .conversion-cta-value {
    font-size: 1rem;
  }

  .conversion-trust {
    margin-top: 10px;
  }

  .conversion-secondary-cta {
    padding: 12px 16px;
    margin-top: 10px;
  }
}

.conversion-signup-box {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}

.conversion-signup-offer {
  margin-bottom: 16px;
  text-align: center;
}

.conversion-signup-badge {
  display: inline-block;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.conversion-signup-text {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.conversion-email-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1rem;
  background: var(--bg);
  color: var(--text);
  margin-bottom: 12px;
  box-sizing: border-box;
}

.conversion-email-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* ============================================
   UNIFIED PAYWALL — Single-screen conversion
   Full-screen premium takeover.
   Single centered column on ALL devices.
   ============================================ */

/* Container — full-screen takeover */
.paywall {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* Height is locked in JS via --paywall-locked-height on open so keyboard /
     URL-bar / predictive-bar viewport changes don't reflow paywall mid-flow.
     Sessions 019e2358 / 019e235a showed dvh-driven 384x720↔384x428 cycling
     during typing. Fallback to dvh / 100% when the var is unset. */
  height: 100%;
  height: 100dvh;
  height: var(--paywall-locked-height, 100dvh);
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  -webkit-overflow-scrolling: touch;
}


/* Violet ambient glow */
.paywall::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center top, var(--tone-violet-50) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

.paywall > * {
  position: relative;
  z-index: 1;
}
#conversionModal.visible {
  padding: 0;
  /* Anchor paywall to viewport top so a height-locked paywall (taller than
     modal-overlay when the keyboard shrinks the layout viewport) overflows
     only below — the bottom is reachable via .paywall's own scroll, and the
     headline stays visible at top instead of getting clipped above the
     viewport by align-items: center. */
  align-items: flex-start;
}

#conversionModal.visible .paywall {
  animation: paywallReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes paywallReveal {
  0% {
    opacity: 0;
    transform: scale(0.97);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Screen visibility system */
.paywall-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 520px;
  padding: 0 24px 32px;
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  animation: textReveal 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Active screen fills the paywall vertically so the sticky primary CTA
   can dock to the viewport bottom (buy-sheet pattern). `min-height: 0`
   lets the flex item shrink below content height when the screen needs
   to scroll. */
.paywall[data-active-screen="1"] .paywall-screen[data-screen="1"],
.paywall[data-active-screen="2"] .paywall-screen[data-screen="2"],
.paywall[data-active-screen="3"] .paywall-screen[data-screen="3"],
.paywall[data-active-screen="4"] .paywall-screen[data-screen="4"] {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* paywall-peak-vs-current variant gates + Screen 3 markup removed 2026-05-16.
   Orphaned .paywall-screen--peak / .paywall-screen--control / .downsell /
   .paywall-cta--downsell rules below match no DOM and can be swept in a
   later cleanup pass. */

/* Buy-sheet "primary CTA always reachable" pattern, applied uniformly
   across the conversion modal so the purchase button stays visible at
   the bottom of the viewport without scrolling.

   1. Card-style sub-containers (offer-card on Screen 1 peak, drawer on
      Screen 3 peak, downsell on Screen 3 control) fill their parent
      paywall-screen vertically, so margin-top:auto on their sticky CTA
      actually has slack to absorb.
   2. .paywall-cta--sticky uses margin-top:auto to dock to the bottom of
      its flex column parent. DOM-order siblings *after* the CTA (trust
      row, see-all link, "no thanks" dismiss) sit just below the CTA at
      the bottom of the screen — they're secondary and lose nothing by
      being below the primary action.
   3. Screen 2's one-time pack section is already hidden via the
      `display:none !important` rule below, so subscribe is effectively
      the only CTA on that screen — safe to dock to the bottom. */
.paywall .paywall-screen--peak .paywall-offer-card,
.paywall .paywall-drawer,
.paywall .downsell {
  flex: 1;
}
.paywall .paywall-cta--sticky {
  margin-top: auto;
}

/* Screen 1 control: the sticky CTA lives mid-DOM with .paywall-trust-row
   and #paywallSeeAll ("Maybe later") *after* it in source order. Without
   reordering, margin-top:auto packs the CTA at the content-area bottom and
   the trust row + maybe-later spill into the padding-bottom area and
   overflow the modal — visible as a half-clipped "APPLE PAY ·" line at the
   bottom of the animate paywall. Order:99 on the CTA moves it to the
   visual end so trust + maybe-later sit *above* it; margin-top:auto then
   absorbs the gap and the CTA docks cleanly at the bottom. Applies to
   both the standard and animate-mode control variants. */
.paywall .paywall-screen--control .paywall-cta--sticky {
  order: 99;
}
/* Hide the S2 pack section for BOTH variants. S2 is the subscription comparison
   screen; surfacing a one-time pack CTA on the same scroll creates two competing
   offers and erodes trust. Pack offers are reached via Control S1 (slider) or
   Peak S3 (slider). */
.paywall .paywall-onetime-divider,
.paywall .paywall-screen2-slider,
.paywall #paywallScreen2PackCta { display: none !important; }

/* Peak Screen 1 sub-anchor card visuals. Reconstructed from peak (Mar 10)
   styling — flat card on dark neutral, popular badge accent, big price. */
.paywall-screen--peak .paywall-offer-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

/* Subtle eyebrow above the anchor card — inherits the unified
   .paywall-social-proof pill recipe so peak S1 + control S1 read identically.
   Slight size tweak so the pill sits inside the offer card without crowding. */
.paywall-screen--peak .paywall-social-proof {
  font-size: 11px;
  letter-spacing: 0.10em;
  margin: 0 auto 14px;
}

/* Plan anchor card — applies the homepage hero-card / buy sheet hero-tier
   recipe so the recommended option visually reads as the selected card on
   the rest of the surface. Warm violet tonal wash, solid violet border,
   layered shadow + violet glow, snappy cubic-bezier lift. */
.paywall-screen--peak .paywall-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 22px;
  background: linear-gradient(180deg, var(--tone-violet-50) 0%, var(--card) 60%);
  border: 1.5px solid var(--tone-violet);
  border-radius: 16px;
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  transform: translateY(-2px);
  margin: 0;
  text-align: left;
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.paywall-screen--peak .plan-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0;
}
.paywall-screen--peak .paywall-plan-name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tone-violet-700);
  margin: 0;
}
/* POPULAR pill — solid violet, with violet glow shadow, matches .bs-tier-badge
   and .paywall-tier-badge so the badge reads identical across surfaces. */
.paywall-screen--peak .plan-popular-badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--tone-violet);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(124, 92, 252, 0.30);
}
.paywall-screen--peak .paywall-plan-value-prop {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}
.paywall-screen--peak .paywall-plan-value-prop span {
  font-weight: 700;
  color: var(--tone-violet-700);
}
.paywall-screen--peak .paywall-plan-pricing {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 2px 0 0;
  justify-content: flex-start;
}
/* Hero metric — display serif at editorial weight, matches .bs-tier-credits
   and homepage pricing big-number recipe. Violet on this card since the
   whole card is the "selected" state. */
.paywall-screen--peak .plan-price-large {
  font-family: var(--font-display), serif;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--tone-violet-700);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.paywall-screen--peak .plan-price-period {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
}
.paywall-screen--peak .paywall-plan-billing {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dimmed);
  letter-spacing: 0.005em;
  margin: 0;
}
.paywall-screen--peak .paywall-value-demo {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.paywall-screen--peak .value-demo-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.paywall-screen--peak .demo-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 50%;
}
.paywall-screen--peak .demo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.paywall-screen--peak .demo-text strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.paywall-screen--peak .demo-text span {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.paywall-screen--peak .paywall-see-all {
  background: none;
  border: none;
  color: var(--tone-violet-700);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  padding: 8px;
  cursor: pointer;
  margin-top: 6px;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--tone-violet) 32%, transparent);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s ease;
}
.paywall-screen--peak .paywall-see-all:hover {
  color: var(--tone-violet-700);
  text-decoration-color: var(--tone-violet);
}
.paywall-screen--peak .paywall-reassurance {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dimmed);
  text-align: center;
  margin-top: 2px;
  letter-spacing: 0.04em;
}

.paywall-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.25s var(--ease-standard), background 0.2s var(--ease-standard), color 0.2s, transform 0.1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--shadow-sm);
}

.paywall-close svg { pointer-events: none; }

/* ---- Back arrow (top-left, mirror of close button) ----
   Visible only when currentScreen > 1. Lets users return to the slider after
   exploring the Screen 2 tier picker without dismissing the whole paywall. */
.paywall-back {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 10;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.2s var(--ease-standard), color 0.2s, transform 0.1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--shadow-sm);
}
.paywall-back:hover {
  background: var(--card-tonal);
  color: var(--text);
}
.paywall-back:active { transform: scale(0.94); }
.paywall-back svg { pointer-events: none; }
.paywall[data-active-screen="2"] .paywall-back,
.paywall[data-active-screen="3"] .paywall-back {
  display: flex;
}

/* ---- Screen 1 savings pill — sits right of the slider hint, updates live ---- */
.paywall-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  min-height: 22px;
}
.paywall-slider-savings {
  display: inline-block;
  background: var(--tone-emerald-50, #D9F7EB);
  color: var(--tone-emerald-700, #047857);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.18s var(--ease-standard);
}
.paywall-slider-savings.is-visible { opacity: 1; }

/* ---- Forced-dwell countdown (replaces X for first 3s of each screen) ---- */
/* Lock countdown badge — was pure-dark pill which Playwright QA flagged
   as the heaviest dark element on the page (pulling focus from the offer).
   Toned to a muted violet so it reads as a quiet status indicator. */
.paywall-close[data-locked="true"] {
  cursor: default;
  background: var(--tone-violet-700);
  border-color: var(--tone-violet-700);
  color: #fff;
}
.paywall-close[data-locked="true"]:hover {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}
.paywall-close[data-locked="true"]:active { transform: none; }
.paywall-close-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: rotate(-90deg);
  overflow: visible;
}
.paywall-close-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 2.5;
}
.paywall-close-ring-progress {
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 87.965;       /* 2π·14 — full circumference */
  stroke-dashoffset: 87.965;       /* starts hidden, JS animates to 0 */
}
.paywall-close[data-locked="true"] .paywall-close-x { display: none; }
.paywall-close:not([data-locked="true"]) .paywall-close-ring { display: none; }

#conversionModal.visible .paywall-close {
  opacity: 1;
}

.paywall-close:hover {
  color: var(--tone-rose-700);
  background: var(--tone-rose-50);
  border-color: color-mix(in srgb, var(--tone-rose) 22%, transparent);
}

.paywall-close:active {
  transform: scale(0.92);
}

/* ---- Hero: Compact, centered ---- */
.paywall-hero {
  width: 100%;
  max-width: 520px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  padding: 24px 24px 28px;
  max-height: none;
}

/* Before/after hero — single image, tap to toggle.
   The toggle is a fixed-height stage so both images can be absolutely
   positioned and cross-fade cleanly with no layout shift.
   paywall_v2: capped at 35-40vh on mobile so slider+CTA never scroll below fold. */
.paywall-hero-toggle {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 200px;
  z-index: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  animation: imageReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
  border-radius: 12px;
}

/* Mobile: cap hero height so CTA stays visible without scrolling */
@media (max-width: 480px) and (max-height: 750px) {
  .paywall-hero {
    padding: 16px 24px 20px;
  }
  .paywall-hero-toggle {
    height: 35vw;
    max-height: 38vh;
  }
}

@media (max-width: 480px) and (min-height: 751px) {
  .paywall-hero {
    padding: 20px 24px 24px;
  }
  .paywall-hero-toggle {
    height: 38vw;
    max-height: 40vh;
  }
}

.paywall-hero-toggle:active {
  transform: scale(0.985);
  transition: transform 0.08s ease-out;
}

/* Quick pulse on tap — gives users instant tactile feedback that the
   tap registered, even before the cross-fade completes. */
.paywall-hero-toggle--pressed {
  animation: paywallHeroPulse 0.32s ease-out;
}

@keyframes paywallHeroPulse {
  0%   { transform: scale(0.985); }
  40%  { transform: scale(1.012); }
  100% { transform: scale(1); }
}

/* Brief scale-down pulse when a rapid tap is debounced — confirms the touch
   registered even though the image hasn't switched yet. */
@keyframes paywall-hero-toggle-bounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.paywall-hero-toggle--bounce {
  animation: paywall-hero-toggle-bounce 150ms ease-out;
}

.paywall-hero-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--hairline);
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

.paywall-hero-img--active {
  opacity: 1;
}

/* Guard: when the paywall is opened without a real edit image (e.g. recovery
   flows, surface-test invocations, manual triggers), the <img> elements get
   an empty src and the browser renders a broken-image icon + literal alt
   text ("Your edit"). Hide imgs without a usable src so we never leak that
   placeholder onto the modal. The active img toggle still works once a real
   src is assigned by conversion.js. */
.paywall-hero-img:not([src]),
.paywall-hero-img[src=""],
.paywall-hero-img[src="#"] {
  display: none;
}
/* If neither image has a real src, collapse the whole hero stage so the
   modal isn't visually anchored to empty space. */
.paywall-hero-toggle:has(> img:not([src])),
.paywall-hero-toggle:has(> img[src=""]) {
  display: none;
}
.paywall-hero:has(.paywall-hero-toggle > img:not([src])),
.paywall-hero:has(.paywall-hero-toggle > img[src=""]) {
  min-height: 0;
  padding: 0;
}

.paywall-hero-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--tone-violet);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  z-index: 2;
  transition: background 0.2s;
  pointer-events: none;
  box-shadow: var(--shadow-tonal-violet);
}

.paywall-hero-badge[data-state="before"] {
  background: var(--text-muted);
  box-shadow: var(--shadow-sm);
}

.paywall-hero-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.96);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  white-space: nowrap;
  z-index: 2;
  opacity: 1;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.paywall-hero-hint::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--tone-violet);
  animation: paywallHintPulse 1.8s ease-in-out infinite;
}

@keyframes paywallHintPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* ---- Screen 1: Inline Pricing ---- */

/* Trust microcopy between buy CTA and sub-mention — mono small-caps so it
   reads as system-voice metadata, not marketing prose. Matches the homepage
   pricing trust row + buy sheet bs-cta-microcopy treatment. */
.paywall-trust-row {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
  margin: 12px 0 0;
  padding: 0 12px;
  line-height: 1.5;
  animation: textReveal 0.35s var(--ease-out) 0.32s both;
}

/* paywall_v2: Social proof pill on Screen 1 — neutral dark-tint chip per the
   f52403cfc reweight. Soft tonal background counterbalances the pricing hero
   without becoming hero-sized. Reads as a calming caption, not a feature.
   (Was tone-violet-50 / violet-700 pre-reweight; unified to the dark-tint
   recipe across all breakpoints for consistency.) */
.paywall-s1-social-proof {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 14px;
  padding: 6px 12px;
  background: rgba(20, 20, 40, 0.045);
  border: none;
  border-radius: var(--r-pill);
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  animation: textReveal 0.35s var(--ease-out) 0.1s both;
}

/* Mobile: allow wrapping on very narrow screens */
@media (max-width: 360px) {
  .paywall-s1-social-proof {
    white-space: normal;
    font-size: 10.5px;
  }
}

.paywall-see-all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px; /* Material 48dp tap target floor */
  padding: 10px 16px;
  margin-top: 4px;
  background: none;
  border: none;
  color: var(--tone-violet-700);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
  letter-spacing: 0.005em;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--tone-violet) 32%, transparent);
  text-underline-offset: 4px;
}

.paywall-see-all:hover {
  color: var(--tone-violet-700);
  text-decoration-color: var(--tone-violet);
}

.paywall-see-all:active { color: var(--tone-violet-700); }

/* paywall_v2: "Maybe later" dismiss variant — muted, not violet */
.paywall-see-all--dismiss {
  color: var(--text-dimmed);
  font-weight: 500;
  text-decoration-color: transparent;
}
.paywall-see-all--dismiss:hover {
  color: var(--text-muted);
  text-decoration-color: transparent;
}
.paywall-see-all--dismiss:active { color: var(--text-muted); }

/* One-time divider — mono small-caps centered between hairlines. Same recipe
   as the .bs-onetime-divider / .bs-sep treatment so the visual rhythm of
   "subscribe above / pay once below" reads identically across surfaces. */
.paywall-onetime-divider {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-dimmed);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 18px 0 10px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.paywall-onetime-divider::before,
.paywall-onetime-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}

/* ---- Screen 1: The Hook ---- */

.paywall-headline {
  font-family: var(--font-display), serif;
  font-size: 1.85rem;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 8px;
  text-align: center;
  letter-spacing: -0.03em;
  line-height: 1.1;
  animation: textReveal 0.35s var(--ease-out) 0.15s both;
}

.paywall-value-text {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 20px;
  text-align: center;
  max-width: 36ch;
  animation: textReveal 0.35s var(--ease-out) 0.2s both;
}

/* Paywall slider — tonal-violet track + thumb to match credits-slider.
 * Visual track is 6px but the input is 44px tall for a HIG-compliant
 * touch target; gradient centers the visible track vertically. */
.paywall-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: linear-gradient(
    to right,
    var(--tone-violet) 0%,
    var(--tone-violet) var(--slider-fill, 33%),
    var(--bg-secondary) var(--slider-fill, 33%),
    var(--bg-secondary) 100%
  ) no-repeat center/100% 8px;
  border-radius: var(--r-pill);
  outline: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.paywall-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--card);
  cursor: grab;
  border: 3px solid var(--tone-violet);
  box-shadow: var(--shadow-tonal-violet);
  transition: transform 0.16s var(--ease-standard);
}
.paywall-slider::-webkit-slider-thumb:hover { transform: scale(1.10); }
.paywall-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
.paywall-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--card);
  cursor: grab;
  border: 3px solid var(--tone-violet);
  box-shadow: var(--shadow-tonal-violet);
}
.paywall-slider::-moz-range-track {
  height: 44px;
  border: none;
  background: transparent;
}

/* Shared CTA base — impulse + downsell */
/* Primary CTA recipe — mirrors .bs-subscribe-cta (the homepage hero design
   language): dark fill with violet undertone gradient, layered violet glow
   shadow, snappy cubic-bezier lift on hover. Applied to --impulse (Screen 1B
   pack CTA + Screen 2 Subscribe) and --downsell (Screen 3 + recovery modal). */
.paywall-cta--impulse,
.paywall-cta--downsell {
  min-height: 56px;
  font-family: var(--font-body);
  font-size: 14.5px;
  border-radius: var(--r-pill);
  padding: 14px 24px;
  margin-bottom: 0;
  background: linear-gradient(135deg, var(--primary) 0%, #2a2a4a 100%);
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s var(--ease-standard);
}

.paywall-cta--impulse:hover,
.paywall-cta--downsell:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, #34345a 100%);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), 0 12px 36px rgba(124, 92, 252, 0.32);
}

.paywall-cta--impulse:active,
.paywall-cta--downsell:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm), var(--shadow-tonal-violet);
}

/* Arrow-bearing variant — same recipe as .bs-subscribe-cta. Content lives
   on the left in a stacked label+sub column, arrow on the right that
   slides +4px on hover via the homepage cubic-bezier(0.16, 1, 0.3, 1)
   spring. Only applies when the button has the .paywall-cta--with-arrow
   modifier (so non-arrow CTAs keep their existing vertical layout). */
.paywall-cta--with-arrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-left: 24px;
  padding-right: 22px;
}
.paywall-cta--with-arrow .paywall-cta-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1;
  text-align: left;
}
.paywall-cta-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.92);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.paywall-cta--with-arrow:hover .paywall-cta-arrow {
  transform: translateX(4px);
  color: #fff;
}

.paywall-cta--impulse .paywall-cta-label,
.paywall-cta--downsell .paywall-cta-label {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #fff;
}

.paywall-cta--impulse .paywall-cta-price,
.paywall-cta--downsell .paywall-cta-price {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  letter-spacing: 0.005em;
  margin-top: 2px;
}

/* The post-edit/pre-edit checkout CTA. Mirrors .edit-btn's role on the
   editor surface (the "moment of action" button) so the paywall reads as a
   native part of the app, not a marketing overlay. Subtle 4s shadow breath
   matches edit-btn-glow rhythm at half the amplitude — confident, not noisy. */
.paywall-cta--impulse {
  animation:
    textReveal 0.35s var(--ease-out) 0.3s both,
    paywallCtaBreath 4s var(--ease-standard) 1s infinite;
}
@keyframes paywallCtaBreath {
  0%, 100% { box-shadow: var(--shadow-md), var(--shadow-tonal-violet); }
  50%      { box-shadow: var(--shadow-lg), 0 8px 26px rgba(124, 92, 252, 0.26); }
}
/* Pause the breath while user is hovering or pressing — hover/active styles
   own the shadow during interaction. */
.paywall-cta--impulse:hover,
.paywall-cta--impulse:active {
  animation: textReveal 0.35s var(--ease-out) 0.3s both;
}

/* On very short viewports (iPhone SE: 667px), keep slider/headline compact */
@media (max-height: 680px) {
  .paywall-slider-hint { font-size: 0.65rem; min-height: 1.2em; margin-bottom: 4px; }
  .paywall-headline { font-size: 1rem !important; margin: 4px 0 6px !important; }
  .paywall-s1-social-proof { font-size: 0.7rem !important; margin-bottom: 4px !important; }
}

/* Pack selector — tonal slider section. Same recipe as the homepage pack
   slider + .bs-slider-zone: warm tonal background card, generous padding,
   hairline border, 16px radius. Frames the slider as a deliberate
   exploration tool, not loose UI.
   width: 100% is REQUIRED — parent is flex column with align-items: center,
   so without it the pack-selector shrinks to content, the slider (width:
   100%) collapses circularly to a tiny width, AND every time the active
   notch goes bold the wider label re-expands the container mid-drag,
   making the slider visibly resize as you slide it. */
.paywall-pack-selector {
  width: 100%;
  margin-bottom: 14px;
  padding: 18px 18px 12px;
  background: var(--card-tonal);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}
/* Slider hint — mono small-caps eyebrow above the slider. Frames the
   interaction as a deliberate tool. min-height reserves two lines to prevent
   layout shift when the longer hints (e.g. pack-25, pack-100) wrap on narrow
   viewports. Cross-fades on copy change (JS toggles .is-fading ~140ms). */
.paywall-slider-hint {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-dimmed);
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 2.4em;
  transition: opacity 0.18s var(--ease-standard);
  animation: textReveal 0.35s var(--ease-out) 0.25s both;
}
.paywall-slider-hint.is-fading { opacity: 0; }

/* Paywall notches — same alignment trick as .credits-slider-notches. */
.paywall-slider-notches {
  position: relative;
  margin: 8px 12px 0;
  height: 32px;
}

.paywall-slider-notches span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 0.66rem;
  color: var(--text-dimmed, #aaa);
  font-weight: 400;
  min-width: 0;
  text-align: center;
  padding: 6px 3px;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s, background 0.15s, font-weight 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.paywall-slider-notches span:hover {
  color: var(--text-secondary, #666);
  background: var(--bg-secondary, rgba(0,0,0,0.03));
}

.paywall-slider-notches span.active {
  color: var(--text, #1a1a2e);
  font-weight: 700;
  background: var(--bg-secondary, rgba(0,0,0,0.05));
}

/* Mobile fit — at narrow widths the right-side notches (50, 100, 200, 500)
   collide because each label is wider than its 1/6 slot. Tighten padding,
   font size, and drop the active background so the labels stay legible at
   375px without overlap. Applies to BOTH the screen-1 paywall slider AND
   the screen-2 credits slider — same 7-stop layout, same overlap risk. */
@media (max-width: 480px) {
  .paywall-slider-notches,
  .credits-slider-notches { margin: 8px 2px 0; height: 26px; }
  .paywall-slider-notches span,
  .credits-slider-notches span {
    font-size: 0.58rem;
    min-width: 0;
    padding: 4px 1px;
    letter-spacing: -0.01em;
  }
  .paywall-slider-notches span.active,
  .credits-slider-notches span.active { background: transparent; }
}


/* Social proof — pill chip inside offer card. Unified with .paywall-s1-social-proof
   so peak S1 + control S1 share the same neutral dark-tint recipe. Hairline-divider
   variant was retired May 2026 (audit-driven cross-surface consistency sweep). */
.paywall-social-proof {
  display: inline-flex;
  align-self: center;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 16px;
  padding: 6px 12px;
  background: rgba(20, 20, 40, 0.045);
  border-radius: var(--r-pill);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Plan card inside offer card */
.paywall-plan-card {
  background: linear-gradient(165deg, rgba(var(--primary-rgb), 0.06), rgba(var(--primary-rgb), 0.02));
  border: 1px solid rgba(var(--primary-rgb), 0.15);
  border-radius: 14px;
  padding: 18px 20px 16px;
  text-align: center;
  margin-bottom: 16px;
  position: relative;
}

.plan-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.plan-popular-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
  padding: 3px 8px;
  border-radius: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.paywall-plan-value-prop {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.4;
}

.paywall-plan-pricing {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 4px;
}

.plan-price-large {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.plan-price-period {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.paywall-plan-billing {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.paywall-plan-name {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 2px;
}

.paywall-plan-credits {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.paywall-plan-unit {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-dimmed);
  letter-spacing: 0.01em;
}

.paywall-plan-price {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-top: 4px;
}

/* Base paywall CTA — dark gradient fill with violet undertone, layered
   tonal-violet glow shadow, snappy cubic-bezier hover lift. Matches
   .bs-subscribe-cta from the simplified buy sheet (homepage hero design
   language). Includes a 1px violet rim at the top edge via ::before. */
.paywall-cta {
  width: 100%;
  background: linear-gradient(135deg, var(--primary) 0%, #2a2a4a 100%);
  color: white;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s var(--ease-standard);
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  position: relative;
  overflow: hidden;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 14px 24px;
  margin-bottom: 16px;
  font-family: var(--font-body);
}

/* Subtle violet rim glow at the top edge — like the homepage hero card's
   rim light, applied inside the button rather than around it. */
.paywall-cta::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(124, 92, 252, 0.4) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.paywall-cta-label {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.005em;
}

.paywall-cta-price {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.005em;
}

.paywall-cta-price.is-hidden {
  display: none;
}

.paywall-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  animation: ctaShimmer 2.5s var(--ease-standard) 1.2s infinite;
}

.paywall-cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--primary-hover) 0%, #34345a 100%);
  box-shadow: var(--shadow-lg), 0 12px 36px rgba(124, 92, 252, 0.32);
}

.paywall-cta:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm), var(--shadow-tonal-violet);
}

.paywall-cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Primary CTA variant — inherits the .paywall-cta base recipe (dark gradient
   + violet rim glow + violet glow shadow + cubic-bezier lift), but renders
   horizontal: label on the left, price chip on the right. Same layout as
   .bs-subscribe-cta on the simplified buy sheet.
   Height/padding inherited from .paywall-cta base (min-height: 56px,
   padding: 14px 24px) — variants change layout + color only, not size. */
.paywall-cta--primary {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, var(--primary) 0%, #2a2a4a 100%);
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  border: none;
}

.paywall-cta--primary:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, #34345a 100%);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), 0 12px 36px rgba(124, 92, 252, 0.32);
}

.paywall-cta--primary .paywall-cta-label {
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #fff;
  text-align: left;
  flex: 1;
}

.paywall-cta--primary .paywall-cta-price {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.005em;
  text-align: right;
  white-space: nowrap;
}

/* Sticky primary CTA — keeps the primary action reachable on short viewports.
   The first box-shadow stop is a --bg-colored fade above the button so content
   scrolling underneath dissipates softly instead of cutting off at a hard edge.
   Safe-area inset already lives on .paywall-screen padding-bottom, so we reset
   margin-bottom to 0 to avoid stacking it with the base .paywall-cta 16px. */
.paywall-cta--sticky {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background-color: var(--bg);
  box-shadow:
    0 -16px 16px -8px var(--bg),
    var(--shadow-md),
    var(--shadow-tonal-violet);
  margin-bottom: 0;
}

.paywall-cta--sticky:hover {
  box-shadow:
    0 -16px 16px -8px var(--bg),
    var(--shadow-lg),
    var(--shadow-tonal-violet-lg);
}

/* Feature list — Grok-style circle icons */
.paywall-value-demo {
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.value-demo-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.value-demo-item:nth-child(1) { animation: textReveal 0.4s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.value-demo-item:nth-child(2) { animation: textReveal 0.4s 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.value-demo-item:nth-child(3) { animation: textReveal 0.4s 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }

.demo-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
}

.demo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.demo-text strong {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.demo-text span {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}


/* ---- Screen 2: Shrink hero so plans are above fold ----
   MOBILE ONLY. On desktop (≥900px) the paywall is a two-column grid where the
   hero lives in its own left column at full height — shrinking it here would
   collapse the image to ~100px in an 480px column (May 2026 bug). */
@media (max-width: 899px) {
  .paywall[data-active-screen="2"] .paywall-hero {
    padding: 12px 24px 8px;
  }

  .paywall[data-active-screen="2"] .paywall-hero-toggle {
    height: 100px;
  }

  .paywall[data-active-screen="2"] .paywall-hero-img {
    max-height: 100px;
  }
}

/* ---- Screen 2: Full Plan Comparison ---- */

.paywall-drawer {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  animation: textReveal 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.paywall-drawer-title {
  font-family: var(--font-display), serif;
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 18px;
  text-align: center;
  letter-spacing: -0.03em;
  line-height: 1.15;
}


.paywall-billing-toggle {
  background: var(--bg-secondary);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 4px;
  display: flex;
  margin-bottom: 20px;
  font-family: var(--font-body);
}

.paywall-billing-option {
  flex: 1;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dimmed);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, background 0.24s ease;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  -webkit-tap-highlight-color: transparent;
}

.paywall-billing-option--active {
  background: var(--card);
  color: var(--tone-violet-700);
  box-shadow: 0 1px 3px rgba(20, 20, 40, 0.10), 0 1px 1px rgba(20, 20, 40, 0.05);
}

.paywall-save-badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--tone-emerald-50);
  color: var(--tone-emerald-700);
  padding: 3px 7px;
  border-radius: var(--r-pill);
}

/* Tier cards (Screen 2) — always 3 columns */
.paywall-tiers {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 18px;
}

.paywall-tier {
  background: var(--card);
  border: 1.5px solid var(--hairline);
  border-radius: 16px;
  flex: 1;
  padding: 28px 12px 16px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  font-family: var(--font-body);
}

.paywall-tier:hover {
  border-color: color-mix(in srgb, var(--tone-violet) 28%, transparent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.paywall-tier--selected {
  border-color: var(--tone-violet);
  background: linear-gradient(180deg, var(--tone-violet-50) 0%, var(--card) 60%);
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  transform: translateY(-2px);
}

.paywall-tier--selected:hover {
  border-color: var(--tone-violet);
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), 0 12px 36px rgba(124, 92, 252, 0.22);
}

.paywall-tier-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--tone-violet);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(124, 92, 252, 0.30);
  z-index: 2;
}

.paywall-tier-name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.paywall-tier--selected .paywall-tier-name {
  color: var(--tone-violet-700);
}

.paywall-tier-credits {
  font-family: var(--font-display), serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.paywall-tier--selected .paywall-tier-credits {
  color: var(--tone-violet-700);
  font-size: 2.4rem;
}

.paywall-tier-unit {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.paywall-tier-price {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.paywall-tier--selected .paywall-tier-price {
  color: var(--tone-violet-700);
}

.paywall-tier-per-edit {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--tone-emerald-700);
  margin-top: 4px;
  letter-spacing: 0.005em;
}

/* Screen 2 one-time slider section — tonal warm card, hairline border,
   16px radius. Same recipe as the homepage pack slider + Screen 1B pack
   selector, so the slider reads identically across surfaces. width: 100%
   keeps the parent flex-shrink from collapsing the slider track mid-drag. */
.paywall-screen2-slider {
  display: block;
  width: 100%;
  margin: 10px 0 14px;
  padding: 20px 18px 14px;
  background: var(--card-tonal);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}

/* Screen 2 + Screen 3 peak readouts — serif display for the credits count
   and price, mono for the per-edit suffix. Matches the homepage pack
   slider + .bs-pack treatment. The violet price color from the global
   .credits-slider-price recipe is overridden here so the readout reads as
   "the total" not "the highlight" — savings pill carries the highlight. */
.paywall-screen2-slider .credits-slider-display,
.paywall-screen--peak .credits-slider-display {
  margin-bottom: 14px;
}
.paywall-screen2-slider .credits-slider-total,
.paywall-screen--peak .credits-slider-total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}
.paywall-screen2-slider .credits-slider-count,
.paywall-screen--peak .credits-slider-count {
  font-family: var(--font-display), serif;
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.paywall-screen2-slider .credits-slider-label,
.paywall-screen--peak .credits-slider-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.005em;
}
.paywall-screen2-slider .credits-slider-price,
.paywall-screen--peak .credits-slider-price {
  font-family: var(--font-display), serif;
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.03em;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.paywall-screen2-slider .credits-slider-per-edit,
.paywall-screen--peak .credits-slider-per-edit {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-dimmed);
  letter-spacing: 0.005em;
  margin-top: 4px;
}
/* Emerald savings pill chip — keeps the emerald semantic, restyled as an
   inline chip beside the price (consistent with the buy sheet save-badge
   treatment). */
.paywall-screen2-slider .credits-slider-bonus,
.paywall-screen--peak .credits-slider-bonus {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tone-emerald-700);
  background: var(--tone-emerald-50);
  padding: 4px 9px;
  border-radius: var(--r-pill);
  margin-top: 6px;
}


/* Screen 2 one-time pack CTA — secondary (outline) so it doesn't fight the
   Subscribe CTA above. Same outline recipe as .bs-pack-cta on the buy sheet:
   hairline border that turns violet on hover, violet glow shadow, snappy
   cubic-bezier lift. Reads as "pay-once is a real option, not a fallback."
   The element has both .paywall-cta + .paywall-cta--impulse on it; we
   override the dark gradient back to the outlined treatment via a more
   specific selector + !important on the rim glow ::before. */
#paywallScreen2PackCta.paywall-cta--impulse {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--card);
  color: var(--text);
  border: 1.5px solid rgba(0, 0, 0, 0.10);
  box-shadow: none;
  min-height: 52px;
  padding: 14px 20px;
  margin-top: 6px;
  margin-bottom: 0;
  animation: textReveal 0.35s var(--ease-out) 0.3s both;
}
#paywallScreen2PackCta.paywall-cta--impulse::before,
#paywallScreen2PackCta.paywall-cta--impulse::after {
  display: none;
}
#paywallScreen2PackCta.paywall-cta--impulse:hover {
  /* Dark-fill hover (matches buysheet bs-pack-cta and primary paywall CTAs) —
     prior light-violet-on-white was illegible (low contrast on the price subtext). */
  background: linear-gradient(135deg, var(--primary) 0%, #2a2a4a 100%);
  border-color: var(--tone-violet);
  color: #fff;
  box-shadow: var(--shadow-md), 0 8px 22px rgba(124, 92, 252, 0.22);
  transform: translateY(-1px);
}
#paywallScreen2PackCta.paywall-cta--impulse:hover .paywall-cta-price {
  color: rgba(255, 255, 255, 0.75);
}
#paywallScreen2PackCta.paywall-cta--impulse:active {
  transform: translateY(0) scale(0.99);
  box-shadow: none;
}
#paywallScreen2PackCta.paywall-cta--impulse .paywall-cta-label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: inherit;
  text-align: left;
}
#paywallScreen2PackCta.paywall-cta--impulse:hover .paywall-cta-label {
  color: var(--tone-violet-700);
}
#paywallScreen2PackCta.paywall-cta--impulse .paywall-cta-price {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-dimmed);
  letter-spacing: 0.005em;
  margin-top: 0;
  text-align: right;
}

.paywall-save-sd-link {
  display: block;
  margin: 12px auto 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--tone-violet-700);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--tone-violet) 32%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.paywall-save-sd-link:hover {
  text-decoration-color: var(--tone-violet);
}


/* ---- Screen 3 Peak variant: "Just need a few?" pack slider ----
   Reconstructed Mar 10 surface, restyled to match the same design language
   as Screen 1B + Screen 2. Header eyebrow + display serif title, tonal
   urgency band, tonal slider section, primary CTA (no amber). */
.paywall-screen3-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  text-align: center;
}
.paywall-screen3-pill {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tone-violet-700);
  background: var(--tone-violet-50);
  padding: 5px 11px;
  border-radius: var(--r-pill);
}
.paywall-screen--peak .paywall-drawer-subtitle {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  text-align: center;
  max-width: 32ch;
}

/* Urgency trigger band — warm tonal background with subtle hairline + small
   semantic amber bolt icon. Calm, not loud — same volume as the trust row. */
.paywall-urgency-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--tone-amber-50);
  border: 1px solid color-mix(in srgb, var(--tone-amber) 18%, transparent);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--tone-amber-700);
  letter-spacing: 0.005em;
  line-height: 1.4;
  text-align: center;
}
.paywall-urgency-trigger .urgency-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Screen 3 peak slider container — same tonal recipe as Screen 2 slider.
   The element has BOTH .credits-slider-container AND .paywall-slider on it.
   The .paywall-slider rule (above) paints an input-style violet gradient
   background; this override resets it back to a tonal container so the
   slider INPUT inside (also .paywall-slider? no — it's .credits-slider)
   renders cleanly. */
.paywall-screen--peak .paywall-slider.credits-slider-container,
.credits-slider-container.paywall-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 14px;
  padding: 20px 18px 14px;
  background: var(--card-tonal);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  cursor: default;
}

/* Amber CTA rebrand → primary dark gradient CTA recipe. The amber treatment
   fought the rest of the design language; semantic amber stays only on the
   BEST notch + bonus pill. The element retains the .paywall-cta--amber class
   for JS compatibility but renders with the primary CTA recipe. */
.paywall-cta--amber {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, var(--primary) 0%, #2a2a4a 100%);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
  min-height: 56px;
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s var(--ease-standard);
  animation: textReveal 0.35s var(--ease-out) 0.3s both;
}
.paywall-cta--amber::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(124, 92, 252, 0.4) 50%,
    transparent 100%);
  pointer-events: none;
}
.paywall-cta--amber:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, #34345a 100%);
  box-shadow: var(--shadow-lg), 0 12px 36px rgba(124, 92, 252, 0.32);
  transform: translateY(-2px);
}
.paywall-cta--amber:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm), var(--shadow-tonal-violet);
}
.paywall-cta--amber .paywall-cta-label {
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #fff;
  text-align: left;
}
.paywall-cta--amber .paywall-cta-price {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.005em;
  text-align: right;
}

/* Guarantee row below CTA — mono small-caps trust line with subtle check icon.
   Same volume as .paywall-trust-row so all trust microcopy reads consistent. */
.paywall-screen3-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dimmed);
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: center;
}
.paywall-screen3-guarantee svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: var(--text-dimmed);
  opacity: 0.7;
}


/* ---- Screen 3: Downsell ---- */

.downsell {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  animation: textReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.downsell-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 20px;
}

.downsell-divider-line {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.downsell-divider-text {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dimmed);
  white-space: nowrap;
}

.downsell-headline {
  font-family: var(--font-display), serif;
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 8px;
  text-align: center;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.downsell-subtext {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0 0 20px;
  text-align: center;
  line-height: 1.5;
}

/* Downsell-specific overrides (base shared with --impulse above).
   Inherits the violet-rim ::before from the base .paywall-cta recipe. */
.paywall-cta--downsell {
  position: relative;
  overflow: hidden;
}

/* Downsell social proof — last reassurance before "No thanks". Same volume
   line every other paywall surface uses so trust copy stays consistent. */
.downsell-social-proof {
  margin: 10px 0 2px;
  text-align: center;
  font-size: 0.74rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.downsell-social-proof:empty { display: none; }

.downsell-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 16px;
  cursor: pointer;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.downsell-dismiss:hover {
  color: var(--text);
}

/* Dismiss-lock visual sync — when the X close button is in its 3s
   forced-dwell countdown (data-locked="true"), the secondary dismiss
   buttons (Screen 3 "No thanks", Screen 4 skip, Screen 1 "Maybe later")
   visually dim and cursor flips to wait. handleDismiss() already returns
   early on a locked click, so the styling makes that return *visible*
   instead of feeling like a broken button. */
.paywall:has(.paywall-close[data-locked="true"]) .downsell-dismiss,
.paywall:has(.paywall-close[data-locked="true"]) .paywall-email-capture-skip,
.paywall:has(.paywall-close[data-locked="true"]) .paywall-maybe {
  opacity: 0.4;
  cursor: wait;
  transition: opacity 0.18s ease;
}


/* ---- Paywall Screen 4: Email capture (anon-free-no-credits salvage) ---- */

.paywall-email-capture {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 0 0;
}

.paywall-email-capture-preview {
  position: relative;
  margin: 0 0 18px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #e5e7eb);
  box-shadow: 0 6px 18px rgba(26, 26, 46, 0.08), 0 1px 2px rgba(26, 26, 46, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 220px;
}
.paywall-email-capture-preview.hidden { display: none; }

.paywall-email-capture-preview-tag {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface, #fff);
  padding: 2px 6px;
  border-radius: 6px;
}

.paywall-email-capture-preview-img {
  display: block;
  max-height: 140px;
  max-width: 100%;
  width: auto;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
}

.paywall-email-capture-headline {
  font-family: var(--font-display), serif;
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.paywall-email-capture-subtext {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}

.paywall-email-capture-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.paywall-email-capture-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.paywall-email-capture-row.hidden { display: none; }

.paywall-email-capture-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
}

.paywall-email-capture-input:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.08);
}

/* Email submit — primary CTA recipe (dark gradient + violet rim glow + lift),
   so it reads as the same primary action voice as every other CTA in the
   paywall. Uses 14px rounded rect (not pill) to match the input above. */
.paywall-email-capture-submit {
  position: relative;
  width: 100%;
  padding: 14px 22px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary) 0%, #2a2a4a 100%);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.paywall-email-capture-submit::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(124, 92, 252, 0.4) 50%,
    transparent 100%);
  pointer-events: none;
}

.paywall-email-capture-submit:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, #34345a 100%);
  box-shadow: var(--shadow-lg), 0 12px 36px rgba(124, 92, 252, 0.32);
  transform: translateY(-2px);
}
.paywall-email-capture-submit:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm), var(--shadow-tonal-violet);
}
.paywall-email-capture-submit:disabled,
.paywall-email-capture-submit[aria-busy="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.paywall-email-capture-skip {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 16px;
  cursor: pointer;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.paywall-email-capture-skip:hover { color: var(--text); }
.paywall-email-capture-skip.hidden { display: none; }

.paywall-email-capture-sent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(52, 211, 153, 0.1);
  color: #047857;
  font-size: 14px;
  font-weight: 600;
}
.paywall-email-capture-sent.hidden { display: none; }
.paywall-email-capture-sent-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #34D399;
  color: #fff;
  font-weight: 700;
}
.paywall-email-capture-sent-text strong { font-weight: 700; }

/* Shared consent line under any email-capture form. Used by Screen 4,
   the dormant save-email-gate, and the login (magic-link) form. */
.email-capture-consent {
  margin: 4px 2px 0;
  font-size: 11px;
  color: var(--text-muted, #888);
  line-height: 1.45;
  text-align: center;
}
.email-capture-consent a {
  color: inherit;
  text-decoration: underline;
}
.email-capture-consent a:hover { color: var(--text); }


/* ---- Stripe Recovery Modal ---- */

.recovery-modal {
  max-width: 360px;
  padding: 28px 24px 24px;
  border-radius: 20px;
  text-align: center;
  position: relative;
  animation: textReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.recovery-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-dimmed);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.recovery-dismiss:hover {
  color: var(--text);
  background: var(--bg-secondary);
}

.recovery-image-wrap {
  width: 100%;
  max-width: 200px;
  margin: 0 auto 16px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border-subtle);
}

.recovery-preview {
  width: 100%;
  display: block;
  object-fit: contain;
  max-height: 180px;
}

.recovery-headline {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 4px;
  letter-spacing: -0.025em;
}

.recovery-subtext {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0 0 18px;
}

.recovery-modal .paywall-cta--downsell {
  width: 100%;
}

.recovery-modal .downsell-dismiss {
  margin-top: 4px;
}

/* Trust anchor between recovery CTA and dismiss link — same volume claims
   ("10,000+ creators · 500K+ edits") every other paywall uses, so the user
   reads consistent proof at the highest-intent moment in our funnel. */
.recovery-social-proof {
  margin: 6px 0 4px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.recovery-social-proof:empty { display: none; }

/* Recovery trust ribbon — three inline checkmark items between the CTA
   and the social-proof line. Same pattern as V9 trust ribbon for visual
   consistency across paywalls. */
.recovery-trust-ribbon {
  list-style: none;
  margin: 12px auto 4px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.005em;
}
.recovery-trust-ribbon li {
  position: relative;
  padding-left: 16px;
}
.recovery-trust-ribbon li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 11px;
  height: 11px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}


/* ---- Mobile refinements ---- */
@media (max-width: 599px) {
  .paywall-screen {
    padding: 0 20px 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .paywall-hero {
    padding: 12px 16px 10px;
    max-height: none;
  }

  .paywall-hero-toggle {
    height: 220px;
    max-width: 300px;
  }

  .paywall-hero-img {
    max-height: 220px;
  }

  .paywall-headline {
    font-size: 1.3rem;
  }

  .paywall-cta,
  .paywall-cta--impulse,
  .paywall-cta--downsell {
    min-height: 56px;
    padding: 14px 20px;
  }

  .paywall-cta--impulse .paywall-cta-label,
  .paywall-cta--downsell .paywall-cta-label {
    font-size: 1rem;
  }

  .paywall-tier {
    padding: 24px 10px 12px;
  }

  .paywall-tier-badge {
    font-size: 0.55rem;
    padding: 3px 9px;
    top: -10px;
  }

  .paywall-tier-name {
    font-size: 0.55rem;
  }

  .paywall-tier-credits {
    font-size: 1.9rem;
  }

  .paywall-tier-unit {
    font-size: 0.52rem;
    margin-bottom: 6px;
  }

  .paywall-tier-price {
    font-size: 0.72rem;
  }

}

/* Very short screens */
@media (max-height: 580px) {
  .paywall-hero {
    padding: 12px 16px 16px;
    max-height: none;
  }

  .paywall-hero-toggle {
    height: 120px;
  }

  .paywall-hero-img {
    max-height: 120px;
  }

  .paywall-screen {
    padding: 0 16px 16px;
  }

  .paywall-headline {
    font-size: 1.15rem;
    margin-bottom: 4px;
  }

  .paywall-value-text {
    font-size: 0.82rem;
    margin-bottom: 8px;
  }

  .paywall-cta--impulse,
  .paywall-cta--downsell {
    min-height: 48px;
    padding: 12px 16px;
  }

  .paywall-onetime-divider {
    margin: 10px 0 6px;
  }

  .demo-icon {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
  }
}

/* Desktop — floating card with proper image sizing */
@media (min-width: 600px) {
  #conversionModal.visible {
    padding: 24px;
  }

  .paywall {
    max-width: 560px;
    height: auto;
    max-height: 92vh;
    border-radius: 24px;
    box-shadow:
      0 25px 60px rgba(0, 0, 0, 0.18),
      0 0 0 1px rgba(0, 0, 0, 0.06);
  }

  .paywall-hero {
    padding: 36px 36px 28px;
    max-height: none;
  }

  .paywall-hero-toggle {
    height: 260px;
    max-width: 360px;
  }

  .paywall-hero-img {
    max-height: 260px;
    border-radius: 14px;
  }

  .paywall-screen {
    max-width: 560px;
    padding: 0 36px 40px;
  }

  .paywall-headline {
    font-size: 1.6rem;
  }

  .paywall-cta {
    padding: 16px 24px;
  }

  .paywall-close {
    position: absolute;
  }

  .paywall-hero-badge {
    font-size: 0.7rem;
  }

}


/* ============================================
   LOGIN FORM
   ============================================ */
.login-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--card-tonal);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  margin-bottom: 14px;
  transition: border-color 0.18s var(--ease-standard), box-shadow 0.2s var(--ease-standard), background 0.18s var(--ease-standard);
}

.login-input:focus {
  outline: none;
  border-color: var(--tone-violet);
  background: var(--card);
  box-shadow: 0 0 0 4px var(--tone-violet-50);
}

.login-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  margin-bottom: 24px;
}

.user-email {
  text-align: center;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  padding: 14px;
  background: var(--bg-subtle, rgba(0, 0, 0, 0.02));
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
}

/* ============================================
   LOGIN FORM - Enhanced Styling
   ============================================ */
.login-header {
  text-align: center;
  margin-bottom: 28px;
}

.login-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--r-pill);
  background: var(--tone-violet-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  color: var(--tone-violet-700);
  box-shadow: var(--shadow-tonal-violet);
}

.login-form-group {
  margin-bottom: 16px;
}

.login-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
  margin-bottom: 8px;
}

.login-footer {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 16px;
}

/* Email Sent State */
.login-sent {
  text-align: center;
  padding: 24px 0;
}

.login-sent-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r-pill);
  background: var(--tone-emerald-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--tone-emerald-700);
}

.login-sent-email {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
  margin: 8px 0 16px;
  padding: 10px 14px;
  background: var(--card-tonal);
  border-radius: var(--r-md);
  display: inline-block;
}

/* ============================================
   ACCOUNT SHEET - Logged In View
   ============================================ */
.account-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.account-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--text, #1a1a2e);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
}

.account-details {
  flex: 1;
  min-width: 0;
}

.account-email {
  font-weight: 500;
  color: var(--text);
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-status {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.account-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.account-action-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(26, 26, 46, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.2s var(--ease-standard);
}

.account-action-card:hover {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(26, 26, 46, 0.04);
  transform: translateY(-2px);
  box-shadow:
    0 2px 8px rgba(26, 26, 46, 0.04),
    0 8px 24px rgba(26, 26, 46, 0.03);
}

.account-action-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(26, 26, 46, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.account-action-text {
  flex: 1;
  min-width: 0;
}

.account-action-title {
  display: block;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text);
}

.account-action-desc {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.account-action-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
}

.account-footer {
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: center;
}

.account-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.2s var(--ease-standard);
}

.account-link:hover {
  color: var(--error);
  background: rgba(239, 68, 68, 0.1);
}

/* Account credits display */
.account-credits {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--bg-subtle, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  margin-bottom: 14px;
}

.account-credits-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.account-credits-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

/* Sheet language section */
.sheet-lang-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}

.sheet-lang-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.sheet-lang-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================
   FIRST-TIME OFFER BANNER
   ============================================ */
.first-offer-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 16px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 1500;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}

.first-offer-banner.visible {
  display: flex;
}

.first-offer-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.first-offer-text {
  font-weight: 600;
  font-size: 0.95rem;
}

.first-offer-countdown {
  font-family: monospace;
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 4px 8px;
  border-radius: 4px;
}

.first-offer-btn {
  background: white;
  color: #667eea;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.first-offer-btn:hover {
  transform: scale(1.05);
}

.first-offer-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

/* ============================================
   LANGUAGE SWITCHER
   ============================================ */
.lang-switcher {
  position: relative;
}

.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s var(--ease-standard);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.lang-btn:hover {
  border-color: var(--primary);
  background: var(--glow);
  transform: translateY(-1px);
}

.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  min-width: 160px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s var(--ease-standard);
  overflow: hidden;
}

.lang-menu.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
  transition: background 0.1s;
  cursor: pointer;
}

.lang-option:first-child {
  border-radius: 11px 11px 0 0;
}

.lang-option:last-child {
  border-radius: 0 0 11px 11px;
}

.lang-option:hover {
  background: var(--bg-subtle);
}

.lang-option.active {
  background: var(--primary);
  color: white;
}

/* ============================================
   MOBILE RESPONSIVE - Standard phones
   ============================================ */
@media (max-width: 599px) {
  .modal-content {
    padding: 24px 20px;
    max-width: calc(100vw - 40px);
  }

  .modal-stats {
    gap: 24px;
    padding: 14px;
  }

  .modal-stat-value {
    font-size: 1.3rem;
  }

  .bottom-sheet {
    padding: 16px;
    padding-bottom: calc(16px + var(--safe-bottom));
  }

  .pack-info {
    gap: 3px;
  }

  .pack-detail {
    font-size: 0.8rem;
  }
}

/* ============================================
   MOBILE RESPONSIVE - Small screens (iPhone SE)
   ============================================ */
@media (max-width: 375px) {
  .modal-content {
    padding: 20px 16px;
  }

  .credit-pack {
    padding: 14px 12px;
  }

  .quality-toggle {
    gap: 6px;
  }

  .quality-chip {
    padding: 8px 10px;
    font-size: 0.75rem;
  }

  /* Compact buy sheet for small screens (iPhone SE) */
  #buySheet .buy-sheet-title {
    font-size: 1.1rem;
  }

  #buySheet .plan-option {
    padding: 8px 10px;
    gap: 8px;
  }

  #buySheet .plan-radio {
    width: 16px;
    height: 16px;
  }

  #buySheet .plan-name {
    font-size: 0.8rem;
    min-width: 50px;
  }

  #buySheet .plan-credits {
    font-size: 0.7rem;
  }

  #buySheet .plan-price {
    font-size: 0.85rem;
  }

  #buySheet .benefit {
    font-size: 0.65rem;
    padding: 3px 8px;
  }

  .credit-pack {
    padding: 10px 10px;
    margin-bottom: 6px;
  }

  .pack-credits {
    font-size: 0.9rem;
  }

  .pack-detail, .pack-per-edit {
    font-size: 0.7rem;
  }

  .pack-bonus {
    font-size: 0.7rem;
  }

  .pack-price {
    font-size: 1rem;
  }

  .pack-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    top: -7px;
  }

  .pack-trust {
    font-size: 0.7rem; /* Smaller on mobile but still visible */
  }

  .sheet-btn {
    padding: 14px;
    font-size: 0.9rem;
    margin-top: 6px;
    min-height: 48px; /* Touch target minimum */
  }

  .sheet-btn-secondary {
    padding: 10px;
    font-size: 0.85rem;
    min-height: 44px;
  }
}

/* ============================================
   MOBILE RESPONSIVE - Edit card
   Streamlined progressive disclosure on phones — tighter padding,
   stacked footer, slimmer surfaces. Reference card and free-res
   notice slimmed to pills (handled in their own rule blocks).
   ============================================ */
@media (max-width: 768px) {
  .edit-card {
    padding: 14px;
    border-radius: var(--r-md);
    gap: 8px;
  }

  .edit-card-footer {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
  }

  .footer-left {
    width: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
  }

  .footer-ref-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .quality-toggle-wrapper { flex: 0 0 auto; gap: 0; }
  .quality-toggle { flex: 0 0 auto; min-width: 0; }
  .toggle-track { padding: 3px; }
  .edit-cost-caption { display: none; }

  .edit-btn {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 14px 18px;
    min-height: 48px;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app.has-image .reference-photo-section .add-reference-btn {
    display: none;
  }
  .app.has-image .reference-photo-section { margin-top: 0; }
}

@media (max-width: 480px) {
  .edit-card {
    padding: 12px;
    border-radius: 14px;
  }

  .prompt-input {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.95rem;
    line-height: 1.45;
    /* Mobile cap: ~9 lines at 0.95rem/1.45. Keeps footer + submit on-screen
       while still showing long prompts fully before internal scroll. */
    max-height: 200px;
  }

  .toggle-option {
    padding: 8px 10px;
    min-height: 38px;
    font-size: 12.5px;
    gap: 5px;
  }
  .toggle-option > svg { width: 13px; height: 13px; }
  .toggle-cost { font-size: 10px; margin-left: 1px; }

  /* Ref-btn matches the Fast pill height (44px) so the three controls on
     this row — Ref · Fast/Pro · Versions — read as a single typographic
     row instead of an avatar sitting next to two pills. */
  .footer-ref-btn { width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0; }
  .footer-ref-btn > svg { width: 20px; height: 20px; }
  .footer-ref-plus { width: 14px; height: 14px; bottom: 0; right: 0; }
  .footer-ref-plus svg { width: 8px; height: 8px; }

  .edit-btn {
    padding: 12px 14px;
    min-height: 46px;
    font-size: 13.5px;
  }

  .reference-btn {
    padding: 8px 12px;
    min-height: 40px;
  }

  .reference-btn svg {
    width: 18px;
    height: 18px;
  }

  .reference-btn-text {
    font-size: 0.8rem;
  }
}

@media (max-width: 360px) {
  /* Hide cost numerals to keep the Edit button readable */
  .toggle-option .toggle-cost { display: none; }
  .toggle-option { padding: 8px 8px; }
}

/* ============================================
   MOBILE RESPONSIVE - First offer banner
   ============================================ */
@media (max-width: 600px) {
  .first-offer-banner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .first-offer-text {
    font-size: 0.85rem;
  }
}

/* ============================================
   DESKTOP RESPONSIVE
   ============================================ */
@media (min-width: 900px) {
  /* Bottom sheets - centered */
  .bottom-sheet {
    max-width: 440px;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    border-radius: 20px 20px 0 0;
  }

  .bottom-sheet.visible {
    transform: translateX(-50%) translateY(0);
  }

  /* Buy sheet V9 - Full-screen on desktop (overrides bottom-sheet centering) */
  .buy-sheet-v9 {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    transform: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-standard);
  }

  .buy-sheet-v9.visible {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  /* Hover states */
  .btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--glow);
  }

  .btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
  }

  .btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
  }

  .quality-btn:hover:not(.active) {
    border-color: var(--primary);
    color: var(--text);
  }

  .text-link:hover {
    color: var(--primary) !important;
  }

  .credit-pack:hover:not(.selected) {
    border-color: var(--primary-light);
  }
}

/* ============================================
   HERO SHOWCASE - Text left, Video dominant right
   ============================================ */
.hero-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px 16px;
  gap: 12px;
}

/* On mobile, flatten the structure to allow reordering */
.hero-left {
  display: contents;
}

.hero-right {
  display: contents;
}

/* Mobile order: title → video → subtitle → button → etc */
.hero-title { order: 1; text-align: center; margin: 0; }
.hero-video { order: 2; width: 100%; margin: 8px 0; }
.hero-subtitle { order: 3; text-align: center; max-width: 360px; margin: 0 0 4px; }
.hero-upload-btn { order: 4; }
.hero-free-hint { order: 5; margin: 4px 0 0; }
.hero-proof { order: 6; margin-top: 8px; }
.hero-tags-waterfall { order: 7; display: none; } /* Hide on mobile for cleaner look */

.hero-video {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--border);
}

/* Waterfall tags under video */
.hero-tags-waterfall {
  position: relative;
  height: 100px;
  margin-top: 12px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
}

.waterfall-tag {
  position: absolute;
  top: -5px;
  padding: 5px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  animation: waterfallDrop var(--fall-duration, 1.8s) linear forwards;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

@keyframes waterfallDrop {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  5% {
    opacity: 0.9;
  }
  60% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(110px);
    opacity: 0;
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(26, 26, 46, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.01em;
}

.hero-badge svg {
  width: 12px;
  height: 12px;
}

.hero-title {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.hero-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
  max-width: 360px;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 2px;
}

.hero-tag {
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.hero-upload-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s var(--ease-standard), box-shadow 0.1s var(--ease-standard);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  margin-top: 8px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.hero-upload-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.hero-upload-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.hero-upload-btn.loading {
  pointer-events: none;
  opacity: 0.8;
}

.hero-upload-btn.loading .upload-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-upload-btn .upload-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.hero-free-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.hero-avatars {
  display: flex;
}

.hero-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: -6px;
  border: 2px solid var(--bg);
}

.hero-avatar:first-child {
  margin-left: 0;
}

.hero-proof-text {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Desktop hero - aligned with nav, video dominant */
@media (min-width: 900px) {
  .hero-showcase {
    flex-direction: row;
    align-items: flex-start;
    padding: 32px 24px;
    gap: 40px;
    max-width: none;
  }

  /* Restore container behavior on desktop */
  .hero-left {
    display: flex;
    flex-direction: column;
    flex: 0 0 280px;
    max-width: 280px;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
    padding-top: 8px;
  }

  .hero-right {
    display: block;
    flex: 1;
  }

  /* Reset order and mobile styles on desktop */
  .hero-title,
  .hero-video,
  .hero-subtitle,
  .hero-upload-btn,
  .hero-free-hint,
  .hero-proof,
  .hero-tags-waterfall {
    order: unset;
    margin: 0;
  }

  .hero-title {
    font-size: 2rem;
    text-align: left;
  }

  .hero-subtitle {
    font-size: 0.95rem;
    max-width: none;
    text-align: left;
  }

  .hero-video {
    width: 100%;
    margin: 0;
  }

  .hero-tags-waterfall {
    display: block;
    margin-top: 20px;
  }

  .hero-proof {
    margin-top: 2px;
  }

  .hero-upload-btn {
    padding: 14px 28px;
    font-size: 1rem;
  }
}

/* Large desktop */
@media (min-width: 1100px) {
  .hero-showcase {
    padding: 40px 24px;
    gap: 56px;
  }

  .hero-left {
    flex: 0 0 320px;
    max-width: 320px;
  }

  .hero-title {
    font-size: 2.35rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }
}

/* Extra large desktop */
@media (min-width: 1400px) {
  .hero-showcase {
    padding: 48px 24px;
    gap: 72px;
  }

  .hero-left {
    flex: 0 0 380px;
    max-width: 380px;
  }

  .hero-title {
    font-size: 2.65rem;
  }
}

/* ============================================
   VIDEO SHOWCASE SECTION (legacy, below fold)
   ============================================ */
.showcase-section {
  margin: 32px 0;
  text-align: center;
}

.showcase-video {
  width: 100%;
  max-width: 720px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.showcase-tagline {
  margin-top: 20px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
}

/* ============================================
   TRUST BAR
   ============================================ */
.trust-bar {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 32px 0;
  padding: 20px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.trust-item svg {
  color: var(--primary);
  flex-shrink: 0;
}

/* ============================================
   SOCIAL PROOF
   ============================================ */
.social-proof {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 24px 0 40px;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .showcase-tagline {
    font-size: 1.1rem;
  }

  .trust-bar {
    gap: 16px;
    padding: 16px;
  }

  .trust-item {
    font-size: 0.8rem;
  }

  .trust-item svg {
    width: 18px;
    height: 18px;
  }
}

/* ============================================
   HERO - CLEAN MINIMAL
   ============================================ */
.hero-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

/* ============================================
   BELOW FOLD - PREMIUM
   ============================================ */

/* Value Strip */
.value-strip {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 24px 20px;
  flex-wrap: wrap;
}

.value-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}

.value-item svg {
  color: #22c55e;
  flex-shrink: 0;
}

/* Testimonial Card */
.testimonial-card {
  max-width: 480px;
  margin: 0 auto 48px;
  padding: 0 20px;
}

.testimonial-content {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.04);
}

.quote-icon {
  position: absolute;
  top: 16px;
  right: 20px;
  color: var(--primary);
}

.testimonial-content .testimonial-quote {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 16px 0;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, #7c6fe0 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
}

.author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.author-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.author-detail {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Section Headers */
.section-header {
  text-align: center;
  margin-bottom: 32px;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.section-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
}

/* Features Section */
.features-section {
  max-width: 800px;
  margin: 0 auto 56px;
  padding: 0 20px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 500px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.feature-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
  transition: all 0.2s var(--ease-standard);
  position: relative;
}

.feature-card:hover {
  border-color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.feature-card.featured {
  border-color: var(--primary-light);
  background: linear-gradient(to bottom, rgba(26, 26, 46, 0.03), transparent);
}

.feature-icon-wrap {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  border-radius: 12px;
  color: var(--text-muted);
}

.feature-icon-wrap.quick {
  background: rgba(251, 191, 36, 0.1);
  color: #f59e0b;
}

.feature-icon-wrap.smart {
  background: rgba(0, 0, 0, 0.06);
  color: var(--primary);
}

.feature-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px 0;
}

.feature-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.feature-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 100px;
  background: var(--bg-subtle);
  color: var(--text-muted);
}

.feature-tag.smart {
  background: rgba(0, 0, 0, 0.06);
  color: var(--primary);
}

/* FAQ Section */
.faq-section {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.faq-item summary {
  padding: 16px 0;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--border);
}

.faq-item[open] summary {
  border-bottom-color: transparent;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary svg {
  flex-shrink: 0;
  opacity: 0.3;
  transition: transform 0.2s var(--ease-standard);
}

.faq-item[open] summary svg {
  transform: rotate(180deg);
}

.faq-item p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
  padding-bottom: 16px;
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .value-strip {
    gap: 16px;
    padding: 20px 16px;
  }

  .value-item {
    font-size: 0.85rem;
  }

  .section-title {
    font-size: 1.25rem;
  }

  .testimonial-content {
    padding: 20px;
  }

  .testimonial-content .testimonial-quote {
    font-size: 1rem;
  }
}

.faq-item-minimal p {
  margin: 12px 0 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 32px 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.testimonial {
  background: var(--bg-subtle);
  border-radius: 12px;
  padding: 20px;
  border-left: 3px solid var(--primary);
}

.testimonial-text {
  font-size: 0.95rem;
  color: var(--text);
  margin: 0 0 12px 0;
  font-style: italic;
  line-height: 1.5;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
}

.testimonial-role {
  font-size: 0.75rem;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .testimonials-section {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   TRUST SECTION
   ============================================ */
.trust-section {
  margin: 32px 0;
  text-align: center;
}

.trust-badges {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.trust-badge svg {
  color: var(--primary);
  flex-shrink: 0;
}

/* ============================================
   USE CASES UPGRADED
   ============================================ */
.use-case-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 4px;
}

/* ============================================
   FINAL CTA
   ============================================ */
.final-cta {
  text-align: center;
  margin: 40px 0 20px;
}

.final-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.final-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

/* ============================================
   HOW IT WORKS SECTION
   ============================================ */
.how-it-works {
  text-align: center;
  margin: 40px 0 32px;
}

.how-it-works h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 24px;
}

.steps-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-text {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
}

.step-arrow {
  color: var(--text-muted);
  font-size: 1.5rem;
  opacity: 0.5;
}

/* ============================================
   USE CASES SECTION
   ============================================ */
.use-cases-section {
  text-align: center;
  margin: 32px 0;
}

.use-cases-section h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 20px;
}

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}

.use-case {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-subtle);
  border-radius: 10px;
  text-align: left;
}

.use-case-icon {
  font-size: 1.2rem;
}

.use-case-text {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.3;
}

@media (max-width: 600px) {
  .use-cases-grid {
    grid-template-columns: 1fr 1fr;
  }

  .step-arrow {
    display: none;
  }

  .steps-row {
    gap: 12px;
  }
}

/* ============================================
   SOCIAL PROOF SECTION
   ============================================ */
.social-proof-section {
  text-align: center;
  margin: 32px 0;
  padding: 20px;
}

.social-proof-text {
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ============================================
   LEGACY - QUICK VS SMART COMPARISON SECTION
   (keeping for backwards compat with pSEO pages)
   ============================================ */
.standard-vs-pro {
  margin: 48px 0;
  padding: 32px;
  background: var(--bg-subtle);
  border-radius: 20px;
  text-align: center;
}

.standard-vs-pro h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 24px;
}

/* Mode showcase - side by side cards */
.comparison-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
}

.mode-showcase {
  background: var(--bg);
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid var(--border);
  transition: border-color 0.2s var(--ease-standard), transform 0.2s var(--ease-standard);
  text-align: left;
}

.mode-showcase:hover {
  transform: translateY(-2px);
}

.mode-showcase.smart {
  border-color: var(--primary);
}

.mode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-subtle);
}

.mode-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

.mode-showcase.smart .mode-name {
  color: var(--primary);
}

.mode-cost {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}

.mode-showcase img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.mode-prompt {
  padding: 14px 16px;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text);
  background: var(--bg);
  border-top: 1px solid var(--border);
  line-height: 1.4;
}

.mode-best-for {
  padding: 10px 16px 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.mode-showcase.smart .mode-best-for {
  color: var(--primary);
}

/* Mobile responsive */
@media (max-width: 600px) {
  .standard-vs-pro {
    margin: 32px 0;
    padding: 20px;
  }

  .standard-vs-pro h3 {
    font-size: 1.25rem;
  }

  .comparison-modes {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .mode-prompt {
    font-size: 0.85rem;
    padding: 12px 14px;
  }
}


/* ============================================
   PRICING SECTION - Homepage pricing cards
   ============================================ */
.pricing-section {
  padding: 80px 24px;
  background: linear-gradient(180deg, var(--bg) 0%, #f8f7ff 100%);
}

.pricing-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.pricing-header {
  text-align: center;
  margin-bottom: 48px;
}

.pricing-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 12px 0;
  letter-spacing: -0.03em;
}

.pricing-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0 0 16px 0;
}

.pricing-free-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px;
  background: rgba(26, 26, 46, 0.05);
  border-radius: 100px;
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
}

.free-note-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.free-note-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--primary);
  fill: rgba(0, 0, 0, 0.1);
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.pricing-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.2s var(--ease-standard);
}

.pricing-card:hover {
  border-color: var(--text-dimmed);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.pricing-card-popular {
  border-color: var(--primary);
  background: linear-gradient(180deg, rgba(26, 26, 46, 0.03) 0%, #fff 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.pricing-card-popular:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.pricing-card-free {
  background: #fafafa;
  border-style: dashed;
}

.pricing-card-header {
  text-align: center;
  margin-bottom: 16px;
}

.pricing-plan-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.pricing-amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}

.pricing-period {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}

.pricing-credits {
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.credits-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.credits-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 4px;
}

.pricing-per-edit {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-dimmed);
  font-weight: 500;
  margin-bottom: 16px;
}

.pricing-card-popular .pricing-per-edit {
  color: var(--primary);
  font-weight: 600;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  flex: 1;
}

.pricing-features li {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 4px 0;
}

.pricing-cta {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  background: var(--primary);
  color: white;
}

.pricing-cta:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pricing-cta-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}

.pricing-cta-secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--text-dimmed);
  box-shadow: none;
}

.pricing-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  max-width: 600px;
  margin: 0 auto;
}

/* Pay As You Go Section */
.payg-section {
  margin-top: 40px;
  margin-bottom: 24px;
  text-align: center;
}

.payg-header {
  margin-bottom: 16px;
}

.payg-title {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.payg-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.payg-options {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.payg-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 24px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  min-width: 120px;
}

.payg-option:hover {
  border-color: var(--text-dimmed);
  transform: translateY(-2px);
}

.payg-option-best {
  border-color: var(--primary);
  background: rgba(26, 26, 46, 0.03);
}

.payg-option-best:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.payg-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  white-space: nowrap;
}

.payg-credits {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.payg-price {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .payg-options {
    gap: 8px;
  }

  .payg-option {
    padding: 14px 16px;
    min-width: 100px;
  }

  .payg-credits {
    font-size: 0.9rem;
  }

  .payg-price {
    font-size: 0.8rem;
  }
}

/* Tablet: 2x2 grid */
@media (max-width: 1024px) {
  .pricing-cards {
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mobile: Stack vertically, show popular first */
@media (max-width: 768px) {
  .pricing-section {
    padding: 60px 16px;
  }

  .pricing-title {
    font-size: 1.75rem;
  }

  .pricing-subtitle {
    font-size: 1rem;
  }

  .pricing-free-note {
    font-size: 0.85rem;
    padding: 6px 12px;
  }

  .pricing-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 400px;
    margin: 0 auto 24px;
  }

  /* Reorder: Popular first on mobile */
  .pricing-card-popular {
    order: -1;
  }

  .pricing-card {
    padding: 20px 16px;
  }

  .credits-number {
    font-size: 2rem;
  }

  .pricing-amount {
    font-size: 1.75rem;
  }

  .pricing-features li {
    font-size: 0.85rem;
    padding: 6px 0;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .pricing-section {
    padding: 48px 12px;
  }

  .pricing-header {
    margin-bottom: 32px;
  }

  .pricing-title {
    font-size: 1.5rem;
  }
}

/* ============================================
   POST-EDIT OVERLAY - Floating action buttons
   REMOVED: Redundant with bottom action bar (result-actions)
   The bottom bar provides Save/Share/Add Photo/New functionality
   ============================================ */
.post-edit-overlay {
  display: none !important; /* Hidden - use bottom action bar instead */
}

.post-edit-actions {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 16px;
  align-items: flex-end;
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.post-edit-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s var(--ease-standard), box-shadow 0.22s var(--ease-standard), background 0.18s var(--ease-standard);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.post-edit-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.post-edit-btn:active {
  transform: scale(0.95);
}

.post-edit-btn-primary {
  background: var(--primary);
  color: white;
  padding: 14px 22px;
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  animation: post-edit-pulse 2s var(--ease-in-out) infinite;
}

.post-edit-btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow-lg), 0 8px 24px rgba(124, 92, 252, 0.36);
  animation: none;
}

.post-edit-btn-primary svg {
  stroke: white;
}

@keyframes post-edit-pulse {
  0%, 100% {
    box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  }
  50% {
    box-shadow: var(--shadow-lg), 0 0 0 8px color-mix(in srgb, var(--tone-violet) 14%, transparent);
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .post-edit-actions {
    bottom: 12px;
    gap: 10px;
    padding: 12px;
  }

  .post-edit-btn {
    padding: 10px 14px;
    font-size: 0.75rem;
    border-radius: 12px;
  }

  .post-edit-btn-primary {
    padding: 12px 18px;
  }

  .post-edit-btn span {
    display: none; /* Hide labels on mobile, show only icons */
  }

  .post-edit-btn {
    flex-direction: row;
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .post-edit-btn-primary {
    width: 56px;
    height: 56px;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .post-edit-actions {
    bottom: 8px;
    gap: 8px;
  }

  .post-edit-btn {
    width: 44px;
    height: 44px;
  }

  .post-edit-btn svg {
    width: 18px;
    height: 18px;
  }

  .post-edit-btn-primary {
    width: 52px;
    height: 52px;
  }

  .post-edit-btn-primary svg {
    width: 20px;
    height: 20px;
  }
}

/* ============================================
   CELEBRATION CONFETTI - Post-edit dopamine hit
   ============================================ */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Above .image-lightbox (11000) so the post-edit confetti dopamine still
     fires across the auto-opened fullscreen result. pointer-events: none so
     it can't intercept lightbox dismiss taps. */
  z-index: 11001;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confetti-fall 3s var(--ease-out) forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Edit complete success badge */
.edit-success-badge {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: white;
  padding: 16px 28px;
  border-radius: 16px;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  z-index: 10002;
  pointer-events: none;
  animation: success-badge-pop 2s var(--ease-out) forwards;
  display: flex;
  align-items: center;
  gap: 10px;
}

.edit-success-badge svg {
  width: 24px;
  height: 24px;
}

@keyframes success-badge-pop {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
  25% {
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
}
/* ============================================
   BUY SHEET V7 - Clean, High-Converting Design
   Mobile-first, vertical stack, clear hierarchy
   ============================================ */

.buy-sheet-v7 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 95dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  padding: 12px 20px 0;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.3s;
  z-index: 10002; /* Above GDPR banner (9999) and sheet-overlay (10001) */
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
  touch-action: pan-y;
}

/* Scrollable content area */
.buy-sheet-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

/* Sticky footer with CTA */
.buy-sheet-footer {
  flex-shrink: 0;
  padding: 12px 0 calc(16px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.buy-sheet-v7.visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0s;
}

/* Sheet handle - larger touch target */
.buy-sheet-v7 .sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 16px;
  /* Larger touch area without changing visual size */
  padding: 12px 32px;
  margin-top: -12px;
  background-clip: content-box;
  cursor: grab;
  touch-action: pan-y;
}

/* Close button */
.buy-sheet-v7 .buy-sheet-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.1s, color 0.1s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.buy-sheet-v7 .buy-sheet-close:hover {
  background: var(--bg-secondary);
  color: var(--text);
}

.buy-sheet-v7 .buy-sheet-close:active {
  transform: scale(0.9);
  background: var(--bg-secondary);
}

/* Header */
.buy-header-v7 {
  text-align: center;
  margin-bottom: 12px;
  padding-left: 44px;
  padding-right: 44px; /* Balance for close button */
}

/* Header icon - lightning bolt style */
.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: var(--primary);
}

.header-icon svg {
  width: 24px;
  height: 24px;
}

.buy-title-v7 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.buy-subtitle-v7 {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.buy-social-proof-v7 {
  font-size: 0.8rem;
  color: var(--text-dimmed);
  margin: 6px 0 0 0;
}

/* Image Preview - shown when user has an edit waiting */
.buy-preview-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 14px;
}

.buy-preview-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.buy-preview-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}

/* Benefits */
.buy-benefits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.03) 100%);
  border-radius: 10px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--text);
}

.benefit-item svg {
  flex-shrink: 0;
  stroke: #10b981;
}


/* Plan cards - vertical stack */
.buy-plans-v7,
.buy-packs-v7 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

/* Pack expiry note */
.pack-expiry-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 8px 0 0;
  opacity: 0.8;
}

/* CTA Button */
.buy-cta-v7 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  /* Direct text styling - JS may set innerHTML directly */
  color: white;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.buy-cta-v7:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-tonal-violet-lg);
}

.buy-cta-v7:active {
  transform: translateY(0);
}

.buy-cta-v7 .cta-text {
  font-size: 1rem;
  font-weight: 600;
  color: white;
}

.buy-cta-v7 .cta-price {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Trust signals */
.buy-trust,
.buy-trust-v7 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.buy-trust .trust-item {
  font-size: 0.75rem;
  gap: 4px;
}

.buy-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.buy-trust-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.buy-trust-sep {
  color: var(--text-dimmed);
}

/* Sign-in link for returning users */
.buy-signin-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  text-align: center;
}

.buy-signin-link:hover {
  color: var(--primary);
}

/* Hide sign-in link when logged in (populated by JS) */
.buy-signin-link.hidden {
  display: none;
}

/* Desktop: wider sheet, centered */
@media (min-width: 600px) {
  .buy-sheet-v7 {
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    max-width: 420px;
    border-radius: 20px;
    bottom: 20px;
    /* visibility inherited from base rule */
  }

  .buy-sheet-v7.visible {
    transform: translateX(-50%) translateY(0);
    /* visibility inherited from base .visible rule */
  }

  .buy-header-v7 {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================================
   New Buy Sheet: Pack Cards + Subscription Row
   ============================================ */

/* Value Anchor Header */
.buy-value-anchor {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.4;
}

.buy-social-proof {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 4px 0 0;
}

/* Pack Cards Grid (2 columns) */
.buy-packs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.pack-card,
.option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 14px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Default card - light purple tint */
.pack-card,
.option-card {
  background: rgba(26, 26, 46, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

.pack-card:hover,
.option-card:hover {
  border-color: var(--primary);
  background: rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pack-card:active,
.option-card:active {
  transform: scale(0.98);
  border-color: var(--primary);
}

/* Best Value card - green tint (overrides purple) */
.pack-card-best {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.3);
}

.pack-card-best:hover {
  border-color: var(--success);
  background: rgba(52, 211, 153, 0.15);
  box-shadow: 0 4px 12px rgba(52, 211, 153, 0.2);
}

.pack-card-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: var(--success);
  color: #065f46;
  font-size: 9px;
  font-weight: 700;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.pack-card-header {
  margin-bottom: 8px;
}

.pack-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.pack-card-price {
  margin-bottom: 8px;
}

.pack-card-amount {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 2px;
}

.pack-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.pack-card-per-edit {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.pack-card-savings {
  font-size: 0.7rem;
  font-weight: 600;
  color: #059669;
}

.pack-card-best .pack-card-savings {
  color: #059669;
  font-weight: 600;
}

.pack-card-cta,
.card-cta {
  width: 100%;
  margin-top: 14px;
  padding: 10px 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.pack-card:hover .pack-card-cta,
.option-card:hover .card-cta {
  background: var(--primary-hover);
}

.pack-card-best .pack-card-cta,
.pack-card-best .card-cta {
  background: #059669;
}

.pack-card-best:hover .pack-card-cta,
.pack-card-best:hover .card-cta {
  background: #047857;
}

/* Card badge - absolute positioned pill */
.card-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--success);
  color: #065f46;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  white-space: nowrap;
  z-index: 1;
}

/* Alias for elevated design compatibility */
.card-best {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.3);
}

.card-best:hover {
  border-color: var(--success);
  background: rgba(52, 211, 153, 0.15);
  box-shadow: 0 4px 12px rgba(52, 211, 153, 0.2);
}

.card-best .card-cta,
.card-best .pack-card-cta {
  background: #059669;
}

.card-best:hover .card-cta,
.card-best:hover .pack-card-cta {
  background: #047857;
}

/* Subscription Divider */
.buy-sub-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.buy-sub-divider-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.buy-sub-divider-text {
  font-size: 0.8rem;
  color: var(--text-dimmed);
  white-space: nowrap;
}

/* Subscription Card - Matches pack card style */
.sub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 16px;
  background: rgba(56, 189, 248, 0.08);
  border: 2px solid rgba(56, 189, 248, 0.25);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 16px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.sub-card:hover {
  border-color: var(--accent);
  background: rgba(56, 189, 248, 0.12);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2);
  transform: translateY(-2px);
}

.sub-card:active {
  transform: scale(0.98);
  border-color: var(--accent);
}

.sub-card .sub-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #0c4a6e;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sub-quantity {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-top: 8px;
}

.sub-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 2px;
}

.sub-price-small {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 8px;
}

.sub-price-small span {
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.8;
}

.sub-unit {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.sub-cta {
  width: 100%;
  margin-top: 14px;
  padding: 10px 16px;
  background: #0ea5e9;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.15s;
}

.sub-card:hover .sub-cta {
  background: #0284c7;
}

/* Legacy sub-row styles for backward compatibility */
.sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: rgba(56, 189, 248, 0.1);
  border: 2px solid rgba(56, 189, 248, 0.25);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 16px;
  text-align: left;
}

.sub-row:hover {
  border-color: var(--accent);
  background: rgba(56, 189, 248, 0.15);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);
}

.sub-row:active {
  transform: scale(0.98);
  border-color: var(--accent);
}

.sub-row-left,
.sub-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sub-row-icon,
.sub-icon {
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.sub-row-icon svg,
.sub-icon svg {
  width: 20px;
  height: 20px;
}

.sub-row-info,
.sub-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sub-row-name,
.sub-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sub-row-badge,
.sub-badge {
  font-size: 9px;
  font-weight: 700;
  background: var(--accent);
  color: #0c4a6e;
  padding: 4px 12px;
  border-radius: 100px;
  letter-spacing: 0.05em;
}

.sub-row-details,
.sub-details {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.sub-row-right,
.sub-right {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: right;
}

.sub-row-pricing,
.sub-pricing {
  display: flex;
  flex-direction: column;
}

.sub-row-price,
.sub-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.sub-row-period,
.sub-period {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.sub-row-arrow,
.sub-arrow {
  color: var(--text-dimmed);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.sub-row-arrow svg,
.sub-arrow svg {
  width: 16px;
  height: 16px;
}

.sub-row:hover .sub-row-arrow,
.sub-card:hover .sub-arrow {
  transform: translateX(2px);
  color: var(--accent);
}

/* Legacy sub-row classes for backward compatibility */
.sub-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.sub-row-edits {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.sub-row-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sub-row-per-edit {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.sub-row-cancel {
  font-size: 0.8rem;
  color: var(--text-dimmed);
}

/* Feature List - Horizontal pill layout */
.buy-features,
.features-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 0 24px;
}

.buy-feature-item,
.feature-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.buy-feature-item svg,
.feature-pill svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  stroke: var(--primary);
}

.buy-smart-note {
  font-size: 0.8rem;
  color: var(--text-dimmed);
  margin: 8px 0 0;
  padding-left: 24px;
}

/* Premium Perks Section - Elevated design */
.premium-perks-section {
  margin: 16px 0 8px;
  padding: 16px 18px;
  background: linear-gradient(145deg, rgba(26, 26, 46, 0.04) 0%, rgba(99, 102, 241, 0.03) 100%);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  position: relative;
}

.perks-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.perks-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--tone-violet);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: white;
  text-transform: uppercase;
  box-shadow: var(--shadow-tonal-violet);
}

.perks-title {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

.perks-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: flex-start;
}

.perk-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  background: rgba(26, 26, 46, 0.05);
  border-radius: 8px;
  transition: background 0.2s var(--ease-standard);
}

.perk-item:hover {
  background: rgba(0, 0, 0, 0.07);
}

.perk-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.perk-icon svg {
  width: 14px;
  height: 14px;
  stroke: #4a4a66;
  stroke-width: 2.5;
}

.perk-text {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
}

/* Highlight perk - "Credits never expire" */
.perk-item-highlight {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0%, rgba(167, 139, 250, 0.1) 100%);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.perk-item-highlight .perk-icon svg {
  stroke: #4a4a66;
}

.perk-item-highlight .perk-text {
  color: #C4B5FD;
  font-weight: 600;
}

/* Elevated Buysheet v4 - Header */
.buy-header-v7 .sheet-headline {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Step 2 headline - slightly smaller */
#buySheetStep2 .sheet-headline {
  font-size: 1.15rem;
  margin-bottom: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.buy-header-v7 .sheet-subline {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

/* ============================================
   UNIFIED PRICING CARD ELEMENTS
   Consistent styling across buy sheet & homepage
   ============================================ */

/* Quantity - the big number (20, 60, 80) */
.pack-card .card-quantity,
.pricing-card .pricing-card-qty {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
}

/* Label - "edits" or "edits/mo" */
.pack-card .card-label,
.pricing-card .pricing-card-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* Price row - contains original + current price */
.pack-card .card-price-row,
.pricing-card .pricing-card-price-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}

/* Current price */
.pack-card .card-price,
.pricing-card .pricing-card-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

/* Price suffix (/mo) */
.pack-card .card-price-suffix,
.pricing-card .pricing-card-suffix {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* Per-edit unit price */
.pack-card .card-unit,
.pricing-card .pricing-card-unit {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

/* Best value card - green accent for unit */
.pack-card-best .card-unit,
.pricing-card--best .pricing-card-unit {
  color: #059669;
  font-weight: 600;
}

/* Subscription card styling - blue accent */
.pack-card-sub {
  background: rgba(14, 165, 233, 0.08) !important;
  border-color: rgba(14, 165, 233, 0.25) !important;
}

.pack-card-sub:hover {
  border-color: #0ea5e9 !important;
  background: rgba(14, 165, 233, 0.12) !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15) !important;
}

.pack-card-sub .card-cta {
  background: #0ea5e9;
}

.pack-card-sub:hover .card-cta {
  background: #0284c7;
}

/* Subscription badge - blue */
.card-badge-sub {
  background: #0ea5e9 !important;
  color: white !important;
}

/* Homepage subscription card */
.pricing-card--sub {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.25);
}

.pricing-card--sub:hover {
  border-color: #0ea5e9;
  background: rgba(14, 165, 233, 0.12);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
}

.pricing-card-badge--sub {
  background: #0ea5e9 !important;
  color: white !important;
}

/* Elevated Buysheet v4 - Trust Row */
.buy-sheet-footer .trust-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 10px;
}

.buy-sheet-footer .trust-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
}

.buy-sheet-footer .trust-item svg {
  width: 13px;
  height: 13px;
  opacity: 0.7;
  stroke: var(--primary);
}

/* Mobile: smaller elevated buysheet */
@media (max-width: 380px) {
  .buy-header-v7 .sheet-headline {
    font-size: 1.25rem;
  }

  .pack-card .card-quantity {
    font-size: 1.85rem;
  }

  .buy-sheet-footer .trust-row {
    gap: 10px;
  }

  .buy-sheet-footer .trust-item {
    font-size: 0.62rem;
  }
}

/* Conversion Modal - Value Anchor */
.conversion-value-anchor {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.4;
}

.conversion-features-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Mobile: smaller pack card padding */
@media (max-width: 380px) {
  .buy-packs-grid {
    gap: 8px;
  }

  .pack-card {
    padding: 14px 10px;
  }

  .pack-card-amount {
    font-size: 1.85rem;
  }

  .buy-features,
  .features-row {
    gap: 4px;
    padding: 0 18px;
  }

  .buy-feature-item,
  .feature-pill {
    padding: 5px 8px;
    font-size: 0.65rem;
  }

  /* Premium perks - compact on small mobile */
  .premium-perks-section {
    margin: 0 12px 12px;
    padding: 12px 12px 14px;
  }

  .perks-grid {
    gap: 8px;
  }

  .perk-icon {
    width: 28px;
    height: 28px;
  }

  .perk-icon svg {
    width: 14px;
    height: 14px;
  }

  .perk-text {
    font-size: 0.7rem;
  }
}

/* Very small screens: stack cards vertically */
@media (max-width: 340px) {
  .buy-packs-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   FOCUSED DROPZONE HERO (Pre-upload)
   Two-column split: copy left, dropzone right
   Stacks on mobile
   ============================================ */
.hero-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 24px 16px;
  gap: 24px;
}

/* Left column: copy + trust */
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

/* Right column: dropzone */
.hero-action {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-dropzone-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  text-align: center;
  line-height: 1.1;
  letter-spacing: -0.03em;
  /* Mobile: honor the \n in home.titlePrefix so "done in seconds." stacks.
     Desktop overrides below collapse the break — single line reads better
     on wide layouts. */
  white-space: pre-line;
}

.hero-title-accent {
  font-style: italic;
  font-weight: 800;
  color: var(--tone-violet-700);
  letter-spacing: -0.025em;
}

@media (min-width: 768px) {
  .hero-dropzone-title {
    white-space: normal;
  }
}

.hero-dropzone-subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  line-height: 1.55;
  max-width: 520px;
}

/* Trust signals row */
.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 4px;
}

.hero-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hero-trust-num {
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--tone-violet-700);
  font-variant-numeric: tabular-nums;
}

.hero-trust-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero-trust-sep {
  width: 1px;
  height: 28px;
  background: var(--hairline);
  flex-shrink: 0;
}


.dropzone-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  padding: 44px 28px;
  background: linear-gradient(135deg, var(--tone-violet-50) 0%, var(--card) 70%);
  color: var(--text);
  border: 2px dashed color-mix(in srgb, var(--tone-violet) 32%, transparent);
  border-radius: var(--r-xl);
  cursor: pointer;
  font-family: var(--font-body);
  overflow: visible;
  transition: border-color 200ms var(--ease-standard),
              background 240ms var(--ease-standard),
              box-shadow 240ms var(--ease-standard),
              transform 200ms var(--ease-standard);
  box-shadow: var(--shadow-sm);
}

.dropzone-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--tone-violet) 14%, transparent) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.45;
  pointer-events: none;
  mask-image: linear-gradient(135deg, black, transparent 70%);
  -webkit-mask-image: linear-gradient(135deg, black, transparent 70%);
}

.dropzone-box:hover {
  border-color: var(--tone-violet);
  border-style: solid;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
}

.dropzone-box:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

@media (hover: none) and (pointer: coarse) {
  .dropzone-box {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .dropzone-box:active {
    border-color: var(--tone-violet);
    border-style: solid;
    background: linear-gradient(135deg, var(--tone-violet-100) 0%, var(--card) 70%);
  }
}

/* Instant tap feedback for file-picker labels.
   Triggered on touchstart by early.js so users get a visible "I felt that"
   pop within 16ms — bridges the 200-700ms iOS picker-render gap that was
   driving rage taps (sessions 019dff6c/6e/59, May 2026). */
.file-picker-tap {
  animation: file-picker-tap-pop 280ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes file-picker-tap-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
.dropzone-box.file-picker-tap {
  border-color: var(--tone-violet);
  border-style: solid;
  background: linear-gradient(135deg, var(--tone-violet-100) 0%, var(--card) 70%);
  box-shadow: var(--shadow-md), 0 0 0 6px color-mix(in srgb, var(--tone-violet) 18%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .file-picker-tap { animation: none; }
}

/* Uploading: soft pulse on the dashed border + shimmer overlay — no scale changes. */
.dropzone-box.uploading {
  cursor: progress;
  pointer-events: none;
  animation: dropzone-uploading-pulse 1.6s ease-in-out infinite;
}

@keyframes dropzone-uploading-pulse {
  0%, 100% {
    border-color: color-mix(in srgb, var(--tone-violet) 32%, transparent);
    box-shadow: var(--shadow-sm);
  }
  50% {
    border-color: var(--tone-violet);
    box-shadow: var(--shadow-md), 0 0 0 6px color-mix(in srgb, var(--tone-violet) 14%, transparent);
  }
}

.dropzone-box.uploading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--tone-violet) 18%, transparent) 50%,
    transparent 100%
  );
  animation: dropzone-uploading-shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
  clip-path: inset(0 round var(--r-xl));
}

@keyframes dropzone-uploading-shimmer {
  0%   { left: -110%; }
  60%  { left: 110%; }
  100% { left: 110%; }
}

@media (prefers-reduced-motion: reduce) {
  .dropzone-box.uploading {
    animation: none;
    opacity: 0.75;
  }
  .dropzone-box.uploading::after {
    animation: none;
  }
}

.dropzone-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tone-violet);
  border-radius: var(--r-pill);
  color: #fff;
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-tonal-violet);
}

.dropzone-icon svg {
  width: 32px;
  height: 32px;
}

.dropzone-text {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

.dropzone-hint {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}

/* ============================================
   FREE EDIT BADGE
   Stuck to bottom of dropzone, half on/half off
   ============================================ */
.free-badge {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.free-badge-icon {
  font-size: 0.9rem;
}


/* ============================================
   ROTATING PROMPT HINT
   Fade-transitioning example prompts
   ============================================ */
.dropzone-prompt {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--tone-violet-700);
  opacity: 0.95;
  transition: opacity 0.4s var(--ease-standard);
  min-height: 1.4em;
  text-align: center;
  position: relative;
  z-index: 1;
  /* Reserve a tiny amount of horizontal space so the blinking cursor doesn't
     visually shift the text when characters are being typed/erased. */
  padding-right: 2px;
  /* Constrain typed-out prompts to the card width — sample prompts can grow
     past the card edge mid-typewriter, breaking the rounded card visually
     on narrow viewports. Single-line truncation matches the 1.4em min-height. */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Blinking caret — only present when JS adds .typewriter (skip for SSR/no-JS) */
.dropzone-prompt.typewriter::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--tone-violet);
  animation: dropzone-caret-blink 1s steps(1) infinite;
}

@keyframes dropzone-caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Submit-pulse: brief tonal-violet ring + soft scale on the dropzone after a
   prompt finishes typing. Sells "now you'd hit submit" without being a real CTA. */
.dropzone-box.demo-tap {
  animation: dropzone-demo-tap 360ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes dropzone-demo-tap {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: var(--shadow-sm);
  }
  35% {
    transform: translateY(-1px) scale(1.012);
    box-shadow: var(--shadow-md), 0 0 0 8px color-mix(in srgb, var(--tone-violet) 18%, transparent);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: var(--shadow-sm);
  }
}

/* Confetti burst — DOM nodes spawned by initRotatingPrompts(). The wrapper
   sits dead-center over the dropzone so all pieces fly out from the same point. */
.dropzone-confetti {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}
.dropzone-confetti-piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--c, var(--tone-violet));
  border-radius: 1.5px;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: dropzone-confetti-fly 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes dropzone-confetti-fly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
  }
  15% { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--tx)), calc(-50% + var(--ty)))
      scale(0.6)
      rotate(var(--rot, 180deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .dropzone-prompt.typewriter::after { animation: none; opacity: 0.6; }
  .dropzone-box.demo-tap { animation: none; }
  .dropzone-confetti { display: none; }
}

.dropzone-prompt.fade-out {
  opacity: 0;
}


/* ============================================
   DROPZONE SUBTEXT
   Value prop under dropzone
   ============================================ */
.dropzone-subtext {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
  max-width: 340px;
  line-height: 1.5;
}

.dropzone-tasks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 4px;
  max-width: 400px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.dropzone-task {
  color: var(--text-secondary);
  font-weight: 500;
}

.dropzone-task-sep {
  color: var(--border);
}

.dropzone-free-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

/* Elevated chips */
.dropzone-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 440px;
}

.dropzone-chip {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--card);
  border: 1px solid var(--hairline);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  transition: background 0.16s var(--ease-standard), color 0.16s var(--ease-standard), border-color 0.16s var(--ease-standard), transform 0.12s var(--ease-standard);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dropzone-chip:active {
  transform: scale(0.96);
}

.dropzone-chip:hover {
  border-color: color-mix(in srgb, var(--tone-violet) 26%, transparent);
  color: var(--tone-violet-700);
  background: var(--tone-violet-50);
}

.dropzone-chip--more {
  color: var(--tone-violet-700);
  border-color: color-mix(in srgb, var(--tone-violet) 22%, transparent);
  background: var(--tone-violet-50);
}

.dropzone-chip--more:hover {
  background: var(--tone-violet-100);
}

/* Elevated free hint */
.dropzone-free {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.dropzone-free svg {
  color: var(--primary);
  fill: rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.dropzone-free-sep {
  color: var(--border);
}

@media (max-width: 400px) {
  .dropzone-chips {
    gap: 6px;
  }

  .dropzone-chip {
    font-size: 0.75rem;
    padding: 5px 12px;
  }

  .dropzone-free {
    font-size: 0.8rem;
    gap: 6px;
  }
}

/* Tablet — two column */
@media (min-width: 768px) {
  .hero-dropzone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    padding: 40px 32px;
    gap: 24px 40px;
    max-width: 960px;
    margin: 0 auto;
  }

  .hero-copy {
    text-align: left;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .hero-action {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
    min-width: 0;
  }

  .hero-dropzone-title {
    text-align: left;
    font-size: 2.2rem;
  }

  .hero-dropzone-subtitle {
    text-align: left;
    max-width: none;
  }

  .hero-trust {
    justify-content: flex-start;
  }

  /* Showcase strip spans both columns */
  .showcase-strip {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Desktop — more breathing room */
@media (min-width: 1024px) {
  .hero-dropzone {
    padding: 56px 48px;
    gap: 32px 64px;
    max-width: 1120px;
  }

  .hero-dropzone-title {
    font-size: 2.8rem;
    line-height: 1.1;
  }

  .hero-dropzone-subtitle {
    font-size: 1.1rem;
  }

  .hero-trust-num {
    font-size: 1.6rem;
  }

  .dropzone-box {
    max-width: 440px;
    padding: 52px 36px;
    gap: 16px;
  }

  .dropzone-icon {
    width: 76px;
    height: 76px;
  }

  .dropzone-icon svg {
    width: 36px;
    height: 36px;
  }

  .dropzone-text {
    font-size: 1.2rem;
  }
}

/* Large desktop */
@media (min-width: 1280px) {
  .hero-dropzone {
    padding: 64px 64px;
    gap: 32px 80px;
  }

  .hero-dropzone-title {
    font-size: 3.2rem;
  }

  .dropzone-box {
    max-width: 480px;
    padding: 60px 40px;
  }
}

/* ============================================
   SHOWCASE STRIP - Transformation Theater
   ============================================ */
.showcase-strip {
  width: 100%;
  overflow: hidden;
  padding: 12px 0;
  position: relative;
  /* CLS fix: reserve vertical space matching the rendered children
     (padding + frame height + gap + label) so lazy-loaded showcase
     images and font-swap label metrics cannot shift the layout below.
     Per-breakpoint overrides live in the mobile/desktop blocks below. */
  min-height: 180px;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

/* Subtle grain overlay */
.showcase-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.showcase-track {
  display: flex;
  gap: 24px;
  animation: marquee 30s linear infinite;
  width: max-content;
}

.showcase-track:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Individual card */
.showcase-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  transition: transform 0.3s var(--ease-standard), opacity 0.3s var(--ease-standard);
}

/* Backlight glow */
.showcase-card::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: 20px;
  background: radial-gradient(
    ellipse at center,
    rgba(26, 26, 46, 0.05) 0%,
    transparent 70%
  );
  border-radius: 16px;
  filter: blur(8px);
  z-index: -1;
  opacity: 0.8;
  transition: opacity 0.3s var(--ease-standard);
}

/* Hover: spotlight effect */
.showcase-track:hover .showcase-card {
  opacity: 0.5;
}

.showcase-track:hover .showcase-card:hover {
  opacity: 1;
  transform: scale(1.05);
}

.showcase-track:hover .showcase-card:hover::before {
  opacity: 1;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.1) 0%,
    transparent 70%
  );
}

/* Frame container */
.showcase-frame {
  position: relative;
  width: 180px;
  height: 135px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-subtle);
  border: 1px solid rgba(26, 26, 46, 0.05);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

.showcase-before,
.showcase-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-after {
  clip-path: inset(0 100% 0 0);
  animation: wipe-reveal 5.3s var(--ease-in-out) infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes wipe-reveal {
  0%, 35% {
    clip-path: inset(0 100% 0 0);
  }
  45%, 85% {
    clip-path: inset(0 0 0 0);
  }
  95%, 100% {
    clip-path: inset(0 100% 0 0);
  }
}

/* Pause wipe animation on hover */
.showcase-track:hover .showcase-after {
  animation-play-state: paused;
}

/* Label */
.showcase-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Reference card (equation layout) - for future use with reference images */
.showcase-card--reference .showcase-frame {
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.showcase-card--reference .showcase-base,
.showcase-card--reference .showcase-result {
  width: 90px;
  height: 68px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

.showcase-card--reference .showcase-ref {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid var(--primary-light);
  box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.2);
}

.showcase-op {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  text-shadow: 0 0 8px rgba(var(--primary-rgb), 0.3);
}

/* Mobile sizing */
@media (max-width: 599px) {
  .showcase-strip {
    padding: 16px 0;
    touch-action: pan-x; /* Allow horizontal swipe on mobile */
    cursor: grab;
    /* CLS fix: padding 32 + frame 90 + gap 10 + label ≈ 10 = 142 */
    min-height: 142px;
  }

  .showcase-strip:active {
    cursor: grabbing;
  }

  .showcase-track {
    gap: 16px;
  }

  .showcase-frame {
    width: 120px;
    height: 90px;
    border-radius: 8px;
  }

  .showcase-label {
    font-size: 0.65rem;
  }

  .showcase-card--reference .showcase-base,
  .showcase-card--reference .showcase-result {
    width: 72px;
    height: 54px;
  }

  .showcase-card--reference .showcase-ref {
    width: 44px;
    height: 33px;
  }

  .showcase-op {
    font-size: 0.85rem;
  }
}

/* Desktop sizing */
@media (min-width: 900px) {
  .showcase-strip {
    padding: 28px 0;
    /* CLS fix: padding 56 + frame 165 + gap 10 + label ≈ 11 = 242 */
    min-height: 242px;
  }

  .showcase-track {
    gap: 28px;
  }

  .showcase-frame {
    width: 220px;
    height: 165px;
    border-radius: 12px;
  }

  .showcase-label {
    font-size: 0.75rem;
  }

  .showcase-card--reference .showcase-base,
  .showcase-card--reference .showcase-result {
    width: 120px;
    height: 90px;
  }

  .showcase-card--reference .showcase-ref {
    width: 72px;
    height: 54px;
  }
}

/* ============================================
   HERO V2 - Elevated Landing Experience
   ============================================ */
.hero-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 32px 20px;
  gap: 32px;
}

.hero-v2-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 500px;
}

.hero-v2-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
}

.hero-v2-accent {
  color: var(--primary);
}

.hero-v2-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.hero-v2-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  margin-top: 8px;
}

.hero-v2-cta:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.hero-v2-cta:active {
  transform: scale(0.98);
}

.hero-v2-free {
  font-size: 0.85rem;
  color: var(--text-dimmed);
  margin: 0;
}

/* Preview card section */
.hero-v2-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 480px;
}

.preview-card {
  position: relative;
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.preview-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.preview-label {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.preview-after {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.preview-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.preview-prompt-icon {
  font-size: 1.2rem;
  color: var(--primary);
  font-weight: 600;
}

.preview-prompt code {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Mobile: stack preview vertically */
@media (max-width: 500px) {
  .hero-v2 {
    padding: 24px 16px;
    gap: 28px;
  }

  .hero-v2-title {
    font-size: 1.7rem;
  }

  .hero-v2-subtitle {
    font-size: 0.95rem;
  }

  .hero-v2-cta {
    padding: 14px 28px;
    font-size: 1rem;
  }

  .hero-v2-preview {
    flex-direction: row;
    gap: 12px;
    max-width: 320px;
  }

  .preview-prompt {
    display: none;
  }
}

/* Desktop: larger hero */
@media (min-width: 900px) {
  .hero-v2 {
    padding: 48px 32px;
    gap: 40px;
  }

  .hero-v2-title {
    font-size: 3rem;
  }

  .hero-v2-subtitle {
    font-size: 1.2rem;
  }

  .hero-v2-cta {
    padding: 18px 40px;
    font-size: 1.15rem;
    border-radius: 16px;
  }

  .hero-v2-preview {
    max-width: 560px;
    gap: 24px;
  }

  .preview-card {
    border-radius: 16px;
  }

  .preview-label {
    font-size: 0.65rem;
    padding: 4px 10px;
    bottom: 8px;
    left: 8px;
  }

  .preview-prompt code {
    font-size: 0.8rem;
    padding: 6px 12px;
  }
}

/* Credit banner removed — info shown in header + edit button text */

/* ============================================
   CUSTOM PROMPT SECTION (Editor)
   Wrapper for textarea and related UI
   ============================================ */
.custom-prompt-section {
  margin-bottom: 0;
}

/* ============================================
   MOBILE: Maximize image visibility
   Hide secondary UI, focus on image + prompt
   ============================================ */
@media (max-width: 768px) {
  /* Photo strip on mobile - keep visible so users can add second photo */
  /* Only hide when keyboard is open (handled separately) */

  /* Photo strip - compact but functional */
  .app.has-image .photo-strip {
    padding: 6px 12px;
  }

  .app.has-image .photo-strip-item {
    padding: 2px;
  }

  .app.has-image .photo-thumb-wrapper {
    width: 40px;
    height: 40px;
  }

  .app.has-image .photo-strip-add {
    padding: 6px 10px;
    font-size: 0.7rem;
  }

  /* Compact edit card */
  .app.has-image .edit-card {
    padding: 10px;
    border-radius: 12px;
    gap: 6px;
  }

  /* Compact edit card footer */
  .app.has-image .edit-card-footer {
    margin-top: 6px;
    gap: 8px;
  }

  /* Tighten section gap above the prompt area */
  .app.has-image .custom-prompt-section {
    margin-top: 0;
  }

  /* Reference photo CTA — compact on mobile when an image is loaded */
  .app.has-image .reference-photo-section {
    margin-top: 6px;
  }

  /* Hide edit cost caption on mobile to save space (except countdown and Pro cost notice) */
  .app.has-image .edit-cost-caption:not(.free):not(.pro-cost) {
    display: none;
  }

  /* Pro upsell more compact */
  .app.has-image .pro-upsell {
    padding: 4px 8px;
    font-size: 0.7rem;
  }
}

/* Buy sheet footer */
.footer-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.7rem;
  color: var(--text-dimmed);
}

.footer-trust svg {
  width: 12px;
  height: 12px;
  stroke: var(--text-dimmed);
}

.footer-dot {
  color: var(--text-dimmed);
}

.footer-signin {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0;
}

.footer-signin:hover {
  text-decoration: underline;
}

/* ============================================
   SAVED EDITS DRAWER
   Slide-out panel for viewing saved edits
   ============================================ */

/* Overlay */
.saved-edits-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 10001;
  pointer-events: none;
  /* Match drawer slide-out (0.28s) so backdrop holds until drawer is off-screen. */
  transition: background 0.28s var(--ease-standard);
}
.saved-edits-drawer-overlay.visible {
  background: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

/* Drawer panel */
.saved-edits-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(460px, 55vw, 880px);
  max-width: 100vw;
  background: var(--card);
  z-index: 10002;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);
}
.saved-edits-drawer.visible {
  transform: translateX(0);
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Drawer header */
.drawer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.drawer-header h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
}
.drawer-count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--tone-violet-700);
  background: var(--tone-violet-50);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.drawer-count strong {
  color: var(--tone-violet-700);
  font-weight: 700;
}
.drawer-close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  transition: background 0.18s var(--ease-standard), color 0.18s var(--ease-standard);
}
.drawer-close:hover {
  background: var(--tone-rose-50);
  color: var(--tone-rose-700);
}

/* Drawer search */
.drawer-search {
  position: relative;
  padding: 14px 20px 0;
  flex-shrink: 0;
}

.drawer-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.drawer-search-input {
  width: 100%;
  padding: 11px 32px 11px 36px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--card-tonal);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: border-color 0.18s var(--ease-standard), box-shadow 0.2s var(--ease-standard), background 0.18s var(--ease-standard);
  box-sizing: border-box;
}

.drawer-search-input:focus {
  border-color: var(--tone-violet);
  background: var(--card);
  box-shadow: 0 0 0 4px var(--tone-violet-50);
}

.drawer-search-input::placeholder {
  color: var(--text-muted);
}

.drawer-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-search-clear:hover {
  color: var(--text);
  background: var(--bg-subtle);
}

.drawer-controls {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 12px 16px 0;
}
.drawer-controls .drawer-search {
  flex: 1;
  padding: 0;
}
.drawer-sort-btn {
  flex-shrink: 0;
  margin-top: 1px;
  padding: 9px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.drawer-sort-btn:hover {
  border-color: color-mix(in srgb, var(--tone-violet) 26%, transparent);
  color: var(--tone-violet-700);
  background: var(--tone-violet-50);
}

/* Drawer date filter chips */
.drawer-filter-chips {
  display: flex;
  gap: 6px;
  padding: 10px 20px 0;
  flex-shrink: 0;
}
.drawer-filter-chip {
  padding: 5px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.drawer-filter-chip:hover {
  border-color: color-mix(in srgb, var(--tone-violet) 26%, transparent);
  color: var(--tone-violet-700);
  background: var(--tone-violet-50);
}
.drawer-filter-chip.active {
  background: var(--tone-violet);
  border-color: var(--tone-violet);
  color: white;
  box-shadow: var(--shadow-tonal-violet);
}

.drawer-no-results {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* Drawer body */
.drawer-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px 32px;
}

/* Skeleton loading */
.drawer-skeleton {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.drawer-skeleton-card {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}
.drawer-skeleton-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(var(--primary-rgb), 0.04) 50%,
    transparent 70%
  );
  animation: drawerShimmer 1.6s var(--ease-in-out) infinite;
}
@keyframes drawerShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Login prompt */
.drawer-login {
  text-align: center;
  padding: 48px 20px;
}
.drawer-login-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--bg-secondary);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-login-icon svg {
  width: 24px;
  height: 24px;
  color: var(--text-muted);
}
.drawer-login h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}
.drawer-login p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}
.drawer-login-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--text, #1a1a2e);
  color: #fff;
  padding: 10px 22px;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.drawer-login-cta:active {
  transform: scale(0.96);
  opacity: 0.9;
}

/* Empty state */
.drawer-empty {
  text-align: center;
  padding: 48px 20px;
}
.drawer-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--bg-secondary);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-empty-icon svg {
  width: 24px;
  height: 24px;
  color: var(--text-muted);
}
.drawer-empty h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}
.drawer-empty p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 18px;
  line-height: 1.5;
}
.drawer-empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  background: var(--text);
  color: var(--card, #fff);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms var(--ease-standard), background 160ms var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.drawer-empty-cta:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--text) 92%, white); }
.drawer-empty-cta:active { transform: translateY(0); }

/* Date groups */
.drawer-date-group {
  margin-bottom: 20px;
}
.drawer-date-group:last-child {
  margin-bottom: 0;
}
.drawer-date-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px 2px;
}

/* Card grid */
.drawer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

/* Batched versions card — full-row width, inline mini-thumbs */
.drawer-batch-card {
  grid-column: 1 / -1;
  cursor: default;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.drawer-batch-card:hover { transform: none; box-shadow: none; }
.drawer-batch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.drawer-batch-prompt {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-batch-prompt.empty { color: var(--text-dimmed); font-style: italic; }
.drawer-batch-count {
  flex-shrink: 0;
  padding: 2px 8px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.drawer-batch-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.drawer-batch-row > .drawer-batch-mini {
  position: static;
  border-radius: var(--r-sm, 8px);
  animation: none;
  opacity: 1;
  transform: none;
}
.drawer-batch-mini-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 1px 6px;
  background: rgba(20, 20, 40, 0.72);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.04em;
  pointer-events: none;
}
@media (max-width: 380px) {
  .drawer-batch-row { grid-template-columns: repeat(2, 1fr); }
}

/* Individual card */
.drawer-card {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--hairline);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  animation: drawerCardIn 0.35s var(--ease-out) forwards;
  transition: border-color 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard), transform 0.2s var(--ease-standard);
}
@keyframes drawerCardIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.drawer-card:hover {
  border-color: color-mix(in srgb, var(--tone-violet) 32%, transparent);
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  transform: translateY(-2px);
}
.drawer-card.removing {
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.25s var(--ease-standard), opacity 0.25s var(--ease-standard);
}
.drawer-card.kbd-focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Card thumbnail */
.drawer-card-thumb {
  aspect-ratio: 1;
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}
.drawer-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s var(--ease-standard), transform 0.3s var(--ease-standard);
}
.drawer-card-thumb img.loaded {
  opacity: 1;
}
.drawer-card-thumb img.error {
  display: none;
}
@media (hover: hover) {
  .drawer-card:hover .drawer-card-thumb img.loaded {
    transform: scale(1.04);
  }
}

/* Image error fallback */
.drawer-card-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
}
.drawer-card-fallback svg {
  width: 28px;
  height: 28px;
  color: var(--text-dimmed);
  opacity: 0.5;
}

/* Hover action buttons */
.drawer-card-actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s var(--ease-standard), visibility 0.18s var(--ease-standard);
}
@media (hover: hover) {
  .drawer-card:hover .drawer-card-actions {
    opacity: 1;
    visibility: visible;
  }
}
.drawer-action {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  border: none;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s var(--ease-standard), transform 0.15s var(--ease-standard);
}
.drawer-action svg {
  width: 15px;
  height: 15px;
}
.drawer-action:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: scale(1.08);
}
.drawer-action--delete:hover {
  background: rgba(239, 68, 68, 0.85);
}
.drawer-action.success {
  background: rgba(34, 197, 94, 0.85);
}

/* Favorite button on edit cards (shared by drawer + dashboard) */
.edit-card-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s var(--ease-standard), color 0.15s var(--ease-standard);
  z-index: 2;
  padding: 0;
}
.drawer-card:hover .edit-card-fav,
.dash-card:hover .edit-card-fav,
.edit-card-fav.active {
  opacity: 1;
}
.edit-card-fav.active {
  color: #fbbf24;
}
.edit-card-fav:hover {
  color: #fbbf24;
}

/* Card info */
.drawer-card-info {
  padding: 8px 10px;
}
.drawer-card-prompt {
  font-size: 0.72rem;
  color: var(--text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.drawer-card-prompt.empty {
  color: var(--text-dimmed);
  font-style: italic;
}
.drawer-card-prompt.expired {
  color: var(--text-dimmed);
  font-size: 0.65rem;
}

/* Expired card state */
.drawer-card--expired {
  opacity: 0.6;
}
.drawer-card--expired .drawer-card-thumb {
  cursor: pointer;
}
.drawer-card--expired .drawer-card-fallback {
  opacity: 0.3;
}
.drawer-card-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  z-index: 2;
}
.drawer-card-lock svg {
  width: 100%;
  height: 100%;
}
.drawer-card-actions--expired {
  opacity: 1;
  visibility: visible;
  background: transparent;
  justify-content: flex-end;
  padding: 6px;
}

/* ============================================
   SAVED EDITS TRIGGER BUTTON
   ============================================ */

.saved-edits-trigger[hidden] {
  display: none;
}
.saved-edits-trigger {
  position: relative;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
}
.saved-edits-trigger svg {
  width: 18px;
  height: 18px;
}
.saved-edits-trigger:hover {
  color: var(--primary);
  background: rgba(26, 26, 46, 0.04);
}

/* Pulse animation on save */
.saved-edits-trigger.pulse {
  animation: triggerPulse 0.6s var(--ease-standard);
}
@keyframes triggerPulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.15); }
  60% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* "Saved" badge */
.save-badge {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s var(--ease-standard), transform 0.2s var(--ease-standard);
  pointer-events: none;
}
.save-badge.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================
   DRAWER RESPONSIVE - Mobile
   ============================================ */

@media (max-width: 600px) {
  .saved-edits-drawer {
    width: 100vw;
    border-left: none;
  }

  .drawer-card-actions {
    opacity: 1;
  }

  .drawer-body {
    padding: 12px 12px 40px;
  }

  .drawer-grid {
    gap: 8px;
  }
}

/* SUGGESTION CHIPS */
.suggestion-chip { flex-shrink: 0; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text); font-size: 0.78rem; font-weight: 500; white-space: nowrap; transition: all var(--transition-fast); line-height: 1.2; }
.suggestion-chip:active { transform: scale(0.95); background: var(--glow); border-color: var(--primary); }
.suggestion-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Old onboarding dim/focus + ref prompt card removed — replaced by onboarding.css V2 spotlight engine */

/* ============================================
   REVEAL ANIMATIONS
   Overlay + blur-to-sharp + merge thumbnail
   + result fade-in for edit completion.
   ============================================ */

/* Reveal overlay — an <img> absolutely positioned over #imageWrapper */
.reveal-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 5;
  pointer-events: none;
}

/* Single-photo: blur-to-sharp reveal — the money shot */
.reveal-blur {
  filter: blur(24px) saturate(0.6);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.97);
  /* GPU-promote: filter+transform animation runs on its own composite layer,
     which prevents repaints from cascading into surrounding image elements. */
  will-change: filter, transform, opacity;
  backface-visibility: hidden;
  animation: revealBlurToSharp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes revealBlurToSharp {
  0% {
    filter: blur(24px) saturate(0.6);
    opacity: 0;
    transform: scale(0.97);
  }
  30% {
    opacity: 1;
  }
  100% {
    filter: blur(0) saturate(1);
    opacity: 1;
    transform: scale(1);
  }
}

/* Two-photo: merge thumbnails fly to center */
.reveal-merge-thumb {
  position: absolute;
  width: 35%;
  height: auto;
  object-fit: contain;
  z-index: 6;
  pointer-events: none;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25),
              0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  /* GPU-promote so the merge animation composites without retriggering paint
     of the surrounding image wrapper. backface-visibility forces a layer. */
  will-change: transform, left, right, opacity;
  backface-visibility: hidden;
}

.reveal-merge-thumb.left {
  left: 5%;
  top: 50%;
  transform: translateY(-50%) scale(0.9) rotate(-2deg);
}

.reveal-merge-thumb.right {
  right: 5%;
  top: 50%;
  transform: translateY(-50%) scale(0.9) rotate(2deg);
}

.reveal-merge-thumb.merged {
  left: 50%;
  right: auto;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  opacity: 0;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* Result fade-in after merge */
.reveal-result-fade {
  animation: revealResultFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes revealResultFade {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
   FULLSCREEN REVEAL LIGHTBOX
   Shows edited image full-screen after each edit.
   ============================================ */

.fullscreen-reveal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fullscreen-reveal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  animation: fsRevealBackdropIn 0.3s var(--ease-out) forwards;
}

@keyframes fsRevealBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fullscreen-reveal img {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 80px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  animation: fsRevealImageIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

@keyframes fsRevealImageIn {
  from {
    opacity: 0;
    transform: scale(0.85);
    filter: blur(12px);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.fullscreen-reveal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s, transform 0.1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.fullscreen-reveal-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.fullscreen-reveal-close:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.35);
}

.fullscreen-reveal-save {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.15s;
}

.fullscreen-reveal-save.visible {
  display: flex;
  animation: fsRevealSaveIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fsRevealSaveIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

.fullscreen-reveal-save:hover {
  background: rgba(255, 255, 255, 0.28);
}

.fullscreen-reveal-save:active {
  transform: scale(0.9);
}

.fullscreen-reveal-save.saved {
  background: rgba(76, 175, 80, 0.45);
}

.fullscreen-reveal-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  pointer-events: none;
  animation: fsRevealHintIn 0.6s 0.4s var(--ease-out) both;
}

@keyframes fsRevealHintIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Large save bar shown after paywall dismissal */
.fullscreen-reveal-save-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: rgba(26, 26, 46, 0.85);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  animation: fsRevealSaveIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fullscreen-reveal-save-bar:hover {
  background: rgba(26, 26, 46, 0.95);
}

.fullscreen-reveal-save-bar:active {
  transform: scale(0.95);
}

.fullscreen-reveal-save-bar svg {
  flex-shrink: 0;
}

/* Exit animation */
.fullscreen-reveal.closing .fullscreen-reveal-backdrop {
  animation: fsRevealBackdropOut 0.25s var(--ease-out) forwards;
}

.fullscreen-reveal.closing img {
  animation: fsRevealImageOut 0.25s var(--ease-out) forwards;
}

@keyframes fsRevealBackdropOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes fsRevealImageOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}

/* ============================================
   BEFORE / AFTER TOGGLE
   Segmented pill control over image.
   Clear active state shows which view is selected.
   ============================================ */

.before-after-toggle {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  background: rgba(8, 8, 14, 0.65);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
    0 4px 20px rgba(0, 0, 0, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.2);
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  opacity: 0;
  animation: toggleFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

/* Sliding indicator pill */
.before-after-toggle::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  background: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
    0 1px 4px rgba(0, 0, 0, 0.12);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(100%);
  z-index: 0;
}

.before-after-toggle[data-showing="original"]::before {
  transform: translateX(0);
}

.ba-seg {
  all: unset;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 16px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.38);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ba-seg--active {
  color: rgba(255, 255, 255, 0.95);
}

.ba-seg:active {
  transform: scale(0.96);
  transition: transform 0.1s ease, color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ba-seg:not(.ba-seg--active):hover {
  color: rgba(255, 255, 255, 0.58);
}

/* Showing original — warm tint on indicator */
.before-after-toggle[data-showing="original"]::before {
  background: rgba(255, 255, 255, 0.12);
}

@keyframes toggleFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* --- Drawer Bulk Select --- */

/* Sits in .drawer-controls alongside the sort pill — matched aesthetic. */
.drawer-select-btn {
  flex-shrink: 0;
  margin-top: 1px;
  padding: 9px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.drawer-select-btn:hover {
  border-color: color-mix(in srgb, var(--tone-violet) 26%, transparent);
  color: var(--tone-violet-700);
  background: var(--tone-violet-50);
}
.drawer-select-btn.active {
  background: var(--tone-violet);
  border-color: var(--tone-violet);
  color: white;
  box-shadow: var(--shadow-tonal-violet);
}

/* Drawer card selection checkbox */
.select-mode .drawer-card { cursor: pointer; position: relative; }
.select-mode .drawer-card::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  z-index: 2;
  transition: all 0.15s var(--ease-standard);
}
.select-mode .drawer-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}
.select-mode .drawer-card.selected::before {
  background: var(--primary);
  border-color: var(--primary);
}
.select-mode .drawer-card.selected::after {
  content: '\2713';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
  z-index: 3;
}

/* Drawer floating bulk action bar */
.drawer-bulk-bar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  z-index: 10;
}
/* `display: flex` above wins over the HTML `hidden` attribute, so spell it out. */
.drawer-bulk-bar[hidden] { display: none; }

/* ============================================
   PAYMENT ELEMENT (Stripe Custom Checkout)
   Step 2 of the buy sheet — inline card form.
   Matches the V9 buy sheet design language:
   Instrument Serif for prices, violet glow,
   14px radius, ambient violet tint.
   ============================================ */

/* ============================================
   STEP 2: EMBEDDED CHECKOUT
   When active, the buy sheet transforms into a
   dedicated checkout screen. The Stripe iframe
   owns the space — no cramming.
   ============================================ */

/* Buy sheet expansion — give checkout room to breathe */
.buy-sheet-v9[data-pe-step="2"] {
  max-height: 96dvh;
}
.buy-sheet-v9[data-pe-step="2"] .buy-sheet-scroll {
  justify-content: flex-start;
}
.buy-sheet-v9[data-pe-step="2"] .buy-sheet-footer-v9 {
  border-top: none;
  padding: 8px 24px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* Step 2 container */
.pe-step-2 {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

/* Branded header: back button + wordmark */
.pe-branded-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.pe-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px 4px 4px;
  background: none;
  border: none;
  color: var(--text-dimmed, rgba(26, 26, 46, 0.38));
  font-size: 0.72rem;
  font-weight: 400;
  cursor: pointer;
  transition: color 0.15s ease;
  flex-shrink: 0;
}
.pe-back-btn:hover {
  color: var(--text-muted, rgba(26, 26, 46, 0.58));
}
.pe-back-btn:active {
  transform: scale(0.97);
}
.pe-back-btn svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.pe-wordmark {
  flex: 1;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: -0.02em;
  padding-right: 48px; /* offset for visual centering against back btn */
}

/* Order summary card */
.pe-order-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(26, 26, 46, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  margin-bottom: 12px;
}
.pe-order-card-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text, #1a1a2e);
}
.pe-order-card-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a2e;
}

/* Value reminder */
.pe-value-line {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted, rgba(26, 26, 46, 0.5));
  margin-bottom: 20px;
}

/* Stripe Embedded Checkout container */
#pe-payment-element {
  flex: 1;
  min-height: 300px;
}

/* Trust line below Stripe form */
.pe-trust-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--text-dimmed, rgba(26, 26, 46, 0.32));
  letter-spacing: 0.02em;
  padding-top: 14px;
}
.pe-trust-line svg {
  stroke: var(--text-dimmed, rgba(26, 26, 46, 0.32));
  flex-shrink: 0;
}
.pe-trust-dot {
  margin: 0 1px;
}

/* Hide sheet handle + close button in checkout — back button replaces them */
.buy-sheet-v9[data-pe-step="2"] .sheet-handle { display: none; }
.buy-sheet-v9[data-pe-step="2"] .buy-sheet-close { display: none; }

/* ---- Mobile: full-screen checkout ---- */
@media (max-width: 599px) {
  .buy-sheet-v9[data-pe-step="2"] {
    max-height: 100dvh;
    border-radius: 0;
  }
  .buy-sheet-v9[data-pe-step="2"] .buy-sheet-scroll {
    padding: 12px 16px 8px;
  }
  .buy-sheet-v9[data-pe-step="2"] .buy-sheet-footer-v9 {
    padding: 6px 16px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .pe-branded-header {
    margin-bottom: 12px;
  }
  .pe-order-card {
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .pe-value-line {
    margin-bottom: 14px;
  }
  #pe-payment-element {
    font-size: 16px;
  }
}

/* ---- Desktop: focused checkout column ---- */
@media (min-width: 900px) {
  .buy-sheet-v9[data-pe-step="2"] .buy-sheet-scroll {
    max-width: 520px;
    padding-top: 40px;
  }
}

/* ============================================
   CHECKOUT RECOVERY BANNER
   Shown after a Stripe redirect was swallowed by an in-app webview / Custom
   Tab. The user bounced back to the original tab; we offer a one-tap
   second-chance "Continue checkout" handoff via target="_blank" so the
   system browser receives the link and can complete the purchase.

   Visual language: dark fill (matches app --primary), white CTA pill, soft
   shadow. Sits above rateLimitBanner z-index. On mobile it stacks vertically.
   ============================================ */
.recovery-banner {
  position: fixed;
  top: calc(60px + var(--safe-top, 0px));
  left: 16px;
  right: 16px;
  max-width: 560px;
  margin: 0 auto;
  z-index: 305;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--tone-amber-50);
  color: var(--tone-amber-700);
  border: 1px solid color-mix(in srgb, var(--tone-amber) 26%, transparent);
  border-radius: var(--r-lg);
  padding: 14px 14px 14px 18px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  font-family: var(--font-body);
  transition:
    opacity 0.25s var(--ease-standard, ease),
    transform 0.25s var(--ease-standard, ease),
    visibility 0.25s var(--ease-standard, ease);
}

.recovery-banner.visible {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.recovery-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.recovery-banner-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tone-amber) 18%, transparent);
  color: var(--tone-amber-700);
}

.recovery-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.recovery-banner-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--tone-amber-700);
  letter-spacing: -0.005em;
  line-height: 1.25;
}

.recovery-banner-subtitle {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: color-mix(in srgb, var(--tone-amber-700) 78%, transparent);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recovery-banner-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.recovery-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s var(--ease-standard, ease), box-shadow 0.15s var(--ease-standard, ease), background 0.15s var(--ease-standard, ease);
}

.recovery-banner-btn:hover,
.recovery-banner-btn:focus-visible {
  transform: translateY(-1px);
  background: var(--primary-hover);
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  outline: none;
}

.recovery-banner-btn:active {
  transform: translateY(0);
}

.recovery-banner-btn svg { flex-shrink: 0; margin-left: 6px; }

.recovery-banner-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: color-mix(in srgb, var(--tone-amber-700) 60%, transparent);
  border-radius: var(--r-pill);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s var(--ease-standard, ease), color 0.15s var(--ease-standard, ease);
}

.recovery-banner-dismiss:hover,
.recovery-banner-dismiss:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
}

@media (max-width: 560px) {
  .recovery-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }
  .recovery-banner-actions {
    justify-content: space-between;
  }
  .recovery-banner-btn {
    flex: 1;
    justify-content: center;
    padding: 12px 16px;
  }
  .recovery-banner-subtitle {
    white-space: normal;
  }
}

/* When the result image is shown the editor occupies the viewport — keep the
   banner visible (it's still actionable) but don't double-stack with the
   rate-limit banner if both fire. Rate-limit banner is hidden via existing rule. */
body.has-result .recovery-banner.visible {
  /* keep it; this is intentional */
}

/* ============================================================================
 * paywall-reveal-style: "juiced" treatment animations
 * ============================================================================
 * Three motion beats added on top of the copy treatment in conversion.js.
 * Goal: recover the cinematic ritual's emotional priming (verified +1.79×
 * paywall→buyer) without re-introducing the upload-gating intent + mechanic
 * screens that cost −27pp on edit_completed.
 *
 * Gated by `getExperiment('paywall-reveal-style').variant === 'treatment'`.
 * Skipped automatically if user prefers reduced motion.
 */

/* Beat 1: hero before→after sweep on paywall open
 * Reveals the user's edit left-to-right via clip-path, with the original
 * showing through underneath until the wipe completes. ~1.2s total.
 */
.paywall-hero-toggle--juiced-sweep .paywall-hero-img {
  opacity: 1 !important;
  transition: none;
}
.paywall-hero-toggle--juiced-sweep .paywall-hero-img--active {
  z-index: 2;
  animation: paywall-hero-sweep 1.2s cubic-bezier(0.16, 1, 0.3, 1) 100ms forwards;
}
.paywall-hero-toggle--juiced-sweep .paywall-hero-badge,
.paywall-hero-toggle--juiced-sweep .paywall-hero-hint {
  opacity: 0;
  transition: opacity 0.3s ease 1.2s;
}
@keyframes paywall-hero-sweep {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}

/* Beat 2: saved-time value-text pop on paywall open
 * Subtle scale bump after the screen reveal lands. Ties the eye to the
 * "Done in seconds — designer ~30 min" framing.
 */
.paywall-value-text--juiced {
  animation: paywall-value-pop 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 550ms both;
  transform-origin: center;
  display: inline-block;
}
@keyframes paywall-value-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  70%  { transform: scale(0.99); }
  100% { transform: scale(1); }
}

/* Beat 3: result-toolbar upsell pill — landed on the post-edit emotional peak
 * Hidden by default; shown only for free-tier users in treatment after a
 * weekly-free-edit completes. Opens the conversion modal directly so the
 * paywall_shown event still fires for attribution.
 */
.result-pill-upsell {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: white;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  position: relative;
  overflow: hidden;
}
.result-pill-upsell.hidden {
  display: none;
}
.result-pill-upsell:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
  transform: translateY(-1px);
}
.result-pill-upsell:active {
  transform: scale(0.96);
}
.result-pill-upsell.entering {
  animation: result-pill-upsell-pulse 1500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes result-pill-upsell-pulse {
  0%   { transform: scale(0.85); opacity: 0; }
  18%  { transform: scale(1.10); opacity: 1; }
  35%  { transform: scale(0.97); }
  55%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .paywall-hero-toggle--juiced-sweep .paywall-hero-img--active,
  .paywall-value-text--juiced,
  .result-pill-upsell.entering {
    animation: none;
  }
  .paywall-hero-toggle--juiced-sweep .paywall-hero-badge,
  .paywall-hero-toggle--juiced-sweep .paywall-hero-hint {
    opacity: 1;
  }
}

/* =============================================================================
   DESKTOP REDESIGN — Paywall + Buy Sheet (≥ 900px)
   -----------------------------------------------------------------------------
   The mobile-first 480px modal felt cramped at desktop widths. Desktop now uses
   a gallery-style 2-column conversion paywall (the user's edit on the left,
   the offer on the right) and an elevated card buy sheet (~760px) with
   substantial tier-card hierarchy.

   Aesthetic: refined editorial — Plus Jakarta Sans at substantial display
   sizes (-0.035em tracking), JetBrains Mono for labels (0.10em tracking,
   uppercase), dark-on-light selection states (no gradients, no glows), and
   gallery-frame treatment on the user's image. Hairline borders, large
   shadows, generous spacing.
   ============================================================================= */
@media (min-width: 900px) {
  /* -- Modal overlay: center the paywall instead of top-pinning it -------- */
  #conversionModal.visible {
    padding: 32px;
    align-items: center;
  }

  /* -- Paywall container: 2-column elevated card ------------------------- */
  .paywall {
    width: 100%;
    max-width: 1080px;
    height: auto;
    min-height: 580px;
    max-height: min(720px, calc(100vh - 64px));
    max-height: min(720px, calc(100dvh - 64px));
    background: var(--card);
    border-radius: 24px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 480px 1fr;
    align-items: stretch;
    box-shadow:
      0 32px 96px rgba(20, 20, 40, 0.18),
      0 8px 24px rgba(20, 20, 40, 0.08),
      0 0 0 1px rgba(20, 20, 40, 0.04);
  }
  .paywall::before { display: none; }

  /* Downsell + email gate are exit moments — single column, narrower modal */
  .paywall[data-active-screen="3"],
  .paywall[data-active-screen="4"] {
    grid-template-columns: 1fr;
    max-width: 560px;
    min-height: 0;
  }
  .paywall[data-active-screen="3"] .paywall-hero,
  .paywall[data-active-screen="4"] .paywall-hero { display: none; }

  /* -- Hero column (LEFT): gallery wall framing the user's edit ---------- */
  .paywall-hero {
    max-width: none;
    width: 100%;
    height: 100%;
    padding: 0;
    background: linear-gradient(180deg, #f4f4f7 0%, #ececf1 100%);
    position: relative;
    overflow: hidden;
    border-right: 1px solid rgba(20, 20, 40, 0.06);
  }
  /* The radial glow that contrasts the image on mobile doubles up against
     the gallery-wall background — hide it. */
  .paywall-hero .conversion-glow { display: none; }
  /* The toggle becomes the gallery stage — image fills it and uses
     object-fit: contain to centre-scale within. inset: 0 + width/height:
     100% guarantees the image box is bound to the toggle, so even when an
     image's intrinsic dimensions exceed the toggle's resolved width the
     content gets letterboxed inside rather than spilling left/right (the
     ~1200px clip bug). overflow: hidden is a safety net. */
  .paywall-hero-toggle {
    position: absolute;
    inset: 32px 32px 56px;
    width: auto;
    height: auto;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    overflow: hidden;
  }
  .paywall-hero-img,
  .paywall-hero-img--active {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 4px;
    /* No box-shadow on the box itself (it would frame the whole toggle area,
       not just the image content). Subtle inset shadow on the toggle's
       gallery-wall background already provides the framing effect. */
    box-shadow: none;
    background: transparent;
  }
  /* Subtle drop-shadow on the actual image content (via filter), so the
     contained image still reads as a framed print on the gallery wall. */
  .paywall-hero-img--active {
    filter: drop-shadow(0 16px 32px rgba(20, 20, 40, 0.18));
  }
  /* "AFTER" badge → small monospace placard, bottom-left of hero */
  .paywall-hero-badge {
    position: absolute;
    top: auto;
    bottom: 20px;
    left: 24px;
    transform: none;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: rgba(20, 20, 40, 0.88);
    color: rgba(255, 255, 255, 0.95);
    padding: 6px 12px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  /* "Tap to compare" hint → mono caption bottom-right of hero */
  .paywall-hero-hint {
    position: absolute;
    top: auto;
    bottom: 24px;
    right: 24px;
    left: auto;
    transform: none;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(20, 20, 40, 0.48);
    background: transparent;
    padding: 0;
  }

  /* -- Offer column (RIGHT): screen content reflows left-aligned --------- */
  .paywall-screen {
    max-width: none;
    width: 100%;
    padding: 56px 56px 48px;
    align-items: stretch;
    justify-content: center;
    text-align: left;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .paywall[data-active-screen="3"] .paywall-screen[data-screen="3"],
  .paywall[data-active-screen="4"] .paywall-screen[data-screen="4"] {
    padding: 56px 56px 48px;
    align-items: center;
    text-align: center;
  }

  /* Screen 1 — Hook + slider --------------------------------------------- */
  /* Social-proof pill: bumped to 12.5px and given a soft tonal background so
     it counterbalances the (now-smaller) pricing hero without becoming
     hero-sized itself. Still reads as a calming caption, not a feature. */
  .paywall-s1-social-proof {
    margin: 0 0 14px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: inline-block;
    padding: 6px 12px;
    background: rgba(20, 20, 40, 0.045);
    border-radius: 999px;
  }
  .paywall-headline {
    font-size: 2.2rem;
    text-align: left;
    margin: 0 0 8px;
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 700;
    max-width: 22ch;
  }
  .paywall-value-text {
    font-size: 14.5px;
    text-align: left;
    margin: 0 0 28px;
    color: var(--text-muted);
    line-height: 1.5;
  }
  /* Pack selector */
  .paywall-pack-selector {
    margin: 0 0 26px;
  }
  .paywall-slider-hint {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-dimmed);
    margin-bottom: 16px;
    min-height: 0;
  }
  .paywall-slider-notches {
    height: 32px;
    margin-top: 10px;
  }
  .paywall-slider-notches span {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 6px 5px;
    letter-spacing: 0;
  }
  .paywall-slider-notches span.active {
    color: var(--text);
    font-weight: 700;
    background: rgba(20, 20, 40, 0.05);
  }
  /* Screen 2 — Plans + slider in offer column ---------------------------- */
  .paywall-drawer {
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
  }
  .paywall-drawer-title {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: left;
    margin: 0 0 24px;
    line-height: 1.08;
    letter-spacing: -0.035em;
  }
  .paywall-billing-toggle {
    max-width: 280px;
    margin: 0 0 22px;
  }
  .paywall-tiers {
    gap: 10px;
    margin-bottom: 22px;
  }
  .paywall-tier {
    padding: 30px 14px 18px;
    border-radius: 14px;
  }
  .paywall-tier-name {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  .paywall-tier-credits {
    font-size: 2.4rem;
    letter-spacing: -0.03em;
  }
  .paywall-tier-unit {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.10em;
    margin-bottom: 10px;
  }
  .paywall-tier-price {
    font-size: 13px;
  }
  .paywall-tier-per-edit {
    font-size: 10.5px;
  }
  .paywall-onetime-divider {
    margin: 22px 0 18px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dimmed);
  }
  .paywall-screen2-slider {
    padding: 20px;
    border-radius: 16px;
  }
  /* CTAs span the offer column, more substantial weight */
  .paywall-cta,
  .paywall-cta--impulse,
  .paywall-cta--downsell {
    width: 100%;
    min-height: 60px;
    padding: 16px 24px;
  }
  .paywall-cta-label {
    font-size: 15px;
    font-weight: 700;
  }
  .paywall-cta-price {
    font-size: 12.5px;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
  }
  /* Trust + "Maybe later" align with the column */
  .paywall-trust-row {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-align: left;
    color: var(--text-dimmed);
    margin: 14px 0 10px;
  }
  .paywall-see-all,
  .paywall-see-all--dismiss {
    align-self: flex-start;
    text-align: left;
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-muted);
  }
  /* Close button — anchored to the paywall card (was fixed-to-viewport on
     mobile, which would orphan it at the corner on desktop) */
  .paywall-close {
    position: absolute;
    top: 20px;
    right: 20px;
  }

  /* Screens 3 + 4 (downsell + email gate) — intimate centered card ------- */
  .paywall[data-active-screen="3"] .downsell {
    padding: 0;
  }
  .paywall[data-active-screen="3"] .downsell-headline {
    font-size: 2rem;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
  }
  .paywall[data-active-screen="3"] .downsell-subtext {
    font-size: 14.5px;
    margin-bottom: 24px;
  }
  .paywall[data-active-screen="4"] .paywall-email-capture-headline {
    font-size: 1.8rem;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
  }
  .paywall[data-active-screen="4"] .paywall-email-capture-subtext {
    font-size: 14.5px;
    margin-bottom: 28px;
  }

  /* ====================================================================
     BUY SHEET (.buy-sheet-simple) — FULL-SCREEN editorial
     Fills the viewport with a warm tonal background; content centers in a
     1200px column with 2-column inside (editorial reading LEFT, offer
     RIGHT). No floating card chrome — typography and rhythm do the work.
     ==================================================================== */

  /* Full-viewport surface, light tonal background. Subtle ambient warmth
     at the top corners gives depth without competing with the offer. */
  .buy-sheet-simple.buy-sheet-v9 {
    background: var(--bg);
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .buy-sheet-simple.buy-sheet-v9::before {
    display: block;
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 50% at 12% 0%, rgba(124, 92, 252, 0.06) 0%, transparent 60%),
      radial-gradient(ellipse 50% 40% at 95% 100%, rgba(20, 20, 40, 0.03) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
  }
  /* Scroll container fills viewport; content vertically centered when it fits */
  .buy-sheet-simple .buy-sheet-scroll {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 48px 64px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .buy-sheet-simple .bs-grid {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  .buy-sheet-simple .buy-sheet-footer-v9 { display: none; }

  /* ── 2-column grid: features LEFT, pricing RIGHT ─────────────────── */
  .buy-sheet-simple .bs-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    column-gap: 80px;
    row-gap: 0;
    align-items: stretch;
  }
  .buy-sheet-simple .bs-grid-left {
    display: flex;
    flex-direction: column;
    padding-right: 28px;
    border-right: 1px solid rgba(20, 20, 40, 0.08);
    margin-right: -28px;
  }
  .buy-sheet-simple .bs-grid-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* ── Left column: editorial reading ──────────────────────────────── */
  .buy-sheet-simple .bs-header {
    margin-bottom: 28px;
    text-align: left;
  }
  .buy-sheet-simple .bs-title {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
    margin: 0 0 8px;
  }
  .buy-sheet-simple .bs-sub {
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0;
  }

  /* Features section — proper title + body blocks, no bullets ─────── */
  .buy-sheet-simple .bs-value-props {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: relative;
  }
  /* Eyebrow pill above the features — matches the homepage pricing-v9-eyebrow
     treatment (violet tonal chip, app.css:5847). Carries personality without
     fighting the offer column. */
  .buy-sheet-simple .bs-value-props::before {
    content: 'Included in every plan';
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--tone-violet-700);
    background: var(--tone-violet-50);
    padding: 5px 11px;
    border-radius: var(--r-pill);
    margin-bottom: 8px;
    width: fit-content;
  }
  .buy-sheet-simple .bs-value-props li {
    position: relative;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .buy-sheet-simple .bs-value-props li::before {
    display: none;
  }
  .buy-sheet-simple .bs-value-props li svg { display: none; }

  /* Structured feature block: bold title, descriptive body below */
  .buy-sheet-simple .bs-vp-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.3;
  }
  .buy-sheet-simple .bs-vp-body {
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-muted);
  }
  /* Legacy single-string value props — render body-only treatment */
  .buy-sheet-simple .bs-vp:not(.bs-vp--structured) .bs-vp-body {
    font-size: 0.98rem;
    color: var(--text);
    font-weight: 500;
  }

  /* Social proof — mono caption, calm */
  .buy-sheet-simple .bs-grid-left .bs-social-proof {
    margin: auto 0 18px;
    padding-top: 22px;
    border-top: 1px solid rgba(20, 20, 40, 0.07);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.6;
  }
  .buy-sheet-simple .bs-grid-left .bs-social-proof:empty {
    border-top: none;
    padding-top: 0;
    margin: auto 0 0;
  }

  /* Trust block at column foot — secure pill + sign-in CTA */
  .buy-sheet-simple .bs-grid-trust {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
  }
  .buy-sheet-simple .bs-grid-trust-secure {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .buy-sheet-simple .bs-grid-trust-secure svg {
    color: var(--text-dimmed);
    flex-shrink: 0;
  }
  .buy-sheet-simple .bs-grid-trust-signin {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s;
  }
  .buy-sheet-simple .bs-grid-trust-signin em {
    color: var(--text);
    font-style: normal;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(20, 20, 40, 0.25);
    transition: text-decoration-color 0.15s;
  }
  .buy-sheet-simple .bs-grid-trust-signin:hover { color: var(--text); }
  .buy-sheet-simple .bs-grid-trust-signin:hover em {
    text-decoration-color: var(--text);
  }

  /* ── Right column: pricing surface — bigger, premium ──────────────── */

  /* Billing toggle */
  .buy-sheet-simple .bs-toggle {
    margin: 0 0 18px;
    justify-content: flex-start;
  }
  .buy-sheet-simple .bs-toggle-inner {
    padding: 4px;
    border-radius: 12px;
  }
  .buy-sheet-simple .bs-toggle-btn {
    padding: 10px 22px;
    font-size: 0.86rem;
  }

  /* Tier cards — same homepage hero-card spunk at the desktop size:
     bigger padding, violet wash on selected, violet glow shadow, bouncy
     lift on hover. Substantial without being sterile. */
  .buy-sheet-simple .bs-tiers {
    gap: 14px;
    margin-bottom: 22px;
  }
  .buy-sheet-simple .bs-tier {
    padding: 32px 18px 26px;
    border-radius: 18px;
  }
  .buy-sheet-simple .bs-tier:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md), 0 6px 18px rgba(124, 92, 252, 0.10);
  }
  .buy-sheet-simple .bs-tier--selected:hover {
    transform: translateY(-6px);
  }

  /* POPULAR badge stays solid violet (matches the homepage donor) */
  .buy-sheet-simple .bs-tier-badge {
    font-size: 10.5px;
    letter-spacing: 0.08em;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    top: -11px;
  }

  .buy-sheet-simple .bs-tier-name {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
  }
  /* Serif display credits — matches homepage hero metric (app.css:6089) */
  .buy-sheet-simple .bs-tier-credits {
    font-family: var(--font-display), serif;
    font-size: 3rem;
    line-height: 1;
    margin-top: 8px;
    font-weight: 400;
    letter-spacing: -0.03em;
  }
  /* Hero tier in the simplified layout — slightly bigger metric */
  .buy-sheet-simple .bs-tier--selected .bs-tier-credits {
    font-size: 3.2rem;
  }
  .buy-sheet-simple .bs-tier-unit {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 4px;
    margin-bottom: 18px;
    color: var(--text-dimmed);
  }
  .buy-sheet-simple .bs-tier-price {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  .buy-sheet-simple .bs-tier-per-edit {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--tone-emerald-700);
    font-weight: 600;
    margin-top: 5px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }

  /* Subscribe CTA — primary action, substantial weight on desktop */
  .buy-sheet-simple .bs-subscribe-cta {
    padding: 18px 26px 18px 28px;
    min-height: 68px;
    border-radius: 16px;
    margin-bottom: 0;
  }
  .buy-sheet-simple .bs-subscribe-cta .bs-cta-label {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.005em;
  }
  .buy-sheet-simple .bs-subscribe-cta .bs-cta-sub {
    font-size: 0.78rem;
    margin-top: 4px;
  }
  .buy-sheet-simple .bs-cta-arrow {
    width: 22px;
    height: 22px;
  }

  /* "Prefer to pay once?" — compact mono divider with hairline under it */
  .buy-sheet-simple .bs-onetime-divider {
    margin: 20px 0 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dimmed);
  }
  .buy-sheet-simple .bs-onetime-divider::before,
  .buy-sheet-simple .bs-onetime-divider::after {
    background: rgba(20, 20, 40, 0.06);
  }

  /* Pack section: SECONDARY — compact card, no big header, single CTA */
  .buy-sheet-simple .bs-pack {
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(20, 20, 40, 0.025);
    border: 1px solid rgba(20, 20, 40, 0.05);
  }
  /* Hide the big "10 edits / $86 MXN" header — slider + CTA carry the price */
  .buy-sheet-simple .bs-pack-head { display: none; }

  .buy-sheet-simple .bs-slider-zone {
    border-top: none;
    padding-top: 4px;
  }
  .buy-sheet-simple .bs-slider-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dimmed);
    margin-bottom: 8px;
  }
  .buy-sheet-simple .bs-slider-notches-wrap {
    margin: 6px 4px 0;
    height: 22px;
  }
  .buy-sheet-simple .bs-slider-notches-wrap span {
    font-family: var(--font-mono);
    font-size: 10.5px;
    padding: 2px 5px;
  }
  .buy-sheet-simple .bs-slider-readout {
    margin-top: 8px;
    font-size: 0.85rem;
  }
  .buy-sheet-simple .bs-pack-cta {
    padding: 11px 18px;
    margin-top: 12px;
    font-size: 0.88rem;
    border-width: 1.5px;
    background: var(--card);
  }

  /* Close button: fixed top-right of viewport, dark on light bg */
  .buy-sheet-simple.buy-sheet-v9 .buy-sheet-close {
    position: fixed;
    top: 24px;
    right: 28px;
    width: 44px;
    height: 44px;
    background: var(--card);
    color: var(--text-muted);
    border: 1px solid var(--hairline);
    box-shadow: 0 2px 8px rgba(20, 20, 40, 0.06);
    z-index: 10;
  }
  .buy-sheet-simple.buy-sheet-v9 .buy-sheet-close:hover {
    background: var(--tone-rose-50);
    color: var(--tone-rose-700);
    border-color: rgba(251, 113, 133, 0.22);
  }
}

/* Wider desktop (≥ 1280px) — bigger numbers, more breathing room */
@media (min-width: 1280px) {
  .buy-sheet-simple .buy-sheet-scroll {
    padding: 96px 80px 80px;
  }
  .buy-sheet-simple .bs-grid {
    max-width: 1320px;
    grid-template-columns: minmax(360px, 460px) 1fr;
    column-gap: 96px;
  }
  .buy-sheet-simple .bs-title { font-size: 2.8rem; }
  .buy-sheet-simple .bs-tier-credits { font-size: 2.8rem; }
  .paywall { max-width: 1140px; }
}

/* Very wide viewports (≥ 1600px) — don't strand the content in the middle.
   Bumps the buy-sheet content rail + the paywall card so they read as
   purposeful editorial layouts rather than marooned cards on an empty sea.
   Playwright QA at 1920×1080 flagged the orphan-in-middle. */
@media (min-width: 1600px) {
  .buy-sheet-simple .bs-grid {
    max-width: 1480px;
    grid-template-columns: minmax(420px, 520px) 1fr;
    column-gap: 120px;
  }
  .buy-sheet-simple .bs-title { font-size: 3.2rem; }
  .buy-sheet-simple .bs-tier { padding: 38px 22px 30px; }
  .buy-sheet-simple .bs-tier-credits { font-size: 3.2rem; }
  .buy-sheet-simple .bs-tier--selected .bs-tier-credits { font-size: 3.4rem; }
  .paywall { max-width: 1280px; }
}

/* Tall viewports (≥ 1500px wide AND ≥ 900px tall) — center vertically */
@media (min-width: 1280px) and (min-height: 900px) {
  .buy-sheet-simple .buy-sheet-scroll {
    justify-content: center;
  }
}

/* ============================================================================
 * Two-photo task UX signals (pSEO arrivals on add_reference / two_image_*)
 * Set by taskPrompts.js → setupTwoPhotoUX(). The editor already supports
 * photo2 — these rules just surface the requirement before users upload
 * so they know they need a reference photo. Was the source of 0% conversion
 * on merge-photos-from-photo etc. (361 visitors/30d, 0 buyers — May 2026).
 * ============================================================================ */

/* Static two-photo hint in the rotating prompt slot — make it look like guidance, not a quote */
body.two-photo-task .dropzone-prompt {
  font-style: normal;
  font-weight: 500;
  color: var(--text-secondary, #555);
  opacity: 1;
}
body.two-photo-task .dropzone-prompt::before { content: ''; }
body.two-photo-task .dropzone-prompt::after { content: ''; }

/* Pulse the "+ Add reference photo" affordances so the user notices the next step.
   photo-strip-add is the inline + (only displayed after photo1 loads — see
   .photo-strip.visible rules above); footer-ref-btn is the floating footer
   button (visible from page load). Both fire addSecondPhoto(). The
   .has-two-photos override below stops the pulse once the user adds the ref. */
body.two-photo-task .photo-strip-add,
body.two-photo-task .footer-ref-btn {
  position: relative;
  animation: two-photo-ref-pulse 2.4s ease-in-out infinite;
}

body.two-photo-task .photo-strip-add::after,
body.two-photo-task .footer-ref-btn::after {
  content: 'Add reference';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  color: var(--text, #1a1a2e);
  background: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(26, 26, 46, 0.18);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: two-photo-ref-tooltip 4s ease-in-out 0.5s forwards;
}

@keyframes two-photo-ref-pulse {
  /* Combine pulse ring with the button's structural shadow (0 2px 6px ...).
     Without this, the trough loses depth and the button looks flat. */
  0%, 100% { box-shadow: 0 2px 6px rgba(26, 26, 46, 0.18), 0 0 0 0 rgba(26, 26, 46, 0.18); }
  50%      { box-shadow: 0 2px 6px rgba(26, 26, 46, 0.18), 0 0 0 6px rgba(26, 26, 46, 0.05); }
}

@keyframes two-photo-ref-tooltip {
  0%   { opacity: 0; transform: translateX(-50%) translateY(4px); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  85%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-2px); }
}

/* Once photo2 is loaded, the user has completed the requirement — stop signalling */
body.two-photo-task.has-two-photos .photo-strip-add,
body.two-photo-task.has-two-photos .footer-ref-btn {
  animation: none;
}
body.two-photo-task.has-two-photos .photo-strip-add::after,
body.two-photo-task.has-two-photos .footer-ref-btn::after {
  display: none;
}

/* Accessibility: kill the pulse + tooltip motion for users who opted out.
   Static box-shadow keeps the affordance visible without animation.
   Tooltip is hidden entirely (rather than made permanent) so it doesn't
   stay overlaid on the floating footer button from page load — the static
   shadow on the button is enough signal. */
@media (prefers-reduced-motion: reduce) {
  body.two-photo-task .photo-strip-add,
  body.two-photo-task .footer-ref-btn {
    animation: none;
    /* Preserve structural shadow + add a subtle highlight ring */
    box-shadow: 0 2px 6px rgba(26, 26, 46, 0.18), 0 0 0 3px rgba(26, 26, 46, 0.08);
  }
  body.two-photo-task .photo-strip-add::after,
  body.two-photo-task .footer-ref-btn::after {
    display: none;
  }
}

/* ==========================================================================
   Animate feature — .animate-* prefix, no collisions with existing classes
   ========================================================================== */

/* Nav-bar animate pill removed 2026-05-16 — duplicate entry point with the
   result-toolbar pill and the cross-sell card. Both of those are correctly
   gated on .has-result; the nav pill added noise without adding intent.  */

/* --- Pill button states --- */

/* Confirming state: second-tap prompt + 3s countdown bar.
   The first observed user (Mexican Firefox) hit the silent timeout because
   they couldn't see how long they had — they tapped, paused, tapped again
   4 seconds later just past the 3s window, and had to redo the dance.
   The thin bar at the bottom of the button shrinks left-to-right over 3s,
   giving a non-intrusive deadline cue. JS clears the .animate-pill--confirming
   class on timeout/completion which removes the ::after, so no JS coordination
   is needed — the CSS animation just plays as long as the class is present. */
.animate-pill--confirming {
  background: var(--accent, #f59e0b) !important;
  color: #1a1a1a !important;
  border-color: transparent !important;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
  overflow: hidden;
}
.animate-pill--confirming::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(26, 26, 26, 0.55);
  transform-origin: left center;
  animation: animate-pill-countdown 3000ms linear forwards;
  pointer-events: none;
}
@keyframes animate-pill-countdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .animate-pill--confirming::after { animation: none; }
}

/* Loading state: button disabled while animating */
.animate-pill--loading {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Loading overlay (indeterminate shimmer — no fake progress) --- */

.animate-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: inherit;
}

/* Indeterminate shimmer bar */
.animate-loading-shimmer {
  width: 120px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  position: relative;
}

.animate-loading-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 2px;
  animation: animate-shimmer-slide 1.4s ease-in-out infinite;
}

@keyframes animate-shimmer-slide {
  0%   { left: -60%; }
  100% { left: 120%; }
}

.animate-loading-caption {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* --- Video result --- */

/* The <video> element injected by animate.js — sized like #currentImage so a
   portrait video sits naturally in the same footprint as the still image,
   not letterboxed inside a wider absolute-positioned box. */
#animateResultVideo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  background: #000;
  border-radius: 8px;
  cursor: zoom-in;
}

/* Hide rules use class state (NOT just the id) so toggling actually flips
   visibility — the previous rule combined #animateResultVideo with the
   .animate-video-active class, so removing the class still left the id
   match and the video stayed visible. */
#animateResultVideo.animate-video-hidden {
  display: none;
}

/* Still image hidden while video is active. display:none (not visibility)
   so the wrapper sizes to whichever is shown — avoids the wrapper holding
   the still image's footprint while a different-aspect video shows inside. */
.animate-img-hidden {
  display: none;
}

/* Lightbox <video> mirrors the image styling */
#lightboxVideo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

/* --- Original / Animation toggle button --- */

.animate-result-toggle {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.animate-result-toggle:hover,
.animate-result-toggle:focus-visible {
  background: rgba(0, 0, 0, 0.75);
  border-color: #fff;
  outline: none;
}

/* ===========================================================================
   Drawer — Animation card styles (.drawer-anim-*)
   Prefix chosen to avoid collision with .paywall-animate-* and .animate-*
   which are used by the conversion modal and animate.js agents respectively.
   =========================================================================== */

/* Thumbnail image for animation cards (source still or video poster) */
.drawer-anim-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.drawer-anim-thumb-img.loaded {
  opacity: 1;
}
/* Video used as a poster (no sourceImageUrl) — always shown */
.drawer-anim-poster {
  opacity: 1;
  pointer-events: none; /* interact via the card click, not the video controls */
}

/* ▶ play-button overlay — centered, semi-transparent circle */
.drawer-anim-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* clicks fall through to the card */
  z-index: 2;
  transition: opacity 0.15s ease;
}

/* Circle background behind the triangle */
.drawer-anim-overlay::before {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: transform 0.15s ease, background 0.15s ease;
}

/* SVG triangle icon */
.drawer-anim-overlay-icon {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin-left: 2px; /* optical centering — triangle has visual weight on left */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

/* Hover: scale up the circle slightly */
.drawer-anim-card:hover .drawer-anim-overlay::before {
  transform: scale(1.12);
  background: rgba(0, 0, 0, 0.68);
}

/* Hide the overlay while the video is playing (expanded state) */
.drawer-anim-expanded .drawer-anim-overlay {
  opacity: 0;
  pointer-events: none;
}

/* Hide thumbnail image when expanded (video takes over) */
.drawer-anim-expanded .drawer-anim-thumb-img {
  opacity: 0;
  pointer-events: none;
}

/* Inline expanded video element */
.drawer-anim-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* show full frame, letterbox rather than crop */
  background: #000;
  border-radius: inherit;
  z-index: 3;
}

/* When expanded, the card thumb grows to fit the video aspect ratio.
   We use aspect-ratio: auto so the video dictates height within the
   drawer's fixed column width — prevents clipping on portrait videos. */
.drawer-anim-expanded .drawer-card-thumb,
.drawer-anim-expanded .dash-card-thumb {
  aspect-ratio: 16 / 9; /* sensible default; video uses object-fit:contain */
  height: auto;
}

/* Mobile: ensure the expanded video stays within drawer width */
@media (max-width: 480px) {
  .drawer-anim-expanded .drawer-card-thumb,
  .drawer-anim-expanded .dash-card-thumb {
    aspect-ratio: 4 / 3;
  }
}

/* Reduced-motion: skip the overlay transition */
@media (prefers-reduced-motion: reduce) {
  .drawer-anim-overlay,
  .drawer-anim-overlay::before,
  .drawer-anim-thumb-img {
    transition: none;
  }
}

/* ==========================================================================
   Animate-mode paywall — .paywall-animate-* prefix
   Injected into the existing conversion modal when mode: 'animate' is passed.
   No purple — dark neutrals only (#1a1a2e), Plus Jakarta Sans, matches app DS.
   ========================================================================== */

/* Side-by-side Before / After demo hero */
.paywall-animate-demo {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: center;
  padding: 4px 0 12px;
  width: 100%;
}

.paywall-animate-demo-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-width: 280px;
  margin: 0;
}

.paywall-animate-demo-figure img,
.paywall-animate-demo-figure video {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  /* Subtle shadow matching the paywall card elevation system */
  box-shadow: 0 2px 12px rgba(26, 26, 46, 0.22);
}

.paywall-animate-demo-figure figcaption {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* In animate mode: hide the first slider notch (pack-3, index 0).
   The :first-child notch maps to pack-3; it can't cover a single animation
   (costs 5 credits, pack-3 = 3 credits). visibility:hidden hides it without
   removing it from the absolute layout. */
.paywall--animate-mode #paywallSliderNotches > span:first-child {
  visibility: hidden;
  pointer-events: none;
}

/* In animate mode the slider clamps min to value=1 (pack-10) so the thumb
   actually travels 1-6 across the full track width. The default notch
   positions (0%, 1/6, 2/6, …, 100%) were designed for the 0-6 range and
   leave "10" parked at 16.67% while the thumb sits at 0% — off by a notch.
   Re-space the six visible notches (2nd–7th) at 0%, 1/5, 2/5, 3/5, 4/5,
   100% so each label sits dead-under its matching thumb stop. */
.paywall--animate-mode #paywallSliderNotches > span:nth-child(2) { left: 0%; }
.paywall--animate-mode #paywallSliderNotches > span:nth-child(3) { left: 20%; }
.paywall--animate-mode #paywallSliderNotches > span:nth-child(4) { left: 40%; }
.paywall--animate-mode #paywallSliderNotches > span:nth-child(5) { left: 60%; }
.paywall--animate-mode #paywallSliderNotches > span:nth-child(6) { left: 80%; }
.paywall--animate-mode #paywallSliderNotches > span:nth-child(7) { left: 100%; }

/* Standard tier card: "Best value" badge for animate mode.
   Distinct from the Lite "Popular" badge to avoid confusing the two surfaces.
   Uses the same pill shape but a warmer background so it reads as secondary. */
.paywall-animate-best-value-badge {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: #1a1a2e;
  border-radius: 20px;
  padding: 3px 9px;
  margin-bottom: 6px;
  /* match paywall-tier-badge dimensions exactly */
  align-self: flex-start;
}

/* Animate-context note under the standard tier credits line ("10 animations + 30 edits") */
.paywall-animate-tier-note {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px;
  color: var(--text-secondary, #6b7280);
  margin: 2px 0 0;
  padding: 0;
  line-height: 1.4;
}

/* Mobile: keep Before/After side-by-side but compact so the primary pack
   CTA stays above the fold. Previously this stacked vertically at 160px
   each (~360px total), pushing the CTA off-screen. Side-by-side at 110px
   gives the user the demo signal without burning the viewport. */
@media (max-width: 480px) {
  .paywall-animate-demo {
    gap: 8px;
    padding: 2px 0 8px;
  }

  .paywall-animate-demo-figure {
    gap: 4px;
  }

  .paywall-animate-demo-figure img,
  .paywall-animate-demo-figure video {
    height: 110px;
    border-radius: 8px;
  }

  .paywall-animate-demo-figure figcaption {
    font-size: 10px;
  }
}

/* Hide the subscription nav in animate mode — animate is a one-shot intent,
   routing into the tier picker is a post-choice mix trap. */
.paywall--animate-mode #paywallControlS1ViewPlans {
  display: none;
}

/* Reduced-motion: disable autoplay animation on the demo video.
   The video element keeps its src so the poster frame still shows;
   autoplay is already conditional on the element attribute, but we
   also pause via CSS pause signal for browsers that respect it. */
@media (prefers-reduced-motion: reduce) {
  .paywall-animate-demo-figure video {
    animation-play-state: paused;
  }
}

/* Sparkle teaser overlay — only injected over .paywall-hero-toggle when the
   paywall opens in animate mode AND the user has an edited image. Suggests
   the edit is "gearing up to animate" without misrepresenting that it will
   actually animate without payment. The demo above already shows the real
   still→video transformation; this is the emotional carrier. */
.paywall-hero-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 3;
}

.paywall-hero-sparkles::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18) 0%, transparent 65%);
  animation: paywall-hero-sparkle-pulse 2.6s ease-in-out infinite;
}

.paywall-hero-sparkle {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 L13.8 9.8 L24 12 L13.8 14.2 L12 24 L10.2 14.2 L0 12 L10.2 9.8 Z' fill='white'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9))
          drop-shadow(0 0 9px rgba(255, 215, 130, 0.55));
  animation: paywall-hero-sparkle-twinkle 2.4s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}

@keyframes paywall-hero-sparkle-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.35) rotate(0deg); }
  45%      { opacity: 1; transform: scale(1) rotate(165deg); }
  55%      { opacity: 1; transform: scale(1) rotate(195deg); }
}

@keyframes paywall-hero-sparkle-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .paywall-hero-sparkle,
  .paywall-hero-sparkles::before {
    animation: none;
  }
  .paywall-hero-sparkle { opacity: 0.65; transform: scale(1); }
}

/* === Animate-mode "tension build" treatment on the user's image ===
   Three layered animations on .paywall-hero-toggle when the conversion
   modal opens in animate mode:
     1. Entry — image scales up + fades in once (the "comes in" beat).
     2. Breathe — subtle continuous scale ±2% (the image looks "alive").
     3. Halo — pulsing violet glow behind the image (energy gathering).
   Sparkle particles (from .paywall-hero-sparkles above) layer on top to
   complete the "magical, about to come alive" feel. */
.paywall--animate-mode .paywall-hero-toggle {
  animation:
    paywall-hero-animate-entry 0.6s cubic-bezier(0.16, 1, 0.3, 1) both,
    paywall-hero-animate-breathe 3.2s ease-in-out 0.6s infinite;
}

.paywall--animate-mode .paywall-hero-toggle::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 18px;
  background: radial-gradient(
    ellipse at center,
    rgba(124, 92, 252, 0.45) 0%,
    rgba(124, 92, 252, 0.18) 45%,
    transparent 75%
  );
  filter: blur(14px);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  animation: paywall-hero-animate-halo 2.6s ease-in-out 0.6s infinite;
}

@keyframes paywall-hero-animate-entry {
  0%   { opacity: 0; transform: scale(0.9); }
  60%  { opacity: 1; transform: scale(1.015); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes paywall-hero-animate-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

@keyframes paywall-hero-animate-halo {
  0%, 100% { opacity: 0.35; transform: scale(0.96); }
  50%      { opacity: 0.95; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .paywall--animate-mode .paywall-hero-toggle,
  .paywall--animate-mode .paywall-hero-toggle::before {
    animation: none;
  }
  .paywall--animate-mode .paywall-hero-toggle::before { opacity: 0.55; }
}

/* ============================================================================
   UNIFIED PAYWALL (Screen 1) — shipped 2026-05-16
   Single mobile-no-scroll surface that replaced the peak/control Screen 1
   variants + Screen 2 tier picker. Plans + packs side-by-side with dynamic
   loss/save tags relative to selected tier and a verb-switching footer CTA.
   See DESIGN.md for the type/color tokens this is rooted in.
   ============================================================================ */

/* Hide the 200px before/after hero on the unified screen — the eyebrow +
   headline carry the context, and animate mode uses the inline thumb strip. */
.paywall[data-active-screen="1"] .paywall-hero { display: none; }

.paywall-screen--unified {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 520px;
  padding: 12px 20px 6px;
  padding-bottom: 0;
  gap: 14px;
  flex: 1;
  min-height: 0;
}

/* Head — eyebrow + display headline with one-word italic emphasis */
.paywall-screen--unified .paywall-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.paywall-unified-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--tone-violet-700);
  background: var(--tone-violet-50);
  border-radius: var(--r-pill);
  padding: 4px 10px 4px 22px;
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  position: relative;
}
.paywall-unified-eyebrow::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tone-violet);
}
.paywall-screen--unified .paywall-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--text);
  margin: 0;
}
.paywall-screen--unified .paywall-headline em {
  font-style: italic;
  font-weight: 800;
  color: var(--tone-violet-700);
  text-decoration: underline wavy var(--tone-violet);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
@media (max-width: 360px) {
  .paywall-screen--unified .paywall-headline { font-size: 26px; }
  .paywall-screen--unified { padding: 10px 16px 4px; gap: 12px; }
}

/* Animate-mode compact thumb strip — replaces the 200px hero with a
   72x72 personalized image + microcopy. Carries the same entry+breathe
   +halo animation set as the standalone hero. */
.paywall-animate-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 10px;
  box-shadow: var(--shadow-card);
}
/* `[hidden]` is the canonical native semantic — when JS removes the
   attribute (animate mode + user image present) the strip is visible. */
.paywall-animate-strip[hidden] { display: none; }
.paywall-animate-strip .paywall-animate-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  animation:
    paywall-hero-animate-entry 0.6s cubic-bezier(0.16, 1, 0.3, 1) both,
    paywall-hero-animate-breathe 3.2s ease-in-out 0.6s infinite;
}
.paywall-animate-strip .paywall-animate-thumb::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 18px;
  background: radial-gradient(ellipse, rgba(124,92,252,0.45) 0%, rgba(124,92,252,0.15) 50%, transparent 75%);
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  animation: paywall-hero-animate-halo 2.6s ease-in-out 0.6s infinite;
}
.paywall-animate-strip .paywall-animate-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--r-md);
}
.paywall-animate-strip-text { flex: 1; min-width: 0; }
.paywall-animate-strip-line1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.1;
}
.paywall-animate-strip-line2 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  margin: 4px 0 0;
  letter-spacing: 0.04em;
}

/* Billing toggle — reused class but unified-screen scoped overrides */
.paywall-screen--unified .paywall-billing {
  display: inline-flex;
  align-self: flex-start;
  background: var(--bg-secondary);
  border-radius: var(--r-pill);
  padding: 3px;
  border: 1px solid var(--hairline);
}
.paywall-screen--unified .paywall-billing-option {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color 0.18s ease;
  line-height: 1;
}
.paywall-screen--unified .paywall-billing-option--active {
  color: var(--text);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(20,20,40,0.06);
}
.paywall-billing-save {
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: var(--r-sm);
  background: var(--tone-violet-50);
  color: var(--tone-violet-700);
  font-weight: 500;
  vertical-align: 2px;
}

/* Section headers — Subscribe / Pay once */
.paywall-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 2px -2px;
}
.paywall-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text);
  text-transform: uppercase;
}
.paywall-section-aside {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.005em;
}

/* Tier rail — 3-up grid on the unified screen (overrides the existing
   .paywall-tiers vertical stack from Screen 2's flex layout). */
.paywall-screen--unified .paywall-tier-rail {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  transition: opacity 0.22s ease, filter 0.22s ease;
}
.paywall-screen--unified .paywall-tier-rail.is-dimmed {
  opacity: 0.5;
}
.paywall-screen--unified .paywall-tier {
  position: relative;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 14px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.22s ease, background-color 0.18s ease;
  box-shadow: 0 1px 2px rgba(20,20,40,0.03);
}
.paywall-screen--unified .paywall-tier:hover { transform: translateY(-1px); }
.paywall-screen--unified .paywall-tier:active { transform: translateY(0); }
/* Selected tier always gets the violet ring — the brand "active" accent
   applies consistently across all three tiers, not just Popular. The
   Popular tile retains the bigger violet drop-shadow for visual primacy. */
.paywall-screen--unified .paywall-tier[aria-pressed="true"] {
  border-color: transparent;
  box-shadow:
    inset 0 0 0 2px var(--tone-violet),
    0 1px 3px rgba(20,20,40,0.04),
    0 8px 24px -12px rgba(124, 92, 252, 0.24);
}
.paywall-screen--unified .paywall-tier[aria-pressed="true"].paywall-tier--popular {
  box-shadow:
    inset 0 0 0 2px var(--tone-violet),
    0 1px 3px rgba(20,20,40,0.04),
    0 22px 44px -16px rgba(124,92,252,0.32);
}
.paywall-screen--unified .paywall-tier--popular:not([aria-pressed="true"]) {
  background:
    linear-gradient(180deg, rgba(239, 234, 255, 0.55), rgba(239, 234, 255, 0)) padding-box,
    var(--card);
  border-color: rgba(124, 92, 252, 0.18);
}

/* Tier badge — top-pill marker, three modes (popular / loss / save) */
.paywall-screen--unified .paywall-tier-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  background: var(--text);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.paywall-screen--unified .paywall-tier--popular .paywall-tier-badge {
  background: var(--tone-violet);
}
.paywall-screen--unified .paywall-tier-badge--loss {
  background: var(--tone-rose);
  box-shadow: 0 2px 6px rgba(251, 113, 133, 0.32);
}
.paywall-screen--unified .paywall-tier-badge--save {
  background: var(--tone-emerald);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.30);
}

.paywall-screen--unified .paywall-tier-name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}
.paywall-screen--unified .paywall-tier-credits {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.paywall-screen--unified .paywall-tier-unit {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
}
.paywall-screen--unified .paywall-tier-divider {
  width: 28px;
  height: 1px;
  background: var(--hairline);
  margin: 9px 0 8px;
}
.paywall-screen--unified .paywall-tier-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.paywall-screen--unified .paywall-tier-per-edit {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dimmed);
  margin-top: 4px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
/* Per-edit color reinforces the loss/save badge — keyed off the badge
   variant class on the same tier card so it stays in sync with the badge
   without needing a separate data-value attribute. */
.paywall-screen--unified .paywall-tier:has(.paywall-tier-badge--loss) .paywall-tier-per-edit { color: var(--tone-rose-700); }
.paywall-screen--unified .paywall-tier:has(.paywall-tier-badge--save) .paywall-tier-per-edit { color: var(--tone-emerald-700); }
@media (max-width: 360px) {
  .paywall-screen--unified .paywall-tier-credits { font-size: 32px; }
  .paywall-screen--unified .paywall-tier-price { font-size: 13px; }
  .paywall-screen--unified .paywall-tier { padding: 12px 6px 10px; }
}

/* Pay-once zone — whole rounded rectangle is the tap target */
.paywall-pack-zone {
  border-radius: var(--r-lg);
  background: var(--bg-secondary);
  padding: 10px 12px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.22s ease, filter 0.22s ease, background-color 0.18s ease;
}
.paywall-pack-zone:active { background-color: rgba(26, 26, 46, 0.06); }
.paywall-pack-zone.is-dimmed { opacity: 0.5; }
.paywall-pack-zone .paywall-section-head { margin: 2px 4px 8px; }

.paywall-pack-strip {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 12px 14px 10px;
  transition: border-color 0.18s ease, box-shadow 0.22s ease;
}
.paywall-pack-strip.is-active {
  border-color: transparent;
  box-shadow:
    inset 0 0 0 2px var(--tone-violet),
    0 1px 3px rgba(20,20,40,0.04),
    0 8px 24px -12px rgba(124, 92, 252, 0.24);
}
.paywall-pack-strip-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.paywall-pack-strip-right { text-align: right; }
.paywall-pack-strip-readout {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.paywall-pack-strip-readout small {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
  letter-spacing: 0;
}
.paywall-pack-strip-aside {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-dimmed);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.paywall-pack-strip-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.paywall-pack-strip-per {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dimmed);
  letter-spacing: 0.04em;
  margin-top: 1px;
}

/* Savings pill — visible emerald badge that grows in punch as the slider
   moves toward bigger packs. Hidden at pack-3 (0% savings) via JS
   toggling `[hidden]`. Updates live on slider input on both the buy
   sheet and the conversion paywall. */
.paywall-pack-strip-save {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--tone-emerald-700);
  background: var(--tone-emerald-50);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  white-space: nowrap;
}
.paywall-pack-strip-save[hidden] { display: none; }
.paywall-pack-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--r-pill);
  margin: 2px 0;
  outline: none;
  /* `--slider-fill` is set by `updateSliderFill` in tier-utils.js — use the
     same variable as every other slider in the project so the JS just works. */
  background: linear-gradient(
    to right,
    var(--text) 0%,
    var(--text) var(--slider-fill, 50%),
    var(--bg-secondary) var(--slider-fill, 50%),
    var(--bg-secondary) 100%
  );
}
.paywall-pack-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--card);
  border: 3px solid var(--text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.16);
  cursor: grab;
}
.paywall-pack-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--card);
  border: 3px solid var(--text); box-shadow: 0 2px 6px rgba(0,0,0,0.16);
  cursor: grab;
}
.paywall-pack-notches {
  position: relative;
  height: 14px;
  margin: 2px 11px 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-dimmed);
  letter-spacing: 0.04em;
}
.paywall-pack-notches > span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  min-width: 16px;
  text-align: center;
  transition: color 0.15s ease;
}
.paywall-pack-notches > span.active {
  color: var(--text);
  font-weight: 500;
}
.paywall-pack-notches > span:nth-child(1){ left: 0%; }
.paywall-pack-notches > span:nth-child(2){ left: calc(100% / 6); }
.paywall-pack-notches > span:nth-child(3){ left: calc(2 * 100% / 6); }
.paywall-pack-notches > span:nth-child(4){ left: 50%; }
.paywall-pack-notches > span:nth-child(5){ left: calc(4 * 100% / 6); }
.paywall-pack-notches > span:nth-child(6){ left: calc(5 * 100% / 6); }
.paywall-pack-notches > span:nth-child(7){ left: 100%; }

/* Animate mode notch repositioning — value-1 is leftmost (pack-3 hidden) */
.paywall--animate-mode .paywall-pack-notches > span:nth-child(1) { visibility: hidden; pointer-events: none; }
.paywall--animate-mode .paywall-pack-notches > span:nth-child(2) { left: 0%; }
.paywall--animate-mode .paywall-pack-notches > span:nth-child(3) { left: 20%; }
.paywall--animate-mode .paywall-pack-notches > span:nth-child(4) { left: 40%; }
.paywall--animate-mode .paywall-pack-notches > span:nth-child(5) { left: 60%; }
.paywall--animate-mode .paywall-pack-notches > span:nth-child(6) { left: 80%; }
.paywall--animate-mode .paywall-pack-notches > span:nth-child(7) { left: 100%; }

/* ============================================================================
   PAYWALL FOOTER — sticky bottom CTA outside .paywall-screen
   Sibling of all paywall-screen elements, flex-shrink: 0, padded with
   safe-area-inset-bottom. Buy-sheet pattern — purchase button is always
   visible without scrolling.
   ============================================================================ */
.paywall-footer {
  flex-shrink: 0;
  padding: 10px 20px max(env(safe-area-inset-bottom), 14px);
  background: linear-gradient(to top, var(--bg) 78%, transparent 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  position: sticky;
  bottom: 0;
  z-index: 5;
}
/* Hide the unified footer on legacy screens (Screen 3/4) that have their
   own CTAs inside the screen content. */
.paywall:not([data-active-screen="1"]) .paywall-footer { display: none; }

.paywall-footer .paywall-cta {
  appearance: none;
  border: 0;
  width: 100%;
  background: var(--text);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  padding: 15px 20px;
  border-radius: var(--r-pill);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(26,26,46,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform 0.18s ease, box-shadow 0.22s ease;
  position: static;        /* override the inherited .paywall-cta--sticky */
  margin: 0;
}
.paywall-footer .paywall-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(26,26,46,0.22), inset 0 1px 0 rgba(255,255,255,0.14);
}
.paywall-footer .paywall-cta:active { transform: translateY(0); }
.paywall-footer .paywall-cta-arrow { transition: transform 0.2s ease; }
.paywall-footer .paywall-cta:hover .paywall-cta-arrow { transform: translateX(2px); }

.paywall-trust {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-dimmed);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.paywall-trust-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-dimmed);
}

.paywall-maybe {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  color: var(--text-dimmed);
  cursor: pointer;
  padding: 4px;
  text-decoration: underline;
  text-decoration-color: rgba(26, 26, 46, 0.12);
  text-underline-offset: 3px;
}
.paywall-maybe:hover { color: var(--text-muted); }

/* ============================================================================
   BUY SHEET ELEVATION (2026-05-16) — port the unified paywall's visual
   language onto the nav-triggered buy sheet (`.buy-sheet-v9`) so users
   reaching the pricing surface from outside the post-edit funnel get the
   same decision affordances: loss/save tags, per-edit color signal,
   section heads, pack-zone tap target.
   ============================================================================ */

.buy-sheet-v9 .buy-sheet-section-head { margin: 6px 4px 2px; }
.buy-sheet-v9 .paywall-pack-zone { margin-top: 14px; }

/* Loss/save tag variants on .sub-tier-badge — already styled as a Popular
   violet pill; swap colors for the comparison cases. */
.sub-tier-badge--loss {
  background: var(--tone-rose) !important;
  box-shadow: 0 4px 12px rgba(251, 113, 133, 0.30) !important;
}
.sub-tier-badge--save {
  background: var(--tone-emerald) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.30) !important;
}

/* Per-edit cost — color carries the value signal, mirroring paywall.
   Default neutral; rose for the loss tier, emerald for the save tier. */
.sub-tier-per-edit {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dimmed);
  margin-top: 4px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.sub-tier-v9:has(.sub-tier-badge--loss) .sub-tier-per-edit { color: var(--tone-rose-700); }
.sub-tier-v9:has(.sub-tier-badge--save) .sub-tier-per-edit { color: var(--tone-emerald-700); }

/* Whole pack zone tappable, dimmed when plan mode is active */
.buy-sheet-v9 .sub-tiers-v9 { transition: opacity 0.22s ease; }
.buy-sheet-v9 .sub-tiers-v9.is-dimmed { opacity: 0.55; }
.buy-sheet-v9 .paywall-pack-zone.is-dimmed { opacity: 0.55; }

/* Inner pack-strip background — keep paywall-pack-strip recipe (white card on
   tonal zone). The legacy `.credits-slider-container` background gets out
   of the way when the strip class is also present. */
.buy-sheet-v9 .credits-slider-container.paywall-pack-strip {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 12px 14px 10px;
}

/* ============================================================================
   BUY SHEET ELEVATION v2 (2026-05-16) — polish pass
   Fixes 5 issues from live mobile screenshot:
   1. Sheet sat 8dvh from top — bumped to full-viewport with a tiny peek.
   2. Tier rail was inheriting the legacy mobile horizontal-stack layout;
      force the paywall 3-up grid with vertical-stacked card content.
   3. Mode clarity — strengthen active-zone treatment + reduce subtlety of
      the dimmed alternative so the plan/pack switch reads as a real toggle.
   4. Footer trust + sign-in repositioned to a clean centered row.
   5. Tighter spacing throughout so the whole sheet fits without scroll.
   ============================================================================ */

/* 1. Sheet height — fill the viewport, leave just enough peek for the
   user to perceive it as a sheet, not a page. */
.buy-sheet-v9 {
  max-height: calc(100dvh - 8px);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 0;
}
.buy-sheet-v9 .buy-sheet-scroll {
  padding: 18px 20px 12px;
}
.buy-sheet-v9 .sheet-handle {
  margin: 10px auto 6px;
}
.buy-sheet-v9 .urgency-header {
  margin-bottom: 12px;
}
.buy-sheet-v9 .sheet-headline-v9 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  text-align: center;
  margin: 0;
}
.buy-sheet-v9 .v9-social-proof {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0;
}
.buy-sheet-v9 .pricing-tabs-container {
  display: flex;
  justify-content: center;
  margin: 10px 0 14px;
}

/* 2. Tier rail — force the paywall 3-up grid, override the legacy mobile
   horizontal-card layout from the @media (max-width: 600px) block above. */
.buy-sheet-v9 .sub-tiers-v9 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 0;
  transition: opacity 0.22s ease;
}
.buy-sheet-v9 .sub-tiers-v9.is-dimmed { opacity: 0.5; }

.buy-sheet-v9 .sub-tier-v9 {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: initial;
  padding: 16px 8px 12px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgba(20,20,40,0.03);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.22s ease, background-color 0.18s ease;
  position: relative;
}
.buy-sheet-v9 .sub-tier-v9:hover { transform: translateY(-1px); }
/* Selected tier — violet ring on every card, not just Popular. Brand
   accent for "active" applied consistently. */
.buy-sheet-v9 .sub-tier-v9[aria-pressed="true"],
.buy-sheet-v9 .sub-tier-v9--selected {
  border-color: transparent;
  background: var(--card);
  box-shadow:
    inset 0 0 0 2px var(--tone-violet),
    0 1px 3px rgba(20,20,40,0.04),
    0 8px 24px -12px rgba(124, 92, 252, 0.24);
  transform: translateY(0);
}
.buy-sheet-v9 .sub-tier-v9--popular[aria-pressed="true"],
.buy-sheet-v9 .sub-tier-v9--popular.sub-tier-v9--selected {
  box-shadow:
    inset 0 0 0 2px var(--tone-violet),
    0 1px 3px rgba(20,20,40,0.04),
    0 22px 44px -16px rgba(124,92,252,0.32);
}
.buy-sheet-v9 .sub-tier-v9--popular:not([aria-pressed="true"]):not(.sub-tier-v9--selected) {
  background:
    linear-gradient(180deg, rgba(239, 234, 255, 0.55), rgba(239, 234, 255, 0)) padding-box,
    var(--card);
  border-color: rgba(124, 92, 252, 0.18);
}

/* Badge — absolute pill at top edge (undo legacy inline-pill override) */
.buy-sheet-v9 .sub-tier-v9 .sub-tier-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.10em;
  margin: 0;
  padding: 4px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Tier name — mono caps eyebrow */
.buy-sheet-v9 .sub-tier-v9 .sub-tier-name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 6px;
  min-width: 0;
}

/* Credits hero — vertical stack: big number above small label */
.buy-sheet-v9 .sub-tier-v9 .sub-tier-credits-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  flex: 0 0 auto;
  gap: 2px;
}
.buy-sheet-v9 .sub-tier-v9 .sub-tier-credits-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.buy-sheet-v9 .sub-tier-v9 .sub-tier-credits-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

/* Hairline divider between credits and price */
.buy-sheet-v9 .sub-tier-v9::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--hairline);
  margin: 9px 0 8px;
  order: 4;
}

/* Price — bold, tabular */
.buy-sheet-v9 .sub-tier-v9 .sub-tier-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  order: 5;
}

/* Per-edit row — small mono, brand-token color via :has() on the badge */
.buy-sheet-v9 .sub-tier-v9 .sub-tier-per-edit {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-dimmed);
  margin: 3px 0 0;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  order: 6;
}

/* Hide the legacy trust ribbon — section-head copy already conveys it. */
.buy-sheet-v9 .v9-trust-ribbon { display: none; }

/* 3. Mode clarity — when plan-mode active, the pack zone reads as the
   alternative path (dimmed); when pack-mode active, the tier rail reads
   that way. The section-head ABOVE the tier rail isn't inside the
   `.sub-tiers-v9` it labels, so dim it via `:has()` on the next-sibling
   relationship — that way the "SUBSCRIBE" eyebrow fades in lockstep
   with its cards when the user commits to pack-mode.

   Bumped the dim from 0.5 → 0.32 so the user perceives the inactive
   zone as a separate path they can switch back to, not just "less
   prominent". Active zone keeps full ink. */
.buy-sheet-v9 .buy-sheet-section-head {
  transition: opacity 0.22s ease;
  /* Section head needs real breathing room from the rail it labels. The
     rail also reserves 10px above each card for the floating badge (top:
     -10px), so the head sits 22px above the visible card edge. */
  margin: 18px 4px 18px;
}
.buy-sheet-v9 .sub-tiers-v9 { padding-top: 12px; }
.buy-sheet-v9 .buy-sheet-section-head:has(+ .sub-tiers-v9.is-dimmed) {
  opacity: 0.32;
}
.buy-sheet-v9 .sub-tiers-v9.is-dimmed { opacity: 0.32; }
.buy-sheet-v9 .paywall-pack-zone.is-dimmed { opacity: 0.32; }

/* Active zone gets a small "ACTIVE" pill in the section-head aside so the
   user reads the two paths as a deliberate switcher, not two equal blocks.
   The aside copy itself ("best for ongoing edits" / "just need a few?")
   stays — the pill sits left of it. JS adds .is-active on the section
   head when its zone commits. */
.buy-sheet-v9 .buy-sheet-section-head::after,
.buy-sheet-v9 .paywall-pack-zone .paywall-section-head::after {
  content: 'ACTIVE';
  display: none;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--text);
  background: var(--tone-violet-50);
  border-radius: var(--r-pill);
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: 1px;
}
/* Plan-mode active by default (no rail dim): show ACTIVE on Subscribe head. */
.buy-sheet-v9 .buy-sheet-section-head:not(:has(+ .sub-tiers-v9.is-dimmed))::after {
  display: inline-block;
}
/* Pack-mode active: pack zone is NOT dimmed → show ACTIVE on its head. */
.buy-sheet-v9 .paywall-pack-zone:not(.is-dimmed) .paywall-section-head::after {
  display: inline-block;
}
/* When pack-mode is active, the Subscribe section ACTIVE pill must go. */
.buy-sheet-v9 .sub-tiers-v9.is-dimmed ~ /* sibling */ * { /* no-op anchor */ }
.buy-sheet-v9 .buy-sheet-section-head:has(+ .sub-tiers-v9.is-dimmed)::after {
  display: none;
}
/* Default: pack zone IS dimmed at open (plan-mode), so its ACTIVE hides
   via the not(:not(.is-dimmed)) chain above. Belt + suspenders: */
.buy-sheet-v9 .paywall-pack-zone.is-dimmed .paywall-section-head::after {
  display: none;
}

/* Pack zone — strengthen background tone + active state */
.buy-sheet-v9 .paywall-pack-zone {
  margin-top: 16px;
  padding: 12px 12px 14px;
}

/* 4. Footer — center, dot-separated trust + sign-in for a clean row */
.buy-sheet-v9 .buy-sheet-footer-v9 {
  padding: 12px 20px max(env(safe-area-inset-bottom), 14px);
  background: linear-gradient(to top, var(--card) 78%, transparent 100%);
  border-top: 1px solid var(--hairline);
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.buy-sheet-v9 .cta-primary-v9 {
  width: 100%;
  background: var(--text);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  padding: 15px 20px;
  border-radius: var(--r-pill);
  border: 0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(26,26,46,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform 0.18s ease, box-shadow 0.22s ease;
}
.buy-sheet-v9 .cta-primary-v9:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(26,26,46,0.22), inset 0 1px 0 rgba(255,255,255,0.14);
}
.buy-sheet-v9 .footer-trust-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-dimmed);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.buy-sheet-v9 .footer-trust-text { color: var(--text-dimmed); }
.buy-sheet-v9 .footer-trust-container::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-dimmed);
  display: inline-block;
}
.buy-sheet-v9 .footer-trust-container::before { order: 2; margin: 0 0 0 0; }
.buy-sheet-v9 .footer-trust-text { order: 1; }
.buy-sheet-v9 .footer-signin {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 8px;
  text-decoration: underline;
  text-decoration-color: rgba(26, 26, 46, 0.12);
  text-underline-offset: 3px;
  order: 3;
}
.buy-sheet-v9 .footer-signin:hover { color: var(--text); }

/* 5. Spacing — section heads need real breathing room from the cards they
   label. 12px below felt cramped (user feedback 2026-05-16). */
.buy-sheet-v9 .paywall-pack-zone .paywall-section-head {
  margin: 0 0 12px;
}
.buy-sheet-v9 .paywall-pack-strip {
  padding: 10px 12px 8px;
}
.buy-sheet-v9 .paywall-pack-strip-head {
  margin-bottom: 4px;
}
.buy-sheet-v9 .paywall-pack-notches { margin-top: 4px; }
.buy-sheet-v9 .paywall-pack-strip-readout { font-size: 20px; }
.buy-sheet-v9 .paywall-pack-strip-price { font-size: 16px; }

/* Narrow viewports — pull credits number down so cards stay readable */
@media (max-width: 360px) {
  .buy-sheet-v9 .sub-tier-v9 { padding: 14px 6px 10px; }
  .buy-sheet-v9 .sub-tier-v9 .sub-tier-credits-num { font-size: 26px; }
  .buy-sheet-v9 .sub-tier-v9 .sub-tier-price { font-size: 12px; }
  .buy-sheet-v9 .sheet-headline-v9 { font-size: 22px; }
}

/* === app.css === */
/* ============================================
   APP-SPECIFIC STYLES
   Layout, header, image area, empty state,
   loading, markers, history, compare slider,
   result actions, error toasts, and more
   ============================================ */

/* ── FundingChoices overlay fix ──────────────────────────────────
   Google FundingChoices injects .fc-consent-root with z-index:2147483644
   and an .fc-dialog-overlay that covers the entire viewport with
   pointer-events:auto. Even for non-EEA users or after consent, the
   overlay persists and blocks ALL clicks. This CSS ensures the overlay
   never blocks when the actual dialog is not visible, while keeping
   the consent dialog itself fully interactive.
   ──────────────────────────────────────────────────────────────── */
.fc-consent-root .fc-dialog-overlay {
  pointer-events: none !important;
}
/* Re-enable pointer events on the actual dialog container (buttons etc.) */
.fc-consent-root .fc-dialog-container {
  pointer-events: auto !important;
}
/* Ensure the consent root itself doesn't block when only overlay remains */
.fc-consent-root {
  pointer-events: none !important;
}
.fc-consent-root * {
  /* Allow clicks on actual dialog elements */
}
.fc-consent-root .fc-dialog-container,
.fc-consent-root .fc-dialog-container * {
  pointer-events: auto !important;
}

/* ============================================
   MAIN APP CONTAINER - Full viewport, no scroll
   ============================================ */
.app {
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

/* Editor mode: fixed viewport, grid layout, no scroll */
.app.has-image {
  height: 100dvh;
  height: -webkit-fill-available;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "header"
    "image"
    "controls"
    "ad";
}

/* ============================================
   TOP BAR - Compact header
   ============================================ */
.top-bar {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  position: relative;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  /* Native app-like hide on scroll */
  transition: transform 0.25s var(--ease-standard), opacity 0.25s var(--ease-standard);
  /* Ensure touch events work correctly on mobile */
  touch-action: manipulation;
}

/* Hidden state for mobile scroll behavior */
.top-bar.nav-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Sticky nav on homepage — fixed so it stays visible when scrolling past hero */
.app:not(.has-image) .top-bar {
  position: fixed;
  top: var(--safe-top);
  left: 0;
  right: 0;
  background: rgba(250, 250, 251, 0.85);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-bottom: 1px solid var(--hairline);
  z-index: 200;
}

/* Nav always visible on mobile (removed hide-until-scroll behavior) */

/* Back button - shown when editing (has image) */
.back-btn {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 14px;
  margin-left: 0;
  border-radius: 8px;
  transition: all 0.15s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.back-btn:hover {
  color: var(--primary);
  background: var(--glow);
  border-color: var(--primary);
}

.back-btn:active {
  transform: scale(0.97);
}

.back-btn svg {
  flex-shrink: 0;
  color: currentColor;
}

/* Show back button when editing */
.app.has-image .back-btn {
  display: flex;
}

/* Ensure top-bar is above editor content but below sheets/modals */
.app.has-image .top-bar {
  position: relative;
  z-index: 150;
  isolation: isolate;
  background: var(--bg);
}

/* Ensure image area stays below top-bar in stacking order */
.app.has-image .image-area {
  z-index: 1;
}

.app.has-image .top-bar * {
  pointer-events: auto;
}

/* Logo - shown on homepage */
.logo {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.025em;
  text-decoration: none;
}

/* Hide logo when editing (back button takes its place) */
.app.has-image .logo {
  display: none;
}

/* Spacer pushes account button to the right */
.nav-spacer {
  flex: 1;
}

/* ============================================
   CREDITS BUTTON - Pill style
   ============================================ */
.credits-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  min-height: 36px;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  box-shadow: var(--shadow-sm);
}

.credits-btn:hover {
  border-color: var(--primary);
  background: var(--glow);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.credits-btn.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

.credits-btn.celebrate {
  animation: celebrateCredits 0.5s var(--ease-out);
}

.credits-btn .free {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
}

.credits-btn .count {
  font-weight: 600;
  color: var(--text);
}

.credits-btn .plus {
  color: var(--primary);
  font-weight: 600;
}

/* Next free edit indicator - shown when user has no credits */
.credits-btn .next-free {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ============================================
   HEADER CREDITS BADGE - Always visible when logged in
   ============================================ */
/* Nav credits pill — same tonal-violet wash family as the homepage hero card,
   sized down to nav real estate. Cubic-bezier easing matches the spring-bouncy
   feel of the buy surfaces; hover swap leans on a soft violet shadow rather
   than a heavy fill so it stays a quiet nav element, not a hero CTA. */
.header-credits {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--tone-violet-50);
  color: var(--tone-violet-700);
  border: 1px solid color-mix(in srgb, var(--tone-violet) 18%, transparent);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

.header-credits:hover {
  background: var(--tone-violet-100);
  border-color: var(--tone-violet);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 92, 252, 0.18);
}

.header-credits:active {
  transform: scale(0.96);
}

.header-credits-count {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--tone-violet-700);
  font-variant-numeric: tabular-nums;
}

.header-credits-label {
  color: color-mix(in srgb, var(--tone-violet-700) 78%, transparent);
  font-weight: 600;
}

/* Show when logged in */
.app.logged-in .header-credits {
  display: flex;
}

/* Empty-state pulse for 0-credit free users — gentle attention without
   shouting. The "+" cue replaces the comma between count and label so
   the badge reads as "0 + edits" → action available. Subscribers and
   logged-out users never see this state. */
.header-credits.is-empty {
  animation: header-credits-empty-pulse 3.6s var(--ease-standard) infinite;
}
.header-credits.is-empty .header-credits-count::after {
  content: ' +';
  color: var(--tone-violet);
  font-weight: 800;
  margin-left: 1px;
}
@keyframes header-credits-empty-pulse {
  0%, 70%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone-violet) 0%, transparent);
  }
  82% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone-violet) 22%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .header-credits.is-empty { animation: none; }
}

/* ============================================
   HEADER ANONYMOUS CTA - Sign in + Try Free
   ============================================ */
.header-anon-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-right: 4px;
}

.header-signin {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  transition: color 0.15s var(--ease-standard), background 0.15s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}

.header-signin:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.header-pricing-link {
  /* Reset native <button> chrome — was rendering a default browser border ring. */
  background: transparent;
  border: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  transition: color 0.15s var(--ease-standard), background 0.15s var(--ease-standard);
}

/* Nav cross-promo to MakeThisVid. Sits between the spacer and credits/user
   menu so all visitors see it. Quiet by default (matches header-pricing-link
   weight) with a subtle MTV-tinted accent on hover. */
.header-mtv-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 0.15s var(--ease-standard),
    background 0.18s var(--ease-standard),
    border-color 0.18s var(--ease-standard),
    transform 0.12s ease;
}

.header-mtv-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8b5cf6;
  transition: color 0.15s var(--ease-standard), transform 0.18s var(--ease-standard);
}

.header-mtv-cta:hover {
  color: var(--text);
  background: color-mix(in srgb, #8b5cf6 8%, transparent);
  border-color: color-mix(in srgb, #8b5cf6 22%, transparent);
}
.header-mtv-cta:hover .header-mtv-cta-icon {
  color: #ec4899;
  transform: translateX(1px);
}

.header-mtv-cta:active {
  transform: translateY(0.5px) scale(0.98);
}

.header-mtv-cta:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 2px;
}

.header-mtv-cta.mtv-cta-busy {
  pointer-events: none;
  opacity: 0.7;
}
.header-mtv-cta.mtv-cta-busy .header-mtv-cta-icon {
  animation: header-mtv-cta-busy-spin 0.8s linear infinite;
}
@keyframes header-mtv-cta-busy-spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   MOBILE + NARROW-DESKTOP EDITOR LAYOUT FIX (<1024px)
   The desktop column-stack rule for .edit-card-footer is gated on
   min-width:1024px. Below that, force a clean stack so Apply Edit
   doesn't get clipped off the viewport at narrow widths (e.g. 823px
   docked windows on Edge/Linux). Covers phones + tablets + narrow
   desktop windows uniformly.
   ============================================ */
@media (max-width: 1023.98px) {
  .app.has-image .edit-card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .app.has-image .footer-left {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }
  .app.has-image .edit-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    min-height: 50px;
    border-radius: 14px;
  }
  /* Big standalone "Add a reference photo" CTA is redundant on mobile —
     the footer-ref-btn carries the same affordance with less weight. */
  .app.has-image .reference-photo-section {
    display: none;
  }
}

.header-mtv-cta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(139, 92, 246, 0.32);
  animation: header-mtv-cta-badge-pulse 2.4s ease-in-out infinite;
}

@keyframes header-mtv-cta-badge-pulse {
  0%, 100% { box-shadow: 0 1px 3px rgba(139, 92, 246, 0.32); transform: scale(1); }
  50%      { box-shadow: 0 2px 8px rgba(236, 72, 153, 0.45); transform: scale(1.06); }
}

/* Post-edit variant: icon becomes a circular thumb of the user's edit so
   the nav silently signals "your image will carry over to MakeThisVid".
   When no thumb is set yet (cold has-result, race), the original SVG
   stays inside the gradient ring as a fallback. */
.header-mtv-cta--has-result .header-mtv-cta-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  padding: 1px;
  box-shadow: 0 1px 4px rgba(139, 92, 246, 0.30);
}
.header-mtv-cta--has-result .header-mtv-cta-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.header-mtv-cta--has-result .header-mtv-cta-icon svg {
  width: 12px;
  height: 12px;
}

/* One-time pulse the first time has-result toggles on this session.
   Session-storage gate is in early.js (mtv_nav_post_edit_pulsed_v1). */
.header-mtv-cta--pulse {
  animation: header-mtv-cta-ring-pulse 1.4s var(--ease-out) 1;
}
@keyframes header-mtv-cta-ring-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.50); }
  60%  { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}

@media (max-width: 480px) {
  .header-mtv-cta {
    padding: 8px 10px;
    min-height: 36px;
  }
  .header-mtv-cta-label {
    display: none;
  }
  .header-mtv-cta-badge {
    padding: 2px 5px;
    font-size: 9px;
  }
}

.header-pricing-link:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.header-try-free {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.18s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.005em;
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
}

.header-try-free::after { display: none; }
.header-try-free svg { flex-shrink: 0; }

.header-try-free:hover {
  transform: translateY(-1px);
  background: var(--primary-hover);
  box-shadow: var(--shadow-lg), var(--shadow-tonal-violet-lg);
}

.header-try-free:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Hide anonymous CTA when logged in */
.app.logged-in .header-anon-cta {
  display: none;
}

/* Hide user avatar button when anonymous (they use the CTA buttons) */
.app:not(.logged-in) .user-btn {
  display: none;
}

/* ============================================
   USER MENU - Button + Dropdown
   ============================================ */
.user-menu-wrapper {
  position: relative;
  z-index: 10003;
}

.user-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--hairline);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  transition: transform 0.15s var(--ease-standard), box-shadow 0.15s var(--ease-standard), border-color 0.15s var(--ease-standard), background 0.15s var(--ease-standard);
  box-shadow: var(--shadow-sm);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.user-btn:hover {
  border-color: var(--tone-violet);
  background: var(--tone-violet-50);
  color: var(--tone-violet-700);
  transform: translateY(-1px);
}

.user-btn:active {
  transform: scale(0.92);
  transition: transform 0.05s var(--ease-standard);
}

.user-btn.logged-in {
  background: var(--tone-violet);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-tonal-violet);
}

.user-btn.logged-in:hover {
  border-color: transparent;
  background: var(--tone-violet-700);
  color: #fff;
  box-shadow: 0 8px 24px rgba(124, 92, 252, 0.40);
}

.user-btn-initials {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  color: inherit;
}

/* User dropdown menu — fixed position to escape overflow:hidden on .app */
.user-dropdown {
  position: fixed;
  width: 280px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), var(--shadow-tonal-violet);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.15s var(--ease-standard), visibility 0.15s var(--ease-standard), transform 0.15s var(--ease-standard);
  z-index: 10003;
  overflow: hidden;
}

.user-dropdown.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  /* Opening: snappy pop-in */
  transition: opacity 0.15s var(--ease-standard), visibility 0.15s var(--ease-standard), transform 0.15s cubic-bezier(0.2, 0, 0.13, 1.5);
}

.dropdown-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  background: var(--tone-violet-50);
  border-bottom: 1px solid var(--hairline);
}

.dropdown-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--tone-violet);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-tonal-violet);
}

.dropdown-user-info {
  min-width: 0;
  flex: 1;
}

.dropdown-email {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.dropdown-plan {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 3px;
}

.dropdown-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.05);
  margin: 0;
}

.dropdown-section {
  padding: 8px;
  background: transparent;
}

.dropdown-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 12px 4px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s var(--ease-standard), color 0.18s var(--ease-standard);
}

.dropdown-item:hover {
  background: var(--tone-violet-50);
  color: var(--tone-violet-700);
}

.dropdown-item svg {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.18s var(--ease-standard);
}

.dropdown-item:hover svg {
  color: var(--tone-violet);
}

/* Secondary CTA inside the user dropdown — outline turning violet on hover,
   same recipe as .bs-pack-cta. Stands out from other dropdown items via the
   pill shape, hairline border, and violet hover wash + soft shadow lift,
   without going full dark fill (the dropdown is already small surface area). */
.dropdown-item-primary {
  background: var(--card);
  color: var(--text);
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.005em;
  border: 1.5px solid rgba(0, 0, 0, 0.10);
  border-radius: var(--r-pill);
  transition:
    border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-item-primary:hover {
  background: var(--tone-violet-50);
  color: var(--tone-violet-700);
  border-color: var(--tone-violet);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124, 92, 252, 0.16);
}

.dropdown-item-primary svg {
  color: var(--text);
  transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-item-primary:hover svg {
  color: var(--tone-violet-700);
}

.dropdown-item-subtle {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.dropdown-item-subtle:hover {
  color: var(--text);
}

.dropdown-item-muted {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 400;
  justify-content: center;
  padding: 8px 12px;
}

.dropdown-item-muted:hover {
  color: var(--primary);
  background: transparent;
}

.dropdown-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 10px;
  text-align: center;
  line-height: 1.4;
}

.dropdown-credits {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #f8f8f8;
  border-radius: 8px;
  margin-bottom: 8px;
}

.credits-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.credits-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
}

/* Language grid in dropdown */
.lang-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lang-chip {
  padding: 6px 10px;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.15s;
}

.lang-chip:hover {
  background: var(--glow);
  border-color: var(--primary);
  color: var(--primary);
}

.lang-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* NAV CTA - removed in nav redesign, hero handles upload CTA */

/* ============================================
   IMAGE AREA - Fills available space
   ============================================ */
.image-area {
  grid-area: image;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: visible;
  min-height: 0;
  min-width: 0;
  padding: 8px;
  background: var(--bg);
}

/* Editor mode: image area clips content, centers image */
.app.has-image .image-area {
  overflow: hidden;
  justify-content: center;
}

/* Homepage: content-sized, not viewport-stretched */
.app:not(.has-image) .image-area {
  flex: none;
  padding-top: calc(64px + var(--safe-top));
}

/* Push hero content down when rate limit banner is visible (it's position:fixed) */
.rate-limit-banner.visible ~ .image-area {
  padding-top: calc(140px + var(--safe-top));
}

/* ============================================
   EMPTY STATE - Premium upload area
   ============================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 24px;
  position: relative;
  overflow: hidden;
  background: rgba(var(--primary-rgb), 0.06);
  border: 2px dashed rgba(var(--primary-rgb), 0.3);
  border-radius: 16px;
  margin: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  animation: empty-state-breathe 3s var(--ease-in-out) infinite;
}

@keyframes empty-state-breathe {
  0%, 100% { border-color: rgba(var(--primary-rgb), 0.3); }
  50% { border-color: rgba(var(--primary-rgb), 0.55); }
}

.empty-icon {
  color: var(--primary);
  margin-bottom: 20px;
  opacity: 0.7;
}

.empty-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  text-align: center;
}

.empty-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 28px;
  max-width: 300px;
  line-height: 1.5;
}

.upload-cta {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: white;
  padding: 14px 32px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35);
  transition: all 0.2s var(--ease-standard);
  animation: cta-glow 2.5s var(--ease-in-out) infinite;
}

@keyframes cta-glow {
  0%, 100% { box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35); }
  50% { box-shadow: 0 4px 24px rgba(var(--primary-rgb), 0.5); }
}

.empty-state:hover .upload-cta {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
}

.empty-state:active,
.empty-state:active .upload-cta {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.empty-state .hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  opacity: 0.75;
}

.social-proof {
  font-size: 0.8rem;
  color: var(--text-dimmed);
  margin-top: 20px;
  opacity: 0.8;
}

.try-free-text {
  font-size: 0.85rem;
  color: var(--primary);
  font-weight: 500;
  margin-top: 6px;
}

/* Pulse effect - subtle glow */
.pulse-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  pointer-events: none;
}

.pulse-ring {
  width: 120px;
  height: 120px;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
  opacity: 0.6;
  animation: pulse-glow 3s var(--ease-in-out) infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.3;
  }
}

/* ============================================
   IMAGE CONTAINER - Fills available space
   ============================================ */
.image-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
}

.image-container.visible {
  display: flex;
}

/* Image wrapper - centers image, constrained to container */
.image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
}

/* Current image - scales to fit while maintaining aspect ratio */
#currentImage {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: opacity 0.3s var(--ease-standard);
}

/* Crossfade: briefly dim before new src is set */
#currentImage.image-transitioning {
  opacity: 0.3;
  transition: opacity 0.2s var(--ease-standard);
}

/* Result image reveal animation */
#currentImage.revealing {
  animation: imageReveal 0.4s var(--ease-out);
}

/* Settle pulse: one restrained "jackpot" beat the moment the result lands.
   Scale-up + soft shadow bloom then settles. Overshoot easing makes it feel
   like the image is asserting itself, not just appearing. Subtle by design —
   the transformation is the dopamine; this just makes the moment land. */
@keyframes resultSettlePulse {
  0%   { transform: scale(1);     box-shadow: 0 0 0 0 rgba(26, 26, 46, 0); }
  35%  { transform: scale(1.025); box-shadow: 0 14px 38px -10px rgba(26, 26, 46, 0.28); }
  100% { transform: scale(1);     box-shadow: 0 0 0 0 rgba(26, 26, 46, 0); }
}
#currentImage.result-settle-pulse {
  animation: resultSettlePulse 480ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transform-origin: center center;
  will-change: transform;
}

/* Reveal microcopy — single warm line under the image after edit completes. */
.reveal-microcopy {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translate(-50%, 6px);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  padding: 5px 12px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.reveal-microcopy.visible {
  animation: revealMicrocopyIn 600ms cubic-bezier(0.16, 1, 0.3, 1) 250ms forwards,
             revealMicrocopyOut 600ms cubic-bezier(0.4, 0, 0.6, 1) 3400ms forwards;
}
@keyframes revealMicrocopyIn {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes revealMicrocopyOut {
  0%   { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -4px); }
}

/* Shimmer loading overlay on image container while edit is processing */
.image-shimmer {
  position: relative;
}
.image-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(26, 26, 46, 0.05) 20%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(26, 26, 46, 0.05) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmerSlide 1.5s var(--ease-in-out) infinite;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
}
@keyframes shimmerSlide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Original image overlay - positioned over current image for comparison */
#originalImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.15s var(--ease-standard);
  z-index: 5;
  pointer-events: none;
}

#originalImage.show {
  opacity: 1;
}

/* ============================================
   EDIT MARKERS
   ============================================ */
.edit-marker {
  position: absolute;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  z-index: 20;
  display: none;
}

.edit-marker.visible {
  display: block;
}

.edit-marker-inner {
  width: 100%;
  height: 100%;
  border: 3px solid var(--marker);
  border-radius: 50%;
  background: var(--marker-bg);
  animation: marker-pulse 1.5s var(--ease-in-out) infinite;
}

.edit-marker-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  background: var(--marker);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-num {
  font-size: 10px;
  font-weight: 700;
  color: white;
}

.clear-marker-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  z-index: 25;
  display: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s var(--ease-standard);
}

.clear-marker-btn:hover {
  background: white;
  border-color: var(--error);
  color: var(--error);
  transform: scale(1.02);
}

.clear-marker-btn.visible {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================
   LOADING OVERLAY - Elevated AI Processing
   ============================================ */
.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(254, 254, 254, 0.88);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
}

.loading-overlay.visible {
  display: flex;
  animation: loadingFadeIn 0.4s var(--ease-out);
}

@keyframes loadingFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Shimmer effect that sweeps across the overlay — violet-tinted */
.loading-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(26, 26, 46, 0.03) 40%,
    rgba(26, 26, 46, 0.05) 50%,
    rgba(26, 26, 46, 0.03) 60%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: loadingShimmer 2.5s var(--ease-in-out) infinite;
  pointer-events: none;
}

@keyframes loadingShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Centered progress card */
.loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px 48px;
  background: var(--surface-elevated);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg), var(--shadow-tonal-violet);
  position: relative;
  z-index: 1;
  max-width: 320px;
  animation: loadingCardIn 0.5s var(--ease-standard) 0.1s both;
}

@keyframes loadingCardIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Circular progress ring */
.loading-ring {
  width: 100px;
  height: 100px;
  position: relative;
  /* Loading UI is decorative — prevent rage-click rabbit holes on the
     percent/ring while users wait (session 019e230d clicked 70+ times). */
  pointer-events: none;
  user-select: none;
}

.loading-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.loading-ring-bg {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 8;
}

.loading-ring-progress {
  fill: none;
  stroke: var(--tone-violet);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283; /* 2 * PI * 45 */
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.4s var(--ease-standard);
  filter: drop-shadow(0 2px 6px rgba(124, 92, 252, 0.35));
}

.loading-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.loading-percent {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.loading-percent-sign {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Status message */
.loading-message {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  text-align: center;
  animation: loadingPulse 2s var(--ease-in-out) infinite;
}

@keyframes loadingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Progress stages indicator */
.loading-stages {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 12px 0;
}

.loading-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.4;
  transition: opacity 0.3s var(--ease-standard), transform 0.3s var(--ease-standard);
}

.loading-stage.active {
  opacity: 1;
}

.loading-stage.completed {
  opacity: 0.7;
}

.loading-stage.active .stage-dot {
  background: var(--tone-violet);
  box-shadow: 0 0 0 4px var(--tone-violet-50);
  animation: stagePulse 1.5s var(--ease-in-out) infinite;
}

.loading-stage.completed .stage-dot {
  background: var(--tone-violet);
}

@keyframes stagePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.stage-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.3s var(--ease-standard);
}

.loading-stage span {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

.loading-stage.active span {
  color: var(--primary);
}

.loading-stage-line {
  width: 32px;
  height: 2px;
  background: var(--border);
  margin: 0 8px;
  margin-bottom: 18px;
  border-radius: 1px;
  transition: background 0.3s var(--ease-standard);
}

.loading-stage-line.completed {
  background: var(--primary);
}

/* Tip or fun fact */
.loading-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-subtle);
  border-radius: 12px;
  max-width: 100%;
  animation: tipFadeIn 0.5s var(--ease-out) 0.6s both;
}

@keyframes tipFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.loading-tip-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.loading-tip-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Multi-version progress (numVersions > 1)
   Replaces the 3-stage Analyze/Process/Refine row with N per-version pips
   that light up as each NDJSON version event arrives. */
.loading-versions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0 2px;
}
.loading-versions[hidden] { display: none; }
.loading-versions-pips {
  display: flex;
  align-items: center;
  gap: 10px;
}
.loading-version-pip {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-subtle);
  border: 1.5px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  transition: background 0.25s var(--ease-standard),
              border-color 0.25s var(--ease-standard),
              color 0.25s var(--ease-standard),
              transform 0.25s var(--ease-standard);
}
.loading-version-pip.loading {
  background: linear-gradient(110deg, var(--bg-subtle) 8%, var(--hairline) 18%, var(--bg-subtle) 33%);
  background-size: 200% 100%;
  animation: pip-shimmer 1.4s linear infinite;
  border-color: var(--tone-violet, #7C3AED);
  color: var(--tone-violet, #7C3AED);
}
@keyframes pip-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.loading-version-pip.ready {
  background: var(--tone-emerald-700, #047857);
  border-color: var(--tone-emerald-700, #047857);
  color: #fff;
  transform: scale(1.06);
  animation: pip-pop 0.32s var(--ease-out);
}
.loading-version-pip.failed {
  background: transparent;
  border-color: #b91c1c;
  color: #b91c1c;
}
@keyframes pip-pop {
  0% { transform: scale(0.92); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1.06); }
}
.loading-versions-fraction {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Multi-version mode hides the single-edit affordances that don't map onto
   N parallel calls — pip row replaces the 3-stage indicator and the tip. */
.loading-card.multi-mode .loading-stages,
.loading-card.multi-mode .loading-tip { display: none; }

/* ============================================
   CHANGE PHOTO BUTTON - Floating pill
   ============================================ */
.change-photo-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  z-index: 15;
  transition: all 0.2s var(--ease-standard);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.change-photo-btn:hover {
  background: white;
  border-color: var(--primary);
  color: var(--primary);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ============================================
   EXPAND BUTTON - Mobile fullscreen affordance
   Top-right corner of the canvas. The lightbox
   already opens on tap-of-image, but that's not
   discoverable; this icon makes it obvious.
   Mirrors .change-photo-btn's glass-pill style on
   the opposite corner. Mobile-only — desktop has
   no lightbox.
   ============================================ */
.image-expand-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text-muted);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 15;
  transition: all 0.2s var(--ease-standard);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.image-expand-btn:active {
  transform: scale(0.94);
  background: white;
  color: var(--primary);
}

/* Only render the button on mobile and only once an image is loaded — no
   image means nothing to expand, and on desktop the lightbox is a no-op. */
@media (max-width: 768px) {
  .app.has-image .image-expand-btn {
    display: flex;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ============================================
   BOTTOM CONTROLS - Fixed at bottom
   ============================================ */
.controls {
  grid-area: controls;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface-elevated);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 16px;
  padding-bottom: calc(12px + var(--safe-bottom));
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.03);
  flex-shrink: 0;
}

.controls.hidden {
  display: none;
}

/* ============================================
   EDIT ACTIONS
   ============================================ */
.edit-actions {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-actions.hidden {
  display: none;
}

.action-row {
  display: flex;
  gap: 10px;
}

/* Icon-only button (for change photo) */
.action-row .btn-secondary {
  flex: 0;
  padding: 14px 18px;
  font-size: 1.2rem;
}

/* result-actions replaced by .result-toolbar in components.css */

/* ============================================
   RATE LIMIT BANNER - Shown when 3 free edits/hour exhausted
   Fixed position below header, similar to error toast
   ============================================ */
.rate-limit-banner {
  position: fixed;
  top: calc(60px + var(--safe-top));
  left: 16px;
  right: 16px;
  max-width: 500px;
  margin: 0 auto;
  z-index: 299;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--tone-amber-50);
  color: var(--tone-amber-700);
  border: 1px solid color-mix(in srgb, var(--tone-amber) 28%, transparent);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  font-family: var(--font-body);
  transition: all 0.3s var(--ease-standard);
}

.rate-limit-banner.visible {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.rate-limit-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.rate-limit-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.rate-limit-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rate-limit-title {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--tone-amber-700);
  font-weight: 700;
}

.rate-limit-title strong {
  font-weight: 700;
  color: var(--tone-amber-700);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.rate-limit-subtitle {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: color-mix(in srgb, var(--tone-amber-700) 78%, transparent);
}

/* Compact primary CTA — same dark gradient + violet glow recipe as the
   homepage hero subscribe button, sized down to fit inside the rate-limit
   banner. Violet rim glow on the top edge via ::before, snappier hover lift
   on cubic-bezier easing. The banner stays amber-toned (warning context);
   only the action surface shifts to the brand primary. */
.rate-limit-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary) 0%, #2a2a4a 100%);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  flex-shrink: 0;
}

.rate-limit-btn::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(124, 92, 252, 0.4) 50%,
    transparent 100%);
  pointer-events: none;
}

.rate-limit-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--primary-hover) 0%, #34345a 100%);
  box-shadow: var(--shadow-lg), 0 10px 28px rgba(124, 92, 252, 0.32);
}

@media (max-width: 480px) {
  .rate-limit-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .rate-limit-btn {
    width: 100%;
    text-align: center;
  }
}

/* ============================================
   FREE RESOLUTION NOTICE
   Inline notice below prompt for free-tier users.
   Informs about 1024px cap before they hit submit.
   ============================================ */
.free-resolution-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tone-amber-700);
  background: var(--tone-amber-50);
  border: 1px solid color-mix(in srgb, var(--tone-amber) 22%, transparent);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  margin-top: 8px;
  line-height: 1.3;
}

.free-resolution-notice a {
  color: var(--tone-amber-700);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--tone-amber) 35%, transparent);
  transition: border-color 160ms var(--ease-standard);
}

.free-resolution-notice a:hover {
  border-bottom-color: var(--tone-amber-700);
}

.free-resolution-notice.hidden {
  display: none;
}

@media (max-width: 768px) {
  .free-resolution-notice {
    font-size: 11.5px;
    padding: 4px 10px;
    gap: 4px;
    margin-top: 6px;
  }
}

/* ============================================
   Out-of-edits inline notice
   Surfaced above the prompt input when user has no credits AND weekly free is used.
   Goal: stop the "type prompt → click send → blocked → repeat" loop seen in sessions.
   ============================================ */
.out-of-edits-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--tone-amber-700);
  background: var(--tone-amber-50);
  border: 1px solid color-mix(in srgb, var(--tone-amber) 35%, transparent);
  border-radius: var(--r-md);
  padding: 8px 10px 8px 12px;
  margin-top: 8px;
  line-height: 1.3;
}

.out-of-edits-notice .oof-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.out-of-edits-notice .oof-text {
  flex: 1;
  min-width: 0;
}

/* Proper secondary CTA (outline → violet on hover) shared with .bs-pack-cta.
   White card surface with a hairline border at rest, then a violet-tinted
   wash + tone-violet-700 text + soft violet shadow lift on hover. Lives
   inside the amber notice but reads as a real button, not a text link. */
.out-of-edits-notice .oof-cta {
  display: inline-block;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1.5px solid rgba(0, 0, 0, 0.10);
  transition:
    border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.out-of-edits-notice .oof-cta:hover {
  border-color: var(--tone-violet);
  color: var(--tone-violet-700);
  background: var(--tone-violet-50);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124, 92, 252, 0.16);
}

.out-of-edits-notice .oof-cta:active {
  transform: translateY(0) scale(0.97);
}

.out-of-edits-notice.hidden {
  display: none;
}

@media (max-width: 768px) {
  .out-of-edits-notice {
    font-size: 12px;
    padding: 6px 8px 6px 10px;
    gap: 8px;
  }
  .out-of-edits-notice .oof-cta {
    padding: 6px 14px;
  }
}

/* Done editing button - shows after "Edit more" */
.done-editing-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  padding: 10px 20px;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s var(--ease-standard);
}

.done-editing-btn:hover {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(26, 26, 46, 0.05);
}

.done-editing-btn.hidden {
  display: none;
}

/* ============================================
   ERROR TOAST
   ============================================ */
.error-toast {
  position: fixed;
  top: calc(60px + var(--safe-top));
  left: 16px;
  right: 16px;
  background: var(--tone-rose-50);
  color: var(--tone-rose-700);
  border: 1px solid color-mix(in srgb, var(--tone-rose) 26%, transparent);
  padding: 14px 18px;
  border-radius: var(--r-lg);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: all 0.3s var(--ease-standard);
  box-shadow: var(--shadow-lg);
}

.error-toast.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Trust-building technical error toast — subtle sky-tinted status surface */
.error-toast.technical-error {
  background: var(--tone-sky-50);
  color: var(--tone-sky-700);
  border-color: color-mix(in srgb, var(--tone-sky) 26%, transparent);
  padding: 16px;
  line-height: 1.4;
}

.technical-error-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.technical-error-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.technical-error-text {
  flex: 1;
}

.technical-error-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.technical-error-subtitle {
  opacity: 0.95;
  font-size: 0.85rem;
}

/* Retrying spinner animation */
.retrying-spin {
  animation: retrying-spin 1s linear infinite;
}
@keyframes retrying-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Persistent error banner (no auto-dismiss) — subtle rose-tinted status surface */
.error-toast.persistent-error {
  background: var(--tone-rose-50);
  color: var(--tone-rose-700);
  border-color: color-mix(in srgb, var(--tone-rose) 32%, transparent);
  padding: 16px;
  line-height: 1.4;
}

.persistent-error-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.persistent-error-text {
  flex: 1;
}

.persistent-error-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.persistent-error-subtitle {
  opacity: 0.95;
  font-size: 0.85rem;
}

.persistent-error-actions {
  display: flex;
  gap: 8px;
}

.persistent-error-retry {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.persistent-error-retry:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.persistent-error-dismiss {
  background: transparent;
  color: var(--tone-rose-700);
  border: 1px solid color-mix(in srgb, var(--tone-rose) 32%, transparent);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}

.persistent-error-dismiss:hover {
  background: color-mix(in srgb, var(--tone-rose) 14%, transparent);
}

/* Content safety variant */
.content-safety-error .persistent-error-title {
  font-size: 0.95rem;
}

.safety-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.safety-suggestion {
  background: var(--bg-secondary, rgba(255,255,255,0.1));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.15));
  color: var(--text, #fff);
  font-size: 0.75rem;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
}

.safety-suggestion:hover {
  background: var(--bg-tertiary, rgba(255,255,255,0.18));
  border-color: var(--border, rgba(255,255,255,0.25));
}

/* ============================================
   TOAST CONTAINER - Dynamic stacking toasts
   ============================================ */
.toast-container {
  position: fixed;
  top: calc(60px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 310;
  width: calc(100% - 32px);
  max-width: 400px;
  pointer-events: none;
}

.toast {
  padding: 12px 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: white;
  pointer-events: auto;
  animation: toast-enter 0.35s var(--ease-out) forwards;
  box-shadow: var(--shadow-lg);
}

.toast--success {
  background: var(--tone-emerald);
}

.toast--warning {
  background: var(--tone-amber);
  color: var(--tone-amber-700);
}

.toast--info {
  background: var(--tone-violet);
}

.toast.exiting {
  animation: toast-exit 0.25s var(--ease-out) forwards;
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-exit {
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
}

/* Swipeable toast notifications */
.toast, .error-toast {
  touch-action: pan-y;
}
.toast.swiping, .error-toast.swiping {
  transition: none !important;
}

/* ============================================
   CREDIT-REFUND TOAST — Material You tonal card
   ============================================ */
.toast--credit-refund {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: var(--r-xl);
  background: #ECF6EF;
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0;
  box-shadow:
    0 1px 2px rgba(20, 20, 40, 0.04),
    0 8px 24px rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.10);
  min-height: 64px;
}

.toast--credit-refund .refund-toast-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tone-emerald-100);
  color: var(--tone-emerald-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.toast--credit-refund .refund-toast-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.toast--credit-refund .refund-toast-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.toast--credit-refund .refund-toast-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.toast--credit-refund .refund-toast-amount {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  transform-origin: left center;
  animation: refund-amount-pop 0.6s var(--ease-out) 0.05s both;
}

.toast--credit-refund .refund-toast-subline {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0;
  line-height: 1.35;
}

.toast--credit-refund .refund-toast-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--text-dimmed);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-right: 2px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.toast--credit-refund .refund-toast-close:hover,
.toast--credit-refund .refund-toast-close:focus-visible {
  background: rgba(26, 26, 46, 0.06);
  color: var(--text);
  outline: none;
}

.toast--credit-refund .refund-toast-close svg {
  width: 14px;
  height: 14px;
  display: block;
}

@keyframes refund-amount-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.10); opacity: 1; }
  100% { transform: scale(1.00); opacity: 1; }
}

/* ============================================
   SAVE SUCCESS ANIMATION
   ============================================ */
.save-success-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
}

.save-success-check {
  width: 64px;
  height: 64px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: saveCheckPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  box-shadow: var(--shadow-lg), var(--shadow-tonal-violet);
}

.save-success-check svg {
  width: 32px;
  height: 32px;
  stroke: white;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes saveCheckPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.save-success-overlay.fade-out {
  opacity: 0;
  transition: opacity 0.3s var(--ease-standard);
}

/* ============================================
   EDIT HISTORY - Polished timeline strip
   ============================================ */
.history-strip {
  display: none;
  padding: 12px 0;
  flex-shrink: 0;
}

.history-strip.visible {
  display: block;
}

.history-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px;
}

.history-scroll::-webkit-scrollbar {
  display: none;
}

.history-items {
  display: flex;
  gap: 10px;
  align-items: center;
  /* Container is not interactive - items inside are */
  cursor: default;
}

.history-item {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1.5px solid var(--hairline);
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard), transform 0.2s var(--ease-standard);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-sm);
  -webkit-tap-highlight-color: rgba(124, 92, 252, 0.15);
  user-select: none;
  -webkit-user-select: none;
}

.history-item.active {
  border-color: var(--tone-violet);
  box-shadow: 0 0 0 3px var(--tone-violet-50), var(--shadow-tonal-violet);
  transform: scale(1.08);
}

.history-item:not(.active):hover {
  border-color: color-mix(in srgb, var(--tone-violet) 32%, transparent);
  transform: translateY(-2px) scale(1.04);
  box-shadow: var(--shadow-md);
}

/* Active/pressed state for click feedback */
.history-item:active {
  transform: scale(0.95);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.05s var(--ease-standard), box-shadow 0.05s var(--ease-standard);
}

.history-item.active:active {
  transform: scale(1.02);
}

/* Focus state for accessibility and keyboard navigation */
.history-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-color: var(--primary);
}

.history-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s var(--ease-standard);
  /* Let clicks pass through to parent */
  pointer-events: none;
}

.history-item:hover img {
  transform: scale(1.05);
}

.history-item .step-num {
  position: absolute;
  bottom: 3px;
  right: 3px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: white;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.3px;
  /* Let clicks pass through to parent */
  pointer-events: none;
}

.history-item.original .step-num {
  background: linear-gradient(135deg, var(--primary), #9f8cf7);
}

.history-prompt {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 6px 16px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ============================================
   BEFORE/AFTER COMPARISON SLIDER
   ============================================ */
.compare-slider-container {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 10;
  pointer-events: none;
}

.compare-slider-container.visible {
  display: block;
  pointer-events: auto;
}

.compare-slider-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.compare-slider-clip img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.compare-slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tone-violet);
  cursor: ew-resize;
  z-index: 15;
  box-shadow: 0 0 12px rgba(124, 92, 252, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.compare-slider-handle::before,
.compare-slider-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 38px;
  height: 38px;
  background: white;
  border: 2px solid var(--tone-violet);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-tonal-violet);
  display: flex;
  align-items: center;
  justify-content: center;
}

.compare-slider-handle::before {
  left: -19px;
  transform: translateY(-50%);
}

.compare-slider-handle::after {
  display: none;
}

.compare-slider-arrows {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  background: white;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-tonal-violet);
  border: 2px solid var(--tone-violet);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--tone-violet-700);
  pointer-events: none;
}

.compare-slider-label {
  position: absolute;
  top: 12px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: white;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  z-index: 5;
}

.compare-slider-label.before {
  left: 12px;
}

.compare-slider-label.after {
  right: 12px;
}

/* After image - background layer */
.compare-after-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

.compare-slider-clip {
  z-index: 2;
}

/* Floating compare button on image */
.compare-float-btn {
  display: none;
  position: absolute;
  bottom: 50px;
  left: 12px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  padding: 10px 14px;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  border-radius: 12px;
  transition: all 0.2s var(--ease-standard);
  z-index: 10;
}

/* Show only when there's a result - with attention animation */
body.has-result .compare-float-btn {
  display: inline-flex;
  animation: compare-btn-pop 0.5s var(--ease-out) 0.5s both;
}

/* ============================================
   RESULT STATE - Global (all viewports)
   Hide pre-edit guidance when viewing a result
   ============================================ */
body.has-result .rate-limit-banner {
  display: none !important;
}

@keyframes compare-btn-pop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.compare-float-btn:hover {
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.compare-float-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.compare-float-btn svg {
  opacity: 0.9;
}

/* Before/After label pill (double-tap toggle on mobile) */
.before-after-label {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: white;
  padding: 5px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s var(--ease-standard);
  z-index: 10;
}
.before-after-label.visible {
  opacity: 1;
}

/* ============================================
   HOMEPAGE CONTENT SECTION
   ============================================ */

/* Hide homepage content, dashboard, and footer when in editor mode (image uploaded) */
.app.has-image ~ .homepage-content,
.app.has-image ~ .dashboard-section,
.app.has-image ~ .seo-footer {
  display: none;
}

/* Hide hero sections inside image-area when editing — they're siblings of image-container
   in the DOM and bleed through on mobile if not explicitly hidden */
.app.has-image .hero-dropzone,
.app.has-image .empty-state,
.app.has-image .answer-capsule {
  display: none !important;
}

/* Hide homepage content for pSEO CTA arrivals (?task= param).
   Applied synchronously by early.js to prevent flash of homepage content. */
html.task-mode .homepage-content,
html.task-mode .seo-footer {
  display: none;
}

.homepage-content {
  background: var(--bg);
  overflow-x: hidden;
  width: 100%;
}

/* Section Bands - Full-width sections with contained content */
.section-band {
  padding: 56px 24px;
}

.section-band-subtle {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 24px; /* Tighter for testimonial */
}

@media (max-width: 768px) {
  .section-band-subtle {
    padding: 24px 16px;
  }
}

.section-band-features {
  background: var(--bg);
}

.band-inner {
  max-width: 640px;
  margin: 0 auto;
}

.band-inner-wide {
  max-width: 960px;
}

/* Testimonial Spotlight */
.testimonial-spotlight {
  text-align: center;
}

.testimonial-spotlight .quote-mark {
  opacity: 0.08;
  margin-bottom: 12px;
}

.testimonial-spotlight blockquote {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 20px 0;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.testimonial-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.testimonial-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.9rem;
}

.testimonial-divider {
  color: var(--text-muted);
  opacity: 0.5;
}

.testimonial-note {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ============================================
   USE CASE SHOWCASES - Creative Differentiated Sections
   ============================================ */

/* Base showcase block */
.showcase-block {
  padding: 48px 24px;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* Animation enhancement - start visible, animate when JS adds class */
.showcase-block[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-block[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fallback: show content if JS hasn't run after 2s */
@media (prefers-reduced-motion: no-preference) {
  .showcase-block[data-animate] {
    animation: showcase-fallback 0s 2s forwards;
  }
}

@keyframes showcase-fallback {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.showcase-inner {
  width: 100%;
  max-width: none;
  padding: 0 48px;
  box-sizing: border-box;
}

/* Shared typography */
.showcase-headline {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 16px 0;
}

.showcase-headline-xl {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: white;
  margin: 0 0 20px 0;
}

.showcase-subline {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  max-width: 500px;
}

.showcase-subline-light {
  font-size: 1.15rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  margin: 0 0 40px 0;
  max-width: 480px;
}

.showcase-text-center {
  text-align: center;
  margin-bottom: 48px;
}

.showcase-text-center .showcase-subline {
  margin: 0 auto;
}

.showcase-chip {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  background: rgba(0, 0, 0, 0.06);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.showcase-micro-prompt {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 20px 0 0 0;
}

/* Split layout */
.showcase-split {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  align-items: center;
}

.showcase-left-col {
  padding-right: 20px;
}

/* === SHOWCASE CONTENT ROW - Horizontal layout === */
.showcase-content-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
}

.showcase-content-row.reverse {
  grid-template-columns: 1.2fr 1fr;
}

.showcase-content-row.reverse .showcase-text-side {
  order: 2;
}

.showcase-content-row.reverse .showcase-image-side {
  order: 1;
}

.showcase-text-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.showcase-text-side .showcase-headline {
  margin: 0;
}

.showcase-text-side .showcase-subline {
  margin: 0;
}

.showcase-image-side {
  width: 100%;
}

/* Before/After Pair */
.before-after-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ba-image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.ba-image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.ba-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.6);
  color: white;
}

/* === REMOVAL SECTION === */
.showcase-removal {
  background: var(--bg);
}

/* === BACKGROUNDS SECTION === */
.showcase-backgrounds {
  background: var(--bg-subtle);
}

.prompt-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.prompt-tag {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 100px;
}

/* === COMBINE SECTION === */
.showcase-combine {
  background: var(--bg);
}

.combine-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.combine-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 8px;
}

.combine-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--glow);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.combine-plus,
.combine-arrow {
  color: var(--text-muted);
  font-weight: 600;
  opacity: 0.5;
}

.combine-result {
  background: var(--glow);
  border-color: var(--primary);
  color: var(--primary);
}

.combine-result svg {
  color: var(--primary);
}

.combine-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.combine-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.combine-input-img {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.combine-input-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.combine-output {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.combine-output img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.combine-img-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.6);
  color: white;
}

/* === SMART MODE SECTION === */
.showcase-smart {
  background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%);
  padding: 64px 24px;
  overflow-x: hidden;
}

.smart-header {
  text-align: center;
  margin-bottom: 32px;
}

.smart-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #4a4a66;
  background: rgba(167, 139, 250, 0.15);
  padding: 8px 20px;
  border-radius: 100px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  margin-bottom: 20px;
}

.showcase-headline-light {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: white;
  margin: 0;
  line-height: 1.2;
}

/* Prompt display */
.smart-prompt-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
}

.smart-prompt-display .prompt-quote {
  font-size: 2rem;
  color: #4a4a66;
  opacity: 0.5;
  font-family: Georgia, serif;
}

.smart-prompt-display p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.9);
  margin: 0;
  font-style: italic;
}

/* Cascade timeline */
.smart-cascade {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  overflow-x: auto;
  padding: 8px 0;
}

.cascade-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.cascade-img {
  width: 180px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  margin-bottom: 12px;
}

.cascade-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.cascade-final .cascade-img {
  box-shadow: 0 8px 32px rgba(167, 139, 250, 0.3), 0 8px 24px rgba(0,0,0,0.4);
  border: 2px solid rgba(167, 139, 250, 0.5);
}

.cascade-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cascade-edits {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.cascade-edits span {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.05);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.cascade-arrow {
  color: rgba(167, 139, 250, 0.4);
  font-size: 1.5rem;
  margin-top: 60px;
  flex-shrink: 0;
}

/* Value stats */
.smart-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px 32px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  max-width: 500px;
  margin: 0 auto;
}

.value-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.value-number {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.value-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.value-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.1);
}

/* Final CTA */
.final-cta {
  text-align: center;
  padding: 64px 24px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border-top: 1px solid var(--border);
}

.final-cta h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.final-cta p {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0 0 24px 0;
}

.final-cta .hero-upload-btn {
  font-size: 1rem;
  padding: 14px 28px;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .showcase-content-row,
  .showcase-content-row.reverse {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .showcase-content-row.reverse .showcase-text-side,
  .showcase-content-row.reverse .showcase-image-side {
    order: unset;
  }

  .showcase-text-side {
    text-align: center;
  }

  .showcase-text-side .showcase-subline {
    margin: 0 auto;
  }

  .prompt-examples {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .section-band {
    padding: 32px 16px;
  }

  .testimonial-spotlight blockquote {
    font-size: 1.1rem;
  }

  .showcase-block {
    padding: 40px 16px;
  }

  .showcase-inner {
    padding: 0 8px;
  }

  .showcase-headline {
    font-size: 1.5rem;
  }

  .showcase-headline-xl {
    font-size: 1.75rem;
  }

  .showcase-subline {
    font-size: 0.95rem;
  }

  .before-after-pair {
    gap: 12px;
  }

  .ba-image img {
    border-radius: 8px;
  }

  /* Smart mode mobile */
  .showcase-smart {
    padding: 48px 16px;
  }

  .showcase-headline-light {
    font-size: 1.5rem;
  }

  .smart-prompt-display p {
    font-size: 0.95rem;
  }

  .smart-cascade {
    gap: 8px;
    justify-content: flex-start;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: -16px;
    margin-right: -16px;
  }

  .cascade-img {
    width: 140px;
  }

  .cascade-edits span {
    font-size: 0.6rem;
    padding: 2px 6px;
  }

  .cascade-arrow {
    font-size: 1.2rem;
    margin-top: 45px;
  }

  .smart-value {
    gap: 20px;
    padding: 20px 24px;
  }

  .value-number {
    font-size: 1.5rem;
  }

  .value-label {
    font-size: 0.65rem;
  }

  .final-cta {
    padding: 48px 16px;
  }

  .final-cta h2 {
    font-size: 1.35rem;
  }

  .final-cta p {
    font-size: 0.9rem;
  }

  /* Combine section mobile */
  .combine-flow {
    justify-content: center;
  }

  .combine-inputs {
    gap: 8px;
  }

  /* Footer links - larger touch targets on mobile */
  .seo-footer-links {
    gap: 2px 8px;
  }

  .seo-footer-links a {
    padding: 12px 6px;
    font-size: 0.9rem;
  }

  .seo-footer-international p {
    line-height: 2.2;
  }

  .seo-footer-international a {
    padding: 12px 8px;
  }
}

/* Legacy - keep for compatibility */
.homepage-content-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* Value Proposition */
.value-prop {
  text-align: center;
  margin-bottom: 48px;
}

.value-prop h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.value-prop p {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Use Cases Grid */
.use-cases {
  margin-bottom: 48px;
}

.use-cases h3 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  text-align: center;
}

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.use-case-card {
  display: block;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.15s var(--ease-standard);
}

.use-case-card:hover {
  border-color: var(--primary);
  background: var(--card-hover);
}

.use-case-card .icon {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.use-case-card .title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.use-case-card .desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* FAQ Section */
.faq-section {
  margin-bottom: 24px;
}

.faq-section h3 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  text-align: center;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}

.faq-question {
  width: 100%;
  padding: 16px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}

.faq-question:hover {
  background: var(--card-hover);
}

.faq-question .toggle {
  font-size: 1.2rem;
  color: var(--text-muted);
  transition: transform 0.2s var(--ease-standard);
}

.faq-item.open .faq-question .toggle {
  transform: rotate(45deg);
}

.faq-answer {
  display: none;
  padding: 0 16px 16px;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.faq-item.open .faq-answer {
  display: block;
}

/* ============================================
   SEO FOOTER
   ============================================ */
.seo-footer {
  background: #f5f5f5;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 32px 20px 24px;
  margin-top: auto;
}

.seo-footer-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.seo-footer-section {
  margin-bottom: 24px;
}

.seo-footer-section:last-child {
  margin-bottom: 0;
}

.seo-footer-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.seo-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.seo-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s;
  padding: 10px 4px;
  display: inline-block;
}

.seo-footer-links a:hover {
  color: var(--primary);
}

.seo-footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 24px;
}

.seo-footer-bottom p {
  font-size: 0.75rem;
  color: var(--text-dimmed);
}

.seo-footer-international {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 24px;
}

.seo-footer-international p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.8;
}

.international-label {
  font-weight: 600;
  color: var(--text);
  margin-right: 4px;
}

.seo-footer-international a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
  padding: 10px 6px;
  display: inline-block;
}

.seo-footer-international a:hover {
  color: var(--primary);
}

/* ============================================
   MOBILE RESPONSIVE - Small screens
   ============================================ */
@media (max-width: 375px) {
  .top-bar {
    padding: 12px 16px;
  }

  .empty-title {
    font-size: 1.3rem;
  }

  .empty-subtitle {
    font-size: 0.9rem;
    max-width: 260px;
  }

  .upload-cta {
    padding: 12px 24px;
    font-size: 0.95rem;
  }

  .controls {
    padding: 12px;
  }

  /* Keep the prompt + send button glued to the bottom edge on mobile while the
   * editor is active, so the send button stays in reach when the soft keyboard
   * opens. iOS Safari shrinks the visualViewport, which pushes statically-
   * positioned controls below the fold; sticky pins them to the visible bottom
   * of the scroll container instead. */
  .app.has-image .controls {
    position: sticky;
    bottom: 0;
    z-index: 90;
    background: var(--surface-elevated);
  }

  /* When the prompt is focused, ensure the input scrolls into view above any
   * autocomplete bar. scroll-margin gives a little headroom so the textarea
   * doesn't sit flush against the keyboard. */
  .app.has-image .prompt-input {
    scroll-margin-bottom: 80px;
  }
}

/* ============================================
   TABLET/DESKTOP RESPONSIVE
   ============================================ */
@media (min-width: 600px) {
  .homepage-content {
    padding: 0; /* Sections handle their own padding */
  }

  .value-prop h2 {
    font-size: 1.75rem;
  }

  .use-cases-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .faq-list {
    gap: 8px;
  }
}

/* Tablet: slightly larger thumbnails */
@media (min-width: 768px) {
  .history-item {
    width: 56px;
    height: 56px;
  }

  .history-item .step-num {
    font-size: 9px;
    padding: 2px 6px;
  }

  .seo-footer {
    padding: 40px 24px 32px;
  }

  .seo-footer-sections {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }

  .seo-footer-section {
    margin-bottom: 0;
  }

  .seo-footer-links {
    flex-direction: column;
    gap: 8px;
  }
}

/* ============================================
   DESKTOP - Centered, stacked layout
   ============================================ */
@media (min-width: 900px) {
  .app {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
  }

  /* Top bar */
  .top-bar {
    position: relative;
    padding: 18px 32px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-subtle);
  }

  /* Override absolute positioning on desktop for empty state */
  .app:not(.has-image) .top-bar {
    position: relative;
    left: auto;
    right: auto;
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .logo {
    font-size: 1.1rem;
  }

  /* Image area - centered, constrained */
  .image-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0; /* Reset: header is position:relative on desktop, in flow */
    min-height: 0;
  }

  /* Homepage: content-sized, no extra padding (header is in-flow on desktop) */
  .app:not(.has-image) .image-area {
    flex: none;
    padding-top: 16px;
  }

  .rate-limit-banner.visible ~ .image-area {
    padding-top: 80px;
  }

  .image-container img {
    border-radius: 12px;
  }

  /* Empty state */
  .empty-icon {
    transform: scale(1.15);
  }

  .empty-title {
    font-size: 2rem;
  }

  .empty-subtitle {
    font-size: 1.05rem;
    max-width: 400px;
  }

  .upload-cta {
    padding: 16px 32px;
    font-size: 1.05rem;
  }

  /* History strip - centered inline */
  .history-strip {
    padding: 12px 0;
  }

  .history-strip .history-items {
    justify-content: center;
  }

  .history-item {
    width: 60px;
    height: 60px;
  }

  /* Controls - centered below image */
  .controls {
    padding: 16px 0 24px;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }

  .controls.hidden {
    display: none;
  }

  /* Prompt - clean, full width */
  .prompt-input {
    font-size: 1rem;
    padding: 14px 18px;
    min-height: 52px;
  }

  /* Edit actions on desktop - keep column layout */
  .edit-actions {
    gap: 12px;
  }

  .edit-btn {
    flex: 0 0 auto;
    min-width: 140px;
  }

  /* result-actions removed — see .result-toolbar in components.css */

  /* Compare hint */
  .compare-hint {
    bottom: auto;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Hover states */
  .credits-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 20px var(--glow);
  }

  .user-btn:hover {
    border-color: var(--primary);
    color: var(--text);
  }

  .history-item:hover:not(.active) {
    transform: scale(1.08);
    border-color: var(--primary);
  }
}

/* ============================================
   LARGER SCREENS
   ============================================ */
@media (min-width: 1200px) {
  .app:not(.has-image) {
    max-width: 1000px;
  }

  .app:not(.has-image) .controls {
    max-width: 650px;
  }
}

/* ============================================
   DESKTOP SIDE-BY-SIDE EDITOR
   Image on left, controls on right, no scrolling
   ============================================ */
@media (min-width: 1024px) {
  .app.has-image {
    display: grid;
    grid-template-columns: 1fr 440px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header"
      "image sidebar"
      "ad ad";
    max-width: none;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
  }

  .app.has-image .top-bar {
    grid-area: header;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
  }

  .app.has-image .image-area {
    grid-area: image;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg);
    min-height: 0;
    overflow: hidden;
  }

  .app.has-image .image-container {
    max-width: 100%;
    max-height: 100%;
  }

  .app.has-image .image-container img {
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* Right sidebar with controls */
  .app.has-image .controls {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--bg);
    border-left: 1px solid var(--border);
    border-top: none;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: none;
    width: 100%;
    /* Hide scrollbar unless actually scrolling */
    scrollbar-gutter: stable;
  }

  /* Hide scrollbar when not needed (content fits) */
  .app.has-image .controls::-webkit-scrollbar {
    width: 6px;
  }

  .app.has-image .controls::-webkit-scrollbar-track {
    background: transparent;
  }

  .app.has-image .controls::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }

  .app.has-image .controls::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
  }

  .app.has-image .controls.hidden {
    display: none;
  }

  /* Edit card fills sidebar natively — no card-in-card */
  .app.has-image .edit-card {
    background: var(--bg);
    border-radius: 0;
    padding: 20px;
    border: none;
    box-shadow: none;
  }

  .app.has-image .edit-card:focus-within {
    border: none;
    box-shadow: none;
  }

  .app.has-image .edit-card.attention {
    animation: none;
  }

  .app.has-image .edit-actions {
    max-width: none;
  }

  .app.has-image .prompt-input {
    font-size: 0.95rem;
    min-height: 96px;
  }

  /* Quality toggle + edit button in sidebar */
  .app.has-image .edit-card-footer {
    flex-direction: column;
    gap: 14px;
  }

  .app.has-image .footer-left {
    width: 100%;
  }

  /* The new same-row layout (.controls-row holds both Mode + Versions)
     wants content-width pills, not stretched ones. */
  .app.has-image .quality-toggle { width: auto; }

  .app.has-image .quality-pill { flex: 1; }

  .app.has-image .edit-btn {
    width: 100%;
    padding: 16px 28px;
    font-size: 1.05rem;
    min-height: 52px;
    border-radius: 14px;
  }

  /* Sticky submit button - always visible at bottom of sidebar */
  .app.has-image .edit-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .app.has-image .edit-card-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    padding-top: 16px;
    margin-top: auto;
    z-index: 2;
  }

  .app.has-image .edit-card {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .app.has-image .edit-card-footer {
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Post-edit sidebar: hide reference section, streamline layout */
  body.has-result .app.has-image .reference-photo-section {
    display: none;
  }

  /* Countdown caption below button */
  .app.has-image .edit-cost-caption.free {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 6px;
  }

  /* History strip in sidebar - polished timeline */
  .app.has-image .history-strip {
    margin: 16px 0;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border);
  }

  .app.has-image .history-strip .history-items {
    justify-content: flex-start;
  }

  .app.has-image .history-item {
    width: 52px;
    height: 52px;
  }

  /* Reference image button */
  .app.has-image .reference-btn {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
  }
}

/* ============================================
   MOBILE UI/UX PARITY
   Full-screen app-like experience
   ============================================ */

/* Viewport lock - prevents browser chrome jank (only when editing) */
html:has(.app.has-image),
body:has(.app.has-image) {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
  /* Note: touch-action: none removed - it blocks button clicks */
}

.app.has-image {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  height: -webkit-fill-available;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Only disable touch gestures on the image area, not buttons */
.app.has-image .image-container {
  touch-action: pan-y pinch-zoom;
}

/* Prevent any horizontal overflow on mobile */
@media (max-width: 768px) {
  .app.has-image,
  .app.has-image * {
    max-width: 100vw;
  }

  /* Editor nav stays pinned so the buy-path CTA + back button remain in
     reach as the user scrolls through controls. Translucent so the image
     underneath stays visible through the bar — matches the homepage
     fixed-nav treatment. */
  .app.has-image .top-bar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(250, 250, 251, 0.85);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border-bottom: 1px solid var(--hairline);
  }

  .app.has-image .image-container {
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* Controls need visible overflow for banners, but prevent horizontal scroll */
  .app.has-image .controls {
    overflow-x: hidden;
    overflow-y: visible;
    overscroll-behavior: none;
  }

  /* Allow vertical touch on controls for scrolling if needed */
  .app.has-image .controls {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  /* Allow touch on image for tap interactions */
  .app.has-image .image-container {
    touch-action: manipulation;
  }
}

/* ============================================
   MOBILE TOUCH TARGETS (768px and below)
   All interactive elements 44px+ minimum
   ============================================ */
@media (max-width: 768px) {
  /* Header buttons */
  .credits-btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  .user-btn {
    width: 44px;
    height: 44px;
  }

  /* Header credits badge - mobile touch targets */
  .header-credits {
    min-height: 44px;
    padding: 10px 14px;
  }

  /* Header anonymous CTA - mobile adjustments */
  .header-anon-cta {
    gap: 8px;
  }

  .header-pricing-link {
    /* Compact buy-path CTA pinned to mobile nav. Sized to match the
       Animate pill (36px) so the bar reads as a single chip row. */
    padding: 8px 10px;
    min-height: 36px;
    font-size: 13px;
    color: var(--tone-violet-700);
    background: var(--tone-violet-50);
    border: 1px solid color-mix(in srgb, var(--tone-violet) 18%, transparent);
  }
  .header-pricing-link:hover,
  .header-pricing-link:active {
    background: var(--tone-violet-100);
    color: var(--tone-violet-700);
  }

  .header-signin {
    padding: 10px 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .header-try-free {
    padding: 10px 14px;
    min-height: 44px;
    gap: 6px;
  }

  /* Hide the header upload CTA on mobile homepage — the hero "Drop your photo"
     card is right below it and serves the same purpose. Showing both forces
     the header to overflow at 375px (button clipped at viewport edge).
     Revealed once the user is in editor state, so it can act as a re-upload. */
  .app:not(.has-image) .header-try-free {
    display: none;
  }

  /* Nav CTA - hide on mobile homepage (redundant with hero CTA) */
  /* Exception: show when user has free edit (green "Upload — Free" button) */
  .app:not(.has-image) .nav-cta:not(.has-free) {
    display: none;
  }

  /* Nav CTA - touch friendly (when visible in other states) */
  .nav-cta {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 0.9rem;
  }

  /* Mobile back button - show when editing, hide logo */
  .app.has-image .back-btn {
    display: flex;
    min-height: 44px;
  }

  .app.has-image .logo {
    display: none;
  }

  /* User dropdown - use bottom sheet on mobile instead */
  .user-dropdown {
    display: none !important;
  }

  /* Override user button to open bottom sheet on mobile */
  .user-btn {
    /* JS handles opening bottom sheet on mobile */
  }

  /* Quality pills */
  .quality-pill {
    min-height: 44px;
    padding: 8px 12px;
  }

  /* Edit button */
  .edit-btn {
    min-height: 48px;
    padding: 14px 24px;
  }

  /* Change photo button — min 44px tap target (Apple HIG). */
  .change-photo-btn {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.78rem;
    border-radius: 12px;
  }

  /* Clear marker button */
  .clear-marker-btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* Hide compare slider on mobile - doesn't work well with touch */
  .compare-slider-container,
  .compare-float-btn {
    display: none !important;
  }

  /* Hide Upload button when editing on mobile */
  .app.has-image .nav-cta {
    display: none !important;
  }

  /* Default history strip */
  .history-strip {
    padding: 4px 0;
  }

  .history-item {
    width: 40px;
    height: 40px;
    border-radius: 8px;
  }

  .history-scroll {
    padding: 2px 12px;
    gap: 6px;
  }

}

/* ============================================
   HISTORY STRIP - Scroll UX enhancements
   ============================================ */
.history-strip {
  position: relative;
}

.history-scroll {
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  padding: 4px 16px;
  /* Enable horizontal touch scrolling, prevent accidental vertical scroll */
  touch-action: pan-x;
  cursor: grab;
}

.history-scroll:active {
  cursor: grabbing;
}

.history-item {
  scroll-snap-align: center;
}

/* Fade edge indicators for scroll */
.history-strip::before,
.history-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s;
}

.history-strip::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}

.history-strip::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}

.history-strip.can-scroll-left::before,
.history-strip.can-scroll-right::after {
  opacity: 1;
}

/* ============================================
   MOBILE IMAGE OPTIMIZATION
   Maximize image space, compact controls
   ============================================ */
@media (max-width: 768px) {
  /* Image takes priority - reduce padding */
  .image-container {
    padding: 4px;
  }

  /* More compact controls on mobile - maximize image space */
  .app.has-image .controls {
    padding: 6px 10px;
    padding-bottom: calc(6px + var(--safe-bottom));
    gap: 4px;
  }

  /* Prompt input - must be 16px+ to prevent iOS zoom */
  .prompt-input {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 16px;
  }

  /* Compact action row - put quality and button on same line */
  .action-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .quality-toggle {
    flex-shrink: 0;
  }

  .edit-btn {
    flex: 1;
    padding: 10px 16px;
    font-size: 0.9rem;
    min-height: 44px;
  }

  /* ============================================
     MOBILE RESULT STATE - Maximum image focus
     ============================================ */
  body.has-result .image-container {
    padding: 2px;
  }

  /* In result state, photo strip is hidden — reclaim that space for the image */
  body.has-result .app.has-image .image-container {
    max-height: 100%;
  }

  /* Ultra-compact controls when result is showing */
  body.has-result .app.has-image .controls {
    padding: 6px 10px;
    padding-bottom: calc(6px + var(--safe-bottom));
    gap: 4px;
  }

  /* Prompt input after result - still usable for continued editing */
  body.has-result .prompt-input {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 16px;
  }

  /* Compact action row after result */
  body.has-result .action-row {
    gap: 6px;
  }

  body.has-result .quality-pill {
    padding: 6px 10px;
    font-size: 0.7rem;
    min-height: 34px;
  }

  body.has-result .edit-btn {
    padding: 8px 14px;
    font-size: 0.85rem;
    min-height: 38px;
  }

  /* Result toolbar compact on mobile */
  body.has-result .result-toolbar {
    gap: 8px;
    padding: 6px 0 8px;
  }

  /* ============================================
     KEYBOARD-OPEN: Compact editor for mobile keyboard
     Shows image thumbnail + prompt + edit button
     ============================================ */

  /* Restructure grid: thumbnail + controls only, minimal waste */
  .keyboard-open .app.has-image {
    grid-template-rows: 0 80px 1fr 0;
  }

  /* Collapse header area elements */
  .keyboard-open .top-bar,
  .keyboard-open .error-toast,
  .keyboard-open .toast-container,
  .keyboard-open .drag-overlay {
    display: none !important;
  }

  /* Image area: compact thumbnail strip.
     No transition: a max-height animation here used to overlap iOS's keyboard
     slide-in (also ~250ms) and the running layout pass produced visualViewport
     resize fluctuations that landed back in our handler — sessions 019dff69 /
     019dff7a thrashed 360x658 ↔ 364 ↔ 428 across a single typing session.
     The surrounding keyboard-open rules (top-bar/photo-strip/etc) snap with
     `display: none`, so animating just the image-area was visually
     inconsistent anyway. Snap instantly. */
  .keyboard-open .image-area {
    max-height: 80px;
    min-height: 0;
    overflow: hidden;
    padding: 4px 8px 0 !important;
    align-items: center;
    justify-content: center;
  }

  /* Image container: fixed height thumbnail */
  .keyboard-open .image-container {
    max-height: 72px !important;
    height: 72px !important;
    overflow: hidden;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  .keyboard-open .image-wrapper {
    height: 68px !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }

  .keyboard-open .image-container img,
  .keyboard-open #currentImage {
    max-height: 68px !important;
    height: 68px !important;
    width: auto !important;
    object-fit: contain;
    border-radius: 8px;
    cursor: zoom-in;
  }

  /* Expand icon hint on keyboard-open thumbnail */
  .keyboard-open .image-wrapper {
    position: relative;
  }
  .keyboard-open .image-wrapper::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    pointer-events: none;
  }

  /* Hide non-essential elements when keyboard is open */
  .keyboard-open .photo-strip,
  .keyboard-open .rate-limit-banner,
  .keyboard-open .reference-photo-section,
  .keyboard-open .quality-toggle-wrapper,
  .keyboard-open .edit-cost-caption,
  .keyboard-open .pro-upsell,
  .keyboard-open .result-toolbar,
  .keyboard-open .suggestion-chips,
  .keyboard-open .history-strip,
  .keyboard-open .custom-prompt-section .prompt-char-count {
    display: none !important;
  }

  /* Edit card: compact padding */
  .keyboard-open .edit-card {
    padding: 8px 12px;
    border: none;
    box-shadow: none;
    background: transparent;
  }

  /* Remove focus-within glow when keyboard is open (saves visual space) */
  .keyboard-open .edit-card:focus-within {
    border-color: transparent;
    box-shadow: none;
  }

  /* Prompt: clearly visible, 2 rows minimum */
  .keyboard-open .prompt-input {
    min-height: 48px;
    max-height: 80px;
    font-size: 16px;
    padding: 10px 12px;
    border-radius: 10px;
  }

  /* Edit card footer: pinned to the bottom of the (now-keyboard-shortened)
     layout viewport. With `interactive-widget=resizes-content` in the viewport
     meta the layout viewport itself shrinks on keyboard open, so `bottom: 0`
     sits flush against the top of the keyboard — no JS-driven transform
     needed. (Pre-fix the transform was animated against a live
     --keyboard-inset that thrashed during iOS keyboard slide-in.) */
  .keyboard-open .edit-card-footer {
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 8px 12px calc(8px + var(--safe-bottom));
    background: var(--bg);
    border-top: 1px solid var(--border);
  }

  /* Edit button: clearly visible and tappable */
  .keyboard-open .edit-btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.95rem;
  }

  /* Controls: compact, leaving room for the pinned footer at the bottom */
  .keyboard-open .controls {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 10px !important;
    padding-bottom: calc(64px + var(--safe-bottom)) !important;
    gap: 2px !important;
  }
}

@media (max-width: 768px) and (max-height: 750px) {
  /* Extra small screens - keep prompt but make more compact */
  body.has-result .prompt-input {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 16px; /* Must stay 16px+ to prevent iOS zoom */
  }

  /* Keep action row but make it minimal */
  body.has-result .action-row {
    gap: 4px;
  }

  body.has-result .quality-toggle-wrapper {
    display: none; /* Hide quality on very small screens */
  }

  body.has-result .reference-btn {
    padding: 4px 8px;
    min-height: 32px;
  }

  body.has-result .reference-btn-text {
    display: none; /* Just show icon on tiny screens */
  }

  /* Compact controls */
  body.has-result .controls {
    padding: 4px 8px;
    padding-bottom: calc(4px + var(--safe-bottom));
  }

  /* Smaller history strip */
  .history-strip {
    padding: 6px 0;
    margin: 8px 0;
  }

  .history-item {
    width: 48px;
    height: 48px;
  }

  /* Compact quality toggle */
  .quality-toggle {
    gap: 4px;
  }

  .quality-pill {
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  /* Hide less important elements when space is tight */
  .edit-card-footer .footer-right {
    display: none;
  }
}

/* Extra compact for very small phones */
@media (max-width: 380px) {
  .prompt-input {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 16px; /* Must stay 16px+ to prevent iOS zoom */
  }

  .edit-btn {
    padding: 10px 16px;
  }
}

/* ============================================
   VERY SMALL SCREENS (480px and below)
   Extra compact for small phones
   ============================================ */
@media (max-width: 480px) {
  .reference-card-hint {
    display: none;
  }
}

/* ============================================
   SHORT SCREENS (500px height and below)
   Compact UI when height is limited
   ============================================ */
@media (max-height: 500px) {
  .history-strip {
    padding: 8px 0;
  }

  .history-item {
    width: 48px;
    height: 48px;
  }
}

/* ============================================
   MOBILE IMAGE OPTIMIZATION
   Ensure images fill maximum available space
   ============================================ */
@media (max-width: 768px) {
  /* Image container stretches to fill image-area height
     (overrides parent's align-items: center which would shrink-wrap) */
  .image-container {
    flex: 1;
    min-height: 0;
    align-self: stretch;
  }

  /* Image wrapper fills container fully */
  .image-wrapper {
    flex: 1;
    width: 100%;
    min-height: 0;
    align-self: stretch;
  }

  /* Main image fills available space */
  #currentImage {
    transition: opacity 0.3s var(--ease-standard);
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }

  /* ============================================
     MOBILE IMAGE AREA LAYOUT FIX
     Fix excessive spacing and layout issues
     ============================================ */

  /* When image is loaded, use top-aligned layout instead of centered */
  .app.has-image .image-area {
    justify-content: flex-start;
    padding: 8px 8px 0;
  }

  /* Image container takes available space but doesn't force centering */
  .app.has-image .image-container {
    flex: 1 1 auto;
    max-height: calc(100% - 80px); /* Leave room for photo strip */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Photo strip - compact and aligned to bottom of image area */
  .app.has-image .photo-strip {
    flex-shrink: 0;
    margin-top: auto;
  }

  /* When two photos, tighten up the layout */
  .app.has-image .photo-strip.two-photos {
    padding: 8px 12px 4px;
  }

  /* Smooth transitions for layout changes (photo-strip, result-state).
     Note: explicitly suppressed below when `.keyboard-open` is active —
     animating max-height/padding overlapped iOS keyboard slide-in (~250ms)
     and the running layout pass produced visualViewport resize fluctuations
     that landed back in the JS handler (sessions 019dff69 / 019dff7a thrash). */
  .image-area {
    transition: max-height 0.15s var(--ease-standard), padding 0.15s var(--ease-standard);
  }

  .keyboard-open .image-area,
  .keyboard-open .controls {
    transition: none !important;
  }

  .controls {
    transition: transform 0.15s var(--ease-standard), box-shadow 0.15s var(--ease-standard);
  }

  /* Reference card smooth show/hide - note: can't animate display:none,
     so we rely on the JS to add/remove .visible class for entrance animation */
  .reference-card.visible {
    animation: slideIn 0.15s var(--ease-out);
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ============================================
   CREDIT BADGE - Compact pill in nav
   ============================================ */
.credit-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-subtle);
  border: none;
  color: var(--text);
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}

.credit-badge:hover {
  background: var(--glow);
}

.credit-badge:active {
  transform: scale(0.96);
}

.credit-badge .credit-count {
  font-weight: 700;
  color: var(--primary);
}

.credit-badge .credit-label {
  color: var(--text-muted);
  font-weight: 500;
}

/* Credit badge states */
.credit-badge.plenty {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}

.credit-badge.low {
  background: transparent;
  border-color: #f59e0b;
  color: #d97706;
}

.credit-badge.low .credit-icon {
  color: #f59e0b;
  opacity: 1;
}

.credit-badge.critical {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #92400e;
  animation: subtleGlow 2s var(--ease-in-out) infinite;
}

.credit-badge.critical .credit-icon {
  color: #f59e0b;
  opacity: 1;
}

.credit-badge.zero {
  background: #fef2f2;
  border-color: #ef4444;
  color: #dc2626;
  animation: subtlePulse 2s var(--ease-in-out) infinite;
}

.credit-badge.zero .credit-icon {
  color: #ef4444;
  opacity: 1;
}

.credit-badge.subscriber {
  background: var(--glow);
  border-color: var(--primary);
  color: var(--primary);
}

.credit-badge.subscriber .credit-icon {
  color: var(--primary);
  opacity: 1;
}

/* Gift state - makes free edit feel special */
.credit-badge.has-gift {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #10b981;
  color: #047857;
}

.credit-badge.has-gift .credit-count {
  color: #059669;
}

.credit-badge.has-gift .credit-label {
  color: #047857;
}

.credit-badge.has-gift::before {
  content: '🎁';
  margin-right: 4px;
  font-size: 0.9em;
}

/* Attention animation for recovery after modal dismiss */
.credit-badge.attention {
  animation: badgeAttention 0.5s var(--ease-standard) 3;
}

@keyframes subtleGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
  50% {
    box-shadow: 0 0 8px 2px rgba(245, 158, 11, 0.25);
  }
}

@keyframes subtlePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.2);
  }
}

@keyframes badgeAttention {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.2);
  }
}

/* Credit badge always visible - important for conversion */
.credit-badge {
  display: flex;
}

/* Make zero state more prominent for conversion */
.credit-badge.zero {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1.5px solid #ef4444;
  color: #dc2626;
  animation: subtlePulse 2s var(--ease-in-out) infinite;
  font-weight: 600;
}

.credit-badge.zero .credit-count,
.credit-badge.zero .credit-label {
  color: #dc2626;
}

/* NAV CTA state styles - removed in nav redesign */

/* ============================================
   FULLSCREEN IMAGE LIGHTBOX (Mobile)
   Tap image to expand fullscreen
   ============================================ */
.image-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s var(--ease-standard);
}

.image-lightbox.visible {
  display: flex;
  opacity: 1;
}

.image-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
  /* Pinch-to-zoom and swipe-dismiss: GPU-accelerated transforms */
  transform-origin: center center;
  will-change: transform;
  touch-action: none;
}

/* Smooth spring-back animation when releasing gestures */
.image-lightbox img.lightbox-animating {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* While actively dragging/pinching — no transition delay */
.image-lightbox img.lightbox-dragging {
  transition: none;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease-standard);
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-share {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: none; /* hidden by default; shown via JS when Web Share API is available */
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease-standard);
}

.lightbox-share.visible {
  display: flex;
}

.lightbox-share:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Tap hint on mobile image — any loaded image is tappable */
@media (max-width: 768px) {
  .has-image .image-container .image-wrapper {
    cursor: zoom-in;
  }
}

/* Lightbox zoom hint — one-time per session, fades in then out */
.lightbox-zoom-hint {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 16px;
  border-radius: 20px;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 11010;
}

.lightbox-zoom-hint.visible {
  opacity: 1;
}

/* ============================================
   HOMEPAGE V2 - Editorial Design System
   ============================================ */

/* === SOCIAL PROOF BAND === */

/* === CAPABILITIES SECTION === */
.capabilities-section {
  /* No padding - articles handle their own */
}

.capability {
  padding: 64px 24px;
  background: var(--bg);
  overflow: hidden;
}

.capability--alt {
  background: var(--bg-subtle);
}

.capability[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.capability[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

.capability[data-animate] .capability-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.capability[data-animate] .capability-visual {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.capability[data-animate].visible .capability-content,
.capability[data-animate].visible .capability-visual {
  opacity: 1;
  transform: translateY(0);
}

.capability-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.capability-inner--reverse {
  grid-template-columns: 1.1fr 1fr;
}

.capability-inner--reverse .capability-content {
  order: 2;
}

.capability-inner--reverse .capability-visual {
  order: 1;
}

.capability-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.capability-number {
  font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.1em;
}

.capability-headline {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
}

.capability-description {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  max-width: 400px;
}

.capability-prompt {
  display: inline-block;
  font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 6px;
  width: fit-content;
}

/* Prompt chips */
.prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.prompt-chip {
  font-size: 0.8rem;
  color: var(--text-muted);
  background: white;
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 100px;
  transition: border-color 0.2s, color 0.2s;
}

.prompt-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Combine equation */
.combine-equation {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.eq-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: white;
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 8px;
}

.eq-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary);
  background: rgba(0, 0, 0, 0.07);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eq-op {
  color: var(--text-dimmed);
  font-weight: 500;
  font-size: 1.1rem;
}

.eq-result {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(26, 26, 46, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 8px 14px;
  border-radius: 8px;
}

.eq-result svg {
  stroke: var(--primary);
}

.eq-item {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.eq-item:hover {
  transform: translateY(-2px);
}

.eq-result {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s var(--ease-standard);
}

.eq-result:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
}

/* === BEFORE/AFTER VISUALS === */
.capability-visual {
  width: 100%;
}

.ba-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ba-figure {
  margin: 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s var(--ease-standard);
}

.ba-figure:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(var(--primary-rgb), 0.15);
}

.ba-figure img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.ba-figure figcaption {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.65);
  color: white;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Combine grid */
.combine-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
}

.combine-input {
  margin: 0;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.combine-input img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.combine-input figcaption,
.combine-result figcaption {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.65);
  color: white;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.combine-result {
  grid-column: 1 / -1;
  margin: 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}

.combine-result img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

/* === CAPABILITIES MOBILE === */
@media (max-width: 800px) {
  .capability {
    padding: 48px 20px;
  }

  .capability-inner,
  .capability-inner--reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .capability-inner--reverse .capability-content {
    order: 1;
  }

  .capability-inner--reverse .capability-visual {
    order: 2;
  }

  .capability-headline {
    font-size: 2rem;
  }

  .capability-description {
    font-size: 1rem;
  }
}

/* ============================================
   PRICING V9 - Premium Conversion-Optimized
   ============================================ */
.pricing-v9 {
  padding: 80px 24px 100px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--tone-violet-50) 100%);
  position: relative;
  overflow: hidden;
  /* Clears the sticky homepage top-bar (~70px) + iOS safe area, with
     a small buffer so the eyebrow/title aren't kissing the nav border. */
  scroll-margin-top: calc(80px + var(--safe-top, 0px));
}

.pricing-v9::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}

.pricing-v9-inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.pricing-v9-header {
  text-align: center;
  margin-bottom: 40px;
}

.pricing-v9-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tone-violet-700);
  background: var(--tone-violet-50);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  margin: 0 0 14px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pricing-v9-eyebrow::before,
.pricing-v9-eyebrow::after {
  display: none;
}

.pricing-v9-title {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 12px 0;
}

.pricing-v9-lead {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0 auto;
  max-width: 380px;
  line-height: 1.55;
}

.pricing-v9-billing-toggle {
  border: 1px solid var(--hairline);
  background: var(--card);
  border-radius: var(--r-pill);
  padding: 4px;
  display: flex;
  width: fit-content;
  margin: 0 auto 40px;
}

.pricing-v9-billing-option {
  padding: 9px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dimmed);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  -webkit-tap-highlight-color: transparent;
}

.pricing-v9-billing-option--active {
  background: var(--tone-violet);
  color: white;
  box-shadow: var(--shadow-tonal-violet);
}

.pricing-v9-save-badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--tone-emerald-50);
  color: var(--tone-emerald-700);
  padding: 3px 7px;
  border-radius: var(--r-pill);
}

.pricing-v9-billing-option--active .pricing-v9-save-badge {
  background: rgba(255, 255, 255, 0.22);
  color: white;
}

/* Social Proof */
.pricing-v9-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}

.pricing-v9-avatars {
  display: flex;
  margin-right: 4px;
}

.avatar-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid white;
  margin-left: -8px;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
}

.avatar-dot:first-child {
  margin-left: 0;
}

.avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid white;
  margin-left: -10px;
  object-fit: cover;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.avatar-img:first-child {
  margin-left: 0;
}

.pricing-v9-social-text {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.pricing-v9-social-text strong {
  color: var(--text);
  font-weight: 600;
}

/* Pricing Cards Grid */
.pricing-v9-cards {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
  align-items: start;
}

/* Individual Card */
.pricing-v9-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  background: var(--card);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}

.pricing-v9-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--tone-violet) 28%, transparent);
}

.pricing-v9-card:active {
  transform: scale(0.98);
  transition-duration: 0.05s;
}

/* Hero Card (Standard) — full hero recipe mirrored from .bs-tier--selected:
   violet rim border, warm violet-to-card gradient wash, two-layer shadow
   stack (elevation + violet tonal glow), and a baseline -2px lift so the
   card sits visibly above its siblings before any hover. */
.pricing-v9-card--hero {
  padding: 40px 28px;
  border-color: var(--tone-violet);
  background: linear-gradient(180deg, var(--tone-violet-50) 0%, var(--card) 60%);
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  transform: translateY(-2px);
  z-index: 2;
}

.pricing-v9-card--hero:hover {
  transform: translateY(-5px);
  border-color: var(--tone-violet);
  box-shadow: var(--shadow-lg), 0 12px 36px rgba(124, 92, 252, 0.22);
}

.pricing-v9-card--hero .pricing-v9-card-glow {
  display: none;
}

/* Badge — pinned to the hero card (Standard) on the homepage.
   Matches the modal's .paywall-tier-badge silhouette for cross-surface
   continuity. Visual hero treatment + badge stay on the same tier here. */
.pricing-v9-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--tone-violet);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(124, 92, 252, 0.30);
  z-index: 2;
}

/* Card Header */
.pricing-v9-card-header {
  margin-bottom: 20px;
}

.pricing-v9-tier-name {
  display: block;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}

.pricing-v9-card--hero .pricing-v9-tier-name {
  font-size: 1.25rem;
  color: var(--tone-violet-700);
}

.pricing-v9-tier-desc {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Credits - Hero Metric */
.pricing-v9-card-credits {
  margin-bottom: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pricing-v9-credits-num {
  display: block;
  font-family: var(--font-display), serif;
  font-size: 2.8rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.03em;
}

.pricing-v9-card--hero .pricing-v9-credits-num {
  font-size: 3.2rem;
  color: var(--tone-violet-700);
}

.pricing-v9-credits-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

/* Price */
.pricing-v9-card-price {
  margin-bottom: 20px;
}

.pricing-v9-price {
  display: block;
  font-family: var(--font-display), serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.pricing-v9-card--hero .pricing-v9-price {
  font-size: 1.3rem;
  color: var(--tone-violet-700);
}

.pricing-v9-per-edit {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 4px;
}

/* CTA Button — non-hero variant keeps the outline-to-dark-fill pattern but
   gains the same cubic-bezier easing as the tier card itself, plus a soft
   violet glow on hover so the fill feels intentional rather than abrupt. */
.pricing-v9-card-cta {
  display: block;
  padding: 13px 20px;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 12px;
  transition:
    background 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-v9-card:hover .pricing-v9-card-cta {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 6px 18px rgba(124, 92, 252, 0.14);
}

/* Hero CTA — full primary recipe shared with .bs-subscribe-cta: dark gradient
   fill, two-layer shadow (elevation + violet tonal glow), violet rim glow
   along the top edge via ::before, and a snappy lift+amplified glow on hover.
   The hosting card already provides the gradient background; this button is
   the call-to-action focal point of that card. */
.pricing-v9-card--hero .pricing-v9-card-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary) 0%, #2a2a4a 100%);
  color: white;
  border: none;
  padding: 14px 24px;
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  transition:
    background 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-v9-card--hero .pricing-v9-card-cta::before {
  /* Violet rim glow at the top edge — matches the homepage hero CTA. */
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(124, 92, 252, 0.4) 50%,
    transparent 100%);
  pointer-events: none;
}

.pricing-v9-card--hero:hover .pricing-v9-card-cta {
  background: linear-gradient(135deg, var(--primary-hover) 0%, #34345a 100%);
  box-shadow: var(--shadow-lg), 0 12px 36px rgba(124, 92, 252, 0.32);
  transform: translateY(-2px);
}

/* Benefits */
.pricing-v9-benefits {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 32px;
}

.pricing-v9-benefit {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.pricing-v9-benefit svg {
  width: 18px;
  height: 18px;
  stroke: var(--success);
  flex-shrink: 0;
}

/* One-time Alternative */
/* Homepage Pack Slider */
.pricing-v9-packs {
  max-width: 420px;
  margin: 0 auto 28px;
}

.pricing-v9-packs-divider {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 16px;
  position: relative;
}

.pricing-v9-packs-divider::before,
.pricing-v9-packs-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 120px);
  height: 1px;
  background: var(--border);
}

.pricing-v9-packs-divider::before { left: 0; }
.pricing-v9-packs-divider::after { right: 0; }

.pricing-v9-slider-wrap {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 24px;
}

.pricing-v9-slider-display {
  text-align: center;
  margin-bottom: 18px;
}

.pricing-v9-slider-top {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.pricing-v9-slider-count {
  font-family: var(--font-display), serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
  transition: opacity 0.15s;
}

.pricing-v9-slider-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
}

.pricing-v9-slider-bonus {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #d97706;
  background: rgba(217, 119, 6, 0.1);
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 2px;
  transition: opacity 0.2s;
}

.pricing-v9-slider-bonus.hidden {
  display: none;
}

.pricing-v9-slider-price {
  font-family: var(--font-display), serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  transition: opacity 0.15s;
}

.pricing-v9-slider-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
  transition: opacity 0.15s;
}

/* Reuse credits-slider styles (from components.css) for the light theme */
/* Reuse credits-slider styles (from components.css) but with violet thumb to
   match the rest of the site's slider palette. The earlier dark-primary thumb
   read as a pure black circle on the light pricing section — visually broken. */
.pricing-v9-slider-wrap .credits-slider {
  background: linear-gradient(
    to right,
    var(--tone-violet) 0%,
    var(--tone-violet) var(--slider-fill, 33%),
    rgba(0, 0, 0, 0.08) var(--slider-fill, 33%),
    rgba(0, 0, 0, 0.08) 100%
  );
}

.pricing-v9-slider-wrap .credits-slider::-webkit-slider-thumb {
  background: var(--card);
  border-color: var(--tone-violet);
  box-shadow:
    0 2px 8px rgba(124, 92, 252, 0.18),
    0 0 0 4px rgba(124, 92, 252, 0.06);
}

.pricing-v9-slider-wrap .credits-slider::-moz-range-thumb {
  background: var(--card);
  border-color: var(--tone-violet);
  box-shadow:
    0 2px 8px rgba(124, 92, 252, 0.18),
    0 0 0 4px rgba(124, 92, 252, 0.06);
}

.pricing-v9-slider-wrap .credits-slider-notches span {
  color: var(--text-muted);
}

.pricing-v9-slider-wrap .credits-slider-notches span.active {
  color: var(--tone-violet-700);
  font-weight: 700;
}

.pricing-v9-pack-btn {
  width: 100%;
  margin-top: 16px;
  padding: 14px 20px;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-v9-pack-btn:hover {
  border-color: rgba(var(--primary-rgb), 0.15);
  color: var(--text);
  background: rgba(var(--primary-rgb), 0.02);
}

.pricing-v9-pack-btn:active {
  transform: scale(0.98);
}

.pricing-v9-pack-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Free Tier */
.pricing-v9-free {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 28px;
  font-size: 0.78rem;
  color: var(--text-dimmed);
}

.pricing-v9-free svg {
  width: 14px;
  height: 14px;
  fill: var(--text-dimmed);
  flex-shrink: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .pricing-v9 {
    padding: 48px 20px 60px;
  }

  .pricing-v9-title {
    font-size: 2rem;
  }

  .pricing-v9-cards {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-v9-card--hero {
    order: -1;
    padding: 32px 24px;
  }

  .pricing-v9-card {
    padding: 24px 20px;
  }

  .pricing-v9-credits-num {
    font-size: 2.2rem;
  }

  .pricing-v9-card--hero .pricing-v9-credits-num {
    font-size: 2.6rem;
  }

  .pricing-v9-benefits {
    gap: 12px 16px;
  }

  .pricing-v9-packs {
    max-width: 100%;
  }
}

/* ============================================
   SMART SECTION - Dark Editorial
   ============================================ */
.smart-section {
  padding: 80px 24px;
  background: linear-gradient(165deg, #0d0d14 0%, #151520 50%, #1a1a28 100%);
  overflow: hidden;
}

.smart-section[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-standard), transform 0.8s var(--ease-standard);
}

.smart-section[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

.smart-section-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.smart-section-header {
  text-align: center;
  margin-bottom: 40px;
}

.smart-section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #4a4a66;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.25);
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.smart-section-title {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: white;
  margin: 0;
  line-height: 1.2;
}

/* Prompt block */
.smart-prompt-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 48px;
  padding: 0 16px;
}

.smart-prompt-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.5rem;
  color: #4a4a66;
  opacity: 0.4;
  line-height: 1;
}

.smart-prompt-text {
  font-size: 1.15rem;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  margin: 0;
  text-align: center;
}

/* Cascade v2 */
.smart-cascade-v2 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
  overflow-x: auto;
  padding: 8px 0;
  -webkit-overflow-scrolling: touch;
}

.cascade-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
}

.cascade-item img {
  width: 160px;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.cascade-item--final img {
  border: 2px solid rgba(167, 139, 250, 0.5);
  box-shadow: 0 8px 32px rgba(167, 139, 250, 0.3), 0 8px 24px rgba(0,0,0,0.4);
}

.cascade-item-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.4);
}

.cascade-item-ops {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: 160px;
}

.cascade-item-ops span {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.05);
  padding: 3px 7px;
  border-radius: 4px;
}

.cascade-arrow-v2 {
  color: rgba(167, 139, 250, 0.35);
  font-size: 1.4rem;
  margin-top: 50px;
  flex-shrink: 0;
}

/* Stats */
.smart-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px 32px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  max-width: 420px;
  margin: 0 auto;
}

.smart-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.smart-stat-num {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.smart-stat-label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.smart-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.08);
}

/* === SMART MOBILE === */
@media (max-width: 600px) {
  .smart-section {
    padding: 56px 16px;
  }

  .smart-section-title {
    font-size: 1.7rem;
  }

  .smart-prompt-text {
    font-size: 1rem;
  }

  .cascade-item img {
    width: 130px;
  }

  .smart-stats {
    gap: 20px;
    padding: 20px 24px;
  }

  .smart-stat-num {
    font-size: 1.6rem;
  }
}

/* ============================================
   FINAL CTA V2
   ============================================ */
.final-cta-v2 {
  text-align: center;
  padding: 72px 24px;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(26, 26, 46, 0.03) 50%, var(--bg-subtle) 100%);
}

.final-cta-v2-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 12px 0;
}

.final-cta-v2-lead {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0 0 28px 0;
}

.final-cta-v2-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.18),
    0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em;
  min-height: 52px;
}

.final-cta-v2-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s var(--ease-standard);
  pointer-events: none;
}

.final-cta-v2-btn:hover::after {
  left: 100%;
}

.final-cta-v2-btn:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.12);
}

.final-cta-v2-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (max-width: 500px) {
  .final-cta-v2 {
    padding: 56px 20px;
  }

  .final-cta-v2-title {
    font-size: 1.6rem;
  }
}

/* ============================================
   DASHBOARD — Logged-in user edits grid
   ============================================ */

.dashboard-section {
  padding: 24px 16px 80px;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Header --- */

.dash-header {
  margin-bottom: 20px;
}

.dash-header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.01em;
}

.dash-subtitle {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.dash-subtitle:empty {
  display: none;
}

.dash-subtitle a {
  color: var(--text, #1a1a2e);
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.2);
  text-underline-offset: 2px;
  font-weight: 500;
}

/* --- Search --- */

.dash-search {
  position: relative;
  margin-bottom: 16px;
}

.dash-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.dash-search-input {
  width: 100%;
  padding: 10px 36px 10px 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 0.875rem;
  outline: none;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

.dash-search-input:focus {
  border-color: var(--primary);
}

.dash-search-input::placeholder {
  color: var(--text-muted);
}

.dash-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-search-clear:hover {
  color: var(--text);
  background: var(--bg-subtle);
}

/* Search autocomplete */
.search-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 50;
  overflow: hidden;
}

.ac-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-item:hover {
  background: var(--bg-secondary);
}

.ac-item + .ac-item {
  border-top: 1px solid var(--border);
}

.dash-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.dash-toolbar .dash-search {
  flex: 1;
  margin-bottom: 0;
}
.dash-sort-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.dash-sort-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

/* Density toggle */
.dash-density-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.dash-density-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

/* Hide compact toggle on desktop — only useful on mobile */
@media (min-width: 900px) {
  .dash-density-btn { display: none; }
  .dash-grid-compact .dash-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 16px !important; }
  .dash-grid-compact .dash-card { border-radius: var(--radius-lg); }
  .dash-grid-compact .dash-card-overlay,
  .dash-grid-compact .dash-card-prompt,
  .dash-grid-compact .dash-card-date { display: flex !important; }
  .dash-grid-compact .dash-card-thumb { aspect-ratio: auto; }
}

/* Compact grid overrides */
.dash-grid-compact .dash-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

@media (min-width: 640px) {
  .dash-grid-compact .dash-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

.dash-grid-compact .dash-card {
  border-radius: 8px;
}

.dash-grid-compact .dash-card-overlay,
.dash-grid-compact .dash-card-prompt,
.dash-grid-compact .dash-card-date {
  display: none !important;
}

.dash-grid-compact .dash-card-thumb {
  aspect-ratio: 1;
}

/* Date filter chips */
.dash-filter-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.dash-filter-chip {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.dash-filter-chip:hover {
  border-color: var(--text, #1a1a2e);
  color: var(--text);
}
.dash-filter-chip.active {
  background: var(--text, #1a1a2e);
  border-color: var(--text, #1a1a2e);
  color: white;
}

.dash-no-results {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* --- Skeleton --- */

.dash-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.dash-skeleton-card {
  aspect-ratio: 1;
  border-radius: 12px;
  background: linear-gradient(110deg, var(--bg-subtle) 30%, var(--border) 50%, var(--bg-subtle) 70%);
  background-size: 200% 100%;
  animation: dash-shimmer 1.5s var(--ease-in-out) infinite;
}

@keyframes dash-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Empty state (first-time experience) --- */

.dash-empty {
  text-align: center;
  padding: 48px 20px 60px;
}

.dash-empty-hero {
  max-width: 380px;
  margin: 0 auto 28px;
}

.dash-empty-headline {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.dash-empty-sub {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin: 0;
  line-height: 1.5;
}

.dash-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--text, #1a1a2e);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  -webkit-tap-highlight-color: transparent;
}

.dash-empty-cta svg {
  flex-shrink: 0;
}

@media (hover: hover) {
  .dash-empty-cta:hover {
    background: #2d2d44;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
  }
}

.dash-empty-cta:active {
  transform: scale(0.97);
}

/* --- Date groups --- */

.dash-date-group {
  margin-bottom: 24px;
}

.dash-date-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 10px;
}

/* --- Edit grid --- */

.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 640px) {
  .dash-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .dash-skeleton-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 960px) {
  .dash-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .dash-skeleton-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Edit card (dashboard variant) --- */

.dash-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s var(--ease-standard), box-shadow 0.15s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}

.dash-card:active {
  transform: scale(0.97);
}

@media (hover: hover) {
  .dash-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  }
}

.dash-card-thumb {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg-subtle);
  overflow: hidden;
}

.dash-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s var(--ease-standard);
}

.dash-card-thumb img.loaded {
  opacity: 1;
}

.dash-card-thumb img.error {
  display: none;
}

.dash-card-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dimmed);
}

.dash-card-fallback svg {
  width: 32px;
  height: 32px;
}

.dash-card-lock {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
  padding: 4px;
  color: #fff;
}

.dash-card-lock svg {
  width: 14px;
  height: 14px;
}

/* Overlay bar at bottom */
.dash-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 10px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}

.dash-card-prompt {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-card-date {
  color: rgba(255,255,255,0.7);
  font-size: 0.6875rem;
}

/* Expired */
.dash-card--expired {
  opacity: 0.55;
}

/* Remove animation */
.dash-card.removing {
  animation: dash-card-remove 0.25s var(--ease-out) forwards;
}

@keyframes dash-card-remove {
  to { opacity: 0; transform: scale(0.9); }
}

/* Keyboard focus ring */
.dash-card.kbd-focus {
  outline: 2px solid var(--text, #1a1a2e);
  outline-offset: 2px;
}

/* --- New edit "+" card --- */

.dash-card-new {
  cursor: pointer;
  display: block;
}

.dash-card-new-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--text, #1a1a2e);
  border: none;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.dash-card-new-inner::after {
  display: none;
}

.dash-card-new-inner svg {
  color: rgba(255, 255, 255, 0.9);
  transition: transform 0.15s;
}

.dash-card-new-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

@media (hover: hover) {
  .dash-card-new:hover .dash-card-new-inner {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    background: #2d2d44;
  }
  .dash-card-new:hover .dash-card-new-inner svg {
    transform: scale(1.05);
  }
}

.dash-card-new:active .dash-card-new-inner {
  transform: translateY(0) scale(0.97);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.12);
}

.dash-card-new.drag-over .dash-card-new-inner {
  background: linear-gradient(135deg, #3d3d58 0%, #1a1a2e 50%, #151528 100%);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.22),
    0 0 0 3px rgba(0, 0, 0, 0.15);
  transform: scale(1.02);
}

.dash-card-new.drag-over .dash-card-new-inner svg {
  transform: scale(1.15);
}

/* --- Full-screen preview overlay --- */

.dash-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-standard);
}

.dash-preview-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.dash-preview-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 16px));
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.dash-preview-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90vw;
  max-height: 85vh;
  gap: 16px;
  transition: transform 0.2s var(--ease-standard);
}

.dash-preview-img {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}

.dash-preview-info {
  text-align: center;
  max-width: 400px;
}

.dash-preview-prompt {
  color: #fff;
  font-size: 0.9375rem;
  margin: 0 0 4px;
  line-height: 1.4;
}

.dash-preview-date {
  color: rgba(255,255,255,0.6);
  font-size: 0.8125rem;
}

.dash-preview-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.dash-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.dash-preview-btn:active {
  background: rgba(255,255,255,0.2);
}

.dash-preview-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.dash-preview-btn--delete {
  color: #ef4444;
  border-color: rgba(239,68,68,0.25);
}

.dash-preview-btn--delete:active {
  background: rgba(239,68,68,0.15);
}

/* --- Homepage hidden when dashboard visible --- */

.dashboard-section:not([hidden]) ~ .homepage-content {
  display: none !important;
}

/* When editing, hide dashboard via JS (hidden attribute) */

/* --- Bulk Select --- */

.dash-select-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.dash-select-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

/* Select mode: hide toolbar controls, show only bulk bar */
.select-mode .dash-search,
.select-mode .dash-sort-btn,
.select-mode .dash-density-btn,
.select-mode .dash-filter-chips {
  display: none;
}
.select-mode .dash-select-btn {
  display: none;
}

/* Card selection checkbox */
.select-mode .dash-card { cursor: pointer; position: relative; }
.select-mode .dash-card::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  z-index: 2;
  transition: all 0.15s var(--ease-standard);
}
.select-mode .dash-card.selected::before {
  background: var(--primary);
  border-color: var(--primary);
}
.select-mode .dash-card.selected::after {
  content: '\2713';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  z-index: 3;
}
.select-mode .dash-card.selected {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.select-mode .dash-card-new {
  pointer-events: none;
  opacity: 0.4;
}
.select-mode .dash-card-new::before,
.select-mode .dash-card-new::after { display: none; }

/* Floating bulk action bar */
.bulk-action-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 100;
}
.bulk-count {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.bulk-delete-btn {
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-md);
  background: #ef4444;
  color: white;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}
.bulk-delete-btn:hover { background: #dc2626; }
.bulk-cancel-btn {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
}
.bulk-download-btn {
  padding: 8px 16px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s var(--ease-standard), color 0.15s var(--ease-standard);
}
.bulk-download-btn:hover {
  background: var(--primary);
  color: #fff;
}
.bulk-download-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.bulk-cancel-btn:hover { color: var(--text); }

/* ============================================
   Hub Grid — Browse by Goal (homepage)
   Auto-hides in editor mode via the existing
   .app.has-image ~ .homepage-content { display: none } rule.
   ============================================ */


/* ============================================
   Reveal — before/after comparison cards
   Matches pack-slider design language:
   card-tonal surface, hairline border, r-lg radius,
   circular white-on-violet handle thumb.
   ============================================ */
.reveal-section {
  padding: 60px 24px 64px;
  background: var(--bg);
}

.reveal-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.reveal-header {
  text-align: center;
  margin-bottom: 28px;
}

.reveal-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--tone-violet-700);
  background: var(--tone-violet-50);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

.reveal-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.025em;
}

.reveal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.reveal-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--card-tonal);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-body);
  transition: border-color 0.18s var(--ease-standard),
              transform 0.2s var(--ease-standard),
              box-shadow 0.22s var(--ease-standard);
  position: relative;
  /* Block native HTML5 link-drag — otherwise mousedown→drag hijacks
     pointer events and the reveal handle never sees pointermove. */
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

.reveal-card:hover {
  border-color: color-mix(in srgb, var(--tone-violet) 30%, transparent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.reveal-card:focus-visible {
  outline: 2px solid var(--tone-violet);
  outline-offset: 3px;
}

/* Image frame */
.reveal-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-subtle);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  --reveal: 50%;
}

.reveal-after,
.reveal-before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.reveal-before-wrap {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
  pointer-events: none;
  will-change: clip-path;
}

.reveal-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--reveal);
  width: 2px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(26, 26, 46, 0.14);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Handle — matches credits-slider thumb */
.reveal-handle {
  position: absolute;
  top: 50%;
  left: var(--reveal);
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 3px solid var(--tone-violet);
  box-shadow: var(--shadow-tonal-violet);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 0.16s var(--ease-standard),
              box-shadow 0.16s var(--ease-standard);
}

.reveal-card:hover .reveal-handle {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: var(--shadow-tonal-violet-lg);
}

.reveal-frame:active .reveal-handle {
  transform: translate(-50%, -50%) scale(1.04);
  box-shadow: var(--shadow-tonal-violet-lg);
}

/* Before / After pills — micro mono labels, glass-y over photo */
.reveal-pill {
  position: absolute;
  top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(26, 26, 46, 0.55);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.reveal-pill--before { left: 10px; }
.reveal-pill--after  { right: 10px; }

/* Caption strip */
.reveal-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px 2px;
}

.reveal-kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--tone-violet-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.reveal-prompt {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
  letter-spacing: -0.005em;
}

@media (max-width: 900px) {
  .reveal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .reveal-section {
    padding: 32px 16px 36px;
  }
  .reveal-title {
    font-size: 1.3rem;
  }
  .reveal-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .reveal-card {
    padding: 14px;
  }
  .reveal-frame {
    aspect-ratio: 16 / 11;
  }
  .reveal-handle {
    width: 32px;
    height: 32px;
  }
  .reveal-pill {
    font-size: 9px;
    padding: 2px 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-card,
  .reveal-handle,
  .reveal-before-wrap {
    transition: none;
  }
}

/* ============================================
   Combine — two-photo upload showcase
   Same design language as reveal cards (card-tonal,
   hairline, r-lg) but presented as a static A + B → C
   flow with violet op-circles between cells.
   ============================================ */
.combine-section {
  padding: 0 24px 64px;
  background: var(--bg);
}

.combine-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.combine-header {
  text-align: center;
  margin-bottom: 28px;
}

.combine-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--tone-violet-700);
  background: var(--tone-violet-50);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

.combine-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: -0.025em;
}

.combine-subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Stage wraps slides + dots; gives a stable bounding box for cross-fades. */
.combine-stage {
  position: relative;
}

.combine-slides {
  position: relative;
}

/* Each slide looks like the original combine-card. First slide stays in
   document flow to size the stage; siblings are absolutely overlaid. */
.combine-slide {
  padding: 20px;
  background: var(--card-tonal);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  color: var(--text);
  font-family: var(--font-body);
  transition: opacity 0.45s var(--ease-standard);
  -webkit-user-drag: none;
  user-drag: none;
}

.combine-slide:not([data-combine-slide="0"]) {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.combine-slide--active {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1;
}

.combine-slide:not(.combine-slide--active) {
  opacity: 0;
}

/* "Try this edit" CTA inside the caption — small dark pill matching .sec-cta */
.combine-cta {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #fff;
  background: var(--text);
  text-decoration: none;
  padding: 10px 18px 11px;
  border-radius: var(--r-pill);
  box-shadow: 0 2px 6px rgba(26,26,46,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform 0.18s ease, box-shadow 0.2s ease;
  align-self: flex-start;
}
.combine-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(26,26,46,0.22), inset 0 1px 0 rgba(255,255,255,0.14);
}

/* Dot navigation */
.combine-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.combine-dot {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(26, 26, 46, 0.18);
  border: none;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  padding: 0;
  cursor: pointer;
  transition: background 0.18s var(--ease-standard),
              width 0.22s var(--ease-standard),
              transform 0.18s var(--ease-standard);
}

.combine-dot:hover {
  background: rgba(26, 26, 46, 0.42);
  transform: scale(1.15);
}

.combine-dot--active {
  background: var(--tone-violet);
  width: 22px;
}

.combine-dot--active:hover {
  transform: none;
  background: var(--tone-violet-700);
}

/* Flow: 5 columns — A | + | B | → | Result-wider */
.combine-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.4fr;
  align-items: center;
  gap: 16px;
}

.combine-cell {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-subtle);
}

.combine-cell--a,
.combine-cell--b {
  aspect-ratio: 1 / 1;
}

.combine-cell--out {
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-tonal-violet);
}

.combine-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

.combine-label {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(26, 26, 46, 0.55);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.combine-label--result {
  background: var(--tone-violet);
}

.combine-op {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 2px solid var(--tone-violet);
  color: var(--tone-violet-700);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  box-shadow: var(--shadow-tonal-violet);
  line-height: 1;
}

.combine-caption {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.combine-kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--tone-violet-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.combine-prompt-text {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
  letter-spacing: -0.005em;
}

@media (max-width: 900px) {
  .combine-flow {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "a   op   b"
      "out out  out";
    gap: 12px;
  }
  .combine-cell--a { grid-area: a; }
  .combine-cell--b { grid-area: b; }
  .combine-cell--out {
    grid-area: out;
    aspect-ratio: 16 / 9;
    margin-top: 4px;
  }
  .combine-op--plus { grid-area: op; }
  .combine-op--arrow { display: none; }
}

@media (max-width: 540px) {
  .combine-section {
    padding: 0 16px 36px;
  }
  .combine-title {
    font-size: 1.3rem;
  }
  .combine-subtitle {
    font-size: 13px;
  }
  .combine-card {
    padding: 14px;
  }
  .combine-flow {
    gap: 8px;
  }
  .combine-op {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  .combine-label {
    font-size: 9px;
    padding: 2px 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .combine-card {
    transition: none;
  }
}

/* ============================================
   MOBILE EDITOR REDESIGN — May 2026
   --------------------------------------------
   Goal: make the editor feel like a real mobile
   app (Photoroom / Lensa pattern). Image owns
   ~70% of viewport; controls collapse into a
   single fixed dock at the bottom; top chrome
   shrinks to one row. Pure CSS reposition of
   existing DOM nodes — every #id is preserved
   so existing JS, telemetry, paywall flow,
   and `.keyboard-open` machinery keep working.
   Scoped to mobile + has-image only.
   ============================================ */
@media (max-width: 768px) {

  /* --- Top bar slim-down ---------------------
     Anon cluster (Sign in / Get edits / Edit a photo)
     was four controls fighting for ~360px. Hide
     while editing; users hit `#userBtn` (which already
     opens the mobile user sheet) for sign-in, and the
     existing `#headerCredits` chip remains as the
     buy-path entry. */
  .app.has-image .header-anon-cta {
    display: none !important;
  }
  /* Animate pill is signal-noisy at idle pre-edit;
     promote it to a tighter chip and only show its
     icon at very narrow widths (already handled by
     existing 480px rule for .header-mtv-cta-label). */
  .app.has-image .top-bar {
    padding: 8px 12px;
    min-height: 52px;
  }
  .app.has-image .nav-spacer {
    flex: 1;
  }

  /* --- Image area gets the canvas back -------
     Old rule: image-container max-height calc(100% - 80px)
     reserved room for a separate photo-strip row.
     We're collapsing the photo-strip into an overlay
     on the image itself, so reclaim that 80px. */
  .app.has-image .image-area {
    padding: 6px 6px 0;
    gap: 0;
  }
  .app.has-image .image-container {
    max-height: 100%;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  }
  /* image-wrapper fills container so both corner overlays
     (Change is a sibling of wrapper; Expand is inside) sit at
     the same visual canvas edge. Image inside is object-fit:
     contain so the photo centers and letterboxes naturally. */
  .app.has-image .image-wrapper {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-self: stretch;
    position: relative;
    border-radius: 0;
  }
  .app.has-image #currentImage,
  .app.has-image #originalImage {
    border-radius: 16px;
  }

  /* Compact corner controls on the image itself. .change-photo-btn
     is a child of .image-container (sibling of .image-wrapper), so
     its `top:10/left:10` anchors to image-container — which on mobile
     is wider/taller than the actual image. Use image-wrapper position
     to anchor instead: since image-wrapper is now shrink-wrapped
     around the image, the buttons need to overlap into the image
     visually. Easiest: position them at the image-wrapper edge by
     keeping them absolute-on-container and computing offsets from
     the centered image-wrapper using flex auto-margins. */
  .app.has-image .change-photo-btn {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 8px 10px;
    min-height: 36px;
    font-size: 12px;
    border-radius: 999px;
    gap: 4px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    z-index: 15;
  }
  .app.has-image .change-photo-btn svg {
    width: 14px;
    height: 14px;
  }
  .app.has-image .image-expand-btn {
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  .app.has-image .image-expand-btn svg {
    width: 15px;
    height: 15px;
  }

  /* --- Float top-bar over the canvas so the image reaches the top --------
     Mobile editing: collapse the header row by absolutely-positioning
     .top-bar over the image area. Only the back button stays visible —
     credits / animate / account chips are reachable once the user backs
     out. Back + Change sit as icon-only glass pills at top-left, Fullscreen
     stays at top-right; all three share the same top offset. */
  .app.has-image .top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    min-height: 0;
    background: transparent;
    border-bottom: 0;
    pointer-events: none;
    z-index: 50;
  }
  .app.has-image .top-bar > *:not(.back-btn) {
    display: none !important;
  }
  /* Three matching 40×40 glass pills on one row: Back · Change at top-left,
     Fullscreen at top-right. Overrides the legacy 44px min-size on the
     expand button so the trio renders at the same pixel size. */
  .app.has-image .back-btn,
  .app.has-image .change-photo-btn,
  .app.has-image .image-expand-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    gap: 0;
    border-radius: 999px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
  }
  .app.has-image .back-btn {
    position: absolute;
    top: max(14px, calc(var(--safe-top, 0px) + 6px));
    left: 14px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    color: var(--text-muted);
    pointer-events: auto;
  }
  /* Change → parked right of Back. Parent (.image-container) sits 6px
     below .top-bar because .image-area keeps padding-top: 6px (the "little
     bit of margin" above the image), so subtract 6 to land on the same
     viewport row as Back. */
  .app.has-image .change-photo-btn {
    top: max(8px, var(--safe-top, 0px));
    left: calc(14px + 40px + 8px);
  }
  /* Fullscreen aligns to the same row as Back / Change. */
  .app.has-image .image-expand-btn {
    top: max(8px, var(--safe-top, 0px));
  }
  /* All three are icon-only; suppress legacy text labels. */
  .app.has-image .back-btn > span,
  .app.has-image .change-photo-btn > span {
    display: none;
  }
  .app.has-image .back-btn svg,
  .app.has-image .change-photo-btn svg,
  .app.has-image .image-expand-btn svg {
    width: 17px;
    height: 17px;
  }

  /* --- Photo strip → thin chip row, only when 2 photos ---
     Old: ~80px-tall full row visible even with a single photo
     (numbered badge + thumbnail + label + remove + dashed Add btn).
     New: hidden entirely when single (the "+Ref" affordance is in
     the dock as #footerRefBtn). When two photos are loaded, shrink
     to a single inline chip row pinned just above the dock. */

  /* Hide when single photo. Must beat .photo-strip.visible {display:flex !important}. */
  .app.has-image .photo-strip:not(.two-photos) {
    display: none !important;
  }

  /* Two-photo mode: compact chip row, in-flow above the dock */
  .app.has-image .photo-strip.two-photos {
    padding: 6px 12px 4px !important;
    flex-shrink: 0;
  }
  .app.has-image .photo-strip.two-photos .photo-strip-scroll {
    padding: 0;
    gap: 6px;
    justify-content: center;
  }
  .app.has-image .photo-strip-item {
    padding: 2px;
    border-width: 2px;
    border-radius: 12px;
    background: var(--card);
  }
  .app.has-image .photo-thumb-wrapper {
    width: 38px;
    height: 38px;
    border-radius: 8px;
  }
  /* Drop numbered badge + label noise — at 38px they overlap the thumbnail */
  .app.has-image .photo-strip-badge,
  .app.has-image .photo-strip.two-photos .photo-strip-label {
    display: none !important;
  }
  .app.has-image .photo-remove-btn {
    width: 20px;
    height: 20px;
    top: -6px;
    right: -6px;
    font-size: 11px;
    border-width: 1.5px;
  }
  /* Always-visible remove on active item (no hover on touch) */
  .app.has-image .photo-strip-item.active .photo-remove-btn {
    display: flex;
  }
  /* Hide the [+ Ref] dashed button in the strip — the dock's footer-ref-btn
     covers the same affordance with less weight, and once two photos are
     loaded users no longer need a third. */
  .app.has-image .photo-strip-add {
    display: none !important;
  }

  /* --- Compose dock (the bottom panel) -------
     Make .controls feel like a real dock:
     compact, glassmorphism, no fight with the
     image. Keep existing sticky-bottom behavior. */
  .app.has-image .controls {
    padding: 8px 12px;
    padding-bottom: calc(8px + var(--safe-bottom));
    gap: 6px;
    background: rgba(252, 252, 253, 0.92);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
  }
  .app.has-image .edit-actions {
    gap: 6px;
  }
  .app.has-image .edit-card {
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    /* 12px between the input and the Ref·Mode·Versions row. Matches the
       12px gap inside .edit-card-footer below so both halves of the dock
       breathe at the same rhythm. */
    gap: 12px;
  }
  .app.has-image .edit-card:focus-within {
    box-shadow: none;
    border-color: transparent;
  }
  .app.has-image .custom-prompt-section {
    margin: 0;
  }
  /* History strip is rarely useful on small screens
     and adds ~60px of clutter; hide unless a result is showing. */
  .app.has-image .history-strip {
    display: none;
  }
  body.has-result.has-image .history-strip {
    display: block;
    margin: 0 0 4px;
    padding: 0;
    background: transparent;
    border: none;
  }

  /* Prompt input as a single-line pill at idle; the
     existing keyboard-open rule already expands it once
     the user taps to type, so this is purely visual. */
  .app.has-image .prompt-wrapper {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  }
  .app.has-image .prompt-input {
    min-height: 40px;
    max-height: 88px;
    padding: 10px 14px;
    font-size: 16px;       /* iOS zoom prevention */
    border: none;
    background: transparent;
    border-radius: 14px;
  }
  .app.has-image .prompt-input:focus {
    box-shadow: none;
    border: none;
  }

  /* Footer: two rows — (1) ref + mode + versions chips, all small,
     left-aligned; (2) Apply Edit CTA, full width. Tried single-row
     but Fast/Pro + 1/2/3/4 toggles need ~280px of natural width
     which crowds out the CTA on 393px viewports. */
  .app.has-image .edit-card-footer {
    flex-direction: column;
    align-items: stretch;
    /* 12px between Ref·Mode·Versions row and the Apply Edit CTA. Matches
       the 12px margin-top below so the input→toggles and toggles→CTA
       distances read as one consistent rhythm. (Earlier `margin: 0` here
       zeroed the base `margin-top: 12px` and collapsed the input→toggles
       gap to nothing, because .edit-card isn't flex on mobile so its `gap`
       was silently ineffective.) */
    gap: 12px;
    padding: 0;
    margin: 12px 0 0;
    /* Do NOT touch position/bottom here — the .keyboard-open
       rule below pins this `position: fixed; bottom: 0` when
       the soft keyboard is open. Touching it would un-pin. */
  }
  /* When keyboard opens, re-pin the footer to the bottom of the
     shrunken layout viewport. Restate the keyboard-open rule with
     higher specificity so my idle-state column rule above can't
     win on cascade order alone. */
  body.keyboard-open .app.has-image .edit-card-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 8px 12px calc(8px + var(--safe-bottom));
    background: var(--bg);
    border-top: 1px solid var(--border);
    flex-direction: column;
    gap: 8px;
  }
  /* Ref · Mode · Versions row — single deliberate rhythm.
     space-between pins Ref to the left edge and the Mode+Versions cluster
     to the right edge. The wrapper is auto-sized (not flex:1) so it
     shrinks to its content; otherwise it would fill the row and leave
     asymmetric dead space after Versions. */
  .app.has-image .footer-left {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .app.has-image .footer-ref-btn {
    flex-shrink: 0;
  }
  /* Collapse the wrapper layers so Mode (.control-group) and Versions
     (.control-group) participate directly in .footer-left's flex layout.
     With three siblings under `justify-content: space-between`, Fast/Pro
     lands exactly between the Ref button and the Versions toggle. */
  .app.has-image .quality-toggle-wrapper,
  .app.has-image .controls-row {
    display: contents;
  }
  .app.has-image .footer-left > .control-group {
    flex-shrink: 0;
  }
  .app.has-image .control-group-label,
  .app.has-image .edit-cost-caption {
    display: none;   /* labels redundant — affordance is in the chip itself */
  }
  .app.has-image .edit-btn {
    width: 100%;
    min-height: 50px;
    padding: 14px 18px;
    font-size: 1rem;
    border-radius: 14px;
  }

  /* Persistent slim chip rail ABOVE the prompt input. Negative side margins
     let the fade-mask reach the screen edge so chips look like they trail
     off-screen — visual hint that there's more to scroll. */
  .app.has-image .prompt-suggestions {
    margin: 0 -12px 8px;
    padding: 2px 12px 4px;
  }

  /* Reference photo section: redundant on mobile (footer-ref-btn
     and the photo-strip overlay both cover this). The existing
     <1024px rule already hides .reference-photo-section, but the
     standalone add-reference-btn variant can still slip through;
     belt + suspenders. */
  .app.has-image .reference-photo-section,
  .app.has-image .add-reference-btn {
    display: none;
  }

  /* --- Result state — reclaim the canvas -----
     When a result is showing, photo-strip is view-only
     and add buttons are hidden. Push image even further. */
  body.has-result .app.has-image .image-area {
    padding-bottom: 0;
  }
  body.has-result .app.has-image .result-toolbar {
    margin: 0 0 4px;
    padding: 4px 0;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.has-result .app.has-image .result-toolbar::-webkit-scrollbar {
    display: none;
  }
  body.has-result .app.has-image .result-pill {
    flex-shrink: 0;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 0.85rem;
  }
}

/* Tiny phones (≤380px) — additional tightening.
   Drop chip labels on Fast/Pro/Versions toggles to keep
   the dock single-row even at 320px viewports. */
@media (max-width: 380px) {
  .app.has-image .quality-toggle,
  .app.has-image .versions-toggle {
    transform: scale(0.86);
  }
  .app.has-image .edit-btn {
    padding: 12px 14px;
    font-size: 0.9rem;
  }
  .app.has-image .header-mtv-cta {
    display: none;   /* Animate moves into user sheet at this width */
  }
}

/* ============================================================================
   Homepage value-prop strips (Pro mode / Versions / Animate)
   Inserted between the editor, reveal grid, two-photo combine, and final CTA.
   Pure ETP brand: Plus Jakarta Sans, JetBrains Mono, violet pill chips, cards.
   ============================================================================ */

.sec {
  position: relative;
  padding: 64px 24px;
  overflow: hidden;
  isolation: isolate;
}
.sec-inner {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}
.sec-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
}
.sec-head--center {
  align-items: center;
  text-align: center;
}
.sec-meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sec-meta::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.sec-meta--center { justify-content: center; }
.sec-meta--center::before { display: none; }
.sec-index {
  color: var(--tone-violet-700);
  font-weight: 600;
}
.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tone-violet-700);
  background: var(--tone-violet-50);
  padding: 5px 11px;
  border-radius: var(--r-pill);
}
.sec-eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tone-violet);
}
.sec-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  color: var(--text);
  margin: 0;
}
.sec-sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 56ch;
  margin: 4px 0 0;
  letter-spacing: -0.005em;
}
.sec-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  color: #fff;
  background: var(--text);
  padding: 13px 22px 14px;
  border-radius: var(--r-pill);
  transition: transform 0.18s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(26,26,46,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
  border: none;
  cursor: pointer;
}
.sec-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(26,26,46,0.22), inset 0 1px 0 rgba(255,255,255,0.14);
}
.sec-cta svg { transition: transform 0.2s ease; }
.sec-cta:hover svg { transform: translateX(3px); }

.sec-spec {
  display: flex;
  margin: 0 0 28px;
  padding: 14px 0 0;
  border-top: 1px solid var(--hairline);
}
.sec-spec-cell { flex: 1; padding-right: 16px; min-width: 0; }
.sec-spec-cell + .sec-spec-cell {
  border-left: 1px solid var(--hairline); padding-left: 16px;
}
.sec-spec dt {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 4px;
}
.sec-spec dd {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text); margin: 0;
}

.sec-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 72px;
  align-items: center;
}
@media (max-width: 900px) {
  .sec { padding: 48px 20px; }
  .sec-split { grid-template-columns: 1fr; gap: 36px; }
  .sec-head { margin-bottom: 28px; }
}

/* ---------- Strip 01 — Pro mode (HD comparison) ---------- */
.sec--pro { background: var(--bg); border-top: 1px solid var(--hairline); }
.pro-mark {
  position: absolute;
  top: -16px; right: -24px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(8rem, 18vw, 14rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--tone-violet);
  opacity: 0.07;
  pointer-events: none; z-index: 0;
}
.pro-compare {
  position: relative;
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: 16px;
}
.pro-tile {
  background: var(--card);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 3px rgba(20,20,40,0.04), 0 8px 24px -12px rgba(20,20,40,0.12);
  border: 1px solid var(--hairline);
  display: flex; flex-direction: column;
}
.pro-tile--fast { transform: translateY(20px); }
.pro-tile--pro {
  box-shadow: 0 1px 3px rgba(20,20,40,0.04), 0 22px 44px -16px rgba(124,92,252,0.32);
  border: 1px solid color-mix(in srgb, var(--tone-violet) 24%, var(--hairline));
}
.pro-tile-label {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.94);
  color: var(--text);
  backdrop-filter: blur(8px);
}
.pro-tile--pro .pro-tile-label {
  background: var(--text); color: #fff;
}
.pro-tile-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.pro-tile--fast .pro-tile-img {
  filter: blur(1.4px) saturate(0.88) contrast(0.96);
}
.pro-tile-foot {
  padding: 12px 14px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid var(--hairline);
}
.pro-tile-foot strong {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 800;
  letter-spacing: -0.01em; text-transform: none;
  color: var(--text);
}
.pro-tile--pro .pro-tile-foot strong { color: var(--tone-violet); }
@media (max-width: 900px) {
  .pro-compare { grid-template-columns: 1fr 1fr; }
  .pro-tile--fast { transform: translateY(8px); }
  .pro-mark { font-size: 7rem; }
}

/* ---------- Strip 03 — Versions (full-bleed violet) ---------- */
.sec--versions { background: var(--tone-violet); color: #fff; }
.sec--versions::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255,255,255,0.10) 0%, transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(0,0,0,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.sec--versions .sec-meta { color: rgba(255,255,255,0.7); }
.sec--versions .sec-index { color: #fff; }
.sec--versions .sec-eyebrow {
  background: rgba(255,255,255,0.16);
  color: #fff;
}
.sec--versions .sec-eyebrow::before { background: #fff; }
.sec--versions .sec-title { color: #fff; }
.sec--versions .sec-sub { color: rgba(255,255,255,0.82); }
.sec--versions .sec-cta {
  background: #fff; color: var(--tone-violet-700);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.32), inset 0 -1px 0 rgba(0,0,0,0.04);
}
.sec--versions .sec-cta:hover { background: var(--tone-violet-50); }
.sec--versions .sec-spec { border-top-color: rgba(255,255,255,0.18); }
.sec--versions .sec-spec-cell + .sec-spec-cell { border-left-color: rgba(255,255,255,0.18); }
.sec--versions .sec-spec dt { color: rgba(255,255,255,0.66); }
.sec--versions .sec-spec dd { color: #fff; }

.versions-mark {
  position: absolute;
  top: 50%;
  right: -32px;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(14rem, 28vw, 24rem);
  line-height: 0.8;
  letter-spacing: -0.07em;
  color: #fff;
  opacity: 0.08;
  pointer-events: none; z-index: 0;
}
.versions-mark sup {
  font-family: var(--font-mono);
  font-size: 0.13em; font-weight: 500;
  letter-spacing: 0.18em; vertical-align: 3.4em;
  margin-right: 12px; opacity: 0.7;
}

.versions-stage { position: relative; }
.versions-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  z-index: 1;
}
.versions-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 18px 36px -22px rgba(0,0,0,0.4), 0 4px 10px -4px rgba(0,0,0,0.18);
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
  margin: 0;
}
.versions-tile:nth-child(1) { transform: rotate(-1.8deg) translateY(-4px); }
.versions-tile:nth-child(2) { transform: rotate(1.4deg) translateY(-8px); z-index: 2; }
.versions-tile:nth-child(3) { transform: rotate(1.6deg) translateY(4px); }
.versions-tile:nth-child(4) { transform: rotate(-1.2deg) translateY(8px); }
.versions-grid:hover .versions-tile { transform: rotate(0) translateY(0); }
.versions-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.versions-tile:nth-child(1) img { filter: contrast(1.18) saturate(1.4) hue-rotate(-32deg) brightness(1.05); }
.versions-tile:nth-child(2) img { filter: contrast(1.04) saturate(1.0); }
.versions-tile:nth-child(3) img { filter: contrast(1.06) saturate(1.55) hue-rotate(48deg); }
.versions-tile:nth-child(4) img { filter: contrast(1.32) saturate(0.42) brightness(0.92); }

.versions-tile-num {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em;
  color: #fff;
  background: rgba(14,14,20,0.72);
  padding: 4px 9px; border-radius: 3px;
  backdrop-filter: blur(8px);
}
.versions-tile--pick { outline: 3px solid #fff; outline-offset: 4px; }
.versions-tile--pick::after {
  content: "KEEP";
  position: absolute;
  bottom: 12px; right: 12px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--tone-violet-700);
  background: #fff;
  padding: 5px 10px;
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.22);
}
@media (max-width: 900px) {
  .versions-mark { font-size: 9rem; top: -10px; right: -10px; transform: none; }
}

/* ---------- Strip 05 — Animate (HD video, emerald accent) ---------- */
.sec--animate {
  background: var(--bg-subtle);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.sec--animate .sec-eyebrow {
  background: color-mix(in srgb, var(--tone-emerald) 18%, transparent);
  color: var(--tone-emerald-700);
}
.sec--animate .sec-eyebrow::before { background: var(--tone-emerald); }
.animate-mark {
  position: absolute;
  top: 50%; left: -48px;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(11rem, 22vw, 18rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: var(--tone-emerald);
  opacity: 0.07;
  pointer-events: none; z-index: 0;
}
.animate-mark span {
  font-family: var(--font-mono);
  font-size: 0.14em; font-weight: 500;
  letter-spacing: 0.18em;
  vertical-align: 4em; margin-left: 8px;
}
.animate-stage {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(20,20,40,0.04), 0 28px 56px -20px rgba(20,20,40,0.22);
  border: 1px solid var(--hairline);
}
.animate-stage video,
.animate-stage img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.animate-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 56%, rgba(14,14,20,0.55) 100%);
  pointer-events: none;
}
.animate-play {
  position: absolute;
  bottom: 22px; left: 22px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  color: var(--text);
  display: grid; place-items: center;
  border: none; cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.35), 0 0 0 6px rgba(255,255,255,0.18);
  transition: transform 0.2s ease;
  z-index: 1;
}
.animate-play:hover { transform: scale(1.05); }
.animate-play svg { display: block; margin-left: 3px; }
.animate-play::before {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--tone-emerald);
  opacity: 0.65;
  animation: animatePing 2.2s ease-out infinite;
}
@keyframes animatePing {
  0% { transform: scale(1); opacity: 0.65; }
  80% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.animate-timecode {
  position: absolute;
  bottom: 22px; right: 22px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
  color: #fff;
  background: rgba(14,14,20,0.55);
  padding: 6px 10px 5px;
  border-radius: 4px;
  backdrop-filter: blur(8px);
  z-index: 1;
}
@media (max-width: 900px) {
  .animate-mark { font-size: 8rem; left: -10px; top: -10px; transform: none; }
}

/* ---------- Existing sections elevated to match strip typography ---------- */
.reveal-title { font-size: clamp(2.4rem, 5.4vw, 4.4rem) !important; letter-spacing: -0.035em !important; line-height: 0.95 !important; }
.combine-title { font-size: clamp(2.4rem, 5.4vw, 4.4rem) !important; letter-spacing: -0.035em !important; line-height: 0.95 !important; }
.combine-subtitle { font-size: 1.0625rem !important; max-width: 56ch; margin-left: auto !important; margin-right: auto !important; }
.reveal-section, .combine-section { padding-block: 64px; }
.reveal-header, .combine-header { margin-bottom: 36px !important; }
.final-cta-v2 { padding: 88px 24px 96px; }
.final-cta-v2-title {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 0.98 !important;
  max-width: 18ch;
  margin-left: auto !important;
  margin-right: auto !important;
}
.final-cta-v2-btn { background: var(--tone-violet); border-radius: var(--r-pill); padding: 18px 32px; }
.final-cta-v2-btn:hover { background: var(--tone-violet-700); }

@media (max-width: 540px) {
  .reveal-title, .combine-title, .final-cta-v2-title { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .reveal-section, .combine-section, .final-cta-v2 { padding-block: 64px; }
}

/* ============================================================================
   sec-skin / sec-bg-mark — elevation polish for the existing sections.
   Adds atmospheric numbered marks behind reveal/combine/final-cta to match
   the strip aesthetic. Marks sit behind content (DOM-order stacking).
   ============================================================================ */
.sec-skin {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sec-bg-mark {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(8rem, 18vw, 14rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: var(--tone-violet);
  opacity: 0.055;
  pointer-events: none;
  user-select: none;
}
.sec-bg-mark--left  { top: -10px; left: -36px; }
.sec-bg-mark--right { top: -10px; right: -36px; }
.sec-bg-mark--center {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(14rem, 32vw, 24rem);
  opacity: 0.045;
}
@media (max-width: 900px) {
  .sec-bg-mark { font-size: 7rem !important; }
  .sec-bg-mark--center { font-size: 12rem !important; }
}

/* ---------- Reveal cards: confident hover state + arrow affordance ---------- */
.reveal-card {
  position: relative;
  transition: transform 0.22s ease, box-shadow 0.24s ease, border-color 0.2s ease;
}
.reveal-card::after {
  content: "→";
  position: absolute;
  top: 18px; right: 18px;
  z-index: 2;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(20,20,40,0.18);
  transition: transform 0.22s ease, background 0.2s ease;
  pointer-events: none;
  opacity: 0;
  transform: translate(-4px, 4px) scale(0.92);
}
.reveal-card:hover::after,
.reveal-card:focus-visible::after {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  background: var(--text);
  color: #fff;
}

/* ---------- Final CTA: keep content above the bg mark ---------- */
.final-cta-v2.sec-skin .final-cta-v2-title,
.final-cta-v2.sec-skin .final-cta-v2-lead,
.final-cta-v2.sec-skin .final-cta-v2-btn { position: relative; z-index: 1; }
.final-cta-v2 .sec-bg-mark--center {
  /* Lighten the arrow mark a bit so it reads as decorative not dominant */
  font-weight: 800;
}

/* ============================================================================
   Hero elevation — apply the new design language above the fold.
   Bumps title scale, refines trust-signal vocabulary, polishes the dropzone.
   Lives in app.css so it wins over the base styles in components.css.
   ============================================================================ */

.hero-dropzone {
  padding: 56px 24px 40px;
  gap: 32px;
}

.hero-dropzone-title {
  font-size: clamp(2.4rem, 5vw, 4.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 0.98 !important;
}
.hero-title-accent {
  font-style: italic;
  font-weight: 800;
  color: var(--tone-violet);
  letter-spacing: -0.03em;
}

.hero-dropzone-subtitle {
  font-size: 1.0625rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  line-height: 1.55 !important;
  max-width: 52ch !important;
  letter-spacing: -0.005em !important;
}

/* Trust signals → mono micro-labels under display-bold numbers (sec-spec voice) */
.hero-trust {
  gap: 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  align-self: stretch;
  justify-content: flex-start !important;
}
.hero-trust-item {
  flex: 0 0 auto;
  align-items: flex-start !important;
  padding: 0 22px;
  text-align: left;
  gap: 4px !important;
}
.hero-trust-item:first-child { padding-left: 0; }
.hero-trust-num {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--text) !important;
}
.hero-trust-label {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.hero-trust-sep {
  width: 1px;
  height: 36px;
  background: var(--hairline);
  flex-shrink: 0;
}

/* Center the hero copy block on mobile, left-align on desktop */
@media (min-width: 768px) {
  .hero-copy { text-align: left !important; align-items: flex-start !important; }
  .hero-dropzone-title, .hero-dropzone-subtitle { text-align: left !important; }
  .hero-trust { justify-content: flex-start !important; }
}
@media (max-width: 767px) {
  .hero-trust { justify-content: center !important; padding-top: 12px; }
  .hero-trust-item:first-child { padding-left: 22px; }
  .hero-trust-num { font-size: 1.3rem !important; }
}

/* ---------- Dropzone polish ---------- */
.dropzone-box {
  background: var(--card) !important;
  border: 1.5px dashed color-mix(in srgb, var(--tone-violet) 38%, transparent) !important;
  border-radius: var(--r-xl) !important;
  padding: 56px 32px 56px !important;
  max-width: 460px !important;
  box-shadow: 0 1px 3px rgba(20,20,40,0.04), 0 24px 48px -18px rgba(124,92,252,0.22) !important;
  transition: border-color 220ms var(--ease-standard),
              background 240ms var(--ease-standard),
              box-shadow 240ms var(--ease-standard),
              transform 200ms var(--ease-standard) !important;
}
.dropzone-box:hover {
  border-color: var(--tone-violet) !important;
  background: var(--tone-violet-50) !important;
  transform: translateY(-2px);
  box-shadow: 0 1px 3px rgba(20,20,40,0.04), 0 32px 60px -16px rgba(124,92,252,0.4) !important;
}
.dropzone-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--tone-violet);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 20px -6px rgba(124,92,252,0.5);
}
.dropzone-icon svg { width: 26px; height: 26px; stroke-width: 2; }
.dropzone-text {
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--text) !important;
  margin-top: 6px;
}
.dropzone-prompt {
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 500;
  color: var(--text-muted) !important;
  letter-spacing: -0.005em;
}

/* Free badge: mono micro-label vocabulary, neutral tone */
.free-badge {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--hairline);
  padding: 6px 12px !important;
  border-radius: var(--r-pill);
}
.free-badge-icon { color: var(--tone-violet); }

/* ---------- Showcase strip cards: align with new card vocabulary ---------- */
.showcase-card {
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--hairline);
  padding: 10px;
  box-shadow: 0 1px 3px rgba(20,20,40,0.04), 0 8px 22px -12px rgba(20,20,40,0.14);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.2s ease;
}
.showcase-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--tone-violet) 24%, var(--hairline));
  box-shadow: 0 1px 3px rgba(20,20,40,0.04), 0 18px 36px -14px rgba(20,20,40,0.18);
}
.showcase-frame {
  border-radius: 12px;
  overflow: hidden;
}
.showcase-label {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-top: 8px !important;
}

/* Desktop two-column layout: copy left, dropzone right, showcase below spans full */
@media (min-width: 900px) {
  .hero-dropzone {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    grid-template-rows: auto auto auto;
    gap: 56px 72px !important;
    padding: 88px 32px 56px !important;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
  }
  .hero-copy { grid-column: 1; grid-row: 1; }
  .hero-action { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .showcase-strip { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; }
}

/* ============================================================================
   Hero pass v2 — match section margins, soften nav CTA, big visual marquee,
   designed social-proof row.
   ============================================================================ */

/* Header CTA: violet (was black, too harsh) + "Upload" label is shorter */
.header-try-free {
  background: var(--tone-violet) !important;
  box-shadow: 0 2px 8px rgba(124,92,252,0.28), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.header-try-free:hover {
  background: var(--tone-violet-700) !important;
  box-shadow: 0 8px 22px rgba(124,92,252,0.4), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

/* Above-the-fold container = 1180px max-width to match .sec-inner */
@media (min-width: 900px) {
  .hero-dropzone {
    max-width: 1180px !important;
    padding-inline: 24px !important;
    gap: 56px 64px !important;
  }
}

/* ---------- Showcase marquee: bigger, more confident cards ---------- */
.showcase-strip {
  padding: 0;
  margin-top: 8px;
}
.showcase-track { gap: 16px !important; }

.showcase-card {
  width: 248px !important;
  padding: 0 !important;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(20,20,40,0.04), 0 14px 32px -16px rgba(20,20,40,0.16) !important;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.2s ease;
}
.showcase-card:hover {
  transform: translateY(-3px) !important;
  border-color: color-mix(in srgb, var(--tone-violet) 24%, var(--hairline));
  box-shadow: 0 1px 3px rgba(20,20,40,0.04), 0 28px 48px -16px rgba(20,20,40,0.22) !important;
}
.showcase-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--hairline);
}
.showcase-label {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  padding: 14px 14px 16px !important;
  margin: 0 !important;
  text-align: left !important;
  display: block;
}

/* Edge masks so cards fade in/out instead of hard-cutting */
.showcase-strip {
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

/* ============================================================================
   Pricing-v9 homepage elevation — align with .sec design language.
   Overrides sit at the bottom so they win the specificity race without !important.
   ============================================================================ */

/* Section background: flat --bg-subtle band (no gradient) to match other sec bands. */
.pricing-v9 {
  background: var(--bg-subtle);
  padding: 96px 24px 100px;
}
@media (max-width: 900px) {
  .pricing-v9 { padding: 64px 24px 72px; }
}

/* Section header: center the meta / eyebrow / title block. */
.pricing-v9-header .sec-meta {
  margin-bottom: 14px;
}

/* Eyebrow: use the full .sec-eyebrow pattern — show the violet dot.
   The base .pricing-v9-eyebrow silences its ::before; we restore it here. */
.pricing-v9 .sec-eyebrow::before {
  display: block; /* already set by .sec-eyebrow::before globally */
}
.pricing-v9-header .sec-eyebrow {
  display: inline-flex;
  margin-bottom: 16px;
}

/* Title: match the system .sec-title scale exactly. */
.pricing-v9 .pricing-v9-title {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-weight: 800;
  margin-bottom: 10px;
}
@media (max-width: 540px) {
  .pricing-v9 .pricing-v9-title { font-size: clamp(2rem, 8vw, 3rem); }
}

/* Lead / sub: center, match sec-sub style. */
.pricing-v9 .pricing-v9-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 44ch;
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.005em;
  margin-bottom: 0;
}

/* Billing toggle: push below the header with breathing room. */
.pricing-v9-billing-toggle {
  margin-top: 32px;
  margin-bottom: 44px;
}

/* Background mark: ensure the pricing-v9 inner is a stacking context
   so the .sec-bg-mark (absolute) stays clipped inside the section. */
.pricing-v9-inner {
  position: relative; /* already set, but confirm z-stacking */
}
.pricing-v9 .sec-bg-mark {
  font-size: 18rem;
  color: var(--tone-violet);
  opacity: 0.045;
  top: 20px;
  right: -48px;
  line-height: 1;
}
@media (max-width: 900px) {
  .pricing-v9 .sec-bg-mark { font-size: 9rem !important; right: -20px; }
}

/* Benefits: tighten bottom gap above the free note. */
.pricing-v9-benefits {
  margin-bottom: 20px;
}

/* Cards max-width: let them breathe at 1180px like .sec-inner. */
.pricing-v9-inner {
  max-width: 1180px;
}


/* A11y: respect reduced-motion preference on the hero showcase marquee + animate strip ping */
@media (prefers-reduced-motion: reduce) {
  .showcase-track { animation: none !important; }
  .animate-play::before { animation: none !important; }
}

/* === onboarding.css === */
/* ============================================
   ONBOARDING V2 — Progressive Annotated Walkthrough
   Premium camera-app aesthetic: VSCO / Halide / Lightroom first-run feel
   Scrim + spotlight cutout + handwritten annotations
   Tap anywhere to advance.
   ============================================ */

/* ─── Competing UI suppression ──────────────────────────────────
   Force-hide distracting elements during onboarding.
   Uses body class for CSS specificity, !important to override JS. */
body.onboarding-active .rate-limit-banner,
body.onboarding-active #rateLimitBanner,
body.onboarding-active .free-edit-timer,
body.onboarding-active .editor-timer-banner,
body.onboarding-active .weekly-free-banner,
body.onboarding-active .bottom-banner {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ─── Full-screen click blocker ─────────────────────────────────
   Prevents all interaction with underlying UI during onboarding.
   Sits below the highlight but above all app UI. */
.onboarding-blocker {
  position: fixed;
  inset: 0;
  z-index: 9989;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ─── Highlight / Scrim ────────────────────────────────────────
   Deep cinematic scrim — app UI nearly vanishes.
   Only the spotlight cutout remains visible. */
.onboarding-highlight {
  position: fixed;
  z-index: 9990;
  pointer-events: none;
  border-radius: 14px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.84),
    0 0 40px 8px rgba(26, 26, 46, 0.25),
    inset 0 0 20px 4px rgba(26, 26, 46, 0.08);
  transition:
    top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: onb-highlight-enter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes onb-highlight-enter {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pulsing glow ring around spotlight */
.onboarding-highlight::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 0 16px 4px rgba(255, 255, 255, 0.15),
    inset 0 0 12px 2px rgba(255, 255, 255, 0.06);
  animation: onb-ring-pulse 2.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes onb-ring-pulse {
  0%, 100% {
    opacity: 0.55;
    transform: scale(1);
    box-shadow:
      0 0 12px 3px rgba(255, 255, 255, 0.12),
      inset 0 0 10px 2px rgba(255, 255, 255, 0.05);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
    box-shadow:
      0 0 22px 7px rgba(255, 255, 255, 0.22),
      inset 0 0 16px 4px rgba(255, 255, 255, 0.08);
  }
}

/* ─── Annotation container ─────────────────────────────────────
   Spring-physics entrance: overshoots then settles. */
.onboarding-annotation {
  position: fixed;
  z-index: 9992;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: onb-annotation-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes onb-annotation-in {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.85);
  }
  60% {
    opacity: 1;
    transform: translateY(-3px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ─── Handwritten annotation text ──────────────────────────────
   Bold, warm, impossible to miss. Glassmorphism with dark neutral tint. */
.onboarding-text {
  font-family: 'Caveat', cursive;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  transform: rotate(-1.5deg);
  white-space: nowrap;
  max-width: 340px;
  text-align: center;
  background: rgba(20, 20, 32, 0.75);
  padding: 10px 24px;
  border-radius: 24px;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(26, 26, 46, 0.3);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(26, 26, 46, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-shadow: 0 1px 8px rgba(26, 26, 46, 0.4);
  letter-spacing: 0.01em;
}

/* ─── "Tap to continue" hint ───────────────────────────────────
   Gentle bounce — alive, not just fading. */
.onboarding-tap-hint {
  font-family: 'Caveat', cursive;
  font-size: 1.05rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  animation: onb-hint-bounce 2.4s ease-in-out infinite;
  animation-delay: 1.2s;
  opacity: 0;
}

@keyframes onb-hint-bounce {
  0% { opacity: 0.65; transform: translateY(0); }
  15% { opacity: 0.9; transform: translateY(-4px); }
  30% { opacity: 0.65; transform: translateY(0); }
  45% { opacity: 0.9; transform: translateY(-3px); }
  60%, 100% { opacity: 0.65; transform: translateY(0); }
}

/* ─── SVG arrow ────────────────────────────────────────────────
   Thick, glowing, undeniable. */
.onboarding-arrow {
  position: absolute;
  z-index: 9991;
  pointer-events: none;
  overflow: visible;
}

.onboarding-arrow path {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 6px rgba(26, 26, 46, 0.5))
    drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

/* Draw-in animation — smooth reveal */
.onboarding-arrow path.onb-draw-in {
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  animation: onb-draw 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
}

@keyframes onb-draw {
  to { stroke-dashoffset: 0; }
}

/* Arrowhead — pops in with scale after line draws */
.onboarding-arrow polygon {
  fill: #fff;
  opacity: 0;
  transform-origin: center;
  filter:
    drop-shadow(0 0 6px rgba(26, 26, 46, 0.5))
    drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  animation: onb-arrowhead-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards;
}

@keyframes onb-arrowhead-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ─── Skip button ──────────────────────────────────────────────
   Subtle glassmorphic pill — present but not competing. */
.onboarding-skip {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9995;
  padding: 8px 20px;
  font-family: 'Caveat', cursive;
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
  animation: onb-annotation-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  -webkit-tap-highlight-color: transparent;
}

.onboarding-skip:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(26, 26, 46, 0.4);
  box-shadow: 0 0 16px rgba(26, 26, 46, 0.2);
}

.onboarding-skip:active {
  transform: scale(0.94);
}

/* ─── Step counter ─────────────────────────────────────────────
   Understated — information, not decoration. */
.onboarding-counter {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9995;
  font-family: 'Caveat', cursive;
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: onb-annotation-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  letter-spacing: 0.05em;
}

/* ─── Responsive (mobile) ──────────────────────────────────────
   Mobile is the primary viewport — keep text bold and readable. */
@media (max-width: 768px) {
  .onboarding-text {
    font-size: 1.65rem;
    max-width: 280px;
    padding: 8px 20px;
    white-space: normal;  /* Allow wrap — nowrap + max-width conflicts on narrow screens */
  }
  .onboarding-tap-hint {
    font-size: 0.95rem;
  }
  .onboarding-skip {
    top: 10px;
    right: 10px;
    padding: 6px 16px;
    font-size: 1rem;
  }
  .onboarding-counter {
    top: 12px;
    font-size: 1rem;
  }
}

/* ─── Large screens ────────────────────────────────────────────
   Scale up for desktop — annotation should still command attention. */
@media (min-width: 1024px) {
  .onboarding-text {
    font-size: 2.1rem;
    max-width: 400px;
    padding: 12px 28px;
  }
  .onboarding-tap-hint {
    font-size: 1.15rem;
  }
}