/* Peel's home page (scripts/peel-site/pages.py), on styles.css and the guides' ref.css (the labelled example, the
   pills, the questions and the banner). */
.hm-hero{padding:clamp(24px,4vw,40px) 0 clamp(48px,7vw,72px)}
.hm-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:40px;align-items:center}
.hm-hero-text{display:flex;flex-direction:column;gap:20px}
.hm-hero h1{font-size:clamp(3rem,7.5vw,4.75rem);letter-spacing:-.04em;line-height:.98}
.hm-swipe{display:inline-block;background:var(--lime);color:var(--ink);padding:0 10px;border-radius:12px;transform:rotate(-2deg)}
.hm-lede{font-size:clamp(1.125rem,2vw,1.25rem);line-height:1.5;color:var(--on-cobalt-muted);max-width:34em}
.hm-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hm-small{font-size:.9375rem;line-height:1.5;color:var(--on-cobalt-muted);max-width:40em}
.hm-hero-art{position:relative;height:400px}
.hm-source{position:absolute;left:10px;top:10px;width:370px;padding:18px;display:flex;flex-direction:column;gap:10px;transform:rotate(-2deg);color:var(--ink);box-shadow:0 24px 50px rgba(20,18,26,.22)}
.hm-kind{align-self:flex-start;font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--cyan)}
.hm-title{font:800 1.375rem/1.15 var(--head);letter-spacing:-.02em}
.hm-meta{font-size:.875rem}
.hm-meta mark{background:var(--needs);color:var(--ink);padding:1px 4px;border-radius:4px}
.hm-save{min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--ink);color:var(--cream);font-weight:700;font-size:.9375rem}
.hm-found{position:absolute;right:0;bottom:24px;width:290px;align-items:center;box-shadow:0 18px 40px rgba(20,18,26,.2);font-weight:600;line-height:1.4}

.hm-section{padding:clamp(48px,7vw,72px) 0}
.hm-tight{padding-top:0}
.rf .hm-h2{font-size:clamp(2rem,4vw,2.5rem);letter-spacing:-.03em}
.hm-features{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.hm-features li{display:flex;flex-direction:column;gap:10px}
.rf .hm-features h3{font-size:1.375rem;letter-spacing:-.02em}
.hm-features p{font-size:.9688rem;line-height:1.55;color:var(--soft-text)}
.hm-dot{width:44px;height:44px;border-radius:14px}
.hm-sky{background:var(--cyan)}.hm-banana{background:var(--needs)}.hm-pink{background:#FF8FC3}.hm-lime{background:var(--lime)}

.hm-guides{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
.rf .hm-guides h2,.rf .hm-priv h2{font-size:clamp(1.75rem,3.4vw,2.25rem)}
.hm-guides p{margin-top:12px;font-size:1.0625rem;line-height:1.55;color:var(--soft-text)}
.hm-pills{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hm-pills .rf-pill{display:inline-flex;align-items:center;text-decoration:none}
.hm-example .rf-sticker{margin:0;transform:rotate(-1deg)}

.hm-pip{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:center}
.hm-pip-img{transform:rotate(-4deg)}
.hm-pip p{margin-top:14px;font-size:1.0625rem;line-height:1.6;color:var(--soft-text);max-width:46em}
.hm-pip .hm-note{font-size:.9688rem;color:var(--muted)}

.hm-priv ul{list-style:none;margin:16px 0 22px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hm-priv li{background:var(--cream);border-radius:18px;padding:16px 18px;line-height:1.5}

.hm-faq{max-width:calc(820px + 2*var(--gutter))}
.hm-faq .rf-faq{margin-top:16px}
.hm-faq .rf-faq p{color:var(--soft-text)}
.hm-kb img{flex:none}

@media (max-width:1000px){
  .hm-hero-grid{grid-template-columns:1fr}
  .hm-hero-art{height:330px;max-width:440px}
  .hm-features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-guides{grid-template-columns:1fr}
  .hm-priv ul{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hm-hero-art{height:350px}
  .hm-source{width:min(330px,calc(100% - 20px));left:0}
  .hm-found{width:250px;bottom:0}
  .hm-features{grid-template-columns:1fr}
  .hm-pip{grid-template-columns:1fr;gap:16px}
  .hm-pip-img{width:120px;height:120px}
}
html.rc-hc .hm-source,html.rc-hc .hm-priv li{outline:2px solid var(--ink)}