/* =============================================================
   HERO (re-used from about). Allow 2-line headline via <br>.
   Desktop pinned to 500px tall (source 1273×500); mobile 530px.
   ============================================================= */
.about-hero {
    position: relative;
    background: var(--color-primary);
    color: var(--color-white);
    overflow: hidden;
}

.about-hero picture {
    display: block;
    height: 100%;
}

.about-hero__bg {
    display: block;
    width: 100%;
    object-fit: cover;
}

.about-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-hero__title {
    font-size: 67px;
    line-height: 1;
    font-weight: 600;
    margin: 0;
    color: var(--color-white);
    text-align: center;
}

@media (max-width: 1024px) {
    .about-hero__title {
        font-size: 40px;
    }
}

@media (max-width: 1024px) {
    .about-hero {
        min-height: 530px;
    }
}

/* =============================================================
   PRICING INTRO — orange heading + orange explanatory note, centered.
   Both lines are the orange primary brand colour.
   ============================================================= */
.pricing-intro {
    text-align: center;
    margin-inline: auto;
}

.pricing-intro__heading {
    font-size: 40px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 20px;
    line-height: 1;
}

.pricing-intro__note {
    font-size: 30px;
    color: var(--color-primary);
    font-weight: 400;
    margin: 0;
    line-height: 1;
}

@media (max-width: 1024px) {
    .pricing-intro__heading {
        font-size: 30px;
        margin: 0 0 14px;
    }

    .pricing-intro__note {
        font-size: 20px;
        line-height: 1;
    }
}

/* =============================================================
   PRICING TIER — top orange header bar + 3-col body row.
   Header bar: full-width orange (255,61,0), 3 equal cells of white text.
   Body: 3 equal cells side-by-side — regular (transparent) | ULTRA (peach) | countries (transparent).
   Tier 3 (.pricing-tier--2col) drops the ULTRA cell.
   ============================================================= */
.pricing-tier {
    display: flex;
    flex-direction: column;
    margin-block-end: 40px;
}

.pricing-tier__header {
    display: flex;
    background: var(--color-primary);
    color: var(--color-white);
}

.pricing-tier__header-cell {
    flex: 1 1 0;
    margin: 0;
    padding: 16px 24px;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--color-white);
    text-align: center;
}

.pricing-tier__header-cell:not(:last-child) {
    border-left: 2px solid var(--color-white);
}

.pricing-tier__header-cell--regular {
    font-weight: 400;
}

.pricing-tier__body {
    display: flex;
    align-items: stretch;
}

.pricing-tier__col {
    flex: 1 1 0;
    padding: 20px 24px;
    background: transparent;
}

.pricing-tier__col:not(:last-child) {
    border-left: 2px solid var(--color-primary);
}

.pricing-tier__col--discount {
    background: rgb(255, 229, 220);
}

.pricing-tier__col--countries {
    text-align: right;
}

.pricing-tier__countries-list {
    font-size: 16px;
    line-height: 25px;
    color: #000;
    margin: 0;
    text-align: right;
}

/* Rate cols split into N sub-cells (one per rate item) side-by-side. Each
   sub-cell stacks its label above the price. */
.pricing-tier__col--regular,
.pricing-tier__col--discount {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}

.pricing-tier__rate-cell {
    flex: 1 1 0;
    padding: 14px 0;
}

.pricing-tier__row-label {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin: 0 0 8px;
    line-height: 20px;
    text-align: center;
}

.pricing-tier__row-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    line-height: 20px;
    text-align: center;
}

/* Per-column header band — desktop shows the top .pricing-tier__header bar
   instead, so hide these here and reveal them only on mobile (below). */
.pricing-tier__col-label {
    display: none;
}

/* Mobile: collapse the 3 cols into a vertical stack. Each col becomes its
   own full-width section topped by its own orange header band (injected via
   ::before). Order: countries → discount → regular (matches source).
   Within each rate col the 2 sub-cells stay side-by-side (matches source). */
@media (max-width: 1024px) {
    .pricing-tier {
        margin-block-end: 28px;
    }

    .pricing-tier__header {
        display: none;
    }

    .pricing-tier__body {
        flex-direction: column;
    }

    .pricing-tier__col {
        order: 2;
        padding: 0;
    }

    .pricing-tier__col--countries {
        order: 1;
        padding: 0;
    }

    .pricing-tier__col--discount {
        order: 2;
    }

    .pricing-tier__col--regular {
        order: 3;
    }

    /* Rate cols: switch to column so ::before is a full-width band, then wrap
     the rate sub-cells into a row below it. */
    .pricing-tier__col--regular,
    .pricing-tier__col--discount {
        flex-direction: column;
        gap: 0;
        display: flex;
    }

    /* Rate sub-cells stay side-by-side under the band. */
    .pricing-tier__col--regular > .pricing-tier__rate-cell,
    .pricing-tier__col--discount > .pricing-tier__rate-cell {
        padding: 14px 8px;
    }

    /* Group the rate cells back into a row using a flex wrapper trick: rely on
     the cells being siblings of ::before. ::before becomes the first flex
     item (full row), the rate cells share the remaining row. */
    .pricing-tier__col--regular,
    .pricing-tier__col--discount {
        flex-wrap: wrap;
        flex-direction: row;
    }

    .pricing-tier__col--regular > .pricing-tier__rate-cell,
    .pricing-tier__col--discount > .pricing-tier__rate-cell {
        flex: 1 1 0;
    }

    /* Countries col body padding (no rate sub-cells inside). */
    .pricing-tier__col--countries .pricing-tier__countries-list {
        padding: 18px 16px;
    }

    .pricing-tier__col:not(:last-child) {
        border: none;
    }

    .pricing-tier__col--regular > .pricing-tier__rate-cell:not(:last-child),
    .pricing-tier__col--discount > .pricing-tier__rate-cell:not(:last-child) {
        border-left: 2px solid var(--color-primary);
    }

    /* Orange header band above each col on mobile. Text is data-driven from
       the ACF field (.pricing-tier__col-label) so each page renders its own
       labels — e.g. "חו"ל מוזל" on the standard page vs "חו"ל מוזל ULTRA 5G"
       on the ULTRA page — instead of a hardcoded CSS string. */
    .pricing-tier__col-label {
        display: block;
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 14px 16px;
        background: var(--color-primary);
        color: var(--color-white);
        font-size: 25px;
        line-height: 25px;
        font-weight: 700;
        text-align: center;
        box-sizing: border-box;
    }

    .pricing-tier__col-label--countries {
        font-size: 30px;
    }

    .pricing-tier__col-label--regular {
        font-weight: 400;
    }

    .pricing-tier__row-label {
        font-size: 18px;
    }

    .pricing-tier__row-price {
        font-size: 18px;
    }
}

/* Product page — additions on top of style.css
 * Composite preview: hero, features-grid, inline-cta, video-card, media-grid, faq.
 * Tier grid is reused from style.css with a --compact modifier.
 */

/* Bottom breathing room before footer (desktop). */
.site-main > section:last-child {
    padding-block-end: 60px;
}

@media (max-width: 1024px) { .site-main > section:last-child { padding-block-end: 32px; } }