/* GENERATED by build_css_bundles.sh - do not edit. Sources, in order: style.css components.css ui-sections.css responsive.css mobile-nav-fix.css cutter-theme.css */

/* ===== style.css ===== */
:root {
  /* Colors */
  --primary: #ff7780;
  /* Coral */
  --primary-dark: #e65960;
  /* Darker Coral */
  --primary-light: #ffb3b8;
  /* Light Coral */
  --secondary: #ff9aa0;
  /* Gradient Accent */
  --secondary-dark: #e65960;
  --success: #10b981;
  --error: #ef4444;
  --warning: #f59e0b;

  /* Neutral Colors */
  --bg-dark: #0f172a;
  --bg-darker: #020617;
  --bg-light: #f8fafc;
  --bg-lighter: #ffffff;
  --text-dark: #1e293b;
  --text-light: #f1f5f9;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --border-dark: #334155;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px rgba(255, 119, 128, 0.3);

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--bg-light);
  overflow-x: hidden;
}

body.dark-mode {
  color: var(--text-light);
  background: var(--bg-dark);
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

h1 {
  font-size: var(--font-size-5xl);
}

h2 {
  font-size: var(--font-size-4xl);
}

h3 {
  font-size: var(--font-size-3xl);
}

h4 {
  font-size: var(--font-size-2xl);
}

h5 {
  font-size: var(--font-size-xl);
}

h6 {
  font-size: var(--font-size-lg);
}

p {
  margin-bottom: var(--space-md);
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--primary-dark);
}

/* Container */
.container {
  max-width: 1320px;
  margin: 0 auto;
}

.container-narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-base);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}

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

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.btn-secondary {
  background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-secondary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

.btn-outline:hover:not(:disabled) {
  background: var(--primary);
  color: white;
}

.btn-sm {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--space-lg) var(--space-2xl);
  font-size: var(--font-size-lg);
}

/* Input Fields */
.input-group {
  margin-bottom: var(--space-lg);
}

.input-label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--text-dark);
}

.dark-mode .input-label {
  color: var(--text-light);
}

.input-field {
  width: 100%;
  padding: var(--space-md);
  font-size: var(--font-size-base);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-lighter);
  color: var(--text-dark);
  transition: all var(--transition-base);
  font-size: 1.2rem;
}

.input-field:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.dark-mode .input-field {
  background: var(--bg-darker);
  color: var(--text-light);
  border-color: var(--border-dark);
}

.input-error {
  color: var(--error);
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
}

/* Cards */
.card {
  background: var(--bg-lighter);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.dark-mode .card {
  background: var(--bg-darker);
  border: 1px solid var(--border-dark);
}

/* Progress Bar */
.progress-container {
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: var(--radius-full);
  transition: width var(--transition-slow), opacity 0.3s ease;
  position: relative;
  overflow: hidden;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* Loading Spinner */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.spinner-lg {
  width: 40px;
  height: 40px;
  border-width: 4px;
}

/* Alerts (legacy) */
.alert {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.alert-success {
  background: rgba(16, 185, 129, 0.1);
  border-left: 4px solid var(--success);
  color: var(--success);
}

.alert-error {
  background: rgba(239, 68, 68, 0.1);
  border-left: 4px solid var(--error);
  color: var(--error);
}

.alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border-left: 4px solid var(--warning);
  color: var(--warning);
}

/* ── Premium Toast Notifications ── */
.toast-container {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  pointer-events: none;
}

.toast {
  pointer-events: all;
  /* min() keeps toasts inside 320-360px phone screens instead of overflowing */
  min-width: min(340px, calc(100vw - 24px));
  max-width: min(440px, calc(100vw - 24px));
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 1rem 1rem 1rem 1.125rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.02);
  animation: toastSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

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

.toast.toast-dismissing {
  animation: toastSlideOut 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.toast-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3.5px;
  border-radius: 14px 0 0 14px;
}

.toast-error .toast-accent { background: linear-gradient(180deg, #ef4444, #dc2626); }
.toast-success .toast-accent { background: linear-gradient(180deg, #10b981, #059669); }
.toast-warning .toast-accent { background: linear-gradient(180deg, #f59e0b, #d97706); }

.toast-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast-error .toast-icon-wrap { background: rgba(239, 68, 68, 0.1); }
.toast-success .toast-icon-wrap { background: rgba(16, 185, 129, 0.1); }
.toast-warning .toast-icon-wrap { background: rgba(245, 158, 11, 0.1); }

.toast-icon-wrap svg {
  width: 18px;
  height: 18px;
}

.toast-error .toast-icon-wrap svg { color: #dc2626; }
.toast-success .toast-icon-wrap svg { color: #059669; }
.toast-warning .toast-icon-wrap svg { color: #d97706; }

.toast-body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.toast-heading {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 650;
  color: #0f172a;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.toast-desc {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  color: #64748b;
  line-height: 1.5;
  margin-top: 3px;
  word-break: break-word;
}

.toast-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 8px;
  color: #94a3b8;
  transition: all 0.15s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -2px;
  margin-right: -4px;
}

.toast-close-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #475569;
}

.toast-close-btn svg {
  width: 14px;
  height: 14px;
}

.toast-timer {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2.5px;
  border-radius: 0 0 14px 14px;
  opacity: 0.7;
  animation: toastTimer 5s linear forwards;
}

.toast-error .toast-timer { background: linear-gradient(90deg, #ef4444, #fca5a5); }
.toast-success .toast-timer { background: linear-gradient(90deg, #10b981, #6ee7b7); }
.toast-warning .toast-timer { background: linear-gradient(90deg, #f59e0b, #fcd34d); }

.toast:hover .toast-timer {
  animation-play-state: paused;
}

@keyframes toastSlideIn {
  0% {
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem)) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toastSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
    max-height: 200px;
    margin-bottom: 0;
  }
  50% {
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem)) scale(0.96);
    max-height: 200px;
    margin-bottom: 0;
  }
  100% {
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem)) scale(0.96);
    max-height: 0;
    margin-bottom: -0.625rem;
    padding-top: 0;
    padding-bottom: 0;
  }
}

@keyframes toastTimer {
  from { width: 100%; }
  to { width: 0%; }
}

@media (max-width: 480px) {
  .toast-container {
    left: 0.75rem;
    right: 0.75rem;
    top: 0.75rem;
  }
  .toast {
    min-width: 0;
    max-width: 100%;
  }
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-primary {
  background: var(--primary);
  color: white;
}

.badge-success {
  background: var(--success);
  color: white;
}

.badge-error {
  background: var(--error);
  color: white;
}

/* Fade In Animation */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide In Animation */
.slide-in {
  animation: slideIn 0.6s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale Animation */
.scale-in {
  animation: scaleIn 0.4s ease-out;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.mt-1 {
  margin-top: var(--space-sm);
}

.mt-2 {
  margin-top: var(--space-md);
}

.mt-3 {
  margin-top: var(--space-lg);
}

.mt-4 {
  margin-top: var(--space-xl);
}

.mb-1 {
  margin-bottom: var(--space-sm);
}

.mb-2 {
  margin-bottom: var(--space-md);
}

.mb-3 {
  margin-bottom: var(--space-lg);
}

.mb-4 {
  margin-bottom: var(--space-xl);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: var(--space-sm);
}

.gap-2 {
  gap: var(--space-md);
}

.gap-3 {
  gap: var(--space-lg);
}

.hidden {
  display: none !important;
}

.block {
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  :root {
    --font-size-5xl: 2rem;
    --font-size-4xl: 1.75rem;
    --font-size-3xl: 1.5rem;
  }

  .container {
    padding: 0 var(--space-md);
  }

  .btn {
    width: 100%;
    justify-content: center;
  }
}
/* Google login temporarily hidden — not using Google auth right now (2026-07-08).
   Hides both Google buttons (login + checkout views) and the now-orphaned
   "OR" divider that separated them from email login, across all pages. */
#ytc-premium-popup .prem-btn-google,
#ytc-premium-popup .prem-or { display: none !important; }

/* ============================================================
   Navbar CTAs — coral design system (replaces legacy amber/green)
   Buttons carry inline layout styles per element; these rules add
   the shared hover/interaction polish across every page.
   ============================================================ */

/* Prominent "YTMP3" primary navigation item.
   A highlighted coral-outlined pill so it reads as an intentional
   primary tool link, one tier above the plain text nav-links. */
.nav-link.ytmp3-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 8px;
  font-weight: 700;
  color: #fff !important;
  background: rgba(255, 119, 128, 0.10);
  border: 1px solid rgba(255, 119, 128, 0.55);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-link.ytmp3-link:hover {
  background: rgba(255, 119, 128, 0.22);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 119, 128, 0.28);
}
.nav-link.ytmp3-link svg { opacity: 0.95; }

/* "Get Premium" CTA — modern coral SaaS button (desktop + mobile).
   Base fill/padding/radius live inline on each element; the hover,
   active and focus polish is centralised here. */
.premium-nav-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.premium-nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255, 119, 128, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  filter: brightness(1.04);
}
.premium-nav-btn:active { transform: translateY(0); }
.premium-nav-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.premium-nav-btn-mobile {
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.premium-nav-btn-mobile:hover { filter: brightness(1.04); }
.premium-nav-btn-mobile:active { transform: scale(0.97); }

/* ===== components.css ===== */
/* Navigation Bar */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-base);
}

.dark-mode .navbar {
    background: rgba(15, 23, 42, 0.95);
    border-bottom: 1px solid var(--border-dark);
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg) 0;
}

.navbar-logo {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
}

.navbar-menu {
    display: flex;
    gap: var(--space-xl);
    list-style: none;
    align-items: center;
}

.navbar-link {
    font-weight: 500;
    color: var(--text-dark);
    transition: color var(--transition-base);
    position: relative;
}

.navbar-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width var(--transition-base);
}

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

.dark-mode .navbar-link {
    color: var(--text-light);
}

.dark-mode-toggle {
    background: none;
    border: none;
    font-size: var(--font-size-2xl);
    cursor: pointer;
    transition: transform var(--transition-base);
}

.dark-mode-toggle:hover {
    transform: rotate(180deg);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: var(--font-size-2xl);
    cursor: pointer;
    color: var(--text-dark);
}

.dark-mode .mobile-menu-btn {
    color: var(--text-light);
}

/* Hero Section */
.hero {
    padding: var(--space-3xl) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(37, 99, 235, 0.1), transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(139, 92, 246, 0.1), transparent 50%);
    z-index: -1;
}

.hero-title {
    font-size: var(--font-size-5xl);
    margin-bottom: var(--space-lg);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    color: var(--text-muted);
    margin-bottom: var(--space-2xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    gap: var(--space-lg);
    justify-content: center;
    flex-wrap: wrap;
}

/* Features Grid */
.features {
    padding: var(--space-3xl) 0;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.section-title {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-md);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-muted);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.feature-card {
    text-align: center;
    padding: var(--space-2xl);
    background: var(--bg-lighter);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transform: scaleX(0);
    transition: transform var(--transition-base);
    transform-origin: left;
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.dark-mode .feature-card {
    background: var(--bg-darker);
    border: 1px solid var(--border-dark);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: var(--space-lg);
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.feature-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-md);
}

.feature-description {
    color: var(--text-muted);
    margin: 0;
}

/* Footer */
.footer {
    background: var(--bg-dark);
    color: var(--text-light);
    padding: var(--space-3xl) 0 var(--space-xl);
    margin-top: var(--space-3xl);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.footer-section h3 {
    margin-bottom: var(--space-lg);
    color: var(--text-light);
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: var(--space-sm);
}

.footer-links a {
    color: var(--text-muted);
    transition: color var(--transition-base);
}

.footer-links a:hover {
    color: var(--primary-light);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-dark);
    color: var(--text-muted);
}

/* Responsive Mobile Menu */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
    }

    .navbar-menu {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--bg-lighter);
        padding: var(--space-lg);
        box-shadow: var(--shadow-lg);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-base);
    }

    .dark-mode .navbar-menu {
        background: var(--bg-darker);
    }

    .navbar-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }
}
/* ===== ui-sections.css ===== */
/* ============================================
   PREMIUM DESIGN SYSTEM — YouTube Video Downloader
   ============================================ */

/* === EXTENDED DESIGN TOKENS === */
:root {
    --teal-50:  #fff1f2;
    --teal-100: #ffe4e6;
    --teal-400: #ff7780;
    --teal-500: #ff7780;
    --teal-600: #e65960;
    --teal-700: #e65960;
    --teal-900: #9f1239;
    --ink:       #060f0f;
    --ink-light: #1a2e2e;
    --card-border: rgba(255, 119, 128, 0.13);
    --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 20px rgba(255,119,128,0.08);
    --card-shadow-hover: 0 20px 60px rgba(255,119,128,0.22), 0 4px 14px rgba(0,0,0,0.07);
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero-section {
    position: relative;
    min-height: 92vh;
    background: #0f172a;
    background-image: url('/images/hero_bg.png');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
}

/* Layered gradient mesh overlay */
.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255,119,128,0.22) 0%, transparent 65%),
        linear-gradient(180deg,
            rgba(6,20,20,0.72) 0%,
            rgba(6,20,20,0.50) 45%,
            rgba(6,20,20,0.78) 100%);
    z-index: 0;
}

/* Ambient pulsing orb — the soul of the hero */
.hero-overlay::after {
    content: '';
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 680px;
    height: 680px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,119,128,0.13) 0%, transparent 68%);
    animation: hero-orb 9s ease-in-out infinite alternate;
    will-change: transform, opacity;
    pointer-events: none;
}

@keyframes hero-orb {
    from { transform: translate(-50%, -50%) scale(0.88); opacity: 0.55; }
    to   { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

/* When a popup is open, freeze hero animations so the GPU isn't compositing
   the moving hero behind the modal (residual popup lag). */
body.popup-open .hero-overlay::after,
body.popup-open .hero-input-group::after {
    animation-play-state: paused;
}

/* Page-load entrance */
@keyframes hero-rise {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── NAVIGATION ─────────────────────────────── */

.hero-nav {
    position: relative;
    z-index: 10000;
    padding: 1.5rem 0;
    /* Solid-translucent instead of backdrop blur: a frosted nav has to
       re-blur the animated orb behind it every frame = hero jank. */
    background: rgba(6,20,20,0.62);
    border-bottom: 1px solid rgba(255,255,255,0.055);
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo { display: flex; align-items: center; }

/* ── LOGO BRAND — SVG icon + text ── */
.logo-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
}

.logo-brand:hover { opacity: 0.88; }

/* PNG brand logo (nav + footer) */
.logo-img {
    height: 56px;
    width: auto;
    display: block;
}
.footer-enhanced .logo-brand .logo-img { height: 46px; }

.logo-text {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: white;
    text-transform: uppercase;
    line-height: 1;
}

/* Footer logo — same brand but slightly larger text */
.footer-enhanced .logo-brand .logo-text {
    font-size: 1rem;
    letter-spacing: 0.09em;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color 0.18s ease;
}

.nav-link:hover { color: #fff; }

/* ── HERO CONTENT ───────────────────────────── */

.hero-content {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 1.5rem 6rem;
    text-align: center;
    animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Headline — large, tight, luminous */
.hero-title {
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(2.1rem, 5.5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin: 0 auto 2.75rem;
    max-width: 900px;
    text-shadow: 0 2px 40px rgba(0,0,0,0.25);
}

/* ── INPUT WRAPPER + SIGNATURE GLOW ─────────── */

.hero-input-wrapper {
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

/* The signature pulsing glow. Animates opacity of a composited layer (GPU)
   instead of box-shadow, which would force a full repaint every frame.
   Same look, no jank. */
@keyframes input-glow-pulse {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

.hero-input-group {
    display: flex;
    gap: 0;
    margin-bottom: 1.1rem;
    border-radius: 18px;
    position: relative;
    /* static depth shadow + hairline ring (no per-frame repaint) */
    box-shadow:
        0 24px 72px rgba(0,0,0,0.38),
        0 0 0 1px rgba(255,255,255,0.11);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Pulsing teal glow lives on its own layer; only opacity animates */
.hero-input-group::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    box-shadow: 0 0 72px rgba(255,119,128,0.30);
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    animation: input-glow-pulse 5s ease-in-out infinite;
}

/* round inner controls since the group no longer clips via overflow:hidden */
.hero-input { border-radius: 18px 0 0 18px; }
.hero-btn   { border-radius: 0 18px 18px 0; }

/* Focused: glow amplifies, input lifts */
.hero-input-group:focus-within {
    transform: translateY(-2px);
    box-shadow:
        0 28px 80px rgba(0,0,0,0.42),
        0 0 0 2px rgba(255,119,128,0.7) !important;
}
.hero-input-group:focus-within::after {
    opacity: 1;
    animation-play-state: paused;
}

.hero-input {
    flex: 1;
    padding: 1.2rem 1.75rem;
    border: none;
    font-size: 1.05rem;
    font-family: 'Nunito', sans-serif;
    outline: none;
    background: rgba(255,255,255,0.97);
    color: #060f0f;
    min-width: 0;
}

.hero-input::placeholder {
    color: #94a3b8;
}

.hero-btn {
    padding: 1.2rem 2.25rem;
    background: linear-gradient(135deg, #e65960 0%, #ff7780 55%, #ff7780 100%);
    color: white;
    border: none;
    font-family: 'Nunito', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.22s ease, letter-spacing 0.22s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.hero-btn:hover:not(:disabled) {
    filter: brightness(1.12);
    letter-spacing: 0.09em;
}

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

.hero-terms {
    color: rgba(255,255,255,0.5);
    font-size: 0.78rem;
    margin: 0;
    letter-spacing: 0.01em;
}

.hero-link {
    color: rgba(255,255,255,0.7);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hero-link:hover { color: white; }

/* ── HERO RESPONSIVE ────────────────────────── */

@media (max-width: 768px) {
    .hero-section {
        min-height: 100vh;
        min-height: 100svh;
    }

    .hero-title {
        font-size: clamp(1.9rem, 8vw, 2.9rem);
        letter-spacing: -0.025em;
    }

    .hero-content {
        padding: 2.5rem 1.25rem 5rem;
    }

    .hero-input-group {
        flex-direction: column;
        border-radius: 18px;
    }

    .hero-input {
        border-radius: 18px 18px 0 0;
        padding: 1.1rem 1.25rem;
    }

    .hero-btn {
        border-radius: 0 0 18px 18px;
        padding: 1.1rem;
    }

    .nav-menu {
        gap: 0.9rem;
    }

    .nav-link {
        font-size: 0.82rem;
    }

    .logo-img {
        height: 50px;
    }
}

/* ============================================
   TOOL SWITCHER — Premium Pill Tabs
   ============================================ */

.tool-switcher {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 760px;
    margin: 0 auto 3rem;
}

.tool-switch-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0.85rem 1.1rem;
    min-height: 50px;
    border-radius: 100px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.78);
    /* solid translucent instead of backdrop blur (re-blurred the animated orb) */
    background: rgba(255,255,255,0.12);
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
    touch-action: manipulation;
    user-select: none;
    box-sizing: border-box;
    text-align: center;
}

.tool-switch-btn:hover {
    background: rgba(255,255,255,0.13);
    border-color: rgba(255,255,255,0.38);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.22);
}

.tool-switch-btn.active {
    background: rgba(255,255,255,0.94);
    border-color: transparent;
    color: #e65960;
    cursor: default;
    pointer-events: none;
    font-weight: 700;
    box-shadow:
        0 4px 20px rgba(0,0,0,0.2),
        0 0 0 1px rgba(255,255,255,0.5),
        0 0 24px rgba(255,119,128,0.15);
}

.tool-switch-btn svg { flex-shrink: 0; }

@media (max-width: 640px) {
    .tool-switcher {
        flex-direction: column;
        gap: 6px;
        width: 100%;
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem;
    }
    .tool-switch-btn {
        flex: none;
        width: 100%;
        padding: 0.75rem 1.2rem;
        font-size: 0.88rem;
        min-height: 48px;
        border-radius: 100px;
        justify-content: center;
    }
    .tool-switch-btn svg { width: 15px; height: 15px; }
}

/* ============================================
   SECTION TITLES — Universal
   ============================================ */

.section-title {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1rem;
    color: #060f0f;
    text-align: center;
}

.dark-mode .section-title { color: #f1f5f9; }

.text-primary { color: #ff7780 !important; }

/* Elegant section separator line */
.section-line {
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, #ff7780, #ff7780);
    border-radius: 100px;
    margin: 0 auto 3rem;
}

/* ============================================
   ALL-IN-ONE TOOLS SECTION
   ============================================ */

.yt-tools-section {
    padding: 6.5rem 0 7.5rem;
    background: #ffffff;
    position: relative;
}

.yt-tools-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,119,128,0.05) 0%, transparent 60%);
    pointer-events: none;
}

.dark-mode .yt-tools-section { background: var(--bg-dark); }

.yt-tools-header {
    text-align: center;
    margin-bottom: 4rem;
}

.yt-tools-header h2 {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #060f0f;
    margin-bottom: 1rem;
}

.dark-mode .yt-tools-header h2 { color: #f1f5f9; }

.yt-tools-header p {
    color: #4a6e6e;
    font-size: 1.05rem;
    line-height: 1.72;
    max-width: 520px;
    margin: 0 auto;
}

.yt-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .yt-tools-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
    }
}

/* ── TOOL CARDS — gradient border technique ── */
.yt-tool-card {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    padding: 2.5rem 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    cursor: pointer;
    /* gradient border via background-clip technique */
    border: 1.5px solid transparent;
    background-clip: padding-box;
    box-shadow: var(--card-shadow);
    outline: 1.5px solid rgba(255,119,128,0.12);
    outline-offset: 0px;
    transition:
        transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.28s ease,
        outline-color 0.2s ease;
}

.yt-tool-card::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: 25.5px;
    background: linear-gradient(135deg,
        rgba(255,119,128,0.5) 0%,
        rgba(255,119,128,0.1) 40%,
        rgba(255,119,128,0) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.yt-tool-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--card-shadow-hover);
    outline-color: rgba(255,119,128,0);
    text-decoration: none;
}

.yt-tool-card:hover::before { opacity: 1; }

.yt-tool-card:focus-visible {
    outline: 3px solid #ff7780;
    outline-offset: 3px;
}

.dark-mode .yt-tool-card {
    background: var(--bg-darker);
    border-color: var(--border-dark);
}

/* Icon wrap */
.yt-tool-icon-wrap {
    width: 58px;
    height: 58px;
    background: linear-gradient(135deg,
        rgba(255,119,128,0.18) 0%,
        rgba(255,119,128,0.08) 100%);
    border-radius: 16px;
    border: 1px solid rgba(255,119,128,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: #e65960;
    flex-shrink: 0;
    transition: background 0.22s ease, transform 0.22s ease;
}

.yt-tool-card:hover .yt-tool-icon-wrap {
    background: linear-gradient(135deg,
        rgba(255,119,128,0.28) 0%,
        rgba(255,119,128,0.14) 100%);
    transform: scale(1.08) rotate(-2deg);
}

.yt-tool-card h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #060f0f;
    margin-bottom: 0.875rem;
    text-decoration: none;
    letter-spacing: -0.015em;
}

.dark-mode .yt-tool-card h3 { color: #f1f5f9; }

.yt-tool-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    flex: 1;
}

.yt-tool-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #4a6e6e;
    line-height: 1.65;
    margin-bottom: 0.25rem;
}

.dark-mode .yt-tool-features li { color: #94a3b8; }

.yt-check {
    flex-shrink: 0;
    margin-top: 3px;
    color: #ff7780;
}

.yt-tool-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #e65960;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: gap 0.2s ease, color 0.2s ease;
    text-decoration: none;
}

.yt-tool-card:hover .yt-tool-cta {
    gap: 0.7rem;
    color: #e65960;
}

/* ============================================
   FEATURES SECTION
   ============================================ */

.features-section {
    padding: 6.5rem 0 7.5rem;
    background: var(--teal-50, #fff1f2);
    position: relative;
    overflow: hidden;
}

.features-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,119,128,0.3), transparent);
}

/* Subtle decorative blob */
.features-section::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,119,128,0.06) 0%, transparent 70%);
    right: -200px;
    top: -100px;
    pointer-events: none;
}

.dark-mode .features-section { background: var(--bg-dark); }

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

@media (max-width: 1024px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
    .features-grid { grid-template-columns: 1fr; }
}

/* Feature cards — elevated white on light-teal bg */
.feature-card {
    padding: 2.5rem 1.75rem 2.25rem;
    border-radius: 22px;
    background: #ffffff;
    transition:
        transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.28s ease;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03), 0 6px 20px rgba(255,119,128,0.07);
    outline: 1px solid rgba(255,119,128,0.1);
    position: relative;
    overflow: hidden;
}

/* Top accent line on cards */
.feature-card::after {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,119,128,0.5), transparent);
    border-radius: 100px;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--card-shadow-hover);
    outline-color: rgba(255,119,128,0.3);
}

.feature-card:hover::after { opacity: 1; }

.dark-mode .feature-card { background: var(--bg-darker); }

.feature-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        rgba(255,119,128,0.15) 0%,
        rgba(255,119,128,0.07) 100%);
    border-radius: 20px;
    border: 1px solid rgba(255,119,128,0.15);
    transition: background 0.22s ease, transform 0.22s ease;
}

.feature-card:hover .feature-icon {
    background: linear-gradient(135deg,
        rgba(255,119,128,0.25) 0%,
        rgba(255,119,128,0.12) 100%);
    transform: scale(1.08) rotate(-3deg);
}

.feature-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.feature-icon svg {
    color: #e65960;
    stroke: #e65960;
}

.feature-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #060f0f;
    letter-spacing: -0.01em;
}

.dark-mode .feature-title { color: #f1f5f9; }

.feature-description {
    font-size: 0.875rem;
    color: #4a6e6e;
    line-height: 1.68;
}

/* ============================================
   FAQ SECTION
   ============================================ */

.faq-section {
    padding: 6.5rem 0 7.5rem;
    background: #ffffff;
    position: relative;
}

.faq-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,119,128,0.2), transparent);
}

.dark-mode .faq-section { background: var(--bg-dark); }

.faq-container {
    max-width: 840px;
    margin: 0 auto;
    background: transparent;
    border: none;
    padding: 0;
}

.dark-mode .faq-container {
    background: var(--bg-darker);
    border-color: var(--border-dark);
}

.faq-item {
    border-bottom: 1px solid rgba(255,119,128,0.11);
}

.faq-item:last-child { border-bottom: none; }

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #0a1e1e;
    text-align: left;
    transition: color 0.2s ease;
    gap: 1.25rem;
}

.dark-mode .faq-question { color: #f1f5f9; }

.faq-question:hover { color: #e65960; }

.faq-icon {
    flex-shrink: 0;
    opacity: 0.5;
    stroke: currentColor;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
    opacity: 1;
    color: #ff7780;
}

.faq-item.active .faq-question { color: #e65960; }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding-bottom: 1.5rem;
}

.faq-answer p {
    color: #4a6e6e;
    font-size: 0.95rem;
    line-height: 1.78;
    margin: 0;
}

/* ============================================
   CTA SECTION — DRAMATIC
   ============================================ */

.cta-section {
    padding: 5rem 0 6rem;
    background: var(--teal-50, #fff1f2);
    position: relative;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,119,128,0.3), transparent);
}

.dark-mode .cta-section { background: var(--bg-darker); }

.cta-box {
    max-width: 1200px;
    margin: 0 auto;
    background: linear-gradient(130deg,
        #e65960 0%,
        #e65960 28%,
        #ff7780 62%,
        #ff7780 100%);
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    /* Static gradient — the 8s background-position drift forced a full-box
       repaint every frame for a barely-perceptible color shift. Removed. */
}

/* Decorative circles */
.cta-box::before {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    right: -120px;
    top: -220px;
    pointer-events: none;
}

.cta-box::after {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    left: -80px;
    bottom: -130px;
    pointer-events: none;
}

.cta-title {
    position: relative;
    z-index: 1;
    padding: 5.5rem 2rem;
    text-align: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: white;
    margin: 0;
    text-shadow: 0 2px 30px rgba(0,0,0,0.12);
}

@media (max-width: 768px) {
    .cta-title {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
        padding: 4rem 1.5rem;
    }
}

/* ============================================
   FOOTER — DARK CINEMATIC ANCHOR
   ============================================ */

.footer-enhanced {
    padding: 5rem 0 2.75rem;
    background: transparent;
    border-top: none;
    position: relative;
}

.footer-enhanced::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,119,128,0.45), transparent);
}

.dark-mode .footer-enhanced {
    background: #020a0a;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2.25fr 1fr 1fr 1fr;
    gap: 3.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 560px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    height: 64px;
    width: auto;
    object-fit: contain;
    margin-bottom: 1.25rem;
}

@media (max-width: 560px) {
    .footer-logo { margin: 0 auto 1.25rem; }
}

.footer-heading {
    font-family: 'Nunito', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    color: #334155;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.footer-link {
    color: #475569;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.18s ease;
}

.footer-link:hover { color: #ff7780; }

.footer-text {
    color: #64748b;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    line-height: 1.65;
}

.footer-bottom {
    max-width: 1200px;
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.09);
    text-align: center;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.65;
}

/* ============================================
   SEO CONTENT SECTION
   ============================================ */

.seo-content {
    padding: 5.5rem 1.5rem;
    background: #f8fafc;
    position: relative;
}

.seo-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,119,128,0.2), transparent);
}

.dark-mode .seo-content { background: var(--bg-darker); }

.seo-content .container {
    max-width: 820px;
    margin: 0 auto;
}

.seo-content h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #060f0f;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.seo-content h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #060f0f;
    margin: 2rem 0 0.75rem;
    letter-spacing: -0.01em;
}

.seo-content p {
    font-size: 0.94rem;
    color: #4a6e6e;
    line-height: 1.82;
    margin-bottom: 0.875rem;
}

.seo-content ol,
.seo-content ul {
    margin: 0 0 0.875rem 1.5rem;
    padding: 0;
}

.seo-content li {
    font-size: 0.94rem;
    color: #4a6e6e;
    line-height: 1.82;
    margin-bottom: 0.35rem;
}

.dark-mode .seo-content h2,
.dark-mode .seo-content h3 { color: #f1f5f9; }

.dark-mode .seo-content p,
.dark-mode .seo-content li { color: #94a3b8; }

/* ── Support Us donation button: periodic attention "shake" (all pages) ── */
@keyframes support-shake {
  0%, 86%, 100% { transform: translateX(0) rotate(0deg); }
  87.5% { transform: translateX(-4px) rotate(-3deg); }
  89%   { transform: translateX(4px)  rotate(3deg); }
  90.5% { transform: translateX(-4px) rotate(-3deg); }
  92%   { transform: translateX(4px)  rotate(3deg); }
  93.5% { transform: translateX(-2px) rotate(-1.5deg); }
  95%   { transform: translateX(2px)  rotate(1.5deg); }
}
.support-us-btn {
  animation: support-shake 3s ease-in-out 1s infinite;
  transform-origin: center;
}
.support-us-btn:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .support-us-btn { animation: none; } }

/* Legacy fixed-amount donate popup hidden entirely in favor of the Support Us button */
.donate-mini { display: none !important; }

/* ===== responsive.css ===== */
/* ============================================
   MOBILE RESPONSIVE STYLES FOR ALL PAGES
   ============================================ */

/* Hide mobile menu toggle by default (desktop) */
.mobile-menu-toggle {
    display: none;
}

/* Mobile Navigation */
@media (max-width: 768px) {

    /* Container Padding */
    .container {
        padding: 0 1rem !important;
    }

    /* Fix hero navigation background on mobile */
    .hero-nav {
        background: rgba(121, 64, 254, 0.98) !important;
        backdrop-filter: blur(10px);
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    /* Navigation content positioning */
    .nav-content {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0;
    }

    /* Navigation Menu - Hamburger Menu */
    .nav-menu {
        display: none;
        position: fixed;
        top: 68px;
        left: 0;
        right: 0;
        flex-direction: column;
        background: rgba(4, 14, 14, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 0.5rem 1rem 1rem;
        gap: 0 !important;
        row-gap: 0 !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
        border-bottom: 1px solid rgba(255, 119, 128, 0.12);
        z-index: 999;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .nav-menu.active {
        display: flex;
        max-height: 520px;
        padding: 0.5rem 1rem 1rem;
    }

    .nav-menu li {
        width: 100%;
        text-align: center;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-link {
        display: block;
        padding: 0.55rem 1rem;
        font-size: 0.9rem;
        font-weight: 500;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.82) !important;
        border-radius: 8px;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .nav-link:hover {
        background: rgba(255, 119, 128, 0.1);
        color: #fff !important;
    }

    /* Dropdown toggles — center them like regular links */
    .nav-dropdown-toggle {
        justify-content: center !important;
    }

    /* Dropdown sub-menus — compact */
    .nav-dropdown-menu {
        margin: 0 0 0.25rem !important;
    }

    /* Show Get Premium button next to burger on mobile — pushed to the right so it
       sits beside the menu toggle instead of floating in the navbar center. */
    .premium-nav-btn-mobile {
        display: inline-flex !important;
        margin-left: auto !important;
        margin-right: 0.5rem !important;
    }

    /* Hide the Get Premium button inside burger menu on mobile */
    .nav-menu .premium-nav-btn {
        display: none !important;
    }

    /* Mobile Menu Toggle Button */
    .mobile-menu-toggle {
        display: block !important;
        position: relative;
        background: none;
        border: none;
        color: white;
        font-size: 1.75rem;
        cursor: pointer;
        padding: 0.5rem;
        line-height: 1;
        z-index: 1001;
        transition: transform 0.2s ease;
    }

    .mobile-menu-toggle:hover {
        transform: scale(1.1);
    }

    .mobile-menu-toggle:active {
        transform: scale(0.95);
    }

    /* Hero Section */
    .hero-section {
        min-height: auto !important;
    }

    .hero-title {
        font-size: clamp(1rem, 5vw, 2.5rem) !important;
        white-space: nowrap;
        letter-spacing: -0.025em;
        padding: 0;
    }

    .hero-input-wrapper {
        padding: 0 0.5rem;
    }

    .hero-input-group {
        flex-direction: column;
    }

    .hero-input {
        border-radius: 8px 8px 0 0 !important;
        font-size: 0.95rem;
    }

    .hero-btn {
        border-radius: 0 0 8px 8px !important;
        padding: 0.875rem 1rem;
    }

    /* Video Editor Layout */
    .video-editor {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .main-container {
        padding: 1rem !important;
    }

    /* Format and Quality Row */
    .format-quality-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* Tabs */
    .tabs {
        flex-direction: row;
    }

    .tab {
        font-size: 0.85rem;
        padding: 0.6rem 0.75rem;
    }

    /* Time Inputs */
    .time-row {
        gap: 0.5rem !important;
    }

    .time-input-small {
        font-size: 0.85rem;
    }

    /* Action Buttons */
    .action-row {
        flex-direction: column;
    }

    .action-row button {
        width: 100%;
    }

    /* Range Slider Labels */
    .range-slider-label {
        font-size: 0.7rem;
        padding: 0.1rem 0.3rem;
    }

    /* Features Grid */
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .feature-card {
        padding: 1.5rem 1rem;
    }

    .feature-title {
        font-size: 1rem;
    }

    .feature-description {
        font-size: 0.85rem;
    }

    /* FAQ Section */
    .faq-container {
        padding: 1rem;
    }

    .faq-question {
        font-size: 0.9rem;
        padding: 1rem 0;
    }

    .faq-answer p {
        font-size: 0.85rem;
    }

    /* Footer Grid */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        text-align: center;
    }

    .footer-logo {
        margin: 0 auto 1rem;
    }

    .footer-nav {
        align-items: center;
    }

    /* CTA Section */
    .cta-title {
        font-size: 1.5rem !important;
        padding: 2.5rem 1.5rem !important;
    }

    /* Section Titles */
    .section-title {
        font-size: 1.75rem !important;
        padding: 0 1rem;
    }

    /* Cards and Content Sections */
    .card {
        padding: 1rem !important;
    }

    /* About Page - Grid Layouts */
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Contact Page - Contact Grid */
    section div[style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }

    /* How To Use - Steps Grid */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }

    /* Video Player Section */
    .video-player-section {
        margin-bottom: 1rem;
    }

    .video-placeholder {
        min-height: 200px;
    }

    /* Format Dropdown */
    .format-dropdown {
        max-height: 200px;
    }

    /* Progress Section */
    .progress-info {
        flex-direction: column;
        gap: 0.25rem;
        text-align: center;
    }

    /* Download Link */
    #downloadLink {
        width: 100%;
        text-align: center;
    }

    /* Reset Button */
    #resetBtn {
        width: 100%;
    }

    /* Video Upload Section Fixes */
    #localUploadSection {
        width: 100%;
        overflow-x: hidden;
    }

    #localUploadSection .video-placeholder {
        min-height: 180px;
        width: 100%;
    }

    #localUploadSection video {
        width: 100%;
        height: auto;
        max-height: 250px;
    }

    /* Video title/filename text wrapping */
    #localUploadSection h3,
    #localUploadSection p {
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        white-space: normal;
    }

    /* Clip cards - Compact mobile design */
    #localUploadSection .clip-item {
        padding: 0.875rem !important;
        margin-bottom: 0.875rem !important;
        position: relative;
        border-radius: 12px !important;
    }

    #localUploadSection .clip-item h4 {
        font-size: 0.95rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Remove button - Better mobile styling */
    #localUploadSection .remove-clip {
        position: absolute !important;
        top: 0.75rem !important;
        right: 0.75rem !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.1rem !important;
        line-height: 1 !important;
        background: rgba(220, 38, 38, 0.1) !important;
        color: #dc2626 !important;
        border: 1px solid rgba(220, 38, 38, 0.3) !important;
    }

    #localUploadSection .remove-clip:hover {
        background: #dc2626 !important;
        color: white !important;
    }

    /* Time inputs compact */
    #localUploadSection .time-input-small {
        font-size: 0.9rem !important;
        padding: 0.6rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Labels */
    #localUploadSection label {
        font-size: 0.85rem !important;
        margin-bottom: 0.35rem !important;
    }

    /* Action buttons */
    #localUploadSection button {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Range slider */
    #localUploadSection input[type="range"] {
        width: 100%;
        margin: 0.5rem 0 !important;
    }

    /* Range slider label */
    #localUploadSection .range-slider-label {
        font-size: 0.75rem !important;
        padding: 0.15rem 0.4rem !important;
    }
}

/* Tablet Responsiveness (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 1.5rem;
    }

    .video-editor {
        grid-template-columns: 1fr !important;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hero-title {
        font-size: 2rem;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .hero-title {
        font-size: 1.5rem !important;
    }

    .section-title {
        font-size: 1.5rem !important;
    }

    .nav-link {
        font-size: 0.9rem;
    }

    .feature-icon {
        width: 48px;
        height: 48px;
    }

    .btn {
        font-size: 0.9rem;
        padding: 0.75rem 1.25rem;
    }

    .cta-title {
        font-size: 1.25rem !important;
    }

    /* Reduce padding on small screens */
    section[style*="padding: 4rem 0"] {
        padding: 2rem 0 !important;
    }

    .time-section {
        padding: 0.75rem;
    }

    .clip-item {
        padding: 0.5rem;
    }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: auto !important;
    }

    .hero-content {
        padding: 1.5rem 1rem !important;
    }

    .video-player-section {
        max-height: 300px;
    }
}

/* Print Styles */
@media print {

    .hero-nav,
    .footer-enhanced,
    .cta-section,
    .video-editor {
        display: none;
    }
}

/* Fix for inline styles on mobile - these override inline styles when needed */
@media (max-width: 768px) {

    /* About page grids */
    section>div>div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Padding overrides */
    section[style*="padding: 4rem 0"] {
        padding: 2.5rem 0 !important;
    }

    /* Contact page cards */
    div[style*="background: #f5f3ff; padding: 2rem"] {
        padding: 1.5rem !important;
    }

    /* How to use numbered circles */
    div[style*="width: 48px; height: 48px"] {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.25rem !important;
    }

    /* Max width containers */
    div[style*="max-width: 900px"],
    div[style*="max-width: 800px"] {
        padding: 0 1rem;
    }

    /* Text sizes */
    h2[style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
    }

    h3[style*="font-size: 1.25rem"] {
        font-size: 1.1rem !important;
    }
}

/* Accessibility - Larger touch targets on mobile */
@media (max-width: 768px) {

    button,
    a,
    .btn,
    .tab,
    .format-option {
        min-height: 44px;
        min-width: 44px;
    }

    /* Increase spacing for better touch interaction */
    .nav-menu li {
        margin: 0.25rem 0;
    }
}

/* ============================================
   MOBILE L - 525px BREAKPOINT
   ============================================ */
@media (max-width: 525px) {
    .hero-title {
        font-size: 1.6rem !important;
        line-height: 1.3;
        padding: 0 0.75rem;
    }

    .hero-input {
        font-size: 0.9rem;
        padding: 0.75rem;
    }

    .hero-btn {
        padding: 0.8rem 1rem;
        font-size: 0.95rem;
    }

    .section-title {
        font-size: 1.6rem !important;
    }

    .feature-card {
        padding: 1.25rem;
    }

    .feature-icon {
        width: 52px;
        height: 52px;
    }

    .feature-title {
        font-size: 1rem;
    }

    .feature-description {
        font-size: 0.875rem;
    }

    /* Grid fixes */
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Padding adjustments */
    section[style*="padding: 4rem 0"] {
        padding: 2.5rem 0 !important;
    }

    .container {
        padding: 0 1rem !important;
    }

    /* Video editor improvements */
    .local-upload-layout {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Button improvements */
    .btn {
        font-size: 0.9rem;
        padding: 0.8rem 1.25rem;
    }
}

/* ============================================
   MOBILE M - 375px BREAKPOINT
   ============================================ */
@media (max-width: 375px) {
    .hero-title {
        font-size: 1.4rem !important;
        line-height: 1.25;
        padding: 0 0.5rem;
    }

    .hero-input-wrapper {
        padding: 0 0.25rem;
    }

    .hero-input {
        font-size: 0.85rem;
        padding: 0.7rem;
    }

    .hero-btn {
        padding: 0.75rem 0.9rem;
        font-size: 0.9rem;
    }

    .section-title {
        font-size: 1.4rem !important;
        padding: 0 0.5rem;
    }

    .feature-card {
        padding: 1rem;
    }

    .feature-icon {
        width: 48px;
        height: 48px;
    }

    .feature-title {
        font-size: 0.95rem;
    }

    .feature-description {
        font-size: 0.825rem;
        line-height: 1.5;
    }

    /* Grid spacing */
    div[style*="grid-template-columns"] {
        gap: 1rem !important;
    }

    /* Text adjustments */
    h2[style*="font-size: 2rem"] {
        font-size: 1.35rem !important;
    }

    h3[style*="font-size: 1.25rem"] {
        font-size: 1rem !important;
    }

    p[style*="line-height: 1.8"] {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    /* Padding adjustments */
    section[style*="padding: 4rem 0"] {
        padding: 2rem 0 !important;
    }

    div[style*="padding: 1.5rem"] {
        padding: 1rem !important;
    }

    .container {
        padding: 0 0.875rem !important;
    }

    /* CTA improvements */
    .cta-title {
        font-size: 1.15rem !important;
        padding: 2rem 1rem !important;
    }

    /* Button improvements */
    .btn {
        font-size: 0.875rem;
        padding: 0.75rem 1.1rem;
    }

    /* Upload button text */
    #localUploadToggle {
        font-size: 0.85rem !important;
        padding: 0.8rem 1rem !important;
    }

    /* Nav improvements */
    .nav-link {
        font-size: 0.875rem;
        padding: 0.75rem 0.875rem;
    }

    .logo-img {
        height: 48px;
    }

    /* Footer */
    .footer-logo {
        height: 64px !important;
    }

    .footer-heading {
        font-size: 1rem;
    }

    .footer-link,
    .footer-text {
        font-size: 0.85rem;
    }

    /* Video upload improvements */
    #localUploadSection h3 {
        font-size: 0.9rem !important;
        line-height: 1.3;
    }

    #localUploadSection .video-placeholder {
        min-height: 160px;
    }

    #localUploadSection video {
        max-height: 200px;
    }

    /* Compact clip cards */
    #localUploadSection .clip-item {
        padding: 0.75rem !important;
    }

    #localUploadSection .clip-item h4 {
        font-size: 0.9rem !important;
        margin-bottom: 0.65rem !important;
    }

    #localUploadSection .remove-clip {
        top: 0.65rem !important;
        right: 0.65rem !important;
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        font-size: 1rem !important;
    }

    #localUploadSection .time-input-small {
        font-size: 0.85rem !important;
        padding: 0.55rem !important;
    }

    #localUploadSection label {
        font-size: 0.8rem !important;
    }
}

/* ============================================
   MOBILE S - 320px BREAKPOINT
   ============================================ */
@media (max-width: 320px) {
    .hero-title {
        font-size: 1.25rem !important;
        line-height: 1.2;
        padding: 0 0.4rem;
    }

    .hero-input-wrapper {
        padding: 0 0.2rem;
    }

    .hero-input {
        font-size: 0.8rem;
        padding: 0.65rem 0.5rem;
    }

    .hero-btn {
        padding: 0.7rem 0.8rem;
        font-size: 0.85rem;
    }

    .section-title {
        font-size: 1.25rem !important;
        padding: 0 0.4rem;
    }

    .feature-card {
        padding: 0.875rem;
    }

    .feature-icon {
        width: 44px;
        height: 44px;
    }

    .feature-title {
        font-size: 0.9rem;
    }

    .feature-description {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    /* Grid spacing */
    div[style*="grid-template-columns"] {
        gap: 0.875rem !important;
    }

    /* Text adjustments */
    h2[style*="font-size: 2rem"] {
        font-size: 1.2rem !important;
    }

    h3[style*="font-size: 1.25rem"] {
        font-size: 0.95rem !important;
    }

    p[style*="line-height: 1.8"] {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    /* Padding adjustments */
    section[style*="padding: 4rem 0"] {
        padding: 1.75rem 0 !important;
    }

    div[style*="padding: 2rem"] {
        padding: 1rem !important;
    }

    div[style*="padding: 1.5rem"] {
        padding: 0.875rem !important;
    }

    .container {
        padding: 0 0.75rem !important;
    }

    /* CTA improvements */
    .cta-title {
        font-size: 1.05rem !important;
        padding: 1.75rem 0.875rem !important;
    }

    /* Button improvements */
    .btn {
        font-size: 0.85rem;
        padding: 0.7rem 1rem;
    }

    #localUploadToggle {
        font-size: 0.8rem !important;
        padding: 0.75rem 0.875rem !important;
        gap: 0.35rem !important;
    }

    /* Nav improvements */
    .nav-link {
        font-size: 0.85rem;
        padding: 0.7rem 0.8rem;
    }

    .mobile-menu-toggle {
        font-size: 1.6rem;
        padding: 0.4rem;
    }

    .logo-img {
        height: 44px;
    }

    /* Footer */
    .footer-logo {
        height: 56px !important;
    }

    .footer-heading {
        font-size: 0.95rem;
    }

    .footer-link,
    .footer-text {
        font-size: 0.8rem;
    }

    .footer-grid {
        gap: 1.25rem;
    }

    /* Video editor specific */
    .time-input-small {
        font-size: 0.8rem;
        padding: 0.6rem 0.4rem;
    }

    .tab {
        font-size: 0.8rem;
        padding: 0.55rem 0.7rem;
    }

    /* Cards */
    .card {
        padding: 0.875rem !important;
    }

    div[style*="border-radius: 8px; padding: 1.5rem"] {
        padding: 1rem !important;
    }

    div[style*="border-left: 4px solid"] {
        padding: 1rem !important;
    }

    /* Video upload improvements */
    #localUploadSection h3 {
        font-size: 0.85rem !important;
        line-height: 1.2;
        padding: 0.5rem;
    }

    #localUploadSection p {
        font-size: 0.8rem !important;
    }

    #localUploadSection .video-placeholder {
        min-height: 140px;
    }

    #localUploadSection video {
        max-height: 180px;
    }

    #localUploadSection .clip-item {
        padding: 0.65rem;
    }

    #localUploadSection .time-input-small {
        font-size: 0.85rem;
        padding: 0.55rem 0.4rem;
    }

    /* Extra compact clip cards */
    #localUploadSection .clip-item {
        padding: 0.65rem !important;
        margin-bottom: 0.65rem !important;
    }

    #localUploadSection .clip-item h4 {
        font-size: 0.85rem !important;
        margin-bottom: 0.55rem !important;
    }

    #localUploadSection .remove-clip {
        top: 0.55rem !important;
        right: 0.55rem !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        font-size: 0.95rem !important;
    }

    #localUploadSection label {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
    }
}
/* ===== mobile-nav-fix.css ===== */
/* Mobile Navigation Enhancement - Additional Fixes */

/* Ensure mobile toggle is hidden on desktop */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none !important;
    }
}

/* Mobile-specific navbar fixes */
@media (max-width: 768px) {

    /* Keep hero nav bar transparent — teal hero bg shows through */
    .hero-section .hero-nav {
        background: rgba(6, 20, 20, 0.22) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }

    /* Remove transparency from overlay on mobile nav */
    .hero-section {
        position: relative;
    }

    /* Ensure logo stays visible */
    .nav-logo {
        z-index: 1001;
    }

    /* Logo image sizing */
    .logo-img {
        height: 48px !important;
        width: auto !important;
    }

    /* Navigation adjustments */
    .nav-content {
        padding: 0.75rem 0 !important;
    }

    /* Menu positioning - below navbar */
    .nav-menu {
        margin-top: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Better menu visibility */
    .nav-menu.active {
        animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Menu items styling */
    .nav-menu li a {
        color: white !important;
        opacity: 0.95 !important;
    }

    .nav-menu li a:hover {
        opacity: 1 !important;
        background: rgba(255, 255, 255, 0.15);
    }
}
/* ===== cutter-theme.css ===== */
/* ═══════════════════════════════════════════════════════════════════
   YT VIDEO CUTTER, SITEWIDE DESIGN SYSTEM
   Warm clay canvas, coral accent, Clash Display + Satoshi.
   Loaded LAST on every page so it beats the legacy stylesheets.
   Page-specific rules stay in that page's own <style> block.
   ═══════════════════════════════════════════════════════════════════ */
:root{
      /* surfaces */
      --bg:#FFFFFF;
      --bg-tint:#FFF6F5;
      --bg-soft:#FBF9F9;
      --surface:#FFFFFF;
      --line:#EFE9E9;
      --line-2:#E2DADA;
      /* ink */
      --ink:#16161A;
      --ink-2:#4E4E58;
      --ink-3:#83838F;
      /* brand */
      --coral:#FF7780;
      --coral-d:#E65960;
      --coral-tint:#FFF0EF;
      --coral-line:rgba(255,119,128,.28);
      /* type */
      --f-d:'Clash Display','Satoshi',-apple-system,sans-serif;
      --f-b:'Satoshi',-apple-system,BlinkMacSystemFont,sans-serif;
      /* scale */
      --t-xl:clamp(2.5rem,5.8vw,4.3rem);
      --t-l:clamp(1.95rem,3.9vw,2.95rem);
      --t-m:clamp(1.4rem,2.4vw,1.75rem);
      --t-h3:1.15rem;
      --t-body-l:1.0625rem;
      --t-body:0.9375rem;
      --t-label:0.75rem;
      /* rhythm */
      --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px;
      --sp:clamp(4rem,8vw,7rem);
      --gut:clamp(1.15rem,4vw,3rem);
      --ease:cubic-bezier(.16,1,.3,1);
      --sh-sm:0 2px 10px rgba(22,22,26,.05);
      --sh:0 10px 30px -12px rgba(22,22,26,.14);
      --sh-coral:0 14px 34px -12px rgba(230,89,96,.45);
    }

    /* ── base ─────────────────────────────────────────────────────────── */
    body{font-family:var(--f-b);background:var(--bg);color:var(--ink-2);
      font-size:var(--t-body-l);line-height:1.7;-webkit-font-smoothing:antialiased}
    body::after{content:none}
    @media (prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
    }

    .cv{position:relative;z-index:2;padding:var(--sp) 0;background:var(--bg)}
    .cv--tint{background:var(--bg-tint)}
    .cv--soft{background:var(--bg-soft)}
    .cv-wrap{width:min(1160px,100% - var(--gut) * 2);margin-inline:auto}
    .cv-wrap--narrow{width:min(900px,100% - var(--gut) * 2)}

    /* ── heads ────────────────────────────────────────────────────────── */
    .cv-head{text-align:center;max-width:720px;margin:0 auto clamp(2.6rem,5vw,4rem)}
    .cv-kicker{
      display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-b);
      font-size:var(--t-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
      color:var(--coral-d);background:var(--coral-tint);border:1px solid var(--coral-line);
      border-radius:var(--r-pill);padding:.4rem .95rem;margin-bottom:1.25rem;
    }
    .cv-kicker svg{width:13px;height:13px}
    .cv-h2{font-family:var(--f-d);font-weight:600;font-size:var(--t-l);line-height:1.06;
      letter-spacing:-.028em;color:var(--ink);margin:0;text-wrap:balance}
    .cv-h2 em{font-style:normal;color:var(--coral-d)}
    .cv-sub{font-size:var(--t-body-l);line-height:1.72;color:var(--ink-3);
      margin:1.1rem auto 0;max-width:56ch}

    /* ── the signature: a cut selection ───────────────────────────────── */
    .cut-rule{height:4px;border-radius:2px;background:var(--line);position:relative;overflow:hidden}
    .cut-rule::after{content:'';position:absolute;inset:0 55% 0 18%;border-radius:2px;
      background:linear-gradient(90deg,var(--coral),var(--coral-d))}

    /* ── hero ─────────────────────────────────────────────────────────── */
    .hero-section{background:var(--bg)!important;position:relative;overflow:hidden}
    .hero-section>.hero-overlay{display:none!important}
    .hero-content{position:relative;z-index:3;padding-bottom:clamp(2rem,5vw,4rem)}
    .hero-title{
      font-family:var(--f-d)!important;font-weight:600!important;
      font-size:var(--t-xl)!important;line-height:1.02!important;letter-spacing:-.038em!important;
      color:var(--ink)!important;margin:0 0 1.1rem!important;text-wrap:balance;
    }
    .hero-desc{font-size:var(--t-body-l)!important;line-height:1.68!important;
      color:var(--ink-3)!important;max-width:44ch;margin:0 auto 2.3rem!important}

    /* segmented tool switcher */
    .tool-switcher{
      display:inline-flex!important;gap:.25rem!important;flex-wrap:wrap;justify-content:center;
      background:var(--bg)!important;border:1px solid var(--line)!important;
      border-radius:var(--r-pill)!important;padding:.3rem!important;
      margin-bottom:2.2rem!important;box-shadow:var(--sh-sm)!important;
    }
    .tool-switcher .tool-switch-btn{
      background:none!important;border:0!important;box-shadow:none!important;
      border-radius:var(--r-pill)!important;padding:.6rem 1.15rem!important;
      font-family:var(--f-b)!important;font-size:.85rem!important;font-weight:700!important;
      letter-spacing:0!important;color:var(--ink-3)!important;transition:all .25s var(--ease);
    }
    .tool-switcher .tool-switch-btn:hover{color:var(--ink)!important}
    .tool-switcher .tool-switch-btn.active{
      background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;color:#fff!important;
      box-shadow:0 6px 18px -8px rgba(230,89,96,.8)!important;
    }
    .tool-switcher .tool-switch-btn svg{width:14px;height:14px}

    /* URL field */
    .hero-input-group{
      max-width:660px;margin-inline:auto;border-radius:var(--r-pill)!important;
      background:var(--surface)!important;border:1px solid var(--line-2)!important;
      box-shadow:0 18px 44px -22px rgba(22,22,26,.35)!important;
      padding:.38rem .38rem .38rem .3rem!important;overflow:hidden;
      transition:border-color .28s var(--ease),box-shadow .28s var(--ease);
    }
    .hero-input-group:focus-within{border-color:var(--coral)!important;
      box-shadow:0 18px 44px -20px rgba(230,89,96,.5)!important}
    .hero-input{background:transparent!important;border:0!important;
      font-family:var(--f-b)!important;font-size:1rem!important;color:var(--ink)!important;
      padding:1rem 1.4rem!important}
    .hero-input::placeholder{color:var(--ink-3)!important}
    .hero-btn{
      background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;border:0!important;
      border-radius:var(--r-pill)!important;color:#fff!important;font-family:var(--f-d)!important;
      font-weight:600!important;font-size:1rem!important;letter-spacing:0!important;
      padding:1rem 2rem!important;box-shadow:var(--sh-coral)!important;
      transition:transform .2s var(--ease),box-shadow .2s var(--ease)!important;
    }
    .hero-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(230,89,96,.6)!important}

    #orText{color:var(--ink-3)!important;font-size:.7rem!important;letter-spacing:.16em!important}
    #orText::before,#orText::after{background:var(--line-2)!important}
    #uploadBtnWrap .btn-primary{
      background:var(--surface)!important;border:1px solid var(--line-2)!important;
      color:var(--ink)!important;border-radius:var(--r-pill)!important;
      backdrop-filter:none;-webkit-backdrop-filter:none;font-family:var(--f-b)!important;
      font-weight:700!important;font-size:.95rem!important;letter-spacing:0!important;
      box-shadow:var(--sh-sm)!important;padding:.85rem 1.9rem!important;
    }
    #uploadBtnWrap .btn-primary:hover{border-color:var(--coral)!important;color:var(--coral-d)!important;
      transform:translateY(-2px)!important;box-shadow:var(--sh)!important}
    #uploadText{font-size:.9rem!important;color:var(--ink-3)!important;letter-spacing:0!important}
    .input-tagline{font-family:var(--f-b)!important;font-size:.82rem!important;font-weight:700!important;
      letter-spacing:0!important;color:var(--coral-d)!important;text-transform:none}
    .input-tagline svg{stroke:var(--coral-d)!important}
    /* format chips */
    .hero-input-wrapper div[style*="rgba(255,255,255,0.08)"]{
      background:var(--surface)!important;border:1px solid var(--line)!important;
      border-radius:var(--r-pill)!important;box-shadow:var(--sh-sm);
      transition:border-color .25s,transform .25s var(--ease);
    }
    .hero-input-wrapper div[style*="rgba(255,255,255,0.08)"]:hover{
      border-color:var(--coral)!important;transform:translateY(-2px)}
    .hero-input-wrapper div[style*="rgba(255,255,255,0.08)"] span{
      color:var(--ink)!important;font-size:.78rem!important;font-weight:700!important}
    .support-us-btn{border-radius:var(--r-pill)!important;box-shadow:var(--sh-coral)!important;
      font-family:var(--f-b)!important;font-weight:700!important;font-size:.95rem!important;
      letter-spacing:0!important;padding:11px 26px!important}
    .support-us-btn+div{font-size:.85rem!important;color:var(--ink-3)!important}
    #heroPremiumCTA button{
      background:var(--surface)!important;border:1px solid #EBC98A!important;color:#B07A17!important;
      border-radius:var(--r-pill)!important;box-shadow:var(--sh-sm)!important;
      font-family:var(--f-b)!important;font-weight:700!important;font-size:.88rem!important;
      padding:9px 18px!important}
    #heroPremiumCTA button:hover{background:#FFFBF2!important}
    #heroPremiumCTA span{font-size:.85rem!important;color:var(--ink-3)!important}
    .copyright-confirm label{font-size:.82rem!important;color:var(--ink-3)!important}
    .cc-disclaimer-link{color:var(--coral-d)!important}
    .copyright-confirm+div a{font-size:.78rem!important;color:var(--ink-3)!important}

    /* ── hero mockup: the cutter, drawn in CSS ────────────────────────── */
    .cut-demo{
      max-width:820px;margin:clamp(2.4rem,5vw,3.6rem) auto 0;background:var(--surface);
      border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);
      overflow:hidden;
    }
    .cut-demo-bar{display:flex;align-items:center;gap:.45rem;padding:.85rem 1.1rem;
      border-bottom:1px solid var(--line);background:var(--bg-soft)}
    .cut-demo-dot{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
    .cut-demo-dot:first-child{background:var(--coral)}
    .cut-demo-name{margin-left:.6rem;font-size:.76rem;font-weight:700;color:var(--ink-3);
      letter-spacing:.02em}
    .cut-demo-body{padding:1.1rem}
    .cut-screen{
      position:relative;aspect-ratio:16/7;border-radius:var(--r);overflow:hidden;
      background:linear-gradient(135deg,#221E20,#3A2B2D 60%,#4A3335);
      display:flex;align-items:center;justify-content:center;
    }
    .cut-screen::after{content:'';position:absolute;inset:0;
      background:radial-gradient(60% 80% at 30% 20%,rgba(255,119,128,.22),transparent 70%)}
    .cut-play{position:relative;z-index:2;width:54px;height:54px;border-radius:50%;
      background:rgba(255,255,255,.14);backdrop-filter:blur(6px);display:flex;
      align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.28)}
    .cut-play::before{content:'';border-left:15px solid #fff;border-top:9px solid transparent;
      border-bottom:9px solid transparent;margin-left:4px}
    .cut-track{position:relative;margin:1.15rem 0 .4rem;height:52px;border-radius:12px;
      background:var(--bg-soft);border:1px solid var(--line);overflow:hidden}
    .cut-frames{position:absolute;inset:0;display:flex;gap:2px;padding:2px;opacity:.55}
    .cut-frames i{flex:1;border-radius:3px;background:linear-gradient(160deg,#E9DFE0,#D9C9CB)}
    .cut-frames i:nth-child(3n){background:linear-gradient(160deg,#F1E6E7,#E2D3D5)}
    .cut-frames i:nth-child(4n){background:linear-gradient(160deg,#DED0D2,#CBBABC)}
    .cut-sel{position:absolute;top:0;bottom:0;left:22%;right:38%;
      background:rgba(255,119,128,.2);border-left:3px solid var(--coral-d);
      border-right:3px solid var(--coral-d);
      animation:cutOpen 1.1s var(--ease) .35s both}
    @keyframes cutOpen{from{left:46%;right:46%;opacity:0}to{left:22%;right:38%;opacity:1}}
    .cut-grip{position:absolute;top:50%;width:12px;height:30px;border-radius:6px;
      background:var(--coral-d);transform:translateY(-50%);box-shadow:0 2px 8px rgba(230,89,96,.5);
      display:flex;align-items:center;justify-content:center;gap:2px}
    .cut-grip::before,.cut-grip::after{content:'';width:1.5px;height:11px;
      background:rgba(255,255,255,.75);border-radius:1px}
    .cut-grip--a{left:-7px}
    .cut-grip--b{right:-7px}
    .cut-times{display:flex;justify-content:space-between;font-size:.74rem;font-weight:700;
      color:var(--ink-3);padding:0 .1rem}
    .cut-times b{color:var(--coral-d);font-weight:700}
    .cut-foot{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin-top:1.05rem}
    .cut-tag{font-size:.76rem;font-weight:700;color:var(--ink);background:var(--bg-soft);
      border:1px solid var(--line);border-radius:var(--r-pill);padding:.42rem .85rem}
    .cut-tag--on{background:var(--coral-tint);border-color:var(--coral-line);color:var(--coral-d)}
    .cut-go{margin-left:auto;font-family:var(--f-d);font-weight:600;font-size:.9rem;color:#fff;
      background:linear-gradient(135deg,var(--coral),var(--coral-d));border-radius:var(--r-pill);
      padding:.6rem 1.35rem;box-shadow:var(--sh-coral)}
    @media(max-width:560px){
      .cut-go{margin-left:0;width:100%;text-align:center}
      .cut-demo-body{padding:.85rem}
    }

    /* ── cards ────────────────────────────────────────────────────────── */
    .cv-grid{display:grid;gap:1.2rem;grid-template-columns:1fr}
    @media(min-width:620px){.cv-grid--2,.cv-grid--4{grid-template-columns:repeat(2,1fr)}}
    @media(min-width:980px){
      .cv-grid--3{grid-template-columns:repeat(3,1fr)}
      .cv-grid--4{grid-template-columns:repeat(4,1fr)}
    }
    .cv-card{
      background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
      padding:1.75rem 1.6rem;box-shadow:var(--sh-sm);
      transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s;
    }
    .cv-card:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--coral-line)}
    .cv-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;
      justify-content:center;background:var(--coral-tint);border:1px solid var(--coral-line);
      color:var(--coral-d);margin-bottom:1.2rem}
    .cv-ic svg{width:21px;height:21px;stroke-width:1.8}
    .cv-card h3{font-family:var(--f-d);font-weight:600;font-size:var(--t-h3);line-height:1.28;
      letter-spacing:-.014em;color:var(--ink);margin:0 0 .6rem}
    .cv-card p{font-size:var(--t-body);line-height:1.72;color:var(--ink-3);margin:0}
    .cv-card a{color:var(--coral-d);font-weight:700;text-decoration:none}
    .cv-card a:hover{text-decoration:underline}

    /* ── steps with mini mockups ──────────────────────────────────────── */
    .cv-steps{display:grid;gap:1.2rem;grid-template-columns:1fr}
    @media(min-width:620px){.cv-steps{grid-template-columns:repeat(2,1fr)}}
    @media(min-width:1060px){.cv-steps{grid-template-columns:repeat(4,1fr)}}
    .cv-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
      padding:1.3rem;box-shadow:var(--sh-sm);display:flex;flex-direction:column;
      transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s}
    .cv-step:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--coral-line)}
    .cv-step-fig{height:96px;border-radius:12px;background:var(--bg-soft);
      border:1px solid var(--line);margin-bottom:1.15rem;padding:.8rem;
      display:flex;flex-direction:column;justify-content:center;gap:.45rem;overflow:hidden}
    .fig-bar{height:9px;border-radius:5px;background:var(--line-2)}
    .fig-bar--sm{width:55%}
    .fig-bar--xs{width:32%}
    .fig-pill{height:22px;border-radius:var(--r-pill);background:var(--surface);
      border:1px solid var(--line-2);display:flex;align-items:center;padding:0 .55rem;
      font-size:.6rem;font-weight:700;color:var(--ink-3)}
    .fig-pill--on{background:var(--coral-tint);border-color:var(--coral-line);color:var(--coral-d)}
    .fig-track{position:relative;height:26px;border-radius:8px;background:var(--surface);
      border:1px solid var(--line-2);overflow:hidden}
    .fig-track span{position:absolute;top:0;bottom:0;left:24%;right:32%;
      background:rgba(255,119,128,.24);border-left:2.5px solid var(--coral-d);
      border-right:2.5px solid var(--coral-d)}
    .fig-row{display:flex;gap:.35rem}
    .fig-row>*{flex:1}
    .fig-btn{height:26px;border-radius:8px;background:linear-gradient(135deg,var(--coral),var(--coral-d));
      display:flex;align-items:center;justify-content:center;color:#fff;font-size:.6rem;font-weight:700}
    .cv-step-n{font-family:var(--f-d);font-weight:600;font-size:.8rem;color:var(--coral-d);
      background:var(--coral-tint);border:1px solid var(--coral-line);border-radius:var(--r-pill);
      width:30px;height:30px;display:flex;align-items:center;justify-content:center;margin-bottom:.8rem}
    .cv-step h3{font-family:var(--f-d);font-weight:600;font-size:1.02rem;line-height:1.3;
      color:var(--ink);margin:0 0 .5rem;letter-spacing:-.012em}
    .cv-step p{font-size:.885rem;line-height:1.68;color:var(--ink-3);margin:0}

    /* ── format chips grid ────────────────────────────────────────────── */
    .cv-fmts{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-bottom:1.8rem}
    .cv-fmt{display:flex;align-items:center;gap:.6rem;background:var(--surface);
      border:1px solid var(--line);border-radius:14px;padding:.7rem 1.1rem;box-shadow:var(--sh-sm);
      transition:transform .28s var(--ease),border-color .28s}
    .cv-fmt:hover{transform:translateY(-3px);border-color:var(--coral-line)}
    .cv-fmt svg{width:21px;height:21px;stroke:var(--coral-d);flex:0 0 auto}
    .cv-fmt b{display:block;font-family:var(--f-d);font-weight:600;font-size:.9rem;color:var(--ink);
      line-height:1.2}
    .cv-fmt i{font-style:normal;font-size:.7rem;color:var(--ink-3)}

    /* ── check list ───────────────────────────────────────────────────── */
    .cv-checks{display:grid;gap:.7rem;grid-template-columns:1fr;max-width:720px;margin:0 auto}
    @media(min-width:700px){.cv-checks{grid-template-columns:repeat(2,1fr)}}
    .cv-check{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem;
      background:var(--surface);border:1px solid var(--line);border-radius:12px;
      font-size:var(--t-body);color:var(--ink-2)}
    .cv-check svg{width:17px;height:17px;stroke:var(--coral-d);stroke-width:2.6;flex:0 0 auto}

    /* ── benefits band ────────────────────────────────────────────────── */
    .cv-band{background:linear-gradient(135deg,#FFF1F0,#FFE7E6);border:1px solid var(--coral-line);
      border-radius:var(--r-lg);padding:clamp(2rem,4vw,2.8rem)}
    .cv-band h3{font-family:var(--f-d);font-weight:600;font-size:var(--t-m);color:var(--ink);
      text-align:center;margin:0 0 1.9rem;letter-spacing:-.02em}
    .cv-band-grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
    @media(min-width:820px){.cv-band-grid{grid-template-columns:repeat(3,1fr)}}
    .cv-band-item{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
      border-radius:var(--r);padding:1.4rem;text-align:center}
    .cv-band-item .cv-ic{margin:0 auto 1rem;background:#fff}
    .cv-band-item h4{font-family:var(--f-d);font-weight:600;font-size:1.02rem;color:var(--ink);
      margin:0 0 .45rem}
    .cv-band-item p{font-size:.875rem;line-height:1.68;color:var(--ink-2);margin:0}

    /* ── problem list ─────────────────────────────────────────────────── */
    .cv-probs{display:grid;gap:.85rem;grid-template-columns:1fr}
    @media(min-width:620px){.cv-probs{grid-template-columns:repeat(2,1fr)}}
    @media(min-width:980px){.cv-probs{grid-template-columns:repeat(3,1fr)}}
    .cv-prob{display:flex;align-items:flex-start;gap:.75rem;background:var(--surface);
      border:1px solid var(--line);border-left:3px solid var(--coral);border-radius:12px;
      padding:1.05rem 1.2rem;font-size:var(--t-body);color:var(--ink-2)}
    .cv-prob svg{width:16px;height:16px;stroke:var(--coral);stroke-width:2.4;flex:0 0 auto;margin-top:.28rem}

    /* ── FAQ ──────────────────────────────────────────────────────────── */
    .cv-faq{max-width:840px;margin:0 auto}
    .cv-q{background:var(--surface);border:1px solid var(--line);border-radius:14px;
      margin-bottom:.7rem;box-shadow:var(--sh-sm);transition:border-color .28s,box-shadow .28s}
    .cv-q:hover{border-color:var(--line-2)}
    .cv-q.open{border-color:var(--coral-line);box-shadow:var(--sh)}
    .cv-q button{width:100%;display:flex;gap:1.1rem;align-items:center;justify-content:space-between;
      background:none;border:0;cursor:pointer;padding:1.2rem 1.35rem;text-align:left;
      font-family:var(--f-b);font-size:1rem;font-weight:700;color:var(--ink);line-height:1.4}
    .cv-q-i{flex:0 0 auto;color:var(--ink-3);transition:transform .35s var(--ease),color .25s}
    .cv-q.open .cv-q-i{transform:rotate(45deg);color:var(--coral-d)}
    .cv-q button:hover{color:var(--coral-d)}
    .cv-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
    .cv-q.open .cv-a{grid-template-rows:1fr}
    .cv-a>div{overflow:hidden}
    .cv-a p{margin:0;padding:0 1.35rem 1.3rem;font-size:var(--t-body);line-height:1.75;color:var(--ink-3)}

    /* ── prose ────────────────────────────────────────────────────────── */
    .cv-prose{max-width:72ch;margin-inline:auto}
    .cv-prose p{font-size:var(--t-body-l);line-height:1.8;color:var(--ink-3);margin:0 0 1.1rem}
    .cv-prose a{color:var(--coral-d);font-weight:700;text-decoration:none;
      border-bottom:1px solid var(--coral-line)}

    /* ── CTA ──────────────────────────────────────────────────────────── */
    .cv-cta{position:relative;overflow:hidden;text-align:center;border-radius:var(--r-lg);
      padding:clamp(2.8rem,6vw,4.5rem) 1.6rem;
      background:linear-gradient(135deg,#FFF1F0,#FFE4E3);border:1px solid var(--coral-line)}
    .cv-cta h2{font-family:var(--f-d);font-weight:600;font-size:var(--t-l);line-height:1.06;
      letter-spacing:-.03em;color:var(--ink);margin:0 0 1rem;text-wrap:balance}
    .cv-cta p{font-size:var(--t-body-l);color:var(--ink-2);max-width:52ch;margin:0 auto 2rem}
    .cv-btn{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
      font-family:var(--f-d);font-weight:600;font-size:1.02rem;color:#fff;
      background:linear-gradient(135deg,var(--coral),var(--coral-d));
      padding:1rem 2.3rem;border-radius:var(--r-pill);box-shadow:var(--sh-coral);
      transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
    /* black on hover (requested 2026-07-30): coral -> ink, keeps the lift */
    .cv-btn:hover{transform:translateY(-3px);color:#fff;
      background:linear-gradient(135deg,var(--ink),#000);
      box-shadow:0 20px 46px -12px rgba(22,22,26,.55)}

    /* ── reveal ───────────────────────────────────────────────────────── */
    /* visible by default; /js/cutter-ui.js adds html.js-rv to opt in, so a
       blocked or broken script can never hide content */
    .cv-rv{opacity:1}
    html.js-rv .cv-rv{opacity:0;transform:translateY(18px)}
    html.js-rv .cv-rv.in{opacity:1;transform:none;
      transition:opacity .7s var(--ease),transform .7s var(--ease)}

    /* ══ existing furniture ═══════════════════════════════════════════ */
    #promoBanner{
      background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;
      font-family:var(--f-d)!important;font-size:.95rem!important;font-weight:600!important;
      letter-spacing:.02em!important;text-transform:none;color:#fff!important;
      padding:.85rem 1rem!important;text-shadow:none!important;margin-bottom:0!important;
    }
    #promoBanner:hover{filter:brightness(1.04)}
    #promoBanner .banner-confetti{display:none}

    .hero-nav{background:rgba(255,255,255,.96)!important;backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
      position:relative;z-index:6}
    .hero-nav .container{max-width:1400px;padding-inline:clamp(1rem,3.2vw,2.5rem)}
    .hero-nav .nav-link{font-family:var(--f-b)!important;font-size:.92rem!important;
      font-weight:500!important;color:var(--ink-2)!important}
    .hero-nav .nav-link:hover{color:var(--coral-d)!important}
    .hero-nav .nav-ytmp3-pill{background:var(--coral-tint)!important;color:var(--coral-d)!important;
      border:1px solid var(--coral-line)!important;border-radius:var(--r-pill)!important;
      padding:6px 15px!important;font-size:.84rem!important}
    .hero-nav .nav-ytmp3-pill:hover{background:var(--coral)!important;color:#fff!important}
    .hero-nav #navLoginItem .nav-link{background:none!important;border:1px solid var(--line-2)!important;
      border-radius:var(--r-pill)!important;padding:6px 16px!important;color:var(--ink)!important;
      font-size:.84rem!important;letter-spacing:.02em!important}
    .hero-nav #navLoginItem .nav-link:hover{border-color:var(--coral)!important;color:var(--coral-d)!important}
    .hero-nav .premium-nav-btn,.premium-nav-btn-mobile{
      background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;color:#fff!important;
      border:0!important;border-radius:var(--r-pill)!important;font-family:var(--f-b)!important;
      font-size:.86rem!important;font-weight:700!important;padding:9px 18px!important;
      box-shadow:var(--sh-coral)!important;transition:transform .22s var(--ease)!important}
    .hero-nav .premium-nav-btn:hover,.premium-nav-btn-mobile:hover{transform:translateY(-2px)}
    .mobile-menu-toggle{color:var(--ink)!important}
    /* the nav logo is a white-on-transparent PNG built for the old dark header,
       so on a white bar it needs a dark chip behind it to stay legible */
    .hero-nav .nav-logo .logo-brand{display:inline-flex;align-items:center;
      background:var(--ink);border-radius:12px;padding:8px 14px}
    .hero-nav .nav-logo .logo-img{display:block}

    .yt-tools-section{background:var(--bg-soft)!important;padding:var(--sp) 0!important;
      border-top:1px solid var(--line)}
    .yt-tools-header{text-align:center!important;max-width:720px!important;
      margin:0 auto clamp(2.6rem,5vw,4rem)!important}
    .yt-tools-header h2{font-family:var(--f-d)!important;font-weight:600!important;
      font-size:var(--t-l)!important;letter-spacing:-.028em!important;color:var(--ink)!important;
      line-height:1.06!important;margin:0 0 1.1rem!important}
    .yt-tools-header p{color:var(--ink-3)!important;font-size:var(--t-body-l)!important;
      line-height:1.72!important;max-width:56ch;margin:0 auto!important}
    .yt-tool-card{background:var(--surface)!important;border:1px solid var(--line)!important;
      border-radius:var(--r)!important;box-shadow:var(--sh-sm)!important;padding:1.75rem 1.6rem!important;
      transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s!important}
    .yt-tool-card::before,.yt-tool-card::after{display:none!important}
    .yt-tool-card:hover{transform:translateY(-5px)!important;box-shadow:var(--sh)!important;
      border-color:var(--coral-line)!important}
    .yt-tool-icon-wrap{width:46px!important;height:46px!important;border-radius:13px!important;
      background:var(--coral-tint)!important;border:1px solid var(--coral-line)!important;
      color:var(--coral-d)!important;box-shadow:none!important;margin:0 0 1.2rem!important;
      display:flex!important;align-items:center;justify-content:center}
    .yt-tool-icon-wrap svg{width:21px;height:21px}
    .yt-tool-card h3{font-family:var(--f-d)!important;font-weight:600!important;
      font-size:var(--t-h3)!important;color:var(--ink)!important;letter-spacing:-.014em!important}
    .yt-tool-features li{color:var(--ink-3)!important;font-size:var(--t-body)!important;line-height:1.7!important}
    .yt-tool-cta{font-family:var(--f-d)!important;font-weight:600!important;font-size:.9rem!important;
      letter-spacing:0!important;text-transform:none;color:var(--coral-d)!important}

    .platform-section{background:var(--bg)!important;border-top:1px solid var(--line)!important;
      border-bottom:1px solid var(--line)!important;padding:clamp(3.5rem,7vw,5.5rem) 0!important}
    .platform-inner{background:var(--surface)!important;border:1px solid var(--line)!important;
      border-radius:var(--r-lg)!important;box-shadow:var(--sh-sm)!important;
      padding:2.4rem 2.2rem!important;max-width:900px!important;gap:2.6rem!important}
    .platform-device{background:var(--coral-tint)!important;border:1px solid var(--coral-line)!important;
      border-radius:14px!important;color:var(--coral-d)!important;padding:1.05rem 1.25rem!important}
    .platform-device span{font-family:var(--f-b)!important;font-size:.64rem!important;
      letter-spacing:.14em!important;color:var(--ink-3)!important}
    .platform-plus{color:var(--line-2)!important;opacity:1!important}
    .platform-text h2{font-family:var(--f-d)!important;font-weight:600!important;
      font-size:var(--t-m)!important;color:var(--ink)!important;letter-spacing:-.022em!important}
    .platform-text p{color:var(--ink-3)!important;line-height:1.72!important}

    .footer-enhanced{background:var(--ink)!important;border-top:0!important;position:relative;z-index:2}
    .footer-heading{font-family:var(--f-b)!important;font-size:.68rem!important;font-weight:700!important;
      letter-spacing:.18em!important;text-transform:uppercase;color:rgba(255,255,255,.42)!important}
    .footer-link{color:rgba(255,255,255,.72)!important;font-size:.92rem!important;transition:color .2s}
    .footer-link:hover{color:var(--coral)!important}

    /* ══ the cutter editor ═════════════════════════════════════════════ */
    .video-editor{background:var(--surface);border:1px solid var(--line);
      border-radius:var(--r-lg);box-shadow:var(--sh);padding:1.35rem;
      max-width:1000px;margin-inline:auto}
    .video-placeholder{border-radius:var(--r)!important}
    .tabs{background:var(--bg-soft)!important;border:1px solid var(--line);
      border-radius:var(--r-pill)!important;padding:.28rem!important;gap:.2rem!important}
    .tab{border-radius:var(--r-pill)!important;font-family:var(--f-b)!important;
      font-weight:700!important;font-size:.9rem!important;color:var(--ink-3)!important;
      min-height:42px;transition:all .25s var(--ease)!important}
    .tab.active{background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;
      color:#fff!important;box-shadow:0 6px 16px -8px rgba(230,89,96,.8)}
    .card{background:var(--surface)!important;border:1px solid var(--line);
      border-radius:var(--r)!important;box-shadow:none!important}
    .format-display{border:1px solid var(--line-2)!important;border-radius:12px!important;
      background:var(--bg-soft)!important;font-family:var(--f-b)!important;
      font-size:1rem!important;font-weight:700!important;color:var(--ink)!important;
      min-height:48px}
    .format-dropdown{border:1px solid var(--line-2)!important;border-radius:12px!important;
      box-shadow:var(--sh)!important}
    .format-option{border-radius:8px;margin:0 .25rem;font-weight:500}
    .format-option.selected{background:var(--coral-tint)!important;color:var(--coral-d)!important}
    #qualitySelect{border:1px solid var(--line-2)!important;border-radius:12px!important;
      background:var(--bg-soft)!important;color:var(--ink)!important;min-height:48px;
      font-family:var(--f-b)!important;font-weight:600}
    .time-section{background:var(--bg-soft)!important;border:1px solid var(--line);
      border-radius:var(--r)!important}
    .time-section h4{font-family:var(--f-d)!important;font-weight:600;color:var(--ink)!important}
    .dhms-input{border:1px solid var(--line-2)!important;border-radius:10px!important;
      background:var(--surface)!important;color:var(--ink)!important;font-weight:700!important}
    .range-slider-track{background:var(--line-2)!important;height:8px!important;border-radius:99px!important}
    .range-slider-fill{background:linear-gradient(90deg,var(--coral),var(--coral-d))!important;
      height:8px!important}
    .range-slider-handle{width:26px!important;height:26px!important;border:3px solid var(--coral-d)!important;
      background:#fff!important;box-shadow:0 3px 10px rgba(230,89,96,.4)!important}
    .range-slider-label{background:var(--ink)!important;color:#fff!important;font-weight:700!important;
      border-radius:6px!important;box-shadow:none!important}
    .action-row .btn-primary{background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;
      border:0!important;border-radius:var(--r-pill)!important;color:#fff!important;
      font-family:var(--f-d)!important;font-weight:600!important;box-shadow:var(--sh-coral)!important}
    .action-row .btn-outline{background:var(--surface)!important;border:1px solid var(--line-2)!important;
      border-radius:var(--r-pill)!important;color:var(--ink)!important;font-family:var(--f-d)!important;
      font-weight:600!important}
    .add-clip-btn{border:2px dashed var(--coral-line)!important;color:var(--coral-d)!important;
      border-radius:12px!important;font-family:var(--f-b)!important;font-weight:700!important;
      font-size:.95rem!important;min-height:48px}
    .progress-bar{background:linear-gradient(90deg,var(--coral),var(--coral-d))!important}

    /* ══ mobile: the editor should feel like an app ════════════════════ */
    @media(max-width:760px){
      .hero-title{font-size:clamp(2.15rem,10vw,3rem)!important;letter-spacing:-.03em!important}
      .hero-desc{font-size:1rem!important;margin-bottom:1.7rem!important}
      .tool-switcher{width:100%;border-radius:20px!important}
      .tool-switcher .tool-switch-btn{flex:1 1 100%;justify-content:center;min-height:44px}
      .hero-input-group{flex-direction:column;border-radius:20px!important;
        padding:.5rem!important;gap:.5rem}
      .hero-input{text-align:left;padding:.95rem 1.05rem!important;min-height:48px}
      .hero-btn{width:100%;border-radius:14px!important;min-height:50px;padding:.9rem 1.5rem!important}
      #uploadBtnWrap .btn-primary{width:100%;justify-content:center;min-height:48px}
      .cut-demo{border-radius:18px}
      .cut-screen{aspect-ratio:16/9}
      .cut-times{font-size:.68rem}

      /* full-bleed app panel */
      .video-editor{border-radius:20px;padding:.85rem;margin-inline:0}
      .video-editor .controls-section{gap:.75rem}
      .tabs{position:sticky;top:.5rem;z-index:5}
      .tab{min-height:46px;font-size:.95rem!important}
      .format-display,#qualitySelect{min-height:52px;font-size:1.02rem!important}
      .format-quality-row{flex-direction:column;gap:.6rem!important}
      .format-quality-row>div{width:100%}
      /* six H/M/S boxes plus a separator will not fit on one 390px row, so
         Start and End stack and each gets the full width */
      .time-row{grid-template-columns:1fr!important;gap:.85rem!important}
      .time-sep{display:none}
      .time-col label{font-size:.72rem!important;font-weight:700;letter-spacing:.1em;
        text-transform:uppercase;color:var(--ink-3)!important}
      .dhms-group{gap:8px}
      .dhms-group span{gap:5px}
      .dhms-input{min-height:48px;font-size:1.1rem!important;padding:.5rem .35rem!important}
      .dhms-group i{font-size:.78rem!important;font-weight:700}
      .range-slider-container{height:56px}
      .range-slider-handle{width:32px!important;height:32px!important}
      .format-option{min-height:48px;font-size:1rem}
      /* actions become a thumb-reachable bar pinned to the bottom of the panel */
      .action-row{position:sticky;bottom:0;z-index:6;margin:0 -.85rem -.85rem;
        padding:.7rem .85rem calc(.7rem + env(safe-area-inset-bottom));
        background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);gap:.6rem}
      .action-row .btn{min-height:52px;font-size:1rem!important;padding:.75rem!important}
      #editorPremiumCTA{padding-bottom:.4rem}
    }
    @media(max-width:420px){
      .cut-foot{gap:.4rem}
      .cut-tag{font-size:.7rem;padding:.36rem .7rem}
    }

    /* ══ STEP 1: deeper palette + the coral hero/nav background ════════
       hero_bg.png rebuilt in CSS: a diagonal coral gradient sampled from the
       source (#D04946 -> #FA6E6D) with rounded squares rotated 45deg for the
       chevron corners and a 4-point sparkle bottom-right. No image request. */
    :root{
      /* a little darker, warm clay instead of near-white */
      --bg:#F4ECEA;
      --bg-tint:#EFE2E0;
      --bg-soft:#E9DBD9;
      --surface:#FFFDFC;
      --line:#DFD1CF;
      --line-2:#CBB8B6;
      --ink:#241B1C;
      --ink-2:#4B3C3D;
      --ink-3:#7A6869;
      --coral-tint:#FBEAE8;
      --coral-line:rgba(214,73,70,.30);
      --sh-sm:0 2px 10px rgba(36,27,28,.07);
      --sh:0 12px 32px -12px rgba(36,27,28,.22);
      --hero-1:#D04946;
      --hero-2:#DE524D;
      --hero-3:#E75F5B;
      --hero-4:#FA6E6D;
      --coral-art:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201344%20768%22%20preserveAspectRatio=%22xMidYMid%20slice%22%3E%3Crect%20x=%22-586%22%20y=%22-235%22%20width=%22900%22%20height=%22900%22%20rx=%22150%22%20transform=%22rotate%2845%20-136%20215%29%22%20fill=%22white%22%20fill-opacity=%22.13%22/%3E%3Crect%20x=%22-386%22%20y=%22-130%22%20width=%22900%22%20height=%22900%22%20rx=%22150%22%20transform=%22rotate%2845%2064%20320%29%22%20fill=%22white%22%20fill-opacity=%22.07%22/%3E%3Crect%20x=%221000%22%20y=%22540%22%20width=%221000%22%20height=%221000%22%20rx=%22170%22%20transform=%22rotate%2845%201500%201040%29%22%20fill=%22white%22%20fill-opacity=%22.15%22/%3E%3Crect%20x=%22870%22%20y=%22-670%22%20width=%22620%22%20height=%22620%22%20rx=%22120%22%20transform=%22rotate%2845%201180%20-360%29%22%20fill=%22white%22%20fill-opacity=%22.08%22/%3E%3Cpath%20d=%22M1291,688%20C1294.64,710.36%201294.64,710.36%201317,714%20C1294.64,717.64%201294.64,717.64%201291,740%20C1287.36,717.64%201287.36,717.64%201265,714%20C1287.36,710.36%201287.36,710.36%201291,688%20Z%22%20fill=%22white%22%20fill-opacity=%22.85%22/%3E%3C/svg%3E");
    }

    /* hero now sits on the coral art, so its old tints come off */
    .bg-coral,.hero-section{
      background-image:var(--coral-art),
        linear-gradient(118deg,var(--hero-1) 0%,var(--hero-2) 26%,var(--hero-3) 56%,#F96A69 82%,var(--hero-4) 100%)!important;
      background-size:cover,auto!important;background-position:center,center!important;
      background-repeat:no-repeat,no-repeat!important;
    }
    /* Top vignette only: it seats the nav against the coral art. The gradient used
       to end on var(--bg), which painted the page's clay colour INSIDE the hero and
       read as a white smudge along its bottom edge. Sections now meet on a hard
       edge, which is what the reference designs do. */
    .hero-section::before{
      content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
      background:linear-gradient(180deg,rgba(36,27,28,.18) 0%,rgba(36,27,28,0) 38%)!important;
    }
    .hero-title{color:#fff!important;text-shadow:0 2px 18px rgba(120,30,28,.28)}
    .hero-desc{color:rgba(255,255,255,.86)!important}
    .input-tagline{color:rgba(255,255,255,.9)!important}
    .input-tagline svg{stroke:#fff!important}
    #uploadText{color:rgba(255,255,255,.78)!important}
    #orText{color:rgba(255,255,255,.6)!important}
    #orText::before,#orText::after{background:rgba(255,255,255,.32)!important}
    .copyright-confirm label{color:rgba(255,255,255,.82)!important}
    .cc-disclaimer-link{color:#fff!important;text-decoration:underline}
    .copyright-confirm+div a{color:rgba(255,255,255,.7)!important}
    #heroPremiumCTA span{color:rgba(255,255,255,.82)!important}
    .support-us-btn+div{color:rgba(255,255,255,.82)!important}
    #copyrightAgree{accent-color:#fff}

    /* on coral, the primary action inverts to white so it still reads loudest */
    .hero-btn{
      background:#fff!important;color:var(--hero-1)!important;
      box-shadow:0 10px 26px -10px rgba(90,20,20,.55)!important;
    }
    .hero-btn:hover{background:#fff!important;color:#B93F3D!important}
    .hero-input-group{
      background:rgba(255,255,255,.94)!important;border-color:rgba(255,255,255,.5)!important;
      box-shadow:0 20px 50px -22px rgba(80,18,18,.6)!important;
    }
    .hero-input-group:focus-within{border-color:#fff!important;
      box-shadow:0 20px 54px -20px rgba(80,18,18,.7)!important}
    .tool-switcher{
      background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.3)!important;
      backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:none!important;
    }
    .tool-switcher .tool-switch-btn{color:rgba(255,255,255,.78)!important}
    .tool-switcher .tool-switch-btn:hover{color:#fff!important}
    .tool-switcher .tool-switch-btn.active{
      background:#fff!important;color:var(--hero-1)!important;
      box-shadow:0 4px 14px -6px rgba(80,18,18,.6)!important;
    }
    .hero-input-wrapper div[style*="rgba(255,255,255,0.08)"]{
      background:rgba(255,255,255,.15)!important;border-color:rgba(255,255,255,.28)!important;
      box-shadow:none!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    }
    .hero-input-wrapper div[style*="rgba(255,255,255,0.08)"]:hover{
      background:rgba(255,255,255,.28)!important;border-color:rgba(255,255,255,.5)!important}
    .hero-input-wrapper div[style*="rgba(255,255,255,0.08)"] span{color:#fff!important}
    .hero-input-wrapper div[style*="rgba(255,255,255,0.08)"] svg{stroke:#fff!important}
    .support-us-btn{
      background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.45)!important;
      color:#fff!important;box-shadow:none!important;backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }
    .support-us-btn:hover{background:#fff!important;color:var(--hero-1)!important}
    #heroPremiumCTA button{
      background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.42)!important;
      color:#fff!important;box-shadow:none!important;backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }
    #heroPremiumCTA button:hover{background:#fff!important;color:#B07A17!important}

    /* nav rides the same art, so it goes transparent with a hairline */
    .hero-nav{
      background:transparent!important;backdrop-filter:none;-webkit-backdrop-filter:none;
      border-bottom:1px solid rgba(255,255,255,.18)!important;
    }
    .hero-nav .nav-link{color:rgba(255,255,255,.86)!important}
    .hero-nav .nav-link:hover{color:#fff!important}
    .hero-nav .nav-ytmp3-pill{background:rgba(255,255,255,.18)!important;color:#fff!important;
      border-color:rgba(255,255,255,.4)!important}
    .hero-nav .nav-ytmp3-pill:hover{background:#fff!important;color:var(--hero-1)!important}
    .hero-nav #navLoginItem .nav-link{border-color:rgba(255,255,255,.45)!important;color:#fff!important}
    .hero-nav #navLoginItem .nav-link:hover{background:#fff!important;color:var(--hero-1)!important}
    .hero-nav .premium-nav-btn,.premium-nav-btn-mobile{
      background:#fff!important;color:var(--hero-1)!important;
      box-shadow:0 8px 20px -10px rgba(80,18,18,.6)!important;
    }
    .hero-nav .nav-logo .logo-brand{background:transparent;padding:0}
    .mobile-menu-toggle{color:#fff!important}
    /* the promo strip must not vanish into the coral behind it */
    #promoBanner{
      background:rgba(36,27,28,.35)!important;backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.14);
      border-bottom:1px solid rgba(255,255,255,.14);color:#fff!important;
    }
    #promoBanner:hover{background:rgba(36,27,28,.45)!important;filter:none}

/* ═══════════════════════════════════════════════════════════════════
   INNER PAGES
   Same hierarchy as the homepage: coral hero, warm clay body, lifted
   cards, Clash Display headings. `.pg-hero` is the compact variant of
   the homepage hero for pages with no tool in them.
   ═══════════════════════════════════════════════════════════════════ */

.hero-section.pg-hero{min-height:0!important;padding-bottom:0}
.pg-hero .hero-content{padding:clamp(2.6rem,6vw,4.6rem) 0 clamp(3rem,6vw,4.6rem)!important;
  text-align:center}
.pg-hero .hero-title{font-size:clamp(2.1rem,4.8vw,3.6rem)!important;margin:0 0 1rem!important}
.pg-lead{font-size:var(--t-body-l);line-height:1.7;color:rgba(255,255,255,.88);
  max-width:60ch;margin:0 auto}
.pg-crumb{display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  border-radius:var(--r-pill);padding:.4rem .95rem;margin-bottom:1.15rem;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pg-crumb a{color:inherit;text-decoration:none}
.pg-crumb a:hover{color:#fff}

/* long-form / legal */
.pg-prose{max-width:74ch;margin-inline:auto}
.pg-prose>h2{font-family:var(--f-d);font-weight:600;font-size:var(--t-m);line-height:1.16;
  letter-spacing:-.02em;color:var(--ink);margin:2.8rem 0 .9rem;scroll-margin-top:5rem}
.pg-prose>h2:first-child{margin-top:0}
.pg-prose>h3{font-family:var(--f-d);font-weight:600;font-size:1.1rem;color:var(--ink);
  margin:2rem 0 .7rem}
.pg-prose p{font-size:var(--t-body-l);line-height:1.82;color:var(--ink-3);margin:0 0 1.1rem}
.pg-prose ul,.pg-prose ol{margin:0 0 1.25rem;padding:0 0 0 0;list-style:none}
.pg-prose ol{counter-reset:pgi}
.pg-prose li{position:relative;padding-left:1.75rem;margin-bottom:.6rem;
  font-size:var(--t-body-l);line-height:1.75;color:var(--ink-3)}
.pg-prose ul>li::before{content:'';position:absolute;left:.15rem;top:.72em;width:.48rem;
  height:.48rem;border-radius:50%;background:var(--coral);opacity:.8}
.pg-prose ol>li{counter-increment:pgi}
.pg-prose ol>li::before{content:counter(pgi);position:absolute;left:0;top:.1em;
  font-family:var(--f-d);font-weight:600;font-size:.85rem;color:var(--coral-d)}
.pg-prose a{color:var(--coral-d);font-weight:700;text-decoration:none;
  border-bottom:1px solid var(--coral-line);transition:border-color .2s}
.pg-prose a:hover{border-bottom-color:var(--coral-d)}
.pg-prose strong{color:var(--ink);font-weight:700}
.pg-note{background:var(--coral-tint);border:1px solid var(--coral-line);
  border-left:3px solid var(--coral);border-radius:var(--r);padding:1.2rem 1.4rem;
  margin:0 0 1.6rem;font-size:var(--t-body);line-height:1.72;color:var(--ink-2)}
.pg-updated{font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--ink-3);
  margin:0 0 2.2rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line)}

/* a sticky section index beside long legal text */
.pg-split{display:grid;gap:2.6rem;grid-template-columns:1fr}
@media(min-width:1020px){.pg-split{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:4rem}
  .pg-toc{position:sticky;top:2.2rem;align-self:start}}
.pg-toc-h{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1rem}
.pg-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.pg-toc li{counter-increment:toc;margin-bottom:.15rem}
.pg-toc a{display:flex;gap:.7rem;padding:.5rem .7rem;border-radius:9px;text-decoration:none;
  font-size:.875rem;line-height:1.45;color:var(--ink-3);transition:background .2s,color .2s}
.pg-toc a::before{content:counter(toc,decimal-leading-zero);font-weight:700;
  color:var(--line-2);flex:0 0 auto}
.pg-toc a:hover{background:var(--coral-tint);color:var(--coral-d)}
.pg-toc a:hover::before{color:var(--coral)}

/* forms */
.pg-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:clamp(1.6rem,4vw,2.6rem)}
.pg-field{margin-bottom:1.1rem}
.pg-field label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem}
.pg-field input,.pg-field textarea,.pg-field select{
  width:100%;box-sizing:border-box;min-height:52px;padding:.85rem 1.05rem;
  border:1px solid var(--line-2);border-radius:12px;background:var(--bg);
  font-family:var(--f-b);font-size:1rem;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.pg-field textarea{min-height:150px;resize:vertical;line-height:1.65}
.pg-field input:focus,.pg-field textarea:focus,.pg-field select:focus{
  outline:none;border-color:var(--coral);box-shadow:0 0 0 4px var(--coral-tint)}
.pg-field input::placeholder,.pg-field textarea::placeholder{color:var(--ink-3);opacity:.7}
.pg-submit{width:100%;min-height:54px;border:0;border-radius:var(--r-pill);cursor:pointer;
  font-family:var(--f-d);font-weight:600;font-size:1.02rem;color:#fff;
  background:linear-gradient(135deg,var(--coral),var(--coral-d));box-shadow:var(--sh-coral);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.pg-submit:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(230,89,96,.6)}
.pg-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.pg-formnote{font-size:.85rem;color:var(--ink-3);text-align:center;margin:1rem 0 0}

/* contact / info tiles */
.pg-tiles{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:640px){.pg-tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.pg-tiles--3{grid-template-columns:repeat(3,1fr)}}
.pg-tile{display:flex;gap:1rem;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.pg-tile:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--coral-line)}
.pg-tile .cv-ic{margin:0;flex:0 0 auto;width:40px;height:40px;border-radius:11px}
.pg-tile .cv-ic svg{width:18px;height:18px}
.pg-tile h3{font-family:var(--f-d);font-weight:600;font-size:1rem;color:var(--ink);margin:0 0 .3rem}
.pg-tile p{font-size:.9rem;line-height:1.65;color:var(--ink-3);margin:0}
.pg-tile a{color:var(--coral-d);font-weight:700;text-decoration:none}

/* auth card */
.pg-auth{max-width:460px;margin-inline:auto}
.pg-auth .pg-form{text-align:left}
.pg-auth-h{text-align:center;margin-bottom:1.8rem}
.pg-auth-h h2{font-family:var(--f-d);font-weight:600;font-size:1.6rem;color:var(--ink);
  margin:0 0 .5rem;letter-spacing:-.02em}
.pg-auth-h p{font-size:.95rem;line-height:1.65;color:var(--ink-3);margin:0}
.pg-or{display:flex;align-items:center;gap:1rem;margin:1.4rem 0;font-size:.75rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pg-or::before,.pg-or::after{content:'';flex:1;height:1px;background:var(--line)}
.pg-oauth{width:100%;min-height:52px;display:flex;align-items:center;justify-content:center;
  gap:.7rem;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-family:var(--f-b);font-weight:700;font-size:.95rem;color:var(--ink);cursor:pointer;
  transition:border-color .2s,background .2s}
.pg-oauth:hover{border-color:var(--coral);background:var(--coral-tint)}

/* contact-style split: info rail is wider than the legal TOC rail */
@media(min-width:1020px){
  .pg-split--form{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:2.4rem}
  .pg-split--form>*:first-child{position:static}
}
.pg-tile p{word-break:break-word}

/* ═══════════════════════════════════════════════════════════════════
   PRICING
   The page keeps its own markup and checkout JS; only the surface
   changes so it matches the rest of the system.
   ═══════════════════════════════════════════════════════════════════ */
.pr-section{background:var(--bg)!important;padding:var(--sp) 0!important}
.pr-intro{color:var(--ink-3)!important;font-size:var(--t-body-l)!important;line-height:1.72!important;
  max-width:56ch;margin:0 auto 1rem!important;text-align:center}
.pr-billing-note{color:var(--ink-3)!important;font-size:.88rem!important;text-align:center;
  margin-bottom:clamp(2.4rem,5vw,3.4rem)!important}
.pr-grid{gap:1.2rem!important;align-items:stretch!important}
.pr-card{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--r-lg)!important;box-shadow:var(--sh-sm)!important;
  padding:1.9rem 1.7rem!important;position:relative;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s!important;
}
.pr-card:hover{transform:translateY(-6px)!important;box-shadow:var(--sh)!important;
  border-color:var(--coral-line)!important}
.pr-card.primary{border-color:var(--coral)!important;box-shadow:var(--sh)!important}
.pr-tag{
  background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;color:#fff!important;
  font-family:var(--f-b)!important;font-size:.66rem!important;font-weight:700!important;
  letter-spacing:.13em!important;text-transform:uppercase;border-radius:var(--r-pill)!important;
  padding:.34rem .85rem!important;box-shadow:0 6px 16px -8px rgba(230,89,96,.8)!important;
}
.pr-name{font-family:var(--f-b)!important;font-size:.72rem!important;font-weight:700!important;
  letter-spacing:.15em!important;text-transform:uppercase;color:var(--ink-3)!important}
.pr-price{font-family:var(--f-d)!important;font-weight:600!important;
  font-size:2.5rem!important;line-height:1.05!important;letter-spacing:-.03em!important;
  color:var(--ink)!important}
.pr-sub{color:var(--ink-3)!important;font-size:.86rem!important}
.pr-save{background:var(--coral-tint)!important;color:var(--coral-d)!important;
  border:1px solid var(--coral-line)!important;border-radius:var(--r-pill)!important;
  font-size:.68rem!important;font-weight:700!important;letter-spacing:.06em!important;
  padding:.26rem .6rem!important}
.pr-feat{color:var(--ink-2)!important;font-size:.9rem!important;line-height:1.6!important}
.pr-feat svg,.pr-feat .chk{color:var(--coral-d)!important;stroke:var(--coral-d)!important}
.pr-cta{
  background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;color:#fff!important;
  border:0!important;border-radius:var(--r-pill)!important;font-family:var(--f-d)!important;
  font-weight:600!important;font-size:.98rem!important;min-height:50px;
  box-shadow:var(--sh-coral)!important;transition:transform .22s var(--ease)!important;
}
.pr-cta:hover{transform:translateY(-2px)}
.pr-lifetime{
  background:linear-gradient(135deg,#FFF1F0,#FFE4E3)!important;
  border:1px solid var(--coral-line)!important;border-radius:var(--r-lg)!important;
  box-shadow:none!important;padding:clamp(1.8rem,4vw,2.6rem)!important;
}
.pr-lt-tag{background:var(--ink)!important;color:#fff!important;border-radius:var(--r-pill)!important;
  font-size:.66rem!important;font-weight:700!important;letter-spacing:.13em!important;
  text-transform:uppercase;padding:.34rem .85rem!important}
.pr-lt-left h3,.pr-lt-left h2{font-family:var(--f-d)!important;font-weight:600!important;
  color:var(--ink)!important;letter-spacing:-.02em!important}
.pr-lt-left p{color:var(--ink-2)!important;line-height:1.72!important}
.pr-lt-price{font-family:var(--f-d)!important;font-weight:600!important;font-size:2.6rem!important;
  color:var(--ink)!important;letter-spacing:-.03em!important}
.pr-lt-btn{background:var(--ink)!important;color:#fff!important;border:0!important;
  border-radius:var(--r-pill)!important;font-family:var(--f-d)!important;font-weight:600!important;
  min-height:50px;box-shadow:var(--sh)!important;transition:transform .22s var(--ease)!important}
.pr-lt-btn:hover{transform:translateY(-2px)}
.pr-trust{color:var(--ink-3)!important;font-size:.88rem!important;line-height:1.7!important;
  max-width:64ch;margin-inline:auto;text-align:center}
.pr-faq{max-width:840px;margin-inline:auto}
.pr-faq-item{background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:14px!important;box-shadow:var(--sh-sm)!important;margin-bottom:.7rem!important}
.pr-faq-item h3,.pr-faq-item summary,.pr-faq-item .q{font-family:var(--f-b)!important;
  font-weight:700!important;color:var(--ink)!important}
.pr-faq-item p{color:var(--ink-3)!important;line-height:1.75!important}
.pr-modal-overlay{background:rgba(36,27,28,.55)!important;backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px)}
.pr-modal{background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--r-lg)!important;box-shadow:0 30px 70px -20px rgba(36,27,28,.5)!important}
.pr-modal h3,.pr-modal-plan{font-family:var(--f-d)!important;font-weight:600!important;
  color:var(--ink)!important}
.pr-modal input{min-height:52px;border:1px solid var(--line-2)!important;border-radius:12px!important;
  background:var(--bg)!important;color:var(--ink)!important;font-family:var(--f-b)!important}
.pr-modal input:focus{outline:none;border-color:var(--coral)!important;
  box-shadow:0 0 0 4px var(--coral-tint)!important}
.pr-modal-fine{color:var(--ink-3)!important;font-size:.8rem!important}
.pr-or{color:var(--ink-3)!important;font-size:.75rem!important;font-weight:700!important;
  letter-spacing:.14em!important;text-transform:uppercase}
/* the intro now lives in the hero, and the FAQ band should not be pure white */
.pr-section .pr-intro{display:none}
.pr-faq,.pr-faq-wrap,section.pr-faq-section{background:transparent!important}

/* ═══════════════════════════════════════════════════════════════════
   BLOG (markup is generated in blog.go)
   ═══════════════════════════════════════════════════════════════════ */
.blog-hero .hero-title{font-size:clamp(2.1rem,4.8vw,3.4rem)!important}
.blog-hero .hero-subtitle{font-size:var(--t-body-l)!important;line-height:1.7!important;
  color:rgba(255,255,255,.86)!important;max-width:58ch;margin:.9rem auto 0!important}
/* only the nav goes transparent; the SECTION must keep the coral art, and a
   2-class shorthand here would reset background-image to none */
.hero-section.blog-hero .hero-nav{background:transparent!important}
.hero-section.blog-hero{background-color:transparent!important}
.hero-section.blog-hero .hero-title,.hero-section.blog-hero .nav-link{color:#fff!important}
.post-meta-bar{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;align-items:center;
  font-size:.85rem;font-weight:600;color:rgba(255,255,255,.82)!important;margin-top:1rem}

.posts-grid{display:grid!important;gap:1.4rem!important;grid-template-columns:1fr!important;
  max-width:1160px;margin-inline:auto}
@media(min-width:640px){.posts-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(min-width:1000px){.posts-grid{grid-template-columns:repeat(3,1fr)!important}}
.post-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--r-lg)!important;box-shadow:var(--sh-sm)!important;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s!important;
}
.post-card:hover{transform:translateY(-6px)!important;box-shadow:var(--sh)!important;
  border-color:var(--coral-line)!important}
.post-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  background:linear-gradient(135deg,#F3DEDB,#E9CFCC)!important;border:0!important}
.post-body{padding:1.4rem 1.5rem 1.6rem!important;display:flex;flex-direction:column;flex:1}
.post-meta{font-size:.74rem!important;font-weight:700!important;letter-spacing:.1em!important;
  text-transform:uppercase;color:var(--ink-3)!important;margin-bottom:.6rem!important}
.post-title{font-family:var(--f-d)!important;font-weight:600!important;font-size:1.14rem!important;
  line-height:1.3!important;letter-spacing:-.014em!important;color:var(--ink)!important;
  margin:0 0 .85rem!important}
.post-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.tag-pill{background:var(--coral-tint)!important;color:var(--coral-d)!important;
  border:1px solid var(--coral-line)!important;border-radius:var(--r-pill)!important;
  font-size:.68rem!important;font-weight:700!important;letter-spacing:.04em!important;
  padding:.26rem .68rem!important}
.post-link{margin-top:auto;font-family:var(--f-d)!important;font-weight:600!important;
  font-size:.92rem!important;color:var(--coral-d)!important;text-decoration:none!important}

/* article body */
.post-content{max-width:74ch;margin-inline:auto}
.post-content h2{font-family:var(--f-d);font-weight:600;font-size:var(--t-m);line-height:1.16;
  letter-spacing:-.02em;color:var(--ink);margin:2.6rem 0 .9rem}
.post-content h3{font-family:var(--f-d);font-weight:600;font-size:1.14rem;color:var(--ink);
  margin:2rem 0 .7rem}
.post-content p{font-size:var(--t-body-l);line-height:1.82;color:var(--ink-3);margin:0 0 1.15rem}
.post-content ul,.post-content ol{margin:0 0 1.25rem;padding-left:1.3rem}
.post-content li{font-size:var(--t-body-l);line-height:1.75;color:var(--ink-3);margin-bottom:.5rem}
.post-content li::marker{color:var(--coral)}
.post-content a{color:var(--coral-d);font-weight:700;text-decoration:none;
  border-bottom:1px solid var(--coral-line)}
.post-content a:hover{border-bottom-color:var(--coral-d)}
.post-content img{max-width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line)}
.post-content blockquote{margin:0 0 1.4rem;padding:1.1rem 1.4rem;background:var(--coral-tint);
  border-left:3px solid var(--coral);border-radius:var(--r);color:var(--ink-2)}
.post-content pre{background:var(--ink);color:#F6F5F7;padding:1.1rem 1.3rem;border-radius:var(--r);
  overflow-x:auto;font-size:.9rem}
.post-content code{background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;
  padding:.1rem .35rem;font-size:.9em}
.post-content pre code{background:none;border:0;padding:0}
/* blog index hero uses .blog-hero on the content, not the section */
.pg-hero .hero-content.blog-hero{padding:clamp(2.6rem,6vw,4.6rem) 0 clamp(3rem,6vw,4.6rem)!important}

/* ═══════════════════════════════════════════════════════════════════
   YOUTUBE TO MP3
   Keeps its own markup and converter JS; surface only.
   ═══════════════════════════════════════════════════════════════════ */
.tool-features,.tool-steps,.mp3-intro,.mp3-steps,.mp3-usecases,.mp3-why,.mp3-safe,.tool-faq{
  padding:var(--sp) 0!important}
.tool-features,.mp3-steps,.mp3-safe{background:var(--bg)!important}
.tool-steps,.mp3-usecases,.tool-faq{background:var(--bg-tint)!important}
.mp3-intro,.mp3-why{background:var(--bg-soft)!important}
.tool-features .section-title,.tool-steps .section-title,.tool-faq .section-title,
.mp3-intro h2,.mp3-steps h2,.mp3-usecases h2,.mp3-why h2,.mp3-safe h2{
  font-family:var(--f-d)!important;font-weight:600!important;font-size:var(--t-l)!important;
  line-height:1.06!important;letter-spacing:-.028em!important;color:var(--ink)!important;
  text-align:center;margin:0 auto 1.1rem!important;max-width:22ch}
.mp3-intro p,.mp3-why p,.mp3-safe p,.mp3-why-intro{
  color:var(--ink-3)!important;font-size:var(--t-body-l)!important;line-height:1.8!important}
.mp3-why-intro{max-width:60ch;margin-inline:auto;text-align:center}

/* the tool card at the top of the page */
.tool-input-card{background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--r-lg)!important;box-shadow:var(--sh)!important}
.tool-input-group{border-radius:var(--r-pill)!important;background:var(--surface)!important}

/* card families */
.feature-card,.step-item,.mp3-step-card,.mp3-usecase-card,.mp3-benefit-card{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--r)!important;box-shadow:var(--sh-sm)!important;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s!important}
/* .step-item is the odd one out: the rule above turns it into a card, but unlike
   .feature-card / .mp3-*-card it has no padding of its own in the page CSS, so its
   text sat flush against the border. Added 2026-07-30. */
.step-item{padding:1.6rem 1.25rem!important}
.step-item:hover{transform:translateY(-5px)!important;box-shadow:var(--sh)!important;
  border-color:var(--coral-line)!important}
.feature-card:hover,.mp3-step-card:hover,.mp3-usecase-card:hover,.mp3-benefit-card:hover{
  transform:translateY(-5px)!important;box-shadow:var(--sh)!important;
  border-color:var(--coral-line)!important}
.feature-card h3,.step-item h3,.mp3-step-card h3,.mp3-usecase-card h3,.mp3-benefit-card h3,
.mp3-benefit-header{font-family:var(--f-d)!important;font-weight:600!important;
  font-size:var(--t-h3)!important;color:var(--ink)!important;letter-spacing:-.014em!important}
.feature-card p,.step-item p,.mp3-step-card p,.mp3-usecase-card p,.mp3-benefit-card p{
  color:var(--ink-3)!important;font-size:var(--t-body)!important;line-height:1.72!important}
.feature-icon,.mp3-usecase-icon{width:46px!important;height:46px!important;border-radius:13px!important;
  background:var(--coral-tint)!important;border:1px solid var(--coral-line)!important;
  color:var(--coral-d)!important;display:flex!important;align-items:center;justify-content:center;
  box-shadow:none!important}
.feature-icon svg,.mp3-usecase-icon svg{width:21px;height:21px;stroke:var(--coral-d)}
.step-num,.mp3-step-num{background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;
  color:#fff!important;font-family:var(--f-d)!important;font-weight:600!important;
  box-shadow:0 6px 16px -8px rgba(230,89,96,.8)!important;border:0!important}
.mp3-benefit-badge,.mp3-safe-badge{background:var(--coral-tint)!important;color:var(--coral-d)!important;
  border:1px solid var(--coral-line)!important;border-radius:var(--r-pill)!important;
  font-size:.68rem!important;font-weight:700!important;letter-spacing:.1em!important;
  text-transform:uppercase;padding:.3rem .75rem!important}

/* this page ships its own accordion convention */
.tool-faq .faq-item{background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:14px!important;box-shadow:var(--sh-sm)!important;margin-bottom:.7rem!important;
  overflow:hidden}
.tool-faq .faq-item.open{border-color:var(--coral-line)!important;box-shadow:var(--sh)!important}
.tool-faq .faq-question{font-family:var(--f-b)!important;font-weight:700!important;
  font-size:1rem!important;color:var(--ink)!important;padding:1.2rem 1.35rem!important;
  background:none!important;min-height:52px}
.tool-faq .faq-question:hover{color:var(--coral-d)!important}
.tool-faq .faq-icon{stroke:var(--ink-3)!important}
.tool-faq .faq-item.open .faq-icon{stroke:var(--coral-d)!important}
.tool-faq .faq-answer{padding:0 1.35rem 1.3rem!important}
.tool-faq .faq-answer p{color:var(--ink-3)!important;font-size:var(--t-body)!important;
  line-height:1.75!important;margin:0!important}
/* On /youtube-to-mp3 the support + copyright block sits INSIDE a white card,
   so the white-on-coral hero treatment has to be undone there. */
.tool-input-card .support-us-btn{
  background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;
  border:0!important;color:#fff!important;box-shadow:var(--sh-coral)!important}
.tool-input-card .support-us-btn:hover{color:#fff!important;filter:brightness(1.04)}
.tool-input-card .support-us-btn+div{color:var(--ink-3)!important}
.tool-input-card .copyright-confirm label{color:var(--ink-3)!important}
.tool-input-card .cc-disclaimer-link{color:var(--coral-d)!important}
.tool-input-card .copyright-confirm+div a{color:var(--ink-3)!important}
.tool-input-card #copyrightAgree{accent-color:var(--coral)}
.tool-input-card .input-tagline{color:var(--coral-d)!important}
.tool-input-card .input-tagline svg{stroke:var(--coral-d)!important}

/* ── comparison tables and answer blocks (ytmp3 page) ──────────────────── */
.cv-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-sm);max-width:900px;
  margin-inline:auto}
.cv-table{width:100%;min-width:560px;border-collapse:collapse;text-align:left}
.cv-table th,.cv-table td{padding:1.05rem 1.35rem;vertical-align:top;font-size:var(--t-body);
  line-height:1.62}
.cv-table thead th{font-family:var(--f-b);font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);background:var(--bg-soft);
  border-bottom:1px solid var(--line)}
.cv-table tbody tr{border-bottom:1px solid var(--line)}
.cv-table tbody tr:last-child{border-bottom:0}
.cv-table td:first-child{font-family:var(--f-d);font-weight:600;color:var(--ink);white-space:nowrap}
.cv-table td{color:var(--ink-3)}
.cv-table td.yes{color:var(--ink);font-weight:500}
.cv-answer{max-width:800px;margin:0 auto clamp(2rem,4vw,3rem);padding:1.5rem 1.7rem;
  background:var(--coral-tint);border:1px solid var(--coral-line);border-left:3px solid var(--coral);
  border-radius:var(--r);font-size:var(--t-body-l);line-height:1.72;color:var(--ink-2)}
.cv-answer strong{color:var(--ink)}
.cv-verdict{max-width:900px;margin:1.6rem auto 0;font-size:var(--t-body);line-height:1.7;
  color:var(--ink-3);text-align:center}
@media(max-width:620px){.cv-table th,.cv-table td{padding:.85rem 1rem}}

    /* ══ TOOL SWITCHER: 3 tabs, app-style tab bar on mobile ═══════════
       Added 2026-07-30. On phones the tabs used to stack into a vertical
       list of full-width buttons. Two older rules caused that and are
       overridden below:
         ui-sections.css  @640px  .tool-switcher{flex-direction:column}
         cutter-theme.css @760px  .tool-switch-btn{flex:1 1 100%}
       !important is required here only because the base rules above
       (padding/font-size on .tool-switcher .tool-switch-btn) use it.
       ══════════════════════════════════════════════════════════════ */
    .tool-switcher{flex-wrap:nowrap!important}
    .tool-switcher .tool-switch-btn{white-space:nowrap}

    @media(max-width:760px){
      .tool-switcher{
        display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
        width:100%!important;max-width:none!important;
        gap:.2rem!important;padding:.28rem!important;margin-bottom:1.6rem!important;
      }
      /* each tab: icon above label, equal width, thumb-sized target */
      .tool-switcher .tool-switch-btn{
        flex:1 1 0!important;width:auto!important;min-width:0!important;
        display:flex!important;flex-direction:column!important;align-items:center!important;
        justify-content:center!important;gap:.25rem!important;
        padding:.5rem .28rem!important;min-height:54px!important;
        font-size:.68rem!important;font-weight:700!important;line-height:1.15!important;
        letter-spacing:.01em!important;text-align:center!important;
        white-space:normal!important;border-radius:16px!important;
      }
      .tool-switcher .tool-switch-btn svg{width:17px!important;height:17px!important}
      .tsw-label{display:block;overflow-wrap:anywhere}
    }