/* Kavchat marketing site. One stylesheet for LTR and RTL: logical properties only. */
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-soft: #eff6ff;
  --secondary: #0f766e;
  --secondary-soft: #f0fdfa;
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
  --wrap: 1120px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Hebrew", "Noto Sans Arabic", "Noto Sans Thai", "Leelawadee UI", Thonburi, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; color: var(--text); background: var(--bg); }
img, svg { max-width: 100%; display: block; }
a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-dark); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; letter-spacing: -.01em; }
/* Thai stacks vowels and tone marks above and below the line, so it needs more room */
:lang(th) h1, :lang(th) h2, :lang(th) h3 { line-height: 1.45; letter-spacing: 0; }
:lang(th) .chat-body { line-height: 1.6; }
:lang(th) .chip, :lang(th) .eyebrow, :lang(th) .btn, :lang(th) .lang-list a, :lang(th) .ai-badge { line-height: 1.7; }
:lang(th) .price strong { line-height: 1.2; }
h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--text); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 12px; color: #fff; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px; padding: .65em 1.25em; border-radius: 10px; font: inherit; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: #cbd5e1; color: var(--text); }
.btn-lg { min-height: 52px; padding-inline: 1.6em; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(8px); border-block-end: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.15rem; }
.brand svg { width: 32px; height: 32px; }
.brand small { font-weight: 500; color: var(--muted); font-size: .8rem; }
.nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav a { color: var(--text); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 500; }
.nav a:hover { background: var(--bg); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.menu-toggle { display: none; margin-inline-start: auto; background: none; border: 1px solid var(--line); border-radius: 10px; width: 44px; height: 44px; cursor: pointer; color: var(--text); }
.menu-toggle svg { margin: auto; width: 22px; height: 22px; flex: none; }
/* ב-iOS סמל בלי רוחב מוגדר מתכווץ לאפס בתוך הכפתור. כשהתפריט פתוח מוצג X */
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Language switcher */
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-weight: 500; }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); min-width: 170px; z-index: 60; }
.lang li a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--text); text-decoration: none; }
.lang li a:hover, .lang li a[aria-current="true"] { background: var(--primary-soft); }

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  .nav-panel { display: none; position: absolute; inset-inline: 0; top: 64px; background: var(--surface); border-block-end: 1px solid var(--line); box-shadow: var(--shadow); padding: 12px 20px 20px; }
  .nav-panel.open { display: block; }
  .nav { flex-direction: column; align-items: stretch; margin: 0 0 12px; }
  .nav a { padding: 12px; }
  .header-actions { flex-wrap: wrap; }
  .header-actions .btn { flex: 1 1 auto; }
  .lang ul { inset-inline-end: auto; inset-inline-start: 0; }
  /* בתפריט הנפתח בנייד הרשימה צפה מתחת לכותרת הדבוקה ונחתכת בתחתית המסך. כאן היא נפתחת בתוך התפריט, והתפריט נגלל */
  .nav-panel { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; padding-block-end: 96px; }
  .lang[open] { flex: 1 1 100%; }
  .lang ul { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-block-start: 6px; box-shadow: none; min-width: 0; }
}
@media (min-width: 901px) {
  .nav-panel { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
}
/* site.js adds .nav-compact above 900px when the labels of a language do not fit on one row */
.nav a, .brand { white-space: nowrap; }
.brand { flex: none; }
.nav-compact .menu-toggle { display: inline-flex; }
.nav-compact .nav-panel { display: none; position: absolute; inset-inline: 0; top: 64px; background: var(--surface); border-block-end: 1px solid var(--line); box-shadow: var(--shadow); padding: 12px 20px 20px; }
.nav-compact .nav-panel.open { display: block; }
.nav-compact .nav { flex-direction: column; align-items: stretch; margin: 0 0 12px; }
.nav-compact .nav a { padding: 12px; }
.nav-compact .header-actions { flex-wrap: wrap; }
.nav-compact .header-actions .btn { flex: 1 1 auto; }
.nav-compact .lang ul { inset-inline-end: auto; inset-inline-start: 0; }
.nav-compact .nav-panel { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; padding-block-end: 96px; }
.nav-compact .lang[open] { flex: 1 1 100%; }
.nav-compact .lang ul { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-block-start: 6px; box-shadow: none; min-width: 0; }

/* Sections */
section { padding-block: 72px; }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }
.section-head { max-width: 720px; margin-block-end: 40px; }
.section-head p { color: var(--muted); font-size: 1.1rem; }
.center { text-align: center; margin-inline: auto; }
.eyebrow { display: inline-block; color: var(--secondary); background: var(--secondary-soft); font-weight: 600; font-size: .9rem; padding: 4px 12px; border-radius: 999px; margin-block-end: 16px; }

/* Hero */
.hero { padding-block: 64px 72px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero .lead { font-size: 1.2rem; color: var(--muted); max-width: 36em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 28px 12px; }
.hero-note { color: var(--muted); font-size: .95rem; margin: 0; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding-block: 40px 56px; }
}

/* Phone demo */
.phone { width: 100%; max-width: 340px; margin-inline: auto; background: #0f172a; border-radius: 36px; padding: 12px; box-shadow: 0 30px 60px rgba(15, 23, 42, .18); }
.phone-screen { position: relative; height: 560px; background: var(--bg); border-radius: 26px; overflow: hidden; }
/* The live bot (iframe) covers the static sample once it reports ready (site.js); until then the sample shows */
.demo-live { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); opacity: 0; pointer-events: none; }
.demo.live .demo-live { opacity: 1; pointer-events: auto; }
.demo.live .demo-static { visibility: hidden; }
.demo:not(.live) .demo-caption { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) { .demo-live { transition: opacity .3s ease; } }
@media (max-width: 900px) { .phone-screen { height: 520px; } }
.chat-head { display: flex; align-items: center; gap: 10px; background: var(--primary); color: #fff; padding: 14px 16px; }
.chat-head svg { width: 32px; height: 32px; border-radius: 8px; background: #fff; }
.chat-head strong { display: block; font-size: .95rem; }
.chat-head span { font-size: .78rem; opacity: .9; }
.chat-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 20px; font-size: .9rem; line-height: 1.45; }
.bubble { max-width: 85%; padding: 9px 12px; border-radius: 16px; }
.bubble.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-end-start-radius: 4px; }
.bubble.user { align-self: flex-end; background: var(--primary); color: #fff; border-end-end-radius: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: .82rem; padding: 6px 11px; border-radius: 999px; border: 1px solid #bfdbfe; color: var(--primary-dark); background: var(--primary-soft); }
.demo-caption { text-align: center; color: var(--muted); font-size: .9rem; margin-block-start: 14px; }

/* Cards */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.section-alt .card { background: var(--bg); }
.card p { color: var(--muted); margin: 0; }
.icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); margin-block-end: 14px; }
.icon svg { width: 22px; height: 22px; }
.install { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.install li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.install span { font-size: .8rem; font-weight: 600; color: var(--muted); }
.install code { display: inline-block; max-width: 100%; font-size: .78rem; line-height: 1.5; color: #e2e8f0; background: #0f172a; border-radius: 6px; padding: 3px 8px; direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.step-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 700; margin-block-end: 14px; }

/* Platforms and languages */
.lang-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.lang-list a { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 500; color: var(--text); text-decoration: none; }
.lang-list a:hover { border-color: var(--secondary); color: var(--secondary); }
.lang-list a[aria-current="true"] { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.lang-box { margin-block-start: 32px; padding: 28px; border-radius: var(--radius); background: var(--secondary-soft); border: 1px solid #ccfbf1; }
.lang-box h3 { color: var(--secondary); font-size: 1.3rem; }
.lang-box p { margin: 0; color: var(--muted); }

/* Optional AI */
.ai-box { margin-block-start: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 32px; border-radius: var(--radius); background: var(--primary-soft); border: 1px solid #bfdbfe; }
.ai-box h3 { font-size: 1.3rem; }
.ai-box p { color: var(--muted); margin: 0; }
.ai-badge { display: inline-block; font-size: .85rem; font-weight: 600; color: var(--primary-dark); background: var(--surface); border: 1px solid #bfdbfe; padding: 3px 12px; border-radius: 999px; margin-block-end: 12px; }
.ai-list { list-style: none; padding: 0; margin: 0 0 16px; }
.ai-list li { position: relative; padding-inline-start: 28px; margin-block-end: 10px; }
.ai-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%231d4ed8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ai-box .ai-note { font-size: .95rem; }
@media (max-width: 760px) { .ai-box { grid-template-columns: 1fr; gap: 16px; padding: 24px; } }

/* Comparison */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 18px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--line); }
tbody tr:last-child th, tbody tr:last-child td { border-block-end: 0; }
thead th { background: var(--bg); font-size: .95rem; }
tbody th { font-weight: 600; white-space: nowrap; }
.compare td.ours { background: #f5f9ff; }
.compare-note { margin-block-start: 20px; color: var(--muted); max-width: 760px; }
@media (max-width: 640px) {
  .compare thead { display: none; }
  .compare tr { display: block; padding: 14px 16px; border-block-end: 1px solid var(--line); }
  .compare tbody tr:last-child { border-block-end: 0; }
  .compare th, .compare td { display: block; padding: 4px 0; border: 0; white-space: normal; }
  .compare td.ours { background: none; }
  .compare td::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 600; color: var(--muted); }
}

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 24px; justify-content: center; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
.plan { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
.plan.featured { border: 2px solid var(--primary); box-shadow: var(--shadow); }
.plan h3 { font-size: 1.3rem; margin: 0 0 8px; }
.plan-badge { position: absolute; top: -13px; inset-inline-start: 24px; background: var(--primary); color: #fff; font-size: .8rem; font-weight: 600; padding: 3px 12px; border-radius: 999px; }
.price { display: flex; align-items: baseline; gap: 6px; margin-block-end: 4px; }
.price strong { font-size: 2.6rem; line-height: 1; }
.price span { color: var(--muted); }
.price-alt { color: var(--secondary); font-weight: 500; font-size: .95rem; min-height: 1.6em; }
.plan ul { list-style: none; padding: 0; margin: 20px 0 24px; flex: 1; }
.plan li { position: relative; padding-inline-start: 28px; margin-block-end: 10px; }
.plan li::before { content: ""; position: absolute; inset-inline-start: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--secondary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%230f766e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.plan li.lead::before { display: none; }
.plan li.lead { padding-inline-start: 0; font-weight: 600; }
.price-note { text-align: center; color: var(--muted); margin-block-start: 24px; }
.price-more { text-align: center; margin: 8px 0 0; }
.yes { color: var(--secondary); font-weight: 600; }
.no { color: #64748b; }
.features-table td, .features-table th { text-align: start; }
.features-table td { white-space: nowrap; }
@media (max-width: 640px) { .features-table td { white-space: normal; } th, td { padding: 12px; } tbody th { white-space: normal; } }

/* FAQ */
.faq { max-width: 820px; margin-inline: auto; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-block-end: 10px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 20px; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--primary); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 20px 18px; margin: 0; color: var(--muted); }

/* CTA band */
.cta-band { background: var(--primary); color: #fff; border-radius: 20px; padding: 48px 32px; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #dbeafe; font-size: 1.1rem; max-width: 600px; margin-inline: auto; }
.cta-band .btn-primary { background: #fff; color: var(--primary-dark); margin-block-start: 12px; }
.cta-band .btn-primary:hover { background: #eff6ff; }

/* Page header and documents */
.page-head { padding-block: 56px 24px; }
.page-head p { color: var(--muted); font-size: 1.15rem; max-width: 640px; }
.doc { max-width: 780px; padding-block: 48px 72px; }
.doc h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.doc h2 { font-size: 1.3rem; margin-block-start: 2em; }
.doc ul { padding-inline-start: 1.3em; }
.doc li { margin-block-end: .5em; }
.doc table { margin-block: 1em; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.doc-meta { color: var(--muted); font-size: .95rem; margin-block-end: 24px; }
.doc-shots { display: flex; flex-wrap: wrap; gap: 16px; margin: 1.2em 0; }
.doc-shots img { width: min(100%, 300px); height: auto; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
.doc-note { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; border-radius: 10px; padding: 10px 14px; font-size: .95rem; margin-block-end: 24px; }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding-block-end: 72px; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-grid address { font-style: normal; color: var(--muted); }
.big-link { font-size: 1.3rem; font-weight: 600; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.not-found { text-align: center; padding-block: 96px; }

/* Footer */
.site-footer { background: var(--text); color: #cbd5e1; padding-block: 48px 32px; font-size: .95rem; margin-block-start: 0; }
.site-footer a { color: #e2e8f0; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 32px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin-block-end: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-block-end: 8px; }
.footer-langs { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 1.1rem; margin-block-end: 10px; }
.footer-brand svg { width: 28px; height: 28px; }
.footer-bottom { border-block-start: 1px solid #1e293b; margin-block-start: 32px; padding-block-start: 20px; color: #94a3b8; font-size: .9rem; }
.footer-bottom p { margin: 0 0 4px; }

/* Developer docs: sidebar on the inline start, collapsible menu on mobile, code always LTR */
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.docs-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start; padding-block: 40px 72px; }
.docs-side { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; font-size: .95rem; padding-inline-end: 4px; }
.docs-mobile { display: none; }
.docs-group { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 22px 0 6px; padding-inline: 10px; }
.docs-layout nav > .docs-group:first-child { margin-block-start: 0; }
.docs-layout nav ul { list-style: none; margin: 0; padding: 0; }
.docs-layout nav a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--text); text-decoration: none; line-height: 1.4; }
.docs-layout nav a:hover { background: var(--surface); color: var(--primary-dark); }
.docs-layout nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.docs-layout nav .docs-toc { margin: 4px 0 8px; margin-inline-start: 12px; padding-inline-start: 6px; border-inline-start: 2px solid var(--line); }
.docs-layout nav .docs-toc a { font-size: .88rem; color: var(--muted); padding-block: 4px; }
.docs-layout nav .docs-toc a:hover { color: var(--primary-dark); }
.docs-layout nav .docs-toc code { font-size: .95em; }
.nav a[aria-current="page"] { color: var(--primary-dark); background: var(--primary-soft); }

.docs-body { min-width: 0; max-width: 820px; }
.docs-body h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
.docs-body .lead { font-size: 1.15rem; color: var(--muted); }
.docs-body h2 { font-size: 1.5rem; margin-block-start: 2.2em; }
.docs-body h3 { font-size: 1.12rem; margin-block-start: 1.7em; }
.docs-body ul, .docs-body ol { padding-inline-start: 1.4em; margin: 0 0 1em; }
.docs-body li { margin-block-end: .5em; }
.docs-body :not(pre) > code { font-size: .88em; background: #eef2f7; border: 1px solid var(--line); border-radius: 6px; padding: .05em .35em; direction: ltr; unicode-bidi: isolate; overflow-wrap: break-word; }
.docs-body .table-wrap { margin-block: 1em 1.4em; }
.docs-body table { font-size: .95rem; }
.docs-body th, .docs-body td { padding: 10px 14px; }
.docs-body td:first-child code { white-space: nowrap; }
.docs-body .doc-note { margin-block: 1em; }
.endpoint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.docs-body .endpoint code { font-size: .95em; }
.method { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-size: .78rem; padding: 3px 8px; border-radius: 6px; background: var(--secondary-soft); color: var(--secondary); border: 1px solid #ccfbf1; }

.code, .code-tabs { margin-block: 1em 1.4em; border-radius: 12px; background: #0f172a; color: #e2e8f0; overflow: hidden; border: 1px solid #1e293b; }
.code-tabs .code { margin: 0; border: 0; border-radius: 0; }
.code-tabs.js .code-head { display: none; }
.code-head { display: flex; align-items: center; gap: 8px; min-height: 40px; padding-block: 4px; padding-inline: 14px 6px; background: #1e293b; font-size: .82rem; color: #94a3b8; }
.code pre { margin: 0; padding: 14px 16px; overflow-x: auto; direction: ltr; text-align: left; font-size: .86rem; line-height: 1.6; tab-size: 4; }
.code pre:focus-visible { outline-offset: -3px; }
.code pre code { white-space: pre; }
.copy-btn { margin-inline-start: auto; flex: none; font: inherit; font-size: .8rem; font-weight: 600; color: #e2e8f0; background: transparent; border: 1px solid #334155; border-radius: 8px; padding: 0 12px; min-height: 32px; cursor: pointer; }
.copy-btn:hover { background: #334155; }
.code-tablist { display: flex; align-items: center; gap: 2px; padding-inline: 6px; background: #1e293b; border-block-end: 1px solid #334155; overflow-x: auto; }
.code-tablist [role="tab"] { flex: none; font: inherit; font-size: .85rem; color: #94a3b8; background: none; border: 0; border-block-end: 2px solid transparent; padding: 10px 11px 8px; cursor: pointer; white-space: nowrap; }
.code-tablist [role="tab"]:hover { color: #e2e8f0; }
.code-tablist [role="tab"][aria-selected="true"] { color: #fff; border-block-end-color: #60a5fa; }
.code-tablist .copy-btn { margin-block: 4px; }

.doc-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-block: 1em; }
.doc-card { display: block; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.doc-card:hover { color: inherit; border-color: #93c5fd; box-shadow: var(--shadow); }
.doc-card h3 { color: var(--text); margin-block-end: .4em; }
.doc-card p { font-size: .95rem; }

.docs-pager { display: flex; gap: 16px; margin-block-start: 56px; padding-block-start: 24px; border-block-start: 1px solid var(--line); }
.docs-pager a { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 48%; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; }
.docs-pager a:hover { border-color: #93c5fd; }
.docs-pager .next { margin-inline-start: auto; text-align: end; }
.docs-pager span { font-size: .85rem; color: var(--muted); }

@media (max-width: 900px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block-start: 20px; }
  .docs-side { display: none; }
  .docs-mobile { display: block; margin-block-end: 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .docs-mobile summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; font-weight: 600; }
  .docs-mobile summary::-webkit-details-marker { display: none; }
  .docs-mobile summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--primary); }
  .docs-mobile[open] summary::after { content: "\2212"; }
  .docs-mobile nav { padding: 4px 8px 14px; border-block-start: 1px solid var(--line); }
  .docs-mobile .docs-group { margin-block-start: 16px; }
  .docs-layout nav a { padding-block: 9px; }
  .docs-body h2 { font-size: 1.35rem; }
  .code pre { font-size: .8rem; padding: 12px 14px; }
}
@media (max-width: 640px) {
  .docs-body table thead { display: none; }
  .docs-body table tr { display: block; padding: 12px 14px; border-block-end: 1px solid var(--line); }
  .docs-body table tbody tr:last-child { border-block-end: 0; }
  .docs-body table td { display: block; padding: 2px 0; border: 0; }
  .docs-body table td:first-child { font-weight: 600; padding-block-end: 4px; }
  .docs-body table td:not(:first-child)[data-label]:not([data-label=""])::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); font-size: .85rem; }
  .docs-body table td:empty { display: none; }
  .docs-body td code { overflow-wrap: anywhere; }
}
.code-tablist [role="tab"], .code-label { direction: ltr; unicode-bidi: isolate; }

/* Small screens: start button pinned to the bottom (site.js shows it when no other start button is in view).
   It sits on the same row as the chat launcher (56px, 20px from the inline end), so both stay usable. */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta { display: block; position: fixed; z-index: 40; inset-block-end: 20px; inset-inline-start: 16px; inset-inline-end: 92px; visibility: hidden; opacity: 0; transform: translateY(16px); }
  .sticky-cta.solo { inset-inline-end: 16px; }
  .sticky-cta.show { visibility: visible; opacity: 1; transform: none; }
  .sticky-cta .btn { min-height: 56px; border-radius: 999px; box-shadow: 0 6px 20px rgba(15, 23, 42, .22); }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .sticky-cta { transition: opacity .2s ease, transform .2s ease, visibility .2s; }
}

/* ad landing pages (/start/): the ad's story continued, two ways in */
.lp-hero h1 { margin-block-end: 8px; }
.lp-time { display: inline-block; font-weight: 700; color: #fff; background: #0b1437; padding: 4px 14px; border-radius: 999px; margin-block-end: 16px; font-variant-numeric: tabular-nums; }
.lp-hl { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; color: var(--secondary); margin: 0 0 18px; }
.lp-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-block: 28px 0; max-width: 40em; }
.lp-note { color: var(--muted); font-size: .9rem; margin: 8px 0 0; }
.cta-band .lp-ctas { margin-inline: auto; text-align: start; }
@media (max-width: 640px) { .lp-ctas { grid-template-columns: 1fr; } }

/* Product pages: the widget demo (/widget/) and live chat (/live-chat/) */
.narrow { max-width: 760px; }
.feature-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 28px 0 0; }
.feature-link { display: flex; align-items: center; gap: 16px; padding: 22px 24px; background: var(--surface); border: 2px solid var(--primary); border-radius: var(--radius); color: var(--text); text-decoration: none; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.feature-link:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37, 99, 235, .18); color: var(--text); }
.feature-link .icon { flex: none; margin: 0; }
.fl-text { display: grid; gap: 4px; flex: 1; min-width: 0; }
.fl-text strong { font-size: 1.15rem; color: var(--primary); }
.fl-text span { color: var(--muted); }
.fl-arrow { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 1.25rem; font-weight: 700; }
[dir="rtl"] .fl-arrow { transform: scaleX(-1); }
@media (max-width: 720px) { .feature-links { grid-template-columns: 1fr; } }
.wg-section { padding-block: 8px 56px; }
.wg-demo { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.wg-controls { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.wg-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.wg-group legend { font-size: .85rem; font-weight: 700; color: var(--muted); padding: 0; margin-block-end: 6px; }
.segs { display: flex; flex-wrap: wrap; gap: 6px; }
.seg { position: relative; }
.seg input, .swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; background: var(--bg); color: var(--text); }
.seg input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.seg input:focus-visible + span, .swatch input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
.swatch { position: relative; }
.sw0 { --c: #2563eb; } .sw1 { --c: #0f766e; } .sw2 { --c: #7c3aed; } .sw3 { --c: #ea580c; } .sw4 { --c: #111827; }
.swatch span { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--c); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--text); }
.browser { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.browser-bar { display: flex; gap: 6px; padding: 10px 14px; background: #f1f5f9; border-block-end: 1px solid var(--line); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.wg-frame { display: block; width: 100%; height: 620px; border: 0; }
.wg-hint { font-size: .9rem; color: var(--muted); margin: 10px 0 0; }
.snippet { background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: .85rem; text-align: left; }
.lc-list { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.lc-list li { position: relative; padding-inline-start: 30px; }
.lc-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--secondary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-width: 860px) {
  .wg-demo { grid-template-columns: 1fr; }
  .wg-frame { height: 560px; }
}

/* utilities instead of inline style attributes (CSP: style-src without 'unsafe-inline') */
.mt-40 { margin-block-start: 40px; }
.pt-16 { padding-block-start: 16px; }
.card-contact { padding-block: 24px; }
.h-card { font-size: 1.2rem; }
.h-sub { margin-block-start: 20px; font-size: 1rem; }
.text-strong { color: var(--text); }