/* Supplemental utilities for hand-authored CRM marketing pages (crm/pages/*.html).
   main.v2.css is content-scanned Tailwind v4 — it only ships classes the ORIGINAL
   site used, so any new utility our pages need is missing and silently does nothing
   (0 gap / 0 padding). These restore the ones we use. Loaded AFTER main.v2.css;
   values match Tailwind v4 defaults. Add here when a page needs a utility the home
   never used. */

.gap-10 { gap: 2.5rem; }
.gap-14 { gap: 3.5rem; }
.gap-20 { gap: 5rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-3 { row-gap: 0.75rem; }
.p-7 { padding: 1.75rem; }
.p-10 { padding: 2.5rem; }
.w-1\.5 { width: 0.375rem; }
.h-1\.5 { height: 0.375rem; }
/* subtle dark card used on dark sections */
.bg-card-dark { background-color: rgba(26, 31, 37, 0.7); }
.py-28 { padding-top: 7rem; padding-bottom: 7rem; }
.p-9 { padding: 2.25rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mb-9 { margin-bottom: 2.25rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.leading-snug { line-height: 1.375; }
.-inset-4 { inset: -1rem; }
/* outline (not box-shadow) so it stacks with shadow-2xl instead of replacing it */
.ring-1 { outline: 1px solid rgba(17, 24, 39, 0.06); outline-offset: -1px; }
/* comparison + callout cards (Why MoverGrid): purged build ships `border`/`border-gray-200`
   but not the 2px-wide highlighted variant or shadow-lg */
.border-2 { border-width: 2px; }
.border-primary { border-color: #2463e9; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* Shimmering "Call"/secondary button. Lived only in the homepage's inline <style>, so the same
   class on the marketing pages (All Features / See Pricing / Why MoverGrid) fell back to plain
   text. Defined here so it works site-wide. Mirror of crm/index.html. */
.mg-call-shimmer {
  position: relative;
  border: 2px solid transparent !important;
  background-image:
    linear-gradient(var(--mg-fill, #323b43), var(--mg-fill, #323b43)),
    linear-gradient(110deg, #7a828c 0%, #dfe4ea 18%, #ffffff 50%, #dfe4ea 82%, #7a828c 100%) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  -webkit-background-clip: padding-box, border-box !important;
  background-size: 100% 100%, 250% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 0 0, 250% 0;
  animation: mg-shimmer 2.8s linear infinite;
}
.mg-call-shimmer:hover { --mg-fill: #3d464f; }
@keyframes mg-shimmer { from { background-position: 0 0, 250% 0; } to { background-position: 0 0, -250% 0; } }
@media (prefers-reduced-motion: reduce) { .mg-call-shimmer { animation: none; } }

@media (min-width: 768px) {
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
}

@media (min-width: 1024px) {
  .lg\:gap-14 { gap: 3.5rem; }
  .lg\:gap-20 { gap: 5rem; }
  .lg\:flex-row-reverse { flex-direction: row-reverse; }
}