:root {
  --ink: #26372d;
  --muted: #6f7b6c;
  --paper: #f5f1e7;
  --sage: #dfe9cb;
  --leaf: #426c4c;
  --line: rgba(38, 55, 45, .16);
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; min-height: 100vh; font-family: Avenir Next, Avenir, ui-rounded, sans-serif; background: radial-gradient(circle at 82% 8%, rgba(196, 218, 168, .5), transparent 26rem), var(--paper); }
a { color: inherit; }
.canopy { position: fixed; inset: 0 0 auto; height: 10px; display: flex; z-index: 2; }
.canopy span { flex: 1; background: #1d3622; clip-path: polygon(0 0,100% 0,95% 60%,80% 30%,65% 100%,48% 45%,30% 90%,12% 35%); }
.canopy span:nth-child(2) { background:#416941; transform: scaleX(-1); }
.canopy span:nth-child(3) { background:#789553; }
main { width: min(1080px, calc(100% - 40px)); margin: auto; }
nav { height: 94px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
nav > a:not(.brand) { font-size: 14px; text-decoration:none; border-bottom:1px solid var(--ink); }
.brand { display:flex; gap:12px; align-items:center; text-decoration:none; font-size:21px; font-weight:700; letter-spacing:-.5px; }
.brand img { width:42px; height:42px; image-rendering:pixelated; border-radius:11px; }
header { padding: 105px 0 112px; max-width: 820px; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:3px; color:var(--leaf); margin-bottom:22px; }
h1 { margin:0; font: 500 clamp(50px, 8vw, 92px)/.98 Georgia, serif; letter-spacing:-4px; }
header p, .lede { max-width:640px; font-size:19px; line-height:1.65; color:var(--muted); margin:32px 0; }
.button { display:inline-flex; gap:28px; align-items:center; background:var(--leaf); color:white; padding:15px 20px; border-radius:4px; text-decoration:none; font-weight:650; box-shadow:5px 5px 0 #b7c89c; transition:transform .16s, box-shadow .16s; }
.button:hover { transform:translate(3px,3px); box-shadow:2px 2px 0 #b7c89c; }
.quick { display:grid; grid-template-columns:1fr 2fr; gap:60px; padding:70px 0; border-top:1px solid var(--line); }
.quick h2, .details h2, .policy h2 { font:500 28px/1.2 Georgia,serif; margin:12px 0; }
.spark { font-size:26px; color:var(--leaf); }
ol { list-style:none; padding:0; margin:0; }
li { display:grid; grid-template-columns:54px 1fr; border-top:1px solid var(--line); padding:24px 0; }
li:first-child { border-top:0; padding-top:0; }
li > span { color:var(--leaf); font-size:11px; letter-spacing:1px; }
h3 { margin:0 0 8px; font-size:17px; }
li p, .details p, .policy p { color:var(--muted); line-height:1.7; margin:0; }
.details { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:0 0 100px; }
.details article { background:var(--sage); padding:40px; min-height:290px; border:1px solid rgba(66,108,76,.08); }
.details article:last-child { background:#ebe5d7; }
.details a { display:inline-block; margin-top:28px; text-decoration:none; border-bottom:1px solid; font-weight:600; }
.pixel-heart,.pixel-moon { display:block; font-size:28px; color:var(--leaf); }
footer { border-top:1px solid var(--line); min-height:100px; padding:30px max(20px,calc((100vw - 1080px)/2)); display:flex; justify-content:space-between; color:var(--muted); font-size:12px; letter-spacing:1px; }
.policy { width:min(760px,100%); padding:90px 0 120px; }
.policy h1 { font-size:clamp(46px,7vw,76px); }
.policy .lede { margin-bottom:70px; }
.policy h2 { margin-top:42px; }
.policy .button { margin-top:40px; }
@media (max-width:700px) {
  h1 { letter-spacing:-2px; }
  header { padding:70px 0 80px; }
  .quick { grid-template-columns:1fr; gap:30px; }
  .details { grid-template-columns:1fr; }
  footer { flex-direction:column; gap:12px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }
