/* ============================================
   Pricing 2026 — Marketing Site Pricing Page
   --------------------------------------------------
   Rebuilt from Figma "Final Design"
   (KezpLKJHuECnreihad8w5n, node 3522:12161).

   Consumes:
     - template-pricing-2026.php
   Depends on `product-solutions-v2.css` (enqueued first) for the
   reused `.pp-v2-faq-*` section and the shared `--pp-*` tokens.

   Everything here is scoped under `.pp26` (except the reused
   `.pp-v2-faq-section`, which is styled by product-solutions-v2.css).
   ============================================ */

.pp26 {
    --pp26-rail-max: 1245px;
    --pp26-grid: 1.36fr repeat(4, 1fr);
    --pp26-rule: #d8d8d8;
    --pp26-divider: #d9d9d9;
    --pp26-ink: #000000;
    --pp26-ink-muted: #8e8e8e;
    --pp26-band: #1c1c1c;
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    background: #ffffff;
}

.pp26 *,
.pp26 *::before,
.pp26 *::after {
    box-sizing: border-box;
}

/* Shared centered rail */
.pp26-rail {
    width: 100%;
    max-width: var(--pp26-rail-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================
   Section 1 — Hero
   ============================================ */

.pp26-hero {
    --pp-section-pad: 72px 0 96px;
    position: relative;
    background-color: #000000;
    background-image: var(--pp26-hero-bg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    color: #ffffff;
    overflow: hidden;
}

.pp26-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pp26-hero__title {
    font-family: var(--pp-font-heading, 'Manrope', sans-serif);
    font-weight: 500;
    font-size: 50px;
    line-height: 1.25;
    letter-spacing: -0.5px;
    color: #ffffff;
    text-align: center;
    margin: 0;
}

.pp26-hero__sub {
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
    text-align: center;
    margin: 14px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.pp26-hero__sub-link {
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pp26-hero__sub-link:hover {
    color: #ffffff;
    opacity: 0.85;
}

/* --- Plan cards --- */
.pp26-cards {
    width: 100%;
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    align-items: stretch;
}

.pp26-card {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #404040;
    min-height: 574px;
}

.pp26-card--dark {
    background: #000000;
    color: #ffffff;
}

.pp26-card--light {
    background: #fafafa;
    border-color: #e5e5e5;
    color: #0a0a0a;
    justify-content: flex-start;
}

.pp26-card__top {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pp26-card__intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pp26-card__name {
    font-family: var(--pp-font-heading, 'Manrope', sans-serif);
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    margin: 0;
}

.pp26-card--light .pp26-card__name {
    font-family: var(--pp-font-body, 'Inter', sans-serif);
}

.pp26-card__desc {
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    opacity: 0.7;
    /* Reserve 2 lines so the price block + CTA align across cards */
    min-height: 40px;
}

.pp26-card--light .pp26-card__desc {
    opacity: 1;
    color: #000000;
}

.pp26-card__price-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp26-card__price {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    margin: 0;
}

.pp26-card__price-num {
    font-family: var(--pp-font-heading, 'Manrope', sans-serif);
    font-weight: 600;
    font-size: 36px;
    line-height: 40px;
}

.pp26-card__price-period {
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    opacity: 0.7;
}

.pp26-card__headline {
    font-family: var(--pp-font-heading, 'Manrope', sans-serif);
    font-weight: 600;
    font-size: 36px;
    line-height: 40px;
    margin: 0;
    color: #000000;
}

.pp26-card__note {
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    opacity: 0.7;
    /* Reserve 2 lines so the CTA button lines up across all cards */
    min-height: 39px;
}

.pp26-card--light .pp26-card__note {
    color: #000000;
}

.pp26-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 14px 34px;
    border-radius: 55px;
    border: 1px solid #535353;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* Dark cards → white button / black text. */
.pp26-card--dark .pp26-card__btn {
    background: #ffffff;
    color: #000000;
}

/* Light (Enterprise) card → black button / white text. */
.pp26-card--light .pp26-card__btn {
    background: #000000;
    color: #ffffff;
    margin-top: 0;
}

.pp26-card__btn:hover {
    opacity: 0.85;
}

.pp26-card__features {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pp26-card--light .pp26-card__features {
    gap: 16px;
}

.pp26-card__features-label {
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
}

.pp26-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pp26-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    opacity: 0.85;
}

.pp26-card__check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pp-green, #1ea482);
}

.pp26-card__blurb {
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    margin: 0;
}

/* --- Agent Accounts card + badges (Agent Accounts variant) ---
   Visually a dark card like the others, with a highlighted teal border
   and a badge row ("New!" + "Early Bird Pricing"). Only rendered by
   template-pricing-2026-agent-accounts.php. */
.pp26-card--agent {
    --pp26-teal: #05e9ce;
    position: relative;
    background: #000000;
    color: #ffffff;
    border-color: var(--pp26-teal);
}

.pp26-card--agent .pp26-card__btn {
    background: #ffffff;
    color: #000000;
}

.pp26-card__badges {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pp26-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 30px;
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    font-weight: 500;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.pp26-card__badge--new {
    background: #0b9b8a;
    color: #ffffff;
}

.pp26-card__badge--early {
    border: 1px solid var(--pp26-teal, #05e9ce);
    color: var(--pp26-teal, #05e9ce);
}

.pp26-card__badge--early svg {
    flex-shrink: 0;
}

/* --- Enterprise band (Agent Accounts variant) ---
   Full-width white bar below the plan cards. */
.pp26-enterprise {
    width: 100%;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 32px;
    background: #ffffff;
    border-radius: 4px;
}

.pp26-enterprise__copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pp26-enterprise__title {
    margin: 0;
    font-family: var(--pp-font-heading, 'Manrope', sans-serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    color: #000000;
}

.pp26-enterprise__title strong {
    font-weight: 600;
}

.pp26-enterprise__sub {
    margin: 0;
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #000000;
}

.pp26-enterprise__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 14px 40px;
    border-radius: 55px;
    background: #000000;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.pp26-enterprise__btn:hover {
    opacity: 0.85;
    color: #ffffff;
}

/* Desktop: bottom-align the plan cards so the taller Agent Accounts card
   (with its top badge row) extends upward while the price rows and CTA
   buttons stay aligned across all four cards.
   630px = 574 base card + 24 badge row + 32 flex gap. */
@media (min-width: 1101px) {
    .pp26-cards {
        align-items: end;
    }

    .pp26-card--agent {
        min-height: 630px;
    }
}

/* Scroll-down chevron */
.pp26-hero__scroll {
    margin-top: 40px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.15s ease, transform 0.15s ease;
}

.pp26-hero__scroll:hover {
    color: #ffffff;
    transform: translateY(3px);
}

/* ============================================
   Section 2 — "What's included" comparison table
   ============================================ */

.pp26-table-section {
    --pp-section-pad: 0 0 100px;
    background: #ffffff;
}

.pp26-table {
    border: 1px solid var(--pp26-rule);
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

/* Shared 5-column grid (feature + 4 plans) */
.pp26-grid {
    display: grid;
    grid-template-columns: var(--pp26-grid);
}

.pp26-table__title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 24px;
    border-bottom: 1px solid var(--pp26-rule);
}

.pp26-table__title-row span {
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    font-weight: 400;
    font-size: 18px;
    color: #000000;
}

.pp26-table__head {
    border-bottom: 1px solid var(--pp26-rule);
}

.pp26-table__head-feat {
    display: flex;
    align-items: center;
    padding: 0 30px;
    min-height: 120px;
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    font-weight: 400;
    font-size: 20px;
    color: #000000;
}

.pp26-table__head-plan {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 14px;
    border-left: 1px solid var(--pp26-divider);
    text-align: center;
}

.pp26-table__head-plan-name {
    font-family: var(--pp-font-heading, 'Manrope', sans-serif);
    font-weight: 600;
    font-size: 18px;
    color: #000000;
}

.pp26-table__head-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    padding: 9px 22px;
    border-radius: 30px;
    border: 1px solid #000000;
    background: #ffffff;
    color: #000000;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.pp26-table__head-btn--filled {
    background: #000000;
    color: #ffffff;
}

.pp26-table__head-btn:hover {
    opacity: 0.85;
}

/* --- Section bands --- */
.pp26-table__band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    background: var(--pp26-band);
    border: none;
    border-bottom: 1px solid #000000;
    cursor: pointer;
    text-align: left;
}

.pp26-table__band-label {
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
}

.pp26-table__band-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: transform 0.25s ease;
}

.pp26-table__band[aria-expanded="false"] .pp26-table__band-chevron {
    transform: rotate(-180deg);
}

.pp26-table__group--collapsed {
    display: none;
}

/* --- Rows --- */
.pp26-row {
    border-bottom: 1px solid var(--pp26-rule);
    background: #ffffff;
}

.pp26-row:last-child {
    border-bottom: none;
}

.pp26-row__feat {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 55px;
    padding: 8px 20px;
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    font-weight: 400;
    font-size: 18px;
    color: #000000;
}

.pp26-row__feat-text {
    line-height: 1.3;
}

.pp26-help {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1px solid var(--pp26-ink-muted);
    color: var(--pp26-ink-muted);
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    font-size: 11px;
    line-height: 15px;
    text-align: center;
    font-weight: 500;
    cursor: help;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.pp26-help:hover,
.pp26-help:focus-visible {
    border-color: #151515;
    color: #ffffff;
    background: #151515;
    outline: none;
}

/* Floating tooltip (appended to <body> via JS so it is never clipped
   by the table's overflow:hidden / overflow-x:auto containers). */
.pp26-tip {
    position: fixed;
    z-index: 9999;
    max-width: 280px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #151515;
    color: #ffffff;
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.pp26-tip--visible {
    opacity: 1;
    transform: translateY(0);
}

.pp26-tip::after {
    content: "";
    position: absolute;
    left: var(--pp26-tip-arrow, 50%);
    transform: translateX(-50%);
    border: 6px solid transparent;
}

.pp26-tip--above::after {
    top: 100%;
    border-top-color: #151515;
}

.pp26-tip--below::after {
    bottom: 100%;
    border-bottom-color: #151515;
}

.pp26-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55px;
    padding: 8px 12px;
    border-left: 1px solid var(--pp26-divider);
    text-align: center;
}

.pp26-cell__check {
    color: #151515;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pp26-cell__dash {
    display: inline-block;
    width: 18px;
    height: 1.5px;
    background: var(--pp26-ink-muted);
    border-radius: 1px;
}

.pp26-cell__val {
    font-family: var(--pp-font-body, 'Inter', sans-serif);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    color: #000000;
}

/* ============================================
   Reused FAQ — light spacing tweak only
   (visuals come from product-solutions-v2.css)
   ============================================ */
.pp26 + .pp-v2-faq-section,
.pp-v2-faq-section {
    /* keep the shared dark FAQ band */
}

/* ============================================
   Responsive
   ============================================ */

/* Large tablet / small desktop */
@media (max-width: 1100px) {
    .pp26-hero__title {
        font-size: 42px;
    }

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

    .pp26-card {
        min-height: 0;
    }
}

/* Tablet — table becomes horizontally scrollable */
@media (max-width: 900px) {
    .pp26-table-section .pp26-rail {
        padding: 0;
    }

    .pp26-table {
        border-radius: 0;
        border-left: none;
        border-right: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Fixed-width columns (summing to the 760px min-width) so header
       and body cells resolve to identical track widths. `fr` tracks
       have a min-content floor, which let cell content widen tracks
       per-row and knocked the headings out of alignment. */
    .pp26 .pp26-grid {
        grid-template-columns: 200px repeat(4, 140px);
    }

    .pp26-table__title-row,
    .pp26-table__head,
    .pp26-table__body,
    .pp26-table__band,
    .pp26-table__group {
        min-width: 760px;
    }

    .pp26-table__head-feat {
        font-size: 18px;
        min-height: 100px;
    }

    .pp26-table__head-plan {
        padding: 16px 8px;
    }

    /* Let the CTA fit inside the fixed 140px plan column so it no
       longer forces the header tracks wider than the body rows. */
    .pp26-table__head-btn {
        min-width: 0;
        width: 100%;
        padding: 9px 12px;
    }

    .pp26-row__feat {
        font-size: 16px;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .pp26-hero {
        --pp-section-pad: 48px 0 64px;
    }

    .pp26-hero__title {
        font-size: 32px;
    }

    .pp26-cards {
        grid-template-columns: 1fr;
        margin-top: 36px;
    }

    .pp26-enterprise {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 22px 24px;
    }

    .pp26-enterprise__btn {
        width: 100%;
    }

    .pp26-table-section {
        --pp-section-pad: 0 0 64px;
    }
}