:root {
  --ink: #1f3029;
  --muted: #66736d;
  --cream: #f7f4ec;
  --paper: #fffdf7;
  --green: #1f5b43;
  --lime: #c6e86b;
  --orange: #f28a4b;
  --line: rgba(31, 48, 41, .15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: "DM Sans", sans-serif; }
a { color: inherit; text-decoration: none; }
.site-header { align-items: center; display: flex; justify-content: space-between; margin: auto; max-width: 1280px; padding: 24px 5vw; }
.brand { align-items: center; display: inline-flex; font-family: "Space Grotesk", sans-serif; font-size: 1.35rem; font-weight: 700; gap: 9px; letter-spacing: -.06em; }
.brand-mark { align-items: center; background: var(--orange); border-radius: 50% 50% 45% 45%; color: white; display: inline-flex; font-size: .9rem; height: 29px; justify-content: center; transform: rotate(-8deg); width: 29px; }
.site-nav { align-items: center; display: flex; font-size: .92rem; gap: 30px; }
.site-nav a:not(.nav-cta), .text-link { transition: color .2s ease; }
.site-nav a:not(.nav-cta):hover, .text-link:hover { color: var(--orange); }
.nav-cta { background: var(--ink); border-radius: 50px; color: white; padding: 12px 18px; }
.nav-cta span, .button span { margin-left: 8px; }
.menu-toggle { display: none; }
.section-wrap { margin: auto; max-width: 1280px; padding-left: 5vw; padding-right: 5vw; }
.hero { align-items: center; display: grid; gap: 7vw; grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); min-height: 640px; padding-bottom: 72px; padding-top: 72px; }
.eyebrow { color: var(--green); font-size: .72rem; font-weight: 700; letter-spacing: .13em; margin: 0 0 20px; text-transform: uppercase; }
.eyebrow-dot { background: var(--orange); border-radius: 50%; display: inline-block; height: 8px; margin-right: 8px; width: 8px; }
h1, h2, h3, blockquote { font-family: "Space Grotesk", sans-serif; letter-spacing: -.065em; margin: 0; }
h1 { font-size: clamp(3.5rem, 7vw, 6.6rem); line-height: .93; max-width: 720px; }
h1 em { color: var(--orange); font-style: normal; }
.hero-lede { color: var(--muted); font-size: 1.1rem; line-height: 1.65; margin: 28px 0 34px; max-width: 500px; }
.hero-actions { align-items: center; display: flex; gap: 26px; }
.button { border-radius: 50px; display: inline-block; font-size: .95rem; font-weight: 700; padding: 16px 23px; }
.button-primary { background: var(--green); color: white; }
.button-primary:hover { background: var(--ink); }
.text-link { border-bottom: 1px solid currentColor; display: inline-block; font-size: .9rem; font-weight: 700; padding-bottom: 4px; }
.hero-art { background: var(--lime); border-radius: 48% 52% 46% 54% / 49% 45% 55% 51%; height: 455px; overflow: hidden; position: relative; transform: rotate(3deg); }
.sun { background: #f7ba5c; border-radius: 50%; height: 260px; position: absolute; right: -48px; top: -60px; width: 260px; }
.pizza-box { align-items: center; background: #f4b35e; border: 4px solid var(--ink); border-radius: 8px; box-shadow: 15px 18px 0 rgba(31,48,41,.12); color: var(--ink); display: flex; flex-direction: column; font-family: "Space Grotesk", sans-serif; font-size: 1.7rem; font-weight: 700; height: 180px; justify-content: center; left: 50%; letter-spacing: -.08em; position: absolute; top: 45%; transform: translate(-50%, -50%) rotate(-12deg); width: 290px; z-index: 3; }
.pizza-box i { background: var(--orange); border-radius: 50%; height: 19px; position: absolute; width: 19px; }
.pizza-box i:nth-of-type(1) { left: 48px; top: 70px; }.pizza-box i:nth-of-type(2) { right: 62px; top: 48px; }.pizza-box i:nth-of-type(3) { bottom: 34px; left: 125px; }
.hand { background: #db855c; border-radius: 50px; height: 95px; position: absolute; width: 190px; z-index: 2; }.hand-left { bottom: 20px; left: -55px; transform: rotate(-25deg); }.hand-right { bottom: 9px; right: -62px; transform: rotate(22deg); }
.hero-note { color: var(--green); font-family: "Space Grotesk", sans-serif; font-size: .95rem; font-weight: 600; position: absolute; z-index: 4; }.note-top { left: 36px; top: 67px; transform: rotate(-7deg); }.note-top span { color: var(--orange); font-size: 1.4rem; margin-left: 6px; }.note-bottom { bottom: 35px; right: 32px; transform: rotate(7deg); }
.crumb { background: var(--orange); border-radius: 50%; height: 12px; position: absolute; width: 12px; }.crumb-one { left: 21%; top: 31%; }.crumb-two { bottom: 24%; left: 27%; height: 8px; width: 8px; }
.ticker { background: var(--orange); color: white; font-family: "Space Grotesk", sans-serif; font-size: .85rem; font-weight: 700; letter-spacing: .12em; overflow: hidden; padding: 17px 0; white-space: nowrap; }.ticker div { text-align: center; }.ticker span { color: var(--lime); margin: 0 20px; }
.intro { padding-bottom: 120px; padding-top: 130px; }.intro .section-heading { align-items: end; display: flex; gap: 10vw; }.intro h2, .audience-card h2, .final-cta h2 { font-size: clamp(2.5rem, 4.5vw, 4.4rem); line-height: .98; }.intro-copy { color: var(--muted); font-size: 1.05rem; line-height: 1.65; margin: 35px 0 65px; max-width: 530px; margin-left: auto; }.steps { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); }.step { border-right: 1px solid var(--line); padding: 28px 35px 0 0; }.step + .step { padding-left: 35px; }.step:last-child { border: 0; }.step-number { color: var(--orange); font-family: "Space Grotesk", sans-serif; font-size: .9rem; font-weight: 700; }.step h3 { font-size: 1.35rem; margin: 38px 0 13px; }.step p, .audience-card p { color: var(--muted); line-height: 1.6; margin: 0; }
.audiences { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); padding-bottom: 130px; }.audience-card { border-radius: 4px; min-height: 405px; padding: 42px 38px; position: relative; }.provider-card { background: var(--green); color: white; }.volunteer-card { background: #f0c36b; }.recipient-card { background: #e6d9c8; }.audience-card .eyebrow { color: inherit; opacity: .72; }.audience-card h2 { font-size: clamp(2rem, 3vw, 3.2rem); max-width: 470px; }.audience-card p { margin: 24px 0 30px; max-width: 430px; }.provider-card p { color: rgba(255,255,255,.72); }.audience-card .text-link { border-color: currentColor; }.card-icon { font-size: 2rem; position: absolute; right: 40px; top: 35px; }
.quote { border-top: 1px solid var(--line); padding-bottom: 140px; padding-top: 110px; text-align: center; }.quote-mark { color: var(--orange); font-family: Georgia, serif; font-size: 6rem; height: 75px; line-height: 1; }.quote blockquote { font-size: clamp(2rem, 4.2vw, 4.3rem); line-height: 1.02; margin: 0 auto 25px; max-width: 900px; }.quote p { color: var(--muted); margin: auto; max-width: 490px; }
.final-cta { align-items: center; background: var(--green); color: white; display: flex; gap: 50px; justify-content: space-between; margin-bottom: 100px; padding-bottom: 70px; padding-top: 70px; }.final-cta .eyebrow { color: var(--lime); }.final-cta h2 { font-size: clamp(2.2rem, 4vw, 3.8rem); }.cta-copy { color: rgba(255,255,255,.7); line-height: 1.55; margin: 20px 0 0; max-width: 390px; }.button-light { background: var(--lime); color: var(--ink); }.button-light:hover { background: white; }.signup-form { display: grid; flex: 0 1 430px; gap: 12px; grid-template-columns: 1fr auto; position: relative; }.signup-form input[type="email"] { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); border-radius: 50px; color: white; font: inherit; min-width: 0; padding: 16px 20px; }.signup-form input[type="email"]::placeholder { color: rgba(255,255,255,.65); }.signup-form input[type="email"]:focus { border-color: var(--lime); outline: 2px solid var(--lime); outline-offset: 2px; }.signup-form button { border: 0; cursor: pointer; font: inherit; white-space: nowrap; }.form-status { color: var(--lime); font-size: .82rem; grid-column: 1 / -1; margin: 0 0 0 20px; min-height: 1.2em; }.website-field { height: 1px; left: -10000px; opacity: 0; position: absolute; top: auto; width: 1px; }.sr-only { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }
.site-footer { background: var(--ink); color: white; padding: 55px 5vw 25px; }.footer-main { align-items: start; display: grid; gap: 20px; grid-template-columns: 1fr 1fr 1fr; margin: auto; max-width: 1280px; }.brand-light { color: white; }.footer-main p, .footer-main > a:last-child { color: rgba(255,255,255,.65); font-size: .9rem; margin: 8px 0 0; }.footer-main > a:last-child { justify-self: end; }.footer-bottom { border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.48); display: flex; font-size: .75rem; justify-content: space-between; margin: 65px auto 0; max-width: 1280px; padding-top: 18px; }
@media (max-width: 1000px) { .audiences { grid-template-columns: repeat(2, 1fr); }.recipient-card { grid-column: span 2; } }
@media (max-width: 800px) { .site-header { padding-top: 18px; }.menu-toggle { background: none; border: 0; color: var(--ink); display: block; font: inherit; font-size: .85rem; font-weight: 700; }.site-nav { background: var(--paper); box-shadow: 0 14px 30px rgba(31,48,41,.12); display: none; flex-direction: column; gap: 22px; left: 5vw; padding: 24px; position: absolute; right: 5vw; top: 70px; z-index: 10; }.site-nav.open { display: flex; }.hero { display: block; padding-top: 55px; }.hero-art { height: 370px; margin-top: 55px; }.intro { padding-bottom: 80px; padding-top: 90px; }.intro .section-heading { display: block; }.intro-copy { margin: 28px 0 45px; }.steps { display: block; }.step, .step + .step { border-bottom: 1px solid var(--line); border-right: 0; padding: 25px 0; }.step h3 { margin-top: 17px; }.audiences { display: block; padding-bottom: 85px; }.recipient-card { grid-column: auto; }.audience-card + .audience-card { margin-top: 16px; }.quote { padding-bottom: 90px; padding-top: 80px; }.final-cta { align-items: start; display: block; margin-bottom: 60px; }.signup-form { margin-top: 30px; max-width: 520px; }.final-cta .button { margin-top: 0; }.footer-main { display: block; }.footer-main p { margin: 22px 0 8px; }.footer-main > a:last-child { display: inline-block; }.footer-bottom { flex-wrap: wrap; gap: 10px; margin-top: 45px; } }
@media (max-width: 480px) { h1 { font-size: 3.35rem; }.hero-actions { align-items: start; flex-direction: column; gap: 20px; }.hero-art { height: 315px; }.pizza-box { height: 140px; width: 235px; }.pizza-box i { transform: scale(.8); }.note-top { left: 20px; top: 42px; }.note-bottom { bottom: 22px; right: 20px; }.audience-card { min-height: 390px; padding: 35px 30px; } }