/* ===== Theme / tokens ===== */
:root{
    --primary:#2d6cdf; --primary-hover:#224f99;
    --background:#fff; --background-alt:#f6f8fc; --card-bg:#fff;
    --border-color:#e2e8f0;
    --text-primary:#1f2937; --text-secondary:#4b5563;
    --image-frame: 0; /* 1 = show frame, 0 = hide frame */
}
@media (prefers-color-scheme: dark){
    :root{
        --primary:#4a83e3; --primary-hover:#3a67b3;
        --background:#0f172a; --background-alt:#16223a; --card-bg:#16223a;
        --border-color:#243556; --text-primary:#e2e8f0; --text-secondary:#94a3b8;
    }
    .solution.apim-solution{background:linear-gradient(90deg, rgba(74, 131, 227, 0.12) 0%, rgba(74, 131, 227, 0.06) 50%, rgba(74, 131, 227, 0.02) 100%)}
    .solution.speed-quote-solution{background:linear-gradient(90deg, rgba(74, 131, 227, 0.02) 0%, rgba(74, 131, 227, 0.06) 50%, rgba(74, 131, 227, 0.12) 100%)}
}
*,:before,:after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;line-height:1.6;background:var(--background);color:var(--text-primary)}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 1.5rem}

/* ===== Nav ===== */
.navbar{position:sticky;top:0;z-index:1000;width:100%;background:var(--background);
    border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem}
.navbar .logo{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.25rem;color:var(--primary)}
.navbar .logo img{height:40px;width:40px}
.nav-links{display:flex;align-items:center;gap:1rem;transition:transform .3s,opacity .3s}
.nav-links a{padding:.5rem .75rem;font-weight:500;border-radius:4px;color:var(--primary);transition:background-color .2s}
.nav-links a:hover{background:var(--border-color)}
.nav-links a.primary{background:var(--primary);color:#fff}
.nav-links a.primary:hover{background:var(--primary-hover)}
.nav-toggle{display:none;font-size:1.5rem;background:none;border:none;color:var(--primary);cursor:pointer;padding:.25rem}
/* Dropdown */
.nav-links details.nav-dropdown{position:relative}
.nav-links details.nav-dropdown > summary{list-style:none;cursor:pointer;padding:.5rem .75rem;border-radius:4px;color:var(--primary);font-weight:500;display:inline-flex;align-items:center}
.nav-links details.nav-dropdown > summary::after{content:'▾';display:inline-block;margin-left:.35rem;transition:transform .2s ease}
.nav-links details.nav-dropdown > summary::marker{display:none}
.nav-links details.nav-dropdown > summary::-webkit-details-marker{display:none}
.nav-links details.nav-dropdown[open] > summary{background:var(--border-color)}
.nav-links details.nav-dropdown[open] > summary::after{transform:rotate(180deg)}
.nav-links .dropdown{display:none;position:absolute;top:100%;left:0;background:var(--background);border:1px solid var(--border-color);border-radius:6px;min-width:200px;box-shadow:0 6px 18px rgba(0,0,0,.08);padding:.25rem}
.nav-links details.nav-dropdown[open] .dropdown{display:block}
.nav-links .dropdown li{list-style:none}
.nav-links .dropdown a{display:block;padding:.5rem .75rem;border-radius:4px;color:var(--primary);font-weight:500;font-size:1rem;font-family:inherit}
.nav-links .dropdown a:hover{background:var(--border-color)}
/* Make non-anchor actions (e.g., Log Out button) match styling */
.nav-links .dropdown .nav-link{display:block;padding:.5rem .75rem;border-radius:4px;color:var(--primary);font-weight:500;background:none;border:0;cursor:pointer;width:100%;text-align:left;font-size:1rem;font-family:inherit;-webkit-appearance:none;appearance:none}
.nav-links .dropdown .nav-link:hover{background:var(--border-color)}
/* Right-align the Account dropdown on desktop */
.nav-links #acct-menu{position:relative}
.nav-links #acct-menu .dropdown{right:0;left:auto}
/* Hide disclosure chevron for account menu */
#acct-menu > summary::after{content:none}
/* Default desktop: show icon, hide label */
#acct-menu .acct-label{display:none}
#acct-menu .acct-icon{display:inline-flex}

/* ===== Hero ===== */
.hero{padding:6rem 1.5rem 4rem;text-align:center;background:linear-gradient(90deg, rgba(45, 108, 223, 0.20) 0%, rgba(45, 108, 223, 0.08) 25%, transparent 50%, rgba(45, 108, 223, 0.08) 75%, rgba(45, 108, 223, 0.20) 100%)}
.hero h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;margin-bottom:1rem;color:var(--primary)}
.hero p{font-size:clamp(1rem,2.5vw,1.25rem);color:var(--text-secondary);max-width:800px;margin:0 auto}

section{padding:3rem 0}
hr{border:none;border-top:1px solid var(--border-color);margin:0}

/* ===== Intro / About ===== */
.intro-content{display:flex;align-items:center;gap:3rem}
.intro-text{flex:1}
.intro-image{flex:0 0 auto;max-width:400px}
.intro-image img{width:100%;height:auto;border-radius:calc(8px * var(--image-frame));box-shadow:calc(0px * var(--image-frame)) calc(4px * var(--image-frame)) calc(12px * var(--image-frame)) rgba(0,0,0,calc(0.1 * var(--image-frame)))}
.intro p{margin-bottom:1.25rem;font-size:1.1rem;color:var(--text-secondary)}
.about{background:linear-gradient(180deg, rgba(45, 108, 223, 0.03) 0%, rgba(45, 108, 223, 0.01) 50%, transparent 100%);padding:3rem 0}
.intro h2,.about h2,.solutions h2,.cta h2{font-size:2rem;margin-bottom:1rem;color:var(--primary)}
.about p{margin-bottom:1rem;color:var(--text-secondary)}
/* Normalize list alignment and spacing inside content sections */
.about ol,
.about ul{margin:0 0 1.25rem 0;padding-left:0;list-style-position:inside}
.about li{margin-bottom:.4rem}
/* Subtext inside list items (e.g., "Alternatively...") */
.about li .note{display:block;margin-top:.35rem}
.features{list-style:none;margin-top:1rem;padding-left:0}
.features li{margin-bottom:1.5rem}
.features .feature-header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.5rem}
.features .icon{width:1.25rem;height:1.25rem;flex-shrink:0;fill:var(--primary);margin-top:.2rem}
.features strong{color:var(--text-primary);font-weight:600}
.features .feature-description{color:var(--text-secondary);margin:0;padding-left:0}

/* ===== Cards ===== */
.cards{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;align-items:stretch}
.solutions-content{display:flex;flex-direction:column;gap:1rem}
.solution{display:flex;align-items:stretch;gap:3rem;background:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;padding:2rem;box-shadow:0 2px 4px rgba(0,0,0,.05);position:relative;flex-wrap:wrap}
.solution.apim-solution{background:linear-gradient(90deg, rgba(45, 108, 223, 0.08) 0%, rgba(45, 108, 223, 0.03) 50%, rgba(45, 108, 223, 0.01) 100%)}
.solution.speed-quote-solution{background:linear-gradient(90deg, rgba(45, 108, 223, 0.01) 0%, rgba(45, 108, 223, 0.03) 50%, rgba(45, 108, 223, 0.08) 100%)}
.solution-text{flex:1;display:flex;flex-direction:column;min-width:300px}
.solution-text h3{margin-bottom:1rem;margin-top:0}
.solution-text h4{margin:1.5rem 0 0.75rem 0}
.solution-text p{margin-bottom:1rem;margin-top:0}
.solution-text ul{margin-bottom:1.5rem;margin-top:0}
.solution .cta-link{display:none}
.cta-link{color:var(--primary);font-weight:600;text-align:right;margin-top:0;margin-bottom:0.25rem}
.solution-image{flex:0 0 auto;max-width:400px;display:flex;align-items:center}
.solution-image img{width:100%;height:auto;border-radius:8px}
.solutions-hero-image{margin-bottom:1.5rem;text-align:center}
.solutions-hero-image img{max-width:100%;height:auto;border-radius:12px}
.card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;padding:2rem;flex:1 1 320px;display:flex;flex-direction:column;box-shadow:0 2px 4px rgba(0,0,0,.05)}
.card h3{font-size:1.5rem;margin-bottom:.75rem;color:var(--primary)}
.card h4{font-size:1.25rem;margin:.75rem 0 .5rem;color:var(--primary)}
.card p{margin-bottom:1rem;color:var(--text-secondary)}
.card ul{list-style:none;padding-left:0;margin-bottom:1rem}
.card ul li{position:relative;padding-left:1.5rem;margin-bottom:.5rem;color:var(--text-secondary)}
.card ul li::before{content:'✓';position:absolute;left:0;top:0;font-weight:700;color:var(--primary)}
.card .apim-modules li::before{content:'';position:absolute;left:0;top:0.5rem;width:0.5rem;height:0.5rem;background:var(--primary);border-radius:50%}
.cta-link{margin-top:auto;color:var(--primary);font-weight:600}
.cta-link:hover{color:var(--primary-hover)}
.speed-quote-image{margin:1.5rem 0;text-align:center}
.speed-quote-image img{max-width:100%;height:auto;border-radius:calc(8px * var(--image-frame));box-shadow:calc(0px * var(--image-frame)) calc(4px * var(--image-frame)) calc(12px * var(--image-frame)) rgba(0,0,0,calc(0.1 * var(--image-frame)));background:#fff;padding:1rem;border-radius:12px}

/* ===== CTA ===== */
.cta{text-align:center;background:var(--background-alt)}
.cta p{color:var(--text-secondary);margin-bottom:1.5rem;font-size:1.1rem;max-width:700px;margin-left:auto;margin-right:auto}
.button{display:inline-block;padding:.75rem 1.5rem;font-weight:600;border:2px solid var(--primary);border-radius:5px;color:var(--primary);transition:background-color .2s,color .2s}
.button:hover{background:var(--primary);color:#fff}
.button.primary{background:var(--primary);color:#fff}
.button.primary:hover{background:var(--primary-hover)}

/* ===== Footer ===== */
.footer{background:var(--background-alt);padding:2rem 0;color:var(--text-secondary);font-size:.9rem}
.footer .container{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem}
.social{display:flex;align-items:center;gap:.5rem}
.social span{font-weight:600}
.social-icon{width:20px;height:20px;fill:var(--text-secondary);transition:fill .2s}
.social-link:hover .social-icon{fill:var(--primary)}

/* ===== Speed-Quote Page Specific Styles ===== */
.warning-callout{
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.10) 0%, rgba(255, 193, 7, 0.05) 100%);
  border: 1px solid rgba(255, 193, 7, 0.35);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}
.warning-callout h3{
  display:flex;align-items:center;gap:.5rem;
  color:#d97706; /* amber-600 */
  margin-bottom:.5rem;font-size:1.05rem
}
.warning-callout p{margin:0;color:var(--text-secondary)}
.warning-callout .icon{display:inline-flex}
.warning-callout .icon svg{width:20px;height:20px;fill:#d97706}
.legacy-notice {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.legacy-notice h2 {
  color: #d97706;
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.legacy-notice p {
  margin-bottom: 0.75rem;
  color: var(--text-secondary);
}

.legacy-notice a {
  color: var(--primary);
  text-decoration: underline;
}

.legacy-notice a:hover {
  color: var(--primary-hover);
}

.contact-info {
  background: var(--background-alt);
  border-left: 4px solid var(--primary);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}

.contact-info a {
  color: var(--primary);
  text-decoration: underline;
}

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

/* Highlight mailto links sitewide for clarity */
a[href^="mailto:"]{ color: var(--primary); text-decoration: underline; }
a[href^="mailto:"]:hover{ color: var(--primary-hover); }

.pricing-info {
  text-align: center;
  margin: 2rem 0;
  padding: 1rem;
  background: var(--background-alt);
  border-radius: 8px;
}

.pricing-info a {
  color: var(--primary);
  text-decoration: underline;
}

.pricing-info a:hover {
  color: var(--primary-hover);
}

.mac-notice {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.mac-notice h3 {
  color: var(--primary);
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

.mac-notice p {
  margin: 0;
  color: var(--text-secondary);
}

.mac-notice a {
  color: var(--primary);
  text-decoration: underline;
}

.mac-notice a:hover {
  color: var(--primary-hover);
}

/* Dark mode styling for sqe_anim.svg */
@media (prefers-color-scheme: dark) {
  .intro-image img[src*="sqe_anim.svg"] {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

.intro-image img[src*="sqe_screen.png"] {
  border-radius: 12px;
}

.intro-image img[src*="apim_screen.png"] {
  border-radius: 12px;
}

/* Round corners for APIM rotating screenshots */
.intro-image img[src*="apim_screen_"] {
  border-radius: 12px;
}

/* Informational chips (Tip/Note/News) */
.info-chip{display:flex;align-items:flex-start;gap:.5rem;background:var(--background-alt);border:1px solid var(--border-color);border-radius:8px;padding:.5rem .75rem;margin:.5rem 0;color:var(--text-secondary)}
.info-chip .icon svg{width:18px;height:18px}
.info-chip.tip{background:linear-gradient(135deg, rgba(59,130,246,.10) 0%, rgba(59,130,246,.05) 100%);border-color:rgba(59,130,246,.35)}
.info-chip.tip .icon svg{fill:#3b82f6}
.info-chip.note{background:linear-gradient(135deg, rgba(100,116,139,.10) 0%, rgba(100,116,139,.05) 100%);border-color:rgba(100,116,139,.35)}
.info-chip.note .icon svg{fill:#64748b}
.info-chip.news{background:linear-gradient(135deg, rgba(34,197,94,.10) 0%, rgba(34,197,94,.05) 100%);border-color:rgba(34,197,94,.35)}
.info-chip.news .icon svg{fill:#22c55e}

/* Feature icon styling */
.feature-icon {
  width: 100px;
  height: 100px;
  color: var(--primary);
  display: block;
  margin: 0 auto;
}

/* ===== Contact Page Specific Styles ===== */
.contact-sections {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.contact-section h2 {
  color: var(--primary);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.contact-section p {
  margin-bottom: 1rem;
  color: var(--text-secondary);
}

.help-options {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.help-option {
  background: var(--background-alt);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
}

.help-option h3 {
  color: var(--primary);
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

.help-option p {
  margin: 0;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .feature-icon {
    width: 80px;
    height: 80px;
  }
}

/* ===== Customer logos carousel ===== */
.customer-intro{
    text-align:center; margin-bottom:2rem; font-size:1.1rem; color:var(--text-secondary)
}

/* Add spacing above customer logo carousel */
p:has(+ .logo-strip) {
    margin-bottom: 2rem;
    margin-top: 2rem;
}
.logo-strip{
    position:relative; overflow:hidden; padding:0.2rem 0;
    /* fade edges */
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
    --logo-gap: 0.2rem; /* default inter-logo spacing; overridden by data-gap */
}
.logo-track{display:flex;align-items:center;gap:var(--logo-gap);will-change:transform}
.logo-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.logo-item img{
    height:var(--logo-height, 40px); width:auto; object-fit:contain;
    filter:grayscale(100%); opacity:.85;
    transition:opacity .2s, filter .2s;
}

@media (prefers-color-scheme: dark){
  /* Light backing for logos that expect white backgrounds */
  .logo-strip{
    --logo-bg-alpha: 0.85; /* default; can be overridden via data-bg-alpha */
    background: linear-gradient(90deg,
      rgba(233,236,241,var(--logo-bg-alpha)) 0%,
      rgba(247,248,250,var(--logo-bg-alpha)) 100%);
  }
  
  /* Invert grayscale logos in dark mode */
  .logo-item img{
    filter: grayscale(100%) invert(100%);
  }
}

/* ===== Mobile Responsive Styles ===== */
@media (max-width: 768px) {
  /* Navigation mobile styles */
  .nav-toggle {
    display: block !important;
  }
  
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--background);
    border-bottom: 1px solid var(--border-color);
    flex-direction: column;
    padding: 1rem;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s, opacity .3s;
  }
  
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
  
  .nav-links a {
    padding: .75rem 1rem;
    border-radius: 6px;
    text-align: center;
  }

  /* Dropdowns in mobile should expand inline and push content down */
  .nav-links details.nav-dropdown{width:100%}
  .nav-links details.nav-dropdown > summary{width:100%;justify-content:center}
  .nav-links .dropdown{
    position: static;
    top: auto; left: auto; right: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: .25rem 0 0 0;
  }
  .nav-links .dropdown a,
  .nav-links .dropdown .nav-link{border-radius:6px; text-align:center}

  /* Mobile: show Account text, hide icon */
  #acct-menu .acct-label{display:inline}
  #acct-menu .acct-icon{display:none}
  
  /* Hero section adjustments */
  .hero {
    padding: 4rem 1rem 3rem;
  }
  
  /* Intro section mobile layout */
  .intro-content {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }
  
  .intro-image {
    max-width: 100%;
    order: -1;
  }
  
  /* Container padding adjustment */
  .container {
    padding: 0 1rem;
  }
  
  /* Features list mobile layout */
  .features .feature-description {
    padding-left: 0;
    margin-top: .25rem;
  }
  
  /* Cards mobile layout */
  .cards {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .card {
    flex: 1 1 auto;
    padding: 1.5rem;
  }
  
  /* Solutions mobile layout */
  .solution {
    flex-direction: column;
    gap: 2rem;
    text-align: left;
  }
  
  .solution-text {
    order: 1;
    display: flex;
    flex-direction: column;
  }
  
  .solution .cta-link {
    position: static;
    order: 3;
    margin-top: 1rem;
    align-self: flex-start;
  }
  
  .solution-image {
    max-width: 100%;
    order: 2;
    margin-bottom: 1rem;
  }
  
  /* Footer mobile layout */
  .footer .container {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  /* Logo strip mobile adjustments */
  .logo-strip {
    padding: 0.1rem 0;
  }
  
  /* Contact page mobile adjustments */
  .contact-sections {
    gap: 2rem;
  }
  
  .help-options {
    gap: 1.5rem;
  }
  
  .help-option {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  /* Extra small devices */
  .hero h1 {
    font-size: 1.75rem;
  }
  
  .hero p {
    font-size: 1rem;
  }
  
  .about h2, .solutions h2, .cta h2 {
    font-size: 1.5rem;
  }
  
  .card {
    padding: 1rem;
  }
  
  .button {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: .5rem;
  }
  
  .cta-buttons {
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }
}