/* ==========================================================================
   dissolveX HRMS — Dedicated Pricing Page Stylesheet
   Strict dissolveX Emerald Design System matching Core Landing, Features, & Payroll
   ========================================================================== */

:root {
    --pr-primary: #0b2b20;
    --pr-primary-hover: #123d2f;
    --pr-emerald: #10b981;
    --pr-emerald-dark: #059669;
    --pr-emerald-deep: #065f46;
    --pr-mint-bg: #eaf6f0;
    --pr-mint-glow: rgba(16, 185, 129, 0.20);
    --pr-mint-card: #f0fdf4;
    --pr-border-em: rgba(16, 185, 129, 0.22);
    --pr-border-light: #e2e8f0;
    --pr-text-dark: #0f172a;
    --pr-text-headings: #0b2b20;
    --pr-text-muted: #475569;
    --pr-text-subtle: #64748b;
    --font-sans: 'Plus Jakarta Sans', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    --font-serif: 'Instrument Serif', Georgia, serif;
    --shadow-card: 0 8px 28px rgba(15, 57, 43, 0.06);
    --shadow-glow: 0 12px 36px rgba(16, 185, 129, 0.15);
}

/* Keep the shared navbar the exact same size when navigating from Home to Pricing. */
.pricing-page-body .feat-nav-wrapper {
    padding: 14px 0;
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    line-height: 1.6;
}

.pricing-page-body .feat-nav-wrapper.scrolled {
    padding: 14px 0;
}

.pricing-page-body .feat-brand-link {
    padding: 0;
    height: 44px;
}

.pricing-page-body .feat-nav-right {
    gap: 16px;
    padding: 5px 8px 5px 22px;
}

.pricing-page-body .feat-nav-links {
    gap: 22px;
}

.pricing-page-body .feat-nav-bullet {
    width: 4px;
    height: 4px;
}

.pricing-page-body .feat-nav-link-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin: -6px -14px;
    line-height: inherit;
}

.pricing-page-body .feat-nav-actions {
    gap: 12px;
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
}

.pricing-page-body .feat-btn-secondary {
    padding: 8px 18px;
    justify-content: center;
}

@media (max-width: 640px) {
    .pricing-page-body .feat-nav-wrapper {
        padding-top: 8px !important;
    }

    .pricing-page-body .feat-nav-wrapper.scrolled {
        padding-top: 0 !important;
    }

    .pricing-page-body .feat-nav-wrapper .container {
        padding: 0 12px !important;
    }

    .pricing-page-body .feat-navbar {
        padding: 6px 12px !important;
    }

    .pricing-page-body .feat-nav-actions {
        gap: 6px !important;
    }

    .pricing-page-body .feat-btn-secondary {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }
}

/* Page Base */
.pricing-page-body {
    background-color: var(--pr-mint-bg);
    background-image: radial-gradient(circle at 50% 20%, rgba(16, 185, 129, 0.20) 0%, rgba(230, 247, 240, 0.75) 45%, #eaf6f0 80%);
    color: var(--pr-text-dark);
    font-family: var(--font-sans);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* Signature Serif Italic Accent */
.serif-italic {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(135deg, #0b2b20 0%, #10b981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    letter-spacing: -0.5px;
    padding-right: 4px;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.price-hero-section {
    padding: 130px 0 60px;
    background: transparent;
    text-align: center;
    position: relative;
}

.price-hero-content {
    max-width: 920px;
    margin: 0 auto 36px;
    position: relative;
    z-index: 2;
}

.price-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    background: rgba(236, 253, 245, 0.95);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 9999px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--pr-emerald-deep);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-bottom: 22px;
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.12);
}

.price-hero-title {
    font-family: var(--font-heading);
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--pr-text-headings);
    letter-spacing: -1.2px;
    margin: 0 0 22px;
}

.price-hero-title .serif-italic {
    font-size: 3.85rem;
}

.price-trust-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 18px;
}

.price-badge-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--pr-text-muted);
}

.price-badge-item .check-svg {
    width: 18px;
    height: 18px;
    color: var(--pr-emerald);
    flex-shrink: 0;
}

/* ==========================================================================
   Free Edition Banner
   ========================================================================== */
.price-free-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--pr-border-em);
    border-radius: 18px;
    padding: 18px 28px;
    margin: 36px auto 30px;
    max-width: 1240px;
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.08);
}

.free-banner-lead {
    font-size: 1.05rem;
    color: var(--pr-text-headings);
    margin: 0;
    font-weight: 700;
}

.highlight-em {
    color: #047857;
    font-weight: 800;
    /* A little air either side so the word does not crowd its neighbours. */
    margin: 0 0.15em;
}

.free-banner-features {
    display: flex;
    align-items: center;
    gap: 24px;
}

.free-feat-item {
    font-size: 0.9rem;
    color: var(--pr-text-muted);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.bullet-chk {
    color: #047857;
    font-weight: 800;
    font-size: 0.95rem;
}

.btn-free-access {
    background: var(--pr-primary);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    border: none;
    border-radius: 9999px;
    padding: 11px 24px;
    cursor: pointer;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
    white-space: nowrap;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 14px rgba(11, 43, 32, 0.2);
}

@media (hover: hover) and (pointer: fine) {
.btn-free-access:hover {
    background: var(--pr-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(11, 43, 32, 0.3);
}
}

/* ==========================================================================
   Billing Switcher Toggle
   ========================================================================== */
.price-toggle-container {
    display: flex;
    justify-content: flex-end;
    max-width: 1240px;
    margin: 0 auto 24px;
    padding-right: 4px;
}

.billing-switcher-pill {
    display: inline-flex;
    background: #ffffff;
    border: 1px solid var(--pr-border-em);
    border-radius: 9999px;
    padding: 4px;
    position: relative;
    box-shadow: 0 4px 16px rgba(15, 57, 43, 0.05);
}

.billing-btn {
    background: transparent;
    border: none;
    padding: 8px 22px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--pr-text-muted);
    border-radius: 9999px;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}

.billing-btn.active {
    background: var(--pr-primary);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(11, 43, 32, 0.25);
}

.save-discount-badge {
    background: #065f46;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 9999px;
}

/* ==========================================================================
   5 Plan Cards Grid
   ========================================================================== */
.price-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    max-width: 1240px;
    margin: 0 auto;
    align-items: stretch;
}

.price-plan-card {
    background: #ffffff;
    border: 1px solid var(--pr-border-em);
    border-radius: 18px;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    box-shadow: var(--shadow-card);
}

@media (hover: hover) and (pointer: fine) {
.price-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(15, 57, 43, 0.1);
    border-color: rgba(16, 185, 129, 0.4);
}
}

/* Most Popular Card Highlight */
.price-plan-card.featured-popular {
    border: 2px solid var(--pr-emerald);
    box-shadow: var(--shadow-glow);
}

.popular-ribbon-tag {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: #065f46;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 14px;
    border-radius: 9999px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.card-top-header {
    margin-bottom: 18px;
}

.plan-card-name {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--pr-text-headings);
    margin: 0 0 14px;
    letter-spacing: 0.3px;
}

.plan-card-pricing {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    margin-bottom: 4px;
}

.currency-symbol {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--pr-text-headings);
}

.plan-amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--pr-text-headings);
    line-height: 1;
    font-family: var(--font-heading);
}

.plan-term {
    font-size: 0.78rem;
    color: var(--pr-text-subtle);
    font-weight: 500;
    margin-left: 2px;
}

.plan-billed-note {
    font-size: 0.76rem;
    color: var(--pr-text-subtle);
    margin: 0 0 18px;
}

.plan-card-cta {
    width: 100%;
    padding: 11px 16px;
    border-radius: 9999px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
    letter-spacing: 0.3px;
}

/* Regular Plan Button (Deep Forest Green) */
.btn-plan-dark-em {
    background: var(--pr-primary);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(11, 43, 32, 0.2);
}

@media (hover: hover) and (pointer: fine) {
.btn-plan-dark-em:hover {
    background: var(--pr-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(11, 43, 32, 0.3);
}
}

/* Featured Plan Button (Emerald Gradient) */
.btn-plan-primary-em {
    background: linear-gradient(135deg, #0b2b20 0%, #10b981 100%);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

@media (hover: hover) and (pointer: fine) {
.btn-plan-primary-em:hover {
    background: linear-gradient(135deg, #072018 0%, #059669 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45);
}
}

.card-divider-line {
    width: 100%;
    height: 1px;
    background: #f1f5f9;
    margin-bottom: 18px;
}

.card-features-body {
    text-align: left;
    flex-grow: 1;
}

.includes-previous-note {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--pr-text-headings);
    margin-bottom: 10px;
}

.plan-feature-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plan-feature-items li {
    font-size: 0.86rem;
    color: var(--pr-text-muted);
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.item-chk {
    color: #047857;
    font-weight: 800;
    flex-shrink: 0;
}

/* Suite Card Custom Styling */
.suite-card {
    background: #ffffff;
    border: 1px solid var(--pr-border-em);
}

.suite-brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e11d48;
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 12px;
}

.suite-tagline {
    font-size: 0.84rem;
    color: var(--pr-text-muted);
    line-height: 1.45;
    margin: 0 0 20px;
}

.btn-plan-outline-suite {
    background: #ffffff;
    color: var(--pr-primary);
    border: 1.5px solid var(--pr-primary);
    border-radius: 9999px;
}

@media (hover: hover) and (pointer: fine) {
.btn-plan-outline-suite:hover {
    background: var(--pr-primary);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(11, 43, 32, 0.2);
}
}

/* Footnote & Quote Box */
.price-footnote-area {
    max-width: 1240px;
    margin: 34px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.tax-disclaimer-text {
    font-size: 0.82rem;
    color: var(--pr-text-subtle);
    text-align: right;
    width: 100%;
    margin: 0;
}

.custom-quote-box {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 1px solid var(--pr-border-em);
    padding: 10px 22px;
    border-radius: 9999px;
    box-shadow: 0 4px 16px rgba(15, 57, 43, 0.05);
}

.quote-query-text {
    font-size: 0.94rem;
    color: var(--pr-text-muted);
}

.btn-quote-pill {
    background: #ecfdf5;
    color: var(--pr-emerald-deep);
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6px 16px;
    border-radius: 9999px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
.btn-quote-pill:hover {
    background: var(--pr-emerald);
    color: #ffffff;
}
}

.table-anchor-ctrls {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.92rem;
    color: var(--pr-text-muted);
}

.btn-toggle-all-rows {
    background: transparent;
    border: none;
    color: var(--pr-emerald-dark);
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    font-family: inherit;
    transition: color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
.btn-toggle-all-rows:hover {
    color: var(--pr-primary);
    text-decoration: underline;
}
}

.btn-toggle-all-rows .toggle-icon-svg {
    transition: transform 0.25s ease;
}

.btn-toggle-all-rows.is-collapsed .toggle-icon-svg {
    transform: rotate(180deg);
}

/* ==========================================================================
   Matrix Comparison Table Section
   ========================================================================== */
.price-matrix-section {
    padding: 80px 0 90px;
    background: transparent;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

.price-matrix-section.is-closed {
    display: none !important;
}

.matrix-heading-wrap {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 48px;
}

.matrix-title {
    font-family: var(--font-heading);
    font-size: 2.85rem;
    font-weight: 800;
    color: var(--pr-text-headings);
    line-height: 1.2;
    margin: 0 0 14px;
    letter-spacing: -0.8px;
}

.matrix-subtitle {
    font-size: 1.05rem;
    color: var(--pr-text-muted);
    margin: 0;
}

.table-responsive-wrapper {
    max-width: 1240px;
    margin: 0 auto;
    border: 1px solid var(--pr-border-em);
    border-radius: 18px;
    overflow-x: auto;
    box-shadow: 0 12px 40px rgba(11, 43, 32, 0.08);
    background: #ffffff;
}

.price-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    background: #ffffff;
}

.price-matrix-table th,
.price-matrix-table td {
    border-right: 1px solid var(--pr-border-light);
    border-bottom: 1px solid var(--pr-border-light);
}

.price-matrix-table th:last-child,
.price-matrix-table td:last-child {
    border-right: none;
}

.price-matrix-table thead tr.sticky-thead-row {
    position: sticky;
    top: 76px;
    background: #ffffff;
    z-index: 15;
    box-shadow: 0 4px 14px rgba(11, 43, 32, 0.06);
}

.price-matrix-table th {
    padding: 20px 16px;
    text-align: center;
    vertical-align: middle;
    background: #ffffff;
}

.price-matrix-table th.col-feature-title {
    width: 32%;
    min-width: 290px;
    text-align: left;
    padding-left: 24px;
    background: #f8fafc;
}

.price-matrix-table th.col-plan {
    /* Four plans share what the feature column leaves: (100% - 32%) / 4. */
    width: 17%;
    min-width: 150px;
}

.price-matrix-table th.col-plan.featured-th {
    background: #ecfdf5;
    border-top: 3px solid var(--pr-emerald);
}

.price-matrix-table th.col-plan.featured-th .th-plan-name {
    color: var(--pr-emerald-deep);
}

.thead-switcher-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

.thead-toggle-pill {
    display: inline-flex;
    background: #f1f5f9;
    border: 1px solid var(--pr-border-light);
    border-radius: 9999px;
    padding: 3px;
}

.th-billing-btn {
    background: transparent;
    border: none;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--pr-text-muted);
    border-radius: 9999px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.th-billing-btn.active {
    background: var(--pr-primary);
    color: #ffffff;
}

.thead-disc-tag {
    font-size: 0.74rem;
    font-weight: 700;
    color: #047857;
}

.th-plan-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.th-plan-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--pr-text-headings);
    letter-spacing: 0.2px;
}

.th-plan-cost {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--pr-text-headings);
    line-height: 1;
}

.th-plan-period {
    font-size: 0.72rem;
    color: var(--pr-text-subtle);
    margin-bottom: 6px;
}

.th-action-btn {
    background: var(--pr-primary);
    color: #ffffff;
    border: none;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 9999px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
.th-action-btn:hover {
    background: var(--pr-primary-hover);
    box-shadow: 0 4px 12px rgba(11, 43, 32, 0.25);
}
}

.th-action-featured {
    background: #065f46;
}

@media (hover: hover) and (pointer: fine) {
.th-action-featured:hover {
    background: var(--pr-emerald-dark);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}
}

/* Initial Metric Rows (Administrators, Minimum Users) */
.initial-metric-row td {
    background: #ffffff;
    padding: 16px 20px;
}

.initial-metric-row .bold-val {
    font-weight: 700;
    color: var(--pr-text-headings);
    font-size: 0.95rem;
}

/* Matrix Accordion Section Headers */
.matrix-section-header td {
    background: #f0fdf4;
    padding: 14px 20px;
    border-top: 1px solid var(--pr-border-light);
    border-bottom: 1px solid var(--pr-border-light);
}

.matrix-accordion-toggle {
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    padding: 0;
    font-family: inherit;
}

.acc-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid rgba(16, 185, 129, 0.4);
    font-weight: 700;
    color: var(--pr-emerald-deep);
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
.matrix-accordion-toggle:hover .acc-icon-wrap {
    border-color: var(--pr-emerald);
    color: var(--pr-emerald);
}
}

/* The + and - are drawn, not typed: a text glyph sits wherever the font's
   metrics put it, which is never quite the middle of the circle. Two bars
   centred with auto margins stay in the middle in any font, size or state.
   The character in the markup stays (screen readers and pricing.js read it)
   but takes no space; .is-open, set by pricing.js, drops the vertical bar. */
.acc-icon-wrap {
    position: relative;
    font-size: 0;
}

.acc-icon-wrap::before,
.acc-icon-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 1px;
    background: currentColor;
}

.acc-icon-wrap::before {
    width: 10px;
    height: 2px;
}

.acc-icon-wrap::after {
    width: 2px;
    height: 10px;
}

.acc-icon-wrap.is-open::after {
    display: none;
}

.acc-title-text {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--pr-text-headings);
}

/* Matrix Data Rows */
.matrix-data-row {
    background: #ffffff;
    border-bottom: 1px solid var(--pr-border-light);
    transition: background 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
.matrix-data-row:hover {
    background: #f0fdf4;
}
}

.cell-feature-name {
    padding: 14px 24px;
    text-align: left;
}

.feat-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    color: var(--pr-text-dark);
    font-weight: 500;
}

.cell-grid {
    padding: 14px 16px;
    text-align: center;
    vertical-align: middle;
}

.chk-green-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e8f8ee;
    transition: transform 0.15s ease, background 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
.matrix-data-row:hover .chk-green-circle {
    background: #dcfce7;
    transform: scale(1.1);
}
}

.dash-gray {
    display: inline-block;
    color: #64748b;
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1;
}

/* Row Collapsed State */
.matrix-data-row.collapsed {
    display: none;
}

.matrix-bottom-link-row {
    padding: 24px;
    text-align: center;
    background: #f8fafc;
    border-top: 1px solid var(--pr-border-light);
}

.full-comparison-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #047857;
    font-weight: 700;
    font-size: 0.94rem;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
.full-comparison-link:hover {
    color: var(--pr-primary);
    text-decoration: underline;
    transform: translateX(2px);
}
}

/* ==========================================================================
   Trusted By Logos Infinite Marquee (Matching Landing Page)
   ========================================================================== */
.trusted-section.price-trusted-section {
    padding: 70px 0 60px;
    background: transparent;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.price-trusted-section .trusted-label {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 28px;
    font-family: var(--font-sans);
}

.marquee-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marqueeScroll 26s linear infinite;
    will-change: transform;
}

/* Keep marquee running continuously on hover */
.marquee-container:hover .marquee-track {
    animation-play-state: running;
}

.marquee-group {
    display: flex;
    align-items: center;
    gap: 70px;
    padding-right: 70px;
    flex-shrink: 0;
}

.brand-logo-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
    user-select: none;
    cursor: default;
}

@media (hover: hover) and (pointer: fine) {
.brand-logo-item:hover {
    opacity: 1;
    transform: scale(1.05);
}
}

.client-logo-img {
    height: 42px;
    max-height: 42px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    mix-blend-mode: multiply;
    display: block;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   Support & Services 3-Cards
   ========================================================================== */
.price-support-section {
    padding: 80px 0;
    background: transparent;
}

.support-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.support-card-item {
    background: #ffffff;
    border: 1px solid var(--pr-border-em);
    border-radius: 20px;
    padding: 34px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--shadow-card);
}

@media (hover: hover) and (pointer: fine) {
.support-card-item:hover {
    transform: translateY(-4px);
    border-color: var(--pr-emerald);
    box-shadow: 0 14px 34px rgba(16, 185, 129, 0.12);
}
}

.support-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #ecfdf5;
    color: var(--pr-emerald);
    border: 1px solid rgba(16, 185, 129, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.support-card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pr-text-headings);
    margin: 0 0 10px;
}

.support-card-desc {
    font-size: 0.94rem;
    color: var(--pr-text-muted);
    line-height: 1.6;
    margin: 0 0 20px;
    flex-grow: 1;
}

.support-link-btn {
    color: #047857;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@media (hover: hover) and (pointer: fine) {
.support-link-btn:hover {
    color: var(--pr-primary);
    text-decoration: underline;
}
}

/* ==========================================================================
   Customer Testimonial Spotlight
   ========================================================================== */
.price-testimonial-section {
    padding: 70px 0;
    background: transparent;
}

.testimonial-showcase-card {
    display: grid;
    grid-template-columns: 400px 1fr;
    background: #ffffff;
    border: 1px solid var(--pr-border-em);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(15, 57, 43, 0.06);
}

.testimonial-visual-col {
    background: #f0fdf4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    border-right: 1px solid var(--pr-border-em);
}

.visual-art-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.visual-portrait-wrap {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #ffffff;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf6f0;
}

.visual-client-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.visual-photo-badge {
    background: var(--pr-primary);
    color: #ffffff;
    padding: 7px 18px;
    border-radius: 9999px;
    font-size: 0.84rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pulse-ring {
    width: 8px;
    height: 8px;
    background: var(--pr-emerald);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.35);
}

.visual-stat-pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}

.visual-stat-pill {
    display: block;
    text-align: center;
    background: #ffffff;
    border: 1px solid var(--pr-border-em);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--pr-text-muted);
    box-shadow: 0 2px 6px rgba(15, 57, 43, 0.04);
}

.visual-stat-pill strong {
    color: #047857;
    font-weight: 800;
}

.testimonial-quote-col {
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.customer-company-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.cust-company-brand-logo {
    height: 36px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    mix-blend-mode: multiply;
    display: block;
}

.customer-verified-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--pr-emerald-dark);
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.customer-quote-text {
    font-size: 1.12rem;
    color: var(--pr-text-dark);
    line-height: 1.68;
    margin: 0 0 24px;
    font-style: italic;
}

.customer-meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.customer-avatar-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--pr-emerald);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.customer-info-box {
    display: flex;
    flex-direction: column;
}

.cust-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--pr-text-headings);
}

.cust-role {
    font-size: 0.86rem;
    color: var(--pr-text-subtle);
}

.all-testimonials-link {
    color: #047857;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s ease, color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
.all-testimonials-link:hover {
    color: var(--pr-primary);
    transform: translateX(4px);
    text-decoration: none;
}
}

/* ==========================================================================
   Bottom CTA Banner Section with Scenic Backdrop (Matching Onboarding & OKR)
   ========================================================================== */
.price-cta-banner-section {
    background-image: none !important;
    background-size: cover;
    background-position: center;
}

@media (hover: hover) and (pointer: fine) {
.price-cta-banner-section .feat-cta-actions .feat-hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.4);
}
}

@media (hover: hover) and (pointer: fine) {
.price-cta-banner-section .feat-cta-actions .feat-hero-btn-secondary:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
@media (max-width: 1200px) {
    .price-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .price-hero-title {
        font-size: 2.6rem;
    }

    .price-free-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .free-banner-features {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

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

    .support-cards-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-showcase-card {
        grid-template-columns: 1fr;
    }

    .testimonial-visual-col {
        border-right: none;
        border-bottom: 1px solid var(--pr-border-light);
    }
}

@media (max-width: 600px) {
    .price-hero-title {
        font-size: 2.1rem;
    }

    .price-hero-title .serif-italic {
        font-size: 2.4rem;
    }

    .price-cards-grid {
        grid-template-columns: 1fr;
    }

    .price-toggle-container {
        justify-content: center;
    }
}
/* ==========================================================================
   Page Scenic CTA Backdrop Image
   ========================================================================== */
.feat-cta-banner-section,
[class*="-cta-banner-section"],
.onb-cta-banner-section,
.mf-download-section {
    background-image: none !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* ==========================================================================
   Custom Rich Visual Pricing CTA Showcase Banner Styles
   ========================================================================== */
.pri-cta-showcase-section {
    padding: 38px 0 60px;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.pri-cta-showcase-section .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

.pri-cta-showcase-card {
    position: relative;
    background: linear-gradient(135deg, #f3faf6 0%, #e6f6ee 50%, #d8f1e4 100%);
    border: 1.5px solid rgba(16, 185, 129, 0.28);
    border-radius: 28px;
    padding: 42px 44px 42px 48px;
    display: grid;
    grid-template-columns: 1.12fr 0.98fr;
    gap: 36px;
    align-items: center;
    box-shadow: 0 16px 48px rgba(16, 185, 129, 0.08), 0 4px 16px rgba(0, 0, 0, 0.03);
    overflow: visible;
}

/* Left Column */
.pri-cta-showcase-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    z-index: 2;
    text-align: left;
}

.pri-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #ffffff;
    border: 1px solid #c9edd9;
    border-radius: 100px;
    padding: 5px 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0d5435;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.pri-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
}

.pri-cta-showcase-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2.35rem;
    font-weight: 800;
    line-height: 1.18;
    color: #0b2b20;
    margin: 0;
    letter-spacing: -0.02em;
}

.pri-cta-showcase-title .serif-italic {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 2.75rem;
    color: #065f46;
    letter-spacing: -0.01em;
}

.pri-cta-showcase-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #2d5a47;
    margin: 0;
    max-width: 500px;
}

/* Micro-features */
.pri-cta-micro-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 24px;
    margin-top: 4px;
}

.pri-cta-micro-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1b4d38;
}

.pri-cta-check-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Buttons */
.pri-cta-actions-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.pri-cta-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #065f46;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 13px 26px;
    border-radius: 100px;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(6, 95, 70, 0.28);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.pri-cta-btn-primary:hover {
    background: #047857;
    transform: translateY(-2px);
}

.pri-cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    color: #065f46 !important;
    border: 1.5px solid #a7dcc2;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 100px;
    text-decoration: none !important;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.pri-cta-btn-secondary:hover {
    border-color: #065f46;
    transform: translateY(-2px);
}

/* Right Column: Mockup Stage */
.pri-cta-showcase-right {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pri-cta-mockup-stage {
    position: relative;
    width: 485px;
    max-width: 100%;
    padding: 40px 0;
    box-sizing: border-box;
}

/* 4-Corner Floating Badges */
.pri-float-badge {
    position: absolute;
    background: #ffffff;
    border: 1px solid rgba(16, 185, 129, 0.28);
    border-radius: 12px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    z-index: 15;
    white-space: nowrap;
}

.pri-float-badge.top-left {
    top: 2px;
    left: 10px;
}

.pri-float-badge.bottom-right {
    bottom: 2px;
    right: 10px;
}

.pri-float-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #e6f7f0;
    color: #15803d;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pri-float-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    color: #0b2b20;
}

/* Handwritten Doodles */
.pri-doodle-note-top {
    position: absolute;
    top: 0px;
    right: -8px;
    z-index: 18;
    pointer-events: none;
}

.pri-doodle-note-bottom {
    position: absolute;
    bottom: 0px;
    left: 10px;
    z-index: 18;
    pointer-events: none;
}

.pri-doodle-text {
    font-family: 'Caveat', cursive, sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: #166534;
    line-height: 1.05;
    transform: rotate(3deg);
    white-space: nowrap;
}

.pri-doodle-text.alt {
    color: #166534;
    transform: rotate(-3deg);
}

/* White Mockup Window */
.pri-cta-window {
    background: #ffffff;
    border: 1px solid #cce8da;
    border-radius: 16px;
    box-shadow: 0 14px 36px rgba(11, 43, 32, 0.12);
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.pri-cta-window-top {
    background: #f8fafc;
    border-bottom: 1px solid #eef5f1;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pri-cta-window-dots {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pri-cta-window-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.pri-cta-window-dot.red { background: #ef4444; }
.pri-cta-window-dot.yellow { background: #f59e0b; }
.pri-cta-window-dot.green { background: #10b981; }

.pri-cta-window-title {
    font-size: 0.65rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Summary Strip */
.pri-cta-summary-strip {
    padding: 12px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #eef5f1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pri-cta-sum-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pri-cta-sum-lbl {
    font-size: 0.62rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
}

.pri-cta-sum-val {
    font-size: 0.84rem;
    font-weight: 800;
    color: #0f172a;
}

.pri-cta-sum-val.pos {
    color: #059669;
}

.pri-cta-sum-status {
    padding: 3px 8px;
    background: #d1fae5;
    color: #065f46;
    font-size: 0.64rem;
    font-weight: 700;
    border-radius: 9999px;
}

/* Plan Details Card */
.pri-cta-plan-card {
    padding: 14px;
    background: #ffffff;
}

.pri-cta-plan-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.pri-cta-plan-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pri-cta-plan-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
}

.pri-cta-plan-date {
    font-size: 0.66rem;
    color: #64748b;
}

.pri-cta-breakup-grid {
    background: #f8fafc;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    border: 1px solid #e2e8f0;
}

.pri-cta-break-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #334155;
    margin-bottom: 3px;
}

.pri-cta-break-line.policy {
    margin-top: 5px;
    padding-top: 4px;
    border-top: 1px dashed #cbd5e1;
}

.pri-cta-break-line strong.pos {
    color: #047857;
}

.pri-cta-action-bar {
    display: flex;
}

.pri-cta-btn-start {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: #065f46;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.pri-cta-btn-start:hover {
    background: #047857;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 960px) {
    .pri-cta-showcase-card {
        grid-template-columns: 1fr;
        padding: 34px 24px;
        gap: 32px;
    }
    .pri-cta-showcase-left {
        text-align: center;
        align-items: center;
    }
    .pri-cta-showcase-desc {
        margin-left: auto;
        margin-right: auto;
    }
    .pri-cta-micro-features {
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
    }
    .pri-cta-actions-row {
        justify-content: center;
    }
}

@media (max-width: 680px) {
    .pri-doodle-note-top,
    .pri-doodle-note-bottom {
        display: none !important;
    }
    .pri-cta-actions-row .pri-cta-btn-primary,
    .pri-cta-actions-row .pri-cta-btn-secondary {
        width: 100%;
    }
    .pri-cta-micro-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* ==========================================================================
   Comparison section
   One compact card: a slim bar with the billing toggle, then the table. The
   header row carries only what identifies a plan; the body is hairline rows
   with no vertical rules, so it reads as a list rather than a grid.
   ========================================================================== */

/* "overflow-x: hidden" on the body made the body its own scroll container, so
   the sticky header attached to it (which never scrolls) and never stuck.
   "clip" still stops sideways scrolling without creating a scroll container. */
.pricing-page-body {
    overflow-x: clip;
}

.price-matrix-section {
    padding: 64px 0 72px;
}

.matrix-heading-wrap {
    margin-bottom: 32px;
}

.matrix-title {
    font-size: 2.4rem;
    margin-bottom: 10px;
}

.matrix-subtitle {
    font-size: 1rem;
}

.matrix-card {
    max-width: 1120px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid var(--pr-border-em);
    border-radius: 20px;
    box-shadow: 0 14px 40px rgba(11, 43, 32, 0.07);
    /* Rounds the corners without creating a scroll container, so the header
       row can still stick to the viewport. */
    overflow: clip;
}

.matrix-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    padding: 14px 20px 14px 24px;
    border-bottom: 1px solid var(--pr-border-light);
    background: #fbfdfc;
}

.matrix-toolbar-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--pr-text-headings);
}

.matrix-toolbar .thead-switcher-box {
    gap: 12px;
}

.table-responsive-wrapper {
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: clip;
}

.price-matrix-table {
    table-layout: fixed;
    font-size: 0.86rem;
}

/* Hairline rows only: vertical rules made the body a heavy grid. */
.price-matrix-table th,
.price-matrix-table td {
    border-right: 0;
}

.price-matrix-table thead tr.sticky-thead-row {
    /* Pinned to the navbar's actual bottom edge (set by nav.js), so no rows
       show through a gap between the two at any zoom or width. */
    top: var(--dx-nav-bottom, 76px);
    box-shadow: 0 1px 0 var(--pr-border-light), 0 8px 18px rgba(11, 43, 32, 0.05);
}

.price-matrix-table th {
    padding: 20px 12px 18px;
    vertical-align: bottom;
    border-bottom: 0;
}

.price-matrix-table th.col-feature-title {
    width: 31%;
    min-width: 0;
    padding: 20px 24px 18px;
    background: #ffffff;
}

.price-matrix-table th.col-plan {
    width: 17.25%;
    min-width: 0;
}

.th-features-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pr-text-subtle);
}

.th-plan-inner {
    gap: 2px;
}

.th-plan-name {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.th-plan-cost {
    font-size: 1.55rem;
    letter-spacing: -0.02em;
}

.th-plan-period {
    margin-bottom: 14px;
}

.th-action-btn {
    min-width: 120px;
    padding: 8px 14px;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
}

.matrix-data-row {
    border-bottom: 1px solid #eef3f0;
}

.matrix-data-row:hover {
    background: #f7fcf9;
}

.cell-feature-name {
    padding: 12px 24px;
}

.feat-name-wrap {
    font-size: 0.86rem;
    color: #334155;
}

.cell-grid {
    padding: 12px;
}

.chk-green-circle {
    width: 22px;
    height: 22px;
}

.matrix-section-header td {
    padding: 12px 24px;
    background: #f5fbf7;
    border-top: 1px solid #e6f2eb;
    border-bottom: 1px solid #e6f2eb;
}

.acc-title-text {
    font-size: 0.92rem;
}

.acc-icon-wrap {
    width: 20px;
    height: 20px;
}

.acc-icon-wrap::before {
    width: 9px;
}

.acc-icon-wrap::after {
    height: 9px;
}

.matrix-bottom-link-row {
    padding: 16px 24px;
    background: #fbfdfc;
}

/* Smaller screens: the four plans no longer fit side by side, so the table
   scrolls sideways inside the card with the feature names pinned on the
   left; the header row stops sticking, since it would stick inside the card. */
@media (max-width: 960px) {
    .price-matrix-section {
        padding: 48px 0 56px;
    }

    .matrix-title {
        font-size: 1.9rem;
    }

    .matrix-toolbar {
        padding: 12px 16px;
    }

    .table-responsive-wrapper {
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .price-matrix-table {
        min-width: 680px;
    }

    .price-matrix-table thead tr.sticky-thead-row {
        position: static;
    }

    .price-matrix-table th.col-feature-title,
    .price-matrix-table td.cell-feature-name {
        position: sticky;
        left: 0;
        z-index: 2;
        width: 190px;
        background: #ffffff;
        box-shadow: 1px 0 0 var(--pr-border-light);
    }

    .price-matrix-table th.col-feature-title,
    .cell-feature-name,
    .matrix-section-header td {
        padding-left: 16px;
        padding-right: 12px;
    }
}

/* Under the buy button: the free trial. A quiet second choice that still
   reads at a glance: green, an icon and an arrow that moves on hover, and
   no second button competing with Buy now. */
.plan-trial-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: .7rem auto 0;
    padding: .45rem .9rem;
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
    color: #0b6b45;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}
.plan-trial-link strong {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(11, 107, 69, .35);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: text-decoration-color .18s ease;
}
.plan-trial-icon { flex: 0 0 auto; color: #12a36a; }
.plan-trial-arrow { transition: transform .18s ease; }
.plan-trial-link:hover,
.plan-trial-link:focus-visible {
    background: rgba(18, 163, 106, .10);
    color: #075235;
    text-decoration: none;
}
.plan-trial-link:hover strong,
.plan-trial-link:focus-visible strong { text-decoration-color: currentColor; }
.plan-trial-link:hover .plan-trial-arrow,
.plan-trial-link:focus-visible .plan-trial-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .plan-trial-arrow { transition: none; }
}

/* Premium and Enterprise have no trial: an empty line keeps the cards level. */
.plan-trial-none { visibility: hidden; pointer-events: none; }

@media (max-width: 680px) {
    /* Mobile CTA width containment: pri */
    .pri-cta-showcase-card {
        grid-template-columns: minmax(0, 1fr);
    }
    .pri-cta-showcase-left,
    .pri-cta-showcase-right,
    .pri-cta-mockup-stage {
        min-width: 0;
    }
    .pri-cta-showcase-left,
    .pri-cta-showcase-right,
    .pri-cta-actions-row,
    .pri-cta-micro-features {
        width: 100%;
        max-width: 100%;
    }
    .pri-cta-micro-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pri-cta-micro-item {
        min-width: 0;
    }
}

@media (max-width: 768px) {
    /* A right-aligned note wraps into a ragged left edge on a phone. */
    .tax-disclaimer-text {
        text-align: center;
    }
}

/* Pricing presentation: plan dossiers and a distinct comparison workspace.
   All plan copy, comparison rows, links, and accordion controls stay intact. */
.price-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1180px;
    gap: 20px;
}

.price-plan-card {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    padding: 0;
    text-align: left;
    border-radius: 24px;
    overflow: hidden;
    min-width: 0;
}

.price-plan-card .card-top-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    margin: 0;
    padding: 34px 26px;
    background: #eef7f1;
    border-right: 1px solid #d8e9dd;
}

.price-plan-card .plan-card-pricing {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.price-plan-card .card-divider-line {
    display: none;
}

.price-plan-card .card-features-body {
    min-width: 0;
    padding: 32px 28px;
    align-self: center;
}

.price-plan-card .plan-card-cta {
    width: auto;
    min-width: 150px;
    text-align: center;
}

.price-plan-card.featured-popular .card-top-header {
    background: #0b2b20;
    border-right-color: #0b2b20;
}

.price-plan-card.featured-popular .plan-card-name,
.price-plan-card.featured-popular .currency-symbol,
.price-plan-card.featured-popular .plan-amount {
    color: #ffffff;
}

.price-plan-card.featured-popular .plan-term,
.price-plan-card.featured-popular .plan-billed-note {
    color: #cce8db;
}

.price-plan-card .popular-ribbon-tag {
    top: 14px;
    right: 16px;
    left: auto;
    transform: none;
    z-index: 1;
}

.price-plan-card.suite-card {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
}

.price-plan-card.suite-card .card-top-header {
    background: #f7f2ec;
    border-right-color: #eadfd0;
}

.price-plan-card.suite-card .plan-feature-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.price-matrix-section {
    background: #edf6ef;
    border-top: 1px solid #d9eadf;
    border-bottom: 1px solid #d9eadf;
}

.matrix-heading-wrap {
    max-width: 1120px;
    margin: 0 auto 32px;
    text-align: left;
}

.matrix-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.matrix-toolbar {
    padding: 18px 24px;
    background: #0b2b20;
    border: 1px solid #0b2b20;
    border-radius: 24px 24px 0 0;
}

.matrix-toolbar-title {
    color: #ffffff;
}

.matrix-toolbar .thead-disc-tag {
    color: #ace6c6;
}

.table-responsive-wrapper {
    background: #ffffff;
    border: 1px solid #cde1d3;
    border-top: 0;
    border-radius: 0 0 24px 24px;
    overflow: clip;
}

.price-matrix-table th.col-feature-title,
.price-matrix-table td.cell-feature-name {
    background: #f1f8f3;
    border-right: 1px solid #dcebe0;
}

.price-matrix-table th.col-plan.featured-th,
.price-matrix-table td.featured-col {
    background: #eefaf3;
}

/* The header row sticks under the navbar. The table collapses its borders,
   and a collapsed border is painted by the table where the row started, not
   by the cell — so as the row stuck, the Premium column's top accent and the
   feature column's right rule stayed behind, and rows scrolling underneath
   showed through the strip they left. The header cells draw those lines
   themselves instead (an inset shadow moves with the cell), and the accent
   keeps its 3px of height as padding so the row is exactly as tall. */
.price-matrix-table thead tr.sticky-thead-row th {
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    /* The collapsed 3px accent added half its width to the row's height. */
    padding-top: 21.5px;
}

.price-matrix-table thead tr.sticky-thead-row th.col-feature-title {
    box-shadow: inset -1px 0 0 #dcebe0;
}

.price-matrix-table thead tr.sticky-thead-row th.col-plan.featured-th {
    border-top: 0;
    box-shadow: inset 0 3px 0 var(--pr-emerald);
}

.matrix-section-header td {
    padding-top: 17px;
    padding-bottom: 17px;
    background: #dcefe3;
    border-top-color: #bfdcc9;
    border-bottom-color: #bfdcc9;
}

.matrix-data-row:hover td.cell-feature-name {
    background: #e6f2e9;
}

@media (max-width: 980px) {
    .price-cards-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 700px;
    }

    .price-plan-card.suite-card {
        grid-column: auto;
    }
}

@media (max-width: 680px) {
    .price-plan-card,
    .price-plan-card.suite-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .price-plan-card .card-top-header {
        padding: 28px 24px 24px;
        border-right: 0;
        border-bottom: 1px solid #d8e9dd;
    }

    .price-plan-card .card-features-body {
        padding: 24px;
        width: 100%;
    }

    .price-plan-card.suite-card .plan-feature-items {
        grid-template-columns: minmax(0, 1fr);
    }

    .matrix-toolbar {
        border-radius: 18px 18px 0 0;
    }

    .table-responsive-wrapper {
        overflow-x: auto;
        border-radius: 0 0 18px 18px;
    }
}