/*
 * Pricing page (pricing.php). Uses the landing page's design language: soft
 * purple-to-blue hero, uppercase eyebrow pill, dark headings with a primary
 * accent, white bordered cards and the indigo-to-violet call to action.
 */

.vsp {
    --vsp-primary: #6366f1;
    --vsp-primary-ink: #4f46e5;
    --vsp-ink: #0f172a;
    --vsp-text: #475467;
    --vsp-muted: #6b7280;
    --vsp-line: #e5e7eb;
    --vsp-line-soft: #eef0f4;
    --vsp-soft: #f9fafb;
    --vsp-tint: #eef2ff;
    --vsp-green: #10b981;
    --vsp-gradient: linear-gradient(90deg, #4f46e5, #7c3aed);
    --vsp-nav: 4rem;
    color: var(--vsp-ink);
    background: #fff;
}
.vsp-wrap { max-width: 76rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .vsp-wrap { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .vsp-wrap { padding: 0 2rem; } }

/* ---------- Section heads (same as the landing page's) ---------- */

.vsp-head { max-width: 52rem; margin: 0 auto 3rem; text-align: center; }
.vsp-eyebrow { display: inline-flex; margin: 0 0 1.25rem; padding: .5rem 1rem; border: 1px solid #e0e7ff; border-radius: 999px; background: var(--vsp-tint); color: var(--vsp-primary-ink); font-size: .75rem; font-weight: 700; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; }
.vsp-title { margin: 0 auto 1rem; color: var(--vsp-ink); font-size: var(--vs-type-hero, clamp(2.5rem, 5vw, 4rem)); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; }
.vsp-h2 { margin: 0 auto 1rem; color: var(--vsp-ink); font-size: var(--vs-type-section, clamp(2rem, 4vw, 3.25rem)); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; }
.vsp-title span, .vsp-h2 span { color: var(--vsp-primary); }
.vsp-lead { max-width: 44rem; margin: 0 auto; color: var(--vsp-text); font-size: 1.125rem; line-height: 1.6; }
@media (min-width: 640px) { .vsp-lead { font-size: 1.25rem; } }

.vsp-section { padding: 5.5rem 0; }
.vsp-section--white { background: #fff; }
.vsp-section--soft { background: var(--vsp-soft); border-top: 1px solid var(--vsp-line-soft); border-bottom: 1px solid var(--vsp-line-soft); }
@media (max-width: 639px) { .vsp-section { padding: 4rem 0; } }

/* ---------- Buttons and links ---------- */

.vsp-btn { display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.25rem; border: 1px solid transparent; border-radius: 12px; background: var(--vsp-gradient); color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; box-shadow: 0 10px 20px -10px rgba(79, 70, 229, .45); transition: transform .3s, box-shadow .3s, background-color .2s, border-color .2s; }
.vsp-btn svg { width: 18px; height: 18px; transition: transform .2s; }
.vsp-btn:hover { background: linear-gradient(90deg, #4338ca, #6d28d9); color: #fff; box-shadow: 0 14px 24px -10px rgba(79, 70, 229, .55); transform: translateY(-2px); }
.vsp-btn:hover svg { transform: translateX(3px); }
.vsp-btn:focus-visible, .vsp-billing__btn:focus-visible, .vsp-stepper:focus-visible, .vsp-link:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 3px; }
.vsp-btn--outline { border-color: #c7d2fe; background: #fff; color: #4338ca; box-shadow: none; }
.vsp-btn--outline:hover { border-color: #a5b4fc; background: var(--vsp-tint); color: #3730a3; box-shadow: none; }
.vsp-btn--small { min-height: 42px; padding: .625rem 1rem; font-size: .875rem; }

.vsp-link { display: inline-flex; align-items: center; gap: .375rem; color: var(--vsp-primary-ink); font-weight: 600; text-decoration: none; border-radius: 4px; }
.vsp-link svg { width: 16px; height: 16px; transition: transform .15s; }
.vsp-link:hover svg { transform: translateX(3px); }

/* Plan cards shown on other pages (partials/pricing-summary.php). */
.vsp-summary__more { margin: 2.5rem 0 0; text-align: center; }
.vsp-summary .vsp-plans { margin-top: 1rem; }

/* ---------- Monthly / yearly switch ---------- */

.vsp[data-billing="monthly"] [data-vsp-show="yearly"],
.vsp[data-billing="yearly"] [data-vsp-show="monthly"] { display: none; }

/* ---------- Hero ---------- */

.vsp-hero {
    position: relative;
    padding: 8rem 0 4.5rem;
    overflow: hidden;
    background: linear-gradient(135deg, #faf5ff 0%, #fff 45%, #eff6ff 100%);
}
.vsp-hero::before, .vsp-hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(64px); opacity: .35; pointer-events: none; }
.vsp-hero::before { top: 5rem; right: 4%; width: 24rem; height: 24rem; background: #e9d5ff; }
.vsp-hero::after { top: 26rem; left: 2%; width: 28rem; height: 28rem; background: #bfdbfe; }
.vsp-hero .vsp-wrap { position: relative; z-index: 1; }
.vsp-head--hero { margin-bottom: 2rem; }
.vsp-head--hero .vsp-lead { max-width: 40rem; }
@media (max-width: 639px) { .vsp-hero { padding: 6.5rem 0 3.5rem; } }

.vsp-billing { display: flex; width: max-content; margin: 0 auto 3.5rem; padding: 4px; border: 1px solid var(--vsp-line); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -16px rgba(49, 46, 129, .25); }
.vsp-billing__btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 42px; padding: 0 1.25rem; border: 0; border-radius: 999px; background: transparent; color: var(--vsp-text); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; }
.vsp-billing__btn:hover { color: var(--vsp-ink); }
.vsp-billing__btn[aria-pressed="true"] { background: var(--vsp-ink); color: #fff; }
.vsp-billing__save { padding: .1875rem .5rem; border-radius: 999px; background: #d1fae5; color: #047857; font-size: .75rem; font-weight: 700; }
.vsp-billing__btn[aria-pressed="true"] .vsp-billing__save { background: rgba(52, 211, 153, .16); color: #6ee7b7; }

/* ---------- Plan cards ---------- */

.vsp-plans { display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 1024px) { .vsp-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 640px) and (max-width: 1023px) { .vsp-plans { max-width: 34rem; margin: 0 auto; } }

.vsp-plan { position: relative; display: flex; flex-direction: column; padding: 2rem 1.75rem; border: 1px solid var(--vsp-line); border-radius: 1.5rem; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 20px 40px -32px rgba(49, 46, 129, .35); transition: transform .3s, box-shadow .3s; }
.vsp-plan:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 28px 48px -30px rgba(49, 46, 129, .45); }
.vsp-plan--featured { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #6366f1, #a855f7) border-box; box-shadow: 0 30px 60px -30px rgba(79, 70, 229, .5); }
@media (min-width: 1024px) { .vsp-plan--featured { margin: -.75rem 0; padding-top: 2.75rem; padding-bottom: 2.75rem; } }
.vsp-plan__badge { position: absolute; top: 0; left: 50%; margin: 0; padding: .375rem .875rem; border-radius: 999px; background: var(--vsp-gradient); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transform: translate(-50%, -50%); box-shadow: 0 8px 16px -8px rgba(79, 70, 229, .6); }

.vsp-plan__name { margin: 0 0 .375rem; color: var(--vsp-ink); font-size: 1.375rem; font-weight: 700; line-height: 1.3; }
.vsp-plan--featured .vsp-plan__name { color: var(--vsp-primary-ink); }
.vsp-plan__tagline { min-height: 3em; margin: 0 0 1.5rem; color: var(--vsp-text); font-size: .9375rem; line-height: 1.5; }

.vsp-plan__price { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--vsp-line-soft); }
.vsp-price { display: flex; align-items: center; gap: .625rem; min-height: 3.5rem; margin: 0 0 .5rem; }
.vsp-price__amount { color: var(--vsp-ink); font-size: 3.25rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.vsp-price__amount--text { font-size: 2.5rem; }
.vsp-price__unit { color: var(--vsp-muted); font-size: .875rem; font-weight: 500; line-height: 1.3; }
.vsp-plan__note { min-height: 2.6em; margin: 0; color: var(--vsp-muted); font-size: .875rem; line-height: 1.45; }

.vsp-plan .vsp-btn { margin-bottom: 1.75rem; }
.vsp-plan__list-title { margin: 0 0 .875rem; color: var(--vsp-ink); font-size: .875rem; font-weight: 700; }
.vsp-plan__list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.vsp-plan__list li { display: flex; align-items: flex-start; gap: .625rem; color: #344054; font-size: .9375rem; line-height: 1.45; }
.vsp-plan__list svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--vsp-tint); color: var(--vsp-primary-ink); stroke-width: 3; }

.vsp-assurances { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.vsp-assurances li { display: inline-flex; align-items: center; gap: .5rem; color: #344054; font-size: .9375rem; font-weight: 500; }
.vsp-assurances svg { width: 18px; height: 18px; color: var(--vsp-green); stroke-width: 2.5; }

/* ---------- Cost estimate ---------- */

.vsp-estimate { display: grid; gap: 1.25rem; align-items: center; margin-top: 3rem; padding: 1.5rem; border: 1px solid #e0e7ff; border-radius: 1.5rem; background: rgba(255, 255, 255, .85); backdrop-filter: blur(6px); }
@media (min-width: 1024px) { .vsp-estimate { grid-template-columns: 1.3fr auto 1fr; gap: 2rem; padding: 1.5rem 2rem; } }
.vsp-estimate__title { margin: 0 0 .25rem; color: var(--vsp-ink); font-size: 1.125rem; font-weight: 700; }
.vsp-estimate__copy p { margin: 0; color: var(--vsp-text); font-size: .9375rem; line-height: 1.5; }
.vsp-estimate__control { display: flex; align-items: center; gap: .5rem; }
.vsp-stepper { display: inline-flex; width: 44px; height: 44px; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid var(--vsp-line); border-radius: 12px; background: #fff; color: var(--vsp-ink); cursor: pointer; transition: border-color .2s, background-color .2s; }
.vsp-stepper:hover { border-color: #a5b4fc; background: var(--vsp-tint); }
.vsp-stepper svg { width: 18px; height: 18px; }
.vsp-estimate__input { width: 5.5rem; height: 44px; border: 1px solid var(--vsp-line); border-radius: 12px; background: #fff; color: var(--vsp-ink); font: inherit; font-size: 1.125rem; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.vsp-estimate__input::-webkit-outer-spin-button, .vsp-estimate__input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.vsp-estimate__input:focus { border-color: var(--vsp-primary); outline: 0; box-shadow: 0 0 0 3px rgba(99, 102, 241, .2); }
.vsp-estimate__people { color: var(--vsp-text); font-weight: 500; }
.vsp-estimate__result { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .625rem; }
@media (min-width: 1024px) { .vsp-estimate__result { justify-content: flex-end; text-align: right; } }
.vsp-estimate__total { color: var(--vsp-primary-ink); font-size: 2.25rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.vsp-estimate__detail { color: var(--vsp-text); font-size: .9375rem; }
.vsp-estimate__tip { flex-basis: 100%; color: #047857; font-size: .875rem; font-weight: 600; }

/* ---------- How it works ---------- */

.vsp-steps { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 768px) { .vsp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.vsp-step { position: relative; padding: 2rem 1.75rem; border: 1px solid var(--vsp-line); border-radius: 1.25rem; background: #fff; }
.vsp-step__n { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; margin-bottom: 1.25rem; border-radius: 12px; background: var(--vsp-gradient); color: #fff; font-size: 1.125rem; font-weight: 800; box-shadow: 0 8px 16px -8px rgba(79, 70, 229, .6); }
.vsp-step__title { margin: 0 0 .5rem; color: var(--vsp-ink); font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.vsp-step p { margin: 0; color: var(--vsp-text); line-height: 1.6; }
@media (min-width: 768px) {
    .vsp-step:not(:last-child)::after { content: ""; position: absolute; top: 3.25rem; right: -1.5rem; width: 1.5rem; border-top: 2px dashed #c7d2fe; }
}

/* ---------- Comparison table ---------- */

.vsp-table-wrap { border: 1px solid var(--vsp-line); border-radius: 1.5rem; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 48px -36px rgba(49, 46, 129, .3); }
.vsp-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.vsp-table th, .vsp-table td { padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--vsp-line-soft); text-align: center; vertical-align: middle; font-weight: 400; }
.vsp-table__corner { width: 40%; }

.vsp-table thead th { position: sticky; top: var(--vsp-nav); z-index: 2; padding-top: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--vsp-line); background: #fff; }
.vsp-table thead th:first-child { border-top-left-radius: 1.5rem; }
.vsp-table thead th:last-child { border-top-right-radius: 1.5rem; }
.vsp-table__plan-name { display: block; color: var(--vsp-ink); font-size: 1.125rem; font-weight: 700; }
.vsp-table__plan.is-featured .vsp-table__plan-name { color: var(--vsp-primary-ink); }
.vsp-table__plan-price { display: block; margin-top: .375rem; }
.vsp-table__plan-price strong { display: block; color: var(--vsp-ink); font-size: 1.75rem; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.vsp-table__plan.is-featured .vsp-table__plan-price strong { color: var(--vsp-primary-ink); }
.vsp-table__plan-unit { display: block; margin-top: .25rem; color: var(--vsp-muted); font-size: .75rem; font-weight: 500; }

.vsp-table__group th { padding: 1.75rem 1.25rem .75rem; border-bottom: 1px solid var(--vsp-line); color: var(--vsp-primary-ink); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.vsp-table tbody:first-of-type .vsp-table__group th { padding-top: 1.25rem; }

.vsp-table__feature { text-align: left !important; }
.vsp-table__feature-name { color: var(--vsp-ink); font-size: .9375rem; font-weight: 600; text-decoration: none; }
/* ---------- "Know more" tooltip on features that have a product page ---------- */

.vsp-tip { position: relative; display: inline-block; }
.vsp-tip__trigger { display: inline-flex; align-items: center; gap: .375rem; padding: 0; border: 0; border-bottom: 1.5px dashed #c7d2fe; background: none; color: var(--vsp-ink); font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.5; text-align: left; cursor: pointer; transition: color .2s, border-color .2s; }
.vsp-tip__trigger svg { width: 15px; height: 15px; flex: 0 0 auto; color: #a5b4fc; transition: color .2s, transform .2s; }
.vsp-tip__trigger:hover, .vsp-tip.is-open .vsp-tip__trigger { border-color: var(--vsp-primary); color: var(--vsp-primary-ink); }
.vsp-tip__trigger:hover svg, .vsp-tip.is-open .vsp-tip__trigger svg { color: var(--vsp-primary); transform: scale(1.1); }
.vsp-tip__trigger:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 3px; border-radius: 4px; }

.vsp-tip__card {
    position: absolute;
    top: calc(100% + 12px);
    left: -10px;
    z-index: 30;
    display: block;
    width: 22rem;
    padding: 1.125rem;
    border: 1px solid #e0e7ff;
    border-radius: 1.125rem;
    background: radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--vsp-tip-color, #6366f1) 9%, #fff) 0%, #fff 55%);
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 28px 60px -18px rgba(49, 46, 129, .4);
    color: var(--vsp-text);
    font-weight: 400;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px) scale(.98);
    transform-origin: 24px 0;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
/* Little arrow pointing at the feature name, and an invisible bridge so the
   card stays open while the pointer moves onto it. */
.vsp-tip__card::before { content: ""; position: absolute; top: -7px; left: 22px; width: 12px; height: 12px; border-top: 1px solid #e0e7ff; border-left: 1px solid #e0e7ff; border-radius: 3px 0 0 0; background: #fff; transform: rotate(45deg); }
.vsp-tip__card::after { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 14px; }
.vsp-tip--up .vsp-tip__card { top: auto; bottom: calc(100% + 12px); transform-origin: 24px 100%; }
.vsp-tip--up .vsp-tip__card::before { top: auto; bottom: -7px; border: 0; border-right: 1px solid #e0e7ff; border-bottom: 1px solid #e0e7ff; border-radius: 0 0 3px 0; }
.vsp-tip--up .vsp-tip__card::after { top: 100%; bottom: auto; }

.vsp-tip.is-open .vsp-tip__card { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, visibility 0s; }
@media (hover: hover) and (min-width: 768px) {
    .vsp-tip:hover .vsp-tip__card, .vsp-tip:not(.is-dismissed):focus-within .vsp-tip__card { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease .12s, transform .18s ease .12s, visibility 0s linear .12s; }
}

.vsp-tip__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.vsp-tip__icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--vsp-tip-color, #6366f1) 14%, #fff); color: var(--vsp-tip-color, #6366f1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vsp-tip-color, #6366f1) 22%, #fff); }
.vsp-tip__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vsp-tip__head strong { display: block; color: var(--vsp-ink); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.vsp-tip__head small { display: block; color: var(--vsp-muted); font-size: .75rem; font-weight: 500; }
.vsp-tip__summary { display: block; margin-bottom: .875rem; color: #475467; font-size: .875rem; line-height: 1.55; }
.vsp-tip__points { display: grid; gap: .4375rem; margin-bottom: 1rem; }
.vsp-tip__points > span { display: flex; align-items: flex-start; gap: .5rem; color: #344054; font-size: .8125rem; font-weight: 500; line-height: 1.4; }
.vsp-tip__points svg { width: 16px; height: 16px; flex: 0 0 auto; padding: 3px; border-radius: 50%; background: #d1fae5; color: #047857; stroke-width: 3.5; }
.vsp-tip__plans { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: 1rem; padding-top: .875rem; border-top: 1px solid var(--vsp-line-soft); }
.vsp-tip__plan { display: inline-flex; align-items: center; gap: .3125rem; padding: .25rem .625rem; border-radius: 999px; background: var(--vsp-tint); color: var(--vsp-primary-ink); font-size: .75rem; font-weight: 700; }
.vsp-tip__plan svg { width: 12px; height: 12px; stroke-width: 3.5; }
.vsp-tip__plan.is-off { background: #f3f4f6; color: #9ca3af; font-weight: 600; }
.vsp-tip__more { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 42px; padding: .5rem 1rem; border-radius: 12px; background: var(--vsp-gradient); color: #fff; font-size: .875rem; font-weight: 600; text-decoration: none; box-shadow: 0 10px 20px -12px rgba(79, 70, 229, .6); transition: transform .2s, box-shadow .2s; }
.vsp-tip__more svg { width: 15px; height: 15px; }
.vsp-tip__more:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 24px -12px rgba(79, 70, 229, .7); }
.vsp-tip__more:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }

/* Phones: the card opens inside the row on tap instead of floating. */
@media (max-width: 767px) {
    .vsp-tip { display: block; }
    .vsp-tip__card { position: static; display: none; width: auto; margin: .875rem 0 .25rem; opacity: 1; visibility: visible; transform: none; box-shadow: 0 12px 28px -18px rgba(49, 46, 129, .35); }
    .vsp-tip__card::before, .vsp-tip__card::after { display: none; }
    .vsp-tip.is-open .vsp-tip__card { display: block; }
}

.vsp-table__desc { display: block; margin-top: .25rem; color: var(--vsp-muted); font-size: .8125rem; line-height: 1.5; }

.vsp-table td.is-featured, .vsp-table th.is-featured { background-color: rgba(238, 242, 255, .45); }
.vsp-table thead th.is-featured { background: #f5f6ff; }
.vsp-table tbody tr:not(.vsp-table__group):hover > * { background-color: #fafbff; }

.vsp-yes, .vsp-no { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; }
.vsp-yes { background: #d1fae5; color: #047857; }
.vsp-no { color: #c4c9d4; }
.vsp-yes svg, .vsp-no svg { width: 15px; height: 15px; stroke-width: 3; }
.vsp-cell-text { color: #344054; font-size: .875rem; font-weight: 500; line-height: 1.4; }
.vsp-table td.is-featured .vsp-cell-text { color: var(--vsp-primary-ink); font-weight: 600; }
.vsp-cell-note { display: block; margin-top: .375rem; color: var(--vsp-muted); font-size: .75rem; line-height: 1.4; }

.vsp-table tfoot td { padding: 1.5rem 1.25rem; border-bottom: 0; }

/* Phones and small tablets: every row becomes a small card with the three plans side by side. */
@media (max-width: 767px) {
    .vsp-table-wrap { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .vsp-table, .vsp-table tbody, .vsp-table tr, .vsp-table th, .vsp-table td { display: block; }
    .vsp-table thead, .vsp-table tfoot, .vsp-table__corner { display: none; }
    .vsp-table tbody { margin-bottom: 1.5rem; }
    .vsp-table__group th { padding: 0 .25rem .75rem; border: 0; }
    .vsp-table tbody tr:not(.vsp-table__group) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: .75rem; border: 1px solid var(--vsp-line); border-radius: 1rem; background: #fff; overflow: hidden; }
    .vsp-table tbody tr:not(.vsp-table__group) > .vsp-table__feature { grid-column: 1 / -1; padding: 1rem 1rem .875rem; border-bottom: 1px solid var(--vsp-line-soft); }
    .vsp-table tbody tr:not(.vsp-table__group) > td { padding: .75rem .5rem .875rem; border-bottom: 0; }
    .vsp-table tbody tr:not(.vsp-table__group) > td + td { border-left: 1px solid var(--vsp-line-soft); }
    .vsp-table td::before { content: attr(data-plan); display: block; margin-bottom: .375rem; color: var(--vsp-muted); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .vsp-table td.is-featured::before { color: var(--vsp-primary-ink); }
    .vsp-cell-text { font-size: .8125rem; }
}

.vsp-fineprint { margin: 1rem 0 0; color: var(--vsp-muted); font-size: .8125rem; text-align: center; }

/* ---------- Add-ons (a short price list) ---------- */

.vsp-addons { max-width: 56rem; margin: 0 auto; padding: 0; border: 1px solid var(--vsp-line); border-radius: 1.5rem; background: #fff; list-style: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 48px -36px rgba(49, 46, 129, .3); }
.vsp-addon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; padding: 1.375rem 1.75rem; }
.vsp-addon + .vsp-addon { border-top: 1px solid var(--vsp-line-soft); }
.vsp-addon .vsp-card__icon { margin: 0; }
.vsp-addon__copy .vsp-card__title { margin-bottom: .25rem; }
.vsp-addon__copy p { margin: 0; color: var(--vsp-text); font-size: .9375rem; line-height: 1.55; }
.vsp-addon__price { display: flex; flex-direction: column; align-items: flex-end; margin: 0; text-align: right; white-space: nowrap; }
.vsp-addon__price strong { color: var(--vsp-ink); font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.vsp-addon__price span { margin-top: .125rem; color: var(--vsp-muted); font-size: .8125rem; }
.vsp-addon__price .vsp-addon__soon { margin: 0; padding: .375rem .75rem; border-radius: 999px; background: var(--vsp-soft); border: 1px solid var(--vsp-line); color: var(--vsp-muted); font-size: .8125rem; font-weight: 600; }
.vsp-addons + .vsp-fineprint { margin-top: 1.25rem; }
@media (max-width: 639px) {
    .vsp-addon { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 1.25rem; }
    .vsp-addon__price { grid-column: 2; flex-direction: row; align-items: baseline; gap: .5rem; text-align: left; white-space: normal; }
}

/* ---------- Promises ---------- */

.vsp-cards { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .vsp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vsp-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vsp-card { padding: 1.75rem 1.5rem; border: 1px solid var(--vsp-line); border-radius: 1.25rem; background: #fff; transition: border-color .2s, transform .3s, box-shadow .3s; }
.vsp-card:hover { border-color: #c7d2fe; transform: translateY(-3px); box-shadow: 0 20px 40px -30px rgba(49, 46, 129, .4); }
.vsp-card__icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; margin-bottom: 1.25rem; border-radius: 12px; background: var(--vsp-tint); color: var(--vsp-primary-ink); }
.vsp-card__icon--green { background: #ecfdf5; color: #059669; }
.vsp-card__icon svg { width: 22px; height: 22px; }
.vsp-card__title { margin: 0 0 .5rem; color: var(--vsp-ink); font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.vsp-card p { margin: 0; color: var(--vsp-text); font-size: .9375rem; line-height: 1.6; }

/* ---------- FAQ ---------- */

.vsp-faq { scroll-margin-top: var(--vsp-nav); }
.vsp-faq__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
    .vsp-faq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 4rem; }
    .vsp-faq__intro { position: sticky; top: 6.5rem; align-self: start; }
}
.vsp-faq__title { margin: 0 0 1rem; color: var(--vsp-ink); font-size: clamp(1.875rem, 3.5vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.vsp-faq__text { margin: 0 0 1.25rem; color: var(--vsp-text); line-height: 1.6; }
.vsp-faq__list { border: 1px solid var(--vsp-line); border-radius: 1.25rem; background: #fff; }
.vsp-faq__item + .vsp-faq__item { border-top: 1px solid var(--vsp-line); }
.vsp-faq__item summary { position: relative; padding: 1.25rem 3.5rem 1.25rem 1.5rem; cursor: pointer; list-style: none; }
.vsp-faq__item summary::-webkit-details-marker { display: none; }
.vsp-faq__item summary h3 { margin: 0; color: var(--vsp-ink); font-size: 1rem; font-weight: 600; line-height: 1.45; transition: color .2s; }
.vsp-faq__item summary:hover h3 { color: var(--vsp-primary-ink); }
.vsp-faq__item summary::before, .vsp-faq__item summary::after { content: ""; position: absolute; top: 50%; right: 1.5rem; width: 12px; height: 2px; border-radius: 1px; background: var(--vsp-muted); transition: transform .2s, background-color .2s; }
.vsp-faq__item summary::after { transform: rotate(90deg); }
.vsp-faq__item[open] summary::after { transform: rotate(0deg); }
.vsp-faq__item[open] summary::before, .vsp-faq__item[open] summary::after { background: var(--vsp-primary); }
.vsp-faq__item summary:focus-visible { outline: 2px solid rgba(99, 102, 241, .4); outline-offset: -2px; border-radius: 1rem; }
.vsp-faq__answer { margin: 0; padding: 0 1.5rem 1.375rem; color: #4b5563; font-size: .9375rem; line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
    .vsp *, .vsp *::before, .vsp *::after { transition: none !important; }
    .vsp-plan:hover, .vsp-card:hover, .vsp-btn:hover { transform: none; }
}