/* Landing-style for content pages: FRS 102 (2026), Why Lease Rater, How to use */
:root {
  --brand: #16a34a; /* landing green (adjust here if needed) */
  --ink: #0f172a;
  --muted: #6b7280;
  --line: #e5e7eb;
  --bg: #ffffff;
}

body { background: var(--bg); }

/* Shared containers */
.container { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.prose { line-height: 1.65; font-size: 17px; }
.prose h1, .prose h2, .prose h3 { line-height: 1.25; margin: 0.6em 0 0.4em; }
.prose p { margin: 0.75em 0; }
.prose ul, .prose ol { margin: 0.75em 0 0.75em 1.25em; }

/* Hero (top area) */
.lr-page .hero {
  position: relative;
  background: linear-gradient(180deg, rgba(22,163,74,0.06) 0%, rgba(22,163,74,0.0) 100%);
  color: var(--ink);
  padding: 44px 18px 28px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.lr-page .hero:before {
  content: "";
  position: absolute; inset: -80px -40px auto -40px; height: 220px;
  background: radial-gradient(1200px 220px at 50% -40px, rgba(22,163,74,0.10), rgba(22,163,74,0));
  pointer-events: none;
}
.lr-page .hero-title {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 40px;
  font-weight: 700; /* match landing weight */
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--brand);
}
.lr-page .hero-sub { margin: 0; color: var(--muted); font-size: 16px; }

/* Card look */
.lr-page .card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 18px;
  box-shadow: 0 10px 28px rgba(17,24,39,0.06), 0 0 0 1px rgba(22,163,74,0.08);
}

/* Labels / pills */
.lr-page .label {
  display:inline-block;
  background: rgba(22,163,74,0.10);
  color: var(--brand);
  border: 1px solid rgba(22,163,74,0.30);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Tables */
.lr-page .prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 16px; }
.lr-page .prose th, .lr-page .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.lr-page .prose thead th { background: #f9fafb; }

/* Page spacing */
.lr-page main.container { margin: 20px auto 40px; }

/* === Footer links === */
.lr-footer {
  padding: 20px 0;
  border-top: 1px solid var(--line);
  background: #fafafa;
  font-size: 14px;
  color: #555;
}

.lr-footlinks {
  text-align: right;
  align-self: center;
}

.lr-footlinks a {
  color: var(--brand);
  text-decoration: none;
  margin: 0 4px;
  font-weight: 500;
}

.lr-footlinks a:hover {
  color: #23c276; /* hover accent */
  text-decoration: underline;
}

/* --- Footer layout & theming --- */
.lr-footer { 
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 18px 0;
}

.lr-footer .lr-footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between; /* brand left, links right */
  gap: 16px;
  flex-wrap: wrap; /* keeps it tidy on small screens */
}

.lr-footbrand .lr-logoimg {
  height: 140px;
  width: auto;
  opacity: 0.95;
}

.lr-footlinks {
  display: inline-flex;     /* force one horizontal row */
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;          /* wrap neatly on very small widths */
  font-size: 14px;
  color: var(--brand);      /* make the text green */
}

.lr-footlinks a {
  color: var(--brand);      /* links green */
  text-decoration: none;
}

.lr-footlinks a:visited { color: var(--brand); }
.lr-footlinks a:hover { text-decoration: underline; }

/* --- Extra spacing fix for content pages --- */
.lr-page .hero + .container,
.lr-page .hero + main.container {
  margin-top: 24px; /* breathing room below buttons */
}

.lr-page .card {
  margin-top: 20px; /* ensure cards don't collide with preceding elements */
}

/* --- Edge breathing room for calculator & batch pages --- */
.lr-main { 
  padding-left: 24px;
  padding-right: 24px;
}

/* Keep larger screens tidy */
@media (min-width: 1200px) {
  .lr-main { 
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* --- Homepage breathing room (button & cards) --- */
.lr-main .hero {
  /* more space below the hero so cards don't crowd it */
  margin-bottom: 24px;
  padding-bottom: 12px; /* gentle extra space inside */
}

.lr-main .hero .cta-row,
.lr-main .hero .lr-cta-row,
.lr-main .hero .actions {
  /* in case the template uses any of these class names */
  gap: 14px;
  margin-bottom: 18px;
}

/* If the first set of feature cards sits right after the hero,
   increase the row gap without touching other pages */
.lr-main .hero + .cards,
.lr-main .hero + .cards-grid,
.lr-main .hero + .features,
.lr-main .hero + .lr-cards {
  margin-top: 12px;
}

/* --- Make "See how it works" look like a secondary pill button --- */
/* Styles the link immediately after the first hero CTA */
.lr-main .hero .cta-row a + a,
.lr-main .hero .actions a + a,
.lr-main .hero > a + a {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid rgba(22,163,74,0.25);
  border-radius: 999px;
  background: rgba(22,163,74,0.06);
  box-shadow: 0 8px 22px rgba(22,163,74,0.12);
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  margin-left: 12px;   /* nice gap from the primary button */
  line-height: 1.1;
  white-space: nowrap;
}

.lr-main .hero .cta-row a + a:hover,
.lr-main .hero .actions a + a:hover,
.lr-main .hero > a + a:hover {
  background: rgba(22,163,74,0.12);
  border-color: rgba(22,163,74,0.35);
  text-decoration: none;
}

.lr-main .hero .cta-row a + a:active,
.lr-main .hero .actions a + a:active,
.lr-main .hero > a + a:active {
  transform: translateY(0.5px);
}

/* --- Extra spacing under pricing and PDF cards --- */
.lr-page .card {
  margin-bottom: 28px; /* give all cards more breathing room */
}

/* Specifically target the pricing section */
.lr-page .pricing.card {
  margin-bottom: 40px; /* even bigger gap before disclaimer/footer */
}

/* If PDF report card has its own class, catch it too */
.lr-page .pdf.card {
  margin-bottom: 40px;
}

/* === Section spacing fixes for home page === */
#how.container.section {
  margin-top: 25px;   /* push "How it works" down */
  padding-top: 15px;
}

#pricing.container.section {
  margin-top: 30px;   /* push Pricing down more */
  padding-top: 18px;
}

/* === Typography sync with Landing (home) === */
.lr-page,
.lr-page .prose {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  font-size: 17px;           /* matches home body size */
  line-height: 1.7;
}

/* Headings */
.lr-page .prose h1,
.lr-page .hero-title {
  font-size: 40px;           /* landing hero size */
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand);
  margin: 0 0 8px;
}

.lr-page .prose h2 {
  font-size: 28px;           /* matches home section heads */
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand);
  margin-top: 20px;
  margin-bottom: 10px;
}

.lr-page .prose h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

/* Paragraphs & lists */
.lr-page .prose p,
.lr-page .prose li {
  color: #374151;            /* same readable gray as home text */
  font-size: 17px;
}

.lr-page .hero-sub {
  color: var(--muted);
  font-size: 16px;
}

/* Emphasis to mirror landing look */
.lr-page .prose strong {
  color: var(--ink);
  font-weight: 700;
}

/* Links inside prose */
.lr-page .prose a {
  color: var(--brand);
  text-decoration: none;
}
.lr-page .prose a:hover { text-decoration: underline; }

/* === Match typography with Home (body copy + headings) === */
.lr-page .prose {
  font-size: 16px;        /* same body size as home */
  line-height: 1.7;
  color: #4b5563;         /* soft grey body text like home */
}
.lr-page .lede { color: #4b5563; }

.lr-page .prose strong { color: #0f172a; } /* keep emphasis dark, like home */

/* Section headings inside content */
.lr-page .prose h2 {
  font-size: 22px;        /* card titles on home */
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand);    /* green like home cards */
  margin: 0.3em 0 0.5em;
}
.lr-page .prose h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;         /* dark ink */
  margin: 0.8em 0 0.35em;
}

/* Ensure card titles also inherit the green */
.lr-page .card h2 { color: var(--brand); }

/* Optional: link color parity with home */
.lr-page .prose a {
  color: var(--brand);
  text-decoration: none;
}
.lr-page .prose a:hover { text-decoration: underline; }