:root {
  --paper: #f3f6f1; --ink: #0f1d18; --ink-2: #4c5c55; --ink-3: #8a9891; --rule: #dfe6df;
  --note: #0b6e4f; --note-soft: #e1efe8;
  --f-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", "Helvetica Neue", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0c1411; --ink: #e8efe9; --ink-2: #a9b8b0; --ink-3: #74857c; --rule: #22312a; --note: #3fbf8f; --note-soft: #173328; color-scheme: dark }
}
* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--f-body); padding-inline: 20px; padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px) }
.w { max-width: 760px; margin: 0 auto; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto auto; gap: 40px; padding-block: 28px 32px }
.brand { display: flex; align-items: center; gap: 10px; font: 700 22px var(--f-display) }
.leaf { width: 28px; height: 28px; fill: var(--note) }
.leaf .vein { stroke: var(--note-soft); stroke-width: 2; stroke-linecap: round; fill: none }
.hero { align-self: center; display: grid; gap: 18px }
.eyebrow { margin: 0; font: 600 12px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--note) }
h1 { margin: 0; font: 800 clamp(40px, 8vw, 72px)/1 var(--f-display); letter-spacing: -.035em; text-wrap: balance }
h1 em { font-style: normal; color: var(--note) }
.lede { margin: 0; font-size: 19px; color: var(--ink-2); max-width: 48ch }
.promises { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; font-size: 14.5px; color: var(--ink-2) }
.promises b { color: var(--ink); font-weight: 600 }
footer { font-size: 13px; color: var(--ink-3) }
@media (max-width: 680px) { .promises { grid-template-columns: 1fr; gap: 12px } }