.app-intro {
  padding-block: clamp(38px, 5.6vw, 74px);
}

.app-intro h1 { max-width: none; }
.app-intro h1 em { white-space: nowrap; }

.app-content {
  display: grid;
  gap: clamp(22px, 4vw, 46px);
}

.app-content [id] {
  scroll-margin-top: 24px;
}

.app-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.app-jump a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.app-jump a:hover {
  border-color: #8bbad5;
  background: #e7f3fa;
}

.app-jump a span { color: var(--blue); }

.app-card {
  min-width: 0;
  padding: clamp(14px, 2.2vw, 24px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 34px #102c410a;
}

.app-unlock, .app-repeat {
  display: grid;
  align-items: center;
  gap: clamp(20px, 3.5vw, 42px);
}

.app-copy, .app-step-copy {
  min-width: 0;
}

.app-copy p, .app-step-copy p, .app-section-heading p {
  margin-top: 8px;
  color: var(--muted);
}

.app-copy strong, .app-step-copy strong { color: var(--ink); }

.app-text-link, .app-type-links a {
  font-weight: 800;
  text-underline-offset: 3px;
}

.app-text-link { justify-self: start; }
.app-copy .app-text-link { display: inline-block; margin-top: 16px; }
.app-text-link span { margin-inline: 3px; }

.app-stage {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 13px;
  min-width: 0;
  margin: 0;
  padding: clamp(12px, 2.2vw, 25px);
  border: 1px solid #dceaf2;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 20%, #f8fbfe, #e4eff7 85%);
}

.app-stage figcaption {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.app-phone {
  position: relative;
  width: min(100%, 268px);
  padding: 20px 7px 8px;
  border: 1px solid #283746;
  border-radius: clamp(24px, 7vw, 34px);
  background: linear-gradient(145deg, #596575, #1f2b36 24%, #111822 62%, #465363);
  box-shadow: inset 0 0 0 1px #ffffff40, 0 12px 22px #0b314831;
}

.app-phone::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 40%;
  width: 20%;
  height: 7px;
  border-radius: 10px;
  background: #080e16;
  box-shadow: inset 0 1px 2px #0008;
}

.app-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 709 / 1432;
  border-radius: 12px 12px 24px 24px;
  background: #f6f6f6;
}

.app-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-pointer {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 15%;
  height: 16px;
  transform: translate(-100%, -50%) rotate(var(--angle, 0deg));
  transform-origin: right center;
  filter: drop-shadow(0 0 1px #fff);
  pointer-events: none;
}

.app-pointer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #096ca9;
  clip-path: polygon(0 37%, 68% 37%, 68% 6%, 100% 50%, 68% 94%, 68% 63%, 0 63%);
}

.app-section-heading {
  margin-bottom: 16px;
}

.app-steps, .app-short-codes, .app-compare {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
}

.app-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-steps > li, .app-short-codes > section {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
}

.app-step-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: #dff0fa;
  color: #0b5a8c;
  font-weight: 800;
}

.app-step-copy h3 {
  font-size: clamp(20px, 2.3vw, 26px);
  line-height: 1.17;
  letter-spacing: -.03em;
}

.app-type-links, .app-instructions {
  margin: 12px 0 0;
  padding-inline-start: 1.3em;
  color: var(--muted);
}

.app-type-links li + li, .app-instructions li + li { margin-top: 8px; }
.app-type-links li::marker, .app-instructions li::marker {
  color: var(--blue);
  font-weight: 800;
}

.app-compare .app-stage {
  align-content: start;
}

@media (min-width: 640px) {
  .app-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-compare figcaption { min-height: 2.6em; align-content: center; }
}

@media (min-width: 730px) {
  .app-unlock { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
  .app-unlock .app-copy { padding-inline: clamp(12px, 2vw, 32px) 0; }
  .app-steps, .app-short-codes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-short-codes { grid-template-rows: auto 1fr; }
  .app-short-codes > section { grid-row: span 2; grid-template-rows: subgrid; }
}

@media (min-width: 1000px) {
  .app-steps > li {
    grid-template: auto / minmax(0, 1fr) minmax(0, 1.22fr);
    align-items: center;
  }
  .app-steps .app-stage { padding: 13px; }
  .app-repeat { grid-template-columns: minmax(0, .93fr) minmax(0, 1.6fr); }
  .app-compare .app-stage { padding: 12px; }
}