/* Direction B design system, shared by every page (linked from partials/head.html after
   site.css): section type (.b-h2, .b-lede, .b-sec, .b-head), the transparent header over a
   photo hero (body class .hdr-over), inner-page heroes (.ph: a full-bleed photo, or
   .ph-type: type on paper), the physician's dark band, the timeline, the Horizon Strong Plan
   photo band, the price list, the reasons list, the Utah facts row, light/ghost buttons and
   the photo closing band. Square corners, hairline rules and real photography. */

:root { --r: 4px; }
main { overflow-x: clip; }
.b-h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -0.03em; max-width: 16ch; }
.b-lede { margin-top: 20px; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.65; color: #4A4E56; max-width: 46ch; }
.b-sec { padding-top: clamp(88px, 10vw, 140px); }
.b-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; }

/* ── Header over a photo hero (body.hdr-over): transparent with the white logo until the page moves ── */
.hdr-over .site-header { position: fixed; left: 0; right: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color .35s ease, border-color .3s ease; }
.hdr-over .site-header:not(.is-scrolled) .hdr-logo img { content: url(/brand_assets/hzn-wellness-logo-white.svg); }
.hdr-over .site-header:not(.is-scrolled) .hdr-nav, .hdr-over .site-header:not(.is-scrolled) .hdr-signin { color: rgba(255, 255, 255, .9); }
.hdr-over .site-header:not(.is-scrolled) .hdr-nav a:hover, .hdr-over .site-header:not(.is-scrolled) .hdr-signin:hover { color: #fff; }
.hdr-over .site-header:not(.is-scrolled) .btn-ink { background: #fff; color: var(--ink); }
.hdr-over .site-header:not(.is-scrolled) .hdr-burger span { background: #fff; }
.hdr-over .site-header:not(.is-scrolled) :focus-visible { outline-color: #fff; }
.hdr-over .site-header.is-scrolled { background: rgba(251, 250, 247, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hdr-over:has(#mobileMenu.is-open) .site-header .hdr-burger span { background: var(--ink); }
.hdr-over:has(#mobileMenu.is-open) .site-header .hdr-logo img { content: url(/brand_assets/hzn-wellness-logo.svg); }

/* ── Inner-page hero, photo: edge to edge under the header, title in white ── */
.ph { position: relative; isolation: isolate; color: #fff; min-height: clamp(460px, 64svh, 680px); display: flex; align-items: flex-end; background: #3A322C; overflow: hidden; }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ph::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18, 17, 20, .45) 0%, rgba(18, 17, 20, .1) 35%, rgba(18, 17, 20, .25) 60%, rgba(18, 17, 20, .72) 100%),
    linear-gradient(90deg, rgba(18, 17, 20, .45) 0%, rgba(18, 17, 20, 0) 60%); }
.ph-inner { width: 100%; padding-top: calc(var(--hdr) + 56px); padding-bottom: clamp(44px, 6vw, 80px); display: grid; gap: 22px; align-items: end; }
.ph-title { font-size: clamp(46px, 6.4vw, 96px); line-height: .98; letter-spacing: -0.035em; max-width: 12ch; }
.ph-lede { max-width: 40ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: rgba(255, 255, 255, .9); }
@media (min-width: 1024px) { .ph-inner { grid-template-columns: 1.3fr 1fr; column-gap: 72px; } .ph-lede { margin-bottom: 10px; } }

/* Breadcrumb, one rule for every inner page (white over a photo hero) */
.breadcrumb { align-items: center; color: #50545B; margin-bottom: 22px; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; transition: color .2s ease; }
.breadcrumb a:hover { color: var(--ember-dark); }
.ph .breadcrumb { color: rgba(255, 255, 255, .84); }
.ph .breadcrumb a { color: #fff; }
.ph .breadcrumb a:hover { color: #FBEBDD; }
.ph :focus-visible { outline-color: #fff; }

/* ── Inner-page hero, type only: on paper, a hairline under it ── */
.ph-type { padding-top: clamp(56px, 8vw, 112px); }
.ph-type .ph-inner { padding-top: 0; padding-bottom: clamp(36px, 5vw, 64px);
  background: linear-gradient(var(--ink), var(--ink)) 50% 100% / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.ph-type .ph-title { color: var(--ink); }
/* On paper the two columns hang from the same top line, so a tall side column never leaves the breadcrumb and title floating mid-hero */
@media (min-width: 1024px) { .ph-type .ph-inner { align-items: start; } .ph-type .ph-lede { margin-top: 66px; } }
.ph-type .ph-lede { color: #4A4E56; }

/* ── The physician (dark band) ── */
.b-doc { margin-top: clamp(64px, 7vw, 96px); background: var(--ink); color: #fff; padding: clamp(64px, 8vw, 120px) 0; }
.b-doc-grid { display: grid; gap: 44px; align-items: center; }
.b-doc-photo { margin: 0; position: relative; max-width: 460px; }
.b-doc-photo img { display: block; width: 100%; aspect-ratio: 4 / 4.8; object-fit: cover; object-position: 50% 16%; border-radius: 4px; }
.b-doc-photo figcaption { margin-top: 12px; font-size: 14px; color: rgba(255, 255, 255, .62); }
.b-doc .b-h2 { color: #fff; }
.b-doc .b-lede { color: rgba(255, 255, 255, .76); }
.b-creds { margin: 34px 0 0; border-top: 1px solid rgba(255, 255, 255, .5); }
.b-creds div { display: grid; gap: 2px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.b-creds dt { font-size: 14px; color: rgba(255, 255, 255, .6); }
.b-creds dd { margin: 0; font-size: 16.5px; }
.b-doc-links { margin-top: 28px; }
.b-doc .link-ul:hover { color: #F4C79F; }
@media (min-width: 640px) { .b-creds div { grid-template-columns: 160px 1fr; gap: 20px; } }
@media (min-width: 1024px) { .b-doc-grid { grid-template-columns: 5fr 7fr; column-gap: clamp(56px, 7vw, 112px); } }


/* ── How it works: what happens when ── */
.b-time { list-style: none; margin: 52px 0 0; padding: 0; display: grid; gap: 34px; }
.b-time li { position: relative; padding-top: 26px; border-top: 1px solid rgba(22, 26, 34, .22); }
.b-time li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }
.b-when { font-family: Newsreader, Georgia, serif; font-size: clamp(26px, 2.3vw, 32px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ember-dark); }
.b-time h3 { margin-top: 14px; font-size: 18px; font-weight: 600; }
.b-time li > p:last-child { margin-top: 8px; color: var(--stone); font-size: 16px; line-height: 1.6; max-width: 32ch; }
@media (min-width: 900px) { .b-time { grid-template-columns: repeat(4, 1fr); column-gap: 28px; } }


/* ── The plan: photo band ── */
.b-plan { position: relative; margin-top: clamp(88px, 10vw, 140px); }
.b-plan-photo { position: absolute; inset: 0; overflow: hidden; }
.b-plan-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform: scaleX(-1); } /* mirrored so the hiker sits clear of the plan card, pointing at it */
.b-plan-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20, 18, 14, .62) 0%, rgba(20, 18, 14, .32) 45%, rgba(20, 18, 14, .05) 75%); }
.b-plan-inner { position: relative; display: grid; gap: 36px; align-items: end; padding-top: clamp(96px, 12vw, 176px); padding-bottom: clamp(64px, 8vw, 112px); }
.b-plan .b-h2 { color: #fff; max-width: 13ch; }
.b-plan .b-lede { color: rgba(255, 255, 255, .86); }
.b-plan-card { background: rgba(255, 254, 251, .97); border-radius: 4px; padding: 26px 26px 18px; max-width: 420px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }
.b-plan-name { font-size: 28px; letter-spacing: -0.02em; line-height: 1.1; }
.b-plan-card ul { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.b-plan-card li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; color: #44484F; }
.b-plan-card li:last-child { border-bottom: 0; }
.b-plan-card b { font-weight: 600; color: var(--ink); white-space: nowrap; }
@media (min-width: 1024px) { .b-plan-inner { grid-template-columns: 1.1fr 1fr; justify-items: start; } .b-plan-card { justify-self: end; width: 100%; } }
@media (max-width: 767px) { .b-plan-photo::after { background: linear-gradient(180deg, rgba(20, 18, 14, .6) 0%, rgba(20, 18, 14, .25) 55%, rgba(20, 18, 14, .5) 100%); } }


/* ── Pricing: a price list ── */
.b-list { width: 100%; margin-top: 44px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.b-list thead td { border-bottom: 1px solid var(--ink); }
.b-list thead th { text-align: left; font-size: 14px; font-weight: 500; color: var(--stone); padding: 0 16px 14px 0; border-bottom: 1px solid var(--ink); }
.b-list tbody th, .b-list tbody td { padding: 26px 16px 26px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; text-align: left; font-size: 17px; }
.b-list tbody th { font-size: clamp(28px, 2.6vw, 36px); font-weight: 300; letter-spacing: -0.02em; }
.b-list .b-list-big { font-size: clamp(44px, 4.4vw, 60px); font-weight: 300; letter-spacing: -0.03em; line-height: 1; }
.b-list td:last-child { text-align: right; padding-right: 0; }
.b-price-foot { margin-top: 28px; display: grid; gap: 16px 64px; }
.b-inc { font-size: 17px; color: #3E4148; max-width: 48ch; }
.b-fine { font-size: 14px; line-height: 1.6; color: var(--stone); }
@media (min-width: 1024px) { .b-price-foot { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .b-list thead { display: none; }
  .b-list, .b-list tbody, .b-list tr { display: block; }
  .b-list tr { padding: 24px 0; border-bottom: 1px solid var(--rule); }
  .b-list tbody th, .b-list tbody td { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border: 0; }
  .b-list td[data-label]::before { content: attr(data-label); font-size: 15px; color: var(--stone); font-family: Figtree, system-ui, sans-serif; letter-spacing: 0; }
  .b-list .b-list-big { font-size: 40px; }
  .b-list td:last-child { display: block; margin-top: 12px; }
  .b-list td:last-child .btn-ink { width: 100%; }
}


/* ── Questions ── */
.b-faq { padding-top: clamp(88px, 10vw, 140px); }


/* ── Closing ── */
.b-close { padding-top: clamp(88px, 10vw, 140px); }
.b-close-photo { position: relative; overflow: hidden; isolation: isolate; text-align: center; color: #fff;
  padding: clamp(110px, 14vw, 200px) var(--gutter) clamp(96px, 12vw, 170px); background: #4A3F38; }
.b-close-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; z-index: -2; }
.b-close-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30, 20, 14, .5), rgba(22, 18, 16, .55)); }
.b-close-title { font-size: clamp(42px, 5.6vw, 84px); line-height: 1.02; letter-spacing: -0.03em; max-width: 12ch; margin: 0 auto; }
.b-close-inner > p:not(.b-close-note):not(.b-close-doc) { margin: 18px auto 0; max-width: 46ch; font-size: 18px; color: rgba(255, 255, 255, .88); }
.b-close-choices { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.b-btn-light, .b-btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 999px;
  font-weight: 600; font-size: 16px; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease, color .2s ease; }
.b-btn-light { background: #fff; color: var(--ink); }
.b-btn-light:hover { transform: translateY(-1px); background: #FBEBDD; }
.b-btn-ghost { border: 1px solid rgba(255, 255, 255, .7); color: #fff; }
.b-btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.b-close-photo :focus-visible { outline-color: #fff; }
.b-close-note { margin-top: 22px; font-size: 14px; color: rgba(255, 255, 255, .78); }


/* ── Why: four reasons, ruled ── */
.b-why { display: grid; gap: 40px; }
.b-why-list { margin: 0; border-top: 1px solid var(--ink); }
.b-why-list div { display: grid; gap: 8px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.b-why-list dt { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; letter-spacing: -0.02em; }
.b-why-list dd { margin: 0; color: var(--stone); font-size: 16.5px; line-height: 1.6; max-width: 44ch; }
@media (min-width: 900px) { .b-why-list div { grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: baseline; } }
@media (min-width: 1024px) {
  .b-why { grid-template-columns: 5fr 7fr; column-gap: clamp(56px, 7vw, 112px); }
  .b-why-head { position: sticky; top: calc(var(--hdr) + 32px); align-self: start; }
  .b-why-list div { grid-template-columns: 1fr; }
}


/* ── Where: care from right here in Utah ── */
.b-where { margin-top: clamp(88px, 10vw, 140px); background: var(--cream); padding: clamp(72px, 9vw, 128px) 0; }
.b-where-copy { display: grid; gap: 8px 64px; }
.b-where-facts { margin: 40px 0 0; display: grid; border-top: 1px solid var(--ink); }
.b-where-facts div { display: grid; align-content: start; gap: 6px; padding: 20px 0; border-bottom: 1px solid rgba(22, 26, 34, .12); }
.b-where-facts dt { font-size: 14px; font-weight: 600; color: var(--stone); }
.b-where-facts dd { margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.2; letter-spacing: -0.015em; }
@media (min-width: 900px) {
  .b-where-copy { grid-template-columns: 1fr 1fr; align-items: end; }
  .b-where-copy .b-lede { margin: 0 0 8px; }
  .b-where-facts { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); column-gap: 32px; border-bottom: 0; }
  .b-where-facts div { border-bottom: 0; padding-top: 22px; }
}


/* Third-party review: darker small text, a shorter physician band on phones */
.b-lede { color: #4A4E56; }
.b-fine { font-size: 14.5px; color: #50545B; }
@media (max-width: 767px) {
  .b-doc { padding: 56px 0; }
  .b-doc-grid { gap: 28px; }
  .b-doc-photo { max-width: 260px; }
  .b-doc-photo img { aspect-ratio: 1 / 1; object-position: 50% 12%; }
}

/* ── Readability (blind review): darker secondary text, and small copy a step larger on phones ── */
:root { --stone: #4E525A; }
@media (max-width: 767px) {
  body { font-size: 17.5px; }
  .b-lede, .ph-lede { font-size: 18px; }
}

/* ── Physician byline under inner-page heroes ── */
.ph-by { display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; font-size: 15px; line-height: 1.35; color: #3E4148; }
.ph-by img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: none; box-shadow: 0 0 0 1px var(--rule); }
.ph-by a { font-weight: 600; color: var(--ink); border-bottom: 1px solid rgba(22, 26, 34, .25); transition: border-color .2s ease; }
.ph-by a:hover { border-bottom-color: var(--ink); }
.ph .ph-by { color: rgba(255, 255, 255, .86); } .ph .ph-by a { color: #fff; border-bottom-color: rgba(255, 255, 255, .45); }
.ph-cta { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ph-cta small { font-size: 14.5px; color: #50545B; }
@media (min-width: 1024px) { .ph-cta-m { display: none; } }

/* ── Closing band: the physician behind it ── */
.b-close-doc { margin: 34px auto 0; display: flex; justify-content: center; max-width: 520px; align-items: center; gap: 14px; text-align: left; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.b-close-doc img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.b-close-doc strong { display: block; color: #fff; font-weight: 600; }

/* Header "See if I qualify" lands here; clear the fixed header. */
#programs { scroll-margin-top: calc(var(--hdr) + 24px); }

/* Someone who just finished in the portal doesn't need the button again. */
.page-thanks .hdr-actions .btn-ink, .page-thanks #mobileMenu .btn-ink { display: none; }

/* The sticky phone button must not sit over the footer credit at the end of a page. */
@media (max-width: 1023px) { .site-footer { padding-bottom: 88px; } }

/* Tap targets at phone and tablet widths: footer links, the credit and stand-alone text links. */
@media (max-width: 1023px) {
  .ftr-cols a { padding: 12px 0; }
  .foot-credit a { padding: 6px 10px; }
  .tx-unsure-actions .link-ul { display: inline-block; padding: 12px 0 4px; }
}