:root {
--ink: #14130f;
--paper: #f4f1e8;
--muted: #5f5b4f;
--line: #cfc9b8;
--accent: #c8401f;
--accent-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
:root {
--ink: #f4f1e8;
--paper: #14130f;
--muted: #a8a392;
--line: #38352c;
--accent: #ff7a54;
--accent-ink: #14130f;
}
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1.0625rem;
line-height: 1.55;
}

a { color: inherit; }

a:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
}

.wrap {
width: min(100% - 2.5rem, 68rem);
margin-inline: auto;
}

.top {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: 1.5rem;
}

.mark {
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.03em;
text-decoration: none;
}

.mark span { color: var(--accent); }

.top-link { text-underline-offset: 0.2em; }

.hero { padding-block: clamp(3.5rem, 11vw, 8rem) clamp(3.5rem, 9vw, 6.5rem); }

.eyebrow {
margin: 0 0 1.25rem;
color: var(--accent);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}

h1 {
max-width: 15ch;
margin: 0;
font-size: clamp(2.6rem, 8.5vw, 5.75rem);
font-weight: 800;
letter-spacing: -0.045em;
line-height: 0.98;
text-wrap: balance;
}

.lede {
max-width: 34rem;
margin: 1.75rem 0 2.25rem;
color: var(--muted);
font-size: clamp(1.125rem, 2.2vw, 1.375rem);
line-height: 1.45;
}

.button {
display: inline-block;
padding: 0.9rem 1.4rem;
border-radius: 0.375rem;
background: var(--accent);
color: var(--accent-ink);
font-weight: 700;
overflow-wrap: anywhere;
text-decoration: none;
}

.button:hover { filter: brightness(0.92); }

.offer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
gap: 2.5rem clamp(2rem, 6vw, 5rem);
padding-block: 2.5rem clamp(3.5rem, 8vw, 6rem);
border-top: 1px solid var(--line);
}

.num {
margin: 0 0 0.75rem;
color: var(--accent);
font-weight: 700;
font-variant-numeric: tabular-nums;
}

h2 {
margin: 0 0 0.5rem;
font-size: clamp(1.5rem, 3vw, 2rem);
letter-spacing: -0.025em;
line-height: 1.15;
}

.offer article > p:last-child {
max-width: 28rem;
margin: 0;
color: var(--muted);
}

.ask {
padding-block: 2.5rem;
border-top: 1px solid var(--line);
}

.ask p {
max-width: 34rem;
margin: 0 0 1rem;
color: var(--muted);
}

.ask a {
font-weight: 700;
overflow-wrap: anywhere;
text-underline-offset: 0.2em;
}

footer {
padding-block: 2rem 2.5rem;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 0.875rem;
}

footer p { margin: 0; }