/* The opening uses document flow: copy, action, signal and controls each own a
   grid row. The illustration can never cover the reading or action columns. */
.cardiac-hero {
  height: auto;
  min-height: 100svh;
  max-height: none;
}
.cardiac-hero .hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(50px, 1fr) auto;
  grid-template-areas: "copy heart" "action heart" "signal heart" "footer footer";
  gap: 24px clamp(24px, 2vw, 44px);
  width: 100%;
  max-width: 1920px;
  min-height: 100svh;
  margin-inline: auto;
  padding: clamp(162px, 22vh, 240px) clamp(24px, 5.5vw, 112px) 32px;
  position: relative;
}
.hero-layout .hero-content {
  grid-area: copy;
  width: auto;
  min-width: 0;
  padding: 0;
  align-self: start;
}
.hero-layout h1 {
  font-size: clamp(56px, 6vw, 104px);
  max-width: 100%;
  line-height: 1.07;
}
.hero-layout h1 br { display: initial; }
.hero-layout .hero-kicker { margin-bottom: 28px; }
.hero-layout .hero-description { margin: 24px 0 0; }
.hero-layout .hero-action {
  grid-area: action;
  min-width: 0;
  justify-self: start;
  position: relative;
  z-index: 3;
}
.hero-layout .hero-action .button {
  position: static;
  margin: 0;
  max-width: 100%;
}
.hero-layout .heart-visual {
  grid-area: heart;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 44px;
  gap: 8px;
  position: relative;
  inset: auto;
  min-width: 0;
  min-height: 540px;
  width: 100%;
  height: auto;
  align-self: stretch;
}
.hero-layout #heart-stage {
  min-height: 0;
  height: 100%;
  width: 100%;
}
.hero-layout #heart-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-layout .heart-caption {
  position: relative;
  inset: auto;
  margin: 0;
  min-height: 44px;
  justify-content: center;
  align-items: center;
}
.hero-layout .heart-caption button { margin-left: 16px; }
.hero-layout .cardiac-signal {
  grid-area: signal;
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 36px auto;
  gap: 2px 18px;
  width: min(330px, 100%);
  min-width: 0;
  margin: 0;
  align-self: end;
  align-items: center;
}
.hero-layout .cardiac-signal > span { font-size: 9px; }
.hero-layout .cardiac-signal svg { width: 100%; height: 36px; }
.hero-layout .cardiac-signal small {
  grid-column: 1 / -1;
  position: static;
  margin: 0;
  font-size: 7px;
  line-height: 1.6;
}
.hero-layout .hero-bottom {
  grid-area: footer;
  position: relative;
  inset: auto;
  width: 100%;
  min-width: 0;
  margin: 0;
  min-height: 44px;
  gap: 24px;
  align-items: center;
}
.hero-layout .cardio-controls {
  display: flex;
  flex-direction: row;
  gap: 24px;
  flex-wrap: wrap;
  min-width: 0;
}
.hero-layout .cardio-controls button { min-height: 44px; }
.hero-layout .explore { min-height: 44px; }

@media (min-width: 1001px) and (max-height: 850px) {
  .cardiac-hero .hero-layout {
    padding-top: 142px;
    padding-bottom: 26px;
    row-gap: 20px;
  }
  .hero-layout h1 { font-size: clamp(56px, 9.5vh, 78px); }
  .hero-layout .hero-kicker { margin-bottom: 20px; }
  .hero-layout .hero-description { margin-top: 20px; }
  .hero-layout .heart-visual { min-height: 470px; }
}
@media (min-width: 1001px) and (max-height: 700px) {
  .hero-layout h1 { font-size: clamp(54px, 10vh, 66px); }
  .hero-layout .heart-visual { min-height: 430px; }
}
@media (max-width: 1000px), (max-width: 1200px) and (orientation: portrait) {
  .cardiac-hero .hero-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "copy" "heart" "action" "signal" "footer";
    gap: 26px;
    padding: 150px clamp(24px, 6vw, 60px) 28px;
    min-height: 100svh;
  }
  .hero-layout .hero-content { max-width: 760px; }
  .hero-layout h1 { font-size: clamp(48px, 8vw, 76px); }
  .hero-layout .heart-visual {
    width: min(100%, 650px);
    height: clamp(420px, 75vw, 600px);
    min-height: 0;
    justify-self: center;
  }
  .hero-layout .hero-action { align-self: start; }
  .hero-layout .orbit-label { display: none; }
  .hero-layout .hero-bottom { margin-top: 0; }
  .hero-layout .heart-caption > span { display: inline-block; }
}
@media (max-width: 800px) {
  .cardiac-hero .hero-layout { padding-top: 126px; }
  .hero-layout .hero-kicker { margin-bottom: 22px; }
  .hero-layout .hero-description { margin-top: 20px; }
}
@media (max-width: 600px) {
  .cardiac-hero .hero-layout {
    padding: 124px 24px 24px;
    gap: 24px;
  }
  .hero-layout h1 {
    font-size: clamp(40px, 11.5vw, 62px);
    line-height: 1.08;
  }
  .hero-layout .heart-visual {
    height: clamp(360px, 108vw, 560px);
    min-height: 0;
  }
  .hero-layout .heart-caption { font-size: 9px; }
  .hero-layout .heart-caption button { margin-left: 12px; }
  .hero-layout .hero-action .button { font-size: 10px; }
  .hero-layout .hero-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .hero-layout .cardio-controls {
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
  }
  .hero-layout .cardio-controls button { font-size: 9px; }
}
@media (max-width: 350px) {
  .cardiac-hero .hero-layout { padding-inline: 20px; }
  .hero-layout h1 { font-size: 40px; }
  .hero-layout .hero-action .button { gap: 20px; padding-inline: 20px; }
}
/* Landscape tablets keep two columns instead of a very long stacked opening. */
@media (min-width: 801px) and (max-width: 1000px) and (orientation: landscape) {
  .cardiac-hero .hero-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(50px, 1fr) auto;
    grid-template-areas: "copy heart" "action heart" "signal heart" "footer footer";
    padding: 140px 32px 26px;
    gap: 20px;
  }
  .hero-layout h1 { font-size: clamp(46px, 5.8vw, 58px); }
  .hero-layout .heart-visual { height: auto; width: 100%; min-height: 410px; }
}