/* Sunsprinkle one-page collateral. US Letter. Same palette and type as the site. */
:root{
  --mint:#D8F2D5; --mint2:#EAF7E8; --forest:#1F4E23; --teal:#38A29D; --teal-d:#2B8681; --orange:#EFA63C;
  --charcoal:#231F20; --cream:#F5EADA; --grey:#5B615B; --line:#DDE7DC;
  --h:"Montserrat",sans-serif; --b:"Open Sans",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
@page{size:letter;margin:0}
body{font-family:var(--b);color:var(--charcoal);background:#E9ECE8;line-height:1.5;font-size:14px;padding:24px 16px}
.sheet{background:#fff;max-width:816px;margin:0 auto;min-height:1056px;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(31,78,35,.15)}
.top{display:flex;justify-content:space-between;align-items:center;padding:28px 48px 0}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--h);font-weight:800;font-size:18px;color:var(--forest)}
.brand img{height:38px;width:auto}
.kind{font-family:var(--h);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.title{padding:30px 48px 26px;background:linear-gradient(180deg,#fff,var(--mint2))}
.eyebrow{display:inline-block;font-family:var(--h);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-d);background:#fff;border:1px solid var(--line);padding:5px 12px;border-radius:999px}
h1{font-family:var(--h);font-weight:800;font-size:32px;line-height:1.15;color:var(--forest);margin:14px 0 10px;max-width:19em;text-wrap:balance}
h1 span{color:var(--teal-d)}
.lead{font-size:15px;color:var(--grey);max-width:62ch}
.facts{display:grid;grid-template-columns:repeat(3,1fr);background:var(--forest);color:#fff}
.facts div{padding:16px 20px 16px 48px}
.facts div + div{padding-left:20px;border-left:1px solid rgba(255,255,255,.18)}
.facts small{display:block;font-family:var(--h);font-weight:700;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:3px}
.facts b{font-family:var(--h);font-weight:700;font-size:14.5px;line-height:1.3;display:block}
.cols{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;padding:30px 48px 0;flex:1}
.cols > *{min-width:0}
h2{font-family:var(--h);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-d);margin-bottom:12px}
.block + .block{margin-top:24px}
.steps{list-style:none;display:grid;gap:12px;counter-reset:s}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:12px;counter-increment:s}
.steps li::before{content:counter(s);width:28px;height:28px;border-radius:50%;border:3px solid var(--teal);font-family:var(--h);font-weight:800;font-size:12px;color:var(--forest);display:flex;align-items:center;justify-content:center}
.steps b,.plain b{font-family:var(--h);font-weight:700;color:var(--forest);display:block;font-size:13.5px}
.steps span,.plain span{color:var(--grey);font-size:13px}
.plain{list-style:none;display:grid;gap:10px}
.plain li{padding-left:16px;border-left:3px solid var(--teal)}
.dots{list-style:none;display:grid;gap:7px;color:var(--grey);font-size:13px}
.dots li{padding-left:16px;position:relative}
.dots li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.panel{background:var(--forest);color:#fff;border-radius:16px;padding:24px;align-self:start}
.panel h2{color:var(--mint)}
.panel ul{list-style:none;display:grid;gap:11px}
.panel li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:13.5px;line-height:1.4}
.panel li::before{content:"✓";width:20px;height:20px;border-radius:50%;background:var(--teal);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.panel .who{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.2);font-size:12.5px;line-height:1.5}
.panel .who b{font-family:var(--h);display:block;font-size:13.5px}
.next{margin:28px 48px 0;padding:16px 20px;background:var(--cream);border-radius:12px;font-size:13.5px}
.next b{font-family:var(--h);color:var(--forest)}
.foot{margin-top:28px;padding:18px 48px;background:var(--mint2);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--grey)}
.foot b{font-family:var(--h);color:var(--forest)}
/* checklist */
.groups{display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;padding:26px 48px 0;flex:1;align-content:start}
.groups > *{min-width:0}
.groups .wide{grid-column:1 / -1}
.groups .block{margin-top:0}
.groups .wide .checks{grid-template-columns:1fr 1fr;column-gap:32px}
.checks{list-style:none;display:grid;gap:8px;font-size:12.5px;color:var(--charcoal)}
.checks li{display:grid;grid-template-columns:14px 1fr;gap:9px;line-height:1.4}
.checks li::before{content:"";width:12px;height:12px;border:1.5px solid var(--teal-d);border-radius:3px;margin-top:3px}
@media (max-width:700px){
  body{padding:0}
  .sheet{min-height:0;box-shadow:none}
  .top,.title{padding-left:20px;padding-right:20px}
  h1{font-size:25px}
  .facts{grid-template-columns:1fr}
  .facts div,.facts div + div{padding:12px 20px;border-left:0;border-top:1px solid rgba(255,255,255,.18)}
  .cols,.groups{grid-template-columns:1fr;padding-left:20px;padding-right:20px}
  .groups .wide .checks{grid-template-columns:1fr}
  .next{margin-left:20px;margin-right:20px}
  .foot{padding-left:20px;padding-right:20px}
}
@media print{
  body{background:#fff;padding:0}
  .sheet{box-shadow:none;max-width:none;width:8.5in;height:11in;min-height:0}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
