:root { --accent: #4f753c; --accent-text: #4f753c; --accent-soft: #e4efd9; --canvas: #f4f8ef; --ink: #173126; }
.site-header, main, footer { width: min(1080px, calc(100% - 48px)); }
.brand-mark { border-color: var(--accent); border-radius: 50% 50% 45% 55%; background: var(--accent-soft); }
.brand-mark span { width: 15px; background: var(--accent); }
.hero { min-height: auto; grid-template-columns: 1fr; gap: 54px; padding: 68px 0 112px; }
.hero-copy { max-width: 790px; margin-inline: auto; text-align: center; }
h1 { margin-inline: auto; font-size: clamp(48px, 7.5vw, 82px); font-weight: 650; letter-spacing: -.05em; }
.hero-description { max-width: 650px; margin-inline: auto; }
.utility-note, .tool-kicker { font-family: "SFMono-Regular", Consolas, monospace; }
.tool-kicker { margin: 0 0 18px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.tool-shell { max-width: 860px; width: 100%; margin-inline: auto; border-color: #a8bd99; border-radius: 4px; box-shadow: 12px 12px 0 #dbe8d2; }
textarea, .primary-button, .secondary-button, .limit-upsell { border-radius: 3px; }
@media (max-width: 720px) { .site-header, main, footer { width: min(100% - 28px, 1080px); } .tool-shell { box-shadow: 7px 7px 0 #dbe8d2; } }