/* ============================================================================
   home.css — public landing page (the front door at /).
   Loaded only by templates/public/home.html. Uses the brand tokens from
   variables.css (hex fallbacks kept so it degrades safely). All classes are
   lp- prefixed to avoid collisions with public.css.
   ============================================================================ */

.lp-home #main-content { padding: 0; min-height: 0; max-width: none; }

.lp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.lp-num { font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }

/* ---- Hero ---- */
.lp-hero {
  background: linear-gradient(135deg, var(--cfc-navy, #002D5C) 0%, var(--cfc-blue, #27588D) 100%);
  color: #fff;
  padding: 72px 0 84px;
}
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: 1.3px; font-size: 12px; font-weight: 700;
  color: var(--cfc-gold, #F4B824); margin-bottom: 18px;
}
.lp-hero h1 {
  font-size: 50px; line-height: 1.08; font-weight: 800; letter-spacing: -.5px; max-width: 15ch;
}
.lp-hero h1 .lp-accent { color: var(--cfc-gold, #F4B824); }
.lp-sub { font-size: 18.5px; color: rgba(255,255,255,.86); max-width: 60ch; margin-top: 20px; line-height: 1.55; }

.lp-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.lp-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 8px; font-weight: 700; font-size: 15.5px;
  cursor: pointer; border: none; transition: .15s; text-decoration: none;
}
.lp-btn-gold { background: var(--cfc-gold, #F4B824); color: var(--cfc-navy, #002D5C); }
.lp-btn-gold:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.lp-btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.lp-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

/* address finder */
.lp-finder {
  margin-top: 34px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px; padding: 18px 20px; max-width: 620px;
}
.lp-finder label {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: rgba(255,255,255,.8); margin-bottom: 9px;
}
.lp-finder-row { display: flex; gap: 10px; }
.lp-finder input {
  flex: 1; border: none; border-radius: 8px; padding: 13px 15px; font-size: 15px;
  font-family: inherit; color: var(--cfc-ink, #1a2230);
}
.lp-finder .lp-btn-gold { white-space: nowrap; }

/* ---- Stats band ---- */
.lp-stats { background: #fff; border-bottom: 1px solid var(--cfc-line, #E6E3DE); }
.lp-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.lp-stat { padding: 34px 16px; border-right: 1px solid var(--cfc-line, #E6E3DE); }
.lp-stat:last-child { border-right: none; }
.lp-stat .lp-n { font-size: 42px; line-height: 1; color: var(--cfc-navy, #002D5C); }
.lp-stat .lp-lbl { margin-top: 10px; font-size: 13.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--cfc-muted, #5b6878); }

/* ---- Section heading ---- */
.lp-section { padding: 64px 0; background: var(--cfc-bg-warm, #FAF8F5); }
.lp-sec-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.lp-sec-head h2 { font-size: 32px; font-weight: 800; color: var(--cfc-navy, #002D5C); letter-spacing: -.3px; }
.lp-rule { width: 64px; height: 3px; background: var(--cfc-gold, #F4B824); margin: 14px auto 0; border-radius: 2px; }
.lp-sec-head p { margin-top: 16px; color: var(--cfc-muted, #5b6878); font-size: 17px; }

/* ---- Engage cards ---- */
.lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lp-card {
  background: #fff; border: 1px solid var(--cfc-line, #E6E3DE); border-radius: 8px;
  padding: 28px 24px; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: .18s; display: block; text-decoration: none;
}
.lp-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.10); border-color: #d9d4cc; }
.lp-ic {
  width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(39,88,141,.10); color: var(--cfc-blue, #27588D); margin-bottom: 16px;
}
.lp-card.lp-gold .lp-ic { background: rgba(244,184,36,.18); color: #9a7308; }
.lp-card.lp-red  .lp-ic { background: rgba(207,10,44,.10); color: var(--cfc-red, #CF0A2C); }
.lp-card.lp-aqua .lp-ic { background: rgba(0,190,172,.14); color: #067c70; }
.lp-card h3 { font-size: 19px; font-weight: 700; color: var(--cfc-navy, #002D5C); }
.lp-card p { margin-top: 8px; color: var(--cfc-muted, #5b6878); font-size: 15px; }
.lp-more { margin-top: 14px; font-weight: 700; color: var(--cfc-blue, #27588D); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }

/* ---- Featured action ---- */
.lp-feature { background: #fff; border-top: 1px solid var(--cfc-line, #E6E3DE); border-bottom: 1px solid var(--cfc-line, #E6E3DE); }
.lp-feature-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; padding: 54px 0; }
.lp-feat-badge {
  display: inline-flex; align-items: center; gap: 7px; background: rgba(207,10,44,.10); color: var(--cfc-red, #CF0A2C);
  font-weight: 700; font-size: 12.5px; letter-spacing: .6px; text-transform: uppercase; padding: 6px 12px; border-radius: 9999px;
}
.lp-feature h2 { font-size: 28px; font-weight: 800; color: var(--cfc-navy, #002D5C); margin-top: 16px; letter-spacing: -.3px; }
.lp-feature p { margin-top: 12px; color: var(--cfc-muted, #5b6878); font-size: 16.5px; }
.lp-feat-card { background: var(--cfc-bg-warm, #FAF8F5); border: 1px solid var(--cfc-line, #E6E3DE); border-radius: 12px; padding: 26px; }
.lp-feat-card .lp-bill { font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--cfc-muted, #5b6878); }
.lp-stance { display: inline-block; margin-top: 6px; background: rgba(207,10,44,.10); color: var(--cfc-red, #CF0A2C); font-weight: 700; font-size: 13px; padding: 4px 11px; border-radius: 6px; }
.lp-stance.lp-support { background: rgba(22,101,52,.12); color: #166534; }
.lp-feat-card h4 { font-size: 18px; color: var(--cfc-navy, #002D5C); margin: 12px 0 4px; font-weight: 700; line-height: 1.3; }
.lp-progress { height: 9px; border-radius: 9999px; background: #eceae5; overflow: hidden; margin-top: 18px; }
.lp-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--cfc-navy, #002D5C), var(--cfc-gold, #F4B824)); }
.lp-pmeta { display: flex; justify-content: space-between; margin-top: 9px; font-size: 13px; color: var(--cfc-muted, #5b6878); font-weight: 600; }

/* ---- Mission / scripture ---- */
.lp-mission {
  background: linear-gradient(135deg, var(--cfc-navy, #002D5C) 0%, var(--cfc-blue, #27588D) 100%);
  color: #fff; text-align: center; padding: 60px 0;
}
.lp-mission img { height: 60px; width: auto; margin: 0 auto 22px; display: block; }
.lp-tag { font-size: 23px; font-weight: 700; max-width: 24ch; margin: 0 auto; line-height: 1.35; }
.lp-tag .lp-accent { color: var(--cfc-gold, #F4B824); }
.lp-verse {
  font-family: Garamond, "EB Garamond", Georgia, serif; font-style: italic; font-size: 19px;
  color: rgba(255,255,255,.8); max-width: 60ch; margin: 24px auto 0; line-height: 1.55;
}
.lp-cite {
  display: block; font-style: normal; font-family: inherit; font-size: 13px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--cfc-gold, #F4B824); margin-top: 12px; font-weight: 700;
}

/* ---- Responsive ---- */
@media (max-width: 880px) {
  .lp-hero h1 { font-size: 38px; }
  .lp-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-stat:nth-child(2) { border-right: none; }
  .lp-stat { border-bottom: 1px solid var(--cfc-line, #E6E3DE); }
  .lp-cards { grid-template-columns: 1fr 1fr; }
  .lp-feature-inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .lp-hero { padding: 52px 0 60px; }
  .lp-hero h1 { font-size: 32px; }
  .lp-cards { grid-template-columns: 1fr; }
  .lp-finder-row { flex-direction: column; }
  .lp-stats-grid { grid-template-columns: 1fr 1fr; }
}