/* =====================================================================
   Cybergine redesign system — see docs/redesign/DESIGN.md
   Cool monochrome-metallic, pure-monochrome accent (graphite on light,
   silver/white on dark). Scoped under .cg2 / body.cg2-page so it never
   collides with the legacy main.css / premium_light.css.
   ===================================================================== */
:root{
  --cg-canvas:        oklch(0.985 0.003 252);
  --cg-surface:       oklch(1 0 0);
  --cg-surface-2:     oklch(0.965 0.004 252);
  --cg-ink:           oklch(0.20 0.013 255);
  --cg-graphite:      oklch(0.30 0.018 252);
  --cg-steel:         oklch(0.45 0.014 252);
  --cg-silver:        oklch(0.885 0.005 252);
  --cg-silver-2:      oklch(0.915 0.004 252);
  --cg-silver-light:  oklch(0.945 0.004 252);
  --cg-line:          oklch(0.90 0.005 252);
  --cg-line-strong:   oklch(0.82 0.007 252);
  /* pure monochrome accent (one-line return to hue: change --cg-accent) */
  --cg-accent:        var(--cg-ink);
  --cg-accent-press:  oklch(0.13 0.012 255);
  --cg-accent-tint:   var(--cg-silver-light);
  --cg-accent-ink:    var(--cg-canvas);
  --cg-accent-glow:   oklch(0.45 0.014 252 / .12);

  --cg-radius:14px; --cg-radius-lg:22px;
  --cg-shadow-sm: 0 1px 2px oklch(0.20 0.013 255 / .06), 0 1px 1px oklch(0.20 0.013 255 / .04);
  --cg-shadow-md: 0 12px 30px -12px oklch(0.20 0.013 255 / .16), 0 4px 10px -6px oklch(0.20 0.013 255 / .10);
  --cg-shadow-lg: 0 40px 80px -32px oklch(0.20 0.013 255 / .26), 0 12px 28px -14px oklch(0.20 0.013 255 / .16);
  --cg-maxw:1180px;
  --cg-ease:cubic-bezier(.2,.7,.2,1);
  --cg-ease-soft:cubic-bezier(.33,1,.68,1);
}

/* ---- body-level: only on redesigned pages ---- */
body.cg2-page{background:var(--cg-canvas);color:var(--cg-ink);
  font-family:'Satoshi',system-ui,sans-serif;font-size:17px;line-height:1.6;letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
body.cg2-page .spotlight-purple,
body.cg2-page .spotlight-blue,
body.cg2-page .grid-pattern{display:none!important}
body.cg2-page ::selection{background:var(--cg-accent-tint);color:var(--cg-ink)}
body.cg2-page .public-back-to-top{background:var(--cg-ink)}

/* ---- everything else scoped under .cg2 ---- */
.cg2{font-family:'Satoshi',system-ui,sans-serif;color:var(--cg-ink)}
.cg2 *{box-sizing:border-box}
.cg2 a{color:inherit;text-decoration:none}
.cg2 img{display:block;max-width:100%}
.cg2 .wrap{max-width:var(--cg-maxw);margin-inline:auto;padding-inline:24px}

.cg2 h1,.cg2 h2,.cg2 h3{font-weight:800;line-height:1.03;letter-spacing:-0.035em;text-wrap:balance;margin:0}
.cg2 .display{font-size:clamp(2.7rem,6vw,5.2rem);font-weight:900}
.cg2 h2{font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-0.03em}
.cg2 h3{font-size:clamp(1.15rem,1.8vw,1.4rem);letter-spacing:-0.02em;font-weight:700}
.cg2 .lead{font-size:clamp(1.08rem,1.5vw,1.26rem);color:var(--cg-steel);line-height:1.55;text-wrap:pretty;max-width:46ch;margin:0}
.cg2 .kicker{display:inline-flex;align-items:center;gap:9px;font-size:0.92rem;font-weight:600;color:var(--cg-steel)}
.cg2 .kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--cg-accent);box-shadow:0 0 0 4px var(--cg-accent-glow)}

/* buttons */
.cg2 .btn{display:inline-flex;align-items:center;gap:9px;font:inherit;font-weight:700;font-size:1rem;
  border:1px solid transparent;border-radius:999px;padding:14px 26px;cursor:pointer;line-height:1;
  transition:transform .18s var(--cg-ease),box-shadow .25s var(--cg-ease),background .2s var(--cg-ease);white-space:nowrap}
.cg2 .btn:active{transform:translateY(1px)}
.cg2 .btn:focus-visible{outline:2px solid var(--cg-accent);outline-offset:2px}
.cg2 .btn-primary{background:var(--cg-accent);color:var(--cg-accent-ink);box-shadow:var(--cg-shadow-md)}
.cg2 .btn-primary:hover{background:var(--cg-accent-press);transform:translateY(-2px);box-shadow:var(--cg-shadow-lg)}
.cg2 .btn-ghost{background:var(--cg-surface);color:var(--cg-ink);border-color:var(--cg-line-strong);box-shadow:var(--cg-shadow-sm)}
.cg2 .btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--cg-shadow-md);border-color:var(--cg-steel)}
.cg2 .btn .arrow{transition:transform .25s var(--cg-ease)}
.cg2 .btn:hover .arrow{transform:translateX(4px)}
.cg2 .btn-sm{padding:9px 18px;font-size:0.9rem}

/* nav */
.cg2 .nav{position:sticky;top:0;z-index:100;background:oklch(0.985 0.003 252 / .82);
  backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.cg2 .nav.scrolled{border-color:var(--cg-line);box-shadow:var(--cg-shadow-sm)}
.cg2 .nav .row{display:flex;align-items:center;justify-content:space-between;height:70px}
.cg2 .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.2rem;letter-spacing:-0.03em;color:var(--cg-ink)}
.cg2 .brand img{width:30px;height:30px;border-radius:50%}
.cg2 .nav-links{display:flex;align-items:center;gap:30px;font-weight:500;color:var(--cg-steel);font-size:0.98rem}
.cg2 .nav-links a{transition:color .2s}
.cg2 .nav-links a:hover{color:var(--cg-ink)}
.cg2 .nav-cta{display:flex;align-items:center;gap:16px}
.cg2 .nav-cta .signin{font-weight:600;color:var(--cg-ink)}
@media(max-width:880px){.cg2 .nav-links{display:none}}
/* hamburger button — visible only ≤880px */
.cg2 .nav-hamburger{display:none;flex-direction:column;justify-content:space-between;width:24px;height:18px;min-width:24px;flex-shrink:0;background:none;border:none;cursor:pointer;padding:0;margin-left:8px}
.cg2 .nav-hamburger span{display:block;height:2px;background:var(--cg-ink);border-radius:2px;transition:transform .22s ease,opacity .22s ease}
@media(max-width:880px){.cg2 .nav-hamburger{display:flex}}
/* mobile menu */
.cg2 .mobile-menu{position:fixed;top:64px;left:0;right:0;z-index:200;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.06);box-shadow:0 8px 32px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:4px;padding:16px 20px 20px}
.cg2 .mobile-menu[hidden]{display:none}
.cg2 .mobile-menu a{padding:10px 4px;font-weight:500;color:var(--cg-ink);text-decoration:none;border-radius:6px}
.cg2 .mobile-menu .btn{margin-top:8px;text-align:center}
@media(prefers-reduced-motion:no-preference){.cg2 .mobile-menu{animation:cg-menu-in .18s ease}}
@keyframes cg-menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* hero */
.cg2 .hero{position:relative;padding:clamp(48px,7vw,92px) 0 clamp(56px,8vw,104px);overflow:clip}
.cg2 .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.cg2 .hero-bg .glow{position:absolute;top:-24%;right:-6%;width:760px;height:760px;border-radius:50%;
  background:radial-gradient(circle at center,var(--cg-accent-glow),transparent 60%);filter:blur(10px);opacity:.7}
@media(prefers-reduced-motion:no-preference){
  .cg2 .hero-bg .glow{animation:cg-glow-drift 19s ease-in-out infinite}
}
@keyframes cg-glow-drift{
  0%,100%{transform:translate(0,0) scale(1);opacity:.62}
  50%{transform:translate(-2.5%,3%) scale(1.07);opacity:.82}
}
.cg2 .hero-bg .grid{position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(var(--cg-line) 1px,transparent 1px),linear-gradient(90deg,var(--cg-line) 1px,transparent 1px);
  background-size:54px 54px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black,transparent 75%)}
.cg2 .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,64px);align-items:center}
@media(max-width:980px){.cg2 .hero-grid{grid-template-columns:1fr;gap:40px}}
.cg2 .hero h1{margin:18px 0 0}
.cg2 .hero h1 .hl{color:var(--cg-accent)}
.cg2 .hero .lead{margin:22px 0 0}
.cg2 .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:32px 0 0}
.cg2 .hero-trust{display:flex;align-items:center;gap:22px;margin:30px 0 0;flex-wrap:wrap}
.cg2 .stars{color:var(--cg-accent);letter-spacing:2px;font-size:0.95rem}
.cg2 .hero-trust .t{font-size:0.92rem;color:var(--cg-steel);font-weight:500}
.cg2 .hero-trust .t b{color:var(--cg-ink);font-weight:700}
.cg2 .hero-trust .sep{width:1px;height:26px;background:var(--cg-line-strong)}

.cg2 .rise{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  .cg2 .rise{opacity:0;transform:translateY(16px);animation:cg-rise .7s var(--cg-ease-soft) forwards}
  .cg2 .d1{animation-delay:.05s}.cg2 .d2{animation-delay:.13s}.cg2 .d3{animation-delay:.21s}.cg2 .d4{animation-delay:.29s}.cg2 .d5{animation-delay:.37s}
}
@keyframes cg-rise{to{opacity:1;transform:none}}

/* hero device */
.cg2 .device{background:var(--cg-surface);border:1px solid var(--cg-line);border-radius:var(--cg-radius-lg);
  box-shadow:var(--cg-shadow-lg);overflow:hidden}
.cg2 .device .topbar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--cg-line);background:var(--cg-surface-2)}
.cg2 .device .topbar .store{display:flex;align-items:center;gap:9px;font-weight:700;font-size:0.96rem}
.cg2 .device .topbar .av{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#d9dde1,#5b646e)}
.cg2 .verified{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:0.78rem;font-weight:600;color:var(--cg-accent);
  background:var(--cg-accent-tint);padding:4px 9px;border-radius:999px}
.cg2 .chat{padding:20px 18px;display:flex;flex-direction:column;gap:14px;min-height:330px}
.cg2 .msg{max-width:84%;padding:12px 15px;border-radius:15px;font-size:0.96rem;line-height:1.5}
.cg2 .msg.user{align-self:flex-end;background:var(--cg-ink);color:var(--cg-canvas);border-bottom-right-radius:5px}
.cg2 .msg.bot{align-self:flex-start;background:var(--cg-surface-2);border:1px solid var(--cg-line);border-bottom-left-radius:5px}
.cg2 .msg.bot b{color:var(--cg-ink)}
.cg2 .prodrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.cg2 .prod{border:1px solid var(--cg-line);border-radius:12px;overflow:hidden;background:var(--cg-surface);box-shadow:var(--cg-shadow-sm);transition:transform .2s var(--cg-ease),box-shadow .2s var(--cg-ease)}
.cg2 .prod:hover{transform:translateY(-3px);box-shadow:var(--cg-shadow-md)}
.cg2 .prod .ph{height:108px;display:grid;place-items:center;overflow:hidden;font-size:1.6rem;background:radial-gradient(120% 120% at 30% 20%,var(--cg-surface-2),var(--cg-silver))}
.cg2 .prod .ph img{width:100%;height:108px;object-fit:cover;display:block}
.cg2 .prod .meta{padding:9px 11px}
.cg2 .prod .meta .n{font-weight:700;font-size:0.82rem;letter-spacing:-0.01em;line-height:1.2}
.cg2 .prod .meta .p{font-size:0.78rem;color:var(--cg-steel);margin-top:3px}
.cg2 .prod .meta .p b{color:var(--cg-ink)}
.cg2 .prod .meta .prod__add{margin-top:9px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:36px;padding:8px;border:1px solid var(--cg-ink);border-radius:8px;background:var(--cg-ink);color:var(--cg-canvas);font:inherit;font-size:0.74rem;font-weight:700;letter-spacing:-0.01em;cursor:pointer;transition:background .18s var(--cg-ease),color .18s var(--cg-ease)}
.cg2 .prod .meta .prod__add:hover{background:var(--cg-graphite)}
.cg2 .prod .meta .prod__add:focus-visible{outline:2px solid var(--cg-ink);outline-offset:2px}
.cg2 .prod .meta .prod__add.is-soldout{background:var(--cg-surface-2);color:var(--cg-steel);border-color:var(--cg-line);cursor:not-allowed}
.cg2 .prod .meta .prod__options{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cg2 .prod__option,.cg2 .demo-option-row .prod__option{min-height:36px;padding:7px 11px;border:1px solid var(--cg-line);border-radius:8px;background:var(--cg-surface);color:var(--cg-ink);font:inherit;font-size:0.74rem;font-weight:700;letter-spacing:-0.01em;cursor:pointer;transition:background .18s var(--cg-ease),border-color .18s var(--cg-ease)}
.cg2 .prod__option:hover,.cg2 .demo-option-row .prod__option:hover{background:var(--cg-surface-2);border-color:var(--cg-ink)}
.cg2 .prod__option:focus-visible,.cg2 .demo-option-row .prod__option:focus-visible{outline:2px solid var(--cg-ink);outline-offset:2px}
.cg2 .demo-option-row{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.cg2 .demo-checkout-btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;margin-top:10px;padding:8px 16px;border:1px solid var(--cg-ink);border-radius:8px;background:var(--cg-ink);color:var(--cg-canvas);font:inherit;font-size:0.82rem;font-weight:700;letter-spacing:-0.01em;text-decoration:none;cursor:pointer;transition:background .18s var(--cg-ease)}
.cg2 .demo-checkout-btn:hover{background:var(--cg-graphite)}
.cg2 .demo-checkout-btn:focus-visible{outline:2px solid var(--cg-ink);outline-offset:2px}
.cg2 .demo-cart-pill{margin-left:8px;font-size:0.72rem;font-weight:700;color:var(--cg-ink);background:var(--cg-surface);border:1px solid var(--cg-line);border-radius:999px;padding:2px 9px;white-space:nowrap}
.cg2 .composer{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid var(--cg-line);background:var(--cg-surface-2)}
.cg2 .composer .fakeinput{flex:1;color:var(--cg-steel);font-size:0.9rem}
.cg2 .composer .send{width:34px;height:34px;border-radius:9px;background:var(--cg-accent);display:grid;place-items:center;color:var(--cg-accent-ink);box-shadow:var(--cg-shadow-sm)}
.cg2 .float-badge{position:absolute;background:var(--cg-surface);border:1px solid var(--cg-line);border-radius:12px;
  box-shadow:var(--cg-shadow-md);padding:10px 13px;font-size:0.82rem;font-weight:600;display:flex;align-items:center;gap:8px}
.cg2 .float-badge .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:0.9rem;background:var(--cg-accent-tint);color:var(--cg-accent)}
.cg2 .float-badge .mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8rem}
.cg2 .fb-1{top:-14px;left:-22px}
.cg2 .fb-2{bottom:24px;right:-26px}
@media(max-width:980px){.cg2 .float-badge{display:none}}
.cg2 .device-stage{position:relative}
/* Richer, more dramatic depth for the focal hero device + a glassy top-edge highlight. */
.cg2 .device-stage .device{
  box-shadow:0 54px 96px -36px oklch(0.20 0.013 255 / .32),
             0 18px 40px -20px oklch(0.20 0.013 255 / .18),
             inset 0 1px 0 oklch(1 0 0 / .6);
}
@media(prefers-reduced-motion:no-preference){
  .cg2 .device-stage .device{animation:cg-floaty 7s ease-in-out infinite}
  @keyframes cg-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
}

/* trust strip */
.cg2 .trustband{border-block:1px solid var(--cg-line);background:var(--cg-silver-light)}
.cg2 .trustband .row{display:flex;align-items:center;justify-content:center;gap:clamp(22px,4vw,56px);padding:22px 0;flex-wrap:wrap;color:var(--cg-steel);font-weight:600;font-size:0.95rem}
.cg2 .trustband .pill{display:inline-flex;align-items:center;gap:9px}
.cg2 .trustband .pill b{color:var(--cg-ink);font-weight:800;font-variant-numeric:tabular-nums}

/* sections */
.cg2 .block{padding:clamp(64px,9vw,120px) 0}
.cg2 .sec-head{max-width:62ch}
.cg2 .sec-head h2{margin-top:10px}
.cg2 .sec-head .lead{margin-top:16px;max-width:58ch}
.cg2 .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px}
@media(max-width:880px){.cg2 .steps{grid-template-columns:1fr}}
.cg2 .step{background:var(--cg-surface);border:1px solid var(--cg-line);border-radius:var(--cg-radius);padding:26px 24px;transition:transform .25s var(--cg-ease),box-shadow .25s var(--cg-ease),border-color .25s}
.cg2 .step:hover{transform:translateY(-4px);box-shadow:var(--cg-shadow-md);border-color:var(--cg-line-strong)}
.cg2 .step .num{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.78rem;font-weight:700;color:var(--cg-accent);letter-spacing:.02em}
.cg2 .step h3{margin:14px 0 8px}
.cg2 .step p{color:var(--cg-steel);font-size:0.98rem;margin:0}
.cg2 .step .demo{margin-top:18px;border-top:1px dashed var(--cg-line);padding-top:16px;font-size:0.9rem}
.cg2 .step .demo .q{font-weight:600}
.cg2 .step .demo .a{color:var(--cg-steel);margin-top:6px}
.cg2 .step .demo .src{margin-top:10px;font-size:0.78rem;color:var(--cg-accent);font-weight:600;display:inline-flex;gap:6px;align-items:center}

/* pricing (dark) */
.cg2 .pricing{background:var(--cg-ink);color:var(--cg-canvas);
  --cg-accent:var(--cg-silver-light);--cg-accent-press:var(--cg-silver);--cg-accent-ink:var(--cg-ink);
  --cg-accent-tint:oklch(1 0 0 / .14);--cg-accent-glow:oklch(1 0 0 / .14)}
.cg2 .pricing .sec-head h2{color:var(--cg-canvas)}
.cg2 .pricing .sec-head .lead{color:oklch(0.78 0.01 252)}
.cg2 .toggle{display:inline-flex;gap:4px;background:oklch(0.28 0.015 252);border-radius:999px;padding:4px;margin-top:24px;font-weight:600;font-size:0.92rem}
.cg2 .toggle button{font:inherit;font-weight:600;border:0;background:transparent;color:oklch(0.80 0.01 252);padding:8px 16px;border-radius:999px;cursor:pointer;transition:.2s}
.cg2 .toggle button.on{background:var(--cg-accent);color:var(--cg-accent-ink)}
.cg2 .toggle .save{color:var(--cg-accent);font-size:0.78rem;margin-left:4px}
.cg2 .toggle button.on .save{color:var(--cg-accent-ink)}
.cg2 .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px;align-items:stretch}
@media(max-width:980px){.cg2 .plans{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cg2 .plans{grid-template-columns:1fr}}
.cg2 .plan{background:oklch(0.26 0.013 252);border:1px solid oklch(0.34 0.016 252);border-radius:var(--cg-radius);padding:26px 22px;display:flex;flex-direction:column}
.cg2 .plan.pop{background:oklch(0.29 0.016 252);border-color:var(--cg-accent);box-shadow:0 20px 60px -24px var(--cg-accent-glow);position:relative}
.cg2 .plan.pop .tag{position:absolute;top:-12px;left:22px;background:var(--cg-accent);color:var(--cg-accent-ink);font-size:0.74rem;font-weight:800;padding:5px 11px;border-radius:999px;letter-spacing:.02em}
.cg2 .plan .pname{font-weight:700;font-size:1.1rem}
.cg2 .plan .pdesc{color:oklch(0.74 0.01 252);font-size:0.88rem;margin-top:6px;min-height:38px}
.cg2 .plan .price{font-size:2.4rem;font-weight:800;letter-spacing:-0.04em;margin:16px 0 2px}
.cg2 .plan .price small{font-size:0.95rem;font-weight:600;color:oklch(0.72 0.01 252)}
.cg2 .plan ul{list-style:none;margin:18px 0 22px;padding:0;display:flex;flex-direction:column;gap:10px;font-size:0.92rem;color:oklch(0.86 0.01 252)}
.cg2 .plan li{display:flex;gap:9px;align-items:flex-start}
.cg2 .plan li .ck{color:var(--cg-accent);font-weight:800;flex:none}
.cg2 .plan .btn{margin-top:auto;justify-content:center;width:100%}
.cg2 .plan .btn-ghost{background:transparent;color:var(--cg-canvas);border-color:oklch(0.40 0.02 252)}
.cg2 .plan .btn-ghost:hover{border-color:var(--cg-canvas)}

/* channels */
.cg2 .channels{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px}
@media(max-width:880px){.cg2 .channels{grid-template-columns:1fr}}
.cg2 .channel{background:var(--cg-surface);border:1px solid var(--cg-line);border-radius:var(--cg-radius);padding:26px 24px;transition:transform .25s var(--cg-ease),box-shadow .25s var(--cg-ease),border-color .25s}
.cg2 .channel:hover{transform:translateY(-4px);box-shadow:var(--cg-shadow-md);border-color:var(--cg-line-strong)}
.cg2 .channel .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;background:var(--cg-silver-light);border:1px solid var(--cg-line);margin-bottom:16px}
.cg2 .channel h3{margin-bottom:8px}
.cg2 .channel p{color:var(--cg-steel);font-size:0.96rem;margin:0}
.cg2 .channel a{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:700;font-size:0.92rem;color:var(--cg-ink)}

/* live demo embed wrapper */
.cg2 .demo-card{background:var(--cg-surface);border:1px solid var(--cg-line);border-radius:var(--cg-radius-lg);box-shadow:var(--cg-shadow-lg);padding:clamp(28px,4vw,44px);position:relative;overflow:hidden}
.cg2 .demo-grid{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
@media(max-width:880px){.cg2 .demo-grid{grid-template-columns:1fr;gap:28px}}

/* final cta */
.cg2 .final{position:relative;text-align:center;overflow:clip}
/* Drenched ink finale (Vonage-style bold CTA): contained dark card on the light section. */
.cg2 .final .card{background:var(--cg-ink);border:1px solid var(--cg-ink);border-radius:var(--cg-radius-lg);box-shadow:0 50px 90px -34px oklch(0.20 0.013 255 / .4),0 16px 36px -18px oklch(0.20 0.013 255 / .22);padding:clamp(44px,6vw,76px) 28px;position:relative;overflow:hidden;color:oklch(0.84 0.008 252)}
/* any link/text inside the drenched card defaults to light (per-page CTA markup varies) */
.cg2 .final .card a:not(.btn){color:var(--cg-canvas);text-decoration:underline}
.cg2 .final .card::before{content:"";position:absolute;top:-46%;left:50%;transform:translateX(-50%);width:720px;height:560px;background:radial-gradient(circle,oklch(1 0 0 / .07),transparent 62%);pointer-events:none}
.cg2 .final h2,.cg2 .final .lead,.cg2 .final .frow,.cg2 .final .note{position:relative}
.cg2 .final .card h2{color:var(--cg-canvas)}
.cg2 .final .lead{margin:16px auto 0;text-align:center;max-width:50ch;color:oklch(0.84 0.008 252)}
.cg2 .final .frow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.cg2 .final .note{margin-top:18px;font-size:0.9rem;color:oklch(0.72 0.01 252);position:relative}
/* invert buttons so they read on the dark card */
.cg2 .final .card .btn-primary{background:var(--cg-canvas);color:var(--cg-ink)}
.cg2 .final .card .btn-primary:hover{background:#fff;box-shadow:0 12px 28px -10px oklch(0 0 0 / .5)}
.cg2 .final .card .btn-ghost{background:transparent;color:var(--cg-canvas);border-color:oklch(1 0 0 / .3);box-shadow:none}
.cg2 .final .card .btn-ghost:hover{border-color:oklch(1 0 0 / .7);background:oklch(1 0 0 / .06)}

/* footer */
.cg2 .foot{border-top:1px solid var(--cg-line);padding:54px 0 40px;color:var(--cg-steel);font-size:0.93rem}
.cg2 .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media(max-width:760px){.cg2 .foot-top{grid-template-columns:1fr 1fr}}
.cg2 .foot h2{font-size:0.82rem;font-weight:700;color:var(--cg-ink);text-transform:uppercase;letter-spacing:.04em;margin:0 0 14px}
.cg2 .foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.cg2 .foot a:hover{color:var(--cg-ink)}
.cg2 .fbrand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--cg-ink);font-size:1.1rem}
.cg2 .fbrand img{width:28px;height:28px;border-radius:50%}
.cg2 .foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:40px;padding-top:24px;border-top:1px solid var(--cg-line);font-size:0.88rem}

/* ---- live /demo widget (reuses demo_widget.js; restyled to the system) ---- */
.cg2 .cg-demo-messages{overflow-y:auto;max-height:360px}
.cg2 .demo-msg{display:flex;margin-bottom:2px}
.cg2 .demo-msg--user{justify-content:flex-end}
.cg2 .demo-msg__bubble{max-width:84%;padding:12px 15px;border-radius:15px;font-size:0.95rem;line-height:1.5;
  background:var(--cg-surface-2);border:1px solid var(--cg-line);border-bottom-left-radius:5px}
.cg2 .demo-msg--user .demo-msg__bubble{background:var(--cg-ink);color:var(--cg-canvas);border:0;border-bottom-right-radius:5px;border-bottom-left-radius:15px}
.cg2 .cg-demo-input{flex:1;border:0;background:transparent;font:inherit;font-size:0.95rem;color:var(--cg-ink);outline:none}
.cg2 .cg-demo-input::placeholder{color:var(--cg-steel)}
.cg2 .cg-demo-form .send{border:0;cursor:pointer}
.cg2 .commerce-demo-note,.cg2 .demo-msg__meta{font-size:0.78rem;color:var(--cg-steel)}

/* ---- auth (signup / login) ---- */
.cg2 .auth{position:relative;min-height:calc(100vh - 70px);display:flex;align-items:center;justify-content:center;padding:clamp(32px,6vw,64px) 0;overflow:clip}
.cg2 .auth-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.cg2 .auth-bg .glow{position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:760px;height:560px;border-radius:50%;background:radial-gradient(circle,var(--cg-accent-glow),transparent 62%);filter:blur(10px);opacity:.7}
.cg2 .auth .wrap{position:relative;z-index:1}
.cg2 .auth-head{text-align:center;max-width:30rem;margin:0 auto clamp(28px,4vw,40px)}
.cg2 .auth-head h1{font-size:clamp(2rem,4vw,2.7rem)}
.cg2 .auth-head p{color:var(--cg-steel);margin-top:10px}
.cg2 .auth-card{max-width:440px;margin:0 auto;background:var(--cg-surface);border:1px solid var(--cg-line);border-radius:var(--cg-radius-lg);box-shadow:var(--cg-shadow-lg);padding:clamp(28px,4vw,40px)}
.cg2 .auth-alt{text-align:center;color:var(--cg-steel);font-size:0.93rem;margin-top:22px}
.cg2 .auth-alt a{color:var(--cg-ink);font-weight:700}
.cg2 .auth-alt a:hover{text-decoration:underline}

.cg2 .field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.cg2 .field label{font-size:0.9rem;font-weight:600;color:var(--cg-ink)}
.cg2 .field .ctrl{position:relative;display:flex;align-items:center}
.cg2 .input{width:100%;font:inherit;font-size:1rem;color:var(--cg-ink);background:var(--cg-surface);
  border:1px solid var(--cg-line-strong);border-radius:11px;padding:13px 15px;outline:none;transition:border-color .2s,box-shadow .2s}
.cg2 .input::placeholder{color:var(--cg-steel)}
.cg2 .input:focus{border-color:var(--cg-ink);box-shadow:0 0 0 3px oklch(0.45 0.014 252 / .22)}
.cg2 .ctrl .reveal-pw{position:absolute;right:12px;background:transparent;border:0;cursor:pointer;font:inherit;font-size:0.85rem;font-weight:600;color:var(--cg-steel)}
.cg2 .ctrl .reveal-pw:hover{color:var(--cg-ink)}
.cg2 .agree{display:flex;align-items:flex-start;gap:10px;font-size:0.9rem;color:var(--cg-steel);margin-bottom:20px}
.cg2 .agree input{margin-top:3px;width:16px;height:16px;accent-color:var(--cg-ink);flex:none}
.cg2 .agree a{color:var(--cg-ink);font-weight:600;text-decoration:underline}
.cg2 .btn-block{width:100%;justify-content:center;padding:15px}
.cg2 .recaptcha-note{text-align:center;font-size:0.78rem;color:var(--cg-steel);margin-top:14px}
.cg2 .recaptcha-note a{text-decoration:underline}

/* selected-plan banner */
.cg2 .plan-banner{background:var(--cg-silver-light);border:1px solid var(--cg-line);border-radius:12px;padding:14px;text-align:center;margin-bottom:24px}
.cg2 .plan-banner .pb-name{font-weight:700;font-size:0.95rem;display:flex;align-items:center;justify-content:center;gap:7px}
.cg2 .plan-banner .pb-sub{font-size:0.82rem;color:var(--cg-steel);margin-top:3px}
.cg2 .plan-banner a.change{font-size:0.8rem;color:var(--cg-ink);font-weight:600;text-decoration:underline;display:inline-block;margin-top:6px}

/* plan-pick grid (light cards, links) */
.cg2 .pick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:980px){.cg2 .pick-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cg2 .pick-grid{grid-template-columns:1fr}}
.cg2 .pick{display:flex;flex-direction:column;background:var(--cg-surface);border:1px solid var(--cg-line);border-radius:var(--cg-radius);padding:24px 22px;transition:transform .2s var(--cg-ease),box-shadow .2s var(--cg-ease),border-color .2s}
.cg2 .pick:hover{transform:translateY(-4px);box-shadow:var(--cg-shadow-md);border-color:var(--cg-ink)}
.cg2 .pick.pop{border-color:var(--cg-ink);box-shadow:var(--cg-shadow-md)}
.cg2 .pick .badge{align-self:flex-start;font-size:0.72rem;font-weight:800;letter-spacing:.02em;padding:4px 9px;border-radius:999px;background:var(--cg-silver-light);color:var(--cg-steel);margin-bottom:12px}
.cg2 .pick.pop .badge{background:var(--cg-ink);color:var(--cg-canvas)}
.cg2 .pick .pname{font-weight:700;font-size:1.15rem}
.cg2 .pick .pdesc{color:var(--cg-steel);font-size:0.86rem;margin-top:5px;min-height:36px}
.cg2 .pick .price{font-size:2rem;font-weight:800;letter-spacing:-0.04em;margin:14px 0 2px}
.cg2 .pick .price small{font-size:0.9rem;font-weight:600;color:var(--cg-steel)}
.cg2 .pick ul{list-style:none;padding:0;margin:14px 0 20px;display:flex;flex-direction:column;gap:8px;font-size:0.9rem;color:var(--cg-steel)}
.cg2 .pick li{display:flex;gap:8px;align-items:flex-start}
.cg2 .pick li .ck{color:var(--cg-ink);font-weight:800;flex:none}
.cg2 .pick .scarce{font-size:0.8rem;font-weight:700;color:var(--cg-ink);margin-bottom:10px}
.cg2 .pick .cta{margin-top:auto;text-align:center;font-weight:700;font-size:0.92rem;padding:11px;border-radius:10px;background:var(--cg-surface-2);border:1px solid var(--cg-line-strong);color:var(--cg-ink);transition:background .2s,color .2s}
.cg2 .pick:hover .cta,.cg2 .pick.pop .cta{background:var(--cg-ink);color:var(--cg-canvas);border-color:var(--cg-ink)}

/* ---- cross-cutting fixes (apply to every redesigned page) ---- */
/* Never let the fixed cookie-consent banner overlap content: reserve bottom
   space only while the banner is present (removed on accept/reject). */
body.cg2-page:has(#cookie-consent-banner){padding-bottom:150px}
@media(min-width:768px){body.cg2-page:has(#cookie-consent-banner){padding-bottom:104px}}
/* extra clearance for vertically-centered auth pages so the card lifts above the banner */
.cg2 .auth{padding:clamp(32px,6vw,64px) 0 clamp(130px,18vw,170px)}
@media(min-width:768px){.cg2 .auth{padding:clamp(40px,6vw,72px) 0 clamp(96px,10vw,120px)}}
/* mobile nav: drop the secondary "Sign in" text so the wordmark + primary CTA breathe */
@media(max-width:560px){.cg2 .nav-cta{gap:10px}.cg2 .nav-cta .signin{display:none}}

/* ---- split auth (login): dark proof panel + form ---- */
.cg2 .auth-split{display:grid;grid-template-columns:1.05fr .95fr;min-height:calc(100vh - 70px)}
@media(max-width:880px){.cg2 .auth-split{grid-template-columns:1fr;min-height:0}}
.cg2 .auth-proof{background:var(--cg-ink);color:var(--cg-canvas);padding:clamp(40px,5vw,72px);display:flex;flex-direction:column;justify-content:center;gap:26px;
  --cg-accent:var(--cg-silver-light)}
@media(max-width:880px){.cg2 .auth-proof{display:none}}
.cg2 .auth-proof .pbrand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem}
.cg2 .auth-proof .pbrand img{width:30px;height:30px;border-radius:50%}
.cg2 .auth-proof h1{font-size:clamp(1.8rem,3vw,2.5rem);max-width:16ch}
.cg2 .auth-proof p{color:oklch(0.80 0.01 252);max-width:42ch}
.cg2 .auth-proof .kicker{color:oklch(0.74 0.01 252)}
.cg2 .auth-proof .kicker .dot{background:var(--cg-canvas);box-shadow:0 0 0 4px oklch(1 0 0 /.14)}
.cg2 .status-card{display:flex;gap:clamp(18px,3vw,32px);flex-wrap:wrap;background:oklch(0.27 0.015 252);border:1px solid oklch(0.34 0.016 252);border-radius:14px;padding:18px 22px}
.cg2 .status-card .si{display:flex;flex-direction:column;gap:3px}
.cg2 .status-card .si span{font-size:0.78rem;color:oklch(0.72 0.01 252)}
.cg2 .status-card .si strong{font-weight:700}
.cg2 .proof-chat{background:oklch(0.27 0.015 252);border:1px solid oklch(0.34 0.016 252);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
.cg2 .proof-chat .b{max-width:88%;padding:11px 14px;border-radius:13px;font-size:0.92rem;line-height:1.45;background:oklch(0.32 0.016 252)}
.cg2 .proof-chat .b.user{align-self:flex-end;background:var(--cg-canvas);color:var(--cg-ink)}
.cg2 .auth-form-col{display:flex;align-items:center;justify-content:center;padding:clamp(40px,5vw,56px) 24px clamp(80px,10vw,96px)}
.cg2 .auth-form-col .inner{width:100%;max-width:400px}
.cg2 .auth-form-col .fhead{margin-bottom:26px}
.cg2 .auth-form-col .fhead h2{font-size:clamp(1.5rem,3vw,2rem)}
.cg2 .auth-form-col .fhead p{color:var(--cg-steel);margin-top:6px}
.cg2 .login-alert{background:var(--cg-silver-light);border:1px solid var(--cg-line);border-radius:12px;padding:14px;font-size:0.9rem;margin-bottom:18px}
.cg2 .login-alert a{color:var(--cg-ink);font-weight:700;text-decoration:underline}
.cg2 .label-row{display:flex;justify-content:space-between;align-items:center}
.cg2 .label-row a{font-size:0.85rem;color:var(--cg-ink);font-weight:600}
.cg2 .label-row a:hover{text-decoration:underline}
.cg2 .form-foot{margin-top:24px;font-size:0.9rem;color:var(--cg-steel)}
.cg2 .form-foot a{color:var(--cg-ink);font-weight:700}
.cg2 .form-foot a:hover{text-decoration:underline}
.cg2 .form-foot .legal{margin-top:10px;display:flex;gap:14px;font-size:0.82rem}

/* ---- onboarding (multi-step centered card) ---- */
.cg2 .onb-top{height:64px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--cg-line)}
.cg2 .onb-top .brand img{width:28px;height:28px;border-radius:50%}
.cg2 .onb-top .status{font-size:0.9rem;color:var(--cg-steel)}
.cg2 .onb{min-height:calc(100vh - 64px);display:flex;align-items:flex-start;justify-content:center;padding:clamp(36px,6vw,72px) 0 clamp(110px,14vw,140px)}
.cg2 .onb-inner{width:100%;max-width:560px}
.cg2 .onb-progress{margin-bottom:28px}
.cg2 .onb-progress .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:0.88rem}
.cg2 .onb-progress .row .s{font-weight:700;color:var(--cg-ink)}
.cg2 .onb-progress .row .l{color:var(--cg-steel)}
.cg2 .onb-progress .track{height:6px;background:var(--cg-silver);border-radius:999px;overflow:hidden}
.cg2 .onb-progress .fill{height:100%;background:var(--cg-ink);border-radius:999px;transition:width .4s var(--cg-ease)}
.cg2 .onb-card{background:var(--cg-surface);border:1px solid var(--cg-line);border-radius:var(--cg-radius-lg);box-shadow:var(--cg-shadow-lg);padding:clamp(28px,4vw,44px)}
.cg2 .onb-card .ic{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;margin:0 auto 18px;background:var(--cg-silver-light);border:1px solid var(--cg-line);font-size:1.5rem}
.cg2 .onb-head{text-align:center;margin-bottom:28px}
.cg2 .onb-head h1{font-size:clamp(1.6rem,3vw,2.1rem)}
.cg2 .onb-head p{color:var(--cg-steel);margin-top:8px}
.cg2 .field .hint{font-size:0.85rem;color:var(--cg-steel);margin-top:7px}
.cg2 .req{color:var(--cg-steel)}
.cg2 .onb-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px}
.cg2 .onb-actions .back{font-weight:600;color:var(--cg-steel)}
.cg2 .onb-actions .back:hover{color:var(--cg-ink)}
.cg2 .onb-help{text-align:center;margin-top:18px;font-size:0.9rem;color:var(--cg-steel)}
.cg2 .onb-help a{color:var(--cg-ink);font-weight:700}

/* ---- onboarding form extras (checkbox rows, disabled state, flash, wide inner) ---- */
.cg2 .onb-inner.wide{max-width:1040px}
.cg2 .onb-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-top:14px;font-size:0.9rem;color:var(--cg-steel);line-height:1.4}
.cg2 .onb-check:hover{color:var(--cg-ink)}
.cg2 .onb-check input[type=checkbox]{margin-top:2px;width:16px;height:16px;flex-shrink:0;accent-color:var(--cg-ink);cursor:pointer}
.cg2 .onb-check.is-disabled{opacity:0.4;pointer-events:none}
.cg2 .input.is-disabled{opacity:0.5;cursor:not-allowed}
.cg2 .onb-flash{margin-bottom:18px;display:flex;flex-direction:column;gap:10px}
.cg2 .onb-flash-item{padding:12px 16px;border-radius:10px;font-size:0.9rem;border:1px solid var(--cg-line-strong);background:var(--cg-surface);color:var(--cg-ink)}
.cg2 .onb-flash-item.is-error{border-color:oklch(0.70 0.13 25);background:oklch(0.97 0.02 25);color:oklch(0.40 0.13 25)}
.cg2 .onb-flash-item.is-success{border-color:oklch(0.70 0.12 150);background:oklch(0.97 0.02 150);color:oklch(0.40 0.12 150)}

/* ---- app shell (dashboard + logged-in pages) ---- */
.cg2.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh;width:100%;background:var(--cg-canvas)}
.cg2 .cg-aside{position:sticky;top:0;align-self:start;height:100vh;display:flex;flex-direction:column;background:var(--cg-surface);border-right:1px solid var(--cg-line);overflow-y:auto;z-index:60}
.cg2 .cg-aside__brand{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 18px 14px;border-bottom:1px solid var(--cg-line);position:sticky;top:0;background:var(--cg-surface);z-index:1}
.cg2 .cg-brandmark{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.12rem;letter-spacing:-0.03em;color:var(--cg-ink)}
.cg2 .cg-brandmark img{width:28px;height:28px;border-radius:50%}
.cg2 .cg-aside__close{display:none;width:36px;height:36px;border:1px solid var(--cg-line);border-radius:10px;background:var(--cg-surface);color:var(--cg-steel);font-size:1.2rem;cursor:pointer;align-items:center;justify-content:center}
.cg2 .cg-aside__selector{padding:16px 16px 6px}
.cg2 .cg-aside__label{display:block;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--cg-steel);margin-bottom:7px}
.cg2 .cg-select{width:100%;padding:9px 11px;font:inherit;font-size:0.9rem;font-weight:600;color:var(--cg-ink);background:var(--cg-surface-2);border:1px solid var(--cg-line);border-radius:10px;cursor:pointer;appearance:none}
.cg2 .cg-select:focus-visible{outline:2px solid var(--cg-accent);outline-offset:1px;border-color:var(--cg-accent)}
.cg2 .cg-nav{flex:1;padding:8px 12px 12px;display:flex;flex-direction:column;gap:4px}
.cg2 .cg-nav__group{padding:6px 0;border-bottom:1px solid var(--cg-line)}
.cg2 .cg-nav__group:last-child{border-bottom:0}
.cg2 .cg-nav__heading{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cg-steel);padding:8px 12px 5px}
.cg2 .cg-nav__item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;font-size:0.92rem;font-weight:600;color:var(--cg-steel);transition:background .15s var(--cg-ease),color .15s var(--cg-ease)}
.cg2 .cg-nav__item i{font-size:1.15rem;width:20px;text-align:center;flex:none}
.cg2 .cg-nav__item:hover{background:var(--cg-surface-2);color:var(--cg-ink)}
.cg2 .cg-nav__item.is-active{background:var(--cg-ink);color:var(--cg-canvas)}
.cg2 .cg-nav__item.is-active:hover{background:var(--cg-ink);color:var(--cg-canvas)}
.cg2 .cg-nav__tag{margin-left:auto;font-size:0.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--cg-accent);background:var(--cg-accent-tint);padding:2px 7px;border-radius:999px}
.cg2 .cg-aside__foot{padding:12px;border-top:1px solid var(--cg-line);position:sticky;bottom:0;background:var(--cg-surface)}
.cg2 .cg-nav__item--cta{justify-content:center;border:1px solid var(--cg-line-strong);background:var(--cg-surface);color:var(--cg-ink);box-shadow:var(--cg-shadow-sm)}
.cg2 .cg-nav__item--cta:hover{border-color:var(--cg-steel);background:var(--cg-surface-2)}
.cg2 .cg-overlay{position:fixed;inset:0;background:oklch(0.20 0.013 255 / .45);z-index:55}
.cg2 .cg-main{display:flex;flex-direction:column;min-width:0}
.cg2 .cg-topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px clamp(16px,3vw,32px);background:oklch(1 0 0 / .82);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--cg-line)}
.cg2 .cg-topbar__left{display:flex;align-items:center;gap:12px;min-width:0}
.cg2 .cg-topbar__menu{display:none;width:38px;height:38px;border:1px solid var(--cg-line);border-radius:10px;background:var(--cg-surface);color:var(--cg-ink);font-size:1.25rem;cursor:pointer;align-items:center;justify-content:center}
.cg2 .cg-topbar__title{font-size:1.15rem;font-weight:800;letter-spacing:-0.02em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg2 .cg-topbar__right{display:flex;align-items:center;gap:14px}
.cg2 .cg-topbar__alert{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--cg-surface-2);border:1px solid var(--cg-line);font-size:0.84rem;font-weight:600;color:var(--cg-ink)}
.cg2 .cg-account{display:flex;align-items:center;gap:10px}
.cg2 .cg-account__avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--cg-silver),var(--cg-steel));color:var(--cg-canvas);font-weight:800;font-size:0.85rem;display:grid;place-items:center;flex:none}
.cg2 .cg-account__email{font-size:0.86rem;font-weight:600;color:var(--cg-steel);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg2 .cg-account__signout{display:inline-flex;align-items:center;gap:6px;font-size:0.84rem;font-weight:600;color:var(--cg-steel);padding:6px 10px;border-radius:9px;transition:.15s}
.cg2 .cg-account__signout:hover{color:var(--cg-ink);background:var(--cg-surface-2)}
.cg2 .cg-banner{display:flex;align-items:center;gap:10px;padding:11px clamp(16px,3vw,32px);background:var(--cg-silver-light);border-bottom:1px solid var(--cg-line);font-size:0.9rem;font-weight:500;color:var(--cg-ink)}
.cg2 .cg-banner__cta{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-weight:700;white-space:nowrap}
.cg2 .cg-content{padding:clamp(20px,3vw,34px) clamp(16px,3vw,32px);max-width:1200px;width:100%;margin-inline:auto;display:flex;flex-direction:column;gap:22px}
.cg2 .cg-pagehead__title{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;letter-spacing:-0.03em;margin:0}
.cg2 .cg-pagehead__sub{color:var(--cg-steel);font-size:0.96rem;margin:6px 0 0}
.cg2 .cg-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.cg2 .cg-stat{background:var(--cg-surface);border:1px solid var(--cg-line);border-radius:var(--cg-radius);padding:18px 18px 16px;box-shadow:var(--cg-shadow-sm);transition:transform .2s var(--cg-ease),box-shadow .2s var(--cg-ease),border-color .2s}
.cg2 .cg-stat:hover{transform:translateY(-2px);box-shadow:var(--cg-shadow-md);border-color:var(--cg-line-strong)}
.cg2 .cg-stat__label{font-size:0.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--cg-steel)}
.cg2 .cg-stat__value{font-size:2rem;font-weight:800;letter-spacing:-0.03em;line-height:1.1;margin:8px 0 6px;font-variant-numeric:tabular-nums;color:var(--cg-ink)}
.cg2 .cg-stat__foot{display:inline-flex;align-items:center;gap:6px;font-size:0.78rem;color:var(--cg-steel)}
.cg2 .cg-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start}
.cg2 .cg-panel{background:var(--cg-surface);border:1px solid var(--cg-line);border-radius:var(--cg-radius);box-shadow:var(--cg-shadow-sm);padding:20px;min-width:0}
.cg2 .cg-panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.cg2 .cg-panel__title{font-size:1.05rem;font-weight:800;letter-spacing:-0.02em;margin:0}
.cg2 .cg-panel__meta{font-size:0.8rem;color:var(--cg-steel);font-weight:500}
.cg2 .cg-chart-wrap{position:relative;height:260px}
.cg2 .cg-chart-wrap canvas{max-height:260px}
.cg2 .cg-chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--cg-steel);font-size:0.92rem;margin:0}
.cg2 .cg-assistants{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cg2 .cg-assistant__link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;border:1px solid transparent;transition:background .15s,border-color .15s}
.cg2 .cg-assistant__link:hover{background:var(--cg-surface-2);border-color:var(--cg-line)}
.cg2 .cg-assistant__avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--cg-silver),var(--cg-steel));color:var(--cg-canvas);font-weight:800;display:grid;place-items:center;flex:none}
.cg2 .cg-assistant__body{min-width:0;flex:1}
.cg2 .cg-assistant__name{display:block;font-weight:700;font-size:0.94rem;color:var(--cg-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg2 .cg-assistant__meta{display:block;font-size:0.78rem;color:var(--cg-steel);margin-top:2px}
.cg2 .cg-assistant__chevron{color:var(--cg-steel);font-size:1.2rem;flex:none}
.cg2 .cg-empty{text-align:center;padding:28px 12px}
/* Respect the [hidden] attribute on empty-state components: .cg-chart-empty sets
   display:grid (0,2,0) which otherwise defeats [hidden]'s UA display:none, leaving
   the "No activity yet" overlay stuck on top of a populated chart. (0,2,1 wins.) */
.cg2 .cg-empty[hidden]{display:none}
.cg2 .cg-empty__icon{width:56px;height:56px;border-radius:50%;background:var(--cg-surface-2);border:1px solid var(--cg-line);display:grid;place-items:center;font-size:1.6rem;color:var(--cg-steel);margin:0 auto 14px}
.cg2 .cg-empty__title{font-weight:800;font-size:1.05rem;margin:0 0 6px}
.cg2 .cg-empty__sub{color:var(--cg-steel);font-size:0.9rem;margin:0 0 18px}
.cg2 .cg-quick__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.cg2 .cg-quick__item{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--cg-line);border-radius:12px;background:var(--cg-surface-2);transition:transform .2s var(--cg-ease),box-shadow .2s,border-color .2s}
.cg2 .cg-quick__item:hover{transform:translateY(-2px);box-shadow:var(--cg-shadow-md);border-color:var(--cg-line-strong)}
.cg2 .cg-quick__item i{font-size:1.4rem;color:var(--cg-ink);flex:none}
.cg2 .cg-quick__item strong{font-size:0.92rem;font-weight:700;color:var(--cg-ink)}
.cg2 .cg-quick__item small{font-size:0.78rem;color:var(--cg-steel)}
body.cg-aside-lock{overflow:hidden}
@media(max-width:980px){.cg2 .cg-grid{grid-template-columns:1fr}}
@media(max-width:900px){.cg2.app-shell{grid-template-columns:1fr}.cg2 .cg-aside{position:fixed;top:0;left:0;width:280px;max-width:86vw;transform:translateX(-100%);transition:transform .28s var(--cg-ease);box-shadow:var(--cg-shadow-lg)}.cg2 .cg-aside.is-open{transform:translateX(0)}.cg2 .cg-aside__close{display:flex}.cg2 .cg-topbar__menu{display:flex}.cg2 .cg-overlay[hidden]{display:none}}
@media(min-width:901px){.cg2 .cg-overlay{display:none}}
@media(max-width:560px){.cg2 .cg-account__email{display:none}.cg2 .cg-account__signout span{display:none}.cg2 .cg-banner__cta{display:none}}
@media(prefers-reduced-motion:reduce){.cg2 .cg-aside{transition:none}.cg2 .cg-stat,.cg2 .cg-quick__item,.cg2 .cg-assistant__link{transition:none}}

/* ---- homepage hero refinements (honest proof + materialize motion) ---- */
.cg2 .hero-trust .tick{color:var(--cg-ink);font-weight:800;margin-right:1px}
@media(prefers-reduced-motion:no-preference){
  /* product cards materialize after the answer, reinforcing "it works" */
  .cg2 .hero .prodrow .prod{opacity:0;transform:translateY(9px) scale(.97);animation:cg-prodin .55s var(--cg-ease-soft) forwards}
  .cg2 .hero .prodrow .prod:nth-child(1){animation-delay:.72s}
  .cg2 .hero .prodrow .prod:nth-child(2){animation-delay:.86s}
}
@keyframes cg-prodin{to{opacity:1;transform:none}}

/* ---- modernized cookie consent banner (redesigned pages only) ---- */
body.cg2-page #cookie-consent-banner.cybergine-cookie-banner{
  font-family:'Satoshi',system-ui,sans-serif!important;
  left:16px!important;right:16px!important;bottom:16px!important;top:auto!important;max-width:560px!important;margin:0 auto!important;
  display:flex!important;align-items:center!important;gap:14px!important;
  background:var(--cg-surface)!important;border:1px solid var(--cg-line-strong)!important;
  border-radius:14px!important;box-shadow:var(--cg-shadow-lg)!important;padding:14px 16px!important}
body.cg2-page .cybergine-cookie-banner__copy{color:var(--cg-steel)!important;font-size:0.88rem!important;line-height:1.45!important;flex:1!important;margin:0!important}
body.cg2-page .cybergine-cookie-banner__copy a{color:var(--cg-ink)!important;font-weight:700!important;text-decoration:underline!important}
body.cg2-page .cybergine-cookie-banner__actions{display:flex!important;gap:8px!important;flex:none!important;margin:0!important}
body.cg2-page .cybergine-cookie-banner__reject,
body.cg2-page .cybergine-cookie-banner__accept{
  font-family:inherit!important;font-weight:700!important;font-size:0.88rem!important;padding:9px 16px!important;
  border-radius:999px!important;cursor:pointer!important;border:1px solid transparent!important;transition:transform .15s,box-shadow .2s!important}
body.cg2-page .cybergine-cookie-banner__reject{background:var(--cg-surface)!important;color:var(--cg-ink)!important;border-color:var(--cg-line-strong)!important}
body.cg2-page .cybergine-cookie-banner__reject:hover{border-color:var(--cg-steel)!important}
body.cg2-page .cybergine-cookie-banner__accept{background:var(--cg-ink)!important;color:var(--cg-canvas)!important}
body.cg2-page .cybergine-cookie-banner__accept:hover{transform:translateY(-1px)!important;box-shadow:var(--cg-shadow-md)!important}
@media(max-width:560px){
  body.cg2-page #cookie-consent-banner.cybergine-cookie-banner{flex-direction:column!important;align-items:stretch!important}
  body.cg2-page .cybergine-cookie-banner__actions{justify-content:flex-end!important}}

/* ---- chat pages: viewport-lock the shell so the conversation list scrolls
   internally instead of growing the page (flex:1 + height needs a bounded parent) ---- */
.cg2.app-shell:has(.cg-content--chat){height:100vh;height:100dvh;min-height:0}
.cg2.app-shell:has(.cg-content--chat) .cg-main{height:100vh;height:100dvh;min-height:0;overflow:hidden}
/* Chat fills the viewport and scrolls internally; the body's min-h-screen otherwise
   let content push the whole page ~150px past the viewport on mobile (page scroll +
   composer drift). Pin the chat-page body to the dynamic viewport, no page scroll. */
body:has(.cg-content--chat){height:100vh;height:100dvh;overflow:hidden}

/* ---- mobile: stack the hero trust row and hide the vertical separators ---- */
@media(max-width:560px){
  .cg2 .hero-trust{flex-direction:column;align-items:flex-start;gap:11px}
  .cg2 .hero-trust .sep{display:none}
}

/* ---- unified, on-brand keyboard focus for links + nav items (was browser default) ---- */
.cg2 a:focus-visible{outline:2px solid var(--cg-accent);outline-offset:3px;border-radius:3px}
.cg2 .cg-nav__item:focus-visible,
.cg2 .nav-links a:focus-visible{outline:2px solid var(--cg-accent);outline-offset:-2px;border-radius:8px}

/* ============================================================
   Scroll reveal — additive motion. Content is VISIBLE by default;
   the hidden pre-state only applies under html.cg-reveal-on, which
   JS adds ONLY when IntersectionObserver is supported and the user
   hasn't requested reduced motion. A JS safety timer reveals
   everything regardless, so nothing can ship blank.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.cg-reveal-on .cg2 [data-reveal]{
    opacity:0;
    transform:translateY(24px);
    will-change:opacity, transform;
  }
  html.cg-reveal-on .cg2 [data-reveal="fade"]{ transform:none; }
  html.cg-reveal-on .cg2 [data-reveal="scale"]{ transform:translateY(14px) scale(.985); }
  html.cg-reveal-on .cg2 [data-reveal].is-revealed{
    opacity:1;
    transform:none;
    transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  }
}

/* ---- destructive actions are SECONDARY (monochrome has no red) ----
   Outlined, not a solid fill, so a delete can't be mistaken for the primary
   action. Fills ink only on deliberate hover. Higher specificity (.btn.btn-danger)
   overrides any per-page .btn-danger definitions. */
.cg2 .btn.btn-danger,.cg2 .btn.btn--danger{background:transparent;color:var(--cg-ink);border:1px solid var(--cg-line-strong);box-shadow:none}
.cg2 .btn.btn-danger:hover,.cg2 .btn.btn--danger:hover{background:var(--cg-ink);color:var(--cg-canvas);border-color:var(--cg-ink);transform:translateY(-2px);box-shadow:var(--cg-shadow-md)}
.cg2 .btn.btn-danger:disabled,.cg2 .btn.btn-danger[disabled],.cg2 .btn.btn--danger:disabled,.cg2 .btn.btn--danger[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* ---- neutralize Tailwind status colors site-wide (strict monochrome) ----
   Success/error/warning states (toasts, feedback) keep their distinguishing
   ICON; the green/red/yellow fills + text become monochrome. */
.cg2 .bg-green-50,.cg2 .bg-red-50,.cg2 .bg-yellow-50,
.cg2 .bg-green-100,.cg2 .bg-red-100,.cg2 .bg-yellow-100{background:var(--cg-surface-2)!important}
.cg2 .border-green-200,.cg2 .border-red-200,.cg2 .border-yellow-200,
.cg2 .border-green-300,.cg2 .border-red-300{border-color:var(--cg-line-strong)!important}
.cg2 .text-green-800,.cg2 .text-red-800,.cg2 .text-yellow-800,
.cg2 .text-green-700,.cg2 .text-red-700,.cg2 .text-yellow-700,
.cg2 .text-green-600,.cg2 .text-red-600,
.cg2 .text-green-500,.cg2 .text-red-500,.cg2 .text-yellow-500{color:var(--cg-ink)!important}

/* dark status badges/dots (unread counts, status indicators) -> ink, not red/green */
.cg2 .bg-green-400,.cg2 .bg-green-500,.cg2 .bg-green-600,.cg2 .bg-green-700,
.cg2 .bg-red-400,.cg2 .bg-red-500,.cg2 .bg-red-600,.cg2 .bg-red-700,
.cg2 .bg-yellow-400,.cg2 .bg-yellow-500,.cg2 .bg-yellow-600{background:var(--cg-ink)!important}
.cg2 .text-green-900,.cg2 .text-red-900,.cg2 .text-yellow-900{color:var(--cg-ink)!important}
/* The -400 shade was omitted above, so text-blue-400 channel icons (e.g. Telegram in
   the chat list) rendered off-palette while text-*-500 icons were already ink. */
.cg2 .text-blue-400,.cg2 .text-green-400,.cg2 .text-red-400,.cg2 .text-yellow-400{color:var(--cg-ink)!important}
/* The correction modal is appended to <body> (outside .cg2), so the status-colour
   neutralizer never reaches it — keep its red required-asterisk + error message
   on the monochrome palette like the rest of the app. */
#correction-panel .text-red-500,#correction-panel .text-red-600{color:var(--cg-ink)}

/* The toggled #success-message banner must respect its `.hidden` state. Component
   display rules (.ap-success / .cg-kb-success, display:flex) and an inline
   display:flex on the widget-installation copy were overriding `.hidden`, so a
   false "added successfully" banner showed on every load of add-products /
   add-knowledge / widget-installation. ID + !important beats the class rules AND
   the inline style; removing `.hidden` (to show it) restores its own display. */
#success-message.hidden{display:none!important}

/* Same `.hidden`-override class as above: `.cg2 .ap-btn{display:inline-flex}` (0,2,0)
   beat `.hidden` (0,1,0), so add-products' selection-gated "Delete Selected (0)"
   button showed on load with nothing selected. The combined selector (0,3,0) wins
   without !important; removing `.hidden` (on selection) restores its inline-flex. */
.cg2 .ap-btn.hidden{display:none}

/* blue/info was omitted above — neutralize the "Bot Managing"/info pills + bot-toggle too */
.cg2 .bg-blue-50,.cg2 .bg-blue-100,.cg2 .bg-blue-200{background:var(--cg-surface-2)!important}
.cg2 .text-blue-700,.cg2 .text-blue-600,.cg2 .text-blue-500{color:var(--cg-ink)!important}
.cg2 .border-blue-200,.cg2 .border-blue-300{border-color:var(--cg-line-strong)!important}
.cg2 .bg-blue-400,.cg2 .bg-blue-500,.cg2 .bg-blue-600,.cg2 .bg-blue-700{background:var(--cg-ink)!important}
.cg2 .hover\:bg-blue-200:hover,.cg2 .hover\:bg-yellow-200:hover{background:var(--cg-line)!important}

/* ---- a11y: clear keyboard-focus ring on every form control ----
   :focus-visible so it only shows for keyboard nav, not mouse clicks. Covers
   inputs/textareas/selects that don't use the .input class (which had only a
   faint 12% glow). Monochrome ink ring, always clearly visible. */
.cg2 input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-visible,
.cg2 textarea:focus-visible,
.cg2 select:focus-visible{outline:2px solid var(--cg-ink);outline-offset:1px}
/* plain <button>s without .btn (icon/close buttons) fell back to the UA blue ring */
.cg2 button:focus-visible{outline:2px solid var(--cg-ink);outline-offset:2px}

/* =====================================================================
   Phase 1 token additions — sourced from design_ref/reference/tokens/
   Appended as a second :root{} block; custom-property specificity is
   identical so these coexist cleanly with the block above.
   ===================================================================== */
:root {
  /* Typography tokens (typography.css lines 25-45) */
  --font-sans:    'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Satoshi', system-ui, sans-serif;
  --font-grotesk: 'Space Grotesk', 'Satoshi', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Space Grotesk', Menlo, monospace;
  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;
  --fw-bold: 700;     --fw-heavy: 800;   --fw-black: 900;
  --fs-display: clamp(2.7rem, 6vw, 5.2rem);
  --fs-h1:      clamp(2rem, 4vw, 2.7rem);
  --fs-h2:      clamp(2rem, 4vw, 3.1rem);
  --fs-h3:      clamp(1.15rem, 1.8vw, 1.4rem);
  --fs-lead:    clamp(1.08rem, 1.5vw, 1.26rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.92rem;
  --fs-xs:      0.78rem;
  --fs-mono:    0.8rem;
  --lh-tight:   1.03;    --lh-snug: 1.2;     --lh-body: 1.6;    --lh-relaxed: 1.65;
  --ls-display: -0.035em; --ls-heading: -0.03em; --ls-body: -0.011em; --ls-caps: 0.05em;

  /* Spacing / radius / motion tokens (spacing.css lines 10-49) */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-section: clamp(64px, 9vw, 120px);
  --space-hero:    clamp(48px, 7vw, 92px);
  --gutter: 24px;
  /* NOTE: --radius / --radius-lg parallel the existing --cg-radius / --cg-radius-lg
     tokens at identical values; .cgx components use the shorter names per the reference. */
  --radius-xs: 8px;   --radius-sm: 11px;  --radius: 14px;  --radius-lg: 22px;  --radius-pill: 999px;
  --dur-fast: 0.15s;  --dur: 0.2s;  --dur-slow: 0.7s;

  /* Semantic status colours (colors.css lines 33-72) */
  --cg-success:      oklch(0.62 0.13 150);
  --cg-success-tint: oklch(0.97 0.02 150);
  --cg-danger:       oklch(0.58 0.19 25);
  --cg-danger-tint:  oklch(0.97 0.02 25);
  --cg-warning:      oklch(0.75 0.14 80);

  /* Semantic text / surface aliases */
  --text-primary:  var(--cg-ink);       --text-strong:   var(--cg-graphite);
  --text-muted:    var(--cg-steel);     --text-on-ink:   var(--cg-canvas);
  --surface-page:  var(--cg-canvas);    --surface-card:  var(--cg-surface);
  --surface-inset: var(--cg-surface-2); --surface-ink:   var(--cg-ink);
  --border-hairline: var(--cg-line);    --border-control: var(--cg-line-strong);
}

/* Dark-section opt-in (colors.css lines 57-66) */
[data-cg-theme="ink"] {
  /* re-maps match the .cgx .ink block; added here for opt-in use outside .cgx */
}

/* =====================================================================
   .cgx Phase 1 scope — glass marketing chrome.
   Scoped under .cgx so it never collides with .cg2 app rules.
   Source: design_ref/reference/marketing/homepage-fx.css lines 8-72,
           178-182, 222-237 (verbatim except .foot h4 → .foot h2).
   ===================================================================== */
.cgx{
  --x-accent: var(--cg-ink);
  --x-glow: oklch(0.55 0.02 252 / .16);
  --x-panel: oklch(1 0 0 / .62);
  --x-panel-solid: oklch(1 0 0 / .92);
  --x-layer: oklch(1 0 0 / .5);
  --x-line: oklch(0.55 0.02 252 / .16);
  --x-line-2: oklch(0.45 0.02 252 / .28);
  --x-hair: oklch(0.45 0.02 252 / .12);
  font-family:var(--font-sans);color:var(--cg-ink);font-size:17px;line-height:1.6;letter-spacing:-0.011em;
  background:var(--cg-canvas);position:relative;overflow-x:clip;-webkit-font-smoothing:antialiased}
.cgx *{box-sizing:border-box}
.cgx a{color:inherit;text-decoration:none}
.cgx img{display:block;max-width:100%}
.cgx .wrap{max-width:1200px;margin-inline:auto;padding-inline:24px;position:relative;z-index:2}
.cgx h1,.cgx h2,.cgx h3{margin:0;font-weight:800;line-height:1.03;letter-spacing:-0.035em;text-wrap:balance}
.cgx .display{font-size:clamp(2.9rem,6.4vw,5.6rem);font-weight:900;letter-spacing:-0.045em}
.cgx h2{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-0.03em}
.cgx h3{font-size:clamp(1.15rem,1.8vw,1.42rem);letter-spacing:-0.02em;font-weight:700}
.cgx .lead{font-size:clamp(1.08rem,1.5vw,1.28rem);color:var(--cg-steel);line-height:1.6;text-wrap:pretty;margin:0}

/* mono HUD eyebrow */
.cgx .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:0.74rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cg-steel);
  border:1px solid var(--x-line);border-radius:999px;padding:7px 14px;background:var(--x-layer);backdrop-filter:blur(8px)}
.cgx .eyebrow .pip{width:6px;height:6px;border-radius:50%;background:var(--x-accent);box-shadow:0 0 0 4px var(--x-glow)}

/* ---- ambient backdrop ---- */
.cgx .amb{position:absolute;inset:0;top:0;height:1400px;z-index:0;pointer-events:none;overflow:hidden}
.cgx .amb .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;
  background:radial-gradient(circle at 30% 30%,var(--x-glow),transparent 70%)}
.cgx .amb .o1{width:52vw;height:52vw;top:-14vw;right:-8vw}
.cgx .amb .o2{width:38vw;height:38vw;top:38vw;left:-10vw;opacity:.4}
.cgx[data-motion="on"] .amb .o1{animation:x-orb1 24s ease-in-out infinite alternate}
.cgx[data-motion="on"] .amb .o2{animation:x-orb2 30s ease-in-out infinite alternate}
@keyframes x-orb1{to{transform:translate(-4%,5%) scale(1.12)}}
@keyframes x-orb2{to{transform:translate(6%,-3%) scale(1.14)}}
.cgx .gridlines{position:absolute;inset:0;top:0;height:1000px;z-index:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(var(--x-hair) 1px,transparent 1px),linear-gradient(90deg,var(--x-hair) 1px,transparent 1px);
  background-size:58px 58px;mask-image:radial-gradient(ellipse 90% 55% at 60% 0%,black,transparent 72%)}

/* ---- buttons ---- */
.cgx .btn{display:inline-flex;align-items:center;gap:9px;font:inherit;font-weight:700;font-size:1rem;
  border:1px solid transparent;border-radius:999px;padding:15px 27px;cursor:pointer;line-height:1;white-space:nowrap;
  transition:transform .2s var(--cg-ease),box-shadow .25s var(--cg-ease),background .2s var(--cg-ease),border-color .2s}
.cgx .btn:active{transform:translateY(1px)}
.cgx .btn:focus-visible{outline:2px solid var(--x-accent);outline-offset:3px}
.cgx .btn-primary{background:var(--x-accent);color:var(--cg-canvas);box-shadow:var(--cg-shadow-md)}
.cgx .btn-primary:hover{transform:translateY(-2px);box-shadow:var(--cg-shadow-lg)}
.cgx .btn-ghost{background:var(--x-panel);color:var(--cg-ink);border-color:var(--x-line-2);backdrop-filter:blur(10px)}
.cgx .btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--cg-shadow-md);border-color:var(--cg-steel)}
.cgx .btn .arrow{transition:transform .25s var(--cg-ease)}
.cgx .btn:hover .arrow{transform:translateX(4px)}

/* ---- nav ---- */
.cgx .nav{position:sticky;top:0;z-index:100;background:oklch(0.985 0.003 252 / .72);
  backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.cgx .nav.scrolled{border-color:var(--x-line);box-shadow:var(--cg-shadow-sm)}
.cgx .nav .row{display:flex;align-items:center;justify-content:space-between;height:72px}
.cgx .brand{display:flex;align-items:center;gap:11px;font-weight:900;font-size:1.2rem;letter-spacing:-0.03em}
.cgx .brand img{width:32px;height:32px;border-radius:50%}
.cgx .nav-links{display:flex;align-items:center;gap:30px;font-weight:500;color:var(--cg-steel);font-size:0.96rem}
.cgx .nav-links a:hover{color:var(--cg-ink)}
.cgx .nav-links a:focus-visible{outline:2px solid var(--x-accent);outline-offset:2px;border-radius:4px}
.cgx .nav-cta{display:flex;align-items:center;gap:16px}
.cgx .nav-cta .signin{font-weight:600}
@media(max-width:880px){.cgx .nav-links{display:none}}
/* hamburger for .cgx pages — same tokens, inherits .cg2 rules */
.cgx .nav-hamburger{display:none;flex-direction:column;justify-content:space-between;width:24px;height:18px;min-width:24px;flex-shrink:0;background:none;border:none;cursor:pointer;padding:0;margin-left:8px}
.cgx .nav-hamburger span{display:block;height:2px;background:var(--cg-ink);border-radius:2px;transition:transform .22s ease,opacity .22s ease}
@media(max-width:880px){.cgx .nav-hamburger{display:flex}}
.cgx .mobile-menu{position:fixed;top:64px;left:0;right:0;z-index:200;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.06);box-shadow:0 8px 32px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:4px;padding:16px 20px 20px}
.cgx .mobile-menu[hidden]{display:none}
.cgx .mobile-menu a{padding:10px 4px;font-weight:500;color:var(--cg-ink);text-decoration:none;border-radius:6px}
.cgx .mobile-menu .btn{margin-top:8px;text-align:center}
@media(prefers-reduced-motion:no-preference){.cgx .mobile-menu{animation:cg-menu-in .18s ease}}

/* ---- dark feature wrapper (pricing + cta) ---- */
.cgx .ink{position:relative;background:var(--cg-ink);color:oklch(0.86 0.008 252);overflow:hidden;
  --x-accent:var(--cg-silver-light);--x-glow:oklch(1 0 0 / .12);--x-panel:oklch(1 0 0 / .05);--x-line:oklch(1 0 0 / .14);--x-line-2:oklch(1 0 0 / .28);--x-hair:oklch(1 0 0 / .1);--x-layer:oklch(1 0 0 / .08)}
.cgx .ink::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:900px;height:640px;
  background:radial-gradient(circle,oklch(1 0 0 / .08),transparent 62%);pointer-events:none}

/* ---- footer ---- */
.cgx .foot{border-top:1px solid var(--x-line);padding:56px 0 40px;color:var(--cg-steel);font-size:0.92rem;background:var(--cg-canvas)}
.cgx .foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
@media(max-width:760px){.cgx .foot-top{grid-template-columns:1fr 1fr}}
.cgx .foot h2{font-size:0.8rem;font-weight:700;color:var(--cg-ink);text-transform:uppercase;letter-spacing:.05em;margin:0 0 14px}
.cgx .foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.cgx .foot a:hover{color:var(--cg-ink)}
.cgx .fbrand{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--cg-ink);font-size:1.15rem}
.cgx .fbrand img{width:30px;height:30px;border-radius:50%}
.cgx .foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:42px;padding-top:24px;border-top:1px solid var(--x-line);font-size:0.86rem}

/* ---- scroll reveal ---- */
@media(prefers-reduced-motion:no-preference){
  .cgx[data-motion="on"] [data-rev]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--cg-ease-soft),transform .7s var(--cg-ease-soft)}
  .cgx[data-motion="on"] [data-rev].in{opacity:1;transform:none}
}

/* ================================================================
   PHASE 2 — homepage hero, device, trust, cards, pricing, final CTA
   ================================================================ */

/* ---- hero ---- */
.cgx .hero{position:relative;padding:clamp(56px,8vw,110px) 0 clamp(60px,8vw,110px)}
.cgx .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4vw,64px);align-items:center}
@media(max-width:980px){.cgx .hero-grid{grid-template-columns:1fr;gap:48px}}
.cgx .hero h1{margin:22px 0 0}
.cgx .hero h1 .hl{position:relative;white-space:nowrap}
.cgx .hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.13em;border-radius:2px;background:linear-gradient(90deg,var(--x-accent),transparent);opacity:.35}
.cgx .hero .lead{margin:24px 0 0;max-width:40ch}
.cgx .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 0}
.cgx .hero-trust{display:flex;align-items:center;gap:20px;margin:30px 0 0;flex-wrap:wrap;color:var(--cg-steel);font-size:0.9rem;font-weight:500}
.cgx .hero-trust .t{display:inline-flex;align-items:center;gap:7px}
.cgx .hero-trust .t b{color:var(--cg-ink);font-weight:700}
.cgx .hero-trust .tick{color:var(--x-accent);font-weight:800}
.cgx .hero-trust .sep{width:1px;height:24px;background:var(--x-line-2)}
@media(max-width:560px){.cgx .hero-trust{flex-direction:column;align-items:flex-start;gap:11px}.cgx .hero-trust .sep{display:none}}

/* ---- hero glass device ---- */
.cgx .stage{position:relative}
.cgx .float{position:absolute;z-index:3;background:var(--x-panel-solid);border:1px solid var(--x-line);border-radius:14px;box-shadow:var(--cg-shadow-md);padding:10px 13px;font-size:0.8rem;font-weight:600;display:flex;align-items:center;gap:8px;backdrop-filter:blur(12px)}
.cgx .float .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:0.9rem;background:var(--x-layer);color:var(--x-accent);border:1px solid var(--x-line)}
.cgx .float .mono{font-family:var(--font-mono);font-size:0.78rem}
.cgx .f1{top:-16px;left:-20px}.cgx .f2{bottom:34px;right:-24px}
@media(max-width:980px){.cgx .float{display:none}}
.cgx[data-motion="on"] .device-wrap{animation:x-float 7s ease-in-out infinite}
@keyframes x-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.cgx .device{position:relative;background:var(--x-panel);border:1px solid var(--x-line);border-radius:24px;overflow:hidden;backdrop-filter:blur(22px) saturate(1.4);box-shadow:0 50px 90px -34px oklch(0.20 0.013 255 / .34),0 16px 36px -18px oklch(0.20 0.013 255 / .2)}
.cgx .device::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(155deg,oklch(1 0 0 / .55),transparent 40%);opacity:.7}
.cgx .device .corner{position:absolute;width:14px;height:14px;z-index:4;border:1.5px solid var(--x-accent);opacity:.5;pointer-events:none}
.cgx .corner.tl{top:10px;left:10px;border-right:0;border-bottom:0}
.cgx .corner.tr{top:10px;right:10px;border-left:0;border-bottom:0}
.cgx .corner.bl{bottom:10px;left:10px;border-right:0;border-top:0}
.cgx .corner.br{bottom:10px;right:10px;border-left:0;border-top:0}
.cgx .dev-top{position:relative;display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--x-hair)}
.cgx .dev-top .av{width:28px;height:28px;border-radius:9px;background:conic-gradient(from 140deg,var(--cg-silver),var(--cg-steel),var(--cg-silver))}
.cgx .dev-top .nm{font-weight:800;font-size:0.94rem}
.cgx .dev-top .st{margin-left:auto;font-family:var(--font-mono);font-size:0.72rem;color:var(--x-accent);background:var(--x-layer);border:1px solid var(--x-line);padding:4px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.cgx .dev-top .st .d{width:6px;height:6px;border-radius:50%;background:oklch(0.68 0.16 150)}
.cgx .dev-chat{position:relative;padding:20px 18px;display:flex;flex-direction:column;gap:13px;min-height:340px}
.cgx .b{max-width:86%;padding:12px 15px;border-radius:16px;font-size:0.95rem;line-height:1.5}
.cgx .b.user{align-self:flex-end;background:var(--x-accent);color:var(--cg-canvas);border-bottom-right-radius:5px}
.cgx .b.bot{align-self:flex-start;background:var(--x-layer);border:1px solid var(--x-hair);border-bottom-left-radius:5px;backdrop-filter:blur(6px)}
.cgx .b .meta{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:0.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--cg-steel);margin-bottom:6px}
.cgx .b .meta .dot{width:5px;height:5px;border-radius:50%;background:var(--x-accent)}
.cgx .prodrow{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
.cgx .prod{border:1px solid var(--x-hair);border-radius:12px;overflow:hidden;background:var(--x-panel-solid)}
.cgx .prod .ph{height:74px;display:grid;place-items:center;background:radial-gradient(120% 120% at 30% 20%,var(--x-layer),transparent)}
.cgx .prod .ph img{width:52px;height:52px;object-fit:contain}
.cgx .prod .mt{padding:8px 10px}
.cgx .prod .mt .n{font-weight:700;font-size:0.74rem;line-height:1.2}
.cgx .prod .mt .p{font-size:0.7rem;color:var(--cg-steel);margin-top:3px}
.cgx .prod .mt .p b{color:var(--cg-ink)}
.cgx .srcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;align-items:center}
.cgx .srcs .lbl{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cg-steel)}
.cgx .srcs .s{font-size:0.66rem;font-weight:700;background:var(--x-layer);border:1px solid var(--x-hair);border-radius:999px;padding:3px 9px;display:inline-flex;align-items:center;gap:5px}
.cgx .srcs .s i{color:var(--cg-steel);font-size:0.68rem}
.cgx .typing{align-self:flex-start;display:flex;gap:6px;padding:12px 15px;border-radius:16px;border-bottom-left-radius:5px;background:var(--x-layer);border:1px solid var(--x-hair)}
.cgx .typing span{width:7px;height:7px;border-radius:50%;background:var(--x-accent);opacity:.4}
.cgx[data-motion="on"] .typing span{animation:x-tb 1s infinite}
.cgx .typing span:nth-child(2){animation-delay:.15s}.cgx .typing span:nth-child(3){animation-delay:.3s}
@keyframes x-tb{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.cgx .dev-composer{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid var(--x-hair)}
.cgx .dev-composer .fake{flex:1;color:var(--cg-steel);font-size:0.88rem}
.cgx .dev-composer .send{width:34px;height:34px;border-radius:9px;background:var(--x-accent);color:var(--cg-canvas);display:grid;place-items:center;box-shadow:var(--cg-shadow-sm)}

/* ---- trust strip ---- */
.cgx .trust{border-block:1px solid var(--x-line);background:oklch(0.965 0.004 252 / .7);backdrop-filter:blur(10px)}
.cgx .trust .row{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,54px);padding:22px 0;flex-wrap:wrap;color:var(--cg-steel);font-weight:600;font-size:0.94rem}
.cgx .trust .pill{display:inline-flex;align-items:center;gap:9px}
.cgx .trust .pill b{color:var(--cg-ink);font-weight:800;font-variant-numeric:tabular-nums}

/* ---- section shell ---- */
.cgx .block{padding:clamp(72px,9vw,128px) 0;position:relative}
.cgx .sec-head{max-width:64ch}
.cgx .sec-head h2{margin-top:14px}
.cgx .sec-head .lead{margin-top:16px;max-width:58ch}

/* ---- glass cards ---- */
.cgx .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
@media(max-width:880px){.cgx .cards3{grid-template-columns:1fr}}
.cgx .gcard{position:relative;background:var(--x-panel);border:1px solid var(--x-line);border-radius:20px;padding:28px 26px;backdrop-filter:blur(14px);box-shadow:var(--cg-shadow-sm);overflow:hidden;transition:transform .3s var(--cg-ease),box-shadow .3s var(--cg-ease),border-color .3s}
.cgx .gcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(150deg,oklch(1 0 0 / .5),transparent 44%);opacity:.6}
.cgx .gcard:hover{transform:translateY(-5px);box-shadow:var(--cg-shadow-lg);border-color:var(--x-line-2)}
.cgx .gcard .num{font-family:var(--font-mono);font-size:0.76rem;font-weight:700;color:var(--x-accent);letter-spacing:.04em;position:relative}
.cgx .gcard h3{margin:14px 0 8px;position:relative}
.cgx .gcard p{color:var(--cg-steel);font-size:0.98rem;margin:0;position:relative}
.cgx .gcard .demo{margin-top:18px;padding-top:16px;border-top:1px dashed var(--x-line);font-size:0.88rem;position:relative}
.cgx .gcard .demo .q{font-weight:600}
.cgx .gcard .demo .a{color:var(--cg-steel);margin-top:6px}
.cgx .gcard .demo .src{margin-top:10px;font-size:0.76rem;color:var(--x-accent);font-weight:600}
.cgx .gcard .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.35rem;background:var(--x-layer);border:1px solid var(--x-line);margin-bottom:16px;position:relative;color:var(--cg-ink)}
.cgx .gcard.link a{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:700;font-size:0.92rem;position:relative}
.cgx .gcard.link .arrow{transition:transform .2s var(--cg-ease)}
.cgx .gcard.link:hover .arrow{transform:translateX(4px)}

/* ---- ink section additional overrides ---- */
.cgx .ink .eyebrow{color:oklch(0.78 0.01 252);border-color:oklch(1 0 0 / .16);background:oklch(1 0 0 / .05)}
.cgx .ink h2{color:var(--cg-canvas)}
.cgx .ink .lead{color:oklch(0.78 0.01 252)}
.cgx .ink .gcard{background:oklch(1 0 0 / .05);border-color:oklch(1 0 0 / .12)}
.cgx .ink .gcard::before{background:linear-gradient(150deg,oklch(1 0 0 / .1),transparent 44%)}

/* ---- pricing plans ---- */
.cgx .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px;align-items:stretch}
@media(max-width:980px){.cgx .plans{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cgx .plans{grid-template-columns:1fr}}
.cgx .plan{display:flex;flex-direction:column;background:oklch(1 0 0 / .04);border:1px solid oklch(1 0 0 / .12);border-radius:18px;padding:26px 22px;backdrop-filter:blur(8px);transition:transform .25s var(--cg-ease),border-color .25s,box-shadow .25s}
.cgx .plan:hover{transform:translateY(-4px);border-color:oklch(1 0 0 / .26)}
.cgx .plan.pop{background:oklch(1 0 0 / .08);border-color:var(--cg-silver-light);box-shadow:0 30px 70px -30px oklch(1 0 0 / .2);position:relative}
.cgx .plan.pop .tag{position:absolute;top:-12px;left:22px;background:var(--cg-canvas);color:var(--cg-ink);font-size:0.72rem;font-weight:800;padding:5px 11px;border-radius:999px;letter-spacing:.02em}
.cgx .plan .pname{font-weight:700;font-size:1.08rem;color:var(--cg-canvas)}
.cgx .plan .pdesc{color:oklch(0.74 0.01 252);font-size:0.86rem;margin-top:6px;min-height:38px}
.cgx .plan .price{font-size:2.4rem;font-weight:800;letter-spacing:-0.04em;margin:16px 0 2px;color:var(--cg-canvas)}
.cgx .plan .price small{font-size:0.92rem;font-weight:600;color:oklch(0.72 0.01 252)}
.cgx .plan ul{list-style:none;margin:18px 0 22px;padding:0;display:flex;flex-direction:column;gap:10px;font-size:0.9rem;color:oklch(0.86 0.01 252)}
.cgx .plan li{display:flex;gap:9px;align-items:flex-start}
.cgx .plan li .ck{color:var(--cg-silver-light);font-weight:800;flex:none}
.cgx .plan .btn{margin-top:auto;justify-content:center;width:100%}
.cgx .plan .btn-primary{background:var(--cg-canvas);color:var(--cg-ink)}
.cgx .plan .btn-ghost{background:transparent;color:var(--cg-canvas);border-color:oklch(1 0 0 / .3)}
.cgx .plan .btn-ghost:hover{border-color:var(--cg-canvas)}

/* ---- final cta ---- */
.cgx .final{text-align:center}
.cgx .final .lead{margin:16px auto 0;max-width:50ch;text-align:center}
.cgx .final .frow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.cgx .final .btn-primary{background:var(--cg-canvas);color:var(--cg-ink)}
.cgx .final .btn-ghost{background:transparent;color:var(--cg-canvas);border-color:oklch(1 0 0 / .3)}
.cgx .final .note{margin-top:18px;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:.04em;color:oklch(0.72 0.01 252);text-transform:uppercase}

/* ================================================================
   PHASE 2 — interior pages (pages-fx.css verbatim)
   ================================================================ */

/* ---- page hero (interior pages) ---- */
.cgx .page-hero{position:relative;padding:clamp(58px,8vw,104px) 0 clamp(40px,5vw,64px);text-align:center}
.cgx .page-hero .wrap{max-width:820px}
.cgx .page-hero .eyebrow{margin-bottom:22px}
.cgx .page-hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem);font-weight:900;letter-spacing:-0.04em}
.cgx .page-hero .lead{margin:22px auto 0;max-width:52ch}
.cgx .page-hero.left{text-align:left}
.cgx .page-hero.left .wrap{max-width:1200px}
.cgx .page-hero.left .lead{margin-left:0}

/* ---- prose ---- */
.cgx .prose{max-width:66ch;margin-inline:auto}
.cgx .prose p{color:var(--cg-steel);font-size:1.08rem;line-height:1.75;margin:0 0 1.1em}
.cgx .prose h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:2em 0 .6em}
.cgx .prose strong{color:var(--cg-ink);font-weight:700}

/* ---- stat band ---- */
.cgx .statband{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
@media(max-width:760px){.cgx .statband{grid-template-columns:1fr}}
.cgx .stat{background:var(--x-panel);border:1px solid var(--x-line);border-radius:18px;padding:26px 24px;backdrop-filter:blur(12px);box-shadow:var(--cg-shadow-sm)}
.cgx .stat .v{font-size:2.6rem;font-weight:900;letter-spacing:-0.04em;font-variant-numeric:tabular-nums}
.cgx .stat .l{color:var(--cg-steel);font-size:0.94rem;margin-top:6px}

/* ---- feature split ---- */
.cgx .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:900px){.cgx .split{grid-template-columns:1fr;gap:36px}}
.cgx .split.rev .split__media{order:-1}
.cgx .split__media{position:relative}
.cgx .split h3{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-0.03em;margin:14px 0 0}
.cgx .split p{color:var(--cg-steel);font-size:1.05rem;line-height:1.65;margin:16px 0 0;max-width:46ch}
.cgx .featlist{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.cgx .featlist li{display:flex;gap:11px;align-items:flex-start;color:var(--cg-steel);font-size:1rem}
.cgx .featlist .ck{width:24px;height:24px;flex:none;border-radius:8px;display:grid;place-items:center;font-size:0.9rem;background:var(--x-layer);border:1px solid var(--x-line);color:var(--x-accent)}
/* glass demo tile used inside a split */
.cgx .demo-tile{background:var(--x-panel);border:1px solid var(--x-line);border-radius:22px;padding:22px;backdrop-filter:blur(16px);box-shadow:var(--cg-shadow-lg);position:relative;overflow:hidden}
.cgx .demo-tile::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(150deg,oklch(1 0 0 / .5),transparent 44%);opacity:.6;pointer-events:none}
.cgx .demo-tile .b{max-width:90%;padding:12px 15px;border-radius:16px;font-size:0.94rem;line-height:1.5;margin-bottom:11px;position:relative}
.cgx .demo-tile .b.user{margin-left:auto;background:var(--x-accent);color:var(--cg-canvas);border-bottom-right-radius:5px}
.cgx .demo-tile .b.bot{background:var(--x-layer);border:1px solid var(--x-hair);border-bottom-left-radius:5px}
.cgx .demo-tile .srcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.cgx .demo-tile .srcs .s{font-size:0.66rem;font-weight:700;background:var(--x-layer);border:1px solid var(--x-hair);border-radius:999px;padding:3px 9px;display:inline-flex;align-items:center;gap:5px}
.cgx .demo-tile .srcs .s i{color:var(--cg-steel)}

/* ---- blog grid ---- */
.cgx .bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
@media(max-width:900px){.cgx .bloggrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cgx .bloggrid{grid-template-columns:1fr}}
.cgx .bcard{display:flex;flex-direction:column;background:var(--x-panel);border:1px solid var(--x-line);border-radius:18px;overflow:hidden;backdrop-filter:blur(12px);box-shadow:var(--cg-shadow-sm);transition:transform .3s var(--cg-ease),box-shadow .3s var(--cg-ease),border-color .3s}
.cgx .bcard:hover{transform:translateY(-5px);box-shadow:var(--cg-shadow-lg);border-color:var(--x-line-2)}
.cgx .bcard__img{aspect-ratio:16/10;display:grid;place-items:center;font-size:2rem;color:var(--cg-steel);background:radial-gradient(120% 120% at 30% 20%,var(--x-layer),transparent),linear-gradient(135deg,var(--cg-silver-light),var(--cg-silver))}
.cgx .bcard__body{padding:20px;display:flex;flex-direction:column;flex:1}
.cgx .bcard__meta{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.cgx .bcard__tag{font-family:var(--font-mono);font-size:0.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--x-accent);background:var(--x-layer);border:1px solid var(--x-line);border-radius:999px;padding:4px 9px}
.cgx .bcard__meta time{color:var(--cg-steel);font-size:0.78rem;margin-left:auto}
.cgx .bcard h3{font-size:1.16rem;line-height:1.25;margin:0 0 8px}
.cgx .bcard p{color:var(--cg-steel);font-size:0.92rem;line-height:1.55;margin:0;flex:1}
.cgx .bcard__more{margin-top:16px;font-weight:700;font-size:0.88rem;display:inline-flex;align-items:center;gap:6px}

/* ---- auth split ---- */
.cgx.auth-body{min-height:100vh;display:flex;flex-direction:column}
.cgx .auth{flex:1;display:grid;grid-template-columns:1.05fr .95fr;min-height:calc(100vh - 0px)}
@media(max-width:880px){.cgx .auth{grid-template-columns:1fr}}
.cgx .auth__proof{position:relative;background:var(--cg-ink);color:oklch(0.86 0.008 252);padding:clamp(40px,5vw,76px);display:flex;flex-direction:column;justify-content:center;gap:26px;overflow:hidden;--x-accent:var(--cg-silver-light);--x-layer:oklch(1 0 0 / .08);--x-line:oklch(1 0 0 / .14);--x-hair:oklch(1 0 0 / .1)}
@media(max-width:880px){.cgx .auth__proof{display:none}}
.cgx .auth__proof::before{content:"";position:absolute;top:-20%;left:40%;width:640px;height:520px;background:radial-gradient(circle,oklch(1 0 0 / .09),transparent 62%);pointer-events:none}
.cgx .auth__proof .brand{display:flex;align-items:center;gap:11px;font-weight:900;font-size:1.2rem;position:relative}
.cgx .auth__proof .brand img{width:32px;height:32px;border-radius:50%}
.cgx .auth__proof h2{font-size:clamp(1.8rem,3vw,2.6rem);color:var(--cg-canvas);max-width:16ch;position:relative}
.cgx .auth__proof p{color:oklch(0.78 0.01 252);max-width:40ch;position:relative}
.cgx .auth__proof .eyebrow{position:relative;color:oklch(0.78 0.01 252);border-color:oklch(1 0 0 / .16);background:oklch(1 0 0 / .05);width:fit-content}
.cgx .auth__form{display:flex;align-items:center;justify-content:center;padding:clamp(40px,5vw,64px) 24px}
.cgx .auth__card{width:100%;max-width:420px}
.cgx .auth__card h1{font-size:clamp(1.7rem,3vw,2.1rem);letter-spacing:-0.03em}
.cgx .auth__card .sub{color:var(--cg-steel);margin:8px 0 26px}
.cgx .field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.cgx .field label{font-size:0.9rem;font-weight:600}
.cgx .field input{font:inherit;font-size:1rem;color:var(--cg-ink);background:var(--x-panel-solid);border:1px solid var(--x-line-2);border-radius:12px;padding:13px 15px;outline:none;transition:border-color .2s,box-shadow .2s}
.cgx .field input:focus{border-color:var(--cg-ink);box-shadow:0 0 0 3px var(--x-glow)}
.cgx .field input::placeholder{color:var(--cg-steel)}
.cgx .auth__card .btn-block{width:100%;justify-content:center;padding:15px;margin-top:4px}
.cgx .auth__alt{text-align:center;color:var(--cg-steel);font-size:0.92rem;margin-top:22px}
.cgx .auth__alt a{color:var(--cg-ink);font-weight:700}
.cgx .auth__alt a:hover{text-decoration:underline}
.cgx .proof-chat{position:relative;background:oklch(1 0 0 / .06);border:1px solid oklch(1 0 0 / .12);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;backdrop-filter:blur(10px)}
.cgx .proof-chat .b{max-width:88%;padding:11px 14px;border-radius:14px;font-size:0.9rem;line-height:1.45;background:oklch(1 0 0 / .08)}
.cgx .proof-chat .b.user{align-self:flex-end;background:var(--cg-canvas);color:var(--cg-ink)}

/* ---- compare table ---- */
.cgx.pg-compare .cmp{width:100%;border-collapse:collapse;margin-top:46px}
.cgx.pg-compare .cmp thead th{padding:14px 18px;font-weight:700;font-size:0.94rem;text-align:left;border-bottom:2px solid var(--x-line)}
.cgx.pg-compare .cmp thead th.own{color:var(--cg-canvas);background:var(--cg-ink);border-radius:12px 12px 0 0}
.cgx.pg-compare .cmp td{padding:13px 18px;border-bottom:1px solid var(--x-line);font-size:0.94rem;vertical-align:middle}
.cgx.pg-compare .cmp td.feat{font-weight:600;color:var(--cg-ink)}
.cgx.pg-compare .cmp td.own{background:oklch(0.96 0.005 252 / .7)}
.cgx.pg-compare .cmp .yes{color:oklch(0.56 0.15 150);font-weight:700}
.cgx.pg-compare .cmp .no{color:var(--cg-steel)}
@media(max-width:700px){.cgx.pg-compare .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.cgx.pg-compare .cmp th,.cgx.pg-compare .cmp td{min-width:120px}}

/* ---- contact page ---- */
.cgx.pg-contact .contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,5vw,72px);align-items:start;margin-top:52px}
@media(max-width:900px){.cgx.pg-contact .contact-grid{grid-template-columns:1fr}}
.cgx.pg-contact .cform{background:var(--x-panel);border:1px solid var(--x-line);border-radius:20px;padding:36px;backdrop-filter:blur(14px);box-shadow:var(--cg-shadow-md)}
.cgx.pg-contact .cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.cgx.pg-contact .cform .row2{grid-template-columns:1fr}}
.cgx.pg-contact textarea.tinput{resize:vertical;min-height:130px}
.cgx.pg-contact .cchan{display:flex;flex-direction:column;gap:16px}
.cgx.pg-contact .cchan a{display:flex;align-items:center;gap:13px;padding:18px;background:var(--x-panel);border:1px solid var(--x-line);border-radius:16px;font-weight:600;color:var(--cg-ink);text-decoration:none;backdrop-filter:blur(12px);transition:border-color .2s,transform .2s}
.cgx.pg-contact .cchan a:hover{border-color:var(--x-line-2);transform:translateX(4px)}
.cgx.pg-contact .cchan .ic{width:40px;height:40px;flex:none;border-radius:11px;background:var(--x-layer);border:1px solid var(--x-line);display:grid;place-items:center;font-size:1.1rem;color:var(--cg-steel)}

/* ---- help center page ---- */
.cgx.pg-help .hsearch{display:flex;gap:10px;margin-top:46px;max-width:580px}
.cgx.pg-help .hsearch input{flex:1;font:inherit;font-size:1rem;padding:14px 18px;border:1px solid var(--x-line-2);border-radius:12px;background:var(--x-panel-solid);color:var(--cg-ink);outline:none;transition:border-color .2s}
.cgx.pg-help .hsearch input:focus{border-color:var(--cg-ink)}
.cgx.pg-help .hsearch button{font:inherit;font-weight:700;padding:14px 22px;border:0;border-radius:12px;background:var(--cg-ink);color:var(--cg-canvas);cursor:pointer}
.cgx.pg-help .faq{margin-top:52px;display:flex;flex-direction:column;gap:10px;max-width:72ch}
.cgx.pg-help .faq__item{background:var(--x-panel);border:1px solid var(--x-line);border-radius:16px;overflow:hidden;backdrop-filter:blur(12px);transition:border-color .2s}
.cgx.pg-help .faq__item.open{border-color:var(--x-line-2)}
.cgx.pg-help .faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font:inherit;font-weight:700;font-size:1rem;text-align:left;background:transparent;border:0;cursor:pointer;color:var(--cg-ink)}
.cgx.pg-help .faq__q::after{content:"＋";font-size:1.1rem;font-weight:700;color:var(--cg-steel);transition:transform .25s var(--cg-ease)}
.cgx.pg-help .faq__item.open .faq__q::after{transform:rotate(45deg)}
.cgx.pg-help .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--cg-ease)}
.cgx.pg-help .faq__item.open .faq__a{grid-template-rows:1fr}
.cgx.pg-help .faq__a > div{overflow:hidden;padding:0 22px 20px;color:var(--cg-steel);font-size:1rem;line-height:1.65}

/* ---- legal pages ---- */
.cgx.pg-legal .legal{max-width:72ch;margin-inline:auto}
.cgx.pg-legal .legal .updated{font-family:var(--font-mono);font-size:0.78rem;letter-spacing:.04em;color:var(--cg-steel);margin-top:8px}

/* ---- signup page ---- */
.cgx.pg-signup .plan-chip{display:inline-flex;align-items:center;gap:8px;background:var(--x-layer);border:1px solid var(--x-line);border-radius:999px;padding:6px 14px;font-size:0.86rem;font-weight:700;color:var(--cg-ink);margin-bottom:18px}
.cgx.pg-signup .agree{display:flex;gap:11px;align-items:flex-start;color:var(--cg-steel);font-size:0.88rem;margin-bottom:20px}
.cgx.pg-signup .agree input{margin-top:3px;flex:none}
.cgx.pg-signup .prooflist{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.cgx.pg-signup .prooflist li{display:flex;gap:9px;align-items:flex-start;font-size:0.94rem;color:oklch(0.84 0.01 252)}
.cgx.pg-signup .prooflist .ck{width:20px;height:20px;flex:none;border-radius:6px;display:grid;place-items:center;font-size:0.8rem;background:oklch(1 0 0 / .1);border:1px solid oklch(1 0 0 / .18);color:var(--cg-silver-light)}

/* ---- blog index page ---- */
.cg2 .blog-hero{padding:clamp(48px,7vw,88px) 0 clamp(24px,4vw,40px)}
.cg2 .blog-hero .inner{max-width:60ch}
.cg2 .blog-hero h1{font-size:clamp(2.3rem,5vw,3.6rem);margin:18px 0 0;letter-spacing:-0.035em}
.cg2 .blog-hero .lead{margin-top:18px;max-width:58ch}
.cg2 .blog-sec{padding:0 0 clamp(56px,8vw,104px)}
.cg2 .blog-sec .sec-head{margin-bottom:34px}
.cg2 .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:980px){.cg2 .blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cg2 .blog-grid{grid-template-columns:1fr}}
.cg2 .bcard{display:flex;flex-direction:column;background:var(--cg-surface);border:1px solid var(--cg-line);border-radius:var(--cg-radius);overflow:hidden;box-shadow:var(--cg-shadow-sm);transition:transform .25s var(--cg-ease),box-shadow .25s var(--cg-ease),border-color .25s}
.cg2 .bcard:hover{transform:translateY(-4px);box-shadow:var(--cg-shadow-md);border-color:var(--cg-line-strong)}
.cg2 .bcard__img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--cg-silver-light);border-bottom:1px solid var(--cg-line)}
.cg2 .bcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--cg-ease)}
.cg2 .bcard:hover .bcard__img img{transform:scale(1.03)}
.cg2 .bcard__body{display:flex;flex-direction:column;gap:11px;padding:22px 22px 24px;flex:1}
.cg2 .bcard__meta{display:flex;align-items:center;gap:12px;font-size:0.8rem;color:var(--cg-steel);font-weight:600}
.cg2 .bcard__tag{text-transform:capitalize;color:var(--cg-accent)}
.cg2 .bcard__meta time{font-variant-numeric:tabular-nums}
.cg2 .bcard h3{font-size:clamp(1.15rem,1.7vw,1.35rem);font-weight:700;letter-spacing:-0.02em;line-height:1.18}
.cg2 .bcard h3 a{color:var(--cg-ink)}
.cg2 .bcard h3 a:hover{color:var(--cg-steel)}
.cg2 .bcard__body>p{color:var(--cg-steel);font-size:0.96rem;line-height:1.5;margin:0;text-wrap:pretty}
.cg2 .bcard__more{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px dashed var(--cg-line);font-size:0.85rem;color:var(--cg-steel)}
.cg2 .bcard__more a{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--cg-ink)}
.cg2 .bcard__more a:hover{color:var(--cg-steel)}
.cg2 .bcard__more a .arrow{transition:transform .25s var(--cg-ease)}
.cg2 .bcard__more a:hover .arrow{transform:translateX(4px)}
.cg2 .blog-empty{text-align:center;padding:clamp(48px,8vw,80px) 24px;border:1px dashed var(--cg-line-strong);border-radius:var(--cg-radius-lg);background:var(--cg-surface);color:var(--cg-steel)}
.cg2 .blog-empty .ic{font-size:2rem;margin-bottom:12px}
.cg2 .blog-cta{padding:0 0 clamp(56px,8vw,104px)}
.cg2 .blog-cta .card{background:var(--cg-ink);color:var(--cg-canvas);border-radius:var(--cg-radius-lg);box-shadow:var(--cg-shadow-lg);padding:clamp(40px,6vw,64px) clamp(28px,5vw,56px);text-align:center;position:relative;overflow:hidden}
.cg2 .blog-cta .card::before{content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:620px;height:480px;background:radial-gradient(circle,oklch(1 0 0 /.12),transparent 60%);pointer-events:none}
.cg2 .blog-cta h2{position:relative;color:var(--cg-canvas);font-size:clamp(1.7rem,3.4vw,2.5rem)}
.cg2 .blog-cta p{position:relative;color:oklch(0.80 0.01 252);max-width:50ch;margin:14px auto 0}
.cg2 .blog-cta .frow{position:relative;margin-top:28px}
.cg2 .blog-cta .btn-primary{background:var(--cg-canvas);color:var(--cg-ink)}

/* ====================================================================
   Phase 4 — Command Center app screen components
   ==================================================================== */

/* ---- App button system (savebar + general app CTAs) ---- */
.cg2 .cg-btn {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:700;font-size:0.92rem;border:1px solid transparent;
  border-radius:11px;padding:11px 18px;cursor:pointer;white-space:nowrap;
  transition:transform .15s var(--cg-ease),background .18s,border-color .18s,box-shadow .18s
}
.cg2 .cg-btn--primary {
  background:var(--cg-ink);color:var(--cg-canvas);box-shadow:var(--cg-shadow-sm)
}
.cg2 .cg-btn--primary:hover { transform:translateY(-1px);box-shadow:var(--cg-shadow-md) }
.cg2 .cg-btn--ghost {
  background:var(--cg-surface);color:var(--cg-ink);border-color:var(--cg-line-strong)
}
.cg2 .cg-btn--ghost:hover { border-color:var(--cg-steel);background:var(--cg-surface-2) }
.cg2 .cg-btn:focus-visible { outline:2px solid var(--cg-accent);outline-offset:2px }

/* ---- Sticky save bar ---- */
.cg2 .cg-savebar {
  position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:6px;padding:14px 18px;border:1px solid var(--cg-line);
  border-radius:var(--cg-radius,14px);background:oklch(1 0 0 / .82);
  backdrop-filter:blur(12px);box-shadow:var(--cg-shadow-md)
}
.cg2 .cg-savebar .st {
  font-size:0.86rem;color:var(--cg-steel);display:inline-flex;align-items:center;gap:7px
}
.cg2 .cg-savebar .grp { display:flex;gap:10px }

/* ---- Avatar row (identity section of edit-assistant) ---- */
.cg2 .cg-avatar-row { display:flex;align-items:center;gap:16px;margin-bottom:20px }
.cg2 .cg-avatar-lg {
  width:64px;height:64px;border-radius:16px;flex:none;
  background:conic-gradient(from 140deg,var(--cg-silver),var(--cg-steel),var(--cg-silver));
  display:grid;place-items:center;font-size:1.6rem;color:var(--cg-canvas)
}
.cg2 .cg-avatar-lg img {
  width:42px;height:42px;border-radius:50%;filter:grayscale(1) brightness(1.35)
}
.cg2 .cg-avatar-meta { min-width:0 }
.cg2 .cg-avatar-meta b { display:block;font-size:1.05rem;font-weight:800;letter-spacing:-0.02em }
.cg2 .cg-avatar-meta span { font-size:0.85rem;color:var(--cg-steel) }

/* ---- FAQ accordion (dashboard operator panel) ---- */
.cg2 .cg-faq { display:flex;flex-direction:column;gap:8px }
.cg2 .cg-faq__item {
  border:1px solid var(--cg-line);border-radius:12px;
  background:var(--cg-surface-2);overflow:hidden;transition:border-color .2s var(--cg-ease)
}
.cg2 .cg-faq__item.is-open { border-color:var(--cg-line-strong);background:var(--cg-surface) }
.cg2 .cg-faq__q {
  width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;
  border:0;background:none;cursor:pointer;text-align:left;font:inherit;
  font-size:0.95rem;font-weight:700;color:var(--cg-ink);letter-spacing:-0.01em
}
.cg2 .cg-faq__q i {
  font-size:1.1rem;color:var(--cg-steel);margin-left:auto;flex:none;
  transition:transform .25s var(--cg-ease)
}
.cg2 .cg-faq__item.is-open .cg-faq__q i { transform:rotate(180deg);color:var(--cg-ink) }
.cg2 .cg-faq__a { display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--cg-ease) }
.cg2 .cg-faq__item.is-open .cg-faq__a { grid-template-rows:1fr }
.cg2 .cg-faq__a-inner { overflow:hidden;min-height:0 }
.cg2 .cg-faq__a p { margin:0;padding:0 16px 16px 44px;color:var(--cg-steel);font-size:0.9rem;line-height:1.6 }
.cg2 .cg-faq__q:focus-visible { outline:2px solid var(--cg-accent);outline-offset:-2px }
@media (prefers-reduced-motion: reduce) {
  .cg2 .cg-faq__a { transition:none }
  .cg2 .cg-faq__q i { transition:none }
}

/* ---- Chat source chip pills ---- */
.cg2 .srcs { display:flex;flex-wrap:wrap;gap:6px;margin-top:10px }
.cg2 .srcs .s {
  font-size:0.68rem;font-weight:700;background:var(--cg-surface-2);
  border:1px solid var(--cg-line);border-radius:999px;padding:3px 9px;
  display:inline-flex;align-items:center;gap:5px;
  color:inherit;text-decoration:none;transition:border-color .15s
}
.cg2 .srcs .s:hover { border-color:var(--cg-line-strong) }
.cg2 .srcs .s i { color:var(--cg-steel);font-size:0.85rem }
.cg2 .blog-cta .btn-primary:hover{background:var(--cg-silver-light)}