/* ============================================================
   SANO | Patients Hero — .sano-phero
   Container-query driven. No outer padding: spacing lives on
   the dnd section. space_below is the one opt-in exception.
   ============================================================ */

.sano-phero{
  container-type: inline-size;
  container-name: sano-phero;

  --ph-max: 1140px;
  --ph-h1-max: 52px;
  --ph-h1-min: 36px;
  --ph-avatar-h: 34px;
  --ph-img-max: 470px;
  --ph-img-shift: 0px;
  --ph-space-below: 0px;

  --ph-ink:#0B1B2B;
  --ph-ink-2:#5A6472;
  --ph-accent:#3B2FB5;
  --ph-accent-hover:#31269A;
  --ph-btn-fg:#FFFFFF;
  --ph-ghost-line:#0B1B2B;
  --ph-ghost-hover:#F2F3F7;

  --ease-soft:cubic-bezier(.33,1,.68,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --dur-in:1000ms;
  --dur-hover:280ms;

  padding-bottom:var(--ph-space-below);
}
.sano-phero *,
.sano-phero *::before,
.sano-phero *::after{ box-sizing:border-box; }

.sano-phero__wrap{
  max-width:var(--ph-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px 64px;
  align-items:center;
}

.sano-phero__col{ max-width:540px; }

/* ---------- heading ---------- */
.sano-phero__h1{
  margin:0;
  font-size:clamp(var(--ph-h1-min), 4.6cqi, var(--ph-h1-max));
  line-height:1.1;
  font-weight:400;
  letter-spacing:-.028em;
  color:var(--ph-ink);
  text-wrap:balance;
}
.sano-phero__hl{ font-weight:700; color:inherit; }
/* HubSpot's minifier eats the space before an inline tag, so
   "Discover <b>research" renders as "Discoverresearch". */
.sano-phero__hl::before{ content:" "; }

.sano-phero__sub{
  margin:20px 0 0;
  font-size:17px; line-height:1.55;
  color:var(--ph-ink-2);
  max-width:44ch;
}

/* ---------- buttons ---------- */
.sano-phero__actions{
  margin:32px 0 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
}

.sano-phero__btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:inherit; font-size:16px; font-weight:600; line-height:1;
  padding:15px 30px; border-radius:999px;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  border:1px solid transparent;
  transition:background var(--dur-hover) var(--ease-out),
             border-color var(--dur-hover) var(--ease-out),
             color var(--dur-hover) var(--ease-out),
             transform var(--dur-hover) var(--ease-out);
}
.sano-phero__btn--primary{ background:var(--ph-accent); color:var(--ph-btn-fg); }
/* Outlined in near-black, not in the brand purple: two purple
   buttons side by side compete for the same click. */
.sano-phero__btn--ghost{
  background:transparent;
  color:var(--ph-ink);
  border-color:var(--ph-ghost-line);
}
.sano-phero__btn:active{ transform:scale(.99); }

/* ---------- trust ---------- */
.sano-phero__trust{
  margin:34px 0 0;
  display:flex; align-items:center; gap:13px;
}
.sano-phero__faces{ flex:none; line-height:0; }
.sano-phero__faces img{
  display:block;
  height:var(--ph-avatar-h);
  width:auto;
  max-width:100%;
}
.sano-phero__trust-t{
  margin:0;
  font-size:15px; line-height:1.4;
  max-width:30ch;
}
/* Two lines on purpose: the number is the line you can read from
   across the room, the rest is the caption under it. */
.sano-phero__trust-strong{
  display:block;
  font-weight:700;
  color:var(--ph-ink);
}
.sano-phero__trust-rest{
  display:block;
  font-weight:400;
  color:var(--ph-ink-2);
}

/* ---------- art ---------- */
.sano-phero__art{
  display:flex; align-items:center; justify-content:center;
  align-self:center;
  transform:translateY(var(--ph-img-shift));
}
.sano-phero__art img{
  display:block;
  width:100%; max-width:var(--ph-img-max);
  height:auto;
}

/* ---------- hover, gated behind a real pointer ---------- */
@media (hover:hover) and (pointer:fine){
  .sano-phero__btn--primary:hover{
    background:var(--ph-accent-hover);
    transform:translateY(-1px) scale(1.02);
  }
  /* A light grey wash, not a black fill: filled black next to the
     purple primary read as a second primary. */
  .sano-phero__btn--ghost:hover{
    background:var(--ph-ghost-hover);
    border-color:var(--ph-ghost-line);
    color:var(--ph-ink);
  }
}

/* ---------- load cascade ----------
   Above the fold, so keyframes rather than JS: nothing to fail,
   and no observer that never fires. `backwards`, not `both` —
   `both` pins the last frame and a later :hover transform can
   never override it.
------------------------------------ */
@keyframes sano-phero-up{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:none; }
}
@keyframes sano-phero-in{
  from{ opacity:0; transform:translateY(calc(var(--ph-img-shift) + 16px)) scale(.985); }
  to{ opacity:1; transform:translateY(var(--ph-img-shift)); }
}

.sano-phero__h1,
.sano-phero__sub,
.sano-phero__actions,
.sano-phero__trust{
  animation:sano-phero-up var(--dur-in) var(--ease-soft) backwards;
}
.sano-phero__h1{ animation-delay:0ms; }
.sano-phero__sub{ animation-delay:120ms; }
.sano-phero__actions{ animation-delay:320ms; }
.sano-phero__trust{ animation-delay:440ms; }

.sano-phero__art{
  animation:sano-phero-in var(--dur-in) var(--ease-soft) 200ms backwards;
}

/* ---------- container queries ---------- */
@container sano-phero (max-width: 900px){
  .sano-phero__wrap{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .sano-phero__col{ max-width:none; }
  .sano-phero__art{ transform:none; }
  .sano-phero__art img{ max-width:min(100%, var(--ph-img-max)); margin:0 auto; }
}
@container sano-phero (max-width: 520px){
  .sano-phero__sub{ font-size:16px; }
  .sano-phero__actions{ margin-top:26px; }
  .sano-phero__btn{ flex:1 1 auto; padding:14px 24px; }
  .sano-phero__trust{ margin-top:28px; gap:12px; }
}

/* ---------- fallback where container queries are unsupported ---------- */
@supports not (container-type: inline-size){
  @media (max-width: 900px){
    .sano-phero__wrap{ grid-template-columns:minmax(0,1fr); gap:40px; }
    .sano-phero__col{ max-width:none; }
    .sano-phero__art{ transform:none; }
    .sano-phero__art img{ max-width:min(100%, var(--ph-img-max)); margin:0 auto; }
  }
  @media (max-width: 520px){
    .sano-phero__sub{ font-size:16px; }
    .sano-phero__actions{ margin-top:26px; }
    .sano-phero__btn{ flex:1 1 auto; padding:14px 24px; }
    .sano-phero__trust{ margin-top:28px; gap:12px; }
  }
}

/* ---------- reduced motion: zero the tokens ---------- */
@media (prefers-reduced-motion: reduce){
  .sano-phero{ --dur-in:1ms; --dur-hover:1ms; }
  .sano-phero__h1,
  .sano-phero__sub,
  .sano-phero__actions,
  .sano-phero__trust{ animation:none; opacity:1; transform:none; }
  .sano-phero__art{ animation:none; opacity:1; }
}