/* ============================================================================
   pricing.css — styles for the /pricing page (EN pricing.php + mx/pricing.php).
   Extracted from the former inline <style> block so both locales share one
   source. Server-rendered cards from the Owner-Hub pricing API use these.
   ============================================================================ */

/* ── Common one-time setup-fee banner ───────────────── */
.setup-banner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl) var(--space-3xl);
    align-items: center;
    justify-content: space-between;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    margin-bottom: var(--space-3xl);
    box-shadow: 0 10px 30px -14px rgba(3, 3, 6, 0.18);
}
.setup-banner__headline { flex: 1 1 320px; }
.setup-banner__statement {
    margin: 0;
    font-size: var(--text-4xl);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.setup-banner__amount {
    margin: var(--space-sm) 0 var(--space-md);
    font-size: var(--text-6xl);
    font-weight: 900;
    line-height: 1;
    color: var(--color-primary);
}
/* Struck-through original setup fee, shown before the big discounted amount when the API
   discounts the setup fee. Sized down relative to the amount and muted. */
.setup-banner__was {
    font-size: 0.4em;
    font-weight: 700;
    color: var(--color-text-muted);
    text-decoration: line-through;
    vertical-align: middle;
    margin-right: 0.3em;
    white-space: nowrap;
}
.setup-banner__amount-note {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;   /* keep "+ 30% revenue share" on one line, never split after "+ 30%" */
}
.setup-banner__sub {
    margin: 0;
    max-width: 36ch;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-secondary);
}
.setup-banner__features { flex: 1 1 360px; }
.setup-banner__label {
    margin: 0 0 var(--space-md);
    font-weight: 700;
    font-size: var(--text-sm);
}

/* ── Gamification package cards ──────────────────────── */
/* Neutral grey hairline around every package card; the
   "Most Popular" card overrides this with an orange 2px
   border + white fill + shadow via its inline style. */
.features__grid--four-col .card--feature {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.pkg-eyebrow {
    margin: 0 0 var(--space-md);
    font-size: var(--text-sm);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.features__grid--four-col .card--feature .card__title.plan-name {
    font-size: var(--text-4xl);
    font-weight: 900;
    line-height: 1.1;
    /* Reserve two lines and clamp longer names, so every card's title block is the same
       height and the CTA buttons line up across the row. Campaign display names come from the
       API art bundle and vary from one word ("Edge") to several ("Default campaign for Mexico
       visitors"); without this the taller titles pushed their card's button down. */
    min-height: 2.2em;              /* 2 lines @ line-height 1.1 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.plan-month-price {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 900;
    line-height: 1.1;
}
.plan-month-price .per {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}
.plan-month-price.plan-free { color: var(--color-primary); }
/* Current price sits on row 1; the struck original drops to its own row 2,
   with a savings pill to its right. */
.plan-now { display: block; }
.plan-was {
    display: block;
    margin-top: 4px;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-muted);
}
.plan-was-amt { text-decoration: line-through; }
/* Savings pill — soft green, to the right of the struck price (not struck). */
.plan-save-pill {
    display: inline-block;
    margin-left: 0.55em;
    padding: 0.14em 0.62em;
    border-radius: var(--radius-full);
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
}
/* Invisible placeholder — reserves row 2 on non-discounted cards so the price
   block is always two rows tall and every card's CTA lines up. */
.plan-was--empty { text-decoration: none; }

/* Additive price parts under the gamification price: setup fee + revenue share.
   Text line-items — they are NOT summed into the headline monthly figure. */
.plan-price-block { width: 100%; }
.plan-price-parts {
    list-style: none;
    margin: var(--space-sm) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}
.plan-price-parts li { line-height: 1.4; }
.ppart-plus { color: var(--color-text-muted); font-weight: 700; margin-right: 0.15em; }
.ppart-note { color: var(--color-text-muted); font-weight: 500; }
/* Keep each additive phrase intact — it wraps as a whole unit to the next line rather than
   splitting mid-phrase (e.g. "30% revenue share" breaking after "30%") on narrow cards. */
.plan-price-parts .ppart-nb { white-space: nowrap; }
/* Struck-through original setup fee shown before the discounted one (line-through comes
   from .plan-was-amt); muted so the current price stays dominant. */
.ppart-was { color: var(--color-text-muted); font-weight: 500; }
.pricing-footnote {
    margin: var(--space-xl) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.plan-inc-block { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; }
/* CTA moved above the feature list — pack the body from the top instead of pinning the button to the bottom */
#pricing .features__grid--four-col .card--feature .card__body { justify-content: flex-start; }
#pricing .features__grid--four-col .card--feature .card__body .btn { margin-top: 0; }
.plan-includes {
    margin: 0;
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--color-text);
}
.plan-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.plan-features.setup-banner__list {
    display: block;
    columns: 13rem 2;
    column-gap: var(--space-xl);
}
.plan-features.setup-banner__list li { break-inside: avoid; margin-bottom: var(--space-sm); }
.plan-features li {
    position: relative;
    padding-left: 1.4rem;
    font-size: var(--text-sm);
    line-height: 1.45;
}
.plan-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-weight: 900;
}
.plan-features a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
.plan-features a:hover { color: var(--color-primary); }
/* Tier shown as: <feature> • <tier>, tier tinted by level */
.plan-badge {
    font-weight: 600;
}
.plan-badge::before {
    content: "\2022";
    margin: 0 0.4em 0 0.15em;
    color: var(--color-text-muted);
    font-weight: 400;
}
.plan-badge--plus  { color: var(--color-text-muted); }
.plan-badge--pro   { color: var(--color-secondary); }
.plan-badge--ultra { color: var(--color-primary); }

/* Secondary plan buttons — match the home hero "Learn more" (dark glass), even in this light section */
.special-features .card__body .btn--secondary {
    background: rgba(3, 3, 6, 0.9);
    color: #d0d0e1 !important;
    border: 2px solid #3d3d5c;
}
.special-features .card__body .btn--secondary:hover {
    background: #272727;
    border-color: #4d4d6d;
    color: #ffffff !important;
}

/* Basic's gamification ships free with the platform, so its card CTA reads "Included"
   and is rendered as a ghost button — transparent, de-emphasized — but stays clickable
   (forwards to the app with cid=basic, like the setup-banner CTA). */
.special-features .card__body .plan-cta--included {
    background: transparent;
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border);
}
.special-features .card__body .plan-cta--included:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
}
.special-features .card__body .plan-cta--included::before {
    content: "\2713";
    color: var(--color-primary);
    font-weight: 900;
}

/* ── CTA button alignment ─────────────────────────────
   Reserve equal height for the description (2–3 lines) so that, combined with
   the always-two-row price above, every card's CTA button lands on the same
   baseline across the row. */
#pricing .features__grid--four-col .card--feature .card__description {
    min-height: 5.1em; /* ~3 lines at the card's line-height */
}

/* ── "Start without gamification" CTA in the setup banner ─────────────────────
   Matches the dark-glass secondary buttons used on the package cards. */
.setup-banner__cta {
    display: inline-flex;
    align-self: flex-start;
    margin-top: var(--space-lg);
    width: auto;
}
.setup-banner__cta.btn--secondary {
    background: rgba(3, 3, 6, 0.9);
    color: #d0d0e1 !important;
    border: 2px solid #3d3d5c;
}
.setup-banner__cta.btn--secondary:hover {
    background: #272727;
    border-color: #4d4d6d;
    color: #ffffff !important;
}

/* ── "Optional add-ons" divider — separates the required base platform (setup
   banner) from the optional gamification packages below. */
.pricing-optional-divider {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin: var(--space-3xl) 0 var(--space-2xl);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.pricing-optional-divider::before,
.pricing-optional-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-border);
}

/* Relocated lead — full width, at the bottom of the section after the * fineprint. */
.pricing-outro {
    margin: var(--space-md) 0 0;
    max-width: none;
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text-secondary);
}