/*
 * ============================================================
 * YFP HOME V2
 * Add this file after Fengshui_style.css
 * ============================================================
 */

.yfp-home-v2 {
    background: #fffdf8;
    color: #171717;
    font-family: "Poppins", sans-serif;
}

.yfp-home-v2 a {
    text-decoration: none;
}

.yfp-sidebar {
    width: 300px;
    background: #080808;
    color: #fff;
    padding: 24px 18px;
    z-index: 3;
}

.yfp-sidebar-logo {
    width: 52%;
    display: block;
    margin: 0 auto 20px;
}

.yfp-sidebar-title {
    font-size: 30px;
    line-height: 1.15;
    padding: 15px 4px 28px;
    font-weight: 600;
}

.yfp-sidebar .w3-bar-item {
    color: #fff;
    font-size: 18px;
    padding: 10px 8px;
}

.yfp-sidebar .w3-bar-item:hover {
    background: #e2725b !important;
    color: #fff !important;
}

.yfp-sidebar-divider {
    height: 1px;
    background: rgba(255,255,255,.25);
    margin: 18px 8px;
}

.yfp-sidebar-login {
    margin-top: 16px;
    border: 1px solid #e2725b;
    border-radius: 6px;
}

.yfp-mobile-header {
    display: none;
}

.yfp-main {
    margin-left: 330px;
    margin-right: 25px;
    max-width: 1500px;
}

.yfp-section {
    padding: 70px 28px;
    max-width: 1500px;
    margin: 0 auto;
}

.yfp-hero {
    min-height: 670px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 35px;
    align-items: center;
    padding-top: 45px;
    background:
        radial-gradient(circle at 78% 48%, rgba(85,153,220,.13), transparent 34%),
        linear-gradient(135deg, #fffdf8 0%, #f8f5ed 100%);
}

.yfp-eyebrow {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.2px;
    margin: 0 0 10px;
}

.yfp-hero-copy .yfp-eyebrow {
    color: #b72c20;
}

.yfp-hero h1 {
    font-size: clamp(46px, 5vw, 78px);
    line-height: .98;
    font-weight: 600;
    margin: 0 0 24px;
    letter-spacing: -2px;
}

.yfp-hero-lead {
    font-size: 23px;
    line-height: 1.45;
    max-width: 650px;
    margin: 0 0 20px;
}

.yfp-hero-text {
    font-size: 16px;
    line-height: 1.7;
    max-width: 650px;
}

.yfp-primary-button {
    display: inline-block;
    margin-top: 18px;
    padding: 12px 24px;
    background: #b72c20;
    color: #fff !important;
    border-radius: 6px;
    font-weight: 600;
    transition: transform .15s ease, opacity .15s ease;
}

.yfp-primary-button:hover {
    opacity: .88;
    transform: translateY(-1px);
}

.yfp-guru {
    margin-top: 20px;
    color: #b72c20;
    font-family: "Dancing Script", cursive;
    font-size: 32px;
}

.yfp-hero-visual {
    min-height: 590px;
    position: relative;
}

.yfp-conscious-title { display: none; }

.yfp-conscious-title strong {
    display: block;
    font-size: 20px;
}

.yfp-conscious-title span {
    display: block;
    color: #202020;
    font-size: 13px;
    font-weight: 400;
    margin-top: 4px;
}

.yfp-energy-diagram {
    position: relative;
    height: 525px;
    max-width: 800px;
    margin: 0 auto;
}

.yfp-energy-arrows {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.yfp-conscious-box {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 300px;
    padding: 11px 18px;
    text-align: center;
    background: rgba(255,255,255,.95);
    border: 2px solid #397657;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(0,0,0,.08);
    z-index: 4;
}

.yfp-conscious-box strong {
    display: block;
    color: #14563c;
    font-size: 19px;
    letter-spacing: .4px;
}

.yfp-conscious-box span {
    display: block;
    margin-top: 3px;
    color: #333;
    font-size: 12px;
    line-height: 1.35;
}

.yfp-energy-node {
    position: absolute;
    width: 178px;
    height: 154px;
    padding: 13px;
    border-radius: 50%;
    text-align: center;
    background: rgba(255,255,255,.94);
    box-shadow: 0 6px 22px rgba(0,0,0,.10);
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.yfp-energy-node strong {
    display: block;
    font-size: 18px;
    line-height: 1.1;
}

.yfp-energy-node small {
    display: block;
    font-weight: 700;
    font-size: 12px;
    margin-top: 2px;
}

.yfp-energy-node p {
    font-size: 11.5px;
    line-height: 1.3;
    margin: 6px 0 0;
    max-width: 145px;
}

.yfp-node-icon {
    font-size: 35px;
    line-height: 1;
    margin-bottom: 3px;
}

.yfp-heaven {
    left: 4%;
    top: 105px;
    color: #e45114;
    border: 2px solid #e9b87e;
    background: rgba(255,249,238,.96);
}

.yfp-earth {
    right: 4%;
    top: 105px;
    color: #25613f;
    border: 2px solid #a9c6a9;
    background: rgba(244,250,244,.96);
}

.yfp-food {
    left: 10%;
    bottom: 18px;
    color: #174e9b;
    border: 2px solid #a4c7ed;
    background: rgba(245,249,255,.96);
}

.yfp-emotions {
    right: 10%;
    bottom: 18px;
    color: #5d2a83;
    border: 2px solid #d2bce5;
    background: rgba(250,246,252,.96);
}

.yfp-you {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, #5a98df 0%, #2d72c4 50%, #164f96 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 38px rgba(50,120,210,.40);
    border: 4px solid rgba(255,255,255,.8);
    z-index: 4;
}

.yfp-you strong {
    font-size: 34px;
    line-height: 1;
}

.yfp-you span {
    font-size: 23px;
    margin-top: 6px;
}

.yfp-three-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #ded9cf;
    border-bottom: 1px solid #ded9cf;
    background: #fff;
}

.yfp-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px 30px;
}

.yfp-step + .yfp-step {
    border-left: 1px solid #ded9cf;
}

.yfp-step > span {
    min-width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #4c8969;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.yfp-step strong {
    font-size: 16px;
}

.yfp-step p {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.4;
}

.yfp-section-heading {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 35px;
}

.yfp-section-heading .yfp-eyebrow {
    color: #b72c20;
}

.yfp-section-heading h2 {
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.1;
    margin: 0 0 12px;
    font-weight: 600;
}

.yfp-section-heading > p:last-child {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

.yfp-card-grid {
    display: grid;
    gap: 15px;
}

.yfp-four-cards {
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    max-width: 1050px;
    margin: 0 auto;
    align-items: stretch;
}

.yfp-card {
    min-height: 360px;
    padding: 24px 22px;
    border: 1px solid #d8d2c7;
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.yfp-card-symbol {
    font-size: 44px;
    line-height: 1;
}

.yfp-card h3 {
    font-size: 22px;
    margin: 12px 0 0;
    font-weight: 600;
}

.yfp-card h4 {
    font-size: 15px;
    margin: 0 0 12px;
    font-weight: 600;
}

.yfp-card p {
    font-size: 14px;
    line-height: 1.6;
    flex: 1;
}

.yfp-card a {
    font-weight: 600;
}

.yfp-card-heaven {
    border-color: #e7ad74;
}

.yfp-card-heaven h3,
.yfp-card-heaven h4,
.yfp-card-heaven a {
    color: #c94110;
}

.yfp-card-earth {
    border-color: #a8c6a6;
}

.yfp-card-earth h3,
.yfp-card-earth h4,
.yfp-card-earth a {
    color: #21603f;
}

.yfp-card-food {
    border-color: #9ebde5;
}

.yfp-card-food h3,
.yfp-card-food h4,
.yfp-card-food a {
    color: #164f9c;
}

.yfp-card-emotions {
    border-color: #cdb4df;
}

.yfp-card-emotions h3,
.yfp-card-emotions h4,
.yfp-card-emotions a {
    color: #5b287e;
}

.yfp-two-column-section {
    background: #faf8f1;
}

.yfp-comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 950px;
    margin: auto;
}

.yfp-comparison-card {
    padding: 28px;
    border-radius: 10px;
    border: 1px solid #d6d0c5;
    background: #fff;
}

.yfp-comparison-title {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 18px;
}

.yfp-mini-symbol {
    font-size: 45px;
}

.yfp-comparison-title h3 {
    margin: 0;
    font-size: 25px;
    font-weight: 600;
}

.yfp-comparison-title strong {
    font-size: 14px;
}

.yfp-comparison-card ul {
    margin: 0 0 20px;
    padding-left: 22px;
}

.yfp-comparison-card li {
    margin: 7px 0;
    font-size: 14px;
}

.yfp-bazi-card {
    border-color: #e7b476;
}

.yfp-bazi-card .yfp-mini-symbol,
.yfp-bazi-card h3,
.yfp-bazi-card .yfp-text-link {
    color: #c94714;
}

.yfp-fengshui-card {
    border-color: #a8c5a7;
}

.yfp-fengshui-card .yfp-mini-symbol,
.yfp-fengshui-card h3,
.yfp-fengshui-card .yfp-text-link {
    color: #23603f;
}

.yfp-level-flow {
    max-width: 920px;
    margin: auto;
}

.yfp-level {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 20px;
    align-items: center;
    padding: 22px 28px;
    border-radius: 10px;
    background: white;
    border: 1px solid #d5d0c7;
}

.yfp-level h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

.yfp-level p {
    margin: 5px 0;
    font-size: 14px;
    line-height: 1.45;
}

.yfp-level-icon {
    font-size: 58px;
    text-align: center;
}

.yfp-level.grand {
    border-color: #a9c59f;
    background: #f5f8f1;
}

.yfp-level.grand h3 {
    color: #205f3e;
}

.yfp-level.small {
    border-color: #9fc1df;
    background: #f2f7fc;
}

.yfp-level.small h3 {
    color: #1c5894;
}

.yfp-level.personal {
    border-color: #d2b6df;
    background: #faf5fc;
}

.yfp-level.personal h3 {
    color: #5b287c;
}

.yfp-flow-arrow {
    text-align: center;
    font-size: 35px;
    color: #4b7e68;
    line-height: 1.1;
}

.yfp-tools-section {
    background: #fff;
}

.yfp-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.yfp-tool-card {
    display: flex;
    flex-direction: column;
    padding: 23px;
    border: 1px solid #d8d2c7;
    border-radius: 10px;
    background: #fffdf9;
    color: #171717 !important;
    transition: transform .15s ease, box-shadow .15s ease;
}

.yfp-tool-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.09);
}

.yfp-tool-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

.yfp-tool-card strong {
    font-size: 18px;
    color: #b72c20;
}

.yfp-tool-card span:last-child {
    margin-top: 7px;
    font-size: 14px;
    line-height: 1.5;
}

.yfp-learn-section {
    background: #f8f5ee;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 50px;
    align-items: center;
}

.yfp-learn-copy h2 {
    font-size: 42px;
    margin: 0 0 15px;
    font-weight: 600;
}

.yfp-learn-copy p {
    line-height: 1.7;
}

.yfp-blog-topics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.yfp-blog-topics > div {
    padding: 25px 20px;
    border: 1px solid #ddd5c9;
    border-radius: 10px;
    background: #fff;
}

.yfp-blog-topics span {
    display: block;
    font-size: 42px;
}

.yfp-blog-topics strong {
    display: block;
    font-size: 18px;
    margin: 8px 0;
}

.yfp-blog-topics p {
    font-size: 13px;
    line-height: 1.5;
}

.yfp-business-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.yfp-business-card {
    padding: 55px 50px;
}

.yfp-business-card h2 {
    font-size: 34px;
    margin: 0 0 12px;
    font-weight: 600;
}

.yfp-business-card p {
    line-height: 1.65;
}

.yfp-business-card a {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
}

.yfp-academy {
    background: #f2f6fb;
    color: #174b85;
}

.yfp-academy .yfp-eyebrow {
    color: #174b85;
}

.yfp-consultation {
    background: #fff3ee;
    color: #a5281f;
}

.yfp-consultation .yfp-eyebrow {
    color: #a5281f;
}

.yfp-business-icon {
    font-size: 52px;
    margin-bottom: 12px;
}

.yfp-login-section {
    background: #a90812;
    color: white;
    padding: 50px 45px;
}

.yfp-login-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 35px;
}

.yfp-login-heading .yfp-eyebrow {
    color: #ffd9d5;
}

.yfp-login-heading h2 {
    font-size: 38px;
    margin: 0 0 10px;
    font-weight: 600;
}

.yfp-login-heading p {
    margin: 0;
}

.yfp-login-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    max-width: 1000px;
    margin: auto;
}

.yfp-login-form,
.yfp-access-card {
    padding: 28px;
    border-radius: 10px;
    background: rgba(255,255,255,.12);
}

.yfp-login-form label,
.yfp-password-form label,
.yfp-admin-form label {
    display: block;
    margin: 0 0 5px;
    font-size: 13px;
    font-weight: 600;
}

.yfp-login-form input,
.yfp-password-form input,
.yfp-admin-form input {
    background: #fff;
    color: #111;
    margin-bottom: 15px;
}

.yfp-login-button {
    display: block;
    width: 100%;
    padding: 12px 18px;
    margin-top: 8px;
    border: 1px solid white;
    border-radius: 6px;
    background: transparent;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.yfp-login-button:hover {
    background: white;
    color: #a90812;
}

.yfp-secondary-form {
    margin-top: 18px;
}

.yfp-secondary-button {
    padding: 10px 16px;
    border: 1px solid #b72c20;
    border-radius: 6px;
    background: white;
    color: #b72c20;
    cursor: pointer;
    font-weight: 600;
}

.yfp-message {
    margin-top: 15px;
    padding: 12px;
    border-radius: 6px;
    background: rgba(220,255,220,.92);
    color: #145c2d;
}

.yfp-error {
    margin-top: 15px;
    padding: 12px;
    border-radius: 6px;
    background: #fff0f0;
    color: #a00000;
}

.yfp-access-card h3 {
    margin-top: 0;
    font-size: 25px;
}

.yfp-access-card p {
    line-height: 1.6;
}

.yfp-access-highlight {
    font-size: 20px;
    font-weight: 700;
}

.yfp-paypal-button {
    display: block;
    max-width: 280px;
    width: 100%;
    height: auto;
    margin: 25px auto 0;
}

.yfp-change-password,
.yfp-admin-section {
    padding: 55px 28px;
    max-width: 900px;
    margin: auto;
}

.yfp-password-form,
.yfp-admin-form {
    max-width: 500px;
    margin: auto;
}

.yfp-password-form input,
.yfp-admin-form input {
    margin-bottom: 16px;
}

.yfp-footer {
    margin-left: 0px;
    padding: 35px 45px;
    background: #111;
    color: white;
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.yfp-footer p {
    margin: 5px 0 0;
    color: #ccc;
}

.yfp-footer a {
    color: #ffd0c8;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {

    .yfp-main {
        margin-left: 0;
        margin-right: 0;
    }

    .yfp-sidebar {
        display: none;
    }

    .yfp-mobile-header {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 4;
        padding: 12px 16px;
        background: #111;
        color: #fff;
        font-weight: 600;
    }

    .yfp-menu-button {
        border: 0;
        background: transparent;
        color: white;
        font-size: 25px;
        cursor: pointer;
    }

    .yfp-hero {
        padding-top: 95px;
    }

    .yfp-footer {
        margin-left: 0;
    }
}

@media (max-width: 900px) {

    .yfp-hero {
        grid-template-columns: 1fr;
    }

    .yfp-hero-copy {
        text-align: center;
    }

    .yfp-hero-text,
    .yfp-hero-lead {
        margin-left: auto;
        margin-right: auto;
    }

    .yfp-four-cards,
    .yfp-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .yfp-three-steps,
    .yfp-login-grid,
    .yfp-business-grid,
    .yfp-learn-section {
        grid-template-columns: 1fr;
    }

    .yfp-step + .yfp-step {
        border-left: 0;
        border-top: 1px solid #ded9cf;
    }

    .yfp-learn-section {
        gap: 30px;
    }
}

@media (max-width: 650px) {

    .yfp-section {
        padding: 48px 18px;
    }

    .yfp-hero {
        min-height: auto;
    }

    .yfp-hero h1 {
        font-size: 46px;
    }

    .yfp-hero-visual {
        min-height: 500px;
    }

    .yfp-energy-diagram {
        height: 430px;
        transform: scale(.82);
        transform-origin: top center;
        width: 120%;
        margin-left: -10%;
    }

    .yfp-four-cards,
    .yfp-tools-grid,
    .yfp-comparison-grid,
    .yfp-blog-topics {
        grid-template-columns: 1fr;
    }

    .yfp-level {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .yfp-business-card,
    .yfp-login-section {
        padding: 38px 22px;
    }

    .yfp-login-grid {
        gap: 18px;
    }

    .yfp-footer {
        flex-direction: column;
        padding: 30px 22px;
    }
}

@media (max-width: 900px) {
    .yfp-energy-diagram {
        height: 500px;
        max-width: 720px;
    }

    .yfp-energy-node {
        width: 155px;
        height: 145px;
    }

    .yfp-you {
        width: 170px;
        height: 170px;
    }

    .yfp-you strong {
        font-size: 30px;
    }

    .yfp-you span {
        font-size: 20px;
    }
}

@media (max-width: 650px) {
    .yfp-energy-diagram {
        height: 600px;
        max-width: 390px;
    }

    .yfp-conscious-box {
        width: 250px;
    }

    .yfp-energy-node {
        width: 145px;
        height: 135px;
    }

    .yfp-heaven {
        left: 0;
        top: 100px;
    }

    .yfp-earth {
        right: 0;
        top: 100px;
    }

    .yfp-food {
        left: 0;
        bottom: 45px;
    }

    .yfp-emotions {
        right: 0;
        bottom: 45px;
    }

    .yfp-you {
        width: 155px;
        height: 155px;
        top: 52%;
    }
}

/* Final V3 layout overrides */
.yfp-four-cards {
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
}

.yfp-card-secondary {
    grid-column: auto;
}

@media (max-width: 900px) {
    .yfp-four-cards {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 650px) {
    .yfp-four-cards {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   HOME V4 — screenshot-inspired presentation
   ============================================================ */
.yfp-home-v2 {
    background: #fcfbf7;
    color: #101c2d;
}

.yfp-top-header {
    height: 118px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 18px 32px 12px 38px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #eee7da;
    position: relative;
    z-index: 20;
}

.yfp-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #10233b !important;
    flex: 0 0 auto;
}
.yfp-brand img { width: 68px; height: 68px; object-fit: contain; }
.yfp-brand-text strong {
    display:block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 20px;
    line-height: .93;
    letter-spacing: .5px;
}
.yfp-brand-text small {
    display:block;
    margin-top: 7px;
    font-size: 9px;
    letter-spacing: 1.2px;
    color: #9a6a25;
}
.yfp-top-nav { display:flex; align-items:center; gap:28px; white-space:nowrap; }
.yfp-top-nav a { color:#122238 !important; font-size:14px; padding:15px 0; }
.yfp-top-nav a:hover { color:#a86c1d !important; }
.yfp-top-nav a.active { color:#a86c1d !important; border-bottom:2px solid #b67a28; }
.yfp-top-nav span { font-size:16px; margin-left:3px; }
.yfp-account-button {
    background:#10253a; color:#fff !important; border-radius:7px;
    padding:11px 15px !important; font-weight:800;
}
.yfp-mobile-header { display:none; }
.yfp-main { margin-left:0; margin-right:0; max-width:none; }
.yfp-section { max-width:none; }

.yfp-hero {
    min-height: 410px;
    padding: 0 55px 0;
    display:grid;
    grid-template-columns: 39% 61%;
    gap:0;
    align-items:center;
    background:#faf7ef;
    overflow:hidden;
} 
.yfp-hero-copy { padding: 20px 0 25px; position:relative; z-index:2; }
.yfp-hero-copy h1 {
    font-family: Georgia, 'Times New Roman', serif;
    color:#10233d;
    font-size:clamp(42px,4.3vw,64px);
    line-height:1.06;
    letter-spacing:-1px;
    font-weight:600;
    margin:0;
}
.yfp-hero-rule { width:60px; height:2px; background:#b37a2b; margin:27px 0 24px; }
.yfp-hero-lead { font-size:17px; line-height:1.65; max-width:430px; margin:0; color:#14243a; }
.yfp-hero-art { align-self:stretch; display:flex; align-items:flex-end; justify-content:flex-end; margin-right:-55px; }
.yfp-hero-art svg { width:100%; max-width:860px; height:auto; display:block; }

.yfp-influences-section { padding-top:45px; padding-bottom:30px; }
.yfp-section-heading.centered { text-align:center; }
.yfp-section-heading.centered h2 {
    font-family:Georgia,'Times New Roman',serif;
    color:#12263f; font-size:26px; letter-spacing:.2px; margin:0 0 5px;
}
.yfp-heading-ornament { color:#b67a28; margin:0 auto 6px; font-size:16px; }
.yfp-section-heading.centered p { margin:0 auto 32px; font-size:15px; line-height:1.55; }
.yfp-focus-cards { max-width:1030px; margin:0 auto 25px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.yfp-focus-card {
    min-height:335px; position:relative; text-align:center; padding:0 32px 42px;
    border:1px solid; border-radius:12px; overflow:hidden; background:#fff;
    box-shadow:0 3px 12px rgba(20,30,40,.03);
}
.yfp-focus-card:after { content:''; position:absolute; left:-10%; right:-10%; bottom:-38px; height:80px; border-top:2px solid currentColor; border-radius:50%; opacity:.12; }
.yfp-focus-card.bazi { border-color:#8db4e7; color:#102c51; background:linear-gradient(#f7fbff,#f1f7ff); }
.yfp-focus-card.fengshui { border-color:#a8bd9c; color:#1e4a35; background:linear-gradient(#f8faf3,#f1f5e9); }
.yfp-focus-card.food-emotions { border-color:#edb09d; color:#6d3528; background:linear-gradient(#fff8f4,#fff1eb); }
.yfp-focus-icon { width:116px; height:116px; margin:-1px auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:48px; color:white; }
.bazi .yfp-focus-icon { background:#153557; }
.fengshui .yfp-focus-icon { background:#315f45; }
.food-emotions .yfp-focus-icon { background:#e8876b; }
.yfp-focus-card h3 { font-family:Georgia,'Times New Roman',serif; font-size:22px; margin:0; }
.yfp-focus-card h4 { font-family:Georgia,'Times New Roman',serif; color:#8c5e20; font-size:16px; margin:5px 0 10px; font-weight:500; }
.yfp-card-rule { width:38px; height:2px; background:#b67a28; margin:0 auto 16px; }
.yfp-focus-card p { color:#111; font-size:13px; line-height:1.55; margin:0 auto; max-width:270px; }
.yfp-card-number { position:absolute; bottom:17px; left:50%; transform:translateX(-50%); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:21px; font-weight:600; z-index:2; }
.bazi .yfp-card-number { background:#153557; } .fengshui .yfp-card-number { background:#315f45; } .food-emotions .yfp-card-number { background:#e36f57; }

.yfp-complementary-strip {
    max-width:1030px; margin:0 auto; padding:22px 26px; border:1px solid #edb09d; border-radius:12px;
    background:#fff6f1; display:grid; grid-template-columns:92px 1fr auto; gap:18px; align-items:center;
}
.yfp-complementary-icon { width:78px; height:78px; border-radius:50%; background:#e8876b; color:#fff; display:flex; align-items:center; justify-content:center; font-size:39px; }
.yfp-complementary-strip h3 { font-family:Georgia,'Times New Roman',serif; font-size:19px; margin:0 0 9px; color:#14243a; }
.yfp-complementary-strip p { margin:4px 0; font-size:13px; line-height:1.4; }
.yfp-complementary-strip a { color:#d55f4a; text-decoration:underline; }
.yfp-complementary-button { background:#df634f; color:#fff !important; padding:12px 18px; border-radius:7px; font-size:13px; font-weight:600; white-space:nowrap; }

.yfp-account-section { max-width:1030px; margin:0 auto; padding:22px 0 35px; }
.yfp-account-heading { height:1px; background:#c99242; margin:0 0 28px; position:relative; }
.yfp-account-heading:after { content:'⌂'; position:absolute; left:50%; top:-18px; transform:translateX(-50%); width:36px; height:36px; border:2px solid #b67a28; border-radius:50%; background:#fcfbf7; color:#10253a; display:flex; align-items:center; justify-content:center; font-size:19px; }
.yfp-account-grid { display:grid; grid-template-columns:1fr 1.05fr 1fr; }
.yfp-account-panel { min-height:180px; padding:0 27px; display:flex; gap:14px; align-items:flex-start; }
.yfp-account-panel + .yfp-account-panel { border-left:1px solid #e1cda9; }
.yfp-account-icon { flex:0 0 48px; width:48px; height:48px; border-radius:50%; background:#f0e8da; color:#a48759; display:flex; align-items:center; justify-content:center; font-size:23px; }
.yfp-account-panel h3 { font-family:Georgia,'Times New Roman',serif; color:#17263a; font-size:17px; margin:4px 0 12px; }
.yfp-account-panel p { font-size:13px; line-height:1.55; margin:0 0 12px; color:#222; }
.yfp-panel-content { width:100%; }
.yfp-account-panel .w3-input { box-sizing:border-box; width:100%; height:34px; border:1px solid #ddd; border-radius:4px; margin:0 0 8px; padding:7px 10px; font-size:12px; }
.yfp-login-button,.yfp-dark-button { display:inline-block; border:0; background:#10253a; color:#fff !important; border-radius:5px; padding:9px 15px; font-weight:600; font-size:12px; cursor:pointer; }
.yfp-login-button { width:100%; }
.yfp-remember { display:block; font-size:12px; margin:0 0 8px; color:#222; }
.yfp-remember input { vertical-align:middle; }
.yfp-forgot { display:block; margin-top:8px; color:#10253a !important; font-size:11px; }

.yfp-purchase-strip { margin-top:18px; padding:18px 25px; border:1px solid #c5d0c0; border-radius:9px; display:flex; justify-content:space-between; align-items:center; gap:20px; background:#f7f8f3; }
.yfp-purchase-strip h3 { font-family:Georgia,'Times New Roman',serif; margin:0 0 5px; font-size:17px; color:#315c43; }
.yfp-purchase-strip p { margin:0 0 5px; font-size:12px; }
.yfp-purchase-strip strong { color:#315c43; font-size:12px; }
.yfp-paypal-button { max-width:220px; height:auto; }

.yfp-admin-section { max-width:930px; margin:0 auto 45px; padding:16px 25px; border:1px solid #b8c8b1; border-radius:9px; background:#f7f8f3; display:grid; grid-template-columns:60px 1fr 2fr; gap:15px; align-items:center; }
.yfp-admin-icon { width:48px; height:48px; border-radius:50%; background:#e8eee3; display:flex; align-items:center; justify-content:center; color:#315c43; font-size:24px; }
.yfp-admin-title h3 { font-family:Georgia,'Times New Roman',serif; color:#315c43; font-size:17px; margin:0 0 5px; }
.yfp-admin-title p { font-size:11px; margin:0; }
.yfp-admin-form { display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:center; }
.yfp-admin-form .w3-input { box-sizing:border-box; height:34px; border:1px solid #ddd; border-radius:4px; padding:7px 10px; font-size:12px; }
.yfp-admin-button { border:0; background:#315c43; color:#fff; border-radius:5px; padding:10px 20px; font-weight:600; white-space:nowrap; cursor:pointer; }

@media (max-width:1000px) {
    .yfp-top-nav { gap:15px; }
    .yfp-top-nav a { font-size:12px; }
    .yfp-hero { grid-template-columns:44% 56%; padding-left:35px; }
    .yfp-hero-art { margin-right:-25px; }
    .yfp-focus-cards,.yfp-complementary-strip,.yfp-account-section { max-width:92%; }
}
@media (max-width:720px) {
    .yfp-top-header { display:none; }
    .yfp-mobile-header { display:flex; height:64px; align-items:center; justify-content:space-between; padding:0 18px; background:#fff; border-bottom:1px solid #eee; }
    .yfp-mobile-header a { color:#10253a !important; font-weight:600; }
    .yfp-mobile-account { background:#10253a; color:#fff !important; padding:8px 12px; border-radius:5px; font-size:12px; }
    .yfp-hero { min-height:0; grid-template-columns:1fr; padding:48px 28px 0; }
    .yfp-hero-copy { padding-bottom:15px; }
    .yfp-hero-copy h1 { font-size:43px; }
    .yfp-hero-art { margin:0 -28px; }
    .yfp-focus-cards { grid-template-columns:1fr; max-width:360px; }
    .yfp-complementary-strip { grid-template-columns:65px 1fr; }
    .yfp-complementary-icon { width:58px; height:58px; font-size:30px; }
    .yfp-complementary-button { grid-column:2; justify-self:start; }
    .yfp-account-grid { grid-template-columns:1fr; }
    .yfp-account-panel { padding:20px 10px; }
    .yfp-account-panel + .yfp-account-panel { border-left:0; border-top:1px solid #e1cda9; }
    .yfp-admin-section { max-width:92%; grid-template-columns:55px 1fr; }
    .yfp-admin-form { grid-column:1/-1; grid-template-columns:1fr; }
    .yfp-purchase-strip { flex-direction:column; align-items:flex-start; }
}


 V5 HERO — PHOTOREALISTIC BACKGROUND 
.yfp-hero {
    position: relative;
    min-height: 410px;
    overflow: hidden;
    background-image:
        linear-gradient(90deg, rgba(250,247,239,0.99) 0%, rgba(250,247,239,0.97) 20%, rgba(250,247,239,0.88) 32%, rgba(250,247,239,0.62) 44%, rgba(250,247,239,0.18) 57%, rgba(250,247,239,0.00) 70%),
        url('./yfp_hero_lakeside.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.yfp-hero-image-descriptio { position:absolute; inset:0; pointer-events:none; z-index:1; }
.yfp-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
@media (max-width:650px) {
    .yfp-hero {
        min-height:500px;
        background-image: linear-gradient(180deg, rgba(250,247,239,0.99) 0%, rgba(250,247,239,0.94) 38%, rgba(250,247,239,0.48) 62%, rgba(250,247,239,0.05) 100%), url('yfp_hero_lakeside.jpg');
        background-position:63% center;
    }
}

/* FINAL HERO FIX — keep yfp_hero_lakeside.jpg beside this CSS file */
.yfp-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(250,247,239,.99) 30%,
            rgba(250,247,239,.97) 40%,
            rgba(250,247,239,.88) 32%,
            rgba(250,247,239,.62) 44%,
            rgba(250,247,239,.18) 57%,
            rgba(250,247,239,0) 70%
        ),
        url("./yfp_hero_lakeside.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@media (max-width: 650px) {
    .yfp-hero {
        background-image:
            linear-gradient(
                180deg,
                rgba(250,247,239,.99) 0%,
                rgba(250,247,239,.94) 38%,
                rgba(250,247,239,.48) 62%,
                rgba(250,247,239,.05) 100%
            ),
            url("./yfp_hero_lakeside.jpg");
        background-size: cover;
        background-position: 63% center;
    }
}

.yfp-blog-index-hero {
	padding:95px 6% 80px;
    text-align:center;
	background-image: url('yfp_blog_header.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* ============================================================
   BLOG ARTICLE — GENERIC DATABASE-DRIVEN ARTICLE TEMPLATE
   Used by Fengshui_Article.php
   The featured image is supplied by PHP through:
   style="--yfp-article-image:url('...')"
   ============================================================ */

.yfp-blog-page {
    background: #f7f3eb;
}

.yfp-blog-hero {
    padding: 95px 6% 80px;
    text-align: center;
    background-image:
        linear-gradient(rgba(250,247,239,.4), rgba(250,247,239,.4)),
        var(--yfp-article-image, url('yfp_blog_header.jpg'));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.yfp-blog-hero h1 {
    color: #3f493e;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.1;
    margin: 0 auto 24px;
    font-weight: 500;
    max-width: 1000px;
}

.yfp-blog-hero > p:not(.yfp-eyebrow) {
    max-width: 820px;
    margin: auto;
    font-size: 1.15rem;
    line-height: 1.85;
    color: #555;
}

.yfp-article-meta {
    margin: 22px auto 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: #5c5c5c;
    font-size: .9rem;
}

.yfp-main .yfp-blog-wrap {
    width: calc(100% - 48px);
    max-width: 950px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 70px 0 100px;
    box-sizing: border-box;
}

.yfp-blog-wrap h2 {
    color: #4c5848;
    font-size: 2rem;
    line-height: 1.25;
    margin: 60px 0 20px;
    font-weight: 500;
}

.yfp-blog-wrap h3 {
    color: #665a48;
    margin-top: 34px;
}

.yfp-blog-wrap p,
.yfp-blog-wrap li {
    color: #4d4d4d;
    font-size: 1.04rem;
    line-height: 1.9;
}

.yfp-blog-wrap ul {
    padding-left: 28px;
}

.yfp-blog-lead {
    font-size: 1.22rem !important;
}

.yfp-blog-quote {
    margin: 30px 0;
    padding: 24px 28px;
    border-left: 5px solid #a8926d;
    background: rgba(255,255,255,.62);
    border-radius: 0 12px 12px 0;
    color: #4b5148;
    font-size: 1.15rem;
    line-height: 1.75;
}

.yfp-blog-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 30px 0 40px;
}

.yfp-blog-card {
    padding: 28px;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(80,80,80,.1);
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(50,40,20,.05);
}

.yfp-blog-card h3 {
    margin-top: 0;
}

.yfp-blog-flow {
    text-align: center;
    padding: 30px;
    margin: 35px 0;
    background: rgba(255,255,255,.58);
    border-radius: 14px;
    color: #59634f;
    font-weight: 600;
    line-height: 2.2;
}

.yfp-blog-cta {
    margin-top: 70px;
    padding: 44px 35px;
    text-align: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #4f5d4c, #6d765f);
    color: white;
    box-shadow: 0 12px 35px rgba(50,50,35,.15);
}

.yfp-blog-cta h2 {
    color: white;
    margin: 0 0 15px;
}

.yfp-blog-cta p {
    color: rgba(255,255,255,.92);
    max-width: 760px;
    margin: 0 auto 25px;
}

.yfp-blog-cta a {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 30px;
    background: white;
    color: #4f5d4c;
    text-decoration: none;
    font-weight: 600;
}

.yfp-article-not-found {
    text-align: center;
    padding: 40px 0 20px;
}

.yfp-article-not-found a {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 24px;
    border-radius: 28px;
    background: #59634f;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

@media (max-width: 700px) {
    .yfp-blog-two {
        grid-template-columns: 1fr;
    }

    .yfp-main .yfp-blog-wrap {
        width: calc(100% - 32px);
        padding-left: 0;
        padding-right: 0;
    }
}

/* ============================================================
   BLOG INDEX — DATABASE-DRIVEN BLOG LIST
   Used by Fengshui_Blog.php
   ============================================================ */

.yfp-blog-index-hero .yfp-eyebrow{
            text-align:center;
            color:#7d735f;
            font-size:14px;
            letter-spacing:.18em;
            font-weight:600;
		
        }

        .yfp-blog-index-hero h1{
            max-width:900px;
            margin:0 auto 20px;
            color:#3f493c;
            font-size:clamp(2.3rem,5vw,4.2rem);
            line-height:1.1;
            font-weight:500;
        }

        .yfp-blog-index-hero p{
            max-width:790px;
            margin:auto;
            color:#555;
            font-size:1.12rem;
            line-height:1.85;
        }

        .yfp-blog-index-wrap{
            max-width:1180px;
            margin:auto;
            padding:75px 6% 100px;
        }

        .yfp-blog-section-title{
            text-align:center;
            margin-bottom:45px;
        }

        .yfp-blog-section-title h2{
            margin:0 0 12px;
            color:#4c5848;
            font-size:2.15rem;
            font-weight:500;
        }

        .yfp-blog-section-title p{
            max-width:700px;
            margin:auto;
            color:#666;
            line-height:1.8;
        }

        .yfp-article-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:28px;
        }

        .yfp-article-card{
            display:flex;
            flex-direction:column;
            min-height:100%;
            padding:32px 30px 30px;
            background:rgba(255,255,255,.76);
            border:1px solid rgba(80,80,80,.09);
            border-radius:18px;
            box-shadow:0 10px 30px rgba(50,40,20,.06);
            transition:transform .2s ease, box-shadow .2s ease;
        }

        .yfp-article-card:hover{
            transform:translateY(-4px);
            box-shadow:0 16px 36px rgba(50,40,20,.10);
        }

        .yfp-article-tag{
            color:#a07f59;
            font-size:.74rem;
            letter-spacing:.14em;
            font-weight:700;
            margin-bottom:18px;
        }

        .yfp-article-card h3{
            margin:0 0 14px;
            color:#465241;
            font-size:1.42rem;
            line-height:1.35;
            font-weight:500;
        }

        .yfp-article-card p{
            margin:0 0 24px;
            color:#5b5b5b;
            line-height:1.78;
            font-size:.98rem;
        }

        .yfp-article-card a{
            margin-top:auto;
            display:inline-block;
            align-self:flex-start;
            padding:10px 19px;
            border-radius:25px;
            background:#59634f;
            color:white;
            text-decoration:none;
            font-weight:600;
            font-size:.9rem;
        }

        .yfp-article-card a:hover{
            background:#46513f;
        }

        .yfp-article-image{
            width:calc(100% + 60px);
            margin:-32px -30px 25px;
            aspect-ratio:16/9;
            object-fit:cover;
            border-radius:18px 18px 0 0;
            display:block;
        }

        .yfp-blog-message{
            grid-column:1/-1;
            padding:30px;
            text-align:center;
            color:#666;
            background:rgba(255,255,255,.65);
            border:1px solid rgba(80,80,80,.09);
            border-radius:16px;
        }

        .yfp-coming-soon{
            opacity:.82;
        }

        .yfp-coming-soon .yfp-article-tag{
            color:#8b877b;
        }

        .yfp-coming-soon .yfp-status{
            display:inline-block;
            margin-top:auto;
            align-self:flex-start;
            padding:8px 15px;
            border-radius:20px;
            background:#eeeae1;
            color:#777164;
            font-size:.82rem;
            font-weight:600;
        }

        .yfp-blog-categories{
            margin-top:85px;
            padding:50px 6%;
            border-radius:22px;
            background:linear-gradient(135deg,#f0ece3,#e6e9df);
        }

        .yfp-blog-categories h2{
            text-align:center;
            margin:0 0 34px;
            color:#4c5848;
            font-weight:500;
        }

        .yfp-category-grid{
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr));
            gap:18px;
        }

        .yfp-category{
            padding:23px 20px;
            text-align:center;
            background:rgba(255,255,255,.58);
            border-radius:14px;
            border:1px solid rgba(80,80,80,.07);
        }

        .yfp-category strong{
            display:block;
            margin-bottom:8px;
            color:#505b4a;
        }

        .yfp-category span{
            color:#666;
            font-size:.88rem;
            line-height:1.55;
        }

        .yfp-blog-index-cta{
            margin-top:75px;
            padding:46px 35px;
            text-align:center;
            border-radius:20px;
            background:linear-gradient(135deg,#4f5d4c,#6d765f);
            color:white;
            box-shadow:0 12px 35px rgba(50,50,35,.15);
        }

        .yfp-blog-index-cta h2{
            margin:0 0 14px;
            color:white;
            font-weight:500;
        }

        .yfp-blog-index-cta p{
            max-width:760px;
            margin:0 auto 25px;
            color:rgba(255,255,255,.92);
            line-height:1.8;
        }

        .yfp-blog-index-cta a{
            display:inline-block;
            padding:12px 26px;
            border-radius:30px;
            background:white;
            color:#4f5d4c;
            text-decoration:none;
            font-weight:600;
        }

        @media(max-width:900px){
            .yfp-article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
            .yfp-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
        }

        @media(max-width:700px){
            .yfp-article-grid,
            .yfp-category-grid{grid-template-columns:1fr}

            .yfp-blog-index-hero{padding-top:65px}
            .yfp-blog-index-wrap{padding-left:6%;padding-right:6%}
        }