.hero-shot{margin-top:clamp(2rem,4vw,3rem)}
.hero-shot .shot{aspect-ratio:21/9;box-shadow:0 30px 60px -38px rgba(20,59,31,.5)}
@media(max-width:700px){ .hero-shot .shot{aspect-ratio:4/3} }

/* the free panel */
.free-panel{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.5rem 2rem;align-items:center;
  padding:clamp(1.5rem,3vw,2.25rem);border-radius:var(--r-card);
  background:color-mix(in srgb,var(--sun) 20%,var(--paper));
  border:1px solid color-mix(in srgb,var(--sun-ink) 28%,transparent);
}
.free-badge{
  font-family:var(--display);font-size:clamp(2.4rem,2rem + 1.6vw,3.4rem);line-height:1;
  color:var(--forest);letter-spacing:-.03em;
}
.free-panel p{font-size:.98rem;color:var(--ink-2);margin:0;max-width:var(--measure-sm)}
.free-panel strong{color:var(--ink)}
@media(max-width:600px){ .free-panel{grid-template-columns:1fr;gap:.8rem} }

/* the shape of a day */
.day{margin-top:3rem;display:grid;gap:0}
.step{
  display:grid;grid-template-columns:11rem minmax(0,1fr);gap:1.5rem;
  padding:1.5rem 0;position:relative;
  border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
}
.step:last-child{border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.step .when{
  font-size:var(--label);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--sun-ink);padding-top:.35em;
}
.step h3{font-size:1.1rem;margin-bottom:.4rem}
.step p{font-size:.94rem;color:var(--ink-2);max-width:var(--measure-sm)}
@media(max-width:720px){ .step{grid-template-columns:1fr;gap:.4rem} .step .when{padding-top:0} }

/* bring list */
.bring{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:clamp(1.5rem,3vw,2.5rem);margin-top:2.75rem}
/* copper draws the rules, sun fills the things you click. See PALETTE.md. */
.bring h3{font-size:1rem;margin-bottom:.9rem;padding-bottom:.6rem;border-bottom:2px solid var(--copper)}
.on-dark .bring h3{border-bottom-color:var(--copper-glow)}

/* faq */
.faq{margin-top:2.75rem;max-width:46rem}
.faq details{
  border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 2rem 1.15rem 0;position:relative;
  font-family:var(--display);font-size:1.06rem;font-weight:600;letter-spacing:-.014em;
  color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.3rem;top:1.5rem;
  width:.6rem;height:.6rem;border-right:2px solid var(--sun-ink);border-bottom:2px solid var(--sun-ink);
  transform:rotate(45deg);transition:transform var(--fast) var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--sun-deep)}
.faq .a{padding:0 0 1.3rem;font-size:.95rem;color:var(--ink-2);max-width:var(--measure-sm);line-height:1.65}
.faq .a p+p{margin-top:.8rem}