/*
 * JLFG Liquid Glass — premium-Apple aesthetic overlay
 * Applies AFTER jlfg-v1.css. Layers a translucent, glassy, depth-aware look
 * onto the lending surfaces (finance/* and any calculator pages).
 *
 * What this changes:
 *  - Body picks up an ambient color-field background (very subtle).
 *  - .product / .article-card / .result / .glass-card pick up frosted-glass
 *    surfaces with backdrop-blur, soft multi-layer shadows, and specular
 *    inner highlights.
 *  - Form inputs and buttons get glassy rounded surfaces.
 *  - Hero typography scales up with generous spacing.
 *  - Cards and CTAs respond to hover with smooth depth changes.
 *
 * Per-product opt-in via:
 *   <link rel="stylesheet" href="/css/jlfg-v1.css">
 *   <link rel="stylesheet" href="/css/jlfg-liquid-glass.css">
 *
 * Source of truth (git): jlfg-marketing/jlfg-parent/css/jlfg-liquid-glass.css
 */

/* ─── liquid-glass tokens (overlay on top of v1 vars) ──────────────────── */
:root {
  --lg-bg-deep:     #050a14;
  --lg-bg-tilt:     #0a1426;
  /* Bumped opacities — the prior 0.04 alpha was too subtle to read as
     glass against the deep-blue body background. 0.07 + the gradient
     surface below gives a visible "frosted" feel. */
  --lg-glass-bg:    rgba(255, 255, 255, 0.07);
  --lg-glass-bg-hi: rgba(255, 255, 255, 0.11);
  --lg-glass-bg-strong: rgba(255, 255, 255, 0.13);
  --lg-glass-border: rgba(255, 255, 255, 0.16);
  --lg-glass-border-hi: rgba(255, 255, 255, 0.26);
  --lg-glass-border-glow: rgba(120, 180, 255, 0.45);
  /* Specular top-edge highlight + soft outer shadow, plus a subtle
     1px ring that catches the light around the whole card. */
  --lg-shadow-1:
    0 1px 0 0 rgba(255, 255, 255, 0.14) inset,
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 12px 36px -8px rgba(0, 0, 0, 0.65),
    0 2px 12px -2px rgba(0, 0, 0, 0.45);
  --lg-shadow-2:
    0 1px 0 0 rgba(255, 255, 255, 0.22) inset,
    0 0 0 1px rgba(255, 255, 255, 0.10) inset,
    0 20px 56px -12px rgba(0, 0, 0, 0.75),
    0 8px 20px -4px rgba(0, 0, 0, 0.55);
  --lg-glow-blue:   0 0 24px -4px rgba(59, 130, 246, 0.45);
  --lg-glow-green:  0 0 24px -4px rgba(16, 185, 129, 0.45);
  --lg-radius-glass: 18px;
  --lg-radius-glass-sm: 12px;
  --lg-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── TOKEN OVERRIDES — the magic move ─────────────────────────────────
     The lending pages have inline <style> blocks that paint cards with
     `background: var(--jlfg-surface)` etc. By redefining those tokens
     HERE (after jlfg-v1.css loads), every existing inline rule picks
     up the translucent values automatically — no markup changes needed.
     This file is only loaded by /finance/* pages, so other JLFG
     products keep their original solid surfaces.                       */
  --jlfg-surface:        rgba(255, 255, 255, 0.04);
  --jlfg-surface2:       rgba(255, 255, 255, 0.06);
  --jlfg-surface3:       rgba(255, 255, 255, 0.09);
  --jlfg-surface-glass:  rgba(255, 255, 255, 0.07);
  --jlfg-border:         rgba(255, 255, 255, 0.08);
  --jlfg-border-bright:  rgba(255, 255, 255, 0.16);
}

/* ─── body: ambient color field — vivid enough to refract through glass ── */
body {
  background:
    radial-gradient(ellipse 70% 50% at 15% -5%,  rgba(59, 130, 246, 0.28), transparent 60%),
    radial-gradient(ellipse 60% 50% at 95% 110%, rgba(16, 185, 129, 0.22), transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 50%,  rgba(139, 92, 246, 0.12), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 0%,   rgba(56, 189, 248, 0.10), transparent 80%),
    linear-gradient(180deg, var(--lg-bg-deep) 0%, var(--lg-bg-tilt) 100%);
  background-attachment: fixed;
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  min-height: 100vh;
}

/* ─── hero — generous, premium, with quiet color halo ──────────────────── */
.hero,
section.hero {
  position: relative;
  padding: 64px 0 48px;
  margin-bottom: 48px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -60px -60px auto -60px;
  height: 360px;
  background:
    radial-gradient(ellipse 60% 70% at 25% 50%, rgba(59, 130, 246, 0.35), transparent 65%),
    radial-gradient(ellipse 55% 60% at 75% 50%, rgba(16, 185, 129, 0.28), transparent 65%),
    radial-gradient(ellipse 40% 50% at 50% 70%, rgba(139, 92, 246, 0.18), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  opacity: 1;
}
.hero h1,
.hero h2,
.hero .h1 {
  font-family: var(--jlfg-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(40px, 5.5vw, 68px);
  margin: 0 0 16px;
  background: linear-gradient(180deg, #ffffff 0%, #c2d3e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lede,
.hero .lede {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: rgba(226, 232, 240, 0.78);
  font-weight: 400;
  max-width: 680px;
  margin: 0 0 28px;
}
.hero .eyebrow,
.hero .breadcrumb {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.9);
  padding: 8px 14px;
  background: var(--lg-glass-bg);
  border: 1px solid var(--lg-glass-border);
  border-radius: 999px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  margin-bottom: 24px;
}

/* ─── glass-card primitive — covers EVERY card pattern on lending pages ─
   Originally I only listed the canonical names (.product, .article-card,
   etc.) but the pages also use: .path (referral cards), .feature, .step,
   .tier, .how-it-works, .commission-bar, .faq details, and form
   containers. All of these reference var(--jlfg-surface) inline; the
   token override above already gives them translucent fills. This block
   adds the backdrop-filter + shadow on top.                              */
.glass-card,
.product,
.article-card,
.tool-card,
.structure-card,
.newsletter,
.about-jon,
.result,
.path,
.feature,
.step,
.tier,
.how-it-works,
.commission-bar,
.tiers-grid > div,
.faq details,
main form,
.path-card,
.lender-card,
.case-card,
.cta-box,
.tldr,
.industry-card,
.benefit-card {
  /* Layered glass: a vertical gradient (light at top → darker at bottom)
     over the translucent fill, sitting on a backdrop-blur of whatever's
     behind. The gradient is the specular cue that says "glass" to the eye. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
    var(--lg-glass-bg);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--lg-glass-border);
  border-radius: var(--lg-radius-glass);
  box-shadow: var(--lg-shadow-1);
  transition:
    transform 0.4s var(--lg-ease),
    border-color 0.3s var(--lg-ease),
    background 0.3s var(--lg-ease),
    box-shadow 0.4s var(--lg-ease);
  position: relative;
}
/* Top-edge specular highlight — the "rim light" that sells the glass look.
   Implemented as a ::before so it doesn't conflict with the page's inline
   styles on the same selector. */
.glass-card::before,
.product::before,
.article-card::before,
.tool-card::before,
.structure-card::before,
.newsletter::before,
.about-jon::before,
.result::before,
.path::before,
.feature::before,
.step::before,
.tier::before,
.how-it-works::before,
.commission-bar::before,
.faq details::before,
.industry-card::before,
.benefit-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events: none;
}
.glass-card:hover,
.product:hover,
.article-card:hover,
.structure-card:hover,
.path:hover,
.feature:hover,
.industry-card:hover,
.benefit-card:hover,
.path-card:hover,
.lender-card:hover {
  background: var(--lg-glass-bg-hi);
  border-color: var(--lg-glass-border-hi);
  box-shadow: var(--lg-shadow-2);
  transform: translateY(-2px);
}

/* The .commission-bar already has its own accent color — keep its
   character but layer the glass behind it. */
.commission-bar {
  background:
    linear-gradient(180deg, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0.04)),
    var(--lg-glass-bg);
  border-color: rgba(16, 185, 129, 0.30);
}

/* Slight 3D for results — they're the "answer" of the page */
.result {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--lg-glass-border);
}

/* ─── hero CTAs — primary + secondary glass buttons ────────────────────── */
.cta-row a,
.cta-row button,
a.btn,
button.btn,
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--jlfg-font-sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid var(--lg-glass-border);
  transition:
    transform 0.2s var(--lg-ease),
    border-color 0.2s var(--lg-ease),
    background 0.2s var(--lg-ease),
    box-shadow 0.3s var(--lg-ease);
  cursor: pointer;
}
.cta-row a.primary,
a.btn-primary,
button.btn-primary {
  background: linear-gradient(180deg, #4f8fef 0%, #3b82f6 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 24px -6px rgba(59, 130, 246, 0.55),
    0 0 0 1px rgba(59, 130, 246, 0.20);
}
.cta-row a.primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.24) inset,
    0 12px 32px -6px rgba(59, 130, 246, 0.7),
    0 0 0 1px rgba(120, 180, 255, 0.35);
}
.cta-row a.secondary,
a.btn-secondary,
button.btn-secondary {
  background: var(--lg-glass-bg);
  color: var(--jlfg-text);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.cta-row a.secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover {
  background: var(--lg-glass-bg-hi);
  border-color: var(--lg-glass-border-hi);
  transform: translateY(-1px);
}

/* ─── form inputs/selects — glass-styled ───────────────────────────────── */
.field input,
.field select,
.field textarea,
input[type="email"],
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="search"],
select,
textarea {
  background: var(--lg-glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--lg-glass-border);
  border-radius: var(--lg-radius-glass-sm);
  color: var(--jlfg-text);
  padding: 12px 14px;
  font-family: var(--jlfg-font-sans);
  font-size: 15px;
  letter-spacing: -0.005em;
  transition:
    border-color 0.2s var(--lg-ease),
    background 0.2s var(--lg-ease),
    box-shadow 0.2s var(--lg-ease);
  width: 100%;
  box-sizing: border-box;
}
.field input:hover,
.field select:hover,
input:hover,
select:hover,
textarea:hover {
  background: var(--lg-glass-bg-hi);
  border-color: var(--lg-glass-border-hi);
}
.field input:focus,
.field select:focus,
.field textarea:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(120, 180, 255, 0.55);
  background: var(--lg-glass-bg-strong);
  box-shadow:
    0 0 0 4px rgba(59, 130, 246, 0.15),
    0 0 24px -6px rgba(59, 130, 246, 0.4);
}
.field label,
label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.85);
  margin-bottom: 8px;
  display: block;
  letter-spacing: 0.005em;
}

/* ─── value / number outputs — premium mono with subtle glow ───────────── */
.result .value,
.value-num,
.result-grid .value {
  font-family: var(--jlfg-font-mono);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: transparent;
  background: linear-gradient(180deg, #6ea7f8 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: 6px;
}
.result.green .value,
.value-num.green {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.result.amber .value,
.value-num.amber {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.result .label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.9);
  font-weight: 500;
}

/* ─── section headers ──────────────────────────────────────────────────── */
section h2,
section h3,
section > h2,
section > h3 {
  font-family: var(--jlfg-font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: #f1f5f9;
  margin: 0 0 20px;
}

/* Card sub-headers should stay smaller + lighter weight */
.product h4,
.article-card h4,
.structure-card h4 {
  font-family: var(--jlfg-font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--jlfg-text);
  margin-top: 0;
}

/* ─── site header — layout + glass treatment ───────────────────────────── */
/* The .jlfg-header + .brand classes had no styles in v1.css; this is where
   they live now. Layout: flex row, brand on the left, nav on the right.
   On mobile the nav wraps cleanly under the brand. */
header.site,
header.jlfg-header {
  background: rgba(8, 12, 16, 0.6);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid var(--lg-glass-border);
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 0;
}
header.site > .jlfg-container,
header.jlfg-header > .jlfg-container,
header.site > .container,
header.site > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
header.site .brand,
header.jlfg-header .brand,
header.site h1 a {
  font-family: var(--jlfg-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: #f1f5f9;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s var(--lg-ease);
}
header.site .brand:hover,
header.jlfg-header .brand:hover,
header.site h1 a:hover {
  opacity: 0.85;
}
header.site nav,
header.jlfg-header nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
header.site nav a,
header.jlfg-header nav a {
  color: rgba(226, 232, 240, 0.72);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.003em;
  padding: 6px 0;
  transition: color 0.2s var(--lg-ease);
  position: relative;
}
header.site nav a:hover,
header.jlfg-header nav a:hover {
  color: #f1f5f9;
}
header.site nav a[aria-current="page"],
header.jlfg-header nav a[aria-current="page"] {
  color: var(--jlfg-brand-accent, #10b981);
}
header.site nav a[aria-current="page"]::after,
header.jlfg-header nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--jlfg-brand-accent, #10b981);
  opacity: 0.6;
}

@media (max-width: 640px) {
  header.site > .jlfg-container,
  header.jlfg-header > .jlfg-container,
  header.site > .container,
  header.site > div:first-child {
    gap: 12px;
  }
  header.site nav,
  header.jlfg-header nav {
    gap: 16px;
    font-size: 13px;
    width: 100%;
  }
  header.site nav a,
  header.jlfg-header nav a {
    font-size: 13px;
  }
}

/* ─── padding bumps for cards (more breathable) ────────────────────────── */
.product,
.article-card,
.tool-card,
.structure-card,
.newsletter,
.about-jon,
.glass-card {
  padding: 24px;
}
.result {
  padding: 18px;
}

/* ─── tool-card / calculator-specific tightening ───────────────────────── */
.tool-card {
  padding: 32px;
}

/* ─── responsive: tighten hero, generous mobile spacing ────────────────── */
@media (max-width: 720px) {
  .hero { padding: 40px 0 28px; }
  .hero h1, .hero h2 { font-size: 36px; }
  .product, .article-card, .tool-card, .glass-card { padding: 20px; }
  .tool-card { padding: 22px; }
}

/* ─── micro-interactions: shimmer on focus-within for forms ────────────── */
.tool-card:focus-within,
.glass-card:focus-within {
  border-color: var(--lg-glass-border-glow);
}

/* ─── footer — soft, never bold ────────────────────────────────────────── */
footer.site {
  border-top: 1px solid var(--lg-glass-border);
  color: rgba(148, 163, 184, 0.7);
  background: rgba(8, 12, 16, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ─── reduce motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}