/*
 * Contextify Landing Page Styles
 * Built on Bootstrap 5.3 with custom overrides
 *
 * COLOR SYSTEM
 * Canonical source: build/design/brand/colors.md
 * Consult that file before modifying any color tokens below.
 * Keep this file in sync with the specification.
 */

/* ==========================================================================
   Color System (Contextify Design System)
   ========================================================================== */
:root {
  /* Semantic Colors */
  --contextify-primary: #4A7BA7;
  --contextify-primary-hover: #3D6A94;
  --contextify-primary-light: #E8F0F7;
  --contextify-secondary: #9B8B7E;
  --contextify-success: #51A86B;
  --contextify-success-light: #E8F5EC;
  --contextify-warning: #D4A84E;
  --contextify-warning-light: #FDF6E8;
  --contextify-error: #C74E4E;
  --contextify-error-light: #FBEAEA;
  --contextify-info: #4A7BA7;
  --contextify-info-light: #E8F0F7;
  --contextify-accent: #7C68A8;

  /* Neutral Scale (Tailwind Slate) */
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  --slate-950: #020617;

  /* Derived Tokens - Light Mode */
  --text-primary: var(--slate-800);
  --text-secondary: var(--slate-500);
  --text-tertiary: var(--slate-400);
  --text-disabled: var(--slate-300);
  --text-inverse: #FFFFFF;

  --bg-page: var(--slate-50);
  --bg-surface: #FFFFFF;
  --bg-muted: var(--slate-100);
  --bg-elevated: #FFFFFF;
  --bg-inverse: var(--slate-800);
  --bg-overlay: rgba(0, 0, 0, 0.5);

  --border-default: var(--slate-200);
  --border-subtle: var(--slate-100);
  --border-strong: var(--slate-300);
  --border-focus: var(--contextify-primary);

  --link-default: var(--contextify-primary);
  --link-hover: var(--contextify-primary-hover);
  --link-visited: var(--contextify-accent);
  --link-active: var(--contextify-primary-hover);

  /* Brand Colors */
  --brand-yellow: #F9B233;
  --brand-cyan: #4AC4E0;
  --brand-purple: #8B5CF6;
  --brand-gradient: linear-gradient(135deg, var(--brand-yellow) 0%, var(--brand-cyan) 50%, var(--brand-purple) 100%);

  /* Provider Colors */
  --provider-claude: #D97757;
  --provider-codex: #FFFFFF;
}

/* Dark Mode Tokens */
[data-bs-theme="dark"] {
  --contextify-primary: #6A9BC7;
  --contextify-primary-hover: #7AABDA;
  --contextify-primary-light: #1E3A52;
  --contextify-secondary: #B5A89D;
  --contextify-success: #6BC885;
  --contextify-success-light: #1A3028;
  --contextify-warning: #E4B85E;
  --contextify-warning-light: #3A3020;
  --contextify-error: #D76E6E;
  --contextify-error-light: #3A2020;
  --contextify-info: #6A9BC7;
  --contextify-info-light: #1A2838;
  --contextify-accent: #9C88C8;

  --text-primary: var(--slate-100);
  --text-secondary: var(--slate-400);
  --text-tertiary: var(--slate-500);
  --text-disabled: var(--slate-600);
  --text-inverse: var(--slate-900);

  --bg-page: var(--slate-900);
  --bg-surface: var(--slate-800);
  --bg-muted: var(--slate-700);
  --bg-elevated: var(--slate-700);
  --bg-inverse: var(--slate-100);
  --bg-overlay: rgba(0, 0, 0, 0.7);

  --border-default: var(--slate-700);
  --border-subtle: var(--slate-800);
  --border-strong: var(--slate-600);
  --border-focus: var(--contextify-primary);

  --link-hover: #8ABBDD;
  --link-visited: #9C88C8;
  --link-active: #7AABDA;
}

/* ==========================================================================
   Base / Body
   ========================================================================== */
body {
  background-color: var(--bg-page);
  color: var(--text-primary);
}

[data-bs-theme="dark"] body {
  background-color: var(--bg-page);
  color: var(--text-primary);
}

/* Override Bootstrap bg-white for dark mode */
[data-bs-theme="dark"] .bg-white {
  background-color: var(--slate-800) !important;
  color: var(--text-primary);
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background-color: var(--bg-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .navbar {
  background-color: var(--slate-900);
}

.navbar-brand {
  color: var(--contextify-primary) !important;
  font-weight: bold;
  font-size: 1.75rem;
}

[data-bs-theme="dark"] .navbar-brand {
  color: var(--slate-50) !important;
}

.navbar .btn-primary {
  background-color: var(--contextify-primary);
  border-color: var(--contextify-primary-hover);
  font-weight: 600;
}

.navbar .btn-primary:hover {
  background-color: var(--contextify-primary-hover);
  border-color: var(--contextify-primary-hover);
}

/* The demoted "Download" secondary uses the brand blue, not Bootstrap's stock
   #0D6EFD, so the filled primary "Try Cloud Free" stays the loudest element in
   the nav (a saturated stock-blue outline would out-shout the muted brand fill
   and invert the intended primary/secondary hierarchy). */
.navbar .btn-outline-primary {
  color: var(--contextify-primary);
  border-color: var(--contextify-primary);
}

.navbar .btn-outline-primary:hover {
  color: #fff;
  background-color: var(--contextify-primary);
  border-color: var(--contextify-primary);
}

.navbar .nav-cta-signup {
  white-space: nowrap;
}

.navbar .nav-cta-group {
  flex-shrink: 0;
  gap: 1rem;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
  background-color: var(--slate-900);
  /* Subtle brand gradient - scales infinitely, replaces problematic SVG swoopy */
  background-image:
    radial-gradient(ellipse 80% 50% at 70% 60%, rgba(74, 196, 224, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 30% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 90% 20%, rgba(249, 178, 51, 0.05) 0%, transparent 40%);
}

.hero-section h1 {
  font-size: 2.75rem;
  color: var(--slate-50);
  line-height: 1.2;
}

.hero-section .lead {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--slate-100);
  opacity: 0.9;
}

.hero-section .btn-primary {
  background-color: var(--contextify-primary);
  border-color: var(--contextify-primary-hover);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}

.hero-section .btn-primary:hover {
  background-color: var(--contextify-primary-hover);
  border-color: var(--contextify-primary-hover);
}

/* Screenshot with 3D perspective effect */
.screenshot-wrapper {
  display: flex;
  justify-content: center;
}

.screenshot {
  transform: perspective(1500px) rotateY(-10deg);
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.25) 0 25px 50px -12px;
  transition: transform 1s ease 0s;
  max-width: 420px;
  width: 100%;
}

.screenshot:hover {
  transform: perspective(3000px) rotateY(5deg);
}

/* Disable 3D effect on touch devices */
@media only screen and (hover: none) and (pointer: coarse) {
  .screenshot {
    transform: none;
    transition: none;
  }
  .screenshot:hover {
    transform: none;
  }
}

[data-bs-theme="dark"] .screenshot {
  box-shadow: 0 2px 0 #000, 0 2px 5px #000;
}

/* ==========================================================================
   Brand Gradient Divider
   ========================================================================== */
.brand-divider {
  height: 4px;
  background: var(--brand-gradient);
}

/* ==========================================================================
   Card Styles & Hover Effects
   ========================================================================== */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   Statement Section
   ========================================================================== */
.statement-section {
  padding: 4rem 0;
  background-color: var(--bg-page);
}

[data-bs-theme="dark"] .statement-section {
  background-color: var(--slate-800);
}

.statement-text {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

[data-bs-theme="dark"] .statement-text {
  color: var(--slate-100);
}

.statement-subtext {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin-bottom: 0;
}

[data-bs-theme="dark"] .statement-subtext {
  color: var(--slate-400);
}

.logo-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.company-logo {
  height: 28px;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.company-logo:hover {
  opacity: 0.8;
  filter: grayscale(0%);
}

[data-bs-theme="dark"] .company-logo {
  filter: grayscale(100%) invert(1);
}

[data-bs-theme="dark"] .company-logo:hover {
  filter: grayscale(0%) invert(1);
}

/* ==========================================================================
   Feature Sections
   ========================================================================== */
.feature-section {
  padding: 5rem 0;
  background-color: var(--bg-surface);
}

.feature-section-alt {
  background-color: var(--bg-page);
}

[data-bs-theme="dark"] .feature-section {
  background-color: var(--slate-900);
}

[data-bs-theme="dark"] .feature-section-alt {
  background-color: var(--slate-800);
}

.feature-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

[data-bs-theme="dark"] .feature-title {
  color: var(--slate-50);
}

.feature-description {
  font-size: 1.125rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 0;
}

[data-bs-theme="dark"] .feature-description {
  color: var(--slate-400);
}

.feature-image {
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.feature-image:hover {
  transform: scale(1.02);
}

[data-bs-theme="dark"] .feature-image {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.feature-image-transparent {
  width: 100%;
  max-width: 540px;
  transition: transform 0.2s ease;
}

.feature-image-transparent:hover {
  transform: scale(1.02);
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
}

.lightbox.active {
  display: flex;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Download Section
   ========================================================================== */
#download {
  background-color: var(--slate-900);
}

[data-bs-theme="dark"] #download {
  background-color: var(--slate-950);
}

.download-card {
  padding: 3rem 2rem;
}

.download-card h2 {
  color: var(--slate-50);
}

.download-card p {
  color: var(--slate-300);
}

.download-card .btn-primary {
  background-color: var(--contextify-primary);
  border-color: var(--contextify-primary);
  padding: 0.875rem 2rem;
  font-weight: 600;
}

.download-card .btn-primary:hover {
  background-color: var(--contextify-primary-hover);
  border-color: var(--contextify-primary-hover);
}

.download-card .text-body-secondary {
  color: var(--slate-400) !important;
}

.download-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.app-store-badge {
  display: inline-block;
  border-radius: 9px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.app-store-badge img {
  vertical-align: top;
}

.app-store-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(248, 250, 252, 0.55);
}

.app-store-badge:focus-visible,
.dmg-download:focus-visible,
.download-compare-link:focus-visible {
  outline: 3px solid rgba(56, 189, 248, 0.65);
  outline-offset: 3px;
}

/* App Store badge: show light-bg version by default, dark-bg version in dark mode */
.badge-dark-bg {
  display: none;
}

[data-bs-theme="dark"] .badge-light-bg {
  display: none;
}

[data-bs-theme="dark"] .badge-dark-bg {
  display: inline;
}

.download-divider {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--slate-500);
  font-size: 0.85rem;
  font-weight: 500;
}

.download-divider::before,
.download-divider::after {
  content: "";
  width: 1px;
  height: 14px;
  background-color: var(--slate-700);
}

.dmg-download {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  height: 52px;
  padding: 0 1.75rem;
  background: linear-gradient(100deg, #38BDF8 0%, #4F8DF7 52%, #6366F1 100%);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow:
    0 10px 28px -8px rgba(79, 141, 247, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.dmg-download-icon {
  flex: none;
  width: 22px;
  height: 22px;
}

.dmg-download:hover {
  transform: translateY(-2px);
  filter: saturate(1.08) brightness(1.04);
  box-shadow:
    0 16px 36px -10px rgba(79, 141, 247, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #fff;
}

/* Hero secondary platform buttons (Windows, Linux): quiet ghost pills that sit
   beside the blue primary without competing with it */
.hero-alt-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--slate-50);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.hero-alt-btn:hover,
.hero-alt-btn:focus-visible {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.hero-alt-btn:focus-visible {
  outline: 3px solid rgba(56, 189, 248, 0.65);
  outline-offset: 3px;
}

.hero-alt-icon {
  flex: none;
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.95;
}

/* Secondary (alternate-architecture) pill beside the promoted primary button */
.download-alt {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  height: 52px;
  padding: 0 1.25rem;
  background: linear-gradient(160deg, #FFFFFF 0%, #EAF2FB 100%);
  border-radius: 12px;
  color: var(--slate-900);
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
  box-shadow:
    0 10px 24px -12px rgba(2, 6, 23, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.download-alt:hover {
  transform: translateY(-2px);
  color: var(--slate-900);
  box-shadow:
    0 16px 32px -12px rgba(248, 250, 252, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.download-alt:focus-visible {
  outline: 3px solid rgba(56, 189, 248, 0.65);
  outline-offset: 3px;
}

.download-alt-icon {
  flex: none;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.download-alt-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.download-alt-label {
  font-weight: 700;
  font-size: 0.95rem;
}

.download-alt-sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--slate-500);
}

.download-card .download-primary code {
  color: var(--slate-200);
  background-color: rgba(148, 163, 184, 0.14);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
}

/* Download card: Windows and Linux platform cards */
.download-platforms {
  border-top: 1px solid var(--slate-700);
}

.download-card .download-platforms-label {
  color: var(--slate-400);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.platform-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 640px;
  margin: 0 auto;
}

.platform-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  text-align: left;
  color: var(--slate-900);
  background: linear-gradient(160deg, #FFFFFF 0%, #EAF2FB 100%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 18px 36px -18px rgba(2, 6, 23, 0.8),
    0 0 0 1px rgba(148, 163, 184, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.platform-card-linux {
  background: linear-gradient(160deg, #FFFEF9 0%, #FFF1CF 100%);
}

.platform-card-mac {
  background: linear-gradient(160deg, #FFFFFF 0%, #E9EDF3 100%);
}

.platform-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 24px 44px -18px rgba(56, 189, 248, 0.55),
    0 0 0 1px rgba(56, 189, 248, 0.45);
}

.platform-card-linux:hover {
  box-shadow:
    0 24px 44px -18px rgba(249, 178, 51, 0.5),
    0 0 0 1px rgba(249, 178, 51, 0.5);
}

.platform-card-mac:hover {
  box-shadow:
    0 24px 44px -18px rgba(203, 213, 225, 0.55),
    0 0 0 1px rgba(203, 213, 225, 0.6);
}

.platform-card:focus-within {
  outline: 3px solid rgba(56, 189, 248, 0.65);
  outline-offset: 3px;
}

.platform-card-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  padding-right: 0.9rem;
  box-sizing: content-box;
  border-right: 1px solid rgba(15, 23, 42, 0.12);
}

.platform-card-icon svg,
.platform-card-icon img {
  display: block;
  width: 36px;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.18));
}

.platform-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.platform-card-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.platform-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}

.platform-card-link:hover,
.platform-card-link:focus {
  color: inherit;
}

.platform-card-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--slate-700);
}

.platform-card-name {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--slate-900);
}

.platform-card-arch {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  display: inline-flex;
  gap: 0.35rem;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--slate-500);
}

.platform-card-arch a {
  color: var(--slate-600);
  text-decoration: none;
  border-bottom: 1px dotted rgba(71, 85, 105, 0.55);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.platform-card-arch a:hover,
.platform-card-arch a:focus-visible {
  color: #2563EB;
  border-bottom: 1px solid #2563EB;
  outline: none;
}

.platform-card-chevron {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--slate-800);
  transition: transform 0.18s ease;
}

.platform-card:hover .platform-card-chevron {
  transform: translateX(4px);
}

.download-card .download-platforms-note {
  color: var(--slate-400);
}

.download-card .download-platforms-note a {
  color: var(--slate-300);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.download-card .download-platforms-note a:hover {
  color: #fff;
}

.download-compare-link {
  color: var(--slate-400);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.15s ease;
}

.download-compare-link:hover {
  color: var(--slate-100);
}

@media (max-width: 575.98px) {
  .download-options {
    flex-direction: column;
    gap: 1rem;
  }

  .platform-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .platform-card {
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
  }
}

/* "New!" badge pill */
.badge-new {
  display: inline-block;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  letter-spacing: 0.02em;
  vertical-align: middle;
  margin-left: 0.35rem;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ==========================================================================
   Download Page
   ========================================================================== */
.download-hero {
  background-color: var(--bg-page);
}

[data-bs-theme="dark"] .download-hero {
  background-color: var(--slate-900);
}

.download-option-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 2rem;
  height: 100%;
}

[data-bs-theme="dark"] .download-option-card {
  background-color: var(--slate-800);
  border-color: var(--slate-700);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  padding: 0.5rem 0 0.5rem 1.75rem;
  position: relative;
  font-size: 0.95rem;
}

.feature-list li.pro::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--contextify-primary);
  font-weight: 700;
}

.feature-list li.con::before {
  content: "~";
  position: absolute;
  left: 0;
  color: var(--slate-500);
  font-weight: 700;
}

.comparison-section {
  background-color: var(--bg-surface);
}

[data-bs-theme="dark"] .comparison-section {
  background-color: var(--slate-800);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--bg-page);
  border-radius: 12px;
  overflow: hidden;
}

[data-bs-theme="dark"] .comparison-table {
  background-color: var(--slate-900);
}

.comparison-table th,
.comparison-table td {
  padding: 1rem 1.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.comparison-table th {
  background-color: var(--bg-surface);
  font-weight: 600;
  color: var(--text-primary);
}

[data-bs-theme="dark"] .comparison-table th {
  background-color: var(--slate-800);
}

.comparison-table td {
  color: var(--text-secondary);
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.recommendation-section {
  background-color: var(--bg-page);
}

[data-bs-theme="dark"] .recommendation-section {
  background-color: var(--slate-900);
}

.recommendation-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 1.5rem;
  height: 100%;
}

[data-bs-theme="dark"] .recommendation-card {
  background-color: var(--slate-800);
  border-color: var(--slate-700);
}

.recommendation-card ul {
  padding-left: 1.25rem;
  margin-bottom: 0;
}

.recommendation-card li {
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.requirements-section {
  background-color: var(--bg-surface);
}

[data-bs-theme="dark"] .requirements-section {
  background-color: var(--slate-800);
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  background-color: var(--slate-900) !important;
  padding: 3rem 0;
}

footer a {
  color: var(--slate-100);
  text-decoration: none;
}

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

.footer-brand {
  color: var(--slate-50);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Gradient scales well on mobile, no need to hide */

  .screenshot-wrapper {
    padding: 0 1rem;
  }

  .hero-section h1 {
    font-size: 2rem;
  }
}

@media (max-width: 767.98px) {
  #download {
    margin: 0 1rem;
  }
}

/* ==========================================================================
   Typography Scale
   ========================================================================== */
@media (min-width: 992px) {
  .hero-section h1 {
    font-size: 3rem;
  }

  #features li {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   Page Content (Privacy, Terms, Support)
   ========================================================================== */
[data-bs-theme="dark"] .page-content.bg-white {
  background-color: var(--bg-surface) !important;
}

.page-content h1 {
  font-size: 2.25rem;
  font-weight: 700;
}

.page-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--contextify-primary);
}

[data-bs-theme="dark"] .page-content h2 {
  color: var(--contextify-primary);
}

.page-content h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.page-content p {
  margin-bottom: 1rem;
}

.page-content ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.page-content li {
  margin-bottom: 0.5rem;
}

.page-content code {
  background-color: var(--bg-muted);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

[data-bs-theme="dark"] .page-content code {
  background-color: var(--bg-muted);
}

.page-content a {
  color: var(--link-default);
}

[data-bs-theme="dark"] .page-content a {
  color: var(--link-default);
}

.page-content a:hover {
  color: var(--link-hover);
}

[data-bs-theme="dark"] .page-content a:hover {
  color: var(--link-hover);
}

/* ==========================================================================
   Newsletter Signup Section
   ========================================================================== */
.newsletter-section {
  background-color: var(--bg-muted);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

[data-bs-theme="dark"] .newsletter-section {
  background-color: var(--bg-muted);
}

.newsletter-form .input-group {
  max-width: 400px;
  margin: 0 auto;
}

.newsletter-form .form-control {
  border-color: var(--border-default);
}

.newsletter-form .form-control:focus {
  border-color: var(--contextify-primary);
  box-shadow: 0 0 0 0.2rem rgba(74, 123, 167, 0.25);
}

#newsletter-message {
  min-height: 1.5em;
}

#newsletter-message.success {
  color: var(--contextify-success);
}

#newsletter-message.error {
  color: var(--contextify-error);
}

/* Mobile: cap the g-5 horizontal gutter so its negative row margins do not
   overflow the viewport (columns stack below lg, so the horizontal gutter is
   not visible on phones anyway). Fixes homepage horizontal scroll on mobile. */
@media (max-width: 575.98px) {
  .row.g-5 {
    --bs-gutter-x: 1.5rem;
  }
}