:root {
  /* Pop Box brand palette */
  --blue: #1A285F;
  --blue-light: #188BF6;
  --orange: #FA790A;
  --orange-dark: #D4640A;
  --dark: #222222;
  --grey2: #4D4B4B;
  --grey4: #D9D9D9;
  --grey5: #E6E6E6;
  --white: #FFFFFF;

  /* Supporting accents */
  --teal: #2C8C99;
  --amber: #C98A1B;
  --red: #B5432E;
  --green: #2E8B57;

  /* Semantic roles, mapped onto the palette above */
  --bg: var(--white);
  --card: var(--white);
  --heading: var(--blue);
  --text: var(--dark);
  --text-muted: var(--grey2);
  --border: var(--grey4);

  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-btn: 25px;

  /* Clear space held above the sticky progress bar, so that both the
     "X of 7 answered" count and the track below it stay clear of anything
     overlapping the top of the viewport (such as the host page's own fixed
     header, since this page is iframed into popboxit.com). Raise this if the
     header is taller than the gap. */
  --progress-sticky-gap: 72px;
}

* { box-sizing: border-box; }

html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.quiz-shell {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 36px 32px 32px;
  flex: 1;
  position: relative;
}

.progress-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--card);
  padding: var(--progress-sticky-gap) 0 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--grey4);
}

/* The count sits above the track; both are inside the sticky block, and the
   gap above them keeps the pair clear of an overlapping host header. */
.progress-track {
  height: 10px;
  background: var(--grey5);
  border: 1px solid var(--grey4);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-label {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey2);
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-light) 55%, var(--orange) 100%);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

.results { animation: fadeIn 0.25s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

h1 {
  font-size: 1.7rem;
  line-height: 1.3;
  margin: 0 0 16px;
  color: var(--heading);
}

/* Utility: hide content visually while keeping it for screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

h2 {
  font-size: 1.4rem;
  margin: 0 0 10px;
  color: var(--heading);
}

.lede {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 16px;
}

.fine-print {
  color: var(--grey2);
  font-size: 0.82rem;
  margin-top: 18px;
}

.btn {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  border-radius: var(--radius-btn);
  padding: 13px 28px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--orange);
  color: var(--white);
  border: 3px solid var(--orange-dark);
  box-shadow: 0 6px 16px rgba(250, 121, 10, 0.28);
}

.btn-primary:hover { box-shadow: 0 8px 20px rgba(250, 121, 10, 0.36); }

.btn-ghost {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--grey4);
}

.btn-ghost:hover { border-color: var(--blue); }

/* Questions, all rendered on one page */
.question-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.question-card {
  border: 1.5px solid var(--grey4);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  background: var(--card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.question-card.unanswered {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(201, 138, 27, 0.12);
}

.question-counter {
  color: var(--orange);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.question-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.4;
  margin: 0 0 8px;
}

.question-helper {
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0 0 16px;
}

.option-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.option-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--grey4);
  border-radius: 14px;
  padding: 13px 16px;
  cursor: pointer;
  background: var(--card);
  transition: border-color 0.15s ease, background 0.15s ease;
  text-align: left;
}

.option-card:hover { border-color: var(--orange); }

.option-card.selected {
  border-color: var(--orange);
  background: rgba(250, 121, 10, 0.08);
}

.option-rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--grey4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--grey2);
  flex-shrink: 0;
}

.option-card.selected .option-rank {
  border-color: var(--orange-dark);
  background: var(--orange);
  color: var(--white);
}

.option-label { font-weight: 500; font-size: 0.98rem; }
.option-sub { font-size: 0.8rem; color: var(--grey2); }

/* Contact field + submit */
.contact-block {
  border-top: 1px solid var(--grey4);
  padding-top: 24px;
  margin-bottom: 4px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.field { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 500; color: var(--blue); }

.field input {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 11px 14px;
  background: var(--white);
  border: 1px solid var(--grey4);
  border-radius: var(--radius-card);
  color: var(--text);
}

/* opacity reset: Firefox dims placeholders by default */
.field input::placeholder {
  color: var(--grey2);
  opacity: 1;
}

.field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26, 40, 95, 0.18);
}

.error-msg { color: var(--red); font-size: 0.85rem; margin: 4px 0 12px; }

/* Results step */
.results-head {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.gauge-wrap { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.gauge { width: 140px; height: 140px; transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: var(--grey4); stroke-width: 12; }
.gauge-value {
  fill: none;
  stroke: var(--orange);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 377;
  stroke-dashoffset: 377;
  transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease;
}
.gauge-label {
  position: absolute;
  top: 0; left: 0; width: 140px; height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#score-number { font-size: 2.1rem; font-weight: 700; color: var(--blue); }
.gauge-max { font-size: 0.8rem; color: var(--grey2); }

.results-headline { flex: 1; min-width: 220px; }

.tier-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 8px;
  color: var(--white);
  background: var(--blue);
}

.tier-badge.tier-red { background: var(--red); }
.tier-badge.tier-amber { background: var(--amber); }
.tier-badge.tier-green { background: var(--green); }

.breakdown-title {
  font-size: 1rem;
  color: var(--heading);
  margin: 0 0 12px;
}

.breakdown-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--grey4);
  border-radius: 10px;
  font-size: 0.88rem;
}

.breakdown-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot-red { background: var(--red); }
.dot-amber { background: var(--amber); }
.dot-green { background: var(--green); }

.breakdown-status {
  margin-left: auto;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--grey2);
  white-space: nowrap;
}

.cta-block {
  background: var(--blue);
  color: var(--white);
  border-radius: var(--radius-card);
  padding: 28px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  gap: 20px;
  flex-wrap: wrap;
}

.cta-block p { margin: 0; max-width: 520px; line-height: 1.5; font-size: 0.92rem; text-align: left; }
.cta-block .btn { text-align: left; }

@media (max-width: 560px) {
  :root { --progress-sticky-gap: 56px; }
  .quiz-shell { padding: 26px 20px 24px; }
  .option-list { grid-template-columns: 1fr; }
  .question-card { padding: 18px 16px; }
  .form-actions { justify-content: stretch; }
  .form-actions .btn { width: 100%; justify-content: center; }
  h1 { font-size: 1.4rem; }
  .cta-block { flex-direction: column; align-items: center; }
}