.test-route {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
  max-width: 35rem;
}

.test-route span {
  padding: 7px 9px;
  border: 1px solid #ffffff2b;
  background: #15111f99;
  color: #d9d3e2;
  border-radius: 999px;
  font-size: .68rem;
  letter-spacing: .04em;
}

.hero { height: 100dvh; min-height: 100dvh; overflow: hidden; }
.test-instructions {
  max-width: 40rem;
  color: #eee9f4;
  font-size: .86rem;
  line-height: 1.45;
}

.block-heading {
  margin: -20px 0 24px;
  padding: 14px 16px;
  border-left: 3px solid var(--cyan);
  background: #01a1b10d;
}

.block-heading span {
  display: block;
  color: #70eef4;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.block-heading h3 {
  margin: 5px 0 0;
  font: 700 1.4rem/1 SlateCond;
  text-transform: uppercase;
}

.block-heading p {
  margin: 8px 0 0;
  color: #e7aeb8;
  font-size: .78rem;
  line-height: 1.4;
}

.block-heading p:empty { display: none; }
.alert-block .block-heading { border-color: #fb7185; background: #fb718512; }
.alert-block .block-heading span { color: #fda4af; }
.alert-block .progress i { background: #fb7185; }
.alert-block .icon-wrap { background: radial-gradient(circle, #762d45, transparent 68%); }

.alert-result .mark { border-color: #fb7185; color: #fb7185; }
.alert-result h2 { color: #fda4af; }
.alert-result .primary { background: #fb7185; color: #250710; }
.result { align-items: start; overflow-y: auto; }
.result-inner { width: min(100%, 720px); }
.center-locator,.result-followup { margin: 28px 0; padding: 22px; border: 1px solid #3a304b; border-radius: 9px; background: #171321; text-align: left; }
.center-locator { border-color: #fb718566; background: #fb71850b; }
.center-locator h3,.result-followup h3 { margin: 0 0 18px; font: 700 1.55rem/1.1 SlateCond; text-transform: uppercase; }
.center-locator label,.result-followup label { display: grid; gap: 8px; color: #d9d3e2; }
.center-locator select,.result-followup input[type=email] { width: 100%; min-height: 54px; padding: 0 14px; border: 1px solid #5a4b72; border-radius: 4px; background: #0f0d17; color: #fff; font: 1rem Slate; }
.center-info { margin-top: 14px; padding: 14px; border-left: 3px solid #fda4af; background: #fb718512; color: #fecdd3; line-height: 1.45; }
.institution-list { display: grid; gap: 10px; margin-top: 12px; }
.institution-card { padding: 14px; border: 1px solid #ffffff1f; border-radius: 6px; background: #0f0d17b8; }
.institution-card h4 { margin: 0; color: #fff; font-size: 1rem; }
.institution-card p { margin: 7px 0 10px !important; color: #cfc7d9 !important; font-size: .82rem !important; line-height: 1.4 !important; text-align: left; }
.institution-card div { display: flex; flex-wrap: wrap; gap: 12px; }
.institution-card a { color: #70eef4; font-size: .82rem; font-weight: 700; }
.result-followup form { display: grid; gap: 15px; }
.result-followup .consent { grid-template-columns: 22px 1fr; align-items: start; gap: 9px; font-size: .83rem; line-height: 1.4; }
.result-followup .consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cyan); }
.result-followup .primary { min-height: 54px; }
.result-followup #followup-status { min-height: 18px; margin: 0; color: #70eef4; font-size: .82rem; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0; }
.share-test,.result-actions .restart { min-height: 48px; margin: 0; border: 1px solid #5a4b72; border-radius: 4px; background: #1b1727; color: #fff; cursor: pointer; text-decoration: none; }
.privacy { max-width: 54rem !important; margin: 24px auto !important; color: #aaa1bb !important; font-size: .74rem !important; line-height: 1.55 !important; text-align: left; }
.legal-notice,.result-reference { margin: 30px 0 0; padding: 22px; border-top: 1px solid #3a304b; text-align: left; }
.legal-notice h3,.result-reference h3 { margin: 0 0 14px; color: #fff; font: 700 1.5rem/1 SlateCond; text-transform: uppercase; }
.legal-notice p,.result-reference p { max-width: none !important; margin: 10px 0 !important; color: #aaa1bb !important; font-size: .76rem !important; line-height: 1.55 !important; text-align: left; }
.result-reference { text-align: center; }
.result-reference h3 { color: #70eef4; text-align: center; }
.result-reference a { color: #70eef4; }
.result-reference .material-code { margin-top: 16px !important; color: #fff !important; font-weight: 700; text-align: center; }
.brand-amyca { left: auto; right: 24px; width: 145px; padding: 5px 8px; border-radius: 4px; background: #fff; filter: none; }

.questionnaire {
  min-height: 100dvh;
  padding: 96px 20px 60px;
  overflow: visible;
}

.questionnaire.active { display: block; }
.questionnaire-shell { width: min(100%, 820px); margin: 0 auto; }
.form-back { border: 0; background: none; color: #bcb4c9; padding: 10px 0; cursor: pointer; }
.form-heading { margin: 24px 0 30px; }
.form-heading h2 { margin: 0; max-width: 13ch; font: 700 clamp(2.8rem, 9vw, 5.5rem)/.88 SlateCond; text-transform: uppercase; }
.form-heading > p:last-child { max-width: 42rem; color: var(--muted); line-height: 1.5; }
.orientation-copy { max-width: 46rem; margin-top: 22px; padding: 18px 20px; border-left: 3px solid var(--cyan); background: #01a1b10d; }
.orientation-copy p { margin: 0; color: var(--muted); line-height: 1.55; }
.orientation-copy p + p { margin-top: 12px; color: #eee9f4; }
.sex-field { margin: 0; padding: 0; border: 0; }
.sex-field legend { margin-bottom: 9px; color: #d9d3e2; }
.sex-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.sex-options button { min-height: 54px; padding: 8px; border: 1px solid #5a4b72; border-radius: 4px; background: #0f0d17; color: #fff; cursor: pointer; font-weight: 700; transition: .2s; }
.sex-options button:hover { border-color: var(--cyan); }
.sex-options button.selected { border-color: #6eeaf0; background: #087681; box-shadow: 0 0 0 3px #01a1b133; }

.form-progress {
  position: sticky;
  top: 0;
  z-index: 8;
  margin: 0 -8px 28px;
  padding: 14px 8px 3px;
  background: linear-gradient(to bottom, #0f0d17 74%, transparent);
  backdrop-filter: blur(8px);
}

.form-progress > div:first-child { display: flex; justify-content: space-between; gap: 15px; font-size: .78rem; }
.form-progress strong { color: #fff; }
.form-progress .progress { margin: 10px 0 14px; }
.public-question-list { display: grid; gap: 26px; }

.public-block {
  overflow: hidden;
  border: 1px solid #3a304b;
  border-radius: 12px;
  background: #171321d9;
  box-shadow: 0 20px 55px #0004;
}

.public-block-head {
  padding: 23px 24px 20px;
  border-bottom: 1px solid #3a304b;
  background: linear-gradient(100deg, #01a1b115, transparent);
}

.public-block-head span { color: #70eef4; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.public-block-head h3 { margin: 6px 0 0; font: 700 clamp(1.7rem, 6vw, 2.6rem)/1 SlateCond; text-transform: uppercase; }
.public-block-head p { margin: 10px 0 0; max-width: 42rem; color: #f4b6c1; font-size: .83rem; line-height: 1.45; }
.public-alert-block { border-color: #6f3042; }
.public-alert-block .public-block-head { border-color: #6f3042; background: linear-gradient(100deg, #fb71851c, transparent); }
.public-alert-block .public-block-head span { color: #fda4af; }

.public-question {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 190px;
  gap: 18px;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #30283f;
  transition: background .2s, box-shadow .2s;
}

.public-question:last-child { border-bottom: 0; }
.public-question-number { color: #6eeaf0; font: 700 1.4rem SlateCond; }
.public-question h4 { margin: 0; color: #fff; font-size: 1.03rem; line-height: 1.4; }
.inline-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inline-answers .answer { min-height: 48px; }
.inline-answers .answer.selected { border-color: #6eeaf0; background: #087681; color: #fff; box-shadow: 0 0 0 2px #6eeaf033; }
.public-alert-block .inline-answers .answer.selected { border-color: #fda4af; background: #7e2d44; box-shadow: 0 0 0 2px #fb718533; }
.public-question.answered { background: #01a1b106; }
.public-question.saving { opacity: .65; }
.public-question.needs-answer { box-shadow: inset 4px 0 #fb7185; background: #fb718510; }

.form-finish {
  margin-top: 34px;
  padding: 28px;
  border: 1px solid #3a304b;
  border-radius: 12px;
  background: #171321;
  text-align: center;
}

.form-finish #form-error { min-height: 20px; margin: 0 0 12px; color: #fda4af; }
.form-finish .primary { width: min(100%, 520px); }
.form-finish .primary:disabled { background: #393442; color: #91899e; box-shadow: none; cursor: not-allowed; }
.form-finish .legal { max-width: 42rem; margin: 16px auto 0; }

@media (max-width: 680px) {
  .questionnaire { padding: 82px 14px 42px; }
  .form-heading { margin-top: 15px; }
  .form-progress { margin-inline: -2px; }
  .public-block-head { padding: 20px 18px 17px; }
  .public-question { grid-template-columns: 34px minmax(0, 1fr); gap: 10px 12px; padding: 20px 16px; }
  .public-question h4 { font-size: .98rem; }
  .inline-answers { grid-column: 1 / -1; margin-top: 8px; }
  .inline-answers .answer { min-height: 52px; }
  .form-finish { padding: 22px 16px; }
  .center-locator,.result-followup { padding: 18px 15px; }
  .result-actions { grid-template-columns: 1fr; }
}

@media (min-width: 800px) {
  .hero-copy .sub { max-width: 28rem; }
  .hero .test-route { max-width: 31rem; }
  .brand-amyca { left: auto; right: 7vw; width: 170px; }
}

@media (orientation: landscape) and (max-height: 640px) and (max-width: 1000px) {
  html,
  body { min-height: 100%; overflow-y: auto; }

  .shell {
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .screen,
  .hero,
  .profile,
  .questionnaire,
  .result {
    height: auto;
    min-height: 100dvh;
    overflow-y: visible;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(230px, .85fr);
    grid-template-rows: 1fr;
    gap: 24px;
    min-height: max(100dvh, 430px);
    padding: 76px 24px 24px;
    align-items: center;
  }

  .hero h1 {
    max-width: 8.5ch;
    font-size: clamp(2.35rem, 10vh, 3.2rem);
    line-height: .86;
  }
  .hero .sub { margin-top: 14px; font-size: .92rem; }
  .hero .test-route { margin-top: 12px; }
  .hero .action { align-self: center; max-width: 31rem; }

  .person {
    right: -5%;
    bottom: -4%;
    width: min(72vw, 650px);
    opacity: .56;
  }

  .profile { place-items: start center; }
  .profile-card { margin-block: 0 24px; }
}

@media (orientation: portrait) and (max-width: 430px) {
  .hero h1 {
    font-size: clamp(2.75rem, 13.5vw, 3.65rem);
    line-height: .86;
  }
}