/* ---------- Palette (tweak to match your images/logo) ---------- */
:root{ 
  --blue:  #0BA3D9;   /* header band */
  --mango: #F4C542;   /* button yellow */
  --cheek: #FF7A3D;   /* optional accent */
  --ink:   #1f2328;   /* body text */
  --soft:  #F3F2EF;   /* light section bg */
  --card:  #ffffff;   /* card bg */
  --line:  #eaeaea;   /* borders */
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font: 16px/1.6 'Poppins',  system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
}
img{ max-width:100%; display:block; }
.container{ width: min(1100px, 92%); margin: 0 auto; }
h1,h2,h3{ margin:0 0 .45em }

/* === Compact overlay nav === */
.nav-toggle{
  position: fixed;
  top: 14px; left: 14px;
  z-index: 1100;
  width: 38px; height: 38px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #0BA3D9;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  display: grid; place-items: center;
  cursor: pointer;
}
.nav-toggle:focus{ outline: 2px solid #0BA3D9; outline-offset: 2px; }

/* === NAV (fixed to viewport; narrow left drawer) === */
:root { --navW: 200px; }          /* tweak width here if needed */

.nav-toggle{
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  left: calc(env(safe-area-inset-left) + 12px);
  z-index: 4000;
  width: 40px; height: 40px;
  border: 0; border-radius: 999px;
  background: rgba(255,255,255,.28);   /* default = “clearish” */
  color: var(--blue);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s ease;
}
.nav-toggle.on-hero{ background:#fff; } /* solid when over hero */
.nav-toggle:focus{ outline: 2px solid var(--blue); outline-offset: 2px; }

.nav-drawer{
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: var(--navW);
  max-width: 86vw;                  /* safeguard on tiny phones */
  background: var(--blue);
  color: #fff;
  transform: translateX(-100%);     /* hidden off-canvas */
  transition: transform .28s ease;
  z-index: 3500;
  padding: 16px 12px 24px;
  box-shadow: 4px 0 24px rgba(0,0,0,.25);
  overflow-y: auto;
  display: flex; flex-direction: column; align-items: center;
	flex-direction: column;
  align-items: center;
}
.nav-drawer.open{ transform: translateX(0); }

.nav-drawer .nav-logo{ margin: 4px 0 12px; }
.nav-drawer .nav-logo img{ width: 44px; height:auto; display:block; }

.nav-drawer ul{
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: flex; flex-direction: column; gap: 8px; text-align: center;
}
.nav-drawer a{
  display:block; color:#fff; text-decoration:none;
  padding:10px; border-radius:6px; font-weight:600;
}
.nav-drawer a:hover{ background: rgba(255,255,255,.12); }

/* Backdrop covers the whole screen while drawer is open */
.nav-backdrop{
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0,0,0,.28);
}
/* Keep it discreet over the hero (no layout shift) */
.hero{ position: relative; } /* your existing hero stays as-is */
/* ---------- Hero ---------- */
.hero{
  background: var(--blue);
  color:#fff;
  padding: 12px 0 28px;
}

/* text column gets a bit more room than image */
.hero-content{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;   /* text | image */
  gap: 28px;
  align-items: center;
  margin-top: 12px;
}

/* stack logo + heading + lead and CENTER them */
.hero-text{
  display: flex;
  flex-direction: column;
  align-items: center;        /* was flex-start */
  text-align: center;         /* center text inside */
  gap: 8px;
  color: #ffffff;
}

/* compact logo above heading */
.brand-compact{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.brand-compact img{ height: 48px; display:block; }

/* headline + lead */
.hero-text h1{
  font-size: clamp(28px, 4.2vw, 35px);
  margin: 0;
  color: #F3F2EF; 
}
.lead{
  font-size: 1.1rem;
  opacity: .95;
  max-width: 50ch;
  margin: 0;
}

/* image */
.hero-media img{
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  max-width: 420px;
  width: 100%;
  height: auto;
  margin: 0 auto;             /* centers image in its column */
}

/* mobile */
@media (max-width: 900px){
  .hero-content{ grid-template-columns: 1fr; }
}

/* ---------- How It Works ---------- */
.how{ background:#fafaf9; padding: 48px 0; }
.how h2{ font-size: clamp(22px, 3vw, 30px); text-align:center; margin-bottom:16px; }
.icons-row{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
}
.icon-card{
  background:var(--card);
  background-color: #f7f6f4; 
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 18px;
  min-width:140px;
  text-align:center;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  
}
.icon-card img{ height:70px; margin: 0 auto 8px; }
.icon-card span{ font-weight:600; }

/* ---------- Why + Mango ---------- */
.why{
  background: var(--soft);
  padding: 48px 0;
}

.why-grid{
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr; /* symmetrical columns */
}

.why-card,
.mango-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  display: flex;               /* image + copy stack */
  flex-direction: column;
  overflow: hidden;            /* keeps rounded corners on image */
}

/* images for BOTH cards (this is the piece you were missing) */
.why-card img,
.mango-card img{
  width: 100%;
  height: 240px;               /* same height = lined up */
  object-fit: cover;           /* crop nicely, no stretching */
  border-radius: 14px 14px 0 0;
  display: block;
}

/* text blocks inside each card */
.why-copy,
.mango-copy{
  padding: 14px 18px;
}

.why-copy h3,
.mango-copy h3{
  font-size: 22px;
  margin-top: 0;
  text-align: center;
}

.why-grid {
  display: flex;
  gap: 2rem; /* space between the two cards */
  align-items: stretch; /* makes them equal height */
}

.why-card,
.mango-card {
  flex: 1; /* equal width */
  display: flex;
  flex-direction: column;
}

/* OLD (remove this) */
/* .bullets{ columns: 2; margin: 10px 0 0; padding-left: 18px; } */

/* Bullets — two-column grid with native bullets */
.bullets{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;          /* row gap | column gap */
  margin: 12px 0 0;
  padding-left: 1.25rem;  /* space before bullets */
  list-style: disc;
  list-style-position: outside;
}
.bullets li{ margin: 4px 0; }

/* Mobile: stack and give extra left space so text isn't tight */
@media (max-width: 600px){
  .bullets{
    grid-template-columns: 1fr;
    padding-left: 1.75rem;  /* more breathing room on iOS */
  }
}

/* mobile: stack the cards */
@media (max-width: 900px){
  .why-grid{ grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */
.faq{ background:#fff; padding: 56px 0; }
.faq h2{
  font-size: clamp(22px, 3vw, 30px);
  margin-bottom: 18px;
  border-left: 8px solid var(--mango);
  padding-left: 12px;
}
.faq-item{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.faq-item:hover{ border-color:#ddd; box-shadow:0 4px 16px rgba(0,0,0,.07); }
.faq-item summary{
  cursor:pointer; font-weight:700; font-size:18px; display:flex; align-items:center;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"▸"; margin-left:auto; opacity:.6; transition: transform .2s ease, opacity .2s ease;
}
.faq-item[open] summary::after{ transform: rotate(90deg); opacity:.9; }
.faq-item p{ margin:10px 0 0; color:#555; }

/* ---------- Videos (match Why/Mango style) ---------- */

.video-section{
  background: var(--soft);
  padding: 48px 0;
}

/* Make video cards look like your Why/Mango cards */
.video-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 20px;
}

.video-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  padding: 14px 16px 16px;
}

/* Video itself mirrors the image style: rounded + full width */
.video-card iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
  display: block;
}

/* Match the Why/Mango title look */
.video-card h3{
  font-size: 16px;          /* same size as those cards */
  font-weight: 680;
  text-align: center;
  margin: 10px 0 6px;
  letter-spacing: .2px;
}

/* Centered, softer body copy like your cards */
.video-card .video-desc{
  text-align: center;
  color: #555;
  font-size: 15px;
  line-height: 1.5;
  max-width: 500px;
  margin: 0.25rem auto 0.5rem; /* small spacing, centered */
}

/* Keep the “open video” link subtle */
.video-card .watchlink{
  text-align: center;
  margin: 6px 0 0;
}
.video-card .watchlink a{ text-decoration: none; }
.video-card .watchlink a:hover{ text-decoration: underline; }

/* Mobile: single column */
@media (max-width: 768px){
  .video-grid{ grid-template-columns: 1fr; }
}

/* Only video pages */
.video-page .video-card { text-align:center; }
.video-page .video-card h4 {
  margin: .75rem 0 .35rem;
  font-size: 18px;
  line-height: 1.25;
}
.video-page .video-card p {
  max-width: 600ch;      /* tighter copy width under video */
  margin: .25rem auto 0;
  font-size: 14.5px;
  color: #58606a;
}

.video-link {
  text-align: center;
  margin-top: 2rem;   /* gives breathing room below the text */
}

.video-link .btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
}

/* ---------- Signup (single CTA) ---------- */
.signup-cta{
  background:#F3F2EF;
  text-align:center;
  padding: 70px 20px;
  border-top:1px solid var(--line);
}
.signup-cta h2{ font-size: clamp(22px,3vw,28px); margin-bottom:10px; }
.signup-cta p{ margin:0 0 20px; color:#555; }
.signup-form{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
}
.signup-form input[type="email"]{
  padding:12px 14px;
  border:1px solid #ddd;
  border-radius: 10px;
  min-width: 260px;
  font-size: 16px;
}
.btn.cta{
  background: var(--mango);
  color:#000;
  border:none;
  padding:12px 20px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  transition: transform .02s ease, filter .2s ease;
}
.btn.cta:hover{ filter: brightness(0.95); }
.btn.cta:active{ transform: translateY(1px); }

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  background:#0BA3D9;
  color:#F3F2EF;
}
.foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
}

/* lay out icons in a row and center them */
.foot-nav{
  display:flex;
  align-items:center;
  gap:12px;                 /* space between icons/links */
}
.foot-nav a{
  display:inline-flex;      /* centers the icon inside the link */
  align-items:center;
  color:#F3F2EF;               /* was #555 */
  text-decoration:none;
}
.foot-nav a:hover{ text-decoration:underline; }

/* override the global img rule for footer icons */
.foot-nav img{
  display:block;            /* keep crisp; no baseline issues */
  height:24px;
  width:auto;
}



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

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .hero-content{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns: 1fr; }
}

.origin-title {
  text-align: center;
}
/* Hide the 'Open this video' link on the gallery */
.video-card .watchlink {
  display: none;
}


.btn {
  text-decoration: none;
}