:root {
    color-scheme: dark;
    --fz-bg: #090909;
    --fz-surface: #111215;
    --fz-border: rgba(255,255,255,.09);
    --fz-ink: #F2F5F3;
    --fz-ink-2: #C2CCC6;
    --fz-ink-3: #8D9A93;
    --fz-primary: #7FB420;
    --fz-primary-hover: #9BD739;
    --fz-primary-ink: #07120A;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fz-bg); color: var(--fz-ink); font: 17px/1.7 system-ui, sans-serif; }
a { color: var(--fz-primary-hover); text-underline-offset: .25em; }
a:hover { color: var(--fz-ink); }
a:focus-visible { outline: 3px solid var(--fz-primary); outline-offset: 5px; }
.shell { width: min(1400px, calc(100% - 96px)); margin-inline: auto; }
.masthead, .footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 28px; }
.masthead { border-bottom: 1px solid var(--fz-border); }
.author { text-decoration: none; text-transform: uppercase; letter-spacing: .18em; font-weight: 800; }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 60px; padding-block: 96px 72px; }
.eyebrow { color: var(--fz-primary-hover); text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 700; }
h1 { font-size: clamp(2.4rem, 5.5vw, 5.5rem); letter-spacing: -.06em; line-height: 1.08; margin: 22px 0; overflow-wrap: anywhere; }
h2 { font-size: 1.35rem; line-height: 1.3; letter-spacing: -.025em; }
p { color: var(--fz-ink-2); overflow-wrap: anywhere; }
.lead { font-size: clamp(1.3rem, 2.3vw, 2rem); color: var(--fz-ink); line-height: 1.4; }
.product { width: 100%; height: auto; border: 1px solid var(--fz-border); border-radius: 24px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-block: 32px; }
.button { display: inline-block; padding: 14px 20px; border-radius: 9px; background: var(--fz-primary); color: var(--fz-primary-ink); font-size: .95rem; font-weight: 700; text-decoration: none; }
.button:hover { background: var(--fz-primary-hover); color: var(--fz-primary-ink); }
.note { font-size: .82rem; color: var(--fz-ink-3); }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--fz-border); border-radius: 20px; overflow: hidden; background: var(--fz-border); }
.features article { padding: 32px; background: var(--fz-surface); }
.number { color: var(--fz-ink-3); font-size: .8rem; font-variant-numeric: tabular-nums; }
.features p { font-size: .95rem; margin-bottom: 0; }
.information { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-block: 90px; }
.information h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.resources { align-self: center; }
.resources a { display: flex; justify-content: space-between; gap: 20px; padding-block: 22px; border-bottom: 1px solid var(--fz-border); text-decoration: none; }
.footer { border-top: 1px solid var(--fz-border); color: var(--fz-ink-3); font-size: .8rem; }
.skip { position: absolute; top: -100px; left: 16px; padding: 12px; background: var(--fz-surface); }
.skip:focus { top: 12px; }
@media (max-width: 900px) {
    .shell { width: calc(100% - 40px); }
    .hero, .information { grid-template-columns: 1fr; gap: 28px; padding-block: 48px; }
    .hero .product { max-width: 620px; }
    .features { grid-template-columns: 1fr; }
    .features article { padding: 24px; }
}
@media (max-width: 400px) {
    .masthead, .footer { flex-direction: column; align-items: flex-start; gap: 12px; }
    .actions { align-items: flex-start; flex-direction: column; gap: 18px; }
}