/* Site styles on the design system tokens only (tokens.css from the core, brand alpha): no raw colours, sizes from
   space and typography roles. Light and dark, standard and high contrast come from tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-background-page);
  color: var(--color-text-primary);
  font: var(--typography-body);
}
main { max-width: 72rem; margin: 0 auto; padding: 0 var(--space-page); }
h1 { font: var(--typography-display-1); margin: 0 0 var(--space-regular); }
h2 { font: var(--typography-heading-2); margin: 0 0 var(--space-regular); }
a { color: var(--color-text-link); }
:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.skip { position: absolute; left: -100vw; }
.skip:focus { left: var(--space-regular); top: var(--space-regular); background: var(--color-background-surface); padding: var(--space-tight); }

.hero { padding: var(--space-hero) 0; }
.hero__subtitle { font: var(--typography-body-large); color: var(--color-text-secondary); max-width: 40rem; }
.section { padding: var(--space-section) 0; border-top: 1px solid var(--color-border-subtle); }
.band__text { font: var(--typography-body-large); margin: 0; }
.band { background: var(--band-background); color: var(--band-content); padding: var(--space-section) var(--space-page); border-radius: var(--radius-surface); }

.points, .cards { list-style: none; padding: 0; display: grid; gap: var(--space-regular); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.card { background: var(--card-background); border: 1px solid var(--card-border); border-radius: var(--radius-surface); padding: var(--space-loose); }
.steps { list-style: none; padding: 0; display: grid; gap: var(--space-regular); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); counter-reset: step; }
.step { border-radius: var(--radius-surface); padding: var(--space-loose); counter-increment: step; }
.step::before { content: counter(step); display: block; font: var(--typography-heading-3); }
.step h3 { font: var(--typography-heading-4); margin: var(--space-tight) 0; }
.step p { margin: 0; }
.step--1 { background: var(--step-card-1-background); color: var(--step-card-1-content); }
.step--2 { background: var(--step-card-2-background); color: var(--step-card-2-content); }
.step--3 { background: var(--step-card-3-background); color: var(--step-card-3-content); }
.step--4 { background: var(--step-card-4-background); color: var(--step-card-4-content); }

.button {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  background: var(--button-background); color: var(--button-content);
  font: var(--typography-button); padding: var(--space-tight) var(--space-loose); border-radius: var(--radius-interactive);
}
.button:hover { background: var(--button-background-hover); }

.form { display: grid; gap: var(--space-regular); max-width: 36rem; }
.field { display: grid; gap: var(--space-tight); }
.field input, .field textarea {
  font: var(--typography-body); color: var(--field-content); background: var(--field-background);
  border: 1px solid var(--field-border); border-radius: var(--radius-interactive); padding: var(--space-tight);
}
.field input:focus, .field textarea:focus { border-color: var(--field-border-focus); }
.consent { display: flex; gap: var(--space-tight); align-items: flex-start; }
.form__trap { position: absolute; left: -100vw; }
.form__status:empty { display: none; }

.footer { display: flex; flex-wrap: wrap; gap: var(--space-loose); padding: var(--space-section) var(--space-page); max-width: 72rem; margin: 0 auto; }
.footer__line { flex-basis: 100%; margin: 0; color: var(--color-text-secondary); }