/* =====================================================================
   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:hidden}
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}}

/* 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:74px;display:grid;place-items:center;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:100%;object-fit:contain;border-radius:6px;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 .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}