/* Local asset, typography and motion refinements layered over the recreated landing styles. */
:root {
  --coral: #ff5a43;
  --mednora-display: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  --mednora-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--mednora-body);
}

.hero h1,
.section-heading h2,
.route-heading h2,
.product-copy h2,
.mis-copy h2,
.status-heading h2,
.safety-copy h2,
.ownership .section-heading h2,
.price .section-heading h2,
.contact-copy h2 {
  font-family: var(--mednora-display);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.92;
}

.hero-woman {
  position: relative;
  z-index: 2;
  mix-blend-mode: normal;
  transform-origin: 66% 75%;
}

.hero-art {
  isolation: isolate;
}

.hero-art::before {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 6% -12% 3% -44%;
  pointer-events: none;
  opacity: 0.56;
  background:
    linear-gradient(90deg, transparent 49.72%, rgba(23, 19, 16, 0.62) 49.84%, rgba(23, 19, 16, 0.62) 50.06%, transparent 50.18%),
    linear-gradient(0deg, transparent 49.72%, rgba(23, 19, 16, 0.62) 49.84%, rgba(23, 19, 16, 0.62) 50.06%, transparent 50.18%);
  transform: rotate(-12deg);
  transform-origin: center;
}

.hero-art .orbit {
  z-index: 8;
  pointer-events: none;
  border-color: rgba(23, 19, 16, 0.58);
  box-shadow: 0 0 0 1px rgba(255, 253, 248, 0.16) inset;
}

.hero-art .orbit::after {
  box-shadow: 0 0 0 3px rgba(255, 253, 248, 0.2);
}

.hero-art::after {
  content: "";
  position: absolute;
  right: 6%;
  bottom: 8%;
  width: 13px;
  height: 13px;
  background: var(--mint);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: -24px 56px 0 -2px var(--mint), 22px 99px 0 -2px var(--mint);
  z-index: 9;
  pointer-events: none;
}

.hero-art .float-card {
  z-index: 10;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-woman {
    animation: nora-breathe 6s ease-in-out infinite;
  }

  .hero-art::before {
    animation: front-grid-drift 12s ease-in-out infinite alternate;
  }

  .hero-art .orbit-one {
    animation: front-orbit 22s linear infinite;
  }

  .hero-art .orbit-two {
    animation: front-orbit 28s linear infinite reverse;
  }

  .route-steps.reveal.is-visible li,
  .module-grid.reveal.is-visible article {
    animation: mednora-rise 0.62s both cubic-bezier(.2,.75,.25,1);
  }

  .route-steps.reveal.is-visible li:nth-child(2),
  .module-grid.reveal.is-visible article:nth-child(2) {
    animation-delay: 0.1s;
  }

  .route-steps.reveal.is-visible li:nth-child(3),
  .module-grid.reveal.is-visible article:nth-child(3) {
    animation-delay: 0.2s;
  }

  .route-steps.reveal.is-visible li:nth-child(4) { animation-delay: 0.3s; }
  .route-steps.reveal.is-visible li:nth-child(5) { animation-delay: 0.4s; }
}

@keyframes nora-breathe {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-9px) rotate(-0.5deg); }
}

@keyframes front-grid-drift {
  from { transform: rotate(-12deg) translate3d(-1.2%, -0.8%, 0); }
  to { transform: rotate(-12deg) translate3d(1.2%, 0.8%, 0); }
}

@keyframes front-orbit {
  to { transform: rotate(360deg); }
}

@keyframes mednora-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.showcase-progress i{transition:transform .35s ease,background .35s ease}
.product-panel{transition:opacity .35s ease,transform .35s ease}
.product-panel[aria-hidden=true]{pointer-events:none}
.site-header{transition:background .3s ease,box-shadow .3s ease}
@media (prefers-reduced-motion:reduce){.hero-woman{mix-blend-mode:normal}}

.hero-actions .button-consultation {
  align-self: flex-start;
  justify-self: start;
  width: fit-content;
}

@media (max-width: 780px) {
  html,
  body {
    overflow-x: clip;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(42px, 13.2vw, 68px);
    line-height: 0.94;
    overflow-wrap: anywhere;
  }

  .section-heading h2,
  .route-heading h2,
  .product-copy h2,
  .mis-copy h2,
  .status-heading h2,
  .safety-copy h2,
  .ownership .section-heading h2,
  .price .section-heading h2,
  .contact-copy h2 {
    max-width: 100%;
    font-size: clamp(40px, 11.5vw, 60px);
    line-height: 0.96;
    overflow-wrap: anywhere;
  }

  .hero-actions .button {
    width: auto;
    min-height: 42px;
    padding-inline: 18px;
    font-size: 11px;
  }

  .price-card strong {
    max-width: 100%;
    font-size: clamp(42px, 12.6vw, 60px);
    letter-spacing: 0;
    line-height: 0.94;
    white-space: nowrap;
  }

  .calculator-total strong {
    max-width: 100%;
    font-size: clamp(48px, 15vw, 66px);
    letter-spacing: 0;
    line-height: 0.94;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .hero-actions .button {
    min-height: 40px;
    padding-inline: 16px;
    font-size: 10px;
  }

  .price-card strong {
    font-size: 42px;
  }
}
