/* Keep the original mockup styling. Bound desktop scale and share one artwork canvas. */
:root {
  --page-width: 1320px;
}
.header-shell {
  max-width: 1440px;
  margin-inline: auto;
}
.footer-width {
  max-width: 1360px;
}
.summary-section .content-width {
  max-width: 1260px;
}
.lifecycle-cards {
  max-width: 1200px;
}
.welcome {
  width: 100%;
  max-width: 1440px;
  height: auto;
  container-type: inline-size;
}
.hero-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 820;
}
.journey-path-mobile {
  display: none;
}
.phone-mockup {
  height: auto;
  max-height: none;
  aspect-ratio: 1 / 2;
}

@media (min-width: 761px) {
  .header-row {
    min-height: 98px;
    gap: clamp(22px, 3vw, 44px);
  }
  .brand {
    width: clamp(122px, 10.2vw, 147px);
  }
  .desktop-nav {
    gap: clamp(24px, 3vw, 44px);
  }
  .nav-trigger {
    font-size: clamp(16px, 1.4vw, 20px);
  }
  .header-contact {
    gap: 24px;
  }
  .phone-link {
    font-size: clamp(15px, 1.2vw, 17px);
  }
  .pill {
    font-size: clamp(15px, 1.4vw, 20px);
  }
  .welcome-copy {
    top: 11%;
    left: 17.8%;
    width: 45%;
  }
  .welcome h1 {
    font-size: 3.3cqw;
  }
  .hero-subtitle {
    font-size: max(17px, 2.15cqw);
    margin-top: 1.4cqw;
    padding: 0.2cqw 1.6cqw 0.35cqw;
  }
  .hero-description {
    font-size: max(12px, 0.95cqw);
    max-width: 90%;
    margin-top: 1cqw;
    border-left-width: 0.7cqw;
    padding: 0.3cqw 0 0.3cqw 0.9cqw;
  }
  .phone-mockup {
    top: 5%;
    right: 16%;
    width: 15%;
    height: auto;
    border-width: 0.31cqw;
    border-right-width: 0.5cqw;
    border-radius: 2.4cqw;
  }
  .phone-screen {
    padding: 1.25cqw;
    gap: 1.25cqw;
    border-radius: 1.9cqw;
  }
  .phone-screen > p {
    font-size: max(8px, 1cqw);
  }
  .phone-screen > img.app-screen-image {
    border-radius: 1.9cqw;
  }
  .phone-speaker {
    top: 0.9cqw;
    height: 0.31cqw;
  }
  .phone-home {
    bottom: 0.56cqw;
    height: 0.19cqw;
  }
  .phone-mockup:after {
    right: -0.75cqw;
    width: 0.25cqw;
  }
  .moment:nth-child(4) {
    right: 5.4%;
  }
  .moment-pin {
    height: 4.125cqw;
  }
  .moment-pin:before {
    left: calc(50% - 0.81cqw);
    border-left-width: 0.81cqw;
    border-right-width: 0.81cqw;
    border-top-width: 1.19cqw;
  }
  .moment-pin:after {
    top: 1.06cqw;
    height: 2.625cqw;
    border-left-width: max(1px, 0.125cqw);
  }
  .pin-dot {
    left: calc(50% - 0.625cqw);
    width: 1.375cqw;
    height: 0.44cqw;
    box-shadow: 0 0 0 0.375cqw white;
  }
  .moment-label {
    top: calc(100% - 3.125cqw);
    font-size: max(11px, 1.05cqw);
    padding: 0.31cqw 0.625cqw;
    border-radius: 0.81cqw;
  }
  .moment:nth-child(4) .moment-label {
    right: -10%;
  }

  /* Caps retain the first version's colors, rounded shapes and outlined type. */
  .intro-copy h2 {
    font-size: clamp(32px, 4.2vw, 55px);
  }
  .intro-copy > p {
    font-size: clamp(17px, 1.55vw, 20px);
  }
  .section-title {
    font-size: clamp(28px, 4.05vw, 52px);
  }
  .workflow-card p {
    font-size: clamp(17px, 1.85vw, 24px);
  }
  .workflow-card h3 {
    font-size: clamp(29px, 3.3vw, 43px);
  }
  .workflow-number {
    width: clamp(84px, 10vw, 125px);
    font-size: clamp(48px, 6.6vw, 84px);
    border-width: clamp(8px, 1.1vw, 13px);
  }
  .workflow-cards {
    gap: clamp(26px, 4vw, 52px);
  }
  .summary-list li {
    font-size: clamp(19px, 2.1vw, 28px);
  }
  .lifecycle-card h3 {
    font-size: clamp(28px, 2.9vw, 38px);
  }
  .lifecycle-card:last-child h3 {
    font-size: clamp(24px, 2.25vw, 31px);
  }
  .lifecycle-card > ol {
    font-size: clamp(15px, 1.5vw, 20px);
  }
  .lifecycle-card header p {
    font-size: clamp(13px, 1.15vw, 16px);
  }
  .lifecycle-number {
    width: clamp(70px, 7vw, 94px);
  }
  .lifecycle-number span {
    font-size: clamp(29px, 3.1vw, 42px);
  }
  .footer-company address,
  .footer-group a {
    font-size: clamp(13px, 1.2vw, 17px);
  }
  .footer-group h2 {
    font-size: clamp(19px, 1.7vw, 23px);
  }
  .footer-bottom {
    font-size: clamp(12px, 1.08vw, 15px);
  }
  .mega-intro h2 {
    font-size: clamp(26px, 2.5vw, 36px);
  }
  .mega-intro p {
    font-size: clamp(16px, 1.35vw, 19px);
  }
  .mega-item strong {
    font-size: clamp(19px, 1.7vw, 24px);
  }
  .mega-item span {
    font-size: clamp(14px, 1.15vw, 16px);
  }
}
@media (min-width: 761px) and (max-width: 1200px) {
  .header-row,
  .desktop-nav {
    gap: 24px;
  }
  .workflow-card h3 {
    font-size: 31px;
  }
  .workflow-card p {
    font-size: 18px;
  }
  .workflow-number {
    width: 90px;
    font-size: 55px;
  }
  .workflow-cards {
    gap: 32px;
  }
  .lifecycle-card h3 {
    font-size: 28px;
  }
  .lifecycle-number {
    width: 70px;
  }
  .lifecycle-card > ol {
    font-size: 15px;
  }
}
@media (min-width: 1900px) {
  .welcome {
    height: auto;
  }
  .workflow-card {
    min-height: 220px;
  }
  .intro-section {
    padding-top: 62px;
  }
  .workflow-section {
    padding-top: 58px;
    padding-bottom: 80px;
  }
  .summary-section {
    padding-top: 50px;
  }
  .lifecycle-card {
    min-height: 450px;
  }
  .lifecycle-card header {
    min-height: 112px;
  }
  .lifecycle-section {
    padding-top: 98px;
  }
  .site-footer {
    padding-top: 55px;
  }
  .footer-brand img {
    width: 140px;
  }
}
@media (max-width: 760px) {
  .welcome {
    max-width: 560px;
    height: auto;
    padding-bottom: 42px;
  }
  .welcome-copy {
    padding-bottom: 28px;
  }
  .hero-visual {
    width: calc(100% - 44px);
    max-width: 440px;
    margin-inline: auto;
    aspect-ratio: 600 / 520;
  }
  .journey-path-wide {
    display: none;
  }
  .journey-path-mobile {
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }
  .phone-mockup {
    top: 5%;
    right: 24%;
    width: 28%;
    height: auto;
  }
  .phone-screen {
    padding: 9%;
  }
  .phone-screen > p {
    font-size: 8px;
  }
  .moment {
    width: 19% !important;
  }
  .moment:nth-child(1) {
    left: 1%;
    top: 16%;
  }
  .moment:nth-child(2) {
    left: 11%;
    top: 47%;
  }
  .moment:nth-child(3) {
    left: 45%;
    top: 69%;
  }
  .moment:nth-child(4) {
    right: 3%;
    top: 43%;
  }
  .moment-label {
    left: 60%;
    top: calc(100% - 27px);
    font-size: 10px;
    padding: 4px 6px;
  }
  .moment:nth-child(4) .moment-label {
    left: auto;
    right: 0;
    top: calc(100% - 10px);
  }
  .moment-pin {
    height: 27px;
  }
  .moment-pin:before {
    left: calc(50% - 5px);
    border-left-width: 5px;
    border-right-width: 5px;
    border-top-width: 7px;
  }
  .moment-pin:after {
    top: 6px;
    height: 17px;
  }
}