/* ============================================================
   FEATHERWORK INVOICING — PRICING PAGE
   Loaded alongside base.css + home.css: reuses the shared header,
   footer, .container, .btn, and design tokens from those two files
   and only adds the sections unique to this page.
   ============================================================ */

/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */
.pricing-hero { padding-block: var(--space-16) var(--space-10); }
.pricing-hero__inner {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.pricing-hero__eyebrow {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent);
}
.pricing-hero h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); font-weight: 700; }
.pricing-hero__sub { font-size: var(--text-lg); color: var(--color-text-secondary); }

/* ----------------------------------------------------------
   PRICING CARD — single plan, no tier comparison needed
   ---------------------------------------------------------- */
.pricing-card-section { padding-block: 0 var(--space-20); }
.price-card {
    max-width: 460px;
    margin-inline: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-10) var(--space-8);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
}
.price-card__badge {
    display: inline-flex;
    align-items: center;
    background: var(--color-highlight-100);
    color: var(--color-highlight-800);
    border-radius: var(--radius-full);
    padding: .35rem .9rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
:root[data-theme="dark"] .price-card__badge { background: color-mix(in srgb, var(--color-highlight-400) 22%, transparent); color: var(--color-highlight-200); }

.price-card__price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}
.price-card__was {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--color-text-tertiary);
}
.price-card__was-unit { font-size: var(--text-sm); font-weight: 500; }
.price-card__now {
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
}
.price-card__now-unit { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); }

.price-card__note { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); }

.price-card__features {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}
.price-card__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.price-card__features li svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: .1em;
    padding: 3px;
    border-radius: 50%;
    background: var(--color-accent-light);
    color: var(--color-accent);
    box-sizing: border-box;
}

/* ----------------------------------------------------------
   BETA EXPLAINER
   ---------------------------------------------------------- */
.beta-explainer {
    padding-block: var(--space-16);
    background: var(--color-surface-raised);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.beta-explainer__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
    max-width: 900px;
    margin-inline: auto;
}
.beta-explainer__item h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.beta-explainer__item p { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); }

@media (max-width: 680px) {
    .beta-explainer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ----------------------------------------------------------
   CTA BAND
   ---------------------------------------------------------- */
.pricing-cta { padding-block: var(--space-20); text-align: center; }
.pricing-cta__inner { max-width: 480px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.pricing-cta h2 { font-size: var(--text-2xl); }
.pricing-cta p { color: var(--color-text-secondary); }