/* SolveSmart 2026 polish layer.
   Kept separate so the individual static pages remain easy to maintain. */
:root {
  --accent-strong: #6657f4;
  --focus-ring: rgba(34, 211, 238, .34);
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(124, 111, 255, .12), transparent 28rem),
    radial-gradient(circle at 92% 22%, rgba(34, 211, 238, .07), transparent 24rem),
    var(--bg);
}

nav, header {
  box-shadow: 0 10px 32px rgba(0, 0, 0, .16);
}

.tool-page {
  padding-top: 34px;
}

.tool-page h1 {
  text-wrap: balance;
}

.tool-tagline {
  max-width: 68ch;
}

.lc-wrap,
.tool-shell {
  width: 100%;
}

.lc-card,
.lc-hero,
.lc-ins,
.related a,
.helpful,
.ad-zone {
  box-shadow: 0 14px 36px rgba(0, 0, 0, .12);
}

.lc-card {
  background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.028));
  border-color: rgba(255,255,255,.13);
}

.lc-card h2 {
  letter-spacing: -.2px;
}

.lc-field label {
  color: rgba(240,240,255,.72);
}

.lc-card input[type=number],
.lc-card input[type=date],
.lc-card input[type=text],
.lc-card input[type=email],
.lc-card input[type=month],
.lc-card input[type=url],
.lc-card select,
.lc-card textarea,
.calc-input,
.calc-select {
  min-height: 46px;
  background: rgba(6, 6, 16, .48);
  border-color: rgba(255,255,255,.18);
}

.lc-card input:focus,
.lc-card select:focus,
.lc-card textarea:focus,
.calc-input:focus,
.calc-select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.lc-btn,
.calc-btn,
.btn-accent {
  background: linear-gradient(135deg, var(--accent-strong), #4d43c8);
  box-shadow: 0 12px 26px rgba(102, 87, 244, .25);
}

.lc-btn:hover,
.calc-btn:hover,
.btn-accent:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.lc-hero {
  background:
    radial-gradient(circle at 50% 0%, rgba(34,211,238,.14), transparent 16rem),
    linear-gradient(145deg, rgba(124,111,255,.2), rgba(34,211,238,.06));
}

.lc-hero .amount {
  letter-spacing: -.04em;
}

.lc-stat,
.lc-cc,
.tip-card,
.tool-card {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.lc-stat:hover,
.lc-cc:hover,
.tip-card:hover {
  transform: translateY(-2px);
  border-color: rgba(34,211,238,.34);
}

.helpful {
  padding: 4px 2px;
}

.helpful h2 {
  margin-top: 34px;
}

.helpful h3 {
  margin: 20px 0 7px;
  font-family: 'Sora', sans-serif;
  font-size: 16px;
}

.helpful a,
.related a {
  color: var(--accent2);
}

.related a:hover {
  border-color: var(--cyan);
  box-shadow: 0 10px 24px rgba(34,211,238,.12);
}

input::placeholder,
textarea::placeholder {
  color: rgba(240,240,255,.42);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  nav {
    padding: 0 16px;
  }

  .nav-links {
    gap: 2px;
    overflow-x: auto;
    max-width: 72vw;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .nav-links a {
    white-space: nowrap;
    padding: 8px 9px;
    font-size: 12px;
  }

  .lc-card {
    padding: 18px;
    border-radius: 16px;
  }

  .lc-hero {
    padding: 22px 16px;
  }

  .lc-g2,
  .lc-sg,
  .lc-cg {
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}