:root { --accent: #f4c928; --accent-text: #725b00; --accent-soft: #fff0a6; --canvas: #fffdf7; --ink: #111111; }
.utility-strip { padding: 9px 20px; background: var(--ink); color: white; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.brand-mark { border-width: 3px; border-radius: 9px; background: var(--accent); }
.brand-mark span { height: 3px; }
h1 { font-size: clamp(58px, 7.4vw, 96px); font-weight: 860; line-height: .88; letter-spacing: -.075em; }
.hero { grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr); }
.tool-stage { position: relative; padding-top: 28px; }
.stage-label { position: absolute; top: 0; right: 0; color: var(--ink); font: 800 11px/1 "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.tool-shell { border: 3px solid var(--ink); border-radius: 18px; box-shadow: 14px 14px 0 var(--accent); }
textarea { border: 2px solid var(--ink); border-radius: 10px; }
.primary-button { border-color: var(--ink); border-radius: 10px; background: var(--ink); }
.primary-button:hover:not(:disabled) { box-shadow: 0 7px 0 var(--accent); }
.text-button { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.article-reference a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
.limit-upsell { border: 2px solid var(--ink); background: var(--accent-soft); }
.limit-upsell .primary-button { background: var(--ink); color: white; }
.disclosure { border: 2px solid var(--ink); border-left-width: 8px; background: var(--accent-soft); }
.information-heading { display: flex; gap: 24px; }
.section-number { font-size: 48px; font-weight: 900; line-height: 1; }
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .tool-shell { box-shadow: 8px 8px 0 var(--accent); } }