/* PH SURFER V2 PAGE STYLES
   Namespaced with .mfph- to prevent conflicts with MF/style.css and Bootstrap. */
.mfph-page{
    --mfph-blue:#0b5796;
    --mfph-blue-dark:#103252;
    --mfph-text:#486581;
    --mfph-muted:#829ab1;
    --mfph-line:#dce5ed;
    --mfph-light:#f5f8fb;
    --mfph-soft:#edf6ff;
    --mfph-accent:#FF7B00;
    --mfph-orange:#FF7B00;
    --mfph-green:#16855b;
    --mfph-white:#fff;
    --mfph-shadow:0 16px 45px rgba(16,42,67,.08);
}
.mfph-page,.mfph-page *{box-sizing:border-box}
.mfph-page section{display:block}
.mfph-page{scroll-behavior:smooth}
.mfph-page{
    margin:0;
    font-family:Inter,Arial,sans-serif;
    color:var(--mfph-text);
    line-height:1.6;
    background:#fff;
}
.mfph-page a{text-decoration:none;color:inherit}
.mfph-container{width:min(1200px,92%);margin:auto}
.mfph-section{padding:72px 0}
.mfph-light{background:var(--mfph-light)}

.mfph-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--mfph-blue);
    font-size:12px;
    font-weight:800;
    letter-spacing:1.4px;
    text-transform:uppercase;
}
.mfph-eyebrow i{color:var(--mfph-accent)}

.mfph-section-heading{
    max-width:760px;
    margin:0 auto 42px;
    text-align:center;
}
.mfph-section-heading .mfph-eyebrow{margin-bottom:9px}
.mfph-section-heading h2{
    margin:0 0 12px;
    color:var(--mfph-blue-dark);
    font-size:clamp(30px,4vw,42px);
    line-height:1.15;
}
.mfph-section-heading p{
    margin:0;
    font-size:16px;
    color:var(--mfph-text);
}

/* HERO */
.mfph-hero{
    padding:88px 0 72px;
    background:linear-gradient(135deg,#edf6ff 0%,#fff 58%,#f7fbff 100%);
}
.mfph-hero-grid{
    display:grid;
    grid-template-columns:1.12fr .88fr;
    gap:58px;
    align-items:center;
}
.mfph-hero h1{
    margin:17px 0 20px;
    color:var(--mfph-blue-dark);
    font-size:clamp(44px,6vw,68px);
    line-height:1.04;
    letter-spacing:-2px;
}
.mfph-hero h1 strong{color:var(--mfph-blue)}
.mfph-hero-copy{
    max-width:700px;
    margin:0 0 29px;
    font-size:18px;
}
.mfph-buttons{display:flex;gap:12px;flex-wrap:wrap}
.mfph-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:12px 21px;
    border-radius:10px;
    font-weight:700;
    font-size:14px;
    transition:.25s ease;
}
.mfph-btn-primary{background:var(--mfph-orange);color:#ffffff;}
.mfph-btn-primary:hover{background:#e66e00;transform:translateY(-2px)}
.mfph-btn-outline{background:#fff;border:1px solid var(--mfph-line);color:var(--mfph-blue-dark)}
.mfph-btn-outline:hover{border-color:var(--mfph-blue);color:var(--mfph-blue)}

.mfph-hero-services{
    background:#fff;
    border:1px solid var(--mfph-line);
    border-radius:24px;
    padding:30px 32px;
    box-shadow:var(--mfph-shadow);
}
.mfph-hero-services-head{
    display:flex;
    gap:14px;
    align-items:center;
    margin-bottom:19px;
}
.mfph-hero-services-icon{
    width:56px;height:56px;
    display:grid;place-items:center;
    border-radius:15px;
    background:var(--mfph-soft);
    color:var(--mfph-blue);
    font-size:23px;
}
.mfph-hero-services h3{margin:0;color:var(--mfph-blue-dark);font-size:20px}
.mfph-hero-services-head p{margin:2px 0 0;color:var(--mfph-muted);font-size:12px}

.mfph-hero-link{
    display:flex;
    align-items:center;
    gap:14px;
    padding:17px 0;
    border-bottom:1px solid #edf1f5;
    transition:.2s ease;
}
.mfph-hero-link:last-child{border-bottom:0}
.mfph-hero-link:hover{transform:translateX(5px)}
.mfph-hero-link-icon{
    width:34px;
    color:var(--mfph-blue);
    text-align:center;
}
.mfph-hero-link-text{flex:1}
.mfph-hero-link-text strong{
    display:block;
    color:var(--mfph-blue-dark);
    font-size:14px;
}
.mfph-hero-link-text span{
    display:block;
    color:var(--mfph-muted);
    font-size:11px;
}
.mfph-hero-link-arrow{color:#9fb3c8;font-size:11px}

/* TRUST */
.mfph-trustbar{background:var(--mfph-blue-dark);color:#fff}
.mfph-trust-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}
.mfph-trust-item{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:9px;
    padding:16px 10px;
    font-size:12px;
    font-weight:700;
    border-right:1px solid rgba(255,255,255,.1);
}
.mfph-trust-item:last-child{border:0}
.mfph-trust-item i{color:#f7c66a}

/* SERVICE SECTIONS */
.mfph-service-section{scroll-margin-top:25px}
.mfph-service-layout{
    display:grid;
    grid-template-columns:minmax(0,1.22fr) minmax(390px,.78fr);
    gap:38px;
    align-items:stretch;
}
.mfph-service-main{
    min-height:100%;
    padding:35px;
    background:#fff;
    border:1px solid var(--mfph-line);
    border-radius:20px;
    display:flex;
    flex-direction:column;
}
.mfph-service-main.featured{border:2px solid var(--mfph-blue)}
.mfph-service-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.mfph-service-icon{
    width:52px;height:52px;display:grid;place-items:center;flex:0 0 52px;
    background:var(--mfph-soft);border-radius:14px;color:var(--mfph-blue);font-size:21px;
}
.mfph-service-label{color:var(--mfph-blue);font-size:10px;font-weight:800;letter-spacing:1.2px}
.mfph-service-main h2{margin:0 0 12px;color:var(--mfph-blue-dark);font-size:29px;line-height:1.2}
.mfph-service-description{margin:0 0 24px;font-size:16px;line-height:1.7}
.mfph-service-flow{padding:20px 0 30px;border-top:1px solid #edf1f5;border-bottom:1px solid #edf1f5}
.mfph-service-flow strong{display:flex;align-items:center;gap:9px;margin-bottom:14px;color:var(--mfph-blue-dark);font-size:15px}
.mfph-service-flow strong:before{content:"\f0ae";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--mfph-orange);font-size:16px}
.mfph-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.mfph-flow-step{min-height:104px;padding:14px 9px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#f8fbfe;border:1px solid #e1e9f0;border-radius:12px;transition:.22s ease}
.mfph-flow-step:hover{transform:translateY(-3px);border-color:var(--mfph-orange);box-shadow:0 8px 20px rgba(16,42,67,.07)}
.mfph-flow-step i{width:34px;height:34px;display:grid;place-items:center;margin-bottom:8px;border-radius:50%;background:var(--mfph-blue);color:#fff;font-size:14px}
.mfph-flow-step:nth-child(even) i{background:var(--mfph-orange)}
.mfph-flow-step span{font-size:12px;font-weight:700;line-height:1.35;color:var(--mfph-blue-dark)}
.mfph-service-detail-list{
    display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;margin:20px 0 22px;
}
.mfph-service-detail-list div{display:flex;gap:8px;align-items:flex-start;color:#627d98;font-size:14px;line-height:1.55}
.mfph-service-detail-list i{flex:0 0 auto;color:var(--mfph-green);margin-top:3px}
.mfph-service-price{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 10px}
.mfph-price-box{padding:17px;background:#f7fafc;border-radius:11px}
.mfph-price-box span{display:block;color:var(--mfph-muted);font-size:10px;line-height:1.3}
.mfph-price-box strong{display:block;margin-top:4px;color:var(--mfph-blue-dark);font-size:21px}
.mfph-price-note{margin:0 0 22px;color:var(--mfph-muted);font-size:10px;line-height:1.5}
.mfph-service-main .mfph-btn{margin-top:auto;align-self:flex-start}

/* BALANCED IMAGE / SUPPORT PANEL */
.mfph-service-side{
    min-height:100%;padding:0;background:var(--mfph-light);border:1px solid var(--mfph-line);
    border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
}
.mfph-service-image{
    min-height:500px;flex:0 0 450px;display:flex;align-items:center;justify-content:center;
    text-align:center;padding: 25px;
}
.mfph-service-image-inner{
    width:100%;height:100%;min-height:500px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    background:rgba(255,255,255,.55);
}
.mfph-service-image-inner i{color:var(--mfph-orange);font-size:34px;margin-bottom:10px}
.mfph-service-image-inner strong{color:var(--mfph-blue-dark);font-size:15px}
.mfph-service-image-inner span{max-width:240px;margin-top:4px;font-size:10px}
.mfph-service-side-content{padding:27px 30px 30px;flex:1}
.mfph-service-side h3{margin:0 0 15px;color:var(--mfph-blue-dark);font-size:18px}
.mfph-check-list{list-style:none;margin:0;padding:0}
.mfph-check-list li{display:flex;gap:10px;margin:11px 0;font-size:13px;line-height:1.5}
.mfph-check-list i{color:var(--mfph-green);margin-top:4px}
.mfph-service-tip{
    margin-top:20px;padding:14px 16px;background:#fff;border:1px solid var(--mfph-line);
    border-radius:11px;color:#627d98;font-size:13px;line-height:1.55;
}
.mfph-service-tip strong{color:var(--mfph-blue-dark)}

/* SMALL INTRO SECTION */
.mfph-compact-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.mfph-compact-card{
    padding:27px;
    background:#fff;
    border:1px solid var(--mfph-line);
    border-radius:17px;
}
.mfph-compact-card i{
    color:var(--mfph-blue);
    font-size:22px;
    margin-bottom:13px;
}
.mfph-compact-card h3{margin:0 0 7px;color:var(--mfph-blue-dark);font-size:18px}
.mfph-compact-card p{margin:0;font-size:13px}

/* PH SHOPPING */
.mfph-ph-flow{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
    gap:10px;
    align-items:center;
}
.mfph-ph-step{
    min-height:125px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:18px 12px;
    background:#fff;
    border:1px solid var(--mfph-line);
    border-radius:15px;
}
.mfph-ph-step i{color:var(--mfph-blue);font-size:24px;margin-bottom:9px}
.mfph-ph-step strong{font-size:12px;color:var(--mfph-blue-dark)}
.mfph-ph-step span{font-size:10px;color:var(--mfph-muted)}
.mfph-ph-arrow{color:#9fb3c8}

/* FAQ */
.mfph-faq{max-width:900px;margin:auto}
.mfph-faq-item{border-bottom:1px solid var(--mfph-line)}
.mfph-faq-button{
    width:100%;
    padding:20px 0;
    display:flex;
    justify-content:space-between;
    gap:20px;
    border:0;
    background:none;
    color:var(--mfph-blue-dark);
    text-align:left;
    font:inherit;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
}
.mfph-faq-button i{transition:.2s}
.mfph-faq-answer{
    display:none;
    padding:0 30px 20px 0;
    font-size:13px;
}
.mfph-faq-item.mfph-active .mfph-faq-answer{display:block}
.mfph-faq-item.mfph-active .mfph-faq-button i{transform:rotate(180deg)}

/* FINAL */
.mfph-final{
    padding:70px 0;
    background:#edf6ff;
    text-align:center;
}
.mfph-final h2{
    margin:0 0 13px;
    color:var(--mfph-blue-dark);
    font-size:clamp(31px,4vw,46px);
}
.mfph-final p{max-width:700px;margin:0 auto 25px;font-size:15px}

/* REVEAL */
.mfph-reveal{opacity:0;transform:translateY(18px);transition:.65s ease}
.mfph-reveal.visible{opacity:1;transform:translateY(0)}

@media(max-width:1000px){
    .mfph-hero-grid,.mfph-service-layout{grid-template-columns:1fr}
    .mfph-service-side{min-height:auto}
    .mfph-compact-grid{grid-template-columns:repeat(2,1fr)}
    .mfph-ph-flow{grid-template-columns:repeat(2,1fr)}
    .mfph-ph-arrow{display:none}
}
@media(max-width:700px){
    .mfph-service-layout{grid-template-columns:1fr}
    .mfph-service-image{min-height:205px;flex-basis:205px}
    .mfph-service-detail-list{grid-template-columns:1fr}
    .mfph-section{padding:58px 0}
    .mfph-hero{padding:62px 0 55px}
    .mfph-hero h1{letter-spacing:-1px}
    .mfph-trust-grid{grid-template-columns:repeat(2,1fr)}
    .mfph-trust-item{border-bottom:1px solid rgba(255,255,255,.1)}
    .mfph-compact-grid{grid-template-columns:1fr}
    .mfph-service-main,.mfph-service-side{padding:25px}
    .mfph-service-price{grid-template-columns:1fr 1fr}
    .mfph-ph-flow{grid-template-columns:1fr}
    .mfph-buttons{flex-direction:column}
    .mfph-btn{width:100%}
}
@media(max-width:430px){
    .mfph-trust-grid{grid-template-columns:1fr}
    .mfph-service-price{grid-template-columns:1fr}
}

@media (max-width:900px){
    .mfph-flow{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:620px){
    .mfph-flow{grid-template-columns:1fr 1fr}
    .mfph-service-description,.mfph-section-heading p{font-size:15px}
}

/* ==========================================================
   LEGACY MF/style.css CONFLICT FIX
   style.css contains .category-main section { background-color:#fff; }
   These higher-specificity rules preserve the V2 section backgrounds
   without changing the legacy site-wide stylesheet.
   ========================================================== */
.mfph-page .mfph-hero{
    background:linear-gradient(135deg,#edf6ff 0%,#fff 58%,#f7fbff 100%);
}
.mfph-page .mfph-trustbar{
    background:var(--mfph-blue-dark);
    color:#fff;
}
.mfph-page .mfph-light{
    background:var(--mfph-light);
}
.mfph-page .mfph-final{
    background:#edf6ff;
}

/* ==========================================================
   FINAL ISOLATION / LEGACY MF STYLE OVERRIDES
   These rules intentionally have higher specificity than the
   legacy .category-main selectors in MF/style.css.
   MF/style.css itself remains unchanged.
   ========================================================== */

/* Keep every PH Surfer section as a block and restore its own background. */
.site-main.category-main .mfph-page section.mfph-hero {
    display:block;
    width:100%;
    background:linear-gradient(135deg,#edf6ff 0%,#fff 58%,#f7fbff 100%);
}

.site-main.category-main .mfph-page section.mfph-trustbar {
    display:block;
    width:100%;
    background:var(--mfph-blue-dark);
    color:#fff;
}

.site-main.category-main .mfph-page section.mfph-section.mfph-light {
    display:block;
    width:100%;
    background:var(--mfph-light);
}

.site-main.category-main .mfph-page section.mfph-section:not(.mfph-light) {
    background:#fff;
}

.site-main.category-main .mfph-page section.mfph-final {
    display:block;
    width:100%;
    background:#edf6ff;
}

/* The legacy stylesheet globally centers every h1. The V2 hero must be left aligned. */
.site-main.category-main .mfph-page .mfph-hero h1 {
    text-align:left;
    margin-left:0;
    margin-right:0;
    padding-left:0;
    padding-right:0;
}

/* Make the hero copy and CTA row use exactly the same left edge as the heading. */
.site-main.category-main .mfph-page .mfph-hero-grid > div:first-child {
    text-align:left;
    margin-left:0;
    padding-left:0;
}

.site-main.category-main .mfph-page .mfph-hero-copy {
    margin-left:0;
    margin-right:0;
    padding-left:0;
}

.site-main.category-main .mfph-page .mfph-buttons {
    margin-left:0;
    padding-left:0;
}

/* Prevent legacy heading rules from changing V2 service headings. */
.site-main.category-main .mfph-page h1,
.site-main.category-main .mfph-page h2,
.site-main.category-main .mfph-page h3,
.site-main.category-main .mfph-page h4,
.site-main.category-main .mfph-page h5,
.site-main.category-main .mfph-page h6 {
    font-family:Inter,Arial,sans-serif;
}

/* Prevent the old site stylesheet from changing V2 paragraph spacing. */
.site-main.category-main .mfph-page p {
    font-family:Inter,Arial,sans-serif;
}

/* Keep the trust-bar text visible after the legacy category styles are loaded. */
.site-main.category-main .mfph-page .mfph-trustbar,
.site-main.category-main .mfph-page .mfph-trustbar * {
    color:inherit;
}

.site-main.category-main .mfph-page .mfph-trustbar .mfph-trust-item i {
    color:#f7c66a;
}

/* Keep the page's V2 content full-width inside the template's main wrapper. */
.site-main.category-main .mfph-page {
    float:none;
    width:100%;
    margin:0;
    padding:0;
}

/* Responsive protection against legacy Bootstrap/category rules. */
@media (max-width:1000px) {
    .site-main.category-main .mfph-page .mfph-hero-grid,
    .site-main.category-main .mfph-page .mfph-service-layout {
        grid-template-columns:1fr;
    }
}

@media (max-width:700px) {
    .site-main.category-main .mfph-page .mfph-hero h1 {
        text-align:left;
    }
}


/* =========================================
   MAIL PLANS
   ========================================= */

.mf-mail-plans {
    width: 100%;
    padding: 35px 10px 40px;
    box-sizing: border-box;
}


/* =========================================
   HEADING
   ========================================= */

.mf-mail-plans-title {
    text-align: center;
    margin-bottom: 28px;
}

.mf-mail-plans-title span {
    display: block;

    margin-bottom: 7px;

    color: #0066a1;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;
}

.mf-mail-plans-title h2 {
    margin: 0 0 8px;

    color: #12395d;

    font-size: 30px;
    line-height: 1.25;

    font-weight: 500;
}

.mf-mail-plans-title p {
    margin: 0;

    color: #60758a;

    font-size: 14px;
    line-height: 1.6;
}


/* =========================================
   GRID
   ========================================= */

.mf-mail-plans-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    width: 100%;
}


/* =========================================
   CARD
   ========================================= */

.mf-mail-plan {
    position: relative;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #dce5ec;

    border-radius: 10px;

    padding: 22px 18px;

    box-sizing: border-box;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.mf-mail-plan:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(20,65,95,.08);
}


/* FEATURED PLAN */

.mf-mail-plan-featured {
    border: 2px solid #FF7B00;

    padding: 21px 17px;
}


/* =========================================
   POPULAR BADGE
   ========================================= */

.mf-mail-popular {
    position: absolute;

    top: -12px;
    left: 50%;

    transform: translateX(-50%);

    background: #FF7B00;

    color: #ffffff;

    padding: 4px 12px;

    border-radius: 20px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .6px;

    white-space: nowrap;
}


/* =========================================
   PLAN NAME
   ========================================= */

.mf-mail-plan-name {
    color: #0066a1;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================
   PRICE
   ========================================= */

.mf-mail-price {
    display: flex;

    align-items: baseline;

    gap: 4px;

    margin: 11px 0 4px;
}

.mf-mail-price strong {
    color: #12395d;

    font-size: 31px;
    line-height: 1;

    font-weight: 600;
}

.mf-mail-price span {
    color: #718396;

    font-size: 12px;
}


/* =========================================
   ANNUAL
   ========================================= */

.mf-mail-annual {
    min-height: 38px;

    color: #60758a;

    font-size: 12px;

    line-height: 1.45;
}

.mf-mail-annual strong {
    color: #FF7B00;
}


/* =========================================
   DESCRIPTION
   ========================================= */

.mf-mail-description {
    min-height: 55px;

    margin: 14px 0 12px;

    color: #526a7e;

    font-size: 13px;

    line-height: 1.55;
}


/* =========================================
   FEATURES
   ========================================= */

.mf-mail-plan ul {
    list-style: none;

    padding: 0;

    margin: 0 0 20px;
}

.mf-mail-plan li {
    position: relative;

    padding: 6px 0 6px 21px;

    color: #526a7e;

    font-size: 13px;

    line-height: 1.45;
}

.mf-mail-plan li::before {
    content: "\f058";

    position: absolute;

    left: 0;
    top: 7px;

    font-family: FontAwesome;

    color: #159b78;

    font-size: 13px;
}


/* =========================================
   BUTTON
   ========================================= */

.mf-mail-button {
    display: block;

    width: 100%;

    margin-top: auto;

    padding: 11px 8px;

    background: #FF7B00;

    color: #ffffff !important;

    border-radius: 6px;

    text-align: center;

    text-decoration: none !important;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.4;

    box-sizing: border-box;

    transition: background .2s ease;
}

.mf-mail-button:hover {
    background: #e86f00;

    color: #ffffff !important;
}

.mf-mail-button i {
    margin-left: 5px;
}


/* =========================================
   SHIPPING NOTE
   ========================================= */

.mf-mail-shipping-note {
    margin: 15px auto 0;

    padding: 11px 14px;

    background: #f7f9fb;

    border: 1px solid #dce5ec;

    border-radius: 7px;

    color: #60758a;

    font-size: 12px;

    line-height: 1.55;

    text-align: center;
}

.mf-mail-shipping-note i {
    color: #0066a1;

    margin-right: 4px;
}

.mf-mail-shipping-note strong {
    color: #12395d;
}


/* =========================================
   TABLET / NARROW MAIN COLUMN
   ========================================= */

@media (max-width: 1000px) {

    .mf-mail-plans-grid {
        grid-template-columns: 1fr;
    }

    .mf-mail-plan,
    .mf-mail-plan-featured {
        padding: 25px 22px;
    }

    .mf-mail-description {
        min-height: auto;
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

    .mf-mail-plans {
        padding: 30px 5px 35px;
    }

    .mf-mail-plans-title h2 {
        font-size: 27px;
    }

    .mf-mail-plans-title p {
        font-size: 14px;
    }

    .mf-mail-plan,
    .mf-mail-plan-featured {
        padding: 24px 20px;
    }

    .mf-mail-price strong {
        font-size: 34px;
    }

    .mf-mail-plan li {
        font-size: 14px;
        padding: 7px 0 7px 22px;
    }

    .mf-mail-description {
        font-size: 14px;
        line-height: 1.6;
    }

    .mf-mail-button {
        padding: 13px 10px;
        font-size: 14px;
    }

    .mf-mail-shipping-note {
        font-size: 12px;
    }

}