/* ClassBase glass chrome — shared dark-glass nav + teal footer for all pages.
   Hand-authored: the Tailwind build (tailwind/input.css -> styles.css) never
   touches this file. Loaded AFTER /styles.css so these rules win on equal
   specificity. Recolours the existing Tailwind nav/footer markup in place —
   no structural or content change, so page SEO is untouched. */
:root { --g-aqua: #7ce5c7; --g-aqua-lt: #d8fff3; }

/* Header: full-width, top-locked, dark glass (app top-bar gradient) */
.site-nav { background: linear-gradient(90deg, #0a8f70 0%, #077a6d 35%, #05585f 70%, #063c57 100%); border-bottom: 1px solid rgba(174,255,236,.14); box-shadow: 0 6px 26px rgba(0,12,17,.22); backdrop-filter: blur(18px) saturate(140%); }
.site-nav a, .site-nav button { color: rgba(235,255,249,.82); }
.site-nav a:hover, .site-nav button:hover { color: #fff; }
.site-nav .font-semibold { color: #fff; }
.site-nav svg { color: rgba(235,255,249,.85); }
.site-nav .nav-dropdown-panel { background: #0a4b4a; border-color: rgba(174,255,236,.16); box-shadow: 0 16px 36px rgba(0,12,17,.4); }
.site-nav .nav-dropdown-panel a { color: rgba(235,255,249,.82); }
.site-nav .nav-dropdown-panel a:hover { background: rgba(124,229,199,.14); color: #fff; }
.site-nav #mobile-menu { background: #06403f; border-top-color: rgba(174,255,236,.14); }
/* Trial button — subpages use bg-brand-500 (Tailwind), homepage uses .nav-trial; both end in /signup */
.site-nav a[href$="/signup"], .site-nav .nav-trial { background: linear-gradient(135deg, #d8fff3 0%, #7ce5c7 42%, #2cbba5 100%); color: #032b2a; border: 1px solid rgba(225,255,248,.55); box-shadow: inset 0 1px rgba(255,255,255,.6), 0 8px 22px rgba(23,196,164,.22); }
.site-nav a[href$="/signup"]:hover, .site-nav .nav-trial:hover { filter: brightness(1.04); color: #032b2a; }

/* Footer: concept teal-dark (not Tailwind slate/blue) */
.site-footer { background: #020b0f; }
.site-footer .border-slate-800 { border-color: rgba(185,255,239,.08); }

/* ---- Dark-glass hero — add class="glass-hero" to a hero <section>. Recolours the
   existing Tailwind hero markup in place (dark bg, gradient heading accent, aqua
   primary + glass secondary buttons). Pure presentation: no markup/content change,
   so page SEO is untouched. ---- */
.glass-hero { position: relative; overflow: hidden; color: #eafff4; background: radial-gradient(ellipse at 78% 30%, rgba(27,126,119,.34), transparent 40%), radial-gradient(ellipse at 12% 16%, rgba(39,145,132,.16), transparent 42%), linear-gradient(150deg, #031016 0%, #041418 56%, #061d20 100%); }
.glass-hero .text-slate-900 { color: #f3fff5; }
.glass-hero .text-slate-800, .glass-hero .text-slate-700, .glass-hero .text-slate-600 { color: rgba(227,255,245,.75); }
.glass-hero .text-slate-500, .glass-hero .text-slate-400 { color: rgba(227,255,245,.5); }
.glass-hero h1 .text-brand-500, .glass-hero h1 .text-brand-600, .glass-hero h1 .text-brand-700 { color: transparent; background: linear-gradient(100deg,#63dac3,#c2ffe9 58%,#67d9bb); -webkit-background-clip: text; background-clip: text; }
.glass-hero .bg-brand-50 { background: rgba(190,255,238,.08); }
.glass-hero .border-brand-200 { border-color: rgba(174,255,236,.24); }
.glass-hero .text-brand-700, .glass-hero .text-brand-600 { color: #a9ead9; }
.glass-hero a.bg-brand-500, .glass-hero .bg-brand-500 { background: linear-gradient(135deg, #d8fff3 0%, #7ce5c7 42%, #2cbba5 100%); color: #032b2a; border: 1px solid rgba(225,255,248,.55); box-shadow: inset 0 1px rgba(255,255,255,.6), 0 10px 30px rgba(23,196,164,.24); }
.glass-hero a.bg-brand-500:hover, .glass-hero .bg-brand-500:hover { filter: brightness(1.04); color: #032b2a; }
.glass-hero .border-slate-300 { border-color: rgba(191,255,239,.26); background: rgba(190,255,241,.06); color: #eafff9; }
.glass-hero .border-slate-300:hover { border-color: rgba(191,255,239,.4); background: rgba(190,255,241,.12); }

/* ---- Switch CTA — dark ClassBase-theme card for comparison / alternative pages ---- */
.cb-switch-cta { position: relative; overflow: hidden; border-radius: 28px; padding: 56px 32px; text-align: center; color: #eafff4; background: radial-gradient(circle at 50% 0, rgba(46,199,172,.22), transparent 42%), linear-gradient(135deg, #04171b, #07282a 60%, #041418); border: 1px solid rgba(174,255,236,.14); box-shadow: 0 30px 70px rgba(0,12,17,.3); }
.cb-switch-cta .kicker { color: #5ee6ce; font-size: 12px; font-weight: 730; letter-spacing: .14em; text-transform: uppercase; }
.cb-switch-cta h2 { margin: 14px 0 12px; font-size: clamp(30px,3.6vw,44px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; color: #f3fff5; }
.cb-switch-cta p { max-width: 560px; margin: 0 auto 26px; color: #a7ccc6; font-size: 16px; line-height: 1.6; }
.cb-switch-cta .cta-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: center; }
.cb-switch-cta .cta-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 12px; font-weight: 640; font-size: 15px; color: #032b2a; background: linear-gradient(135deg,#d8fff3 0%,#7ce5c7 42%,#2cbba5 100%); box-shadow: inset 0 1px rgba(255,255,255,.6),0 10px 30px rgba(23,196,164,.24); transition: filter .2s ease, transform .2s ease; }
.cb-switch-cta .cta-primary:hover { filter: brightness(1.04); transform: translateY(-1px); }
.cb-switch-cta .cta-text { color: #8fe9d0; font-weight: 620; font-size: 14px; }
.cb-switch-cta .cta-text:hover { color: #fff; }