/* ===== GLOBAL RESET ===== */
/* Ensure meta tags are never visible */
meta {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide any elements that might display meta content */
[data-meta],
.meta-content,
.seo-preview {
  display: none !important;
}

/* ===== Brand tokens ===== */
:root{
  --ink:#0f172a;
  --muted:#475569;
  --line:#e5e7eb;
  --wrap:min(1200px,92vw); /* Standard max-width for modern web design */

  /* Primary: Professional Blue (matches landing/research pages) */
  --primary:#1E40AF;
  --primary-hover:#1E3A8A;
  --primary-light:#3B82F6;
  --primary-50:#EFF6FF;
  
  /* Secondary: Navy (authority, headings) */
  --secondary:#0B1F3B;
  --secondary-light:#1E3A5F;
  
  /* Accent: Sky Blue (links, data viz) */
  --accent:#0EA5E9;
  --accent-dark:#0284c7;
  
  /* Success: Green (achievements, positive states) */
  --success:#10B981;
  --success-dark:#059669;
  
  /* Legacy support - map to new system */
  --accent:#1E40AF;  /* Primary blue for backward compatibility */
  --accent-600:#1E3A8A;  /* Primary hover for backward compatibility */

  /* Input hints — not body copy; lighter than --muted so it reads as “suggestion only” */
  --placeholder: #9ca3af;

  /* Header logo – single source of truth for all pages (landing, dashboard, etc.) */
  --sr-logo-height: 200px;
  --sr-logo-height-max: 220px;
  --sr-logo-height-tablet: 176px;
  --sr-logo-height-mobile: 160px;
}

/* ===== Base (kept minimal) ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font:16px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#fff}

/* Placeholders on pages that only load brand.css (e.g. auth extends base without sponsor-common) */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]):not([type="range"])::placeholder,
textarea::placeholder {
  color: var(--placeholder);
  opacity: 1;
  font-weight: 400;
}

/* ===== Navigation (solid blue background) ===== */
/* Fixed header: always visible; content scrolls underneath (best practice for nav/CTA access). */
.sr-header-bar {
  background: #0B1F3B;
  box-shadow: 0 2px 20px rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  margin: 0;
  height: 120px;
  max-height: 120px;
  padding: 0 24px; /* breathing room so menu bar isn’t flush left/right */
}

/* Reserve space so main content is not hidden under the fixed header */
.sr-header-bar + main {
  padding-top: 120px;
}

@supports not (backdrop-filter: blur(10px)) {
  .sr-header-bar {
    background: #0B1F3B;
  }
}

.sr-header {
  flex: 1;
  min-width: 0;
  background: none;
  box-shadow: none;
  height: 120px;
  max-height: 120px;
  overflow: hidden !important;
  contain: layout paint;
}

/* Mobile: full-width bar; nav is outside header so fixed menu works */
@media screen and (max-width: 768px) {
  .sr-header-bar {
    width: 100%;
    max-width: 100%;
    z-index: 9998;
    padding: 0 16px; /* match wrap padding so content isn’t flush */
  }

  .sr-header {
    height: 120px;
    max-height: 120px;
    overflow: hidden !important;
  }

  .sr-header .sr-wrap {
    height: 120px;
    max-height: 120px;
    overflow: hidden !important;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
}

.sr-header .sr-wrap{
  width:var(--wrap);
  margin:0 auto;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position: relative;
  overflow: hidden !important;
  height: 120px;
  max-height: 120px;
  min-height: 0;
}

/* ===== Brand/Logo ===== */
.sr-brand{
  display: flex;
  align-items: center;
  flex-shrink: 0;
  max-height: 120px;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

.sr-brand .wordmark{
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: inherit;
}

.sr-brand .si-mark{
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}

.sr-brand .wm-name{
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.085em;
  color: #EAEFF5;
  white-space: nowrap;
}

.sr-brand:hover{
  opacity: 0.9;
}

.wordmark--light .wm-name{
  color: var(--navy, #0B1929);
}

@media (max-width: 480px){
  .sr-brand .wm-name{ font-size: 14px; letter-spacing: 0.06em; }
  .sr-brand .si-mark{ width: 30px; height: 30px; }
}

/* Legacy full SVG lockup (print / og:image only) */
.sr-brand--legacy{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size:2.8rem;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  transition: opacity 0.2s ease;
  padding: 0;
  overflow: hidden !important;
  flex-shrink: 0;
  max-height: 120px;
  min-height: 0;
}

.sr-brand--legacy:hover{
  opacity: 0.9;
  transform: none;
}

.sr-logo{
  height: var(--sr-logo-height, 200px);
  width: auto;
  max-height: var(--sr-logo-height-max, 220px);
  border-radius: 0;
  box-shadow: none;
  filter: none !important;
  -webkit-filter: none !important;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: contain;
  /* SVG rendering optimizations */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  max-width: 100%;
  object-fit: contain;
  color: #ffffff !important;
}

/* Force white text in logo SVG */
.sr-logo text {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Logo – same size on every page (landing, dashboard, results, etc.); single source of truth */
body .sr-header .sr-brand .sr-logo,
.sr-header .sr-logo {
  height: var(--sr-logo-height, 200px) !important;
  max-height: var(--sr-logo-height-max, 220px) !important;
  width: auto !important;
  min-height: 0 !important;
}
@media (max-width: 768px) {
  body .sr-header .sr-brand .sr-logo,
  .sr-header .sr-logo { height: var(--sr-logo-height-tablet, 176px) !important; max-height: 200px !important; }
}
@media (max-width: 480px) {
  body .sr-header .sr-brand .sr-logo,
  .sr-header .sr-logo { height: var(--sr-logo-height-mobile, 160px) !important; max-height: 180px !important; }
}


/* Additional mobile fixes */
@media screen and (max-width: 768px) {
  .sr-logo {
    height: var(--sr-logo-height-tablet, 176px);
    width: auto;
    max-width: 400px;
    /* Logo size independent of navigation bar height */
    /* Prevent zoom on double-tap */
    touch-action: manipulation;
    /* Better rendering on mobile */
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    /* Force white colors in SVG - prevent green/black override */
    filter: none !important;
    -webkit-filter: none !important;
    /* Ensure SVG text stays white */
    color: #ffffff !important;
  }
  
  .sr-brand {
    /* Prevent layout shifts on mobile */
    min-width: 0;
    flex-shrink: 0;
    /* Ensure white text color on mobile */
    color: #ffffff !important;
  }
  
  /* Force white text in logo SVG on mobile */
  .sr-logo text {
    fill: #ffffff !important;
  }
}

/* High-DPI display optimizations */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .sr-logo {
    /* Retina display fixes */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    /* Prevent pixelation on high-DPI displays */
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.sr-brand-text{
  background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Navigation Links (typography matches landing v4 .nav-links) ===== */
.sr-nav{
  display:flex;
  align-items: center;
  gap: 34px;
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
}

.sr-nav .nav-icon {
  display: none;
}

.nav-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--on-navy-mute, rgba(243, 238, 226, 0.66));
  text-decoration:none;
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
  background: transparent;
  border: 0;
  transition: color 0.2s ease;
  position: relative;
}

/* Keep site header nav readable on navy — beats page-level .nav-link overrides */
.sr-header-bar .sr-nav > .nav-link,
.sr-header-bar .sr-nav > a.nav-link {
  color: var(--on-navy-mute, rgba(243, 238, 226, 0.66));
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sr-header-bar .sr-nav > .nav-link:hover,
.sr-header-bar .sr-nav > a.nav-link:hover {
  color: var(--on-navy, #F3EEE2);
  background: transparent;
}

.sr-header-bar .sr-nav > .nav-link.active,
.sr-header-bar .sr-nav > a.nav-link.active {
  color: var(--gold, #C9A961);
  font-weight: 600;
  background: transparent;
}

.nav-link:hover{
  background: transparent;
  color: var(--on-navy, #F3EEE2);
  transform: none;
}

.nav-link.active {
  background: transparent;
  border-left: 0;
  font-weight: 600;
  color: var(--gold, #C9A961);
}

.nav-link.active:hover {
  background: transparent;
  color: var(--gold, #C9A961);
}

/* Primary nav link styling to match other buttons */
.nav-link.primary {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 14px 0 rgba(30, 64, 175, 0.3);
  border: 1px solid rgba(30, 64, 175, 0.2);
}

.nav-link.primary:hover {
  background: var(--primary-hover);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px 0 rgba(30, 64, 175, 0.4);
}

.nav-icon{
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* ===== Dropdown Navigation ===== */
.nav-dropdown{
  position: relative;
  display: inline-block;
}

.dropdown-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--on-navy-mute, rgba(243, 238, 226, 0.66));
  text-decoration: none;
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
  transition: color 0.2s ease;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
}

.dropdown-toggle:hover{
  background: transparent;
  color: var(--on-navy, #F3EEE2);
  transform: none;
}

/* Logout + other header buttons styled as nav text links */
.sr-nav .button.logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-navy-mute, rgba(243, 238, 226, 0.66));
  border-radius: 0;
  box-shadow: none;
}

.sr-nav .button.logout-btn:hover {
  background: transparent;
  color: var(--on-navy, #F3EEE2);
  border-color: transparent;
}

.dropdown-arrow{
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
  stroke-width: 2;
}

.dropdown-toggle:hover .dropdown-arrow{
  transform: rotate(180deg);
}

.dropdown-menu{
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  min-width: 200px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.active .dropdown-menu,
.dropdown-menu.active{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #374151;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.dropdown-item:hover{
  background: #f8fafc;
  color: #0B1F3B;
}

.dropdown-item svg{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 2;
}

.dropdown-divider{
  height: 1px;
  background: #e5e7eb;
  margin: 8px 0;
}

.dropdown-item.logout{
  color: #dc2626;
}

.dropdown-item.logout:hover{
  background: #fef2f2;
  color: #dc2626;
}

/* ===== Dropdown Sections ===== */
.dropdown-section{
  margin-bottom: 12px;
}

.dropdown-section:last-of-type{
  margin-bottom: 0;
}

.dropdown-section-title{
  font-size: 0.75rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 16px 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid #f3f4f6;
}

/* ===== Mobile Toggle ===== */
.sr-mobile-toggle{
  display: none !important;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.sr-mobile-toggle:hover{
  background: rgba(255,255,255,0.1);
}

.sr-mobile-toggle span{
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.sr-mobile-toggle.active span:nth-child(1){
  transform: rotate(45deg) translate(6px, 6px);
}

.sr-mobile-toggle.active span:nth-child(2){
  opacity: 0;
}

.sr-mobile-toggle.active span:nth-child(3){
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ===== Desktop - Ensure hamburger is hidden ===== */
@media (min-width: 769px) {
  .sr-mobile-toggle {
    display: none !important;
  }
}

/* ===== Mobile Navigation ===== */
@media (max-width: 768px) {
  .sr-mobile-toggle {
    display: flex !important;
    order: 2; /* Ensure it appears after the logo */
  }
  
  .sr-brand {
    order: 1; /* Ensure logo appears first */
    flex-shrink: 0; /* Prevent logo from shrinking */
  }
  
  .sr-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: linear-gradient(135deg, #0B1F3B 0%, #1a365d 100%);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    /* Top padding clears the 120px header so first link is not clipped */
    padding: 132px 20px 20px;
    gap: 8px;
    transition: right 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: -5px 0 20px rgba(0,0,0,0.3);
    z-index: 10000; /* Above header (9998) when open */
    visibility: hidden;
    opacity: 0;
  }
  
  .sr-nav.active {
    right: 0;
    visibility: visible;
    opacity: 1;
  }
  
  .nav-link {
    padding: 16px 20px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    justify-content: flex-start;
    border: 0;
    border-bottom: 1px solid var(--navy-line, rgba(28, 45, 64, 0.8));
  }

  .nav-link:hover {
    background: transparent;
    color: var(--on-navy, #F3EEE2);
  }

  .nav-link.active {
    color: var(--gold, #C9A961);
    font-weight: 600;
  }
  
  .nav-icon {
    width: 20px;
    height: 20px;
  }
  
  .button {
    margin-top: 20px;
    padding: 16px 20px;
    font-size: 16px;
    text-align: center;
    justify-content: center;
  }
  
  .cta-btn {
    background: var(--primary);
    box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
    position: relative;
    animation: cta-pulse 2s ease-in-out infinite;
  }
  
  .cta-btn:hover {
    background: var(--primary-hover);
    box-shadow: 0 6px 20px rgba(30, 64, 175, 0.4);
    transform: translateY(-1px);
  }
  
  @keyframes cta-pulse {
    0%, 100% {
      box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
    }
    50% {
      box-shadow: 0 4px 20px rgba(30, 64, 175, 0.5);
    }
  }
  
  .sr-nav .button.logout-btn {
    margin-top: 8px;
    padding: 16px 20px;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
    justify-content: flex-start;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--navy-line, rgba(28, 45, 64, 0.8));
    color: var(--on-navy-mute, rgba(243, 238, 226, 0.66));
    border-radius: 0;
  }

  .sr-nav .button.logout-btn:hover {
    background: transparent;
    color: var(--on-navy, #F3EEE2);
  }
  
  /* Mobile overlay */
  .sr-nav::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: -1;
    pointer-events: none;
  }
  
  .sr-nav.active::before {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  /* Adjust brand for mobile */
  .sr-brand {
    font-size: 1.2rem;
    margin-right: auto; /* Push hamburger to the right */
    /* Mobile fixes */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    min-width: 0;
    flex-shrink: 0;
  }
  
  .sr-logo {
    height: var(--sr-logo-height-tablet, 176px);
    /* Additional mobile logo fixes */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    touch-action: manipulation;
    /* Force white colors - prevent green/black override */
    filter: none !important;
    -webkit-filter: none !important;
    /* Prevent mobile Safari from caching old logo */
    -webkit-appearance: none;
    appearance: none;
  }
  
  /* Force white text in brand on mobile */
  .sr-brand {
    color: #ffffff !important;
  }
  
  /* Force white text in logo SVG on mobile */
  .sr-logo text {
    fill: #ffffff !important;
  }
  
  /* Ensure proper spacing between logo and hamburger */
  .sr-header .sr-wrap {
    padding: 0 16px; /* 50% reduction: removed vertical padding */
  }
  
  .sr-mobile-toggle {
    margin-left: 16px; /* Add space between logo and hamburger */
  }
}

@media (max-width: 480px) {
  .sr-nav {
    width: 100vw;
    right: -100vw;
  }
  
  .sr-brand-text {
    display: none;
  }
  
  .sr-logo {
    height: var(--sr-logo-height-mobile, 160px);
  }
  
  /* Adjust spacing for very small screens */
  .sr-header-bar {
    padding: 0 12px;
  }

  .sr-header .sr-wrap {
    padding: 0 12px; /* 50% reduction: removed vertical padding */
  }
  
  .sr-mobile-toggle {
    margin-left: 12px;
    padding: 6px;
  }
}

/* ===== Buttons (primary uses 2025 green) ===== */
.button{display:inline-block;padding:11px 18px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);text-decoration:none;font-weight:600}
.button:hover{border-color:var(--accent);color:var(--accent)}
/* .button.primary — canonical gold styles in css/v3_shared_tokens.css */
.button.ghost{background:transparent}

/* ===== Helpers for landing layout (no restructure) ===== */
.container{width:var(--wrap);margin:0 auto}
.sp-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 8px rgba(15,20,25,.06)}

/* ===== Footer Styles (replaces inline styles from base.html) ===== */
.sr-footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 24px;
  margin-top: 60px;
  background: #f8fafc;
  /* Safari fixes */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
  z-index: 1;
}

.sr-footer .sr-wrap {
  width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px; /* Match body content padding */
}

.sr-footer-grid {
  display: grid;
  display: -webkit-grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  -webkit-grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  -webkit-column-gap: 32px;
  -moz-column-gap: 32px;
  row-gap: 32px;
  margin-bottom: 32px;
  /* Safari grid fixes */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.sr-footer-section h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
  margin-top: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sr-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 0; /* Align with h4 margin-bottom spacing */
}

.sr-footer-list li {
  margin-bottom: 12px; /* Match h4 margin-bottom for consistent spacing */
}

.sr-footer-list li:last-child {
  margin-bottom: 0; /* Remove bottom margin from last item */
}

.sr-footer-link {
  color: #64748b;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease, background 0.2s ease;
  padding: 0; /* Remove padding to match h4 margin pattern */
  display: inline-block;
  position: relative;
}

.sr-footer-link:hover {
  color: var(--primary);
}

/* Active state indicator */
.sr-footer-link.active {
  color: var(--primary);
  font-weight: 500;
}

.sr-footer-link.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: var(--primary);
  border-radius: 2px;
}

.sr-footer-nav {
  margin-bottom: 32px;
}

.sr-footer-cta {
  text-align: center;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.sr-footer-cta-btn {
  font-size: 1rem;
  padding: 14px 32px;
  box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
}

.sr-footer-cta-btn:hover {
  box-shadow: 0 6px 20px rgba(30, 64, 175, 0.4);
  transform: translateY(-1px);
}

.sr-footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  gap: 12px;
  -webkit-column-gap: 12px;
  -moz-column-gap: 12px;
  row-gap: 12px;
  color: #6b7280;
  font-size: 0.875rem;
  /* Safari flex fixes */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.sr-footer-bottom p {
  margin: 0;
  line-height: 1.5;
}

.sr-footer-contact {
  margin-top: 4px;
  font-size: 0.875rem;
  color: #64748b;
}

.sr-footer-contact a {
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sr-footer-contact a:hover {
  color: var(--primary);
}

.sr-footer-separator {
  color: #9ca3af;
  margin: 0 6px;
}

/* Footer responsive adjustments */
@media (max-width: 768px) {
  .sr-footer {
    padding: 32px 0 20px;
    /* Safari mobile fixes */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  .sr-footer .sr-wrap {
    padding: 0 16px; /* Match header padding on tablet */
  }
  
  .sr-footer-grid {
    grid-template-columns: repeat(2, 1fr);
    -webkit-grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    row-gap: 24px;
    margin-bottom: 24px;
  }
  
  .sr-footer-cta {
    padding: 20px 0;
    margin-bottom: 20px;
  }
  
  .sr-footer-cta-btn {
    width: 100%;
    max-width: 300px;
    padding: 14px 24px;
  }
  
  .sr-footer-bottom {
    padding-top: 20px;
    gap: 10px;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    row-gap: 10px;
  }
  
  .sr-footer-contact {
    font-size: 0.8125rem;
    word-break: break-word;
    /* Safari text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .sr-footer-link.active::before {
    left: -10px;
    height: 14px;
  }
}

@media (max-width: 480px) {
  .sr-footer-grid {
    grid-template-columns: 1fr;
    -webkit-grid-template-columns: 1fr;
    gap: 20px;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    row-gap: 20px;
  }
  
  .sr-footer .sr-wrap {
    padding: 0 12px; /* Match header padding on mobile */
  }
}