/* pricing_v2.css — premium warm-cream chrome for /pricing section (2026-05-26).
 *
 * /pricing is a 301 redirect to /#pricing on the public landing page
 * (LANDING_HTML / templates/landing_html.html). This stylesheet layers
 * onto the #pricing <section> there. Scoped to body.koo-pricing so it
 * only affects landing-page chrome (apex + app subdomains).
 *
 * Treatment:
 *   • Pricing section bg → flat warm cream (drop any alt tint).
 *   • Section h2 stays italic Fraunces (already in landing), color tuned.
 *   • Tier cards → warm cream surface + dual hairline lift (drop the
 *     glassy white-on-cream + heavy shadow); per-tier scale on hover only.
 *   • Tier name → italic Fraunces; price → tabular-nums, large, ink.
 *   • Tier CTA → ink-on-cream "Get started" button (drop coral gradient).
 *   • Feature checklist: small-caps eyebrow color for muted text.
 *   • Trial chip and "Flat price forever" callout → cream sub-card with
 *     hairline (drop the loud warm-orange gradient).
 *
 * No mascot kill needed (landing nav already manages its own brand mark).
 */

body.koo-pricing #pricing {
    background: var(--koo-cream, #FBEFD8) !important;
    background-image: none !important;
}

/* ============================================================
   SECTION HEAD
   ============================================================ */
body.koo-pricing #pricing .l-section-eyebrow {
    color: var(--koo-muted, #9A8567) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.koo-pricing #pricing .l-section-h2 {
    color: var(--koo-cocoa, #2A1F16) !important;
    font-family: var(--koo-font-display, "Fraunces", serif) !important;
    font-style: italic !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}
body.koo-pricing #pricing .l-section-h2 em {
    font-style: italic !important;
    color: var(--koo-cocoa, #2A1F16) !important;
}
body.koo-pricing #pricing .l-section-lede {
    color: var(--koo-text-soft, #574838) !important;
}

/* Trial chip → cream sub-card with hairline */
body.koo-pricing #pricing .l-section-head > div[style*="border-radius: 999px"] {
    background: var(--koo-cream-card, #FFFAEC) !important;
    background-image: none !important;
    border: 1px solid var(--koo-line, #E8D6B5) !important;
    color: var(--koo-cocoa, #2A1F16) !important;
    box-shadow: 0 1px 0 rgba(75, 46, 31, 0.04) !important;
}

/* ============================================================
   TIER CARDS — warm cream surface + dual hairline lift
   ============================================================ */
body.koo-pricing #pricing .l-tier {
    background: var(--koo-cream-card, #FFFAEC) !important;
    background-image: none !important;
    border: 1px solid var(--koo-line, #E8D6B5) !important;
    border-radius: var(--koo-r-card, 12px) !important;
    box-shadow:
        0 1px 0 rgba(75, 46, 31, 0.04),
        0 2px 8px -2px rgba(75, 46, 31, 0.08) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}
body.koo-pricing #pricing .l-tier:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(75, 46, 31, 0.04),
        0 12px 26px -4px rgba(75, 46, 31, 0.14) !important;
}
body.koo-pricing #pricing .l-tier-popular {
    border-color: var(--koo-coral-cta, #B14817) !important;
}

/* "For DIY hosts" badge → coral count-chip pattern (white on coral) */
body.koo-pricing #pricing .l-tier-badge {
    background: var(--koo-coral-cta, #B14817) !important;
    background-image: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 1px 0 rgba(177, 72, 23, 0.25) !important;
}

body.koo-pricing #pricing .l-tier-name {
    font-family: var(--koo-font-display, "Fraunces", serif) !important;
    font-style: italic !important;
    font-weight: 600 !important;
    color: var(--koo-cocoa, #2A1F16) !important;
    letter-spacing: -0.01em !important;
}
body.koo-pricing #pricing .l-tier-price {
    color: var(--koo-cocoa, #2A1F16) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.02em !important;
    font-weight: 700 !important;
}
body.koo-pricing #pricing .l-tier-price span {
    color: var(--koo-muted, #9A8567) !important;
    font-weight: 600 !important;
}
body.koo-pricing #pricing .l-tier-tag {
    color: var(--koo-muted, #9A8567) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
}

body.koo-pricing #pricing .l-tier-feats {
    color: var(--koo-text-soft, #574838) !important;
}
body.koo-pricing #pricing .l-tier-feats li {
    color: var(--koo-text-soft, #574838) !important;
}
body.koo-pricing #pricing .l-tier-feats b {
    color: var(--koo-cocoa, #2A1F16) !important;
}

/* ============================================================
   TIER CTA — ink-on-cream (drop coral gradient + glow)
   ============================================================ */
body.koo-pricing #pricing .l-tier-cta {
    background: var(--koo-cocoa, #2A1F16) !important;
    background-image: none !important;
    color: var(--koo-cream-card, #FFFAEC) !important;
    border: 0 !important;
    border-radius: var(--koo-r-inner, 8px) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
    transition: background 0.12s ease !important;
}
body.koo-pricing #pricing .l-tier-cta:hover {
    background: #000 !important;
}

/* ============================================================
   "FLAT PRICE FOREVER" CALLOUT → cream sub-card with hairline
   ============================================================ */
body.koo-pricing #pricing .l-section-inner > div[style*="border-radius: 18px"] {
    background: var(--koo-cream-card, #FFFAEC) !important;
    background-image: none !important;
    border: 1px solid var(--koo-line, #E8D6B5) !important;
    box-shadow:
        0 1px 0 rgba(75, 46, 31, 0.04),
        0 2px 8px -2px rgba(75, 46, 31, 0.08) !important;
}
body.koo-pricing #pricing .l-section-inner > div[style*="border-radius: 18px"] h3 {
    color: var(--koo-cocoa, #2A1F16) !important;
    font-family: var(--koo-font-display, "Fraunces", serif) !important;
    font-style: italic !important;
    font-weight: 600 !important;
}
body.koo-pricing #pricing .l-section-inner > div[style*="border-radius: 18px"] h3 em {
    font-style: italic !important;
    color: var(--koo-cocoa, #2A1F16) !important;
}
body.koo-pricing #pricing .l-section-inner > div[style*="border-radius: 18px"] p {
    color: var(--koo-text-soft, #574838) !important;
}

body.koo-pricing #pricing .l-pricing-foot {
    color: var(--koo-muted, #9A8567) !important;
}

/* ============================================================
   Also retire .koo-page-hero on landing if injected
   ============================================================ */
body.koo-pricing .koo-page-hero {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
body.koo-pricing .koo-page-hero .mascot { display: none !important; }

/* ============================================================
   Reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    body.koo-pricing #pricing .l-tier,
    body.koo-pricing #pricing .l-tier-cta {
        transition: none !important;
    }
}