/* Moved from mofa-attestation.php inline <style> (28 Oct guide D20). Linked at the same position. */
/* Fix pruned Tailwind classes */
  .text-navy-dark { color: #243b70; }
  .text-navy { color: #395795; }
  .bg-navy-dark { background-color: #243b70; }
  .bg-navy { background-color: #395795; }
  .bg-card { background-color: #ffffff; }
  .text-muted-foreground { color: #5a6b8c; }
  .text-foreground { color: #102b5c; }
  .text-primary-foreground { color: #ffffff; }
  .bg-clip-text { -webkit-background-clip: text; background-clip: text; }
  .text-transparent { color: transparent; }
  .from-gold { --tw-gradient-from: #c6a877 var(--tw-gradient-from-position); --tw-gradient-to: rgb(198 168 119 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
  .to-gold-deep { --tw-gradient-to: #b9975f var(--tw-gradient-to-position); }
  .group:hover .group-hover\:bg-\[\#2A4176\] { background-color: #2A4176; }
  .group:hover .group-hover\:text-white { color: #ffffff; }
  .group:hover .group-hover\:text-\[\#243B70\]\/60 { color: rgba(36, 59, 112, 0.6); }
  .group:hover .group-hover\:text-\[\#2A4176\] { color: #2A4176; }
  @media (min-width: 1024px) {
    .lg\:sticky { position: sticky; top: 7rem; align-self: flex-start; }
  }

  /* ===== MOFA hero CTAs + trust row ===== */
  .mofa-hero-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
  .mofa-hero-cta-gold { display:inline-flex; align-items:center; gap:8px; border-radius:999px; background:var(--gold); color:var(--navy-dark); font-weight:600; font-size:14px; padding:12px 20px; text-decoration:none; box-shadow:0 10px 25px -8px rgba(198,168,119,.5); }
  .mofa-hero-cta-gold:hover { background:var(--gold-light); }
  .mofa-hero-cta-outline { display:inline-flex; align-items:center; gap:8px; border-radius:999px; background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff; font-weight:600; font-size:14px; padding:12px 20px; text-decoration:none; }
  .mofa-hero-cta-outline:hover { background:rgba(255,255,255,.1); }
  .mofa-hero-trust { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-top:32px; font-size:12px; color:rgba(255,255,255,.75); }
  .mofa-hero-trust span { display:inline-flex; align-items:center; gap:8px; }

  /* ===== Guaranteed layout — do not depend on arbitrary-value Tailwind
     classes like grid-cols-[1fr_360px]: this PHP page's compiled CSS bundle
     only contains the exact classes originally scanned into it, so any new
     bracket-value class silently does nothing instead of failing loudly. ===== */
  .mofa-content-grid { display:grid; grid-template-columns:1fr; gap:32px; align-items:start; }
  @media(min-width:1024px){ .mofa-content-grid { grid-template-columns:1fr 360px; gap:56px; } }
  .mofa-aside-sticky { display:flex; flex-direction:column; gap:20px; }
  @media(min-width:1024px){ .mofa-aside-sticky { position:sticky; top:96px; } }

  /* ===== Guaranteed fallbacks for site-wide component classes (gradient-navy,
     texture-*, text-gradient-gold, text-overline, bca-h2, bca-sidebar-card)
     referenced from the live page. @layer keeps these inert if the real
     rule from new-site-compiled.css exists (un-layered author styles always
     win over layered ones regardless of source order), so this is a safe
     hedge, not an override. ===== */
  @layer bca-fallback {
    .gradient-navy {
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.06), transparent 30%),
        radial-gradient(circle at 85% 35%, rgba(255,255,255,0.08), transparent 35%),
        linear-gradient(120deg, #0B1A3F 0%, #142654 35%, #1B2F66 65%, #24407A 100%);
    }
    .texture-grid-fine {
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: 56px 56px;
    }
    .texture-vignette {
      background: radial-gradient(ellipse at center, transparent 0%, transparent 55%, rgba(221,229,242,.4) 100%);
    }
    .text-gradient-gold {
      background-image: linear-gradient(135deg, var(--gold) 0%, #E0BE7A 50%, var(--gold) 100%);
      background-size: 200% auto;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      animation: gold-shimmer 6s ease-in-out infinite;
    }
    @keyframes gold-shimmer { 0%,100% { background-position:0% center; } 50% { background-position:100% center; } }
    .text-overline { font-size:.75rem; line-height:1; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--navy); }
    .bca-h2 { font-family:'Playfair Display',serif; font-size:clamp(1.875rem,3.2vw,2.75rem); font-weight:700; line-height:1.15; }
    .bca-sidebar-card { border-radius:16px; border:1px solid #DDE5F2; background:#fff; }
  }

  /* ===== MOFA main content sections ===== */
  .mofa-section { scroll-margin-top:96px; }
  .mofa-section + .mofa-section { margin-top:56px; }
  .mofa-section-head { display:flex; align-items:baseline; gap:12px; }
  .mofa-section-num { font-family:'Playfair Display',serif; font-size:14px; font-weight:700; color:var(--gold); letter-spacing:.2em; }
  .mofa-section-h2 { font-family:'Playfair Display',serif; font-size:24px; font-weight:700; color:var(--navy-mid, var(--navy-dark)); line-height:1.2; letter-spacing:-0.01em; }
  @media(min-width:768px){ .mofa-section-h2 { font-size:1.85rem; } }
  .mofa-section-rule { margin-top:20px; height:1px; width:64px; background:rgba(198,168,119,.6); }
  .mofa-prose { margin-top:24px; }
  .mofa-prose p { font-size:16px; line-height:1.85; color:rgba(16,43,92,.85); }
  .mofa-prose p + p { margin-top:20px; }
  .mofa-prose a { font-weight:600; color:var(--navy-mid, var(--navy-dark)); border-bottom:1px solid rgba(36,59,112,.3); text-decoration:none; }
  .mofa-prose a:hover { color:var(--gold); border-color:var(--gold); }
  .mofa-list { margin-top:20px; display:flex; flex-direction:column; gap:16px; }
  .mofa-list li { font-size:16px; line-height:1.85; color:rgba(16,43,92,.85); padding-left:22px; position:relative; }
  .mofa-list li::before { content:''; position:absolute; left:0; top:11px; height:6px; width:6px; border-radius:999px; background:var(--gold); }
  .mofa-list--ordered { counter-reset:mofa-step; }
  .mofa-list--ordered li { padding-left:30px; }
  .mofa-list--ordered li::before { content:counter(mofa-step) '.'; counter-increment:mofa-step; width:auto; height:auto; border-radius:0; background:none; font-weight:700; color:var(--gold); top:0; }
  .mofa-quickfacts { margin-top:24px; border-radius:16px; border:1px solid rgba(36,59,112,.12); background:#FAFBFD; padding:20px 24px; }
  .mofa-quickfacts__title { font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
  .mofa-quickfacts__list { display:grid; grid-template-columns:1fr; gap:12px 24px; }
  @media(min-width:640px){ .mofa-quickfacts__list { grid-template-columns:1fr 1fr; } }
  .mofa-quickfacts__list dt { font-size:12px; color:rgba(16,43,92,.55); }
  .mofa-quickfacts__list dd { margin:2px 0 0; font-size:14px; font-weight:600; color:var(--navy-mid, var(--navy-dark)); }
  .mofa-table-wrap { margin-top:24px; overflow-x:auto; border-radius:16px; border:1px solid rgba(36,59,112,.12); }
  .mofa-table { width:100%; border-collapse:collapse; font-size:14px; }
  .mofa-table th { text-align:left; padding:14px 18px; background:#FAFBFD; color:var(--navy-mid, var(--navy-dark)); font-weight:700; border-bottom:1px solid rgba(36,59,112,.12); }
  .mofa-table td { padding:14px 18px; border-bottom:1px solid rgba(36,59,112,.08); color:rgba(16,43,92,.85); }
  .mofa-table tr:last-child td { border-bottom:none; }

  /* Fallback for .btn-cta.btn-cta-gold in case it isn't in this bundle — inert if the real rule exists */
  @layer bca-fallback {
    .btn-cta.btn-cta-gold {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      border-radius: 12px; font-weight: 700;
      color: var(--navy-dark); border: 1px solid rgba(198,168,119,.5);
      background: linear-gradient(135deg, var(--gold-light) 0%, #E0BE7A 50%, #C9A467 100%);
      box-shadow: 0 10px 25px -8px rgba(198,168,119,.5);
      transition: filter .2s ease, transform .2s ease;
    }
    .btn-cta.btn-cta-gold:hover { filter: brightness(1.05); transform: translateY(-1px); }
    .premium-card {
      position: relative;
      background: linear-gradient(180deg, #fff 0%, #F7F8FC 100%);
      border: 1px solid #DDE5F2;
      box-shadow: 0 1px 2px rgba(15,20,40,.04), 0 8px 24px -12px rgba(15,20,40,.10);
    }
  }

  /* ===== Guaranteed hex-color classes — arbitrary-value bracket classes like
     bg-[#10C488] are not compiled in this page's stylesheet bundle (confirmed:
     the WhatsApp button rendered with no fill, only its shadow). Not wrapped
     in @layer since there's no real rule to defer to for these specific ones. ===== */
  .mofa-wa-btn { background:#10C488; }
  .mofa-wa-btn:hover { background:#0EAF79; }
  .mofa-bg-fafbfd { background:#FAFBFD; }
  .mofa-text-reviewed { color:#3B5680; }
  .mofa-text-updated { color:#6B7B96; }
  .mofa-bg-hero-blob { background:rgba(97,126,190,.4); }
  .mofa-hero-img { aspect-ratio:16/10; }

  /* ===== MOFA FAQ accordion — guaranteed, state driven by data-open ===== */
  .mofa-faq-item { position:relative; transition:background-color .2s ease; }
  .mofa-faq-item:hover { background:rgba(148,163,184,.15); }
  .mofa-faq-item[data-open="true"] { background:linear-gradient(90deg, rgba(198,168,119,.06), transparent); }
  .mofa-faq-item[data-open="true"]:hover { background:linear-gradient(90deg, rgba(198,168,119,.06), transparent); }
  .mofa-faq-stripe { position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--gold), var(--gold), rgba(198,168,119,.3)); display:none; }
  .mofa-faq-item[data-open="true"] .mofa-faq-stripe { display:block; }
  .mofa-faq-num { color:rgba(36,59,112,.3); }
  .mofa-faq-item:hover .mofa-faq-num { color:rgba(36,59,112,.6); }
  .mofa-faq-item[data-open="true"] .mofa-faq-num { color:var(--gold); }
  .mofa-faq-q { color:#334155; }
  .mofa-faq-item:hover .mofa-faq-q { color:var(--navy-dark); }
  .mofa-faq-item[data-open="true"] .mofa-faq-q { color:var(--navy-dark); }
  .mofa-faq-icon-wrap { background:rgba(36,59,112,.08); color:var(--navy); }
  .mofa-faq-item:hover .mofa-faq-icon-wrap { background:var(--navy); color:#fff; }
  .mofa-faq-item[data-open="true"] .mofa-faq-icon-wrap { background:var(--navy-dark); color:#fff; }
  .mofa-faq-icon-minus { display:none; }
  .mofa-faq-icon-arrow { display:block; }
  .mofa-faq-item[data-open="true"] .mofa-faq-icon-minus { display:block; }
  .mofa-faq-item[data-open="true"] .mofa-faq-icon-arrow { display:none; }
  .mofa-faq-answer-wrap { max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease, opacity .3s ease; }
  .mofa-faq-item[data-open="true"] .mofa-faq-answer-wrap { max-height:1000px; opacity:1; }
