/* ============================================================
   beliefnet.css — faithful recreation of beliefnet.com's
   Belief-O-Matic® quiz page.

   Every token below is lifted from Beliefnet's own stylesheet
   (https://www.beliefnet.com/areas/beliefnet/css/main.css):
     body          → font-family:"Lato",Arial,sans-serif; 18px; #4d4d4d
     h1..h6, .btn  → font-family:Palatino,Georgia,Times,serif; color:#333
     header bar    → 64px tall, border-bottom:2px solid #2aa4e4
     .tag          → 700 10px Lato, ls 2px, background-color:#8495a3
     .quiz-answers → chips background #e2eaf5, hover #c2d3e9,
                     checked background #b35090, colour #FFFFFF
     .qom-wrapper .warning-text → italic 600 12px, colour #2aa4e4
     .bom-1pg-email-form        → background-color #e2eaf5
     .bom-subtitle              → font-size 25px, bold
     .progress-bar              → background-color #2aa4e4
     .img-attribution           → italic 400 10px Lato on #333 @ .7
     .section-bar               → #565d65 with 5px #2aa4e4 left rule
     footer.main-footer         → background #eef1f5, divider #c2d3e9
   Palatino is a system face, so Gelasio (Georgia-metric-compatible,
   Google Fonts) stands in for it and keeps the fallback stack intact.
   ============================================================ */

body.beliefnet {
  --bn-blue:        #2aa4e4;   /* primary — header rule, links, progress */
  --bn-blue-deep:   #004589;   /* deep blue from their palette */
  --bn-pale:        #e2eaf5;   /* answer chips, email module, hairlines */
  --bn-pale-hover:  #c2d3e9;   /* chip hover */
  --bn-plum:        #b35090;   /* selected answer */
  --bn-teal:        #28b6ae;   /* warning-text links */
  --bn-slate:       #8495a3;   /* section tag */
  --bn-ink:         #333333;   /* headings */
  --bn-body:        #4d4d4d;   /* body copy */
  --bn-muted:       #777777;
  --bn-rule:        #d7e4f0;
  --bn-footer:      #eef1f5;
  --bn-navy:        #003366;   /* logo navy */
  --bn-serif: "Gelasio", Palatino, Georgia, Times, serif;
  --bn-sans: "Lato", Arial, Helvetica, sans-serif;

  font-family: var(--bn-sans);
  font-size: 18px;
  line-height: 1.42857;
  color: var(--bn-body);
  background: #fff;
}

body.beliefnet a { color: var(--bn-blue); text-decoration: none; }

/* ---------------- masthead ---------------- */
.bn-header {
  width: 100%; height: 64px;
  border-bottom: 2px solid var(--bn-blue);
  position: relative; z-index: 500; background: #fff;
}
.bn-header .bn-container {
  max-width: 1170px; margin: 0 auto; height: 64px;
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
}
.bn-burger {
  width: 30px; height: 64px; flex: none;
  display: grid; place-items: center; color: var(--bn-ink);
  background: none; border: 0; cursor: pointer;
}
.bn-burger svg { width: 22px; height: 22px; }
.bn-logo { display: inline-flex; align-items: center; }
.bn-logo img { display: block; width: 133px; height: 28px; }
.bn-nav {
  margin-left: auto; display: flex; align-items: center;
  font-family: var(--bn-sans); text-transform: uppercase;
  font-size: 13px; letter-spacing: -.03rem; color: var(--bn-ink);
}
.bn-nav .index-links {
  display: inline-flex; align-items: center;
  border-right: 1px solid var(--bn-pale);
  padding-right: 8px; margin-right: 9px;
}
.bn-nav .index-links a { color: var(--bn-ink); font-weight: 400; padding: 0 4px; }
.bn-nav .index-links a:hover { color: var(--bn-blue); }
.bn-nav .secondary-links { display: inline-flex; align-items: center; }
.bn-nav .secondary-links a { color: var(--bn-ink); padding: 0 2px; }
.bn-nav .secondary-links a:hover { color: var(--bn-blue); }
.bn-nav .sep { border-right: 1px solid var(--bn-blue); margin: 0 8px 0 5px; height: 13px; }
.bn-search { background: none; border: 0; cursor: pointer; color: var(--bn-ink); margin-left: 14px; display: grid; place-items: center; }
.bn-search svg { width: 18px; height: 18px; }

/* ---------------- section tag ---------------- */
.section-tag { text-align: center; position: relative; z-index: 5; padding-top: 22px; }
.section-tag .tag {
  font: 700 10px var(--bn-sans); letter-spacing: 2px;
  background-color: var(--bn-slate); line-height: 16px; color: #fff;
  margin: auto; padding: 0 6px; text-transform: uppercase;
  display: inline-block; border: 1px solid transparent;
}
.section-tag .tag:hover { background-color: #fff; color: var(--bn-slate); border-color: var(--bn-slate); }

/* ---------------- quiz column ---------------- */
.qom-wrapper { overflow: hidden; padding-bottom: 70px; }
.one-page-quiz-column { width: 640px; max-width: 100%; margin: 0 auto; padding: 0 15px; position: relative; }

.qom-hero { position: relative; margin: 22px 0 0; }
.qom-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 62%; }
.img-attribution {
  z-index: 10; position: absolute; bottom: 2px; right: 0;
  font: italic 400 10px var(--bn-sans); color: #fff;
  padding: 0 6px; background-color: #333; opacity: .7;
  max-height: 15px; line-height: 15px;
}

.qom-title {
  font-family: var(--bn-serif); font-weight: 400; line-height: 1;
  color: var(--bn-ink); letter-spacing: -.02em;
  font-size: 44px; margin: 22px 0 14px; text-align: center;
}
.bom-subtitle { display: block; font-size: 25px; font-weight: 700; letter-spacing: 0; margin-bottom: 6px; }

.qom-intro { font-size: 18px; color: var(--bn-body); margin: 0 0 6px; }
.qom-wrapper .warning-text {
  font-family: var(--bn-sans); font-style: italic; font-weight: 600;
  font-size: 12px; color: var(--bn-blue); margin: 10px auto; clear: both; padding: 10px 0;
}
.qom-wrapper .warning-text a { color: var(--bn-teal); }

/* progress */
.qom-progress { margin: 22px 0 8px; }
.qom-progress .lbl {
  font: 700 11px var(--bn-sans); letter-spacing: 2px; text-transform: uppercase;
  color: var(--bn-slate); display: block; margin-bottom: 8px;
}
.progress {
  overflow: hidden; height: 25px; margin-bottom: 25px;
  background-color: #f5f5f5; border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.progress-bar {
  float: left; height: 100%; font: 400 13px var(--bn-sans); line-height: 25px;
  color: #fff; text-align: center; background-color: var(--bn-blue);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
}

/* question blocks */
.qom-q { margin: 0 0 34px; }
.qom-q .q-num {
  font: 800 11px var(--bn-sans); letter-spacing: 2px; text-transform: uppercase;
  color: var(--bn-slate); display: block; margin-bottom: 6px;
}
.qom-q h2 {
  font-family: var(--bn-serif); font-weight: 400; line-height: 1.1;
  color: var(--bn-ink); letter-spacing: -.02em;
  font-size: 30px; margin: 0 0 16px;
}
.quiz-answers { margin-bottom: 1.5em; font-family: var(--bn-sans); font-size: 22px; text-align: left; }
.quiz-answers .opt { display: block; }
.quiz-answers input[type=radio] { width: 1.6em; margin: 0; padding: 0; font-size: 1em; opacity: 0; position: absolute; }
.quiz-answers input[type=radio] + label { display: inline-block; width: 100%; line-height: 1.5em; cursor: pointer; }
.quiz-answers input[type=radio] + label > span {
  display: inline-block; width: 100%; min-height: 25px;
  margin: .25em .5em .25em .25em; background: var(--bn-pale);
  vertical-align: bottom; padding: 15px 18px;
  font-size: 17px; line-height: 1.35; color: var(--bn-body);
  transition: all .4s ease-in-out;
}
.quiz-answers input[type=radio] + label > span:hover { background-color: var(--bn-pale-hover); }
.quiz-answers input[type=radio]:checked + label > span { color: #fff; background: var(--bn-plum); }

/* skipped-question rule */
.qom-skip {
  display: flex; align-items: center; gap: 14px;
  font: 700 11px var(--bn-sans); letter-spacing: 2px; text-transform: uppercase;
  color: var(--bn-slate); margin: 0 0 30px;
}
.qom-skip::before, .qom-skip::after { content: ""; flex: 1; height: 1px; background: var(--bn-pale); }

/* ---------------- results ---------------- */
.section-bar {
  font-size: 14px; letter-spacing: .3rem; background-color: #565d65;
  border-left: 5px solid var(--bn-blue); padding: 4px 12px;
  margin-bottom: 20px; text-transform: uppercase; color: #fff; display: inline-block;
}
.qom-results h2 {
  font-family: var(--bn-serif); font-weight: 400; line-height: 1;
  color: var(--bn-ink); letter-spacing: -.02em; font-size: 40px; margin: 0 0 12px;
}
.qom-results > p { margin: 0 0 20px; }
.qom-rank { list-style: none; margin: 0 0 8px; padding: 0; counter-reset: rank; }
.qom-rank li { counter-increment: rank; padding: 12px 0; border-bottom: 1px solid var(--bn-pale); }
.qom-rank .head { display: flex; align-items: baseline; gap: 12px; }
.qom-rank .head::before {
  content: counter(rank); flex: none; width: 26px; height: 26px;
  background: var(--bn-blue); color: #fff; border-radius: 50%;
  font: 400 14px var(--bn-serif); text-align: center; line-height: 26px;
}
.qom-rank .name { font-family: var(--bn-serif); font-size: 22px; color: var(--bn-ink); line-height: 1.15; flex: 1; }
.qom-rank .pct { font: 700 15px var(--bn-sans); color: var(--bn-blue); }
.qom-rank .meter { height: 6px; background: #f1f4f9; margin-top: 8px; margin-left: 38px; }
.qom-rank .meter i { display: block; height: 100%; background: var(--bn-blue); }
.qom-rank li:first-child .head::before { background: var(--bn-plum); }
.qom-rank li:first-child .meter i { background: var(--bn-plum); }
.qom-rank li:first-child .pct { color: var(--bn-plum); }

/* email module — their .bom-1pg-email-form */
.bom-1pg-email-form { background-color: var(--bn-pale); text-align: center; padding: 26px; margin-top: 30px; }
.bom-1pg-email-form h3 {
  font-family: var(--bn-serif); font-weight: 400; color: var(--bn-ink);
  padding: 8px 20px 4px; font-size: 36px; line-height: 38px; text-transform: none; margin: 0;
}
.bom-1pg-email-form p { margin: 0 auto 16px; max-width: 440px; font-size: 16px; }
.bom-1pg-email-form .row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bom-1pg-email-form input {
  flex: 1; min-width: 220px; max-width: 320px; border: 1px solid #fff; background: #fff;
  padding: 12px 14px; font-family: var(--bn-sans); font-size: 16px; color: var(--bn-body); border-radius: 0;
}
.bom-1pg-email-form button {
  border: 0; border-radius: 0; background: var(--bn-blue); color: #fff;
  font-family: var(--bn-serif); font-weight: 400; font-size: 24px; letter-spacing: -.02em;
  padding: 6px 24px; cursor: pointer; transition: all .2s ease-in-out;
}
.bom-1pg-email-form button:hover { filter: brightness(1.06); }
.bom-1pg-email-form .fine-print {
  letter-spacing: 0; font-size: 13px; padding: 12px 0 8px; display: block;
  color: #888; line-height: normal; font-weight: 500;
}

/* share + more */
.qom-share { margin: 34px 0 0; text-align: center; }
.qom-share h4 { font-family: var(--bn-serif); font-weight: 400; font-size: 26px; color: var(--bn-ink); margin: 0 0 12px; }
.qom-share .btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.qom-share .btns button {
  color: var(--bn-blue); background: #fff; border: 1px solid var(--bn-blue); border-radius: 0;
  font-family: var(--bn-serif); font-size: 20px; letter-spacing: -.02em;
  padding: 5px 18px; cursor: pointer; transition: all .2s ease-in-out;
}
.qom-share .btns button:hover { background: var(--bn-blue); color: #fff; }
.qom-more { margin: 34px 0 0; }
.qom-more .section-header { font-family: var(--bn-serif); font-size: 19px; color: var(--bn-ink); margin: 0 0 10px; }
.qom-more ul { list-style: none; margin: 0; padding: 0; }
.qom-more li { padding: 10px 0; border-top: 1px solid var(--bn-pale); font-size: 17px; }
.qom-more li a { color: var(--bn-body); font-weight: 700; }
.qom-more li a:hover { color: var(--bn-plum); }

/* ---------------- footer ---------------- */
.bn-footer { font-family: var(--bn-sans); text-align: center; background: var(--bn-footer); margin-top: 40px; }
.bn-footer .in { max-width: 1170px; margin: 0 auto; padding: 40px 15px; }
.bn-footer ul { font-size: 15px; display: inline-block; vertical-align: top; padding: 10px 30px; margin: 0; list-style: none; text-align: left; }
.bn-footer ul + ul { border-left: 1px solid var(--bn-pale-hover); }
.bn-footer li { font-weight: 400; color: #555; padding: 10px 0; text-transform: uppercase; font-size: 13px; letter-spacing: .04em; }
.bn-footer a { color: gray; }
.bn-footer a:hover { color: var(--bn-blue); }
.bn-footer .copy { font-size: 12px; color: #8a8a8a; padding: 8px 15px 34px; }

/* ============================================================
   Rewarded gate — skinned as Beliefnet's own furniture:
   square corners (their .btn has border-radius:0), Palatino/Gelasio
   headings on #333, Lato body, #2aa4e4 primary action.
   ============================================================ */
body.beliefnet .gate-eyebrow {
  font-family: var(--bn-sans); font-weight: 800; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--bn-slate);
}
body.beliefnet .reward-locker { border-radius: 0; }
body.beliefnet .reward-locker .lock-badge { display: none; }
body.beliefnet .reward-locker h3 {
  font-family: var(--bn-serif); font-weight: 400;
  font-size: clamp(30px, 4vw, 42px); line-height: 1.02; letter-spacing: -.02em;
  color: var(--bn-ink); margin: 2px 0 12px;
}
body.beliefnet .reward-locker p {
  font-family: var(--bn-sans); font-size: 16px; line-height: 1.45;
  color: var(--bn-body); max-width: none; margin: 0 0 22px;
}
body.beliefnet .rv-cta {
  background: var(--bn-blue); color: #fff; border-radius: 0;
  font-family: var(--bn-serif); font-weight: 400; font-size: 26px;
  letter-spacing: -.02em; padding: 8px 28px; box-shadow: none;
}
body.beliefnet .rv-cta:hover { filter: brightness(1.06); transform: none; }
body.beliefnet .rv-cta svg { display: none; }
body.beliefnet .rv-later { font-family: var(--bn-sans); color: var(--bn-muted); font-weight: 400; font-size: 14px; }
body.beliefnet .rv-later:hover { color: var(--bn-blue); }
body.beliefnet .reward-locker .rv-foot { display: none; }
body.beliefnet .lk-side {
  background: var(--bn-pale);
}
body.beliefnet .lk-side h4 {
  font-family: var(--bn-serif); font-weight: 400; text-transform: none;
  letter-spacing: -.01em; font-size: 22px; color: var(--bn-ink);
}
body.beliefnet .lk-side li { font-family: var(--bn-sans); font-size: 15.5px; color: var(--bn-body); }
body.beliefnet .lk-side li svg { color: var(--bn-blue); }
body.beliefnet .gate-fine { font-family: var(--bn-sans); color: #888; font-size: 13px; font-weight: 500; letter-spacing: 0; }
body.beliefnet .rv-floating .txt { font-family: var(--bn-sans); }
body.beliefnet .rv-floating button {
  background: var(--bn-blue); color: #fff; border-radius: 0;
  font-family: var(--bn-serif); font-weight: 400; font-size: 19px; letter-spacing: -.02em;
}

/* ---------------- responsive ---------------- */
@media (max-width: 991px) {
  .bn-nav .index-links, .bn-nav .secondary-links { display: none; }
  .qom-title { font-size: 34px; }
  .bom-subtitle { font-size: 21px; }
  .qom-q h2 { font-size: 25px; }
  .qom-results h2 { font-size: 32px; }
  .bom-1pg-email-form { padding: 6px 6px 20px; }
  .bom-1pg-email-form h3 { padding: 34px 18px 17px; font-size: 26px; line-height: 28px; }
  .bn-footer ul + ul { border-left: 0; }
}
@media (max-width: 767px) {
  .quiz-answers input[type=radio] + label > span { font-size: 16px; }
  .qom-rank .name { font-size: 19px; }
}