/* Visibility diagnostic */
.visibility_quiz_page {
  min-height: 100vh;
  background: var(--blush-base);
  color: var(--ink);
}

.visibility_quiz_main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 34px 10px 100px;
}

.visibility_quiz_intro {
  min-height: 690px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.85fr);
  align-items: center;
  gap: 70px;
}

.visibility_quiz_intro__content { max-width: 650px; }

.visibility_quiz_eyebrow {
  margin: 0 0 18px;
  color: var(--crimson);
  font-family: var(--font-inter);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.visibility_quiz_intro h1,
.visibility_quiz_results h1 {
  max-width: 720px;
  margin: 0;
  color: var(--blood);
  font-family: var(--font-lora);
  font-size: clamp(46px, 6vw, 78px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.visibility_quiz_intro__lead { max-width: 560px; margin: 34px 0 25px; font-size: 18px; line-height: 1.55; }

.visibility_quiz_intro__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-bottom: 35px;
  color: var(--crimson);
  font-family: var(--font-inter);
  font-size: 12px;
  font-weight: 700;
}

.visibility_quiz_intro__meta span::before { content: "·"; margin-right: 8px; color: var(--dusk-rose); }
.visibility_quiz_privacy { margin: 15px 0 0; color: var(--dusk-rose); font-family: var(--font-inter); font-size: 11px; }

.visibility_quiz_button {
  min-height: 52px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.visibility_quiz_button--primary { color: var(--blush-base); background: var(--crimson); }
.visibility_quiz_button--primary:hover { background: var(--blood); }
.visibility_quiz_button--primary:disabled { opacity: 0.42; cursor: not-allowed; }
.visibility_quiz_button--secondary,
.visibility_quiz_button--back { color: var(--crimson); border-color: var(--rose-mist); background: transparent; }
.visibility_quiz_button--secondary:hover,
.visibility_quiz_button--back:hover { border-color: var(--crimson); background: rgba(212, 184, 176, 0.2); }
.visibility_quiz_button--back { border-color: transparent; }

.visibility_quiz_intro__visual {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  background: var(--crimson);
}

.visibility_quiz_intro__visual::before,
.visibility_quiz_intro__visual::after { position: absolute; content: ""; border: 1px solid rgba(242, 235, 229, 0.22); border-radius: 50%; }
.visibility_quiz_intro__visual::before { inset: 12% 11%; }
.visibility_quiz_intro__visual::after { inset: 27% 25%; }

.visibility_quiz_orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(242, 235, 229, 0.22); border-radius: 50%; transform: translate(-50%, -50%) rotate(-25deg); }
.visibility_quiz_orbit--outer { width: 82%; height: 42%; }
.visibility_quiz_orbit--inner { width: 52%; height: 74%; transform: translate(-50%, -50%) rotate(35deg); }
.visibility_quiz_orbit__core { position: absolute; top: 50%; left: 50%; display: grid; width: 112px; height: 112px; place-items: center; border: 1px solid var(--blush-base); border-radius: 50%; color: var(--crimson); background: var(--blush-base); font-family: var(--font-lora); font-size: 68px; transform: translate(-50%, -50%); }
.visibility_quiz_signal { position: absolute; padding: 8px 11px; border: 1px solid rgba(242, 235, 229, 0.35); color: var(--blush-base); font-family: var(--font-inter); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.visibility_quiz_signal--one { top: 17%; left: 10%; }
.visibility_quiz_signal--two { top: 18%; right: 10%; }
.visibility_quiz_signal--three { bottom: 18%; left: 13%; }
.visibility_quiz_signal--four { right: 10%; bottom: 17%; }

.visibility_quiz_panel,
.visibility_quiz_results { max-width: 920px; margin: 0 auto; padding: 55px 0 25px; }

/* Grid/flex display rules must not override the browser's hidden attribute. */
.visibility_quiz_main [hidden] { display: none !important; }
.visibility_quiz_progress__topline { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 11px; color: var(--crimson); font-family: var(--font-inter); font-size: 12px; font-weight: 700; }
.visibility_quiz_progress__topline .visibility_quiz_eyebrow { margin: 0; }
.visibility_quiz_progress__track,
.visibility_quiz_channel__track { height: 4px; overflow: hidden; background: var(--rose-mist); }
.visibility_quiz_progress__bar,
.visibility_quiz_channel__track span { display: block; height: 100%; background: var(--crimson); transition: width 250ms ease; }

.visibility_quiz_question { max-width: 760px; margin: 72px 0 15px; padding: 0; color: var(--blood); font-family: var(--font-lora); font-size: clamp(32px, 4vw, 52px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; }
.visibility_quiz_hint { margin: 0 0 34px; color: var(--dusk-rose); font-family: var(--font-inter); font-size: 12px; }
.visibility_quiz_options { display: grid; gap: 10px; }
.visibility_quiz_options input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.visibility_quiz_option { display: flex; align-items: center; gap: 18px; min-height: 72px; padding: 14px 18px; border: 1px solid var(--rose-mist); color: var(--ink); background: rgba(255, 255, 255, 0.18); font-family: var(--font-inter); font-size: 14px; line-height: 1.4; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease; }
.visibility_quiz_option:hover { border-color: var(--crimson); transform: translateX(3px); }
.visibility_quiz_options input:checked + .visibility_quiz_option { border-color: var(--crimson); background: rgba(107, 15, 26, 0.09); }
.visibility_quiz_options input:focus-visible + .visibility_quiz_option { outline: 3px solid var(--dusk-rose); outline-offset: 3px; }
.visibility_quiz_option__letter { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border: 1px solid var(--dusk-rose); border-radius: 50%; color: var(--crimson); font-size: 11px; font-weight: 700; }
.visibility_quiz_navigation { display: flex; justify-content: space-between; gap: 20px; margin-top: 38px; }

.visibility_quiz_results__header { max-width: 730px; margin-bottom: 48px; }
.visibility_quiz_results__header h1 { font-size: clamp(42px, 6vw, 70px); }
.visibility_quiz_results__header > p:last-child { max-width: 600px; margin: 25px 0 0; font-size: 17px; line-height: 1.55; }
.visibility_quiz_scorecard { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 35px; padding: 28px; color: var(--blush-base); background: var(--crimson); }
.visibility_quiz_scorecard__score { display: flex; flex-direction: column; justify-content: center; padding: 8px 10px; border-right: 1px solid rgba(242, 235, 229, 0.25); }
.visibility_quiz_scorecard__label { font-family: var(--font-inter); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.visibility_quiz_scorecard__score strong { margin: 12px 0 4px; font-family: var(--font-lora); font-size: clamp(70px, 9vw, 112px); font-weight: 500; letter-spacing: -0.08em; line-height: 0.9; }
.visibility_quiz_scorecard__score small { margin-left: 8px; color: var(--rose-mist); font-family: var(--font-inter); font-size: 17px; letter-spacing: 0; }
.visibility_quiz_scorecard__profile { color: var(--rose-mist); font-family: var(--font-inter); font-size: 13px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.visibility_quiz_scorecard__copy { display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.visibility_quiz_scorecard__copy > p { max-width: 560px; margin: 0; font-size: 18px; line-height: 1.55; }
.visibility_quiz_result_line { display: flex; justify-content: space-between; gap: 20px; padding-top: 15px; border-top: 1px solid rgba(242, 235, 229, 0.25); font-family: var(--font-inter); font-size: 12px; }
.visibility_quiz_result_line strong { color: var(--blush-base); text-align: right; }

.visibility_quiz_results__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 55px; margin-top: 55px; }
.visibility_quiz_results__section_heading p:last-child { margin: 0 0 25px; color: var(--dusk-rose); font-size: 13px; line-height: 1.45; }
.visibility_quiz_channel { margin-bottom: 20px; }
.visibility_quiz_channel > div:first-child { display: flex; justify-content: space-between; margin-bottom: 8px; font-family: var(--font-inter); font-size: 13px; font-weight: 700; }
.visibility_quiz_channel__track { height: 8px; }
.visibility_quiz_next_move { align-self: start; padding: 28px; border: 1px solid var(--rose-mist); background: rgba(255, 255, 255, 0.2); }
.visibility_quiz_next_move h2 { margin: 0 0 12px; color: var(--blood); font-family: var(--font-lora); font-size: 30px; font-weight: 500; line-height: 1.05; }
.visibility_quiz_next_move p:not(.visibility_quiz_eyebrow) { margin: 0 0 24px; font-size: 14px; line-height: 1.55; }
.visibility_quiz_text_link { color: var(--crimson); font-family: var(--font-inter); font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.visibility_quiz_results__actions { display: flex; align-items: center; gap: 25px; margin-top: 55px; padding-top: 25px; border-top: 1px solid var(--rose-mist); }
.visibility_quiz_method { max-width: 500px; margin: 0; color: var(--dusk-rose); font-family: var(--font-inter); font-size: 11px; line-height: 1.45; }

@media (max-width: 850px) {
  .visibility_quiz_main { padding: 20px 20px 70px; }
  .visibility_quiz_intro { min-height: auto; display: flex; flex-direction: column; align-items: stretch; gap: 50px; padding: 55px 0 20px; }
  .visibility_quiz_intro h1 { font-size: clamp(45px, 14vw, 68px); }
  .visibility_quiz_intro__visual { min-height: 300px; }
  .visibility_quiz_orbit__core { width: 80px; height: 80px; font-size: 48px; }
  .visibility_quiz_panel, .visibility_quiz_results { padding-top: 40px; }
  .visibility_quiz_question { margin-top: 55px; }
  .visibility_quiz_scorecard, .visibility_quiz_results__grid { grid-template-columns: 1fr; }
  .visibility_quiz_scorecard__score { padding-bottom: 25px; border-right: 0; border-bottom: 1px solid rgba(242, 235, 229, 0.25); }
  .visibility_quiz_results__grid { gap: 35px; }
  .visibility_quiz_results__actions { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .visibility_quiz_progress__topline { align-items: flex-start; flex-direction: column; gap: 7px; }
  .visibility_quiz_navigation { align-items: stretch; flex-direction: column-reverse; }
  .visibility_quiz_navigation .visibility_quiz_button { width: 100%; }
  .visibility_quiz_scorecard { padding: 20px; }
  .visibility_quiz_result_line { align-items: flex-start; flex-direction: column; gap: 5px; }
  .visibility_quiz_result_line strong { text-align: left; }
}