/* Launch UI dark direction: tokens, base, shared components.
   Zinc neutrals plus one accent used as light (glows, halos), almost never as paint.
   Surfaces are white at fixed opacities, not separate greys. */

:root {
  --bg: #09090B;
  --fg: #FAFAFA;
  --muted: #A1A1AA;
  --on-light: #18181B;
  --line-strong: #D4D4D8;
  --accent: #FB923C;
  --accent-soft: #FDBA74;
  --danger: #F87171;

  --surface-1: rgba(250,250,250,0.02);   /* tile */
  --surface-2: rgba(250,250,250,0.05);   /* field, hover */
  --surface-3: rgba(250,250,250,0.10);   /* frame bezel */
  --border-1: rgba(250,250,250,0.06);
  --border-2: rgba(250,250,250,0.10);
  --border-3: rgba(255,255,255,0.20);    /* badge */

  --grad-text: linear-gradient(93.25deg, #FAFAFA 24.45%, #A1A1AA 73.78%);
  --grad-primary: linear-gradient(180deg, #FAFAFA 0%, rgba(250,250,250,0.8) 100%);
  --grad-glass: linear-gradient(0deg, rgba(250,250,250,0.05) 0%, rgba(250,250,250,0.1) 100%);
  --glow-sm: drop-shadow(0 0 8px rgba(253,186,116,0.5)) drop-shadow(0 0 24px rgba(251,146,60,0.9));
  --glow-lg: drop-shadow(0 0 8px rgba(253,186,116,0.5)) drop-shadow(0 0 32px #FB923C) drop-shadow(0 0 48px rgba(251,146,60,0.7));
  --shadow-btn: 0 1px 2px -1px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.1);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --container: 1312px;
  --gutter: 32px;
  --section-y: 80px;
  --r-btn: 6px;
  --r-inner: 8px;
  --r-tile: 12px;
  --r-frame: 16px;
}

/* ── Base ─────────────────────────────────────────────────────────── */
body { background: var(--bg); color: var(--fg); font-family: var(--font); }
::selection { background: rgba(251,146,60,0.35); color: var(--fg); }

.lx-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.lx-section { padding: var(--section-y) 0; position: relative; }
.lx-center { text-align: center; }

.lx-h2 { font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--fg); margin: 0; text-wrap: balance; }
.lx-h3 { font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -0.02em; color: var(--fg); margin: 0; text-wrap: balance; }
.lx-lede { font-size: 20px; font-weight: 500; line-height: 28px; color: var(--muted); margin: 0; text-wrap: pretty; }
.lx-body { font-size: 16px; line-height: 24px; color: var(--muted); margin: 0; text-wrap: pretty; }
.lx-gradient-text {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@media (forced-colors: active) { .lx-gradient-text { -webkit-text-fill-color: CanvasText; color: CanvasText; background: none; } }

.lx-link { color: var(--fg); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(250,250,250,0.3); text-underline-offset: 3px; transition: text-decoration-color 0.15s; }
.lx-link:hover { text-decoration-color: var(--accent-soft); }

/* ── Buttons ──────────────────────────────────────────────────────── */
.lx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; min-height: 36px; border-radius: var(--r-btn); border: 0;
  font-family: var(--font); font-size: 14px; font-weight: 500; line-height: 20px;
  cursor: pointer; white-space: nowrap; transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.lx-btn-primary { background: var(--grad-primary); color: var(--on-light); box-shadow: var(--shadow-btn); }
.lx-btn-primary:hover { background: var(--fg); box-shadow: var(--shadow-btn), 0 0 24px rgba(251,146,60,0.25); }
.lx-btn-glass { background: var(--grad-glass); color: var(--fg); }
.lx-btn-glass:hover { background: rgba(250,250,250,0.14); }
.lx-btn-lg { padding: 10px 20px; min-height: 44px; font-size: 15px; }
.lx-btn:active { transform: translateY(1px); }

/* ── Badge ────────────────────────────────────────────────────────── */
.lx-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px;
  border: 1px solid var(--border-3); border-radius: 9999px;
  font-size: 12px; font-weight: 600; line-height: 16px; color: var(--muted);
}
.lx-badge-accent { border-color: rgba(253,186,116,0.35); background: rgba(251,146,60,0.12); color: var(--accent-soft); }
.lx-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px;
  border: 1px solid var(--border-2); border-radius: 9999px; background: var(--surface-1);
  font-size: 14px; font-weight: 500; color: var(--fg);
}
.lx-pill svg { flex-shrink: 0; }

/* ── Tile ─────────────────────────────────────────────────────────── */
.lx-tile {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--surface-1); border-radius: var(--r-tile); padding: 24px;
  box-shadow: inset 0 0 0 1px rgba(250,250,250,0.04);
}

/* Glow: radial gradients instead of blur(200px) ellipses, same look, far cheaper to paint. */
.lx-glow {
  position: absolute; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(251,146,60,0.35), rgba(251,146,60,0.12) 55%, transparent 100%);
}

.lx-icon { width: 24px; height: 24px; stroke: var(--fg); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.lx-icon-glow { filter: var(--glow-sm); }

a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 4px; }

/* ── Nav (generated markup with inline styles, restyled here) ──────── */
#jt-nav { background: rgba(9,9,11,0.82) !important; border-bottom: 1px solid var(--border-1) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px); }
#jt-nav .jt-nav-inner { max-width: var(--container) !important; padding: 0 var(--gutter) !important; height: 68px !important; gap: 24px; }
#jt-nav .jt-nav-inner > a:first-child { color: var(--fg) !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; }
#jt-nav .jt-nav-links { gap: 4px !important; font-size: 14px !important; }
#jt-nav .jt-nav-links > a, #jt-nav #free-tools-btn {
  color: var(--fg) !important; font-family: var(--font) !important; font-size: 14px !important; font-weight: 500 !important;
  padding: 8px 16px !important; border-radius: var(--r-btn); transition: background 0.15s;
}
#jt-nav .jt-nav-links > a:hover, #jt-nav #free-tools-btn:hover { background: var(--surface-2); }
/* Active page: the generated nav marks it with an inline font-weight: 700. */
#jt-nav .jt-nav-links > a[style*="font-weight: 700"] { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-2); }
#jt-nav #free-tools-chevron { stroke: var(--fg); stroke-width: 2; }
#jt-nav #free-tools-dropdown { background: #0F0F12 !important; border: 1px solid var(--border-2) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.5) !important; border-radius: var(--r-tile) !important; top: calc(100% + 8px) !important; }
#jt-nav .dp-free-tool-link { color: var(--fg) !important; border-radius: var(--r-btn) !important; }
#jt-nav .dp-free-tool-link:hover { background: var(--surface-2) !important; }
#jt-nav .jt-nav-cta, #mobile-menu .close-menu {
  background: var(--grad-primary) !important; color: var(--on-light) !important; box-shadow: var(--shadow-btn);
  font-size: 14px !important; font-weight: 500 !important; padding: 8px 16px !important; border-radius: var(--r-btn) !important;
}
#jt-nav .jt-nav-cta:hover { background: var(--fg) !important; }
#mobile-menu { background: var(--bg) !important; border-top: 1px solid var(--border-1) !important; }
#mobile-menu > div, #mobile-menu > a:not(.close-menu) { color: var(--fg) !important; border-bottom-color: var(--border-1) !important; }
#mobile-menu > a[href^="/tools/"] { color: var(--muted) !important; }
#mobile-menu .close-menu { padding: 12px 16px !important; }
.jt-hamburger span { background: var(--fg) !important; }

/* ── Footer (generated markup with inline styles, restyled here) ──── */
.jt-footer-section { background: var(--bg) !important; border-top: 1px solid var(--border-1); }
.jt-footer-section .jt-pad { max-width: var(--container) !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
.jt-footer-section a, .jt-footer-section div { color: var(--muted) !important; }
.jt-footer-section .jt-footer-bar > a:first-child { color: var(--fg) !important; font-size: 18px !important; font-weight: 700 !important; }
.jt-footer-section a:hover { color: var(--fg) !important; }
.jt-footer-section a[href*="linkedin"] { background: var(--surface-2) !important; color: var(--fg) !important; border-radius: var(--r-btn) !important; }
.jt-footer-section .mono { font-family: var(--font) !important; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important; }

@media (max-width: 900px) {
  :root { --gutter: 20px; --section-y: 64px; }
  .lx-h2 { font-size: 36px; }
  .lx-lede { font-size: 18px; }
  #mobile-menu { padding-left: 20px !important; padding-right: 20px !important; }
}