@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-Variable.ttf") format("truetype-variations"), url("/assets/fonts/inter/Inter-Variable.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: block; }
@font-face { font-family: "CormorantGaramond"; src: url("/assets/fonts/cormorant/cormorant-garamond-v21-latin-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "CormorantGaramond"; src: url("/assets/fonts/cormorant/cormorant-garamond-v21-latin-500.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: "CormorantGaramond"; src: url("/assets/fonts/cormorant/cormorant-garamond-v21-latin-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: block; }
@font-face { font-family: "CormorantGaramond"; src: url("/assets/fonts/cormorant/cormorant-garamond-v21-latin-italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "CormorantUprightMedium"; src: url("/assets/fonts/cormorant_upright/CormorantUpright-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: block; }

:root {
  --cream:          #F4EFE7;
  --cream-soft:     #F8F4ED;
  --cream-warm:     #EFE8DD;
  --charcoal:       #1A1814;
  --charcoal-mid:   #4A4642;
  --charcoal-soft:  #7C766C;
  --terracotta:     #9D5640;
  --terracotta-deep:#7A4232;
  --rust:           #B5654C;
  --ochre:          #A6824C;
  --hairline:       rgba(26, 24, 20, 0.14);
  --hairline-strong:rgba(26, 24, 20, 0.22);
  --segment-bg:     rgba(26, 24, 20, 0.10);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--cream); color: var(--charcoal); }
body { font-family: "Inter", system-ui, sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   STICKY HEADER — V4 wordmark + step label + segmented progress
   ============================================================ */
.q-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 239, 231, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.q-header__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 10px;
}
@media (min-width: 768px) { .q-header__row { padding: 16px 32px 12px; } }
@media (min-width: 1200px){ .q-header__row { padding: 18px 56px 12px; } }
.q-wordmark { height: 22px; width: auto; opacity: 0.92; }
@media (min-width: 768px) { .q-wordmark { height: 26px; } }
/* Result-page brandmark when used as SVG image (emblem + wordmark together) */
.r-brandmark--img {
  display: block;
  height: 28px;
  width: auto;
  margin: 0 auto 14px;
  opacity: 0.92;
}
@media (min-width: 768px) { .r-brandmark--img { height: 34px; margin-bottom: 18px; } }
.q-step {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--charcoal-soft);
}
.q-step strong { color: var(--terracotta); font-weight: 700; }
.q-step--paused { opacity: 0.55; }

.q-progress { display: flex; gap: 4px; padding: 0 20px 12px; }
@media (min-width: 768px) { .q-progress { padding: 0 32px 14px; gap: 5px; } }
@media (min-width: 1200px){ .q-progress { padding: 0 56px 14px; gap: 6px; max-width: 720px; margin: 0 auto; } }
.q-progress__seg { flex: 1; height: 3px; background: var(--segment-bg); border-radius: 2px; transition: background 0.18s ease; }
.q-progress__seg--filled { background: var(--terracotta); }
.q-progress__seg--current { background: linear-gradient(90deg, var(--terracotta) 50%, var(--segment-bg) 50%); }
.q-progress--paused .q-progress__seg--current { background: var(--terracotta); }  /* contact + qualification: hold at current */

/* ============================================================
   MAIN — single column, generous whitespace, sticky CTA at bottom
   ============================================================ */
.q-main {
  flex: 1;
  padding: 28px 20px 28px;
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
  display: flex; flex-direction: column;
}
@media (min-width: 768px) { .q-main { padding: 56px 32px 40px; max-width: 540px; } }
@media (min-width: 1200px){ .q-main { padding: 72px 32px 56px; max-width: 600px; } }

.q-eyebrow {
  font-family: "Inter", sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 14px;
}
@media (min-width: 768px) { .q-eyebrow { font-size: 12px; margin-bottom: 18px; } }

.q-h1-quiz {
  font-family: "CormorantUprightMedium", "CormorantGaramond", Georgia, serif;
  font-weight: 500; font-size: 36px; line-height: 1.12; letter-spacing: -0.012em;
  color: var(--charcoal); margin: 0 0 18px;
}
@media (min-width: 768px) { .q-h1-quiz { font-size: 48px; margin-bottom: 22px; } }
@media (min-width: 1200px){ .q-h1-quiz { font-size: 56px; } }

.q-rule { width: 64px; height: 1.5px; background: var(--terracotta); border-radius: 1px; margin: 0 0 18px; }
.q-rule--center { margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .q-rule { width: 72px; margin-bottom: 22px; } }

.q-sub {
  font-family: "CormorantGaramond", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 16px; line-height: 1.5;
  color: var(--charcoal-mid);
  margin: 0 0 14px;
  max-width: 32ch;
}
@media (min-width: 768px) { .q-sub { font-size: 18px; max-width: 36ch; } }

.q-meta {
  font-family: "Inter", sans-serif; font-weight: 400;
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--charcoal-soft);
  margin: 0 0 32px;
}

.q-question {
  font-family: "CormorantGaramond", Georgia, serif;
  font-weight: 500; font-size: 24px; line-height: 1.28;
  color: var(--charcoal); margin: 0 0 8px; letter-spacing: -0.004em;
}
@media (min-width: 768px) { .q-question { font-size: 30px; } }
@media (min-width: 1200px){ .q-question { font-size: 34px; } }
.q-question em { font-style: italic; color: var(--terracotta-deep); }

.q-helper {
  font-family: "CormorantGaramond", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 14px; line-height: 1.5;
  color: var(--charcoal-mid);
  margin: 0 0 22px;
}
@media (min-width: 768px) { .q-helper { font-size: 15px; margin-bottom: 28px; } }

.q-multi-hint {
  font-family: "Inter", sans-serif; font-weight: 500;
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--charcoal-soft);
  margin: 0 0 14px;
}
.q-multi-hint::before { content: "✓"; margin-right: 6px; color: var(--terracotta); font-weight: 700; }

/* ============================================================
   ANSWER OPTIONS — 60px min height tap targets
   ============================================================ */
.q-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
@media (min-width: 768px) { .q-options { gap: 12px; margin-bottom: 32px; } }

.q-opt {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 60px;
  padding: 14px 18px;
  background: var(--cream-soft);
  border: 1px solid var(--hairline); border-radius: 12px;
  text-align: left; color: var(--charcoal);
  transition: border-color 0.18s ease, background 0.18s ease;
}
@media (min-width: 768px) { .q-opt { min-height: 64px; padding: 16px 22px; gap: 16px; } }
.q-opt:hover, .q-opt:focus-visible {
  border-color: var(--hairline-strong);
  background: var(--cream);
  outline: none;
}
.q-opt--selected { border-color: var(--terracotta); border-width: 1.5px; background: rgba(157, 86, 64, 0.06); }

.q-opt__marker {
  width: 18px; height: 18px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: 50%; background: transparent;
  flex-shrink: 0; position: relative;
  transition: border-color 0.18s ease;
}
.q-opt--selected .q-opt__marker { border-color: var(--terracotta); }
.q-opt--selected .q-opt__marker::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--terracotta);
}
.q-opt--multi .q-opt__marker { border-radius: 4px; }
.q-opt--multi.q-opt--selected .q-opt__marker { background: var(--terracotta); border-color: var(--terracotta); }
.q-opt--multi.q-opt--selected .q-opt__marker::after {
  content: ""; position: absolute; top: 2px; left: 5px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); background: transparent; border-radius: 0;
}

.q-opt__label {
  font-family: "Inter", sans-serif; font-weight: 400;
  font-size: 15px; line-height: 1.4;
  color: var(--charcoal); letter-spacing: 0.005em;
}
@media (min-width: 768px) { .q-opt__label { font-size: 16px; } }

/* ============================================================
   FORM FIELDS (contact capture) — underline-only, focus terracotta
   ============================================================ */
.q-fields { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; }
.q-field { display: flex; flex-direction: column; gap: 6px; }
.q-field__label {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--charcoal-soft);
}
.q-field__input {
  width: 100%;
  font-family: "Inter", sans-serif; font-weight: 400;
  font-size: 16px;
  color: var(--charcoal); background: transparent;
  border: 0; border-bottom: 1px solid rgba(26, 24, 20, 0.24);
  padding: 12px 2px 10px;
  outline: none;
  transition: border-color 0.18s ease, border-bottom-width 0.18s ease;
}
.q-field__input:focus { border-bottom-color: var(--terracotta); border-bottom-width: 1.5px; }
.q-field__input::placeholder { color: rgba(26, 24, 20, 0.42); }

.q-privacy {
  font-family: "CormorantGaramond", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 14px; line-height: 1.5;
  color: var(--charcoal-mid);
  margin: 0 0 24px;
}

/* ============================================================
   CTA — charcoal pill (in-quiz) | rust F2 sunset pill (result-only)
   ============================================================ */
.q-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px 24px;
  background: var(--charcoal); color: var(--cream);
  border: none; border-radius: 12px;
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: 14px; letter-spacing: 0.10em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(26, 24, 20, 0.16);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  margin-top: auto;
}
.q-cta:hover, .q-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(26, 24, 20, 0.22);
  outline: none;
}
.q-cta:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.q-cta__arrow { display: inline-block; transition: transform 0.18s ease; }
.q-cta:hover .q-cta__arrow { transform: translateX(3px); }

/* RESULT-PAGE PRIMARY CTA — F2 sunset rust pill, matches the funnel */
.q-cta--sunset {
  background: linear-gradient(180deg, #B96E50 0%, #9D5640 50%, #7A4232 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(157, 86, 64, 0.32), 0 1px 0 rgba(255,255,255,0.18) inset;
}
.q-cta--sunset:hover, .q-cta--sunset:focus-visible {
  box-shadow: 0 12px 28px rgba(157, 86, 64, 0.42), 0 1px 0 rgba(255,255,255,0.22) inset;
}

.q-cta-secondary {
  display: block; text-align: center; margin: 12px 0 14px;
  font-family: "Inter", sans-serif; font-weight: 500;
  font-size: 14px; letter-spacing: 0.04em;
  color: var(--charcoal-mid); text-decoration: underline; text-underline-offset: 4px;
}
.q-cta-secondary:hover { color: var(--terracotta); }

/* ============================================================
   FOOTER — matches CANVAS v2 site register
   ============================================================ */
.site-footer {
  margin-top: auto;
  padding: 2.5rem 1.5rem 2rem;
  text-align: center;
  display: flex; flex-direction: column; gap: 0.9rem;
  font-size: 0.82rem; line-height: 1.55;
  color: var(--charcoal-mid);
  border-top: 1px solid var(--hairline);
}
.site-footer__wordmark {
  font-family: "CormorantUprightMedium", "CormorantGaramond", Georgia, serif; font-weight: 500;
  font-size: 0.95rem; letter-spacing: 0.02em; color: var(--charcoal);
  display: inline-flex; align-items: center; gap: 8px; justify-content: center; margin: 0;
}
.site-footer__wordmark::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--terracotta); border-radius: 50%; }
.site-footer__legal { margin: 0; display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.site-footer__legal a { text-decoration: underline; text-underline-offset: 3px; color: var(--charcoal-mid); }
.site-footer__legal span { opacity: 0.45; }

/* ============================================================
   RESULT SCREEN — Run 1 master wrapper + per-band wash
   ============================================================ */
.r-page { background: var(--cream); }
.r-page__inner {
  max-width: 720px; margin: 0 auto;
  padding: 32px 20px 16px;
}
@media (min-width: 768px) { .r-page__inner { padding: 56px 32px 20px; } }
@media (min-width: 1200px){ .r-page__inner { padding: 72px 32px 24px; } }

.r-brandmark {
  font-family: "Inter", sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--terracotta);
  text-align: center; margin: 0 0 14px;
}
.r-page__h1 {
  font-family: "CormorantUprightMedium", Georgia, serif; font-weight: 500;
  font-size: 32px; line-height: 1.1; letter-spacing: -0.012em;
  color: var(--charcoal);
  text-align: center; margin: 0 0 10px;
}
@media (min-width: 768px) { .r-page__h1 { font-size: 44px; } }
@media (min-width: 1200px){ .r-page__h1 { font-size: 52px; } }
.r-page__sub {
  font-family: "CormorantGaramond", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 15px; line-height: 1.55; color: var(--charcoal-mid);
  text-align: center; max-width: 38ch; margin: 0 auto 28px;
}
@media (min-width: 768px) { .r-page__sub { font-size: 17px; margin-bottom: 40px; } }

/* Vertical sub-hook */
.r-subhook {
  font-family: "Inter", sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--terracotta);
  text-align: center; margin: 0 0 6px;
}
.r-subhook__line {
  font-family: "CormorantGaramond", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 16px; line-height: 1.55; color: var(--charcoal);
  text-align: center; max-width: 38ch; margin: 0 auto 32px;
}
@media (min-width: 768px) { .r-subhook__line { font-size: 18px; margin-bottom: 44px; } }

/* RESULT WASH BLOCK — per-band tint on cream */
.r-result {
  border-radius: 16px;
  padding: 32px 22px;
  margin: 0 0 28px;
  border: 1px solid var(--hairline);
}
@media (min-width: 768px) { .r-result { padding: 44px 36px; margin-bottom: 36px; } }
@media (min-width: 1200px){ .r-result { padding: 52px 44px; } }
/* Per-band washes — soft overlays on cream */
.r-result--repair      { background: linear-gradient(180deg, rgba(157,86,64,0.12), rgba(181,101,76,0.06)); }
.r-result--recalibrate { background: linear-gradient(180deg, rgba(166,130,76,0.14), rgba(195,159,110,0.08)); }
.r-result--restore     { background: linear-gradient(180deg, rgba(193,124,84,0.16), rgba(217,169,116,0.08)); }
.r-result--solemn      { background: linear-gradient(180deg, rgba(91,73,56,0.14), rgba(63,50,41,0.08)); }
/* Tier modifiers — alpha multipliers handled via class chaining */
.r-result--t2 { opacity: 1; filter: saturate(0.85); }   /* Tier 2 softening */
.r-result--t3 { opacity: 1; filter: saturate(0.65); }   /* Tier 3 lightest */

.r-result__element1 {
  font-family: "CormorantUprightMedium", Georgia, serif; font-weight: 500;
  font-size: 22px; line-height: 1.25; letter-spacing: -0.006em;
  color: var(--charcoal); margin: 0 0 10px;
}
@media (min-width: 768px) { .r-result__element1 { font-size: 28px; } }
.r-result__rule { width: 56px; height: 1.5px; background: var(--terracotta); border-radius: 1px; margin: 0 0 18px; }
.r-result--solemn .r-result__rule { background: var(--terracotta-deep); }
.r-result--restore .r-result__rule { background: var(--rust); }
.r-result--recalibrate .r-result__rule { background: var(--ochre); }

.r-result__element2 {
  font-family: "CormorantGaramond", Georgia, serif; font-weight: 400;
  font-size: 15.5px; line-height: 1.6; color: var(--charcoal);
  margin: 0 0 28px; max-width: 56ch;
}
@media (min-width: 768px) { .r-result__element2 { font-size: 17px; margin-bottom: 36px; } }

.r-drivers-title {
  font-family: "Inter", sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--charcoal-soft); margin: 0 0 14px;
}
.r-drivers { display: flex; flex-direction: column; gap: 12px; margin: 0 0 28px; }
.r-driver {
  background: rgba(244, 239, 231, 0.45);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--terracotta);
  border-radius: 12px;
  padding: 14px 16px;
}
.r-result--solemn .r-driver { border-left-color: var(--terracotta-deep); }
.r-result--restore .r-driver { border-left-color: var(--rust); }
.r-result--recalibrate .r-driver { border-left-color: var(--ochre); }
.r-driver__title {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--charcoal); margin: 0 0 4px;
}
.r-driver__body {
  font-family: "Inter", sans-serif; font-weight: 300;
  font-size: 13.5px; line-height: 1.55;
  color: var(--charcoal-mid); margin: 0;
}

.r-resource {
  font-family: "CormorantGaramond", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 15px; line-height: 1.55; color: var(--charcoal);
  margin: 0 0 8px;
}
.r-resource strong { font-style: normal; font-weight: 600; }

/* Result-page CTA pair: secondary text-link + primary F2 sunset pill */
.r-cta-block { margin: 24px 0 10px; }

/* Element 5 social proof + disclaimer + footer */
.r-proof {
  text-align: center; margin: 8px 0 28px;
}
.r-proof__label {
  font-family: "Inter", sans-serif; font-weight: 700;
  font-size: 10px; letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--terracotta); margin: 0 0 8px;
}
.r-proof__line {
  font-family: "CormorantGaramond", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 16px; line-height: 1.5; color: var(--charcoal); margin: 0;
}
@media (min-width: 768px) { .r-proof__line { font-size: 18px; } }

.r-disclaimer {
  font-family: "Inter", sans-serif; font-weight: 300;
  font-size: 11px; line-height: 1.55; color: var(--charcoal-soft);
  margin: 24px auto; padding-top: 18px; max-width: 56ch;
  border-top: 1px solid var(--hairline);
}
.r-disclaimer__label {
  font-family: "Inter", sans-serif; font-weight: 700;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--charcoal-mid); margin: 0 0 6px;
}

/* ---- END-OF-QUIZ 2-CARD CTA BLOCK (q-endcta) ---- */
.q-endcta {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  margin: 32px auto 0; max-width: 720px;
}
@media (min-width: 768px) {
  .q-endcta { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
}
.q-endcta__card {
  display: flex; flex-direction: column;
  background: var(--cream-soft);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 26px 24px 24px;
  color: inherit; text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
@media (min-width: 768px) {
  .q-endcta__card { padding: 32px 30px 28px; }
}
.q-endcta__card:hover, .q-endcta__card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--charcoal-soft);
  box-shadow: 0 6px 18px rgba(26, 24, 20, 0.06);
  outline: none;
}
.q-endcta__card:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.q-endcta__eyebrow {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 10px;
}
.q-endcta__card--a .q-endcta__eyebrow { color: var(--terracotta-deep); }
.q-endcta__card--b .q-endcta__eyebrow { color: var(--ochre); }
.q-endcta__headline {
  font-family: "CormorantUprightMedium", "CormorantGaramond", Georgia, serif;
  font-weight: 500; font-size: 22px; line-height: 1.2;
  color: var(--charcoal); margin: 0 0 10px; letter-spacing: -0.004em;
}
@media (min-width: 768px) { .q-endcta__headline { font-size: 24px; } }
.q-endcta__who {
  font-family: "Inter", sans-serif; font-weight: 400;
  font-size: 14.5px; line-height: 1.55; color: var(--charcoal-mid);
  margin: 0 0 20px;
}
.q-endcta__button {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start; margin-top: auto;
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: 14px; letter-spacing: 0.01em;
  padding: 10px 20px; border-radius: 999px;
  text-decoration: none;
}
.q-endcta__card--a .q-endcta__button {
  background: var(--terracotta); color: var(--cream);
}
.q-endcta__card--a:hover .q-endcta__button,
.q-endcta__card--a:focus-visible .q-endcta__button {
  background: var(--terracotta-deep);
}
.q-endcta__card--b .q-endcta__button {
  background: transparent; color: var(--charcoal);
  border: 1.5px solid var(--charcoal);
}
.q-endcta__card--b:hover .q-endcta__button,
.q-endcta__card--b:focus-visible .q-endcta__button {
  background: var(--charcoal); color: var(--cream);
}
.q-endcta__arrow { transition: transform 0.18s ease; }
.q-endcta__card:hover .q-endcta__arrow { transform: translateX(3px); }

/* FORGE: hide all screens by default, JS toggles via data-screen on body */
body[data-screen="intro"]         .screen-question,
body[data-screen="intro"]         .screen-contact,
body[data-screen="intro"]         .screen-qualification,
body[data-screen="intro"]         .screen-result { display: none; }
body[data-screen="question"]      .screen-intro,
body[data-screen="question"]      .screen-contact,
body[data-screen="question"]      .screen-qualification,
body[data-screen="question"]      .screen-result { display: none; }
body[data-screen="contact"]       .screen-intro,
body[data-screen="contact"]       .screen-question,
body[data-screen="contact"]       .screen-qualification,
body[data-screen="contact"]       .screen-result { display: none; }
body[data-screen="qualification"] .screen-intro,
body[data-screen="qualification"] .screen-question,
body[data-screen="qualification"] .screen-contact,
body[data-screen="qualification"] .screen-result { display: none; }
body[data-screen="result"]        .screen-intro,
body[data-screen="result"]        .screen-question,
body[data-screen="result"]        .screen-contact,
body[data-screen="result"]        .screen-qualification { display: none; }