/* Wedget marketing site, landing styles. Depends on tokens/base/components. */
body.mkt{background:#fff}

/* announcement */
.announce{background:var(--ink);color:#cdd9ef;font-size:13.5px;text-align:center;padding:9px 16px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.announce .aibadge{background:var(--color-primary);color:#fff;font-size:10.5px;font-weight:var(--fw-bold);padding:2px 7px;border-radius:5px;letter-spacing:.04em}
.announce a{color:#fff;font-weight:var(--fw-semi)}
.announce .x{margin-left:14px;color:#64748b;cursor:pointer}

/* header */
.mhead{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border-3)}
.mhead .in{max-width:var(--container);margin:0 auto;height:66px;display:flex;align-items:center;gap:18px;padding:0 24px}
.mnav{display:flex;gap:4px;margin-left:8px}
.mnav a{padding:8px 13px;border-radius:var(--r-sm);font-size:14.5px;font-weight:var(--fw-semi);color:var(--slate-600)}
.mnav a:hover{background:var(--surface-1);color:var(--ink)}
.mhead .spacer{flex:1}
.viewtoggle{display:inline-flex;background:var(--surface-4);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:3px}
.viewtoggle button{padding:6px 14px;font-size:13px;font-weight:var(--fw-semi);color:var(--slate-500);border-radius:7px}
.viewtoggle button.is-active{background:#fff;color:var(--color-primary);box-shadow:var(--shadow-xs)}
.langsw{display:inline-flex;background:var(--blue-50);border-radius:var(--r-sm);padding:2px}
.langsw button{padding:5px 9px;font-size:12px;font-weight:var(--fw-bold);color:var(--slate-500);border-radius:7px}
.langsw button.is-active{background:var(--color-primary);color:#fff}
.mhead .signin{font-size:14.5px;font-weight:var(--fw-semi);color:var(--ink);padding:8px 10px}
@media (max-width:920px){.mnav,.viewtoggle{display:none}}

/* hero */
.hero{max-width:var(--container);margin:0 auto;padding:64px 24px 40px;display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero h1{margin:18px 0 0}
.hero .hsub{font-size:18.5px;color:var(--slate-600);line-height:1.55;margin:18px 0 26px;max-width:520px}
.hero .hctas{display:flex;gap:12px;flex-wrap:wrap}
.hero .hnote{font-size:13px;color:var(--text-faint);margin-top:16px}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding-top:40px}.hero .mock{display:none}}

/* mock inbox */
.mock{background:#fff;border:1px solid var(--border-2);border-radius:18px;box-shadow:0 30px 70px -28px rgba(15,23,42,.32);overflow:hidden}
.mock .bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--border-3)}
.mock .bar i{width:11px;height:11px;border-radius:50%}
.mock .bar .r{background:#ff5f57}.mock .bar .y{background:#febc2e}.mock .bar .g{background:#28c840}
.mock .bar .ttl{margin-left:8px;font-weight:var(--fw-bold);font-size:13px;color:var(--slate-700);font-family:var(--font-head)}
.mock .bar .on{margin-left:auto;font-size:12px;color:var(--green-600);display:flex;align-items:center;gap:5px}
.mock .bar .on::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-500)}
.mock .body{display:grid;grid-template-columns:148px 1fr}
.mock .convs{border-right:1px solid var(--border-3);padding:8px}
.mock .convs .lbl{font-size:10px;font-weight:var(--fw-bold);color:var(--text-faint);letter-spacing:.05em;padding:6px 8px}
.mock .ci{display:flex;gap:7px;padding:8px;border-radius:10px}
.mock .ci.sel{background:var(--blue-50)}
.mock .ci .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.mock .ci .nm{font-size:12px;font-weight:var(--fw-semi);color:var(--ink);display:flex;justify-content:space-between}
.mock .ci .nm small{color:var(--text-faint);font-weight:400}
.mock .ci .pv{font-size:11px;color:var(--slate-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock .thread{padding:14px}
.mock .thr-top{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:12.5px;font-weight:var(--fw-bold);color:var(--ink)}
.mock .thr-top .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.mock .b-in,.mock .b-out{font-size:12.5px;line-height:1.45;padding:9px 12px;border-radius:14px;max-width:80%;margin-bottom:8px}
.mock .b-in{background:#fff;border:1px solid var(--border-2);color:var(--ink);border-bottom-left-radius:4px}
.mock .b-out{background:var(--color-primary);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.mock .ai-sugg{border:1px dashed var(--blue-200);background:var(--blue-50);border-radius:12px;padding:10px 12px;margin-top:6px}
.mock .ai-sugg .l{font-size:10.5px;font-weight:var(--fw-bold);color:var(--color-primary);letter-spacing:.03em;display:flex;align-items:center;gap:5px;margin-bottom:4px}
.mock .ai-sugg .t{font-size:12px;color:var(--slate-700);line-height:1.4}

/* logo cloud */
.cloud{text-align:center;padding:28px 24px 8px}
.cloud .l{font-size:12.5px;font-weight:var(--fw-semi);color:var(--text-faint);letter-spacing:.04em;margin-bottom:16px}
.cloud .logos{display:flex;flex-wrap:wrap;justify-content:center;gap:36px;opacity:.55}
.cloud .logos span{font-family:var(--font-head);font-weight:var(--fw-x);font-size:19px;color:var(--slate-500)}

/* section shell */
.sec{max-width:var(--container);margin:0 auto;padding:80px 24px}
.sec.alt{background:var(--surface-1)}
.sec-h{text-align:center;max-width:680px;margin:0 auto 48px}
.sec-h h2{margin:10px 0 12px}
.sec-h p{font-size:17px;color:var(--slate-600)}
.band{background:var(--surface-1)}

/* features */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fcard{background:#fff;border:1px solid var(--border-2);border-radius:16px;padding:26px;box-shadow:var(--shadow-xs);transition:transform .16s,box-shadow .2s}
.fcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.fcard .ic{width:46px;height:46px;border-radius:12px;background:var(--blue-50);color:var(--color-primary);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.fcard .ic svg{width:24px;height:24px}
.fcard h4{font-size:18px;margin-bottom:8px}
.fcard p{font-size:14.5px;color:var(--slate-600);line-height:1.55;margin-bottom:14px}
.fcard .bul{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--slate-700);margin-top:7px}
.fcard .bul svg{width:16px;height:16px;color:var(--green-600);flex:none}
@media (max-width:860px){.feat-grid{grid-template-columns:1fr}}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;position:relative}
.step{text-align:center}
.step .n{width:54px;height:54px;border-radius:50%;background:var(--blue-50);color:var(--color-primary);font-family:var(--font-head);font-weight:var(--fw-x);font-size:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;border:2px solid var(--blue-100)}
.step:last-child .n{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.step h4{font-size:17px;margin-bottom:8px}
.step p{font-size:14px;color:var(--slate-600);line-height:1.55;max-width:280px;margin:0 auto}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:36px}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .n{font-family:var(--font-head);font-weight:var(--fw-x);font-size:44px;color:var(--color-primary);letter-spacing:-.02em}
.stat .l{font-size:14px;color:var(--slate-600);margin-top:4px}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr);gap:32px}}

/* testimonials */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:#fff;border:1px solid var(--border-2);border-radius:16px;padding:26px}
.tcard .q{font-size:15.5px;line-height:1.6;color:var(--ink);margin-bottom:18px}
.tcard .who{display:flex;align-items:center;gap:11px}
.tcard .who .nm{font-size:14px;font-weight:var(--fw-bold);color:var(--ink)}
.tcard .who .r{font-size:12.5px;color:var(--slate-500)}
@media (max-width:860px){.tst-grid{grid-template-columns:1fr}}

/* pricing */
.bill-toggle{display:flex;align-items:center;justify-content:center;gap:12px;margin:-24px 0 36px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.pcard{background:#fff;border:1px solid var(--border-2);border-radius:18px;padding:30px 26px;position:relative}
.pcard.pop{border-color:var(--color-primary);box-shadow:0 18px 40px -18px rgba(37,99,235,.45)}
.pcard .pop-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--color-primary);color:#fff;font-size:11.5px;font-weight:var(--fw-bold);padding:4px 13px;border-radius:var(--r-pill);letter-spacing:.03em}
.pcard .pn{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:19px;color:var(--ink)}
.pcard .pd{font-size:13.5px;color:var(--slate-500);margin:4px 0 16px}
.pcard .amt{font-family:var(--font-head);font-weight:var(--fw-x);font-size:42px;color:var(--ink);letter-spacing:-.02em}
.pcard .amt small{font-size:14px;font-weight:var(--fw-semi);color:var(--slate-500);font-family:var(--font-body)}
.pcard .pfeat{margin:18px 0;display:flex;flex-direction:column;gap:11px}
.pcard .pfeat li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--slate-700)}
.pcard .pfeat svg{width:17px;height:17px;color:var(--green-600);flex:none;margin-top:1px}
@media (max-width:860px){.price-grid{grid-template-columns:1fr}}

/* faq */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--border);padding:18px 0}
.faq summary{font-size:16px;font-weight:var(--fw-semi);color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--text-faint);font-weight:400}
.faq details[open] summary::after{content:"-"}
.faq p{font-size:14.5px;color:var(--slate-600);line-height:1.6;margin-top:12px}

/* CTA band */
.ctaband{max-width:var(--container);margin:0 auto;padding:0 24px 80px}
.ctaband .in{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 60%,#1e40af 100%);border-radius:24px;padding:56px 32px;text-align:center;color:#fff;box-shadow:0 24px 60px -16px rgba(15,23,42,.4)}
.ctaband h2{color:#fff;max-width:640px;margin:0 auto 12px}
.ctaband p{color:#dbe7fe;font-size:17px;margin-bottom:24px}
.ctaband .btn--ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
.ctaband .btn--ghost:hover{background:rgba(255,255,255,.2)}
.ctaband .btn--light{background:#fff;color:var(--color-primary)}

/* footer */
.mfoot{background:var(--ink);color:#94a3b8;padding:56px 24px 30px}
.mfoot .in{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.mfoot .brand .word{color:#fff}
.mfoot .ftag{font-size:13.5px;margin-top:14px;max-width:260px;line-height:1.55}
.mfoot h5{color:#fff;font-size:13px;font-weight:var(--fw-bold);margin-bottom:14px;text-transform:uppercase;letter-spacing:.04em}
.mfoot a{display:block;color:#94a3b8;font-size:13.5px;margin-bottom:9px}
.mfoot a:hover{color:#fff}
.mfoot .bot{max-width:var(--container);margin:36px auto 0;padding-top:22px;border-top:1px solid #1e293b;display:flex;justify-content:space-between;font-size:13px;flex-wrap:wrap;gap:10px}
@media (max-width:760px){.mfoot .in{grid-template-columns:1fr 1fr}}

/* floating demo chat widget */
.demo-launch{position:fixed;bottom:22px;right:22px;width:58px;height:58px;border-radius:50%;background:var(--color-primary);
  box-shadow:0 12px 28px -8px rgba(37,99,235,.65);display:flex;align-items:center;justify-content:center;color:#fff;z-index:60;transition:transform .2s}
.demo-launch:hover{transform:scale(1.06)} .demo-launch svg{width:26px;height:26px}
.demo-panel{position:fixed;bottom:92px;right:22px;width:360px;max-width:calc(100vw - 28px);height:520px;max-height:calc(100vh - 120px);
  background:#fff;border-radius:18px;box-shadow:var(--shadow-pop);z-index:60;display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(14px) scale(.98);transform-origin:bottom right;pointer-events:none;transition:.24s cubic-bezier(.34,1.3,.5,1)}
.demo-panel.open{opacity:1;transform:none;pointer-events:auto}
.demo-panel .dh{background:linear-gradient(135deg,var(--blue-600),var(--blue-700));color:#fff;padding:18px 18px 16px}
.demo-panel .dh .t{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:17px;display:flex;align-items:center;gap:8px}
.demo-panel .dh .s{font-size:12.5px;opacity:.9;margin-top:2px}
.demo-panel .dbody{flex:1;overflow-y:auto;padding:16px;background:var(--surface-1);display:flex;flex-direction:column;gap:9px}
.demo-panel .di,.demo-panel .do{font-size:13.5px;line-height:1.45;padding:9px 12px;border-radius:14px;max-width:84%}
.demo-panel .di{background:#fff;border:1px solid var(--border-2);align-self:flex-start;border-bottom-left-radius:4px}
.demo-panel .do{background:var(--color-primary);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.demo-panel .qr{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.demo-panel .qr button{border:1.5px solid var(--blue-200);color:var(--color-primary);background:#fff;border-radius:var(--r-pill);padding:8px 14px;font-size:13px;font-weight:var(--fw-semi);text-align:left}
.demo-panel .qr button:hover{background:var(--blue-50)}
.demo-panel .dfoot{border-top:1px solid var(--border-2);padding:11px 14px;font-size:11px;color:var(--text-faint);text-align:center}