/* Public invitation; the quiz and private result styles load on their own pages. */
.e8-diagnostic-promo {
  --diagnostic-accent: #08766e;
  --diagnostic-deep: #075a55;
  --diagnostic-soft: #def4ef;
  --diagnostic-ink: #182b2a;
  --diagnostic-muted: #5b706a;
  --diagnostic-line: #cfdfd9;
  --diagnostic-paper: #fbfaf5;
  color: var(--diagnostic-ink);
}

.e8-diagnostic-promo :is(a, button):focus-visible { outline: 3px solid var(--diagnostic-accent); outline-offset: 5px; }
.e8-diagnostic-promo [hidden] { display: none !important; }
.e8-diagnostic-promo .diagnostic-kicker { display: block; color: var(--diagnostic-deep); font: 600 .66rem/1.5 var(--font-utility); letter-spacing: .08em; text-transform: uppercase; }
.e8-diagnostic-promo .diagnostic-button { min-height: 49px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 13px 21px; border: 1px solid var(--diagnostic-accent); border-radius: 10px 10px 3px 10px; color: #fff; background: var(--diagnostic-accent); cursor: pointer; font: 750 .82rem/1.5 var(--font-body); text-align: center; text-decoration: none; }
.e8-diagnostic-promo .diagnostic-button:hover { color: #fff; border-color: var(--diagnostic-deep); background: var(--diagnostic-deep); }

.e8-diagnostic-promo { width: min(calc(100% - 40px), 1180px); display: grid; grid-template-columns: minmax(0, 1fr) 255px; gap: 65px; align-items: center; margin: 36px auto; padding: 38px 45px; border: 1px solid #1d554c; border-radius: 4px 20px 20px 4px; color: #f5f8f7; background: #123936; }
.prism-container .e8-diagnostic-promo { width: 100%; }
.e8-diagnostic-promo .diagnostic-kicker { color: #8de3d3; }
.e8-diagnostic-promo h2 { max-width: 780px; margin: 15px 0 15px; color: #fff; font: 750 clamp(1.95rem, 3.2vw, 3rem)/1.08 var(--font-display); letter-spacing: -.045em; }
.e8-diagnostic-promo-copy > p { max-width: 64ch; margin: 0 0 23px; color: #c9dad3; font-size: .9rem; line-height: 1.8; }
.e8-diagnostic-promo .diagnostic-button { border-color: #def4ef; color: #075a55; background: #def4ef; }
.e8-diagnostic-promo .diagnostic-button:hover { border-color: #def4ef; color: #075a55; background: #fff; }
.e8-diagnostic-promo a:focus-visible { outline-color: #a5edde; }
.e8-diagnostic-promo-time { display: block; margin-top: 13px; color: #b3d0c4; font-size: .7rem; line-height: 1.65; }
.e8-diagnostic-promo-paper { padding: 24px 24px 23px 35px; border-radius: 3px 13px 13px 3px; color: #17372d; background: linear-gradient(90deg, transparent 0 19px, #cf72734d 19px 21px, transparent 21px), repeating-linear-gradient(0deg, transparent 0 25px, #dbe6e3 25px 26px), #fbfaf5; box-shadow: 9px 12px 0 #0003; transform: rotate(1deg); }
.e8-diagnostic-promo-paper > span { color: #075a55; font: 600 .58rem/1.5 var(--font-utility); letter-spacing: .05em; }
.e8-diagnostic-promo-paper > p { margin: 20px 0 17px; font: 750 1.9rem/1.15 var(--font-display); letter-spacing: -.04em; }
.e8-diagnostic-promo-paper > p strong { color: #08766e; font-weight: 750; }
.e8-diagnostic-promo-dots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.e8-diagnostic-promo-dots i { width: 100%; height: 18px; border: 1px solid #91b3a0; border-radius: 3px; background: #ffffff80; }
.e8-diagnostic-promo-paper small { display: block; margin-top: 18px; color: #527261; font-size: .59rem; line-height: 1.6; }

@media (max-width: 1060px) {
  .e8-diagnostic-promo { grid-template-columns: minmax(0, 1fr) 210px; gap: 30px; padding: 32px; }
}

@media (max-width: 800px) {
  .e8-diagnostic-promo { grid-template-columns: 1fr; gap: 0; }
  .e8-diagnostic-promo-paper { display: none; }
}

@media (max-width: 520px) {
  .e8-diagnostic-promo .diagnostic-kicker { font-size: .58rem; letter-spacing: .06em; }
  .e8-diagnostic-promo { width: calc(100% - 28px); margin-block: 25px; padding: 27px 23px; border-radius: 3px 14px 14px 3px; }
  .e8-diagnostic-promo h2 { font-size: 1.95rem; }
  .e8-diagnostic-promo-copy > p { font-size: .83rem; }
  .e8-diagnostic-promo .diagnostic-button { width: 100%; }
}