:root {
  --paper: #f3f6f1; --card: #ffffff; --ink: #0f1d18; --ink-2: #4c5c55; --ink-3: #8a9891; --rule: #dfe6df;
  --note: #0b6e4f; --note-soft: #e1efe8; --in: #0f8a5c; --out: #b4432e; --agent: #9a6b00; --agent-soft: #f6ecd4; --deep: #0f2a21; --deep-ink: #e3eee8;
  --c1: #0b6e4f; --c2: #2f8f7a; --c3: #5aa58f; --c4: #8fbfa9; --c5: #c7a24a; --c6: #b4762e; --c7: #9a8c7d; --c8: #6b7d76; --c9: #b8c4be;
  --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; --card: #14201b; --ink: #e8efe9; --ink-2: #a9b8b0; --ink-3: #74857c; --rule: #22312a; --note: #3fbf8f; --note-soft: #173328; --in: #46c991; --out: #e2775f; --agent: #e0b04a; --agent-soft: #2e2512; --deep: #10231c;
    --c1: #3fbf8f; --c2: #34a58a; --c3: #5fb7a0; --c4: #8fcab3; --c5: #d9b45c; --c6: #d08a45; --c7: #a99b8b; --c8: #7f948b; --c9: #4b5c55; color-scheme: dark }
}
* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--f-body); padding-inline: 16px; padding-block: env(safe-area-inset-top, 0px) 40px; font-variant-numeric: tabular-nums }
a { color: var(--note) }
.w { max-width: 1120px; margin: 0 auto }
nav.top { display: flex; align-items: center; justify-content: space-between; padding-block: 18px; gap: 16px; flex-wrap: wrap }
.logo { font: 700 20px var(--f-display); display: flex; gap: 9px; align-items: center; color: var(--ink); text-decoration: none }
.leaf { width: 24px; height: 24px; fill: var(--note) }
nav.top .links { display: flex; gap: 20px; font-size: 14px; align-items: center; flex-wrap: wrap }
nav.top .links a { color: var(--ink-2); text-decoration: none }
nav.top .links a:hover { color: var(--note) }
nav.top .links a.btn, nav.top .links a.btn:hover { color: var(--paper) }
.btn { display: inline-block; font: 600 15px var(--f-body); padding: 12px 20px; border-radius: 12px; background: var(--note); color: var(--paper); text-decoration: none; border: 0 }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--rule) }
.btn.sm { padding: 8px 14px; font-size: 14px }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--agent); outline-offset: 2px }
h1 { font: 800 clamp(38px, 6.2vw, 72px)/0.98 var(--f-display); letter-spacing: -0.035em; margin: 0 0 18px; text-wrap: balance }
h1 em { font-style: normal; color: var(--note) }
h2 { font: 700 clamp(26px, 3.4vw, 38px)/1.08 var(--f-display); letter-spacing: -0.02em; margin: 0 0 12px; text-wrap: balance }
h3 { font: 700 19px var(--f-display); margin: 0 }
.lede { font-size: 19px; color: var(--ink-2); max-width: 48ch; margin: 0 0 26px }
.sub { color: var(--ink-2); max-width: 62ch; margin: 0 0 28px }
.muted { color: var(--ink-3) }
.fine { font-size: 13px; color: var(--ink-3); margin-top: 12px }
.label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600 }
.hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; padding-block: 40px 60px }
.hero > * { min-width: 0 }
.ctas { display: flex; gap: 12px; flex-wrap: wrap }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: 20px; padding: 20px; display: grid; gap: 10px; min-width: 0 }
.flowcard { box-shadow: 0 40px 80px -50px rgba(10, 40, 25, .45) }
.flowcard .h { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px }
.flowcard .h b { font: 700 21px var(--f-display) }
.scroll { overflow-x: auto }
.flow { min-width: 440px; width: 100% }
svg text { fill: var(--ink-2); font: 500 10px var(--f-body) }
svg .lbl { fill: var(--ink); font-weight: 600 }
section { padding-block: 54px; border-top: 1px solid var(--rule) }
section.plain { border-top: 0 }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px }
.three > div { display: grid; gap: 8px; align-content: start }
.three p { margin: 0; color: var(--ink-2); font-size: 15px }
.step { font-size: 12px; font-weight: 600; color: var(--note); letter-spacing: .08em; text-transform: uppercase }
.tag { font: 600 11px var(--f-body); letter-spacing: .06em; text-transform: uppercase; background: var(--note-soft); color: var(--note); padding: 4px 9px; border-radius: 99px }
.band { background: var(--deep); color: var(--deep-ink); border-radius: 26px; padding: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px }
.band > * { min-width: 0 }
.band h2 { color: var(--deep-ink) }
.band .sub { color: color-mix(in srgb, var(--deep-ink) 72%, transparent) }
.asks { display: grid; gap: 12px }
.ask { background: color-mix(in srgb, var(--deep-ink) 7%, transparent); border-radius: 16px; padding: 14px 16px; display: grid; gap: 6px; font-size: 14.5px }
.ask .q { font-weight: 600 }
.ask .who { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #e0b04a; font-weight: 600 }
.ask .a { color: color-mix(in srgb, var(--deep-ink) 80%, transparent) }
.feat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden }
.feat div { background: var(--card); padding: 22px; display: grid; gap: 6px; align-content: start }
.feat b { font: 700 17px var(--f-display) }
.feat span { font-size: 14px; color: var(--ink-2) }
.feat .soon { font-size: 11px; color: var(--agent); font-weight: 600; letter-spacing: .06em; text-transform: uppercase }
.trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 40px }
.trust div { display: grid; grid-template-columns: 34px 1fr; gap: 14px }
.trust i { width: 34px; height: 34px; border-radius: 10px; background: var(--note-soft); color: var(--note); display: grid; place-items: center; font: 700 15px var(--f-display); font-style: normal }
.trust p { margin: 0 }
.trust b { display: block; font-weight: 600 }
.trust span { color: var(--ink-2); font-size: 15px }
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.plan { background: var(--card); border: 1px solid var(--rule); border-radius: 20px; padding: 26px; display: grid; gap: 14px; align-content: start }
.plan.pick { border: 2px solid var(--note) }
.plan h3 { display: flex; justify-content: space-between; align-items: center }
.plan .p { font: 700 38px/1 var(--f-display); letter-spacing: -0.02em }
.plan .p small { font: 500 15px var(--f-body); color: var(--ink-3) }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2) }
.plan li::before { content: "✓"; color: var(--note); font-weight: 700; margin-right: 8px }
footer { border-top: 1px solid var(--rule); padding-block: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3) }
footer a { color: var(--ink-2); text-decoration: none; margin-left: 14px }
.docs { display: grid; grid-template-columns: 220px 1fr; gap: 36px; padding-block: 24px 40px; align-items: start }
.docs aside { position: sticky; top: 16px; display: grid; gap: 4px; font-size: 14px }
.docs aside a { color: var(--ink-2); text-decoration: none; padding: 5px 10px; border-radius: 8px }
.docs aside a:hover { background: var(--note-soft); color: var(--note) }
.docs article { min-width: 0; max-width: 72ch }
.docs article h2 { margin-top: 40px; font-size: 28px }
.docs article h2:first-child { margin-top: 0 }
.docs article h3 { margin-top: 22px; font-size: 18px }
.docs article p, .docs article li { color: var(--ink-2) }
.docs table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 12px 0 }
.docs th, .docs td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--rule); vertical-align: top }
.docs th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3) }
.note { background: var(--agent-soft); border-radius: 14px; padding: 12px 16px; color: var(--ink) }
.draft { background: var(--agent-soft); border: 1px solid var(--agent); border-radius: 14px; padding: 12px 16px; font-weight: 600 }
@media (max-width: 880px) {
  .hero, .band { grid-template-columns: 1fr } .three, .prices { grid-template-columns: 1fr }
  .feat { grid-template-columns: 1fr 1fr } .trust { grid-template-columns: 1fr } .band { padding: 28px 20px }
  .docs { grid-template-columns: 1fr } .docs aside { position: static; display: flex; flex-wrap: wrap }
  nav.top .links .hide { display: none }
}
@media (max-width: 480px) { .feat { grid-template-columns: 1fr } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important } }