/* CardiacPro adaptive layout system
   Desktop compositions remain cinematic; tablet and mobile layouts become
   intentional product stories with safe touch targets and no clipped content. */

html {
  scroll-padding-top: 0;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  min-width: 320px;
  overflow-x: clip;
}

section[id] {
  scroll-margin-top: 0;
}

main,
section,
footer,
.site-header {
  min-width: 0;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

.product {
  overflow: hidden;
}

.product-side-gallery {
  position: relative;
  z-index: 1;
  width: min(920px, 124%);
  aspect-ratio: 1.18;
}

.product-side-gallery figure {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid #ffffff24;
  border-radius: 24px;
  background: #0a0d15;
  box-shadow: 0 34px 74px #000a;
}

.product-side-gallery .logo-side {
  top: 0;
  left: 0;
  width: 78%;
  transform: rotate(-2deg);
}

.product-side-gallery .control-side {
  right: 0;
  bottom: 0;
  width: 64%;
  transform: rotate(2deg);
}

.product-visual .product-side-gallery img {
  display: block;
  width: 100%;
  max-width: none;
  filter: none;
}

.product-side-gallery figcaption {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #ffffff20;
  border-radius: 12px;
  background: #080a0dd9;
  backdrop-filter: blur(12px);
}

.product-side-gallery figcaption span,
.product-side-gallery figcaption b {
  display: block;
}

.product-side-gallery figcaption span {
  color: #8d99d8;
  font-size: 7px;
  letter-spacing: .14em;
}

.product-side-gallery figcaption b {
  margin-top: 4px;
  color: #f4f5f7;
  font-size: 9px;
}

.hero .hero-visual {
  isolation: isolate;
}

.hero .branded-hero-band {
  width: min(930px, 66vw);
  max-width: none;
  border-radius: 36px;
  mask-image: radial-gradient(ellipse 78% 84% at 52% 52%, #000 68%, transparent 100%);
  filter: drop-shadow(0 42px 52px #000b);
}

.hero .orbit {
  z-index: -1;
  opacity: .42;
}

button,
a,
input {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p,
li,
figcaption,
small,
b,
span {
  overflow-wrap: break-word;
}

.section {
  padding-block: clamp(92px, 10vw, 145px);
  padding-inline: clamp(22px, 5.5vw, 86px);
}

.section > *,
.hero > *,
.ecg-story > *,
.heart-story > *,
.trust-experience > *,
.enterprise-stage > *,
.checkout-product > * {
  min-width: 0;
}

@media (max-width: 1180px) {
  .hero {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    padding-inline: clamp(28px, 4.5vw, 58px);
  }

  .hero h1 {
    font-size: clamp(58px, 7vw, 82px);
  }

  .hero-visual {
    height: 610px;
  }

  .hero .branded-hero-band {
    width: min(860px, 72vw);
  }

  .ecg-story {
    grid-template-columns: minmax(220px, 0.58fr) minmax(390px, 1fr);
    column-gap: clamp(30px, 5vw, 68px);
  }

  .ecg-narrative {
    grid-column: 1 / -1;
    max-width: 720px;
  }

  .trust-experience {
    grid-template-columns: minmax(190px, 0.55fr) minmax(360px, 1fr);
  }

  .trust-narrative {
    grid-column: 1 / -1;
    max-width: 720px;
  }
}

@media (max-width: 1000px) {
  html {
    scroll-padding-top: 0;
  }

  .site-header {
    position: fixed;
    z-index: 80;
    height: 70px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    background: linear-gradient(180deg, #07090df2, #07090dcc);
    border-bottom-color: #ffffff18;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  .site-header .brand img {
    width: clamp(188px, 27vw, 225px);
  }

  .menu {
    display: inline-grid;
    place-items: center;
    min-width: 58px;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid #ffffff25;
    border-radius: 99px;
    background: #10141bcc;
    color: #f5f6f7;
    font-size: 11px;
    letter-spacing: 0.04em;
    cursor: pointer;
  }

  .nav-links {
    position: fixed;
    z-index: 79;
    top: 78px;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0 !important;
    max-height: calc(100dvh - 94px - env(safe-area-inset-bottom));
    padding: 12px;
    border: 1px solid #ffffff1f;
    border-radius: 22px;
    background: #0b0e13f5;
    box-shadow: 0 30px 80px #000b;
    opacity: 0;
    overflow-y: auto;
    pointer-events: none;
    transform: translateY(-10px) scale(0.985);
    transform-origin: top;
    transition: opacity 0.2s ease, transform 0.25s ease;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }

  .nav-links.open {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .nav-links a,
  .nav-links .nav-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 12px 14px;
    border-bottom: 1px solid #ffffff12;
    border-radius: 0;
    background: transparent;
    color: #d9dde3 !important;
    font-size: 13px;
    text-align: left;
  }

  .nav-links .nav-cta {
    justify-content: center;
    margin-top: 8px;
    border: 0;
    border-radius: 99px;
    background: #f4f5f6;
    color: #090a0c !important;
  }

  .nav-open {
    overflow: hidden;
  }

  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    align-items: start;
    padding: 128px clamp(24px, 6vw, 64px) 88px;
  }

  .hero-copy {
    grid-row: auto;
    max-width: 760px;
  }

  .hero h1 {
    max-width: 880px;
    font-size: clamp(58px, 9vw, 88px);
  }

  .hero-dek {
    max-width: 680px;
  }

  .hero-visual {
    grid-row: auto;
    width: 100%;
    height: clamp(510px, 68vw, 700px);
    margin-top: 28px;
  }

  .hero-band {
    width: min(760px, 94vw);
  }

  .hero .branded-hero-band {
    width: min(880px, 100vw);
  }

  .system-flow {
    grid-template-columns: 1fr 1fr;
  }

  .system-flow article:nth-child(2) {
    border-right: 0;
  }

  .system-flow article {
    border-bottom: 1px solid #cdd0cd;
  }

  .morning-story,
  .baseline,
  .product,
  .inside,
  .sleep {
    grid-template-columns: 1fr;
  }

  .morning-copy,
  .baseline-copy,
  .product-copy,
  .inside-copy,
  .sleep-copy {
    max-width: 760px;
  }

  .morning-screen-wrap {
    min-height: clamp(650px, 88vw, 780px);
  }

  .sleep-screens {
    width: min(700px, 100%);
    margin-inline: auto;
  }

  .baseline-visual {
    width: min(720px, 100%);
    margin-inline: auto;
  }

  .product-visual {
    min-height: clamp(430px, 64vw, 620px);
  }

  .product-side-gallery {
    width: min(880px, 100%);
  }

  .product-visual img {
    width: min(800px, 112%);
  }

  .inside-visual {
    width: min(820px, 100%);
    margin-inline: auto;
  }

  .compare-grid {
    grid-template-columns: 1fr 1fr;
  }

  .enterprise-stage {
    grid-template-columns: minmax(220px, 0.72fr) minmax(410px, 1.28fr);
  }

  .enterprise-audiences,
  .enterprise-narrative,
  .enterprise-visual {
    grid-column: auto;
  }

  .enterprise-audiences {
    grid-row: 1;
  }

  .enterprise-narrative {
    grid-row: 2;
  }

  .enterprise-visual {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .cta {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .cta-copy {
    max-width: 760px;
  }

  .cta-band {
    width: min(860px, 110%);
    margin: -20px auto -4vw;
  }

  .detail-hero {
    min-height: 620px;
    padding-top: 150px;
  }

  .detail-chapter {
    grid-template-columns: 70px minmax(300px, 0.8fr) minmax(280px, 0.7fr);
    gap: clamp(28px, 5vw, 62px);
    padding-inline: clamp(28px, 6vw, 76px);
  }
}

@media (max-width: 820px) {
  .ecg-controls button,
  .trust-steps button,
  .enterprise-audiences button,
  .heart-tabs button {
    min-width: 0;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .ecg-controls button,
  .trust-steps button,
  .enterprise-audiences button {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .section-heading h2,
  .enterprise-intro h2,
  .buy-heading h2 {
    font-size: clamp(42px, 7.5vw, 62px);
  }

  .section-heading > p:last-child,
  .enterprise-intro > p:last-child,
  .buy-heading > p:last-child {
    font-size: 16px;
  }

  .ecg-story {
    grid-template-columns: 1fr;
    margin-top: 54px;
  }

  .ecg-controls {
    display: grid;
    grid-template-columns: repeat(5, minmax(158px, 1fr));
    gap: 10px;
    margin-right: calc(clamp(22px, 5.5vw, 86px) * -1);
    padding-right: clamp(22px, 5.5vw, 86px);
    padding-bottom: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .ecg-controls::-webkit-scrollbar,
  .enterprise-audiences::-webkit-scrollbar,
  .trust-steps::-webkit-scrollbar,
  .compare-grid::-webkit-scrollbar,
  .sleep-screens::-webkit-scrollbar {
    display: none;
  }

  .ecg-controls button {
    display: block;
    min-height: 76px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 15px;
    scroll-snap-align: start;
  }

  .ecg-controls button:first-child {
    border-top: 1px solid var(--line);
  }

  .ecg-controls button.active {
    padding-left: 14px;
    border-color: #7186ff8a;
    background: #7186ff0d;
  }

  .ecg-controls button span {
    display: none;
  }

  .ecg-controls button b,
  .ecg-controls button small {
    display: block;
  }

  .ecg-controls button b {
    font-size: 13px;
    line-height: 1.2;
  }

  .ecg-controls button small {
    margin-top: 6px;
    font-size: 9px;
    line-height: 1.35;
    max-width: 100%;
  }

  .ecg-phone-wrap {
    min-height: clamp(610px, 105vw, 720px);
  }

  .ecg-narrative {
    grid-column: auto;
  }

  .heart-story-copy {
    display: block;
  }

  .heart-tabs {
    margin-top: 34px;
  }

  .trust-experience {
    grid-template-columns: 1fr;
    padding: clamp(22px, 5vw, 36px);
  }

  .trust-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(145px, 1fr));
    gap: 9px;
    margin-right: calc(clamp(22px, 5vw, 36px) * -1);
    padding-right: clamp(22px, 5vw, 36px);
    padding-bottom: 5px;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .trust-steps button,
  .trust-steps button:first-child {
    display: block;
    min-height: 70px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    scroll-snap-align: start;
  }

  .trust-steps button.active {
    padding-left: 13px;
    border-color: #7186ff73;
  }

  .trust-steps button span {
    display: none;
  }

  .trust-steps button b,
  .trust-steps button small {
    display: block;
  }

  .trust-steps button small {
    margin-top: 5px;
    line-height: 1.35;
  }

  .trust-phone-wrap {
    min-height: clamp(610px, 92vw, 710px);
  }

  .trust-narrative {
    grid-column: auto;
  }

  .enterprise-stage {
    grid-template-columns: 1fr;
    padding: clamp(20px, 4vw, 30px);
  }

  .enterprise-audiences {
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 9px;
    margin-right: calc(clamp(20px, 4vw, 30px) * -1);
    padding-right: clamp(20px, 4vw, 30px);
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .enterprise-audiences button,
  .enterprise-audiences button:first-child {
    display: block;
    min-height: 76px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    scroll-snap-align: start;
  }

  .enterprise-audiences button.active {
    padding-left: 14px;
    border-color: #7186ff77;
  }

  .enterprise-audiences span {
    display: none;
  }

  .enterprise-audiences b,
  .enterprise-audiences small {
    display: block;
  }

  .enterprise-audiences small {
    margin-top: 6px;
    line-height: 1.35;
  }

  .enterprise-narrative {
    grid-row: auto;
    padding: 18px 3px 8px;
  }

  .enterprise-visual {
    grid-column: auto;
    grid-row: auto;
    min-height: clamp(500px, 76vw, 610px);
  }

  .enterprise-foundations {
    grid-template-columns: 1fr;
  }

  .enterprise-foundations article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid #ffffff16;
  }

  .enterprise-foundations h3 {
    margin-top: 24px;
  }

  .enterprise-close {
    align-items: flex-start;
    flex-direction: column;
  }

  .detail-chapter {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: 88px;
  }

  .detail-index,
  .detail-copy {
    grid-column: auto;
  }

  .detail-index {
    order: 1;
  }

  .detail-screen,
  .detail-chapter:nth-child(even) .detail-screen {
    order: 2;
    width: min(360px, 84vw);
  }

  .detail-copy {
    order: 3;
  }
}

@media (max-width: 640px) {
  .section {
    padding-block: 84px;
    padding-inline: 20px;
  }

  .eyebrow {
    font-size: 9px;
    line-height: 1.45;
  }

  .hero {
    padding: 112px 20px 72px;
  }

  .hero h1 {
    margin-block: 20px 24px;
    font-size: clamp(47px, 14vw, 64px);
    line-height: 0.96;
  }

  .hero-dek {
    font-size: 17px;
    line-height: 1.56;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
  }

  .hero-actions .button {
    justify-content: space-between;
    min-height: 50px;
  }

  .hero-actions .text-link {
    padding-inline: 3px;
  }

  .hero-visual {
    height: clamp(360px, 104vw, 470px);
    margin-top: 18px;
  }

  .hero-band {
    width: min(650px, 116vw);
  }

  .hero .branded-hero-band {
    width: 138vw;
    border-radius: 24px;
    mask-image: radial-gradient(ellipse 76% 84% at 52% 52%, #000 70%, transparent 100%);
  }

  .orbit {
    width: 88%;
  }

  .signal-card {
    left: -5%;
    bottom: 0;
    width: min(235px, 66vw);
    padding: 11px 13px;
    transform: scale(0.88);
    transform-origin: left bottom;
  }

  .signal-card svg {
    height: 44px;
  }

  .metric-chip {
    transform: scale(0.86);
  }

  .metric-chip.rate {
    top: 11%;
    right: -4%;
  }

  .metric-chip.rhythm {
    display: none;
  }

  .microcopy {
    font-size: 9px;
  }

  .section-heading h2,
  .sleep h2,
  .baseline h2,
  .product h2,
  .inside h2,
  .cta h2,
  .enterprise-intro h2,
  .buy-heading h2 {
    font-size: clamp(39px, 11vw, 52px);
    line-height: 1.04;
  }

  .section-heading > p:last-child,
  .enterprise-intro > p:last-child,
  .buy-heading > p:last-child {
    font-size: 15px;
    line-height: 1.65;
  }

  .system-flow {
    grid-template-columns: 1fr;
    margin-top: 54px;
  }

  .system-flow::before {
    width: 100%;
  }

  .system-flow article,
  .system-flow article + article {
    min-height: 0;
    padding: 24px 0;
    border-right: 0;
  }

  .system-flow b {
    margin: 18px 0 8px;
  }

  .ecg-controls {
    grid-template-columns: repeat(5, 158px);
    margin-right: -20px;
    padding-right: 20px;
  }

  .ecg-phone-wrap {
    min-height: clamp(555px, 152vw, 650px);
  }

  .phone-shell {
    width: min(318px, 88vw);
    padding: 6px;
    border-radius: 49px;
  }

  .phone-shell img {
    border-radius: 42px;
  }

  .actual-badge {
    right: 0;
    bottom: 5%;
    max-width: 170px;
  }

  .ecg-narrative h3,
  .heart-story-copy h3,
  .trust-narrative h3,
  .enterprise-narrative h3 {
    font-size: clamp(34px, 9.5vw, 46px);
  }

  .morning-story {
    margin-top: 52px;
  }

  .morning-toggle {
    margin-bottom: 34px;
  }

  .score-language {
    grid-template-columns: 1fr 1fr;
  }

  .morning-screen-wrap {
    min-height: clamp(560px, 154vw, 660px);
  }

  .morning-phone {
    width: min(318px, 86vw);
    border-radius: 50px;
  }

  .morning-phone img {
    border-radius: 43px;
  }

  .morning-badge {
    right: 0;
    bottom: 5%;
  }

  .heart-story {
    margin-top: 52px;
  }

  .heart-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    border-top: 0;
  }

  .heart-tabs button {
    display: flex;
    min-height: 80px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 13px;
  }

  .heart-tabs button.active {
    padding-left: 11px;
    border-color: #7186ff70;
    background: #7186ff0b;
  }

  .heart-tabs button > i {
    width: 34px;
    height: 34px;
  }

  .heart-tabs button small {
    display: none;
  }

  .heart-composition {
    display: block;
    min-height: 0;
    padding: 18px;
    overflow: hidden;
  }

  .heart-composition::before,
  .heart-path,
  .heart-conclusion {
    display: none;
  }

  .heart-panel,
  .recovery-hero,
  .evidence-card {
    position: relative;
    inset: auto;
    display: none;
    width: 100%;
    max-width: 350px;
    margin-inline: auto;
    opacity: 1;
    filter: none;
    transform: none !important;
  }

  .heart-panel.active {
    display: block;
  }

  .evidence-crop {
    height: min(70vw, 270px);
  }

  .sleep-screens {
    display: flex;
    width: auto;
    gap: 14px;
    margin: 46px -20px 0 0;
    padding-right: 20px;
    padding-bottom: 24px;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .sleep-screens figure,
  .sleep-screens figure:nth-child(2) {
    flex: 0 0 min(78vw, 330px);
    transform: none;
    scroll-snap-align: center;
  }

  .baseline-visual {
    min-height: 0;
    padding: 24px;
  }

  .baseline-orbit {
    width: min(76vw, 310px);
    margin-bottom: 36px;
  }

  .baseline-signals {
    grid-template-columns: 1fr 1fr;
  }

  .trust-experience {
    margin-top: 50px;
    padding: 18px;
    border-radius: 26px;
  }

  .trust-steps {
    grid-template-columns: repeat(4, 148px);
    margin-right: -18px;
    padding-right: 18px;
  }

  .trust-phone-wrap {
    min-height: clamp(560px, 150vw, 640px);
  }

  .trust-phone {
    width: min(305px, 85vw);
  }

  .product-visual {
    min-height: 0;
    display: block;
  }

  .product-halo {
    display: none;
  }

  .product-side-gallery {
    display: flex;
    width: calc(100% + 20px);
    aspect-ratio: auto;
    gap: 12px;
    margin-right: -20px;
    padding: 4px 20px 28px 2px;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .product-side-gallery::-webkit-scrollbar {
    display: none;
  }

  .product-side-gallery figure,
  .product-side-gallery .logo-side,
  .product-side-gallery .control-side {
    position: relative;
    inset: auto;
    flex: 0 0 min(82vw, 330px);
    width: auto;
    transform: none;
    scroll-snap-align: center;
  }

  .product-visual .product-side-gallery img {
    width: 100%;
  }

  .product-specs {
    grid-template-columns: 1fr 1fr;
  }

  .inside-visual {
    margin-top: 26px;
  }

  .inside-visual img {
    width: 100%;
    margin: 0;
    mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 98%, transparent);
  }

  .compare-grid {
    display: flex;
    gap: 12px;
    margin: 48px -20px 0 0;
    padding-right: 20px;
    padding-bottom: 16px;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .compare-grid article {
    flex: 0 0 min(84vw, 340px);
    min-height: 250px;
    scroll-snap-align: center;
  }

  .compare-grid h3 {
    margin-top: 36px;
  }

  .enterprise-stage {
    margin-top: 52px;
    padding: 18px;
    border-radius: 24px;
  }

  .enterprise-audiences {
    grid-template-columns: repeat(3, 152px);
    margin-right: -18px;
    padding-right: 18px;
  }

  .enterprise-visual {
    min-height: clamp(420px, 116vw, 500px);
  }

  .enterprise-band {
    top: 1%;
    left: -20%;
    width: 103%;
  }

  .enterprise-phone {
    right: 4%;
    bottom: 5%;
    width: min(52%, 230px);
  }

  .enterprise-data-boundary {
    left: 4%;
    bottom: 5%;
    width: 41%;
    padding: 12px;
  }

  .enterprise-foundations article {
    padding: 24px;
  }

  .enterprise-close {
    padding: 24px;
  }

  .enterprise-close .button {
    width: 100%;
    justify-content: space-between;
  }

  .cta .form-fields {
    flex-direction: column;
  }

  .cta input,
  .cta button {
    min-height: 52px;
  }

  .cta .form-consent {
    margin-inline: 4px;
  }

  .cta-band {
    width: 128%;
    max-width: none;
    margin: -8px 0 -10vw -14%;
  }

  footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
    padding: 42px 20px calc(104px + env(safe-area-inset-bottom));
  }

  .detail-page footer {
    padding-bottom: calc(42px + env(safe-area-inset-bottom));
  }

  footer div {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .mobile-buy {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    min-height: 52px;
    padding: 12px 18px;
  }

  .checkout-open .mobile-buy {
    opacity: 0;
    pointer-events: none;
  }

  .checkout-panel {
    width: 100%;
    max-height: min(94dvh, 900px);
    padding: 24px 18px calc(26px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    overscroll-behavior: contain;
  }

  .checkout-top > button,
  .quantity-control button {
    min-width: 42px;
    min-height: 42px;
  }

  .checkout-progress span {
    flex-direction: column;
    align-items: flex-start;
    font-size: 7px;
  }

  .checkout-product {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 12px;
  }

  .checkout-product > div {
    height: 76px;
  }

  .checkout-product img {
    width: 118%;
  }

  .checkout-selection {
    grid-template-columns: 1fr 1fr;
  }

  .checkout-selection > div:nth-child(2) {
    border-right: 0;
  }

  .checkout-selection .checkout-quantity-control {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
  }

  .checkout-security {
    grid-template-columns: 1fr;
  }

  .detail-hero {
    min-height: 560px;
    padding: 132px 20px 76px;
  }

  .detail-hero h1 {
    font-size: clamp(49px, 14vw, 68px);
  }

  .detail-hero p:last-child {
    font-size: 16px;
  }

  .detail-chapter {
    gap: 28px;
    padding: 76px 20px;
  }

  .detail-screen {
    width: min(318px, 86vw);
  }

  .detail-cta {
    padding: 82px 20px;
  }
}

@media (max-width: 390px) {
  .site-header .brand img {
    width: 162px;
  }

  .menu {
    min-width: 54px;
    padding-inline: 12px;
  }

  .hero h1 {
    font-size: clamp(43px, 13.5vw, 52px);
  }

  .signal-card {
    left: -10%;
  }

  .score-language {
    grid-template-columns: 1fr;
  }

  .heart-tabs button {
    min-height: 72px;
    padding: 9px;
  }

  .heart-tabs button b {
    font-size: 11px;
  }

  .product-specs {
    grid-template-columns: 1fr;
  }

  .product-specs span:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .enterprise-data-boundary b {
    font-size: 8px;
  }

  .checkout-product p small {
    display: none;
  }
}

@media (max-height: 520px) and (orientation: landscape) and (max-width: 950px) {
  .nav-links {
    max-height: calc(100dvh - 88px);
  }

  .hero {
    padding-top: 100px;
  }

  .hero-visual {
    height: 360px;
  }

  .checkout-panel {
    max-height: 100dvh;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links,
  .heart-panel,
  .checkout-panel {
    transition: none;
    animation: none;
  }
}

/* Focused health-detail chapter */
.hero-buy {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.deeper {
  background:
    radial-gradient(circle at 82% 18%, #2c3b7450, transparent 34%),
    linear-gradient(180deg, #090b11, #07090d);
}

.deeper-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 1060px;
  margin-top: 64px;
}

.deeper-grid details,
.compare-mobile details {
  border: 1px solid #ffffff18;
  border-radius: 22px;
  background: #101319;
  overflow: hidden;
}

.deeper-grid summary,
.compare-mobile summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 74px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
}

.deeper-grid summary::-webkit-details-marker,
.compare-mobile summary::-webkit-details-marker {
  display: none;
}

.deeper-grid summary span,
.compare-mobile summary span {
  color: #6f7885;
  font-size: 8px;
  letter-spacing: .12em;
}

.deeper-grid summary b,
.compare-mobile summary b {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 500;
}

.deeper-grid summary i,
.compare-mobile summary i {
  color: #8d9aff;
  font-size: 18px;
  font-style: normal;
  transition: transform .2s ease;
}

.deeper-grid details[open] summary i,
.compare-mobile details[open] summary i {
  transform: rotate(45deg);
}

.deeper-grid details p,
.compare-mobile details p {
  margin: 0;
  padding: 0 22px 24px 54px;
  color: #8f98a4;
  font-size: 13px;
  line-height: 1.7;
}

.deeper-note {
  max-width: 760px;
  margin: 24px 0 0;
  color: #646d79;
  font-size: 9px;
  line-height: 1.6;
}

.compare-mobile {
  display: none;
}

/* iPhone and compact-phone composition */
@media (max-width: 640px) {
  html {
    scroll-behavior: auto;
    scroll-padding-top: 70px;
  }

  body {
    width: 100%;
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  section[id] {
    scroll-margin-top: 0;
  }

  .section {
    padding: 96px 20px;
  }

  .system,
  .ecg-section,
  .daily,
  .heart,
  .sleep,
  .baseline,
  .deeper,
  .trust,
  .product,
  .inside,
  .compare,
  .enterprise,
  .cta {
    overflow: hidden;
  }

  .site-header {
    height: 64px;
    padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right));
  }

  .site-header .brand img {
    width: clamp(174px, 48vw, 188px);
  }

  .menu {
    min-width: 54px;
    min-height: 40px;
    padding-inline: 12px;
  }

  .nav-links {
    top: 72px;
  }

  .hero {
    display: block;
    min-height: max(760px, 100svh);
    padding: 64px 20px 24px;
    isolation: isolate;
  }

  .hero-grid {
    background-size: 56px 56px;
    opacity: .62;
  }

  .hero-glow {
    top: -6%;
    right: -55%;
    width: 140vw;
    height: 140vw;
  }

  .hero-visual {
    position: absolute;
    z-index: 1;
    top: 64px;
    right: 0;
    left: 0;
    width: 100%;
    height: min(45svh, 388px);
    margin: 0;
    overflow: hidden;
  }

  .hero .branded-hero-band {
    width: min(148vw, 580px);
    max-width: none;
    border-radius: 0;
    mask-image: radial-gradient(ellipse 68% 79% at 52% 50%, #000 69%, transparent 100%);
    animation: none;
    transform: translateY(-1%);
  }

  .hero .orbit {
    width: 92%;
  }

  .hero-copy {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: none;
    padding-top: min(43svh, 365px);
  }

  .hero .eyebrow {
    font-size: 8px;
  }

  .hero h1 {
    width: 100%;
    max-width: 100%;
    margin: 13px 0 17px;
    font-size: clamp(45px, 13.1vw, 52px);
    line-height: .94;
  }

  .hero h1 em {
    display: block;
  }

  .hero-dek {
    max-width: 355px;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
  }

  .hero-actions {
    align-items: center;
    flex-direction: row;
    gap: 18px;
    margin: 18px 0 0;
  }

  .hero-actions .button {
    min-height: 46px;
    padding: 13px 17px;
    font-size: 11px;
  }

  .hero-actions .text-link {
    padding: 10px 0;
    font-size: 11px;
  }

  .hero .microcopy,
  .hero .scroll-mark {
    display: none;
  }

  .signal-card {
    left: 16px;
    bottom: 8px;
    width: 180px;
    padding: 9px 11px;
    transform: none;
  }

  .signal-card svg {
    height: 34px;
  }

  .signal-card b {
    font-size: 8px;
  }

  .metric-chip.rate {
    top: 16px;
    right: 12px;
    transform: scale(.78);
    transform-origin: right top;
  }

  .section-heading h2,
  .sleep h2,
  .baseline h2,
  .product h2,
  .inside h2,
  .cta h2,
  .enterprise-intro h2,
  .buy-heading h2 {
    max-width: 100%;
    font-size: clamp(39px, 10.7vw, 46px);
    line-height: 1.02;
  }

  .section-heading > p:last-child,
  .enterprise-intro > p:last-child,
  .buy-heading > p:last-child {
    max-width: 355px;
    font-size: 15px;
    line-height: 1.58;
  }

  .system-flow {
    display: flex;
    gap: 12px;
    width: calc(100% + 20px);
    margin: 48px -20px 0 0;
    padding: 1px 20px 12px 1px;
    border: 0;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .system-flow::before {
    display: none;
  }

  .system-flow article,
  .system-flow article + article {
    flex: 0 0 min(76vw, 294px);
    min-height: 190px;
    padding: 22px;
    border: 1px solid #cfd2cf;
    border-radius: 22px;
    background: #f6f6f3;
    scroll-snap-align: center;
  }

  .system-flow b {
    margin: 38px 0 8px;
  }

  .ecg-story {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 42px;
  }

  .ecg-controls {
    order: 1;
    display: flex;
    gap: 8px;
    width: calc(100% + 20px);
    margin: 0 -20px 0 0;
    padding: 0 20px 8px 0;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .ecg-controls button,
  .ecg-controls button:first-child,
  .ecg-controls button.active {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 94px;
    min-height: 48px;
    padding: 12px 15px;
    border: 1px solid var(--line);
    border-radius: 99px;
    scroll-snap-align: start;
  }

  .ecg-controls button.active {
    border-color: #8795ff9c;
    background: #7186ff15;
  }

  .ecg-controls button small,
  .ecg-controls button span {
    display: none;
  }

  .ecg-controls button b {
    font-size: 11px;
    white-space: nowrap;
  }

  .ecg-narrative {
    order: 2;
    padding: 34px 0 6px;
  }

  .ecg-narrative h3,
  .heart-story-copy h3,
  .trust-narrative h3,
  .enterprise-narrative h3 {
    margin-block: 13px;
    font-size: clamp(32px, 8.8vw, 39px);
  }

  .ecg-narrative > div {
    max-width: 350px;
    font-size: 14px;
    line-height: 1.62;
  }

  .ecg-narrative .wellness-note {
    margin-top: 18px;
  }

  .ecg-phone-wrap {
    order: 3;
    min-height: 560px;
  }

  .phone-shell {
    width: min(300px, 82vw);
  }

  .actual-badge {
    right: 2px;
    bottom: 7%;
    max-width: 154px;
  }

  .morning-story {
    margin-top: 46px;
  }

  .score-language {
    gap: 8px;
  }

  .score-language span {
    min-height: 86px;
  }

  .morning-screen-wrap {
    min-height: 560px;
  }

  .morning-phone {
    width: min(300px, 82vw);
  }

  .heart-tabs {
    gap: 7px;
  }

  .heart-tabs button {
    min-height: 72px;
    padding: 9px;
  }

  .heart-tabs button > i {
    width: 31px;
    height: 31px;
  }

  .heart-tabs button b {
    font-size: 10px;
  }

  .heart-composition {
    margin-top: 18px;
    padding: 14px;
    border-radius: 24px;
  }

  .sleep-screens figure,
  .sleep-screens figure:nth-child(2) {
    flex-basis: min(76vw, 300px);
  }

  .baseline-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .baseline-tabs button {
    min-height: 44px;
    padding: 9px 7px;
    font-size: 10px;
  }

  .baseline-explain {
    margin-top: 30px;
  }

  .baseline-visual {
    margin-top: 44px;
    border-radius: 26px;
  }

  .baseline-orbit {
    width: min(70vw, 274px);
  }

  .deeper-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 44px;
  }

  .deeper-grid details {
    border-radius: 18px;
  }

  .deeper-grid summary {
    min-height: 64px;
    padding: 17px;
  }

  .deeper-grid summary b {
    font-size: 17px;
  }

  .deeper-grid details p {
    padding: 0 17px 19px 49px;
    font-size: 13px;
  }

  .trust-experience {
    display: flex;
    flex-direction: column;
    padding: 16px;
  }

  .trust-steps {
    order: 1;
    display: flex;
    gap: 8px;
    width: calc(100% + 16px);
    margin: 0 -16px 0 0;
    padding: 0 16px 8px 0;
  }

  .trust-steps button,
  .trust-steps button:first-child,
  .trust-steps button.active {
    flex: 0 0 auto;
    min-width: 100px;
    min-height: 48px;
    padding: 12px;
    border-radius: 99px;
    text-align: center;
  }

  .trust-steps button small {
    display: none;
  }

  .trust-narrative {
    order: 2;
    padding: 28px 4px 0;
  }

  .trust-phone-wrap {
    order: 3;
    min-height: 548px;
  }

  .trust-phone {
    width: min(288px, 78vw);
  }

  .product-side-gallery figure,
  .product-side-gallery .logo-side,
  .product-side-gallery .control-side {
    flex-basis: min(80vw, 310px);
  }

  .inside-copy ul {
    margin-top: 28px;
  }

  .inside-visual {
    overflow: hidden;
    border-radius: 26px;
    background: #e5e6e3;
  }

  .inside-visual img {
    min-height: 440px;
    object-fit: cover;
    object-position: center;
    mask-image: none;
  }

  .compare-grid {
    display: none;
  }

  .compare-mobile {
    display: grid;
    gap: 8px;
    margin-top: 46px;
  }

  .compare-mobile details {
    border-radius: 18px;
  }

  .compare-mobile summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 14px;
    min-height: 76px;
    padding: 17px;
  }

  .compare-mobile summary span {
    grid-column: 1;
  }

  .compare-mobile summary b {
    grid-column: 1;
    font-size: 17px;
  }

  .compare-mobile summary i {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .compare-mobile details p {
    padding: 0 17px 19px;
  }

  .compare-note {
    margin-top: 18px;
  }

  .enterprise-stage {
    padding: 16px;
  }

  .enterprise-visual,
  .enterprise-foundations {
    display: none;
  }

  .enterprise-audiences {
    display: flex;
    gap: 8px;
    width: calc(100% + 16px);
    margin: 0 -16px 0 0;
    padding: 0 16px 8px 0;
  }

  .enterprise-audiences button,
  .enterprise-audiences button:first-child,
  .enterprise-audiences button.active {
    flex: 0 0 132px;
    min-height: 58px;
    padding: 12px;
    border-radius: 99px;
  }

  .enterprise-audiences small {
    display: none;
  }

  .enterprise-narrative {
    padding: 30px 4px 8px;
  }

  .enterprise-close {
    margin-top: 16px;
  }

  .mobile-buy {
    z-index: 85;
    left: auto;
    top: 9px;
    right: max(82px, calc(64px + env(safe-area-inset-right)));
    bottom: auto;
    width: 86px;
    min-height: 40px;
    justify-content: center;
    padding: 9px 12px;
    border-color: #ffffff52;
    background: #f4f5f6;
    color: #080a0e;
    box-shadow: 0 8px 26px #0007;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-16px);
    transition: opacity .22s ease, transform .28s ease;
  }

  .mobile-buy.visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .mobile-buy span {
    display: none;
  }

  .mobile-buy b {
    font-size: 10px;
    white-space: nowrap;
  }
}

@media (max-width: 359px) {
  .site-header .brand img {
    width: 132px;
  }

  .hero h1 {
    font-size: 42px;
  }

  .hero-dek {
    font-size: 14px;
  }

  .hero-actions {
    gap: 12px;
  }

  .hero-actions .button {
    padding-inline: 14px;
  }
}

@media (max-height: 520px) and (orientation: landscape) and (min-width: 641px) and (max-width: 950px) {
  .hero {
    min-height: 100svh;
    grid-template-columns: minmax(0, .96fr) minmax(320px, 1.04fr);
    gap: 16px;
    padding: 82px 32px 24px;
  }

  .hero-copy {
    grid-column: 1;
    grid-row: 1;
  }

  .hero h1 {
    margin-block: 13px 16px;
    font-size: clamp(43px, 6vw, 55px);
  }

  .hero-dek {
    font-size: 14px;
    line-height: 1.48;
  }

  .hero-actions {
    margin-top: 17px;
  }

  .hero .microcopy,
  .hero .scroll-mark {
    display: none;
  }

  .hero-visual {
    grid-column: 2;
    grid-row: 1;
    height: 286px;
    margin: 0;
  }

  .hero .branded-hero-band {
    width: min(690px, 76vw);
  }

  .signal-card {
    bottom: 1%;
    width: 200px;
    transform: scale(.78);
    transform-origin: left bottom;
  }

  .metric-chip.rate {
    top: 8%;
    right: -2%;
  }
}

/* Keep the approved white packaging optically clean against the light studio
   section. The source asset already contains natural depth and contact shadow,
   so blending and edge masks only introduce haze and soften small brand type. */
.inside {
  background: linear-gradient(180deg, #fafaf8 0%, #f2f3f0 100%);
}

.inside-visual {
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.inside-visual img {
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
  filter: none;
  border-radius: 4px;
  box-shadow: 0 30px 72px rgb(29 34 42 / 12%);
}