/* Delivery Dispatch product page. PURP+ pages wear the dark theme (owner rule); the apps open in
   the shared full-screen viewer like every Platform page. The hero's own top colour runs up under
   the fixed navigation (and Safari's overscroll), so no dark strip sits between them. */
html:has(> body.delivery-page) { background: var(--stage-raised); }
.delivery-page { background: linear-gradient(var(--stage-raised), var(--stage-raised)) top / 100% 480px no-repeat, var(--stage); }
.delivery-page .product-nav__inner { width: var(--content); max-width: none; }

/* A single reserved stage: the actual globe, then the actual app recordings. */
.delivery-hero { --hero-stage-height: clamp(250px, calc(100svh - 485px), 640px); position: relative; isolation: isolate; padding: 12px var(--gutter) 72px; color: #fff; color-scheme: dark; background: linear-gradient(180deg, var(--stage-raised), var(--stage)); }
.delivery-hero__intro { position: relative; z-index: 2; width: min(100%, 960px); margin: 0 auto; text-align: center; }
.delivery-hero h1 { font-size: clamp(48px, 5.8vw, 80px); line-height: .98; font-weight: 650; letter-spacing: -.065em; color: #fff; text-wrap: balance; }
.delivery-hero__intro p { margin: 18px auto 0; color: var(--pdb-purp-lavender, #d9cbff); font-size: 19px; line-height: 1.4; letter-spacing: -.02em; text-wrap: balance; }
.delivery-hero__intro .delivery-hero__tagline { margin-top: 4px; color: #fff; font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
/* One window: the stage takes what the headline and the three lines leave. */
.delivery-hero__scene { position: relative; display: grid; width: var(--content); margin: 18px auto 0; }
.delivery-hero__viewport { grid-area: 1 / 1; position: relative; height: var(--hero-stage-height); min-height: 260px; }
/* Deep space from the first paint, so the globe's first frames arrive on it rather than on a blank. */
.delivery-hero .delivery-hero__globe { --earth-copy-share: 0; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 90% at 50% 115%, #3a1a66, #140024 58%, #08000f); opacity: 0; visibility: hidden; overflow: hidden; border-radius: 24px; transition: opacity .7s ease, visibility 0s .7s; }
.delivery-hero[data-phase="earth"] .delivery-hero__globe, .delivery-hero[data-phase="flight"] .delivery-hero__globe, .delivery-hero[data-phase="city"] .delivery-hero__globe { opacity: 1; visibility: visible; transition-delay: 0s; }
.delivery-hero__globe .globe-pin { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--pdb-purp-lavender, #d9cbff); box-shadow: 0 0 0 5px #d9cbff30, 0 0 20px #a78bfa; }
.delivery-hero__devices { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 28px; transition: opacity .65s ease, transform .65s ease, visibility 0s; }
.delivery-hero:not([data-phase="apps"]) .delivery-hero__devices { opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .65s ease, transform .65s ease, visibility 0s .65s; pointer-events: none; }
.delivery-hero__board { position: relative; width: min(calc(100% - 198px), calc((var(--hero-stage-height) - 20px) * 16 / 9)); min-width: 0; max-height: 100%; overflow: hidden; border: 1px solid var(--pdb-purp-orchid, #a78bfa); border-radius: 18px; background: var(--raised); box-shadow: 0 25px 70px #0006; }
.delivery-hero__film { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.delivery-hero__phone { position: relative; flex: none; width: min(130px, 15%, calc(var(--hero-stage-height) * .4)); padding: 5px; border: 1px solid var(--pdb-purp-orchid, #a78bfa); border-radius: 27px; background: var(--pdb-purp-ink, #17121f); box-shadow: 0 20px 50px #0006; }
.delivery-hero__phone::before { content: ""; position: absolute; z-index: 1; top: 10px; left: 50%; width: 24%; height: 6px; border-radius: 99px; background: var(--pdb-purp-ink, #17121f); transform: translateX(-50%); }
.delivery-hero__phone-screen { overflow: hidden; border-radius: 22px; background: var(--tint-deep); }
.delivery-hero__phone img { display: block; width: 100%; height: auto; object-fit: contain; }
/* Positioned so the stage's shadow (a positioned box) paints under it, not over it. */
.delivery-hero__meaning { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-row: 2; gap: 24px; margin: 18px 0 0; padding: 14px 24px; list-style: none; border-top: 1px solid #d9cbff40; border-bottom: 1px solid #d9cbff40; }
.delivery-hero__meaning li { text-align: center; }
.delivery-hero__meaning strong { display: block; font-size: 20px; font-weight: 620; letter-spacing: -.025em; }
.delivery-hero__meaning span { display: block; margin-top: 5px; color: var(--pdb-purp-lavender, #d9cbff); font-size: 13px; line-height: 1.4; }

.delivery-journey {
  position: relative;
  padding: 100px var(--gutter) 100px;
  background: radial-gradient(ellipse 65% 18% at 50% 0%, #54207853, transparent 80%), var(--stage);
  color: #f8f3ff;
  color-scheme: dark;
}
.delivery-journey__heading { max-width: 950px; margin: 0 auto 48px; text-align: center; }
.delivery-journey__eyebrow { color: #d0a8ef; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.delivery-journey h2 { font-size: clamp(38px, 4.8vw, 64px); line-height: 1; font-weight: 620; letter-spacing: -.056em; text-wrap: balance; }
.delivery-journey__eyebrow + h2 { margin-top: 18px; }
.delivery-journey__heading p { max-width: 690px; margin: 20px auto 0; color: #d0bddf; font-size: 19px; line-height: 1.42; }
/* The seven steps stay in view (pinned under the product bar) through the whole story; the film
   player pins right under them. */
.delivery-journey__waypoints { position: sticky; top: calc(var(--bar-space) - 14px); z-index: 5; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: var(--content); margin: 0 auto 42px; padding: 4px; list-style: none; border: 1px solid #d9baf03e; border-radius: 16px; background: color-mix(in srgb, var(--stage) 86%, #e9d9f5 6%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.delivery-journey__waypoints li + li { border-left: 1px solid #d9baf020; }
.delivery-journey__waypoints button { width: 100%; min-height: 67px; padding: 10px 7px; border: 0; border-radius: 11px; background: transparent; color: #d2bfde; font: inherit; font-size: 12px; font-weight: 630; cursor: pointer; }
.delivery-journey__waypoints button span { display: block; margin-bottom: 6px; color: #b896d2; font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.delivery-journey__waypoints button[aria-current="step"] { background: #efe4f8; color: #281637; box-shadow: 0 2px 14px #0003; }
.delivery-journey__waypoints button[aria-current="step"] span { color: #8535bb; }
.delivery-journey__waypoints button:hover, .delivery-journey__waypoints button:focus-visible { outline: none; background: #dcc4f136; color: #fff; }
.delivery-journey__waypoints button[aria-current="step"]:hover, .delivery-journey__waypoints button[aria-current="step"]:focus-visible { background: #fff; color: #281637; }
.delivery-journey__body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: 48px; width: var(--content); margin: 0 auto; overflow-anchor: none; }
/* No box around the films: a screen recording fills its own framed 16:9 screen, and a phone
   recording stands on the page in its own device frame, so neither shows empty bars. */
.delivery-journey__stage { position: sticky; top: calc(var(--bar-space) + 76px); display: block; min-width: 0; margin: 0; }
.delivery-journey__screen { position: relative; isolation: isolate; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid transparent; border-radius: 20px; transition: border-color .45s ease, box-shadow .45s ease, background-color .45s ease; }
.delivery-journey__stage[data-device="desktop"] .delivery-journey__screen { border-color: #d5b6ef75; background-color: #1b0d29; box-shadow: 0 35px 90px #030007aa, 0 0 85px #9554ca26; }
.delivery-journey__screen::before { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, #78439f50, transparent); opacity: 0; transition: opacity .45s ease; }
.delivery-journey__stage[data-device="phone"] .delivery-journey__screen::before { opacity: 1; }
.delivery-journey__feed { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; background: transparent; }
.delivery-journey__feed.is-shown { opacity: 1; transition: opacity .45s ease; }
/* The recording fills the whole phone screen: the bezel sits inside the box, so "contain" would
   leave thin bands above and below it. */
.delivery-journey__feed[data-device="phone"] { inset: 3% auto; left: 50%; width: auto; max-width: 32%; height: 94%; aspect-ratio: 390 / 844; object-fit: cover; border: 6px solid #180e22; border-radius: 28px; box-shadow: 0 26px 65px #030007a8, 0 0 0 1px #e6d4fa83; transform: translateX(-50%); }
.delivery-journey__film-footer { display: flex; align-items: center; gap: 15px; min-height: 60px; margin-top: 12px; padding: 10px 16px; border-radius: 16px; background: #f0e8f7; color: #281637; }
.delivery-journey__film-count { flex: none; color: #853eb8; font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.delivery-journey__film-footer [data-delivery-hud] { flex: 1; min-width: 0; font-size: 14px; font-weight: 670; line-height: 1.3; }
.delivery-journey__feed:fullscreen { position: static; width: 100%; height: 100%; max-width: none; inset: auto; border: 0; border-radius: 0; background: #12081d; object-fit: contain; opacity: 1; transform: none; }
.delivery-journey__steps { margin: 0; padding: 0; list-style: none; }
.delivery-journey__steps li { display: flex; flex-direction: column; justify-content: center; min-height: 60svh; padding: 32px 0; border-top: 1px solid #dcc1f02c; color: #bca9cb; transition: color .4s ease; }
.delivery-journey__steps li:first-child { border-top: 0; }
.delivery-journey__steps li.is-active { color: #fff; }
.delivery-journey__count { margin-bottom: 18px; color: #d9b5ff; font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.delivery-journey__steps h3 { max-width: 410px; font-size: clamp(30px, 2.6vw, 38px); line-height: 1.05; font-weight: 610; letter-spacing: -.045em; text-wrap: balance; }
.delivery-journey__steps p { max-width: 420px; margin-top: 17px; color: #bdaacc; font-size: 18px; line-height: 1.48; }
.delivery-journey__steps li.is-active p { color: #e5d8ee; }
.delivery-journey__steps a { width: fit-content; margin-top: 24px; color: #efd5ff; font-size: 15px; font-weight: 650; }
.delivery-journey__steps a:hover { color: #fff; }

.delivery-finale { color-scheme: dark; color: #fff; padding-bottom: 100px; background: radial-gradient(ellipse 50% 45% at 50% 58%, #42186d, transparent 85%), var(--stage); }
.delivery-finale h2 { font-size: clamp(38px, 4.8vw, 64px); letter-spacing: -.055em; }
.delivery-finale > p { position: relative; margin-top: 20px; color: #ded0eb; font-size: 19px; }
.delivery-finale .pos-link { color: #ead6fa; }
.delivery-finale .pos-link:hover { color: #fff; }
.delivery-finale .live-cta__actions { margin-top: 38px; }

@media (max-width: 1000px) {
  .delivery-journey__body { grid-template-columns: 1fr; gap: 0; }
  .delivery-journey__waypoints { overflow-x: auto; grid-template-columns: repeat(7, minmax(105px, 1fr)); }
  /* Reserve the same screen for every clip; the film and caption together use
     at most 42% of the available height, leaving the explanation in view. */
  .delivery-journey__stage { z-index: 2; order: -1; justify-self: center; width: min(100%, calc(((100svh - var(--bar-space) - 110px) * .42 - 72px) * 16 / 9)); top: calc(var(--bar-space) + 72px); margin-bottom: 24px; overflow: visible; }
  /* The shared Platform sticky-stage mask covers text passing through the gap
     below the product bar. Children own the corners so this mask is not clipped. */
  .delivery-journey__stage::before { content: ""; position: absolute; z-index: -1; bottom: 100%; left: 50%; width: var(--content); height: calc(var(--bar-space) + 72px); background: var(--stage); opacity: 0; transform: translateX(-50%); pointer-events: none; }
  .delivery-journey__stage.is-pinned::before { opacity: 1; }
  /* Pinned over the scrolling steps: the section's own colour fills the gap under the film, so no
     text shows through it and no box appears around a phone recording. */
  .delivery-journey__stage { background: var(--stage); }
  .delivery-journey__screen { border-radius: 19px; }
  .delivery-journey__film-footer { border-radius: 16px; }
  .delivery-journey__count { display: none; }
  .delivery-journey__steps li { min-height: 39svh; justify-content: flex-start; align-items: center; padding: 28px 0 40px; text-align: center; }
  .delivery-journey__steps h3, .delivery-journey__steps p { max-width: 560px; }
}
@media (max-width: 734px) {
  .delivery-page .product-nav__brand { display: none; }
  .delivery-page .product-nav__title { font-size: 14px; }
  .delivery-hero { padding-top: 28px; padding-bottom: 90px; }
  .delivery-hero h1 { font-size: clamp(46px, 12vw, 68px); }
  .delivery-hero__intro p { margin-top: 16px; font-size: 17px; }
  .delivery-hero__scene { width: var(--content); margin-top: 20px; }
  .delivery-hero__viewport { height: clamp(310px, 90vw, 450px); min-height: 0; }
  .delivery-hero__devices { flex-direction: column; gap: 14px; }
  .delivery-hero__board { flex: none; width: min(100%, 440px); border-radius: 10px; }
  .delivery-hero__phone { width: clamp(58px, 16vw, 84px); padding: 3px; border-radius: 14px; }
  .delivery-hero__phone-screen { border-radius: 10px; }
  .delivery-hero__phone::before { top: 6px; height: 3px; }
  .delivery-hero__meaning { gap: 10px; margin-top: 16px; padding: 15px 0; }
  .delivery-hero__meaning strong { font-size: 15px; line-height: 1.2; }
  .delivery-hero__meaning span { font-size: 12px; }
  .delivery-journey h2 { font-size: clamp(36px, 9vw, 52px); }
  .delivery-journey__heading p { font-size: 18px; }
  .delivery-journey { padding-top: 80px; padding-bottom: 80px; }
  .delivery-journey__waypoints { margin-bottom: 28px; }
  .delivery-journey__stage { width: min(100%, calc(((100svh - var(--bar-space) - 110px) * .42 - 70px) * 16 / 9)); }
  .delivery-journey__screen { border-radius: 12px; }
  .delivery-journey__film-footer { gap: 9px; min-height: 60px; margin-top: 10px; padding: 9px 10px; border-radius: 12px; }
  .delivery-journey__film-footer [data-delivery-hud] { font-size: 11px; }
  .delivery-journey__feed[data-device="phone"] { max-width: 44%; border-width: 4px; border-radius: 18px; }
  .delivery-journey__steps li { min-height: 43svh; padding: 28px 6px 36px; }
  .delivery-journey__count { margin-bottom: 14px; }
  .delivery-journey__steps h3 { font-size: 30px; }
  .delivery-journey__steps p { font-size: 18px; line-height: 1.4; }
  .delivery-finale { padding-bottom: 90px; }
  .delivery-finale > p { font-size: 18px; }
}
@media (max-width: 560px) {
  .delivery-journey__film-count { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .delivery-hero__globe, .delivery-hero__devices { transition: none; }
  .delivery-journey__feed.is-shown, .delivery-journey__screen::before, .delivery-journey__steps li { transition: none; }
}