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

  /* ---- MOTION TOKENS ---- */
  --ease-soft:  cubic-bezier(0.33, 1, 0.68, 1);
  --ease-pulse: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-reveal: 1000ms;
  --stagger: 120ms;

  /* ---- HIGHLIGHT SEQUENCE — the five numbers to tune ---- */
  --hl-start: 1200ms;
  --hl-step: 650ms;
  --hl-dur: 1000ms;
  --hl-pause: 350ms;
  --hl-settle: 1600ms;

  /* ---- TYPOGRAPHY — replace "inherit" with the theme font ---- */
  --htext-heading-font: inherit;
  --htext-sub-font: inherit;

  /* ---- FALLBACK COLOURS ---- */
  --htext-title-color: #0B1B2B;
  --htext-muted-color: #939B9F;
  --htext-sub-color: #5A6472;
  --htext-heading-max: 900px;
  --htext-sub-max: 760px;

  padding-inline: 24px;
  text-align: var(--htext-align, center);
}

.sano-htext__heading {
  max-width: var(--htext-heading-max);
  margin: 0;
  margin-inline: var(--htext-margin, auto);
  font-family: var(--htext-heading-font);
  color: var(--htext-title-color);
  font-size: clamp(2rem, 5.2cqi, 3rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  animation: sanoFadeUp var(--dur-reveal) var(--ease-soft) both;
}

/* Belt and braces with the inline attribute: whichever arrives
   first, the heading is never painted in the title colour. */
.sano-htext__heading.has-highlights { color: var(--htext-muted-color); }

.sano-htext__sub {
  max-width: var(--htext-sub-max);
  margin-block: clamp(16px, 2cqi, 24px) 0;
  margin-inline: var(--htext-margin, auto);
  font-family: var(--htext-sub-font);
  color: var(--htext-sub-color);
  font-size: clamp(1rem, 1.75cqi, 1.1875rem);
  line-height: 1.55;
  text-wrap: pretty;
  animation: sanoFadeUp var(--dur-reveal) var(--ease-soft) var(--stagger) backwards;
}

@keyframes sanoFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ---- HIGHLIGHT SEQUENCE -----------------------------------
   Each marked phrase lights up and drops back to grey. When the
   last one has returned, the line sits grey for a beat, then the
   whole sentence drifts to black.
----------------------------------------------------------- */
.sano-htext__heading.has-highlights {
  animation:
    sanoFadeUp var(--dur-reveal) var(--ease-soft) both,
    sanoHlSettle var(--hl-settle) var(--ease-pulse)
      calc(var(--hl-start) + var(--hl-step) * (var(--hl-count) - 1) + var(--hl-dur) + var(--hl-pause))
      forwards;
}

.sano-htext__hl {
  color: inherit;
  animation: sanoHlOn var(--hl-dur) var(--ease-pulse)
             calc(var(--hl-start) + var(--h, 0) * var(--hl-step));
}

/* HubSpot's minifier strips the space that sits right before an
   inline tag. This puts it back; a surviving one collapses with it. */
.sano-htext__hl::before { content: " "; }

@keyframes sanoHlOn {
  0%   { color: var(--htext-muted-color); }
  35%  { color: var(--htext-title-color); }
  65%  { color: var(--htext-title-color); }
  100% { color: var(--htext-muted-color); }
}

@keyframes sanoHlSettle {
  from { color: var(--htext-muted-color); }
  to   { color: var(--htext-title-color); }
}

/* ---- NARROW: NO HIGHLIGHT SEQUENCE ------------------------
   On a phone the heading wraps to four or five lines and the
   grey-to-black pulse reads as a fault, not as an effect. Below
   this width the whole sequence is switched off and the heading
   is painted in the title colour from the very first frame.
   The fade-up entrance stays.

   !important is required here. The HTML panel prints the muted
   colour as an inline style attribute on the <h1>, and an inline
   style beats every normal declaration in a stylesheet — only
   !important outranks it.

   ONE NUMBER TO TUNE: the 700px below, and the same 700px in the
   @supports fallback at the very bottom of this file. Raise it to
   turn the effect off on tablets too; lower it to keep the effect
   on large phones.
----------------------------------------------------------- */
@container sano-htext (max-width: 700px) {
  .sano-htext__heading.has-highlights {
    color: var(--htext-title-color) !important;
    animation: sanoFadeUp var(--dur-reveal) var(--ease-soft) both;
  }

  .sano-htext__hl { animation: none; }
}

/* ---- REDUCED MOTION ---------------------------------------
   Same !important reasoning as above: without it the inline grey
   survives and the heading stays muted permanently, because there
   is no longer an animation running to paint it black.
----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  @keyframes sanoFadeUp {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .sano-htext__heading,
  .sano-htext__sub { animation-duration: 400ms; }

  .sano-htext__heading.has-highlights {
    animation: none;
    color: var(--htext-title-color) !important;
  }

  .sano-htext__hl { animation: none; }
}

@supports not (container-type: inline-size) {
  .sano-htext__heading { font-size: clamp(2rem, 1.2rem + 3.4vw, 3rem); }
  .sano-htext__sub { font-size: clamp(1rem, .95rem + .35vw, 1.1875rem); }

  @media (max-width: 700px) {
    .sano-htext__heading.has-highlights {
      color: var(--htext-title-color) !important;
      animation: sanoFadeUp var(--dur-reveal) var(--ease-soft) both;
    }

    .sano-htext__hl { animation: none; }
  }
}