/* Dual Indication Hero
 * Split hero with two indication panels that expand on hover.
 * 1280x800 viewport, Poppins font.
 */

.dual-indication-hero {
  display: grid;
  grid-template-columns: 7fr 4fr;
  width: 100%;
  min-height: calc(100vh - 50px);
  position: relative;
  overflow: hidden;

  transition: grid-template-columns 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover/focus: swap columns when FCS is hovered or focused */
.dual-indication-hero:has(.dual-indication-hero__panel--fcs:hover),
.dual-indication-hero:has(.dual-indication-hero__panel--fcs:focus) {
  grid-template-columns: 4fr 7fr;
}

/* ---- Panels ---- */

.dual-indication-hero__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding: 40px 0;
}

/* sHTG panel: 2-column grid keeps the text content in the right half,
   over the full-bleed background image. */
.dual-indication-hero__panel--shtg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  align-content: center;
}

.dual-indication-hero__panel--shtg .dual-indication-hero__content {
  grid-column: 2;
}

/* ---- Backgrounds ---- */

.dual-indication-hero__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 70vw;
  z-index: 0;
  transition: left 1s cubic-bezier(0.4, 0, 0.2, 1), right 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.dual-indication-hero__panel--shtg .dual-indication-hero__bg {
  right: 0;
}

.dual-indication-hero__panel--fcs .dual-indication-hero__bg {
  left: -25vw;
}

.dual-indication-hero__panel--fcs .dual-indication-hero__cta-text {
  max-width: 193px;
  width: 100%;
}

.dual-indication-hero:hover .dual-indication-hero__panel--fcs:hover .dual-indication-hero__bg,
.dual-indication-hero:focus-within .dual-indication-hero__panel--fcs:focus .dual-indication-hero__bg {
  left: 0;
}

.dual-indication-hero__bg--fcs {
  background: linear-gradient(180deg, rgba(79, 8, 176, 1) 4%, rgba(33, 3, 74, 1) 60%, #000 100%);
}

.dual-indication-hero__bg-image {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  opacity: 0.6;
  transition: opacity 0.5s ease;

  @media (max-aspect-ratio: 2/1) {
    top: 0;
    right: 0;
    width: 100%;
    height: 106% !important; /* 106% to account for the transparent strip at the bottom of the image */
    object-fit: cover;
    transform: none;
  }
}

.dual-indication-hero:hover .dual-indication-hero__panel--fcs:hover .dual-indication-hero__bg-image,
.dual-indication-hero:focus-within .dual-indication-hero__panel--fcs:focus .dual-indication-hero__bg-image {
  opacity: 1;

  @media (max-aspect-ratio: 2/1) {
    object-position: center right;
  }
}

.dual-indication-hero__bg--shtg {
  background: url('shtg-home-image.png') no-repeat center / cover;
}

/* ---- Scrim overlays (shown on non-hovered panel) ---- */

.dual-indication-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.dual-indication-hero__scrim--fcs {
  background: rgba(79, 8, 176, 0.2);
  opacity: 1;
}

.dual-indication-hero__scrim--shtg {
  background: rgba(216, 216, 255, 0.25);
}

/* Show scrim on non-hovered/non-focused panel */
.dual-indication-hero:hover .dual-indication-hero__panel:not(:hover) .dual-indication-hero__scrim,
.dual-indication-hero:focus-within .dual-indication-hero__panel:not(:focus) .dual-indication-hero__scrim {
  opacity: 1;
}

/* Hide FCS scrim when FCS is hovered or focused */
.dual-indication-hero:hover .dual-indication-hero__panel--fcs:hover .dual-indication-hero__scrim,
.dual-indication-hero:focus-within .dual-indication-hero__panel--fcs:focus .dual-indication-hero__scrim {
  opacity: 0;
}

/* ---- Content ---- */

.dual-indication-hero__content {
  position: relative;
  z-index: 2;
  padding: 0 40px;
  width: 420px;
  max-width: 100%;
  transition: opacity 0.5s ease, transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* sHTG content: no translateX needed, grid column handles position */

/* FCS content dimmed by default (starts collapsed). Left-align it so its text
   sits at panel-left + 40px — the same offset as the FCS disclaimer — in both
   the collapsed and expanded states. (Centering + a translateX nudge used to
   land the expanded copy ~28px right of the disclaimer.) With flex-start the
   copy tracks the panel's left edge as it expands, so no transform is needed. */
.dual-indication-hero__panel--fcs .dual-indication-hero__content {
  align-self: flex-start;
  opacity: 0.66;
}

/* Dim non-hovered/non-focused panel content */
.dual-indication-hero:hover .dual-indication-hero__panel:not(:hover) .dual-indication-hero__content,
.dual-indication-hero:focus-within .dual-indication-hero__panel:not(:focus) .dual-indication-hero__content {
  opacity: 0.66;
  transition: opacity 0.5s ease;
}

/* Full opacity on hovered or focused panel */
.dual-indication-hero:hover .dual-indication-hero__panel:hover .dual-indication-hero__content,
.dual-indication-hero:focus-within .dual-indication-hero__panel:focus .dual-indication-hero__content {
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* ---- Typography ---- */

.dual-indication-hero {
  p.dual-indication-hero__eyebrow {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    /* Fluid: 14px → 11.2px (20% smaller) across ~1490–1025px. */
    font-size: clamp(0.7rem, 0.31rem + 0.6vw, 0.875rem);
    line-height: 1.57;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin: 0 0 8px;
  }

  .dual-indication-hero__panel--fcs .dual-indication-hero__eyebrow {
    color: #fff;
  }

  .dual-indication-hero__panel--shtg .dual-indication-hero__eyebrow {
    color: #4f08b0;
  }

  p.dual-indication-hero__subheading {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    /* Fluid: 20px → 16px (20% smaller) across ~1490–1025px. */
    font-size: clamp(1rem, 0.45rem + 0.86vw, 1.25rem);
    line-height: 1.1;
    color: #4f08b0;
    margin: 0 0 4px;
  }

  .dual-indication-hero__heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    /* Fluid heading: shrinks from 40px down to 32px (20% smaller) between the
       ~1490px and ~1025px widths where the split columns get tight. Shared rule,
       so both the FCS and sHTG headings stay matched. */
    font-size: clamp(2rem, 0.9rem + 1.72vw, 2.5rem);
    line-height: 1em;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0 0 20px;
  }

  .dual-indication-hero__panel--fcs .dual-indication-hero__heading {
    color: #fff;
  }

  .dual-indication-hero__heading--shtg {
    color: #4f08b0;
  }
}


/* ---- CTA Buttons ---- */

.dual-indication-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 24px;
  border-radius: 120px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  /* Fluid: 16px → 12.8px (20% smaller) across ~1490–1025px. */
  font-size: clamp(0.8rem, 0.36rem + 0.69vw, 1rem);
  line-height: 1.25;
  text-decoration: none;
  transition: transform 0.3s ease, background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

/* Outline styles per panel background */
.dual-indication-hero__cta--fcs {
  border: 1px solid #fff;
  color: #fff;
  background: transparent;
}

.dual-indication-hero__cta--shtg {
  border: 1px solid #4f08b0;
  color: #4f08b0;
  background: transparent;
}

/* Active sHTG panel gets a solid purple CTA (FCS keeps the orange gradient) */
.dual-indication-hero__panel--shtg .dual-indication-hero__cta {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(180deg, #4f08b0 3.68%, #21034a 100%);;
}

.dual-indication-hero:hover .dual-indication-hero__panel:hover .dual-indication-hero__cta,
.dual-indication-hero:focus-within .dual-indication-hero__panel:focus .dual-indication-hero__cta {
  border-color: transparent;
  color: #000;
  background: linear-gradient(177deg, rgba(250, 189, 38, 1) 0%, rgba(250, 120, 33, 1) 100%) border-box;
}

/* Keep the sHTG CTA's purple gradient even when its panel is the active
   (hovered/focused) one — the generic orange-brighten rule above would otherwise
   take over, and a flat fill loses the gradient. */
.dual-indication-hero:hover .dual-indication-hero__panel--shtg:hover .dual-indication-hero__cta,
.dual-indication-hero:focus-within .dual-indication-hero__panel--shtg:focus .dual-indication-hero__cta {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(180deg, #4f08b0 3.68%, #21034a 100%);
}

/* Inactive panel reverts to outline */
.dual-indication-hero:hover .dual-indication-hero__panel--shtg:not(:hover) .dual-indication-hero__cta,
.dual-indication-hero:focus-within .dual-indication-hero__panel--shtg:not(:focus) .dual-indication-hero__cta {
  border-color: #4f08b0;
  color: #4f08b0;
  background: transparent;
}

/* Nudge the CTA on hover only for FCS. On the sHTG CTA the shift moved the
   button out from under the cursor near its edge, toggling :hover and flickering
   between the resting and hover gradients. FCS keeps the nudge (its resting and
   hover fills match, so no flicker). */
.dual-indication-hero__panel--fcs:hover .dual-indication-hero__cta,
.dual-indication-hero__panel--fcs:focus .dual-indication-hero__cta {
  transform: translateX(4px);
}

.dual-indication-hero:hover .dual-indication-hero__panel:hover .dual-indication-hero__cta:hover,
.dual-indication-hero:focus-within .dual-indication-hero__panel:focus .dual-indication-hero__cta:focus-visible,
.dual-indication-hero__panel--fcs .dual-indication-hero__cta:hover,
.dual-indication-hero__panel--fcs .dual-indication-hero__cta:focus-visible {
  background: linear-gradient(94deg, #fabd26 39.5%, #fa7821 110%);
}

/* sHTG CTA on direct hover/focus: the same purple gradient flipped 180deg
   (0deg) so the dark stop moves to the top (overrides the orange brighten rule
   above for the sHTG panel). */
.dual-indication-hero__panel--shtg .dual-indication-hero__cta:hover,
.dual-indication-hero__panel--shtg .dual-indication-hero__cta:focus-visible,
.dual-indication-hero:hover .dual-indication-hero__panel--shtg:hover .dual-indication-hero__cta:hover,
.dual-indication-hero:focus-within .dual-indication-hero__panel--shtg:focus .dual-indication-hero__cta:focus-visible {
  background: linear-gradient(0deg, #4f08b0 3.68%, #21034a 100%);
}

@keyframes pulse-fcs {
  0%, 36%, 81%, 100% {
    box-shadow: 0 0 0 0 rgba(212, 198, 233, 0),
    0 0 0 0 rgba(212, 198, 233, 0);
  }

  25%, 60% {
    box-shadow: 0 0 0 5px rgba(212, 198, 233, 0.9),
    0 0 0 11px rgba(212, 198, 233, 0.28);
  }

  35%, 70% {
    box-shadow: 0 0 0 8px rgba(212, 198, 233, 0.08),
    0 0 0 16px rgba(212, 198, 233, 0.03);
  }
}

@keyframes pulse-shtg {
  0%, 36%, 81%, 100% {
    box-shadow: 0 0 0 0 rgba(79, 8, 176, 0),
    0 0 0 0 rgba(79, 8, 176, 0);
  }

  25%, 60% {
    box-shadow: 0 0 0 5px rgba(79, 8, 176, 0.30),
    0 0 0 11px rgba(79, 8, 176, 0.10);
  }

  35%, 70% {
    box-shadow: 0 0 0 8px rgba(79, 8, 176, 0.08),
    0 0 0 16px rgba(79, 8, 176, 0.03);
  }
}

.dual-indication-hero__cta--shtg {
  animation: pulse-shtg 4s infinite;
}

.dual-indication-hero__cta--fcs {
  animation: pulse-fcs 4s infinite;
}

.dual-indication-hero__cta-arrow {
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .dual-indication-hero__cta--shtg,
  .dual-indication-hero__cta--fcs {
    animation: none !important;
  }
}

/* ---- Disclaimer ---- */

.dual-indication-hero__disclaimer p {
  position: absolute;
  bottom: 40px;
  left: 40px;
  z-index: 2;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400 !important;
  font-size: 9px !important;
  line-height: 1.58 !important;
  color: #fff !important;
  margin: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.dual-indication-hero__panel--fcs:hover .dual-indication-hero__disclaimer p,
.dual-indication-hero__panel--fcs:focus .dual-indication-hero__disclaimer p {
  opacity: 1;
}

/* "Actor portrayal." for the sHTG photo (the woman is an actor).
   Bottom-left on desktop, bottom-right on mobile. Shown only while sHTG is the
   active section, mirroring the FCS disclaimer (which shows only when FCS is
   active) — see the hide rule below. */
.dual-indication-hero__actor-portrayal {
  position: absolute;
  bottom: 20%;
  left: 14%;
  z-index: 2;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 9px;
  line-height: 1.58;
  color: #fff;
  transition: opacity 0.5s ease;
}

/* Hide the sHTG actor label when FCS is the active (expanded) section — same
   trigger as the column swap above. */
@media (min-width: 1025px) {
  .dual-indication-hero:has(.dual-indication-hero__panel--fcs:hover) .dual-indication-hero__actor-portrayal,
  .dual-indication-hero:has(.dual-indication-hero__panel--fcs:focus) .dual-indication-hero__actor-portrayal {
    opacity: 0;
  }
}

/* On wide viewports the photo subject sits lower, so drop the disclaimer down */
@media (min-width: 1300px) {
  .dual-indication-hero__actor-portrayal,
  .dual-indication-hero__disclaimer p {
    bottom: 24%;
  }
}

/* ---- Canvas Edit Mode ---- */

body.path-canvas .dual-indication-hero {
  grid-template-columns: 7fr 4fr;
  transition: none;
}

body.path-canvas .dual-indication-hero__scrim {
  opacity: 0;
}

body.path-canvas .dual-indication-hero__content {
  opacity: 1;
}

body.path-canvas .dual-indication-hero__disclaimer p {
  opacity: 1;
}

/* ---- Responsive ---- */

/* Narrow-desktop window (1025–1490px): the split layout is still active, but the
   collapsed FCS column (30%) is narrower than the fixed 420px content box, so its
   copy clips. Let the FCS content shrink to fit its column here; it expands back
   to full width once FCS becomes the active (70%) panel. */
@media (min-width: 1025px) and (max-width: 1490px) {
  .dual-indication-hero__panel--fcs .dual-indication-hero__content {
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 1024px) {
  .dual-indication-hero {
    grid-template-columns: 1fr;
    /* TRYN-1087 hybrid sizing (mirrors the patient site): fill the space the
       static header and the fixed ISI drawer don't cover. dual-indication-hero.js
       publishes the real viewport, header and ISI heights as custom properties;
       this falls back to 100svh (header/ISI = 0) when JS hasn't run (Canvas
       editor / no-JS). It's min-height (not height), so content taller than the
       available space grows the hero and the page scrolls — nothing is clipped.
       The ISI component itself is never touched; the clearance the patient site
       gets from the ISI's `bottom:-55px` is applied on the hero side instead
       (see ISI_SAFE_MARGIN in dual-indication-hero.js). Two equal rows on
       mobile/tablet; reverts to content-sized rows on short viewports (<=730px)
       below so both banners + the FCS CTA fit above the ISI. */
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: auto;
    min-height: calc(var(--dih-vh, 100svh) - var(--dih-header, 0px) - var(--dih-isi, 0px));
    transition: none;
  }

  .dual-indication-hero:has(.dual-indication-hero__panel--fcs:hover),
  .dual-indication-hero:has(.dual-indication-hero__panel--fcs:focus) {
    grid-template-columns: 1fr;
  }

  .dual-indication-hero__panel {
    /* Let the 1fr rows drive panel height; compact the vertical padding fluidly. */
    min-height: 0;
    align-items: flex-start;
    padding-block: clamp(10px, 3vw, 40px);
  }

  .dual-indication-hero__panel--fcs {
    /*min-height: auto;*/
  }

  .dual-indication-hero__content {
    /*margin-top: 20%;*/
    padding-bottom: 1rem;
  }

  .dual-indication-hero__panel--shtg {
    grid-template-columns: 1fr;
    overflow: hidden;
    padding-bottom: 0px;
    /* A bit taller than its content so the sHTG band reads larger than the
       compact FCS band that sits above the ISI peek. */
    min-height: clamp(185px, 24vh, 280px);
  }

  .dual-indication-hero__panel--shtg .dual-indication-hero__content {
    max-width: 75%;
  }

  .dual-indication-hero__cta {
    font-size: clamp(12px, 3vw, 14px);
    padding: clamp(6px, 1.5vw, 10px) clamp(14px, 4vw, 20px);
    gap: 10px;
    line-height: 1.1;
  }

  .dual-indication-hero__bg,
  .dual-indication-hero__panel--fcs .dual-indication-hero__bg {
    width: 100%;
    left: 0;
    right: 0;
    transition: none;
  }


  .dual-indication-hero__content {
    width: auto;
    max-width: 100%;
  }

  .dual-indication-hero__content {
    width: auto;
    max-width: 100%;
  }

  /* TRYN-1087 (tryn_nxt): fluid compaction. Strip the inter-text spacing on short
     viewports so both banners + the FCS CTA sit above the fixed ISI peek. */
  .dual-indication-hero__content {
    padding-inline: clamp(24px, 5vw, 40px);
  }

  .dual-indication-hero p.dual-indication-hero__eyebrow {
    font-size: clamp(11px, 3vw, 14px);
    margin-bottom: clamp(2px, 0.6vw, 6px);
  }

  .dual-indication-hero p.dual-indication-hero__subheading {
    font-size: clamp(13px, 3.5vw, 16px);
    margin-bottom: clamp(2px, 0.6vw, 6px);
  }

  .dual-indication-hero .dual-indication-hero__heading {
    font-size: clamp(18px, 5.2vw, 32px);
    line-height: 1.0;
    margin-bottom: clamp(3px, 1vw, 12px);
  }

  .dual-indication-hero__disclaimer p {
    opacity: 1;
    position: relative;
    bottom: auto;
    left: auto;
    padding: 20px 40px 0;
  }

  .dual-indication-hero__panel--fcs .dual-indication-hero__content {
    opacity: 1;
    transform: none;
    max-width: 330px;
  }

  .dual-indication-hero__panel--fcs .dual-indication-hero__cta {
    max-width: 55%;
    border-color: transparent;
    color: #000;
    background: linear-gradient(177deg, rgba(250, 189, 38, 1) 0%, rgba(250, 120, 33, 1) 100%) border-box;
  }

  .dual-indication-hero__panel--fcs .dual-indication-hero__bg-image {
    display: none;
  }

  .dual-indication-hero__panel--fcs .dual-indication-hero__bg {
    background: #000;
  }

  .dual-indication-hero__panel--fcs .dual-indication-hero__bg--fcs {
    background: #000;
  }

  .dual-indication-hero__bg--fcs::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Gradient layer (on top of the photo) fades the bottom into the black
       panel so the slightly-short image doesn't end in an abrupt edge. */
    /*background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 1) 100%),*/
    /*url('fcs-hero-mobile.png') no-repeat right bottom / auto 100%;*/

    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 1) 100%),
    url('fcs-hero-mobile.png');
    background-repeat: repeat, no-repeat;
    background-size: 100%;
    background-position-x: 0%, right;
    background-position-y: 0;
    background-attachment: scroll;
    background-origin: padding-box;
    background-clip: border-box;
    background-color: transparent;

  }

  /* Stacked layout uses the mobile sHTG photo (subject framed to the right) */
  .dual-indication-hero__bg--shtg {
    background-image: url('shtg-home-image-mobile.png');
  }

  .dual-indication-hero__scrim--fcs {
    opacity: 0;
  }

  .dual-indication-hero:hover .dual-indication-hero__panel:not(:hover) .dual-indication-hero__content,
  .dual-indication-hero:focus-within .dual-indication-hero__panel:not(:focus) .dual-indication-hero__content {
    opacity: 1;
  }

  .dual-indication-hero:hover .dual-indication-hero__panel:not(:hover) .dual-indication-hero__scrim,
  .dual-indication-hero:focus-within .dual-indication-hero__panel:not(:focus) .dual-indication-hero__scrim {
    opacity: 0;
  }

  .dual-indication-hero__panel--shtg .dual-indication-hero__content {
    grid-column: unset;
  }
}

@media (max-width: 767px) {
  .dual-indication-hero__bg--shtg {
    /*background: url('shtg-home-image-mobile.png') no-repeat center bottom / cover;*/
    background-image: url('shtg-home-image-mobile.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
  }

  .dual-indication-hero__cta--shtg {
    max-width: 13rem;
  }

  .dual-indication-hero {
    /* Pull the hero up to close the small gap above it on phones.
       Do NOT reset min-height here — the calc() fill from the max-width:1024px
       block must keep applying down to the smallest phones. */
    margin-top: -2rem;
  }

  .dual-indication-hero__content {
    padding: 0 24px;
  }

  .dual-indication-hero__panel--shtg .dual-indication-hero__content {
    padding-right: 24px;
  }

  .dual-indication-hero {
    /* Font sizes are governed by the fluid clamp() rules in the max-width:1024px
       block above (they compact further as the viewport narrows). Keep only the
       phone-specific tweaks here. */
    p.dual-indication-hero__eyebrow {
      white-space: nowrap;
    }

    .dual-indication-hero__cta {
      margin-top: 30px;
      max-width: 11.5rem;
    }
  }

  .dual-indication-hero__disclaimer p {
    /* In-flow right after the CTA so it stays above the fixed ISI peek. The FCS
       panel now extends full-bleed behind the peek, so a bottom-anchored
       disclaimer would hide behind it. */
    position: relative;
    right: auto;
    bottom: auto;
    padding: clamp(4px, 1vw, 8px) 0 0;
    text-align: left;
  }

  /* Actor-portrayal disclaimer moves to the bottom-right on mobile */
  .dual-indication-hero__actor-portrayal {
    left: auto;
    right: 90px;
    bottom: 8px;
  }

  .dual-indication-hero__panel--fcs {
    /* No fixed min-height — the 1fr row fills the space; content stays top-aligned
       so the CTA sits high, above the fixed ISI drawer. */
    justify-content: flex-start;

    .dual-indication-hero__content {
      margin-top: 42px;
    }
  }
  .dual-indication-hero__disclaimer {
    margin-left: auto;
    margin-right: 5px;
    transform: translateY(-8px);
  }
  .dual-indication-hero__disclaimer p {
    text-align: right;
  }
}

@media (max-width: 1024px) and (min-aspect-ratio: 1/1) {
  .dual-indication-hero {
    height: auto;
  }
}

/* TRYN-1087 (tryn_nxt): short viewports (iPhone SE 375x667 up to ~730px tall —
   a safety margin above 667 so the SE is reliably caught). Content-size the rows
   and strip the inter-element margin-bottom (texts AND button) so both banners +
   the FCS CTA fit above the fixed ISI. Mirrors the patient site's max-height:730
   rule; the ISI component itself is left untouched (its clearance is handled on
   the hero side via ISI_SAFE_MARGIN in dual-indication-hero.js). */
@media (max-width: 1024px) and (max-height: 730px) {
  .dual-indication-hero {
    /* sHTG content-sized; FCS fills the rest. FCS content stays top-aligned (see
       the max-width:767px block) so its CTA sits high above the ISI peek while the
       FCS background fills the remaining track behind the peek — no empty gap. */
    grid-template-rows: auto 1fr;
  }

  /* sHTG a bit taller than its content so its band reads larger than the compact
     FCS band above the ISI peek. */
  .dual-indication-hero__panel--shtg {
    min-height: 200px;
    padding-bottom: 16px;
    @media (max-width: 767px) {
      padding-bottom: 0px;
    }
  }

  /* Remove the margin-bottom of the texts AND the button on short viewports. */
  .dual-indication-hero p.dual-indication-hero__eyebrow { margin-bottom: 0; }
  .dual-indication-hero p.dual-indication-hero__subheading {
    margin-bottom: 0;
  }
  .dual-indication-hero .dual-indication-hero__heading {
    margin-bottom: 2px;
    line-height: 1;
    font-size: 18px;
  }
  .dual-indication-hero__cta { margin: 0; }
  .dual-indication-hero__content {
    padding-bottom: 0;
    margin-top: 20px;
  }
  .dual-indication-hero__disclaimer p { padding-top: 2px; }
}

@media (max-width: 394px) {
  .dual-indication-hero__disclaimer p {
    transform: translateY(-8px);
  }
}

@media (max-width: 391px)  {
/*@media (max-height: 690px) {*/
  .dual-indication-hero__panel--shtg {
    min-height: 180px;
  }
  .dual-indication-hero__panel--shtg .dual-indication-hero__content {
    max-width: 68%;
    /*margin-top: px;*/
  }
  .dual-indication-hero__bg--shtg {
    /*background: url('shtg-home-image-mobile.png') no-repeat center bottom / cover;*/
    background-image: url('shtg-home-image-mobile.png');
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 80%;
    background-size: cover;
  }

  .dual-indication-hero__panel--fcs {
    max-height: 195px;
    .dual-indication-hero__content {
      margin-top: 5px !important;
      width: 293px;
    }
  }
  .dual-indication-hero__actor-portrayal {
    right: 20px;
  }

  .dual-indication-hero {
    p.dual-indication-hero__eyebrow {
      white-space: nowrap;
    }

    .dual-indication-hero__cta {
      max-width: 12.5rem;
    }

    .dual-indication-hero__cta--shtg {
      max-width: 12.9rem;
    }
  }

  .dual-indication-hero__bg--fcs::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 1) 100%), url('fcs-hero-mobile.png');
    background-repeat: no-repeat;
    background-position-x: left, right;
    background-position-y: -20px;
    background-size: 65%;
  }
  .dual-indication-hero__disclaimer {
    margin-left: auto;
    margin-right: 5px;
  }
  .dual-indication-hero__disclaimer p {
    text-align: right;
    font-size: 7px !important;
  }

  .dual-indication-hero__cta--fcs {
    width: 11rem;
  }
  .dual-indication-hero__cta {
    margin-top: 5px !important;
  }


  .dual-indication-hero__disclaimer {
    /*margin-top: -10px;*/
    /*margin-left: auto;*/
    /*margin-bottom: auto;*/
    /*margin-right: 10px;*/
    transform: translateY(-20px) !important;

  }


}

@media (width > 414px) and (width < 768px) {
  .dual-indication-hero__cta--shtg {
    max-width: 80% !important;
  }
  .dual-indication-hero__cta--fcs {
    max-width: 80% !important;
  }
}

@media (width > 768px) and (width < 1024px) {
  .dual-indication-hero__cta--fcs {
    max-width: 100% !important;
  }
}