:root {
  --brand: #0F6E56;
  --brand-light: #1D9E75;
  --brand-pale: #E1F5EE;
  --accent: #EF9F27;
  /* Auto-derived readable text colour for each brand-coloured background.
     The admin's brand-vars <style> tag overrides these with WCAG-AA-tested
     values computed from the configured colour's luminance — yellow/amber
     brands get black text, deep brands keep white. These defaults are the
     correct foregrounds for the green default palette above. */
  --brand-text:       #FFFFFF;
  --brand-light-text: #FFFFFF;
  --brand-pale-text:  #1F1F1F;
  --accent-text:      #1F1F1F;
  /* Comma-separated RGB tuples, used for rgba() with custom alpha so the
     admin Appearance picker can recolor every translucent surface too. */
  --brand-rgb: 15, 110, 86;
  --brand-light-rgb: 29, 158, 117;
  --brand-pale-rgb: 225, 245, 238;
  --accent-rgb: 239, 159, 39;
  --radius: 14px;

  /* Default (Dark Theme) */
  --bg-body: #0d0d0d;
  --bg-card: #1a1a1a;
  --bg-input: #262626;
  --text-main: #e8e8e8;
  --text-muted: #aaa;
  --muted-raw: #888;
  --border: rgba(255, 255, 255, 0.08);
  --navbar-bg: rgba(13, 13, 13, 0.85);
  --navbar-border: rgba(255, 255, 255, 0.06);
  --input-placeholder: #888;
  --shadow: none;
}

[data-theme="light"] {
  --bg-body: #f1f3f5;
  --bg-card: #ffffff;
  --bg-input: #f8f9fa;
  --text-main: #212529;
  --text-muted: #495057;
  --muted-raw: #adb5bd;
  --border: rgba(0, 0, 0, 0.08);
  --navbar-bg: rgba(255, 255, 255, 0.85);
  --navbar-border: rgba(0, 0, 0, 0.06);
  --input-placeholder: #adb5bd;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg-body);
  color: var(--text-main);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
}

h1,
h2,
h3,
h4,
h5,
.brand-font {
  font-family: 'Space Grotesk', sans-serif;
}

/* ── COOKIE CONSENT BANNER ── */
/* Notice-only: text + optional link + close button. Position is
   admin-configurable from Settings → Appearance → Cookie consent
   banner. Four variants below:
     .cookie-banner--top            (above content; scrolls away)
     .cookie-banner--top-sticky     (pinned to viewport top)
     .cookie-banner--bottom-sticky  (pinned to viewport bottom — default)
     .cookie-banner--center         (modal overlay with backdrop)
   The default class without a variant suffix is treated like
   --bottom-sticky for back-compat with caches/CDNs serving stale HTML. */
.cookie-banner {
  /* Base layout — position comes from the variant. */
  z-index: 1050;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 0.88rem;
  line-height: 1.45;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
  transition: opacity .2s ease, transform .2s ease;
}

/* Default-equivalent — covers HTML rendered before this update was
   deployed (cache / CDN edge serving stale markup). */
.cookie-banner:not([class*="cookie-banner--"]) {
  position: fixed;
  left: 0; right: 0; bottom: 0;
}

/* ── Position variants for cookie banner ─────────────────────────── */

/* Top — in document flow above content; scrolls away with the page. */
.cookie-banner--top {
  position: relative;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

/* Top sticky — pinned to viewport top, fit-content centered.
   Was edge-to-edge previously; now sits as a centered pill with a
   gap from the viewport edge so the banner doesn't look heavy-
   handed for short messages. */
.cookie-banner--top-sticky {
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100vw - 32px);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
  /* Frosted-glass effect when the bg is translucent. No-op when
     the bg is opaque (the filter still runs but the bg covers
     everything underneath). */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Bottom sticky — pinned to viewport bottom, fit-content centered.
   Was edge-to-edge previously; centering + fit-content makes short
   messages feel less imposing. The classic GDPR placement (no
   visitor wants a giant bar covering the whole bottom of their
   screen for a one-line notice). */
.cookie-banner--bottom-sticky {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100vw - 32px);
  border-radius: 12px;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Center — modal-style overlay in the middle. Backdrop is rendered
   as a fixed pseudo-element OUTSIDE the banner (so the banner's
   own background doesn't sit underneath it) via a sibling-less
   approach: we attach the backdrop via a stacked box-shadow trick
   that paints a huge spread BEHIND the banner. Cheaper than adding
   a sibling element. */
.cookie-banner--center {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow: auto;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.35),
    0 0 0 100vmax rgba(0, 0, 0, 0.45); /* backdrop via huge spread shadow */
  font-size: 0.92rem;
  z-index: 1060;
  /* Frosted-glass effect when bg is translucent — pairs well with
     a low-opacity background to let the dimmed page content show
     through subtly. */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cookie-banner-msg { flex: 1 1 auto; min-width: 0; }
.cookie-banner-link {
  text-decoration: underline;
  font-weight: 600;
  margin-left: 6px;
}
.cookie-banner-close {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: inherit;
  opacity: 0.85;
  font-size: 1.05rem;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity .15s, background .15s;
}
.cookie-banner-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
}
/* Long URLs / labels shouldn't trigger horizontal scroll. */
.cookie-banner-msg,
.cookie-banner-link {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── SITE ANNOUNCEMENT ── */
/* Optional banner shown above the navbar. Position is admin-configurable
   from Settings → Appearance. Four variants:
     .site-announcement--top            (default — scrolls away)
     .site-announcement--top-sticky     (pinned to viewport top)
     .site-announcement--bottom-sticky  (pinned to viewport bottom)
     .site-announcement--center         (modal overlay with backdrop)
   Inline styles supply the colors so admins can pick any palette
   without touching this file. */
.site-announcement {
  width: 100%;
  padding: 8px 16px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.2px;
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.site-announcement a { color: inherit; }
.site-announcement-msg {
  flex: 1 1 auto;
  min-width: 0;
}
.site-announcement-close {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: inherit;
  opacity: 0.85;
  font-size: 1rem;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity .15s, background .15s;
}
.site-announcement-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.16);
}

/* Default-equivalent — for stale HTML that doesn't carry a variant
   class yet (CDN edge before invalidation). */
.site-announcement:not([class*="site-announcement--"]) {
  position: relative;
  z-index: 1;
}

/* ── Position variants for announcement ──────────────────────────── */

/* Top — in document flow above the navbar; scrolls away. */
.site-announcement--top {
  position: relative;
  z-index: 1;
  /* Hide the close button for static position — it scrolls away,
     so dismissal would be pointless. */
}
.site-announcement--top .site-announcement-close { display: none; }

/* Top sticky — pinned to viewport top. */
.site-announcement--top-sticky {
  position: fixed;
  left: 0; right: 0; top: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

/* Bottom sticky — pinned to viewport bottom. */
.site-announcement--bottom-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
}

/* Center — modal overlay with backdrop (huge-spread shadow trick). */
.site-announcement--center {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow: auto;
  border-radius: 14px;
  padding: 22px 28px;
  font-size: 0.95rem;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.35),
    0 0 0 100vmax rgba(0, 0, 0, 0.45); /* backdrop */
  z-index: 1060;
  text-align: center;
}

/* ── Mobile tweaks for both bars ── */
@media (max-width: 575.98px) {
  .cookie-banner {
    padding: 10px 12px;
    gap: 8px;
    font-size: 0.82rem;
    line-height: 1.4;
  }
  .cookie-banner-close {
    padding: 4px 8px;
    font-size: 1rem;
  }
  .cookie-banner-link { margin-left: 4px; }

  .site-announcement {
    padding: 7px 12px;
    font-size: 0.82rem;
    letter-spacing: 0;
  }

  /* Center variants get extra breathing room on small screens —
     the 100vmax backdrop shadow keeps the dimming intact even
     when the modal itself becomes near-full-width. */
  .site-announcement--center,
  .cookie-banner--center {
    width: calc(100vw - 20px);
    padding: 18px 16px;
    border-radius: 12px;
  }
}

/* ── NAVBAR ── */
.navbar {
  background: var(--navbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--navbar-border);
  transition: background 0.3s;
}

.navbar-brand {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.5px;
}

.brand-snap {
  color: var(--brand-light);
}

.brand-load {
  color: var(--text-main);
}

/* Image logo (uploaded via Settings -> Appearance). When the admin uploads
   one or two logo files we render <img> tags instead of the text brand.
   Both variants render in the DOM; CSS hides the wrong one per theme. */
.brand-logo {
  display: inline-block;
  height: 32px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  vertical-align: middle;
}
.brand-logo-light { display: none; }
[data-theme="light"] .brand-logo-light { display: inline-block; }
[data-theme="light"] .brand-logo-dark  { display: none; }

.nav-link {
  color: var(--text-muted) !important;
  font-size: 0.9rem;
  transition: color .2s;
}

/* Mobile-only language dropdown sitting LEFT of the burger. The dropdown lives
   outside the collapse so it stays visible whether the menu is open or shut. */
.nav-lang-mobile .nav-link {
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
}
.nav-lang-mobile .nav-link:hover { background: rgba(var(--brand-light-rgb), 0.08); }
.nav-lang-mobile .dropdown-menu  { font-size: 0.95rem; }

/* Burger -> X toggle. Bootstrap's collapse plugin flips aria-expanded on the
   toggler when the menu opens; we use that to swap which icon is visible. */
.navbar-toggler-x {
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem 0.6rem;
  color: var(--text-main);
  box-shadow: none;
}
.navbar-toggler-x:focus { box-shadow: none; }
.navbar-toggler-x .burger-icon-open,
.navbar-toggler-x .burger-icon-close { transition: opacity .15s; }
.navbar-toggler-x .burger-icon-close { display: none; }
.navbar-toggler-x[aria-expanded="true"] .burger-icon-open  { display: none; }
.navbar-toggler-x[aria-expanded="true"] .burger-icon-close { display: inline-block; }

.nav-link:hover {
  color: var(--text-main) !important;
}

.btn-nav {
  /* `--brand-gradient` falls back to solid --brand when the admin
     hasn't enabled the gradient toggle — so this rule renders
     identically to before for installs that haven't opted in. */
  background: var(--brand-gradient, var(--brand));
  color: var(--brand-gradient-text, var(--brand-text, #fff)) !important;
  border-radius: 8px;
  padding: 6px 18px;
  font-size: 0.87rem;
  font-weight: 500;
  border: none;
  transition: background .2s, filter .2s, transform .1s;
}

.btn-nav:hover {
  /* Gradient buttons can't be tinted via background-color on hover
     (it's a gradient, not a color). Use a subtle brightness lift
     instead. The solid-fallback path still gets a hue shift because
     filter:brightness applies to any background. */
  background: var(--brand-gradient, var(--brand-light));
  filter: brightness(1.08);
}

/* ── HERO ── */
.hero {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--brand-light-rgb), 0.1) 0%, transparent 70%), var(--bg-body);
  padding: 5rem 0 3.5rem;
  text-align: center;
}

.hero-tag {
  display: inline-block;
  background: rgba(var(--brand-light-rgb), 0.12);
  color: var(--brand-light);
  border: 1px solid rgba(var(--brand-light-rgb), 0.25);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: .5px;
  padding: 5px 16px;
  margin-bottom: 1.2rem;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.12;
  margin-bottom: 1rem;
}

.hero h1 span {
  color: var(--brand-light);
}

.hero p {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 520px;
  margin: 0 auto 2.2rem;
  line-height: 1.65;
}

/* ── DOWNLOAD BOX ── */
.dl-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: var(--shadow);
}

.dl-card .input-group {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s;
}

.dl-card .input-group:focus-within {
  border-color: var(--brand-light);
}

.dl-card .input-group-text {
  background: transparent;
  border: none;
  color: var(--muted-raw);
  padding-left: 1rem;
}

.dl-card .form-control {
  background: transparent;
  border: none;
  color: var(--text-main);
  font-size: 0.95rem;
  padding: 0.8rem 0.5rem;
  box-shadow: none !important;
}

.dl-card .form-control::placeholder {
  color: var(--input-placeholder);
}

.btn-download {
  background: var(--brand-light);
  /* Auto-contrast against the chosen brand-light shade. Yellow/amber
     brands → black text; deep brands → white. */
  color: var(--brand-light-text, #fff);
  border: none;
  border-radius: 8px !important;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.5rem;
  margin: 4px;
  transition: background .2s, transform .1s;
  white-space: nowrap;
}

.btn-download:hover {
  /* Brand gradient if enabled, otherwise solid --brand (the var
     fallback handles both modes). Hover lift stays the same. */
  background: var(--brand-gradient, var(--brand));
  color: var(--brand-gradient-text, var(--brand-text, #fff));
  transform: scale(1.02);
}

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

.platform-pills {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.pill {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 0.78rem;
  padding: 5px 14px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}

.pill:hover {
  border-color: var(--brand-light);
  color: var(--brand-light);
}

.pill i {
  font-size: 0.85rem;
}

/* ── RESULT CARD (Redesigned) ── */
.result-card {
  display: none;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 2rem !important;
  max-width: 1000px !important;
  margin: 2rem auto 0 !important;
  overflow: hidden;
}

.result-thumb-placeholder {
  background: var(--bg-input) !important;
  border-radius: 12px !important;
  display: flex; /* Removed !important so JS can hide it */
  align-items: center !important;
  justify-content: center !important;
  color: var(--muted-raw) !important;
  font-size: 2.5rem !important;
}

.result-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  line-height: 1.4 !important;
  color: var(--text-main) !important;
  text-align: left !important;
  margin-top: 0.5rem;
}

.result-meta {
  font-size: 0.85rem !important;
  color: var(--text-muted) !important;
  display: flex !important;
  gap: 15px !important;
  justify-content: flex-start !important;
}

/* Source pill — small brand-tinted badge above the title. Hidden by default,
   shown via JS once the result has a known platform name. */
.result-source-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--brand-light-rgb), 0.10);
  border: 1px solid rgba(var(--brand-light-rgb), 0.25);
  color: var(--brand-light);
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.result-source-row i { font-size: 0.85rem; }

/* Stack of left-side action buttons (Try another / Copy source URL). */
.result-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.result-action-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 9px 12px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex; align-items: center; gap: 8px;
  text-align: left;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  font-family: inherit;
}
.result-action-btn:hover {
  border-color: var(--brand-light);
  color: var(--text-main);
  background: rgba(var(--brand-light-rgb), 0.05);
}
.result-action-btn i { width: 18px; font-size: 0.95rem; }
.result-action-btn.is-copied {
  border-color: var(--brand-light);
  color: var(--brand-light);
}

/* Tabs System */
.dl-tabs-container {
  background: rgba(255,255,255,0.02) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  height: 100%;
}

.dl-tabs-header {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important;
  width: 100% !important;
}

button.dl-tab-btn {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  transition: all 0.2s !important;
  border-bottom: 2px solid transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

button.dl-tab-btn.active {
  color: var(--text-main) !important;
  background: rgba(255,255,255,0.05) !important;
  border-bottom-color: var(--text-main) !important;
}

.dl-tab-content {
  display: none !important;
}

.dl-tab-content.active {
  display: block !important;
}

/* Table Styles */
.table-responsive {
  border-radius: 0 0 12px 12px;
}

.table.table-custom {
  margin-bottom: 0 !important;
  background: transparent !important;
}

.table.table-custom thead th {
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--muted-raw) !important;
  padding: 15px !important;
  border-bottom: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.01) !important;
}

.table.table-custom tbody td {
  padding: 15px !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 0.9rem !important;
  background: transparent !important;
  color: var(--text-main) !important;
}

.quality-cell { font-weight: 700 !important; text-align: left !important; }
.format-badge {
  background: var(--bg-input) !important;
  color: var(--text-muted) !important;
  padding: 4px 12px !important;
  border-radius: 50px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  border: 1px solid var(--border) !important;
}

/* Premium Action Button */
.btn-action-dl {
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  transition: all 0.2s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

[data-theme="light"] .btn-action-dl {
  background: #000000 !important;
  color: #ffffff !important;
}

.btn-action-dl:hover {
  transform: translateY(-2px) !important;
  opacity: 0.9 !important;
}

/* Video Options List Styles */
.video-options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 1.2rem;
}

.video-option-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.video-option-item:hover {
  border-color: rgba(var(--brand-light-rgb), 0.45);
  background: rgba(var(--brand-light-rgb), 0.06);
}

[data-theme="light"] .video-option-item:hover {
  background: rgba(var(--brand-light-rgb), 0.08);
}

.video-option-item.selected {
  border-color: var(--brand-light);
  background: rgba(var(--brand-light-rgb), 0.10);
  box-shadow: 0 0 0 1px rgba(var(--brand-light-rgb), 0.4);
}

.video-option-item .form-check-input {
  width: 20px;
  height: 20px;
  margin-right: 15px;
  cursor: pointer;
  border: 2px solid var(--muted-raw);
  background-color: transparent;
  flex-shrink: 0;
}

.video-option-item .form-check-input:checked {
  background-color: var(--text-main);
  border-color: var(--text-main);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

/* Adjust checkmark color for light theme */
[data-theme="light"] .video-option-item .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.video-option-content {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-grow: 1;
}

/* Format-row icon — boxed (36×36 rounded square), tint matches brand on
   hover / selected. Mirrors the "ws-icon" style from the design preview. */
.video-option-icon {
  width: 36px; height: 36px;
  flex: 0 0 36px;
  background: var(--bg-input);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}
.video-option-item:hover .video-option-icon {
  background: rgba(var(--brand-light-rgb), 0.15);
  color: var(--brand-light);
}
.video-option-item.selected .video-option-icon {
  background: rgba(var(--brand-light-rgb), 0.18);
  color: var(--brand-light);
}

.video-option-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}

.video-option-quality {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-main);
  line-height: 1.2;
  text-align: left;
}

.video-option-details {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: left;
}



.btn-main-download {
  /* Hero CTA — the single biggest brand surface on the home page.
     Opts into the gradient when admin enabled it; otherwise renders
     as solid --brand-light like before (var() fallback). */
  background: var(--brand-gradient, var(--brand-light)) !important;
  color: var(--brand-gradient-text, var(--brand-light-text, #fff)) !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(var(--brand-light-rgb), 0.3) !important;
}

.btn-main-download:hover {
  transform: translateY(-2px) !important;
  /* Same gradient-or-solid fallback as the base state. Brightness
     lift gives the hover "lift" without needing a second gradient. */
  background: var(--brand-gradient, var(--brand)) !important;
  color: var(--brand-gradient-text, var(--brand-text, #fff)) !important;
  filter: brightness(1.06) !important;
  box-shadow: 0 6px 20px rgba(var(--brand-light-rgb), 0.4) !important;
}

.btn-main-download:active {
  transform: translateY(0) !important;
}

[data-theme="light"] .video-option-item {
  background: #ffffff;
}

[data-theme="light"] .video-option-item.selected {
  background: rgba(0, 0, 0, 0.05);
}

/* ── STATS STRIP ── */
.stats-strip {
  background: var(--bg-card);
  border-top: 1px solid var(--navbar-border);
  border-bottom: 1px solid var(--navbar-border);
  padding: 1.5rem 0;
}

.stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand-light);
}

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

/* ── FEATURES ── */
.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: -0.8px;
}

.feat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  height: 100%;
  transition: border-color .25s;
}

.feat-card:hover {
  border-color: rgba(var(--brand-light-rgb), 0.4);
}

.feat-icon {
  width: 44px;
  height: 44px;
  background: rgba(var(--brand-light-rgb), 0.12);
  color: var(--brand-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.feat-card h5 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.feat-card p {
  font-size: 0.87rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

/* ── HOW IT WORKS ── */
.step-num {
  width: 40px;
  height: 40px;
  background: var(--brand);
  color: var(--brand-text, #fff);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-connector {
  width: 1px;
  background: var(--border);
  flex-grow: 1;
  min-height: 28px;
}

/* ── PLATFORMS ── */
.platform-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem 1rem;
  text-align: center;
  transition: border-color .2s;
  cursor: pointer;
  /* Also handles the case where .platform-card is an <a> — strip the
     default link styling so it looks identical to the <div> version. */
  display: block;
  color: var(--text-main);
  text-decoration: none;
}
.platform-card:hover,
.platform-card:focus {
  border-color: rgba(var(--brand-light-rgb), 0.5);
  color: var(--text-main);
  text-decoration: none;
}

/* ── Scroll-reveal fade animation ──
   Add .reveal to any element you want to fade in as it scrolls into view.
   The script in main.js toggles .is-visible via IntersectionObserver.

   Animation knobs are CSS variables so the admin's Appearance tab can
   override them via a <style> tag in <head> without touching this file:
     --reveal-from        starting transform (e.g. translateY(28px))
     --reveal-blur        starting blur amount (e.g. 8px). 0 = no blur
     --reveal-duration    transition duration (e.g. 700ms)
     --reveal-easing      transition timing function
     --reveal-stagger     gap between staggered siblings (e.g. 60ms)
   The defaults below match the original "slide up" feel.

   Setting `--reveal-disabled: 1` short-circuits everything to fully visible
   — used when the admin toggles the animation off. */
:root {
  --reveal-from: translateY(28px);
  --reveal-blur: 0px;
  --reveal-duration: 700ms;
  --reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-stagger: 60ms;
}

.reveal {
  opacity: 0;
  transform: var(--reveal-from);
  filter: blur(var(--reveal-blur));
  transition:
    opacity   var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing),
    filter    var(--reveal-duration) var(--reveal-easing);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
/* Stagger helpers — chain these on siblings so a row of cards reveals in
   sequence rather than all at once. Delay scales with --reveal-stagger. */
.reveal-d1 { transition-delay: calc(var(--reveal-stagger) * 1); }
.reveal-d2 { transition-delay: calc(var(--reveal-stagger) * 2); }
.reveal-d3 { transition-delay: calc(var(--reveal-stagger) * 3); }
.reveal-d4 { transition-delay: calc(var(--reveal-stagger) * 4); }
.reveal-d5 { transition-delay: calc(var(--reveal-stagger) * 5); }
.reveal-d6 { transition-delay: calc(var(--reveal-stagger) * 6); }
/* Subtle variant — just fades, no slide. Useful for the hero so the page
   doesn't lurch upward on first paint. */
.reveal-fade { transform: none; filter: none; }

/* Admin can switch the entire system off via :root { --reveal-disabled: 1 } */
@supports (selector(:has(*))) {
  html[data-reveal="off"] .reveal,
  html[data-reveal="off"] .reveal-fade {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}
/* Fallback for older browsers without :has() — use a body class instead. */
body.reveal-off .reveal,
body.reveal-off .reveal-fade {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* Respect users who turn motion off in their OS. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-fade {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ── CTA BANNER ── */
/* Diagonal gradient: brand color into a darker shade. color-mix() derives the
   second stop from the active brand, so changing the brand color in admin
   recolors the whole banner — no half-and-half mismatch. */
.cta-banner {
  background: linear-gradient(
    135deg,
    var(--brand) 0%,
    color-mix(in srgb, var(--brand) 65%, #000) 100%
  );
}
/* The CTA title sits on the dark gradient — force white in BOTH themes.
   .section-title otherwise inherits --text-main, which is near-black in light
   mode. We win the specificity fight by scoping with .cta-banner. */
.cta-banner .section-title { color: #fff; }

.platform-card i {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 0.5rem;
}

.platform-card span {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ── FAQ ── */
.accordion-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  margin-bottom: 10px;
  overflow: hidden;
}

.accordion-button {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  box-shadow: none !important;
}

.accordion-button::after {
  filter: invert(var(--accordion-invert, 1)) opacity(.5);
}

.accordion-button:not(.collapsed) {
  color: var(--brand-light) !important;
}

.accordion-body {
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.65;
  padding-top: 0;
}

[data-theme="light"] {
  --accordion-invert: 0;
}

/* ────────────────────────────────────────────────────────────────────
   PER-PLATFORM LANDING PAGE (Spotlight design)
   Used by /<platform>-downloader URLs handled by downloader.php.
   Each section below the hero+input is themed via CSS variables:
     --platform / --platform-rgb   set inline by downloader.php from
                                   admin_known_downloaders()['color']
     --brand-* / --brand-*-rgb     come from the global :root tokens
   ──────────────────────────────────────────────────────────────────── */

/* ─── Introduction (single-column article) ─── */
.lp-intro { padding: 70px 0 50px; }
.lp-intro-inner {
  max-width: 760px; margin: 0 auto;
  text-align: center;
}
.lp-intro-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(var(--platform-rgb, 255, 0, 0), 0.12);
  border: 1px solid rgba(var(--platform-rgb, 255, 0, 0), 0.3);
  color: var(--text-main);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.lp-intro-eyebrow i { color: var(--platform, #FF0000); font-size: 0.95rem; }
.lp-intro-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 700; letter-spacing: -1px;
  line-height: 1.2; margin: 0 0 22px;
  color: var(--text-main);
}
.lp-intro-title .accent { color: var(--brand-light); }
.lp-intro-lead {
  font-size: 1.05rem;
  color: var(--text-main);
  line-height: 1.7;
  max-width: 660px; margin: 0 auto 22px;
  font-weight: 500;
}
.lp-intro-body {
  font-size: 0.96rem;
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 640px; margin: 0 auto;
  text-align: left;
}
.lp-intro-body p { margin: 0 0 14px; }
.lp-intro-body p:last-child { margin: 0; }
.lp-intro-body code {
  background: rgba(var(--brand-light-rgb), 0.1);
  color: var(--brand-light);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.88em;
}

/* ─── Section frame (shared by all landing sections) ─── */
.lp-section { padding: 70px 0; }
.lp-section.alt { background: var(--bg-card); }

.lp-section-head { text-align: center; margin-bottom: 44px; }
.lp-section-eyebrow {
  display: inline-block;
  background: rgba(var(--brand-light-rgb), 0.12);
  color: var(--brand-light);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.lp-section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.7px;
  line-height: 1.2;
  margin: 0 auto 12px;
}
.lp-section-sub {
  color: var(--text-muted);
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* ─── How it works — horizontal timeline with connector + numbered icons ─── */
.lp-steps {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 980px; margin: 0 auto;
}
/* Decorative connector line behind the icons (desktop only). */
.lp-steps::before {
  content: '';
  position: absolute;
  top: 38px;
  left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--brand-light-rgb), 0.35) 12%,
    rgba(var(--brand-light-rgb), 0.35) 88%,
    transparent
  );
  z-index: 0;
}
@media (max-width: 768px) {
  .lp-steps { grid-template-columns: 1fr; gap: 18px; }
  .lp-steps::before { display: none; }
}
.lp-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 28px 22px 26px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.lp-step:hover {
  border-color: rgba(var(--brand-light-rgb), 0.45);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}
.lp-step-icon-wrap {
  position: relative;
  width: 76px; height: 76px;
  margin: -52px auto 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--brand-light), var(--brand));
  display: flex; align-items: center; justify-content: center;
  /* Gradient runs brand-light → brand. Pick the text colour that works
     against the lighter end (the more likely culprit for poor contrast). */
  font-size: 1.8rem; color: var(--brand-light-text, #fff);
  box-shadow: 0 14px 30px rgba(var(--brand-light-rgb), 0.4);
}
.lp-step-icon-wrap::before {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(var(--brand-light-rgb), 0.35), transparent);
  z-index: -1;
  filter: blur(10px);
}
.lp-step-num-badge {
  position: absolute; top: -6px; right: -6px;
  width: 26px; height: 26px;
  background: var(--accent);
  color: #000;
  border-radius: 50%;
  border: 2px solid var(--bg-body);
  font-family: 'Space Grotesk';
  font-weight: 700; font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center;
}
.lp-step h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem; font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.2px;
}
.lp-step p {
  font-size: 0.9rem; color: var(--text-muted);
  margin: 0; line-height: 1.6;
}
.lp-steps-foot {
  margin: 36px auto 0;
  max-width: 720px;
  padding: 18px 22px;
  background: rgba(var(--brand-light-rgb), 0.06);
  border: 1px solid rgba(var(--brand-light-rgb), 0.2);
  border-radius: 12px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-main);
}
.lp-steps-foot i {
  color: var(--brand-light); margin-right: 8px;
  font-size: 1.05rem;
}

/* ─── Features — 6 cards in 3-col grid ─── */
.lp-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 992px) { .lp-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .lp-features { grid-template-columns: 1fr; } }
.lp-feat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 22px;
  transition: border-color 0.2s, transform 0.2s;
}
.lp-feat:hover { border-color: rgba(var(--brand-light-rgb), 0.4); transform: translateY(-3px); }
.lp-feat-icon {
  width: 44px; height: 44px;
  background: rgba(var(--brand-light-rgb), 0.12);
  color: var(--brand-light);
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 18px;
}
.lp-feat h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem; font-weight: 600; margin: 0 0 8px;
}
.lp-feat p {
  font-size: 0.88rem; color: var(--text-muted);
  margin: 0; line-height: 1.6;
}

/* ─── FAQ accordion (uses native <details>) ─── */
.lp-faq {
  max-width: 720px; margin: 0 auto;
}
.lp-faq details {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 16px 22px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.lp-faq details[open] { border-color: rgba(var(--brand-light-rgb), 0.4); }
.lp-faq summary {
  font-weight: 600; font-size: 1rem;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Space Grotesk', sans-serif;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: '+'; font-size: 1.4rem;
  color: var(--brand-light);
  transition: transform 0.2s;
  font-family: 'Space Grotesk', sans-serif;
}
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq-body {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ─── Bottom CTA banner — same look as the home CTA ─── */
.lp-bottom-cta { padding: 60px 0; }

/* ── FOOTER ── */
footer {
  background: var(--bg-card);
  border-top: 1px solid var(--navbar-border);
  padding: 3rem 0 2rem;
}

.footer-brand {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
}

.footer-link {
  color: var(--text-muted);
  font-size: 0.86rem;
  text-decoration: none;
  display: block;
  margin-bottom: 6px;
  transition: color .2s;
}

.footer-link:hover {
  color: var(--brand-light);
}

.footer-heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted-raw);
  margin-bottom: 1rem;
}

/* ── PROGRESS / LOADING ── */
.loading-bar {
  height: 3px;
  background: var(--bg-input);
  border-radius: 99px;
  overflow: hidden;
}

.loading-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  width: 0%;
  border-radius: 99px;
  transition: width .4s;
}

/* Theme Toggle Button Style */
.btn-theme {
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1.1rem;
}

.btn-theme:hover {
  background: var(--brand-pale);
  color: var(--brand);
  border-color: var(--brand);
}

[data-theme="dark"] .bi-sun-fill {
  display: none;
}

[data-theme="light"] .bi-moon-stars-fill {
  display: none;
}

@media (max-width: 576px) {
  .hero {
    padding: 3.5rem 0 2.5rem;
  }

  .dl-card {
    padding: 1.2rem;
  }

  .dl-card .input-group {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
  }

  .dl-card .input-group-text {
    display: none;
  }

  .dl-card .form-control {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px !important;
    margin-bottom: 10px;
    padding: 0.9rem 1.2rem;
    text-align: center;
    width: 100% !important;
    flex: none !important;
  }

  /* iOS Safari auto-zooms on focus when an input's font-size is < 16px.
     Force every text-like form control to 16px on small screens so tapping
     the URL field (or any other input) doesn't trigger the zoom. Desktop
     typography is unaffected — this only applies at <=576px. */
  .form-control,
  .form-select,
  input[type="text"],
  input[type="url"],
  input[type="email"],
  input[type="search"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  textarea {
    font-size: 16px !important;
  }

  .btn-download {
    width: 100% !important;
    margin: 0;
    padding: 0.9rem;
    border-radius: 10px !important;
  }
}

/* ── DROPDOWNS ── */
.dropdown-menu {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  padding: 0.5rem 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .dropdown-menu {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
}

.dropdown-item {
  color: var(--text-main) !important;
  font-size: 0.9rem;
  padding: 0.6rem 1.2rem;
  transition: all 0.2s;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--brand-light) !important;
  color: var(--brand-light-text, #fff) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--brand) !important;
  color: var(--brand-text, #fff) !important;
}
/* ─── CMS page typography (public /page.php) ─── */
.page-content {
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.75;
}
.page-content h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  margin: 1.6em 0 0.6em;
}
.page-content h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1.4em 0 0.5em;
}
.page-content p { margin: 0.7em 0; }
.page-content ul, .page-content ol { padding-left: 22px; margin: 0.7em 0; }
.page-content li { margin-bottom: 0.3em; }
.page-content a { color: var(--brand); text-decoration: underline; }
.page-content a:hover { color: var(--brand-light); }
.page-content blockquote {
  border-left: 3px solid var(--brand);
  padding: 6px 16px;
  margin: 1em 0;
  color: var(--text-muted);
  background: var(--bg-card);
  border-radius: 0 8px 8px 0;
}
.page-content code {
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.88em;
}

.page-content img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  display: block;
  margin: 1em auto;
  border-radius: 8px;
}
.page-content { overflow-wrap: break-word; word-wrap: break-word; max-width: 100%; }
.page-content * { max-width: 100%; }

/* ─────────────────────────────────────────────────────────────────
   Home page — optional sections + hero-with-image layout
   ─────────────────────────────────────────────────────────────────
   These styles are dormant on a fresh install (every block is off
   by default in the admin). They only kick in once the admin
   enables hero-side image / logos / video / testimonials in
   Settings → Home. */

/* Hero with a side image — flips the hero from centered single-column
   to a two-column layout. The text column keeps its left alignment;
   the image column sits to the right on lg+ and stacks below on
   smaller screens.

   We have to overrule three rules from the base .hero:
     1. .hero { text-align: center; }
     2. .hero p { max-width:520px; margin:0 auto 2.2rem; }
     3. The .dl-card centered margin pattern
   The lg breakpoint match keeps the centered look on mobile (where the
   image stacks below anyway) and switches to two-column on desktop. */
@media (min-width: 992px) {
  .hero.hero-with-image { text-align: left; }
  .hero.hero-with-image .hero-content-col { text-align: left; }
  .hero.hero-with-image .hero-content-col p {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }
  .hero.hero-with-image .hero-content-col .dl-card {
    margin-left: 0;
    margin-right: 0;
  }
}
.hero-side-image {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
/* On phones / tablets the image collapses below the hero content so
   the URL input stays the first thing in the viewport. */
@media (max-width: 991.98px) {
  .hero.hero-with-image .hero-image-col { margin-top: 1.5rem; }
}

/* ── Logos strip ── */
.logos-strip {
  background: var(--bg-card);
}
.logos-row {
  padding: 0.5rem 0;
}
.logo-strip-img {
  max-height: 40px;
  max-width: 150px;
  width: auto;
  height: auto;
  opacity: 0.7;
  filter: grayscale(100%);
  transition: opacity 0.18s, filter 0.18s, transform 0.18s;
}
.logos-row a:hover .logo-strip-img,
.logos-row span:hover .logo-strip-img {
  opacity: 1;
  filter: grayscale(0%);
  transform: translateY(-1px);
}

/* ── Testimonials ── */
.testimonials-section .testimonial-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1.1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.testimonials-section .testimonial-card:hover {
  border-color: var(--brand-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.testimonials-section .testimonial-quote {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-main);
  margin: 0;
}
.testimonials-section .testimonial-author {
  font-size: 0.85rem;
  color: var(--text-main);
}
.testimonials-section .testimonial-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ── Video demo ── */
.video-demo-section .video-demo-frame {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

/* ── Custom content block (admin-added "Introduction-style" section) ──
   Uses the same lp-intro-body class as downloader landing pages, so
   inherits the existing typography for admin-authored HTML. */
.lp-custom-block .lp-intro-body p,
.lp-intro .lp-intro-body p {
  margin-bottom: 0.85rem;
}
.lp-custom-block .lp-intro-body > :first-child,
.lp-intro       .lp-intro-body > :first-child { margin-top: 0; }
.lp-custom-block .lp-intro-body > :last-child,
.lp-intro       .lp-intro-body > :last-child  { margin-bottom: 0; }