/* RTP Bookings — iPhone showcase
   Scoped under .rtpsc; tokens below can be remapped to the site's design tokens. */

.rtpsc {
  /* tokens — resolve to the site's design tokens when present */
  --rtpsc-surface: var(--paper-2, #f2f2f4);   /* panel grey, matches reference */
  --rtpsc-page: var(--paper, #ffffff);
  --rtpsc-ink: var(--ink, #1d1d1f);
  --rtpsc-ink-soft: var(--ink-2, #6e6e73);
  --rtpsc-ink-faint: #c7c7cc;                 /* unrevealed words / idle asides */
  --rtpsc-ink-faint: color-mix(in srgb, var(--rtpsc-ink) 24%, var(--rtpsc-page));
  --rtpsc-phone-bg: var(--paper-3, #e8e8ea);
  --rtpsc-radius: clamp(18px, 2vw, 30px);
  --rtpsc-phone-w: clamp(238px, 22.4vw, 340px);
  --rtpsc-phone-r: clamp(32px, 3.05vw, 46px);
  --rtpsc-font: var(--font, -apple-system, BlinkMacSystemFont, "SF Pro Text",
                "Segoe UI", Roboto, Helvetica, Arial, sans-serif);

  font-family: var(--rtpsc-font);
  color: var(--rtpsc-ink);
  background: var(--rtpsc-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;

  /* break out of a constrained content container to full viewport width,
     like the reference's edge-to-edge showcase panel */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---- pinned panel ---------------------------------------------------- */

.rtpsc__panel {
  margin: 0 clamp(12px, 7.5vw, 110px);
  border-radius: var(--rtpsc-radius);
  background: var(--rtpsc-surface);
}

.rtpsc__stage {
  position: relative;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: clip;
  border-radius: inherit;
}

/* phone ----------------------------------------------------------------*/

.rtpsc__phone {
  position: relative;
  margin: 0;
  width: var(--rtpsc-phone-w);
  aspect-ratio: 1179 / 2556;
  border-radius: var(--rtpsc-phone-r);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .06),
    0 12px 28px rgba(0, 0, 0, .10),
    0 36px 70px -18px rgba(0, 0, 0, .18);
  /* never a blank frame behind crossfades */
  background: var(--rtpsc-phone-bg);
  transform: translateZ(0);
}

.rtpsc__screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
}
.rtpsc__screen.is-active { opacity: 1; }
.rtpsc__phone::after {       /* hairline so light screens don't bleed into panel */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
  pointer-events: none;
}

/* copy columns ----------------------------------------------------------*/

.rtpsc__copy {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: min(300px, 21vw);
}
.rtpsc__copy--left  { left: clamp(20px, 6.5vw, 96px); }
.rtpsc__copy--right { right: clamp(20px, 6.5vw, 96px); }

.rtpsc__step,
.rtpsc__aside {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
}
.rtpsc__step.is-active,
.rtpsc__aside.is-active { opacity: 1; visibility: visible; }

.rtpsc__step p {
  margin: 0;
  padding-left: 1.1em;
  border-left: 2px solid rgba(0, 0, 0, .22);
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.45;
  font-weight: 400;
  color: var(--rtpsc-ink-faint); /* words are revealed to ink by the timeline */
}
.rtpsc__step p strong { font-weight: 600; }
.rtpsc__step .w { color: inherit; }

.rtpsc__aside p {
  margin: 0;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.45;
  color: var(--rtpsc-ink-faint);
}

/* ---- outro ------------------------------------------------------------*/

.rtpsc__outro {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(96px, 16vh, 200px) clamp(20px, 5vw, 48px) clamp(80px, 12vh, 140px);
}

.rtpsc__headline {
  margin: 0 auto;
  max-width: 21em;
  text-align: center;
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.rtpsc__headline-sub {
  display: block;
  font-weight: 600;
  color: var(--rtpsc-ink-faint);
}
.rtpsc__headline .w { color: inherit; }

.rtpsc__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: clamp(28px, 5vh, 48px) 0 0;
  padding: 0;
  list-style: none;
}
.rtpsc__chips li {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--rtpsc-ink);
  color: var(--rtpsc-page);
  font-size: 15px;
  font-weight: 600;
}
.rtpsc__chips li:nth-child(even) {
  background: color-mix(in srgb, var(--rtpsc-ink) 82%, var(--rtpsc-page));
}

/* gallery */

.rtpsc__gallery {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(72px, 12vh, 140px);
}
.rtpsc__card {
  margin: 0;
  border-radius: var(--rtpsc-radius);
  background: var(--rtpsc-surface);
  overflow: clip;
}
.rtpsc__card-phone {
  display: grid;
  place-items: end center;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 44px) 0;
  min-height: clamp(280px, 30vw, 430px);
}
.rtpsc__card-phone img {
  width: min(62%, 300px);
  height: auto;
  border-radius: clamp(24px, 2.6vw, 40px) clamp(24px, 2.6vw, 40px) 0 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
  display: block;
}
.rtpsc__card figcaption {
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.6vw, 36px) clamp(24px, 2.8vw, 40px);
}
.rtpsc__card h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
}
.rtpsc__card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--rtpsc-ink-soft);
}

/* ---- small screens ----------------------------------------------------*/

@media (max-width: 767px) {
  .rtpsc__panel { margin: 0 12px; }
  .rtpsc__stage { height: 100svh; }
  .rtpsc__phone { --rtpsc-phone-w: min(56vw, 248px); width: var(--rtpsc-phone-w); --rtpsc-phone-r: clamp(26px, 7.6vw, 34px); border-radius: var(--rtpsc-phone-r); margin-bottom: 18svh; }
  .rtpsc__copy { width: auto; }
  .rtpsc__copy--left {
    left: 24px; right: 24px; top: auto; bottom: 7svh; transform: none;
  }
  .rtpsc__step p { font-size: 15px; }
  .rtpsc__copy--right { display: none; }
  .rtpsc__gallery { grid-template-columns: 1fr; }
}

/* ---- reduced motion: static alternative -------------------------------*/

@media (prefers-reduced-motion: reduce) {
  .rtpsc__stage { height: auto; padding: clamp(48px, 8vh, 96px) 0; }
  .rtpsc__copy { position: static; transform: none; width: auto; max-width: 320px; margin: 28px auto 0; }
  .rtpsc__step, .rtpsc__aside {
    position: static; transform: none; opacity: 1; visibility: visible; margin-bottom: 22px;
  }
  .rtpsc__step p { color: var(--rtpsc-ink); }
  .rtpsc__aside { display: none; }
  .rtpsc__phone { margin: 0 auto; }
}

/* ---- the App Store tag at the top of the stage --------------------------*/
.rtpsc__store {
  position: absolute; bottom: clamp(22px, 4vh, 40px); left: 50%; transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 0.5em; margin: 0; padding: 0.42em 0.95em;
  border: 1px solid color-mix(in srgb, var(--rtpsc-ink) 14%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--rtpsc-page) 72%, transparent); backdrop-filter: blur(6px);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  color: var(--rtpsc-ink-soft); text-decoration: none;
}
.rtpsc__store i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.rtpsc__store svg { flex: none; opacity: 0.85; }
a.rtpsc__store:hover { color: var(--rtpsc-ink); }
@media (max-height: 790px) { .rtpsc__store { bottom: 8px; } }  /* short laptops: the phone nearly fills the stage */
@media (max-width: 767px) { .rtpsc__store { display: none; } }  /* no room between nav and phone; the phone hero names the app */
@media (prefers-reduced-motion: reduce) { .rtpsc__store { position: static; transform: none; margin: 0 auto 18px; display: table; } }