/* Home page only (index.html): the full-bleed photo hero with the three program cards
   overlapping its bottom edge. Everything else comes from css/b.css. */

/* ── Hero: the photo edge to edge, the program cards overlapping its bottom edge ── */
.b-hero-photo { position: relative; overflow: hidden; min-height: clamp(640px, 88svh, 900px);
  display: flex; align-items: flex-start; isolation: isolate; background: #5A4E46; }
.b-hero-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; }
.b-hero-photo::after { /* scrim: deepens the leaves behind the type, leaves her face in the light */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(22, 22, 26, .62) 0%, rgba(22, 22, 26, .34) 38%, rgba(22, 22, 26, 0) 64%),
    linear-gradient(180deg, rgba(22, 22, 26, .25) 0%, rgba(22, 22, 26, 0) 40%, rgba(16, 16, 20, .35) 100%); }
.b-hero-copy { position: relative; width: 100%; padding-top: calc(var(--hdr) + clamp(48px, 7vw, 104px)); padding-bottom: 150px; color: #fff; }
.b-hero-by { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.b-hero-by img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 2px solid rgba(255, 255, 255, .85); }
.b-hero-by small { display: block; font-size: 14px; font-weight: 400; opacity: .82; }
.b-hero-title { margin-top: 26px; font-size: clamp(46px, 6.6vw, 100px); line-height: .98; letter-spacing: -0.035em; max-width: 11.5ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .18); }
.b-hero-sub { margin-top: 24px; max-width: 38ch; font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.6; color: rgba(255, 255, 255, .9); }

/* The three programs, set on the horizon where the photo ends */
.b-ledger { position: relative; z-index: 2; margin-top: -112px; background: #FFFEFB; border-radius: 14px;
  box-shadow: 0 40px 80px -40px rgba(40, 25, 10, .5), 0 2px 8px rgba(40, 25, 10, .08); display: grid; }
.b-ledger::before { /* the logo's crossbar: an ember horizon along the top */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--ember) 0%, #E9B07E 50%, var(--ember) 100%); }
.b-row { display: grid; grid-template-columns: 1fr; grid-template-areas: "name" "meta" "price" "cta"; align-content: start;
  gap: 2px; padding: 22px 22px; border-top: 1px solid var(--rule); transition: background-color .2s ease; }
.b-row:first-child { border-top: 0; }
.b-row:hover { background: #FBF6EF; }
.b-row-name { grid-area: name; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -0.02em; }
.b-row-meta { grid-area: meta; font-size: 14px; color: var(--stone); }
.b-row-price { grid-area: price; margin-top: 8px; font-size: 16px; color: #3E4148; }
.b-row-price b { font-size: 20px; font-weight: 600; color: var(--ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
.b-row-price small { display: block; font-size: 14px; color: var(--stone); }
.b-row-go { grid-area: go; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease; }
.b-row-help .b-row-go { background: transparent; color: var(--ink); border: 1px solid rgba(22, 26, 34, .3); }
.b-row:hover .b-row-go { transform: translateX(3px); }
.b-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: 14px; }
.b-trust { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15.5px; color: var(--stone); }
/* Plain facts split by thin rules, no bullet dots. */
.b-trust li { display: inline-flex; align-items: center; }
.b-trust li + li { border-left: 1px solid currentColor; padding-left: 26px; border-left-color: rgba(127, 127, 127, .45); }
/* On a phone they stack, so the rules would only indent the second and third lines. */
@media (max-width: 640px) { .b-trust { flex-direction: column; gap: 6px; } .b-trust li + li { border-left: 0; padding-left: 0; } }
@media (min-width: 900px) {
  .b-ledger { grid-template-columns: repeat(3, 1fr); }
  .b-row { border-top: 0; border-left: 1px solid var(--rule); padding: 26px 26px 26px; }
  .b-row:first-child { border-left: 0; }
}
@media (max-width: 767px) {
  .b-hero-photo > img { object-position: 64% 30%; }
  .b-hero-photo::after { background: linear-gradient(180deg, rgba(22, 22, 26, .64) 0%, rgba(22, 22, 26, .42) 55%, rgba(16, 16, 20, .5) 100%); }
  .b-hero-copy { padding-bottom: 120px; }
  .b-ledger { margin-top: -84px; }
}


/* Labeled actions (third-party review: arrows alone didn't say what happens) */
.b-row-cta { grid-area: cta; justify-self: start; margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: 999px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 600;
  transition: background-color .2s ease; }
.b-row-cta svg { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.b-row:hover .b-row-cta { background: #2B303A; }
.b-row:hover .b-row-cta svg { transform: translateX(3px); }
.b-row-help .b-row-cta { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(22, 26, 34, .3); }
.b-row-help:hover .b-row-cta { background: #F3ECE3; }
.b-row-meta { font-size: 16px; }
.b-row-price small { font-size: 15.5px; }
.b-hero-sub { font-size: clamp(18px, 1.5vw, 21px); color: #fff; }
.b-hero-ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.b-hero-ctas .b-btn-light, .b-hero-ctas .b-btn-ghost { gap: 10px; min-height: 52px; }
.b-trust { font-size: 16.5px; color: #3E4148; }
.b-row { grid-template-rows: auto auto auto 1fr; }
.b-row-cta { align-self: end; }

/* Vial photo on the two medication cards (asked for in design review). Absolutely placed in the
   empty corner beside the price and button, so the card's grid and the three cards' equal heights
   don't change and no line of copy has to wrap around it. */
.b-row { position: relative; }
.b-row-vial { position: absolute; right: 18px; bottom: 24px; width: auto; height: 92px; pointer-events: none;
  filter: drop-shadow(0 10px 12px rgba(40, 25, 10, .18)); }
/* Small phones: a shorter vial clears the price line; the narrowest have no room for one. */
@media (max-width: 399px) { .b-row-vial { height: 74px; } }
@media (max-width: 359px) { .b-row-vial { display: none; } }
/* Three narrow cards side by side leave no corner free until the row is wide enough. */
@media (min-width: 900px) and (max-width: 1239px) { .b-row-vial { display: none; } }
@media (min-width: 1240px) { .b-row-vial { right: 28px; bottom: 28px; height: 124px; } }