/*
 * TempMail stylesheet editing guide (read before changes):
 *  - Header/mobile menu styles: `.hero__nav`, `.hero__menu`, `.hero__menu-toggle`
 *    are paired with markup in `partials/site-header.php` and JS in
 *    `assets/js/script.js`. Keep class names in sync across all three files.
 *  - Floating action buttons: `.share-widget` (right) + `.feedback-fab` (left)
 *    rely on shared spacing rules in the mobile breakpoints below. Update both
 *    together to avoid overlap on phones/tablets.
 *  - Breakpoints already defined (1200/992/900/768/640/480). Prefer dropping new
 *    overrides inside the nearest existing media query so cascade stays
 *    predictable.
 *  - Page-specific tweaks: many blocks scope to `body.page-*` (home, blog, etc.).
 *    Test changes on those pages too so nothing regresses silently.
 */

/* ============================================
   INTER FONT IMPORT
   
   Purpose:
   - Loads the Inter font family from Google Fonts
   - Used for all text throughout the website
   
   Used on:
   - All pages (global)
   
   Notes:
   - Weights: 400 (regular), 500 (medium), 600 (semibold), 700 (bold), 800 (extrabold)
   - What may break: Typography will fall back to system fonts if this fails
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================
   PREMIUM DESIGN SYSTEM
   
   Purpose:
   - Defines the visual design language for the website
   - CSS custom properties (variables) for consistent styling
   - Centralized design tokens for easy maintenance
   
   Used on:
   - All pages (global)
   
   Notes:
   - Primary Colors: Purple theme (#5f3bff)
   - Neutral Colors: Gray scale for text and backgrounds
   - Typography: Inter font family with scale
   - Spacing: Consistent spacing system
   - Border Radius: 18px for cards (premium feel)
   - Shadows: Softer shadows for premium feel
   - Transitions: Consistent animation timing
   - Container: 1280px max-width for content
   
   What may break:
   - Changing these variables will affect the entire site appearance
   - Ensure color contrast ratios remain accessible
   ============================================ */

/* Premium Color Palette */
:root {
  /* Primary Colors - Purple Theme */
  --premium-primary: #5f3bff;
  --premium-primary-dark: #4a2fcc;
  --premium-primary-light: #7c4dff;
  --premium-primary-50: rgba(95, 59, 255, 0.05);
  --premium-primary-100: rgba(95, 59, 255, 0.1);
  --premium-primary-200: rgba(95, 59, 255, 0.2);

  /* Secondary Colors */
  --premium-secondary: #8b5cf6;
  --premium-accent: #a78bfa;

  /* Neutral Colors - Premium Scheme */
  --premium-white: #ffffff;
  --premium-gray-50: #F8FAFC;
  --premium-gray-100: #F5F7FB;
  --premium-gray-200: #E5E7EB;
  --premium-gray-300: #D1D5DB;
  --premium-gray-400: #9CA3AF;
  --premium-gray-500: #6B7280;
  --premium-gray-600: #4B5563;
  --premium-gray-700: #374151;
  --premium-gray-800: #1F2937;
  --premium-gray-900: #111827;

  /* Background Colors */
  --premium-bg-white: #FFFFFF;
  --premium-bg-alt: #F8FAFC;
  --premium-bg-alt-2: #F5F7FB;

  /* Typography - Inter Font */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;

  /* Typography Scale */
  --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;
  --font-size-6xl: 3.5rem;

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* Spacing - Increased for Premium Feel */
  --premium-spacing-xs: 0.5rem;
  --premium-spacing-sm: 1rem;
  --premium-spacing-md: 1.5rem;
  --premium-spacing-lg: 2rem;
  --premium-spacing-xl: 3rem;
  --premium-spacing-2xl: 4rem;
  --premium-spacing-3xl: 5rem;
  --premium-spacing-4xl: 6rem;

  /* Section Spacing - 48-64px */
  --premium-section-spacing: 4rem;

  /* Border Radius - 18px for Cards */
  --premium-radius-sm: 8px;
  --premium-radius-md: 12px;
  --premium-radius-lg: 16px;
  --premium-radius-xl: 18px;
  --premium-radius-2xl: 24px;
  --premium-radius-full: 9999px;

  /* Shadows - Softer for Premium Feel */
  --premium-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --premium-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --premium-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --premium-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
  --premium-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --premium-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);

  /* Transitions */
  --premium-transition-fast: 150ms ease;
  --premium-transition-base: 250ms ease;
  --premium-transition-slow: 350ms ease;

  /* Container - 1280px max-width */
  --premium-container-max: 1280px;
  --premium-container-padding: 2rem;
}

/* ============================================
   BASE STYLES
   
   Purpose:
   - Global styles for HTML elements
   - Default typography, colors, and spacing
   - Link styles and hover effects
   
   Used on:
   - All pages (global)
   
   Notes:
   - Sets default font family to Inter
   - Applies antialiasing for better text rendering
   - Defines heading styles (h1-h6)
   - Defines paragraph and link styles
   
   What may break:
   - Changing these will affect all text globally
   - Ensure link colors remain accessible
   ============================================ */

body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--premium-gray-700);
  background-color: var(--premium-bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-sans);
  font-weight: 700;
  color: var(--premium-gray-900);
  line-height: var(--line-height-tight);
}

p {
  line-height: var(--line-height-relaxed);
  color: var(--premium-gray-600);
}

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

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

/* ============================================
   PREMIUM HEADER (Desktop & Mobile)
   
   Purpose:
   - Main navigation header for the website
   - Logo, navigation links, CTA buttons
   - Mobile hamburger menu and language selector
   - App download buttons (desktop and mobile)
   
   Used on:
   - All public pages
   
   Notes:
   - Fixed position at top with blur backdrop
   - Responsive: transforms to mobile menu below 992px
   - Language selector dropdown with smooth transitions
   - Desktop app buttons hidden on mobile, mobile app buttons shown on mobile
   - Hamburger animation when menu is open
   
   What may break:
   - Mobile menu won't open/close if JS classes don't match
   - Navigation breaks if class names change
   - Language selector won't work if JS is disabled
   ============================================ */

.premium-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--premium-gray-200);
  transition: all var(--premium-transition-base);
}

.premium-header--scrolled {
  background: rgba(255, 255, 255, 0.99);
  box-shadow: var(--premium-shadow-soft);
  border-bottom: 1px solid var(--premium-gray-200);
}

.premium-header__container {
  max-width: var(--premium-container-max);
  margin: 0 auto;
  padding: 0 var(--premium-container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 80px;
}

.premium-header__right-group {
  display: flex;
  align-items: center;
  gap: 0;
}

.premium-header__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--premium-gray-900);
  font-weight: 700;
  font-size: 1.125rem;
  white-space: nowrap;
  transition: color var(--premium-transition-fast);
}

.premium-header__brand:hover {
  color: var(--premium-primary);
}

.premium-header__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.premium-header__brand-text {
  font-size: 1.25rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--premium-primary) 0%, var(--premium-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.premium-header__mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: var(--premium-gray-100);
  border-radius: var(--premium-radius-md);
  cursor: pointer;
  transition: all var(--premium-transition-base);
}

.premium-header__mobile-toggle:hover {
  background: var(--premium-gray-200);
}

.premium-header__hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.premium-header__hamburger span {
  width: 20px;
  height: 2px;
  background: var(--premium-gray-700);
  border-radius: 2px;
  transition: all var(--premium-transition-base);
}

.premium-header__mobile-toggle[aria-expanded="true"] .premium-header__hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.premium-header__mobile-toggle[aria-expanded="true"] .premium-header__hamburger span:nth-child(2) {
  opacity: 0;
}

.premium-header__mobile-toggle[aria-expanded="true"] .premium-header__hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.premium-header__nav {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.premium-header__nav a {
  padding: 0.625rem 1rem;
  color: var(--premium-gray-600);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: var(--premium-radius-md);
  transition: all var(--premium-transition-fast);
}

.premium-header__nav a:hover {
  color: var(--premium-primary);
  background: var(--premium-primary-50);
}

.premium-header__nav-link--active {
  color: var(--premium-primary) !important;
  background: var(--premium-primary-100) !important;
  font-weight: 600;
}

.premium-header__cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.premium-header__separator {
  width: 1px;
  height: 36px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  margin: 0 8px;
}

.premium-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  background: linear-gradient(135deg, var(--premium-primary) 0%, var(--premium-secondary) 100%);
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--premium-radius-full);
  box-shadow: var(--premium-shadow-md);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.premium-header__btn:hover {
  background: white;
  color: var(--premium-gray-900);
  border: 1px solid var(--premium-primary);
  transform: translateY(-2px);
  box-shadow: var(--premium-shadow-lg);
}

.premium-header__btn:active {
  transform: translateY(0);
  transition: all 0.15s ease;
}

/* Desktop App Download Buttons */
.premium-header__btn--app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(135deg, var(--premium-primary) 0%, var(--premium-secondary) 100%);
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--premium-radius-md);
  border: 1px solid transparent;
  box-shadow: var(--premium-shadow-md);
  transition: all 0.45s ease-in-out;
  min-width: 140px;
  height: 44px;
}

.premium-header__btn--app:hover {
  background: white;
  color: var(--premium-gray-900);
  border-color: var(--premium-primary);
  transform: translateY(-2px);
  box-shadow: var(--premium-shadow-lg);
}

.premium-header__btn--app:active {
  transform: translateY(0);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-header__btn--app svg {
  flex-shrink: 0;
  fill: currentColor;
}

/* Hide mobile app buttons on desktop (shown in mobile media query) */
.premium-header__mobile-app-buttons {
  display: none;
}

/* Mobile Navigation */
@media (max-width: 992px) {
  .premium-header__mobile-toggle {
    display: flex;
  }

  .premium-header__mobile-lang-selector {
    display: flex !important;
  }

  .premium-header__lang-selector {
    display: none;
  }

  .premium-header__nav {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: var(--premium-container-padding);
    right: var(--premium-container-padding);
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 1rem;
    background: #FFFAFA;
    border-radius: var(--premium-radius-lg);
    box-shadow: var(--premium-shadow-xl);
    border: 1px solid var(--premium-gray-200);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--premium-transition-base);
    z-index: 1001;
  }

  /* When navigation has .is-open class, show it with animation */
  .premium-header__nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .premium-header__nav a {
    width: 100%;
    text-align: center;
    padding: 0.875rem 1rem;
  }

  .premium-header__cta {
    display: none;
  }

  .premium-header__separator {
    display: none;
  }

  /* Mobile App Download Buttons */
  .premium-header__mobile-app-buttons {
    display: flex !important;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--premium-gray-200);
  }

  .premium-header__mobile-app-buttons .premium-header__btn--app {
    width: 100%;
    color: white !important;
    border: 1px solid transparent;
    transition: all 0.45s ease-in-out;
  }

  .premium-header__mobile-app-buttons .premium-header__btn--app svg {
    fill: white !important;
    transition: fill 0.45s ease-in-out;
  }

  .premium-header__mobile-app-buttons .premium-header__btn--app:hover {
    color: var(--premium-gray-900) !important;
    background: white;
    border-color: var(--premium-primary);
    transform: translateY(-2px);
    box-shadow: var(--premium-shadow-lg);
  }

  .premium-header__mobile-app-buttons .premium-header__btn--app:hover svg {
    fill: var(--premium-gray-900) !important;
  }

  .premium-header__mobile-app-buttons .premium-header__btn--app:active {
    transform: translateY(0);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* Language Selector
   
   Purpose:
   - Dropdown for selecting website language
   - Desktop and mobile variants
   - Smooth dropdown animation
   
   Used on:
   - Header (desktop and mobile)
   
   Notes:
   - Desktop: Inline dropdown in header
   - Mobile: Shown in mobile menu
   - Hidden/shown via CSS based on breakpoint
   - Dropdown appears below toggle button
   
   What may break:
   - Language switching requires JavaScript
   - Dropdown positioning may break if header structure changes
   ============================================ */
.premium-header__lang-selector {
  position: relative;
  display: flex;
  align-items: center;
}

.premium-header__mobile-lang-selector {
  display: flex;
  position: relative;
  align-items: center;
  margin-right: 0.5rem;
  z-index: 1003;
}

@media (min-width: 993px) {
  .premium-header__mobile-lang-selector {
    display: none;
  }
}

.premium-header__lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 1px solid var(--premium-gray-300);
  border-radius: var(--premium-radius-md);
  color: var(--premium-gray-700);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--premium-transition-fast);
}

.premium-header__lang-toggle:hover {
  background: var(--premium-gray-100);
  border-color: var(--premium-gray-400);
}

.premium-header__lang-toggle svg {
  flex-shrink: 0;
  fill: currentColor;
}

.premium-header__lang-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: auto;
  min-width: 180px;
  background: white;
  border: 1px solid var(--premium-gray-200);
  border-radius: var(--premium-radius-lg);
  box-shadow: var(--premium-shadow-lg);
  z-index: 1004;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: all var(--premium-transition-base);
  max-width: 200px;
  overflow: hidden;
}

.premium-header__lang-dropdown:not([hidden]) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.premium-header__lang-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}

.premium-header__lang-option {
  width: 100%;
  padding: 0.625rem 1rem;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 0.875rem;
  color: var(--premium-gray-700);
  cursor: pointer;
  transition: all var(--premium-transition-fast);
}

.premium-header__lang-option:hover {
  background: var(--premium-primary-50);
  color: var(--premium-primary);
}

.premium-header__lang-option:active {
  background: var(--premium-primary-100);
}

@media (max-width: 480px) {
  .premium-header__container {
    padding: 0 0.6rem;
    gap: 1.5rem;
  }

  .premium-header__brand-text {
    font-size: 1.06rem;
  }

  .premium-header__logo {
    width: 36px;
    height: 36px;
  }

  .premium-header__mobile-lang-selector {
    display: flex !important;
    margin-right: 0.5rem;
  }
}

/* ============================================
   PREMIUM HERO SECTION
   
   Purpose:
   - Homepage hero with title, description, trust badges
   - App download icons and statistics cards
   - Vertical ad slots (desktop only)
   - Gradient background with glow effects
   
   Used on:
   - Homepage only
   
   Notes:
   - Responsive: Single column on mobile, two columns on desktop
   - Vertical ads shown only on desktop (1200px+)
   - Stats grid: 4 columns desktop, 2 columns tablet, 1 column mobile
   - App icons: Horizontal scroll on mobile
   - Multiple media queries for different breakpoints (1199px, 992px, 768px, 480px, 375px, 320px, 1200px)
   
   What may break:
   - Hero layout breaks if grid structure changes
   - Ad placement breaks if container width changes
   - App icons overflow if flex properties change
   ============================================ */

.premium-hero-how-it-works-wrapper {
  background: linear-gradient(135deg, #ffe2b6ec 0%, #EEF2FF 50%, #e681ff96 100%);
}

.premium-hero {
  padding: 154px 05px 50px;
  background: transparent;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
}

.premium-hero__ad-left,
.premium-hero__ad-right {
  width: 160px;
  height: 600px;
  display: none;
  justify-content: center;
  align-items: center;
}

.premium-hero__ad-right {
  justify-self: end;
}

.premium-hero__ad-left iframe,
.premium-hero__ad-right iframe,
.premium-hero__ad-left img,
.premium-hero__ad-right img {
  width: 160px;
  height: 600px;
  max-width: 160px;
  max-height: 600px;
  object-fit: contain;
}

.premium-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(95, 59, 255, 0.05) 0%, transparent 50%),
              radial-gradient(circle at 80% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
  pointer-events: none;
}



.premium-hero__container {
  max-width: var(--premium-container-max);
  margin: 0 auto;
  padding: 0 var(--premium-container-padding);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.premium-hero__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.premium-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--premium-primary-50);
  color: var(--premium-primary);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--premium-radius-full);
  width: fit-content;
}

.premium-hero__title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--premium-gray-900);
  margin: 0;
  letter-spacing: -0.02em;
}

.premium-hero__description {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--premium-gray-600);
  margin: 0;
}

.premium-hero__trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.premium-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: white;
  border: 1px solid var(--premium-gray-200);
  border-radius: var(--premium-radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--premium-gray-700);
  box-shadow: var(--premium-shadow-sm);
}

.premium-hero__badge-icon {
  font-size: 1rem;
}

.premium-hero__card {
  background: white;
  border-radius: var(--premium-radius-xl);
  padding: 2rem;
  box-shadow: var(--premium-shadow-xl);
  border: 1px solid var(--premium-gray-200);
  min-height: 450px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.email-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.privacy-usage-info {
  padding: 1.5rem;
  background: var(--premium-gray-50);
  border-radius: var(--premium-radius-lg);
  border: 1px solid var(--premium-gray-200);
}

.privacy-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.privacy-info-item:last-child {
  margin-bottom: 0;
}

.privacy-info-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.privacy-info-content {
  flex: 1;
}

.privacy-info-content strong {
  display: block;
  color: var(--premium-gray-900);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.privacy-info-content p {
  margin: 0;
  color: var(--premium-gray-600);
  font-size: 0.8rem;
  line-height: 1.4;
}

.hero-mailbox__address {
  min-height: 60px;
}

.premium-hero__right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 0;
  width: 100%;
  max-width: 100%;
}

.premium-hero__app-icons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0.3rem;
  margin-top: 0.2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.premium-hero__app-icons::-webkit-scrollbar {
  display: none;
}

@media (min-width: 992px) {
  .premium-hero__app-icons {
    gap: 0.65rem;
  }
}

.premium-hero__app-icon {
  background: white;
  padding: 0.75rem 0.625rem;
  border-radius: var(--premium-radius-xl);
  text-align: center;
  box-shadow: var(--premium-shadow-soft);
  border: 1px solid var(--premium-gray-200);
  transition: all var(--premium-transition-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  max-width: 85px;
  text-decoration: none;
  color: inherit;
  flex: 1 1 auto;
}

.premium-hero__app-icon:hover {
  transform: translateY(-2px);
  box-shadow: var(--premium-shadow-md);
  border-color: var(--premium-primary-200);
}

.premium-hero__app-icon svg {
  width: 32px;
  height: 32px;
  margin-bottom: 0.5rem;
  color: var(--premium-primary);
}

.premium-hero__app-icon span {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--premium-gray-700);
  line-height: 1.3;
}

/* Mobile Responsive */
@media (max-width: 1199px) {
  .premium-hero {
    display: block !important;
    grid-template-columns: none !important;
  }

  .premium-hero__ad-left,
  .premium-hero__ad-right {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .premium-hero__container,
  .premium-hero__content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  .premium-header__mobile-lang-selector {
    display: flex !important;
    margin-right: 0.75rem;
  }
}

@media (max-width: 992px) {
  .premium-hero {
    padding: 120px 0 60.5px;
  }

  .premium-hero__container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 0 1.5rem;
  }

  .premium-hero__title {
    font-size: 2.25rem;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .premium-hero__description {
    font-size: 1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Disable glow orbs and sparkles on mobile */
  .premium-hero__glow-orb,
  .premium-hero__sparkle {
    display: none;
  }
}

@media (max-width: 768px) {
  .premium-hero {
    padding: 110px 0 44px;
  }

  .premium-hero__container {
    gap: 2rem;
    padding: 0 1.25rem;
  }

  .premium-hero__title {
    font-size: 1.875rem;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .premium-hero__description {
    font-size: 0.95rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .premium-hero__trust-badges {
    display: none;
  }

  .premium-hero__app-icons {
    display: none;
  }

  .premium-hero__card {
    padding: 1.5rem;
  }

  .premium-hero__right {
    width: 100%;
  }

  .premium-header__mobile-lang-selector {
    display: flex !important;
    margin-right: 0.625rem;
  }
}

@media (max-width: 820px) {
  .premium-hero__container {
    padding: 0 1.375rem;
  }
}

@media (max-width: 480px) {
  .premium-hero {
    padding: 105px 0 33px;
  }

  .premium-hero__container {
    padding: 0 1rem;
  }

  .premium-hero__title {
    font-size: 1.5rem;
    line-height: 1.25;
  }

  .premium-hero__description {
    font-size: 0.875rem;
  }

  .premium-hero__card {
    padding: 1.25rem;
  }

  .premium-header__mobile-lang-selector {
    display: flex !important;
    margin-right: 0.5rem;
  }
}

@media (max-width: 375px) {
  .premium-hero {
    padding: 66px 0 33px;
  }

  .premium-hero__container {
    padding: 0 0.875rem;
  }

  .premium-hero__title {
    font-size: 1.375rem;
    line-height: 1.25;
  }

  .premium-hero__description {
    font-size: 0.8rem;
  }

  .premium-hero__card {
    padding: 1.5rem;
  }

  .premium-header__mobile-lang-selector {
    display: flex !important;
    margin-right: 0.375rem;
  }
}

@media (max-width: 320px) {
  .premium-hero {
    padding: 66px 0 33px;
  }

  .premium-hero__container {
    padding: 0 0.75rem;
  }

  .premium-hero__title {
    font-size: 1.25rem;
    line-height: 1.3;
  }

  .premium-hero__description {
    font-size: 0.75rem;
  }

  .premium-hero__badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
  }

  .premium-hero__card {
    padding: 1.25rem;
  }

  .premium-header__mobile-lang-selector {
    display: flex !important;
    margin-right: 0.25rem;
  }

  .premium-header__lang-toggle {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
  }
}

/* Additional responsive breakpoints for specific screen sizes */
@media (max-width: 576px) {
  .premium-hero {
    padding: 105px 0 33px;
  }

  .premium-hero__container {
    padding: 0 1rem;
  }

  .premium-hero__title {
    font-size: 1.5rem;
    line-height: 1.25;
  }

  .premium-hero__description {
    font-size: 0.875rem;
  }

  .premium-hero__card {
    padding: 1.25rem;
  }
}

@media (max-width: 430px) {
  .premium-hero__container {
    padding: 0 0.9375rem;
  }

  .premium-hero__title {
    font-size: 1.4375rem;
    line-height: 1.25;
  }

  .premium-hero__description {
    font-size: 0.8125rem;
  }
}

@media (max-width: 412px) {
  .premium-hero__container {
    padding: 0 0.875rem;
  }

  .premium-hero__title {
    font-size: 1.375rem;
    line-height: 1.25;
  }

  .premium-hero__description {
    font-size: 0.8rem;
  }
}

@media (max-width: 390px) {
  .premium-hero__container {
    padding: 0 0.875rem;
  }

  .premium-hero__title {
    font-size: 1.375rem;
    line-height: 1.25;
  }

  .premium-hero__description {
    font-size: 0.8rem;
  }
}

@media (max-width: 360px) {
  .premium-hero__container {
    padding: 0 0.8125rem;
  }

  .premium-hero__title {
    font-size: 1.3125rem;
    line-height: 1.25;
  }

  .premium-hero__description {
    font-size: 0.78125rem;
  }

  .premium-hero__card {
    padding: 1.5rem;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .premium-hero__container {
    gap: 3rem;
  }
}

@media (min-width: 1366px) {
  .premium-hero__container {
    gap: 4rem;
  }
}

@media (min-width: 1440px) {
  .premium-hero__container {
    gap: 4.5rem;
  }
}

@media (min-width: 1600px) {
  .premium-hero__container {
    gap: 5rem;
  }
}

@media (min-width: 1920px) {
  .premium-hero__container {
    gap: 5.5rem;
  }
}

/* Desktop: Show vertical ads */
@media (min-width: 1200px) {
  .premium-hero__ad-left,
  .premium-hero__ad-right {
    display: flex;
  }
}

/* ============================================
   ADSENSE AD PLACEMENTS
   
   Purpose:
   - Ad slot containers for Google AdSense
   - Different ad sizes: leaderboard, banner, in-content, footer
   - Transparent backgrounds to blend with design
   
   Used on:
   - Homepage, blog posts, and content pages
   
   Notes:
   - Leaderboard: 970x90px max
   - Banner: 970x250px max
   - In-content: 250px min-height
   - Footer: 970x90px max
   - All slots have transparent backgrounds
   
   What may break:
   - Ad display breaks if dimensions change
   - AdSense policy violations if styling interferes with ad visibility
   ============================================ */

.premium-ad-slot {
  background: transparent;
  border: none !important;
  outline: none !important;
  box-shadow: none;
  padding: 2rem;
  text-align: center;
  color: var(--premium-gray-500);
  font-size: 0.875rem;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.premium-ad-slot--leaderboard {
  max-width: 970px;
  margin: 1.5rem auto;
  min-height: 90px;
}

.premium-ad-slot--banner {
  max-width: 970px;
  margin: 1.5rem auto;
  min-height: 250px;
}

.premium-ad-slot--in-content {
  margin: 1.5rem 0;
  min-height: 250px;
}

.premium-ad-slot--footer {
  max-width: 970px;
  margin: 1.5rem auto;
  min-height: 90px;
}

/* ============================================
   SECTION SPACING UTILITIES
   
   Purpose:
   - Consistent spacing between page sections
   - Background color variants for alternating sections
   - Section header components
   
   Used on:
   - All pages with multiple sections
   
   Notes:
   - .premium-section: Standard 4rem padding
   - .premium-section--alt: Light gray background
   - .premium-section--alt-2: Slightly darker gray background
   - .premium-section-header: Centered title and description
   - Title: 2.5rem, Description: 1.125rem
   
   What may break:
   - Section spacing inconsistency if values change
   - Visual hierarchy breaks if header styles change
   ============================================ */

.premium-section {
  padding: var(--premium-section-spacing) 0;
}

.premium-section--alt {
  background: var(--premium-bg-alt);
}

.premium-section--alt-2 {
  background: var(--premium-bg-alt-2);
}

.premium-section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.premium-section-header__title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--premium-gray-900);
  margin: 0 0 1rem 0;
  letter-spacing: -0.02em;
}

.premium-section-header__description {
  font-size: 1.125rem;
  color: var(--premium-gray-600);
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   STATISTICS SECTION
   
   Purpose:
   - Display key metrics/statistics about the service
   - Grid layout with gradient text values
   - Hover effects on stat cards
   
   Used on:
   - Homepage (stats section)
   
   Notes:
   - 4 columns on desktop, 2 on tablet, 1 on mobile
   - Gradient text for values (purple theme)
   - Hover: translateY(-4px) with shadow
   - White background with light gray cards
   
   What may break:
   - Grid layout breaks if column count changes
   - Gradient text breaks if background-clip not supported
   ============================================ */

.premium-stats {
  padding: 4rem 0;
  background: white;
}

.premium-stats__container {
  max-width: var(--premium-container-max);
  margin: 0 auto;
  padding: 0 var(--premium-container-padding);
}

.premium-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.premium-stat-card {
  text-align: center;
  padding: 2rem;
  background: var(--premium-gray-50);
  border-radius: var(--premium-radius-xl);
  transition: all var(--premium-transition-base);
}

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

.premium-stat-card__value {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--premium-primary) 0%, var(--premium-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

.premium-stat-card__label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--premium-gray-600);
}

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

@media (max-width: 480px) {
  .premium-stats__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   MOBILE RESPONSIVE STYLES (ORPHANED MEDIA QUERIES)
   
   Purpose:
   - Mobile responsive adjustments for various components
   - These media queries are separated from their parent components
   
   Components covered:
   - Features Grid (premium-features__grid)
   - Blog Grid (blog__grid)
   - Trustpilot Section (trustpilot-cta, trustpilot-content)
   - FAQ (premium-faq__container)
   - Inbox/Mailbox (mailbox__header, mailbox__items, empty-state, mailbox__refresh-orb)
   
   Notes:
   - These media queries should ideally be moved to their respective component sections
   - Kept separate here to preserve cascade order
   - Uses !important to override existing styles
   - Breakpoints: 1024px, 767px, 768px, 480px
   
   What may break:
   - Mobile layout breaks if these overrides are removed
   - Specific component overrides may conflict if moved
   ============================================ */

/* Features Grid Mobile Responsive */
@media (max-width: 1024px) {
  .premium-features__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .premium-features__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .premium-feature-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 20px 24px !important;
    text-align: left !important;
  }

  .premium-feature-card__icon {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    padding: 8px;
    border-radius: 12px;
    margin: 0;
    align-self: flex-start;
  }

  .premium-feature-card__title {
    font-size: 1rem;
    text-align: left;
    margin: 0;
  }

  .premium-feature-card__description {
    font-size: 0.875rem;
    text-align: left;
    margin: 0;
  }
}

/* Blog Grid Mobile Responsive */
@media (max-width: 767px) {
  .blog__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .premium-feature-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .premium-feature-card__icon {
    width: 100% !important;
    height: 100% !important;
    align-items: center;
  }

  .premium-feature-card__icon img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
  }

  /* Trustpilot Section Mobile Responsive */
  .trustpilot-cta,
  .trustpilot-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    padding: 32px 20px !important;
  }

  .trustpilot-content > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }

  .trustpilot-btn {
    width: 100% !important;
    max-width: 320px !important;
  }
}

/* FAQ Mobile Responsive */
@media (max-width: 768px) {
  .premium-faq__container {
    padding: 0 1rem;
  }

  .premium-faq-item {
    border-radius: var(--premium-radius-md);
  }

  .premium-faq-item__summary {
    padding: 1rem;
    font-size: 0.95rem;
  }

  .premium-faq-item__content {
    padding: 1rem;
    font-size: 0.9rem;
  }
}

/* Inbox Mobile Responsive */
@media (max-width: 768px) {
  .mailbox__header {
    padding: 1rem 1.25rem;
    gap: 1rem;
    font-size: 0.8rem;
  }

  .mailbox__items {
    min-height: 300px;
  }

  .empty-state {
    padding: 3rem 1.5rem;
  }

  .mailbox__refresh-orb {
    padding: 0.875rem 1.25rem;
    gap: 0.75rem;
  }

  .refresh-orb__btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  .refresh-orb__progress svg {
    width: 36px;
    height: 36px;
  }

  .refresh-countdown {
    font-size: 0.8rem;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 480px) {
  .mailbox__header {
    padding: 0.875rem 1rem;
    font-size: 0.75rem;
  }

  .mailbox__items {
    min-height: 250px;
  }

  .empty-state {
    padding: 2rem 1rem;
  }

  .empty-state img {
    width: 48px;
    height: 48px;
  }

  .empty-state p {
    font-size: 1rem;
  }

  .empty-state small {
    font-size: 0.875rem;
  }

  .mailbox__refresh-orb {
    padding: 0.75rem 1rem;
    gap: 0.5rem;
  }

  .refresh-orb__btn {
    padding: 0.5rem 0.875rem;
    font-size: 0.8rem;
  }

  .refresh-orb__progress svg {
    width: 36px;
    height: 36px;
  }

  .refresh-countdown {
    font-size: 0.75rem;
  }
}

/* ============================================
   FEATURES GRID
   
   Purpose:
   - Display feature cards in a grid layout
   - Icon, title, and description for each feature
   - Hover effects with elevation and border color change
   
   Used on:
   - Homepage (features section)
   
   Notes:
   - 4 columns on desktop, 3 on tablet, 2 on small tablet, 1 on mobile
   - Hover: translateY(-4px) with shadow and border color change
   - Purple background for icon containers
   - Media queries included in this section (992px, 768px, 480px)
   
   What may break:
   - Grid layout breaks if column count changes
   - Hover effects break if transition properties change
   ============================================ */

.premium-features {
  padding: 4rem 0;
  background: var(--premium-gray-50);
}

.premium-features__container {
  max-width: var(--premium-container-max);
  margin: 0 auto;
  padding: 0 var(--premium-container-padding);
}

.premium-section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.premium-section-header__title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--premium-gray-900);
  margin-bottom: 1rem;
}

.premium-section-header__description {
  font-size: 1.125rem;
  color: var(--premium-gray-600);
  max-width: 600px;
  margin: 0 auto;
}

.premium-features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.premium-feature-card {
  background: white;
  padding: 1.5rem;
  border-radius: var(--premium-radius-xl);
  border: 1px solid var(--premium-gray-200);
  box-shadow: var(--premium-shadow-soft);
  transition: all var(--premium-transition-base);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.premium-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--premium-shadow-lg);
  border-color: var(--premium-primary-200);
}

.premium-feature-card__icon {
  width: 48px;
  height: 48px;
  background: var(--premium-primary-50);
  border-radius: var(--premium-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.premium-feature-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--premium-gray-900);
  margin: 0;
}

.premium-feature-card__description {
  font-size: 0.95rem;
  color: var(--premium-gray-600);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 992px) {
  .premium-features__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

@media (max-width: 480px) {
  .premium-features__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   HOW IT WORKS SECTION
   
   Purpose:
   - Display step-by-step process for using the service
   - Three-step layout with icons, titles, and descriptions
   - Hover effects on step cards
   
   Used on:
   - Homepage (how it works section)
   
   Notes:
   - 3 columns on desktop, 1 column on mobile
   - Hover: translateY(-2px) with shadow and border color change
   - Centered content with icon at top
   - Media query included in this section (768px)
   
   What may break:
   - Grid layout breaks if column count changes
   - Step alignment breaks if flex properties change
   ============================================ */

.premium-how-it-works {
  padding: 4rem 0;
  background: transparent;
}

.premium-how-it-works__container {
  max-width: var(--premium-container-max);
  margin: 0 auto;
  padding: 0 var(--premium-container-padding);
}

.premium-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.premium-step {
  background: white;
  padding: 1.5rem;
  border-radius: var(--premium-radius-xl);
  border: 1px solid var(--premium-gray-200);
  box-shadow: var(--premium-shadow-soft);
  transition: all var(--premium-transition-base);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  min-height: 140px;
}

.premium-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--premium-shadow-md);
  border-color: var(--premium-primary-200);
}

.premium-step__icon {
  font-size: 2rem;
  margin-bottom: 0.25rem;
}

.premium-step__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--premium-gray-900);
  margin: 0;
}

.premium-step__description {
  font-size: 0.875rem;
  color: var(--premium-gray-600);
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 768px) {
  .premium-steps {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .premium-step {
    padding: 1.25rem;
    min-height: auto;
  }

  .premium-step__icon {
    font-size: 1.75rem;
  }

  .premium-step__title {
    font-size: 1rem;
  }

  .premium-step__description {
    font-size: 0.8rem;
  }
}

/* ============================================
   FAQ ACCORDION
   
   Purpose:
   - Expandable/collapsible FAQ items using HTML5 details/summary
   - Smooth rotation animation for the expand/collapse icon
   - Hover effects on FAQ items
   
   Used on:
   - Homepage (FAQ section)
   
   Notes:
   - Uses native HTML5 details/summary element
   - Custom styling hides default marker and adds '+' icon
   - Icon rotates 45deg when expanded
   - Mobile responsive styles in orphaned media queries section
   
   What may break:
   - Accordion won't work if details/summary structure changes
   - Icon animation breaks if pseudo-element styles change
   ============================================ */

.premium-faq {
  padding: 4rem 0;
  background: var(--premium-gray-50);
}

.premium-faq__container {
  max-width: var(--premium-container-max);
  margin: 0 auto;
  padding: 0 var(--premium-container-padding);
}

.premium-faq__items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.premium-faq-item {
  background: white;
  border-radius: var(--premium-radius-lg);
  border: 1px solid var(--premium-gray-200);
  overflow: hidden;
  transition: all var(--premium-transition-base);
}

.premium-faq-item:hover {
  border-color: var(--premium-primary-200);
}

.premium-faq-item__summary {
  padding: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--premium-gray-900);
  user-select: none;
  list-style: none;
}

/* Hide default triangle marker from details/summary element (browser-specific) */
.premium-faq-item__summary::-webkit-details-marker {
  display: none;
}

/* Add custom plus sign after summary text using pseudo-element */
.premium-faq-item__summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--premium-primary);
  transition: transform var(--premium-transition-base);
}

/* When FAQ item is open, rotate the plus sign to become an X (45 degrees) */
.premium-faq-item[open] .premium-faq-item__summary::after {
  transform: rotate(45deg);
}

.premium-faq-item__content {
  padding: 0 1.5rem 1.5rem;
  color: var(--premium-gray-600);
  line-height: 1.7;
  font-size: 1rem;
}

/* ============================================
   PREMIUM FOOTER
   
   Purpose:
   - Site footer with navigation links and social media
   - Copyright notice and legal links
   - 4-column layout for link categories
   
   Used on:
   - All public pages
   
   Notes:
   - Dark gray background (#1a1a2e)
   - 4-column grid layout
   - Social media icons with hover effects
   - Responsive: stacks on mobile (media query likely in orphaned section)
   
   What may break:
   - Footer layout breaks if grid structure changes
   - Social icons break if SVG structure changes
   ============================================ */

.premium-footer {
  background: var(--premium-gray-900);
  color: white;
  padding: 4rem 0 2rem;
}

.premium-footer__container {
  max-width: var(--premium-container-max);
  margin: 0 auto;
  padding: 0 var(--premium-container-padding);
}

.premium-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
}

.premium-footer__column h4 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: white;
}

.premium-footer__column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.premium-footer__column a {
  color: var(--premium-gray-400);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color var(--premium-transition-fast);
}

.premium-footer__column a:hover {
  color: white;
}

.premium-footer__bottom {
  border-top: 1px solid var(--premium-gray-700);
  padding-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.premium-footer__copyright {
  color: var(--premium-gray-400);
  font-size: 0.875rem;
}

.premium-footer__social {
  display: flex;
  gap: 1rem;
}

.premium-footer__social a {
  width: 40px;
  height: 40px;
  background: var(--premium-gray-700);
  border-radius: var(--premium-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  transition: all var(--premium-transition-base);
}

.premium-footer__social a:hover {
  background: var(--premium-primary);
  transform: translateY(-2px);
}

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

@media (max-width: 480px) {
  .premium-footer__grid {
    grid-template-columns: 1fr;
  }

  .premium-footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================
   LEGACY STYLES (Keep for compatibility)
   
   Purpose:
   - Older styles from previous design iterations
   - Kept for backward compatibility with existing pages
   - May be replaced by premium styles in the future
   
   Components covered:
   - Sticky ad footer padding
   - Hero navigation (legacy hero section)
   - Share widget (floating social share buttons)
   
   Notes:
   - These styles use different class names than premium styles
   - May conflict with premium styles if not scoped properly
   - Consider migrating to premium styles when possible
   - Share widget uses fixed positioning with z-index 1200
   
   What may break:
   - Legacy pages may break if these styles are removed
   - Share widget positioning may conflict with other fixed elements
   ============================================ */

body {
  font-family: var(--font-family-sans);
}

body.has-sticky-ad .footer {
    padding-bottom: clamp(260px, 30vh, 360px);
}

@media (max-width: 768px) {
    .hero__nav {
        width: min(100%, 92vw);
        padding: 0.75rem 1rem;
        gap: 0.75rem;
        position: relative;
        flex-wrap: wrap;
        z-index: 40;
    }

    .hero__nav.has-open-menu {
        padding-bottom: clamp(10rem, 38vw, 13rem);
    }

    .hero__nav.has-open-menu::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: rgba(12, 7, 32, 0.92);
        backdrop-filter: blur(20px);
        z-index: 0;
        pointer-events: none;
    }

    .hero__nav.has-open-menu > * {
        position: relative;
        z-index: 1;
    }

    .hero__menu-toggle {
        display: inline-flex;
    }

    .hero__menu {
        position: absolute;
        top: calc(100% + 0.75rem);
        left: 0;
        right: 0;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        padding: 1rem;
        border-radius: 18px;
        background: rgba(19, 9, 46, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 20px 40px rgba(12, 6, 30, 0.35);
        backdrop-filter: blur(18px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 0.25s ease, transform 0.25s ease;
        z-index: 12;
    }

    .hero__menu.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .hero__menu a {
        width: 100%;
        justify-content: flex-start;
        font-size: 1rem;
    }
}

.share-widget {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1.5rem, 6vh, 3rem);
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 0.8rem;
    z-index: 1200;
}

.share-widget__toggle,
.share-widget__option {
    border: none;
    border-radius: 50%;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 18px 32px -12px rgba(244, 67, 54, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease;
}

.share-widget__toggle {
    background: linear-gradient(135deg, #f97316 0%, #f43f5e 45%, #ef4444 100%);
    font-size: 1.6rem;
    font-weight: 600;
}

.share-widget__toggle:hover,
.share-widget__option:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 30px rgba(18, 16, 62, 0.28);
}

.share-widget__toggle:active,
.share-widget__option:active {
    transform: translateY(0);
    box-shadow: 0 10px 18px rgba(18, 16, 62, 0.22);
}

.share-widget__options {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.65rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(0.94);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* When share widget has .is-open class, show options with animation */
.share-widget.is-open .share-widget__options {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.share-widget.is-open .share-widget__toggle {
    background: linear-gradient(135deg, #be123c 0%, #f43f5e 60%, #f97316 100%);
}

.share-widget__option {
    font-size: 1.25rem;
    line-height: 1;
}

.share-widget__option--twitter { background: #1d9bf0; }
.share-widget__option--facebook { background: #1778f2; }
.share-widget__option--linkedin { background: #0a66c2; }
.share-widget__option--whatsapp { background: #25d366; color: #ffffff; }
.share-widget__option--copy { background: linear-gradient(135deg, #12163e 0%, #343975 100%); font-size: 1.1rem; }

.share-widget__toggle:focus-visible,
.share-widget__option:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
}

.share-widget__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.share-widget__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.share-widget__icon svg {
    width: 60%;
    height: 60%;
}

.share-widget__option--whatsapp .share-widget__icon svg {
    width: 66%;
    height: 66%;
    transform: translate(-1px, -0.5px);
}

.share-widget__toggle-icon--close {
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1;
}

/* Hide toggle icon when it has the hidden attribute (HTML5 feature) */
.share-widget__toggle-icon[hidden] {
    display: none;
}

@media (max-width: 768px) {
    .share-widget {
        right: 12px;
        bottom: 25px;
    }

    .share-widget__toggle,
    .share-widget__option {
        width: 48px;
        height: 48px;
    }

}

@media (max-width: 480px) {
    .share-widget {
        right: 12px;
        bottom: 25px;
    }

    .share-widget__toggle,
    .share-widget__option {
        width: 55px;
        height: 55px;
        font-size: 1.2rem;
    }

}

/* ============================================
   ANDROID FLOATING ACTION BUTTON
   
   Purpose:
   - Mobile-only Android app download button
   - Fixed position at bottom-left
   - Premium circular design with pulse animation
   
   Used on:
   - Homepage (mobile only)
   
   Notes:
   - Hidden on desktop/tablet (max-width: 768px)
   - Bottom-left position (left: 16px, bottom: 20px)
   - White background with Android green icon
   - Purple pulse animation for attention
   - Does not interfere with existing share widget
   
   What may break:
   - Button won't show if z-index conflicts
   - Animation won't work if CSS is disabled
   ============================================ */

.android-fab {
    position: fixed;
    left: 12px;
    bottom: 25px;
    width: 55px;
    height: 55px;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1199;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: none; /* Hidden by default on desktop */
}

.android-fab::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(95, 59, 255, 0.2);
    animation: android-fab-pulse 2s ease-in-out infinite;
    z-index: -1;
}

.android-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.1);
}

.android-fab:active {
    transform: scale(0.95);
}

.android-fab img {
    width: 37px;
    height: 37px;
    object-fit: contain;
}

@keyframes android-fab-pulse {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.2;
    }
    100% {
        transform: scale(1);
        opacity: 0.4;
    }
}

.android-fab:focus-visible {
    outline: 3px solid rgba(61, 220, 132, 0.5);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .android-fab {
        display: flex;
    }
}

/* ============================================
   COOKIE CONSENT BANNER
   
   Purpose:
   - GDPR-compliant cookie consent banner
   - Fixed position at bottom of screen
   - Accept, decline, and settings options
   
   Used on:
   - All pages (shown until user accepts/declines)
   
   Notes:
   - Fixed position with z-index 1000
   - Gradient background with blur backdrop
   - Purple top border (#5f3bff)
   - Three button variants: primary (accept), secondary (decline), outline (settings)
   
   What may break:
   - Banner won't show if z-index conflicts with other elements
   - Buttons won't work if JavaScript is disabled
   ============================================ */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    padding: 1.5rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    backdrop-filter: blur(10px);
    border-top: 2px solid #5f3bff;
}

.cookie-consent__content {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.cookie-consent__icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.cookie-consent__text h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.cookie-consent__text p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #FFFFFF;
    opacity: 0.9;
}

.cookie-consent__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cookie-consent__actions .btn {
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cookie-consent__actions .btn--primary {
    background: #5f3bff;
    color: white;
}

.cookie-consent__actions .btn--primary:hover {
    background: #4a2fcc;
    transform: translateY(-1px);
}

.cookie-consent__actions .btn--secondary {
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.cookie-consent__actions .btn--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.cookie-consent__actions .btn--outline {
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cookie-consent__actions .btn--outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   COOKIE SETTINGS MODAL
   
   Purpose:
   - Detailed cookie consent settings modal
   - Toggle switches for different cookie categories
   - Category descriptions and consent controls
   
   Used on:
   - All pages (triggered by "Settings" button in consent banner)
   
   Notes:
   - Full-screen overlay with centered modal
   - z-index 2000 (above consent banner)
   - Toggle switches with purple accent (#5f3bff)
   - Disabled toggles show green (#28a745) for required cookies
   - Scrollable content area for long descriptions
   
   What may break:
   - Modal won't open if JavaScript is disabled
   - Toggles won't work if input structure changes
   ============================================ */
.cookie-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.cookie-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.cookie-modal__content {
    position: relative;
    background: white;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.cookie-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px 12px 0 0;
}

.cookie-modal__header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
}

.cookie-modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.cookie-modal__close:hover {
    background: #f8f9fa;
    color: #495057;
}

.cookie-modal__body {
    padding: 1.5rem;
}

.cookie-category {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: #fafbfc;
}

.cookie-category:last-child {
    margin-bottom: 0;
}

.cookie-category__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.cookie-category__info h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
}

.cookie-category__info p {
    margin: 0;
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.4;
}

/* Toggle Switch Styles */
.toggle {
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 1.5rem;
}

.toggle__slider:before {
    position: absolute;
    content: "";
    height: 1.1rem;
    width: 1.1rem;
    left: 0.2rem;
    bottom: 0.2rem;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle input:checked + .toggle__slider {
    background-color: #5f3bff;
}

.toggle input:disabled + .toggle__slider {
    background-color: #28a745;
    cursor: not-allowed;
}

.toggle input:checked + .toggle__slider:before {
    transform: translateX(1.5rem);
}

.cookie-modal__footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1.5rem;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
}

.cookie-modal__footer .btn {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cookie-modal__footer .btn--primary {
    background: #5f3bff;
    color: white;
}

.cookie-modal__footer .btn--primary:hover {
    background: #4a2fcc;
    transform: translateY(-1px);
}

.cookie-modal__footer .btn--outline {
    background: transparent;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.cookie-modal__footer .btn--outline:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
}

/* ============================================
   COOKIE CONSENT RESPONSIVE STYLES
   
   Purpose:
   - Mobile responsive adjustments for cookie consent banner and modal
   - Stack layouts on smaller screens
   - Full-width buttons on mobile
   
   Used on:
   - All pages with cookie consent
   
   Notes:
   - Breakpoint: 768px
   - Stacks content vertically on mobile
   - Full-width buttons for easier tapping
   - Adjusted modal margins for mobile
   
   What may break:
   - Mobile layout breaks if flex properties change
   ============================================ */
@media (max-width: 768px) {
    .cookie-consent {
        padding: 1rem;
    }
    
    .cookie-consent__content {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    
    .cookie-consent__actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .cookie-consent__actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .cookie-modal__content {
        margin: 1rem;
        max-height: 95vh;
    }
    
    .cookie-category__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .cookie-modal__footer {
        flex-direction: column;
    }
    
    .cookie-modal__footer .btn {
        width: 100%;
    }
}

/* ============================================
   BADGE COMPONENT
   
   Purpose:
   - Small pill-shaped badges for labels and tags
   - Pro badge variant for premium features
   
   Used on:
   - Navigation links, feature cards, throughout site
   
   Notes:
   - Pill-shaped with 999px border-radius
   - Pro badge: dark background with gold text
   - Small font size (0.7rem)
   
   What may break:
   - Badge positioning breaks if flex properties change
   ============================================ */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.25rem;
}

.badge--pro {
    background: #17151f;
    color: #ffb43a;
    min-width: 1.3rem;
    min-height: 1.3rem;
}

/* ============================================
   ABOUT & BLOG CONTENT STYLES
   
   Purpose:
   - Content styling for About page and Blog posts
   - Typography, spacing, and link styling
   - Purple left border for emphasis
   
   Used on:
   - About page
   - Blog post pages
   
   Notes:
   - Gradient background with purple left border
   - Responsive font sizes for blog content
   - Links styled with purple color and hover underline
   - Breakpoints: 992px, 768px, 480px
   
   What may break:
   - Content layout breaks if container padding changes
   - Typography breaks if line-height changes
   ============================================ */
.about-content {
    background: linear-gradient(135deg, #fafafa 0%, #fffff7 100%);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1200px;
    border-left: 4px solid #ff9737;
    box-shadow: 0 4px 6px rgba(218, 166, 70, 0.1);
}

.about-content .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 992px) {
    .about-content .container {
        padding-left: 1.5rem;
        padding-right: 4.5rem;
    }
}

.about-content p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
}

/* Blog post content - same as about content */
.blog-post-content {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
}

.blog-post-content p {
    margin-bottom: 22px;
    line-height: 1.6;
    font-size: 1.1rem;
    color: #333;
}

/* Links - same styling for about and blog content */
.about-content a,
.blog-post-content a {
    color: #5f3bff;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.about-content a:hover,
.blog-post-content a:hover {
    color: #4a2fcc;
    text-decoration: underline;
}

/* Responsive for blog content */
@media (max-width: 768px) {
    .blog-post-content p {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 18px;
    }
}

@media (max-width: 480px) {
    .blog-post-content p {
        font-size: 0.95rem;
        line-height: 1.45;
        margin-bottom: 16px;
    }
}

.about-content p:empty {
    display: none;
}

/* ============================================
   ALERT COMPONENT (Contact Form)
   
   Purpose:
   - Success/error message alerts for contact form
   - Standard alert styling with color variants
   
   Used on:
   - Contact page (form submission feedback)
   
   Notes:
   - Standard Bootstrap-style alert component
   - Border radius 0.375rem
   - 1rem padding
   - Color variants likely defined elsewhere
   
   What may break:
   - Alert visibility breaks if z-index conflicts
   ============================================ */
.alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert p {
    margin: 0;
}

.badge--pro::before {
    content: '\1F451'; /* crown symbol */
}

.pill--pro {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

body.has-sticky-ad .footer nav {
    margin-top: 1.5rem;
}

/* ============================================
   LEGACY ROOT VARIABLES (Old Design System)
   
   Purpose:
   - Older CSS custom properties from previous design
   - Different naming convention than premium variables
   - Kept for backward compatibility
   
   Notes:
   - Uses --clr- prefix instead of --premium- prefix
   - Some variables commented out (--clr-hero-start, --clr-bg)
   - Purple theme (#8928ff, #4010d7)
   - May conflict with premium design system variables
   
   What may break:
   - Legacy pages break if these variables are removed
   - Variable conflicts if both systems used on same page
   ============================================ */
:root {
    /* --clr-hero-start: #4c13ff; */
    --clr-hero-end: #8928ff;
    --clr-deep-purple: #4010d7;
    /* --clr-bg: #f5f6fb; */
    --clr-surface: #ffffff;
    --clr-muted: #7a7c95;
    --clr-text: #141632;
    --clr-border: #e6e7f2;
    --clr-pill: rgba(255, 255, 255, 0.22);
    --clr-orange: linear-gradient(135deg, #ffc951, #ff912e);
    --shadow-card: 0 18px 40px rgba(24, 16, 55, 0.12);
    --shadow-soft: 0 12px 30px rgba(24, 16, 55, 0.08);
    font-size: 16px;
}

/* ============================================
   LEGACY BASE STYLES (Old Design System)
   
   Purpose:
   - Global reset and base styles from previous design
   - Page-specific body classes (page-index, page-blog, page-static)
   - Utility classes (sr-only, container)
   
   Notes:
   - Uses Poppins font instead of Inter
   - Page-specific flex layouts for blog and static pages
   - Container: 1200px max-width
   
   What may break:
   - Legacy pages break if these styles are removed
   - Font inconsistency if Poppins not loaded
   ============================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--clr-bg);
    color: var(--clr-text);
}

body.page-index {
    overflow-x: hidden;
}

body.page-blog {
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.page-blog main {
    flex: 1 0 auto;
}

body.page-static {
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.page-static main {
    flex: 1 0 auto;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.container {
    width: min(1200px, 94vw);
    margin: 0 auto;
}

body.page-index .container {
    width: 100%;
    max-width: 1200px;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ============================================
   LEGACY HERO SECTION (Old Design System)
   
   Purpose:
   - Hero section from previous design iteration
   - Navigation bar with menu toggle
   - Gradient background with star pattern
   - Different class names than premium hero
   
   Used on:
   - Legacy pages (may still be in use)
   
   Notes:
   - Uses --clr- variables instead of --premium- variables
   - Hero navigation with glassmorphism effect
   - Mobile menu toggle with hamburger animation
   - Star pattern background overlay
   - Flat variant (--flat) for simpler pages
   
   What may break:
   - Legacy hero breaks if class names change
   - Menu won't work if JavaScript classes don't match
   ============================================ */
.hero {
    position: relative;
    padding: 2.5rem 0 6.5rem;
    background: linear-gradient(135deg, var(--clr-hero-start), var(--clr-hero-end));
    color: var(--clr-surface);
    overflow: hidden;
}

.hero--flat {
    padding: 2.5rem 0 2.5rem;
    background: linear-gradient(135deg, var(--clr-hero-start), var(--clr-hero-end));
    color: var(--clr-surface);
}

.hero--flat .hero__content,
.hero--flat .hero-mailbox,
.hero--flat .hero__stats,
.hero--flat .hero__ads--sides,
.hero--flat .hero-mailbox__note {
    display: none;
}

.page-hero-ad {
    margin-top: 14px;
    padding: 0 0 1.25rem;
}

.page-hero-ad .container {
    display: flex;
    justify-content: center;
}

.hero__stars {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#ffffff 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.25;
}

.hero__nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
    width: min(1100px, 92vw);
    margin-left: auto;
    margin-right: auto;
    padding: 0.9rem 1.1rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    margin-bottom: 2rem;
}

.hero__menu {
    display: inline-flex;
    gap: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-left: auto;
}

.hero__menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-left: auto;
    border-radius: 999px;
    border: 1px solid rgba(20, 8, 58, 0.35);
    background: rgba(255, 255, 255, 0.92);
    color: #1a0f4a;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(10, 0, 35, 0.28);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.hero__menu-toggle:hover,
.hero__menu-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(20, 8, 58, 0.55);
    box-shadow: 0 18px 32px rgba(12, 0, 45, 0.32);
    color: #120934;
}

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

.hero__menu-toggle:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
}

.hero__menu-toggle__box {
    position: relative;
    width: 20px;
    height: 16px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}

.hero__menu-toggle__line {
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform-origin: center;
}

.hero__menu-toggle.is-active .hero__menu-toggle__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hero__menu-toggle.is-active .hero__menu-toggle__line:nth-child(2) {
    opacity: 0;
}

.hero__menu-toggle.is-active .hero__menu-toggle__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 769px) {
    .hero__menu-toggle {
        display: none;
    }
}

.hero__actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}
.hero__menu a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}

.hero__menu a:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

.hero__menu a[aria-current="page"] {
    opacity: 1;
    color: #120a2b;
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.95);
}

/* ============================================
   BLOG HEADER (Legacy Design System)
   
   Purpose:
   - Header for blog pages
   - Brand/logo display
   - Navigation and action buttons
   
   Used on:
   - Blog pages
   
   Notes:
   - Dark background (#08021c)
   - Brandmark with icon and text
   - Responsive flex layout
   
   What may break:
   - Blog header breaks if flex structure changes
   ============================================ */

.blog-header {
    background: #08021c;
    color: var(--clr-surface);
    padding: 1.25rem 0 0;
    box-shadow: 0 12px 20px rgba(12, 6, 30, 0.25);
}

.blog-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

/* ============================================
   BUTTON COMPONENTS (Legacy Design System)
   
   Purpose:
   - Reusable button styles
   - Pill-shaped buttons with gradient backgrounds
   - Premium CTA variants
   
   Used on:
   - Throughout the site (legacy pages)
   
   Notes:
   - .btn--pill: Orange gradient with shadow
   - .btn--premium: Premium variant with icon
   - .btn--premium-cta: Full-width CTA button
   - Hover: translateY(-2px) with shadow
   
   What may break:
   - Buttons won't work if JavaScript is disabled
   - Hover effects break if transition properties change
   ============================================ */

.brandmark {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.brandmark__text {
    font-weight: 700;
}

.brandmark__icon {
    font-size: 1.95rem;
}

 .brandmark__logo {
     width: 34px;
     height: 34px;
     object-fit: contain;
     display: inline-block;
 }

.btn {
    border: none;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn--pill {
    padding: 0.75rem 1.8rem;
    border-radius: 15px;
    font-weight: 600;
    font-size: 0.95rem;
    background: var(--clr-orange);
    color: #2f1a00;
    box-shadow: 0 12px 25px rgba(255, 145, 46, 0.4);
    border: none;
}

.btn--pill:hover {
    transform: translateY(-2px);
}

.btn--premium {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn--premium-cta {
    width: 100%;
    justify-content: center;
    font-size: 0.95rem;
    padding: 0.9rem 1.9rem;
    background: linear-gradient(120deg, #ffd25f, #ff9f1c);
    box-shadow: 0 12px 30px rgba(255, 159, 28, 0.45);
    color: #2b1800;
}

.btn--outline {
    background: transparent;
    color: var(--clr-surface);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: none;
}

.btn--outline:hover {
    transform: translateY(-2px);
    border-color: var(--clr-surface);
}

/* ============================================
   PREMIUM MODAL (Pricing/Upgrade Modal)
   
   Purpose:
   - Modal for premium upgrade/pricing display
   - Billing cycle selection (monthly/yearly)
   - Feature list with checkmarks
   - Input field for email/registration
   
   Used on:
   - Homepage (triggered by CTA buttons)
   
   Notes:
   - Fixed position with z-index 1000
   - Dark background with blur overlay
   - Billing chips with active state (green)
   - Checkmark bullet points for features
   - Responsive width: 420px max, 90vw on mobile
   
   What may break:
   - Modal won't open if JavaScript is disabled
   - Billing selection won't work if JS classes don't match
   ============================================ */

body.modal-open {
    overflow: hidden;
}


.premium-modal[hidden] {
    display: none !important;
}

.premium-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.premium-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(6, 2, 20, 0.75);
    backdrop-filter: blur(6px);
}

.premium-modal__dialog {
    position: relative;
    width: min(420px, 90vw);
    background: #08021c;
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 30px 60px rgba(7, 3, 20, 0.55);
    color: #fff;
    z-index: 1;
}

.premium-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.premium-modal__eyebrow {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.4rem;
}

.premium-modal__header h2 {
    font-size: 2.75rem;
    margin: 0;
    line-height: 1;
}

.premium-modal__header h2 span {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    margin-left: 0.3rem;
}

.premium-modal__close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.5rem;
    cursor: pointer;
}

.premium-modal__billing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.billing-chip {
    padding: 0.75rem 1rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: var(--clr-surface);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.billing-chip small {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: #ffd25f;
}

.billing-chip--active {
    background: #1effac;
    color: #051622;
    border-color: #1effac;
}

.billing-chip--ghost {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.2);
}

.billing-chip:not(.billing-chip--active):hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.premium-modal__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.premium-modal__features li {
    position: relative;
    padding-left: 1.7rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

.premium-modal__features li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    color: #1affb4;
    font-weight: 700;
}

.premium-modal__input {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.premium-modal__input input {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: var(--clr-surface);
    border-radius: 999px;
    padding: 0.75rem 1.1rem;
    font-size: 0.95rem;
}

.premium-modal__input input::placeholder {
color: rgba(255, 255, 255, 0.5);
}

.premium-modal__footnote {
font-size: 0.85rem;
text-align: center;
color: rgba(255, 255, 255, 0.7);
margin: 1.25rem 0 0.35rem;
}

.premium-modal__auth {
display: flex;
flex-direction: column;
gap: 0.6rem;
}

.premium-modal__legal {
text-align: center;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.5);
}

.premium-modal__legal a {
color: rgba(255, 255, 255, 0.85);
}

/* ============================================
   POPUP AD MODAL
   
   Purpose:
   - Full-screen popup for advertisements
   - White dialog with close button
   - Placeholder for ad content
   - Sample ad layout for testing
   
   Used on:
   - Homepage (triggered after delay or action)
   
   Notes:
   - Fixed position with z-index 1100 (above premium modal)
   - White dialog with dark overlay
   - Responsive: 575px max width, 96vw on mobile
   - Mobile responsive styles at 480px breakpoint
   - Close button with hover effects
   
   What may break:
   - Popup won't show if JavaScript is disabled
   - Close button won't work if JS classes don't match
   ============================================ */
.popup-ad[hidden] {
display: none !important;
}

.popup-ad {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}

.popup-ad__overlay {
position: absolute;
inset: 0;
background: rgba(9, 6, 21, 0.65);
backdrop-filter: blur(4px);
}

.popup-ad__dialog {
position: relative;
width: min(575px, 96vw);
min-height: 352px;
background: #fff;
border-radius: 24px;
box-shadow: 0 35px 85px rgba(9, 6, 21, 0.4);
padding: clamp(1.5rem, 3vw, 2.25rem);
z-index: 1;
}

.popup-ad__close {
position: absolute;
top: 0.8rem;
right: 0.8rem;
background: rgba(15, 23, 42, 0.12);
border: 1px solid rgba(15, 23, 42, 0.18);
border-radius: 999px;
width: 42px;
height: 42px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
font-weight: 700;
line-height: 1;
color: #0f172a;
box-shadow: 0 12px 24px rgba(9, 6, 21, 0.18);
}

.popup-ad__close:hover,
.popup-ad__close:focus-visible {
background: rgba(15, 23, 42, 0.18);
border-color: rgba(15, 23, 42, 0.28);
box-shadow: 0 14px 28px rgba(9, 6, 21, 0.22);
}

@media (max-width: 480px) {
    .popup-ad {
        padding: 1rem;
    }

    .popup-ad__dialog {
        width: min(575px, 98vw);
        border-radius: 20px;
        padding: 1.25rem;
    }

    .popup-ad__close {
        top: 0.65rem;
        right: 0.65rem;
        width: 44px;
        height: 44px;
    }
}

.popup-ad__body {
min-height: 260px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #0f172a;
}

.popup-ad__placeholder {
border: 1px dashed #c7c9d8;
border-radius: 16px;
padding: 1.5rem;
font-size: 0.95rem;
color: #525471;
width: 100%;
}

.sample-ad {
display: grid;
grid-template-columns: 150px 1fr;
gap: 1.2rem;
align-items: center;
text-align: left;
}

.sample-ad img {
width: 150px;
height: 150px;
border-radius: 18px;
object-fit: cover;
}

.sample-ad__eyebrow {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.24em;
color: #ff6a3a;
margin-bottom: 0.3rem;
}

.sample-ad__cta {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: #5f3bff;
font-weight: 600;
margin-top: 0.75rem;
}

/* ============================================
   AUTHENTICATION SECTION
   
   Purpose:
   - Login/registration page layout
   - Two-column grid for auth content
   
   Used on:
   - Authentication pages (login/register)
   
   Notes:
   - Large padding (8rem top, 9rem bottom)
   - Grid layout for content
   
   What may break:
   - Auth layout breaks if grid structure changes
   ============================================ */

.auth {
padding: 8rem 0 9rem;
}

.auth__grid {
    display: grid;
    gap: 2.5rem;
}

.auth__intro h1 {
    margin-top: 0.65rem;
    font-size: 2.2rem;
}

.auth__intro {
    background: #fff;
    border-radius: 24px;
    padding: 2rem;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--clr-border);
}

.auth__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.auth__perks {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: grid;
    gap: 0.5rem;
    color: var(--clr-muted);
}

.auth__perks li {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.auth__panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

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

.auth__stats {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
}

.auth__stats strong {
    font-size: 1.8rem;
    display: block;
}

.auth__stats span {
    color: var(--clr-muted);
    font-size: 0.9rem;
}

.auth-card {
    background: #fff;
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--clr-border);
}

.auth-card--ghost {
    background: #faf8ff;
}

.auth-card--glass {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
}

.auth-card header {
    margin-bottom: 0.85rem;
}

.auth-card header small {
    color: var(--clr-muted);
}

.auth-form {
    display: grid;
    gap: 0.95rem;
    margin-top: 1rem;
}

.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-weight: 600;
    color: #392857;
}

.auth-form input {
    border-radius: 12px;
    border: 1px solid var(--clr-border);
    padding: 0.65rem 0.85rem;
    font-size: 1rem;
}

.auth-form select {
    border-radius: 12px;
    border: 1px solid var(--clr-border);
    padding: 0.65rem 0.85rem;
    font-size: 1rem;
    background: #fff;
}

.auth__link {
    text-align: right;
    font-size: 0.9rem;
    display: inline-block;
    margin-top: 0.35rem;
    color: #6a54d7;
}

/* ============================================
   DASHBOARD SECTION (User Dashboard)
   
   Purpose:
   - User dashboard layout with sidebar navigation
   - Stats cards and content area
   - Navigation links with active state
   
   Used on:
   - User dashboard page
   
   Notes:
   - Two-column grid: 260px sidebar + content
   - Purple accent for active navigation
   - Glass card variants for auth cards
   - Responsive: stacks at 960px breakpoint
   
   What may break:
   - Dashboard layout breaks if grid structure changes
   - Navigation won't work if JS classes don't match
   ============================================ */

.dashboard {
    padding: 7rem 0 5rem;
    background: #faf9ff;
}

.dashboard__layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 2rem;
}

.dashboard__sidebar {
    background: #fff;
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--clr-border);
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

.dashboard__upgrade-note {
    font-size: 0.8rem;
    color: var(--clr-muted);
    margin-top: 0.6rem;
}

.dashboard__logout {
    background: #fff;
    color: #4a2fd6;
    border: 1px solid rgba(74, 47, 214, 0.2);
    text-align: center;
    margin-top: 0.5rem;
}

.dashboard__welcome {
    font-weight: 600;
}

.dashboard__upgrade {
    margin-top: auto;
    display: grid;
    gap: 0.6rem;
}

.dashboard-nav {
    display: grid;
    gap: 0.6rem;
}

.dashboard-nav a {
    padding: 0.6rem 0.9rem;
    border-radius: 14px;
    font-weight: 500;
    color: #4a3b75;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-nav a.is-active {
    background: rgba(108, 86, 215, 0.12);
    border-color: rgba(108, 86, 215, 0.35);
    color: #3a24c7;
}

.dashboard__content {
    display: grid;
    gap: 1.5rem;
}

.dashboard__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.stat-tile {
    background: #fff;
    border-radius: 20px;
    padding: 1.25rem;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--clr-border);
    display: grid;
    gap: 0.35rem;
}

.stat-tile__icon {
    font-size: 1.4rem;
    opacity: 0.7;
}

.dashboard__panels {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1.25rem;
}

.panel {
    background: #fff;
    border-radius: 22px;
    padding: 1.75rem;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--clr-border);
}

.panel header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
}

.fake-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
    height: 180px;
}

.fake-chart span {
    flex: 1;
    display: block;
    background: linear-gradient(180deg, #7f6cff, #d5ccff);
    border-radius: 999px 999px 4px 4px;
}

.chart__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.inbox-preview {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.inbox-preview__title {
    font-size: 1rem;
    margin: 0;
}

.inbox-preview__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.inbox-preview__list li {
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--clr-border);
    background: #faf9ff;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.inbox-preview__list li strong {
    font-size: 0.95rem;
}

.inbox-preview__list li span {
    font-size: 0.8rem;
    color: var(--clr-muted);
}

.inbox-preview__back {
    margin-top: 0.5rem;
}

.panel--history ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.panel--history li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.panel--history strong {
    display: block;
    font-size: 0.95rem;
}

.panel--history span {
    font-size: 0.85rem;
    color: var(--clr-muted);
}

.dashboard .pill {
    border-radius: 15px;
    border: 1px solid var(--clr-border);
    padding: 0.35rem 0.95rem;
    font-size: 0.85rem;
    background: rgba(106, 84, 215, 0.08);
    color: #4a2fd6;
    font-weight: 600;
}

.history__address-domain.is-blurred {
    filter: blur(3px);
    opacity: 0.4;
}

.history__next {
    margin-top: 1rem;
}

/* ============================================
   HERO CONTENT (Legacy Design System)
   
   Purpose:
   - Hero section content (title, subtitle, eyebrow)
   - Centered text with responsive font sizing
   - Page-specific variations
   
   Used on:
   - Homepage and other pages with hero sections
   
   Notes:
   - Responsive font sizing with clamp()
   - Page-specific overrides for index page
   - Uppercase eyebrow with letter spacing
   
   What may break:
   - Hero typography breaks if clamp values change
   ============================================ */

.hero__content {
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto 2.6rem;
}

.hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.35em;
    font-size: 0.8rem;
    margin-bottom: 0.8rem;
    opacity: 0.85;
}

.hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 3.6vw, 2.5rem);
    line-height: 1.15;
}

 /* Page-specific override: smaller hero title on index page */
 body.page-index .hero h1 {
     font-size: clamp(1.47rem, 3.528vw, 2.45rem);
 }

.hero__subtitle {
    margin: 0;
    font-size: 1.15rem;
    opacity: 0.92;
}

/* ============================================
   HERO MAILBOX (Legacy Design System)
   
   Purpose:
   - Email address display with copy button
   - Action buttons for mailbox operations
   - Glassmorphism effect with blur backdrop
   
   Used on:
   - Homepage (hero section)
   
   Notes:
   - Glassmorphism with rgba background
   - Copy button with orange gradient
   - Pill-shaped action buttons
   - Mobile responsive: 2x2 grid for actions at 768px
   - Page-specific font size overrides for index page
   
   What may break:
   - Mailbox display breaks if flex structure changes
   - Copy button won't work if JavaScript is disabled
   ============================================ */

.hero-mailbox {
    width: min(740px, 92vw);
    margin: 0 auto 2rem;
    padding: 1.8rem;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(18px);
    position: relative;
    z-index: 1;
}

.hero-mailbox__address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    padding: 1rem 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.35);
    gap: 1rem;
}

 /* Page-specific override: larger email address on index page */
 body.page-index .hero-mailbox__address span {
     font-size: 1.12em;
 }

 /* Page-specific override: smaller buttons on index page */
 body.page-index .hero-mailbox .btn-copy,
 body.page-index .hero-mailbox__actions .pill {
     font-size: 0.90em;
 }

.btn-copy {
    border: none;
    border-radius: 14px;
    padding: 0.65rem 1.45rem;
    background: var(--clr-orange);
    color: #2f1a00;
    font-weight: 600;
    box-shadow: 0 14px 30px rgba(255, 145, 46, 0.4);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    transform: translateY(0);
}

.btn-copy:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 35px rgba(255, 145, 46, 0.5);
    background: linear-gradient(135deg, #ffc951, #ff912e);
}

.btn-copy:active {
    transform: translateY(0);
    transition: all 0.15s ease;
}

.hero-mailbox__actions {
    margin: 1.2rem 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* ============================================
   PILL COMPONENT VARIANTS (Legacy Design System)
   
   Purpose:
   - Pill-shaped button variants for different use cases
   - Outline, blog CTA, success states
   - Hover and focus states
   
   Used on:
   - Throughout the site (legacy pages)
   
   Notes:
   - .pill: Standard pill with glass background
   - .pill--outline: Transparent background
   - .pill--blog-cta: Gradient background for blog CTAs
   - .pill--success: Green for success states
   - Hover: translateY(-2px) with shadow
   
   What may break:
   - Buttons won't work if JavaScript is disabled
   - Hover effects break if transition properties change
   ============================================ */

/* Mobile: 2x2 grid for action buttons */
@media (max-width: 768px) {
    .hero-mailbox__actions .pill {
        flex: 0 0 calc(50% - 0.3rem);
        min-width: calc(50% - 0.3rem);
        text-align: center;
        justify-content: center;
    }
}

.pill {
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: var(--clr-pill);
    color: var(--clr-surface);
    font-weight: 500;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    transform: translateY(0);
}

.pill--outline {
    background: transparent;
}

.pill--blog-cta {
    background: linear-gradient(135deg, var(--clr-hero-start), var(--clr-hero-end));
    border-color: rgba(64, 16, 215, 0.55);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(95, 59, 255, 0.35);
    padding: 0.45rem 1.5rem;
    font-size: 1.1rem;
    min-width: auto;
    max-width: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pill--blog-cta:hover {
    background: linear-gradient(135deg, #be123c 0%, #f43f5e 60%, #f97316 100%);
    border-color: rgba(190, 18, 60, 0.55);
    box-shadow: 0 18px 32px -12px rgba(244, 67, 54, 0.45);
    transform: translateY(-2px);
}

.pill--blog-cta:active {
    transform: translateY(0);
    transition: all 0.15s ease;
}

.pill--blog-cta:focus-visible {
    outline: 3px solid rgba(95, 59, 255, 0.35);
    outline-offset: 3px;
}

.pill--success {
    background: #22c55e;
    border-color: rgba(0, 0, 0, 0.15);
    color: #0b1f12;
}

.pill--success:focus-visible {
    outline: 2px solid rgba(34, 197, 94, 0.45);
    outline-offset: 2px;
}

.pill--success:disabled,
.pill--success[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}

.hero-mailbox__note {
    text-align: center;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   HERO STATS (Legacy Design System)
   
   Purpose:
   - Statistics display in hero section
   - Grid layout with stat cards
   - Purple background cards
   
   Used on:
   - Homepage (hero section)
   
   Notes:
   - Auto-fit grid with 160px min-width
   - Purple background (#4010d7 with 95% opacity)
   - Value and label display
   
   What may break:
   - Stats layout breaks if grid structure changes
   ============================================ */

.hero__stats {
    width: min(680px, 92vw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.2rem;
    list-style: none;
    padding: 0;
    position: relative;
    z-index: 1;
}

.hero__stats li {
    background: rgba(64, 16, 215, 0.95);
    border-radius: 18px;
    padding: 1.25rem;
    text-align: center;
    box-shadow: var(--shadow-soft);
}

.stat__value {
    display: block;
    font-weight: 700;
    font-size: 1.55rem;
}

.stat__label {
    display: block;
    font-size: 0.95rem;
    opacity: 0.85;
}

.hero__ads {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 1.5rem auto 0;
}

.hero__ads--sides {
    position: absolute;
    top: auto;
    bottom: 260px;
    left: 180px;
    right: 180px;
    display: flex;
    justify-content: space-between;
    padding: 0;
}

.hero__ads--sides {
    justify-content: space-between;
    padding: 0;
}

.hero__ads--sides .ad-slot {
    pointer-events: auto;
    border: none;
    background: transparent;
    color: transparent;
}

.ad-slot {
    border-radius: 18px;
    border: none !important;
    outline: none !important;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
}

.ad-slot--vertical {
    width: 160px;
    height: 600px;
}

.ad-slot--banner {
    width: 100%;
    max-width: 970px;
    height: 120px;
    border: none;
    background: transparent;
    color: transparent;
    overflow: hidden;
}

.hero__ads--banner .ad-slot {
    border: none;
    background: transparent;
    color: transparent;
}

/* ============================================
   STICKY AD COMPONENT (Legacy Design System)
   
   Purpose:
   - Fixed bottom ad banner with toggle
   - Collapsible content area
   - Toggle button with rotation animation
   
   Used on:
   - Homepage and content pages
   
   Notes:
   - Fixed position at bottom with z-index 100
   - 728px width, 90vw max on mobile
   - Toggle button with icon rotation
   - Content slides up/down with transition
   - data-hidden attribute controls visibility
   
   What may break:
   - Sticky ad won't toggle if JavaScript is disabled
   - Toggle animation breaks if transition properties change
   ============================================ */

.sticky-ad {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 728px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    z-index: 100;
    pointer-events: none;
    overflow: visible;
}

.sticky-ad__toggle {
    pointer-events: auto;
    border: none;
    background: var(--clr-surface);
    color: var(--clr-deep-purple);
    width: 46px;
    height: 28px;
    border-radius: 999px 999px 0 0;
    box-shadow: 0 -4px 18px rgba(20, 10, 60, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transform: translateY(16px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sticky-ad__toggle .toggle-icon {
    display: inline-block;
    transition: transform 0.3s ease;
}

.sticky-ad__content {
    pointer-events: auto;
    width: 100%;
    background: var(--clr-surface);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -20px 40px rgba(20, 10, 60, 0.25);
    padding: 0;
    transition: transform 0.35s ease, opacity 0.35s ease, max-height 0.35s ease, padding 0.35s ease;
    max-height: 220px;
    overflow: hidden;
    margin: 0;
}

.ad-slot--sticky {
    width: 100%;
    height: 120px;
    border: none;
    color: transparent;
    background: transparent;
    margin-right: 5px;
}

/* When sticky ad has data-hidden="true" attribute, hide content with slide animation */
.sticky-ad[data-hidden="true"] .sticky-ad__content {
    transform: translateY(36px);
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    padding: 0;
}

/* When sticky ad is hidden, move toggle button to bottom position */
.sticky-ad[data-hidden="true"] .sticky-ad__toggle {
    transform: translateY(0);
    box-shadow: 0 -4px 12px rgba(20, 10, 60, 0.2);
}

/* When sticky ad is hidden, rotate toggle icon 180 degrees (flip direction) */
.sticky-ad[data-hidden="true"] .sticky-ad__toggle .toggle-icon {
    transform: rotate(180deg);
}

@media (max-width: 1200px) {
    .hero__ads--sides {
        display: none;
    }

    .hero {
        padding: 3rem 0 5rem;
    }

    .hero__content {
        padding: 0 1rem;
    }

    .hero__eyebrow {
        margin-bottom: 1.5rem;
    }

    .hero h1 {
        font-size: clamp(1.65rem, 3.96vw, 2.75rem);
    }

    .hero__subtitle {
        font-size: 1.38rem;
        line-height: 1.4;
    }

    .hero-mailbox {
        width: min(540px, 94vw);
    }

    .hero__ads--banner .ad-slot {
        height: 100px;
        width: min(728px, 92vw);
    }

    .mailbox__canvas {
        width: min(1100px, 95vw);
        padding: 2.2rem 2rem;
    }
}

/* ============================================
   MAILBOX SECTION (Legacy Design System)
   
   Purpose:
   - Email inbox display with list and viewer
   - Two-column layout: email list + content
   - Glow effect background
   - Refresh button and header
   
   Used on:
   - Homepage (mailbox section)
   
   Notes:
   - Two-column grid: 40% list + 60% content
   - Glassmorphism effect with blur
   - Purple gradient header
   - Responsive: adjusts at 1200px breakpoint
   - Glow effect with radial gradients
   
   What may break:
   - Mailbox layout breaks if grid structure changes
   - Refresh button won't work if JavaScript is disabled
   ============================================ */

/* Sections */
main {
    margin-top: 0;
}

section {
    padding: 4rem 0;
}

.mailbox {
    position: relative;
    padding-bottom: 0;
}

.mailbox__glow {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(1200px, 95vw);
    height: 320px;
    background: radial-gradient(circle at 30% 20%, rgba(140, 110, 255, 0.25), transparent 55%),
        radial-gradient(circle at 70% 10%, rgba(255, 255, 255, 0.9), transparent 60%);
    filter: blur(60px);
    opacity: 0.6;
}

.mailbox__canvas {
    position: relative;
    z-index: 1;
    background: var(--clr-surface);
    border-radius: 34px;
    width: min(1240px, 96vw);
    margin: 0 auto;
    padding: 2.5rem;
    box-shadow: 0 35px 60px rgba(30, 25, 60, 0.15);
}

.mailbox__ad {
    padding: 1rem 0 4rem;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 96vw;
    margin: 0 auto;
    overflow: hidden;
}

.mailbox__ad .ad-slot {
    border: none;
    background: transparent;
    color: transparent;
    width: 100%;
    height: 120px;
    box-shadow: none;
}

.mailbox h2 {
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
}

.section-subtitle {
    color: var(--clr-muted);
    margin-bottom: 2rem;
}

.mailbox__wrap {
    display: grid;
    grid-template-columns: minmax(320px, 40%) 1fr;
    gap: 2.5rem;
    align-items: stretch;
}

.mailbox__list {
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(244,240,255,0.95));
    border: 1px solid rgba(133, 96, 255, 0.18);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(32, 9, 88, 0.08);
    height: 100%;
    backdrop-filter: blur(14px);
}

.mailbox__header {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr auto;
    padding: 1rem 1.4rem;
    background: linear-gradient(130deg, #7c49ff, #5c2dff);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.08em;
    align-items: center;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.mailbox__refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.6rem;
    margin-top: 5px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.mailbox__refresh-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.mailbox__refresh-btn:active {
    transform: translateY(0);
}

.mailbox__refresh-btn svg {
    transition: transform 0.3s ease;
}

.mailbox__refresh-btn:hover svg {
    transform: rotate(180deg);
}

.refresh-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.3rem;
    transition: all 0.3s ease;
}

.refresh-countdown.warning {
    background: rgba(255, 152, 0, 0.3);
    animation: pulse 1s ease-in-out infinite;
}

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

/* ============================================
   QR CODE MODAL (Legacy Design System)
   
   Purpose:
   - Modal for displaying QR code
   - Close button with hover effect
   - Centered modal with overlay
   
   Used on:
   - Homepage (triggered by QR code button)
   
   Notes:
   - Fixed position with z-index 1000
   - Dark overlay background
   - White content card with shadow
   - Purple close button with gradient hover
   
   What may break:
   - Modal won't open if JavaScript is disabled
   - Close button won't work if JS classes don't match
   ============================================ */
.qr-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.qr-modal__content {
    background: white;
    padding: 2.5rem;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    max-width: 90%;
    width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.qr-modal__content h3 {
    margin: 0;
    color: var(--clr-text);
    font-size: 1.25rem;
    font-weight: 600;
}

.qr-code {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.qr-code img {
    border-radius: 8px;
    display: block;
    max-width: 100%;
    height: auto;
}

.qr-modal__email {
    font-size: 0.95rem;
    color: var(--clr-text);
    word-break: break-all;
    padding: 0 0.5rem;
}

.qr-modal__close {
    background: #6C4CF1;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(108, 76, 241, 0.3);
}

.qr-modal__close:hover {
    background: #5a3bd0;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(108, 76, 241, 0.4);
}

.qr-modal__close:active {
    transform: translateY(0);
}

/* Light hover effects for pills */
.pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(140, 21, 255, 0.2);
}

.pill--success:hover {
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.32);
}

.pill:active {
    transform: translateY(0);
    transition: all 0.15s ease;
}

.mailbox__items {
    max-height: 420px;
    overflow-y: auto;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    scrollbar-width: thin;
    scrollbar-color: #bfa7ff transparent;
}

/* Custom scrollbar styling for WebKit browsers (Chrome, Safari, Edge) */
.mailbox__items::-webkit-scrollbar {
    width: 6px;
}

/* Custom scrollbar thumb (the draggable part) with purple color */
.mailbox__items::-webkit-scrollbar-thumb {
    background: rgba(127, 90, 255, 0.5);
    border-radius: 999px;
}

.mail-item {
    display: grid;
    grid-template-columns: 1.1fr 1.4fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    border: 2px solid rgba(70, 37, 255, 0.18);
    background: rgb(254, 255, 252);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

/* Apply hover/active styles when mail item is hovered OR has .is-active class */
.mail-item:hover,
.mail-item.is-active {
    border-color: rgba(95, 59, 255, 0.5);
    box-shadow: 0 12px 28px rgba(51, 23, 116, 0.12);
    transform: translateY(-2px);
}

/* Truncate text with ellipsis for sender, subject, and time columns */
.mail-item__sender,
.mail-item__subject,
.mail-item__time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-item__sender {
    font-weight: 600;
    color: #2f225c;
    min-width: 0; /* Allow text to shrink */
    font-size: 0.9rem; /* Slightly smaller font for longer text */
}

.mail-item__subject {
    font-weight: 500;
    color: #6b5ea6;
}

.mail-item__time {
    justify-self: flex-end;
    font-size: 0.82rem;
    color: #8f84b7;
}

/* ============================================
   MAILBOX VIEWER (Legacy Design System)
   
   Purpose:
   - Email content display area
   - Sender information, metadata, actions
   - Refresh orb with countdown timer
   - Gradient background with purple accents
   
   Used on:
   - Homepage (mailbox section - right column)
   
   Notes:
   - Refresh orb with circular progress indicator
   - Countdown warning state with orange background
   - Viewer actions with gradient buttons
   - Monospace font for email addresses (JetBrains Mono)
   - SVG stroke-dashoffset for progress animation
   
   What may break:
   - Viewer layout breaks if flex structure changes
   - Refresh animation breaks if SVG structure changes
   - Countdown won't work if JavaScript is disabled
   ============================================ */

.mailbox__viewer {
    border: 1px solid rgba(133, 96, 255, 0.15);
    border-radius: 30px;
    padding: 2rem 2.25rem;
    background: linear-gradient(180deg, #ffffff, #f7f5ff);
    box-shadow: 0 25px 70px rgba(38, 14, 102, 0.09);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}

.mailbox__viewer header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}
.mailbox__refresh-orb {
    position: absolute;
    bottom: 5px;
    right: 26px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: linear-gradient(160deg, #fff, #f3edff);
    box-shadow: 0 18px 35px rgba(45, 10, 94, 0.18);
    border: 1px solid rgba(109, 80, 255, 0.2);
    z-index: 1;
}

.mailbox__list {
    position: relative;
    padding-bottom: 2.2rem;
}

.refresh-orb__btn {
    border: none;
    background: linear-gradient(120deg, #6b3dff, #a054ff);
    color: #fff;
    font-weight: 600;
    font-size: 0.86rem;
    padding: 0.44rem 1.05rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(64, 21, 148, 0.28);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.refresh-orb__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px rgba(64, 21, 148, 0.32);
}

.refresh-orb__btn:active {
    transform: translateY(0);
    transition: all 0.15s ease;
}

.refresh-orb__btn svg {
    stroke: currentColor;
}

.refresh-orb__progress {
    position: relative;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fbf9ff;
    border: 1px solid rgba(119, 82, 255, 0.25);
    box-shadow: inset 0 4px 10px rgba(76, 31, 155, 0.15), 0 8px 14px rgba(37, 12, 78, 0.12);
}

.refresh-orb__progress svg {
    position: absolute;
    inset: 4px;
    transform: rotate(-90deg);
}

.refresh-orb__track {
    fill: none;
    stroke: rgba(180, 170, 231, 0.4);
    stroke-width: 3px;
}

.refresh-orb__ring {
    fill: none;
    stroke: #7a4dff;
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-dasharray: 151;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.2s linear;
}

.refresh-countdown {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    transform: translate(-63%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    color: #4a2a8a;
    border-radius: 50%;
    transition: box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.refresh-countdown.warning {
    background: rgba(255, 173, 51, 0.25);
    box-shadow: 0 0 12px rgba(255, 173, 51, 0.6);
    color: #a14a00;
}

.viewer__label {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--clr-muted);
}

.viewer__meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: var(--clr-muted);
    font-weight: 500;
}

.viewer__from-label {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.65rem;
    color: #a29ac5;
    display: block;
    margin-bottom: 0.2rem;
}

.viewer__from-name {
    font-size: 1rem;
    color: #30195c;
    margin-right: 0.4rem;
}

.viewer__from-email {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: #7a6bb4;
    display: inline-block;
}

.viewer__actions {
    display: flex;
    justify-content: flex-end;
}

.viewer-action {
    border-radius: 999px;
    border: none;
    padding: 0.65rem 1.8rem;
    font-weight: 600;
    background: linear-gradient(120deg, #8152ff, #a162ff);
    color: #fff;
    box-shadow: 0 12px 25px rgba(123, 66, 255, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

.viewer-action--primary {
    background: linear-gradient(120deg, #8152ff, #a162ff);
    color: #fff;
}

.viewer-action--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 30px rgba(123, 66, 255, 0.4);
}

.viewer-action--primary:active {
    transform: translateY(0);
}

.viewer__body {
    background: #f7f3ff;
    border-radius: 18px;
    min-height: 240px;
    padding: 1.35rem;
    overflow: auto;
    line-height: 1.6;
    color: #3b2d60;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.viewer__body img,
.viewer__body svg,
.viewer__body video,
.viewer__body iframe {
    max-width: 100% !important;
    height: auto !important;
}

.viewer__body table {
    display: block;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
}

.viewer__body td,
.viewer__body th {
    word-break: break-word;
}

.viewer__body pre,
.viewer__body code {
    white-space: pre-wrap;
    word-break: break-word;
}

.viewer__from-email {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Ensure buttons inside viewer maintain their styles */
.viewer__body button,
.mailbox__viewer button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

.viewer__body .viewer-action,
.mailbox__viewer .viewer-action {
    border-radius: 999px;
    border: none;
    padding: 0.65rem 1.8rem;
    font-weight: 600;
    background: linear-gradient(120deg, #8152ff, #a162ff);
    color: #fff;
    box-shadow: 0 12px 25px rgba(123, 66, 255, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

.viewer__body .viewer-action--primary,
.mailbox__viewer .viewer-action--primary {
    background: linear-gradient(120deg, #8152ff, #a162ff);
    color: #fff;
}

.viewer__body .viewer-action--primary:hover,
.mailbox__viewer .viewer-action--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 30px rgba(123, 66, 255, 0.4);
}

.viewer__body .viewer-action--primary:active,
.mailbox__viewer .viewer-action--primary:active {
    transform: translateY(0);
}

.viewer__attachments {
    margin-top: 0.75rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--clr-border);
}

.viewer__attachments-title {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-muted);
    margin-bottom: 0.6rem;
}

.attachment-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.attachment-chip {
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(86, 52, 255, 0.3);
    background: #f5f1ff;
    color: var(--clr-deep-purple);
    font-weight: 600;
}

.viewer__attachments.is-hidden {
    display: none;
}

/* ============================================
   EMPTY STATE & SKELETON LOADER (Legacy Design System)
   
   Purpose:
   - Empty state message when no emails
   - Skeleton loading animation for content
   - Shimmer effect for loading states
   
   Used on:
   - Homepage (mailbox section)
   
   Notes:
   - Skeleton animation with gradient shimmer
   - Different skeleton sizes (lg, md, sm)
   - 1.3s animation duration
   - Gradient background at 200% size for animation
   
   What may break:
   - Skeleton animation breaks if keyframes change
   ============================================ */

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--clr-muted);
}

.mailbox__skeleton {
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mail-skeleton {
    display: grid;
    grid-template-columns: 1fr 1.1fr auto;
    gap: 1rem;
}

.skeleton {
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ecebff, #f9f7ff, #ecebff);
    background-size: 200% 100%;
    animation: skeleton 1.3s ease-in-out infinite;
}

.skeleton--lg { width: 70%; }
.skeleton--md { width: 50%; }
.skeleton--sm { width: 40%; }

@keyframes skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   WHY SECTION (Legacy Design System)
   
   Purpose:
   - Feature grid explaining why to use the service
   - Auto-fit grid layout
   - Section heading with centered text
   
   Used on:
   - Homepage (why section)
   
   Notes:
   - Auto-fit grid with 240px min-width
   - Centered section heading
   - 600px max-width for heading
   
   What may break:
   - Grid layout breaks if min-width changes
   ============================================ */
.section-heading {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.feature-card {
    background: var(--clr-surface);
    border-radius: 20px;
    padding: 1.75rem;
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-soft);
}

.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(87, 55, 255, 0.15);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: var(--clr-deep-purple);
    margin-bottom: 1rem;
}

/* ============================================
   FAQ & BLOG SECTIONS (Legacy Design System)
   
   Purpose:
   - FAQ accordion with details/summary
   - Blog post layout with hero and breadcrumb
   - Blog grid for listing posts
   - Ribbon badges for blog posts
   
   Used on:
   - Homepage (FAQ section)
   - Blog pages (blog listing and single post)
   
   Notes:
   - FAQ uses native details/summary element
   - Blog hero with gradient overlay
   - Breadcrumb with dark background
   - Last updated badge
   - Auto-fit grid for blog listing
   
   What may break:
   - FAQ accordion won't work if details/summary structure changes
   - Blog layout breaks if grid structure changes
   ============================================ */
.faq {
    background: var(--clr-surface);
}

.faq__items details {
    border: 1px solid var(--clr-border);
    border-radius: 14px;
    padding: 1.1rem 1.4rem;
    margin-bottom: 1rem;
    background: #fafaff;
    font-weight: 500;
}

.faq summary {
    cursor: pointer;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::-webkit-details-marker.ribbon {
    background: var(--clr-hero-start);
    color: var(--clr-surface);
    padding: 0.75rem 0;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.82rem;
}

.ribbon--blog {
    background: #140f33;
}

.blog {
    background: var(--clr-surface);
}

.blog--page {
    margin-top: 0rem;
    padding-top: 4rem;
}

.blog--page .section-heading {
    max-width: min(100%, 960px);
    margin-left: auto;
    margin-right: auto;
}

.blog-post-hero {
    margin-top: 1.5rem;
    margin-bottom: 1.25rem;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    height: clamp(220px, 40vw, 420px);
    background: rgba(95, 59, 255, 0.14);
    background-size: cover;
    background-position: center;
    box-shadow: 0 22px 46px rgba(9, 6, 21, 0.12);
}

.blog-post-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(12, 6, 30, 0.35), rgba(12, 6, 30, 0.12));
    pointer-events: none;
    z-index: 1;
}

/* Blog post first image with height control (max 550px) */
.blog-post-first-image {
    margin-top: 1.5rem;
    margin-bottom: 1.25rem;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 22px 46px rgba(9, 6, 21, 0.12);
    max-height: 550px;
}

/* Blog post first image styling with object-fit for cover */
.blog-post-first-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Blog post breadcrumb (navigation) positioned absolutely on hero image */
.blog-post-breadcrumb {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    background: #0c061e;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: none;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.92rem;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    z-index: 1;
    opacity: 1 !important;
    visibility: visible !important;
    max-width: calc(100% - 28px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-post-last-updated {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    background: #0c061e;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.92rem;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    z-index: 1;
    opacity: 1 !important;
    visibility: visible !important;
    max-width: calc(100% - 28px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-post-last-updated--standalone {
    position: static !important;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}

.blog-post-breadcrumb--standalone {
    position: static !important;
    margin-top: 1.25rem;
    margin-bottom: 1rem;
    display: inline-flex;
}

.blog-post-breadcrumb a {
    color: rgba(255, 255, 255, 0.96);
    text-decoration: none;
}

.blog-post-breadcrumb a:hover {
    text-decoration: underline;
}

.blog-post-breadcrumb__sep {
    opacity: 0.65;
}

body.page-blog .page-hero-ad {
    padding-bottom: 0.05rem;
}

body.page-blog .page-hero-ad + main .blog--page {
    margin-top: 1.25rem;
    padding-top: 1.75rem;
}

.blog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.4rem;
    align-items: stretch;
}


/* ============================================
   BLOG SIDEBAR (Legacy Design System)
   
   Purpose:
   - Sidebar for blog pages with cards
   - Recent posts, subscribe form, search
   - Sticky positioning for sidebar
   
   Used on:
   - Blog pages (single post and listing)
   
   Notes:
   - Two-column layout: main content + 340px sidebar
   - Sticky sidebar positioning
   - Cards with purple accents
   - Subscribe form with orange button
   - Search field with input + button
   
   What may break:
   - Sidebar layout breaks if grid structure changes
   - Sticky positioning breaks if parent height changes
   ============================================ */

.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 2.5rem;
}

.blog-main {
    min-width: 0;
}

.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 1.5rem;
    align-self: start;
}

.sidebar-card {
    background: var(--clr-surface);
    border-radius: 20px;
    padding: 1.5rem;
    border: 1px solid rgba(95, 59, 255, 0.12);
    box-shadow: 0 14px 30px rgba(9, 6, 21, 0.08);
    overflow: hidden;
}

.sidebar-card h3 {
    margin: 0 0 0.85rem;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.sidebar-card p {
    margin: 0 0 0.9rem;
    color: var(--clr-muted);
    line-height: 1.55;
}

.sidebar-posts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.sidebar-post {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.sidebar-post__thumb {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    flex: none;
    background: linear-gradient(135deg, rgba(95, 59, 255, 0.92), rgba(255, 145, 46, 0.82));
    box-shadow: 0 12px 20px rgba(95, 59, 255, 0.18);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.sidebar-post__content {
    min-width: 0;
}

.sidebar-post__title {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: #120a2b;
    line-height: 1.35;
    margin-bottom: 0.25rem;
}

.sidebar-post__title:hover {
    text-decoration: underline;
}

.sidebar-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--clr-muted);
}

.sidebar-post__tag {
    background: rgba(95, 59, 255, 0.1);
    border: 1px solid rgba(95, 59, 255, 0.18);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
    color: rgba(19, 9, 54, 0.88);
}

.sidebar-post__time {
    font-weight: 600;
}

.subscribe-form {
    display: grid;
    gap: 0.75rem;
}

.sidebar-card--subscribe input {
    margin: 0;
}

.sidebar-card--subscribe button {
    width: 100%;
}

.sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.sidebar-list li p {
    margin: 0 0 0.25rem;
    font-weight: 600;
}

.sidebar-list li small {
    color: var(--clr-muted);
}

.sidebar-card--search label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--clr-muted);
}

.search-field {
    margin-top: 0.6rem;
    display: flex;
    align-items: stretch;
}

.search-field input {
    flex: 1;
    border: 1px solid var(--clr-border);
    border-right: none;
    border-radius: 12px 0 0 12px;
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
}

.search-field button,
.sidebar-card--subscribe button {
    border: none;
    border-radius: 12px;
    padding: 0.65rem 1rem;
    background: var(--clr-orange);
    color: #2f1a00;
    font-weight: 600;
    cursor: pointer;
}

.search-field button {
    border-radius: 0 12px 12px 0;
    width: 110px;
    border: 1px solid var(--clr-border);
    border-left: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 0.4rem;
}

.sidebar-card--subscribe input {
    width: 100%;
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    padding: 0.7rem 0.95rem;
    margin: 0;
}

/* ============================================
   BLOG CARD (Legacy Design System)
   
   Purpose:
   - Card component for blog posts in grid
   - Image, tag, title, excerpt, meta
   - Read more link with gradient
   
   Used on:
   - Blog listing page
   - Homepage (latest articles section)
   
   Notes:
   - 220px fixed height for image
   - Line-clamp for title (2 lines) and excerpt (4 lines)
   - Gradient read more button
   - Page-specific overrides for homepage spacing
   
   What may break:
   - Card layout breaks if flex structure changes
   - Line-clamp won't work if browser doesn't support -webkit-line-clamp
   ============================================ */

.blog-card {
    background: var(--clr-surface);
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
}

/* Blog card image with fixed height (220px) */
.blog-card__image {
    height: 220px;
    background: linear-gradient(135deg, #f857a6, #ff5858);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Blog card image styling to fill container with object-fit */
 .blog-card__image img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
 }

.blog-card__body {
    padding: 1rem 1.6rem 1.6rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card__tag {
    margin: 0 0 0.5rem;
}

.blog-card__body h3 {
    margin-top: 0;
    margin-bottom: 0.7rem;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog .blog-card__body > p:not(.blog-card__tag) {
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.55em * 4);
}



.blog-card__meta {
    margin-top: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.95rem;
    width: 100%;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-top: auto;
}

/* Homepage Latest Articles - Increased spacing (35% overall) */
/* NOTE: These premium-feature-card styles may be unused - from premium design system that may not be implemented */
body.page-index .premium-feature-card {
    padding: 1.5rem 1.25rem 1.8rem;
}

body.page-index .premium-feature-card__icon {
    margin-bottom: 1rem;
}

body.page-index .premium-feature-card > div {
    gap: 0.75rem;
}

body.page-index .premium-feature-card > div > p:first-child {
    margin-bottom: 0.25rem;
}

body.page-index .premium-feature-card__title {
    font-size: 1.15rem;
}

body.page-index .premium-feature-card__description {
    font-size: 0.95rem;
    line-height: 1.6;
}

body.page-index .premium-feature-card > div > div {
    margin-top: 0.75rem;
}

.blog-card__meta span {
    color: var(--clr-muted);
    font-weight: 600;
    white-space: nowrap;
}

.blog-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #f97316 0%, #f43f5e 45%, #ef4444 100%);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 14px 24px -12px rgba(244, 67, 54, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease;
    white-space: nowrap;
}

.blog-card__link:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px -12px rgba(244, 67, 54, 0.45);
    background: linear-gradient(135deg, #be123c 0%, #f43f5e 60%, #f97316 100%);
}

.blog-card__link:focus-visible {
    outline: 3px solid rgba(244, 67, 54, 0.35);
    outline-offset: 3px;
    border-radius: 8px;
}

/* ============================================
   PAGINATION (Legacy Design System)
   
   Purpose:
   - Pagination navigation for blog listings
   - Pill-shaped page links
   - Active state styling
   
   Used on:
   - Blog listing page
   
   Notes:
   - Centered flex layout
   - Pill-shaped links with 999px border-radius
   - 2.75rem min-width for links
   - Border and background styling
   
   What may break:
   - Pagination layout breaks if flex structure changes
   ============================================ */

.pagination {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
}

.pagination__list {
    list-style: none;
    display: flex;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
}

.pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--clr-border);
    background: var(--clr-surface);
    color: var(--clr-text);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pagination__link:hover {
    border-color: rgba(95, 59, 255, 0.45);
    color: var(--clr-deep-purple);
}

.pagination__link.is-active {
    background: var(--clr-deep-purple);
    border-color: var(--clr-deep-purple);
    color: #fff;
    cursor: default;
}

.pagination__link.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================
   ABOUT SECTION (Legacy Design System)
   
   Purpose:
   - About page with hero, stats, cards
   - Timeline for company history
   - CTA section
   
   Used on:
   - About page
   
   Notes:
   - Centered hero with clamp font sizing
   - Auto-fit grid for stats (160px min-width)
   - Grid layout for cards (280px min-width)
   - Timeline with 140px date column
   - Purple accent for stats
   
   What may break:
   - About layout breaks if grid structure changes
   - Timeline layout breaks if grid columns change
   ============================================ */

.about {
    background: var(--clr-surface);
}

.about__hero {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 3rem;
}

.about__hero h1 {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    margin-bottom: 0.75rem;
}

.about__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.stat-card {
    border-radius: 20px;
    border: 1px solid var(--clr-border);
    padding: 1.4rem;
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.stat-card strong {
    display: block;
    font-size: 1.8rem;
    color: var(--clr-deep-purple);
}

.stat-card span {
    color: var(--clr-muted);
}

.about__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.about-card {
    border-radius: 24px;
    border: 1px solid var(--clr-border);
    padding: 1.75rem;
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.about-card h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.about-card p {
    color: var(--clr-muted);
    line-height: 1.6;
}

.about__timeline {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--clr-border);
}

.timeline-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
}

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

.timeline-item strong {
    color: var(--clr-deep-purple);
    font-size: 1.1rem;
}

.timeline-item p {
    margin: 0;
    color: var(--clr-muted);
}

.about__cta {
    text-align: center;
    margin-top: 3rem;
}

.about__cta .btn--pill {
    margin-top: 1rem;
}

/* ============================================
   LEGAL SECTION (Legacy Design System)
   
   Purpose:
   - Legal pages (privacy policy, terms, etc.)
   - Centered intro with meta information
   - Section cards for legal content
   
   Used on:
   - Legal pages (privacy, terms, etc.)
   
   Notes:
   - Centered intro with 720px max-width
   - Flex wrap for meta information
   - White section cards with border
   - 1.35rem font size for section headings
   
   What may break:
   - Legal layout breaks if flex structure changes
   ============================================ */

.legal {
    background: var(--clr-surface);
}

.legal__intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}

.legal__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1rem;
    color: var(--clr-muted);
    font-weight: 500;
}

.legal__section {
    background: #fff;
    border-radius: 22px;
    border: 1px solid var(--clr-border);
    padding: 1.8rem;
    box-shadow: var(--shadow-soft);
    margin-bottom: 1.5rem;
}

.legal__section h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.35rem;
}

.legal__section p {
    color: var(--clr-muted);
    line-height: 1.6;
}

.legal__list {
    margin: 0.75rem 0 0;
    padding-left: 1.2rem;
    color: var(--clr-muted);
}

.legal__list li {
    margin-bottom: 0.5rem;
}

.legal__cta {
    text-align: center;
    margin-top: 2.5rem;
    color: var(--clr-muted);
}

.faq-page .faq__items {
    max-width: 860px;
    margin: 0 auto;
}

.faq-page details {
    background: #fffefc;
}

/* ============================================
   CONTACT SECTION (Legacy Design System)
   
   Purpose:
   - Contact page with grid layout
   - Contact cards and form
   - Form with input fields and textarea
   
   Used on:
   - Contact page
   
   Notes:
   - Auto-fit grid with 260px min-width
   - White cards with border and shadow
   - Form with flex column layout
   - Grid row for form inputs (200px min-width)
   - 160px min-height for textarea
   
   What may break:
   - Contact layout breaks if grid structure changes
   - Form won't submit if JavaScript is disabled
   ============================================ */

.contact {
    background: var(--clr-surface);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.4rem;
    margin-bottom: 2rem;
}

.contact-card,
.contact-form {
    background: #fff;
    border-radius: 22px;
    border: 1px solid var(--clr-border);
    padding: 1.75rem;
    box-shadow: var(--shadow-soft);
}

.contact-card h3 {
    margin-top: 0;
    margin-bottom: 0.4rem;
}

.contact-card p {
    margin: 0;
    color: var(--clr-muted);
}

.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form label {
    font-weight: 600;
    margin-bottom: 0.35rem;
    display: inline-block;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1px solid var(--clr-border);
    border-radius: 14px;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 1rem;
}

.contact-form textarea {
    min-height: 160px;
    resize: vertical;
}

.contact-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.contact-form__submit {
    align-self: flex-start;
    border: none;
    cursor: pointer;
}

/* ============================================
   FOOTER (Legacy Design System)
   
   Purpose:
   - Site footer with navigation and social links
   - Dark background (#05050f)
   - Adjusts for sticky ad
   
   Used on:
   - All pages
   
   Notes:
   - Centered layout with flex column
   - Social links with 44px circular buttons
   - Adjusts padding-bottom when sticky ad is present
   - Transition for smooth padding changes
   - has-sticky-ad class on body controls footer spacing
   
   What may break:
   - Footer spacing breaks if sticky ad logic changes
   ============================================ */

.footer {
    text-align: center;
    padding: 4.2rem 0;
    background: #05050f;
    color: rgba(255, 255, 255, 0.75);
    transition: padding-bottom 0.3s ease, margin-top 0.3s ease;
    margin-top: 0;
}

.footer nav {
    margin-top: 1rem;
    display: inline-flex;
    gap: 1.5rem;
    font-weight: 600;
}

.footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}

.footer-social {
    display: flex;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    transition: all 0.2s ease;
}

.footer-social a:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

body:not(.has-sticky-ad) .sticky-ad[data-hidden="true"] + .footer {
    margin-top: -50px;
}

body.has-sticky-ad .footer {
    padding-bottom: clamp(190px, 20vh, 290px);
}

body.has-sticky-ad .footer nav {
    margin-top: 1.5rem;
}

body.has-sticky-ad .footer .container {
    transform: translateY(-40px);
}

/* ============================================
   RESPONSIVE MEDIA QUERIES (Legacy Design System)
   
   Purpose:
   - Breakpoint adjustments for different screen sizes
   - 992px: Tablet and below (blog sidebar, search field, hero)
   - 900px: Smaller tablet (mailbox, blog layout)
   - 640px: Mobile (hero nav, brandmark)
   
   Used on:
   - All pages (responsive adjustments)
   
   Notes:
   - 992px: Blog sidebar becomes static, search field stacks vertically
   - 900px: Mailbox becomes single column, blog layout single column
   - 640px: Hero navigation adjusts for mobile
   - Duplicate rules at 992px and 900px (may need cleanup)
   
   What may break:
   - Responsive layout breaks if breakpoints change
   - Duplicate rules may cause conflicts
   ============================================ */
@media (max-width: 992px) {
    .hero__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .blog-layout {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .blog-sidebar {
        position: static;
        top: auto;
        align-self: stretch;
    }

    .blog--page {
        margin-top: 1.5rem;
        padding-top: 2.75rem;
    }

    .sidebar-card {
        padding: 1.25rem;
    }

    .search-field {
        flex-direction: column;
    }

    .search-field input {
        border-right: 1px solid var(--clr-border);
        border-radius: 12px;
    }

    .search-field button {
        width: 100%;
        border-radius: 12px;
        border-left: 1px solid var(--clr-border);
        margin-top: 0.6rem;
        justify-content: center;
        padding-left: 1rem;
    }

    .hero__menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.25rem;
    }

    .hero-mailbox__address {
        flex-direction: column;
    }

    .hero__stats {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        width: 100%;
        margin-top: 1.5rem;
    }

    .hero-mailbox {
        width: 100%;
    }

    .mailbox__canvas {
        padding: 2rem 1.5rem;
    }

    .hero__ads--banner {
        margin-top: 1rem;
    }
}

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

    .blog-layout {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .blog--page {
        margin-top: 1.5rem;
        padding-top: 2.75rem;
    }

    .sidebar-card {
        padding: 1.25rem;
    }

    .search-field {
        flex-direction: column;
    }

    .search-field input {
        border-right: 1px solid var(--clr-border);
        border-radius: 12px;
    }

    .search-field button {
        width: 100%;
        border-radius: 12px;
        border-left: 1px solid var(--clr-border);
        margin-top: 0.6rem;
        justify-content: center;
        padding-left: 1rem;
    }

    .hero__menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.25rem;
    }

    .hero-mailbox__address {
        flex-direction: column;
    }

    .hero__stats {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        width: 100%;
        margin-top: 1.5rem;
    }

    .hero-mailbox {
        width: 100%;
    }

    .mailbox__canvas {
        padding: 2rem 1.5rem;
    }

    .hero__ads--banner {
        margin-top: 1rem;
    }
}

@media (max-width: 640px) {
    .hero__nav {
        flex-direction: row;
        align-items: center;
    }

    .brandmark {
        justify-content: flex-start;
    }

    .hero__menu {
        width: 100%;
    }

    .hero-mailbox {
        width: 100%;
        padding: 1.25rem;
    }

    .hero-mailbox__address {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-mailbox__address span {
        width: 100%;
        word-break: break-all;
        overflow-wrap: anywhere;
    }

    .btn-copy {
        width: 100%;
    }

    .mailbox {
        width: 100%;
    }

    .mailbox__canvas {
        padding: 1.75rem 1.2rem;
        border-radius: 28px;
    }

    .pill {
        flex: 1 1 48%;
        text-align: center;
    }

    .mailbox__header,
    .mail-item,
    .mail-skeleton {
        grid-template-columns: 1fr auto;
    }

    .mailbox__header > :nth-child(2) {
        display: none;
    }

    .mail-item {
        grid-template-rows: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }

    .mail-item__sender {
        flex: 0.5;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mail-item__time {
        flex-shrink: 0;
        min-width: 3.5rem;
    }

    .mail-item__subject {
        display: none;
    }

    .mailbox__refresh-btn {
        display: none;
    }

    .hero__ads--banner .ad-slot {
        height: 90px;
        width: 100%;
        font-size: 0.75rem;
    }

    .viewer__actions {
        justify-content: flex-start;
    }

    .mailbox__viewer {
        padding: 1.6rem 1.5rem;
    }

    .footer {
        padding: 3.25rem 0;
    }

    .footer nav {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        text-align: center;
        line-height: 1.35;
    }

    .footer nav a {
        white-space: normal;
        word-break: break-word;
    }
}

/* ============================================
   MOBILE MEDIA QUERIES (Legacy Design System)
   
   Purpose:
   - 480px: Small mobile adjustments
   - 768px: Tablet mobile adjustments
   - Footer, hero, mailbox, blog grid adjustments
   
   Used on:
   - All pages (mobile responsive)
   
   Notes:
   - 480px: Footer social links smaller, blog single column, pills 100% width
   - 768px: temp-mail-content paragraph adjustments
   - Mailbox viewer header stacks vertically at 480px
   - Ad slot heights reduce on smaller screens
   
   What may break:
   - Mobile layout breaks if breakpoints change
   ============================================ */

@media (max-width: 480px) {
    .footer-social {
        gap: 1rem;
    }

    .footer-social a {
        width: 40px;
        height: 40px;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

    .blog__grid {
        grid-template-columns: 1fr;
    }

    .hero-mailbox__address {
        font-size: 0.95rem;
    }

    .hero-mailbox__actions {
        gap: 0.4rem;
    }

    .pill {
        flex: 1 1 100%;
    }

    .hero__stats li {
        padding: 1rem;
    }

    .mailbox__canvas {
        padding: 1.5rem 1rem;
    }

    .mailbox__viewer header {
        flex-direction: column;
    }

    .viewer__body {
        min-height: 180px;
    }

    .hero__ads--banner .ad-slot {
        height: 70px;
    }

    .footer nav {
        gap: 0.8rem 1rem;
        font-size: 0.95rem;
    }
}

/* ============================================
   PAGE-SPECIFIC CONTENT VISIBILITY (Legacy Design System)
   
   Purpose:
   - Performance optimization for index page
   - content-visibility: auto for off-screen sections
   - contain-intrinsic-size for layout stability
   
   Used on:
   - Index page (why, faq, blog, about-content sections)
   
   Notes:
   - CSS containment for performance
   - 1px 900px intrinsic size
   - Only applies to page-index body class
   
   What may break:
   - Layout shifts if intrinsic size changes
   - Performance benefit depends on browser support
   ============================================ */

body.page-index .why,
body.page-index .faq,
body.page-index .blog,
body.page-index .about-content {
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
}

/* ============================================
   TEMP MAIL CONTENT (Legacy Design System)
   
   Purpose:
   - Content styling for temp mail pages
   - Paragraph typography with responsive adjustments
   - 768px and 480px breakpoints for mobile
   
   Used on:
   - Temp mail content pages
   
   Notes:
   - 16px font size, 1.75 line-height by default
   - 768px: 15px font, 1.7 line-height, 18px margin
   - 480px: 14.5px font, 1.65 line-height, 16px margin
   
   What may break:
   - Typography breaks if font sizes change
   ============================================ */

.temp-mail-content p {
    margin-bottom: 22px;
    line-height: 1.75;
    font-size: 16px;
    color: #222;
}

@media (max-width: 768px) {
    .temp-mail-content p {
        margin-bottom: 18px;
        line-height: 1.7;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .temp-mail-content p {
        margin-bottom: 16px;
        line-height: 1.65;
        font-size: 14.5px;
    }
}

/* ============================================
   INTERNAL LINKS BOX (Legacy Design System)
   
   Purpose:
   - Internal navigation box for related content
   - Purple left border accent
   - List of links with descriptions
   
   Used on:
   - Content pages (blog, about, etc.)
   
   Notes:
   - 40px top margin, 24px padding
   - Light purple background (#f8f9ff)
   - 4px solid purple left border (#5b4dff)
   - Links in purple with hover underline
   
   What may break:
   - Layout breaks if flex structure changes
   ============================================ */

.internal-links-box {
    margin-top: 40px;
    padding: 24px;
    background: #f8f9ff;
    border-left: 4px solid #5b4dff;
    border-radius: 12px;
}

.internal-links-box h3 {
    margin-bottom: 16px;
    font-size: 20px;
    color: #222;
}

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

.internal-links-list li {
    margin-bottom: 14px;
}

.internal-links-list a {
    font-weight: 600;
    color: #5b4dff;
    text-decoration: none;
}

.internal-links-list a:hover {
    text-decoration: underline;
}

.internal-links-list span {
    display: block;
    font-size: 14px;
    color: #555;
    margin-top: 4px;
}

/* ============================================
   BLOG SIDEBAR ADS (Legacy Design System)
   
   Purpose:
   - Ad slots in blog sidebar
   - 300x250 standard ad size
   - Instructions for ad placement
   
   Used on:
   - Blog pages (sidebar)
   
   Notes:
   - 300px width, 250px height
   - Purple accent colors (#5b4dff)
   - Instructions box with left border
   - Responsive iframe/img/ins sizing
   
   What may break:
   - Ad layout breaks if dimensions change
   ============================================ */
.blog-sidebar-ads {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blog-ad-slot {
    width: 300px;
    height: 250px;
    border: none !important;
    outline: none !important;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(91, 77, 255, 0.6);
    text-align: center;
    overflow: hidden;
}

.blog-ad-slot ins,
.blog-ad-slot iframe,
.blog-ad-slot img {
    max-width: 100%;
    max-height: 100%;
}

.blog-ad-instructions {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(91, 77, 255, 0.05);
    border-radius: 6px;
    border-left: 3px solid #5b4dff;
}

.blog-ad-instructions ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.2rem;
}

.blog-ad-instructions li {
    margin-bottom: 0.25rem;
}

.blog-ad-instructions small {
    line-height: 1.4;
}

/* ============================================
   HOMEPAGE ADS (Legacy Design System)
   
   Purpose:
   - 300x250 horizontal ad grid on homepage
   - Responsive grid: 4 columns (desktop), 2 columns (tablet), 1 column (mobile)
   - Purple gradient background section
   
   Used on:
   - Homepage (ads section)
   
   Notes:
   - Desktop (1025px+): 4 columns × 1 row
   - Tablet (768-1024px): 2 columns × 2 rows
   - Mobile (<767px): 1 column × 4 rows
   - 300x250 standard ad size
   - Purple gradient background (rgba(91, 77, 255, 0.03-0.06))
   
   What may break:
   - Ad grid layout breaks if breakpoints change
   - Ads won't display if JavaScript is disabled
   ============================================ */
.homepage-ads {
    padding: 3rem 0;
    background: linear-gradient(135deg, rgba(91, 77, 255, 0.03) 0%, rgba(91, 77, 255, 0.06) 100%);
}

.homepage-ads__grid {
    display: grid;
    grid-template-columns: repeat(4, 300px);
    grid-template-rows: repeat(2, 250px);
    gap: 1.5rem;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto;
}

/* Desktop: 4 columns × 1 row (ads 1-4 on first row) */
@media (min-width: 1025px) {
    .homepage-ads__grid {
        grid-template-columns: repeat(4, 300px);
        grid-template-rows: 1fr;
    }
}

/* Tablet: 2 columns × 2 rows */
@media (min-width: 768px) and (max-width: 1024px) {
    .homepage-ads__grid {
        grid-template-columns: repeat(2, 300px);
        grid-template-rows: repeat(2, 250px);
        gap: 1.5rem;
    }
}

/* Mobile: 1 column × 4 rows */
@media (max-width: 767px) {
    .homepage-ads__grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 250px);
        gap: 1rem;
    }
    
    .homepage-ad-slot {
        width: 100%;
        max-width: 300px;
        height: 250px;
        margin: 0 auto;
    }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
    .homepage-ads {
        padding: 2rem 0;
    }
    
    .homepage-ads__grid {
        gap: 1rem;
    }
    
    .homepage-ad-slot {
        width: 100%;
        max-width: 300px;
        height: 250px;
    }
}

.homepage-ad-slot {
    width: 300px;
    height: 250px;
    border: none !important;
    outline: none !important;
    background: transparent;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(91, 77, 255, 0.6);
    text-align: center;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: none;
    transition: all 0.3s ease;
}

.homepage-ad-slot:hover {
    transform: translateY(-2px);
    box-shadow: none;
}

.homepage-ad-slot ins,
.homepage-ad-slot iframe,
.homepage-ad-slot img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
}

.homepage-ad-instructions {
    max-width: 800px;
    margin: 2rem auto 0;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    border-left: 4px solid #5b4dff;
    box-shadow: 0 2px 8px rgba(91, 77, 255, 0.1);
}

.homepage-ad-instructions ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.2rem;
}

.homepage-ad-instructions li {
    margin-bottom: 0.25rem;
}

.homepage-ad-instructions small {
    line-height: 1.4;
}

/* ============================================
   DUPLICATE HOMEPAGE ADS MEDIA QUERIES (Legacy Design System)
   
   Purpose:
   - Duplicate responsive rules for homepage ads
   - NOTE: These rules duplicate earlier media queries (lines 6952-6983)
   - May need cleanup to remove duplicates
   
   Used on:
   - Homepage (ads section)
   
   Notes:
   - 768px: Single column grid (duplicate of line 6953)
   - 480px: Reduced padding, full width slots (duplicate of line 6969)
   - Consider consolidating with earlier media queries
   
   What may break:
   - Conflicts if rules differ between duplicates
   - Maintenance burden with duplicate code
   ============================================ */
@media (max-width: 768px) {
    .homepage-ads__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .homepage-ad-slot {
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .homepage-ads {
        padding: 2rem 0;
    }
    
    .homepage-ad-slot {
        width: 100%;
        max-width: 300px;
        height: 250px;
    }
}