/* Math Dash landing — shared styles
   Most visual styling lives inline on the elements (ported verbatim from the
   Claude Design prototype). This file holds what inline styles can't express:
   the keyframe animation, the iPhone device frame, and responsive rules. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }

a { -webkit-tap-highlight-color: transparent; }

/* Floating math symbols in the hero + CTA */
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-14px) rotate(var(--r, 0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

/* ───────────────────────────────────────────────────────────
   iPhone device frame (ported from ios-frame.jsx → IOSDevice)
   402 × 874, r:48, dynamic island, status bar, home indicator.
   The screen content keeps its own background + padding inline.
   ─────────────────────────────────────────────────────────── */
.ios-device {
  width: 402px;
  height: 874px;
  border-radius: 48px;
  overflow: hidden;
  position: relative;
  background: #F2F2F7;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.12);
  font-family: -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ios-island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 126px;
  height: 37px;
  border-radius: 24px;
  background: #000;
  z-index: 50;
}

.ios-statusbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 21px 30px 19px;
}

.ios-time {
  font-family: -apple-system, "SF Pro", system-ui, sans-serif;
  font-weight: 590;
  font-size: 17px;
  line-height: 22px;
  color: #000;
}

.ios-glyphs {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ios-glyphs svg { display: block; }

.ios-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ios-home {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 8px;
  pointer-events: none;
}
.ios-home span {
  width: 139px;
  height: 5px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.25);
}

/* Scale wrappers around the mockups (kept from the prototype). The negative
   margins collapse the un-transformed layout box so the page flows tightly
   around the visually-scaled phone. */
.device-scale--hero {
  transform: scale(0.62);
  transform-origin: top center;
  margin: -12px 0 -320px;
}
.device-scale--split {
  transform: scale(0.6);
  transform-origin: center;
  margin: -150px -40px;
}

/* ───────────────────────────────────────────────────────────
   Responsive — the prototype is desktop-fixed. Cap oversized
   type and tighten padding so nothing overflows on phones.
   ─────────────────────────────────────────────────────────── */
.hero-title  { font-size: clamp(44px, 11vw, 74px) !important; }
.section-title,
.cta-title   { font-size: clamp(34px, 8vw, 54px) !important; }

@media (max-width: 900px) {
  .header-inner { padding: 14px 20px !important; }
  .main-nav { gap: 18px !important; }
  .main-nav a:not(:last-child) { display: none; } /* keep only "Get the app" on small screens */
}

@media (max-width: 768px) {
  .hero-inner { padding: 48px 20px 64px !important; gap: 28px !important; }
  .hero-phone { width: 100%; display: flex; justify-content: center; }
  .split, .split--reverse { gap: 24px !important; }
  .split-phone { width: 100%; display: flex; justify-content: center; }
  .stat-divider { display: none !important; }
  .stat-band { gap: 18px 28px !important; }
  .feature-grid { grid-template-columns: 1fr 1fr !important; }
  section[id="how"], section[id="features"] { padding-top: 64px !important; padding-bottom: 40px !important; }
  .cta-card { padding: 48px 28px !important; }
}

@media (max-width: 480px) {
  .feature-grid { grid-template-columns: 1fr !important; }
  .device-scale--hero { transform: scale(0.56); margin: -14px 0 -360px; }
  .device-scale--split { transform: scale(0.54); margin: -170px -60px; }
}