/* 4.8: independently selectable VISUAL treatments of the existing hero help copy.
   No copy, identity, CTA destinations, hero variant or global palette changes. */
.oko46-hero .oko48-help{
  box-sizing:border-box;position:relative;z-index:3;
  max-width:min(100%,540px);margin-top:21px;
  min-height:0;width:fit-content;
}
.oko46-hero .oko48-help .oko48-help-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.oko46-hero .oko48-help .oko48-help-copy strong{display:block;margin:0;max-width:100%;font-family:'Poppins',sans-serif;letter-spacing:-.017em}
.oko46-hero .oko48-help .oko48-help-copy a{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;max-width:100%;text-decoration:none;white-space:normal}
.oko46-hero .oko48-help .oko48-help-copy a:hover{text-decoration:underline;text-underline-offset:4px}
.oko46-hero .oko48-help .oko48-help-arrow{display:inline-block;color:#005550;line-height:1;font-size:.98rem;transition:transform .2s ease}
.oko46-hero .oko48-help .oko48-help-copy a:hover .oko48-help-arrow{transform:translate(2px,-2px)}
.oko46-hero .oko48-help .oko48-help-symbol{display:none;width:42px;height:42px;flex:0 0 42px;align-items:center;justify-content:center;border-radius:44% 56% 54% 46% / 56% 43% 57% 44%;background:#BCEBE9;color:#005550}
.oko46-hero .oko48-help .oko48-help-symbol svg{width:22px;height:22px;display:block}
.oko46-hero .oko48-help .oko48-help-end{display:none;color:#005550}

/* A: Retains the already-approved, restrained vertical rule. */
.oko46-hero .oko48-help--line{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  background:transparent!important;border:0;border-left:2px solid #005550;
  border-radius:0;box-shadow:none!important;padding:1px 0 2px 13px;
}
.oko46-hero .oko48-help--line .oko48-help-copy strong{font-size:.9rem;font-weight:650;line-height:1.45}
.oko46-hero .oko48-help--line .oko48-help-copy a{font-size:.85rem;font-weight:500;line-height:1.48}

/* B: A compact horizontal notice with a proper conversational icon. */
.oko46-hero .oko48-help--ribbon{
  display:flex;flex-direction:row;align-items:center;gap:13px;
  background:#fff!important;border:1px solid rgba(0,85,80,.17)!important;
  border-radius:16px;padding:13px 16px;box-shadow:0 10px 24px rgba(0,85,80,.055)!important;
  width:100%;max-width:530px;
}
.oko46-hero .oko48-help--ribbon .oko48-help-symbol{display:flex}
.oko46-hero .oko48-help--ribbon .oko48-help-copy{flex:1}
.oko46-hero .oko48-help--ribbon .oko48-help-copy strong{font-size:.91rem;font-weight:650;line-height:1.35}
.oko46-hero .oko48-help--ribbon .oko48-help-copy a{font-size:.79rem;line-height:1.45;color:#52665f}
.oko46-hero .oko48-help--ribbon .oko48-help-arrow{display:none}
.oko46-hero .oko48-help--ribbon .oko48-help-end{display:flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:#BCEBE9;font-size:1.05rem}
.oko46-hero .oko48-help--ribbon:hover{border-color:rgba(0,85,80,.38)!important;box-shadow:0 15px 32px rgba(0,85,80,.10)!important}

/* C: Editorial marginal note - no filled container at all. */
.oko46-hero .oko48-help--editorial{
  display:block;width:fit-content;max-width:500px;
  border:0!important;border-top:1px solid rgba(0,85,80,.45)!important;
  padding:13px 0 0;background:transparent!important;border-radius:0;box-shadow:none!important;
}
.oko46-hero .oko48-help--editorial .oko48-help-copy{gap:6px}
.oko46-hero .oko48-help--editorial .oko48-help-copy strong{
  font-family:Georgia,serif;font-style:italic;font-size:clamp(1.08rem,1.35vw,1.3rem);
  line-height:1.38;font-weight:400;letter-spacing:-.02em;color:#005550;
}
.oko46-hero .oko48-help--editorial .oko48-help-copy a{font-size:.84rem;font-weight:550;color:#222222}

/* D: A small handwritten-style note in the whitespace above the two portraits. */
.oko46-hero .hero-visual .oko48-help--photo{
  display:flex;flex-direction:row;gap:10px;align-items:center;
  position:absolute;top:2%;right:-1%;left:auto;bottom:auto;margin:0;
  max-width:min(47%,272px);width:fit-content;min-width:210px;
  background:#fff!important;border:1px solid rgba(0,85,80,.22)!important;
  border-radius:16px;padding:12px 14px;box-shadow:0 14px 30px rgba(0,85,80,.09)!important;
  transform:rotate(1.5deg);z-index:8;
}
.oko46-hero .hero-visual .oko48-help--photo .oko48-help-symbol{display:flex;width:31px;height:31px;flex:0 0 31px;border-radius:50%;background:#FFF4D8}
.oko46-hero .hero-visual .oko48-help--photo .oko48-help-symbol svg{width:17px;height:17px}
.oko46-hero .hero-visual .oko48-help--photo .oko48-help-copy strong{font-size:.78rem;font-weight:650;line-height:1.35}
.oko46-hero .hero-visual .oko48-help--photo .oko48-help-copy a{font-size:.69rem;line-height:1.35}
.oko46-hero .hero-visual .oko48-help--photo .oko48-help-arrow{font-size:.79rem}

/* E: Functional two-part strip - copy on left, arrow separated by an outline. */
.oko46-hero .oko48-help--split{
  display:flex;flex-direction:row;align-items:center;gap:18px;
  width:100%;max-width:520px;padding:15px 0 12px;
  border:0!important;border-top:1px solid rgba(0,85,80,.24)!important;
  border-bottom:1px solid rgba(0,85,80,.24)!important;
  background:transparent!important;border-radius:0;box-shadow:none!important;
}
.oko46-hero .oko48-help--split .oko48-help-copy{flex:1;gap:5px}
.oko46-hero .oko48-help--split .oko48-help-copy strong{font-size:.9rem;font-weight:650;line-height:1.4}
.oko46-hero .oko48-help--split .oko48-help-copy a{font-size:.8rem;color:#52665f;line-height:1.5}
.oko46-hero .oko48-help--split .oko48-help-arrow{display:none}
.oko46-hero .oko48-help--split .oko48-help-end{display:flex;align-items:center;justify-content:center;border:1px solid #A1DFE1;background:#BCEBE9;width:46px;height:46px;flex:0 0 46px;border-radius:50%;font-size:1.15rem}
.oko46-hero .oko48-help--split:hover .oko48-help-end{background:#A1DFE1}

@media(max-width:1024px){
  .oko46-hero .hero-visual .oko48-help--photo{max-width:48%;min-width:170px;top:-5px;right:0;padding:10px}
  .oko46-hero .hero-visual .oko48-help--photo .oko48-help-symbol{display:none}
}
@media(max-width:850px){
  /* On mobile the photo note is in the document flow, not over anyone's face. */
  .oko46-hero .hero-visual .oko48-help--photo{
    position:relative;top:auto;right:auto;bottom:auto;left:auto;transform:none;
    max-width:100%;width:100%;min-width:0;margin-top:12px;padding:12px 14px;
    box-shadow:none!important;
  }
  .oko46-hero .hero-visual .oko48-help--photo .oko48-help-symbol{display:flex}
  .oko46-hero .hero-visual .oko48-help--photo .oko48-help-copy strong{font-size:.89rem}
  .oko46-hero .hero-visual .oko48-help--photo .oko48-help-copy a{font-size:.79rem}
  .oko46-hero .oko48-help--ribbon{padding:12px 14px}
}
@media(max-width:430px){
  .oko46-hero .oko48-help{margin-top:16px}
  .oko46-hero .oko48-help--ribbon{gap:10px;padding:11px 12px}
  .oko46-hero .oko48-help--ribbon .oko48-help-symbol{flex-basis:36px;width:36px;height:36px}
  .oko46-hero .oko48-help--ribbon .oko48-help-end{width:30px;height:30px;flex-basis:30px}
  .oko46-hero .oko48-help--ribbon .oko48-help-copy strong{font-size:.82rem}
  .oko46-hero .oko48-help--ribbon .oko48-help-copy a{font-size:.74rem}
  .oko46-hero .oko48-help--split{gap:12px}
  .oko46-hero .oko48-help--split .oko48-help-end{width:40px;height:40px;flex-basis:40px}
}
@media(prefers-reduced-motion:reduce){.oko46-hero .oko48-help *{transition:none!important}}