/* tier-cards.css - the JS-generated catalog tier cards
 * (BillingUI.buildTierCardsHtml), extracted VERBATIM from pricing.html's
 * inline styles on 2026-07-18 so every surface that renders the cards
 * shares one source: the pricing page (#pricingGrid), the Lab package
 * picker (capacity-is-what-you-buy empty state), and the upgrade-prompt
 * tier ladders. Heirloom Gold tokens only; pricing.html links this file
 * and its inline copies of these rules are deleted.
 *
 * The cards ship with NO grid of their own - hosts provide a
 * .pricing-grid wrapper.
 */

/* Pricing Grid - 3 columns for paid tiers */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 24px;
    /* natural card heights: without this the grid stretches the two
       cheaper cards to Dynasty's height, leaving ~210px of dead space */
    align-items: start;
}

@media (max-width: 900px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
}

.pricing-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    border: 2px solid var(--color-border);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.pricing-card.featured {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-accent);
}

/* ?tier=X deep link: the card the buyer already chose upstream */
.pricing-card.tier-linked {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(217, 165, 32, 0.35), var(--shadow-card-hover);
}
/* Do not add a ::before badge to .featured: it paints at the same
   coordinates as the real .pricing-badge span and the two pills stack
   (PM-27 also bans a second popularity claim). */

.card-tier-name {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.price-amount {
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
}

.price-period {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary-strong, #4A6366);
    margin-left: 8px;
}

.pricing-scenario {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-text-secondary-strong, #4A6366);
    font-size: 15px;
    margin: 4px 0 12px;
    min-height: 2.7em;
}

.card-cta {
    width: 100%;
    padding: 16px;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    min-height: 52px;
    border: none;
    margin-bottom: 16px;
}

.btn-warm {
    background: var(--color-accent);
    /* dark-on-gold: white on the accent measures 2.25:1 (fails AA) */
    color: var(--color-primary);
}

.btn-warm:hover {
    background: var(--color-accent-hover);
    box-shadow: var(--shadow-accent);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--color-border);
    color: var(--color-primary);
}

.btn-outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* New Card Styles (JS-generated) */
.pricing-card-new {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
}

.pricing-card-new .pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    /* 11px white-on-gold was the worst contrast on the page (2.25:1) */
    color: var(--color-primary);
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.pricing-card-header {
    text-align: center;
    margin-bottom: 16px;
}

.pricing-card-new .card-tier-name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.pricing-card-new .price-amount {
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

.pricing-card-new .photo-capacity {
    text-align: center;
    padding: 16px 12px;
    background: var(--color-canvas);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.pricing-card-new .capacity-action {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-right: 4px;
}

.pricing-card-new .capacity-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.pricing-card-new .capacity-label {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-left: 4px;
}

/* Included Features */
.pricing-included {
    margin-bottom: 20px;
    flex: 1;
}

.pricing-included-label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
    font-style: italic;
}

.pricing-included-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

.pricing-included-item:last-child {
    border-bottom: none;
}

.pricing-included-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
}

.pricing-included-desc {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

/* CTA Button alignment */
.pricing-card-new .card-cta {
    margin-top: auto;
}

/* Pass-inclusion footnote: keep this quiet text, never a filled block
   (a dark band here reads as a second button and out-weighs the CTA). */
.pricing-savings {
    margin-top: 10px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-text-secondary-strong, #4A6366);
}

.pricing-savings .savings-amount {
    font-weight: 700;
    color: white;
}