/* Site-specific additions on top of lumen.css (ported BotLumen-Preview design).
   lumen.css resets most backgrounds with !important, so rules that need a
   background are prefixed with #app and use !important as well. */

/* header */
#app .main-nav a[aria-current="page"]{color:var(--text)!important}
.header-actions .hide-sm{display:inline}
@media (max-width:760px){.header-actions .hide-sm{display:none}}
@media (max-width:760px){#app .main-nav .mobile-client{display:block}}
@media (max-width:760px){#app .main-nav.open{background-color:var(--bg)!important;z-index:30}}

/* alerts */
.site-alert{margin:18px 0 0;padding:12px 16px;border:1px solid var(--line2)!important;border-radius:12px;font-size:14px;color:var(--text)}
.site-alert.ok{border-color:rgba(139,92,255,.45)!important;color:#e2d6ff}
.site-alert.err{border-color:rgba(255,107,107,.45)!important;color:#ffc9c9}

/* pricing: product selector */
.product-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 28px}
#app .product-tab{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px 20px;border:1px solid var(--line2)!important;border-radius:18px;background-color:var(--surface)!important;transition:border-color .25s ease}
#app .product-tab:hover{border-color:rgba(182,156,255,.55)!important}
#app .product-tab.active{border-color:rgba(139,92,255,.85)!important;box-shadow:0 0 50px -24px var(--vglow)!important}
#app .product-tab.is-bundle{background-image:radial-gradient(360px 160px at 100% 0%,rgba(139,92,255,.22),transparent 70%)!important}
.product-tab strong{font-size:19px;font-weight:500}
.product-tab small{font-size:12.5px;color:var(--muted)!important}
#app .product-tab em{position:absolute;top:14px;right:14px;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--v2)!important;padding:2px 9px;border:1px solid rgba(139,92,255,.45)!important;border-radius:999px}
#app .product-tab em.soon{color:var(--dim)!important;border-color:var(--line2)!important}
.product-panel[hidden]{display:none!important}
.bundle-callout{margin:0 0 20px}
#app .bundle-callout>div{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;border:1px solid rgba(139,92,255,.45)!important;border-radius:16px;background-color:rgba(139,92,255,.08)!important;font-size:14px;color:#d8d0ee}
#app .bundle-callout.subtle>div{border-color:var(--line2)!important;background-color:transparent!important;color:var(--muted)}
.bundle-callout svg{width:18px;height:18px;margin-top:2px;color:var(--v2)}
.bundle-callout a{color:var(--v2);text-decoration:underline;text-underline-offset:3px}
#app .plan.plan-bundle{border-color:rgba(139,92,255,.45)!important}
#app .plan.plan-bundle.highlight{border-color:rgba(139,92,255,.9)!important}
.buy-form{margin:0}
#app .buy-form button[disabled]{opacity:.55;cursor:not-allowed}
.plan .plan-saving{line-height:1.45}
.h-head p a.text-link{display:inline}
@media (max-width:760px){.product-switch{grid-template-columns:1fr}}

/* tables on pricing */
.membership-comparison{overflow-x:auto}

/* ── Auth pages (on the public layout) ───────────────── */
.auth-wrap{display:flex;justify-content:center;padding:72px 0 40px}
#app .auth-card{width:100%;max-width:440px;padding:36px 34px;border:1px solid var(--line2)!important;border-radius:24px;background-color:var(--surface)!important;background-image:radial-gradient(420px 200px at 100% 0%,rgba(139,92,255,.16),transparent 70%)!important}
.auth-card h1{font-size:32px!important;margin:12px 0 8px}
.auth-card>p{font-size:14.5px}
.auth-card form{margin-top:26px}
.auth-card .field label{font-size:12.5px;color:var(--muted)!important}
.auth-card .field input{font-size:15px;padding:12px 14px}
.auth-card .field-row{display:flex;justify-content:space-between;align-items:baseline}
.auth-card .field-row a{font-size:12.5px;color:var(--muted)}
.auth-card .field-row a:hover,.auth-foot a:hover{color:var(--v2)}
.auth-card .btn{width:100%;margin-top:6px}
.auth-foot{margin-top:22px;font-size:14px;color:var(--muted);text-align:center}
.auth-foot a{color:var(--text)}
.auth-card .site-alert{margin:18px 0 0}
.auth-icon{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--v2)}
@media (max-width:600px){.auth-wrap{padding:36px 0 20px}#app .auth-card{padding:28px 22px}}
.auth-center{text-align:center}
.auth-center .eyebrow{justify-content:center}
.auth-actions{display:flex;flex-direction:column;gap:10px;margin-top:26px}