/* Shared shell: full screen on a phone, a centred phone frame + QR on desktop. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }

.stage { height: 100%; }
.phone {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  container-type: inline-size;
}
.desk-note { display: none; }

@media (min-width: 760px) and (hover: hover) {
  body { background: #EFE9D6 !important; }
  .stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    padding: 24px;
  }
  .phone {
    flex: none;
    width: 390px;
    height: min(844px, calc(100vh - 48px));
    border-radius: 44px;
    box-shadow: 0 0 0 10px #003049, 0 40px 80px -30px rgba(0, 36, 58, 0.6);
  }
  .desk-note {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 260px;
    font-family: 'Readex Pro', system-ui, sans-serif;
    color: #10283A;
  }
  .desk-note h2 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 700; }
  .desk-note p { margin: 0; font-size: 15px; line-height: 1.55; color: #4F5F6B; }
  .desk-qr {
    width: 156px;
    height: 156px;
    padding: 12px;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 14px 24px -14px rgba(18, 48, 42, 0.4);
  }
  .desk-qr img, .desk-qr canvas { display: block; width: 132px !important; height: 132px !important; }
}