/* Shared styles for the landing-page mockups.
   Each mockup HTML is sized at 720×1500 (phone screen aspect, fits inside
   the .phone frame on the landing page). Open in Chrome at that viewport,
   use DevTools → Capture full size screenshot → save as PNG. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 720px; height: 1500px; overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
  background: #050507;
  -webkit-font-smoothing: antialiased;
}

/* Atmospheric gold corner bleed (matches the app's AtmosphericBackground) */
body::before, body::after {
  content: ''; position: absolute;
  width: 700px; height: 700px; border-radius: 50%;
  pointer-events: none;
}
body::before {
  top: -280px; left: -280px;
  background: radial-gradient(circle, rgba(255,212,0,0.18) 0%, transparent 70%);
}
body::after {
  top: -250px; right: -280px;
  background: radial-gradient(circle, rgba(255,212,0,0.10) 0%, transparent 70%);
}

.stage {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  padding: 80px 36px 110px;
  display: flex; flex-direction: column;
}

/* Common atoms */
.kicker {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-size: 22px; letter-spacing: 5px;
  color: #FFD400;
}
.title-xl {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-size: 68px; letter-spacing: 1px; line-height: 0.95;
  color: #fff;
}
.title-xl .gold { color: #FFD400; }

.glass {
  background: linear-gradient(180deg, rgba(20,20,28,0.85) 0%, rgba(12,12,18,0.70) 100%);
  border: 1px solid rgba(255,212,0,0.20);
  border-radius: 18px;
  backdrop-filter: blur(8px);
}

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 100px;
  background: rgba(255,212,0,0.10);
  border: 1px solid rgba(255,212,0,0.40);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px; letter-spacing: 1.6px; color: #FFD400;
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%;
  background: #4ec47c; box-shadow: 0 0 10px #4ec47c; }

/* Generic placeholder card-thumb (no copyrighted art) */
.card-thumb {
  border-radius: 10px;
  background: linear-gradient(135deg, #1a1a26 0%, #0c0c12 100%);
  border: 1px solid rgba(255,212,0,0.30);
  position: relative;
}
.card-thumb::after {
  content: 'CARD'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px; letter-spacing: 3px; color: rgba(255,212,0,0.30);
}

/* Status bar (top of phone) */
.status-bar {
  position: absolute; top: 22px; left: 36px; right: 36px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; color: #B7B7BD; font-weight: 600;
}
.status-bar .time { font-size: 16px; color: #fff; }
.status-bar .icons { display: flex; gap: 6px; font-size: 16px; }