/* Mobile: quiet product presentation, translucent controls and a cropped device.
   The display stage has no box, fill, border, or shadow. */
@media (max-width:700px) {
  body { background: #f8faff; color: #14233b; }
  .shell { width: calc(100% - 40px); }
  .topbar { height: 64px; border-color: rgba(35,63,98,.11); }
  .brand { letter-spacing: -1.1px; font-size: 20px; }
  .brand img { width: 32px; height: 32px; border-radius: 10px; }
  .topbar nav { gap: 10px; }
  .nav-btn {
    border: 1px solid rgba(157,180,205,.35);
    background: rgba(255,255,255,.72);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 5px 18px rgba(67,98,136,.05);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  .hero-copy { padding-top: 38px; }
  .eyebrow { letter-spacing: .18em; color: #517499; }
  h1 { font-size: clamp(37px, 10vw, 46px); letter-spacing: -.055em; line-height: 1.16; margin: 18px 0 16px; }
  h1 em { color: #285bb8; }
  .intro { font-size: 14px; line-height: 1.8; color: #63758a; }
  .download-options { margin-top: 22px; }
  .options-label { font-size: 11px; color: #61748d; }
  .download-choice {
    min-height: 58px;
    border-radius: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(37,80,159,.16);
    background: #245bc2;
  }
  .download-choice:active { transform: scale(.98); }
  .download-details { gap: 4px 14px; }
  .release-notice { margin-top: 7px; font-size: 10px; }
  .hero-bottom { margin-top: 22px; }
  .showcase {
    height: 308px;
    margin: 28px -20px 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
  }
  .showcase .stage-halo { display: none; }
  .showcase .phone.demo-launch {
    top: 14px;
    width: 248px;
    left: 50%;
    transform: translateX(-50%) rotate(-5deg);
    border-radius: 42px;
    padding: 5px;
    background: linear-gradient(100deg,#7c899b,#f1f4f7 18%,#a9b5c2 35%,#ecf0f4 65%,#7c8999);
    box-shadow: 0 0 0 1px #788596, 0 3px 5px rgba(16,29,46,.20), 0 22px 40px rgba(38,62,91,.23);
  }
  .showcase .phone-screen { border-radius: 37px; }
  .showcase::after {
    content: '';
    position: absolute; z-index: 2; pointer-events: none;
    left: 0; right: 0; bottom: 0; height: 58px;
    background: linear-gradient(to bottom,rgba(248,250,255,0),#f8faff 92%);
  }
  .showcase .mock-label {
    top: 24px; right: 18px; bottom: auto;
    max-width: 120px; text-align: center; line-height: 1.35;
    padding: 9px 12px; border-radius: 999px;
    color: #2b5aa0; font-size: 10px;
    background: rgba(255,255,255,.68);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 5px 18px rgba(63,88,120,.09), inset 0 1px rgba(255,255,255,.95);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .features {
    position: relative; z-index: 3;
    border: 1px solid rgba(171,190,211,.3);
    border-radius: 22px; padding: 19px 17px;
    background: rgba(255,255,255,.7);
    box-shadow: inset 0 1px 0 #fff, 0 12px 34px rgba(42,71,111,.055);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  }
  .feature-intro { margin-bottom: 14px; }
  .feature-intro span { color: #5c8b7c; }
  .feature-intro strong { font-size: 13px; }
  .feature-tabs button { min-height: 45px; padding: 4px 9px; }
  .feature-tabs button[aria-pressed="true"]:after { bottom: -19px; }
  footer { border-color: rgba(35,63,98,.1); }
}
@media (max-width:360px) {
  .shell { width: calc(100% - 32px); }
  .showcase { margin-left: -16px; margin-right: -16px; height: 288px; }
  .showcase .phone.demo-launch { width: 226px; top: 12px; }
  .showcase .mock-label { right: 12px; font-size: 9px; padding: 8px 10px; }
  .feature-tabs button { min-height: 40px; }
}
@media (max-width:700px) and (prefers-reduced-transparency:reduce) {
  .nav-btn,.showcase .mock-label,.features { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}