/* ============================================================================
   /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;
    /* Column count follows the actual number of tiers (--tier-count, set inline
       from the model). Fixed-width tracks + justify-content:center keep the cards
       centered when there are fewer than 4 tiers instead of left-packed against an
       empty 4th column. */
    grid-template-columns: repeat(var(--tier-count, 4), minmax(0, 285px));
    justify-content: center;
    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 below the tier dropdown (above the price). */
.hp-pricing-tier__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 1rem;
    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);
}

/* Tier-selector dropdown (rendered above the CTA on every card) */
.hp-pricing-tier__tier-select-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 1rem 0 0.35rem;
}
.hp-pricing-tier--featured .hp-pricing-tier__tier-select-label { color: rgba(255, 255, 255, 0.75); }
.hp-pricing-tier__tier-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    border: 1px solid rgba(11, 27, 52, 0.18);
    border-radius: 12px;
    padding: 0.6rem 2.25rem 0.6rem 0.85rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230b1b34'%3E%3Cpath d='M3.2 5.6a.8.8 0 0 1 1.13-.05L8 8.94l3.67-3.39a.8.8 0 1 1 1.08 1.18l-4.21 3.89a.8.8 0 0 1-1.08 0L3.25 6.73a.8.8 0 0 1-.05-1.13z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 14px;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.hp-pricing-tier__tier-select:hover { border-color: var(--brand); }
.hp-pricing-tier__tier-select:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(24, 112, 209, 0.18);
}
.hp-pricing-tier--featured .hp-pricing-tier__tier-select {
    background-color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.6);
    /* The featured select keeps a near-white background in BOTH themes, so its
       text must stay dark ink — not var(--ink), which flips to a light colour in
       dark mode and left the option text invisible on the near-white field. */
    color: #0b1b34;
}

/* 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: 1120px;
    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-pricing-tier:not(.hp-pricing-tier--featured) .hp-pricing-tier__tier-select {
    background-color: #1c2231;
    border-color: var(--hair);
    color: var(--ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e8edf5'%3E%3Cpath d='M3.2 5.6a.8.8 0 0 1 1.13-.05L8 8.94l3.67-3.39a.8.8 0 1 1 1.08 1.18l-4.21 3.89a.8.8 0 0 1-1.08 0L3.25 6.73a.8.8 0 0 1-.05-1.13z'/%3E%3C/svg%3E");
}

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. */