:root{
  --bg:#ddd340;       /* slightly dim yellow (solid) */
  --card:#ffffff;     /* white cards on light background */
  --muted:#475569;    /* slate-600 for subdued text */
  --text:#111827;     /* slate-900 for strong contrast */
  --border:#e5e7eb;   /* light border */
  --brand:#1d4ed8;    /* blue-700 for links/buttons */
  --brand-2:#1e40af;  /* darker hover */
  --good:#059669;     /* green-600 */
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1040px;margin:0 auto;padding:1rem}

/* Header becomes light with dark text for contrast */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:1rem}
.brand{font-weight:800;color:var(--text)}
nav{margin-left:auto;display:flex;gap:.5rem}
nav a{padding:.5rem .75rem;border-radius:.5rem;color:var(--text)}
nav a.active, nav a:hover{background:#f8fafc;text-decoration:none}
nav a.cta{background:var(--brand);color:white} nav a.cta:hover{background:var(--brand-2)}
.menu{display:none;margin-left:.5rem;font-size:1.25rem;background:#f8fafc;color:var(--text);border:1px solid var(--border);border-radius:.5rem;padding:.35rem .6rem}

/* HERO: SOLID fill, no gradient */
.hero{border-bottom:1px solid var(--border); background: var(--bg);}
.hero .container{padding:4rem 1rem}
.hero h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 .5rem}
.hero p{margin:0 0 1.2rem;color:var(--text)}

.actions{display:flex;gap:.75rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.75rem 1rem;background:var(--brand);color:white;border:0;border-radius:.75rem;font-weight:700}
.btn.ghost{background:#ffffff;color:var(--text);border:1px solid var(--border)}
.btn:hover{background:var(--brand-2);text-decoration:none}
.btn.ghost:hover{background:#f8fafc}

/* Cards and sections adapted for light theme */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding:2rem 1rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:1rem}
.muted{color:var(--muted)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}

/* Pricing */
.pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.plan{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:1rem;text-align:center}
.plan.featured{border-color:#93c5fd} /* sky-300 */
.price{font-size:2rem;font-weight:800;margin:.25rem 0 1rem;color:var(--text)}

/* Forms on light background */
.form{display:grid;gap:.75rem;max-width:640px}
.form label{display:grid;gap:.35rem;color:var(--muted)}
.form input,.form textarea,.form select{
  width:100%;padding:.75rem .8rem;
  background:#ffffff;color:var(--text);
  border:1px solid var(--border);border-radius:.5rem
}

/* Phone input widget width */
.iti { width: 100%; }
.iti__country-list { max-height: 260px; } /* comfortable scroll */


/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:2rem;color:var(--muted);background:rgba(255,255,255,.5)}

/* Blog */
.post+.post{margin-top:1.25rem}
.readmore{display:inline-block;margin-top:.25rem}

/* --- Drawer menu for Blog / My Story --- */
.site-header .container{position:relative}
.drawer{
  display:none;
  position:absolute;
  right:1rem;
  top:3.25rem;
  background:#ffffff;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:.75rem;
  padding:.5rem;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  z-index:50;
}
.drawer a{
  padding:.5rem .75rem;
  border-radius:.5rem;
  white-space:nowrap;
  color:var(--text);
}
.drawer a:hover{
  background:#f8fafc;
  text-decoration:none;
}

/* Show hamburger on all sizes */
.menu{display:inline-block}

/* Header layout */
.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

/* Primary menu: ALWAYS horizontal */
.site-header nav.primary {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: nowrap;
}
.site-header nav.primary a { white-space: nowrap; }

/* Drawer (hamburger) menu: off-canvas right */
.site-header nav.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: 35%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: #fff;
  box-shadow: -8px 0 24px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform .3s ease;
  z-index: 1000;
}


/* When opened, slide in */
.site-header nav.drawer.open {
  transform: translateX(0);
}

/* Ensure mobile never stacks the primary menu vertically */
@media (max-width: 640px) {
  .site-header nav.primary {
    flex-direction: row !important;
  }
  .site-header .menu { display: inline-flex; }
}



/* Ensure drawer shows when open and hamburger clickable */
.drawer.open{display:block}
.site-header .menu{position:relative; z-index:60; cursor:pointer}




.site-header nav.drawer a{ display:block }     /* full-width clickable rows */

/* Features grid: responsive columns */
@media (max-width: 960px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .features { grid-template-columns: 1fr; }
}

/* (Optional) Pricing: make it stack nicely too */
@media (max-width: 960px) {
  .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pricing { grid-template-columns: 1fr; }
}