/* Phone mockup frame for marketing screenshots. */
.phone-frame {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1320 / 2868;
  border-radius: 44px;
  padding: 12px;
  background: linear-gradient(160deg, #1a1d1f 0%, #2c3033 50%, #1a1d1f 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 30px 60px -20px rgba(15, 23, 42, 0.35),
    0 12px 24px -8px rgba(15, 23, 42, 0.18);
}

.phone-frame--sm {
  max-width: 220px;
  border-radius: 32px;
  padding: 8px;
}

.phone-screen {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  object-fit: cover;
  background: #fff;
}

.phone-frame--sm .phone-screen {
  border-radius: 24px;
}

/* Notch detail. */
.phone-frame::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 26px;
  background: #0a0a0a;
  border-radius: 999px;
  z-index: 1;
}

.phone-frame--sm::before {
  top: 14px;
  height: 20px;
  border-radius: 999px;
}

/* Smooth-scroll for in-page anchors. */
html { scroll-behavior: smooth; }

/* Tailwind's `code` styling override is enough; no further tweaks needed. */