/* ============================================================
   UV TOOLS DESIGN UPLIFT v2 — shared layer for tool pages.
   Loaded AFTER each tool's inline styles; refines, never rewires.
   Scope: typography, hero depth, form controls, buttons,
   results reward, tables, newsletter block, mobile nav.
   Rule: content always visible without JS; transform-only motion.
   ============================================================ */

/* ---------- 1. Typography: headings are Open Sans, never serif ---------- */
h1, h2, h3, h4,
.hero h1, .card h2, .card h3 {
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: -0.015em;
}
.hero h1 { font-weight: 800 !important; font-size: clamp(26px, 3.2vw, 34px) !important; line-height: 1.18; }
.card h2 { font-weight: 700 !important; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- 2. Hero: depth instead of a flat slab ---------- */
.hero {
  background:
    radial-gradient(900px 420px at 82% -10%, rgba(237,95,38,.16), transparent 60%),
    radial-gradient(700px 380px at -8% 110%, rgba(255,255,255,.07), transparent 55%),
    linear-gradient(135deg, var(--liberty-darker, #2C3168), var(--liberty, #4B52A3) 58%, var(--liberty-dark, #363C78)) !important;
  border-bottom: 3px solid rgba(237,95,38,.55);
  padding-top: 42px !important;
  padding-bottom: 40px !important;
}
.hero .tag {
  background: rgba(237,95,38,.18) !important;
  border-color: rgba(237,95,38,.5) !important;
  font-weight: 700;
  letter-spacing: .06em;
}
.hero p { font-size: 15.5px !important; opacity: .94 !important; }

/* ---------- 3. Cards: calmer elevation, clearer rhythm ---------- */
.card {
  border-radius: 14px !important;
  border-color: rgba(75,82,163,.14) !important;
  box-shadow: 0 1px 2px rgba(26,26,26,.03), 0 10px 30px -18px rgba(44,49,104,.18) !important;
  padding: 26px !important;
}
.card h2 { font-size: 19px !important; }
.card .sub { font-size: 13.5px !important; }

/* ---------- 4. Form controls: away from browser defaults ---------- */
input:not([type="radio"]):not([type="checkbox"]), select, textarea {
  min-height: 44px;
  border: 1.5px solid var(--line, #E6E0D4) !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 14.5px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--liberty, #4B52A3) !important;
  box-shadow: 0 0 0 3.5px rgba(75,82,163,.14) !important;
}
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234B52A3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  padding-right: 34px !important;
}
label.fl { font-size: 13.5px !important; font-weight: 700 !important; color: var(--liberty-darker, #2C3168); }

/* Radio groups become selectable cards */
.radios label {
  border: 1.5px solid var(--line, #E6E0D4) !important;
  border-radius: 10px !important;
  padding: 11px 15px !important;
  background: #fff;
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.radios label:hover { border-color: rgba(75,82,163,.45) !important; }
.radios label:has(input:checked) {
  border-color: var(--liberty, #4B52A3) !important;
  background: rgba(75,82,163,.06);
  box-shadow: 0 0 0 1px var(--liberty, #4B52A3) inset;
}
.radios input[type="radio"] { accent-color: var(--liberty, #4B52A3); width: 16px; height: 16px; }
input[type="checkbox"] { accent-color: var(--liberty, #4B52A3); width: 16px; height: 16px; }

/* ---------- 5. Buttons: crisper, quieter confidence ---------- */
.btn {
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  box-shadow: 0 1px 2px rgba(196,78,30,.25), 0 6px 16px -8px rgba(237,95,38,.45) !important;
  transition: transform .16s ease, box-shadow .2s ease, filter .16s ease !important;
}
.btn:hover { transform: translateY(-1.5px); box-shadow: 0 2px 4px rgba(196,78,30,.25), 0 10px 22px -8px rgba(237,95,38,.5) !important; }
.btn:active { transform: translateY(0); }
.btn.secondary { box-shadow: none !important; }
.btn.secondary:hover { background: rgba(75,82,163,.05) !important; }

/* ---------- 6. Results: the payoff moment ---------- */
.results-card, #results .card, .card.results,
.card:has(> h2#resultsTitle), .card:has(table.deadline-table) {
  border-top: 3px solid var(--orange, #ED5F26) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .results-reveal { animation: uvRise .45s ease both; }
  @keyframes uvRise { from { transform: translateY(8px); } to { transform: translateY(0); } }
}

/* Tables: readable rows, weighted deadlines */
.card table { border-collapse: separate !important; border-spacing: 0; width: 100%; }
.card thead th {
  font-size: 11px !important; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted, #5E646E) !important; font-weight: 800 !important;
  border-bottom: 2px solid rgba(75,82,163,.18) !important; padding: 10px 12px !important;
  background: #FBFAF6;
}
.card tbody td { padding: 13px 12px !important; border-bottom: 1px solid rgba(75,82,163,.09) !important; vertical-align: top; }
.card tbody tr:hover td { background: rgba(75,82,163,.035); }
.card tbody tr:last-child td { border-bottom: none !important; }

/* Countdown chips: bigger, dot-marked */
.chip, .cd, [class*="countdown"] span, td .pill {
  font-weight: 800 !important; border-radius: 30px !important; padding: 4px 12px !important; font-size: 12px !important;
  display: inline-flex; align-items: center; gap: 6px;
}

/* ---------- 7. Newsletter block: integrated, not bolted-on ---------- */
[id*="nlBlock"], .uv-nl, .nl-block,
form[data-nl], div:has(> form input[name="nl_source"]) {
  background: linear-gradient(135deg, #2C3168, #363C78) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  color: #fff;
}
div:has(> form input[name="nl_source"]) h2,
div:has(> form input[name="nl_source"]) h3,
div:has(> form input[name="nl_source"]) strong { color: #fff !important; }
div:has(> form input[name="nl_source"]) p { color: rgba(255,255,255,.82) !important; }
div:has(> form input[name="nl_source"]) label { color: rgba(255,255,255,.85) !important; }

/* ---------- 8. Mobile: nav + density ---------- */
@media (max-width: 640px) {
  .card { padding: 18px !important; }
  .hero h1 { font-size: 24px !important; }
  .card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  nav a, .nav a { white-space: nowrap; }
}