/* ==========================================================================
   Catholic AI marketing design system
   Source: Claude Design handoff "Biblia marketing design updates" (2026-07)
   Palette: #1D0038 ink/base, #360072 deep, #4D00A7 accent,
            accent gradient 270deg #D8B6FF -> #B6ECFF
   Type:    Fraunces (display serif), Montserrat (UI/body)
   Used by index.php and all root marketing/SEO pages. Loaded after
   Bootstrap on interior pages, so same-specificity rules here win.
   ========================================================================== */

body.m-body{margin:0;background:#1D0038;overflow-x:clip}

.page a{color:#fff;text-decoration:none}
.page a:hover{color:#D8B6FF}
.page{background:linear-gradient(0deg,#1D0038 0%,#4D00A7 100%);color:#fff;font-family:'Montserrat',sans-serif}
/* Interior pages: gradient wrapper around header + hero only */
.m-dark{background:linear-gradient(0deg,#1D0038 0%,#4D00A7 100%);color:#fff;font-family:'Montserrat',sans-serif}
.m-dark a{color:#fff;text-decoration:none}
.m-dark a:hover{color:#D8B6FF}

.wrap{max-width:1600px;margin:0 auto;padding:0 clamp(24px,8vw,160px)}
.fraunces{font-family:'Fraunces',serif;font-weight:400;letter-spacing:0}

/* Flex utilities (mockup shorthand) */
.fx{display:flex}.fx.col{flex-direction:column}
.ac{align-items:center}.jb{justify-content:space-between}.jc{justify-content:center}
.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}

/* Header */
.hdr{padding:30px 0}
.hdr .wrap{flex-wrap:wrap}
.navlink{font-weight:600;font-size:16px}
.signup{background:#fff;color:#360072;font-weight:600;font-size:16px;padding:13px 30px;border-radius:999px}
.signup:hover{color:#4D00A7;background:#EFE4FF}
.page .signup,.m-dark .signup{color:#360072}
.page .signup:hover,.m-dark .signup:hover{color:#4D00A7}
.logotxt{font-family:'Fraunces',serif;font-size:26px;color:#fff}
.logoai{color:#C9A6F5;font-family:'Montserrat',sans-serif;font-weight:700;font-size:22px}
.logoimg{width:42px;height:42px;border-radius:10px;display:block}

/* Hero (homepage) */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;padding-top:80px;padding-bottom:130px}
.page .h1,.m-dark .h1{font-size:clamp(44px,4.6vw,84px);line-height:1.08;margin:0 0 36px;color:#fff}
.page .lead,.m-dark .lead{font-size:26px;line-height:1.65;font-weight:400;margin:0 0 44px;max-width:560px}
.badges{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.badges img{height:60px;width:auto;display:block}
.phonecard{background:linear-gradient(270deg,#D8B6FF 0%,#B6ECFF 100%);border-radius:33px;padding:10px;width:min(360px,100%);box-shadow:0 40px 90px rgba(0,0,0,.35)}
.phonescreen{border-radius:26px;overflow:hidden;background:#2A0055}
.phonescreen img{width:100%;height:auto;display:block}

/* Features (homepage) */
.feat{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start;padding-top:40px;padding-bottom:120px}
.page .h2,.m-dark .h2{font-size:48px;line-height:1.35;font-weight:400;margin:0 0 20px;color:#fff}
.sub{font-size:26px;line-height:1.65;font-weight:400;margin:0}
.featlist{display:flex;flex-direction:column;gap:44px;margin-top:56px}
.featrow{display:flex;gap:28px;align-items:flex-start}
.featrow img{width:80px;height:80px;flex-shrink:0}
.ft{font-size:24px;font-weight:700;line-height:28px;margin:0 0 10px}
.fp{font-size:18px;line-height:28px;margin:0;max-width:560px;color:#EFE6FF}
.sticky{position:sticky;top:60px}

/* Tools cards */
.sect{padding-top:100px;padding-bottom:100px}
.center{text-align:center}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.toolcard{background:rgba(255,255,255,.06);border:1px solid rgba(216,182,255,.25);border-radius:16px;padding:32px;transition:background .3s,transform .3s;height:100%;box-sizing:border-box;display:block}
.toolcard:hover{background:rgba(255,255,255,.11);transform:translateY(-4px);color:#fff}
.tico{width:56px;height:56px;border-radius:12px;background:linear-gradient(270deg,#D8B6FF 0%,#B6ECFF 100%);color:#1D0038;font-size:22px;margin-bottom:22px}
.tt{font-size:20px;font-weight:700;margin:0 0 12px}
.tp{font-size:16px;line-height:26px;margin:0;color:#EFE6FF}

/* Download */
.dl{background:#360072;padding:110px 0}
.dlgrid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.dlh{font-size:60px;margin:0 0 40px}
.dlphones{position:relative;height:620px}
.dlp1{position:absolute;left:6%;top:0;width:290px;border-radius:28px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4);z-index:2}
.dlp2{position:absolute;left:46%;top:36px;width:270px;border-radius:26px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.dlp1 img,.dlp2 img{width:100%;height:auto;display:block}

/* Pricing */
.pricing{background:#4D00A7;padding:100px 0 120px}
.psub{font-size:26px;line-height:1.7;max-width:620px;margin:0 auto}
.toggle{display:inline-flex;background:rgba(255,255,255,.14);border-radius:999px;padding:5px;margin-top:40px}
.tbtn{border:0;background:transparent;color:#fff;font-family:'Montserrat',sans-serif;font-weight:600;font-size:16px;padding:11px 30px;border-radius:999px;cursor:pointer}
.tbtn.on{background:#fff;color:#360072}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,460px));gap:32px;justify-content:center;margin-top:56px}
.pcard{background:#fff;border-radius:20px;padding:44px 40px;color:#1D0038;text-align:left;position:relative;display:flex;flex-direction:column}
.pname{font-size:26px;font-weight:700;margin:0 0 18px}
.pprice{font-size:52px;font-weight:700;color:#4D00A7}
.pper{font-size:18px;font-weight:500;color:#7A6E92}
.pdesc{font-size:16px;color:#7A6E92;margin:10px 0 0}
.plist{list-style:none;padding:0;margin:30px 0 36px;display:flex;flex-direction:column}
.plist li{padding:13px 0;border-bottom:1px solid #F0EAF9;display:flex;align-items:center;gap:12px;font-size:16px;color:#3B2E55}
.plist li:last-child{border-bottom:0}
.plist i{color:#4D00A7}
.page .pbtn,.m-dark .pbtn{display:block;text-align:center;background:#4D00A7;color:#fff;font-weight:600;font-size:17px;padding:16px;border-radius:12px;margin-top:auto}
.page .pbtn:hover,.m-dark .pbtn:hover{background:#360072;color:#fff}
.page .pbtn.ghost,.m-dark .pbtn.ghost{background:#F1EAFB;color:#4D00A7}
.page .pbtn.ghost:hover,.m-dark .pbtn.ghost:hover{background:#E5D8F7;color:#360072}
.pop{position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:linear-gradient(270deg,#D8B6FF 0%,#B6ECFF 100%);color:#1D0038;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:8px 20px;border-radius:999px;white-space:nowrap}

/* FAQ (dark) */
.faqsect{background:#4D00A7;padding:0 0 110px}
.faqwrap{max-width:900px;margin:56px auto 0}
.fq{font-size:24px;font-weight:600;margin:0 0 14px}
.fa-ans{font-size:17px;line-height:1.8;margin:0 0 40px;color:#EFE6FF}

/* Footer */
.foot{background:#360072;padding:80px 0 0;color:#fff;font-family:'Montserrat',sans-serif}
.foot a{color:#fff;text-decoration:none}
.fgrid{display:grid;grid-template-columns:1.1fr .8fr .8fr 1fr 1.3fr auto;gap:40px;align-items:start;padding-bottom:70px}
.fh{font-size:16px;font-weight:600;color:#fff;margin:0 0 18px}
.flist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.foot .flink{font-size:15px;color:#D8B6FF;font-weight:500}
.foot .flink:hover{color:#fff}
.foot .soc{width:42px;height:42px;border-radius:50%;background:rgba(216,182,255,.25);color:#fff;font-size:16px}
.foot .soc:hover{background:rgba(216,182,255,.45);color:#fff}
.fbadges img{height:44px;width:auto;display:block}
.copybar{border-top:1px solid #8D65C4;padding:26px 0;text-align:center;font-size:14px;font-weight:500;color:#BA95ED}

/* --------------------------------------------------------------------------
   Interior marketing/SEO pages: dark hero + light content sections
   -------------------------------------------------------------------------- */
.m-hero{padding-top:50px;padding-bottom:100px;text-align:center}
.m-hero .h1{font-size:clamp(38px,3.6vw,64px);max-width:1000px;margin:0 auto 30px}
.m-hero .lead{max-width:760px;margin:0 auto 44px}
.m-hero .badges{justify-content:center}

.m-light{background:#fff;color:#3B2E55;font-family:'Montserrat',sans-serif}
.m-section{padding:90px 0}
.m-section.alt{background:#F7F3FC}
.m-light h1,.m-light h2,.m-light h3,.m-light h4,.m-light h5{color:#1D0038}
.m-h2{font-size:clamp(30px,3vw,44px);line-height:1.3;font-weight:400;margin:0 0 18px;color:#1D0038}
.m-sub{font-size:clamp(17px,1.5vw,22px);line-height:1.65;color:#5F5379;margin:0}
.m-light p{color:#3B2E55}
.m-muted{color:#5F5379}
.m-light a{color:#4D00A7}
.m-light a:hover{color:#360072}

/* Cards on light sections */
.m-card{background:#fff;border:1px solid #E9DFF7;border-radius:16px;padding:32px;height:100%;box-sizing:border-box;transition:transform .3s,box-shadow .3s;box-shadow:0 4px 24px rgba(77,0,167,.06)}
.m-card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(77,0,167,.12)}
.m-ico{width:56px;height:56px;border-radius:12px;background:linear-gradient(270deg,#D8B6FF 0%,#B6ECFF 100%);color:#1D0038;font-size:22px;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.m-card h3,.m-card h4{font-size:20px;font-weight:700;margin:0 0 12px;color:#1D0038}
.m-card p{font-size:16px;line-height:26px;margin:0;color:#5F5379}

/* Feature bullet rows (icon + text) */
.m-featrow{display:flex;gap:20px;align-items:flex-start;margin-bottom:34px}
.m-featrow .m-ico{flex-shrink:0;margin-bottom:0}
.m-featrow h3,.m-featrow h4{font-size:19px;font-weight:700;margin:0 0 8px;color:#1D0038}
.m-featrow p{font-size:16px;line-height:26px;margin:0;color:#5F5379}

/* Comparison blocks (generic vs Catholic AI) */
.m-compare{background:#fff;border:1px solid #E9DFF7;border-radius:16px;padding:28px;margin-bottom:20px;box-shadow:0 4px 24px rgba(77,0,167,.06)}
.m-compare h3,.m-compare h4{color:#4D00A7;font-size:19px;font-weight:700;margin:0 0 14px}
.m-compare p{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;line-height:1.6}
.m-compare p:last-child{margin-bottom:0}
.m-compare .fa-check-circle{color:#1FA463;margin-top:4px}
.m-compare .fa-times-circle{color:#D64545;margin-top:4px}
.m-good{color:#1FA463}
.m-bad{color:#D64545}

/* FAQ on light sections */
.m-faq h2,.m-faq h3{font-size:clamp(20px,2vw,26px);font-weight:600;margin:0 0 14px;color:#1D0038;line-height:1.4}
.m-faq p{color:#3B2E55;line-height:1.8;margin:0 0 40px;font-size:17px}

/* Screenshot showcase (interior pages) */
.screenshot-showcase{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin:40px 0}
.screenshot-item{text-align:center;flex:1;min-width:250px;max-width:300px}
.screenshot-item img{border-radius:24px;box-shadow:0 24px 60px rgba(29,0,56,.25);width:100%;height:auto;border:6px solid #fff}
.screenshot-item p{margin-top:16px;color:#1D0038;font-weight:600}

/* CTA buttons (light + dark contexts) */
.m-cta-primary{background:#4D00A7;color:#fff!important;padding:16px 42px;border-radius:999px;font-size:17px;font-weight:600;text-decoration:none;display:inline-block;transition:background .3s,transform .3s;box-shadow:0 10px 30px rgba(77,0,167,.3)}
.m-cta-primary:hover{background:#360072;transform:translateY(-2px)}
.m-cta-secondary{background:#F1EAFB;color:#4D00A7!important;padding:16px 42px;border-radius:999px;font-size:17px;font-weight:600;text-decoration:none;display:inline-block;transition:background .3s,transform .3s}
.m-cta-secondary:hover{background:#E5D8F7;color:#360072!important;transform:translateY(-2px)}
.m-dark .m-cta-primary,.page .m-cta-primary{background:#fff;color:#360072!important;box-shadow:none}
.m-dark .m-cta-primary:hover,.page .m-cta-primary:hover{background:#EFE4FF;color:#4D00A7!important}

/* Dark CTA band (interior pages, above footer) */
.m-cta-band{background:linear-gradient(0deg,#1D0038 0%,#4D00A7 100%);color:#fff;text-align:center;padding:100px 0;font-family:'Montserrat',sans-serif}
.m-cta-band h2{color:#fff;font-size:clamp(32px,3.4vw,52px);margin:0 0 24px}
.m-cta-band p{color:#EFE6FF;font-size:clamp(17px,1.5vw,22px);line-height:1.65;max-width:720px;margin:0 auto 40px}
.m-cta-band .badges{justify-content:center}

/* Responsive */
@media (max-width:1100px){
  .hero,.feat,.dlgrid{grid-template-columns:1fr}
  .cards3{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .sticky{position:static}
  .hero{padding-top:60px;padding-bottom:90px}
  .dlphones{margin:0 auto}
}
@media (max-width:700px){
  .cards3{grid-template-columns:1fr}
  .page .h2,.m-dark .h2{font-size:36px}
  .dlh{font-size:44px}
  .page .lead,.m-dark .lead,.sub,.psub{font-size:20px}
  .hdr nav{gap:20px!important}
  .navlink{display:none}
  .logotxt{font-size:22px}
  .logoai{font-size:18px}
  .signup{padding:11px 22px;font-size:15px}
  .badges img{height:52px}
  .dlphones{position:static;height:auto;display:flex;gap:16px;justify-content:center}
  .dlp1,.dlp2{position:static;width:44%;max-width:240px}
  .dlp2{margin-top:36px}
  .fgrid{grid-template-columns:1fr}
  .fgrid>div:last-child{align-items:flex-start!important}
}