/* Modal layer: /compare/. The short answer rides up onto the hero frame as a white card. */

body.bc-page > main > .bc-hero { padding-bottom: clamp(96px, 10vw, 128px); }
body.bc-page main .bc-verdict-wrap { position: relative; z-index: 1; margin-top: clamp(-88px, -7vw, -64px); padding-top: 0; }
body.bc-page main .bc-verdict-wrap > .seo-shell { width: calc(var(--mk-wrap) - 2 * var(--mk-pad)); }
body.bc-page main .bc-verdict {
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(30 36 120 / .08), 0 30px 60px -30px rgb(30 36 120 / .5);
}
body.bc-page main .bc-verdict-lede { font-family: var(--mk-display); font-weight: 500 !important; letter-spacing: -.02em; color: var(--mk-ink) !important; }
body.bc-page main .bc-verdict-card { border: 0; border-radius: 14px; background: var(--mk-subtle); box-shadow: inset 0 0 0 1px var(--mk-line); }
body.bc-page main .bc-verdict-card::before { inset: 14px auto auto 14px; width: 8px; height: 8px; border-radius: 50%; }
body.bc-page main .bc-verdict-card h2 { padding-left: 16px; font-family: var(--mk-display) !important; font-weight: 600 !important; }
body.bc-page main .bc-verdict-card.bc-us { background: var(--mk-soft); box-shadow: inset 0 0 0 1px #d6d9fb; }

/* option cards and panels */
body.bc-page main :is(.bc-option, .bc-panel, .bc-card) {
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--mk-ring);
}
body.bc-page main .bc-option-num { border: 0; border-radius: 8px; background: var(--mk-soft); color: var(--mk-primary); }
body.bc-page main .bc-chip { border: 0; border-radius: 6px; background: var(--mk-subtle); box-shadow: inset 0 0 0 1px var(--mk-line); color: var(--mk-ink-2); }
body.bc-page main .bc-option.bc-us,
body.bc-page main .bc-panel.bc-us { box-shadow: 0 0 0 1.5px var(--mk-primary), 0 18px 40px -26px rgb(56 71 254 / .45); }
body.bc-page main .seo-note,
body.bc-page main .bc-note {
  border: 0;
  border-radius: 14px;
  background: var(--mk-soft);
  color: #2e3150;
}
body.bc-page main .bc-hub-card a { color: var(--mk-ink); text-decoration: none; }
body.bc-page main .bc-hub-card:hover { box-shadow: var(--mk-ring-lift); }
body.bc-page main .seo-card a { text-decoration: none; }

/* FAQ heading left, questions right */
@media (min-width: 1000px) {
  body.bc-page main .seo-section:has(.bc-faq) > .seo-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 48px;
    align-items: start;
  }
  body.bc-page main .seo-section:has(.bc-faq) .seo-section-head { position: sticky; top: calc(var(--mk-header) + 32px); }
}

@media (max-width: 720px) {
  body.bc-page main .bc-verdict-wrap > .seo-shell { width: calc(var(--mk-wrap) - 20px); }
}