.mobile-page .web-header { flex-direction: row; justify-content: space-between; align-items: center; gap: 1rem; }
.mobile-page .web-header .brand { max-width: calc(100% - 3.75rem); }
.mobile-page .back-link { flex-shrink: 0; justify-content: center; min-width: 2.75rem; border: 1px solid var(--color-rule); border-radius: .25rem; font-size: 0; }
.mobile-page .back-link span { font-size: 1.25rem; }
.mobile-hero { display: grid; gap: 2rem; padding-block: 2.5rem 3rem; }
.mobile-hero__copy { min-width: 0; }
.mobile-title { font-size: clamp(2rem, 6.8vw, 3.6rem); line-height: 1.08; letter-spacing: -.045em; font-weight: 700; }
.mobile-title > span { display: block; color: var(--color-accent); }
.mobile-description { max-width: 36rem; margin-top: 1.5rem; color: #46546a; font-size: 1.0625rem; line-height: 1.6; letter-spacing: -.02em; }
.mobile-categories { display: flex; flex-wrap: wrap; gap: .375rem 1rem; margin-top: 1.5rem; color: #46546a; font-size: .8125rem; }
.mobile-categories span + span::before { content: '·'; margin-right: 1rem; }
.phone-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 5%; padding: 1.5rem 1rem; border: 1px solid #edf3fb; border-radius: 1rem; background: radial-gradient(ellipse at 50% 75%, #e5efff, #f5f9ff 78%); }
.hero-devices { width: 100%; display: flex; justify-content: center; align-items: center; gap: 5%; }
.phone-frame { position: relative; flex-shrink: 0; width: 42%; aspect-ratio: 1 / 2.15; border-radius: 13% / 6%; background: #151d26; box-shadow: inset 0 0 0 1px #6f7987, inset 0 0 0 3px #9ca5b0, 0 .75rem 1.5rem #20386126; container-type: inline-size; }
.phone-screen { position: absolute; inset: 2%; padding: 18cqw 5cqw 20cqw; overflow: hidden; border-radius: 11% / 5%; background: #fff; color: var(--color-ink); font-size: 5cqw; line-height: 1.4; }
.phone-notch { position: absolute; z-index: 2; top: 1.6%; left: 27%; width: 46%; height: 4.5%; border-radius: 0 0 4cqw 4cqw; background: #151d26; }
.phone-notch::after { position: absolute; top: 25%; right: 12%; width: 2cqw; height: 2cqw; border-radius: 50%; background: #23364a; content: ''; }
.app-status { position: absolute; top: 4.5cqw; left: 6cqw; right: 6cqw; display: flex; justify-content: space-between; font-weight: 650; font-size: 3.5cqw; }
.app-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4cqw; font-size: 6.5cqw; font-weight: 700; letter-spacing: -.03em; }
.app-icon { width: 5cqw; height: 5cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.app-muted { color: #657085; }
.app-greeting { margin-bottom: 1.5cqw; font-size: 3.8cqw; color: #657085; }
.app-search { display: flex; align-items: center; gap: 3cqw; padding: 3cqw; border: 1px solid #e2eaf6; border-radius: 3cqw; color: #657085; font-size: 4cqw; }
.app-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3cqw; margin: 4cqw 0; text-align: center; font-size: 3.2cqw; color: #526079; }
.app-category > span { display: grid; place-items: center; width: 12cqw; height: 12cqw; margin: 0 auto 2cqw; border-radius: 4cqw; background: #edf4ff; color: var(--color-accent); }
.app-category:first-child > span { color: #fff; background: var(--color-accent); }
.app-category:nth-child(3) > span { color: #218c66; background: #e8f8f1; }
.app-category:nth-child(4) > span { color: #b97706; background: #fff6de; }
.app-subheading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3cqw; font-size: 4.5cqw; font-weight: 650; }
.app-subheading > span { color: var(--color-accent); font-size: 3.5cqw; font-weight: 500; }
.app-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3cqw; }
.app-service { border: 1px solid #e6edf6; border-radius: 3cqw; overflow: hidden; }
.service-photo { height: 23cqw; background-image: url('assets/images/mobile-services.webp'); background-repeat: no-repeat; background-size: 200% auto; background-position: left center; }
.service-photo--fitness { background-position: right center; }
.app-service__copy { padding: 3cqw; }
.app-service__copy strong { display: block; font-size: 4cqw; line-height: 1.35; }
.app-service__copy p { margin-top: 1.5cqw; color: #657085; font-size: 3.5cqw; }
.app-booking { margin-top: 4cqw; padding: 3cqw; border: 1px solid #deebfd; border-radius: 4cqw; background: #f0f6ff; }
.app-booking__title { display: flex; align-items: center; gap: 2cqw; font-size: 4.5cqw; font-weight: 650; }
.app-booking__date { display: flex; align-items: center; justify-content: space-between; margin: 3cqw 0; font-size: 4cqw; }
.app-booking > p { color: #526079; font-size: 3.8cqw; }
.app-primary { display: block; margin-top: 4cqw; padding: 3cqw 1cqw; border-radius: 2cqw; background: var(--color-accent); color: #fff; text-align: center; font-size: 4cqw; font-weight: 600; }
.app-nav { position: absolute; bottom: 4cqw; left: 5cqw; right: 5cqw; display: flex; justify-content: space-around; padding-top: 4cqw; border-top: 1px solid #e7edf5; background: #fff; text-align: center; color: #657085; font-size: 3.3cqw; }
.app-nav > span { display: grid; justify-items: center; gap: 1.5cqw; }
.app-nav > span:first-child { color: var(--color-accent); }
.app-nav .app-icon { width: 6cqw; height: 6cqw; }
.app-tabs { display: flex; justify-content: space-between; gap: 2cqw; margin-bottom: 6cqw; font-size: 3.5cqw; }
.app-tabs > span { padding: 2.5cqw 3cqw; border-radius: 2cqw; color: #657085; background: #f1f5fa; }
.app-tabs > span:first-child { background: #e7f0ff; color: var(--color-accent); }
.app-task { padding: 4cqw; margin-bottom: 4cqw; border: 1px solid #e2eaf7; border-radius: 3cqw; }
.app-task strong { display: block; font-size: 4.5cqw; line-height: 1.4; }
.app-task p { margin-top: 2cqw; font-size: 3.5cqw; color: #657085; }
.app-task__meta { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; margin-top: 3cqw; font-size: 3.5cqw; }
.app-badge { display: inline-block; padding: 1cqw 2cqw; border-radius: 2cqw; background: #e4efff; color: #0857fb; font-size: 3.2cqw; white-space: nowrap; }
.app-badge--green { background: #e5f7ee; color: #23835e; }
.app-task--selected { border-left: 2px solid var(--color-accent); }
.app-progress { height: 1.5cqw; border-radius: 1cqw; margin: 4cqw 0; background: #e8eef7; }
.app-progress > span { display: block; width: 50%; height: 100%; background: var(--color-accent); border-radius: inherit; }
.app-checklist { display: grid; gap: 3cqw; margin: 4cqw 0; padding: 0; list-style: none; font-size: 3.8cqw; }
.app-checklist li { display: flex; align-items: center; gap: 3cqw; }
.app-check { display: grid; place-items: center; flex-shrink: 0; width: 4.5cqw; height: 4.5cqw; border: 1px solid #b8c8df; border-radius: 1cqw; color: #fff; font-size: 3.2cqw; }
.app-check--done { background: var(--color-accent); border-color: var(--color-accent); }
.app-photo-report { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; margin-top: 3cqw; }
.app-photo-report > span { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid #e3ebf5; border-radius: 3cqw; background-color: #f1f6ff; }
.equipment-photo { background-image: url('assets/images/catalog-products.webp'); background-size: 300% 100%; background-position: left center; }
.equipment-photo:nth-child(2) { background-position: center; }
.equipment-photo:nth-child(3) { background-position: right center; }
.app-photo-report > span:last-child { color: var(--color-accent); font-size: 8cqw; }
.phone-notice { position: absolute; right: 3%; bottom: 14%; display: flex; align-items: center; gap: .625rem; width: 38%; padding: .75rem; border: 1px solid #e5f0f7; border-radius: .625rem; background: #fffffff5; box-shadow: 0 .5rem 1.25rem #1a35561a; font-size: clamp(.4rem, 1vw, .75rem); }
.notice-check { display: grid; place-items: center; flex-shrink: 0; width: 1.75em; height: 1.75em; border-radius: 50%; color: #fff; background: #28b879; }
.phone-notice strong { display: block; font-size: 1em; }
.phone-notice > div { min-width: 0; }
.phone-notice p { margin-top: .15em; color: #657085; font-size: .8em; }
.mobile-story { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; padding: 0; margin: 1rem 0 0; list-style: none; font-size: .625rem; color: #526079; }
.mobile-story li { border-top: 1px solid #acc9ff; padding-top: .625rem; }
.mobile-story li:last-child { border-color: var(--color-accent); color: var(--color-accent); }
.mobile-story span { margin-right: .4rem; }
.app-directions { padding-bottom: 2.5rem; }
.app-directions__grid { display: grid; gap: 2.5rem; }
.app-direction { min-width: 0; }
.app-direction + .app-direction { border-top: 1px solid var(--color-rule); padding-top: 2.5rem; }
.app-direction__heading { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.app-direction__number { color: #a7c7ff; font-size: 2.75rem; line-height: 1; font-weight: 600; letter-spacing: -.06em; }
.app-direction__copy { min-width: 0; }
.app-direction h3 { margin: 0 0 .5rem; font-size: 1.375rem; letter-spacing: -.03em; line-height: 1.2; font-weight: 650; }
.app-direction__copy p { color: var(--color-muted); font-size: 1rem; line-height: 1.5; }
.app-features { display: flex; flex-wrap: wrap; gap: .25rem .625rem; padding: 0; margin: .75rem 0 0; list-style: none; color: #526079; font-size: .75rem; line-height: 1.6; }
.app-features li:not(:last-child)::after { content: '·'; margin-left: .625rem; }
.app-demo { position: relative; margin: 0; }
.phone-stage .app-booking .app-primary { display: none; }
.app-preview { position: relative; container-type: inline-size; border: 1px solid #e1eafa; border-radius: .75rem; background: #fff; box-shadow: 0 .5rem 2rem #25395b08; }
.app-preview .phone-screen { position: relative; inset: auto; border-radius: .75rem; padding: 5cqw 4cqw 24cqw; font-size: 4cqw; }
.app-preview .phone-notch, .app-preview .app-status { display: none; }
.app-preview .app-heading { font-size: 5cqw; }
.app-preview .app-categories { margin: 4cqw 0; }
.app-preview .app-category > span { height: 10cqw; width: 10cqw; }
.app-preview .service-photo { height: 25cqw; }
.app-preview .app-booking { margin-top: 4cqw; }
.app-preview .app-primary { margin-top: 3cqw; }
.app-preview .app-task { margin-bottom: 3cqw; }
.app-preview .app-nav { bottom: 4cqw; }
.app-sidecard { display: none; }
.app-demo figcaption { margin-top: 1rem; color: var(--color-muted); font-size: .75rem; line-height: 1.5; }
.app-direction--employee .app-preview .app-heading { margin-bottom: 4cqw; }
.app-direction--employee .app-preview .app-tabs { margin-bottom: 4cqw; }
.integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; margin: 0; padding: 0; list-style: none; }
.integration-grid li { min-width: 0; display: flex; gap: .75rem; }
.integration-grid li > div { min-width: 0; }
.integration-grid li:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--color-rule); }
.integration-grid .line-icon { width: 1.75rem; height: 1.75rem; }
.integration-grid h3 { margin: 0 0 .375rem; font-size: .9375rem; line-height: 1.35; font-weight: 650; }
.integration-grid p { color: var(--color-muted); font-size: .8125rem; line-height: 1.5; }
.integration-description { margin: -1rem 0 1.75rem; color: var(--color-muted); font-size: 1rem; line-height: 1.5; }
.mobile-process .process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
.mobile-process .process__step { align-items: flex-start; gap: .75rem; }
.mobile-process .process__step > div { min-width: 0; }
.mobile-process .process__step::after { display: none; }
.mobile-process .process__step > span { flex-shrink: 0; }
.mobile-process .process__step strong { display: block; font-size: .9375rem; font-weight: 650; }
.mobile-process .process__step p { margin-top: .375rem; color: var(--color-muted); font-size: .8125rem; line-height: 1.5; }
.mobile-process__note { margin-top: 1.5rem; color: var(--color-muted); font-size: .9375rem; line-height: 1.5; }
@media (width < 40rem) {
  .phone-notice { width: 46%; padding: .5rem; gap: .375rem; }
}
@media (min-width: 40rem) {
  .mobile-page .back-link { border: 0; font-size: .875rem; }
  .phone-stage { padding: 2rem; }
  .phone-stage .phone-frame { width: min(39%, 16rem); }
  .phone-notice { font-size: .8125rem; }
  .mobile-story { font-size: .8125rem; }
  .app-preview { max-width: 28rem; margin-inline: auto; }
  .app-demo figcaption { max-width: 28rem; margin-inline: auto; }
}
@media (min-width: 64rem) {
  .mobile-hero { padding-block: 3rem 4rem; }
  .mobile-title { font-size: clamp(2.5rem, 3.4vw, 3.6rem); }
  .app-directions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .app-direction + .app-direction { border-top: 0; border-left: 1px solid var(--color-rule); padding-top: 0; padding-left: 2rem; }
  .app-direction h3 { font-size: 1.625rem; }
  .app-direction__number { font-size: 3.75rem; }
  .app-preview { width: 52%; max-width: 18rem; margin: 0; aspect-ratio: 1 / 2.15; border: 0; border-radius: 13% / 6%; background: #151d26; box-shadow: inset 0 0 0 1px #6f7987, inset 0 0 0 3px #9ca5b0, 0 .75rem 1.5rem #20386126; }
  .app-preview .phone-screen { position: absolute; inset: 2%; border-radius: 11% / 5%; padding: 18cqw 5cqw 20cqw; }
  .app-preview .phone-notch, .app-preview .app-status { display: flex; }
  .app-preview .app-heading { font-size: 6.5cqw; }
  .app-preview .app-categories { margin: 4cqw 0; }
  .app-preview .app-category > span { height: 12cqw; width: 12cqw; }
  .app-preview .service-photo { height: 23cqw; }
  .app-preview .app-booking { margin-top: 4cqw; }
  .app-preview .app-primary { margin-top: 4cqw; }
  .app-direction--client .app-preview .app-primary { margin-top: 2cqw; padding-block: 2cqw; }
  .app-demo figcaption { margin-inline: 0; }
  .app-sidecard { position: absolute; display: block; top: 25%; right: 0; width: 39%; padding: 1rem; border: 1px solid #e1eafa; border-radius: .75rem; background: #fff; box-shadow: 0 .5rem 2rem #25395b0d; font-size: .8125rem; line-height: 1.5; }
  .app-sidecard strong { display: block; margin-bottom: 1rem; font-size: .9375rem; font-weight: 650; }
  .app-timeline { margin: 0; padding: 0; list-style: none; }
  .app-timeline li { position: relative; display: flex; align-items: flex-start; gap: .625rem; padding-bottom: 1rem; color: #526079; font-size: .75rem; }
  .app-timeline li:not(:last-child)::before { position: absolute; width: 1px; top: 1rem; bottom: 0; left: .4375rem; content: ''; background: #dce6f4; }
  .timeline-dot { position: relative; flex-shrink: 0; width: .9375rem; height: .9375rem; margin-top: .15rem; display: grid; place-items: center; border: 1px solid #a6bad9; border-radius: 50%; background: #fff; color: #fff; font-size: .625rem; }
  .timeline-dot--done { background: #28b879; border-color: #28b879; }
  .timeline-dot--active { background: var(--color-accent); border-color: var(--color-accent); }
  .app-timeline small { display: block; margin-top: .25rem; color: var(--color-muted); font-size: .625rem; }
  .app-sidecard--complete { text-align: center; }
  .app-sidecard--complete .notice-check { width: 3rem; height: 3rem; margin: .25rem auto 1rem; font-size: 1.5rem; }
  .app-sidecard--complete strong { margin-bottom: .5rem; }
  .app-sidecard--complete p { color: var(--color-muted); font-size: .75rem; }
  .app-sidecard__action { display: block; margin-top: 1rem; padding: .5rem; border-radius: .25rem; background: #eef5ff; color: var(--color-accent); font-size: .75rem; }
  .integration-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .integration-grid li { padding-inline: 1.5rem; }
  .integration-grid li:first-child { padding-left: 0; }
  .integration-grid li:last-child { padding-right: 0; }
  .integration-grid li + li { border-left: 1px solid var(--color-rule); }
  .integration-grid h3 { font-size: 1rem; }
  .mobile-process .process__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 68.75rem) {
  .mobile-hero { grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr); align-items: center; gap: 3rem; }
  .mobile-description { font-size: 1.125rem; }
  .mobile-title { font-size: clamp(2.5rem, 3.4vw, 3.6rem); }
  .phone-stage { padding: 1.5rem; }
  .phone-stage .phone-frame { width: 40%; }
}
@media (forced-colors: active) {
  .phone-frame, .app-preview { border: 2px solid CanvasText; }
  .phone-stage, .phone-screen, .app-sidecard { background: Canvas; }
  .app-primary, .app-category:first-child > span { border: 1px solid CanvasText; }
}