/* ==========================================================================
   Family Vault — "Soft & Rounded" design system
   Sage / terracotta / linen palette, pill buttons, 24px rounded cards.
   ========================================================================== */
:root{
  --bg:#FBF6EA;
  --bg-alt:#E9EDDD;
  --card-bg:#FFFFFF;
  --line:#E6E0CE;
  --text:#2E2B24;
  --text-soft:#5F5A4C;
  --primary:#C3714E;
  --primary-dark:#9C5334;
  --accent:#7C8B6F;
  --accent-dark:#4E5B41;
  --accent-soft:#E3E9D4;
  --radius-card:24px;
  --radius-btn:999px;
  --font-head:'Newsreader',Georgia,serif;
  --font-body:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

body { background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.6; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-head); color:var(--text); font-weight:500; line-height:1.25; }
a { color:var(--primary); }
a:hover { opacity:.88; text-decoration:none; }
p { margin-bottom:1.1rem; }

/* ---- Global header / nav ------------------------------------------------ */
.wp-site-blocks > .wp-block-template-part.header,
header.wp-block-template-part {
  background:var(--bg);
}
.wp-block-site-title, .wp-block-site-title a {
  font-family:var(--font-head) !important;
  font-size:21px !important;
  font-weight:600 !important;
  color:var(--text) !important;
}
.wp-block-navigation-item__content {
  font-family:var(--font-body) !important;
  font-size:14.5px !important;
  font-weight:500 !important;
  color:var(--text-soft) !important;
}
.wp-block-navigation-item__content:hover { color:var(--text) !important; }
.wp-block-navigation .wp-block-button__link,
.wp-block-buttons .wp-block-button__link {
  background:var(--primary);
  color:#fff !important;
  border-radius:var(--radius-btn);
  padding:12px 22px;
  font-weight:600;
  font-size:14.5px;
}
.wp-block-navigation .wp-block-button__link:hover,
.wp-block-buttons .wp-block-button__link:hover { opacity:.88; }

/* ---- Eyebrow / section titles ------------------------------------------- */
.eyebrow{ font:600 12px/1 var(--font-body); text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin:0 0 14px; text-align:center; }
.section-title{ font-family:var(--font-head); font-size:34px; line-height:1.2; font-weight:500; color:var(--text); max-width:720px; margin:0 auto 14px; text-align:center; }
.section-sub{ font-size:17px; color:var(--text-soft); max-width:560px; margin:0 auto 0; text-align:center; }
.fv-center { text-align:center; }

/* ---- Buttons -------------------------------------------------------------*/
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; font:600 15px var(--font-body); border-radius:var(--radius-btn); border:1.5px solid transparent; white-space:nowrap; cursor:pointer; transition:opacity .15s; text-decoration:none !important; }
.btn:hover{ opacity:.88; }
.btn-primary{ background:var(--primary); color:#fff !important; }
.btn-ghost{ background:#fff; border-color:#D9CDB4; color:var(--text) !important; }
.btn-secondary{ background:#fff; border-color:#D9CDB4; color:var(--text) !important; }
.btn-accent{ background:var(--primary); color:#fff !important; }
.btn.full{ width:100%; box-sizing:border-box; }
.btn.lg{ padding:17px 34px; font-size:16px; }

/* ---- Checklist ------------------------------------------------------------*/
.check-list{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.check-list li{ position:relative; padding-left:24px; font-size:14.5px; color:var(--text-soft); line-height:1.4; }
.check-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700; }

/* ---- Hero ------------------------------------------------------------------*/
.fv-hero{ position:relative; background:var(--bg); padding:76px 24px 90px; overflow:hidden; text-align:center; }
.fv-hero::before{ content:""; position:absolute; top:-160px; right:-120px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle at 30% 30%,#E3E9D4,transparent 70%); }
.fv-hero::after{ content:""; position:absolute; bottom:-200px; left:-140px; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle at 60% 40%,#F3DFCF,transparent 70%); }
.fv-hero-inner{ position:relative; max-width:760px; margin:0 auto; }
.fv-hero h1{ font-size:56px; line-height:1.08; font-weight:500; margin:10px 0 22px; }
.fv-hero h1 em{ font-style:italic; color:var(--primary); }
.fv-hero .lede{ font-size:18px; color:var(--text-soft); line-height:1.6; max-width:520px; margin:0 auto; }
.badge-line{ display:inline-block; margin-top:22px; font-size:13.5px; font-weight:600; color:var(--accent-dark); background:var(--accent-soft); padding:8px 16px; border-radius:20px; }
.hero-ctas{ display:flex; gap:14px; margin-top:32px; justify-content:center; flex-wrap:wrap; }
.trust-line{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; color:var(--text-soft); margin-top:20px; }
.trust-line svg{ flex:none; }
.hero-media{ position:relative; max-width:920px; margin:56px auto 0; }
.hero-media img{ width:100%; height:420px; object-fit:cover; border-radius:28px; display:block; }
.hero-media-placeholder{ width:100%; height:420px; border-radius:28px; background:var(--card-bg); border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; color:var(--text-soft); font-size:14px; }

/* ---- Section shells --------------------------------------------------------*/
.fv-section{ padding:90px 24px; background:var(--bg); }
.fv-section.bg-alt{ background:var(--bg-alt); }

/* ---- Moment / step cards ---------------------------------------------------*/
.moment-grid, .steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1140px; margin:48px auto 0; }
.moment-card, .step-card, .fv-card{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-card); padding:32px; }
.moment-card h3{ font-size:19px; font-weight:600; margin-bottom:10px; color:var(--primary-dark); }
.moment-card p{ font-size:14.5px; color:var(--text-soft); line-height:1.55; margin-bottom:0; }
.step-num{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--accent-soft); color:var(--accent-dark); font-weight:700; font-size:15px; margin-bottom:16px; }
.step-card h3{ font-size:20px; font-weight:600; margin-bottom:8px; }
.step-card p{ font-size:14.5px; color:var(--text-soft); line-height:1.55; margin-bottom:0; }
.mid-media{ max-width:1140px; margin:56px auto 0; }
.mid-media img{ width:100%; height:300px; object-fit:cover; border-radius:28px; display:block; }
.mid-media-placeholder{ width:100%; height:300px; border-radius:28px; background:var(--card-bg); border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; color:var(--text-soft); font-size:14px; }

/* ---- Pricing ----------------------------------------------------------------*/
.pricing-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1280px; margin:48px auto 0; align-items:stretch; }
.price-card{ position:relative; background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-card); padding:30px 26px; display:flex; flex-direction:column; }
.price-card.featured{ border:2px solid var(--primary); }
.pop-badge{ position:absolute; top:-13px; left:26px; background:var(--primary); color:#fff; font:600 11px var(--font-body); padding:5px 12px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em; }
.price-card h3{ font-size:18px; font-weight:600; margin-bottom:10px; }
.price{ font-family:var(--font-head); font-size:30px; font-weight:500; color:var(--text); margin-bottom:8px; }
.price span{ font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--text-soft); }
.price-desc{ font-size:13.5px; color:var(--text-soft); margin-bottom:6px; }
.price-card .btn{ margin-top:auto; padding-top:24px; }

/* ---- FAQ -----------------------------------------------------------------*/
.faq-list{ max-width:800px; margin:48px auto 0; display:flex; flex-direction:column; gap:12px; }
.faq-list details, details.fv-faq{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-card); padding:20px 24px; }
.faq-list summary, details.fv-faq summary{ cursor:pointer; font-weight:600; font-size:15.5px; list-style:none; color:var(--text); }
.faq-list summary::-webkit-details-marker, details.fv-faq summary::-webkit-details-marker{ display:none; }
.faq-list summary::after, details.fv-faq summary::after{ content:"+"; float:right; color:var(--accent); font-weight:700; }
.faq-list details[open] summary::after, details.fv-faq[open] summary::after{ content:"–"; }
.faq-list details p, details.fv-faq p{ margin-top:14px; font-size:14.5px; color:var(--text-soft); line-height:1.6; margin-bottom:0; }

/* ---- Final CTA -------------------------------------------------------------*/
.fv-cta-footer, .final-cta{ padding:100px 24px; background:var(--bg-alt); text-align:center; }
.fv-cta-footer h2, .final-cta h2{ font-size:36px; font-weight:500; margin-bottom:14px; max-width:640px; margin-left:auto; margin-right:auto; color:var(--text); }
.fv-cta-footer p, .final-cta p{ font-size:16px; color:var(--text-soft); margin-bottom:30px; }

/* ---- Prose / legal pages ----------------------------------------------------*/
.fv-prose{ max-width:760px; margin:0 auto; }
.fv-prose h2{ margin-top:2rem; }
.fv-muted{ color:var(--text-soft); }
.fv-opacity-50{ opacity:.5; }
.fv-timeline-item{ border-left:4px solid var(--primary); padding-left:24px; margin-bottom:2.5rem; }
table.fv-table{ width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; }
table.fv-table th{ background:var(--primary); color:#fff; padding:14px; text-align:left; }
table.fv-table td{ padding:12px 14px; border-bottom:1px solid var(--line); }

/* ---- Legacy hero used on secondary pages (about/trust/etc.) ---------------*/
.fv-hero.accent{ background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%); color:#fff; }
.fv-hero.accent::before, .fv-hero.accent::after{ display:none; }
.fv-hero.accent h1{ color:#fff; }

/* ---- Responsive -------------------------------------------------------------*/
@media (max-width: 900px){
  .moment-grid, .steps-grid, .pricing-grid{ grid-template-columns:1fr; }
  .fv-hero h1{ font-size:36px; }
  .section-title{ font-size:26px; }
}

/* Hide the generic page-title block on the front page — the hero already has its own H1 */
body.home .wp-block-post-title { display:none; }