:root {
  --ink: #1d2820;
  --moss: #31684b;
  --coral: #f46b50;
  --gold: #efb93f;
  --sky: #94c8da;
  --paper: #fffdf8;
  --cream: #f7f0e3;
  --line: #e6dccb;
  --quiet: #667067;
  --display: "DM Serif Display", Georgia, serif;
  --body: "Nunito Sans", "Avenir Next", Avenir, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(239, 185, 63, .14), transparent 24rem),
    radial-gradient(circle at 83% 17%, rgba(148, 200, 218, .18), transparent 28rem),
    var(--cream);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

.site-header {
  width: min(1180px, calc(100% - 48px));
  min-height: 88px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -.8px; }

.brand-mark { position: relative; display: inline-block; width: 27px; height: 28px; }
.brand-mark::before { content: ""; position: absolute; width: 4px; height: 18px; background: var(--moss); border-radius: 8px; left: 12px; bottom: 1px; transform: rotate(10deg); }
.brand-mark i, .brand-mark b { position: absolute; display: block; background: var(--moss); border-radius: 100% 0 100% 0; transform-origin: bottom center; }
.brand-mark i { width: 15px; height: 10px; left: 2px; top: 5px; transform: rotate(-32deg); }
.brand-mark b { width: 17px; height: 11px; right: 0; top: 0; transform: rotate(42deg) scaleX(-1); }

nav { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 700; color: #526055; }
nav a:hover, .text-link:hover { color: var(--coral); }

.hero {
  width: min(1180px, calc(100% - 48px));
  min-height: 685px;
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: .94fr 1.06fr;
  align-items: center;
  gap: 60px;
}

.eyebrow { margin: 0 0 14px; color: var(--coral); font-size: 12px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); letter-spacing: -.025em; line-height: 1.02; }
h1 { font-size: clamp(54px, 6.8vw, 88px); margin-bottom: 24px; }
h2 { font-size: clamp(42px, 5vw, 64px); margin-bottom: 24px; }
h3 { margin: 20px 0 8px; font-family: var(--display); font-size: 28px; letter-spacing: -.035em; }
.hero-intro { max-width: 475px; font-size: 18px; color: #4e5c52; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin: 33px 0 25px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 23px; border-radius: 17px; font-size: 15px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(38, 70, 49, .16); }
.button-primary { background: var(--coral); color: white; }
.text-link { color: var(--moss); font-size: 15px; font-weight: 800; }
.quiet-note { color: var(--quiet); font-size: 13px; }

.hero-art { position: relative; min-height: 540px; isolation: isolate; }
.paper { position: absolute; top: 46px; right: 24px; width: min(470px, 92%); height: 470px; overflow: hidden; border: 1px solid rgba(99, 79, 42, .13); border-radius: 14px 14px 36px 22px; background: #fffdf6; box-shadow: 0 28px 48px rgba(89, 66, 38, .2), -12px 15px 0 rgba(255,255,255,.62); transform: rotate(4deg); }
.paper::before { content: ""; position: absolute; inset: 0; opacity: .45; background-image: radial-gradient(rgba(82, 62, 28, .16) .7px, transparent .8px); background-size: 5px 5px; pointer-events: none; }
.paper::after { content: ""; position: absolute; inset: auto -10% -11% -10%; height: 37%; background: #7abc69; border-radius: 50% 50% 0 0; transform: rotate(-5deg); }
.rainbow { position: absolute; width: 400px; height: 300px; left: 36px; top: 80px; overflow: hidden; border-radius: 50% 50% 0 0; }
.rainbow i { position: absolute; border: 12px solid; border-bottom: 0; border-radius: 50% 50% 0 0; }
.rainbow i:nth-child(1) { inset: 0; border-color: #ef6b55; }
.rainbow i:nth-child(2) { inset: 17px; border-color: #f49b4a; }
.rainbow i:nth-child(3) { inset: 34px; border-color: #efc84b; }
.rainbow i:nth-child(4) { inset: 51px; border-color: #68a978; }
.rainbow i:nth-child(5) { inset: 68px; border-color: #82b9d1; }
.garden-house { position: absolute; z-index: 2; width: 126px; height: 115px; background: #ec7259; left: 171px; bottom: 89px; border: 5px solid #61493b; border-radius: 3px; }
.garden-house::before { content: ""; position: absolute; width: 0; height: 0; border-left: 76px solid transparent; border-right: 76px solid transparent; border-bottom: 85px solid #a94f45; left: -18px; top: -70px; filter: drop-shadow(0 -5px 0 #61493b); }
.garden-house span { position: absolute; width: 28px; height: 55px; background: #f3bc55; border: 4px solid #61493b; left: 43px; bottom: -5px; z-index: 2; }
.garden-house b, .garden-house i { position: absolute; width: 28px; height: 29px; background: #92cbe0; border: 4px solid #61493b; top: 18px; z-index: 2; }
.garden-house b { left: 11px; }.garden-house i { right: 11px; }
.flower { position: absolute; z-index: 3; width: 97px; height: 128px; bottom: 38px; }
.flower-left { left: 35px; }.flower-right { right: 26px; transform: scale(.85) rotate(14deg); }
.flower::after { content: ""; position: absolute; width: 9px; height: 69px; background: #3c814b; bottom: 0; left: 45px; border-radius: 10px; }
.flower i { position: absolute; display: block; width: 42px; height: 49px; background: #f6d34f; border-radius: 50%; left: 28px; top: 14px; transform-origin: 21px 50px; }
.flower-right i { background: #ef7ca1; }.flower i:nth-child(1) { transform: rotate(0); }.flower i:nth-child(2) { transform: rotate(72deg); }.flower i:nth-child(3) { transform: rotate(144deg); }.flower i:nth-child(4) { transform: rotate(216deg); }.flower i:nth-child(5) { transform: rotate(288deg); }
.flower b { position: absolute; z-index: 1; width: 27px; height: 27px; border-radius: 50%; background: #9b6a2e; left: 36px; top: 47px; }
.paper-caption { position: absolute; z-index: 4; right: 20px; top: 18px; color: #606d56; font-family: var(--display); font-size: 18px; transform: rotate(-5deg); }
.sun { position: absolute; z-index: 3; width: 85px; height: 85px; background: var(--gold); border-radius: 50%; right: 28px; top: 4px; box-shadow: 0 0 0 8px rgba(239,185,63,.12); }
.sun i { position: absolute; width: 7px; height: 22px; left: 39px; top: -32px; background: var(--gold); border-radius: 10px; transform-origin: 4px 74px; }.sun i:nth-child(2){transform:rotate(45deg)}.sun i:nth-child(3){transform:rotate(90deg)}.sun i:nth-child(4){transform:rotate(135deg)}.sun i:nth-child(5){transform:rotate(180deg)}.sun i:nth-child(6){transform:rotate(225deg)}.sun i:nth-child(7){transform:rotate(270deg)}.sun i:nth-child(8){transform:rotate(315deg)}
.sprout { position: absolute; z-index: 5; width: 105px; height: 122px; left: -8px; bottom: 7px; transform: rotate(-15deg); }.sprout b { position: absolute; width: 13px; height: 110px; left: 48px; bottom: 0; background: var(--moss); border-radius: 10px; }.sprout i { position: absolute; width: 59px; height: 37px; background: var(--moss); border-radius: 100% 0 100% 0; }.sprout i:first-child { top: 15px; left: 1px; transform: rotate(35deg); }.sprout i:nth-child(2) { top: 1px; right: 0; transform: scaleX(-1) rotate(27deg); }
.preserved-pill { position: absolute; z-index: 5; right: 0; bottom: 36px; padding: 10px 16px; color: var(--moss); background: rgba(255,253,246,.91); border: 1px solid rgba(49,104,75,.16); border-radius: 999px; box-shadow: 0 8px 22px rgba(58, 73, 43, .12); font-size: 13px; font-weight: 800; }.preserved-pill span { color: var(--coral); }

.trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1120px; margin: 28px auto 116px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.trust-strip p { margin: 0; color: #536055; font-family: var(--display); font-size: 17px; text-align: center; }.trust-strip span { margin-right: 8px; color: var(--coral); font-family: var(--body); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.process { width: min(1120px, calc(100% - 48px)); margin: 0 auto 130px; }.section-heading { max-width: 600px; }.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }.step { min-height: 390px; padding: 25px; border: 1px solid var(--line); border-radius: 26px; background: rgba(255,253,248,.74); }.step-number { color: var(--coral); font-size: 12px; font-weight: 900; letter-spacing: .1em; }.step p { color: var(--quiet); font-size: 15px; }.step-illustration { position: relative; height: 172px; margin-top: 16px; overflow: hidden; border-radius: 18px; background: #e5eff0; }.scan-lines { background: linear-gradient(135deg, #8fbac4, #d6e5dc); }.scan-lines::before { content: ""; position: absolute; inset: 24px 53px; border: 2px dashed rgba(255,255,255,.95); border-radius: 10px; }.scan-lines i { position: absolute; background: var(--coral); border-radius: 50%; }.scan-lines i:nth-child(1){width:42px;height:42px;left:28px;top:31px}.scan-lines i:nth-child(2){width:70px;height:15px;right:23px;bottom:34px;transform:rotate(-27deg)}.scan-lines i:nth-child(3){width:28px;height:28px;right:41px;top:36px;background:var(--gold)}
.clean-paper { background: #f0d5c3; }.clean-paper span { position:absolute; width:92px; height:126px; background:#fffdf7; left:71px; top:22px; transform:rotate(7deg); box-shadow:0 10px 15px rgba(55,47,32,.13); }.clean-paper i,.clean-paper b { position:absolute; z-index:1; display:block; background:var(--moss); border-radius:100% 0 100% 0; }.clean-paper i { width:36px;height:22px;left:92px;top:51px;transform:rotate(40deg); }.clean-paper b { width:39px;height:23px;right:66px;top:68px;transform:scaleX(-1) rotate(35deg); }.archive-stack { background:#e3ebe0; }.archive-stack i { position:absolute; width:105px;height:130px; border-radius:8px; border:1px solid rgba(52,77,57,.1); background:#fffdf7; box-shadow:0 9px 13px rgba(62,75,54,.1); }.archive-stack i:nth-child(1){left:58px;top:30px;transform:rotate(-11deg)}.archive-stack i:nth-child(2){left:91px;top:21px;transform:rotate(2deg);background:#f4d9bd}.archive-stack i:nth-child(3){left:125px;top:34px;transform:rotate(12deg);background:#d5e4e0}

.privacy-callout { display: grid; grid-template-columns: 155px 1fr; gap: 42px; width: min(930px, calc(100% - 48px)); margin: 0 auto 132px; padding: 58px; border-radius: 34px; color: #f7f5ee; background: var(--moss); }.privacy-callout h2 { max-width: 580px; }.privacy-callout p:not(.eyebrow) { max-width: 620px; color: rgba(255,255,255,.78); }.privacy-callout .eyebrow { color: #f9c86a; }.privacy-callout .text-link { color: white; }.lock-mark { display:grid; place-items:center; width:110px; height:110px; border:1px solid rgba(255,255,255,.28); border-radius:50%; color:#f8ca69; font-family:var(--display); font-size:70px; }
.closing { width: min(790px, calc(100% - 48px)); margin: 0 auto 120px; text-align:center; }.closing h2 { margin-bottom: 30px; }
.site-footer { width: min(1180px, calc(100% - 48px)); margin:0 auto; padding:32px 0 42px; display:grid; grid-template-columns:1.2fr 1fr 1fr auto; align-items:center; gap:25px; border-top:1px solid var(--line); color:var(--quiet); font-size:13px; }.site-footer .brand { color:var(--ink); }.site-footer p { margin:0; }.site-footer div { display:flex; gap:17px; }.site-footer a:hover { color:var(--coral); }.site-footer small { text-align:right; }

.legal-page { width:min(780px, calc(100% - 48px)); margin:76px auto 120px; }.legal-page h1 { font-size:clamp(48px, 7vw, 76px); max-width:720px; }.legal-page h2 { margin:51px 0 14px; font-size:31px; line-height:1.05; }.legal-page p { color:#4e5c52; font-size:17px; }.legal-page a { color:var(--moss); font-weight:800; text-decoration:underline; text-decoration-color:rgba(49,104,75,.25); text-underline-offset:3px; }.legal-date { color:var(--quiet)!important; font-size:13px!important; }.support-page { max-width:810px; }.support-lead { max-width:620px; margin-bottom:26px; font-size:19px!important; }.support-page section:first-of-type { margin-top:62px; }.simple-footer { grid-template-columns:1fr; }.simple-footer small { text-align:left; }

@media (max-width: 800px) {
  .site-header, .hero, .process, .site-footer { width: min(100% - 32px, 560px); }
  .site-header { min-height:72px; }.site-header nav { gap:14px; font-size:12px; }.site-header nav a:first-child { display:none; }
  .hero { grid-template-columns:1fr; gap:10px; margin-top:30px; }.hero-copy { padding-top:24px; }.hero-art { min-height:440px; }.paper { width:91%; height:380px; top:24px; right:5px; }.rainbow { transform:scale(.8); transform-origin:top left; }.garden-house { transform:scale(.8); transform-origin:bottom left; }.flower { transform:scale(.7); transform-origin:bottom left; }.flower-right { transform:scale(.62) rotate(14deg); }.hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }.trust-strip { grid-template-columns:1fr; gap:10px; width:calc(100% - 32px); margin-bottom:78px; }.trust-strip p { text-align:left; }.steps { grid-template-columns:1fr; margin-top:32px; }.step { min-height:0; }.privacy-callout { grid-template-columns:1fr; gap:24px; padding:32px; }.lock-mark { width:68px; height:68px; font-size:44px; }.site-footer { grid-template-columns:1fr; gap:14px; }.site-footer small { text-align:left; }.legal-page { margin-top:44px; }.legal-page h2 { margin-top:39px; }
}
