/* ════════════════════════════════════════════════════════════════════════
   pricing.css — zCloud PRICING page brush (Layer 3 · identity).
   Opt in with zMeta.zBrush: [page, pricing]. Builds ON the canonical zc-*
   grammar (hero / section / grid / card from page.css + zCloud.css) and adds
   only the pricing-specific bits: the tier card internals (badge / price /
   feature list / CTA) and the featured-tier highlight.

   Layering:
     L1 canvas (zCloud.css)  → zc-card surface, zc-grid, zc-btn, tokens.
     L2 grammar (page.css)   → zc-hero, zc-section, zc-title, zc-subtitle.
     L3 THIS                 → pricing-* tier anatomy. One page only.
   ════════════════════════════════════════════════════════════════════════ */

/* ── live free-seat banner — celebratory glass strip under the masthead ────
   The number is woven live (zKnot over the Ops pool reels); the banner is the
   page's conversion hook, so it borrows the featured-tier voice: violet ring,
   green accents, one big gradient numeral. */
.pricing-seats {
    max-width: var(--zc-container-narrow);
    margin:    0 auto 1rem;
    padding:   0 var(--zc-section-x);
}
.pricing-seats-inner {
    text-align:    center;
    padding:       2.5rem 2rem 2.75rem;
    border-radius: var(--zc-radius, 22px);
    background:    var(--zc-surface);
    border:        1px solid rgba(124, 58, 237, 0.45);
    box-shadow:    0 0 0 1px rgba(124, 58, 237, 0.22), 0 22px 56px rgba(79, 70, 229, 0.25);
    position:      relative;
    isolation:     isolate;
}
.pricing-seats-inner::before {
    content:        '';
    position:       absolute;
    inset:          0;
    border-radius:  inherit;
    background:     radial-gradient(60% 120% at 50% 0%, rgba(162, 212, 110, 0.10), transparent 70%);
    pointer-events: none;
    z-index:        -1;
}
.pricing-seats-eyebrow {
    margin:         0 0 0.4rem;
    font-size:      0.8125rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          #a2d46e;
}
.pricing-seats-row {
    display:         flex;
    align-items:     baseline;
    justify-content: center;
    gap:             0.7rem;
    flex-wrap:       wrap;
}
.pricing-seats-num {
    margin:                  0;
    font-size:               clamp(3rem, 8vw, 4.6rem);
    font-weight:             800;
    line-height:             1;
    letter-spacing:          -0.03em;
    background:              linear-gradient(135deg, #ffffff 0%, #d3f0b4 45%, #a2d46e 100%);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    text-shadow:             0 0 70px rgba(162, 212, 110, 0.35);
}
.pricing-seats-cap {
    margin:      0;
    font-size:   1.15rem;
    font-weight: 600;
    color:       var(--text-light);
}
.pricing-seats-sub { margin: 0.9rem 0 0; color: var(--text-gray); font-size: 0.95rem; }
.pricing-seats-sub p { margin: 0; }
.pricing-seats-cta { margin-top: 1.4rem; display: inline-block; }

/* ── product header — tighter than a hero, owns its own rhythm ───────────── */
.pricing-product { text-align: center; margin: 0 0 2.75rem; }
.pricing-product .zc-subtitle { margin-bottom: 0; }

/* ── zOS intro — one price (free), so no card grid; a calm centered block:
   what it includes as chips, then two CTAs side by side. ───────────────── */
.pricing-intro { max-width: 720px; margin: 0 auto; text-align: center; }
.pricing-intro-text {
    color:       var(--text-gray);
    font-size:   1.05rem;
    line-height: 1.7;
    margin:      0 auto;
}
.pricing-intro-text p { margin: 0; }
.pricing-includes {
    display:         flex;
    flex-wrap:        wrap;
    justify-content:  center;
    gap:              0.6rem;
    list-style:       none;
    padding:          0;
    margin:           2rem 0;
}
.pricing-includes ul { list-style: none; padding: 0; margin: 0; display: contents; }
.pricing-includes li {
    padding:        0.45rem 1rem;
    border-radius:  999px;
    background:     rgba(255, 255, 255, 0.05);
    border:         1px solid rgba(255, 255, 255, 0.14);
    color:          var(--text-light);
    font-size:      0.86rem;
    font-weight:    500;
    white-space:    nowrap;
}
.pricing-ctas-inline {
    display:         flex;
    flex-wrap:        wrap;
    justify-content:  center;
    gap:              0.85rem;
    margin-top:       0.75rem;
}

/* ── tier card — extends zc-card; CTA pinned to the bottom edge ──────────── */
.pricing-tier { padding: 2.5rem 2rem; }
.pricing-tier > * + * { margin-top: 1.1rem; }

/* badge — small uppercase tier label */
.pricing-badge {
    align-self:     flex-start;
    padding:        0.3rem 0.85rem;
    border-radius:  999px;
    background:     rgba(255, 255, 255, 0.06);
    border:         1px solid rgba(255, 255, 255, 0.14);
    color:          var(--text-light);
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.pricing-badge p { margin: 0; }

/* price row — big number + small note inline-baseline */
.pricing-price-row {
    display:     flex;
    align-items: baseline;
    flex-wrap:   wrap;
    gap:         0.55rem;
    margin-top:  0.4rem;
}
.pricing-price {
    font-size:      clamp(2.1rem, 5vw, 2.9rem);
    font-weight:    800;
    letter-spacing: -0.03em;
    color:          var(--text-light);
    line-height:    1;
    margin:         0;
}
.pricing-price h3 { font: inherit; color: inherit; margin: 0; letter-spacing: inherit; }
.pricing-price-note { color: var(--text-gray); font-size: 0.95rem; }
.pricing-price-note p { margin: 0; }

/* tier description */
.pricing-tier-desc { color: var(--text-gray); line-height: 1.65; font-size: 0.98rem; margin: 0; }
.pricing-tier-desc p { margin: 0; }

/* feature list — each row a ✓ + text; supports both zText.pricing-feature and zUL li */
.pricing-features { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.4rem 0; }
.pricing-features ul { list-style: none; padding: 0; margin: 0; display: contents; }
.pricing-feature,
.pricing-features li {
    position:     relative;
    padding-left: 1.7rem;
    color:        var(--text-light);
    font-size:    0.96rem;
    line-height:  1.45;
    margin:       0;
}
.pricing-feature p { margin: 0; }
.pricing-feature::before,
.pricing-features li::before {
    content:     '✓';
    position:    absolute;
    left:        0;
    top:         0;
    color:       var(--color-primary, #A2D46E);
    font-weight: 800;
    font-size:   0.95rem;
}

/* training/privacy note — muted fine print */
.pricing-note {
    color:      var(--text-gray);
    font-size:  0.82rem;
    font-style: italic;
    opacity:    0.85;
    margin:     0;
}
.pricing-note p { margin: 0; }

/* CTA — pinned to the bottom; a hairline footer makes the equal-height gap in
   shorter cards read as intentional separation rather than dead space. */
.pricing-cta,
.pricing-ctas {
    margin-top:  auto;
    padding-top: 1.4rem;
    border-top:  1px solid rgba(255, 255, 255, 0.08);
}
.pricing-ctas { display: flex; flex-direction: column; gap: 0.6rem; }
.pricing-cta .zc-btn, .pricing-ctas .zc-btn { width: 100%; }
/* uniform CTA footer anatomy: button(s), then the tier's fine print beneath —
   the second child is also what keeps the wrapper alive (bifrost collapses
   sole-child wrappers, and .pricing-cta must reach the DOM to pin). */
.pricing-cta p { margin: 0; }
.pricing-cta .pricing-note { margin-top: 0.8rem; text-align: center; }
/* the zMD-link button (Pro's mailto door) — zc-btn on an inline <a> */
.pricing-cta a.zc-btn { display: block; text-align: center; box-sizing: border-box; }

/* ── queue strip (Free card, under the CTA) — usually EMPTY (guest / never
   queued: all three gates drop). An empty strip must cost zero height AND
   zero sibling margin, or the Free card's pinned CTA rides ~1.1rem higher
   than its neighbors'. Spacing lives on the VISIBLE children instead. */
.pricing-tier > .pricing-queue-state { margin-top: 0; }
.pricing-queue-state > * { margin-top: 0.9rem; }
.pricing-queue-note { text-align: center; color: var(--text-gray); font-size: 0.88rem; margin-bottom: 0; }
.pricing-queue-offered { color: #a2d46e; font-weight: 600; }

/* locked — alpha "everything is request-only" state: looks like a disabled pill,
   not clickable (pointer-events off), so only the Builder "Request Access" CTA acts. */
.pricing-cta-locked {
    width:          100%;
    background:     rgba(255, 255, 255, 0.04);
    border:         1px solid rgba(255, 255, 255, 0.12);
    color:          var(--text-gray);
    box-shadow:     none;
    cursor:         default;
    pointer-events: none;
}
.pricing-cta-locked::before { content: '🔒 '; font-size: 0.85em; }

/* ── featured tier — the Builder card lifted + ringed ────────────────────── */
.pricing-featured {
    border-color: rgba(124, 58, 237, 0.5);
    box-shadow:   0 0 0 1px rgba(124, 58, 237, 0.25), 0 26px 64px rgba(79, 70, 229, 0.28);
    transform:    translateY(-6px);
}
.pricing-featured:hover { transform: translateY(-10px); }
.pricing-featured::before {
    background: linear-gradient(90deg, transparent, rgba(162, 212, 110, 0.7), transparent);
    height:    2px;
}

/* (The "Most Popular" tag is retired (2026-07-16) — the ring/glow/lift above
   is the featured signal on its own; the absolute tag straddling the top edge
   was clipped by the card's overflow:hidden anyway.) */

/* ── sponsorship callout — "free hosting stays free" (the X:Y fair model) ────
   A glass panel under the cloud grid. The ratio is a PUBLIC, permanent product
   promise (not an alpha trick), so it gets a real panel + a big number. */
.pricing-pool {
    max-width:     860px;
    margin:        3.5rem auto 0;
    text-align:    center;
    padding:       2.75rem 2.5rem;
    border-radius: var(--zc-radius, 22px);
    background:
        linear-gradient(180deg, rgba(124, 58, 237, 0.12), rgba(79, 70, 229, 0.04)),
        var(--zc-surface, rgba(255, 255, 255, 0.03));
    border:        1px solid rgba(124, 58, 237, 0.28);
    box-shadow:    0 0 0 1px rgba(124, 58, 237, 0.05), 0 22px 60px rgba(79, 70, 229, 0.16);
}
.pricing-pool-eyebrow {
    font-size:      0.8125rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          #a5b4fc;
    margin:         0 0 1.25rem;
}
.pricing-pool-eyebrow p { margin: 0; }
.pricing-pool-ratio {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.3rem;
    margin:         0 0 1.4rem;
}
.pricing-pool-num {
    font-size:               clamp(2.6rem, 7vw, 4rem);
    font-weight:             800;
    line-height:             1;
    letter-spacing:          -0.03em;
    background:              var(--zc-text-grad);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    margin:                  0;
}
.pricing-pool-num p { margin: 0; }
.pricing-pool-cap {
    color:          var(--text-gray);
    font-size:      0.85rem;
    font-weight:    600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin:         0;
}
.pricing-pool-cap p { margin: 0; }
.pricing-pool-text {
    color:       var(--text-light);
    font-size:   clamp(1rem, 1.8vw, 1.12rem);
    line-height: 1.65;
    max-width:   62ch;
    margin:      0 auto;
}
.pricing-pool-text p { margin: 0; }
.pricing-pool-text strong { color: #fff; font-weight: 700; }

/* ── FAQ — quiet cards, left-aligned Q/A ─────────────────────────────────── */
.pricing-faq-item { padding: 2rem; gap: 0.75rem; }
.pricing-faq-q {
    font-size:      1.12rem;
    font-weight:    700;
    color:          var(--text-light);
    letter-spacing: -0.01em;
    margin:         0;
}
.pricing-faq-q h4 { font: inherit; color: inherit; margin: 0; }
.pricing-faq-a { color: var(--text-gray); line-height: 1.7; font-size: 0.98rem; margin: 0; }
.pricing-faq-a p { margin: 0; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pricing-featured { transform: none; }
    .pricing-featured:hover { transform: translateY(-4px); }
    .pricing-tier { padding: 2.25rem 1.75rem; }
    .pricing-pool { padding: 2rem 1.5rem; }
    .pricing-includes li { white-space: normal; }
    .pricing-ctas-inline { flex-direction: column; align-items: stretch; }
}