/* ============================================================================
   /pricing page styles. All class names prefixed `hp-` to avoid bleed.
   Tokens reference the canonical palette from mvc-ui-ux-design.md §2.
   ============================================================================ */

.hp-pricing-tiers,
.hp-pricing-matrix,
.hp-trust-band {
    --ink:        #0b1b34;
    --ink-soft:   #2d3a52;
    --muted:      #6b7487;
    --hair:       #e1e6f0;
    --paper:      #f6f8fc;
    --wash:       #eef2fa;
    --brand:      var(--zf-primary,   #246DFF);
    --brand-deep: var(--zf-secondary, #1A4FB8);
    --check:      #19a974;
    --check-bg:   #e6f7ee;
    --cross:      #94a3b8;
    font-family: "Montserrat", sans-serif;
}

/* ─────────────────────────────────────────────
   Tier cards — four cards joined edge-to-edge,
   the featured one raised above and below.
───────────────────────────────────────────── */
.hp-pricing-tiers {
    padding: 2rem 0 1rem;
}

.hp-pricing-tiers__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    max-width: 1180px;
    margin: 36px auto 28px;  /* extra top room for the raised badge + featured tile */
    padding: 0 16px;
    position: relative;
}

.hp-pricing-tier {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--hair);
    padding: 1.75rem 1.4rem 1.5rem;
    margin-left: -1px;     /* collapse adjacent borders so cards "attach" */
    position: relative;
    transition: background 0.18s ease;
}

.hp-pricing-tier:first-child {
    margin-left: 0;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}
.hp-pricing-tier:last-child {
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

.hp-pricing-tier:not(.hp-pricing-tier--featured):hover {
    background: #fff;
}

/* Raised featured card — solid blue, distinctly taller than its neighbors,
   layered above them with negative margins on top and bottom so the lift is
   visible without breaking grid stretch on the other three cards. */
.hp-pricing-tier--featured {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    border-radius: 18px !important;
    margin-top: -36px;
    margin-bottom: -36px;
    margin-left: -2px;
    margin-right: -2px;
    padding-top: 2.5rem;        /* breathing room for the badge + lifted content */
    padding-bottom: 2.5rem;
    min-height: 550px;          /* forces the lift visibility — grid stretch alone collapses negative margins */
    z-index: 2;
    box-shadow:
        0 32px 70px -28px rgba(36, 109, 255, 0.55),
        0 14px 28px -16px rgba(11, 27, 52, 0.20);
}
.hp-pricing-tier--featured + .hp-pricing-tier { margin-left: 0; }

/* Badge ribbon — yellow pill, half-in/half-above the card's top edge */
.hp-pricing-tier__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    background: #ff6b35;
    color: #fff;
    padding: 5px 18px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: normal;     /* zero tracking — avoids trailing-letter-spacing overflow */
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: 0 6px 14px -6px rgba(11, 27, 52, 0.32);
    z-index: 3;
}
.hp-pricing-tier--featured .hp-pricing-tier__badge {
    border-color: var(--brand);
}

/* Header cluster */
.hp-pricing-tier__head { margin-bottom: 1.25rem; }

.hp-pricing-tier__name {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand);
}
.hp-pricing-tier--featured .hp-pricing-tier__name { color: #fff; }

.hp-pricing-tier__desc {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--muted);
    margin: 0;
    min-height: 2.6em;
}
.hp-pricing-tier--featured .hp-pricing-tier__desc { color: rgba(255, 255, 255, 0.85); }

/* CTA button — full width, sits between desc and price (PDF order) */
.hp-pricing-tier__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.hp-pricing-tier__cta i { font-size: 0.9em; transition: transform 0.18s ease; }
.hp-pricing-tier__cta:hover i { transform: translateX(2px); }

.hp-pricing-tier__cta--outline {
    background: transparent;
    color: var(--brand);
    border: 1.5px solid var(--brand);
}
.hp-pricing-tier__cta--outline:hover {
    background: var(--brand);
    color: #fff;
    transform: translateY(-1px);
}

.hp-pricing-tier__cta--solid {
    background: #fff;
    color: var(--brand);
    border: 1.5px solid #fff;
    box-shadow: 0 8px 18px -10px rgba(11, 27, 52, 0.35);
}
.hp-pricing-tier__cta--solid:hover {
    color: var(--brand-deep);
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -10px rgba(11, 27, 52, 0.45);
}

/* Price block */
.hp-pricing-tier__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin: 1.25rem 0 0.25rem;
}
.hp-pricing-tier__price-from {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    width: 100%;
    margin-bottom: -2px;
}
.hp-pricing-tier--featured .hp-pricing-tier__price-from { color: rgba(255, 255, 255, 0.75); }
.hp-pricing-tier__price-amount {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.hp-pricing-tier__price-period {
    font-size: 0.85rem;
    color: var(--muted);
}
.hp-pricing-tier--featured .hp-pricing-tier__price-period { color: rgba(255, 255, 255, 0.8); }

/* Features list */
.hp-pricing-tier__features-intro {
    margin: 1.1rem 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.hp-pricing-tier--featured .hp-pricing-tier__features-intro { color: rgba(255, 255, 255, 0.85); }

.hp-pricing-tier__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.hp-pricing-tier__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ink-soft);
}
.hp-pricing-tier__features .bi {
    flex-shrink: 0;
    width: 1.05em;
    margin-top: 0.18em;
    color: var(--check);
    font-size: 0.95em;
    font-weight: 700;
}
.hp-pricing-tier__features .bi-x { color: #b82347; }
.hp-pricing-tier__feature--highlighted { font-weight: 600; color: var(--ink); }

.hp-pricing-tier--featured .hp-pricing-tier__features li { color: rgba(255, 255, 255, 0.92); }
.hp-pricing-tier--featured .hp-pricing-tier__features .bi { color: #ffd76a; }
.hp-pricing-tier--featured .hp-pricing-tier__feature--highlighted { color: #fff; }

/* ─────────────────────────────────────────────
   Trust band — between tier cards and comparison
───────────────────────────────────────────── */
.hp-trust-band {
    padding: 2.5rem 0 1.5rem;
}

.hp-trust-band__inner {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #fbfcff 0%, #eef2fa 100%);
    border: 1px solid var(--hair);
    border-radius: 18px;
    padding: 14px 18px;
    box-shadow: 0 18px 40px -28px rgba(36, 109, 255, 0.25);
}

.hp-trust-band__chip {
    flex: 1 1 220px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--hair);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hp-trust-band__chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -14px rgba(11, 27, 52, 0.22);
}

.hp-trust-band__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 6px 16px -10px rgba(36, 109, 255, 0.55);
}

.hp-trust-band__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.hp-trust-band__text strong {
    font-size: 0.9rem;
    color: var(--ink);
    font-weight: 700;
}
.hp-trust-band__text span {
    font-size: 0.78rem;
    color: var(--muted);
}

.hp-trust-band__chip--accent {
    background: linear-gradient(135deg, rgba(36, 109, 255, 0.06), rgba(36, 109, 255, 0.02));
    border-color: rgba(36, 109, 255, 0.22);
}

.hp-trust-band__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--brand);
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
    margin-top: 1px;
}
.hp-trust-band__link i { font-size: 0.9em; transition: transform 0.18s ease; }
.hp-trust-band__link:hover { color: var(--brand-deep); }
.hp-trust-band__link:hover i { transform: translateX(2px); }

/* ─────────────────────────────────────────────
   Comparison matrix — PDF-style banded table
───────────────────────────────────────────── */
.hp-pricing-matrix {
    padding: 2.5rem 0 4rem;
}

.hp-pricing-matrix__heading {
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    text-align: center;
    margin: 0;
    color: var(--ink);
}
.hp-pricing-matrix__sub {
    text-align: center;
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0.5rem 0 1.6rem;
}

.hp-pricing-matrix__card {
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--hair);
    box-shadow: 0 24px 60px -36px rgba(11, 27, 52, 0.22);
}

.hp-pricing-matrix__scroll {
    overflow-x: auto;
}

.hp-pricing-matrix__table {
    width: 100%;
    min-width: 880px;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
}

.hp-pricing-matrix__table th,
.hp-pricing-matrix__table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--hair);
    vertical-align: middle;
    text-align: center;
}

/* ── Header band (plan name + price + CTA per column) ── */
.hp-pricing-matrix__band > th {
    background: var(--brand);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    padding: 18px 18px 16px;
    text-align: center;
    vertical-align: top;
    font-weight: 600;
}

.hp-pricing-matrix__band-cell--feature {
    text-align: left !important;
    background: var(--brand-deep) !important;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    width: 30%;
    min-width: 220px;
}
.hp-pricing-matrix__band-cell--feature span {
    display: inline-block;
    padding-top: 8px;
}

.hp-pricing-matrix__band-cell--featured {
    background: var(--brand-deep) !important;
    box-shadow: inset 0 -4px 0 rgba(255, 255, 255, 0.25);
}

.hp-pricing-matrix__plan-name {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.hp-pricing-matrix__plan-price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}
.hp-pricing-matrix__plan-period {
    font-size: 0.78rem;
    font-weight: 500;
    opacity: 0.85;
}

.hp-pricing-matrix__plan-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.hp-pricing-matrix__plan-cta--ghost {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
}
.hp-pricing-matrix__plan-cta--ghost:hover {
    background: #fff;
    color: var(--brand);
    transform: translateY(-1px);
}
.hp-pricing-matrix__plan-cta--solid {
    background: #fff;
    color: var(--brand);
}
.hp-pricing-matrix__plan-cta--solid:hover {
    color: var(--brand-deep);
    transform: translateY(-1px);
}

/* ── Group rows (full-width category strip) ── */
.hp-pricing-matrix__group-row td {
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-deep) 100%);
    color: #fff;
    padding: 12px 18px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hp-pricing-matrix__group-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.hp-pricing-matrix__group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 0.85rem;
}
.hp-pricing-matrix__group-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Feature rows ── */
.hp-pricing-matrix__feature-row:hover td,
.hp-pricing-matrix__feature-row:hover th {
    background: var(--paper);
}

.hp-pricing-matrix__feature-cell {
    text-align: left !important;
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--ink);
    width: 30%;
    min-width: 220px;
    background: #fff;
}
.hp-pricing-matrix__feature-name { font-weight: 600; }
.hp-pricing-matrix__tooltip {
    margin-left: 0.4rem;
    color: var(--cross);
    cursor: help;
    font-size: 0.85em;
}

.hp-pricing-matrix__cell {
    font-size: 0.9rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.hp-pricing-matrix__cell--featured {
    background: rgba(36, 109, 255, 0.04);
}

.hp-pricing-matrix__cell-text {
    display: inline-block;
    line-height: 1.35;
    max-width: 220px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.hp-pricing-matrix__check,
.hp-pricing-matrix__cross,
.hp-pricing-matrix__dash {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.hp-pricing-matrix__check i,
.hp-pricing-matrix__cross i,
.hp-pricing-matrix__dash i {
    line-height: 1;
}
.hp-pricing-matrix__check {
    background: #1ea868;
    box-shadow:
        0 0 0 3px rgba(30, 168, 104, 0.10),
        0 6px 12px -6px rgba(15, 139, 90, 0.55);
}
.hp-pricing-matrix__cross,
.hp-pricing-matrix__dash {
    background: #e04848;
    box-shadow:
        0 0 0 3px rgba(224, 72, 72, 0.10),
        0 6px 12px -6px rgba(184, 35, 71, 0.55);
}

.hp-pricing-matrix__feature-row:last-child td,
.hp-pricing-matrix__feature-row:last-child th {
    border-bottom: 0;
}

/* ─────────────────────────────────────────────
   Responsive
───────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .hp-pricing-tiers__row {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 14px;        /* row gap leaves room for the floating badge */
    }
    .hp-pricing-tier {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 16px !important;
    }
    .hp-pricing-tier--featured {
        margin-top: 0;
        margin-bottom: 0;
        min-height: auto;       /* drop the desktop lift floor when cards stack */
    }

    .hp-pricing-matrix__feature-cell,
    .hp-pricing-matrix__band-cell--feature {
        position: sticky;
        left: 0;
        z-index: 1;
        box-shadow: 2px 0 4px rgba(11, 27, 52, 0.06);
    }
    .hp-pricing-matrix__feature-cell { background: #fff; }
}

@media (max-width: 720px) {
    .hp-pricing-tiers__row { grid-template-columns: 1fr; }

    .hp-trust-band__chip { flex: 1 1 100%; }
}

/* ─────────────────────────────────────────────
   Dark theme
───────────────────────────────────────────── */
html[data-theme="dark"] .hp-pricing-tiers,
html[data-theme="dark"] .hp-pricing-matrix,
html[data-theme="dark"] .hp-trust-band {
    --ink:        #e8edf5;
    --ink-soft:   #c6cbd8;
    --muted:      #8d95a8;
    --hair:       #2a3142;
    --paper:      #1c2231;
    --wash:       #161a25;
    --check-bg:   rgba(25, 169, 116, 0.18);
    --cross:      #6b7487;
}

html[data-theme="dark"] .hp-pricing-tier {
    background: #161a25;
    color: var(--ink);
    border-color: var(--hair);
}
html[data-theme="dark"] .hp-pricing-tier:not(.hp-pricing-tier--featured):hover {
    background: #1c2231;
}

html[data-theme="dark"] .hp-trust-band__inner {
    background: linear-gradient(135deg, #1c2231 0%, #161a25 100%);
    border-color: var(--hair);
}
html[data-theme="dark"] .hp-trust-band__chip {
    background: #161a25;
    border-color: var(--hair);
}
html[data-theme="dark"] .hp-trust-band__text strong { color: var(--ink); }

html[data-theme="dark"] .hp-pricing-matrix__card {
    background: #161a25;
    border-color: var(--hair);
}
html[data-theme="dark"] .hp-pricing-matrix__table { background: #161a25; }
html[data-theme="dark"] .hp-pricing-matrix__feature-cell { background: #161a25; color: var(--ink); }
html[data-theme="dark"] .hp-pricing-matrix__feature-row:hover td,
html[data-theme="dark"] .hp-pricing-matrix__feature-row:hover th { background: #1c2231; }
html[data-theme="dark"] .hp-pricing-matrix__cell--featured { background: rgba(36, 109, 255, 0.10); }
html[data-theme="dark"] .hp-pricing-matrix__check {
    background: #1ea868;
    color: #fff;
}
html[data-theme="dark"] .hp-pricing-matrix__cross,
html[data-theme="dark"] .hp-pricing-matrix__dash {
    background: #e04848;
    color: #fff;
}
html[data-theme="dark"] .hp-pricing-matrix__cell-text { color: var(--ink); }

/* PageHero (.ph-hero) styles moved to wwwroot/css/components/_page-hero.css —
   single source of truth for the shared Views/Shared/_PageHero.cshtml partial.
   Loaded globally from _PublicLayout.cshtml. */