/* HB34 V19: clear benefit headline for exclusive method landing cards. */
.focus-card.hb-exclusive-focus .ribbon span.hb34-card-benefit{
  display:block!important;font:700 clamp(12px,1.1vw,14px)/1.5 system-ui,sans-serif!important;
  color:#ffdf9c!important;background:#092848dd!important;border-left:3px solid #e7c27f!important;
  border-radius:3px 9px 9px 3px;padding:9px 11px!important;margin:10px 0 4px!important;
  white-space:normal!important;max-width:98%;text-align:start!important;
}
.focus-card.hb-exclusive-focus .ribbon{height:auto!important;min-height:105px!important}
@media(max-width:650px){.focus-card.hb-exclusive-focus .ribbon span.hb34-card-benefit{font-size:12px!important}}


/* HB34 2026-11-03: original three-pillar reference, visibly separated brand ribbons.
   Keep card dimensions, photographs, URLs and existing responsive grid untouched. */
.focus-section .focus-card.hb-exclusive-focus:not(.red) .ribbon {
  background:linear-gradient(118deg,#00509b 0%,#0a2a61 78%,#081e46 100%)!important;
  border-top:3px solid #f0c784!important;
}
.focus-section .focus-card.hb-exclusive-focus.red .ribbon {
  background:linear-gradient(118deg,#b40c2a 0%,#7b1232 68%,#3c1534 100%)!important;
  border-top:3px solid #f4c88c!important;
}
.focus-section .focus-card.green .ribbon {
  background:linear-gradient(118deg,#17774b 0%,#0b5b3d 70%,#063a37 100%)!important;
  border-top:3px solid #f4c88c!important;
}
.focus-section .focus-card .ribbon h2,
.focus-section .focus-card .ribbon p {
  color:#fffaf1!important;
  text-shadow:0 2px 8px rgba(1,10,30,.56)!important;
}
.focus-section .focus-card .ribbon {box-shadow:0 -4px 18px rgba(2,10,27,.32)!important}
.focus-section .focus-card {border-color:#f3ddba!important}
@media(prefers-reduced-motion:reduce) {
  .focus-section .focus-card {transition:none!important;transform:none!important}
}


/* Three treatment photos must retain visible space above their labels, on all screen sizes. */
.focus-section .focus-card {height:clamp(310px,27vw,342px)!important}
.focus-section .focus-card img {height:73%!important;object-fit:cover!important}
@media(max-width:650px) {
 .focus-section .focus-grid {gap:17px!important}
 .focus-section .focus-card {height:310px!important}
 .focus-section .focus-card img {height:72%!important}
}


/* HB34 design-reference color alignment | 2026-11-03 vivid palette v4
   Saturated cobalt / crimson / bright pure green without changing content,
   images, font hierarchy, layout or accessible text contrast. */
.focus-section {
  background:linear-gradient(180deg,#cedffc 0%,#eaf2ff 100%)!important;
}
.focus-section .focus-card.hb-exclusive-focus:not(.red) .ribbon {
  background:linear-gradient(112deg,#056bd0 0%,#074aab 57%,#072b68 100%)!important;
  border-top:3px solid #f7ca77!important;
  box-shadow:inset 0 3px 0 #55baff,0 -4px 18px #04162c55!important;
}
.focus-section .focus-card.hb-exclusive-focus.red .ribbon {
  background:linear-gradient(112deg,#ce1238 0%,#ab0e2b 58%,#680919 100%)!important;
  border-top:3px solid #ffca83!important;
  box-shadow:inset 0 3px 0 #fa5268,0 -4px 18px #34010e66!important;
}
.focus-section .focus-card.green .ribbon {
  background:linear-gradient(112deg,#038715 0%,#08781a 58%,#01450b 100%)!important;
  border-top:3px solid #ffca83!important;
  box-shadow:inset 0 4px 0 #39eb41,0 -4px 18px #02371166!important;
}
.focus-section .focus-card .ribbon h2,
.focus-section .focus-card .ribbon p {
  color:#fff!important;
  text-shadow:0 2px 6px #021629aa!important;
}
/* Stronger original HB34 green CTA, still dark enough behind white labels. */
body .btn.btn-green {
  background:linear-gradient(180deg,#098125 0%,#076a18 62%,#01500b 100%)!important;
  color:#fff!important;
  border:2px solid #88f56e!important;
  box-shadow:inset 0 3px 0 #40e83e,0 7px 18px #003d1550!important;
  text-shadow:0 1px 3px #002509aa!important;
}
body .btn.btn-green:hover {
  background:linear-gradient(180deg,#0a8b20 0%,#076b14 60%,#02480b 100%)!important;
}
/* Reference: saturated burgundy steps band with a crisp red mid-tone. */
body .steps-band {
  background:linear-gradient(110deg,#830017 0%,#bf0c2a 49%,#760012 100%)!important;
  border-top-color:#f3c37e!important;
  border-bottom-color:#dca66d!important;
}
@media (prefers-reduced-motion:reduce) {
 body .btn.btn-green {transition:none!important}
}