*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-6); }
body { margin: 0; background: var(--color-white); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--line-body); overflow-wrap: break-word; }
img { max-width: 100%; height: auto; vertical-align: middle; }
svg { flex-shrink: 0; }
button, input, select, textarea { font: inherit; max-width: 100%; }
button, summary { cursor: pointer; }
button { color: inherit; }
a { color: var(--color-red-dark); text-underline-offset: .2em; }
a:hover { color: var(--color-red); }
:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.container { width: min(var(--container), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.section { padding-block: var(--section-padding); }
.soft { background: var(--color-soft); }
.charcoal { background: var(--color-ink); color: var(--color-on-dark); }
.charcoal :is(h1,h2,h3,strong), .charcoal a { color: var(--color-white); }
.charcoal .eyebrow { color: var(--color-lime); }
.two-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.cards { display: grid; gap: var(--space-6); }
.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.four-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); }
.card > :last-child { margin-bottom: 0; }
.card.soft { background: var(--color-soft); }
.card.charcoal, .dark-card { background: var(--color-dark-panel); border-color: var(--color-muted); color: var(--color-on-dark); }
.dark-card :is(h2,h3,a) { color: var(--color-white); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--button-min-height); padding: var(--button-padding-block) var(--button-padding-inline); border: 1px solid var(--color-red); border-radius: var(--radius-sm); background: var(--color-red); color: var(--color-white); text-decoration: none; font-size: var(--fs-ui); font-weight: var(--weight-semibold); line-height: var(--line-control); text-align: center; transition: background var(--motion-duration); }
.button:hover { background: var(--color-red-dark); color: var(--color-white); border-color: var(--color-red-dark); }
.button-secondary { border-color: var(--color-border-strong); background: transparent; color: var(--color-ink); }
.button-secondary:hover { background: var(--color-soft); color: var(--color-ink); border-color: var(--color-muted); }
.charcoal .button-secondary { color: var(--color-white); border-color: var(--color-muted); }
.charcoal .button-secondary:hover { background: var(--color-dark-panel); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-6); }
.badge { display: inline-block; border: 1px solid var(--color-border-strong); border-radius: 999px; padding: var(--space-1) var(--space-3); font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--color-ink); }
.badge-lime { background: var(--color-lime); border-color: var(--color-lime); }
.checklist, .plain-list { padding: 0; margin: var(--space-5) 0; list-style: none; }
.checklist li { position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-10); }
.checklist li::before { content: '✓'; display: grid; place-items: center; position: absolute; top: var(--space-3); left: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--color-lime); color: var(--color-ink); font-weight: var(--weight-semibold); font-size: var(--fs-small); }
.plain-list li { margin-block: var(--space-4); }
.screen-reader-text, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; z-index: 1000; top: var(--space-3); left: var(--space-3); background: var(--color-white); color: var(--color-ink); padding: var(--space-4); }
.section-border { border-top: 1px solid var(--color-border); }
.steps { margin-top: var(--space-10); }
.steps .card { padding: var(--space-6); }
.step-number { display: block; margin-bottom: var(--space-3); color: var(--color-red-dark); font-family: var(--font-display); font-size: 2rem; font-weight: var(--weight-display); }
.steps h3 { font-size: var(--fs-h3); }
.callout { padding: var(--space-5); background: var(--color-soft); border-radius: var(--radius-sm); }
.faq { border-bottom: 1px solid var(--color-border); padding-block: var(--space-4); }
.faq summary { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); list-style: none; font-weight: var(--weight-semibold); color: var(--color-ink); min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--color-red-dark); }
.faq[open] summary::after { content: '−'; }
.faq > div { padding-block: var(--space-3); }
@media (max-width: 1023px) { .four-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } .two-column { gap: var(--space-8); } }
@media (max-width: 767px) { .two-column, .three-columns, .four-columns { grid-template-columns: minmax(0, 1fr); } .card { padding: var(--space-6); } .cta-row .button { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0s; animation-duration: 0s; } }