/* Zeeva Website Styles */
@font-face {
  font-family: 'Inter';
  src: url('./assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root{
  --brand-navy:#171C61;
  --brand-coral:#FF7878;
  --brand-lime:#F3FF76;
  --brand-cream:#EBEEE6;
  --gray-light:#F8F9FA;
  --gray:#6B7280;
  --gray-dark:#374151;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;height:100%}
html{overflow-x:hidden; scrollbar-gutter: stable}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-size-adjust: 0.5;
  color:var(--gray-dark);
  background:var(--brand-cream);
  line-height:1.6;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  position: relative;
}
img{max-width:100%;display:block}
.container{
  width:min(1120px,92%);
  margin-inline:auto;
  max-width: 100%;
  box-sizing: border-box;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:16px;top:16px;background:#fff;color:#000;padding:.5rem .75rem;border-radius:.5rem;z-index:1000}

/* Header */
.site-header{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(8px);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid #eaeaea;
  z-index:100
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.75rem 0.5rem;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;padding-left: 0.25rem}
.logo{height:36px;width:auto;filter:drop-shadow(0 1px 0 rgba(0,0,0,.03))}
.brand-wordmark{font-weight:800;letter-spacing:.04em;color:var(--brand-navy);font-size:clamp(1.25rem,2.2vw,2rem);line-height:1}
.main-nav{display:flex;gap:1rem;align-items:center}
.nav-link{color:var(--gray-dark);text-decoration:none;font-weight:500}
.nav-link:hover{color:var(--brand-navy)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:10px;padding:.7rem 1rem;border:1px solid transparent;cursor:pointer;text-decoration:none}
.btn-primary{background:var(--brand-navy);color:#fff}
.btn-primary:hover{opacity:.95}
.btn-accent{background:var(--brand-coral);color:#fff}
.btn-accent:hover{filter:brightness(.98)}
.btn-light{background:#fff;color:var(--gray-dark);border-color:#e5e7eb}
.btn-block{width:100%}

/* Hero */
.hero{
  background:linear-gradient(180deg, var(--brand-navy) 0%, #1a237e 50%, var(--brand-navy) 72%, transparent 72%), var(--brand-cream);
  color:#fff;
  padding:1.5rem 0 8rem;
  min-height:620px;
  position: relative;
  overflow: hidden; /* Prevent content from spilling outside */
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2.5rem;
  align-items:center;
  width: 100%;
}
.hero-title{
  font-size:clamp(2rem,3.8vw,3.25rem);
  line-height:1.1;
  margin:0 0 1rem;
  font-weight:800
}
.lead{
  font-size:1.125rem;
  margin:0 0 .5rem;
  color:#EBEEE6
}
.hero-copy{
  width: 100%;
}
.sublead{
  color:#dfe4ee;
  margin:0 0 1.25rem;
  font-size:1.125rem
}
.hero-ctas{
  display:flex;
  gap:.75rem
}
.hero-visual{
  display:flex;
  justify-content:center;
  align-self:end
}
.hero-phone{
  width:min(420px,94%);
  height:auto;
  border-radius:28px;
  box-shadow:0 22px 70px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.18);
  clip-path:inset(0% 13% 0% 13% round 28px);
  -webkit-clip-path:inset(0% 13% 0% 13% round 28px);
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 960px) {
  .hero {
    padding: 2rem 0 5rem;
    min-height: unset;
    background: var(--brand-navy); /* Simpler background for smaller screens */
  }
  .hero-grid {
    gap: 1.5rem;
  }
  .hero-phone {
    width: min(380px, 92%);
  }
  .hero-title {
    font-size: 2.25rem;
    padding-right: 0.5rem;
  }
  .lead, .sublead {
    padding-right: 0.5rem;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 1.5rem 0 4rem;
    background: var(--brand-navy);
  }
  .hero-title {
    font-size: 2.25rem;
  }
  .lead, .sublead {
    font-size: 1rem;
  }
  .hero-visual {
    margin-top: 1.5rem;
    justify-content: center;
    width: 100%;
    display: flex;
  }
  .hero-phone {
    width: min(340px, 90%);
    margin: 0 auto;
    height: auto;
  }
}

/* Sections */
.section{padding:3rem 0}
.section.alt{background:var(--gray-light)}
.section.cream{background:var(--brand-cream)}
.section h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 1rem;color:var(--brand-navy)}

/* Onboarding highlight (pink background) */
.section.onboarding{background:var(--brand-coral); color:#fff; padding-bottom:1.5rem}
/* Left-align content in the onboarding banner */
.section.onboarding .trust{justify-content:flex-start;text-align:left}

/* Nudge the apply-section copy up a bit to align with the lifted form card (desktop only) */
@media (min-width: 961px){
  .apply.overlap .apply-grid > div:first-child{margin-top:-1.25rem}
}
.onboarding-title{color:#fff;margin:0;font-weight:800;letter-spacing:.01em;font-size:clamp(2rem,4.2vw,3rem)}
/* Increase specificity to override generic .section h2 color */
.section.onboarding h2.onboarding-title{color:#fff !important}

/* Overlap the apply form card onto the previous section (desktop only) */
.apply.overlap .form{margin-top:-6rem;position:relative;z-index:2;box-shadow:0 16px 36px rgba(0,0,0,.12)}
@media (max-width:960px){
  .apply.overlap .form{margin-top:0}
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem;
  margin:0;
  padding:0;
  list-style:none
}
.feature{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:1rem;
  background:#fff;
  border:1px solid #eef2f7;
  border-left:8px solid var(--brand-coral);
  border-radius:14px;
  padding:1.25rem;
  box-shadow:0 8px 22px rgba(0,0,0,.04);
  height: 100%;
}
.feature .icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:10px;
  background:var(--brand-lime);
  color:#111827;
  font-weight:900;
  flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)
}
.feature h3{margin-top:0; margin-bottom: 0.5rem;}
.feature p {margin-top: 0; margin-bottom: 0;}
.feature .icon svg{width:1.25rem;height:1.25rem;display:block}

/* Why section layout with photo */
.why-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:2rem;
  align-items:center;
  margin-top: 1.5rem;
}
.why-photo{margin:0}
.why-photo img{
  border-radius:14px;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .feature-grid {
    gap: 1rem;
  }
  .why-grid {
    gap: 1.5rem;
  }
  .why-photo {
    order: -1; /* Photo first on mobile */
  }
}

@media (max-width: 480px) {
  .feature {
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }
  
  .feature .icon {
    margin-bottom: 0.5rem;
  }
}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.step{
  background:var(--brand-navy);
  color:#fff;
  border:1px solid #eef2f7;
  border-left:none;
  border-radius:14px;
  padding:1.5rem;
  box-shadow:0 8px 22px rgba(0,0,0,.04);
  position:relative;
  padding-top:2.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.step h3 {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}
.step p {
  margin-top: 0;
  margin-bottom: 0;
}
.step-number{
  position:absolute;
  top:-20px;
  left:20px;
  background:var(--brand-coral);
  color:#fff;
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  font-size:1.25rem;
  box-shadow:0 4px 8px rgba(0,0,0,.15);
}

@media (max-width: 768px) {
  .steps {
    gap: 2rem;
  }
  .step {
    padding: 1.25rem;
    padding-top: 2.5rem;
  }
}

.benefits-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.checklist{list-style:none;padding-left:0;margin:0}
.checklist li{padding-left:1.25rem;position:relative;margin:.35rem 0}
.checklist li::before{content:"✓";position:absolute;left:0;color:var(--brand-navy);font-weight:800}

.trust{display:flex;align-items:center;justify-content:space-between}
.eyebrow{text-transform:uppercase;font-size:.8rem;letter-spacing:.08em;color:#6b7280;margin:.25rem 0}
.badge{background:var(--brand-lime);color:#111827;padding:.45rem .65rem;border-radius:999px;font-weight:700}

/* Apply / Form */
/* Remove coral strip so left column sits on neutral background */
.apply{background:linear-gradient(180deg, var(--gray-light) 0, #ffffff 62%)}
.apply-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:start}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.04)}
.form{padding:1.5rem}
.field{display:flex;flex-direction:column;margin-bottom:1rem}
.field-inline{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{font-weight:600;margin-bottom:.35rem}
input,select{border:1px solid #d1d5db;border-radius:10px;padding:.7rem .8rem;font:inherit;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none}
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.5rem;
}
input:focus,select:focus{outline:none;box-shadow:0 0 0 3px rgba(23,28,97,.18);border-color:var(--brand-navy)}
.form-footnote{font-size:.85rem;color:#6b7280;margin:.75rem 0 0}

@media (max-width: 768px) {
  .form {
    padding: 1.25rem;
  }
  
  input, select, .btn {
    font-size: 16px; /* Prevents zoom on iOS */
    min-height: 44px; /* Better touch targets */
  }
}

/* Footer */
.site-footer{background:#fff;border-top:1px solid #eaeaea}
.footer-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.muted{color:#6b7280;text-decoration:none}

/* Mobile Nav */
.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 101;
}

.nav-icon {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--brand-navy);
  position: relative;
  transition: background 0.2s ease;
}

.nav-icon:before,
.nav-icon:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--brand-navy);
  left: 0;
  transition: transform 0.2s ease;
}

.nav-icon:before {
  top: -8px;
}

.nav-icon:after {
  top: 8px;
}

.mobile-nav-toggle[aria-expanded="true"] .nav-icon {
  background: transparent;
}

.mobile-nav-toggle[aria-expanded="true"] .nav-icon:before {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-nav-toggle[aria-expanded="true"] .nav-icon:after {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Responsive */
@media (max-width: 960px){
  .hero{
    background:var(--brand-navy);
    min-height:unset;
    padding-bottom: 4rem;
    width: 100%;
  }
  .hero-grid,.apply-grid{
    grid-template-columns:1fr;
    width: 100%;
  }
  .hero-visual {
    margin-top: 1.5rem;
    width: 100%;
  }
  .hero-phone {
    width: min(360px, 94%);
    margin: 0 auto;
  }
  .form {
    padding: 1.25rem;
  }
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 768px){
  .feature-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .benefits-grid{grid-template-columns:1fr}
  
  .mobile-nav-toggle {
    display: block;
    margin-right: 0.5rem;
  }
  
  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: white;
    flex-direction: column;
    align-items: flex-start;
    padding: 5rem 1.5rem 2rem;
    transition: right 0.3s ease;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    z-index: 100;
    box-sizing: border-box;
  }
  
  .main-nav.open {
    right: 0;
  }
  
  .nav-link {
    padding: 1rem 0;
    width: 100%;
    border-bottom: 1px solid #eaeaea;
  }
  
  .main-nav .btn {
    margin-top: 1rem;
    width: 100%;
  }
  
  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 99;
  }
  
  .overlay.open {
    display: block;
  }
  
  .site-header {
    position: sticky;
  }
  
  .onboarding-title {
    font-size: 1.5rem;
  }
  
  .field-inline {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  
  .footer-inner {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
}

/* Desktop-specific adjustments */
@media (min-width: 961px) {
  .hero-grid {
    padding-left: 0;
    padding-right: 0;
    align-items: center;
    gap: 2rem;
  }
  
  .hero-title, .lead, .sublead {
    padding-right: 0;
    margin-right: 0;
  }
  
  .hero-copy {
    padding-right: 1rem;
  }
  
  .container {
    width: min(1120px, 94%);
    padding-left: 0;
    padding-right: 0;
  }
}

/* Tablet-specific adjustments (especially for iPad and similar) */
@media (min-width: 601px) and (max-width: 820px) {
  .hero-grid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  .hero-title {
    font-size: 2.2rem;
    word-wrap: break-word;
    margin-right: 0.5rem;
  }
  
  .lead, .sublead {
    margin-right: 0.5rem;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
  
  .hero {
    padding-top: 1rem;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .feature {
    padding: 0.75rem;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .feature .icon {
    width: 2rem;
    height: 2rem;
  }
  
  .step {
    padding: 1rem;
    padding-top: 2.25rem;
  }
  
  .btn {
    padding: 0.6rem 0.8rem;
  }
  
  .container {
    width: min(1120px, 94%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Overlap helper to visually pull section upward without causing layout shift */
.pull-up{position:relative}
@media (min-width:961px){
  .pull-up{--pull-distance:4rem;top:calc(var(--pull-distance)*-1);margin-bottom:calc(var(--pull-distance)*-1)}
  /* Reserve space before pull so later content doesn't jump */
  .pull-up::before{content:"";display:block;height:var(--pull-distance);width:1px;margin-bottom:calc(var(--pull-distance)*-1)}
}
@media (max-width:960px){
  .pull-up{--pull-distance:2rem;top:calc(var(--pull-distance)*-1);margin-bottom:calc(var(--pull-distance)*-1)}
}
@media (max-width:480px){
  .pull-up{--pull-distance:1rem;top:calc(var(--pull-distance)*-1);margin-bottom:calc(var(--pull-distance)*-1)}
}

/* Aspect-ratio utility to reserve image space */
.img-aspect{position:relative;display:block;width:100%;aspect-ratio:var(--aspect-ratio);}
.img-aspect > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

@media (prefers-reduced-motion: reduce){
  .pull-up{top:0;margin-bottom:0}
  .pull-up::before{display:none}
}