/* The floating design dial (the "dial" partial): bottom-left pill, opens a short list of the designs. Kept neutral
   so it reads as a reviewer's control, not part of either design. Phones: it sits above the call bar. */
.dial { position: fixed; left: 16px; bottom: 16px; z-index: 50; font: 13px/1 system-ui, sans-serif; }
@media (max-width: 759px) { .dial { bottom: 72px; } }
.dial-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.25);
  background: rgba(20, 22, 24, .92); color: #fff; cursor: pointer; font: inherit; font-weight: 600; letter-spacing: .02em; box-shadow: 0 8px 24px -8px rgba(0,0,0,.6); backdrop-filter: blur(6px); }
.dial-btn svg { width: 18px; height: 18px; }
.dial-btn:hover { background: #000; }
.dial-menu { position: absolute; left: 0; bottom: calc(100% + 8px); min-width: 200px; padding: 6px; border-radius: 10px; background: rgba(20, 22, 24, .96); box-shadow: 0 12px 32px -10px rgba(0,0,0,.7); }
.dial-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px; color: #fff; text-decoration: none; font-weight: 500; }
.dial-menu a:hover { background: rgba(255,255,255,.1); }
.dial-menu a[aria-current] { background: rgba(255,255,255,.16); }
.dial-sw { display: inline-flex; gap: 2px; }
.dial-sw i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }