/* pricing-ui2.css — Pricing page UI2 layer. * * Loaded only on the pricing page (in after ui2-tokens + * ui2-components). All selectors scoped under body.ui2 so this is * inert when the page isn't on UI2. * * Plan card layout follows the mockup's PricingGrid: 4-column horizontal * grid where the featured (Standard) tier flips background to ink and * carries the recommended ribbon. Billing toggles + comparison table * + FAQ all use the shared ui2-* primitives plus per-section overrides * here. */ body.ui2.site-pricing { background: radial-gradient(circle at 12% 0, rgba(232, 89, 12, 0.08), transparent 30%), linear-gradient(180deg, #fbf8f2 0%, #f4efe6 44%, #f1e9dc 100%); } /* ─── Top nav (matches existing prod nav so we don't break auth UI) ─ */ body.ui2 nav.ui2-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; backdrop-filter: blur(20px); background: rgba(250, 246, 240, 0.92); border-bottom: 1px solid var(--ui2-rule); } body.ui2 nav.ui2-nav .ui2-logo { font-family: var(--ui2-logo-font-family); font-size: var(--ui2-logo-font-size); font-weight: var(--ui2-logo-font-weight); letter-spacing: var(--ui2-logo-letter-spacing); color: var(--ui2-ink); } body.ui2 nav.ui2-nav .ui2-logo span { color: var(--ui2-logo-accent); } body.ui2 nav.ui2-nav ul { display: flex; gap: 28px; list-style: none; font-size: 13px; margin: 0; padding: 0; } body.ui2 nav.ui2-nav ul a { color: var(--ui2-ink-3); transition: color 0.15s; } body.ui2 nav.ui2-nav ul a:hover { color: var(--ui2-amber-600); } body.ui2 nav.ui2-nav ul .active { color: var(--ui2-amber-600); } body.ui2 nav.ui2-nav .nav-actions { display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity 0.18s ease; } body.ui2 nav.ui2-nav .nav-actions.ready { opacity: 1; } body.ui2 nav.ui2-nav .nav-signin { color: var(--ui2-ink-3); font-size: .85rem; font-weight: 500; padding: .5rem .8rem; border-radius: 6px; } body.ui2 nav.ui2-nav .nav-signin:hover { color: var(--ui2-amber-600); } body.ui2 nav.ui2-nav .nav-cta { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--ui2-ink); color: var(--ui2-cream); padding: .5rem 1.2rem; border: 1px solid var(--ui2-ink); border-radius: 999px; font-weight: 600; font-size: .85rem; line-height: 1.1; white-space: nowrap; transition: transform 0.15s, background 0.18s; } body.ui2 nav.ui2-nav .nav-cta:hover { transform: translateY(-1px); background: var(--ui2-amber-500); } body.ui2 nav.ui2-nav .nav-user { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; border: 1px solid var(--ui2-rule); background: rgba(255, 255, 255, 0.58); color: var(--ui2-ink); font-size: 13px; text-decoration: none; } body.ui2 nav.ui2-nav .nav-user:hover { border-color: var(--ui2-amber-500); background: var(--ui2-amber-50); } body.ui2 nav.ui2-nav .nav-user img, body.ui2 nav.ui2-nav .nav-user-initial { width: 28px; height: 28px; border-radius: 50%; background: var(--ui2-amber-500); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; object-fit: cover; } /* ─── Page header ─────────────────────────────────────────── */ body.ui2 .pricing-header { padding: 128px 32px 64px; text-align: center; } body.ui2 .pricing-header h1 { font-family: var(--ui2-font-serif); font-weight: 400; font-size: clamp(44px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ui2-ink); max-width: 880px; margin: 18px auto 0; } body.ui2 .pricing-header .em { font-style: italic; color: var(--ui2-amber-600); } body.ui2 .pricing-header .lede { color: var(--ui2-ink-3); font-size: 18px; line-height: 1.55; max-width: 640px; margin: 24px auto 0; } body.ui2 .pricing-header .recommend-strip { margin-top: 32px; font-size: 14px; color: var(--ui2-ink-3); line-height: 1.7; } body.ui2 .pricing-header .recommend-strip strong { color: var(--ui2-ink); } /* ─── Plans grid ──────────────────────────────────────────── */ body.ui2 .plans { padding: 32px 32px 96px; max-width: 1340px; margin: 0 auto; } body.ui2 .plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--ui2-rule); border-radius: 12px; overflow: hidden; background: white; } body.ui2 .plan { padding: 32px; border-left: 1px solid var(--ui2-rule); background: white; color: var(--ui2-ink); display: flex; flex-direction: column; gap: 18px; position: relative; transition: background 0.18s; } body.ui2 .plan:first-child { border-left: none; } body.ui2 .plan.featured { background: var(--ui2-ink); color: var(--ui2-cream); } body.ui2 .plan.featured::before { content: "RECOMMENDED"; position: absolute; top: 16px; right: 16px; font-family: var(--ui2-font-mono); font-size: 9px; background: var(--ui2-amber-500); color: white; padding: 4px 9px; border-radius: 3px; letter-spacing: 0.12em; } body.ui2 .plan-name { font-family: var(--ui2-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui2-ink-4); } body.ui2 .plan.featured .plan-name { color: var(--ui2-amber-700); } body.ui2 .plan-name::before { content: "FLARE / "; color: var(--ui2-amber-600); } body.ui2 .plan-title { font-family: var(--ui2-font-serif); font-size: 36px; font-weight: 400; letter-spacing: -0.01em; line-height: 1; color: var(--ui2-ink); margin: 0; } body.ui2 .plan.featured .plan-title { color: var(--ui2-ink); } body.ui2 .plan-price { display: flex; align-items: baseline; gap: 4px; } body.ui2 .plan-price .amount { font-family: var(--ui2-font-serif); font-size: 56px; font-weight: 400; letter-spacing: -0.04em; line-height: 0.9; color: var(--ui2-ink); } body.ui2 .plan.featured .plan-price .amount { color: var(--ui2-ink); } body.ui2 .plan-price .currency { font-size: 22px; color: var(--ui2-ink-3); font-weight: 500; } body.ui2 .plan-price .period { font-size: 14px; color: var(--ui2-ink-4); } body.ui2 .plan-tagline { font-size: 13px; color: var(--ui2-ink-3); line-height: 1.5; margin: 0; min-height: 40px; } body.ui2 .plan.featured .plan-tagline { color: var(--ui2-ink-2); } body.ui2 .plan-tagline strong { color: var(--ui2-ink); } body.ui2 .plan.featured .plan-tagline strong { color: var(--ui2-amber-700); } body.ui2 .plan-highlight { font-family: var(--ui2-font-serif); font-style: italic; font-size: 13px; color: var(--ui2-amber-600); margin: 0; } body.ui2 .plan.featured .plan-highlight { color: var(--ui2-amber-700); } /* Billing options */ body.ui2 .plan-billing-options { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 4px; } body.ui2 .billing-option { display: block; width: 100%; text-align: left; background: var(--ui2-paper); color: var(--ui2-ink); border: 1px solid var(--ui2-rule); border-radius: 6px; padding: 10px 12px; cursor: pointer; font-family: var(--ui2-font-sans); transition: border-color 0.16s, background 0.16s, transform 0.16s; } body.ui2 .plan.featured .billing-option { background: rgba(255, 255, 255, 0.6); color: var(--ui2-ink); border-color: var(--ui2-rule); } body.ui2 .billing-option:hover { transform: translateY(-1px); border-color: var(--ui2-amber-500); } body.ui2 .billing-option.is-selected { border-color: var(--ui2-amber-500); background: var(--ui2-amber-50); box-shadow: 0 0 0 1px var(--ui2-amber-200); } body.ui2 .plan.featured .billing-option.is-selected { background: rgba(232, 89, 12, 0.18); border-color: var(--ui2-amber-500); box-shadow: 0 0 0 1px var(--ui2-amber-500); } body.ui2 .billing-option-label { display: block; font-family: var(--ui2-font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui2-ink-4); margin-bottom: 4px; } body.ui2 .plan.featured .billing-option-label { color: var(--ui2-amber-700); } body.ui2 .billing-option strong { display: block; font-size: 14px; line-height: 1.25; color: var(--ui2-ink); } body.ui2 .plan.featured .billing-option strong { color: var(--ui2-ink); } body.ui2 .billing-option-note { display: block; font-size: 12px; color: var(--ui2-ink-3); margin-top: 2px; } body.ui2 .plan.featured .billing-option-note { color: var(--ui2-ink-3); } /* Plan CTA */ body.ui2 .plan-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 12px 16px; border-radius: 6px; font-family: var(--ui2-font-sans); font-weight: 500; font-size: 14px; cursor: pointer; border: none; text-decoration: none; transition: transform 0.15s, background 0.18s, color 0.18s; } body.ui2 .plan-cta-primary { background: var(--ui2-amber-500); color: white; } body.ui2 .plan-cta-primary:hover { transform: translateY(-1px); background: var(--ui2-amber-600); } body.ui2 .plan-cta-secondary { background: var(--ui2-ink); color: var(--ui2-cream); } body.ui2 .plan-cta-secondary:hover { background: var(--ui2-amber-500); color: white; } body.ui2 .plan.featured .plan-cta-secondary { background: var(--ui2-amber-500); color: white; } body.ui2 .plan.featured .plan-cta-secondary:hover { background: var(--ui2-amber-600); } /* Free CTA: shrink-to-fit + horizontally centered. Free is the only card without a billing toggle (paid cards have `data-plan-cta` on their CTA so the billing-toggle script can find them — Free does not). Removing the placeholder above made the CTA sit at its natural flow position; this rule prevents it from stretching to the card's full width so it reads as a deliberate centered button instead of a banner. */ body.ui2 .plan-cta.plan-cta-secondary:not([data-plan-cta]) { width: auto; align-self: center; padding-left: 36px; padding-right: 36px; } /* Plan features */ body.ui2 .plan-features { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--ui2-rule); display: flex; flex-direction: column; gap: 8px; flex: 1; } body.ui2 .plan.featured .plan-features { border-top-color: var(--ui2-rule); } body.ui2 .plan-section-label { font-family: var(--ui2-font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ui2-ink-4); margin: 8px 0 4px; } body.ui2 .plan-section-label:first-of-type { margin-top: 0; } body.ui2 .plan.featured .plan-section-label { color: var(--ui2-amber-700); } body.ui2 .feat { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ui2-ink-2); line-height: 1.45; } body.ui2 .plan.featured .feat { color: var(--ui2-ink-2); } body.ui2 .feat .check { color: var(--ui2-amber-500); font-weight: 700; flex-shrink: 0; margin-top: 1px; } body.ui2 .feat.muted { color: var(--ui2-ink-4); } body.ui2 .feat.muted .check { color: var(--ui2-ink-5); } /* ─── Compare table ──────────────────────────────────────── */ body.ui2 .compare { padding: 32px 32px 96px; max-width: 1240px; margin: 0 auto; } body.ui2 .compare h2 { font-family: var(--ui2-font-serif); font-weight: 400; font-size: clamp(32px, 4vw, 44px); letter-spacing: -0.02em; text-align: left; margin: 0 0 32px; color: var(--ui2-ink); } body.ui2 .compare-table { width: 100%; border-collapse: collapse; background: white; border: 1px solid var(--ui2-rule); border-radius: 8px; overflow: hidden; font-size: 14px; } body.ui2 .compare-table th, body.ui2 .compare-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--ui2-rule); border-left: 1px solid var(--ui2-rule); } body.ui2 .compare-table th:first-child, body.ui2 .compare-table td:first-child { border-left: none; } body.ui2 .compare-table thead th { background: var(--ui2-paper); color: var(--ui2-ink-4); font-family: var(--ui2-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } body.ui2 .compare-table td.feat-name { color: var(--ui2-ink); font-weight: 500; } body.ui2 .compare-table td.cell { text-align: center; font-family: var(--ui2-font-mono); font-size: 13px; color: var(--ui2-ink-3); } body.ui2 .compare-table td.cell.yes { color: var(--ui2-amber-700); } body.ui2 .compare-table tr:last-child td { border-bottom: none; } body.ui2 .compare-table th.col-feature { width: 36%; } /* Featured-column tint */ body.ui2 .compare-table th:nth-child(4), body.ui2 .compare-table td:nth-child(4) { background: var(--ui2-amber-50); color: var(--ui2-amber-700); } body.ui2 .compare-table thead th:nth-child(4) { background: var(--ui2-amber-100); color: var(--ui2-amber-700); } /* ─── FAQ ─────────────────────────────────────────────────── */ body.ui2 .faq-section { padding: 32px 32px 96px; max-width: 880px; margin: 0 auto; } body.ui2 .faq-section h2 { font-family: var(--ui2-font-serif); font-weight: 400; font-size: clamp(32px, 4vw, 44px); letter-spacing: -0.02em; text-align: left; margin: 0 0 32px; color: var(--ui2-ink); } body.ui2 details.ui2-faq summary h3 { display: inline; margin: 0; font-family: var(--ui2-font-serif); font-weight: 400; font-size: 22px; color: var(--ui2-ink); } /* ─── Final CTA + Footer ─────────────────────────────────── */ body.ui2 .final-cta { padding: 96px 32px 128px; text-align: center; } body.ui2 .final-cta h2 { font-family: var(--ui2-font-serif); font-weight: 400; font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.02em; margin-bottom: 16px; color: var(--ui2-ink); } body.ui2 .final-cta p { color: var(--ui2-ink-3); max-width: 560px; margin: 0 auto 32px; font-size: 16px; } body.ui2 .final-cta .btn-primary { background: var(--ui2-ink); color: var(--ui2-cream); padding: 14px 32px; border-radius: 999px; font-weight: 500; font-size: 15px; display: inline-flex; align-items: center; text-decoration: none; transition: transform 0.18s, background 0.18s; } body.ui2 .final-cta .btn-primary:hover { transform: translateY(-2px); background: var(--ui2-amber-500); } body.ui2 .final-cta .btn-secondary { background: transparent; color: var(--ui2-ink); padding: 14px 32px; border-radius: 999px; font-weight: 500; font-size: 15px; border: 1px solid var(--ui2-rule); display: inline-flex; align-items: center; text-decoration: none; transition: border-color 0.18s, color 0.18s; } body.ui2 .final-cta .btn-secondary:hover { border-color: var(--ui2-amber-500); color: var(--ui2-amber-600); } body.ui2 footer.ui2-footer { padding: 48px 32px; border-top: 1px solid var(--ui2-rule); } body.ui2 .footer-inner { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } body.ui2 .footer-brand { font-family: var(--ui2-font-serif); font-size: 18px; letter-spacing: -0.02em; color: var(--ui2-ink); } body.ui2 .footer-brand span { color: var(--ui2-amber-500); } body.ui2 .footer-links { display: flex; gap: 24px; font-size: 13px; color: var(--ui2-ink-3); } body.ui2 .footer-links a:hover { color: var(--ui2-amber-600); } body.ui2 .footer-copy { font-size: 12px; color: var(--ui2-ink-4); width: 100%; margin-top: 8px; } /* ─── Responsive ──────────────────────────────────────────── */ @media (max-width: 1100px) { body.ui2 .plans-grid { grid-template-columns: repeat(2, 1fr); } body.ui2 .plan { border-left: none; border-top: 1px solid var(--ui2-rule); } body.ui2 .plan:nth-child(1), body.ui2 .plan:nth-child(2) { border-top: none; } body.ui2 .plan:nth-child(2n) { border-left: 1px solid var(--ui2-rule); } } @media (max-width: 768px) { body.ui2 nav.ui2-nav { padding: 12px 16px; } body.ui2 nav.ui2-nav ul { display: none; } body.ui2 nav.ui2-nav .nav-signin { display: none; } body.ui2 .pricing-header { padding: 96px 20px 48px; } body.ui2 .plans { padding: 24px 20px 64px; } body.ui2 .plans-grid { grid-template-columns: 1fr; } body.ui2 .plan { border-left: none; border-top: 1px solid var(--ui2-rule); } body.ui2 .plan:first-child { border-top: none; } body.ui2 .plan.featured { order: -1; } body.ui2 .compare, body.ui2 .faq-section, body.ui2 .final-cta { padding-left: 20px; padding-right: 20px; } body.ui2 .compare-table th, body.ui2 .compare-table td { padding: 10px 10px; font-size: 12px; } body.ui2 .footer-inner { flex-direction: column; text-align: center; } } /* Quality preview layer: glass, depth, and tactile motion for pricing only. */ body.ui2.site-pricing { --pricing-glass: rgba(255, 252, 246, 0.68); --pricing-glass-line: rgba(255, 255, 255, 0.72); --pricing-green: #28724f; --pricing-glow: 0 20px 70px rgba(232, 89, 12, 0.16), 0 14px 44px rgba(26, 22, 20, 0.1); --pricing-glow-strong: 0 28px 90px rgba(232, 89, 12, 0.26), 0 18px 54px rgba(26, 22, 20, 0.16); background: radial-gradient(circle at 16% 4%, rgba(232, 89, 12, 0.14), transparent 28%), radial-gradient(circle at 82% 10%, rgba(40, 114, 79, 0.15), transparent 24%), radial-gradient(circle at 50% 54%, rgba(255, 255, 255, 0.82), transparent 28%), linear-gradient(180deg, #fbf8f2 0%, #f4efe6 44%, #efe4d4 100%); overflow-x: hidden; } body.ui2.site-pricing::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.34) 38%, transparent 44%), radial-gradient(circle at 82% 78%, rgba(232, 89, 12, 0.12), transparent 24%); opacity: 0.62; mix-blend-mode: soft-light; animation: pricing-ambient-drift 18s ease-in-out infinite alternate; } @keyframes pricing-ambient-drift { from { transform: translate3d(-1.2%, -0.8%, 0) scale(1); } to { transform: translate3d(1.2%, 0.8%, 0) scale(1.03); } } @keyframes pricing-soft-rise { from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(8px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes pricing-selected-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(232, 89, 12, 0.28), 0 12px 28px rgba(232, 89, 12, 0.08); } 50% { box-shadow: 0 0 0 1px rgba(232, 89, 12, 0.5), 0 16px 36px rgba(232, 89, 12, 0.16); } } body.ui2.site-pricing nav.ui2-nav { backdrop-filter: blur(22px) saturate(1.28); -webkit-backdrop-filter: blur(22px) saturate(1.28); background: linear-gradient(180deg, rgba(255, 252, 246, 0.86), rgba(250, 246, 240, 0.66)), rgba(255, 255, 255, 0.38); border-bottom-color: rgba(255, 255, 255, 0.72); box-shadow: 0 14px 38px rgba(26, 22, 20, 0.08); } body.ui2.site-pricing nav.ui2-nav .nav-cta, body.ui2.site-pricing .plan-cta, body.ui2.site-pricing .final-cta .btn-primary, body.ui2.site-pricing .final-cta .btn-secondary { position: relative; overflow: hidden; box-shadow: 0 16px 34px rgba(26, 22, 20, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } body.ui2.site-pricing .plan-cta::before, body.ui2.site-pricing .final-cta .btn-primary::before, body.ui2.site-pricing .final-cta .btn-secondary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.24) 42%, transparent 58%); transform: translateX(-120%); transition: transform 0.55s ease; } body.ui2.site-pricing .plan-cta:hover::before, body.ui2.site-pricing .final-cta .btn-primary:hover::before, body.ui2.site-pricing .final-cta .btn-secondary:hover::before { transform: translateX(120%); } body.ui2.site-pricing nav.ui2-nav .nav-cta:hover, body.ui2.site-pricing .plan-cta-secondary:hover, body.ui2.site-pricing .final-cta .btn-primary:hover, body.ui2.site-pricing .final-cta .btn-secondary:hover { transform: translateY(-3px); box-shadow: 0 22px 42px rgba(232, 89, 12, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.24); } body.ui2.site-pricing nav.ui2-nav .nav-cta:active, body.ui2.site-pricing .plan-cta:active, body.ui2.site-pricing .final-cta .btn-primary:active, body.ui2.site-pricing .final-cta .btn-secondary:active { transform: translateY(0) scale(0.985); } body.ui2.site-pricing .pricing-header { animation: pricing-soft-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; } body.ui2.site-pricing .pricing-header .em { background: linear-gradient(100deg, var(--ui2-amber-700), var(--ui2-amber-500) 52%, var(--pricing-green)); -webkit-background-clip: text; background-clip: text; color: transparent; } body.ui2.site-pricing .pricing-header .recommend-strip { max-width: 740px; margin: 32px auto 0; padding: 18px 24px; border: 1px solid var(--pricing-glass-line); border-radius: 24px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(255, 248, 241, 0.56)), rgba(255, 255, 255, 0.58); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 20px 60px rgba(26, 22, 20, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.78); } body.ui2.site-pricing .plans-grid { gap: 18px; border: 0; border-radius: 28px; overflow: visible; background: transparent; perspective: 1200px; } body.ui2.site-pricing .plan { border: 1px solid rgba(255, 255, 255, 0.74); border-radius: 28px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 248, 241, 0.58)), var(--pricing-glass); backdrop-filter: blur(20px) saturate(1.16); -webkit-backdrop-filter: blur(20px) saturate(1.16); box-shadow: 0 16px 42px rgba(26, 22, 20, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82); transform-style: preserve-3d; animation: pricing-soft-rise 0.74s cubic-bezier(0.16, 1, 0.3, 1) both; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; } body.ui2.site-pricing .plan:nth-child(1) { animation-delay: 0.04s; } body.ui2.site-pricing .plan:nth-child(2) { animation-delay: 0.11s; } body.ui2.site-pricing .plan:nth-child(3) { animation-delay: 0.18s; } body.ui2.site-pricing .plan:nth-child(4) { animation-delay: 0.25s; } /* 2026-04-30 spec v2: card-level white sheen on hover removed. The .plan-cta::before shimmer (~669-684) and the body ambient drift (~610-627) are intentionally kept — only the per-card sheen is gone. Hover lift + amber border + glow still fire below. */ body.ui2.site-pricing .plan:hover { transform: translateY(-8px) rotateX(1deg); border-color: rgba(232, 89, 12, 0.32); box-shadow: var(--pricing-glow); } body.ui2.site-pricing .plan.featured { /* 2026-04-30 spec v2: flat 20% amber tile (instead of dark gradient with orange light pop), keep the 28px corner radius cascaded from `.plan`, and let RECOMMENDED ::before badge stay amber-500 — it reads cleanly against the lighter background. `!important` is required because `ui2-quality.css` applies a white-glass `background` + `border-color` to `.plan` with `!important`, which would otherwise blow this rule away. */ background: rgba(232, 89, 12, 0.20) !important; border-color: rgba(232, 89, 12, 0.42) !important; color: var(--ui2-ink); box-shadow: 0 16px 42px rgba(26, 22, 20, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.62); } body.ui2.site-pricing .plan.featured::before { /* `ui2-quality.css` defines `body.ui2 .plan::before { inset: 1px }` which would cascade `bottom: 1px; left: 1px` into this rule (top/right we already set), stretching the RECOMMENDED badge to fill the whole card as a 999px-radius pill. Explicitly reset bottom + left so the badge stays a small top-right pill at the position defined on line 173. */ bottom: auto; left: auto; border-radius: 999px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 45%), var(--ui2-amber-500); box-shadow: 0 10px 28px rgba(232, 89, 12, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.26); } body.ui2.site-pricing .plan-price .amount { transition: transform 0.2s ease, color 0.2s ease; } body.ui2.site-pricing .plan:hover .plan-price .amount { transform: translateY(-2px); } body.ui2.site-pricing .billing-option { border-color: rgba(255, 255, 255, 0.72); border-radius: 16px; padding: 12px 14px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(244, 238, 227, 0.62)), var(--ui2-paper); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 20px rgba(26, 22, 20, 0.05); transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } body.ui2.site-pricing .plan.featured .billing-option { background: linear-gradient(145deg, rgba(250, 246, 240, 0.14), rgba(250, 246, 240, 0.06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 10px 24px rgba(0, 0, 0, 0.12); } body.ui2.site-pricing .billing-option:hover { transform: translateY(-2px); border-color: rgba(232, 89, 12, 0.44); box-shadow: 0 16px 32px rgba(26, 22, 20, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.76); } body.ui2.site-pricing .billing-option:active { transform: translateY(0) scale(0.99); } body.ui2.site-pricing .billing-option.is-selected { background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 233, 210, 0.72)), var(--ui2-amber-50); animation: pricing-selected-pulse 3.4s ease-in-out infinite; } body.ui2.site-pricing .plan.featured .billing-option.is-selected { background: linear-gradient(145deg, rgba(232, 89, 12, 0.28), rgba(232, 89, 12, 0.13)); box-shadow: 0 0 0 1px rgba(232, 89, 12, 0.56), 0 18px 42px rgba(232, 89, 12, 0.2); } body.ui2.site-pricing .plan-cta, body.ui2.site-pricing .final-cta .btn-primary, body.ui2.site-pricing .final-cta .btn-secondary { border-radius: 999px; } body.ui2.site-pricing .feat .check { width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(232, 89, 12, 0.1); color: var(--ui2-amber-600); font-size: 10px; margin-top: 0; } body.ui2.site-pricing .compare-table { background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 248, 241, 0.56)), var(--pricing-glass); border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 24px; box-shadow: 0 20px 56px rgba(26, 22, 20, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } body.ui2.site-pricing .compare-table tbody tr { transition: background 0.16s ease; } body.ui2.site-pricing .compare-table tbody tr:hover { background: rgba(255, 255, 255, 0.38); } body.ui2.site-pricing .compare-table tbody tr:hover td.feat-name { color: var(--ui2-amber-700); } body.ui2.site-pricing details.ui2-faq { margin-bottom: 12px; padding: 20px 22px; border: 1px solid rgba(255, 255, 255, 0.68); border-radius: 22px; background: rgba(255, 255, 255, 0.52); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 14px 38px rgba(26, 22, 20, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.74); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } body.ui2.site-pricing details.ui2-faq:hover, body.ui2.site-pricing details.ui2-faq[open] { transform: translateY(-2px); border-color: rgba(232, 89, 12, 0.24); box-shadow: 0 18px 48px rgba(26, 22, 20, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.78); } body.ui2.site-pricing .final-cta { max-width: 920px; margin: 0 auto 96px; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 36px; background: radial-gradient(circle at 18% 0, rgba(232, 89, 12, 0.16), transparent 34%), radial-gradient(circle at 84% 20%, rgba(40, 114, 79, 0.14), transparent 32%), rgba(255, 255, 255, 0.56); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: var(--pricing-glow); } body.ui2.site-pricing .final-cta .btn-secondary { background: rgba(255, 255, 255, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } body.ui2.site-pricing footer.ui2-footer { background: rgba(255, 255, 255, 0.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } @media (max-width: 1100px) { body.ui2.site-pricing .plans-grid { gap: 16px; } } @media (max-width: 768px) { body.ui2.site-pricing .plans-grid { gap: 14px; } body.ui2.site-pricing .plan { border-left: 1px solid rgba(255, 255, 255, 0.74); border-top: 1px solid rgba(255, 255, 255, 0.74); } body.ui2.site-pricing .final-cta { margin-left: 20px; margin-right: 20px; padding-top: 72px; padding-bottom: 72px; } } @media (prefers-reduced-motion: reduce) { body.ui2.site-pricing::after, body.ui2.site-pricing .plan, body.ui2.site-pricing .pricing-header, body.ui2.site-pricing .billing-option.is-selected { animation: none !important; } body.ui2.site-pricing .plan, body.ui2.site-pricing .billing-option, body.ui2.site-pricing .plan-cta, body.ui2.site-pricing details.ui2-faq, body.ui2.site-pricing .final-cta .btn-primary, body.ui2.site-pricing .final-cta .btn-secondary { transition: none !important; } } /* ─── UI3 refresh override for pricing ────────────────────── */ body.ui2.site-pricing { --pricing-glass: #ffffff; --pricing-glass-line: var(--ui2-rule); --pricing-green: var(--ui2-amber-600); --pricing-glow: var(--ui2-shadow-md); --pricing-glow-strong: var(--ui2-shadow-lg); background: radial-gradient(circle at 12% 0%, rgba(49, 95, 69, 0.08), transparent 26%), radial-gradient(circle at 88% 12%, rgba(16, 17, 15, 0.04), transparent 22%), #ffffff; } body.ui2.site-pricing::after { display: none; } body.ui2.site-pricing nav.ui2-nav { background: rgba(255, 255, 255, 0.9); border-bottom-color: var(--ui2-rule); box-shadow: 0 1px 0 rgba(16, 17, 15, 0.03); } body.ui2.site-pricing .pricing-header h1, body.ui2.site-pricing .compare h2, body.ui2.site-pricing .faq-section h2, body.ui2.site-pricing .final-cta h2, body.ui2.site-pricing .plan-title, body.ui2.site-pricing .plan-price .amount { font-family: var(--ui2-font-sans); font-weight: 800; letter-spacing: -0.05em; } body.ui2.site-pricing .pricing-header .em { color: var(--ui2-amber-600); background: none; -webkit-background-clip: border-box; background-clip: border-box; } body.ui2.site-pricing .plans-grid { gap: 14px; } body.ui2.site-pricing .plan, body.ui2.site-pricing .compare-table, body.ui2.site-pricing details.ui2-faq, body.ui2.site-pricing .final-cta { background: #ffffff !important; border: 1px solid var(--ui2-rule) !important; border-radius: 28px; box-shadow: var(--ui2-shadow-sm); backdrop-filter: none; -webkit-backdrop-filter: none; } body.ui2.site-pricing .plan:hover { transform: translateY(-4px); border-color: var(--ui2-ink) !important; box-shadow: var(--ui2-shadow-md); } body.ui2.site-pricing .plan.featured { background: var(--ui2-ink) !important; border-color: var(--ui2-ink) !important; color: #ffffff; } body.ui2.site-pricing .plan.featured::before { display: none; } body.ui2.site-pricing .plan.featured .plan-title, body.ui2.site-pricing .plan.featured .plan-price .amount, body.ui2.site-pricing .plan.featured .feat, body.ui2.site-pricing .plan.featured .plan-section-label, body.ui2.site-pricing .plan.featured .plan-tagline, body.ui2.site-pricing .plan.featured .plan-highlight { color: #ffffff; } body.ui2.site-pricing .plan.featured .plan-tagline, body.ui2.site-pricing .plan.featured .plan-highlight, body.ui2.site-pricing .plan.featured .feat.muted { color: rgba(255, 255, 255, 0.72); } body.ui2.site-pricing .plan.featured .plan-tagline strong, body.ui2.site-pricing .plan.featured .plan-highlight strong { color: #ffffff; } body.ui2.site-pricing .plan-cta, body.ui2.site-pricing .final-cta .btn-primary, body.ui2.site-pricing .final-cta .btn-secondary { box-shadow: var(--ui2-shadow-sm); } body.ui2.site-pricing .plan-cta::before, body.ui2.site-pricing .final-cta .btn-primary::before, body.ui2.site-pricing .final-cta .btn-secondary::before { display: none; } body.ui2.site-pricing .billing-option, body.ui2.site-pricing .billing-option.is-selected, body.ui2.site-pricing .plan.featured .billing-option, body.ui2.site-pricing .plan.featured .billing-option.is-selected { background: #ffffff; border-color: var(--ui2-rule); border-radius: 999px; animation: none; box-shadow: none; } body.ui2.site-pricing .plan.featured .billing-option { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.72); } body.ui2.site-pricing .plan.featured .billing-option *, body.ui2.site-pricing .plan.featured .billing-option-label, body.ui2.site-pricing .plan.featured .billing-option-price, body.ui2.site-pricing .plan.featured .billing-option-note { color: inherit; } body.ui2.site-pricing .plan.featured .billing-option.is-selected { background: #ffffff; border-color: #ffffff; color: var(--ui2-ink); } body.ui2.site-pricing .plan.featured .plan-cta { background: #ffffff !important; border-color: #ffffff !important; color: var(--ui2-ink) !important; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24); } body.ui2.site-pricing .plan.featured .plan-cta:hover { background: var(--ui2-paper) !important; border-color: var(--ui2-paper) !important; }