/* glass-site.css — LIQUID GLASS theme for the public pages (dark) ?v=kx1. Loaded after site.css. Requires glass-tokens.css immediately before this file. Values that match a token use var(--kx-...). Never styles .kchat-* (KNGX Care).
   Layer 1: a living background (deep green + slowly drifting light blobs) so the glass has something to refract.
   Layer 2: glass surfaces — heavy blur + saturation, bright top edge, inner glow, layered shadow, rounded corners. */
:root{--g-blur:var(--kx-blur-panel);--g-sat:185%;--g-bg:linear-gradient(145deg,rgba(255,255,255,.13),var(--kx-wash) 45%,var(--kx-wash-7));
  --g-edge:rgba(255,255,255,.22);--g-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 var(--kx-line-05),inset 0 0 22px var(--kx-wash),0 10px 30px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.2);--g-r:var(--kx-r-hero)}
html{background:#03140b}
body{background:transparent!important;position:relative}
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(80px);opacity:.55}
body::before{width:70vmax;height:70vmax;left:-20vmax;top:-18vmax;background:radial-gradient(circle,var(--kx-green) 0%,var(--kx-green-0) 62%);animation:none}
body::after{width:60vmax;height:60vmax;right:-22vmax;bottom:-20vmax;background:radial-gradient(circle,#d9b64f 0%,rgba(217,182,79,0) 60%);opacity:.35;animation:none}
@keyframes gsDrift1{to{transform:translate(20vmax,24vmax) scale(1.12)}}@keyframes gsDrift2{to{transform:translate(-18vmax,-22vmax) scale(1.08)}}

/* glass surfaces */
header,.acard,.fcard,.pstat,.spec,.grp,.mega,.cx,footer .fcard{background:var(--g-bg)!important;-webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  border:1px solid var(--g-edge)!important;box-shadow:var(--g-shadow)!important;border-radius:var(--g-r)}
header{border-radius:0 0 var(--g-r) var(--g-r);border-top:0!important;position:sticky;top:0;z-index:20}
.acard,.fcard,.pstat,.spec,.grp{padding:16px 18px;transition:transform var(--t-fast,120ms) var(--ease-out,cubic-bezier(.22,1,.36,1)),box-shadow var(--t-fast,120ms) var(--ease-out,cubic-bezier(.22,1,.36,1)),border-color var(--t-fast,120ms) var(--ease-out,cubic-bezier(.22,1,.36,1));position:relative;overflow:hidden}
.acard::before,.fcard::before,.pstat::before,.spec::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.18),rgba(255,255,255,0) 38%);opacity:.7}
@media (hover:hover){.acard:hover,.fcard:hover,.pstat:hover,.spec:hover{transform:translateY(-3px);border-color:rgba(134,239,172,.45)!important;box-shadow:var(--g-shadow),0 0 28px rgba(74,222,128,.22)!important}}
.lead{padding:0!important;background:none!important;border:0!important;box-shadow:none!important}

/* buttons: liquid pills */
.btn{border-radius:999px!important;-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);transition:transform var(--t-fast,120ms) var(--ease-out,cubic-bezier(.22,1,.36,1)),box-shadow var(--t-fast,120ms) var(--ease-out,cubic-bezier(.22,1,.36,1)),filter var(--t-fast,120ms) var(--ease-out,cubic-bezier(.22,1,.36,1))}
.btn.pri{background:linear-gradient(135deg,#4ade80,#16a34a)!important;color:#03140a!important;border:1px solid rgba(255,255,255,.35)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 24px var(--kx-green-35)!important}
.btn.ghost,.btn:not(.pri){background:var(--kx-line)!important;border:1px solid rgba(255,255,255,.22)!important;color:#ecfdf5!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)!important}
.btn:active{scale:.97;transition-duration:0ms}
@media (hover:hover){.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}}

@media (prefers-reduced-motion:reduce){body::before,body::after{animation:none}.acard,.fcard,.pstat,.spec,.btn{transition:none}}

/* nav-20260929: the glass header/menus were semi-transparent WHITE, so on pages with a light body
   (kngx-inner-polish: /contact, /instruments, /learn, /market-insights …) the white nav text vanished.
   Give the header, mega menus and mobile drawer a solid dark glass so the text always reads. */
header,header.scrolled{background:linear-gradient(145deg,rgba(14,40,25,.95),rgba(4,16,9,.93))!important;color:var(--kx-fg)}
header .mega,header .mnav.on{background:linear-gradient(160deg,rgba(14,40,25,.98),rgba(4,16,9,.97))!important}
header .logo,header .burger,header .mnav summary,header .mnav .sub a,header .mega a{color:var(--kx-fg)!important}
header .mega h5{color:rgba(242,245,243,.55)!important}
header .nitem>a{color:rgba(242,245,243,.86)!important;white-space:nowrap}
header .nitem>a:hover,header .nitem:hover>a,header .nitem:focus-within>a,header .mega a:hover,header .mnav .sub a:hover{color:var(--kx-white)!important;background:var(--kx-line)}
header .mega a:hover,header .mnav .sub a:hover{color:var(--kx-mint)!important}
header a:focus-visible,header button:focus-visible,header summary:focus-visible{outline:2px solid #4ade80;outline-offset:2px;border-radius:8px}
header .btn{white-space:nowrap}
header .burger:hover{background:var(--kx-wash-10)}

/* .kpage top bar (29 marketing pages): crown mark, one line, clear hover */
.ktop{background:linear-gradient(145deg,#0e2819,#04100a)!important;border-bottom:1px solid var(--kx-line);flex-wrap:nowrap}
.ktop>a:first-child{display:inline-flex;align-items:center;gap:.55rem;letter-spacing:.18em;font-weight:700;color:var(--kx-fg)!important;white-space:nowrap}
.ktop>a:first-child::before{content:"";width:22px;height:22px;flex:0 0 22px;background:url(/assets/brand/crown-mark.svg?v=logo3) center/contain no-repeat}
.ktop .r{display:flex;align-items:center;gap:.35rem;flex-wrap:nowrap}
.ktop .r a{margin-left:0!important;padding:.45rem .7rem;border-radius:999px;color:rgba(242,245,243,.88)!important;white-space:nowrap;transition:background .12s,color .12s}
.ktop .r a:hover{background:rgba(255,255,255,.09);color:var(--kx-white)!important}
.ktop .r a[href="/register"]{background:linear-gradient(135deg,#4ade80,#16a34a);color:#03140a!important}
.ktop .r a[href="/register"]:hover{filter:brightness(1.07)}
@media (max-width:640px){.ktop .r{gap:.2rem;max-width:none;overflow:visible}.ktop .r a{padding:.4rem .55rem;font-size:.8rem}.ktop>a:first-child{letter-spacing:.12em}}
@media (max-width:360px){.ktop .r a[href="/accounts"]{display:none}}
header .mnav .mlink{display:flex;align-items:center;min-height:52px;font-weight:500;font-size:16px;color:var(--kx-fg)!important;border-bottom:1px solid var(--kx-line)}
header .mnav .mlink:hover{color:var(--kx-mint)!important}
header .mnav .mcta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}

/* ===== kngx-desktop-v1 (2026-09-29) — DESKTOP layout for the public pages. Only inside min-width
   media queries: phones/tablets (<1024px) are untouched.
   Fixes phone rules that were written without a media query (site.css + inline copies):
   `.phero .wrap{max-width:100%;padding:0 1rem}` (hero text glued to the left edge) and
   `.clist{display:flex;overflow-x:auto}` + `.clist a.ccard{flex:0 0 260px}` (a phone swipe row on desktop),
   and on the home page full-bleed card rows / 350px-wide headings. ===== */
@media (min-width:1024px){
  /* inner pages (.phero hero + .clist course rows) */
  .phero .wrap{max-width:1232px!important;margin-left:auto!important;margin-right:auto!important;padding:0 32px!important;box-sizing:border-box}
  .phero .pstats{gap:16px!important}
  .clist{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important;overflow:visible!important;padding-bottom:0!important}
  .clist a.ccard,.clist .ccard{flex:none!important;min-width:0!important;width:auto!important}
  .ccard,.step,.pcard{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .ccard:hover,.step:hover,.pcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,60,35,.12)}

  /* home: keep card rows inside the page container instead of touching the screen edges */
  .journey{max-width:1320px!important;margin-left:auto!important;margin-right:auto!important;padding:0 32px!important;gap:20px!important;box-sizing:border-box!important}
  .journey .jcard{border-radius:24px!important;overflow:hidden}
  #pulse .blog{max-width:1320px!important;margin-left:auto!important;margin-right:auto!important;padding:0 32px!important;box-sizing:border-box;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;justify-content:stretch!important}
  #pulse .blog .bcard{max-width:none!important;width:auto!important;margin:0!important}
  .mkt-cards{max-width:1120px!important;gap:20px!important}
  .trust>h2,.trust h2{max-width:none!important}
  .app-band h2,.app-band p.sub{max-width:640px!important}
  .band .content{max-width:640px!important}
  .trust,.band,.learn-vis{max-width:1400px!important;margin-left:auto!important;margin-right:auto!important}
  .learn-vis{box-sizing:border-box}
  .learn-vis img{width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover;border-radius:28px}
  #blog.blog{max-width:1120px!important;margin-left:auto!important;margin-right:auto!important;gap:24px!important}
  #blog.blog .bcard{flex:1 1 0!important;max-width:520px!important}
  .jcard,.bcard,.mc,.rev{transition:transform .18s ease,box-shadow .18s ease}
  .jcard:hover,.mc:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,60,35,.16)}
}
@media (min-width:1440px){
  .phero .wrap{max-width:1320px!important}
  .clist{gap:24px!important}
}
/* end kngx-desktop-v1 */