/* Keeps the standalone interview and its browser report aligned with BrokerDad.com. */
:root {
  --paper: #f4f6f5;
  --ink: #1c2b34;
  --muted: #5c6c73;
  --navy: #203b4a;
  --red: #e2774d;
  --cream: #f7f1e8;
  --line: #d9e0dd;
  --green: #4aa7a3;
}

html,
body {
  background: radial-gradient(circle at top right, rgba(226, 119, 77, 0.09), transparent 30%), var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.brandLogo {
  content: url("/brand/brokerdad-logo-horizontal-light.svg");
  width: 184px;
  height: 42px;
  object-fit: contain;
  object-position: left center;
  border-radius: 0;
}

.pill {
  color: var(--navy);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 2px 12px rgba(32, 59, 74, 0.07);
}

.pill:hover {
  border-color: var(--green);
  box-shadow: 0 4px 16px rgba(74, 167, 163, 0.16);
}

.pill i,
.eyebrow {
  color: var(--red);
}

.card {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 50px rgba(32, 59, 74, 0.08);
}

.primary {
  background: var(--navy);
}

.primary:hover:not(:disabled) {
  background: #294b5d;
}

.progress > div {
  background: linear-gradient(90deg, var(--green), var(--red));
}

.why {
  border-left-color: var(--green);
}

.passHighlight {
  color: #347f7b;
  background: linear-gradient(135deg, rgba(74, 167, 163, 0.12), rgba(74, 167, 163, 0.05));
  border-color: rgba(74, 167, 163, 0.22);
}

.choiceBtn.selected {
  background: var(--navy);
  border-color: var(--navy);
}

.reportCta {
  background: linear-gradient(135deg, #203b4a, #294b5d);
}

.readinessReport {
  border-top: 4px solid var(--red);
}

@media (max-width: 560px) {
  .brandLogo {
    width: 166px;
    height: 38px;
    object-position: center;
  }
}