/* ---------- Root theme ---------- */
:root{
  --font-heading:'Playfair Display',serif;
  --font-body:'Source Sans Pro',sans-serif;
  --color-bg:#fff;
  --color-fg:#000;
  --color-muted:#444;
  --max-width:72rem;          /* 1152px */
}

*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  line-height:1.6;
  color:var(--color-fg);
  background:var(--color-bg);
}

/* Typography */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  line-height:1.25;
  margin-bottom:.5em;
}
h1{font-size:2.2rem;}
h2{font-size:1.75rem;}
h3{font-size:1.35rem;}
p{margin-bottom:1rem;}
.lede{font-size:1.25rem;font-weight:600;}

ul{list-style:none;}
.checklist li{
  padding-left:1.4em;
  margin-bottom:.5em;
  position:relative;
}
.checklist li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  font-weight:700;
}

a{color:inherit;text-decoration:underline;}
a.btn-primary{
  display:inline-block;
  padding:.75em 1.5em;
  border:1px solid var(--color-fg);
  text-decoration:none;
  font-weight:600;
}

/* Layout */
.container{
  width:min(100% - 2rem,var(--max-width));
  margin-inline:auto;
}
.section{padding:4rem 0;}
.section.alt{background:#f9f9f9;}
.flow>*+*{margin-top:1.25rem;}

/* Header & Nav */
.site-header{
  border-bottom:1px solid #e5e5e5;
  position:sticky;
  top:0;
  background:var(--color-bg);
  z-index:1000;
}
.logo{
  font-size:1.4rem;
  margin:0;
}
.logo .subtitle{display:block;font-size:.8rem;font-weight:400;color:var(--color-muted);}
.main-nav{
  margin-top:1rem;
}
.main-nav ul{display:flex;gap:1rem;flex-wrap:wrap;}
.main-nav a{text-decoration:none;font-weight:600;}
.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;}

@media(max-width:48rem){      /* 768px */
  .main-nav ul{display:none;flex-direction:column;gap:.75rem;margin-top:1rem;}
  .main-nav ul.open{display:flex;}
  .nav-toggle{display:block;}
}

/* Hero */
.hero{
  padding:5rem 0 4rem;
  text-align:center;
}
.hero h2{font-size:2rem;margin-bottom:1rem;}
.hero .btn-primary{margin-top:1.5rem;}

/* Footer */
.site-footer{
  border-top:1px solid #e5e5e5;
  padding:2rem 0;
  text-align:center;
  font-size:.9rem;
  color:var(--color-muted);
}

/* --- extras for Step 2 --- */
.emoji-list{list-style:none;padding:0;margin:0;}
.emoji-list li{margin:.4rem 0;padding-left:1.8em;position:relative;font-size:1.05rem;}
.emoji-list li::before{
  content:attr(data-icon);
  position:absolute;left:0;top:0;
}
/* Process ordered list */
ol.process{counter-reset:step;list-style:none;padding:0;margin:0;}
ol.process li{
  counter-increment:step;
  margin:.8rem 0 .8rem 0;
  padding-left:2.4em;
  position:relative;
}
ol.process li::before{
  content:counter(step);
  position:absolute;left:0;top:0;
  display:inline-block;
  width:1.8em;height:1.8em;
  border:1px solid var(--color-fg);
  text-align:center;line-height:1.7em;
  font-family:var(--font-heading);font-weight:700;
}
details{border:1px solid #e5e5e5;padding:1rem;border-radius:4px;}
details+details{margin-top:1rem;}
details summary{cursor:pointer;font-weight:600;}