/* Help me choose (/help-me-choose), direction B. Loaded by help-me-choose.html only.
   Holds: the type hero's action column; the ruled comparison (the two names large at the head,
   a center rule between the columns that breaks where a shared row runs across both, the price
   rows set in display numerals, the per-medication buttons at the foot, the "not sure" bar under
   it, and its phone layout: each row's label on its own line, the two answers side by side);
   and the three-stop timeline. Everything else comes from css/b.css and css/site.css. */

/* ── Hero ── */
.hc-hero-side { display: grid; gap: 22px; justify-items: start; }
.hc-hero-cta .btn-ink { min-height: 52px; }
.hc-hero-note { font-size: 15.5px; line-height: 1.55; color: #50545B; }
.ph-type .breadcrumb a { padding: 12px 0; margin: -12px 0; transition: color .2s ease; }
/* the hero's closing rule spans the content width, in line with the rules below it */

/* ── Section head: title left, lede bottom-aligned right ── */
.hc-compare { padding-top: clamp(72px, 8vw, 112px); }
.hc-split { display: grid; gap: 0 64px; }
@media (min-width: 900px) {
  .hc-split { grid-template-columns: 1fr 1fr; align-items: end; }
  .hc-split .b-lede { margin: 0 0 8px; }
}

/* ── The comparison ── */
.hc-cmp { width: 100%; margin-top: 56px; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.hc-col-label { width: 22%; }
.hc-cmp thead th { text-align: left; vertical-align: bottom; padding: 0 32px 24px; border-bottom: 1px solid var(--ink); font-weight: 400; }
.hc-cmp thead td { border-bottom: 1px solid var(--ink); }
.hc-name { display: block; font-size: clamp(42px, 5vw, 76px); line-height: 1; letter-spacing: -0.035em; }
.hc-kind { display: block; margin-top: 12px; font-size: 16px; color: var(--stone); }
.hc-cmp tbody th { text-align: left; vertical-align: top; padding: 24px 24px 24px 0; border-bottom: 1px solid var(--rule);
  font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.hc-cmp tbody td { vertical-align: top; padding: 22px 32px; border-bottom: 1px solid var(--rule); font-size: 17px; line-height: 1.6; color: #3E4148; }
.hc-cmp tbody td + td, .hc-cmp thead th + th, .hc-cmp tfoot td + td + td { border-left: 1px solid var(--rule); }
.hc-cmp thead th + th { border-left-color: rgba(22, 26, 34, .22); }
/* a shared row: one line across both, centered on the break in the center rule */
.hc-cmp .is-same td { text-align: center; padding-left: 12%; padding-right: 12%; color: var(--ink); }
.hc-cmp .is-same td .link-ul { white-space: nowrap; }
.hc-money td { padding-top: 26px; padding-bottom: 26px; }
.hc-big { display: block; font-size: clamp(48px, 4.6vw, 66px); line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.hc-mid { display: block; font-size: clamp(28px, 2.5vw, 36px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.hc-sub { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: #50545B; text-wrap: pretty; max-width: 30ch; }
.hc-cmp tfoot td { padding: 26px 32px 0; }
.hc-cmp tfoot .btn-line { background: transparent; }
.hc-cmp tfoot .btn-line:hover { background: #fff; }

/* ── Not sure: the recommendation, on its own line ── */
.hc-decide { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
  padding: 30px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.hc-decide-text { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -0.02em; max-width: 24ch; }
.hc-decide .btn-ink { min-height: 52px; }
.hc-note { margin-top: 18px; font-size: 15.5px; line-height: 1.6; color: #50545B; }

/* ── Phones: label on its own line, the two answers side by side ── */
@media (max-width: 767px) {
  .hc-cmp, .hc-cmp thead, .hc-cmp tbody, .hc-cmp tfoot { display: block; }
  .hc-cmp colgroup, .hc-cmp .hc-corner { display: none; }
  .hc-cmp tr { display: grid; grid-template-columns: 1fr 1fr; }
  .hc-cmp thead th { padding: 0 12px 18px 0; }
  .hc-cmp thead th + th { padding-left: 14px; }
  .hc-name { font-size: 31px; }
  .hc-kind { font-size: 14px; margin-top: 8px; }
  .hc-cmp tbody tr { border-bottom: 1px solid var(--rule); padding: 18px 0 20px; }
  .hc-cmp tbody th { grid-column: 1 / -1; padding: 0 0 8px; border: 0; font-size: 14px; color: var(--stone); }
  .hc-cmp tbody td { padding: 0 12px 0 0; border: 0; font-size: 16px; line-height: 1.55; }
  .hc-cmp tbody td + td { padding-left: 14px; }
  .hc-cmp .is-same td { grid-column: 1 / -1; text-align: left; padding: 0; }
  .hc-money td { padding-top: 0; padding-bottom: 0; }
  .hc-big { font-size: 44px; }
  .hc-mid { font-size: 28px; }
  .hc-sub { font-size: 14px; }
  .hc-cmp tfoot tr { gap: 10px; padding-top: 22px; }
  .hc-cmp tfoot td, .hc-cmp tfoot td + td { padding: 0; border: 0; }
  .hc-cmp tfoot .btn-line { width: 100%; padding: 0 12px; }
  .hc-decide .btn-ink { width: 100%; }
}

/* ── How Help me choose works: three stops ── */
.hc-how .b-head .btn-ink { min-height: 52px; }
@media (min-width: 900px) { .hc-time { grid-template-columns: repeat(3, 1fr); column-gap: 40px; } .hc-time li > p:last-child { max-width: 36ch; } }

/* Two medication names side by side have to fit the smallest phones. */
@media (max-width: 359px) { .hc-name { font-size: 26px; } }