/* ==========================================================================
   Vendor Guide — Pricing page (/vendors/pricing)
   Loads after vendor_guide.shared.css and reuses its tokens and .vg-btn set.

   The billing toggle is CSS only. Two radio inputs sit as the first children of
   #vendor-guide-pricing and everything else is a later sibling, so the general
   sibling combinator can show one price block and hide the other off :checked.
   Both prices stay in the DOM, which is why the page needs no JavaScript and
   never paints the wrong figure first.
   ========================================================================== */

#vendor-guide-pricing {
    position: relative;               /* contains the absolutely placed radios */
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    color: var(--vg-text);
}

/* Visually hidden, not display:none — the labels are the visible control and the
   inputs must stay focusable and reachable by keyboard. */
.vg-pricing-cycle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.vg-pricing-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.vg-pricing-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--vg-text-muted);
    text-decoration: none;
    margin-bottom: 1.25rem;
    transition: color var(--vg-transition);
}

.vg-pricing-back:hover { color: var(--vg-primary); }

.vg-pricing-header h1 {
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 .75rem;
    color: var(--vg-primary);
}

.vg-pricing-sub {
    max-width: 620px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--vg-text-soft);
}

/* ── Launch promotion ───────────────────────────────────────────────────── */

.vg-pricing-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem .75rem;
    max-width: 720px;
    margin: 1.75rem auto 0;
    padding: .85rem 1.25rem;
    border: 1px solid var(--vg-accent);
    border-radius: var(--vg-radius);
    background: #fff7ed;
    font-size: .95rem;
    line-height: 1.45;
    color: var(--vg-text-soft);
}

.vg-pricing-promo strong { color: var(--vg-text); }

.vg-pricing-promo-label {
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--vg-accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.vg-pricing-promo-body {
    flex: 1 1 100%;
    font-size: .88rem;
    color: var(--vg-text-muted);
}

/* ── Billing cycle toggle ───────────────────────────────────────────────── */

.vg-pricing-toggle {
    display: inline-flex;
    gap: .25rem;
    margin-top: 1.75rem;
    padding: .3rem;
    border: 1px solid var(--vg-border);
    border-radius: 999px;
    background: var(--vg-card-bg);
    box-shadow: var(--vg-shadow-xs);
}

.vg-pricing-toggle-option {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .55rem 1.35rem;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--vg-text-muted);
    cursor: pointer;
    user-select: none;
    transition: background var(--vg-transition), color var(--vg-transition);
}

.vg-pricing-toggle-option:hover { color: var(--vg-text); }

#vg-cycle-annual:checked  ~ .vg-pricing-header .vg-pricing-toggle-option--annual,
#vg-cycle-monthly:checked ~ .vg-pricing-header .vg-pricing-toggle-option--monthly {
    background: var(--vg-primary);
    color: #fff;
}

/* Keyboard focus has to be visible on the label, because the input it belongs to
   is the hidden element actually receiving focus. */
#vg-cycle-annual:focus-visible  ~ .vg-pricing-header .vg-pricing-toggle-option--annual,
#vg-cycle-monthly:focus-visible ~ .vg-pricing-header .vg-pricing-toggle-option--monthly {
    outline: 2px solid var(--vg-border-focus);
    outline-offset: 2px;
}

.vg-pricing-toggle-flag {
    padding: .15rem .45rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.vg-pricing-toggle-flag--soon {
    background: #fef9c3;
    color: #a16207;
}

/* Inverted inside the selected pill, where the green-on-white pill would sit on
   the dark primary background and lose its contrast. */
#vg-cycle-annual:checked  ~ .vg-pricing-header .vg-pricing-toggle-option--annual  .vg-pricing-toggle-flag,
#vg-cycle-monthly:checked ~ .vg-pricing-header .vg-pricing-toggle-option--monthly .vg-pricing-toggle-flag {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.vg-pricing-cycle-note {
    max-width: 560px;
    margin: 1rem auto 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--vg-text-muted);
}

/* ── Plan cards ─────────────────────────────────────────────────────────── */

.vg-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.vg-pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--vg-border);
    border-radius: var(--vg-radius-lg);
    background: var(--vg-card-bg);
    box-shadow: var(--vg-shadow);
}

.vg-pricing-card--featured {
    border-color: var(--vg-accent);
    border-width: 2px;
    box-shadow: var(--vg-shadow-md);
}

.vg-pricing-card-flag {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: .25rem .8rem;
    border-radius: 999px;
    background: var(--vg-accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.vg-pricing-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.vg-pricing-card-head h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--vg-text);
}

/* ── The two price blocks ───────────────────────────────────────────────── */

/* Neither renders until a cycle is selected below. Annual is checked in the
   markup, so annual is what paints. */
.vg-pricing-amount { display: none; }

#vg-cycle-annual:checked  ~ .vg-pricing-grid .vg-pricing-amount--annual,
#vg-cycle-monthly:checked ~ .vg-pricing-grid .vg-pricing-amount--monthly {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

/* A price that cannot be bought yet, or a plan sold annually only. Stated rather
   than hidden: a blank column reads as a page fault. */
.vg-pricing-amount--unavailable .vg-pricing-figure {
    color: var(--vg-text-muted);
    font-weight: 700;
}

.vg-pricing-amounts {
    min-height: 132px;              /* keeps the feature lists level across cards */
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--vg-border);
}

.vg-pricing-figure {
    font-size: clamp(2rem, 5vw, 2.6rem);
    line-height: 1;
    font-weight: 800;
    color: var(--vg-primary);
}

.vg-pricing-suffix {
    font-size: .85rem;
    font-weight: 600;
    color: var(--vg-text-muted);
}

.vg-pricing-equiv {
    margin-top: .3rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--vg-text-soft);
}

.vg-pricing-equiv--promo { color: var(--vg-accent-dk); }

.vg-pricing-note {
    font-size: .8rem;
    line-height: 1.4;
    color: var(--vg-text-muted);
}

.vg-pricing-card-desc {
    margin: 0 0 1rem;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--vg-text-soft);
}

.vg-pricing-features {
    flex: 1 1 auto;                 /* pushes every CTA to the same baseline */
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.vg-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .32rem 0;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--vg-text-soft);
}

.vg-pricing-features i {
    flex: 0 0 auto;
    margin-top: .22rem;
    font-size: .78rem;
    color: var(--vg-success);
}

.vg-pricing-cta { justify-content: center; }

.vg-pricing-empty { margin: 2rem auto; }

/* ── Comparison matrix ──────────────────────────────────────────────────── */

.vg-pricing-section-title {
    margin: 0 0 1.25rem;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    color: var(--vg-primary);
}

.vg-pricing-matrix-wrap { margin-top: 3.5rem; }

/* Scrolls inside itself. Four or more tiers is wider than a phone and the page
   body must never scroll sideways. */
.vg-pricing-matrix-scroll {
    overflow-x: auto;
    border: 1px solid var(--vg-border);
    border-radius: var(--vg-radius);
    background: var(--vg-card-bg);
    box-shadow: var(--vg-shadow-xs);
}

.vg-pricing-matrix {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: .9rem;
}

.vg-pricing-matrix th,
.vg-pricing-matrix td {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--vg-border);
    text-align: center;
    vertical-align: middle;
    color: var(--vg-text-soft);
}

.vg-pricing-matrix thead th {
    position: sticky;
    top: 0;
    background: var(--vg-bg-subtle);
    font-weight: 700;
    color: var(--vg-text);
}

.vg-pricing-matrix-rowhead {
    text-align: left;
    font-weight: 600;
    color: var(--vg-text);
    white-space: nowrap;
}

.vg-pricing-matrix tbody tr:last-child th,
.vg-pricing-matrix tbody tr:last-child td { border-bottom: 0; }

.vg-pricing-yes { color: var(--vg-success); }
.vg-pricing-no  { color: var(--vg-text-xmuted); }

/* The tick and the dash carry meaning by color and shape, so each cell also
   holds a text equivalent for a screen reader. */
.vg-pricing-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── How it works ───────────────────────────────────────────────────────── */

.vg-pricing-terms { margin-top: 3.5rem; }

.vg-pricing-terms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.vg-pricing-term {
    padding: 1.25rem;
    border-left: 3px solid var(--vg-primary);
    border-radius: var(--vg-radius-sm);
    background: var(--vg-bg-subtle);
}

.vg-pricing-term h3 {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--vg-text);
}

.vg-pricing-term p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--vg-text-soft);
}

/* ── Closing CTA ────────────────────────────────────────────────────────── */

.vg-pricing-close {
    margin-top: 3.5rem;
    padding: 2.5rem 1.5rem;
    border-radius: var(--vg-radius-lg);
    background: var(--vg-primary);
    text-align: center;
    color: #fff;
}

.vg-pricing-close h2 {
    margin: 0 0 .6rem;
    font-size: 1.5rem;
    font-weight: 800;
}

.vg-pricing-close p {
    max-width: 480px;
    margin: 0 auto 1.5rem;
    font-size: .98rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
}

.vg-pricing-close-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

/* .vg-btn--outline is built for a light background and disappears on the dark
   panel, so it is re-tinted here rather than swapped for another variant. */
.vg-pricing-close .vg-btn--outline {
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
    background: transparent;
}

.vg-pricing-close .vg-btn--outline:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.vg-pricing-footnote {
    max-width: 720px;
    margin: 2rem auto 0;
    font-size: .8rem;
    line-height: 1.55;
    text-align: center;
    color: var(--vg-text-muted);
}

/* ── Narrow screens ────────────────────────────────────────────────────── */

@media (max-width: 575px) {
    #vendor-guide-pricing { padding: 1.25rem .85rem 3rem; }

    .vg-pricing-toggle { width: 100%; }

    .vg-pricing-toggle-option {
        flex: 1 1 0;
        justify-content: center;
        padding: .55rem .5rem;
    }

    /* The reserved height only earns its keep while the cards sit side by side.
       Stacked, it leaves a gap under every short price block. */
    .vg-pricing-amounts { min-height: 0; }

    .vg-pricing-close { padding: 2rem 1.1rem; }

    .vg-pricing-close-actions .vg-btn { width: 100%; }
}

/* ── Print ─────────────────────────────────────────────────────────────── */

/* A price list gets printed and emailed round. Show both cycles on paper, since
   the toggle means nothing there, and drop the closing panel's dark fill. */
@media print {
    .vg-pricing-toggle,
    .vg-pricing-back { display: none; }

    /* !important because the :checked rules that normally pick one cycle are more
       specific than this selector, and on paper both should print. */
    .vg-pricing-amount {
        display: flex !important;
        flex-direction: column;
    }

    .vg-pricing-card { break-inside: avoid; box-shadow: none; }

    .vg-pricing-close {
        background: none;
        color: #000;
        border: 1px solid #999;
    }

    .vg-pricing-close p { color: #333; }
}