/* MyPortfolioHub Resume Builder v16 — landing-page palette normalization.
   Loaded only on the public landing page, after the shared emerald brand layer.
   The goal is one coherent application palette: deep teal/navy structure,
   emerald actions, mint accents, and neutral slate surfaces. Resume documents
   keep their own independent professional template palettes. */

.mph26-light-page{
  --mph26-navy:#0f2f33;
  --mph26-navy-2:#174248;
  --mph26-blue:#047857;
  --mph26-blue-dark:#065f46;
  --mph26-gold:#2dd4bf;
  --mph26-ink:#172b29;
  --mph26-muted:#60716e;
  --mph26-line:#d8e6e2;
  --mph26-soft:#f4f8f7;
  --mph26-soft-blue:#ecfdf5;
  --mph26-card:#ffffff;
  --mph26-success:#059669;
  --rb-primary:#047857;
  --rb-primary-dark:#065f46;
  --rb-secondary:#2dd4bf;
  background:#fbfdfc!important;
  color:#172b29!important;
}

/* Header + global actions */
.mph26-light-page .rb-header{
  background:linear-gradient(180deg,#043936 0%,#032f2d 100%)!important;
  border-bottom-color:rgba(255,255,255,.08)!important;
  box-shadow:0 8px 24px rgba(3,47,45,.08)!important;
}
.mph26-light-page .rb-brand strong{color:#fff!important}
.mph26-light-page .rb-brand small{color:#72e8cb!important}
.mph26-light-page .rb-nav>a,
.mph26-light-page .rb-header-login{color:#d5e7e2!important}
.mph26-light-page .rb-nav>a:hover,
.mph26-light-page .rb-nav>a.is-active,
.mph26-light-page .rb-header-login:hover{color:#fff!important}
.mph26-light-page .rb-nav>a.is-active:after{background:#5ee5c2!important}
.mph26-light-page .rb-btn-primary{
  background:linear-gradient(135deg,#059669 0%,#047857 100%)!important;
  border-color:#047857!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(4,120,87,.22)!important;
}
.mph26-light-page .rb-btn-primary:hover{
  background:linear-gradient(135deg,#047857 0%,#065f46 100%)!important;
  box-shadow:0 12px 28px rgba(4,120,87,.27)!important;
}
.mph26-light-page .rb-btn-outline,
.mph26-light-page .rb-btn-ghost{
  color:#173d3a!important;
  background:#fff!important;
  border-color:#c8dcd7!important;
}
.mph26-light-page .rb-btn-outline:hover,
.mph26-light-page .rb-btn-ghost:hover{
  color:#065f46!important;
  background:#f0faf6!important;
  border-color:#9fd8c7!important;
}

/* Hero */
.mph26-light-page .mph26-hero{
  background:
    radial-gradient(circle at 86% 18%,rgba(16,185,129,.105),transparent 31%),
    radial-gradient(circle at 72% 76%,rgba(45,212,191,.055),transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#f8fbfa 100%)!important;
  border-bottom-color:#e7efed!important;
}
.mph26-light-page .mph26-kicker{color:#047857!important}
.mph26-light-page .mph26-kicker::before{background:#2dd4bf!important}
.mph26-light-page .mph26-hero-copy h1{color:#10243a!important}
.mph26-light-page .mph26-hero-copy h1 em{color:#047857!important}
.mph26-light-page .mph26-hero-copy>p{color:#5d6e6b!important}
.mph26-light-page .mph26-trust-row{color:#526763!important}
.mph26-light-page .mph26-trust-row span::first-letter{color:#059669!important}
.mph26-light-page .mph26-resume-sheet{
  border-color:#d6e3e0!important;
  box-shadow:0 28px 68px rgba(15,47,51,.16)!important;
}
.mph26-light-page .mph26-floating-tip{
  border-color:#d6e5e0!important;
  box-shadow:0 12px 30px rgba(15,47,51,.10)!important;
}
.mph26-light-page .mph26-floating-tip b{color:#047857!important}
.mph26-light-page .mph26-floating-tip span{color:#5c6f6b!important}

/* Audience strip */
.mph26-light-page .mph26-proof-strip{
  background:linear-gradient(90deg,#063a36 0%,#032f2d 100%)!important;
  border-bottom-color:#083f3a!important;
  color:#fff!important;
}
.mph26-light-page .mph26-proof-strip strong{color:#d8f7ee!important}
.mph26-light-page .mph26-proof-strip div>div{color:#a9c9c1!important}

/* Shared content sections */
.mph26-light-page .mph26-section-head h2,
.mph26-light-page .mph26-feature-copy h2,
.mph26-light-page .mph26-work-grid h2,
.mph26-light-page .mph26-faq-grid h2,
.mph26-light-page .mph26-final-cta h2{color:#102f33!important}
.mph26-light-page .mph26-section-head p,
.mph26-light-page .mph26-feature-copy p,
.mph26-light-page .mph26-how-grid p,
.mph26-light-page .mph26-home-template-card p{color:#60716e!important}

/* Template cards */
.mph26-light-page .mph26-home-template-card{
  border-color:#d8e6e2!important;
  box-shadow:0 8px 24px rgba(15,47,51,.045)!important;
}
.mph26-light-page .mph26-home-template-card:hover{
  border-color:#9fd8c7!important;
  box-shadow:0 18px 42px rgba(15,47,51,.09)!important;
}
.mph26-light-page .mph26-home-template-preview{background:#eef5f3!important;border-bottom-color:#d8e6e2!important}
.mph26-light-page .mph26-home-template-preview span{
  background:#047857!important;
  box-shadow:0 9px 20px rgba(4,120,87,.22)!important;
}
.mph26-light-page .mph26-home-template-card small{color:#047857!important}
.mph26-light-page .mph26-home-template-card h3{color:#15343a!important}

/* Feature band + how-it-works */
.mph26-light-page .mph26-feature-band{
  background:#f5f9f8!important;
  border-block-color:#e2ece9!important;
}
.mph26-light-page .mph26-feature-list article,
.mph26-light-page .mph26-how-grid article{
  border-color:#dbe8e4!important;
  box-shadow:0 5px 18px rgba(15,47,51,.045)!important;
}
.mph26-light-page .mph26-feature-list article>span{
  background:#e7f8f2!important;
  color:#047857!important;
}
.mph26-light-page .mph26-feature-list h3,
.mph26-light-page .mph26-how-grid h3{color:#15343a!important}
.mph26-light-page .mph26-how-grid article>span{color:#cce5de!important}
.mph26-light-page .mph26-how-preview{background:#f0f6f4!important}
.mph26-light-page .mph26-mini-template b,
.mph26-light-page .mph26-form-preview b{background:#059669!important;border-color:#059669!important}
.mph26-light-page .mph26-download-preview{color:#047857!important}

/* Dark device section uses the same structural teal as the header. */
.mph26-light-page .mph26-work-anywhere{
  background:linear-gradient(145deg,#073d39 0%,#032f2d 100%)!important;
}
.mph26-light-page .mph26-work-anywhere .mph26-kicker{color:#7ce8cd!important}
.mph26-light-page .mph26-work-anywhere .mph26-kicker::before{background:#34d399!important}
.mph26-light-page .mph26-work-anywhere h2{color:#fff!important}
.mph26-light-page .mph26-work-anywhere p,
.mph26-light-page .mph26-work-anywhere li{color:#c7ddd8!important}

/* FAQ — compact, readable, and less visually detached from the closing CTA. */
.mph26-light-page .mph26-faq-section{
  background:#f8fbfa!important;
  padding-top:72px!important;
  padding-bottom:52px!important;
}
.mph26-light-page .mph26-faq-grid{
  gap:44px!important;
  align-items:start!important;
}
.mph26-light-page .mph26-faqs{gap:12px!important}
.mph26-light-page .mph26-faqs details{
  border-color:#d8e6e2!important;
  border-radius:14px!important;
  padding:0 18px!important;
  background:#fff!important;
  box-shadow:0 5px 18px rgba(15,47,51,.035)!important;
}
.mph26-light-page .mph26-faqs details[open]{
  border-color:#aadccc!important;
  background:#fbfefd!important;
  box-shadow:0 8px 22px rgba(15,47,51,.055)!important;
}
.mph26-light-page .mph26-faqs summary{
  color:#15343a!important;
  padding:17px 34px 17px 0!important;
  line-height:1.45!important;
}
.mph26-light-page .mph26-faqs summary::after{
  right:2px!important;
  top:13px!important;
  color:#047857!important;
}
.mph26-light-page .mph26-faqs p{
  color:#60716e!important;
  margin:0 0 17px!important;
  line-height:1.7!important;
}

/* Final CTA — high-contrast document/product finish, with a tablet breakpoint
   so the action never gets squeezed or clipped before the phone breakpoint. */
.mph26-light-page .mph26-final-cta{
  padding:52px 0 68px!important;
  background:linear-gradient(180deg,#f8fbfa 0%,#eef8f4 100%)!important;
  border-top-color:#dceae6!important;
}
.mph26-light-page .mph26-final-cta>.rb-container{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:32px!important;
  padding:42px 44px!important;
  border-radius:24px!important;
  background:linear-gradient(135deg,#10243a 0%,#0b3037 56%,#073b39 100%)!important;
  border:1px solid rgba(94,229,194,.12)!important;
  box-shadow:0 22px 48px rgba(3,47,45,.16)!important;
  overflow:hidden!important;
}
.mph26-light-page .mph26-final-cta .mph26-kicker{color:#5ee5c2!important}
.mph26-light-page .mph26-final-cta .mph26-kicker::before{background:#2dd4bf!important}
.mph26-light-page .mph26-final-cta h2{
  color:#fff!important;
  margin:11px 0 9px!important;
  max-width:660px!important;
  line-height:1.08!important;
}
.mph26-light-page .mph26-final-cta p{
  color:#cfe3de!important;
  margin:0!important;
  line-height:1.65!important;
}
.mph26-light-page .mph26-final-cta .rb-btn-primary{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  flex:0 0 auto!important;
  min-width:220px!important;
  max-width:100%!important;
  min-height:56px!important;
  padding:0 24px!important;
  border-radius:14px!important;
  box-sizing:border-box!important;
  white-space:nowrap!important;
  text-align:center!important;
  overflow:visible!important;
  box-shadow:0 14px 28px rgba(5,150,105,.28)!important;
}
.mph26-light-page .mph26-final-cta .rb-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 32px rgba(5,150,105,.34)!important;
}

/* Footer — dark surface needs light text; the previous mixed layers could leave
   dark brand/footer copy on the dark teal enterprise footer. */
.mph26-light-page .rb-footer.rb-footer-enterprise{
  background:linear-gradient(180deg,#032f2d 0%,#021f1e 100%)!important;
  border-top-color:#0a4a44!important;
  color:#cfe5df!important;
}
.mph26-light-page .rb-footer-enterprise .rb-footer-brand strong,
.mph26-light-page .rb-footer-enterprise .rb-footer-col h4{color:#f5fffc!important}
.mph26-light-page .rb-footer-enterprise .rb-footer-brand small{color:#5ee5c2!important}
.mph26-light-page .rb-footer-enterprise .rb-footer-brand p,
.mph26-light-page .rb-footer-enterprise .rb-footer-col a,
.mph26-light-page .rb-footer-enterprise .rb-footer-col span{color:#9dbdb5!important}
.mph26-light-page .rb-footer-enterprise .rb-footer-col a:hover{color:#fff!important}
.mph26-light-page .rb-footer-enterprise .rb-footer-bottom{
  color:#88aaa2!important;
  border-top-color:rgba(157,189,181,.16)!important;
}
.mph26-light-page .rb-footer-enterprise .rb-footer-pills i{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(157,189,181,.18)!important;
  color:#b9d2cb!important;
}

/* Keep focus/selection accents in the same family. */
.mph26-light-page ::selection{background:#b9f2df;color:#073b39}
.mph26-light-page a:focus-visible,
.mph26-light-page button:focus-visible{
  outline-color:rgba(16,185,129,.32)!important;
}

@media(max-width:900px){
  .mph26-light-page .mph26-faq-section{
    padding-top:52px!important;
    padding-bottom:34px!important;
  }
  .mph26-light-page .mph26-faq-grid{gap:22px!important}
  .mph26-light-page .mph26-faq-grid header{max-width:none!important}

  .mph26-light-page .mph26-final-cta{padding:24px 0 54px!important}
  .mph26-light-page .mph26-final-cta>.rb-container{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:22px!important;
    padding:32px 28px!important;
    border-radius:20px!important;
  }
  .mph26-light-page .mph26-final-cta h2{
    font-size:clamp(30px,7vw,40px)!important;
    max-width:14ch!important;
  }
  .mph26-light-page .mph26-final-cta .rb-btn-primary{
    width:100%!important;
    min-width:0!important;
    min-height:54px!important;
    padding:0 20px!important;
  }
}

@media(max-width:760px){
  .mph26-light-page .rb-header{background:#032f2d!important}
  .mph26-light-page .rb-nav{background:#043936!important;border-color:rgba(255,255,255,.08)!important}

  .mph26-light-page .mph26-faqs details{padding:0 16px!important}
  .mph26-light-page .mph26-faqs summary{
    padding-top:15px!important;
    padding-bottom:15px!important;
    font-size:13px!important;
  }
  .mph26-light-page .mph26-final-cta>.rb-container{padding:28px 22px!important}
  .mph26-light-page .mph26-final-cta h2{font-size:32px!important;max-width:none!important}
  .mph26-light-page .mph26-final-cta p{font-size:14px!important}

  .mph26-light-page .rb-footer-enterprise .rb-footer-enterprise-inner{
    padding-top:34px!important;
    padding-bottom:26px!important;
  }
  .mph26-light-page .rb-footer-enterprise .rb-footer-top{gap:30px!important}
  .mph26-light-page .rb-footer-enterprise .rb-footer-cols{gap:24px!important}
  .mph26-light-page .rb-footer-enterprise .rb-footer-brand p{max-width:36ch!important}
}