/* ============================================================
   DialPay — custom styles
   Plain CSS that complements Tailwind (loaded via the Play CDN in
   index.html). Base + component classes that were previously written
   with @apply now live here as literal CSS. Tailwind's generated
   utilities load after this file, so utility classes still override
   these components — exactly as before.

   Note: base element rules use `html body { … }` (specificity 0,0,2)
   so they win over Tailwind Preflight's `body { … }` reset regardless
   of injection order.
   ============================================================ */

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

html body {
  font-family: 'Mukta', ui-sans-serif, system-ui, sans-serif;
  color: #131614;             /* --n900 */
  background: #F6F8F6;        /* --n50  */
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Layout rail ---------- */
.wrap {
  margin-inline: auto;
  width: 100%;
  max-width: 1160px;
  padding-inline: 20px;
}
@media (min-width: 480px) {
  .wrap { padding-inline: 28px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: 'Mukta', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  border-radius: 13px;
  padding: 14px 22px;
  transition: transform .15s, background-color .15s, border-color .15s, box-shadow .15s, color .15s;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  background: #0B7A4B;        /* --green-500 */
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(11, 122, 75, 0.55);
}
.btn-primary:hover { background: #096B41; }      /* --green-600 */

.btn-ghost {
  background: transparent;
  color: #075434;            /* --green-700 */
  border: 1.5px solid #C1CBC4;  /* --n300 */
}
.btn-ghost:hover { border-color: #0B7A4B; color: #096B41; }

.btn-lg {
  padding: 17px 28px;
  font-size: 16.5px;
  border-radius: 15px;
}

.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ---------- Section eyebrow ---------- */
.eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0B7A4B;            /* --green-500 */
}

/* ---------- Network logos ---------- */
.net-logo {
  height: 24px;
  width: auto;
  max-width: 76px;
  display: block;
  flex: none;
}

/* ============================================================
   Motion: hold the above-the-fold intro elements hidden until
   GSAP reveals them (prevents a flash of the final state). If
   motion is reduced, JS is disabled, or GSAP fails to load,
   everything is revealed instead — see app.js (`motion-off`).
   ============================================================ */
#site-nav,
#hero-in > div > *,
#hero-mark,
#hero-seal { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  #site-nav,
  #hero-in > div > *,
  #hero-mark,
  #hero-seal { opacity: 1; }
}

html.motion-off #site-nav,
html.motion-off #hero-in > div > *,
html.motion-off #hero-mark,
html.motion-off #hero-seal { opacity: 1; }