/* ============================================================
   Mobile hardening (applies to every page via this shared sheet)
   ============================================================ */
/* No element may force the page wider than the screen → kills the
   sideways-scroll / cut-off-on-the-right problem on phones. */
html, body { max-width: 100%; overflow-x: hidden; }
/* Long unbreakable tokens (activation codes, UUIDs, URLs) must wrap
   instead of widening the layout. */
body { overflow-wrap: break-word; word-break: break-word; }
/* iOS Safari auto-zooms when you focus an input whose font-size is < 16px,
   which makes the whole page jump/zoom and look broken. Force 16px on phones
   (desktop keeps the smaller .95rem look from .input-rich below). */
@media (max-width: 640px) {
  .input-rich { font-size: 16px; }
}

/* The full public navigation needs more room than Tailwind's lg breakpoint.
   Keep the compact menu until it can fit beside the product brand cleanly. */
.site-nav-desktop { display: none; }
.site-nav-mobile { display: block; }
@media (min-width: 1380px) {
  .site-nav-desktop { display: flex; }
  .site-nav-mobile { display: none; }
}

/* Premium polish on top of Tailwind. */
:root {
  --grad-from: #6366f1;  /* indigo-500 */
  --grad-via:  #8b5cf6;  /* violet-500 */
  --grad-to:   #d946ef;  /* fuchsia-500 */
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* Subtle mesh-gradient page background — radial blobs blurred into a soft canvas. */
.site-bg {
  background-color: #fafafa;
  background-image:
    radial-gradient(at 12% 18%, rgba(99, 102, 241, 0.10) 0px, transparent 50%),
    radial-gradient(at 88% 14%, rgba(217, 70, 239, 0.10) 0px, transparent 50%),
    radial-gradient(at 50% 96%, rgba(139, 92, 246, 0.08) 0px, transparent 50%);
  transition: background-color .25s ease;
}
.dark .site-bg {
  background-color: #09090b;
  background-image:
    radial-gradient(at 12% 18%, rgba(99, 102, 241, 0.18) 0px, transparent 50%),
    radial-gradient(at 88% 14%, rgba(217, 70, 239, 0.14) 0px, transparent 50%),
    radial-gradient(at 50% 96%, rgba(139, 92, 246, 0.12) 0px, transparent 50%);
}

/* Card with subtle ring + shadow on hover. */
.card {
  background: #ffffff;
  border: 1px solid rgba(228, 228, 231, 0.7);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 10px 30px -12px rgba(99, 102, 241, 0.10);
  transition: box-shadow .25s ease, transform .25s ease, background-color .25s ease, border-color .25s ease;
}
.card:hover {
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 18px 40px -12px rgba(99, 102, 241, 0.18);
}
.dark .card {
  background: #18181b;
  border-color: rgba(63, 63, 70, 0.7);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 10px 30px -12px rgba(99, 102, 241, 0.15);
}
.dark .card:hover {
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 18px 40px -12px rgba(139, 92, 246, 0.25);
}

/* Gradient-filled primary button. */
.btn-primary {
  background: linear-gradient(135deg, var(--grad-from), var(--grad-via));
  color: #fff;
  font-weight: 600;
  padding: 0.7rem 1.2rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px -6px rgba(99, 102, 241, 0.55);
  transition: transform .12s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 10px 24px -6px rgba(99, 102, 241, 0.7); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { filter: grayscale(.4) opacity(.7); cursor: not-allowed; }

/* Input look — taller, soft border, gradient ring on focus. */
.input-rich {
  width: 100%;
  border: 1px solid #e4e4e7;
  background: #fff;
  color: #18181b;
  border-radius: 12px;
  padding: 0.7rem 0.95rem;
  font-size: 0.95rem;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .25s ease;
}
.input-rich::placeholder { color: #a1a1aa; }
.input-rich:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}
.dark .input-rich {
  background: #0f0f10;
  border-color: #3f3f46;
  color: #fafafa;
}
.dark .input-rich::placeholder { color: #52525b; }
.dark .input-rich:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.30);
}

/* Spinner used on the status page. */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(99,102,241,0.25);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Gradient text helper. */
.text-gradient {
  background-image: linear-gradient(135deg, var(--grad-from), var(--grad-via), var(--grad-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Step indicator chip. */
.step-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; padding: .3rem .65rem;
  background: rgba(99,102,241,0.08);
  color: #4338ca;
  border-radius: 999px;
  border: 1px solid rgba(99,102,241,0.18);
}
.step-chip .num {
  width: 18px; height: 18px; border-radius: 999px;
  background: #6366f1; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .7rem;
}
.dark .step-chip {
  background: rgba(99,102,241,0.15);
  color: #c7d2fe;
  border-color: rgba(99,102,241,0.30);
}

/* Stat-chip — small social-proof / ETA pill below hero. */
.stat-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; padding: .25rem .6rem;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(228, 228, 231, 0.8);
  color: #52525b;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.dark .stat-chip {
  background: rgba(24, 24, 27, 0.7);
  border-color: rgba(63, 63, 70, 0.7);
  color: #a1a1aa;
}

/* FAQ accordion — uses native <details>/<summary> so no JS. */
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: #18181b;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-arrow {
  color: #a1a1aa;
  transition: transform .2s ease;
  font-size: 0.85rem;
}
.faq-item[open] .faq-arrow { transform: rotate(180deg); color: #6366f1; }
.faq-item .faq-body {
  padding: 0 1.1rem 1.1rem;
  font-size: 0.875rem;
  color: #3f3f46;
  line-height: 1.55;
  border-top: 1px solid #f4f4f5;
  padding-top: 0.85rem;
  margin-top: -0.25rem;
}
.faq-item[open] summary { color: #4f46e5; }
.dark .faq-item summary { color: #fafafa; }
.dark .faq-item[open] summary { color: #a5b4fc; }
.dark .faq-item .faq-body { color: #d4d4d8; border-top-color: #27272a; }
.dark .faq-item .faq-arrow { color: #71717a; }
.dark .faq-item[open] .faq-arrow { color: #818cf8; }

/* ============================================================
   Admin dark theme
   The admin templates predate the public dark palette and contain many
   light-only utility classes. Keep the compatibility layer scoped to admin
   pages so public product pages remain untouched.
   ============================================================ */
.dark body.admin-page {
  color-scheme: dark;
}

.dark body.admin-page .bg-white {
  background-color: #18181b !important;
}
.dark body.admin-page .bg-zinc-50,
.dark body.admin-page .resp-cards tr {
  background-color: #18181b !important;
}
.dark body.admin-page .bg-zinc-100 { background-color: #27272a !important; }
.dark body.admin-page .bg-zinc-200 { background-color: #3f3f46 !important; }
.dark body.admin-page .bg-zinc-300 { background-color: #52525b !important; }

/* Pale status/capacity tiles become low-contrast tinted surfaces. */
.dark body.admin-page :is(.bg-rose-50, .bg-rose-50\/40, .bg-pink-50\/40) {
  background-color: rgba(136, 19, 55, .22) !important;
}
.dark body.admin-page :is(.bg-rose-100) {
  background-color: rgba(159, 18, 57, .30) !important;
}
.dark body.admin-page :is(.bg-red-50) {
  background-color: rgba(127, 29, 29, .28) !important;
}
.dark body.admin-page :is(.bg-amber-50, .bg-amber-50\/40, .bg-yellow-50\/40,
                           .bg-amber-100) {
  background-color: rgba(120, 53, 15, .25) !important;
}
.dark body.admin-page :is(.bg-emerald-50, .bg-emerald-50\/40, .bg-emerald-100,
                           .bg-teal-50, .bg-teal-50\/40, .bg-teal-100) {
  background-color: rgba(6, 78, 59, .24) !important;
}
.dark body.admin-page :is(.bg-sky-50, .bg-sky-50\/40, .bg-sky-100,
                           .bg-cyan-50, .bg-cyan-50\/40, .bg-cyan-100,
                           .bg-blue-50\/40, .bg-blue-100) {
  background-color: rgba(12, 74, 110, .25) !important;
}
.dark body.admin-page :is(.bg-indigo-50, .bg-indigo-50\/40, .bg-indigo-100,
                           .bg-violet-50, .bg-violet-50\/40, .bg-violet-100,
                           .bg-purple-100) {
  background-color: rgba(76, 29, 149, .24) !important;
}

/* Borders and table dividers must not stay almost white in dark mode. */
.dark body.admin-page :is(.border, .border-b, .border-t) {
  border-color: #3f3f46;
}
.dark body.admin-page :is(.border-zinc-100, .border-zinc-200, .border-zinc-300) {
  border-color: #3f3f46 !important;
}
.dark body.admin-page :is(.border-rose-100, .border-rose-200,
                           .border-pink-100, .border-red-200) {
  border-color: rgba(244, 63, 94, .35) !important;
}
.dark body.admin-page :is(.border-amber-100, .border-amber-200, .border-amber-300,
                           .border-amber-400,
                           .border-yellow-100) {
  border-color: rgba(245, 158, 11, .35) !important;
}
.dark body.admin-page :is(.border-emerald-100, .border-emerald-200,
                           .border-teal-100, .border-teal-200) {
  border-color: rgba(16, 185, 129, .32) !important;
}
.dark body.admin-page :is(.border-sky-100, .border-sky-200,
                           .border-cyan-100, .border-cyan-200,
                           .border-blue-100, .border-blue-200) {
  border-color: rgba(14, 165, 233, .32) !important;
}
.dark body.admin-page :is(.border-indigo-100, .border-indigo-200,
                           .border-violet-100, .border-violet-200,
                           .border-purple-200,
                           .border-purple-300) {
  border-color: rgba(139, 92, 246, .35) !important;
}

/* Light-mode text utilities need brighter dark-mode counterparts. */
.dark body.admin-page :is(.text-zinc-900, .text-zinc-700) { color: #f4f4f5 !important; }
.dark body.admin-page .text-zinc-600 { color: #d4d4d8 !important; }
.dark body.admin-page .text-zinc-500 { color: #a1a1aa !important; }
.dark body.admin-page :is(.text-red-600, .text-red-700, .text-red-800) { color: #fca5a5 !important; }
.dark body.admin-page :is(.text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900,
                           .text-yellow-700) { color: #fcd34d !important; }
.dark body.admin-page :is(.text-green-600, .text-green-700, .text-emerald-600,
                           .text-emerald-700, .text-teal-700) { color: #6ee7b7 !important; }
.dark body.admin-page :is(.text-blue-600, .text-blue-700, .text-sky-700,
                           .text-cyan-700) { color: #7dd3fc !important; }
.dark body.admin-page :is(.text-indigo-600, .text-indigo-700, .text-violet-700,
                           .text-purple-600, .text-purple-700, .text-purple-800,
                           .text-pink-700, .text-rose-700) { color: #c4b5fd !important; }

.dark body.admin-page :is(input, select, textarea) {
  background-color: #09090b;
  color: #f4f4f5;
  border-color: #52525b;
}
.dark body.admin-page :is(input, textarea)::placeholder { color: #71717a; }
.dark body.admin-page :is(input, select, textarea):focus {
  outline-color: #818cf8;
  border-color: #818cf8;
}
.dark body.admin-page option { background-color: #18181b; color: #f4f4f5; }

.dark body.admin-page .shadow,
.dark body.admin-page .shadow-sm,
.dark body.admin-page .shadow-md,
.dark body.admin-page .shadow-lg {
  --tw-shadow-color: rgba(0, 0, 0, .45);
}
.dark body.admin-page .filter-btn {
  background: #27272a;
  color: #d4d4d8;
  border-color: #52525b;
}
.dark body.admin-page .filter-btn:hover { background: #3f3f46; }
.dark body.admin-page .filter-btn.active {
  background: #6366f1;
  color: #fff;
  border-color: #818cf8;
}
.dark body.admin-page .resp-cards tr { border-color: #3f3f46 !important; }
.dark body.admin-page .resp-cards td::before { color: #a1a1aa !important; }
.dark body.admin-page .hover\:bg-zinc-50:hover,
.dark body.admin-page .hover\:bg-zinc-100:hover,
.dark body.admin-page .hover\:bg-zinc-200:hover,
.dark body.admin-page .hover\:bg-zinc-300:hover {
  background-color: #3f3f46 !important;
}
.dark body.admin-page .hover\:text-zinc-900:hover,
.dark body.admin-page .hover\:text-zinc-700:hover {
  color: #fff !important;
}