/* ==========================================================================
   GLP-1 results / treatment options view (rendered inside /quiz/glp1)
   Brand tokens mirror tokens.css. Pixel pass against Ghost's Figma frames
   happens once exports are available - this is the structural scaffold.
   ========================================================================== */

.jb-results {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 20px 64px;
  text-align: center;
}

.jb-results__title {
  font-family: 'Basis Grotesque', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.25;
  color: #262626;
  margin: 8px 0 12px;
}

.jb-results__subtitle {
  font-size: 17px;
  line-height: 1.5;
  color: #727272;
  max-width: 560px;
  margin: 0 auto 36px;
}

.jb-results__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  text-align: left;
}

@media (max-width: 680px) {
  .jb-results__grid { grid-template-columns: 1fr; }
  .jb-results__title { font-size: 24px; }
}

.jb-results__card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 24px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}

.jb-results__product {
  font-weight: 500;
  font-size: 20px;
  color: #262626;
  margin: 0 0 8px;
}

.jb-results__price {
  margin: 0 0 20px;
}

.jb-results__price-label {
  font-size: 15px;
  color: #727272;
}

.jb-results__price-amount {
  font-size: 32px;
  font-weight: 500;
  color: #262626;
  padding: 0 2px;
}

.jb-results__features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  flex: 1;
}

.jb-results__features li {
  position: relative;
  padding: 6px 0 6px 30px;
  font-size: 15px;
  line-height: 1.45;
  color: #262626;
}

.jb-results__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #cdd9f9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
}

.jb-results__note {
  font-size: 14px;
  color: #727272;
  margin: 28px auto 0;
  max-width: 480px;
}

.jb-results__pending {
  display: none;
  font-size: 14px;
  color: #262626;
  background: #fafcf2;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 16px auto 0;
  max-width: 480px;
}

.jb-results__pending.is-visible { display: block; }

/* Placeholder shown while catalog pricing is being confirmed. Deliberate -
   see PRICES in results-glp1.js. */
.jb-results__price-pending {
  display: inline-block;
  font-size: 13px;
  color: #727272;
  background: #e8e8e9;
  border-radius: 999px;
  padding: 4px 12px;
}

/* Paid-funnel quiz page: hide the theme's global promo banner ("65% off labs")
   the same way the LP does (pdp-wl.css). It advertises a different product and
   pulls a paid GLP-1 visitor out of the funnel. body.jb-funnel-blank is set by
   template-funnel-blank.php, so this never touches the rest of the site. */
body.jb-funnel-blank .global-promo-banner { display: none !important; }

/* ------------------------------------------------------------------------
   Results cards = the LP's plan cards (2026-09-18, J: "visually match").
   Markup and copy come from glp-1-promo.html's #plans section; the card CSS
   is the LP's own _wl/ss-routes.css, linked by the quiz page. This block
   supplies only what ss-routes.css expects from the LP's other sheets:
   the token variables (values copied from _wl/joi-trt.css + joi-base.css),
   the anchor-color guards (the theme's `a` rule outranks .bk-btn-primary,
   same collision pdp-wl.css fixes on the LP), and a tighter section frame
   since the cards sit under our title rather than in a full-bleed section.
   ------------------------------------------------------------------------ */
.jb-results {
  --lp-ink: #101010;
  --lp-ink-muted: #535353;
  --lp-ink-subtle: #949494;
  --lp-accent-deep: #4E70AF;
  --lp-section-y: 120px;
  --lp-gutter: 60px;
  --lp-max: 1320px;
  --lp-display-tight: clamp(48px, 5.5vw, 84px);
  --font-sans: "Basis Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Simula", "Times New Roman", Times, serif;
}
.jb-results .ss-routes { padding: 28px 0 0; background: transparent; border-top: 0; }
.jb-results .ss-routes-grid { max-width: 880px; }
.jb-results .ss-routes .fine { max-width: 880px; margin-top: 18px; }   /* stays centered, as on the LP */
.jb-results .ss-routes .fine + .fine { margin-top: 10px; }
.jb-results a.bk-btn-primary, .jb-results a.bk-btn-primary:link,
.jb-results a.bk-btn-primary:visited, .jb-results a.bk-btn-primary:hover { color: #fff; }
.jb-results a.bk-btn-outline, .jb-results a.bk-btn-outline:link,
.jb-results a.bk-btn-outline:visited, .jb-results a.bk-btn-outline:hover { color: #101010; }
.jb-results .ss-route { text-align: left; }
.jb-results .ss-route h3 { text-align: left; }