/* ==========================================================================
   APPS page — page-specific layout only. Hero device composition and the
   capability grid; everything else reuses secondary.css / cards.css /
   cta-footer.css.
   ========================================================================== */

.phone-showcase {
  display: flex;
  justify-content: center;
  margin-top: clamp(8px, 2vw, 20px);
}
.phone-device {
  position: relative;
  max-width: 260px;
  width: 100%;
  isolation: isolate;
}
.phone-device__frame {
  display: block;
  width: 100%;
  height: auto;
}

/* The product UI is deliberately HTML, so the screen stays sharp at every size.
   Inset and corner radius are measured pixel-for-pixel against the actual
   screen cutout in images/icons/Iphone.svg (not eyeballed) — see the SVG's
   "Screen" path bounding box and corner curvature. */
.phone-ui {
  position: absolute;
  inset: 1.8% 5.3% 1.85% 5.2%;
  z-index: 1;
  overflow: hidden;
  border-radius: 6.6% / 3%;
  padding: 9% 8% 7%;
  color: #f2f4f6;
  background:
    radial-gradient(circle at 76% 12%, rgba(193, 210, 226, .18), transparent 24%),
    linear-gradient(160deg, #20252b 0%, #101317 42%, #07090b 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  font-family: var(--font-sans);
  text-align: left;
}
/* Photo variant: same measured inset/radius as .phone-ui above, but filled
   with a real app screenshot (object-fit: cover, clip-masked to the
   screen cutout) instead of coded HTML UI. */
.phone-ui--photo {
  padding: 0;
  background: none;
  box-shadow: none;
}
.phone-ui__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.phone-ui__status, .phone-ui__brand, .phone-ui__section-row, .phone-ui__nav, .phone-ui__progress-label { display: flex; align-items: center; justify-content: space-between; }
.phone-ui__status { color: rgba(232,237,242,.72); font-size: clamp(5px, .48vw, 7px); letter-spacing: .03em; margin-bottom: 12%; }
.phone-ui__brand { font-size: clamp(7px, .68vw, 10px); font-weight: 600; letter-spacing: .03em; }
.phone-ui__mark { display: inline-grid; width: 1.7em; height: 1.7em; place-items: center; border: 1px solid rgba(226,233,239,.72); border-radius: .4em; color: #fff; font-size: .72em; }
.phone-ui__avatar { display: grid; width: 1.7em; height: 1.7em; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #cdd4db, #626a73); color: #15181b; font-size: .72em; }
.phone-ui__eyebrow { margin: 14% 0 5%; color: #aeb8c2; font-size: clamp(4px, .43vw, 6px); font-weight: 700; letter-spacing: .16em; }
.phone-ui__title { margin: 0 0 10%; color: #f7f8f8; font-family: var(--font-sans); font-size: clamp(14px, 1.35vw, 20px); font-weight: 500; letter-spacing: -.055em; line-height: 1.04; }
.phone-ui__feature { position: relative; display: flex; min-height: 32%; flex-direction: column; justify-content: flex-end; gap: 4%; padding: 11% 9%; overflow: hidden; border: 1px solid rgba(217,226,235,.38); border-radius: 8%; background: linear-gradient(140deg, rgba(226,234,241,.2), rgba(51,58,65,.18) 45%, rgba(7,9,11,.72)); box-shadow: inset 0 1px rgba(255,255,255,.18); }
.phone-ui__feature::after { content: ""; position: absolute; width: 58%; aspect-ratio: 1; right: -9%; top: -4%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e8eef2 0 4%, #838f99 5% 17%, #242b31 19% 45%, transparent 46%); opacity: .75; }
.phone-ui__feature-label, .phone-ui__order-number { position: relative; z-index: 1; color: #bdc8d1; font-size: clamp(4px, .4vw, 5.5px); font-weight: 700; letter-spacing: .12em; }
.phone-ui__feature strong { position: relative; z-index: 1; font-size: clamp(9px, .9vw, 13px); font-weight: 500; line-height: 1.05; }
.phone-ui__feature > span:not(.phone-ui__feature-label):not(.phone-ui__price) { position: relative; z-index: 1; color: #c6ccd1; font-size: clamp(4px, .4vw, 5.5px); }
.phone-ui__price { position: absolute; z-index: 2; right: 9%; bottom: 10%; color: #f4f6f7; font-size: clamp(6px, .58vw, 8px); font-weight: 600; }
.phone-ui__price b { display: inline-grid; width: 1.65em; height: 1.65em; margin-left: .55em; place-items: center; border-radius: 50%; background: #e2e8ed; color: #13171a; font-size: .9em; }
.phone-ui__section-row { margin: 10% 0 6%; color: #eef1f4; font-size: clamp(5px, .48vw, 7px); font-weight: 600; }
.phone-ui__section-row span:last-child { color: #aeb9c2; font-size: .82em; font-weight: 500; }
.phone-ui__chips { display: flex; gap: 4%; }
.phone-ui__chips span { border: 1px solid rgba(201,211,220,.34); border-radius: 999px; padding: 5% 7%; color: #dce2e7; font-size: clamp(4px, .41vw, 6px); }
.phone-ui__nav { position: absolute; right: 8%; bottom: 5%; left: 8%; color: #8c969f; font-size: clamp(6px, .56vw, 8px); }
.phone-ui__nav span { display: grid; gap: 3px; place-items: center; }
.phone-ui__nav small { font-size: .62em; font-weight: 500; }
.phone-ui__nav .is-active { color: #f2f5f7; }
/* secondary.css's ".chapters__media img" rule (width:auto;height:100%;max-width:60%)
   is more specific than .phone-device__frame alone, so without this override the
   frame image and the .phone-device wrapper it's absolutely-positioned against
   size independently — the frame renders at one box, .phone-ui's inset% resolves
   against a different one, and they visibly drift apart ("two phones"). Pin the
   wrapper to the frame's true aspect ratio and make the frame fill it exactly. */
.phone-device--journey {
  max-width: 220px;
  width: auto;
  height: 100%;
  aspect-ratio: 198.33 / 400.23;
}
.chapters__media .phone-device__frame {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
.phone-ui--order { padding-top: 9%; }
.phone-ui__order-card { display: grid; gap: 9%; margin-top: 12%; padding: 12% 9%; border: 1px solid rgba(216,225,232,.38); border-radius: 8%; background: linear-gradient(145deg, rgba(229,235,240,.16), rgba(22,27,31,.48)); }
.phone-ui__order-card strong { font-size: clamp(8px, .75vw, 11px); font-weight: 500; }
.phone-ui__order-card > span:not(.phone-ui__order-number) { color: #b8c1c9; font-size: clamp(4px, .41vw, 6px); }
.phone-ui__progress { display: flex; justify-content: space-between; position: relative; }
.phone-ui__progress::before { content: ""; position: absolute; top: 50%; right: 9%; left: 9%; height: 1px; background: rgba(204,215,224,.38); }
.phone-ui__progress i { z-index: 1; width: 5px; height: 5px; border-radius: 50%; background: #e6edf2; box-shadow: 0 0 0 2px #2d343a; }
.phone-ui__progress i.is-pending { background: #626c75; }
.phone-ui__progress-label { color: #aab4bd; font-size: clamp(3px, .34vw, 4.5px); }
.phone-ui__info { display: grid; gap: 5%; margin-top: 11%; padding: 0 2%; color: #aeb8c1; font-size: clamp(4px, .41vw, 6px); }
.phone-ui__info strong { color: #f0f3f5; font-size: clamp(8px, .72vw, 10px); font-weight: 500; }
.phone-ui__info small { font-size: .85em; }
.phone-ui__button { display: flex; justify-content: space-between; margin-top: 12%; padding: 7% 9%; border-radius: 999px; background: #e1e8ed; color: #14181b; font-size: clamp(5px, .48vw, 7px); font-weight: 700; }
@media (max-width: 760px) { .phone-device { max-width: 220px; } }

.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: clamp(40px, 5vw, 64px);
}
.capability-card { padding: 30px; }
.capability-card__title { font-family: var(--font-sans); font-weight: 600; color: var(--ivory); font-size: 17px; margin-bottom: 10px; }
.capability-card__desc { color: var(--warm-gray); font-size: 15px; line-height: 1.65; }

@media (max-width: 760px) {
  .capability-grid { grid-template-columns: 1fr; }
}

/* App interface preview — the image stays full-size/uncropped inside the
   shared dh-card--media frame; the caption sits directly on the photo (no
   card-within-a-card), readable via a dedicated left-side scrim. */
.app-preview-frame { position: relative; }
.app-preview-frame .app-preview-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(4,4,5,.86) 0%, rgba(4,4,5,.62) 32%, rgba(4,4,5,.15) 58%, transparent 75%);
}
.app-preview-frame .app-preview-text {
  position: absolute;
  left: clamp(24px, 4.5vw, 64px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: min(480px, calc(100% - 64px));
}
.app-preview-text .case-study__tag { margin-bottom: 20px; display: inline-block; }
.app-preview-text__title {
  font-family: var(--font-serif);
  color: var(--gold-champagne);
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.app-preview-text__desc {
  color: var(--warm-gray);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  margin: 0;
  max-width: 42ch;
}
@media (max-width: 700px) {
  .app-preview-frame .app-preview-scrim {
    background: linear-gradient(0deg, rgba(4,4,5,.92) 0%, rgba(4,4,5,.55) 45%, transparent 75%);
  }
  .app-preview-frame .app-preview-text {
    left: 20px;
    right: 20px;
    top: auto;
    bottom: 20px;
    transform: none;
    width: auto;
  }
  .app-preview-text__title { font-size: clamp(22px, 6vw, 28px); }
  .app-preview-text__desc { font-size: 14px; }
}