/* Page structure: header, intro band, question cards, thank-you. */

.preview-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-s);
  padding: var(--space-xs) var(--gutter);
  font-size: var(--step--1);
  text-align: center;
  background: color-mix(in oklch, var(--forest), black 35%);
  color: var(--on-dark-soft);
}

.site-header {
  display: flex;
  justify-content: center;
  padding: var(--space-s) var(--gutter);
  background: var(--forest);
  color: var(--on-dark);
}

.logo {
  flex: none;
  inline-size: clamp(9rem, 6rem + 14vw, 13rem);
}

/* Content grid with breakouts: one grid gives a centred column and lets a band run edge to edge. */

.page,
.survey,
.intro {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] min(100% - 2 * var(--gutter), var(--measure)) [content-end]
    minmax(var(--gutter), 1fr) [full-end];
}

.page > *,
.survey > *,
.intro > * { grid-column: content; }

.page > .survey,
.survey > .intro { grid-column: full; }

.page { padding-block-end: var(--space-l-xl); }

.intro {
  row-gap: var(--space-xs);
  padding-block: var(--space-m) calc(var(--space-l-xl) + var(--space-l));
  text-align: center;
  background: var(--forest);
  color: var(--on-dark);
}

.intro-kicker {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint);
}

.intro-title {
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.1;
}

.intro-when { color: var(--on-dark-soft); }

.intro-when::first-letter { text-transform: uppercase; }

.intro-text {
  justify-self: center;
  max-inline-size: 34rem;
  margin-block-start: var(--space-s);
}

.intro-complaint {
  justify-self: center;
  max-inline-size: 34rem;
  font-size: var(--step--1);
  color: var(--on-dark-soft);
}

.questions {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* The first question sits half on the band, so it is the first thing the eye lands on. */
.questions:has(.question-lead) { margin-block-start: calc(-1 * var(--space-l-xl)); }

.questions + .questions { margin-block-start: var(--space-s); }

.question {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s-l);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px oklch(0.3 0.02 190 / 0.08);
}

.question-title {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
}

.question-hint {
  margin-block-start: calc(-0.5 * var(--space-s));
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.question-lead {
  align-items: center;
  padding-block: var(--space-l);
  text-align: center;
  box-shadow: 0 0.75rem 2rem oklch(0.3 0.02 190 / 0.16);
}

.question-lead .question-title { font-size: var(--step-2); }

.follow-up,
.choice-other {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-self: stretch;
  text-align: start;
}

.follow-up-label,
.field-label { font-weight: 500; }

.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  margin-block-start: var(--space-l);
}

.submit-error {
  max-inline-size: 32rem;
  text-align: center;
  font-weight: 500;
}

/* Turnstile only takes room when Cloudflare asks the visitor to click. */
.captcha {
  display: flex;
  justify-content: center;
}

.captcha:not(:empty) { margin-block-start: var(--space-s); }

.closed,
.thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  margin-block-start: var(--space-l-xl);
  padding: var(--space-l) var(--space-s-l);
  border-radius: var(--radius);
  text-align: center;
  background: var(--surface);
}

.thanks:focus-visible { outline-color: transparent; }

.thanks-mark {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 4rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mint);
  color: var(--forest);
}

.thanks-mark svg { inline-size: 2rem; block-size: 2rem; }

.thanks-title {
  font-size: var(--step-2);
  line-height: 1.2;
}

.follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  inline-size: 100%;
  margin-block: var(--space-s);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--line);
}

.follow-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
}

.follow-links:not(:empty) { margin-block-start: var(--space-xs); }