:root{
  --ground:#faf9f5; --surface:#fff; --surface-2:#f3f2ec;
  --ink:#1c2a24; --ink-2:#4a5b53; --ink-3:#77877f;
  --line:#dcdcd4; --line-2:#e9e8e1;
  --green:#2f5a3e; --green-soft:#e4ede6;
  --clay:#b0563a; --clay-soft:#f6e6e0;
  --gold:#a07b28; --gold-soft:#f5eeda;
  --shadow:0 2px 4px rgba(28,42,36,.06),0 14px 36px -18px rgba(28,42,36,.3);
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#101613; --surface:#18201c; --surface-2:#1f2823;
    --ink:#e8efe9; --ink-2:#b4c3ba; --ink-3:#84948b;
    --line:#2c3831; --line-2:#242f29;
    --green:#6fbf8c; --green-soft:#1a2c21;
    --clay:#e08a6c; --clay-soft:#321d16;
    --gold:#d8b45c; --gold-soft:#2b2412;
    --shadow:0 2px 4px rgba(0,0,0,.4),0 14px 36px -18px rgba(0,0,0,.8);
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased}
.wrap{max-width:660px;margin:0 auto;padding:30px 22px 90px}
.crumb{font-size:.85rem;color:var(--ink-3);letter-spacing:.04em;margin-bottom:26px}
.crumb a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line)}
.tag{display:inline-block;background:var(--green-soft);color:var(--green);
  font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;margin-bottom:16px}
h1{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.1;
   font-size:clamp(2rem,6.4vw,2.9rem);margin:0 0 10px;text-wrap:balance}
.sub{font-size:1.1rem;color:var(--ink-3);margin:0 0 30px}
h2{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:1.5rem;
   margin:46px 0 14px;line-height:1.2}
h3{font-family:"Public Sans",sans-serif;font-size:1rem;font-weight:700;
   margin:26px 0 6px;color:var(--green)}
p{margin:0 0 17px;color:var(--ink-2)}
b,strong{color:var(--ink)}
.lead{font-size:1.14rem;color:var(--ink);border-left:3px solid var(--green);
  padding-left:18px;margin:0 0 30px}
.layers{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:26px 0;
  box-shadow:var(--shadow)}
.layer{padding:17px 20px;border-bottom:1px solid var(--line-2);background:var(--surface)}
.layer:last-child{border-bottom:0}
.layer .n{font-family:Fraunces,serif;font-size:.85rem;color:var(--ink-3);
  letter-spacing:.08em;text-transform:uppercase}
.layer .m{font-weight:700;color:var(--ink);margin:2px 0 4px}
.layer .m em{font-style:normal;font-weight:400;color:var(--ink-3);font-size:.92rem}
.layer p{margin:0;font-size:.97rem}
.bad,.good{border-radius:14px;padding:18px 20px;margin:20px 0;border:1px solid var(--line-2)}
.bad{background:var(--clay-soft)} .good{background:var(--green-soft)}
.bad h3,.good h3{margin:0 0 8px}
.bad h3{color:var(--clay)} .good h3{color:var(--green)}
.bad p:last-child,.good p:last-child{margin-bottom:0}
.cue{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:0 12px 12px 0;padding:15px 19px;margin:14px 0}
.cue p{margin:0}
.cue .say{font-family:Fraunces,serif;font-size:1.12rem;color:var(--ink);margin-bottom:6px}
.steps{counter-reset:s;list-style:none;padding:0;margin:20px 0}
.steps li{counter-increment:s;position:relative;padding:0 0 0 46px;margin-bottom:16px;
  color:var(--ink-2)}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;
  width:30px;height:30px;border-radius:50%;background:var(--green-soft);color:var(--green);
  display:grid;place-items:center;font-weight:700;font-size:.9rem}
.warn{background:var(--gold-soft);border:1px solid var(--line-2);border-radius:14px;
  padding:18px 20px;margin:30px 0}
.warn p{color:var(--ink);margin:0}
.warn b{color:var(--gold)}
ul{margin:0 0 17px;padding-left:20px;color:var(--ink-2)}
li{margin-bottom:8px}
.end{margin-top:54px;padding-top:30px;border-top:1px solid var(--line)}
.end h2{margin-top:0}
.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;
  border-radius:999px;font-weight:700;padding:14px 28px;margin:8px 0}
.next{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:15px 18px;margin:10px 0;text-decoration:none;color:var(--ink)}
.next span{display:block;font-size:.8rem;color:var(--ink-3);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:3px}
.next b{color:var(--green)}
.foot{margin-top:40px;font-size:.88rem;color:var(--ink-3);line-height:1.55}
.foot a{color:var(--green)}
