/* Header */
.site-header{
  position: sticky; top:0; backdrop-filter: blur(6px);
  background: color-mix(in lab, var(--bg) 85%, white);
  border-bottom: 1px solid #eee;
  z-index: 50;
}
.header-wrap{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.5rem; font-weight:600; text-decoration:none; color:var(--text); }
.nav{ display:flex; gap:1rem; align-items:center; }
.nav a{ text-decoration:none; color:var(--text); }
.nav-toggle{ display:none; background:none; border:none; font-size:1.25rem; }

/* Hero */
.hero{ padding: clamp(2rem, 6vw, 5rem) 0; }
.grid-2{
  display:grid; gap:2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .grid-2{ grid-template-columns: 1.1fr .9fr; align-items:center; }
}

.hero-copy .cta-row{ display:flex; gap:.75rem; margin:1rem 0; }
.bullets{ margin:1rem 0 0; padding-left:1rem; color:var(--muted); }

.hero-art .mockup-card{
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
}
.mockup-header{
  padding:.75rem 1rem; border-bottom:1px solid #eee; font-weight:600; background: var(--bg-alt);
}
.mockup-body{ padding:1rem; color: var(--muted); }

/* Sections */
.section{ padding: 3.5rem 0; }
.section.alt{ background: var(--bg-alt); }
.section-title{ text-align:center; margin-bottom:2rem; }

/* Cards & steps */
.grid-3{ display:grid; gap:1rem; grid-template-columns: 1fr; }
@media (min-width: 960px){ .grid-3{ grid-template-columns: repeat(3, 1fr); } }

.cards .card{ background:var(--card); border-radius:var(--radius); padding:1.25rem; box-shadow: var(--shadow); }

.steps .step-num{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:var(--brand); color:white; font-weight:700; margin-bottom:.5rem;
}

/* CTA band */
.cta-band{ background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%); color:white; }
.cta-band__inner{ padding: 2.25rem 0; text-align:center; }
.cta-band .btn{ --btn-bg: white; --btn-fg: var(--brand-dark); }

/* Footer */
.site-footer{ border-top:1px solid #eee; padding:2rem 0; }
.footer-grid{
  display:grid; gap:1rem; align-items:start;
  grid-template-columns: 1fr;
}
.footer-grid nav{ display:flex; gap:1rem; flex-wrap:wrap; }
.copy{ text-align:left; }
@media (min-width: 800px){
  .footer-grid{ grid-template-columns: 1.4fr .8fr .8fr; }
  .copy{ text-align:right; }
}

/* ------- Responsive container & gutters ------- */
:root{
  --gutter: clamp(16px, 4vw, 40px);
  --container: min(1100px, calc(100% - var(--gutter)*2));
}
.container{ width: var(--container); margin-inline: auto; }

/* Tighten and balance hero on small screens */
.hero .hero-copy{ max-width: 58ch; }
.hero .badge{ margin:.75rem 0 1rem; }

/* Add a 2-col step for mid screens (phones → tablets → desktop) */
@media (min-width: 720px){
  .grid-3{ grid-template-columns: 1fr 1fr; }
}

/* Sections inherit the warm page background */
.section{ background: transparent; }

/* “Card-like” surfaces remain white on top of cream */
.card, .mockup-card, .cta-band__inner, .waitlist{
  background: var(--surface);
  box-shadow: var(--shadow);
  border: 1px solid rgba(17,24,39,.06);
}