.parent-experience { background: #fff; padding: 110px 32px; }
.parent-experience-inner {
  max-width: 1180px;
  display: flex;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap-reverse;
  justify-content: center;
}

.parent-experience-copy { flex: 1 1 400px; min-width: 300px; }
.parent-experience-copy h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: 14px 0 0;
  color: var(--ink);
}
.parent-experience-copy > p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 16px 0 0;
  max-width: 460px;
}

.parent-experience-visual {
  position: relative;
  flex: 0 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px 0 64px;
  overflow: visible;
  /* Shared viewing depth for .phone-frame's 3D tilt + .phone-frame-elevated's
     translateZ (see css/journey/phone-mockup.css). */
  perspective: 1200px;
}

/* Rings scaled up from the icon-scale default to roughly frame the phone's
   own height instead of getting lost behind it. */
.parent-experience-visual .orbit-ring--1 { width: 440px; height: 440px; }
.parent-experience-visual .orbit-ring--2 { width: 540px; height: 540px; }

.parent-watermark {
  bottom: -6px;
  font-size: clamp(52px, 8vw, 100px);
  color: rgba(10, 10, 12, .045);
}

.parent-experience-visual .phone-frame {
  position: relative;
  z-index: 2;
}

/* The ETA card is the piece that lifts off the screen (see
   js/sections/parent-experience.js) -- sits higher than dead-center since
   the flat greeting/name/map content below it should stay partly visible. */
.parent-experience-visual .phone-frame-elevated { top: 30%; }

@media (max-width: 640px) {
  .parent-experience-visual .orbit-ring--1 { width: 320px; height: 320px; }
  .parent-experience-visual .orbit-ring--2 { width: 400px; height: 400px; }
  .parent-watermark { font-size: clamp(40px, 14vw, 64px); }
}

.parent-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 6px 18px 18px;
  position: relative;
}

.parent-greeting { font-size: 12.5px; color: var(--text-faint); font-weight: 600; }

.parent-child-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.parent-child-name { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.parent-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: var(--green);
  background: var(--green-bg);
  padding: 4px 8px;
  border-radius: 9999px;
}
.parent-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }

.parent-route-label {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 600;
}

/* Positioned by .phone-frame-elevated now (see phone-mockup.css) rather
   than sitting in the screen's normal flow -- opaque white (not the old
   translucent accent-tint) so it reads as a solid card lifted off the
   glass, with a border/glow to match. */
.parent-eta-card {
  background: #fff;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 16px;
  padding: 14px 16px;
}
.parent-eta-label { font-size: 12px; font-weight: 700; color: var(--accent-dark); }
.parent-eta-value {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}

.parent-map {
  position: relative;
  margin-top: 14px;
  aspect-ratio: 960 / 480;
  border-radius: 14px;
  overflow: hidden;
  /* Warm neutral instead of the old off-palette mint-green placeholder. */
  background: linear-gradient(160deg, var(--bg-alt), var(--border-3));
}
.parent-map-route .route-track { stroke-width: 8; }
.parent-map-route .route-progress { stroke-width: 4; }
.parent-map-route .bus-marker { transition: transform .8s linear; }

.parent-detail-row {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.parent-detail { display: flex; flex-direction: column; gap: 2px; }
.parent-detail-label { font-size: 11px; color: var(--text-faint); font-weight: 600; }
.parent-detail-value { font-size: 13.5px; color: var(--ink); font-weight: 700; }

/* The "arrived" toast sits as a bottom banner within the phone screen,
   overriding the generic top-right journey-overlay placement. */
.parent-screen [data-overlay="parent-arrival"] {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  top: auto;
  width: auto;
}

@media (max-width: 480px) {
  .parent-experience { padding: 56px 14px; }
  .parent-screen { padding: 6px 14px 14px; }
}