:root{
  --bg: #FFFDF7;           /* light ivory background */
  --surface: #ffffff;      /* cards */
  --ink: #1F2937;          /* deep charcoal text */
  --muted: #4B5563;        /* muted text */
  --brand: #047857;        /* rich emerald green */
  --accent: #F4FBF8;       /* soft mint for alt sections */
  --ring: rgba(4,120,87,0.25);
  --radius: 16px;
  --shadow: 0 10px 25px rgba(0,0,0,0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Layout helpers */
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.section--alt{background:var(--accent)}
.section-title{font-size:clamp(1.5rem, 2.5vw, 2rem); margin:0 0 20px}
.row-head{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,0.8);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom:1px solid #e5e7eb;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand-logo{display:block;border-radius:12px}
.brand-name{font-weight:800}
.badge{
  display:inline-block; padding:4px 8px; border-radius:999px;
  font-size:12px; background:#FEF9C3; color:#92400E; border:1px solid #FDE68A;
}

/* Nav */
.nav{position:relative}
.nav-list{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav-list a{text-decoration:none;color:var(--ink); font-size:14px}
.nav-toggle{display:none}

@media (max-width: 760px){
  .nav-toggle{display:inline-flex;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:6px 10px}
  .nav-list{position:absolute; right:0; top:48px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:var(--shadow); padding:10px; display:none; flex-direction:column; min-width:180px}
  .nav-list[data-open="true"]{display:flex}
}

/* Hero */
.hero{
  background: radial-gradient(1200px 500px at 10% -10%, #ffffff 10%, #f6fff9 60%, #ecfdf5 100%);
  border-bottom:1px solid #e5e7eb;
}
.hero-inner{display:grid;grid-template-columns:1.1fr 1fr; gap:32px; padding:72px 0}
.hero-copy .headline{font-size:clamp(2rem, 5vw, 3.2rem); line-height:1.1; margin:0 0 12px; font-weight:900; color:var(--ink);}
.hero-copy .subhead{color:var(--muted); margin:0 0 20px; font-size:1.05rem}
.hero .muted{color:var(--muted)}
.trustnote{color:var(--muted); font-size:0.95rem}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}

.hero-grid{display:grid; gap:14px; align-content:start}
.hero-grid .mini-card{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--surface); border:1px solid #e5e7eb; border-radius:14px; padding:14px; box-shadow:var(--shadow);
}
.mini-icon{font-size:22px}
.mini-card h3{margin:0 0 4px; font-size:1rem}

/* Grid & Cards */
.grid{display:grid; gap:16px}
.grid--3{grid-template-columns:repeat(1,1fr)}
.grid--4{grid-template-columns:repeat(1,1fr)}

@media (min-width: 720px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
  .hero-inner{grid-template-columns:1.1fr 1fr}
}

.card{
  background:var(--surface);
  border:1px solid #e5e7eb;
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.card--cta .btn{margin-top:10px}
.card--join{padding:24px}

/* Step bubble */
.step{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--brand);color:#fff;font-weight:700;margin-bottom:10px;
}

/* Lists */
.ticklist{padding-left:0; list-style:none; margin:0}
.ticklist li{padding-left:22px; position:relative; margin:8px 0}
.ticklist li::before{content:"✔"; position:absolute; left:0; top:0; color:var(--brand)}

/* Buttons */
.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  background: var(--brand);
  color:#fff; !important;                /* ← ensure this is white */
  text-decoration:none;
  padding:12px 16px;
  border-radius:12px;
  font-weight:600;
  font-size:0.95rem;
  box-shadow: 0 6px 16px rgba(4,120,87,0.25);
  transition: background 0.2s, transform 0.2s;
}
.btn:hover{transform:translateY(-1px); background:#036748}
.btn:active{transform:translateY(0)}
.btn--ghost{
  background:#fff;
  color:var(--brand);
  border:1px solid #e5e7eb;
  box-shadow:none;
}
.btn--ghost:hover{
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* Center the Beehiiv box and add spacing before footer */
.beehiiv-center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 80px auto;   /* space above and below */
  text-align: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Footer */
.site-footer{border-top:1px solid #e5e7eb; background:#fff; padding:28px 0}
.footer-inner{display:grid; gap:16px; align-items:center}
.brand-row{display:flex; align-items:center; gap:10px}
.footer-nav{display:flex; gap:14px; flex-wrap:wrap}
.footer-nav a{text-decoration:none; color:#4B5563; font-size:14px}
.tiny{font-size:12px; color:#6b7280}
.visually-hidden{position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); white-space:nowrap}

/* Motion */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease}
.reveal.reveal--in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none}
  .btn:hover,.btn:active{transform:none}
}
/* Force the small nav button to have white text */
.site-header .btn {
  color: #fff !important;
}
.site-header .btn:hover {
  color: #fff !important;
}