/* ==========================================================================
   Pricing (new) — the 5 Pricing-unique sections (.pn-*)
   Figma: 🟢 Pricing (fileKey UJeQs4Ehx0LIbGBXOfKjLm, node 7153-3317).
   Self-contained: own @font-face + per-section font-family so the sections keep
   Google Sans Flex regardless of what else the page loads. Section vertical padding
   is driven by .new-solutions-component-spacing (solutions-landing-v2.css) via the
   --ns-* vars emitted by pricing_new_spacing_style() — so roots declare no padding here.
   ========================================================================== */
/* Google Sans Flex — the three approved static WOFF2 exports (400/500/600).
   Every legacy family alias used across the theme is re-declared here against the
   same files, so the thousands of existing font-family references keep working
   and all resolve to one real typeface. Previously these aliases pointed at
   fonts/google_sans/ (a different typeface, Google Sans, mislabelled as Flex)
   and at a variable TTF, which is why pages rendered inconsistently.
   No italic file exists in the approved set, so italic faces are not declared. */
@font-face { font-family: 'Google Sans Flex Local v2'; font-display: swap; src: url('/wp-content/themes/simplydepo/fonts/google-sans-flex/google-sans-flex-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Google Sans Flex Local v2'; font-display: swap; src: url('/wp-content/themes/simplydepo/fonts/google-sans-flex/google-sans-flex-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Google Sans Flex Local v2'; font-display: swap; src: url('/wp-content/themes/simplydepo/fonts/google-sans-flex/google-sans-flex-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; }

@font-face { font-family: 'Google Sans Flex'; font-display: swap; src: url('/wp-content/themes/simplydepo/fonts/google-sans-flex/google-sans-flex-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Google Sans Flex'; font-display: swap; src: url('/wp-content/themes/simplydepo/fonts/google-sans-flex/google-sans-flex-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Google Sans Flex'; font-display: swap; src: url('/wp-content/themes/simplydepo/fonts/google-sans-flex/google-sans-flex-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; }

@font-face { font-family: 'Google Sans'; font-display: swap; src: url('/wp-content/themes/simplydepo/fonts/google-sans-flex/google-sans-flex-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Google Sans'; font-display: swap; src: url('/wp-content/themes/simplydepo/fonts/google-sans-flex/google-sans-flex-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Google Sans'; font-display: swap; src: url('/wp-content/themes/simplydepo/fonts/google-sans-flex/google-sans-flex-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; }

@font-face { font-family: 'google_sans'; font-display: swap; src: url('/wp-content/themes/simplydepo/fonts/google-sans-flex/google-sans-flex-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'google_sans'; font-display: swap; src: url('/wp-content/themes/simplydepo/fonts/google-sans-flex/google-sans-flex-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'google_sans'; font-display: swap; src: url('/wp-content/themes/simplydepo/fonts/google-sans-flex/google-sans-flex-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; }.pricing-new-page {
    --pn-font: 'Google Sans Flex Local v2', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pn-primary: #262626;
    --pn-secondary: rgba(0, 0, 0, .75);
    --pn-tertiary: rgba(0, 0, 0, .55);
    --pn-brand: #409a65;
    --pn-accent: #006746;
    --pn-border: #e6e6e6;
    --pn-sand: #faf7f5;
}

/* The sitewide `body { background: #f8f8f8; }` (style.min.css) shows through as grey wherever a
   section doesn't fully cover it. Figma wants this page white — scoped to body.pricing-new only,
   the rest of the site keeps its grey body background. */
body.pricing-new { background: #fff; }

/* Section vertical padding. pricing_new_render_component() adds
   `new-solutions-component-spacing` + inline --ns-* vars to each unique section's first <section>.
   The reused fpv3 components ship their own compound `.front-page-v3-x.new-solutions-component-spacing`
   rule, but the BARE selector for the .pn-* sections is defined only here. Mobile switches at 767px
   (the main mobile breakpoint), matching the fpv3 components' own switch. */
.pricing-new-page .new-solutions-component-spacing {
    padding-top: var(--ns-desktop-padding-top, 0);
    padding-bottom: var(--ns-desktop-padding-bottom, 0);
}
@media (max-width: 767px) {
    .pricing-new-page .new-solutions-component-spacing {
        padding-top: var(--ns-mobile-padding-top, 0);
        padding-bottom: var(--ns-mobile-padding-bottom, 0);
    }
}

/* =========================================================================
   HERO — Figma Section - HERO (16115:9058)
   ========================================================================= */
.pn-hero {
    background: #fff;
    text-align: center;
}
.pn-hero,
.pn-hero * {
    font-family: var(--pn-font);
    box-sizing: border-box;
}

.pn-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
    border-radius: 999px;
    background: #fff;
    color: var(--pn-tertiary);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .105px;
    font-weight: 500;
}

.pn-hero__title {
    margin: 24px 0 0;
    color: var(--pn-primary);
    font-size: 64px;
    line-height: 72px;
    letter-spacing: -1.92px;
    font-weight: 600;
}

.pn-hero__subtitle {
    max-width: 642px;
    margin: 20px auto 0;
    color: var(--pn-secondary);
    font-size: 18px;
    line-height: 26px;
    letter-spacing: .135px;
    font-weight: 400;
}

/* Trust list — 24px below the headline group (Figma container gap). */
.pn-hero__features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
.pn-hero__feature {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pn-secondary);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .12px;
    font-weight: 400;
}
.pn-hero__check { flex: 0 0 auto; }

/* Billing toggle — 64px below the trust list (Figma section gap). */
.pn-hero__billing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 64px;
}
.pn-hero__billing-label {
    color: var(--pn-tertiary);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .12px;
    font-weight: 400;
    transition: color .2s ease;
}
.pn-hero__billing-label--yearly { color: var(--pn-secondary); }
.pn-hero__billing:has(.pn-hero__toggle[aria-checked="false"]) .pn-hero__billing-label--monthly { color: var(--pn-secondary); }
.pn-hero__billing:has(.pn-hero__toggle[aria-checked="false"]) .pn-hero__billing-label--yearly { color: var(--pn-tertiary); }

.pn-hero__billing-save {
    color: var(--pn-accent);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .105px;
    font-weight: 500;
}

.pn-hero__toggle {
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--pn-brand);
    cursor: pointer;
    transition: background .2s ease;
}
.pn-hero__toggle[aria-checked="false"] { background: #d9d9d9; }

.pn-hero__toggle-knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    transform: translateX(24px);
    transition: transform .2s ease;
}
.pn-hero__toggle[aria-checked="false"] .pn-hero__toggle-knob { transform: translateX(0); }

@media (max-width: 1024px) {
    .pn-hero__title { font-size: 52px; line-height: 58px; letter-spacing: -1.4px; }
}
@media (max-width: 767px) {
    .pn-hero__badge { padding: 6px 12px; font-size: 12px; line-height: 16px; letter-spacing: .09px; }
    .pn-hero__title { font-size: 32px; line-height: 36px; letter-spacing: -.48px; margin-top: 16px}
    .pn-hero__title br{display: block;}
    .pn-hero__subtitle { font-size: 16px; line-height: 24px; margin-top: 16px; }
    .pn-hero__features { gap: 12px 16px; margin-top: 24px; }
    .pn-hero__feature { font-size: 14px; line-height: 20px; }
    .pn-hero__billing { margin-top: 48px; gap: 12px; }
    .pn-hero__billing-save { font-size: 12px; }
}

/* =========================================================================
   PLANS — Figma Cards (16115:8801)
   ========================================================================= */
.pn-plans { background: #fff; }
.pn-plans,
.pn-plans * {
    font-family: var(--pn-font);
    box-sizing: border-box;
}

.pn-plans__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.pn-plans__card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--pn-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
}

.pn-plans__card:last-of-type .pn-plans__price{
    align-items: flex-start;
    flex: 1;
}

.pn-plans__range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pn-secondary);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .12px;
    font-weight: 400;
}
.pn-plans__range-icon { display: block; }

.pn-plans__name {
    margin: 16px 0 0;
    color: var(--pn-primary);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .12px;
    font-weight: 500;
}

.pn-plans__desc {
    margin: 2px 0 0;
    color: var(--pn-tertiary);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .105px;
    font-weight: 400;
}

.pn-plans__price {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin-top: 20px;
    min-height: 48px;
}
.pn-plans__amount {
    color: var(--pn-primary);
    font-size: 44px;
    line-height: 48px;
    letter-spacing: -.5px;
    font-weight: 500;
}
.pn-plans__rate {
    margin-bottom: 4px;
    color: var(--pn-tertiary);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .105px;
    font-weight: 400;
}
.pn-plans__custom {
    color: var(--pn-primary);
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -.36px;
    font-weight: 500;
}

.pn-plans__cta {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
}
.pn-plans__save {
    align-self: flex-start;
    max-height: 40px;
    margin-bottom: 20px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(64, 154, 101, .1);
    color: var(--pn-accent);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: .09px;
    font-weight: 500;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition: max-height .3s ease, margin-bottom .3s ease, padding-top .3s ease,
                padding-bottom .3s ease, opacity .3s ease, transform .3s ease;
}
/* Hidden state (monthly) — collapses height so the card shrinks/grows smoothly
   instead of snapping when the billing toggle is switched. */
.pn-plans__save--hidden {
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}
.pn-plans__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin-top: auto;
    border-radius: 999px;
    background: var(--pn-primary);
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .12px;
    font-weight: 500;
    text-decoration: none;
    transform: scale(1);
    transition: background-color .3s ease-in-out, color .3s ease-in-out, opacity .3s ease-in-out, transform .3s ease;
}
.pn-plans__btn:hover,
.pn-plans__btn:focus-visible { background-color: rgba(26, 26, 26, .8); color: #fff; }
.pn-plans__btn:active { transform: scale(.95); }

@media (max-width: 1024px) {
    .pn-plans__grid { grid-template-columns: repeat(2, 1fr); }
    .pn-plans__card { min-height: 0; }
}
@media (max-width: 767px) {
    .pn-plans__grid { grid-template-columns: 1fr; gap: 20px; }
    .pn-plans__amount { font-size: 28px; line-height: 32px; letter-spacing: -.28px; }
    .pn-plans__price { min-height: 32px; }
}

/* =========================================================================
   FEATURE COMPARISON — Figma BUSINESS (15628:29672)
   ========================================================================= */
.pn-features { background: #fff; }
.pn-features,
.pn-features * {
    font-family: var(--pn-font);
    box-sizing: border-box;
}

.pn-features__card {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--pn-border);
    border-radius: 16px;
    background: #fff;
}

.pn-features__columns {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    padding: 32px;
}
.pn-features__col-title {
    margin: 0;
    color: var(--pn-primary);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .12px;
    font-weight: 500;
}
.pn-features__list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.pn-features__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--pn-secondary);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .12px;
    font-weight: 400;
}
.pn-features__item:last-child { margin-bottom: 0; }
.pn-features__check { flex: 0 0 16px; margin-top: 4px; }

.pn-features__integrations {
    flex: 0 0 267px;
    padding: 32px;
    border-radius: 8px;
    background: var(--pn-sand);
}
.pn-features__integrations-title {
    margin: 0;
    color: var(--pn-primary);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .12px;
    font-weight: 500;
}
.pn-features__integrations-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.pn-features__integration {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--pn-primary);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .12px;
    font-weight: 400;
}
.pn-features__integration-icon { flex: 0 0 20px; display: block; }

@media (max-width: 1024px) {
    .pn-features__card { flex-direction: column; }
    .pn-features__integrations { flex: 1 1 auto; }
    .pn-features__integrations-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px 24px;
    }
}
@media (max-width: 767px) {
    /* Mobile: the integrations box breaks OUT of the feature card into its own block
       (Figma mobile has the columns card and the sand integrations box as separate siblings). */
    .pn-features__card {
        flex-direction: column;
        gap: 24px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .pn-features__columns {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
        border: 1px solid var(--pn-border);
        border-radius: 16px;
    }
    .pn-features__integrations { padding: 24px; }
    .pn-features__integrations-title { font-size: 18px; }
    .pn-features__integrations-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .pn-features__integration { font-size: 14px; line-height: 20px; }
}

/* =========================================================================
   SIMPLY AI — Figma BUSINESS (15628:29799)
   ========================================================================= */
.pn-ai { background: #fff; }
.pn-ai,
.pn-ai * {
    font-family: var(--pn-font);
    box-sizing: border-box;
}

.pn-ai__card {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    min-height: 354px;
    padding: 40px;
    border-radius: 16px;
    background: #f8f5ff;
    overflow: hidden;
}

.pn-ai__content { flex: 1 1 0; min-width: 0; max-width: 540px; }

.pn-ai__tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(203, 177, 255, .4);
    color: #522e9a;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: .7px;
    font-weight: 500;
    text-transform: uppercase;
}
.pn-ai__title {
    margin: 16px 0 0;
    color: var(--pn-primary);
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -.36px;
    font-weight: 500;
}
.pn-ai__desc {
    margin: 8px 0 0;
    color: var(--pn-secondary);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .12px;
    font-weight: 400;
}
.pn-ai__points { margin: 24px 0 0; padding: 0; list-style: none; }
.pn-ai__point {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--pn-secondary);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .12px;
    font-weight: 400;
}
.pn-ai__point:last-child { margin-bottom: 0; }
.pn-ai__spark { flex: 0 0 16px; margin-top: 4px; }

.pn-ai__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin-top: 24px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--pn-primary);
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .12px;
    font-weight: 500;
    text-decoration: none;
    transform: scale(1);
    transition: background-color .3s ease-in-out, color .3s ease-in-out, opacity .3s ease-in-out, transform .3s ease;
}
.pn-ai__btn:hover,
.pn-ai__btn:focus-visible { background-color: rgba(26, 26, 26, .8); color: #fff; }
.pn-ai__btn:active { transform: scale(.95); }

/* Right column — real image (from Figma export) */
.pn-ai__figure {
    flex: 1 1 0;
    min-width: 0;
    max-width: 540px;
}
.pn-ai__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Right column — HTML/CSS fallback mock (only when no image asset present) */
.pn-ai__mock { position: relative; flex: 1 1 auto; min-height: 274px; }
.pn-ai__decor-spark { position: absolute; top: 8px; right: 24px; color: #7c5cfc; }
.pn-ai__decor-spark .pn-ai__spark { margin-top: 0; }
.pn-ai__chat {
    position: absolute;
    top: 52px;
    right: 0;
    width: 420px;
    max-width: 100%;
    padding: 20px;
    border: 1px solid #ded2fb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(60, 40, 120, .12);
}
.pn-ai__chat-row { display: flex; align-items: center; gap: 12px; }
.pn-ai__chat-row .pn-ai__spark { margin-top: 0; flex: 0 0 18px; }
.pn-ai__chat-text { flex: 1 1 auto; color: var(--pn-primary); font-size: 16px; line-height: 24px; font-weight: 400; }
.pn-ai__chat-send {
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ede7fd;
}
.pn-ai__chat-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pn-ai__chip {
    padding: 6px 12px;
    border: 1px solid #ececf2;
    border-radius: 999px;
    background: #fff;
    color: var(--pn-secondary);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
}
.pn-ai__pill {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    color: var(--pn-primary);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    box-shadow: 0 6px 18px rgba(60, 40, 120, .12);
    white-space: nowrap;
}
.pn-ai__pill .pn-ai__spark { margin-top: 0; flex: 0 0 14px; }
.pn-ai__pill--saved { top: 8px; left: 40px; }
.pn-ai__pill--anomaly { bottom: 8px; right: 24px; }

@media (max-width: 1024px) {
    .pn-ai__card { flex-direction: column; align-items: stretch; min-height: 0; }
    .pn-ai__content { flex: 1 1 auto; max-width: none; }
    .pn-ai__figure { flex: 1 1 auto; max-width: none; margin-top: 8px; }
    .pn-ai__mock { min-height: 300px; margin-top: 8px; }
    .pn-ai__chat { position: relative; top: 0; right: auto; margin: 40px auto 0; }
    .pn-ai__pill--saved { top: 0; left: 8px; }
    .pn-ai__pill--anomaly { bottom: 0; right: 8px; }
    .pn-ai__decor-spark { right: 8px; }
}
@media (max-width: 767px) {
    /* Figma mobile: image on top, then content; smaller type. */
    .pn-ai__card {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        min-height: 0;
        padding: 24px;
        border-radius: 16px;
    }
    .pn-ai__figure { order: -1; flex: 1 1 auto; max-width: none; margin-top: 0; }
    .pn-ai__content { flex: 1 1 auto; max-width: none; }
    .pn-ai__tag { border-radius: 8px; }
    .pn-ai__title { margin-top: 12px; font-size: 18px; line-height: 24px; letter-spacing: .135px; }
    .pn-ai__desc { font-size: 16px; }
    .pn-ai__points { margin-top: 16px; }
    .pn-ai__point { font-size: 14px; line-height: 20px; }
    .pn-ai__btn { margin-top: 16px; }
    /* mock fallback (only if no image asset) */
    .pn-ai__chat { width: 100%; }
    .pn-ai__pill { position: static; margin: 8px 4px 0 0; }
    .pn-ai__decor-spark { display: none; }
}

/* =========================================================================
   HELP — Figma feature-cards-section (15667:11636)
   ========================================================================= */
.pn-help { background: #fff; }
.pn-help,
.pn-help * {
    font-family: var(--pn-font);
    box-sizing: border-box;
}

/* Figma spec for this section alone is a 1178px CONTENT width (not the sitewide .container's own
   max-width). The sitewide .container's 50px side padding sits INSIDE its max-width (border-box),
   so the outer max-width needs to be 1178 + 2×50 = 1278 for the resulting content area to be 1178.
   Scoped override, keeps the shared .container class/markup everywhere else on the page. */
.pn-help .container { max-width: 1278px; }

.pn-help__heading { max-width: 680px; margin: 0 auto; text-align: center; }
.pn-help__title {
    margin: 0;
    color: var(--pn-primary);
    font-size: 44px;
    line-height: 48px;
    letter-spacing: -1.056px;
    font-weight: 600;
}
.pn-help__subtitle {
    margin: 16px 0 0;
    color: var(--pn-secondary);
    font-size: 18px;
    line-height: 26px;
    letter-spacing: .135px;
    font-weight: 400;
}
.pn-help__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.pn-help__card {
    padding: 32px;
    border-radius: 16px;
    background: var(--pn-sand);
}
.pn-help__icon { display: block; width: 32px; height: 32px; }
.pn-help__card-title {
    margin: 32px 0 0;
    color: var(--pn-primary);
    font-size: 20px;
    line-height: 28px;
    letter-spacing: .15px;
    font-weight: 500;
}
.pn-help__card-text {
    margin: 8px 0 0;
    color: var(--pn-primary);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .12px;
    font-weight: 400;
}

@media (max-width: 1024px) {
    .pn-help__title { font-size: 36px; line-height: 42px; }
}
@media (max-width: 767px) {
    .pn-help__title { font-size: 28px; line-height: 32px; letter-spacing: -.5px; }
    .pn-help__subtitle { font-size: 16px; line-height: 24px; }
    .pn-help__cards { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
    .pn-help__card { padding: 24px; }
    .pn-help__card-title { margin-top: 24px; }
    .pn-help__heading {
        text-align: left;}
    .pn-ai__btn {
        width: 100%;}
}

/* =========================================================================
   Reused sections wrapper — keeps the solutions-landing sections (faq / cta /
   success-quotes) in their required .page-retail-execution context without
   letting that base leak onto the header or the .pn-* sections.
   ========================================================================= */
.pricing-new__reused { background: #fff; }

/* These reused fpv3 sections ship with no font-family of their own (they rely
   on the homepage's body.front-page-v3-body rule in typography.css, which is
   intentionally scoped OFF this page — see that file's comment — so Pricing
   keeps Gilroy everywhere else). Force the same Google Sans Flex used by the
   .pn-* sections here too, so Success Quotes / FAQ / CTA match the rest of
   the page instead of falling back to the site's default Gilroy body font. */
.pricing-new-page .success-quotes,
.pricing-new-page .success-quotes *,
.pricing-new-page .front-page-v3-faq,
.pricing-new-page .front-page-v3-faq *,
.pricing-new-page .front-page-v3-cta-footer,
.pricing-new-page .front-page-v3-cta-footer * {
    font-family: var(--pn-font);
}
@media (max-width: 630px) {
    .pn-hero .container{
        max-width: 420px;
    }
    .pn-hero__billing{
        align-items: flex-start;
    }
    .pn-hero__billing-label{
        max-width: 105px;
        text-align: left;
        line-height: var(--body-md-regular-lineHeight, 24px); /* 150% */
        letter-spacing: var(--body-md-letterSpacing, 0.12px);
    }
    .pn-hero__billing-save{
        line-height: var(--static-xs-medium-lineHeight, 16px); /* 133.333% */
        letter-spacing: var(--static-xs-letterSpacing, 0.09px);
    }
    /* "Pay yearly" is a bare text node followed by the nested .pn-hero__billing-save span — plain
       inline wrapping forces BOTH lines to the label's own 24px line-height (giving 24+24=48px
       instead of the intended 24+16=40px, since the save badge's own smaller line-height only
       affects its own content, not the wrapped line box as a whole). Turning the label into a
       column flex container makes the bare text and the nested span two real flex items, each
       stacked with no gap and each keeping its own natural line-height (24px then 16px = 40px). */
    .pn-hero__billing-label--yearly {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
}