:root {
    --ph-green-900: #0a3b22;
    --ph-green-800: #0f5a2c;
    --ph-green-700: #17722f;
    --ph-green-600: #2a8a2a;
    --ph-green-100: #e8f4e6;
    --ph-ink: #14281b;
    --ph-muted: #4c5f52;
    --ph-line: #dfe7e0;
    --ph-field: #4f8228;
}

.ph-body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--ph-ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }
section[id], .col-md-6[id] { scroll-margin-top: 100px; }

/* ===== Buttons ===== */
.ph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    border-radius: 12px;
    border: 1.5px solid var(--ph-green-800);
    text-decoration: none;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ph-btn:hover { transform: translateY(-1px); }
.ph-btn-solid {
    color: #fff;
    background: linear-gradient(180deg, #17722f 0%, #0b4a22 100%);
    box-shadow: 0 6px 14px rgba(10, 59, 34, .25);
}
.ph-btn-solid:hover { color: #fff; box-shadow: 0 8px 18px rgba(10, 59, 34, .32); }
.ph-btn-outline { color: var(--ph-green-900); background: #fff; }
.ph-btn-outline:hover { color: var(--ph-green-900); background: var(--ph-green-100); }
.ph-btn-sm { padding: 11px 22px; font-size: 15px; }
.ph-btn-lg { padding: 14px 28px; font-size: 17px; }
.ph-btn-block { display: flex; width: 100%; padding: 12px 18px; font-size: 15px; }

/* ===== Header ===== */
.ph-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--ph-line);
}
.ph-nav-inner {
    max-width: 1600px;
    margin: 0 auto;
    min-height: 88px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.ph-brand { display: inline-flex; padding-right: 22px; border-right: 1px solid var(--ph-line); }
.ph-brand img { height: 46px; width: auto; }
.ph-burger {
    display: none;
    margin-left: auto;
    border: 1px solid var(--ph-line);
    background: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 18px;
    color: var(--ph-green-900);
}
.ph-menu,
.ph-menu.collapse:not(.show) { display: flex; align-items: center; flex: 1; gap: 22px; }
.ph-links { display: flex; align-items: center; gap: 6px; flex: 1; }
.ph-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 999px;
    color: var(--ph-ink);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
}
.ph-link:hover { background: var(--ph-green-100); color: var(--ph-green-900); }
.ph-link.is-active {
    color: #fff;
    background: linear-gradient(180deg, #3d9a26 0%, #1f7a1f 100%);
}
.ph-link.dropdown-toggle::after { margin-left: 8px; border-top-width: .32em; }
.ph-dropdown { border: 1px solid var(--ph-line); border-radius: 14px; padding: 8px; box-shadow: 0 14px 30px rgba(10, 59, 34, .12); }
.ph-dropdown .dropdown-item { border-radius: 8px; padding: 9px 14px; font-weight: 600; font-size: 15px; }
.ph-dropdown .dropdown-item:hover { background: var(--ph-green-100); color: var(--ph-green-900); }
.ph-auth { display: flex; gap: 12px; }

/* ===== Hero ===== */
.ph-hero {
    position: relative;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    aspect-ratio: 1467 / 552;
    background: #dcebf3 url('../img/landing/hero.jpg') center / 100% 100% no-repeat;
    overflow: hidden;
}
.ph-hero-copy {
    position: absolute;
    left: 4.1%;
    top: 9.5%;
    width: 50%;
}
.ph-hero h1 {
    margin: 0;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.04;
    font-size: clamp(2rem, 4.1vw, 4.6rem);
    color: var(--ph-green-900);
}
.ph-hero-sub {
    margin: 1.3vw 0 1.3vw;
    max-width: 31em;
    font-size: clamp(1rem, 1.72vw, 1.9rem);
    line-height: 1.3;
    color: #1d2f24;
}
.ph-checks { list-style: none; margin: 0 0 2.2vw; padding: 0; }
.ph-checks li {
    display: flex;
    align-items: center;
    gap: .9vw;
    margin-bottom: .55vw;
    font-size: clamp(.9rem, 1.4vw, 1.5rem);
    font-weight: 500;
}
.ph-checks i { color: var(--ph-green-700); font-size: 1.15em; }
.ph-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.ph-hero-cta .ph-btn-lg {
    font-size: clamp(.9rem, 1.3vw, 1.4rem);
    padding: .9vw 1.9vw;
    border-radius: 14px;
}

/* Chat card, laid over the matching area of the hero photo */
.ph-ask {
    position: absolute;
    left: 73.6%;
    top: 9.6%;
    width: 23.4%;
    padding: .9vw;
    border-radius: 1.5vw;
    background: linear-gradient(160deg, #e3f0ef 0%, #d6e7e6 100%);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 0 .9vw 2.2vw rgba(10, 59, 34, .18);
}
.ph-ask::after {
    content: '';
    position: absolute;
    left: 10%;
    bottom: -1.1vw;
    border: .8vw solid transparent;
    border-top-color: #d6e7e6;
    border-bottom: 0;
    border-left-width: .5vw;
}
.ph-ask-title { display: flex; align-items: center; gap: .6vw; font-weight: 800; font-size: clamp(.8rem, 1.25vw, 1.4rem); color: var(--ph-green-900); padding: .3vw .4vw .7vw; }
.ph-ask-title i { color: #e9c61a; }
.ph-ask-bubble {
    background: #fff;
    border-radius: 1vw;
    text-align: center;
    padding: .8vw 1vw;
    font-weight: 700;
    font-size: clamp(.8rem, 1.2vw, 1.3rem);
}
.ph-ask-list { list-style: none; margin: .7vw 0 0; padding: .2vw; background: rgba(255, 255, 255, .55); border-radius: 1vw; }
.ph-ask-list li {
    display: flex;
    align-items: center;
    gap: .8vw;
    padding: .5vw .7vw;
    font-size: clamp(.7rem, 1vw, 1.1rem);
    font-weight: 500;
    border-bottom: 1px solid rgba(20, 40, 27, .08);
}
.ph-ask-list li:last-child { border-bottom: 0; }
.ph-ask-list i { width: 1.5em; text-align: center; color: var(--ph-green-700); }

/* ===== Platform strip ===== */
.ph-strip-wrap {
    padding: 0 1.8% 1.8%;
    margin-top: -1px;
    background: linear-gradient(180deg, #5d9230 0%, #3f6d1f 100%);
}
.ph-strip {
    max-width: 1760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr repeat(4, 1fr);
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(10, 59, 34, .22);
    padding: 22px 8px;
}
.ph-strip-lead { padding: 10px 28px; display: flex; flex-direction: column; justify-content: center; }
.ph-strip-lead h2 { font-size: clamp(1.1rem, 1.6vw, 1.7rem); font-weight: 800; margin: 0 0 14px; line-height: 1.2; }
.ph-strip-rule { width: 74px; height: 4px; border-radius: 4px; background: #7ba51f; }
.ph-strip-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 10px 26px;
    border-left: 1px solid var(--ph-line);
    color: var(--ph-ink);
    text-decoration: none;
}
.ph-strip-item i { font-size: 34px; color: var(--ph-green-700); margin-bottom: 4px; }
.ph-strip-item strong { font-size: clamp(.95rem, 1.35vw, 1.4rem); line-height: 1.15; font-weight: 800; }
.ph-strip-item span { font-size: clamp(.8rem, .98vw, 1.05rem); color: var(--ph-muted); line-height: 1.35; }
.ph-strip-item:hover strong { color: var(--ph-green-700); }

/* ===== Sections ===== */
.ph-section { padding: 88px 0; }
.ph-section-tint { background: #f4f8f3; }
.ph-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.ph-narrow { max-width: 820px; }
.ph-center { text-align: center; }
.ph-section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.ph-section-head h2, .ph-center h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.01em; margin: 10px 0 12px; color: var(--ph-green-900); }
.ph-section-head p, .ph-center p { color: var(--ph-muted); font-size: 1.08rem; line-height: 1.6; }
.ph-center .ph-btn { margin-top: 12px; }
.ph-eyebrow { display: inline-block; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; color: var(--ph-green-700); background: var(--ph-green-100); padding: 6px 14px; border-radius: 999px; }

.ph-card, .ph-step {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ph-line);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 6px 20px rgba(10, 59, 34, .05);
}
.ph-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--ph-green-100);
    color: var(--ph-green-700);
    font-size: 24px;
    margin-bottom: 16px;
}
.ph-card h3, .ph-step h3 { font-size: 1.3rem; font-weight: 800; margin: 0 0 8px; }
.ph-card p, .ph-step p { color: var(--ph-muted); line-height: 1.6; }
.ph-card ul { margin: 14px 0 0; padding-left: 18px; color: var(--ph-ink); }
.ph-card li { margin-bottom: 6px; }
.ph-step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg, #17722f, #0b4a22);
    color: #fff;
    font-weight: 800;
    margin-bottom: 14px;
}

/* ===== Plans ===== */
.ph-plan {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1.5px solid var(--ph-line);
    border-radius: 20px;
    padding: 28px 24px;
}
.ph-plan.is-popular { border-color: var(--ph-green-700); box-shadow: 0 14px 34px rgba(10, 59, 34, .16); }
.ph-plan-flag {
    position: absolute;
    top: -13px;
    left: 24px;
    background: var(--ph-green-700);
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 999px;
}
.ph-plan h3 { font-size: 1.2rem; font-weight: 800; margin: 0 0 6px; }
.ph-plan-price strong { font-size: 2.1rem; font-weight: 800; color: var(--ph-green-900); }
.ph-plan-price span { color: var(--ph-muted); font-weight: 600; }
.ph-plan-desc { color: var(--ph-muted); font-size: .92rem; min-height: 2.8em; margin: 8px 0 14px; }
.ph-plan ul { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.ph-plan li { font-size: .9rem; margin-bottom: 8px; display: flex; gap: 8px; }
.ph-plan li i { color: var(--ph-green-700); margin-top: 3px; font-size: .8rem; }

/* ===== FAQ ===== */
.ph-accordion .accordion-item { border: 1px solid var(--ph-line); border-radius: 14px !important; margin-bottom: 12px; overflow: hidden; }
.ph-accordion .accordion-button { font-weight: 700; color: var(--ph-ink); background: #fff; box-shadow: none; }
.ph-accordion .accordion-button:not(.collapsed) { color: var(--ph-green-900); background: var(--ph-green-100); }
.ph-accordion .accordion-body { color: var(--ph-muted); line-height: 1.6; }

/* ===== Footer ===== */
.ph-footer { background: var(--ph-green-900); color: #cfe2d3; padding: 36px 0; }
.ph-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ph-footer img { height: 40px; filter: brightness(0) invert(1); }
.ph-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.ph-footer a { color: #cfe2d3; text-decoration: none; font-weight: 600; }
.ph-footer a:hover { color: #fff; }

/* ===== Responsive ===== */
@media (max-width: 1199px) {
    .ph-brand { border-right: 0; padding-right: 0; }
    .ph-link { padding: 9px 12px; font-size: 15px; }
    .ph-strip { grid-template-columns: repeat(2, 1fr); gap: 6px 0; }
    .ph-strip-lead { grid-column: 1 / -1; border-bottom: 1px solid var(--ph-line); padding-bottom: 16px; margin-bottom: 8px; }
    .ph-strip-item:nth-child(2), .ph-strip-item:nth-child(4) { border-left: 0; }
}

@media (max-width: 991px) {
    .ph-burger { display: inline-block; }
    .ph-menu { flex-basis: 100%; flex-direction: column; align-items: stretch; padding: 12px 0 18px; gap: 14px; }
    .ph-menu.collapse:not(.show) { display: none; }
    .ph-menu.show { display: flex; }
    .ph-links { flex-direction: column; align-items: stretch; }
    .ph-link { width: 100%; }
    .ph-auth { flex-direction: column; }
    .ph-auth .ph-btn { width: 100%; }
    .ph-nav-inner { min-height: 72px; }

    .ph-hero {
        aspect-ratio: auto;
        background: linear-gradient(180deg, #dcebf3 0%, #f3e6cf 100%);
        padding: 36px 22px 230px;
    }
    .ph-hero::after {
        content: '';
        position: absolute;
        inset: auto 0 0 0;
        height: 250px;
        background: url('../img/landing/hero.jpg') 72% 0 / auto 360px no-repeat;
        opacity: .95;
    }
    .ph-hero-copy { position: relative; left: auto; top: auto; width: 100%; z-index: 1; }
    .ph-hero h1 { font-size: 2.3rem; }
    .ph-hero-sub { font-size: 1.1rem; margin: 14px 0; }
    .ph-checks li { font-size: 1rem; gap: 10px; margin-bottom: 8px; }
    .ph-checks { margin-bottom: 22px; }
    .ph-hero-cta .ph-btn-lg { font-size: 1rem; padding: 13px 22px; }
    .ph-ask { display: none; }
    .ph-section { padding: 64px 0; }
}

@media (max-width: 575px) {
    .ph-hero-cta .ph-btn-lg { width: 100%; }
    .ph-strip { grid-template-columns: 1fr; }
    .ph-strip-item { border-left: 0 !important; border-top: 1px solid var(--ph-line); padding: 14px 22px; }
    .ph-footer-inner { flex-direction: column; text-align: center; }
}