/* GENERATED by build_css_bundles.sh - do not edit. Sources, in order: style.css components.css ui-sections.css controls-branding.css responsive.css mobile-complete.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; }

/* ===== controls-branding.css ===== */
/* Controls Section Branding Colors */
.controls-section .card {
    background: white;
    border: 1px solid #e5e7eb;
}

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

/* Tabs with branding colors */
.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tab {
    flex: 1;
    padding: 0.75rem 1rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #64748b;
}

.tab:hover {
    border-color: #ff7780;
    color: #ff7780;
}

.tab.active {
    background: #ff7780;
    border-color: #ff7780;
    color: white;
}

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

.dark-mode .tab.active {
    background: #ff7780;
    border-color: #ff7780;
}

/* Add Clip Button */
.add-clip-btn {
    width: 100%;
    padding: 0.75rem;
    background: white;
    border: 2px dashed #ff7780;
    color: #ff7780;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-clip-btn:hover {
    background: #fff5f5;
    border-color: #ff7780;
    color: #ff7780;
}

.dark-mode .add-clip-btn {
    background: var(--bg-darker);
}

.dark-mode .add-clip-btn:hover {
    background: rgba(255, 119, 128, 0.12);
}

/* Primary buttons with branding */
.btn-primary {
    background: linear-gradient(135deg, #ffb3b8 0%, #ff7780 50%, #e65960 100%);
    border: none;
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff9aa0 0%, #e65960 100%);
}

/* Outline buttons with branding */
.btn-outline {
    background: white;
    border: 2px solid #ff7780;
    color: #ff7780;
}

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

.btn-outline.btn-primary {
    background: #ff7780;
    border-color: #ff7780;
    color: white;
}

.dark-mode .btn-outline {
    background: transparent;
}

.dark-mode .btn-outline:hover:not(:disabled) {
    background: #ff7780;
}
/* ===== 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-complete.css ===== */
/* ============================================
   COMPLETE MOBILE RESPONSIVE SOLUTION
   Perfect responsiveness for ALL screen sizes
   ============================================ */

/* ============================================
   BASE MOBILE (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {

    /* Prevent horizontal overflow */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    * {
        max-width: 100% !important;
    }

    /* Container fixes */
    .container,
    .main-container {
        max-width: 100% !important;
        padding: 0 1rem !important;
        overflow-x: hidden !important;
    }

    /* Video editor grid - single column */
    .video-editor,
    .local-upload-layout {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 1rem !important;
    }

    /* Video upload section - complete fix */
    #localUploadSection {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #localUploadSection * {
        max-width: 100% !important;
    }

    /* Video player */
    #localUploadSection .video-placeholder {
        min-height: 180px !important;
        width: 100% !important;
    }

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

    /* Text content - prevent overflow */
    #localUploadSection h3,
    #localUploadSection p,
    #localUploadSection .video-title {
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        max-width: 100% !important;
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }

    /* Clip cards - modern compact design */
    #localUploadSection .clip-item {
        padding: 0.875rem !important;
        margin-bottom: 0.875rem !important;
        position: relative !important;
        border-radius: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #localUploadSection .clip-item h4 {
        font-size: 0.95rem !important;
        margin-bottom: 0.75rem !important;
        padding-right: 35px !important;
        /* Space for remove button */
    }

    /* Remove button - circular modern design */
    #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;
        max-width: 28px !important;
        max-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;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    #localUploadSection .remove-clip:hover,
    #localUploadSection .remove-clip:active {
        background: #dc2626 !important;
        color: white !important;
        transform: scale(1.05) !important;
    }

    /* Form elements */
    #localUploadSection .time-input-small {
        font-size: 0.9rem !important;
        padding: 0.6rem !important;
        margin-bottom: 0.5rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #localUploadSection label {
        font-size: 0.85rem !important;
        margin-bottom: 0.35rem !important;
        display: block !important;
    }

    /* Buttons - full width */
    #localUploadSection button {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
        padding: 0.75rem !important;
        box-sizing: border-box !important;
    }

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

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

    /* Grids - all single column */
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Images responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Range slider handles - Better mobile touch */
    .range-slider-handle {
        cursor: pointer !important;
        touch-action: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .range-slider-container {
        touch-action: none !important;
        position: relative !important;
    }

    /* Increase touch target size on mobile — 20px handle + 13px on every side
       = 46px, above the 44px minimum touch target. */
    .range-slider-handle::before {
        content: '' !important;
        position: absolute !important;
        top: -13px !important;
        left: -13px !important;
        right: -13px !important;
        bottom: -13px !important;
        z-index: 1 !important;
    }

    /* D/H/M/S time fields: comfortable 44px touch height on phones */
    .dhms-input {
        min-height: 44px !important;
    }

/* Format and Quality selectors - full width on mobile */
.format-quality-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
}

.format-quality-row>div[style*="flex: 1"],
.format-quality-row>div[style*="flex:1"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

.format-selector {
    width: 100% !important;
}

.format-display {
    width: 100% !important;
    box-sizing: border-box !important;
}

#qualityGroup {
    width: 100% !important;
}

#qualitySelect {
    width: 100% !important;
    box-sizing: border-box !important;
}
}

/* ============================================
   MOBILE L (max-width: 525px)
   ============================================ */
@media (max-width: 525px) {

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

    #localUploadSection .clip-item {
        padding: 0.75rem !important;
    }

    #localUploadSection .clip-item h4 {
        font-size: 0.9rem !important;
        padding-right: 32px !important;
    }

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

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

    #localUploadSection button {
        padding: 0.7rem !important;
        font-size: 0.9rem !important;
    }
}

/* ============================================
   MOBILE M (max-width: 375px)
   ============================================ */
@media (max-width: 375px) {

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

    #localUploadSection h3,
    #localUploadSection .video-title {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }

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

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

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

    #localUploadSection .clip-item {
        padding: 0.65rem !important;
        margin-bottom: 0.75rem !important;
    }

    #localUploadSection .clip-item h4 {
        font-size: 0.85rem !important;
        margin-bottom: 0.65rem !important;
        padding-right: 30px !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;
        max-width: 26px !important;
        max-height: 26px !important;
        font-size: 1rem !important;
    }

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

    #localUploadSection label {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
    }

    #localUploadSection button {
        padding: 0.65rem !important;
        font-size: 0.875rem !important;
    }
}

/* ============================================
   MOBILE S (max-width: 320px)
   ============================================ */
@media (max-width: 320px) {

    .container,
    .main-container {
        padding: 0 0.65rem !important;
    }

    #localUploadSection h3,
    #localUploadSection .video-title {
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
        padding: 0.5rem !important;
    }

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

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

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

    #localUploadSection .clip-item {
        padding: 0.55rem !important;
        margin-bottom: 0.65rem !important;
    }

    #local UploadSection .clip-item h4 {
        font-size: 0.8rem !important;
        margin-bottom: 0.55rem !important;
        padding-right: 28px !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;
        max-width: 24px !important;
        max-height: 24px !important;
        font-size: 0.95rem !important;
    }

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

    #localUploadSection label {
        font-size: 0.7rem !important;
        margin-bottom: 0.2rem !important;
    }

    #localUploadSection button {
        padding: 0.6rem !important;
        font-size: 0.85rem !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;
    }
    /* The rule above uses display:inline-flex!important, which beats the plain
       .hidden rule in style.css. app.js hides the switcher once the editor opens,
       so .hidden has to win here or the tabs stay on screen above the editor. */
    .tool-switcher.hidden{display:none!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}
    /* The field used to be borderless inside the pill, so on the coral hero it
       read as plain text rather than something you type into. It now carries its
       own outline and reacts on focus. */
    .hero-input{background:var(--surface)!important;
      border:1px solid var(--line-2)!important;border-radius:var(--r-pill)!important;
      font-family:var(--f-b)!important;font-size:1rem!important;color:var(--ink)!important;
      padding:1rem 1.4rem!important;
      transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
    .hero-input:hover{border-color:var(--coral-line)!important}
    .hero-input:focus{border-color:var(--coral)!important;outline:none!important;
      box-shadow:0 0 0 3px var(--coral-tint)!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.
         responsive.css forces `.action-row{flex-direction:column}` at this width,
         which stacked Full Download above Create and left them 232px wide inside
         a 322px panel. Grid overrides it and gives two equal, full-width halves. */
      .action-row{position:sticky;bottom:0;z-index:6;margin:0 -.6rem -.6rem;
        padding:.6rem .6rem calc(.6rem + env(safe-area-inset-bottom));
        background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);
        display:grid!important;grid-template-columns:1fr 1fr!important;gap:.5rem!important}
      .action-row .btn,.action-row button{min-height:50px;width:100%!important;
        font-size:.95rem!important;padding:.7rem .5rem!important;white-space:nowrap}
      #editorPremiumCTA{padding-bottom:.4rem}

      /* ── app-density pass ─────────────────────────────────────────────
         The editor was 322px wide inside a 390px screen: 14px of .container
         padding plus 20px of .hero-content padding on each side, then its own
         13.6px again. Three nested paddings for one panel. Claw that back so
         the editor reads as a full-width app surface. */
      .hero-content{padding-left:10px!important;padding-right:10px!important}
      .hero-content .container{padding-left:6px!important;padding-right:6px!important}
      .video-editor{padding:.6rem!important;border-radius:18px}
      .video-editor .controls-section .card{padding:.7rem!important}
      .video-editor .video-player-section{margin-bottom:.15rem}
      .time-section h4{margin-bottom:.5rem!important}
      #clipDuration{margin-top:.35rem!important}
      /* the nav eats 24px top and bottom before anything else renders */
      .hero-nav{padding-top:0!important;padding-bottom:0!important}
    }
    @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}
/* Open burger menu was being cut off on the short-hero pages (/login and
   /contact both end at 348px, and the menu runs to 402px, so the LOGIN item
   vanished behind the next section). It is `position:fixed`, which normally
   escapes ancestor overflow — but `.hero-nav` carries `backdrop-filter:blur(16px)`,
   and a filtered ancestor becomes the containing block for fixed descendants, so
   `.hero-section{overflow:hidden}` clips the menu after all. Drop the clip only
   while the menu is open, so nothing else about the hero changes. */
@media (max-width:768px){
  .hero-section:has(.nav-menu.active){overflow:visible!important}
}
.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}
/* On phones the pill was 56px tall on /video-cutter, /pricing, /contact and
   /login, so the crumb read as stacked rather than one line.

   The cause was NOT text wrapping. `responsive.css` applies
   `a{min-height:44px;min-width:44px}` to EVERY anchor under 768px as a touch
   target, which inflated the "Home" link into a 44px square and dragged the
   pill's height with it. Exempt just this link; the touch rule stays intact
   everywhere else, and the pill keeps a 30px min-height so it is still a
   reasonable tap area for secondary navigation. */
@media (max-width:760px){
  .pg-crumb{font-size:.62rem!important;letter-spacing:.06em!important;
    gap:.3rem!important;padding:.3rem .75rem!important;margin-bottom:.85rem!important;
    min-height:30px;flex-wrap:nowrap!important;white-space:nowrap!important;
    max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .pg-crumb a{min-height:0!important;min-width:0!important;white-space:nowrap}
}

/* 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;height:auto;
  background:linear-gradient(135deg,#F3DEDB,#E9CFCC)!important;border:0!important}
/* Offer banner. Was two JPEGs swapped by a media query; now live markup that
   reflows on its own via clamp(), so there is no separate mobile asset and no
   art-direction swap. line-height:0 was needed for the old image-only version
   and MUST stay gone, the banner has real text in it now. */
.offer-banner-wrap{position:relative;width:100vw;left:50%;margin-left:-50vw;z-index:5}
.offer-banner{display:block;width:100%;cursor:pointer;text-decoration:none;
  transition:filter .2s ease}
.offer-banner:hover,.offer-banner:focus-visible{filter:brightness(1.06);outline:none}
.offer-banner:focus-visible{box-shadow:inset 0 0 0 3px var(--primary,#ff7780)}
/* The CTA is a span, not a nested <a>: the whole banner is already the link and
   an anchor inside an anchor is invalid. Hover lives here because the source
   markup carried a non-standard style-hover attribute that no browser reads. */
.ob-cta{cursor:pointer}
.offer-banner:hover .ob-cta{box-shadow:0 16px 38px rgba(255,190,30,.62),0 2px 0 #a35d00,
  inset 0 2px 0 rgba(255,255,255,.9),inset 0 -3px 6px rgba(150,80,0,.35);
  transform:translateY(-2px)}
@keyframes ob-floaty{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-9px) rotate(18deg)}100%{transform:translateY(0) rotate(0deg)}}
@keyframes ob-flick{0%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}100%{opacity:.55;transform:scale(1)}}
@keyframes ob-sheen{0%{transform:translateX(-140%) skewX(-18deg)}55%{transform:translateX(320%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
@keyframes ob-sparkle{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}
/* Mobile sizing shipped with the banner source as bare attribute selectors
   ([data-mobile-hide], [data-banner-content]). Scoped under .offer-banner here,
   because unscoped they would hide or zoom ANY element on the site that ever
   picks up those attribute names. */
@media (max-width:760px){
  .offer-banner [data-mobile-hide]{display:none!important}
  .offer-banner [data-banner-content]{zoom:.82}
  /* Phone layout, per the owner: drop the red "no other tool" ribbon and the
     "PREMIUM FEATURES." heading, then move the three benefits BELOW the CTA as
     a plain horizontal row. */
  .offer-banner [data-ob-ribbon],
  .offer-banner [data-ob-featshead]{display:none!important}
  /* The nine floating confetti shapes (6 ob-floaty + 3 ob-sparkle) are placed by
     percentage, so on a phone they land on top of the copy instead of around it. */
  .offer-banner [data-ob-dot]{display:none!important}
  /* The stopwatch art is dead weight on a phone. With it gone the offer column
     and the CTA share the first line, spaced evenly rather than pinned to the
     two edges, so neither block touches the banner border. */
  .offer-banner [data-ob-clock]{display:none!important}
  .offer-banner [data-banner-content]{justify-content:space-evenly!important}
  .offer-banner [data-ob-left]{order:1!important;flex:0 0 auto!important}
  .offer-banner [data-ob-offer]{align-items:flex-start!important;text-align:left}
  /* CTA rides on the same line, with the "Avail before it's gone" line centred
     under the button. That line cannot be re-parented by CSS, so the copy inside
     the CTA group is a mobile-only duplicate and the original one in the offer
     column is hidden here. */
  .offer-banner [data-ob-avail]{display:none!important}
  .offer-banner [data-ob-avail-m]{display:flex!important}
  /* order only applies because these are direct children of the same flex row */
  .offer-banner [data-ob-cta-group]{order:2!important;
    flex-direction:column!important;align-items:center!important;
    gap:clamp(6px,1.4vw,10px)!important;flex:0 0 auto!important}
  .offer-banner [data-ob-titlegroup]{order:3!important;width:100%!important}
  .offer-banner [data-ob-feats]{order:5!important;
    flex-direction:row!important;flex-wrap:wrap!important;
    justify-content:center!important;align-items:center!important;
    width:100%!important;gap:5px 12px!important;margin-top:2px}
  .offer-banner [data-ob-feat]{gap:5px!important}
  .offer-banner [data-ob-feat] > div{font-size:12px!important;white-space:nowrap}
  /* Icon pucks stay on mobile, just shrunk: the desktop 28-30px square would
     eat the row. This rule must come AFTER the one above, which is what keeps
     the 12px label size off the puck glyph. */
  .offer-banner [data-ob-featic]{width:16px!important;height:16px!important;
    border-radius:5px!important;font-size:9px!important;box-shadow:none!important}
  /* Title is one line on phones: the hard <br> in the markup is dropped. The
     size is a fit-to-width formula, not a fixed value, because one line of Anton
     costs 16.17px of width per 1px of font-size (measured) and the box is only
     100vw/zoom minus its 32px padding. min() takes 35px as the ceiling and the
     widest that still fits otherwise, so it never clips and never wraps. */
  .offer-banner [data-ob-title]{white-space:nowrap!important;
    font-size:min(35px, calc(7.4vw - 2px))!important;letter-spacing:.01em!important;
    width:100%!important}
  .offer-banner [data-ob-title] br{display:none!important}
}
@media (max-width:480px){
  .offer-banner [data-banner-content]{zoom:.7}
  /* zoom drops to .7 here, so the same box is wider in zoomed units */
  .offer-banner [data-ob-title]{font-size:min(35px, calc(8.7vw - 2px))!important}
}
/* The homepage hero sat 2.5rem below the banner (ui-sections.css) while
   /youtube-to-mp3 sits at 1.8rem, which is inline in that template under its own
   @media(max-width:500px). Same breakpoint here so the two pages match. */
@media (max-width:500px){
  .hero-content{padding-top:1.8rem!important}
}
/* Thirteen elements animate in this banner. Respect the OS setting, same as the
   Support Us button shake. */
@media (prefers-reduced-motion:reduce){
  .offer-banner *{animation:none!important;transition:none!important}
  .offer-banner:hover .ob-cta{transform:none}
}
.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}
    }