/* ==========================================================================
   softwareSpendROI — visual refresh layer
   --------------------------------------------------------------------------
   Loaded AFTER assets/index-__mNxCxe.css. Every rule here is an appearance
   override of a Tailwind utility the app already emits, so it changes how the
   site LOOKS without changing markup, layout structure, component order,
   routing, tracking, or business logic. No JS is touched.

   Specificity note: Tailwind utilities are single-class (0,1,0). These rules
   match that and win purely on source order, so nothing needs !important
   except the handful of cases marked below where Tailwind itself emits an
   !important or a more specific selector.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --ss-indigo: #4f46e5;
  --ss-indigo-hover: #4338ca;
  --ss-violet: #7c3aed;
  --ss-ink: #0f172a;
  --ss-body: #334155;
  --ss-muted: #5b6b7f;          /* darkened from slate-500 for AA contrast */
  --ss-line: #e6e9ef;
  --ss-line-strong: #d5dae3;
  --ss-surface: #ffffff;
  --ss-surface-sunken: #f7f8fb;

  /* Layered, low-opacity elevation — closer to Material 3 than a hard border. */
  --ss-e1: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .06);
  --ss-e2: 0 2px 4px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .07);
  --ss-e3: 0 4px 8px rgba(15, 23, 42, .04), 0 12px 28px rgba(15, 23, 42, .10);
  --ss-focus: 0 0 0 3px rgba(99, 102, 241, .40);

  --ss-ease: cubic-bezier(.2, 0, 0, 1);       /* Material standard easing */
  --ss-dur: 180ms;
}

html.dark {
  --ss-ink: #f1f5f9;
  --ss-body: #cbd5e1;
  --ss-muted: #9fb0c3;
  --ss-line: #2b3648;
  --ss-line-strong: #3a4557;
  --ss-surface: #172033;
  --ss-surface-sunken: #0f172a;
  --ss-e1: 0 1px 2px rgba(0, 0, 0, .35);
  --ss-e2: 0 2px 6px rgba(0, 0, 0, .40);
  --ss-e3: 0 12px 28px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------------------
   2. Typography
   Same font (Inter, already loaded) — refined rendering, rhythm and tracking.
   -------------------------------------------------------------------------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  letter-spacing: -0.006em;
}

/* Tighter optical tracking as type scales up — the single biggest cheap win
   for making an interface read as "premium" rather than default-Tailwind. */
.text-xs   { letter-spacing: 0; }
.text-sm   { letter-spacing: -0.004em; }
.text-lg   { letter-spacing: -0.011em; }
.text-xl   { letter-spacing: -0.014em; line-height: 1.4; }
.text-2xl  { letter-spacing: -0.019em; line-height: 1.28; }
.text-3xl  { letter-spacing: -0.021em; line-height: 1.20; }
.text-4xl  { letter-spacing: -0.023em; line-height: 1.14; }
.text-5xl  { letter-spacing: -0.025em; line-height: 1.08; }
.text-6xl  { letter-spacing: -0.027em; line-height: 1.05; }

h1, h2, h3 { text-wrap: balance; }
p          { text-wrap: pretty; }

/* Numerals in pricing should align in columns and never reflow width. */
.tabular-nums,
table td, table th { font-variant-numeric: tabular-nums; }

/* Contrast: slate-500/400 on white sat near/below the 4.5:1 AA threshold. */
.text-slate-500 { color: var(--ss-muted); }
.text-slate-400 { color: #64748b; }
html.dark .dark\:text-slate-400 { color: #9fb0c3; }

/* --------------------------------------------------------------------------
   3. Shape — softer, more consistent corner radii
   -------------------------------------------------------------------------- */
.rounded-lg  { border-radius: 12px; }
.rounded-xl  { border-radius: 16px; }
.rounded-2xl { border-radius: 20px; }
.rounded-3xl { border-radius: 26px; }

/* --------------------------------------------------------------------------
   4. Surfaces & elevation
   Cards keep their hairline but gain real depth, so they read as objects
   rather than outlined boxes.
   -------------------------------------------------------------------------- */
.border-slate-200 { border-color: var(--ss-line); }
.border-slate-300 { border-color: var(--ss-line-strong); }
html.dark .dark\:border-slate-700 { border-color: var(--ss-line); }
html.dark .dark\:border-slate-800 { border-color: #232e42; }

.bg-slate-50  { background-color: var(--ss-surface-sunken); }
.bg-slate-100 { background-color: #eef1f6; }

/* Anything that is a bordered, rounded, white card gets elevation + motion. */
.bg-white.rounded-xl,
.bg-white.rounded-2xl,
.bg-white.rounded-3xl {
  box-shadow: var(--ss-e1);
  transition: box-shadow var(--ss-dur) var(--ss-ease),
              transform var(--ss-dur) var(--ss-ease),
              border-color var(--ss-dur) var(--ss-ease);
}

/* Interactive cards (the app already marks these with a hover border change)
   lift instead of only recolouring — clearer affordance, better scanability. */
.hover\:border-indigo-300:hover {
  box-shadow: var(--ss-e3);
  transform: translateY(-2px);
  border-color: #a5b4fc;
}

.shadow-sm { box-shadow: var(--ss-e1); }
.shadow    { box-shadow: var(--ss-e1); }
.shadow-md { box-shadow: var(--ss-e2); }
.shadow-lg { box-shadow: var(--ss-e2); }
.shadow-xl { box-shadow: var(--ss-e3); }
.shadow-2xl{ box-shadow: var(--ss-e3); }

/* --------------------------------------------------------------------------
   5. Buttons & CTAs  (primary CRO surface)
   The gradient primary button is the affiliate CTA. Give it real presence,
   a tactile press state, and a guaranteed 44px touch target.
   -------------------------------------------------------------------------- */
a, button { transition: background-color var(--ss-dur) var(--ss-ease),
                        border-color var(--ss-dur) var(--ss-ease),
                        color var(--ss-dur) var(--ss-ease),
                        box-shadow var(--ss-dur) var(--ss-ease),
                        transform var(--ss-dur) var(--ss-ease),
                        opacity var(--ss-dur) var(--ss-ease); }

.bg-gradient-to-r.from-indigo-600,
.bg-gradient-to-br.from-indigo-600 {
  background-image: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%);
  box-shadow: 0 1px 2px rgba(79, 70, 229, .30), 0 6px 16px rgba(79, 70, 229, .26);
}
.bg-gradient-to-r.from-indigo-600:hover,
.bg-gradient-to-br.from-indigo-600:hover {
  background-image: linear-gradient(135deg, #4338ca 0%, #6023c0 100%);
  box-shadow: 0 2px 4px rgba(79, 70, 229, .32), 0 12px 26px rgba(79, 70, 229, .34);
  transform: translateY(-1px);
}
.bg-gradient-to-r.from-indigo-600:active,
.bg-gradient-to-br.from-indigo-600:active { transform: translateY(0) scale(.995); }

.bg-indigo-600 { background-color: var(--ss-indigo); }
.bg-indigo-600:hover,
.hover\:bg-indigo-700:hover { background-color: var(--ss-indigo-hover); }

/* Comfortable, thumb-friendly hit areas without changing any layout width. */
a[class*="px-"][class*="py-"],
button[class*="px-"][class*="py-"] { min-height: 44px; }

/* Accessible focus ring everywhere (keyboard users had almost none). */
:focus-visible {
  outline: none;
  box-shadow: var(--ss-focus);
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   6. Range slider — the core calculator control on every page
   -------------------------------------------------------------------------- */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(to right, #e2e8f0, #e2e8f0);
}
html.dark input[type="range"]::-webkit-slider-runnable-track { background: #334155; }
input[type="range"]::-moz-range-track {
  height: 8px; border-radius: 999px; background: #e2e8f0;
}
html.dark input[type="range"]::-moz-range-track { background: #334155; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -8px;
  border-radius: 50%; border: 3px solid #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 1px 3px rgba(15,23,42,.28);
  transition: transform var(--ss-dur) var(--ss-ease), box-shadow var(--ss-dur) var(--ss-ease);
}
input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; border: 3px solid #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 1px 3px rgba(15,23,42,.28);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.08); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.14); }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--ss-focus); }

/* --------------------------------------------------------------------------
   7. Forms & selects
   -------------------------------------------------------------------------- */
input[type="text"], input[type="number"], input[type="email"], input[type="search"], select, textarea {
  border-radius: 12px;
  transition: border-color var(--ss-dur) var(--ss-ease), box-shadow var(--ss-dur) var(--ss-ease);
}
input:focus, select:focus, textarea:focus { outline: none; box-shadow: var(--ss-focus); }

/* --------------------------------------------------------------------------
   8. Comparison tables — scanability
   -------------------------------------------------------------------------- */
table { border-collapse: separate; border-spacing: 0; }
table th {
  font-weight: 650;
  letter-spacing: .01em;
  background: var(--ss-surface-sunken);
}
table tbody tr { transition: background-color 120ms var(--ss-ease); }
table tbody tr:hover { background-color: rgba(99, 102, 241, .045); }
html.dark table tbody tr:hover { background-color: rgba(99, 102, 241, .10); }
/* Keep the header visible while scanning long pricing tables. */
table thead th { position: sticky; top: 0; z-index: 2; }

/* --------------------------------------------------------------------------
   9. Emphasis on results  (CRO)
   The winning/recommended row is what the whole page exists to communicate.
   -------------------------------------------------------------------------- */
.ring-2.ring-indigo-500,
.ring-2.ring-indigo-600,
.border-indigo-500, .border-indigo-600 {
  box-shadow: var(--ss-e3), 0 0 0 1px rgba(99,102,241,.35);
}
.bg-indigo-50  { background-color: #eef2ff; }
.bg-emerald-50 { background-color: #ecfdf5; }
.bg-amber-50   { background-color: #fffbeb; }

/* Badges / pills read as labels, not shouty blocks. */
.rounded-full.text-xs { letter-spacing: .01em; font-weight: 700; }

/* --------------------------------------------------------------------------
   10. Header, nav, links
   -------------------------------------------------------------------------- */
header.sticky, .sticky.top-0 { backdrop-filter: saturate(1.6) blur(12px); }

nav a { border-radius: 8px; }
.hover\:text-indigo-600:hover { color: #4338ca; }

/* Underline-on-hover for in-content links only (not nav/buttons/cards). */
.prose a:not([class*="bg-"]):hover,
article a:not([class*="bg-"]):not([class*="rounded"]):hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   11. Images
   -------------------------------------------------------------------------- */
img { image-rendering: -webkit-optimize-contrast; }

/* --------------------------------------------------------------------------
   12. Motion — respect user preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hover\:border-indigo-300:hover,
  .bg-gradient-to-r.from-indigo-600:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   13. Mobile polish
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .text-4xl { font-size: 1.9rem; }
  .text-5xl { font-size: 2.25rem; }
  .text-6xl { font-size: 2.6rem; }
  /* Horizontal-scroll tables get a momentum scroll and an edge fade cue. */
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
}

/* Selection colour matches brand. */
::selection { background: rgba(99, 102, 241, .22); }

/* Nicer scrollbars on desktop without hiding them. */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--ss-line-strong) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: var(--ss-line-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
  *::-webkit-scrollbar-thumb:hover { background: #b6bfcd; background-clip: content-box; }
}