@font-face {
  font-family: IBMPlex;
  src: url('/assets/IBMPlexSans-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: IBMPlex;
  src: url('/assets/IBMPlexSans-500-latin-ext.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: IBMPlex;
  src: url('/assets/IBMPlexSans-600-latin-ext.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: SpaceGrotesk;
  src: url('/assets/SpaceGrotesk-600-latin-ext.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  --film-ink: #101010;
  --film-muted: rgba(0, 0, 0, .58);
  --film-line: #d7dfe4;
  --film-orange: #e55600;
  --film-soft: #cfd8de;
}

html,
body {
  background: #edf1f3;
  color: var(--film-ink);
}

.review-shell {
  min-height: 100dvh;
  padding: 24px;
  display: flex;
  justify-content: center;
  background: transparent;
}

.consult-stage {
  position: relative;
  width: 390px;
  max-width: 100%;
  min-height: min(844px, calc(100dvh - 48px));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 60px -18px rgba(16, 24, 29, .18);
}

.is-interstitial .consult-stage {
  background: var(--film-soft);
}

.is-intro .consult-stage {
  overflow-y: auto;
}

.film-progress {
  height: 8px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 0;
  background: rgba(0, 0, 0, .08);
}

.film-progress span {
  display: block;
  height: 100%;
  border-radius: 0;
  background: var(--film-orange);
  transition: width .2s ease;
}

.consult-header {
  height: auto;
  border: 0;
  background: transparent;
}

.header-inner {
  height: auto;
  max-width: none;
  margin: 0;
  padding: 16px 20px 4px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
}

.brand {
  grid-column: 2;
  width: auto;
  height: 30px;
}

.back-action {
  grid-column: 1;
  justify-self: start;
  position: relative;
  width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.back-action::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(16, 16, 16, .14);
  border-radius: inherit;
  background: rgba(255, 255, 255, .72);
}

.back-action svg {
  position: relative;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.language-control {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--film-muted);
  font-size: .78rem;
  font-weight: 500;
}

.language-control svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}


.consult-body {
  padding: 0 26px 108px;
}

.section-pill {
  margin: 26px 0 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #eceff1;
  color: var(--film-ink);
  font-size: .72rem;
  font-weight: 600;
}

.intro-content {
  padding-bottom: 28px;
}

.intro-content .section-pill {
  width: fit-content;
}

.intro-title {
  max-width: 330px;
  font: 600 2rem/1.05 var(--display);
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.intro-copy {
  margin: 28px 0 0;
  color: var(--film-muted);
  font-size: 1rem;
  line-height: 1.5;
}

.intro-copy strong {
  color: var(--film-ink);
  font-weight: 600;
}

.intro-promises {
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
}

.intro-promise {
  position: relative;
  padding-left: 24px;
  color: rgba(0, 0, 0, .68);
  font-size: .94rem;
  line-height: 1.4;
}

.intro-promise::before {
  content: '✓';
  position: absolute;
  left: 1px;
  color: var(--film-orange);
  font-weight: 600;
}

.primary-action.intro-start {
  margin: 30px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--display);
  text-transform: uppercase;
}

.intro-how {
  margin-top: 48px;
}

.intro-how h2,
.intro-proof-label {
  margin: 0;
  color: rgba(0, 0, 0, .58);
  font: 600 .74rem/1.2 var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.intro-timeline {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(0, 0, 0, .09);
}

.intro-timeline-row {
  padding: 17px 0;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .09);
}

.intro-timeline-number {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--film-line);
  border-radius: 999px;
  font: 600 .76rem/1 var(--display);
}

.intro-timeline-row strong {
  color: rgba(0, 0, 0, .5);
  font: 600 .72rem/1.2 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.intro-timeline-row p {
  margin: 5px 0 0;
  font-size: .92rem;
  line-height: 1.42;
}

.intro-proof {
  margin-top: 40px;
  text-align: center;
}

.intro-media {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.intro-media-logo {
  display: block;
  width: auto;
  height: 22px;
  max-width: 44%;
}

.intro-proof .trust-proof {
  margin-top: 18px;
}

.intro-proof .trustpilot-rating {
  flex-wrap: wrap;
}

.eyebrow {
  margin: 26px 0 12px;
  color: var(--film-muted);
  font-size: .72rem;
}

h1 {
  max-width: none;
  margin: 0;
  font: 600 1.32rem/1.18 var(--display);
  text-wrap: balance;
}

/* Step changes move focus to this non-tab-stop heading for assistive
   technology. Keep that programmatic focus quiet; interactive controls keep
   their own :focus-visible indicators in the page shell. */
#step-title[tabindex="-1"]:focus {
  outline: none;
}

.is-interstitial .consult-content > h1 {
  font: 600 clamp(1.9rem, 4.2vw, 3rem)/1.08 var(--display);
}

.step-copy {
  max-width: none;
  margin: 8px 0 0;
  color: var(--film-muted);
  font-size: 1rem;
  line-height: 1.5;
}

.step-hint {
  margin: 12px 0 0;
  color: rgba(0, 0, 0, .48);
  font-size: .78rem;
  line-height: 1.4;
}

.step-hint:empty {
  display: none;
}

fieldset {
  margin: 24px 0 0;
}

.condition-none {
  grid-template-columns: minmax(0, 1fr);
}

.condition-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 12px;
  color: var(--film-muted);
  font-size: .78rem;
  font-weight: 500;
}

.condition-divider::before,
.condition-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--film-line);
}

.condition-list {
  gap: 12px;
  padding-bottom: 8px;
}

.choice-grid {
  gap: 14px;
}

.choice-card {
  min-height: 60px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  border: 1px solid var(--film-line);
  border-radius: 10px;
  background: #fff;
}

.choice-card:hover {
  border-color: #a9b4ba;
}

.choice-card:has(input:checked) {
  border-color: var(--film-orange);
  box-shadow: 0 0 0 1px var(--film-orange);
}

.choice-card input {
  position: absolute;
  opacity: 0;
}

.choice-content,
.choice-card.has-image .choice-content {
  grid-column: 1;
  grid-row: auto;
}

.choice-label {
  font-size: 1.04rem;
  font-weight: 500;
  line-height: 1.35;
}

.choice-note {
  color: var(--film-muted);
  font-size: .8rem;
}

.choice-chevron {
  grid-column: 2;
  width: 16px;
  height: 16px;
}

.choice-chevron svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(0, 0, 0, .34);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.choice-control {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 0, 0, .28);
  border-radius: 5px;
}

.choice-card:has(input[type=checkbox]) {
  grid-template-columns: auto 1fr;
}

.choice-card:has(input[type=checkbox]) .choice-control {
  grid-column: 1;
  grid-row: 1;
}

.choice-card:has(input[type=checkbox]) .choice-content {
  grid-column: 2;
  grid-row: 1;
}

.choice-grid.image-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}

.image-grid .choice-card.has-image {
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.image-grid .choice-card.has-image .choice-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.image-grid .choice-card.has-image .choice-content {
  width: 100%;
  padding: 9px 11px;
}

.image-grid .choice-label {
  font-size: .9rem;
}

.disclosure {
  margin-top: 14px;
  border-color: var(--film-line);
  background: #fff;
}

.text-field,
.personal-grid label,
.birthdate-field {
  color: var(--film-muted);
  font-size: .72rem;
}

.text-field,
.personal-grid,
.consent-card {
  margin-top: 24px;
}

.personal-grid {
  gap: 10px;
}

.phone-label,
.birthdate-label {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.phone-label strong {
  font-weight: 600;
  color: inherit;
}

.birthdate-label {
  font-weight: 600;
}

.phone-helper {
  font-weight: 400;
  color: var(--film-muted);
}

.birthdate-field {
  display: grid;
  gap: 7px;
}

.birthdate-grid {
  display: grid;
  grid-template-columns: 58px 8px 58px 8px minmax(80px, 100px);
  align-items: center;
  gap: 6px;
}

.birthdate-grid input {
  width: 100%;
  min-width: 0;
  text-align: center;
}

.birthdate-grid span {
  text-align: center;
  color: var(--film-muted);
}

textarea,
input:not([type=radio]):not([type=checkbox]) {
  min-height: 46px;
  border-color: var(--film-line);
  border-radius: 10px;
}

/* iOS zoomt bij focus in op elk tekstveld onder 16px, en de labels boven de
   velden staan op 12px die de invoer erft. De invoer zelf staat daarom vast
   op 16px; het label blijft klein. Geen maximum-scale in de viewport: dat
   zou ook het knijpzoomen van de bezoeker uitzetten. */
input:not([type=radio]):not([type=checkbox]),
select,
textarea {
  font-size: 16px;
  line-height: 1.4;
}

.personal-form {
  margin: 0;
}

.consent-card {
  padding: 14px;
  border-color: var(--film-line);
  border-radius: 10px;
}

/* Twee verklaringen op de laatste check: zelfde kaart, kleinere tussenruimte. */
.consent-card + .consent-card {
  margin-top: 12px;
}

.step-error {
  min-height: 0;
  margin: 12px 0 0;
}

.step-error:empty {
  display: none;
}

.trust-proof {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, .07);
  color: rgba(0, 0, 0, .5);
}

.trustpilot-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--film-ink);
  font-size: 12px;
}

.trustpilot-label {
  font-weight: 600;
}

.trustpilot-stars {
  width: 96px;
  height: 18px;
  display: block;
}

.customer-count {
  color: rgba(0, 0, 0, .5);
}

.actions {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: 0;
  width: min(390px, 100%);
  padding: 12px 26px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  transform: translateX(-50%);
  background: #fff;
}

.is-interstitial .actions {
  background: var(--film-soft);
}

.primary-action {
  width: 100%;
  min-height: 52px;
  margin: 0;
  border-color: var(--film-orange);
  background: var(--film-orange);
}

.resume-banner {
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--film-line);
  border-radius: 10px;
  background: #f5f7f8;
  color: var(--film-ink);
  font-size: 13.5px;
}

.state-card {
  margin: 26px 0 0;
  padding: 36px 22px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Bestaand e-mailadres: onder de inlogknop nog twee uitwegen, in hetzelfde
   kaart-idioom. Het blok is links uitgelijnd, want een label boven een veld
   leest niet gecentreerd. */
.state-switch {
  width: 100%;
  max-width: 340px;
  margin: 8px 0 0;
  padding-top: 22px;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--film-line);
  text-align: left;
}

.state-switch-title {
  margin: 0;
  color: var(--film-ink);
  font-size: 13.5px;
  font-weight: 600;
}

.state-switch label {
  display: grid;
  gap: 7px;
  color: #3f4b52;
  font-size: 12px;
  font-weight: 600;
}

.secondary-action {
  min-height: 52px;
  border: 1px solid rgba(16, 16, 16, .22);
  border-radius: 999px;
  background: #fff;
  color: var(--film-ink);
  font: 600 13.5px var(--display);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}

.secondary-action:hover {
  border-color: var(--film-ink);
}

.secondary-action:disabled {
  opacity: .55;
  cursor: wait;
}

.text-action {
  margin: 4px 0 0;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--film-muted);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.text-action:hover {
  color: var(--film-ink);
}

/* .state-card p wint van .step-error op specificiteit; de foutregel in dit
   blok moet wel de foutkleur van de film houden. */
.state-switch .step-error {
  margin: 0;
  color: var(--error);
}

/* De inlogknop is een anchor: zonder dit draagt hij de standaard onderstreping
   van een link, wat geen enkele andere knop in de film doet. */
a.primary-action {
  text-decoration: none;
}

@media (min-width: 900px) {
  html,
  body {
    background: #fff;
  }

  .review-shell {
    padding: 0;
    display: block;
  }

  .consult-stage {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .film-progress {
    height: 4px;
    margin-top: 0;
  }

  .consult-header {
    border-bottom: 1px solid rgba(16, 24, 29, .07);
    background: #fff;
  }

  .header-inner {
    /* Zelfde grid als mobiel (eigenaarsdoorloop 02-09): terugknop links,
       logo altijd gecentreerd, taalwissel rechts op intro/doel. De flex met
       geerfde space-between duwde het logo naar rechts. */
    width: 100%;
    max-width: 1208px;
    height: 64px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0;
  }

  .brand {
    width: auto;
    height: 26px;
  }

  .back-action {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .language-control {
    display: inline-flex;
  }








  .consult-body {
    width: min(100%, 768px);
    margin: 0 auto;
    padding: 48px 24px 124px;
  }

  .is-intro .consult-body {
    width: min(100%, 640px);
    padding-bottom: 64px;
  }

  .intro-title {
    max-width: 560px;
    font-size: 2.7rem;
  }

  .section-pill,
  .eyebrow {
    margin-top: 0;
    margin-bottom: 14px;
  }

  h1 {
    font-size: 26px;
  }

  .step-copy {
    margin-top: 12px;
    font-size: 16px;
  }

  fieldset,
  .text-field,
  .personal-grid,
  .consent-card {
    margin-top: 28px;
  }

  .choice-grid.image-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
  }

  .image-grid .choice-card.has-image .choice-content {
    padding: 10px 12px;
  }

  .actions {
    position: fixed;
    width: min(calc(100% - 48px), 768px);
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    background: #fff;
  }

  .primary-action {
    width: 100%;
    min-width: 0;
    padding: 0 32px;
  }
}

@media (max-width: 438px) {
  html,
  body {
    background: #fff;
  }

  .review-shell {
    padding: 0;
  }

  .consult-stage {
    width: 100%;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 350px) {
  .consult-body,
  .actions {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Stapovergang zoals het bestaande consult: binnenkomende stap schuift 12px
   omhoog en fadet in (.3s, zelfde curve). De runtime vervangt de content per
   stap, dus verse elementen animeren vanzelf; in-place foutmeldingen niet. */
@keyframes step-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.consult-body > article,
.consult-body > .state-card {
  animation: step-enter .3s cubic-bezier(.22, 1, .36, 1) both;
}

/* De vaste knoppenbalk staat op translateX(-50%); een transform-animatie met
   fill both zou die centering overschrijven. Alleen fade dus. */
@keyframes step-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.actions {
  animation: step-fade .3s cubic-bezier(.22, 1, .36, 1) both;
}