/* KarmaEdge.AI elite black design system (UI revamp phase 1, 2026-09-29).
   Loaded last on every customer page. Pure black canvas to match the logo,
   one teal accent taken from the logo (#2DFCE6 -> #31FBB7), gold reserved for
   paid access. Fonts are self-hosted (SIL OFL, see static/fonts/*-OFL.txt):
   the site CSP allows no third-party font or style hosts. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-wght.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/space-grotesk-latin-wght.woff2) format("woff2")}

:root{
  --ke-black:#000;--ke-surface:#0b0b0d;--ke-surface-2:#131316;--ke-surface-3:#1a1a1e;
  --ke-hairline:rgba(255,255,255,.08);--ke-hairline-strong:rgba(255,255,255,.14);
  --ke-text:#f5f7f8;--ke-text-2:#a1a7ad;--ke-text-3:#6d7379;
  --ke-teal:#2dfce6;--ke-mint:#31fbb7;--ke-accent:linear-gradient(135deg,#2dfce6 0%,#31fbb7 100%);
  --ke-gold:#f2c14e;--ke-gold-2:#e6a83c;
  --ke-display:"Space Grotesk","Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ke-body:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* The shared tokens every page stylesheet already reads. */
  --bg:#000;--panel:#0b0b0d;--panel2:#131316;--panel-2:#131316;--line:rgba(255,255,255,.1);
  --ink:#f5f7f8;--muted:#a1a7ad;--mint:#31fbb7;--cta-free-primary:#31fbb7;
  --shadow:0 24px 60px rgba(0,0,0,.6);
  --os-bg:#000;--os-panel:#0b0b0d;--os-line:rgba(255,255,255,.1);
  --gd-bg:#000;--gd-panel:#0b0b0d;--gd-line:rgba(255,255,255,.1);
  --trend-bg:#000;--trend-panel:#0b0b0d;--trend-panel-2:#131316;--trend-line:rgba(255,255,255,.1);
  --pr-surface:#0b0b0d;
}
html{background:#000}
body{background:#000!important;color:var(--ke-text);font-family:var(--ke-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:#2dfce633;color:#fff}
h1,h2,h3,.brand{font-family:var(--ke-display);letter-spacing:-.025em}
h1{letter-spacing:-.04em}

/* Header: slim, black glass, hairline. */
.site-header{background:rgba(0,0,0,.72)!important;border-bottom:1px solid var(--ke-hairline)!important;-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);box-shadow:none!important}
.site-header .nav{min-height:68px}
/* The logo file is a square with wide dark margins; show only the mark and wordmark. */
.site-header .brand-logo-link{flex:none;display:block;width:70px;height:50px;overflow:hidden;border-radius:6px}
.site-header .brand-logo{width:84px;height:84px;max-width:none;margin:-13px 0 0 -7px}
@media (max-width:640px){.site-header .brand-logo-link{width:62px;height:44px}.site-header .brand-logo{width:74px;height:74px;margin:-11px 0 0 -6px}}
.site-header .shell.nav{width:min(1320px,calc(100% - 40px))}
.nav-links{gap:18px;font-size:13.5px;font-weight:600;color:var(--ke-text-2)}
.nav-links a,.nav-links button,.nav-account>*{white-space:nowrap}
.nav-links>.nav-dropdown{flex:none}
.nav-links a,.nav-dropdown-trigger{transition:color .15s ease}
.nav-links a:hover,.nav-links a[aria-current=page],.nav-dropdown-trigger[aria-current=page]{color:#fff}
.nav-dropdown-menu{background:#0b0b0d!important;border:1px solid var(--ke-hairline-strong)!important;box-shadow:0 24px 60px rgba(0,0,0,.7)!important;border-radius:12px}
.nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus-visible{background:#17171a!important}
.nav-player-prop-free{background:#0f1614!important;border-color:#31fbb766!important;box-shadow:none!important}
.nav-free-badge{background:var(--ke-accent)!important;border-color:transparent!important;color:#001a14!important;box-shadow:none!important}
.nav-account{gap:16px}
.nav-account a[href="/account/login"]{color:var(--ke-text-2);font-weight:600}
.nav-account a[href="/account/login"]:hover{color:#fff}
.nav-start-free{padding:8px 14px!important;border:1px solid var(--ke-hairline-strong)!important;border-radius:999px!important;background:transparent!important;color:#fff!important;font-weight:700!important;letter-spacing:.02em;box-shadow:none!important}
.nav-start-free:hover{border-color:#31fbb7!important;color:#31fbb7!important}
.nav-premium-cta{padding:8px 15px!important;border-radius:999px!important;background:linear-gradient(135deg,#f7c75a,#e6a83c)!important;border:0!important;color:#1a1204!important;font-weight:800!important;letter-spacing:.02em;box-shadow:0 0 0 1px #ffd9801f,0 8px 24px #e6a83c26!important}
.nav-premium-cta:hover{filter:brightness(1.06)}
/* The logged-out header (KarmaCards, four sports, Pricing, How It Works, Log
   In, Start Free, Get Full Access) needs about 1165px; below 1260px it uses
   the Menu button (2026-10-08: was 1400px, which sent 1280-1366px laptops to
   the click-only menu). */
@media(max-width:1259px){.nav-links{display:none}.nav-links.open{display:flex;position:absolute;left:16px;right:16px;top:68px;max-height:calc(100vh - 86px);overflow:auto;background:#0b0b0d;border:1px solid var(--ke-hairline-strong);border-radius:14px;padding:16px;flex-direction:column;align-items:flex-start}.nav-toggle{display:block;border-color:var(--ke-hairline-strong)!important;border-radius:999px!important;padding:8px 16px!important}.nav-dropdown,.nav-dropdown-trigger{width:100%}.nav-dropdown-trigger{text-align:left}.nav-dropdown-menu{position:static;width:100%;margin-top:8px;box-shadow:none}.nav-dropdown-menu a{min-height:44px}.nav-account{display:flex;width:100%;gap:14px;align-items:center;flex-wrap:wrap;border-left:0;border-top:1px solid var(--ke-hairline);padding:14px 0 0}.live-odds-dropdown,.live-trends-dropdown{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.live-odds-dropdown .nav-dropdown-trigger,.live-trends-dropdown .nav-dropdown-trigger{width:auto}.live-odds-dropdown .nav-dropdown-menu,.live-trends-dropdown .nav-dropdown-menu{flex-basis:100%}}

/* Surfaces: flat near-black cards with hairlines, no navy glow. */
.panel,.hero-card,.prediction-card,.state-card,.stat,.hero-copy{background:var(--ke-surface)!important;border-color:var(--ke-hairline)!important;box-shadow:none}
.eyebrow,.label{color:var(--ke-mint);letter-spacing:.14em}

/* Buttons: free = teal accent, paid = gold, secondary = hairline ghost. */
.button{border-radius:999px;font-weight:750;letter-spacing:.005em;transition:transform .15s ease,filter .15s ease,border-color .15s ease,background .15s ease}
.button:active{transform:translateY(1px)}
.cta-free-primary{background:var(--ke-accent)!important;color:#00140f!important;border:0!important;box-shadow:0 10px 30px #2dfce61f!important}
.cta-free-primary:hover{filter:brightness(1.06)}
.cta-flagship,.hero-prop-cta,.premium-cta,.purchase-action{background:linear-gradient(135deg,#f7c75a,#e6a83c)!important;color:#1a1204!important;border:0!important;box-shadow:0 10px 30px #e6a83c26!important}
.button.secondary{background:transparent!important;color:#fff!important;border:1px solid var(--ke-hairline-strong)!important}
.button.secondary:hover{border-color:#ffffff4d!important}
.button:focus-visible,.nav-links a:focus-visible{outline:2px solid var(--ke-teal);outline-offset:3px}

/* Footer blends into the canvas. */
.site-footer,footer{background:#000!important;border-top:1px solid var(--ke-hairline)!important}

/* A plan the member already holds is marked as included, never offered for sale. */
.pricing-cta-included{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;background:transparent!important;border:1px solid #31fbb766!important;color:var(--ke-mint)!important;box-shadow:none!important;cursor:pointer}
.pricing-cta-included:hover{background:#31fbb70f!important}

/* KarmaCards: the one filled block among the header links (Alok, 2026-09-30).
   Teal, not gold: gold stays the purchase colour (Get Full Access). */
.nav-links a.nav-karmacards-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--ke-accent);color:#00140f!important;font-weight:800;box-shadow:0 0 0 1px #2dfce633,0 6px 22px #2dfce62e;transition:filter .15s,box-shadow .15s,transform .15s}
.nav-links a.nav-karmacards-tab:hover,.nav-links a.nav-karmacards-tab[aria-current=page]{color:#00140f!important;filter:brightness(1.08);box-shadow:0 0 0 1px #2dfce666,0 8px 28px #2dfce647}
.nav-links a.nav-karmacards-tab:active{transform:translateY(1px)}
@media(max-width:1259px){.nav-links.open a.nav-karmacards-tab{align-self:stretch;justify-content:center;min-height:44px}}
/* Elite annual: a gold line travels around the button (Alok, 2026-10-01: annual
   plans sell well over time, so the yearly option should catch the eye). */
@property --ke-gold-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes ke-gold-spin{to{--ke-gold-angle:360deg}}
.public-pricing-grid .price-card.pricing-card-elite .pricing-annual-cta.ke-annual-glow,.ke-annual-glow{position:relative;isolation:isolate;border-color:transparent!important;background:transparent!important;color:#ffe08a!important;font-weight:800;letter-spacing:.01em;box-shadow:0 0 22px #f2c14e26}
.ke-annual-glow::before{content:"";position:absolute;inset:-2px;z-index:-2;border-radius:inherit;background:conic-gradient(from var(--ke-gold-angle),#f2c14e33 0 55%,#f2c14e 68%,#fff3c4 74%,#f2c14e 80%,#f2c14e33 92%);animation:ke-gold-spin 3.2s linear infinite}
.ke-annual-glow::after{content:"";position:absolute;inset:1.5px;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,#151208,#0a0904)}
.ke-annual-glow:hover{box-shadow:0 0 34px #f2c14e4d;color:#fff3c4!important}
@media(prefers-reduced-motion:reduce){.ke-annual-glow::before{animation:none;background:#f2c14e}}

/* Visible FAQs (site_faq.py; the same questions feed the FAQPage markup). */
.ke-page-faq{margin:48px 0 0;padding:0}
.ke-page-faq h2{margin:0 0 14px;color:#fff;font-size:20px;font-weight:600}
.ke-page-faq-list{display:grid;gap:8px}
.ke-page-faq-item{border:1px solid var(--ke-hairline);border-radius:14px;background:var(--ke-surface)}
.ke-page-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;color:#fff;font-size:14.5px;font-weight:600;list-style:none;cursor:pointer}
.ke-page-faq-item summary::-webkit-details-marker{display:none}
.ke-page-faq-item summary::after{flex:none;color:var(--ke-teal);font-size:18px;content:"+";transition:transform .2s}
.ke-page-faq-item[open] summary::after{transform:rotate(45deg)}
.ke-page-faq-item p{margin:0;padding:0 18px 16px;color:var(--ke-text-2);font-size:14px;line-height:1.6}
@media(prefers-reduced-motion:reduce){.ke-page-faq-item summary::after{transition:none}}
/* ?watch= status after a Save (2026-10-07). */
.ke-watch-notice{margin-top:14px!important;padding:10px 14px;border:1px solid var(--ke-hairline-strong);border-radius:12px;background:#0c0d10;color:var(--ke-text);font-size:13px}
.ke-watch-notice.is-saved{border-color:#31fbb766;color:var(--ke-mint)}
/* NBA AI Models coming soon (2026-10-07). */
.ke-nba-soon{padding:40px 0 64px}
.ke-nba-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center}
.ke-nba-copy h1{margin:16px 0 0;font-family:var(--ke-display);font-size:clamp(38px,5vw,62px);line-height:1.02;letter-spacing:-.02em}
.ke-nba-copy h1 span{display:block;background:var(--ke-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.ke-nba-copy .lede{max-width:560px;margin:18px 0 26px;color:var(--ke-text-2);font-size:16px;line-height:1.6}
.ke-nba-field{display:flex;gap:10px;max-width:520px}
.ke-nba-field input{flex:1;min-width:0;height:50px;padding:0 16px;border:1px solid var(--ke-hairline-strong);border-radius:14px;background:#0c0d10;color:var(--ke-text);font-size:15px}
.ke-nba-field input:focus{outline:2px solid #31fbb766;border-color:transparent}
.ke-nba-field .button{height:50px;white-space:nowrap}
.ke-nba-consent{display:flex;gap:8px;align-items:center;margin-top:12px;color:var(--ke-text-3);font-size:13px}
.ke-nba-status{display:flex;gap:8px;align-items:center;max-width:520px;margin-top:12px;padding:12px 14px;border:1px solid var(--ke-hairline-strong);border-radius:12px;font-size:14px}
.ke-nba-status.is-ok{border-color:#31fbb766;color:var(--ke-mint)}
.ke-nba-status.is-error{color:#ff9c8a}
.ke-nba-preview{border:1px solid var(--ke-hairline);border-radius:20px;background:radial-gradient(120% 120% at 100% 0,#2dfce614,transparent 55%),linear-gradient(180deg,#111114,#0a0a0c);overflow:hidden}
.ke-nba-preview ul{display:grid;gap:12px;margin:0;padding:20px;list-style:none}
.ke-nba-preview li{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--ke-hairline);border-radius:14px;background:#0c0d10;color:var(--ke-mint)}
.ke-nba-preview li strong{display:block;color:var(--ke-text);font-size:15px}
.ke-nba-preview li span{color:var(--ke-text-3);font-size:13px}
.ke-nba-note{margin:0;padding:0 20px 18px;color:var(--ke-text-3);font-size:12px}
.ke-nba-now{margin-top:56px}
.ke-nba-now h2{font-family:var(--ke-display);font-size:22px}
.ke-nba-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ke-nba-links a{display:grid;gap:4px;padding:18px;border:1px solid var(--ke-hairline);border-radius:16px;background:#0c0d10;color:var(--ke-text);text-decoration:none}
.ke-nba-links a:hover{border-color:#31fbb755}
.ke-nba-links span{color:var(--ke-text-3);font-size:13px}
@media(max-width:860px){.ke-nba-hero,.ke-nba-links{grid-template-columns:1fr}.ke-nba-field{flex-direction:column}}
.ke-nba-soon .ke-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ke-nba-soon .ke-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid #31fbb755;border-radius:999px;background:#31fbb712;color:var(--ke-mint);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ke-nba-soon .ke-pill i{width:7px;height:7px;border-radius:50%;background:var(--ke-mint);box-shadow:0 0 10px var(--ke-mint)}
.ke-nba-soon .ke-nba-field input{height:50px!important;margin:0!important;padding:0 16px!important}
.ke-nba-soon .ke-nba-consent{display:flex!important;flex-direction:row!important;align-items:center!important;max-width:520px;font-weight:500}
.ke-nba-soon .ke-nba-consent input{width:16px!important;height:16px!important;margin:0!important;flex:none;accent-color:var(--ke-mint)}
.ke-nba-preview-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 0;color:var(--ke-text);font-family:var(--ke-display);font-size:16px;font-weight:600}
.ke-nba-preview-head b{padding:3px 10px;border:1px solid #f2c14e66;border-radius:999px;color:var(--ke-gold);font-family:var(--ke-body);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:860px){.ke-nba-soon .ke-nba-field input{width:100%!important;flex:none!important}}