/* Universal Sign-Up — supplemental styles (Tailwind handles the rest via CDN). */

:root {
  --line: #CBD5E1;
  --teal-900: #0B2F3C;
  --teal: #134E63;
  --orange: #F47C20;
  --gold: #D6973A;
}

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

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---- Premium page backdrop: soft mesh of brand-tinted glows ---- */
.app-bg {
  background-color: #F4F7F9;
  background-image:
    radial-gradient(1100px 520px at 12% -8%, rgba(19, 78, 99, 0.10), transparent 60%),
    radial-gradient(900px 480px at 110% 8%, rgba(244, 124, 32, 0.08), transparent 55%),
    radial-gradient(800px 600px at 50% 120%, rgba(214, 151, 58, 0.07), transparent 60%);
}

/* ---- Gradient brand header ---- */
.brand-header {
  background:
    radial-gradient(120% 140% at 85% -20%, rgba(244,124,32,0.20), transparent 55%),
    linear-gradient(135deg, #0B2F3C 0%, #134E63 60%, #15596F 100%);
  position: relative;
  overflow: hidden;
}
/* faint circuit motif echoing the logo */
.brand-header::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 100%);
  mask-image: linear-gradient(90deg, transparent, #000 40%, #000 100%);
  opacity: .5;
  pointer-events: none;
}
.accent-bar { height: 4px; background: linear-gradient(90deg, var(--orange), var(--gold) 55%, var(--orange)); }

/* ---- Premium card ---- */
.premium-card {
  border-radius: 1.5rem;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 24px 60px -28px rgba(11, 47, 60, 0.32),
    0 8px 24px -16px rgba(11, 47, 60, 0.18);
  ring: 1px;
}
.card-band {
  background:
    radial-gradient(120% 180% at 90% -40%, rgba(244,124,32,0.22), transparent 55%),
    linear-gradient(120deg, #0F3F50 0%, #134E63 70%);
  position: relative; overflow: hidden;
}
.card-band::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0);
  background-size: 18px 18px; opacity: .6; pointer-events: none;
}

/* gradient step number badge */
.step-badge {
  background: linear-gradient(135deg, #134E63, #0F3F50);
  color: #fff;
  box-shadow: 0 4px 10px -3px rgba(19,78,99,0.55);
}

/* premium primary CTA */
.btn-premium {
  background: linear-gradient(135deg, #F68B33 0%, #F47C20 55%, #E2680F 100%);
  box-shadow: 0 10px 22px -8px rgba(244,124,32,0.6), 0 2px 0 rgba(255,255,255,0.25) inset;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-premium:hover { transform: translateY(-1.5px); box-shadow: 0 16px 30px -10px rgba(244,124,32,0.7); filter: saturate(1.05); }
.btn-premium:active { transform: translateY(0); }

/* subtle entrance */
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise-in { animation: riseIn .5s cubic-bezier(.2,.7,.2,1) both; }

/* trust chips */
.trust-chip { backdrop-filter: blur(4px); }

/* Signature pad */
.signature-canvas-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  background:
    linear-gradient(#f8fafc 0 0) padding-box;
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  overflow: hidden;
  touch-action: none;            /* let the pad capture touch/stylus */
}

.signature-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

/* Signing baseline */
.signature-canvas-wrap::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 2.25rem;
  border-bottom: 1px dashed #94a3b8;
  pointer-events: none;
}

.signature-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #94a3b8;
  font-size: 0.875rem;
  pointer-events: none;
  user-select: none;
  transition: opacity .2s ease;
}
.signature-canvas-wrap.has-ink .signature-placeholder { opacity: 0; }

@media (min-width: 640px) {
  .signature-canvas-wrap { height: 220px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}