/* Shared iPhone hardware: graphite rails, glass bezel and Dynamic Island. */
    .hero-phones .mock-phone,
    .chat-phone,
    .mock-phone,
    .fp-phone-card .mock-phone,
    .hangouts-section .mock-phone,
    .route-phone {
      --phone-radius: 42px;
      border: 2px solid #7d858b;
      border-radius: var(--phone-radius);
      padding: 34px 7px 9px;
      background: #090a0c;
      box-shadow:
        0 0 0 1px #16191c,
        inset 0 0 0 1px #d2d5d7,
        inset 0 0 0 3px #282d31,
        0 28px 55px -18px rgba(0, 0, 0, .55),
        0 7px 14px -8px rgba(0, 0, 0, .65);
      isolation: isolate;
    }

    .hero-phones .mock-phone:hover,
    .chat-phone:hover,
    .mock-phone:hover,
    .route-phone:hover {
      box-shadow: 0 0 0 1px #16191c, inset 0 0 0 1px #d2d5d7,
        inset 0 0 0 3px #282d31, 0 36px 65px -20px rgba(0, 0, 0, .6);
    }

    .chat-phone::before,
    .mock-phone::before,
    .route-phone::before {
      content: "";
      position: absolute;
      z-index: 10;
      top: 8px;
      left: 10px;
      right: 10px;
      height: 26px;
      border-radius: 28px 28px 0 0;
      pointer-events: none;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' viewBox='0 0 240 26'%3E%3Ctext x='19' y='17' fill='%23f5f5f7' font-family='Arial,sans-serif' font-size='10' font-weight='700'%3E9:41%3C/text%3E%3Crect x='84' y='3' width='72' height='20' rx='10' fill='%23000000'/%3E%3Ccircle cx='145' cy='13' r='3' fill='%23141b29'/%3E%3Ccircle cx='145' cy='13' r='1.3' fill='%232a3448'/%3E%3Cg fill='%23f5f5f7'%3E%3Crect x='181' y='13' width='2' height='4' rx='.5'/%3E%3Crect x='185' y='10' width='2' height='7' rx='.5'/%3E%3Crect x='189' y='7' width='2' height='10' rx='.5'/%3E%3C/g%3E%3Cpath d='M196 10q6-5 12 0m-10 3q4-3 8 0' fill='none' stroke='%23f5f5f7' stroke-width='1.5'/%3E%3Ccircle cx='202' cy='16' r='1' fill='%23f5f5f7'/%3E%3Crect x='213' y='8' width='17' height='9' rx='2' fill='none' stroke='%23f5f5f7' stroke-opacity='.6'/%3E%3Crect x='215' y='10' width='12' height='5' rx='1' fill='%23f5f5f7'/%3E%3Cpath d='M232 11v3' stroke='%23f5f5f7' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    }

    .chat-phone::after,
    .mock-phone::after,
    .route-phone::after {
      content: "";
      position: absolute;
      top: 85px;
      left: -4px;
      width: 3px;
      height: 19px;
      border-radius: 2px 0 0 2px;
      background: linear-gradient(90deg, #353a40, #a0a6ac, #41474d);
      box-shadow: 0 35px 0 #737b83, 0 65px 0 #737b83;
      pointer-events: none;
    }

    .hero-phones .mock-phone .mock-screen,
    .chat-phone > .chat-screen,
    .mock-phone > .mock-screen,
    .fp-phone-card .mock-screen,
    .route-phone > .route-screen,
    .route-phone > img {
      border-radius: 8px 8px 32px 32px;
    }

    .chat-screen::after,
    .mock-screen::after,
    .route-screen::after {
      content: "";
      position: absolute;
      z-index: 20;
      bottom: 5px;
      left: 35%;
      width: 30%;
      height: 4px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .85);
      box-shadow: 0 0 1px rgba(0, 0, 0, .7);
      pointer-events: none;
    }

    .route-status { display: none; }
    /* The source capture includes an Android status bar; use the shell's bar. */
    .route-screen > img {
      height: calc(100% + 44px);
      max-width: none;
      margin-top: -22px;
      border-radius: 0;
      object-position: center top;
    }

    .chat-screen { position: relative; }
    .chat-status { display: none; }
    .mock-screen > img { border-radius: 0 !important; }
    .mock-screen > img[src$="route-optimization-app.png"] {
      height: calc(100% + 44px) !important;
      margin-top: -22px;
    }
    @media (max-width: 600px) {
      .hero-phones .mock-phone,
      .fp-phone-card .mock-phone { --phone-radius: 32px; }
      .hero-phones .mock-phone .mock-screen,
      .fp-phone-card .mock-screen { border-radius: 6px 6px 22px 22px; }
    }